/* ═══ Pronunciation Lab — /luyen-pronunciation ═══ */
.pron-page{ background:#F4F6FB; min-height:100vh; padding:26px 0 70px; }
.pron-page *{ box-sizing:border-box; }
.pron-wrap{ max-width:1080px; margin:0 auto; padding:0 18px; }

/* ── HERO ── */
.pron-hero{ position:relative; overflow:hidden; border-radius:22px; padding:34px 36px 28px;
  background:linear-gradient(125deg,#0F1B2D 0%,#132B45 55%,#0E3B4E 100%); color:#fff;
  box-shadow:0 18px 44px rgba(15,27,45,.35); margin-bottom:26px; }
.pron-hero-glow{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(600px 260px at 85% -20%,rgba(34,211,238,.25),transparent 60%),
             radial-gradient(420px 220px at 5% 130%,rgba(124,92,255,.22),transparent 60%); }
.pron-hero-main{ position:relative; max-width:720px; }
.pron-hero-badge{ display:inline-block; font-size:10.5px; font-weight:900; letter-spacing:2px;
  color:#22D3EE; background:rgba(34,211,238,.12); border:1px solid rgba(34,211,238,.35);
  border-radius:999px; padding:6px 14px; margin-bottom:14px; }
.pron-hero h1{ margin:0 0 8px; font-size:34px; font-weight:800; letter-spacing:-.5px; color:#fff; }
.pron-hero h1 span{ color:#22D3EE; }
.pron-hero p{ margin:0 0 18px; font-size:14.5px; line-height:1.65; color:rgba(255,255,255,.78); }
.pron-hero p b{ color:#fff; }

.pron-search{ display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18); border-radius:14px; padding:6px 6px 6px 16px; backdrop-filter:blur(6px); }
.pron-search-ic{ font-size:15px; opacity:.8; }
.pron-search input{ flex:1; background:transparent; border:0; outline:none; color:#fff; font-size:14px; min-height:0; box-shadow:none; }
.pron-search input::placeholder{ color:rgba(255,255,255,.45); }
.pron-search button{ flex:0 0 auto; border:0; border-radius:10px; padding:10px 20px; font-weight:800; font-size:13.5px;
  background:linear-gradient(120deg,#22D3EE,#3B82F6); color:#06222E; cursor:pointer; transition:.15s; }
.pron-search button:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(34,211,238,.4); }
.pron-search-result{ position:relative; margin-top:12px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:14px; }
.pron-sr-word{ font-weight:800; color:#22D3EE; }
.pron-sr-hint{ font-size:11.5px; color:rgba(255,255,255,.5); margin-left:4px; }
.pron-sr-err{ color:#FCA5A5; font-size:13px; }
.pron-sr-loading{ color:rgba(255,255,255,.6); font-size:13px; }
.pron-phone{ border:1px solid rgba(34,211,238,.4); background:rgba(34,211,238,.12); color:#7DF3FF;
  font-size:15px; font-weight:800; border-radius:10px; padding:6px 12px; cursor:pointer; transition:.15s; }
.pron-phone:hover{ background:rgba(34,211,238,.28); transform:translateY(-1px); }

.pron-hero-stats{ position:relative; display:flex; gap:26px; margin-top:20px; flex-wrap:wrap; }
.pron-stat b{ display:block; font-size:22px; font-weight:800; color:#22D3EE; }
.pron-stat span{ font-size:11.5px; color:rgba(255,255,255,.55); font-weight:600; }

/* ── CHART ── */
.pron-group{ margin-bottom:22px; }
.pron-group-title{ font-size:13px; font-weight:900; letter-spacing:1.2px; text-transform:uppercase;
  color:#64748B; margin:0 0 10px 4px; }
.pron-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.pron-chip{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; text-align:left;
  background:#fff; border:1px solid #E6EAF2; border-radius:14px; padding:13px 15px; cursor:pointer;
  transition:.16s; box-shadow:0 1px 4px rgba(15,23,42,.04); }
.pron-chip:hover{ transform:translateY(-2px); border-color:#7DD3FC; box-shadow:0 10px 22px rgba(14,116,144,.14); }
.pron-chip-ipa{ font-size:21px; font-weight:800; color:#0F172A; letter-spacing:.5px; }
.pron-chip.is-voiced .pron-chip-ipa{ color:#0E7490; }
.pron-chip-sub{ font-size:10.5px; color:#94A3B8; font-weight:600; line-height:1.35; }
.pron-legend{ font-size:12px; color:#94A3B8; margin:6px 4px 0; }
.pron-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; background:#0F172A; vertical-align:-1px; }
.pron-dot--voiced{ background:#0E7490; }

/* ── PANEL ── */
body.pron-lock{ overflow:hidden; }
.pron-modal[hidden]{ display:none !important; }
.pron-modal{ position:fixed; inset:0; z-index:99990; display:flex; align-items:center; justify-content:center;
  background:rgba(10,16,28,.62); backdrop-filter:blur(6px); padding:18px; }
.pron-panel{ width:min(680px,96vw); max-height:92vh; overflow-y:auto; background:#fff; border-radius:20px;
  box-shadow:0 30px 90px rgba(0,0,0,.45); padding:20px 22px 22px; animation:pronPop .2s cubic-bezier(.34,1.4,.64,1); }
@keyframes pronPop{ from{ transform:scale(.95); opacity:0; } to{ transform:none; opacity:1; } }
.pron-panel-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.pron-panel-id{ display:flex; align-items:center; gap:14px; }
.pron-big-ipa{ display:inline-flex; align-items:center; gap:8px; font-size:30px; font-weight:800; color:#0E7490;
  background:#ECFEFF; border:1.5px solid #A5F3FC; border-radius:16px; padding:8px 18px; cursor:pointer; transition:.15s; }
.pron-big-ipa:hover{ background:#CFFAFE; }
.pron-big-spk{ font-size:17px; }
.pron-panel-meta b{ display:block; font-size:14.5px; color:#0F172A; }
.pron-panel-meta small{ color:#94A3B8; font-size:11.5px; }
.pron-x{ width:34px; height:34px; border-radius:11px; border:1px solid #E6EAF2; background:#fff; cursor:pointer; font-size:15px;
  display:inline-grid; place-items:center; padding:0 !important; line-height:1 !important; }
.pron-x:hover{ background:#FEF2F2; border-color:#FCA5A5; }

.pron-tabs{ display:flex; gap:6px; background:#F1F5F9; border-radius:12px; padding:4px; margin-bottom:14px; }
.pron-tab{ flex:1; border:0; background:none; border-radius:9px; padding:9px 8px; font-size:12.5px; font-weight:800;
  color:#64748B; cursor:pointer; }
.pron-tab.is-on{ background:#fff; color:#0E7490; box-shadow:0 2px 8px rgba(15,23,42,.1); }

.pron-stage{ background:#0B1220; border-radius:16px; overflow:hidden; text-align:center; }
.pron-video{ width:100%; max-height:380px; display:block; margin:0 auto; background:#0B1220; }
.pron-hint{ margin:0; padding:9px 14px; font-size:12px; color:#94A3B8; background:#0F172A; text-align:left; }
.pron-step-img{ width:100%; max-height:400px; object-fit:contain; display:block; background:#fff; }
.pron-stage[data-ppane="steps"]{ background:#fff; border:1px solid #E6EAF2; }
.pron-step-note{ text-align:left; padding:11px 16px; background:#F0F9FF; border-top:1px solid #E0F2FE; }
.pron-step-note p{ margin:0; font-size:13.5px; line-height:1.65; color:#0C4A6E; font-weight:600; }
.pron-step-note small{ display:block; margin-top:3px; font-size:11px; line-height:1.5; color:#64748B; font-style:italic; }
.pron-stepbar{ display:flex; align-items:center; justify-content:center; gap:16px; padding:10px; background:#F8FAFC; }
.pron-stepbar span{ font-size:13px; font-weight:800; color:#0F172A; min-width:110px; }
.pron-stepbtn{ width:38px; height:38px; border-radius:50%; border:1px solid #CBD5E1; background:#fff; font-size:16px;
  cursor:pointer; transition:.14s;
  display:inline-grid; place-items:center; padding:0 !important; line-height:1 !important; }
.pron-stepbtn:hover{ background:#ECFEFF; border-color:#22D3EE; }

.pron-examples{ margin-top:14px; }
.pron-examples-label{ font-size:10.5px; font-weight:900; letter-spacing:1.4px; color:#94A3B8; margin-bottom:8px; }
.pron-example-row{ display:flex; gap:8px; flex-wrap:wrap; }
.pron-ex{ display:inline-flex; align-items:center; gap:8px; border:1px solid #BAE6FD; background:#F0F9FF;
  color:#075985; border-radius:999px; padding:8px 16px; font-size:14px; font-weight:700; cursor:pointer; transition:.15s; }
.pron-ex:hover{ background:#E0F2FE; transform:translateY(-1px); }
.pron-ex-play{ font-size:10px; color:#0284C7; }

/* ── DARK MODE ── */
html.ae-dark-mode .pron-page{ background:#0D1117; }
html.ae-dark-mode .pron-group-title{ color:#8B95A5; }
html.ae-dark-mode .pron-chip{ background:#161B26; border-color:rgba(255,255,255,.08); box-shadow:none; }
html.ae-dark-mode .pron-chip:hover{ border-color:rgba(34,211,238,.4); }
html.ae-dark-mode .pron-chip-ipa{ color:#E7ECF5; }
html.ae-dark-mode .pron-chip.is-voiced .pron-chip-ipa{ color:#5EEAD4; }
html.ae-dark-mode .pron-legend{ color:#64748B; }
html.ae-dark-mode .pron-dot{ background:#E7ECF5; }
html.ae-dark-mode .pron-panel{ background:#141926; }
html.ae-dark-mode .pron-panel-meta b{ color:#E7ECF5; }
html.ae-dark-mode .pron-big-ipa{ background:rgba(34,211,238,.1); border-color:rgba(34,211,238,.3); color:#7DF3FF; }
html.ae-dark-mode .pron-x{ background:#1B2130; border-color:rgba(255,255,255,.1); color:#CBD5E1; }
html.ae-dark-mode .pron-tabs{ background:#0F1420; }
html.ae-dark-mode .pron-tab{ color:#8B95A5; }
html.ae-dark-mode .pron-tab.is-on{ background:#1E2536; color:#7DF3FF; }
html.ae-dark-mode .pron-stage[data-ppane="steps"]{ border-color:rgba(255,255,255,.08); }
html.ae-dark-mode .pron-stepbar{ background:#0F1420; }
html.ae-dark-mode .pron-stepbar span{ color:#E7ECF5; }
html.ae-dark-mode .pron-step-note{ background:#0F1420; border-top-color:rgba(255,255,255,.08); }
html.ae-dark-mode .pron-step-note p{ color:#BAE6FD; }
html.ae-dark-mode .pron-step-note small{ color:#7C90AB; }
html.ae-dark-mode .pron-stepbtn{ background:#1B2130; border-color:rgba(255,255,255,.14); color:#E7ECF5; }
html.ae-dark-mode .pron-ex{ background:rgba(2,132,199,.12); border-color:rgba(56,189,248,.3); color:#7DD3FC; }

/* mobile */
@media (max-width:640px){
  .pron-hero{ padding:24px 20px; }
  .pron-hero h1{ font-size:26px; }
  .pron-grid{ grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); }
  .pron-search button{ padding:10px 14px; }
  .pron-panel{ padding:16px 14px; }
}

/* ═══ FULL-PAGE: ẩn header/footer theme (pattern vocab vc-full-page) ═══ */
body.pron-full .hd, body.pron-full .ft, body.pron-full footer.ft,
body.pron-full .header-top, body.pron-full #cmplz-cookiebanner-container{ display:none !important; }
body.pron-full{ margin:0 !important; }
body.pron-full #wpadminbar{ display:none !important; }
body.pron-full.admin-bar{ margin-top:0 !important; padding-top:0 !important; }
.pron-page{ padding-top:0; }

/* topbar riêng */
.pron-topbar{ position:sticky; top:0; z-index:500; display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:10px 22px; background:rgba(15,27,45,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(34,211,238,.18); margin-bottom:24px; }
.pron-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.pron-brand-ic{ width:38px; height:38px; display:grid; place-items:center; font-size:19px;
  background:linear-gradient(135deg,#22D3EE33,#3B82F633); border:1px solid rgba(34,211,238,.35); border-radius:12px; }
.pron-brand span b{ display:block; color:#fff; font-size:14.5px; line-height:1.1; }
.pron-brand span small{ color:#22D3EE; font-size:10px; font-weight:700; letter-spacing:1px; }
.pron-topbar-right{ display:flex; gap:8px; align-items:center; }
.pron-top-link{ color:rgba(255,255,255,.75); text-decoration:none; font-size:12.5px; font-weight:700;
  padding:8px 13px; border-radius:10px; border:1px solid rgba(255,255,255,.12); transition:.15s; }
.pron-top-link:hover{ color:#fff; border-color:rgba(34,211,238,.5); background:rgba(34,211,238,.1); }
.pron-top-link--home{ font-size:15px; }

/* ── FIX ô tra âm: theme dark rule sơn input thành ô đen + viền riêng
      (container dư bên trong khung search). Ép input TRẦN tuyệt đối. ── */
.pron-search input, .pron-search input:focus, .pron-search input:hover,
html.ae-dark-mode .pron-search input, html.ae-dark-mode .pron-search input:focus,
html.theme-skeuo .pron-search input, html.theme-skeuo.ae-dark-mode .pron-search input,
body .pron-page .pron-search input{
  background:transparent !important; background-color:transparent !important;
  border:0 !important; box-shadow:none !important; outline:none !important;
  border-radius:0 !important; padding:10px 0 !important; margin:0 !important;
  color:#fff !important; -webkit-appearance:none !important; appearance:none !important;
  min-height:0 !important; height:auto !important; font-size:14px !important;
}
.pron-search input::placeholder{ color:rgba(255,255,255,.45) !important; }

/* ═══ 🎙️ NÓI TỰ DO ═══ */
.pron-fs{ background:#fff; border:1px solid #E6EAF2; border-radius:20px; padding:22px 24px; margin-bottom:26px;
  box-shadow:0 2px 12px rgba(15,23,42,.05); }
.pron-fs-head{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.pron-fs-head h2{ margin:0 0 6px; font-size:19px; font-weight:800; color:#0F172A; }
.pron-fs-head p{ margin:0; font-size:13.5px; color:#64748B; line-height:1.6; max-width:640px; }
.pron-fs-head p b{ color:#0F172A; }
.pron-fs-mic{ flex:0 0 auto; display:inline-flex; align-items:center; gap:10px; border:0; cursor:pointer;
  background:linear-gradient(120deg,#22D3EE,#3B82F6); color:#052430; font-weight:800; font-size:14px;
  border-radius:999px; padding:13px 24px; transition:.18s; box-shadow:0 8px 22px rgba(34,211,238,.35); text-decoration:none; }
.pron-fs-mic:hover{ transform:translateY(-2px); }
.pron-fs-mic.is-rec{ background:linear-gradient(120deg,#F87171,#DC2626); color:#fff; animation:pronPulse 1.2s infinite; }
.pron-fs-mic.is-busy{ opacity:.75; cursor:wait; }
.pron-fs-mic--login{ background:#F1F5F9; color:#334155; box-shadow:none; }
@keyframes pronPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(220,38,38,.4);} 50%{ box-shadow:0 0 0 12px rgba(220,38,38,0);} }
.pron-fs-mic-ic{ font-size:17px; }
.pron-fs-status{ margin-top:14px; font-size:13.5px; color:#334155; display:flex; align-items:center; gap:9px; }
.pron-fs-dot{ width:10px; height:10px; border-radius:50%; background:#DC2626; animation:pronBlink 1s infinite; }
@keyframes pronBlink{ 50%{ opacity:.25; } }
.pron-ai-spin2{ width:14px; height:14px; border:2.5px solid #BAE6FD; border-top-color:#0284C7; border-radius:50%;
  display:inline-block; animation:pronSpin2 .7s linear infinite; }
@keyframes pronSpin2{ to{ transform:rotate(360deg); } }
.pron-fs-result{ margin-top:18px; }
.pron-fs-label{ font-size:10.5px; font-weight:900; letter-spacing:1.4px; color:#0284C7; margin:16px 0 8px; }
.pron-fs-label small{ color:#94A3B8; letter-spacing:.3px; font-weight:700; text-transform:none; }
.pron-fs-transcript{ background:#F8FAFC; border:1px solid #EEF2F7; border-radius:14px; padding:14px 18px;
  font-size:15px; line-height:1.9; color:#0F172A; cursor:text; }
.pron-fs-perfect{ background:#ECFDF5; border:1px solid #D1FAE5; color:#047857; font-weight:700;
  border-radius:14px; padding:14px 18px; font-size:14px; }

/* popup phiên âm khi bấm từ trong transcript freestyle */
.pron-wpop{ position:absolute; z-index:99999; background:#fff; border:1px solid #BAE6FD; border-radius:13px;
  box-shadow:0 16px 44px rgba(2,132,199,.22); padding:12px 14px; max-width:min(340px,92vw); }
.pron-wpop-word{ font-weight:800; font-size:14px; color:#0F172A; margin-bottom:8px; }
.pron-wpop-body{ display:flex; gap:6px; flex-wrap:wrap; font-size:12.5px; color:#0284C7; align-items:center; }
.pron-wpop .pron-phone{ background:#F0F9FF; border-color:#7DD3FC; color:#075985; }
.pron-wpop-hint{ width:100%; font-size:10.5px; color:#94A3B8; margin-top:4px; }

/* dark mode freestyle */
html.ae-dark-mode .pron-fs{ background:#141926; border-color:rgba(255,255,255,.08); box-shadow:none; }
html.ae-dark-mode .pron-fs-head h2{ color:#E7ECF5; }
html.ae-dark-mode .pron-fs-head p{ color:#8B95A5; }
html.ae-dark-mode .pron-fs-head p b{ color:#E7ECF5; }
html.ae-dark-mode .pron-fs-status{ color:#CBD5E1; }
html.ae-dark-mode .pron-fs-transcript{ background:#0F1420; border-color:rgba(255,255,255,.08); color:#E7ECF5; }
html.ae-dark-mode .pron-fs-perfect{ background:rgba(5,150,105,.12); border-color:rgba(5,150,105,.3); color:#6EE7B7; }
html.ae-dark-mode .pron-wpop{ background:#141926; border-color:rgba(56,189,248,.35); }
html.ae-dark-mode .pron-wpop-word{ color:#E7ECF5; }
html.ae-dark-mode .pron-wpop .pron-phone{ background:rgba(2,132,199,.14); border-color:rgba(56,189,248,.35); color:#7DD3FC; }
html.ae-dark-mode .pron-fs-mic--login{ background:#1B2130; color:#CBD5E1; border:1px solid rgba(255,255,255,.14); }

/* ═══ v1.2 — 2 khu + mic panel + desc + replay + topbar mới ═══ */

/* topbar: nút Trang chủ + dark toggle */
.pron-top-home{ display:inline-flex; align-items:center; gap:7px; text-decoration:none; font-size:12.5px; font-weight:800;
  color:#052430; background:linear-gradient(120deg,#22D3EE,#3B82F6); border-radius:10px; padding:9px 16px; transition:.15s; }
.pron-top-home:hover{ transform:translateY(-1px); color:#052430; box-shadow:0 6px 16px rgba(34,211,238,.4); }
.pron-top-home span{ font-size:14px; }
.pron-top-icon{ width:36px; height:36px; border-radius:10px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06);
  cursor:pointer; font-size:15px; display:grid; place-items:center; transition:.15s; }
.pron-top-icon:hover{ border-color:rgba(34,211,238,.5); background:rgba(34,211,238,.12); }

/* view switcher 2 khu */
.pron-views{ display:flex; gap:8px; margin-bottom:20px; background:#fff; border:1px solid #E6EAF2; border-radius:16px;
  padding:6px; box-shadow:0 2px 10px rgba(15,23,42,.05); }
.pron-view-tab{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:9px; border:0; background:none;
  border-radius:12px; padding:13px 16px; font-size:14.5px; font-weight:800; color:#64748B; cursor:pointer; transition:.16s; }
.pron-view-tab:hover{ color:#0F172A; }
.pron-view-tab.is-on{ background:linear-gradient(125deg,#0F1B2D,#0E3B4E); color:#fff; box-shadow:0 6px 18px rgba(15,27,45,.3); }
.pron-view-tab.is-on .pron-vt-ic{ transform:scale(1.15); }
.pron-vt-ic{ font-size:17px; transition:.16s; }
.pron-vt-badge{ font-size:9.5px; font-weight:900; letter-spacing:1px; background:linear-gradient(120deg,#22D3EE,#3B82F6);
  color:#052430; border-radius:999px; padding:2.5px 8px; }
html.ae-dark-mode .pron-views{ background:#141926; border-color:rgba(255,255,255,.08); box-shadow:none; }
html.ae-dark-mode .pron-view-tab{ color:#8B95A5; }
html.ae-dark-mode .pron-view-tab.is-on{ background:linear-gradient(125deg,#1B2C45,#11455C); color:#fff; }

/* ═══ NÓI TỰ DO — panel micro kiểu SpeechAce ═══ */
.pron-fs2-stage{ position:relative; overflow:hidden; text-align:center; background:linear-gradient(155deg,#0F1B2D 0%,#12304A 60%,#0E3B4E 100%);
  border-radius:24px; padding:46px 28px 38px; color:#fff; box-shadow:0 18px 44px rgba(15,27,45,.35); }
.pron-fs2-stage::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(520px 240px at 50% -30%,rgba(34,211,238,.22),transparent 65%); }
.pron-fs2-badge{ display:inline-block; font-size:10px; font-weight:900; letter-spacing:2px; color:#22D3EE;
  background:rgba(34,211,238,.12); border:1px solid rgba(34,211,238,.35); border-radius:999px; padding:6px 14px; margin-bottom:14px; }
.pron-fs2-title{ margin:0 0 10px; font-size:28px; font-weight:800; letter-spacing:-.4px; color:#fff; }
.pron-fs2-title span{ color:#22D3EE; }
.pron-fs2-sub{ margin:0 auto 30px; font-size:14px; line-height:1.7; color:rgba(255,255,255,.75); max-width:560px; }
.pron-fs2-sub b{ color:#fff; }

.pron-mic{ position:relative; display:inline-grid; place-items:center; width:112px; height:112px; border:0; background:none;
  cursor:pointer; margin:0 auto; text-decoration:none; }
.pron-mic-ring{ position:absolute; inset:0; border-radius:50%; border:2px solid rgba(34,211,238,.4); animation:pronRing 2.4s ease-out infinite; }
@keyframes pronRing{ 0%{ transform:scale(.86); opacity:.9; } 70%{ transform:scale(1.22); opacity:0; } 100%{ opacity:0; } }
.pron-mic-core{ width:88px; height:88px; border-radius:50%; display:grid; place-items:center; color:#052430;
  background:linear-gradient(140deg,#7DF3FF,#22D3EE 45%,#3B82F6); box-shadow:0 14px 34px rgba(34,211,238,.45),inset 0 2px 6px rgba(255,255,255,.55);
  transition:.18s; font-size:30px; }
.pron-mic:hover .pron-mic-core{ transform:scale(1.06); }
.pron-mic.is-rec .pron-mic-core{ background:linear-gradient(140deg,#FCA5A5,#F87171 40%,#DC2626); color:#fff;
  box-shadow:0 14px 34px rgba(220,38,38,.5),inset 0 2px 6px rgba(255,255,255,.35); }
.pron-mic.is-rec .pron-mic-ring{ border-color:rgba(248,113,113,.6); animation-duration:1.1s; }
.pron-mic.is-busy .pron-mic-core{ filter:saturate(.4) brightness(.85); cursor:wait; }
.pron-mic--login .pron-mic-core{ background:#1E293B; color:#94A3B8; box-shadow:none; border:1.5px dashed rgba(255,255,255,.25); }
.pron-mic-label{ position:relative; margin-top:14px; font-size:13.5px; font-weight:700; color:rgba(255,255,255,.85); }
.pron-fs2-credits{ position:relative; margin-top:10px; display:inline-flex; align-items:center; gap:8px; font-size:12px;
  color:rgba(255,255,255,.65); background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13);
  border-radius:999px; padding:6px 14px; }
.pron-fs2-credits b{ color:#22D3EE; }
.pron-cr-dot{ width:7px; height:7px; border-radius:50%; background:#22D3EE; }
.pron-fs2-stage .pron-fs-status{ position:relative; justify-content:center; color:rgba(255,255,255,.85); margin-top:16px; display:flex; }

/* kết quả freestyle: card trắng tách riêng */
.pron-fs-card{ background:#fff; border:1px solid #E6EAF2; border-radius:18px; padding:18px 20px; margin-top:16px;
  box-shadow:0 2px 12px rgba(15,23,42,.05); text-align:left; }
html.ae-dark-mode .pron-fs-card{ background:#141926; border-color:rgba(255,255,255,.08); box-shadow:none; }
.pron-w{ border-bottom:1.5px dotted rgba(2,132,199,.55); cursor:pointer; border-radius:3px; transition:.12s; }
.pron-w:hover{ background:rgba(34,211,238,.14); border-bottom-style:solid; }
html.ae-dark-mode .pron-w{ border-bottom-color:rgba(125,211,252,.5); }
html.ae-dark-mode .pron-w:hover{ background:rgba(34,211,238,.14); }

/* nút 🔊 đọc cả từ */
.pron-word-spk{ border:1px solid rgba(34,211,238,.45); background:rgba(34,211,238,.12); border-radius:9px;
  font-size:13px; padding:4px 9px; cursor:pointer; margin-left:8px; transition:.14s; line-height:1; }
.pron-word-spk:hover{ background:rgba(34,211,238,.28); transform:translateY(-1px); }
.pron-sr-arrow{ color:rgba(255,255,255,.5); margin:0 2px; }
.pron-wpop .pron-word-spk{ border-color:#7DD3FC; background:#F0F9FF; }
html.ae-dark-mode .pron-wpop .pron-word-spk{ background:rgba(2,132,199,.14); border-color:rgba(56,189,248,.35); }

/* mô tả cách phát âm trong panel */
.pron-desc{ margin-top:14px; background:#F0F9FF; border:1px solid #BAE6FD; border-radius:14px; padding:13px 16px; }
.pron-desc-label{ font-size:10.5px; font-weight:900; letter-spacing:1.4px; color:#0284C7; margin-bottom:6px; }
.pron-desc p{ margin:0; font-size:13.5px; line-height:1.7; color:#0C4A6E; }
html.ae-dark-mode .pron-desc{ background:rgba(2,132,199,.1); border-color:rgba(56,189,248,.3); }
html.ae-dark-mode .pron-desc p{ color:#BAE6FD; }

/* nút replay animation */
.pron-video-wrap{ position:relative; }
.pron-replay{ position:absolute; inset:0; margin:auto; width:max-content; height:max-content;
  display:inline-flex; align-items:center; gap:9px; border:0; border-radius:999px; padding:12px 22px;
  background:rgba(10,16,28,.82); color:#fff; font-size:14px; font-weight:800; cursor:pointer;
  backdrop-filter:blur(4px); border:1.5px solid rgba(34,211,238,.5); transition:.15s; }
.pron-replay:hover{ background:rgba(14,59,78,.92); transform:scale(1.04); }
.pron-replay span{ color:#22D3EE; }

/* ═══ TRON THEME — FLAT + DARK MODE (nền dark-tech grid + glow cyan).
   Flat + LIGHT = base CSS phía trên (trang sáng trắng, thẻ trắng, hero navy).
   Toggle 🌙 đổi qua lại; skeuo có bộ da riêng bên dưới. ═══ */
html.ae-dark-mode:not(.theme-skeuo) .pron-page{
  background:
    radial-gradient(1000px 520px at 82% -12%, rgba(34,211,238,.14), transparent 62%),
    radial-gradient(760px 460px at 6% 112%, rgba(59,130,246,.12), transparent 62%),
    linear-gradient(180deg,#0A101C 0%,#0B1322 55%,#0A121F 100%) !important;
}
html.ae-dark-mode:not(.theme-skeuo) .pron-page::before{ content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(34,211,238,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,211,238,.055) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(1300px 900px at 50% 18%, #000 25%, transparent 78%);
  mask-image:radial-gradient(1300px 900px at 50% 18%, #000 25%, transparent 78%);
}
html.ae-dark-mode:not(.theme-skeuo) .pron-page::after{ content:''; position:fixed; left:0; right:0; top:0; height:1px; z-index:0;
  background:linear-gradient(90deg, transparent, rgba(34,211,238,.55), transparent); }
/* topbar PHẢI cao hơn content (bug: gộp chung z-index:1 làm tab đè menu khi kéo) */
.pron-wrap{ position:relative; z-index:1; }
.pron-topbar{ position:sticky; z-index:500; }

/* FLAT LIGHT — topbar & switch sáng (trang trắng cho đẹp, không glass tối) */
html:not(.ae-dark-mode):not(.theme-skeuo) .pron-topbar{
  background:rgba(255,255,255,.92); border-bottom:1px solid #E2E8F0; box-shadow:0 2px 10px rgba(15,23,42,.06); }
html:not(.ae-dark-mode):not(.theme-skeuo) .pron-brand span b{ color:#0F172A; }
html:not(.ae-dark-mode):not(.theme-skeuo) .pron-brand span small{ color:#0284C7; }
html:not(.ae-dark-mode):not(.theme-skeuo) .pron-brand-ic{ background:linear-gradient(135deg,#E0F2FE,#EDE9FE); border-color:#BAE6FD; }
html:not(.ae-dark-mode):not(.theme-skeuo) .pron-top-link{ color:#334155; border-color:#E2E8F0; background:#fff; }
html:not(.ae-dark-mode):not(.theme-skeuo) .pron-top-link:hover{ color:#0284C7; border-color:#7DD3FC; background:#F0F9FF; }
html:not(.ae-dark-mode):not(.theme-skeuo) .pron-skin-switch{ background:#F1F5F9; border-color:#E2E8F0; }
html:not(.ae-dark-mode):not(.theme-skeuo) .pron-skin-switch button{ color:#64748B; }
html:not(.ae-dark-mode):not(.theme-skeuo) .pron-skin-switch button.is-active{ background:#fff; color:#0284C7; box-shadow:0 1px 4px rgba(15,23,42,.12); }
html:not(.ae-dark-mode):not(.theme-skeuo) .pron-top-icon{ background:#fff; border-color:#E2E8F0; }

/* view switcher → glass tối */
html.ae-dark-mode:not(.theme-skeuo) .pron-views{ background:rgba(15,22,38,.72); border-color:rgba(34,211,238,.16); backdrop-filter:blur(10px);
  box-shadow:0 8px 26px rgba(4,10,20,.5); }
html.ae-dark-mode:not(.theme-skeuo) .pron-view-tab{ color:#8FA3BF; }
html.ae-dark-mode:not(.theme-skeuo) .pron-view-tab:hover{ color:#E7F4FF; }
html:not(.ae-dark-mode):not(.theme-skeuo) .pron-view-tab.is-on{ background:linear-gradient(125deg,#0284C7,#2563EB); }

/* chips âm → card tối viền cyan */
html.ae-dark-mode:not(.theme-skeuo) .pron-group-title{ color:#7C90AB; }
html.ae-dark-mode:not(.theme-skeuo) .pron-chip{ background:rgba(16,24,39,.78); border-color:rgba(148,163,184,.14); box-shadow:none; backdrop-filter:blur(4px); }
html.ae-dark-mode:not(.theme-skeuo) .pron-chip:hover{ border-color:rgba(34,211,238,.55); box-shadow:0 10px 26px rgba(34,211,238,.13); background:rgba(18,28,46,.9); }
html.ae-dark-mode:not(.theme-skeuo) .pron-chip-ipa{ color:#E7F4FF; }
html.ae-dark-mode:not(.theme-skeuo) .pron-chip.is-voiced .pron-chip-ipa{ color:#5EEAD4; }
html.ae-dark-mode:not(.theme-skeuo) .pron-chip-sub{ color:#7C90AB; }
html.ae-dark-mode:not(.theme-skeuo) .pron-legend{ color:#64748B; }
html.ae-dark-mode:not(.theme-skeuo) .pron-dot{ background:#E7F4FF; }

/* freestyle result cards tối */
html.ae-dark-mode:not(.theme-skeuo) .pron-fs-card{ background:rgba(16,24,39,.85); border-color:rgba(148,163,184,.12); box-shadow:none; }
html.ae-dark-mode:not(.theme-skeuo) .pron-fs-transcript{ background:#0B1220; border-color:rgba(255,255,255,.07); color:#E7ECF5; }
html.ae-dark-mode:not(.theme-skeuo) .pron-fs-perfect{ background:rgba(5,150,105,.12); border-color:rgba(5,150,105,.3); color:#6EE7B7; }
html.ae-dark-mode:not(.theme-skeuo) .pron-w{ border-bottom-color:rgba(125,211,252,.5); }

/* panel âm → dark glass (RIÊNG pane steps giữ trắng vì ảnh annotate nền trắng) */
html.ae-dark-mode:not(.theme-skeuo) .pron-panel{ background:#10192B; border:1px solid rgba(34,211,238,.16); }
html.ae-dark-mode:not(.theme-skeuo) .pron-panel-meta b{ color:#E7ECF5; }
html.ae-dark-mode:not(.theme-skeuo) .pron-panel-meta small{ color:#7C90AB; }
html.ae-dark-mode:not(.theme-skeuo) .pron-big-ipa{ background:rgba(34,211,238,.1); border-color:rgba(34,211,238,.32); color:#7DF3FF; }
html.ae-dark-mode:not(.theme-skeuo) .pron-big-ipa:hover{ background:rgba(34,211,238,.2); }
html.ae-dark-mode:not(.theme-skeuo) .pron-x{ background:#16203A; border-color:rgba(255,255,255,.1); color:#CBD5E1; }
html.ae-dark-mode:not(.theme-skeuo) .pron-tabs{ background:#0C1424; }
html.ae-dark-mode:not(.theme-skeuo) .pron-tab{ color:#8FA3BF; }
html.ae-dark-mode:not(.theme-skeuo) .pron-tab.is-on{ background:#1A2740; color:#7DF3FF; box-shadow:0 2px 10px rgba(4,10,20,.5); }
html.ae-dark-mode:not(.theme-skeuo) .pron-stepbar{ background:#0F1420; }
html.ae-dark-mode:not(.theme-skeuo) .pron-desc{ background:rgba(2,132,199,.1); border-color:rgba(56,189,248,.3); }
html.ae-dark-mode:not(.theme-skeuo) .pron-desc p{ color:#BAE6FD; }
html.ae-dark-mode:not(.theme-skeuo) .pron-ex{ background:rgba(2,132,199,.13); border-color:rgba(56,189,248,.32); color:#7DD3FC; }
html.ae-dark-mode:not(.theme-skeuo) .pron-ex:hover{ background:rgba(2,132,199,.24); }
html.ae-dark-mode:not(.theme-skeuo) .pron-examples-label{ color:#7C90AB; }

/* popup từ trong transcript tối */
html.ae-dark-mode:not(.theme-skeuo) .pron-wpop{ background:#141d30; border-color:rgba(56,189,248,.35); }
html.ae-dark-mode:not(.theme-skeuo) .pron-wpop-word{ color:#E7ECF5; }
html.ae-dark-mode:not(.theme-skeuo) .pron-wpop .pron-phone{ background:rgba(2,132,199,.14); border-color:rgba(56,189,248,.35); color:#7DD3FC; }

/* viền chip: thắng rule button !important từ template/css (sheet https legacy) */
.pron-chip{ border-color:#E6EAF2 !important; }
.pron-chip:hover{ border-color:#7DD3FC !important; }
html.ae-dark-mode:not(.theme-skeuo) .pron-chip{ border-color:rgba(148,163,184,.14) !important; }
html.ae-dark-mode:not(.theme-skeuo) .pron-chip:hover{ border-color:rgba(34,211,238,.55) !important; }

/* replay: góc dưới-phải, KHÔNG che hình; chỉ hiện khi animation đã chạy xong */
.pron-replay{ inset:auto; right:12px; bottom:12px; margin:0; padding:9px 16px; font-size:12.5px; }

/* nút Trang chủ: icon SVG cân chữ */
.pron-top-home{ gap:8px; font-size:13px; padding:10px 18px; }
.pron-top-home svg{ flex:0 0 auto; display:block; }

/* ═══ SKIN SWITCH (topbar) — flat/Tron look mặc định ═══ */
.pron-skin-switch{ display:flex; gap:3px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13);
  border-radius:11px; padding:3px; }
.pron-skin-switch button{ display:inline-flex; align-items:center; gap:5px; border:0; background:none;
  color:rgba(255,255,255,.55); font-size:11.5px; font-weight:800; border-radius:8px; padding:7px 11px; cursor:pointer; transition:.14s; }
.pron-skin-switch button.is-active{ background:rgba(34,211,238,.16); color:#7DF3FF; }
@media (max-width:760px){ .pron-skin-switch button span{ display:none; } .pron-top-link{ display:none; } }

/* ═══════════════════════════════════════════════════════════════════════
   SKEUO SKIN — iOS 6.1 + Aqua "thời Steve Jobs", ĐỦ light + dark.
   LIGHT = giấy linen ấm, nút bóng gloss Aqua xanh, thẻ ngà nổi khối.
   DARK  = gỗ walnut + da nâu, accent vàng đồng (đồng bộ site-skeuo dark).
   Kích hoạt: html.theme-skeuo (+ html.ae-dark-mode cho bản tối).
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────── SKEUO LIGHT ───────────────────────── */
html.theme-skeuo:not(.ae-dark-mode) .pron-page{
  background:
    radial-gradient(900px 420px at 85% -10%, rgba(90,169,230,.10), transparent 60%),
    linear-gradient(180deg,#F7F1E3 0%,#F2EAD6 55%,#EDE3CA 100%) !important;
}
html.theme-skeuo:not(.ae-dark-mode) .pron-page::before,
html.theme-skeuo:not(.ae-dark-mode) .pron-page::after{ display:none; }

/* topbar giấy + gloss */
html.theme-skeuo:not(.ae-dark-mode) .pron-topbar{
  background:linear-gradient(180deg,#FDFAF2 0%,#F1E9D4 100%);
  border-bottom:1px solid #CBBB92;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 2px 8px rgba(101,80,35,.14); }
html.theme-skeuo:not(.ae-dark-mode) .pron-brand span b{ color:#3B3324; text-shadow:0 1px 0 rgba(255,255,255,.7); }
html.theme-skeuo:not(.ae-dark-mode) .pron-brand span small{ color:#2F7BC4; }
html.theme-skeuo:not(.ae-dark-mode) .pron-brand-ic{
  background:linear-gradient(180deg,#EAF7FF,#BFE3F8); border:1px solid #7FB8DE;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 3px rgba(31,91,148,.25); }
html.theme-skeuo:not(.ae-dark-mode) .pron-top-link{
  color:#5B4636; border:1px solid #C9B98F; background:linear-gradient(180deg,#FFFEF9,#F0E8D2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 1px 3px rgba(101,80,35,.18); text-shadow:0 1px 0 rgba(255,255,255,.6); }
html.theme-skeuo:not(.ae-dark-mode) .pron-top-link:hover{ color:#1D6FA5; border-color:#7FB8DE; background:linear-gradient(180deg,#FDFEFF,#E4F2FC); }
html.theme-skeuo:not(.ae-dark-mode) .pron-top-home{
  background:linear-gradient(180deg,#9FD8F5 0%,#4C9FE0 48%,#2F7BC4 52%,#5AA9E6 100%);
  color:#07304E; border:1px solid #23639F; text-shadow:0 1px 0 rgba(255,255,255,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), inset 0 -7px 12px rgba(9,52,88,.22), 0 2px 6px rgba(31,91,148,.4); }
html.theme-skeuo:not(.ae-dark-mode) .pron-top-home:hover{ color:#07304E; box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 4px 12px rgba(31,91,148,.5); }
html.theme-skeuo:not(.ae-dark-mode) .pron-skin-switch{
  background:#E7DDC2; border:1px solid #C9B98F; box-shadow:inset 0 1px 3px rgba(101,80,35,.3); }
html.theme-skeuo:not(.ae-dark-mode) .pron-skin-switch button{ color:#8A7A5C; }
html.theme-skeuo:not(.ae-dark-mode) .pron-skin-switch button.is-active{
  background:linear-gradient(180deg,#FFFEF9,#EFE7D0); color:#7A5C24;
  box-shadow:inset 0 1px 0 #fff, 0 1px 3px rgba(101,80,35,.35); text-shadow:0 1px 0 rgba(255,255,255,.7); }
html.theme-skeuo:not(.ae-dark-mode) .pron-top-icon{
  background:linear-gradient(180deg,#FFFEF9,#F0E8D2); border:1px solid #C9B98F;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 1px 3px rgba(101,80,35,.2); }

/* view switcher = segmented control iOS6, tab active gloss Aqua */
html.theme-skeuo:not(.ae-dark-mode) .pron-views{
  background:linear-gradient(180deg,#FFFEF9,#F2EAD6); border:1px solid #CBBB92; backdrop-filter:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 2px 6px rgba(101,80,35,.15); }
html.theme-skeuo:not(.ae-dark-mode) .pron-view-tab{ color:#7A6A4A; text-shadow:0 1px 0 rgba(255,255,255,.6); }
html.theme-skeuo:not(.ae-dark-mode) .pron-view-tab:hover{ color:#3B3324; }
html.theme-skeuo:not(.ae-dark-mode) .pron-view-tab.is-on{
  background:linear-gradient(180deg,#9FD8F5 0%,#4C9FE0 48%,#2F7BC4 52%,#5AA9E6 100%);
  color:#07304E; text-shadow:0 1px 0 rgba(255,255,255,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), inset 0 -8px 14px rgba(9,52,88,.25), 0 3px 8px rgba(31,91,148,.35); }
html.theme-skeuo:not(.ae-dark-mode) .pron-vt-badge{
  background:linear-gradient(180deg,#F8E3A2,#D9AE52); color:#5A3F0C; box-shadow:inset 0 1px 0 rgba(255,255,255,.6); }

/* hero = thẻ giấy SÁNG (light mode phải dễ nhìn — không dùng ô tối) */
html.theme-skeuo:not(.ae-dark-mode) .pron-hero{
  background:linear-gradient(180deg,#FFFEF9 0%,#F6EFDD 60%,#EFE6CE 100%);
  border:1px solid #C9B98F; color:#3B3324;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 14px 34px rgba(101,80,35,.22); }
html.theme-skeuo:not(.ae-dark-mode) .pron-hero-glow{
  background:radial-gradient(600px 260px at 85% -20%,rgba(90,169,230,.14),transparent 60%),
             radial-gradient(420px 220px at 5% 130%,rgba(217,174,82,.12),transparent 60%); }
html.theme-skeuo:not(.ae-dark-mode) .pron-hero-badge{
  color:#8A6B2E; background:rgba(217,174,82,.14); border-color:rgba(178,138,52,.45); }
html.theme-skeuo:not(.ae-dark-mode) .pron-hero h1{ color:#3B3324; text-shadow:0 1px 0 rgba(255,255,255,.7); }
html.theme-skeuo:not(.ae-dark-mode) .pron-hero h1 span{ color:#1D6FA5; }
html.theme-skeuo:not(.ae-dark-mode) .pron-hero p{ color:#5B4636; }
html.theme-skeuo:not(.ae-dark-mode) .pron-hero p b{ color:#3B3324; }
html.theme-skeuo:not(.ae-dark-mode) .pron-search{
  background:#FFFDF6; border:1px solid #C9B98F; backdrop-filter:none;
  box-shadow:inset 0 2px 4px rgba(101,80,35,.14); }
html.theme-skeuo:not(.ae-dark-mode) .pron-search input,
html.theme-skeuo:not(.ae-dark-mode) .pron-search input:focus{ color:#3B3324 !important; }
html.theme-skeuo:not(.ae-dark-mode) .pron-search input::placeholder{ color:#8A7A5C !important; }
html.theme-skeuo:not(.ae-dark-mode) .pron-search button{
  background:linear-gradient(180deg,#9FD8F5 0%,#4C9FE0 48%,#2F7BC4 52%,#5AA9E6 100%);
  color:#07304E; border:1px solid #23639F; text-shadow:0 1px 0 rgba(255,255,255,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 2px 5px rgba(9,42,74,.5); }
html.theme-skeuo:not(.ae-dark-mode) .pron-sr-word{ color:#1D6FA5; }
html.theme-skeuo:not(.ae-dark-mode) .pron-sr-hint{ color:#8A7A5C; }
html.theme-skeuo:not(.ae-dark-mode) .pron-sr-loading{ color:#8A7A5C; }
html.theme-skeuo:not(.ae-dark-mode) .pron-sr-err{ color:#B91C1C; }
html.theme-skeuo:not(.ae-dark-mode) .pron-sr-arrow{ color:#8A7A5C; }
html.theme-skeuo:not(.ae-dark-mode) .pron-phone{
  background:linear-gradient(180deg,#EAF7FF,#BFE3F8); border:1px solid #7FB8DE; color:#0B4B7A;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 1px 3px rgba(31,91,148,.3); }
html.theme-skeuo:not(.ae-dark-mode) .pron-phone:hover{ background:linear-gradient(180deg,#F4FBFF,#D4EDFB); }
html.theme-skeuo:not(.ae-dark-mode) .pron-stat b{ color:#1D6FA5; }
html.theme-skeuo:not(.ae-dark-mode) .pron-stat span{ color:#8A7A5C; }

/* chips âm = nút ngà bóng nổi khối */
html.theme-skeuo:not(.ae-dark-mode) .pron-group-title{ color:#7A6A4A; text-shadow:0 1px 0 rgba(255,255,255,.75); }
html.theme-skeuo:not(.ae-dark-mode) .pron-chip{
  background:linear-gradient(180deg,#FFFEF8 0%,#F3EBD5 60%,#E9DFC3 100%);
  border:1px solid #C9B98F !important; border-radius:13px; backdrop-filter:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 2px 4px rgba(101,80,35,.2); }
html.theme-skeuo:not(.ae-dark-mode) .pron-chip:hover{
  border-color:#5AA9E6 !important; background:linear-gradient(180deg,#FDFEFF,#E6F3FC);
  box-shadow:inset 0 1px 0 #fff, 0 7px 16px rgba(47,123,196,.28); }
html.theme-skeuo:not(.ae-dark-mode) .pron-chip-ipa{ color:#3B3324; text-shadow:0 1px 0 rgba(255,255,255,.75); }
html.theme-skeuo:not(.ae-dark-mode) .pron-chip.is-voiced .pron-chip-ipa{ color:#1D6FA5; }
html.theme-skeuo:not(.ae-dark-mode) .pron-chip-sub{ color:#8A7A5C; }
html.theme-skeuo:not(.ae-dark-mode) .pron-legend{ color:#8A7A5C; }
html.theme-skeuo:not(.ae-dark-mode) .pron-dot{ background:#3B3324; }
html.theme-skeuo:not(.ae-dark-mode) .pron-dot--voiced{ background:#1D6FA5; }

/* panel âm = thẻ giấy, nút gloss */
html.theme-skeuo:not(.ae-dark-mode) .pron-modal{ background:rgba(59,47,30,.5); }
html.theme-skeuo:not(.ae-dark-mode) .pron-panel{
  background:linear-gradient(180deg,#FDFAF2,#F5EEDC); border:1px solid #C9B98F;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 26px 70px rgba(40,30,12,.5); }
html.theme-skeuo:not(.ae-dark-mode) .pron-panel-meta b{ color:#3B3324; }
html.theme-skeuo:not(.ae-dark-mode) .pron-panel-meta small{ color:#8A7A5C; }
html.theme-skeuo:not(.ae-dark-mode) .pron-big-ipa{
  background:linear-gradient(180deg,#EAF7FF,#C3E4F8); border:1.5px solid #7FB8DE; color:#0B4B7A;
  text-shadow:0 1px 0 rgba(255,255,255,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 2px 4px rgba(31,91,148,.25); }
html.theme-skeuo:not(.ae-dark-mode) .pron-big-ipa:hover{ background:linear-gradient(180deg,#F4FBFF,#D4EDFB); }
html.theme-skeuo:not(.ae-dark-mode) .pron-x{
  background:linear-gradient(180deg,#FFFEF9,#F0E8D2); border:1px solid #C9B98F; color:#5B4636;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 1px 3px rgba(101,80,35,.2); }
html.theme-skeuo:not(.ae-dark-mode) .pron-tabs{ background:#E7DDC2; box-shadow:inset 0 1px 3px rgba(101,80,35,.3); }
html.theme-skeuo:not(.ae-dark-mode) .pron-tab{ color:#7A6A4A; }
html.theme-skeuo:not(.ae-dark-mode) .pron-tab.is-on{
  background:linear-gradient(180deg,#FFFEF9,#F0E8D2); color:#1D6FA5;
  box-shadow:inset 0 1px 0 #fff, 0 1px 4px rgba(101,80,35,.35); text-shadow:0 1px 0 rgba(255,255,255,.7); }
html.theme-skeuo:not(.ae-dark-mode) .pron-stage[data-ppane="steps"]{ background:#FFFDF6; border-color:#C9B98F; }
html.theme-skeuo:not(.ae-dark-mode) .pron-stepbar{ background:#F2EAD6; }
html.theme-skeuo:not(.ae-dark-mode) .pron-stepbar span{ color:#3B3324; text-shadow:0 1px 0 rgba(255,255,255,.6); }
html.theme-skeuo:not(.ae-dark-mode) .pron-stepbtn{
  background:linear-gradient(180deg,#FFFEF9,#EFE7D0); border:1px solid #C9B98F; color:#5B4636;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 1px 3px rgba(101,80,35,.25); }
html.theme-skeuo:not(.ae-dark-mode) .pron-stepbtn:hover{ background:linear-gradient(180deg,#FDFEFF,#E4F2FC); border-color:#7FB8DE; }
html.theme-skeuo:not(.ae-dark-mode) .pron-step-note{ background:#FAF5E7; border-top-color:#E0D5B4; }
html.theme-skeuo:not(.ae-dark-mode) .pron-step-note p{ color:#5B4636; }
html.theme-skeuo:not(.ae-dark-mode) .pron-step-note small{ color:#8A7A5C; }
html.theme-skeuo:not(.ae-dark-mode) .pron-desc{ background:#FAF5E7; border:1px solid #E0D5B4; box-shadow:inset 0 1px 0 rgba(255,255,255,.7); }
html.theme-skeuo:not(.ae-dark-mode) .pron-desc-label{ color:#8A6B2E; }
html.theme-skeuo:not(.ae-dark-mode) .pron-desc p{ color:#5B4636; }
html.theme-skeuo:not(.ae-dark-mode) .pron-examples-label{ color:#8A7A5C; }
html.theme-skeuo:not(.ae-dark-mode) .pron-ex{
  background:linear-gradient(180deg,#FFFEF9,#F5EDD8); border:1px solid #C9B98F; color:#7A5C24;
  text-shadow:0 1px 0 rgba(255,255,255,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 1px 3px rgba(101,80,35,.22); }
html.theme-skeuo:not(.ae-dark-mode) .pron-ex:hover{ background:linear-gradient(180deg,#FDFEFF,#E4F2FC); border-color:#7FB8DE; color:#0B4B7A; }
html.theme-skeuo:not(.ae-dark-mode) .pron-ex-play{ color:#2F7BC4; }

/* mic stage = thẻ giấy SÁNG, mic gloss Aqua */
html.theme-skeuo:not(.ae-dark-mode) .pron-fs2-stage{
  background:linear-gradient(180deg,#FFFEF9 0%,#F4EDDA 60%,#EFE6CE 100%);
  border:1px solid #C9B98F; box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 14px 34px rgba(101,80,35,.2); }
html.theme-skeuo:not(.ae-dark-mode) .pron-fs2-stage::before{
  background:radial-gradient(520px 240px at 50% -30%,rgba(90,169,230,.13),transparent 65%); }
html.theme-skeuo:not(.ae-dark-mode) .pron-fs2-badge{ color:#8A6B2E; background:rgba(217,174,82,.14); border-color:rgba(178,138,52,.45); }
html.theme-skeuo:not(.ae-dark-mode) .pron-fs2-title{ color:#3B3324; text-shadow:0 1px 0 rgba(255,255,255,.7); }
html.theme-skeuo:not(.ae-dark-mode) .pron-fs2-title span{ color:#1D6FA5; }
html.theme-skeuo:not(.ae-dark-mode) .pron-fs2-sub{ color:#5B4636; }
html.theme-skeuo:not(.ae-dark-mode) .pron-fs2-sub b{ color:#3B3324; }
html.theme-skeuo:not(.ae-dark-mode) .pron-mic-core{
  background:linear-gradient(140deg,#C9E9FB 0%,#5AA9E6 45%,#2F7BC4 100%); color:#07304E;
  box-shadow:0 14px 34px rgba(31,91,148,.4), inset 0 2px 6px rgba(255,255,255,.65); }
html.theme-skeuo:not(.ae-dark-mode) .pron-mic-ring{ border-color:rgba(47,123,196,.4); }
html.theme-skeuo:not(.ae-dark-mode) .pron-mic-label{ color:#5B4636; }
html.theme-skeuo:not(.ae-dark-mode) .pron-mic--login .pron-mic-core{ background:#EFE7D0; color:#8A7A5C; border-color:#C9B98F; }
html.theme-skeuo:not(.ae-dark-mode) .pron-fs2-credits{ color:#8A7A5C; background:#FFFDF6; border-color:#C9B98F; }
html.theme-skeuo:not(.ae-dark-mode) .pron-fs2-credits b{ color:#1D6FA5; }
html.theme-skeuo:not(.ae-dark-mode) .pron-cr-dot{ background:#2F7BC4; }
html.theme-skeuo:not(.ae-dark-mode) .pron-fs2-stage .pron-fs-status{ color:#5B4636; }

/* kết quả freestyle + popup từ = giấy */
html.theme-skeuo:not(.ae-dark-mode) .pron-fs-card{
  background:linear-gradient(180deg,#FDFAF2,#F5EEDC); border:1px solid #C9B98F;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 2px 8px rgba(101,80,35,.15); }
html.theme-skeuo:not(.ae-dark-mode) .pron-fs-label{ color:#8A6B2E; }
html.theme-skeuo:not(.ae-dark-mode) .pron-fs-label small{ color:#8A7A5C; }
html.theme-skeuo:not(.ae-dark-mode) .pron-fs-transcript{ background:#FFFDF6; border-color:#E0D5B4; color:#3B3324; }
html.theme-skeuo:not(.ae-dark-mode) .pron-w{ border-bottom-color:rgba(47,123,196,.55); }
html.theme-skeuo:not(.ae-dark-mode) .pron-w:hover{ background:rgba(90,169,230,.16); }
html.theme-skeuo:not(.ae-dark-mode) .pron-wpop{
  background:linear-gradient(180deg,#FDFAF2,#F5EEDC); border:1px solid #C9B98F;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 16px 40px rgba(60,45,20,.3); }
html.theme-skeuo:not(.ae-dark-mode) .pron-wpop-word{ color:#3B3324; }
html.theme-skeuo:not(.ae-dark-mode) .pron-wpop .pron-phone{
  background:linear-gradient(180deg,#EAF7FF,#BFE3F8); border-color:#7FB8DE; color:#0B4B7A; }
html.theme-skeuo:not(.ae-dark-mode) .pron-wpop-hint{ color:#8A7A5C; }
html.theme-skeuo:not(.ae-dark-mode) .pron-word-spk{
  background:linear-gradient(180deg,#EAF7FF,#BFE3F8); border:1px solid #7FB8DE; }
html.theme-skeuo:not(.ae-dark-mode) .pron-replay{ border-color:rgba(140,200,240,.55); }
html.theme-skeuo:not(.ae-dark-mode) .pron-replay span{ color:#8CC8F0; }

/* ───────────────────────── SKEUO DARK (walnut + gold) ───────────────────────── */
html.theme-skeuo.ae-dark-mode main.pron-page{
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.30) 0 1px, rgba(150,100,50,.06) 1px 2px, transparent 2px 7px, rgba(0,0,0,.22) 7px 8px, transparent 8px 14px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.24) 0 104px, rgba(150,100,50,.05) 104px 106px, transparent 106px 220px),
    #241a12 !important;
}
html.theme-skeuo.ae-dark-mode .pron-page::before,
html.theme-skeuo.ae-dark-mode .pron-page::after{ display:none; }

html.theme-skeuo.ae-dark-mode .pron-topbar{
  background:linear-gradient(180deg,rgba(46,37,26,.97),rgba(28,21,13,.97));
  border-bottom:1px solid rgba(255,214,150,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 3px 10px rgba(0,0,0,.5); }
html.theme-skeuo.ae-dark-mode .pron-brand span b{ color:#E8DDC0; }
html.theme-skeuo.ae-dark-mode .pron-brand span small{ color:#D9AE52; }
html.theme-skeuo.ae-dark-mode .pron-brand-ic{
  background:linear-gradient(180deg,#3A2F20,#241C10); border:1px solid rgba(244,217,138,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07); }
html.theme-skeuo.ae-dark-mode .pron-top-link{ color:#C9B98F; border-color:rgba(255,214,150,.2); background:rgba(255,255,255,.04); }
html.theme-skeuo.ae-dark-mode .pron-top-link:hover{ color:#F4D98A; border-color:rgba(244,217,138,.45); background:rgba(244,217,138,.08); }
html.theme-skeuo.ae-dark-mode .pron-top-home{
  background:linear-gradient(180deg,#F4D98A,#C89B40); color:#3B2A0C; border:1px solid #8D6822;
  text-shadow:0 1px 0 rgba(255,249,222,.5);
  box-shadow:inset 0 1px 1px rgba(255,249,222,.85), 0 2px 6px rgba(0,0,0,.55); }
html.theme-skeuo.ae-dark-mode .pron-top-home:hover{ color:#3B2A0C; box-shadow:inset 0 1px 1px rgba(255,249,222,.9), 0 4px 10px rgba(0,0,0,.6); }
html.theme-skeuo.ae-dark-mode .pron-skin-switch{ background:rgba(0,0,0,.35); border:1px solid rgba(255,214,150,.18); box-shadow:inset 0 1px 3px rgba(0,0,0,.5); }
html.theme-skeuo.ae-dark-mode .pron-skin-switch button{ color:#A8987A; }
html.theme-skeuo.ae-dark-mode .pron-skin-switch button.is-active{
  background:linear-gradient(180deg,#3F3320,#2E2415);
  color:#F4D98A; box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 1px 3px rgba(0,0,0,.5); }
html.theme-skeuo.ae-dark-mode .pron-top-icon{ background:#2E251A; border:1px solid rgba(255,214,150,.22); color:#E8DDC0; }

html.theme-skeuo.ae-dark-mode .pron-views{
  background:linear-gradient(180deg,#2E251A,#241C11); border-color:rgba(255,214,150,.16); backdrop-filter:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 6px 18px rgba(0,0,0,.45); }
html.theme-skeuo.ae-dark-mode .pron-view-tab{ color:#A8987A; }
html.theme-skeuo.ae-dark-mode .pron-view-tab:hover{ color:#E8DDC0; }
html.theme-skeuo.ae-dark-mode .pron-view-tab.is-on{
  background:linear-gradient(180deg,#F4D98A,#C89B40); color:#3B2A0C; text-shadow:0 1px 0 rgba(255,249,222,.5);
  box-shadow:inset 0 1px 1px rgba(255,249,222,.85), 0 3px 8px rgba(0,0,0,.5); }
html.theme-skeuo.ae-dark-mode .pron-vt-badge{ background:#3A2F20; color:#F4D98A; }

html.theme-skeuo.ae-dark-mode .pron-hero{
  background:linear-gradient(180deg,#33281B 0%,#291F13 55%,#20180E 100%);
  border:1px solid rgba(255,214,150,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 16px 40px rgba(0,0,0,.55); }
html.theme-skeuo.ae-dark-mode .pron-hero-glow{
  background:radial-gradient(600px 260px at 85% -20%,rgba(244,217,138,.12),transparent 60%); }
html.theme-skeuo.ae-dark-mode .pron-hero-badge{ color:#F4D98A; background:rgba(244,217,138,.08); border-color:rgba(244,217,138,.3); }
html.theme-skeuo.ae-dark-mode .pron-hero h1 span{ color:#F4D98A; }
html.theme-skeuo.ae-dark-mode .pron-search{ background:rgba(0,0,0,.3); border-color:rgba(255,214,150,.18); backdrop-filter:none; }
html.theme-skeuo.ae-dark-mode .pron-search button{
  background:linear-gradient(180deg,#F4D98A,#C89B40); color:#3B2A0C; border:1px solid #8D6822;
  text-shadow:0 1px 0 rgba(255,249,222,.5);
  box-shadow:inset 0 1px 1px rgba(255,249,222,.85), 0 2px 6px rgba(0,0,0,.55); }
html.theme-skeuo.ae-dark-mode .pron-sr-word{ color:#F4D98A; }
html.theme-skeuo.ae-dark-mode .pron-phone{ background:rgba(244,217,138,.1); border-color:rgba(244,217,138,.35); color:#F4D98A; }
html.theme-skeuo.ae-dark-mode .pron-phone:hover{ background:rgba(244,217,138,.2); }
html.theme-skeuo.ae-dark-mode .pron-stat b{ color:#F4D98A; }
html.theme-skeuo.ae-dark-mode .pron-stat span{ color:#A8987A; }

html.theme-skeuo.ae-dark-mode .pron-group-title{ color:#A8987A; text-shadow:0 1px 2px rgba(0,0,0,.8); }
html.theme-skeuo.ae-dark-mode .pron-chip{
  background:linear-gradient(180deg,#3A2F20 0%,#2B2214 100%);
  border:1px solid rgba(255,214,150,.18) !important; backdrop-filter:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 2px 5px rgba(0,0,0,.5); }
html.theme-skeuo.ae-dark-mode .pron-chip:hover{
  border-color:rgba(244,217,138,.5) !important; background:linear-gradient(180deg,#443724,#2E2415);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.5); }
html.theme-skeuo.ae-dark-mode .pron-chip-ipa{ color:#E8DDC0; text-shadow:0 1px 2px rgba(0,0,0,.7); }
html.theme-skeuo.ae-dark-mode .pron-chip.is-voiced .pron-chip-ipa{ color:#F4D98A; }
html.theme-skeuo.ae-dark-mode .pron-chip-sub{ color:#A8987A; }
html.theme-skeuo.ae-dark-mode .pron-legend{ color:#A8987A; }
html.theme-skeuo.ae-dark-mode .pron-dot{ background:#E8DDC0; }
html.theme-skeuo.ae-dark-mode .pron-dot--voiced{ background:#F4D98A; }

html.theme-skeuo.ae-dark-mode .pron-modal{ background:rgba(8,5,2,.72); }
html.theme-skeuo.ae-dark-mode .pron-panel{
  background:linear-gradient(180deg,#2A2115,#221A0F); border:1px solid rgba(255,214,150,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 30px 80px rgba(0,0,0,.7); }
html.theme-skeuo.ae-dark-mode .pron-panel-meta b{ color:#E8DDC0; }
html.theme-skeuo.ae-dark-mode .pron-panel-meta small{ color:#A8987A; }
html.theme-skeuo.ae-dark-mode .pron-big-ipa{
  background:linear-gradient(180deg,#3A2F20,#281F13); border-color:rgba(244,217,138,.4); color:#F4D98A;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 2px 5px rgba(0,0,0,.5); }
html.theme-skeuo.ae-dark-mode .pron-big-ipa:hover{ background:linear-gradient(180deg,#443724,#2E2415); }
html.theme-skeuo.ae-dark-mode .pron-x{ background:#2E251A; border:1px solid rgba(255,214,150,.2); color:#E8DDC0; }
html.theme-skeuo.ae-dark-mode .pron-tabs{ background:#1B150D; box-shadow:inset 0 1px 3px rgba(0,0,0,.6); }
html.theme-skeuo.ae-dark-mode .pron-tab{ color:#A8987A; }
html.theme-skeuo.ae-dark-mode .pron-tab.is-on{
  background:#33291B; color:#F4D98A; box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 1px 4px rgba(0,0,0,.5); }
html.theme-skeuo.ae-dark-mode .pron-stage[data-ppane="steps"]{ background:#FFFDF6; border-color:rgba(255,214,150,.2); }
html.theme-skeuo.ae-dark-mode .pron-stepbar{ background:#1E1811; }
html.theme-skeuo.ae-dark-mode .pron-stepbar span{ color:#E8DDC0; }
html.theme-skeuo.ae-dark-mode .pron-stepbtn{ background:#2E251A; border:1px solid rgba(255,214,150,.25); color:#E8DDC0; }
html.theme-skeuo.ae-dark-mode .pron-stepbtn:hover{ background:#3A2F20; border-color:rgba(244,217,138,.45); }
html.theme-skeuo.ae-dark-mode .pron-step-note{ background:#1E1811; border-top-color:rgba(255,214,150,.12); }
html.theme-skeuo.ae-dark-mode .pron-step-note p{ color:#D8CBA8; }
html.theme-skeuo.ae-dark-mode .pron-step-note small{ color:#8A7A5C; }
html.theme-skeuo.ae-dark-mode .pron-desc{ background:#1B150D; border:1px solid rgba(255,214,150,.14); }
html.theme-skeuo.ae-dark-mode .pron-desc-label{ color:#D9AE52; }
html.theme-skeuo.ae-dark-mode .pron-desc p{ color:#D8CBA8; }
html.theme-skeuo.ae-dark-mode .pron-examples-label{ color:#A8987A; }
html.theme-skeuo.ae-dark-mode .pron-ex{ background:#2E251A; border:1px solid rgba(255,214,150,.22); color:#E8DDC0; }
html.theme-skeuo.ae-dark-mode .pron-ex:hover{ background:#3A2F20; border-color:rgba(244,217,138,.45); color:#F4D98A; }
html.theme-skeuo.ae-dark-mode .pron-ex-play{ color:#D9AE52; }
html.theme-skeuo.ae-dark-mode .pron-replay{ border-color:rgba(244,217,138,.5); background:rgba(20,14,6,.85); }
html.theme-skeuo.ae-dark-mode .pron-replay span{ color:#F4D98A; }

html.theme-skeuo.ae-dark-mode .pron-fs2-stage{
  background:linear-gradient(180deg,#33281B 0%,#261D10 55%,#20180E 100%);
  border:1px solid rgba(255,214,150,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 16px 40px rgba(0,0,0,.55); }
html.theme-skeuo.ae-dark-mode .pron-fs2-stage::before{
  background:radial-gradient(520px 240px at 50% -30%,rgba(244,217,138,.12),transparent 65%); }
html.theme-skeuo.ae-dark-mode .pron-fs2-badge{ color:#F4D98A; background:rgba(244,217,138,.08); border-color:rgba(244,217,138,.3); }
html.theme-skeuo.ae-dark-mode .pron-fs2-title span{ color:#F4D98A; }
html.theme-skeuo.ae-dark-mode .pron-mic-core{
  background:linear-gradient(140deg,#F8E3A2 0%,#D9AE52 45%,#B07E24 100%); color:#3B2A0C;
  box-shadow:0 14px 34px rgba(0,0,0,.6), inset 0 2px 6px rgba(255,249,222,.6); }
html.theme-skeuo.ae-dark-mode .pron-mic-ring{ border-color:rgba(244,217,138,.4); }
html.theme-skeuo.ae-dark-mode .pron-fs2-credits{ color:#A8987A; background:rgba(0,0,0,.3); border-color:rgba(255,214,150,.16); }
html.theme-skeuo.ae-dark-mode .pron-fs2-credits b{ color:#F4D98A; }
html.theme-skeuo.ae-dark-mode .pron-cr-dot{ background:#F4D98A; }

html.theme-skeuo.ae-dark-mode .pron-fs-card{
  background:#241E16; border:1px solid rgba(255,214,150,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 2px 10px rgba(0,0,0,.4); }
html.theme-skeuo.ae-dark-mode .pron-fs-label{ color:#D9AE52; }
html.theme-skeuo.ae-dark-mode .pron-fs-label small{ color:#8A7A5C; }
html.theme-skeuo.ae-dark-mode .pron-fs-transcript{ background:#1B150D; border-color:rgba(255,214,150,.1); color:#E8DDC0; }
html.theme-skeuo.ae-dark-mode .pron-w{ border-bottom-color:rgba(244,217,138,.5); }
html.theme-skeuo.ae-dark-mode .pron-w:hover{ background:rgba(244,217,138,.12); }
html.theme-skeuo.ae-dark-mode .pron-wpop{ background:#241E16; border:1px solid rgba(255,214,150,.25); box-shadow:0 16px 44px rgba(0,0,0,.6); }
html.theme-skeuo.ae-dark-mode .pron-wpop-word{ color:#E8DDC0; }
html.theme-skeuo.ae-dark-mode .pron-wpop .pron-phone{ background:rgba(244,217,138,.1); border-color:rgba(244,217,138,.35); color:#F4D98A; }
html.theme-skeuo.ae-dark-mode .pron-wpop-hint{ color:#A8987A; }
html.theme-skeuo.ae-dark-mode .pron-word-spk{ background:rgba(244,217,138,.12); border:1px solid rgba(244,217,138,.4); }

/* ── FIX màu IPA ở DARK: rule chữ !important toàn cục của dark-mode.css sơn trắng
      hết → ép lại. Âm HỮU THANH phải NỔI BẬT như light mode (cyan Tron / gold walnut) ── */
html.ae-dark-mode:not(.theme-skeuo) .pron-chip-ipa{ color:#E7F4FF !important; }
html.ae-dark-mode:not(.theme-skeuo) .pron-chip.is-voiced .pron-chip-ipa{
  color:#22D3EE !important; text-shadow:0 0 14px rgba(34,211,238,.35); }
html.ae-dark-mode:not(.theme-skeuo) .pron-chip-sub{ color:#7C90AB !important; }
html.ae-dark-mode:not(.theme-skeuo) .pron-dot--voiced{ background:#22D3EE; }
html.theme-skeuo.ae-dark-mode .pron-chip-ipa{ color:#E8DDC0 !important; }
html.theme-skeuo.ae-dark-mode .pron-chip.is-voiced .pron-chip-ipa{
  color:#F4D98A !important; text-shadow:0 0 12px rgba(244,217,138,.3); }
html.theme-skeuo.ae-dark-mode .pron-chip-sub{ color:#A8987A !important; }
/* light modes: giữ chắc màu voiced trước mọi rule global */
html:not(.ae-dark-mode):not(.theme-skeuo) .pron-chip.is-voiced .pron-chip-ipa{ color:#0E7490 !important; }
html.theme-skeuo:not(.ae-dark-mode) .pron-chip.is-voiced .pron-chip-ipa{ color:#1D6FA5 !important; }

/* ── TAB lọc bảng âm: Tất cả / Phụ âm / Nguyên âm (4 skin) ── */
.pron-cat-tabs{ display:flex; gap:8px; margin:0 0 18px; flex-wrap:wrap; }
.pron-cat-tab{ display:inline-flex; align-items:center; gap:7px; border:1px solid #E2E8F0; background:#fff; color:#64748B;
  font-size:13px; font-weight:800; border-radius:999px; padding:9px 20px; cursor:pointer; transition:.15s; }
.pron-cat-tab small{ font-size:10.5px; font-weight:800; opacity:.65; }
.pron-cat-tab:hover{ border-color:#7DD3FC; color:#0284C7; }
.pron-cat-tab.is-on{ background:linear-gradient(125deg,#0284C7,#2563EB); border-color:transparent; color:#fff !important; }
/* Tron (flat dark) */
html.ae-dark-mode:not(.theme-skeuo) .pron-cat-tab{ background:rgba(16,24,39,.78); border-color:rgba(148,163,184,.18); color:#8FA3BF !important; }
html.ae-dark-mode:not(.theme-skeuo) .pron-cat-tab:hover{ border-color:rgba(34,211,238,.5); color:#E7F4FF !important; }
html.ae-dark-mode:not(.theme-skeuo) .pron-cat-tab.is-on{ background:linear-gradient(120deg,#22D3EE,#3B82F6); border-color:transparent; color:#06222E !important; }
/* skeuo light (giấy + Aqua gloss) */
html.theme-skeuo:not(.ae-dark-mode) .pron-cat-tab{ background:linear-gradient(180deg,#FFFEF9,#F0E8D2); border-color:#C9B98F; color:#7A6A4A !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 1px 3px rgba(101,80,35,.2); text-shadow:0 1px 0 rgba(255,255,255,.6); }
html.theme-skeuo:not(.ae-dark-mode) .pron-cat-tab:hover{ border-color:#7FB8DE; color:#0B4B7A !important; }
html.theme-skeuo:not(.ae-dark-mode) .pron-cat-tab.is-on{
  background:linear-gradient(180deg,#9FD8F5 0%,#4C9FE0 48%,#2F7BC4 52%,#5AA9E6 100%); border-color:#23639F; color:#07304E !important;
  text-shadow:0 1px 0 rgba(255,255,255,.45); box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 2px 5px rgba(31,91,148,.35); }
/* skeuo dark (walnut + gold) */
html.theme-skeuo.ae-dark-mode .pron-cat-tab{ background:linear-gradient(180deg,#3A2F20,#2B2214); border-color:rgba(255,214,150,.2); color:#A8987A !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 2px 5px rgba(0,0,0,.4); }
html.theme-skeuo.ae-dark-mode .pron-cat-tab:hover{ border-color:rgba(244,217,138,.45); color:#E8DDC0 !important; }
html.theme-skeuo.ae-dark-mode .pron-cat-tab.is-on{
  background:linear-gradient(180deg,#F4D98A,#C89B40); border-color:#8D6822; color:#3B2A0C !important;
  text-shadow:0 1px 0 rgba(255,249,222,.5); box-shadow:inset 0 1px 1px rgba(255,249,222,.85), 0 2px 6px rgba(0,0,0,.5); }

/* [hidden] phải thắng mọi display author-css (gotcha như .pron-modal) */
.pron-group[hidden]{ display:none !important; }

/* ═══ 🎬 SHADOWING YOUTUBE ═══ */
.pron-sh-form{ position:relative; display:flex; align-items:center; gap:10px; max-width:680px; margin:0 auto 12px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:14px; padding:6px 6px 6px 14px; }
.pron-sh-form input{ flex:1; background:transparent !important; border:0 !important; outline:none !important;
  box-shadow:none !important; color:#fff !important; font-size:13.5px !important; min-height:0 !important; height:auto !important; padding:9px 0 !important; margin:0 !important; }
.pron-sh-form input::placeholder{ color:rgba(255,255,255,.45) !important; }
.pron-sh-form button{ flex:0 0 auto; border:0; border-radius:10px; padding:10px 18px; font-weight:800; font-size:13px;
  background:linear-gradient(120deg,#22D3EE,#3B82F6); color:#06222E; cursor:pointer; transition:.15s; }
.pron-sh-form button:hover{ transform:translateY(-1px); }
.pron-sh-player{ position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:14px; overflow:hidden; }
.pron-sh-player iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.pron-sh-controls{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px; }
.pron-sh-btn{ border:1px solid #CBD5E1; background:#fff; color:#334155; border-radius:999px; padding:8px 14px;
  font-size:12.5px; font-weight:800; cursor:pointer; transition:.14s; }
.pron-sh-btn:hover{ border-color:#7DD3FC; }
.pron-sh-btn.is-on{ background:linear-gradient(125deg,#0284C7,#2563EB); color:#fff !important; border-color:transparent; }
.pron-sh-speeds{ display:inline-flex; align-items:center; gap:6px; margin-left:auto; font-size:12px; color:#64748B; font-weight:700; }
.pron-sh-list{ max-height:480px; overflow-y:auto; display:flex; flex-direction:column; gap:4px; }
.pron-sh-line{ display:flex; gap:10px; padding:9px 12px; border-radius:11px; cursor:pointer; transition:.13s; border:1px solid transparent; }
.pron-sh-line:hover{ background:#F0F9FF; }
.pron-sh-line.is-on{ background:#E0F2FE; border-color:#7DD3FC; }
.pron-sh-time{ flex:0 0 auto; font-size:11px; font-weight:800; color:#0284C7; min-width:38px; padding-top:3px; }
.pron-sh-text{ font-size:14.5px; line-height:1.75; color:#0F172A; }
.pron-sh-vi{ display:block; font-size:12px; color:#64748B; line-height:1.5; margin-top:1px; }
.pron-sh-list.is-blur .pron-sh-text{ filter:blur(6px); transition:.15s; }
.pron-sh-list.is-blur .pron-sh-line.is-on .pron-sh-text,
.pron-sh-list.is-blur .pron-sh-line:hover .pron-sh-text{ filter:none; }
.pron-sh-hist{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:10px; }
.pron-sh-hitem{ display:flex; gap:10px; align-items:center; border:1px solid #E6EAF2; background:#fff; border-radius:12px;
  padding:8px; cursor:pointer; text-align:left; transition:.14s; }
.pron-sh-hitem:hover{ border-color:#7DD3FC; transform:translateY(-1px); }
.pron-sh-hthumb{ flex:0 0 84px; height:48px; border-radius:8px; background-size:cover; background-position:center; background-color:#0B1220; }
.pron-sh-hmeta{ min-width:0; }
.pron-sh-hmeta b{ display:block; font-size:12.5px; color:#0F172A; line-height:1.35; max-height:34px; overflow:hidden; }
.pron-sh-hmeta small{ color:#94A3B8; font-size:10.5px; }
.pron-sh-hist-empty{ color:#94A3B8; font-size:12.5px; }

/* Tron (flat dark) */
html.ae-dark-mode:not(.theme-skeuo) .pron-sh-btn{ background:#16203A; border-color:rgba(255,255,255,.14); color:#CBD5E1 !important; }
html.ae-dark-mode:not(.theme-skeuo) .pron-sh-btn:hover{ border-color:rgba(34,211,238,.5); }
html.ae-dark-mode:not(.theme-skeuo) .pron-sh-btn.is-on{ background:linear-gradient(120deg,#22D3EE,#3B82F6); color:#06222E !important; border-color:transparent; }
html.ae-dark-mode:not(.theme-skeuo) .pron-sh-speeds{ color:#7C90AB; }
html.ae-dark-mode:not(.theme-skeuo) .pron-sh-line:hover{ background:rgba(34,211,238,.08); }
html.ae-dark-mode:not(.theme-skeuo) .pron-sh-line.is-on{ background:rgba(2,132,199,.18); border-color:rgba(56,189,248,.4); }
html.ae-dark-mode:not(.theme-skeuo) .pron-sh-time{ color:#7DD3FC; }
html.ae-dark-mode:not(.theme-skeuo) .pron-sh-text{ color:#E7ECF5; }
html.ae-dark-mode:not(.theme-skeuo) .pron-sh-vi{ color:#7C90AB; }
html.ae-dark-mode:not(.theme-skeuo) .pron-sh-hitem{ background:rgba(16,24,39,.78); border-color:rgba(148,163,184,.14); }
html.ae-dark-mode:not(.theme-skeuo) .pron-sh-hitem:hover{ border-color:rgba(34,211,238,.5); }
html.ae-dark-mode:not(.theme-skeuo) .pron-sh-hmeta b{ color:#E7ECF5; }
html.ae-dark-mode:not(.theme-skeuo) .pron-sh-hmeta small{ color:#7C90AB; }

/* skeuo LIGHT (giấy + Aqua gloss; form nằm trong stage giấy sáng) */
html.theme-skeuo:not(.ae-dark-mode) .pron-sh-form{ background:#FFFDF6; border:1px solid #C9B98F; box-shadow:inset 0 2px 4px rgba(101,80,35,.14); }
html.theme-skeuo:not(.ae-dark-mode) .pron-sh-form input{ color:#3B3324 !important; }
html.theme-skeuo:not(.ae-dark-mode) .pron-sh-form input::placeholder{ color:#8A7A5C !important; }
html.theme-skeuo:not(.ae-dark-mode) .pron-sh-form button{
  background:linear-gradient(180deg,#9FD8F5 0%,#4C9FE0 48%,#2F7BC4 52%,#5AA9E6 100%); color:#07304E;
  border:1px solid #23639F; text-shadow:0 1px 0 rgba(255,255,255,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 2px 5px rgba(9,42,74,.4); }
html.theme-skeuo:not(.ae-dark-mode) .pron-sh-btn{ background:linear-gradient(180deg,#FFFEF9,#F0E8D2); border-color:#C9B98F; color:#7A6A4A !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 1px 3px rgba(101,80,35,.2); text-shadow:0 1px 0 rgba(255,255,255,.6); }
html.theme-skeuo:not(.ae-dark-mode) .pron-sh-btn.is-on{
  background:linear-gradient(180deg,#9FD8F5 0%,#4C9FE0 48%,#2F7BC4 52%,#5AA9E6 100%); color:#07304E !important; border-color:#23639F;
  text-shadow:0 1px 0 rgba(255,255,255,.45); box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 2px 5px rgba(31,91,148,.35); }
html.theme-skeuo:not(.ae-dark-mode) .pron-sh-speeds{ color:#8A7A5C; }
html.theme-skeuo:not(.ae-dark-mode) .pron-sh-line:hover{ background:#FAF5E7; }
html.theme-skeuo:not(.ae-dark-mode) .pron-sh-line.is-on{ background:#E4F2FC; border-color:#7FB8DE; }
html.theme-skeuo:not(.ae-dark-mode) .pron-sh-time{ color:#1D6FA5; }
html.theme-skeuo:not(.ae-dark-mode) .pron-sh-text{ color:#3B3324; }
html.theme-skeuo:not(.ae-dark-mode) .pron-sh-vi{ color:#8A7A5C; }
html.theme-skeuo:not(.ae-dark-mode) .pron-sh-hitem{ background:linear-gradient(180deg,#FFFEF9,#F5EEDC); border-color:#C9B98F;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 1px 3px rgba(101,80,35,.18); }
html.theme-skeuo:not(.ae-dark-mode) .pron-sh-hitem:hover{ border-color:#7FB8DE; }
html.theme-skeuo:not(.ae-dark-mode) .pron-sh-hmeta b{ color:#3B3324; }
html.theme-skeuo:not(.ae-dark-mode) .pron-sh-hmeta small{ color:#8A7A5C; }
html.theme-skeuo:not(.ae-dark-mode) .pron-sh-hist-empty{ color:#8A7A5C; }

/* skeuo DARK (walnut + gold) */
html.theme-skeuo.ae-dark-mode .pron-sh-form{ background:rgba(0,0,0,.3); border:1px solid rgba(255,214,150,.18); }
html.theme-skeuo.ae-dark-mode .pron-sh-form button{
  background:linear-gradient(180deg,#F4D98A,#C89B40); color:#3B2A0C; border:1px solid #8D6822;
  text-shadow:0 1px 0 rgba(255,249,222,.5); box-shadow:inset 0 1px 1px rgba(255,249,222,.85), 0 2px 6px rgba(0,0,0,.55); }
html.theme-skeuo.ae-dark-mode .pron-sh-btn{ background:#2E251A; border-color:rgba(255,214,150,.22); color:#E8DDC0 !important; }
html.theme-skeuo.ae-dark-mode .pron-sh-btn.is-on{ background:linear-gradient(180deg,#F4D98A,#C89B40); color:#3B2A0C !important; border-color:#8D6822;
  text-shadow:0 1px 0 rgba(255,249,222,.5); }
html.theme-skeuo.ae-dark-mode .pron-sh-speeds{ color:#A8987A; }
html.theme-skeuo.ae-dark-mode .pron-sh-line:hover{ background:rgba(244,217,138,.08); }
html.theme-skeuo.ae-dark-mode .pron-sh-line.is-on{ background:rgba(244,217,138,.14); border-color:rgba(244,217,138,.4); }
html.theme-skeuo.ae-dark-mode .pron-sh-time{ color:#F4D98A; }
html.theme-skeuo.ae-dark-mode .pron-sh-text{ color:#E8DDC0; }
html.theme-skeuo.ae-dark-mode .pron-sh-vi{ color:#A8987A; }
html.theme-skeuo.ae-dark-mode .pron-sh-hitem{ background:linear-gradient(180deg,#3A2F20,#2B2214); border-color:rgba(255,214,150,.18); }
html.theme-skeuo.ae-dark-mode .pron-sh-hitem:hover{ border-color:rgba(244,217,138,.5); }
html.theme-skeuo.ae-dark-mode .pron-sh-hmeta b{ color:#E8DDC0; }
html.theme-skeuo.ae-dark-mode .pron-sh-hmeta small{ color:#A8987A; }
html.theme-skeuo.ae-dark-mode .pron-sh-hist-empty{ color:#A8987A; }

/* icon SVG trong nút tròn: block để grid căn tâm tuyệt đối (glyph font vẽ lệch) */
.pron-stepbtn svg, .pron-x svg{ display:block; }

/* ── 🎙 Luyện từng câu (shadowing check) ── */
.pron-sh-line{ align-items:flex-start; }
.pron-sh-rec{ flex:0 0 auto; margin-left:auto; border:1px solid #CBD5E1; background:#fff; color:#334155;
  border-radius:999px; padding:6px 12px; font-size:11px; font-weight:800; cursor:pointer; transition:.14s; white-space:nowrap; }
.pron-sh-rec:hover{ border-color:#7DD3FC; color:#0284C7; }
.pron-sh-rec.is-listen{ background:linear-gradient(125deg,#0284C7,#2563EB); color:#fff !important; border-color:transparent; }
.pron-sh-rec.is-rec{ background:linear-gradient(125deg,#DC2626,#B91C1C); color:#fff !important; border-color:transparent; animation:pronBlink 1s infinite; }
.pron-sh-rec.is-busy{ opacity:.75; cursor:wait; }
.pron-sh-fb{ display:flex; gap:12px; align-items:flex-start; margin:2px 0 8px 48px; padding:11px 14px;
  background:#F8FAFC; border:1px solid #E6EAF2; border-radius:12px; }
.pron-sh-score{ flex:0 0 auto; font-size:15px; font-weight:900; border-radius:10px; padding:8px 12px; }
.pron-sh-score--good{ background:#ECFDF5; color:#047857; border:1px solid #A7F3D0; }
.pron-sh-score--mid{ background:#FFFBEB; color:#B45309; border:1px solid #FDE68A; }
.pron-sh-score--low{ background:#FEF2F2; color:#B91C1C; border:1px solid #FECACA; }
.pron-sh-fb-body{ font-size:13px; line-height:1.7; color:#334155; min-width:0; }
.pron-sh-fb-row{ margin-bottom:4px; }
.pron-sh-fb-row b{ color:#0F172A; }
.pron-sh-fb-cr{ margin-top:6px; font-size:10.5px; font-weight:800; color:#0284C7; }
u.pron-sh-miss{ text-decoration:underline wavy #EF4444 2px; text-underline-offset:3px; font-weight:800; color:#B91C1C; }
/* Tron */
html.ae-dark-mode:not(.theme-skeuo) .pron-sh-rec{ background:#16203A; border-color:rgba(255,255,255,.14); color:#CBD5E1 !important; }
html.ae-dark-mode:not(.theme-skeuo) .pron-sh-rec.is-listen{ background:linear-gradient(120deg,#22D3EE,#3B82F6); color:#06222E !important; }
html.ae-dark-mode:not(.theme-skeuo) .pron-sh-rec.is-rec{ background:linear-gradient(125deg,#DC2626,#B91C1C); color:#fff !important; }
html.ae-dark-mode:not(.theme-skeuo) .pron-sh-fb{ background:rgba(16,24,39,.85); border-color:rgba(148,163,184,.14); }
html.ae-dark-mode:not(.theme-skeuo) .pron-sh-fb-body{ color:#CBD5E1; }
html.ae-dark-mode:not(.theme-skeuo) .pron-sh-fb-row b{ color:#E7ECF5; }
html.ae-dark-mode:not(.theme-skeuo) .pron-sh-score--good{ background:rgba(5,150,105,.15); border-color:rgba(5,150,105,.35); color:#6EE7B7; }
html.ae-dark-mode:not(.theme-skeuo) .pron-sh-score--mid{ background:rgba(217,119,6,.15); border-color:rgba(217,119,6,.35); color:#FCD34D; }
html.ae-dark-mode:not(.theme-skeuo) .pron-sh-score--low{ background:rgba(220,38,38,.15); border-color:rgba(220,38,38,.35); color:#FCA5A5; }
html.ae-dark-mode:not(.theme-skeuo) u.pron-sh-miss{ color:#FCA5A5; }
html.ae-dark-mode:not(.theme-skeuo) .pron-sh-fb-cr{ color:#7DD3FC; }
/* skeuo light */
html.theme-skeuo:not(.ae-dark-mode) .pron-sh-rec{ background:linear-gradient(180deg,#FFFEF9,#F0E8D2); border-color:#C9B98F; color:#7A6A4A !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 1px 3px rgba(101,80,35,.2); }
html.theme-skeuo:not(.ae-dark-mode) .pron-sh-rec.is-listen{ background:linear-gradient(180deg,#9FD8F5,#2F7BC4); color:#07304E !important; border-color:#23639F; }
html.theme-skeuo:not(.ae-dark-mode) .pron-sh-rec.is-rec{ background:linear-gradient(180deg,#F58A8A,#C43030); color:#fff !important; border-color:#8D2222; }
html.theme-skeuo:not(.ae-dark-mode) .pron-sh-fb{ background:#FAF5E7; border-color:#E0D5B4; }
html.theme-skeuo:not(.ae-dark-mode) .pron-sh-fb-body{ color:#5B4636; }
html.theme-skeuo:not(.ae-dark-mode) .pron-sh-fb-row b{ color:#3B3324; }
html.theme-skeuo:not(.ae-dark-mode) .pron-sh-fb-cr{ color:#8A6B2E; }
/* skeuo dark */
html.theme-skeuo.ae-dark-mode .pron-sh-rec{ background:#2E251A; border-color:rgba(255,214,150,.22); color:#E8DDC0 !important; }
html.theme-skeuo.ae-dark-mode .pron-sh-rec.is-listen{ background:linear-gradient(180deg,#F4D98A,#C89B40); color:#3B2A0C !important; border-color:#8D6822; }
html.theme-skeuo.ae-dark-mode .pron-sh-rec.is-rec{ background:linear-gradient(180deg,#E86A6A,#A82525); color:#fff !important; }
html.theme-skeuo.ae-dark-mode .pron-sh-fb{ background:#241E16; border-color:rgba(255,214,150,.14); }
html.theme-skeuo.ae-dark-mode .pron-sh-fb-body{ color:#D8CBA8; }
html.theme-skeuo.ae-dark-mode .pron-sh-fb-row b{ color:#F1E9D3; }
html.theme-skeuo.ae-dark-mode u.pron-sh-miss{ color:#FFA294; }
html.theme-skeuo.ae-dark-mode .pron-sh-fb-cr{ color:#F4D98A; }

/* nút "Đổi loạt khác" trong label gợi ý */
.pron-fs-label .pron-sh-reco-more{ float:right; margin-top:-6px; padding:6px 12px; font-size:11px; }
.pron-sh-reco-more svg{ vertical-align:-1.5px; margin-right:3px; }

/* ── FIX ô dán link Shadowing: dark-mode.css sơn input ô đen graphite
      (html.ae-dark-mode input !important, specificity cao hơn .pron-sh-form input)
      → ép TRẦN như đã làm với ô tra âm ── */
.pron-sh-form input, .pron-sh-form input:focus, .pron-sh-form input:hover,
html.ae-dark-mode .pron-sh-form input, html.ae-dark-mode .pron-sh-form input:focus,
html.theme-skeuo .pron-sh-form input, html.theme-skeuo.ae-dark-mode .pron-sh-form input,
body .pron-page .pron-sh-form input{
  background:transparent !important; background-color:transparent !important;
  border:0 !important; box-shadow:none !important; outline:none !important;
  border-radius:0 !important; min-height:0 !important; height:auto !important;
}

/* ── 🔒 lock quyền (mọi skin — kế thừa look .pron-mic--login) ── */
.pron-mic--lock{cursor:default;opacity:.78}
.pron-mic--lock:hover{transform:none}

/* ── popup tra từ dock cạnh panel âm (mở từ transcript khi panel đang mở) ── */
.pron-wpop--dock{ position:fixed; max-width:310px; }