/* =====================================================================
   HỆ THỐNG CHUNG — app Luyện Speaking (/luyen-speaking/, mọi ?view=)
   Token --spk-* đủ 4 nền + thành phần dùng chung: đầu màn, nút, chip,
   ví lượt chấm, thanh trên điện thoại, dock micro dính đáy màn Luyện tập.

   • Nạp SAU speaking.css + speaking-skeuo.css, CHỈ ở trang Speaking.
     KHÔNG sửa class cũ trong speaking.css / speaking-skeuo.css: Luyện giao tiếp
     nạp lại hai file đó, Reading nạp speaking-result.css.
   • Màu đổi theo nền bằng TOKEN, không đè từng thành phần. Vài chỗ phải thắng luật
     !important có sẵn của speaking.css / speaking-skeuo.css (thanh bên) — ghi rõ tại chỗ.
   • ⛔ Không đặt display:…!important lên phần tử có x-show / x-cloak (Alpine).
   • Theme dark-mode.css ép màu chữ p/span/li/h1… bằng var(--dm-text-primary):
     mọi luật «color: X» ở đây đi kèm «--dm-text-primary: X» (tools/dm.py tự thêm).
   • Phòng thợ săn (.sp-hunter) do workflow riêng làm — file này không đụng vào.
   ===================================================================== */

/* ---------- 1. TOKEN — phẳng sáng (mặc định) ---------- */
html {
  --spk-font: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --spk-font-so: 'Big Shoulders Display', 'Be Vietnam Pro', system-ui, sans-serif;  /* tiêu đề trang + con số */
  --spk-font-tieude: var(--spk-font-so);

  --spk-nen: #EEF1F5;          /* nền màn */
  --spk-mat: #FFFFFF;          /* mặt thẻ (màu đặc) */
  --spk-mat-nen: #FFFFFF;      /* mặt thẻ (skeuo: gradient giấy) */
  --spk-mat-2: #F4F6F9;        /* khối lõm trong thẻ */
  --spk-vien: #DCE1E8;
  --spk-vien-2: #C3CBD6;
  --spk-chu: #16233A;
  --spk-chu-2: #46536A;
  --spk-chu-3: #5E6B82;
  --spk-bong-chu: none;

  --spk-chinh: #1F3A5A;        /* navy áo varsity của Anh Sói — điều hướng, nút chính */
  --spk-chinh-txt: #1F3A5A;
  --spk-chinh-nhat: #E4EBF4;
  --spk-nut-nen: #1F3A5A;
  --spk-nut-nen-hover: #29496E;
  --spk-nut-vien: #1F3A5A;
  --spk-nut-chu: #FFFFFF;
  --spk-nut-bong: 0 1px 2px rgba(24, 34, 56, .22);
  --spk-nut2-nen: #FFFFFF;
  --spk-nut2-chu: #16233A;
  --spk-nut2-vien: #C3CBD6;
  --spk-nut2-bong: 0 1px 1px rgba(24, 34, 56, .06);

  --spk-noi: #D0392C;          /* ĐỎ = NÓI: micro, «Nói thử», «Nói thử ngay» — chỉ dùng cho hành động nói */
  --spk-noi-nen: #D0392C;
  --spk-noi-nen-hover: #B92F24;
  --spk-noi-chu: #FFFFFF;
  --spk-noi-nhat: #FCE8E5;

  --spk-vang: #E1B868;         /* vàng tay áo — tiến bộ: band, tick, ⚔️, chuỗi ngày (chỉ làm MẢNG) */
  --spk-hl: rgba(225, 184, 104, .42);    /* bút dạ quang dưới tên nút / tên mục (spk-ten-nut) */
  --spk-luot-vien: #8A6420;              /* viền + thanh kiếm của biểu tượng lượt chấm */
  --spk-vang-chu: #7A5410;
  --spk-vang-nhat: #FBF1DC;
  --spk-dat: #1C7F50; --spk-dat-nhat: #E3F3EA;
  --spk-lech: #9A620E; --spk-lech-nhat: #FBEFD6;
  --spk-sai: #BC3528; --spk-sai-nhat: #FBE5E1;

  --spk-bong-the: 0 1px 2px rgba(24, 34, 56, .05), 0 12px 28px -20px rgba(24, 34, 56, .3);
  --spk-bong-noi: 0 22px 48px -16px rgba(16, 24, 40, .45), 0 2px 6px rgba(16, 24, 40, .1);
  --spk-mo: rgba(14, 21, 34, .6);        /* lớp tối của tour */
  --spk-den: #E1B868;                    /* viền đèn rọi tour */
  --spk-focus: #2F6FD6;

  --spk-r-nho: 8px; --spk-r-nut: 10px; --spk-r-hang: 12px; --spk-r-the: 16px; --spk-r-to: 20px;
  --spk-cham: 44px;                      /* vùng chạm tối thiểu */
}

/* ---------- phẳng tối ---------- */
html.ae-dark-mode {
  --spk-nen: #11151B;
  --spk-mat: #1A1F27; --spk-mat-nen: #1A1F27; --spk-mat-2: #222833;
  --spk-vien: #2C333F; --spk-vien-2: #3C4452;
  --spk-chu: #EDF1F6; --spk-chu-2: #B4BDCB; --spk-chu-3: #929CAD;
  --spk-chinh: #E1B868; --spk-chinh-txt: #EAC67E; --spk-chinh-nhat: rgba(225, 184, 104, .14);
  --spk-nut-nen: #E1B868; --spk-nut-nen-hover: #EBC67E; --spk-nut-vien: #E1B868; --spk-nut-chu: #1A1F27;
  --spk-nut-bong: 0 1px 2px rgba(0, 0, 0, .4);
  --spk-nut2-nen: #222833; --spk-nut2-chu: #EDF1F6; --spk-nut2-vien: #3C4452; --spk-nut2-bong: none;
  --spk-noi: #F06B5E; --spk-noi-nen: #C9372B; --spk-noi-nen-hover: #D84638; --spk-noi-nhat: rgba(240, 107, 94, .14);
  --spk-vang-chu: #EAC67E; --spk-vang-nhat: rgba(225, 184, 104, .14);
  --spk-hl: rgba(225, 184, 104, .24); --spk-luot-vien: #5A4210;
  --spk-dat: #5CCB93; --spk-dat-nhat: rgba(92, 203, 147, .13);
  --spk-lech: #E9B55A; --spk-lech-nhat: rgba(233, 181, 90, .14);
  --spk-sai: #F07A6C; --spk-sai-nhat: rgba(240, 122, 108, .14);
  --spk-bong-the: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 14px 30px -22px rgba(0, 0, 0, .8);
  --spk-bong-noi: 0 24px 56px -16px rgba(0, 0, 0, .8), 0 2px 8px rgba(0, 0, 0, .4);
  --spk-mo: rgba(0, 0, 0, .7);
  --spk-focus: #8FB8FF;
}

/* ---------- skeuo sáng: giấy kem trên gỗ sồi, nút gel Aqua ---------- */
html.theme-skeuo {
  --spk-font-tieude: 'Source Serif 4', Georgia, serif;
  --spk-font-so: 'Source Serif 4', Georgia, serif;
  --spk-mat: #FBF6EA; --spk-mat-nen: linear-gradient(180deg, #FFFEFB 0%, #F8F2E2 100%); --spk-mat-2: #F3EAD4;
  --spk-vien: #DCCAA3; --spk-vien-2: #C9B68B;
  --spk-chu: #3A2F22; --spk-chu-2: #5A4B34; --spk-chu-3: #6E5E45;
  --spk-bong-chu: 0 1px 0 rgba(255, 255, 255, .7);
  --spk-chinh: #2F76D0; --spk-chinh-txt: #1F5FAE; --spk-chinh-nhat: rgba(61, 134, 222, .13);
  --spk-nut-nen: linear-gradient(180deg, #8CBCF2 0%, #4B91E2 49%, #2F76D0 51%, #4A92E6 100%);
  --spk-nut-nen-hover: linear-gradient(180deg, #9CC6F5 0%, #5A9BE6 49%, #3A80D8 51%, #58A0EC 100%);
  --spk-nut-vien: #1F5FAE; --spk-nut-chu: #FFFFFF;
  --spk-nut-bong: inset 0 1px 0 rgba(255, 255, 255, .65), 0 1px 2px rgba(40, 30, 10, .3);
  --spk-nut2-nen: linear-gradient(180deg, #FFFDF7, #ECE2CB); --spk-nut2-chu: #4A3A22; --spk-nut2-vien: #C9B68B;
  --spk-nut2-bong: inset 0 1px 0 #fff, 0 1px 2px rgba(60, 40, 10, .18);
  --spk-noi: #B82C21; --spk-noi-chu: #FFFFFF;
  --spk-noi-nen: linear-gradient(180deg, #F59A8F 0%, #E0493C 49%, #C7362A 51%, #DE5244 100%);
  --spk-noi-nen-hover: linear-gradient(180deg, #F8A89E 0%, #E6564A 49%, #CF4034 51%, #E45E51 100%);
  --spk-vang-chu: #7A5410; --spk-vang-nhat: #F6E6BE;
  --spk-hl: rgba(216, 169, 72, .38);
  --spk-bong-the: inset 0 1px 0 #fff, 0 1px 0 rgba(255, 255, 255, .4), 0 14px 28px -16px rgba(60, 36, 8, .55);
  --spk-bong-noi: inset 0 1px 0 #fff, 0 26px 56px -16px rgba(40, 22, 4, .6);
  --spk-mo: rgba(34, 20, 6, .6);
}

/* ---------- skeuo tối: óc chó ấm, nút đồng thau ---------- */
html.theme-skeuo.ae-dark-mode {
  --spk-mat: #2A231B; --spk-mat-nen: linear-gradient(180deg, #2F2820 0%, #241E16 100%); --spk-mat-2: #221C15;
  --spk-vien: rgba(255, 214, 150, .16); --spk-vien-2: rgba(255, 214, 150, .28);
  --spk-chu: #F1E6D2; --spk-chu-2: #D4C3A4; --spk-chu-3: #BCAA8B;
  --spk-bong-chu: 0 1px 1px rgba(0, 0, 0, .5);
  --spk-chinh: #D8A948; --spk-chinh-txt: #E8C27A; --spk-chinh-nhat: rgba(216, 169, 72, .15);
  --spk-nut-nen: linear-gradient(180deg, #F5DC98 0%, #DEB04E 49%, #C9952F 51%, #E2B85A 100%);
  --spk-nut-nen-hover: linear-gradient(180deg, #F8E3AA 0%, #E5BA5C 49%, #D2A03A 51%, #E9C268 100%);
  --spk-nut-vien: #8A6320; --spk-nut-chu: #2A1D0C;
  --spk-nut-bong: inset 0 1px 0 rgba(255, 255, 255, .55), 0 1px 2px rgba(0, 0, 0, .5);
  --spk-nut2-nen: linear-gradient(180deg, #3B3228, #2A231B); --spk-nut2-chu: #F1E6D2; --spk-nut2-vien: rgba(255, 214, 150, .26);
  --spk-nut2-bong: inset 0 1px 0 rgba(255, 230, 190, .08);
  --spk-noi: #F28B78; --spk-noi-nen: linear-gradient(180deg, #EE8A7C 0%, #D24A3C 49%, #B8382B 51%, #D05243 100%);
  --spk-noi-nen-hover: linear-gradient(180deg, #F29A8D 0%, #DA5647 49%, #C24234 51%, #D85E4F 100%);
  --spk-vang-chu: #E8C27A; --spk-vang-nhat: rgba(216, 169, 72, .16);
  --spk-hl: rgba(216, 169, 72, .26); --spk-luot-vien: #5A3F12;
  --spk-dat: #7BD3A1; --spk-dat-nhat: rgba(123, 211, 161, .13);
  --spk-lech: #EFC06A; --spk-lech-nhat: rgba(239, 192, 106, .14);
  --spk-sai: #F28B78; --spk-sai-nhat: rgba(242, 139, 120, .14);
  --spk-bong-the: inset 0 1px 0 rgba(255, 230, 190, .07), 0 16px 32px -18px rgba(0, 0, 0, .85);
  --spk-bong-noi: inset 0 1px 0 rgba(255, 230, 190, .08), 0 26px 56px -16px rgba(0, 0, 0, .85);
  --spk-mo: rgba(8, 5, 2, .74);
  --spk-focus: #F0C86A;
}

/* ---------- 2. NỀN + CHỮ của khung app ---------- */
.sp-root { font-family: var(--spk-font); -webkit-font-smoothing: antialiased; }
.sp-root .sp-hunter { font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif; } /* Phòng thợ săn: giữ nguyên, workflow riêng */
html:not(.theme-skeuo) .sp-root { background: var(--spk-nen); }
/* overflow-x:hidden biến .sp-main thành khung cuộn ⇒ dock micro «dính đáy» không bám được màn hình.
   clip cắt tràn y như cũ nhưng không tạo khung cuộn. Trình duyệt cũ không hiểu clip ⇒ giữ hidden. */
.sp-main { overflow-x: hidden; overflow-x: clip; }
.sp-root :focus-visible { outline: 3px solid var(--spk-focus); outline-offset: 2px; }

/* ---------- 3. ĐẦU MÀN — MỘT khuôn cho mọi màn: tiêu đề + 1 câu + vùng nút phải ---------- */
.spk-dau { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin: 0 0 24px; }
.spk-dau-chu { min-width: 0; flex: 1 1 420px; }
.spk-dau-tieude { margin: 0; font: 800 40px/1.05 var(--spk-font-tieude); letter-spacing: 0; color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); text-wrap: balance; text-shadow: var(--spk-bong-chu); }
.spk-dau-mo { margin: 8px 0 0; font: 400 15px/1.55 var(--spk-font); color: var(--spk-chu-2); --dm-text-primary: var(--spk-chu-2); --dm-link: var(--spk-chu-2); --dm-link-hover: var(--spk-chu-2); max-width: 64ch; }
.spk-dau-mo b { color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); font-weight: 600; }
.spk-dau-nut { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
html.theme-skeuo .spk-dau-tieude { font-weight: 700; font-size: 34px; line-height: 1.15; }
/* skeuo: chữ không nằm thẳng trên gỗ — đặt lên tấm giấy kem / óc chó (tương phản ≥ 4.5:1) */
html.theme-skeuo .spk-dau { background: var(--spk-mat-nen); border: 1px solid var(--spk-vien); border-radius: var(--spk-r-the); box-shadow: var(--spk-bong-the); padding: 18px 20px; }
@media (max-width: 640px) {
  .spk-dau { margin-bottom: 16px; align-items: flex-start; }
  .spk-dau-tieude { font-size: 32px; }
  html.theme-skeuo .spk-dau-tieude { font-size: 27px; }
  .spk-dau-mo { font-size: 14.5px; }
  html.theme-skeuo .spk-dau { padding: 14px 16px; }
}

/* ---------- 4. NÚT ---------- */
.spk-nut { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--spk-cham); padding: 0 18px;
  border-radius: var(--spk-r-nut); border: 1px solid transparent; font: 600 15px/1.2 var(--spk-font); text-decoration: none; cursor: pointer;
  white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: background-color .15s, border-color .15s, box-shadow .15s, transform .08s; box-sizing: border-box; }
.spk-nut:active { transform: translateY(1px); }
.spk-nut:hover { text-decoration: none; }
.spk-nut svg { width: 18px; height: 18px; flex: none; }
.spk-nut--lon { min-height: 52px; padding: 0 22px; font-size: 16px; border-radius: 12px; }
.spk-nut--chinh { background: var(--spk-nut-nen); color: var(--spk-nut-chu); --dm-text-primary: var(--spk-nut-chu); --dm-link: var(--spk-nut-chu); --dm-link-hover: var(--spk-nut-chu); border-color: var(--spk-nut-vien); box-shadow: var(--spk-nut-bong); }
.spk-nut--chinh:hover { background: var(--spk-nut-nen-hover); color: var(--spk-nut-chu); --dm-text-primary: var(--spk-nut-chu); --dm-link: var(--spk-nut-chu); --dm-link-hover: var(--spk-nut-chu); }
.spk-nut--noi { background: var(--spk-noi-nen); color: var(--spk-noi-chu); --dm-text-primary: var(--spk-noi-chu); --dm-link: var(--spk-noi-chu); --dm-link-hover: var(--spk-noi-chu); border-color: transparent; box-shadow: 0 1px 2px rgba(120, 20, 10, .25), 0 8px 18px -10px rgba(208, 57, 44, .7); }
.spk-nut--noi:hover { background: var(--spk-noi-nen-hover); color: var(--spk-noi-chu); --dm-text-primary: var(--spk-noi-chu); --dm-link: var(--spk-noi-chu); --dm-link-hover: var(--spk-noi-chu); }
.spk-nut--phu { background: var(--spk-nut2-nen); color: var(--spk-nut2-chu); --dm-text-primary: var(--spk-nut2-chu); --dm-link: var(--spk-nut2-chu); --dm-link-hover: var(--spk-nut2-chu); border-color: var(--spk-nut2-vien); box-shadow: var(--spk-nut2-bong); }
.spk-nut--phu:hover { border-color: var(--spk-chinh); color: var(--spk-nut2-chu); --dm-text-primary: var(--spk-nut2-chu); --dm-link: var(--spk-nut2-chu); --dm-link-hover: var(--spk-nut2-chu); }
.spk-nut--nhat { background: transparent; color: var(--spk-chinh-txt); --dm-text-primary: var(--spk-chinh-txt); --dm-link: var(--spk-chinh-txt); --dm-link-hover: var(--spk-chinh-txt); padding: 0 10px; }
.spk-nut--nhat:hover { background: var(--spk-chinh-nhat); color: var(--spk-chinh-txt); --dm-text-primary: var(--spk-chinh-txt); --dm-link: var(--spk-chinh-txt); --dm-link-hover: var(--spk-chinh-txt); }
html.theme-skeuo .spk-nut--chinh, html.theme-skeuo .spk-nut--noi { text-shadow: 0 -1px 0 rgba(0, 0, 0, .28); border-color: rgba(60, 30, 10, .35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 1px 2px rgba(40, 30, 10, .35); }
html.theme-skeuo.ae-dark-mode .spk-nut--chinh { text-shadow: 0 1px 0 rgba(255, 240, 200, .5); }
/* nút «Cách dùng» ở đầu mọi màn — bật tour của màn đó */
.spk-nut-hoi { padding: 0 14px 0 10px; }
.spk-hoi-o { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--spk-chinh-nhat); color: var(--spk-chinh-txt); --dm-text-primary: var(--spk-chinh-txt); --dm-link: var(--spk-chinh-txt); --dm-link-hover: var(--spk-chinh-txt); font: 700 14px/1 var(--spk-font); }
@media (max-width: 640px) { .spk-dau .spk-nut-hoi .spk-nhan { display: none; } .spk-dau .spk-nut-hoi { width: 44px; padding: 0; } }

/* ---------- 5. CHIP · GHI CHÚ · RỖNG ---------- */
.spk-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font: 600 12.5px/20px var(--spk-font);
  background: var(--spk-mat-2); color: var(--spk-chu-2); --dm-text-primary: var(--spk-chu-2); --dm-link: var(--spk-chu-2); --dm-link-hover: var(--spk-chu-2); border: 1px solid var(--spk-vien); white-space: nowrap; }
.spk-chip--vang { background: var(--spk-vang-nhat); color: var(--spk-vang-chu); --dm-text-primary: var(--spk-vang-chu); --dm-link: var(--spk-vang-chu); --dm-link-hover: var(--spk-vang-chu); border-color: transparent; }
.spk-chip--dat { background: var(--spk-dat-nhat); color: var(--spk-dat); --dm-text-primary: var(--spk-dat); --dm-link: var(--spk-dat); --dm-link-hover: var(--spk-dat); border-color: transparent; }
.spk-chip--cho { background: transparent; border-style: dashed; color: var(--spk-chu-3); --dm-text-primary: var(--spk-chu-3); --dm-link: var(--spk-chu-3); --dm-link-hover: var(--spk-chu-3); }
.spk-so { font-family: var(--spk-font-so); font-variant-numeric: tabular-nums; }
.spk-ghi-chu { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin: 0 0 24px; border-radius: var(--spk-r-hang);
  background: var(--spk-mat-nen); border: 1px solid var(--spk-vien); color: var(--spk-chu-2); --dm-text-primary: var(--spk-chu-2); --dm-link: var(--spk-chu-2); --dm-link-hover: var(--spk-chu-2); font: 400 14px/1.55 var(--spk-font); }
.spk-ghi-chu svg { width: 20px; height: 20px; flex: none; color: var(--spk-chinh-txt); --dm-text-primary: var(--spk-chinh-txt); --dm-link: var(--spk-chinh-txt); --dm-link-hover: var(--spk-chinh-txt); margin-top: 1px; }
.spk-ghi-chu b { color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); font-weight: 600; }
.spk-ghi-chu p { margin: 0; color: var(--spk-chu-2); --dm-text-primary: var(--spk-chu-2); --dm-link: var(--spk-chu-2); --dm-link-hover: var(--spk-chu-2); }

/* ---------- 6. THANH BÊN: một kiểu «đang ở đây» cho mọi mục; ví lượt chấm ---------- */
html:not(.theme-skeuo) .sp-sidebar .sp-nav-item.is-active,
html:not(.theme-skeuo) .sp-sidebar .sp-footer-nav-link.is-active { background: var(--spk-chinh-nhat); color: var(--spk-chinh-txt); --dm-text-primary: var(--spk-chinh-txt); --dm-link: var(--spk-chinh-txt); --dm-link-hover: var(--spk-chinh-txt); font-weight: 600; }
html:not(.theme-skeuo) .sp-sidebar .sp-footer-nav-link.is-active svg { color: var(--spk-chinh-txt); --dm-text-primary: var(--spk-chinh-txt); --dm-link: var(--spk-chinh-txt); --dm-link-hover: var(--spk-chinh-txt); }
/* speaking.css:4402 ép tím bằng !important ở nền tối — phải thắng bằng !important cùng chỗ */
html.ae-dark-mode:not(.theme-skeuo) .sp-sidebar .sp-nav-item.is-active,
html.ae-dark-mode:not(.theme-skeuo) .sp-sidebar .sp-nav-item.is-active span { color: var(--spk-chinh-txt) !important; --dm-text-primary: var(--spk-chinh-txt); --dm-link: var(--spk-chinh-txt); --dm-link-hover: var(--spk-chinh-txt); }
/* «Thư viện đề IELTS» là link thường, không giả làm mục đang chọn (HIEN-TRANG §8 #12) */
html:not(.theme-skeuo) .sp-sidebar .sp-back-library { background: transparent; color: var(--sp-gray-500); --dm-text-primary: var(--sp-gray-500); --dm-link: var(--sp-gray-500); --dm-link-hover: var(--sp-gray-500); font-weight: 500; }
html:not(.theme-skeuo) .sp-sidebar .sp-back-library:hover { background: var(--sp-gray-100); color: var(--sp-gray-900); --dm-text-primary: var(--sp-gray-900); --dm-link: var(--sp-gray-900); --dm-link-hover: var(--sp-gray-900); }
html.ae-dark-mode:not(.theme-skeuo) .sp-sidebar .sp-back-library { color: var(--sp-gray-500) !important; --dm-text-primary: var(--sp-gray-500); --dm-link: var(--sp-gray-500); --dm-link-hover: var(--sp-gray-500); }
html.ae-dark-mode:not(.theme-skeuo) .sp-sidebar .sp-back-library:hover { color: var(--sp-gray-900) !important; --dm-text-primary: var(--sp-gray-900); --dm-link: var(--sp-gray-900); --dm-link-hover: var(--sp-gray-900); }
/* skeuo: speaking-skeuo.css:1822 tô nó thành nút đồng thau (!important) */
html.theme-skeuo .sp-sidebar a.sp-back-library { background: transparent !important; box-shadow: none !important; border-color: transparent !important; color: #e8d8ba !important; --dm-text-primary: #e8d8ba; --dm-link: #e8d8ba; --dm-link-hover: #e8d8ba; }
html.theme-skeuo .sp-sidebar a.sp-back-library span, html.theme-skeuo .sp-sidebar a.sp-back-library svg { color: #e8d8ba !important; --dm-text-primary: #e8d8ba; --dm-link: #e8d8ba; --dm-link-hover: #e8d8ba; text-shadow: 0 1px 1px rgba(0, 0, 0, .55) !important; }
html.theme-skeuo .sp-sidebar a.sp-back-library:hover { background: rgba(255, 236, 196, .08) !important; }
/* vùng chạm ≥ 44 px cho mục thanh bên + nút chân thanh bên + nút thu gọn */
.sp-sidebar .sp-nav-item { min-height: 44px; }
.sp-sidebar-footer .sp-darkmode-btn, .sp-sidebar-footer .sp-home-link { min-height: 44px; }
.sp-sidebar-collapse, .sp-sidebar-expand { min-width: 44px; min-height: 44px; }

.spk-vi { display: block; margin: 2px 0 4px; padding: 12px 12px 10px; border-radius: var(--spk-r-hang); background: var(--spk-mat-2); border: 1px solid var(--spk-vien); text-decoration: none; color: var(--spk-chu-2); --dm-text-primary: var(--spk-chu-2); --dm-link: var(--spk-chu-2); --dm-link-hover: var(--spk-chu-2); }
.spk-vi:hover { text-decoration: none; border-color: var(--spk-vien-2); }
.spk-vi-so { display: flex; align-items: baseline; gap: 6px; font: 500 13px/1.3 var(--spk-font); color: var(--spk-chu-2); --dm-text-primary: var(--spk-chu-2); --dm-link: var(--spk-chu-2); --dm-link-hover: var(--spk-chu-2); }
.spk-vi-so b { font: 800 26px/1 var(--spk-font-so); color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); font-variant-numeric: tabular-nums; }
.spk-vi-thanh { display: block; height: 5px; margin: 8px 0 7px; border-radius: 3px; background: var(--spk-vien); overflow: hidden; }
.spk-vi-thanh i { display: block; height: 100%; border-radius: inherit; background: var(--spk-vang); }
.spk-vi-them { font: 600 12.5px/1.3 var(--spk-font); color: var(--spk-chinh-txt); --dm-text-primary: var(--spk-chinh-txt); --dm-link: var(--spk-chinh-txt); --dm-link-hover: var(--spk-chinh-txt); text-decoration: underline; text-underline-offset: 3px; }
html.theme-skeuo .spk-vi { background: rgba(255, 244, 222, .08); border-color: rgba(255, 220, 160, .22); color: #e8d8ba; --dm-text-primary: #e8d8ba; --dm-link: #e8d8ba; --dm-link-hover: #e8d8ba; }
html.theme-skeuo .spk-vi-so, html.theme-skeuo .spk-vi-so b { color: #f4e6c8; --dm-text-primary: #f4e6c8; --dm-link: #f4e6c8; --dm-link-hover: #f4e6c8; text-shadow: 0 1px 1px rgba(0, 0, 0, .55); }
html.theme-skeuo .spk-vi-thanh { background: rgba(0, 0, 0, .3); }
html.theme-skeuo .spk-vi-them { color: #f0cf83; --dm-text-primary: #f0cf83; --dm-link: #f0cf83; --dm-link-hover: #f0cf83; }
html.theme-skeuo.ae-dark-mode .spk-vi-them { color: #f0cf83; --dm-text-primary: #f0cf83; --dm-link: #f0cf83; --dm-link-hover: #f0cf83; }

/* ---------- 7. THANH TRÊN ĐIỆN THOẠI (≤ 1024): ☰ 44 · tên màn · ví · ? — tổng ≤ 64 px ---------- */
.spk-bar-vi, .spk-bar-hoi { display: none; }
@media (max-width: 1024px) {
  .sp-mobile-bar { gap: 8px; padding: 0 8px 0 6px; padding-left: max(6px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
  .sp-mobile-toggle { width: 44px; height: 44px; flex: none; }
  .sp-mobile-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--spk-font); font-weight: 700; }
  .spk-bar-vi { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 12px; border-radius: 999px; flex: none;
    background: var(--spk-vang-nhat); color: var(--spk-vang-chu); --dm-text-primary: var(--spk-vang-chu); --dm-link: var(--spk-vang-chu); --dm-link-hover: var(--spk-vang-chu); font: 700 14px/1 var(--spk-font); text-decoration: none; font-variant-numeric: tabular-nums; }
  .spk-bar-vi:hover { text-decoration: none; color: var(--spk-vang-chu); --dm-text-primary: var(--spk-vang-chu); --dm-link: var(--spk-vang-chu); --dm-link-hover: var(--spk-vang-chu); }
  .spk-bar-hoi { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: transparent; cursor: pointer; color: inherit; }
  .spk-bar-hoi .spk-hoi-o { width: 28px; height: 28px; font-size: 15px; }
  html.theme-skeuo .sp-mobile-bar { background: linear-gradient(180deg, #F7F4EE 0%, #DED8CB 100%); border-bottom-color: #BDB39F; box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(60, 40, 10, .18); }
  html.theme-skeuo.ae-dark-mode .sp-mobile-bar { background: linear-gradient(180deg, #34291E 0%, #241C14 100%); border-bottom-color: rgba(255, 214, 150, .16); box-shadow: inset 0 1px 0 rgba(255, 230, 190, .08); }
  html.theme-skeuo .sp-mobile-title { color: #3A2F22; --dm-text-primary: #3A2F22; --dm-link: #3A2F22; --dm-link-hover: #3A2F22; text-shadow: 0 1px 0 rgba(255, 255, 255, .7); }
  html.theme-skeuo.ae-dark-mode .sp-mobile-title { color: #F1E6D2; --dm-text-primary: #F1E6D2; --dm-link: #F1E6D2; --dm-link-hover: #F1E6D2; text-shadow: 0 1px 1px rgba(0, 0, 0, .5); }
  html.theme-skeuo .sp-mobile-toggle { color: #4A3A22; --dm-text-primary: #4A3A22; --dm-link: #4A3A22; --dm-link-hover: #4A3A22; }
  html.theme-skeuo.ae-dark-mode .sp-mobile-toggle { color: #E8D8BA; --dm-text-primary: #E8D8BA; --dm-link: #E8D8BA; --dm-link-hover: #E8D8BA; }
  html.theme-skeuo .spk-bar-vi { background: rgba(122, 84, 16, .12); color: #6B4A0E; --dm-text-primary: #6B4A0E; --dm-link: #6B4A0E; --dm-link-hover: #6B4A0E; box-shadow: inset 0 1px 2px rgba(60, 40, 10, .18); }
  html.theme-skeuo.ae-dark-mode .spk-bar-vi { background: rgba(255, 214, 150, .14); color: #F0CF83; --dm-text-primary: #F0CF83; --dm-link: #F0CF83; --dm-link-hover: #F0CF83; }
  /* chỉ thanh trên cùng được dính (≤ 64 px): thanh công cụ + breadcrumb luyện tập thôi dính ở màn hẹp */
  .sp-practice-v2 .spv2-toolbar, .sp-practice-v2 .spv2-breadcrumb, html.theme-skeuo .sp-practice-v2 .spv2-toolbar, html.theme-skeuo .sp-anytext .spv2-toolbar, html.theme-skeuo .sp-practice-v2 .spv2-breadcrumb { position: static; }
  /* ngăn kéo menu có lớp phủ tối: bấm ra ngoài là đóng (HIEN-TRANG §8 #19) */
  .spk-man-che { position: fixed; inset: 0; z-index: 99; background: rgba(10, 14, 22, .5); opacity: 0; pointer-events: none; transition: opacity .2s; }
  body.sp-sidebar-open .spk-man-che { opacity: 1; pointer-events: auto; }
}
@media (min-width: 1025px) { .spk-man-che { display: none; } }

/* ---------- 8. LUYỆN TẬP: 1 hàng công cụ khi đang ở một câu + dock micro dính đáy ---------- */
/* hàng «‹ Danh sách câu · tên đề · giọng» (chỉ hiện khi đang ở màn ghi âm — x-show trong template) */
.spk-hang-cau { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
.spk-hang-lui { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 10px 0 4px; border: 0; background: transparent; cursor: pointer;
  font: 600 14.5px/1 var(--spk-font); color: var(--spk-chinh-txt); --dm-text-primary: var(--spk-chinh-txt); --dm-link: var(--spk-chinh-txt); --dm-link-hover: var(--spk-chinh-txt); border-radius: var(--spk-r-nut); white-space: nowrap; }
.spk-hang-lui svg { width: 20px; height: 20px; }
.spk-hang-lui:hover { background: var(--spk-chinh-nhat); }
.spk-hang-ten { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 14.5px/1.3 var(--spk-font); color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); }
.spk-hang-giong { display: none; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--spk-vien); background: var(--spk-mat);
  font: 600 13.5px/1 var(--spk-font); color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); cursor: pointer; flex: none; }
/* đang ở một câu: tab Part, ô tìm và ô ⚔️ rời khỏi hàng (⚔️ đã ở thanh bên / thanh trên) */
.sp-practice-v2.spk-o-cau .spv2-toolbar .spv2-part-tabs,
.sp-practice-v2.spk-o-cau .spv2-toolbar .spv2-usage { display: none; }
.sp-practice-v2.spk-o-cau .spv2-toolbar { flex-wrap: nowrap; gap: 8px; }
/* thanh breadcrumb cũ ở màn ghi âm trùng với hàng mới (speaking-skeuo.css:638 ép display:flex !important — phần tử không có x-show) */
.sp-practice-v2.spk-o-cau .spk-bc-cu, html.theme-skeuo .sp-practice-v2.spk-o-cau .spk-bc-cu { display: none !important; }
@media (max-width: 640px) {
  /* điện thoại: giọng thu thành 1 nút (cạnh tab Part, hoặc cuối hàng «Danh sách câu»), bấm mới mở ô chọn */
  .sp-practice-v2:not(.sp-anytext) .spk-hang-giong { display: inline-flex; order: 2; }
  .sp-practice-v2:not(.sp-anytext) .spv2-toolbar:not(.is-giong-mo) .spv2-voice-pick { display: none; }
  .sp-practice-v2:not(.sp-anytext) .spv2-toolbar .spv2-part-tabs { order: 1; }
  .sp-practice-v2:not(.sp-anytext) .spv2-toolbar .spv2-search-wrap { order: 3; }
  .sp-practice-v2:not(.sp-anytext) .spv2-toolbar .spv2-voice-pick { order: 4; }
  .sp-practice-v2.spk-o-cau .spv2-toolbar.is-giong-mo { flex-wrap: wrap; }
  .sp-practice-v2.spk-o-cau .spv2-toolbar { padding-top: 6px; padding-bottom: 6px; }
}

/* dock micro: dính đáy màn hình khi đang nghỉ / đang ghi / đang chấm (lỗi thì trả về chỗ cũ để đọc hết) */
.spv2-recorder.spk-dock--idle, .spv2-recorder.spk-dock--recording, .spv2-recorder.spk-dock--processing {
  position: sticky; bottom: 0; z-index: 12; bottom: env(safe-area-inset-bottom, 0px);
}
@media (max-width: 640px) {
  .sp-practice-v2 .spv2-recorder.spk-dock--idle, .sp-practice-v2 .spv2-recorder.spk-dock--recording, .sp-practice-v2 .spv2-recorder.spk-dock--processing {
    margin-left: -16px; margin-right: -16px; border-radius: 18px 18px 0 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--spk-mat-nen); border: 1px solid var(--spk-vien); border-bottom: 0; box-shadow: 0 -10px 28px -14px rgba(16, 24, 40, .35); bottom: 0;
  }
  /* nghỉ: [0:00 / 3:00] [micro đỏ] [Bấm để nói + 1 dòng] — một hàng, micro thấy ngay ở màn đầu */
  .sp-practice-v2 .spk-dock--idle .spv2-rec-idle { display: grid; grid-template-columns: auto 64px 1fr; align-items: center; gap: 12px; text-align: left; }
  .sp-practice-v2 .spk-dock--idle .spv2-timer-display { order: 0; font-size: 22px; margin: 0; }
  .sp-practice-v2 .spk-dock--idle .spv2-mic-btn { order: 1; width: 64px; height: 64px; margin: 0; }
  .sp-practice-v2 .spk-dock--idle .spv2-rec-hint { order: 2; margin: 0; text-align: left; }
  .sp-practice-v2 .spk-dock--recording .spv2-rec-active { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "song gio" "nut nut"; align-items: center; gap: 8px 12px; }
  .sp-practice-v2 .spk-dock--recording .sp-waveform { grid-area: song; margin: 0; }
  .sp-practice-v2 .spk-dock--recording .spv2-timer-display { grid-area: gio; margin: 0; }
  .sp-practice-v2 .spk-dock--recording .spv2-stop-btn { grid-area: nut; width: 100%; min-height: 48px; justify-content: center; }
  .sp-practice-v2 .spk-dock--processing .spv2-rec-processing { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
  .sp-practice-v2 .spk-dock--processing .spv2-rec-processing p { margin: 0; text-align: left; }
  .sp-practice-v2 .spv2-recorder.spk-dock--idle, .sp-practice-v2 .spv2-recorder.spk-dock--recording, .sp-practice-v2 .spv2-recorder.spk-dock--processing { min-height: 0; margin-bottom: 0; display: block; }
  .sp-practice-v2 .spk-dock--idle .spv2-timer-display { font-size: 24px; letter-spacing: 0; color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); }
  .sp-practice-v2 .spk-dock--idle .spk-dock-tong { font-size: 12px; }
  .sp-practice-v2 .spk-dock--idle .spv2-rec-hint { font-size: 12.5px; line-height: 1.35; color: var(--spk-chu-3); --dm-text-primary: var(--spk-chu-3); --dm-link: var(--spk-chu-3); --dm-link-hover: var(--spk-chu-3); }
  .sp-practice-v2 .spk-dock--idle .spv2-rec-hint b { font-size: 15px; }
  .sp-practice-v2 .spk-dock--recording .spv2-timer-display { font-size: 26px; letter-spacing: 0; }
}
/* chữ trong dock (mọi cỡ màn) */
.spv2-rec-hint b { display: block; font-weight: 700; color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); }
.spk-hoi-cong-cu { flex: none; }
@media (max-width: 1024px) { .spk-hoi-cong-cu { display: none; } }   /* điện thoại: nút ? đã ở thanh trên */
/* skeuo giữ micro mạ crôm cổ điển nhưng thêm VIỀN ĐỎ — đỏ = nói ở cả 4 nền (speaking-skeuo.css:1781 dùng !important) */
html.theme-skeuo .sp-practice-v2 .spv2-mic-btn:not(.spv2-mic-btn--fu):not(:disabled) {
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, .28), inset 0 -11px 20px rgba(0, 0, 0, .5), inset 0 0 0 2px rgba(0, 0, 0, .22),
    0 0 0 4px #C7362A, 0 0 0 6px rgba(199, 54, 42, .25), 0 8px 20px rgba(10, 15, 22, .5) !important;
}
@media (prefers-reduced-motion: reduce) { .spv2-mic-btn { animation: none !important; } }
.spk-dock-phu { display: block; font: 400 12.5px/1.4 var(--spk-font); color: var(--spk-chu-3); --dm-text-primary: var(--spk-chu-3); --dm-link: var(--spk-chu-3); --dm-link-hover: var(--spk-chu-3); margin-top: 2px; }
.spk-dock-tong { font: 600 .6em/1 var(--spk-font); color: var(--spk-chu-3); --dm-text-primary: var(--spk-chu-3); --dm-link: var(--spk-chu-3); --dm-link-hover: var(--spk-chu-3); letter-spacing: 0; }
/* nút micro: đỏ ở cả 4 nền (đỏ = nói) */
.spv2-mic-btn { min-width: 44px; min-height: 44px; }

/* Part 2 đang nói: thanh độ dài «1:30–2:00 là đẹp», vạch 2:00 = thi thật dừng */
.spk-p2-thanh { position: relative; height: 26px; margin: 4px 0 0; }
.spk-p2-thanh-ray { position: absolute; left: 0; right: 0; top: 4px; height: 8px; border-radius: 4px; background: var(--spk-vien); overflow: hidden; }
.spk-p2-thanh-dep { position: absolute; top: 0; bottom: 0; left: 50%; width: 16.667%; background: var(--spk-dat-nhat); border-left: 2px solid var(--spk-dat); border-right: 2px solid var(--spk-dat); }
.spk-p2-thanh-chay { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p, 0) * 100%); background: var(--spk-noi); border-radius: 4px; transition: width .9s linear; }
.spk-p2-thanh-nhan { position: absolute; top: 14px; font: 600 11.5px/1.2 var(--spk-font); color: var(--spk-dat); --dm-text-primary: var(--spk-dat); --dm-link: var(--spk-dat); --dm-link-hover: var(--spk-dat); white-space: nowrap; }
.spk-p2-thanh-nhan--dep { left: 50%; }
.spk-p2-thanh-nhan--dung { left: 66.667%; transform: translateX(-100%); color: var(--spk-chu-3); --dm-text-primary: var(--spk-chu-3); --dm-link: var(--spk-chu-3); --dm-link-hover: var(--spk-chu-3); }

/* ---------- 9. BẢNG ĐIỂM: nhãn tiêu chí tiếng Việt trước, tiếng Anh nhỏ sau ---------- */
.spk-tc-en { display: block; font: 500 11px/1.25 var(--spk-font); color: var(--spk-chu-3); --dm-text-primary: var(--spk-chu-3); --dm-link: var(--spk-chu-3); --dm-link-hover: var(--spk-chu-3); letter-spacing: 0; opacity: .9; }
/* nút ✕ không còn đè lên điểm tiêu chí cuối (HIEN-TRANG §8 #3) */
.sp-result-modal .sp-result-header { padding-right: 36px; }

/* ---------- 10. ÁP LÊN CÁC MÀN CŨ (nhẹ, chỉ màu + vùng chạm; không đổi bố cục) ---------- */
/* nhóm chọn quý / Part ở Danh sách đề: một màu chính (hết teal/cyan riêng màn) */
.sp-root .sp-quarter-tab--v2 { min-height: 44px; }
.sp-root .sp-quarter-tab--v2:hover { border-color: var(--spk-chinh); color: var(--spk-chinh-txt); --dm-text-primary: var(--spk-chinh-txt); --dm-link: var(--spk-chinh-txt); --dm-link-hover: var(--spk-chinh-txt); }
.sp-root .sp-quarter-tab--v2.is-active { background: var(--spk-nut-nen); border-color: var(--spk-nut-vien); color: var(--spk-nut-chu); --dm-text-primary: var(--spk-nut-chu); --dm-link: var(--spk-nut-chu); --dm-link-hover: var(--spk-nut-chu); box-shadow: var(--spk-nut-bong); }
.sp-root .sp-quarter-tab--v2.is-active .sp-quarter-label { color: var(--spk-nut-chu); --dm-text-primary: var(--spk-nut-chu); --dm-link: var(--spk-nut-chu); --dm-link-hover: var(--spk-nut-chu); }
.sp-root .sp-part-pill { min-height: 44px; }
.sp-root .sp-part-pill.is-active { color: var(--spk-chinh-txt); --dm-text-primary: var(--spk-chinh-txt); --dm-link: var(--spk-chinh-txt); --dm-link-hover: var(--spk-chinh-txt); }
.sp-root .sp-part-pill.is-active .sp-part-pill-count { background: var(--spk-chinh); color: var(--spk-nut-chu); --dm-text-primary: var(--spk-nut-chu); --dm-link: var(--spk-nut-chu); --dm-link-hover: var(--spk-nut-chu); }
/* nút «Luyện ngay» (micro) = hành động NÓI ⇒ đỏ, ≥ 44 px */
.sp-root .sp-topic-quick-practice, .sp-root .sp-topic-item--p23 .sp-topic-quick-practice { width: 44px; height: 44px; border-radius: 12px; background: var(--spk-noi-nen); }
.sp-root .sp-topic-quick-practice svg { width: 17px; height: 17px; }
.sp-root .sp-question-practice-btn { width: 44px; height: 44px; flex: none; color: var(--spk-noi); --dm-text-primary: var(--spk-noi); --dm-link: var(--spk-noi); --dm-link-hover: var(--spk-noi); border-color: var(--spk-vien); }
.sp-root .sp-question-practice-btn:hover { border-color: var(--spk-noi); color: var(--spk-noi); --dm-text-primary: var(--spk-noi); --dm-link: var(--spk-noi); --dm-link-hover: var(--spk-noi); background: var(--spk-noi-nhat); }
.sp-root .sp-question-practice-btn svg { width: 16px; height: 16px; }
/* Lịch sử: nút lọc biểu đồ + in đủ vùng chạm */
.sp-root .sp-chart-section .sp-btn-sm, .sp-root .sp-attempts-section .sp-btn-sm, .sp-root .sp-history-section .sp-btn-sm { min-height: 44px; }
/* Thi thử: đầu màn chuẩn nằm TRÊN thẻ giới thiệu (khối cũ là flex hàng ngang) */
.sp-root .sp-mock-intro { flex-direction: column; align-items: center; }
.sp-root .sp-mock-intro > .spk-dau { align-self: stretch; }

/* Thi thử (điện thoại): ô giọng / giới tính không tràn mép phải (HIEN-TRANG §8 #14) */
@media (max-width: 640px) {
  .sp-root .sp-mock-gender-grid { flex-wrap: wrap; }
  .sp-root .sp-mock-gender-grid > * { flex: 1 1 calc(50% - 8px); min-width: 0; }
  .sp-root .sp-mock-accent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-root .sp-mock-accent-opt, .sp-root .sp-mock-gender-opt { min-width: 0; min-height: 44px; }
  .sp-root .sp-mock-accent-tx { min-width: 0; flex-wrap: wrap; }
}
/* Luyện tập / Tự dán đề: thanh công cụ đủ vùng chạm 44 px */
.sp-root .spv2-part-tab { min-height: 44px; }
.sp-root .spv2-topup-btn { min-height: 36px; padding-left: 12px; padding-right: 12px; }
.sp-root .spv2-voice-pick { min-height: 44px; }
.sp-root .spv2-voice-pick select, .sp-root .spv2-voice-select { min-height: 40px; }
.sp-root .spv2-gender-seg button { min-width: 40px; min-height: 40px; }
.spk-bar-vi { min-height: 44px; }

/* ---------- 12. THANH CÔNG CỤ Luyện tập / Tự dán đề: một bộ màu với cả app ----------
   Trước: tab Part xanh ngọc, «Nạp thêm» hồng đỏ (đỏ chỉ để NÓI), ô giọng tím. Giờ: tab đang chọn = nút chính,
   ô lượt chấm = vàng tiến bộ, ô giọng = mặt thẻ trung tính. Skeuo giữ chất liệu gel/đồng thau sẵn có, chỉ đổi màu tab. */
.sp-root .sp-practice-v2 .spv2-part-tabs { background: var(--spk-mat-2); border: 1px solid var(--spk-vien); padding: 3px; gap: 2px; }
.sp-root .sp-practice-v2 .spv2-part-tab { min-height: 44px; padding: 0 18px; font: 600 14px/1 var(--spk-font); color: var(--spk-chu-2); --dm-text-primary: var(--spk-chu-2); --dm-link: var(--spk-chu-2); --dm-link-hover: var(--spk-chu-2); }
.sp-root .sp-practice-v2 .spv2-part-tab:hover { color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); }
.sp-root .sp-practice-v2 .spv2-part-tab.is-active { background: var(--spk-nut-nen); color: var(--spk-nut-chu) !important; --dm-text-primary: var(--spk-nut-chu); --dm-link: var(--spk-nut-chu); --dm-link-hover: var(--spk-nut-chu); box-shadow: var(--spk-nut-bong); }
html.ae-dark-mode .sp-root .sp-practice-v2 .spv2-part-tabs { background: var(--spk-mat-2); }
html.ae-dark-mode .sp-root .sp-practice-v2 .spv2-part-tab { color: var(--spk-chu-2) !important; --dm-text-primary: var(--spk-chu-2); --dm-link: var(--spk-chu-2); --dm-link-hover: var(--spk-chu-2); }
html.ae-dark-mode .sp-root .sp-practice-v2 .spv2-part-tab.is-active { background: var(--spk-nut-nen); color: var(--spk-nut-chu) !important; --dm-text-primary: var(--spk-nut-chu); --dm-link: var(--spk-nut-chu); --dm-link-hover: var(--spk-nut-chu); box-shadow: var(--spk-nut-bong); }
html.theme-skeuo .sp-root .sp-practice-v2 .spv2-part-tab.is-active,
html.theme-skeuo.ae-dark-mode .sp-root .sp-practice-v2 .spv2-part-tab.is-active { background: var(--spk-nut-nen) !important; color: var(--spk-nut-chu) !important; --dm-text-primary: var(--spk-nut-chu); --dm-link: var(--spk-nut-chu); --dm-link-hover: var(--spk-nut-chu); text-shadow: 0 -1px 0 rgba(0, 0, 0, .25); }
html.theme-skeuo.ae-dark-mode .sp-root .sp-practice-v2 .spv2-part-tab.is-active { text-shadow: 0 1px 0 rgba(255, 240, 200, .5); }

.sp-root .sp-practice-v2 .spv2-search-wrap { flex: 1 1 180px; min-width: 160px; }
.sp-root .sp-practice-v2 .spv2-search { min-height: 44px; border: 1px solid var(--spk-vien-2); background: var(--spk-mat); color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); font: 400 14px/1.3 var(--spk-font); }
.sp-root .sp-practice-v2 .spv2-search:focus { border-color: var(--spk-chinh); box-shadow: 0 0 0 3px var(--spk-chinh-nhat); }
.sp-root .sp-practice-v2 .spv2-search-wrap:focus-within svg { color: var(--spk-chinh-txt); --dm-text-primary: var(--spk-chinh-txt); --dm-link: var(--spk-chinh-txt); --dm-link-hover: var(--spk-chinh-txt); }
html.ae-dark-mode:not(.theme-skeuo) .sp-root .sp-practice-v2 .spv2-search { background: var(--spk-mat) !important; border-color: var(--spk-vien-2) !important; color: var(--spk-chu) !important; --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); }

/* ô lượt chấm: vàng tiến bộ; «Nạp thêm» là nút chữ (mở hộp liên hệ), đủ vùng chạm 44 px */
.sp-root .sp-practice-v2 .spv2-usage { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px 0 14px; border-radius: 999px;
  background: var(--spk-vang-nhat); border: 1px solid transparent; color: var(--spk-vang-chu); --dm-text-primary: var(--spk-vang-chu); --dm-link: var(--spk-vang-chu); --dm-link-hover: var(--spk-vang-chu); font: 600 13.5px/1 var(--spk-font); box-sizing: border-box; }
.sp-root .sp-practice-v2 .spv2-usage > span { color: var(--spk-vang-chu); --dm-text-primary: var(--spk-vang-chu); --dm-link: var(--spk-vang-chu); --dm-link-hover: var(--spk-vang-chu); }
.sp-root .sp-practice-v2 .spv2-topup-btn,
html.theme-skeuo .sp-root .sp-practice-v2 .spv2-topup-btn { min-height: 44px; margin: 0; padding: 0 12px !important; border: 0 !important; border-radius: 999px !important;
  background: transparent !important; box-shadow: none !important; text-shadow: none !important; color: var(--spk-chinh-txt) !important; --dm-text-primary: var(--spk-chinh-txt); --dm-link: var(--spk-chinh-txt); --dm-link-hover: var(--spk-chinh-txt);
  font: 600 13px/1 var(--spk-font) !important; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sp-root .sp-practice-v2 .spv2-topup-btn:hover { background: var(--spk-chinh-nhat) !important; }
html.theme-skeuo .sp-root .sp-practice-v2 .spv2-usage { background: rgba(122, 84, 16, .1); box-shadow: inset 0 1px 2px rgba(60, 40, 10, .16); border-color: rgba(122, 84, 16, .18); }
html.theme-skeuo.ae-dark-mode .sp-root .sp-practice-v2 .spv2-usage { background: rgba(255, 214, 150, .1); border-color: rgba(255, 214, 150, .18); box-shadow: none; }

/* ô giọng giám khảo (phẳng): mặt thẻ trung tính thay vì tím; ô chọn + 3 nút giới tính đủ 44 px */
html:not(.theme-skeuo) .sp-root .spv2-voice-pick { background: var(--spk-mat); border: 1px solid var(--spk-vien-2); color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); padding: 0 0 0 12px; min-height: 46px; box-sizing: border-box; }
html:not(.theme-skeuo) .sp-root .spv2-voice-pick select, html:not(.theme-skeuo) .sp-root .spv2-voice-select { color: var(--spk-chu) !important; --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); font: 600 13.5px/1.2 var(--spk-font); }
html:not(.theme-skeuo) .sp-root .spv2-voice-sep { background: var(--spk-vien); height: 24px; }
html:not(.theme-skeuo) .sp-root .spv2-gender-seg { background: transparent; border: 0; padding: 0; gap: 0; }
html:not(.theme-skeuo) .sp-root .spv2-gender-seg button { color: var(--spk-chu-2); --dm-text-primary: var(--spk-chu-2); --dm-link: var(--spk-chu-2); --dm-link-hover: var(--spk-chu-2); }
html:not(.theme-skeuo) .sp-root .spv2-gender-seg button:hover { background: var(--spk-chinh-nhat); }
html:not(.theme-skeuo) .sp-root .spv2-gender-seg button.is-active { background: var(--spk-chinh-nhat); color: var(--spk-chinh-txt); --dm-text-primary: var(--spk-chinh-txt); --dm-link: var(--spk-chinh-txt); --dm-link-hover: var(--spk-chinh-txt); box-shadow: inset 0 0 0 2px var(--spk-chinh); }
html:not(.theme-skeuo) .sp-root .spv2-voice-select-wrap::after { filter: grayscale(1) brightness(.45); }
html.ae-dark-mode:not(.theme-skeuo) .sp-root .spv2-voice-select-wrap::after { filter: grayscale(1) brightness(2.2); }
.sp-root .spv2-voice-pick select, .sp-root .spv2-voice-select { min-height: 44px !important; }
.sp-root .spv2-gender-seg button { min-width: 44px; min-height: 44px; font-size: 15px; }

/* «? Cách dùng» ở cuối thanh công cụ: máy tính hẹp chỉ còn ô «?» để không rớt xuống hàng riêng */
@media (max-width: 1500px) { .sp-root .spk-hoi-cong-cu { width: 44px; padding: 0; } .sp-root .spk-hoi-cong-cu .spk-nhan { display: none; } }

/* Tự dán đề: tên màn ở thanh công cụ trùng với đầu màn ở bước dán ⇒ chỉ hiện ở các bước sau */
.sp-root .sp-anytext:has(.spv2-anytext-paste:not([style*="display: none"])) .spv2-anytext-title { visibility: hidden; }
.sp-root .spv2-anytext-title svg { color: var(--spk-chinh-txt); --dm-text-primary: var(--spk-chinh-txt); --dm-link: var(--spk-chinh-txt); --dm-link-hover: var(--spk-chinh-txt); }

/* điện thoại/máy tính bảng: ⚔️ đã ở thanh trên cùng ⇒ bỏ ô lượt chấm + tên màn khỏi thanh công cụ */
@media (max-width: 1024px) {
  .sp-root .sp-practice-v2 .spv2-toolbar .spv2-usage, .sp-root .sp-anytext .spv2-toolbar .spv2-anytext-title { display: none; }
  .sp-root .sp-practice-v2 .spv2-part-tabs { flex: 1 1 auto; }
  .sp-root .sp-practice-v2 .spv2-part-tab { flex: 1 1 0; }
  /* đầu màn: nút «?» đã có ở thanh trên cùng */
  .sp-root .spk-dau .spk-nut-hoi { display: none; }
}
/* chữ nằm thẳng trên gỗ (skeuo sáng) ⇒ kem ấm + bóng tối, không nâu xám (tương phản ≥ 4.5:1) */
html.theme-skeuo:not(.ae-dark-mode) .sp-root .spv2-anytext-part-label,
html.theme-skeuo:not(.ae-dark-mode) .sp-root .sp-anytext .spv2-anytext-input-label,
html.theme-skeuo:not(.ae-dark-mode) .sp-root .sp-anytext .spv2-anytext-input-label span { color: #FFF4DC !important; --dm-text-primary: #FFF4DC; --dm-link: #FFF4DC; --dm-link-hover: #FFF4DC; text-shadow: 0 1px 2px rgba(40, 22, 4, .85), 0 0 1px rgba(40, 22, 4, .9) !important; }
html.theme-skeuo:not(.ae-dark-mode) .sp-root .sp-anytext .spv2-anytext-input-label svg { color: #FFE2A6 !important; --dm-text-primary: #FFE2A6; --dm-link: #FFE2A6; --dm-link-hover: #FFE2A6; stroke: #FFE2A6 !important; }
.sp-root .spv2-anytext-part-label { text-transform: none; letter-spacing: 0; font-size: 14px; }
/* Part đang chọn ở Tự dán đề: màu chính (hết tím) */
html:not(.theme-skeuo) .sp-root .spv2-anytext-part-tab.is-active { border-color: var(--spk-chinh) !important; box-shadow: 0 0 0 1px var(--spk-chinh) inset; background: var(--spk-chinh-nhat); }
html:not(.theme-skeuo) .sp-root .spv2-anytext-part-tab.is-active .spv2-anytext-part-num { color: var(--spk-chinh-txt) !important; --dm-text-primary: var(--spk-chinh-txt); --dm-link: var(--spk-chinh-txt); --dm-link-hover: var(--spk-chinh-txt); }
.sp-root .spv2-anytext-part-tab { min-height: 44px; }

/* ---------- 13. THẺ CÂU HỎI ở màn ghi âm = đúng thẻ trong phim hướng dẫn ----------
   Tờ trắng (skeuo: giấy kem sẵn có), nhãn «Câu 1 / 4» chữ nhỏ + vạch đỏ ngang bên dưới (không phải tab cam dán mép,
   không viền nhấn trái). Học viên xem phim xong vào màn thật thấy đúng cái thẻ đó. */
html:not(.theme-skeuo) .sp-root .spv2-question-card,
html:not(.theme-skeuo) .sp-root .spv2-question-card--p2 { background: var(--spk-mat); border: 1px solid var(--spk-vien); border-radius: var(--spk-r-the); box-shadow: var(--spk-bong-the); padding: 16px 20px 18px; }
.sp-root .spv2-question-card-label,
.sp-root .spv2-question-card--p2 .spv2-question-card-label { position: static; display: block; background: transparent; padding: 0 0 7px; margin: 0 0 10px; border-radius: 0;
  border-bottom: 2px solid var(--spk-noi); font: 600 12.5px/1.2 var(--spk-font); letter-spacing: 0; text-transform: none; color: var(--spk-chu-3); --dm-text-primary: var(--spk-chu-3); --dm-link: var(--spk-chu-3); --dm-link-hover: var(--spk-chu-3); }
html.theme-skeuo .sp-root .spv2-question-card-label { background: transparent !important; box-shadow: none !important; color: var(--spk-chu-3) !important; --dm-text-primary: var(--spk-chu-3); --dm-link: var(--spk-chu-3); --dm-link-hover: var(--spk-chu-3); text-shadow: none !important; }
.sp-root .spv2-question-card-text { margin-top: 0; font: 600 17px/1.5 var(--spk-font); color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); }
html:not(.theme-skeuo) .sp-root .spv2-question-card--p2 .spv2-cue-card-details { border-top-color: var(--spk-vien); }
html:not(.theme-skeuo) .sp-root .spv2-cue-card-points-label { color: var(--spk-chu-2); --dm-text-primary: var(--spk-chu-2); --dm-link: var(--spk-chu-2); --dm-link-hover: var(--spk-chu-2); }
@media (max-width: 640px) { html:not(.theme-skeuo) .sp-root .spv2-question-card { padding: 14px 16px 16px; } .sp-root .spv2-question-card-text { font-size: 16px; } }
/* chấm tiến độ câu (bấm để nhảy câu): chấm 10 px nhưng vùng bấm 44 px; màu chính */
.sp-root .spv2-progress-dots { gap: 0; margin-bottom: 4px; margin-left: -17px; }
.sp-root .spv2-dot, .sp-root .spv2-dot.is-active, .sp-root .spv2-dot:hover { display: inline-grid; place-items: center; width: 44px; height: 44px; background: transparent !important; transform: none; box-shadow: none !important; border: 0 !important; }
.sp-root .spv2-dot::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--spk-vien-2); transition: transform .15s, background-color .15s; }
.sp-root .spv2-dot:hover::before { background: var(--spk-chu-3); }
.sp-root .spv2-dot.is-active::before { background: var(--spk-chinh); transform: scale(1.3); }
/* loa trong thẻ câu hỏi: đủ 44 px, màu chính (không cam) */
.sp-root .spv2-q-tts--card { min-width: 44px; min-height: 44px; margin-top: 4px; color: var(--spk-chinh-txt); --dm-text-primary: var(--spk-chinh-txt); --dm-link: var(--spk-chinh-txt); --dm-link-hover: var(--spk-chinh-txt); border-radius: var(--spk-r-nut); }
/* Gợi ý (partials/hint-render.php): nút tầng band «B2 · 6.5» (23 px) và tab «Ý tưởng / Nói thế nào» (32 px) → đủ 44 px,
   giữ màu từng nền của speaking.css; chỉ đổi cỡ + canh giữa chữ */
.sp-root .spv2-goiy-pills { gap: 6px; }
.sp-root .spv2-goiy-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; font-size: 12.5px; }
.sp-root .spv2-goiy-tab { min-height: 44px; padding: 0 14px; }
/* Part 2: «1 phút chuẩn bị» (31 px) — nút mà trang hướng dẫn + tour chỉ học viên bấm; «Bỏ qua →» lúc đếm ngược (50×15 px);
   «Mở lại» khi gợi ý đã khoá ⇒ đủ 44 px, giữ màu của speaking.css */
.sp-root .spv2-goiy-prep-btn { min-height: 44px; padding: 0 16px; }
.sp-root .spv2-goiy-prep-skip, .sp-root .spv2-goiy-unlock { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 12px; }
/* Câu trước / Câu sau: nút phụ chuẩn, đủ 44 px */
.sp-root .spv2-nav-btn { min-height: 44px; border-radius: var(--spk-r-nut); font: 600 14px/1 var(--spk-font); }
html:not(.theme-skeuo) .sp-root .spv2-nav-btn { background: var(--spk-nut2-nen); color: var(--spk-nut2-chu); --dm-text-primary: var(--spk-nut2-chu); --dm-link: var(--spk-nut2-chu); --dm-link-hover: var(--spk-nut2-chu); border: 1px solid var(--spk-nut2-vien); }
html:not(.theme-skeuo) .sp-root .spv2-nav-btn:hover:not(:disabled) { border-color: var(--spk-chinh); color: var(--spk-chinh-txt); --dm-text-primary: var(--spk-chinh-txt); --dm-link: var(--spk-chinh-txt); --dm-link-hover: var(--spk-chinh-txt); }

/* ---------- 14. HẾT MÀU LẺ: nút chính/viền của app cũ (tím), số thứ tự đề (xanh ngọc), Tự dán đề, Thi thử, Lịch sử ----------
   Chỉ nền phẳng (skeuo đã có gel/đồng thau riêng trong speaking-skeuo.css). Phòng thợ săn không đụng. */
html:not(.theme-skeuo) .sp-root .sp-btn-primary:not(.sp-hunter *) { background: var(--spk-nut-nen) !important; border-color: var(--spk-nut-vien) !important; color: var(--spk-nut-chu) !important; --dm-text-primary: var(--spk-nut-chu); --dm-link: var(--spk-nut-chu); --dm-link-hover: var(--spk-nut-chu); box-shadow: var(--spk-nut-bong); }
html:not(.theme-skeuo) .sp-root .sp-btn-primary:not(.sp-hunter *):hover { background: var(--spk-nut-nen-hover) !important; }
html:not(.theme-skeuo) .sp-root .sp-btn-outline:not(.sp-hunter *) { background: var(--spk-nut2-nen); border-color: var(--spk-nut2-vien); color: var(--spk-nut2-chu); --dm-text-primary: var(--spk-nut2-chu); --dm-link: var(--spk-nut2-chu); --dm-link-hover: var(--spk-nut2-chu); }
html:not(.theme-skeuo) .sp-root .sp-btn-outline:not(.sp-hunter *):hover { background: var(--spk-nut2-nen); border-color: var(--spk-chinh); color: var(--spk-chinh-txt); --dm-text-primary: var(--spk-chinh-txt); --dm-link: var(--spk-chinh-txt); --dm-link-hover: var(--spk-chinh-txt); }
html.ae-dark-mode:not(.theme-skeuo) .sp-root .sp-btn-outline:not(.sp-hunter *) { background: var(--spk-nut2-nen) !important; border-color: var(--spk-nut2-vien) !important; color: var(--spk-nut2-chu) !important; --dm-text-primary: var(--spk-nut2-chu); --dm-link: var(--spk-nut2-chu); --dm-link-hover: var(--spk-nut2-chu); }
/* «Luyện lại» ở bảng điểm = hành động NÓI ⇒ đỏ ở cả 4 nền (khớp cảnh bảng điểm trong phim hướng dẫn) */
.sp-root .sp-btn.spk-luyen-lai, html.ae-dark-mode .sp-root .sp-btn.spk-luyen-lai, html.theme-skeuo .sp-root .sp-btn.spk-luyen-lai {
  background: var(--spk-noi-nen) !important; border-color: transparent !important; color: var(--spk-noi-chu) !important; --dm-text-primary: var(--spk-noi-chu); --dm-link: var(--spk-noi-chu); --dm-link-hover: var(--spk-noi-chu); text-shadow: none !important; box-shadow: 0 1px 2px rgba(120, 20, 10, .25) !important; }
.sp-root .sp-btn.spk-luyen-lai:hover { background: var(--spk-noi-nen-hover) !important; }
.sp-root .sp-btn.spk-luyen-lai svg { width: 16px; height: 16px; }
.sp-root .sp-btn { min-height: 44px; }

/* số thứ tự chủ đề ở Danh sách đề: ô nhạt màu chính thay khối xanh ngọc / hồng */
html:not(.theme-skeuo) .sp-root .sp-topic-num-badge, html:not(.theme-skeuo) .sp-root .sp-topic-num-badge--rose { background: var(--spk-chinh-nhat); color: var(--spk-chinh-txt); --dm-text-primary: var(--spk-chinh-txt); --dm-link: var(--spk-chinh-txt); --dm-link-hover: var(--spk-chinh-txt); box-shadow: none; font-family: var(--spk-font-so); font-size: 17px; }
/* chip «4 câu hỏi» trung tính (hết xanh ngọc / hồng / tím) */
html:not(.theme-skeuo) .sp-root .sp-topic-q-chip, html:not(.theme-skeuo) .sp-root .sp-topic-q-chip--rose, html:not(.theme-skeuo) .sp-root .sp-topic-q-chip--violet { background: var(--spk-mat-2); color: var(--spk-chu-2); --dm-text-primary: var(--spk-chu-2); --dm-link: var(--spk-chu-2); --dm-link-hover: var(--spk-chu-2); }

/* Tự dán đề: gợi ý + tuỳ chọn + nút kiểm tra theo màu chung */
html:not(.theme-skeuo) .sp-root .spv2-anytext-hints { background: var(--spk-mat-2); color: var(--spk-chu-2); --dm-text-primary: var(--spk-chu-2); --dm-link: var(--spk-chu-2); --dm-link-hover: var(--spk-chu-2); border: 1px solid var(--spk-vien); }
html:not(.theme-skeuo) .sp-root .spv2-anytext-hints strong { color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); }
html:not(.theme-skeuo) .sp-root .spv2-anytext-toggle { background: var(--spk-mat); border: 1px solid var(--spk-vien-2); }
html:not(.theme-skeuo) .sp-root .spv2-anytext-toggle:hover, html:not(.theme-skeuo) .sp-root .spv2-anytext-toggle.is-on { border-color: var(--spk-chinh); background: var(--spk-mat); box-shadow: 0 0 0 1px var(--spk-chinh) inset; }
html:not(.theme-skeuo) .sp-root .spv2-anytext-toggle.is-on .spv2-anytext-toggle-checkmark { background: var(--spk-nut-nen); border-color: var(--spk-nut-vien); color: var(--spk-nut-chu); --dm-text-primary: var(--spk-nut-chu); --dm-link: var(--spk-nut-chu); --dm-link-hover: var(--spk-nut-chu); }
html:not(.theme-skeuo) .sp-root .spv2-anytext-toggle-label { color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); }
html:not(.theme-skeuo) .sp-root .spv2-anytext-toggle-desc { color: var(--spk-chu-2); --dm-text-primary: var(--spk-chu-2); --dm-link: var(--spk-chu-2); --dm-link-hover: var(--spk-chu-2); }
html:not(.theme-skeuo) .sp-root .spv2-anytext-cta, html:not(.theme-skeuo) .sp-root .spv2-anytext-btn-primary { background: var(--spk-nut-nen); color: var(--spk-nut-chu); --dm-text-primary: var(--spk-nut-chu); --dm-link: var(--spk-nut-chu); --dm-link-hover: var(--spk-nut-chu); box-shadow: var(--spk-nut-bong); border-radius: var(--spk-r-nut); }
html:not(.theme-skeuo) .sp-root .spv2-anytext-cta:hover:not(:disabled) { transform: none; background: var(--spk-nut-nen-hover); box-shadow: var(--spk-nut-bong); }
.sp-root .spv2-anytext-cta { min-height: 52px; padding: 0 28px; font: 700 16px/1 var(--spk-font); }
@media (max-width: 640px) { .sp-root .spv2-anytext-cta { min-width: 0; width: 100%; } }

/* Thi thử (màn giới thiệu): icon + ô Part theo màu chính, bỏ tím */
html:not(.theme-skeuo) .sp-root .sp-mock-feature svg { color: var(--spk-chinh-txt); --dm-text-primary: var(--spk-chinh-txt); --dm-link: var(--spk-chinh-txt); --dm-link-hover: var(--spk-chinh-txt); }
html:not(.theme-skeuo) .sp-root .sp-mock-part-preview { background: var(--spk-mat-2); border: 1px solid var(--spk-vien); }
html:not(.theme-skeuo) .sp-root .sp-mock-part-num { color: var(--spk-chinh-txt); --dm-text-primary: var(--spk-chinh-txt); --dm-link: var(--spk-chinh-txt); --dm-link-hover: var(--spk-chinh-txt); }
/* ô lượt chấm (Thi thử, …): số + thanh = vàng tiến bộ, không gradient tím → cam */
html:not(.theme-skeuo) .sp-root .sp-usage-count, html.ae-dark-mode:not(.theme-skeuo) .sp-root .sp-usage-count { color: var(--spk-vang-chu) !important; --dm-text-primary: var(--spk-vang-chu); --dm-link: var(--spk-vang-chu); --dm-link-hover: var(--spk-vang-chu); }
.sp-root .sp-usage-bar { background: var(--spk-vien); }
.sp-root .sp-usage-fill { background: var(--spk-vang); }
html:not(.theme-skeuo) .sp-root .sp-mock-credit-explainer-title { color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); }
/* Tự dán đề: Part chưa chọn chữ thường (không tím) */
html:not(.theme-skeuo) .sp-root .spv2-anytext-part-num { color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); }

/* Lịch sử: không viền nhấn trái trên ô số; ô lọc Part đủ 44 px; tiêu đề mục không nằm trần trên gỗ */
html.theme-skeuo .sp-root .sp-dashboard .sp-stat-card--amber, html.theme-skeuo .sp-root .sp-dashboard .sp-stat-card--purple { border-left-width: 1px !important; border-left-color: inherit !important; }
html.theme-skeuo:not(.ae-dark-mode) .sp-root .sp-dashboard .sp-stat-card--amber, html.theme-skeuo:not(.ae-dark-mode) .sp-root .sp-dashboard .sp-stat-card--purple { border-left-color: #e6dcbe !important; }
html.theme-skeuo.ae-dark-mode .sp-root .sp-dashboard .sp-stat-card--amber, html.theme-skeuo.ae-dark-mode .sp-root .sp-dashboard .sp-stat-card--purple { border-left-color: rgba(255, 200, 110, .2) !important; }
.sp-root .sp-history-filter .sp-select, .sp-root .sp-select { min-height: 44px; }
html.theme-skeuo .sp-root .sp-dashboard .sp-history-header { background: var(--spk-mat-nen); border: 1px solid var(--spk-vien); border-radius: var(--spk-r-the); box-shadow: var(--spk-bong-the); padding: 14px 18px; margin-bottom: 16px; }
html.theme-skeuo .sp-root .sp-dashboard .sp-history-header h2 { color: var(--spk-chu) !important; --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); text-shadow: var(--spk-bong-chu) !important; }
html.theme-skeuo .sp-root .sp-dashboard .sp-history-header .sp-attempts-sub { color: var(--spk-chu-2) !important; --dm-text-primary: var(--spk-chu-2); --dm-link: var(--spk-chu-2); --dm-link-hover: var(--spk-chu-2); text-shadow: none !important; }

/* ---------- 15. HỎI THÊM sau Part 2: cùng bộ màu với màn ghi âm ---------- */
/* đang hỏi thêm: tab Part / ô tìm / ô lượt chấm rời thanh công cụ (đổi Part giữa chừng làm hỏng lượt) */
.sp-practice-v2.spk-dang-hoi-them .spv2-toolbar .spv2-part-tabs,
.sp-practice-v2.spk-dang-hoi-them .spv2-toolbar .spv2-search-wrap,
.sp-practice-v2.spk-dang-hoi-them .spv2-toolbar .spv2-usage { display: none; }
/* nền màn hỏi thêm: nền app (hết gradient xanh–tím + quầng tím) */
html:not(.theme-skeuo) .sp-root .spv2-followup-screen { background: var(--spk-nen); border-color: var(--spk-vien); }
html:not(.theme-skeuo) .sp-root .spv2-followup-screen::before { display: none; }
/* micro trả lời = hành động NÓI ⇒ đỏ (skeuo giữ micro crôm + viền đỏ như màn ghi âm) */
html:not(.theme-skeuo) .sp-root .spv2-mic-btn--fu { background: var(--spk-noi-nen); }
html:not(.theme-skeuo) .sp-root .spv2-mic-btn--fu:hover { background: var(--spk-noi-nen-hover); box-shadow: 0 14px 30px -8px rgba(208, 57, 44, .55); }
html.theme-skeuo .sp-root .spv2-mic-btn--fu:not(:disabled) {
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, .28), inset 0 -11px 20px rgba(0, 0, 0, .5), 0 0 0 4px #C7362A, 0 0 0 6px rgba(199, 54, 42, .25), 0 8px 20px rgba(10, 15, 22, .5) !important; }
/* nhãn «Giám khảo», bước 1/2, câu dịch: màu chính / chữ thường — không xanh ngọc, không viền nhấn trái, không chữ HOA */
html:not(.theme-skeuo) .sp-root .spv2-fu-question-badge { background: var(--spk-chinh-nhat); color: var(--spk-chinh-txt); --dm-text-primary: var(--spk-chinh-txt); --dm-link: var(--spk-chinh-txt); --dm-link-hover: var(--spk-chinh-txt); }
.sp-root .spv2-fu-question-badge { text-transform: none; letter-spacing: 0; font: 600 12.5px/1 var(--spk-font); }
html:not(.theme-skeuo) .sp-root .spv2-fu-progress-dot.is-active { background: var(--spk-nut-nen); color: var(--spk-nut-chu); --dm-text-primary: var(--spk-nut-chu); --dm-link: var(--spk-nut-chu); --dm-link-hover: var(--spk-nut-chu); box-shadow: var(--spk-nut-bong); transform: none; }
html:not(.theme-skeuo) .sp-root .spv2-fu-progress-dot.is-done { background: var(--spk-dat); }
html:not(.theme-skeuo) .sp-root .spv2-fu-question-vn { color: var(--spk-chu-2); --dm-text-primary: var(--spk-chu-2); --dm-link: var(--spk-chu-2); --dm-link-hover: var(--spk-chu-2); background: var(--spk-mat-2); border-left: 0; border: 1px solid var(--spk-vien); }
.sp-root .spv2-fu-question-vn { border-left-width: 1px !important; }
html:not(.theme-skeuo) .sp-root .sp-practice-v2 .spv2-back { background: transparent; border: 1px solid var(--spk-vien-2); color: var(--spk-chinh-txt); --dm-text-primary: var(--spk-chinh-txt); --dm-link: var(--spk-chinh-txt); --dm-link-hover: var(--spk-chinh-txt); }
.sp-root .sp-practice-v2 .spv2-back { min-height: 44px; padding: 0 14px; font: 600 13.5px/1 var(--spk-font); }
html:not(.theme-skeuo) .sp-root .spv2-fu-skip:hover { border-color: var(--spk-chinh); color: var(--spk-chinh-txt); --dm-text-primary: var(--spk-chinh-txt); --dm-link: var(--spk-chinh-txt); --dm-link-hover: var(--spk-chinh-txt); background: var(--spk-chinh-nhat); }
.sp-root .spv2-fu-skip, .sp-root .spv2-fu-tts { min-height: 44px; min-width: 44px; }

/* ---------- 16. Nhãn đếm «75 chủ đề»: chữ thường, không nhãn HOA giãn chữ ---------- */
.sp-root .spv2-count { text-transform: none; letter-spacing: 0; font: 600 13.5px/1.3 var(--spk-font); color: var(--spk-chu-2); --dm-text-primary: var(--spk-chu-2); --dm-link: var(--spk-chu-2); --dm-link-hover: var(--spk-chu-2); }
html.theme-skeuo .sp-root .spv2-screen .spv2-count { text-transform: none !important; letter-spacing: 0 !important; }
/* Tự dán đề: ô dán ở nền tối = mặt thẻ (dark-mode.css tô đen #000); icon nhãn màu chính; Part chưa chọn ở skeuo tối hết tím */
html.ae-dark-mode:not(.theme-skeuo) .sp-root .spv2-anytext-textarea { background: var(--spk-mat) !important; border-color: var(--spk-vien-2) !important; color: var(--spk-chu) !important; --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); }
html:not(.theme-skeuo) .sp-root .spv2-anytext-input-label svg { color: var(--spk-chinh-txt); --dm-text-primary: var(--spk-chinh-txt); --dm-link: var(--spk-chinh-txt); --dm-link-hover: var(--spk-chinh-txt); }
html.theme-skeuo.ae-dark-mode .sp-root .spv2-anytext-part-tab:not(.is-active) .spv2-anytext-part-num { color: var(--spk-chu) !important; --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); }
/* Bảng điểm: «Điểm mạnh / Điểm yếu» không dùng viền nhấn trái — tiêu đề có chấm màu; dòng ⓘ chú giải phát âm chảy thành 1 đoạn */
.sp-root .sp-strengths, .sp-root .sp-weaknesses, html.ae-dark-mode .sp-root .sp-strengths, html.ae-dark-mode .sp-root .sp-weaknesses { border-left: 0 !important; padding-left: 0 !important; }
html.ae-dark-mode:not(.theme-skeuo) .sp-root .sp-strengths, html.ae-dark-mode:not(.theme-skeuo) .sp-root .sp-weaknesses { padding: 12px 14px !important; border-radius: var(--spk-r-hang) !important; }
.sp-root .sp-sw-title { display: flex; align-items: center; gap: 8px; }
.sp-root .sp-sw-title::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.sp-root .sp-prleg-note { display: block; }
.sp-root .sp-prleg-note svg { display: inline-block; vertical-align: -2px; margin-right: 4px; }
.sp-root .sp-prleg-note b { text-transform: lowercase; }
/* Cài đặt: thẻ thẳng hàng với đầu màn (trước lùi vào 24 px mỗi bên, lệch mép với tiêu đề) */
.sp-root .sp-settings--v2 .sp-settings-section { margin-left: 0; margin-right: 0; }
@media (max-width: 640px) { .sp-root .sp-settings--v2 .sp-settings-section { padding: 18px 16px; } }
/* Thi thử (màn giới thiệu): bỏ khoảng trống 40 px trên đầu màn; thẻ giới thiệu full bề ngang ở điện thoại */
.sp-root .sp-mock-intro { padding-top: 0; }
@media (max-width: 640px) { .sp-root .sp-mock-intro { padding-left: 0; padding-right: 0; } .sp-root .sp-mock-intro-card { padding: 24px 16px; } }
/* Xem thử video giám khảo (?view=demo-video): ô chọn đề đủ 44 px */
.sp-root .spdemo-select { min-height: 44px; }

/* ---------- 17. THẺ ĐỀ PART 2 ở màn ghi âm: hết hồng, nhãn chữ thường, không viền nhấn trái (khớp thẻ đề trong cảnh Part 2) ---------- */
.sp-root .spv2-cue-card-points-label { text-transform: none; letter-spacing: 0; font: 600 13px/1.3 var(--spk-font); }
html:not(.theme-skeuo) .sp-root .spv2-cue-card-points-label { color: var(--spk-chu-2); --dm-text-primary: var(--spk-chu-2); --dm-link: var(--spk-chu-2); --dm-link-hover: var(--spk-chu-2); }
html:not(.theme-skeuo) .sp-root .spv2-cue-card-points li, html.ae-dark-mode:not(.theme-skeuo) .sp-root .sp-page.sp-practice-v2 .spv2-cue-card-points li { background: var(--spk-mat-2); color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); }
html:not(.theme-skeuo) .sp-root .spv2-cue-card-points li::before { background: var(--spk-chu-3); }
html:not(.theme-skeuo) .sp-root .spv2-cue-card-ending, html.ae-dark-mode:not(.theme-skeuo) .sp-root .spv2-cue-card-ending { background: var(--spk-mat-2); border: 1px solid var(--spk-vien); border-radius: 8px; color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); }
.sp-root .spv2-cue-card-ending { border-left-width: 1px !important; }
html:not(.theme-skeuo) .sp-root .spv2-cue-card-meta { border-top-color: var(--spk-vien); }
html:not(.theme-skeuo) .sp-root .spv2-cue-card-meta-item, html.ae-dark-mode:not(.theme-skeuo) .sp-root .spv2-cue-card-meta-item { background: var(--spk-mat); border-color: var(--spk-vien-2); color: var(--spk-chu-2); --dm-text-primary: var(--spk-chu-2); --dm-link: var(--spk-chu-2); --dm-link-hover: var(--spk-chu-2); }

/* ---------- 18. DANH SÁCH ĐỀ — danh sách câu trong chủ đề: nhãn chữ thường; điện thoại: chip «Bài mẫu» thu thành dấu ✓ để câu hỏi đủ chỗ ---------- */
.sp-root .sp-topic-section-label { text-transform: none; letter-spacing: 0; font: 600 13.5px/1.4 var(--spk-font); }
.sp-root .sp-topic-section-label .sp-section-hint { text-transform: none; letter-spacing: 0; font-weight: 400; }
@media (max-width: 640px) {
  .sp-root .sp-q-sample-chip { font-size: 0; gap: 0; padding: 0; width: 26px; height: 26px; justify-content: center; border-radius: 50%; flex: none; }
  .sp-root .sp-q-sample-chip svg { width: 13px; height: 13px; }
  .sp-root .sp-question-row .sp-q-text { min-width: 0; flex: 1 1 auto; }
}
html.theme-skeuo .sp-root .sp-topic-num-badge { background: var(--spk-chinh-nhat) !important; color: var(--spk-chinh-txt) !important; --dm-text-primary: var(--spk-chinh-txt); --dm-link: var(--spk-chinh-txt); --dm-link-hover: var(--spk-chinh-txt); box-shadow: none !important; }

/* ---------- 19. CÀI ĐẶT: thẻ giọng / giới tính đang chọn = màu chính (hết tím); nhãn nhóm chữ thường; chạm 44 px ---------- */
.sp-root .sp-voice-sublabel { text-transform: none; letter-spacing: 0; font: 600 13.5px/1.3 var(--spk-font); color: var(--spk-chu-2); --dm-text-primary: var(--spk-chu-2); --dm-link: var(--spk-chu-2); --dm-link-hover: var(--spk-chu-2); }
html:not(.theme-skeuo) .sp-root .sp-voice-card, html:not(.theme-skeuo) .sp-root .sp-gender-card { background: var(--spk-mat); border-color: var(--spk-vien-2); color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); }
html:not(.theme-skeuo) .sp-root .sp-voice-card:hover, html:not(.theme-skeuo) .sp-root .sp-gender-card:hover { border-color: var(--spk-chinh); }
html:not(.theme-skeuo) .sp-root .sp-voice-card.is-active, html:not(.theme-skeuo) .sp-root .sp-gender-card.is-active { background: var(--spk-chinh-nhat); border-color: var(--spk-chinh); color: var(--spk-chinh-txt); --dm-text-primary: var(--spk-chinh-txt); --dm-link: var(--spk-chinh-txt); --dm-link-hover: var(--spk-chinh-txt); box-shadow: 0 0 0 1px var(--spk-chinh) inset; }
html:not(.theme-skeuo) .sp-root .sp-voice-card-name { color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); }
html:not(.theme-skeuo) .sp-root .sp-voice-card-desc { color: var(--spk-chu-2); --dm-text-primary: var(--spk-chu-2); --dm-link: var(--spk-chu-2); --dm-link-hover: var(--spk-chu-2); }
.sp-root .sp-gender-card { min-height: 44px; }

/* ---------- 20. BIỂU TƯỢNG LƯỢT CHẤM + TÊN NÚT ----------
   ⚔️ emoji ở 13–15 px đọc thành «×» và tự chừa khoảng trống trước dấu câu ⇒ SVG khiên vàng + kiếm dựng (spk_luot_ic()).
   Tên nút / tên mục trong chữ hướng dẫn: đậm + bút dạ quang dưới chân chữ (không bọc «»). */
.spk-luot-ic { display: inline-block; width: .87em; height: 1.05em; margin-inline: .1em .06em; vertical-align: -.17em; flex: none; line-height: 0; }
.spk-luot-ic svg { display: block; width: 100%; height: 100%; overflow: visible; }
.spk-luot-ic-khien { fill: var(--spk-vang); stroke: var(--spk-luot-vien); stroke-width: 1.3; stroke-linejoin: round; }
.spk-luot-ic-kiem { fill: none; stroke: var(--spk-luot-vien); stroke-width: 1.9; stroke-linecap: round; }
.spk-bar-vi .spk-luot-ic, .spk-vi .spk-luot-ic { width: .91em; height: 1.1em; }
/* icon khiên nằm trong phần tử flex của bản cũ: «.sp-mock-credit-cost-row span {display:flex; gap}» (speaking.css) ăn cả span icon
   ⇒ giữ icon là khối nội dòng như mọi chỗ khác (rà 30/09, YEU-CAU-THEM mục 6) */
.sp-mock-credit-cost-row .spk-luot-ic, .sp-mock-credit-total .spk-luot-ic { display: inline-block; gap: 0; }
.spk-ten-nut { font-weight: 700; color: var(--spk-chinh-txt); --dm-text-primary: var(--spk-chinh-txt); --dm-link: var(--spk-chinh-txt); --dm-link-hover: var(--spk-chinh-txt); background: linear-gradient(transparent 56%, var(--spk-hl) 56%, var(--spk-hl) 94%, transparent 94%);
  padding: 0 .14em; margin: 0 -.04em; border-radius: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---------- 21. BẢNG ĐIỂM: 4 tiêu chí xếp theo IELTS, điểm 1 chữ số lẻ, tiêu chí thấp nhất tô + nhãn «sửa trước» ----------
   Trước: điện thoại ép nhãn 100 px (speaking.css) + hàng không giãn ⇒ thanh co về 0 px; nhãn «Trôi chảy & mạch / lạc» bẻ dòng. */
/* một lưới chung cho cả 4 hàng (hàng = display:contents) ⇒ nhãn / thanh / điểm thẳng cột ở mọi cỡ */
.sp-root .sp-result-criteria { display: grid; grid-template-columns: fit-content(56%) minmax(64px, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 12px; align-self: stretch; width: 100%; min-width: 0; }
.sp-root .sp-criteria-row { display: contents; }
.sp-root .sp-criteria-label { width: auto; min-width: 0; }
.sp-root .sp-criteria-label > span:first-child { white-space: nowrap; }
.sp-root .spk-tc-en { text-wrap: balance; }
.sp-root .sp-criteria-bar-wrap { min-width: 64px; }
.sp-root .sp-criteria-score { width: auto; min-width: 2.2em; font-variant-numeric: tabular-nums; }
.sp-root .sp-criteria-row.is-thap .sp-criteria-label > span:first-child,
.sp-root .sp-criteria-row.is-thap .sp-criteria-score,
.sp-root .sp-cm-row.is-thap > span:first-child > span:first-child { color: var(--spk-sai) !important; --dm-text-primary: var(--spk-sai); --dm-link: var(--spk-sai); --dm-link-hover: var(--spk-sai); font-weight: 700; }
/* nhãn bút chì — cùng kiểu chú thích «thấp nhất: sửa trước» trong phim hướng dẫn */
.spk-thap-nhan { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 7px; background: #FFF7D6; border: 1px solid #E6CF8C; color: #5A4420; --dm-text-primary: #5A4420; --dm-link: #5A4420; --dm-link-hover: #5A4420; font: italic 600 11.5px/1.3 var(--spk-font);
  box-shadow: 0 3px 8px -4px rgba(60, 40, 0, .35); transform: rotate(-1.5deg); white-space: nowrap; }
.sp-root .sp-cm-row .spk-thap-nhan { margin: 0 0 0 8px; vertical-align: 1px; }
@media (max-width: 640px) {
  .sp-root .sp-criteria-label { width: auto; }
  .sp-root .sp-result-header { align-items: stretch; }
  .sp-root .sp-result-header .sp-result-ring-wrap { align-self: center; }
}

/* ---------- 22. TÍM SÓT: màu tím / xanh ngọc của bản cũ trên đường dạy chính ⇒ token --spk-* (đủ 4 nền) ---------- */
/* icon thương hiệu thanh bên (phẳng) */
html:not(.theme-skeuo) .sp-root .sp-sidebar-brand-icon { background: var(--spk-noi-nhat); color: var(--spk-noi); --dm-text-primary: var(--spk-noi); --dm-link: var(--spk-noi); --dm-link-hover: var(--spk-noi); }
/* màn Hỏi thêm — mọi nền (bản trước chỉ phủ nền phẳng) */
html:root .sp-root .spv2-fu-question-badge { background: var(--spk-mat-2) !important; color: var(--spk-chinh-txt) !important; --dm-text-primary: var(--spk-chinh-txt); --dm-link: var(--spk-chinh-txt); --dm-link-hover: var(--spk-chinh-txt); border: 1px solid var(--spk-vien); box-shadow: none; }
html:not(.theme-skeuo) .sp-root .spv2-fu-question-card { background: var(--spk-mat-nen); border: 1px solid var(--spk-vien); box-shadow: var(--spk-bong-the); }
.sp-root .spv2-fu-question-en { color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); }
html:root .sp-root .spv2-fu-tts { background: var(--spk-mat-2); border: 1px solid var(--spk-vien-2); color: var(--spk-chinh-txt); --dm-text-primary: var(--spk-chinh-txt); --dm-link: var(--spk-chinh-txt); --dm-link-hover: var(--spk-chinh-txt); }
html:root .sp-root .spv2-fu-tts:hover { background: var(--spk-chinh-nhat); border-color: var(--spk-chinh); transform: none; }
html:root .sp-root .spv2-fu-question-vn { background: var(--spk-mat-2) !important; color: var(--spk-chu-2) !important; --dm-text-primary: var(--spk-chu-2); --dm-link: var(--spk-chu-2); --dm-link-hover: var(--spk-chu-2); border: 1px solid var(--spk-vien) !important; }
.sp-root .spv2-fu-question-angle { color: var(--spk-chu-3); --dm-text-primary: var(--spk-chu-3); --dm-link: var(--spk-chu-3); --dm-link-hover: var(--spk-chu-3); }
.sp-root .spv2-fu-question-angle svg { color: var(--spk-chinh-txt); --dm-text-primary: var(--spk-chinh-txt); --dm-link: var(--spk-chinh-txt); --dm-link-hover: var(--spk-chinh-txt); }
.sp-root .spv2-fu-question-angle strong { color: var(--spk-chu-2); --dm-text-primary: var(--spk-chu-2); --dm-link: var(--spk-chu-2); --dm-link-hover: var(--spk-chu-2); }
html:root .sp-root .spv2-fu-skip { border: 1.5px dashed var(--spk-vien-2); color: var(--spk-chu-2); --dm-text-primary: var(--spk-chu-2); --dm-link: var(--spk-chu-2); --dm-link-hover: var(--spk-chu-2); background: transparent; }
html:root .sp-root .spv2-fu-skip:hover { border-color: var(--spk-chinh); color: var(--spk-chinh-txt); --dm-text-primary: var(--spk-chinh-txt); --dm-link: var(--spk-chinh-txt); --dm-link-hover: var(--spk-chinh-txt); background: var(--spk-chinh-nhat); }
html:root .sp-root .spv2-fu-progress-dot { background: var(--spk-mat); border-color: var(--spk-vien-2); color: var(--spk-chu-3); --dm-text-primary: var(--spk-chu-3); --dm-link: var(--spk-chu-3); --dm-link-hover: var(--spk-chu-3); box-shadow: none; }
html:root .sp-root .spv2-fu-progress-dot.is-active { background: var(--spk-nut-nen); border-color: var(--spk-nut-vien); color: var(--spk-nut-chu); --dm-text-primary: var(--spk-nut-chu); --dm-link: var(--spk-nut-chu); --dm-link-hover: var(--spk-nut-chu); box-shadow: var(--spk-nut-bong); transform: none; }
html:root .sp-root .spv2-fu-progress-dot.is-done { background: var(--spk-dat); border-color: transparent; color: #fff; --dm-text-primary: #fff; --dm-link: #fff; --dm-link-hover: #fff; }
.sp-root .spv2-fu-progress-label { color: var(--spk-chu-3); --dm-text-primary: var(--spk-chu-3); --dm-link: var(--spk-chu-3); --dm-link-hover: var(--spk-chu-3); }
.sp-root .spv2-fu-progress-label strong { color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); }
.sp-root .spv2-fu-stage-title { color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); }
.sp-root .spv2-fu-stage-sub { color: var(--spk-chu-2); --dm-text-primary: var(--spk-chu-2); --dm-link: var(--spk-chu-2); --dm-link-hover: var(--spk-chu-2); }
html:root .sp-root .spv2-fu-stage-icon:not(.spv2-fu-stage-icon--error) { background: var(--spk-chinh); color: var(--spk-nut-chu); --dm-text-primary: var(--spk-nut-chu); --dm-link: var(--spk-nut-chu); --dm-link-hover: var(--spk-nut-chu); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .45); }
.sp-root .spv2-fu-stage-icon--pulse { animation-name: spk-fu-nhip; }
@keyframes spk-fu-nhip { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.sp-root .spv2-fu-loader-bars span { background: var(--spk-chinh); }
/* bảng điểm: dòng mẹo bấm từ, huy hiệu chú giải, âm cần luyện, gạch chấm dưới từ chưa chấm */
.sp-root .pron-tr-tip { color: var(--spk-chu-3) !important; --dm-text-primary: var(--spk-chu-3); --dm-link: var(--spk-chu-3); --dm-link-hover: var(--spk-chu-3); }
.sp-root .sp-transcription .pron-w:not([class*="pron-w--"]) { border-bottom-color: var(--spk-vien-2); }
.sp-root .sp-transcription .pron-w:hover { background: var(--spk-chinh-nhat); }
html:root .sp-root .sp-prleg { background: var(--spk-mat-2); border-color: var(--spk-vien); box-shadow: none; }
html:root .sp-root .sp-prleg-badge, html:root .sp-root .sp-prleg-badge--alt { background: var(--spk-mat); color: var(--spk-chu-2); --dm-text-primary: var(--spk-chu-2); --dm-link: var(--spk-chu-2); --dm-link-hover: var(--spk-chu-2); border-color: var(--spk-vien); text-shadow: none; }
html:root .sp-root .sp-prleg-item, html:root .sp-root .sp-prleg-sounds-lb, html:root .sp-root .sp-prleg-note { color: var(--spk-chu-2); --dm-text-primary: var(--spk-chu-2); --dm-link: var(--spk-chu-2); --dm-link-hover: var(--spk-chu-2); }
html:root .sp-root .sp-prleg-note b { color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); }
html:root .sp-root .sp-prleg-ipa { background: var(--spk-mat); color: var(--spk-chinh-txt); --dm-text-primary: var(--spk-chinh-txt); --dm-link: var(--spk-chinh-txt); --dm-link-hover: var(--spk-chinh-txt); border-color: var(--spk-vien-2); box-shadow: none; }
html:root .sp-root .sp-prleg-ipa:hover { background: var(--spk-chinh-nhat); color: var(--spk-chinh-txt); --dm-text-primary: var(--spk-chinh-txt); --dm-link: var(--spk-chinh-txt); --dm-link-hover: var(--spk-chinh-txt); }
/* Thi thử: số lượt còn lại, tiêu đề «Vì sao…», ô giọng / giới tính đang chọn */
html .sp-root .sp-usage-count { color: var(--spk-vang-chu) !important; --dm-text-primary: var(--spk-vang-chu); --dm-link: var(--spk-vang-chu); --dm-link-hover: var(--spk-vang-chu); }
html .sp-root .sp-usage-fill { background: var(--spk-vang) !important; }
html .sp-root .sp-mock-credit-explainer-title { color: var(--spk-chu) !important; --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); text-shadow: none !important; }
html:root .sp-root .sp-mock-accent-opt:hover, html:root .sp-root .sp-mock-gender-opt:hover { border-color: var(--spk-chinh); }
html:root .sp-root .sp-mock-accent-opt.is-active, html:root .sp-root .sp-mock-gender-opt.is-active { background: var(--spk-chinh-nhat); border-color: var(--spk-chinh); color: var(--spk-chinh-txt); --dm-text-primary: var(--spk-chinh-txt); --dm-link: var(--spk-chinh-txt); --dm-link-hover: var(--spk-chinh-txt); box-shadow: 0 0 0 1px var(--spk-chinh) inset; }
/* Cài đặt: ô icon mục (oải hương / xanh ngọc) */
html:not(.theme-skeuo) .sp-root .sp-settings-section-icon--violet, html:not(.theme-skeuo) .sp-root .sp-settings-section-icon--cyan { background: var(--spk-chinh-nhat); color: var(--spk-chinh-txt); --dm-text-primary: var(--spk-chinh-txt); --dm-link: var(--spk-chinh-txt); --dm-link-hover: var(--spk-chinh-txt); }
/* Danh sách đề: nút chia sẻ (viền tím / hồng) */
html:not(.theme-skeuo) .sp-root .spv2-topic-share--row, html:not(.theme-skeuo) .sp-root .sp-topic-item--p23 .spv2-topic-share--row { border-color: var(--spk-vien-2); color: var(--spk-chu-2); --dm-text-primary: var(--spk-chu-2); --dm-link: var(--spk-chu-2); --dm-link-hover: var(--spk-chu-2); }
html:not(.theme-skeuo) .sp-root .spv2-topic-share:hover, html:not(.theme-skeuo) .sp-root .spv2-topic-share:focus-visible,
html:not(.theme-skeuo) .sp-root .sp-topic-item--p23 .spv2-topic-share--row:hover, html:not(.theme-skeuo) .sp-root .sp-topic-item--p23 .spv2-topic-share--row:focus-visible { background: var(--spk-chinh-nhat); color: var(--spk-chinh-txt); --dm-text-primary: var(--spk-chinh-txt); --dm-link: var(--spk-chinh-txt); --dm-link-hover: var(--spk-chinh-txt); border-color: var(--spk-chinh); }
html:not(.theme-skeuo) .sp-root .spv2-topic-share--bc { border-color: var(--spk-vien-2); }

/* ---------- 23. VÍ MỘT CHỖ: Tự dán đề trên máy tính đã có ví ở thanh bên ⇒ bỏ ô lượt chấm ở thanh công cụ ---------- */
.sp-root .sp-anytext .spv2-toolbar .spv2-usage { display: none; }
.sp-root .spv2-usage .spk-luot-ic { width: .95em; height: 1.15em; }

/* ---------- 24. HỘP «CÁCH CÓ THÊM LƯỢT» (topup-modal.php) — token, không style viết thẳng ---------- */
.sp-root .spk-luot-hop, .spk-luot-hop { max-width: 420px; padding: 30px 26px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.spk-luot-hop .spk-luot-hop-ic { width: 64px; height: 64px; display: grid; place-items: center; }
.spk-luot-hop .spk-luot-hop-ic .spk-luot-ic { width: 46px; height: 56px; margin: 0; }
.spk-luot-hop h3 { margin: 0; font: 800 24px/1.15 var(--spk-font-tieude); color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); }
.spk-luot-hop p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--spk-chu-2); --dm-text-primary: var(--spk-chu-2); --dm-link: var(--spk-chu-2); --dm-link-hover: var(--spk-chu-2); max-width: 32em; }
.spk-luot-hop-nut { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 8px; }
.spk-luot-hop-nut .spk-nut { width: 100%; justify-content: center; }

/* ---------- 25. LỜI ANH SÓI = bong bóng mực vẽ tay (CÙNG kiểu lời Anh Sói ở popup: e-learning/alpha-popups/assets/ap.css .ap-loi) ----------
   Một nhân vật một kiểu nói: viền mực #2B2233 như nét vẽ con sói, giấy sáng ở cả 4 nền (thế giới của con sói giữ gần như nguyên),
   chữ Patrick Hand (link Google Fonts chung ở speaking-main.php), đuôi vẽ tay chỉ về phía con sói. Dùng ở trang Hướng dẫn (lời chào,
   lời kết) và lời mời lần đầu của tour. Giọng Nghiêm túc / Ẩn Anh Sói (--nghiem) ⇒ về chữ + thẻ của site, như .ap--nghiem .ap-loi. */
:root { --spk-muc: #2B2233; --spk-to: #FFFDF8; --spk-to-chu: #2B2233; --spk-to-bong: 3px 4px 0 rgba(43, 34, 51, .16); --spk-to-hl: #FFE27A; }
html.ae-dark-mode { --spk-to: #EFE8DA; --spk-to-bong: 3px 4px 0 rgba(0, 0, 0, .45); }
html.theme-skeuo { --spk-to: #FFFAF0; --spk-to-hl: #FFD86B; }
html.theme-skeuo.ae-dark-mode { --spk-to: #EFE3C8; --spk-to-bong: 3px 4px 0 rgba(0, 0, 0, .5); }
.spk-loi-soi { position: relative; margin: 0; padding: 11px 14px 12px; background: var(--spk-to); color: var(--spk-to-chu); --dm-text-primary: var(--spk-to-chu); --dm-link: var(--spk-to-chu); --dm-link-hover: var(--spk-to-chu);
  border: 2px solid var(--spk-muc); border-radius: 20px 20px 20px 6px; box-shadow: var(--spk-to-bong); text-shadow: none;
  font-family: 'Patrick Hand', 'Comic Sans MS', cursive; font-size: 19px; font-weight: 400; line-height: 1.3; letter-spacing: .005em; text-wrap: pretty; }
.spk-loi-soi-duoi { position: absolute; left: -27px; bottom: 7px; width: 30px; height: 26px; overflow: visible; pointer-events: none; }
.spk-loi-soi-duoi path { fill: var(--spk-to); stroke: var(--spk-muc); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spk-loi-soi-ten { display: block; font: inherit; font-size: 14px; line-height: 1; margin-bottom: 3px; opacity: .62; color: var(--spk-to-chu); --dm-text-primary: var(--spk-to-chu); --dm-link: var(--spk-to-chu); --dm-link-hover: var(--spk-to-chu); }
.spk-loi-soi b, .spk-loi-soi strong { font-weight: 400; color: var(--spk-to-chu); --dm-text-primary: var(--spk-to-chu); --dm-link: var(--spk-to-chu); --dm-link-hover: var(--spk-to-chu); }
.spk-loi-soi .spk-ten-nut { font-weight: 400; color: var(--spk-to-chu); --dm-text-primary: var(--spk-to-chu); --dm-link: var(--spk-to-chu); --dm-link-hover: var(--spk-to-chu); background: linear-gradient(transparent 52%, var(--spk-to-hl) 52%, var(--spk-to-hl) 92%, transparent 92%); }
.spk-loi-soi .spk-luot-ic { width: .8em; height: .98em; }
/* Nghiêm túc / Ẩn Anh Sói: lời trở về chữ của site, không còn giọng vẽ tay */
.spk-loi-soi--nghiem { font-family: var(--spk-font); font-size: 14.5px; line-height: 1.45; border-width: 1px; border-color: var(--spk-vien); background: var(--spk-mat-nen); color: var(--spk-chu-2); --dm-text-primary: var(--spk-chu-2); --dm-link: var(--spk-chu-2); --dm-link-hover: var(--spk-chu-2);
  box-shadow: var(--spk-bong-the); border-radius: 16px 16px 16px 6px; }
.spk-loi-soi--nghiem .spk-loi-soi-duoi path { fill: var(--spk-mat); stroke: var(--spk-vien); stroke-width: 1; }
.spk-loi-soi--nghiem .spk-loi-soi-ten { font-size: 12.5px; font-weight: 700; opacity: 1; color: var(--spk-chinh-txt); --dm-text-primary: var(--spk-chinh-txt); --dm-link: var(--spk-chinh-txt); --dm-link-hover: var(--spk-chinh-txt); margin-bottom: 2px; }
.spk-loi-soi--nghiem b, .spk-loi-soi--nghiem strong { font-weight: 700; color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); }
.spk-loi-soi--nghiem .spk-ten-nut { font-weight: 700; color: var(--spk-chinh-txt); --dm-text-primary: var(--spk-chinh-txt); --dm-link: var(--spk-chinh-txt); --dm-link-hover: var(--spk-chinh-txt); background: linear-gradient(transparent 56%, var(--spk-hl) 56%, var(--spk-hl) 94%, transparent 94%); }
.spk-loi-soi--nghiem .spk-luot-ic { width: .87em; height: 1.05em; }

/* ---------- 26. HỎI THÊM trên điện thoại: dấu «·» của breadcrumb bị treo lẻ bên phải nút «Hủy bài tập» khi tên đề rớt xuống hàng ⇒ ẩn ---------- */
@media (max-width: 640px) {
  .sp-root .sp-practice-v2 .spv2-breadcrumb-sep, .sp-root .sp-anytext .spv2-breadcrumb-sep { display: none; }
}

/* ---------- 27. BỘ CHỌN GIỌNG: icon NÉT cùng bộ thanh bên (spk_giong_ic), hết emoji 🗣 🎲 🇬🇧 👨 👩 🚻 🎬 ----------
   Giọng theo nước = chip chữ UK / IN / US / AU; ngẫu nhiên = hai mũi tên đan; nam / nữ = ký hiệu vẽ nét; loa = «giọng». */
.spk-giong-ic { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.3em; height: 1.3em; line-height: 0; vertical-align: -.25em; color: inherit; }
.spk-giong-ic svg { width: 100%; height: 100%; display: block; }
.spk-giong-ic--chu { width: auto; min-width: 2.1em; height: 1.45em; padding: 0 .3em; border: 1.5px solid currentColor; border-radius: .38em; box-sizing: border-box;
  font: 700 .72em/1 var(--spk-font); letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.spk-giong-ic--vid { width: 1.15em; height: 1.15em; vertical-align: -.2em; margin-right: .2em; }
.sp-root .spv2-voice-pick-label { display: inline-flex; align-items: center; gap: 6px; font: 600 13.5px/1 var(--spk-font); white-space: nowrap; }
.sp-root .spv2-voice-pick-label .spk-giong-ic { width: 18px; height: 18px; }
.sp-root .spv2-gender-seg button { display: inline-flex; align-items: center; justify-content: center; font: 600 13.5px/1 var(--spk-font); padding: 0 10px; }
.sp-root .spv2-gender-seg button .spk-giong-ic { width: 17px; height: 17px; }
.sp-root .spk-hang-giong .spk-giong-ic:not(.spk-co) { width: 17px; height: 17px; }
.sp-root .spk-hang-giong .spk-giong-nut-co { display: inline-flex; font-size: 15px; line-height: 0; }
.sp-root .spk-hang-giong[aria-expanded="true"] .spk-giong-nut-mui { transform: rotate(180deg); }
.sp-root .spk-hang-giong .spk-hang-giong-chu { white-space: nowrap; }
/* Cài đặt: ô icon đầu nhóm + chip giọng trong thẻ; nhãn «có video» cho giọng đã có video giám khảo */
.sp-root .sp-settings-section-icon .spk-giong-ic { width: 22px; height: 22px; }
.sp-root .sp-voice-card-flag .spk-giong-ic { font-size: 16px; }
.sp-root .sp-voice-card-flag .spk-giong-ic:not(.spk-giong-ic--chu):not(.spk-co) { width: 22px; height: 22px; }
.sp-root .sp-gender-card-emoji .spk-giong-ic { width: 18px; height: 18px; }
.spk-co-video { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 2px 8px; border-radius: 999px; vertical-align: 1px;
  background: var(--spk-vang-nhat); color: var(--spk-vang-chu); --dm-text-primary: var(--spk-vang-chu); --dm-link: var(--spk-vang-chu); --dm-link-hover: var(--spk-vang-chu); font: 700 11.5px/1.4 var(--spk-font); white-space: nowrap; }
.spk-co-video .spk-giong-ic { width: 13px; height: 13px; margin: 0; vertical-align: 0; }
.sp-voice-card-name .spk-co-video { display: flex; width: max-content; margin: 3px 0 2px; }   /* thẻ Cài đặt hẹp: nhãn luôn xuống dòng riêng, thẳng lề với tên */
/* điện thoại: nút gọn phía trên đã ghi «Giọng: …» ⇒ ô mở ra chỉ còn icon loa + ô chọn + 3 nút nam/nữ trên MỘT hàng (không còn viên thuốc 2 tầng) */
@media (max-width: 640px) {
  .sp-root .spv2-voice-pick { flex-wrap: nowrap; gap: 6px; border-radius: 16px; }
  .sp-root .spv2-voice-pick .spk-giong-nhan { display: none; }
  .sp-root .spv2-voice-pick .spv2-voice-select-wrap { flex: 1 1 auto; min-width: 0; }
  .sp-root .spv2-voice-pick .spv2-gender-seg { margin-left: 0; }
}
/* điện thoại hẹp, đang ở một câu: hàng «‹ Danh sách câu · tên đề · Giọng: …» không đủ chỗ ⇒ tên đề chuyển xuống nhãn thẻ câu hỏi («Câu 1 / 4 · Childhood Activities») */
.spk-the-chu-de { display: none; }
@media (max-width: 420px) {
  .sp-practice-v2.spk-o-cau .spv2-toolbar .spk-hang-ten { display: none; }
  .sp-practice-v2.spk-o-cau .spv2-question-card-label .spk-the-chu-de { display: inline; }
}
/* Thi thử: chip giọng + icon trong ô chọn giọng / giới tính; nhãn video dùng icon máy quay nét */
.sp-root .sp-mock-accent-flag { display: inline-flex; align-items: center; font-size: 16px; }
.sp-root .sp-mock-accent-flag .spk-giong-ic:not(.spk-giong-ic--chu):not(.spk-co) { width: 20px; height: 20px; }
.sp-root .sp-mock-accent-label .spk-giong-ic { width: 18px; height: 18px; }

/* ---------- 30. BỘ CHỌN GIỌNG = DROPDOWN TỰ DỰNG có HÌNH CỜ (anh 30/09: chữ trần «Giọng Úc ⌄» mất cờ) ----------
   partials/examiner-voice-dropdown.php + window.spkGiongChon (speaking-app.js). Cờ = SVG tự vẽ đúng tỉ lệ (spk_giong_co), cao 1em,
   bo góc nhẹ + viền mảnh 1 px để nổi trên cả nền sáng lẫn tối. Bảng chọn: cờ + tên + nhãn phụ (có video: đọc thư viện clip thật),
   ✓ dòng đang chọn, dòng đang trỏ (chuột / ↑↓) có nền lõm, vòng focus khi dùng bàn phím. Điện thoại ≤ 640: tấm trượt đáy + lớp mờ.
   Nam / Nữ: hình người vẽ nét (spk_giong_ic). Chất liệu viên thuốc cổ điển giữ ở speaking-skeuo.css (!important), ở đây chỉ bố cục + token. */
html { --spk-co-vien: rgba(16, 24, 40, .22); }
html.ae-dark-mode { --spk-co-vien: rgba(255, 255, 255, .32); }
html.theme-skeuo { --spk-co-vien: rgba(74, 52, 16, .35); }
html.theme-skeuo.ae-dark-mode { --spk-co-vien: rgba(255, 226, 170, .34); }
.spk-giong-ic.spk-co { display: inline-block; flex: none; box-sizing: content-box; height: 1em; width: calc(1em * var(--co-ti, 1.5)); min-width: 0; padding: 0; border: 0;
  border-radius: .16em; overflow: hidden; line-height: 0; vertical-align: -.14em; background: #fff; box-shadow: 0 0 0 1px var(--spk-co-vien); }
.spk-giong-ic.spk-co > svg { display: block; width: 100%; height: 100%; }
.spk-giong-ic.spk-co--nn { display: inline-flex; align-items: center; justify-content: center; background: var(--spk-mat-2); color: var(--spk-chu-2); --dm-text-primary: var(--spk-chu-2); --dm-link: var(--spk-chu-2); --dm-link-hover: var(--spk-chu-2); }
.spk-giong-ic.spk-co--nn > svg { width: .72em; height: .72em; }
/* viên thuốc: bố cục gốc (trước đây nằm trong <style> của partial) — màu theo nền ở mục 12 (phẳng) + speaking-skeuo.css (cổ điển) */
.sp-root .spv2-voice-pick { position: relative; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; border-radius: 999px; padding: 0 0 0 12px; font: 600 13.5px/1.2 var(--spk-font); box-sizing: border-box; }
.sp-root .spv2-voice-pick-label { white-space: nowrap; }
.sp-root .spv2-voice-sep { flex: none; width: 1px; height: 24px; background: var(--spk-vien); }
.sp-root .spv2-gender-seg { display: inline-flex; align-items: center; border-radius: 999px; gap: 2px; padding: 0; }
.sp-root .spv2-gender-seg button { appearance: none; -webkit-appearance: none; border: 0; background: transparent; cursor: pointer; gap: 5px; border-radius: 999px; font-family: var(--spk-font); transition: background-color .12s, color .12s; }
.sp-root .spv2-voice-pick-saving { font-size: 11px; font-weight: 600; opacity: .7; }
/* dự phòng khi JS lỗi: ô chọn gốc; Alpine chạy (.is-js) ⇒ ẩn, dùng nút cờ */
.sp-root .spv2-voice-select-wrap { position: relative; display: inline-flex; align-items: center; min-width: 0; }
.sp-root .spv2-voice-select { appearance: none; -webkit-appearance: none; background: transparent; border: 0; padding: 0 18px 0 4px; font: inherit; color: inherit; cursor: pointer; }
.sp-root .spk-giong.is-js .spk-giong-goc { display: none; }
/* nút đang chọn: cờ + tên + mũi tên */
.sp-root .spk-giong-nut { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 0 10px 0 8px; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  font: 700 13.5px/1 var(--spk-font); color: inherit; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.sp-root .spk-giong-nut:hover, .sp-root .spk-giong.is-mo .spk-giong-nut { background: var(--spk-chinh-nhat); }
.sp-root .spk-giong-nut-co { display: inline-flex; font-size: 16px; line-height: 0; }
/* chữ trong nút: theo màu viên thuốc ở mọi nền (dark-mode.css của theme ép «span» = --dm-text-primary) */
.sp-root .spk-giong-nut > span, .sp-root .spv2-gender-seg button > span { color: inherit; --dm-text-primary: currentColor; }
.sp-root .spk-giong-nut-mui { width: 15px; height: 15px; flex: none; opacity: .75; transition: transform .15s; }
.sp-root .spk-giong.is-mo .spk-giong-nut-mui { transform: rotate(180deg); }
/* bảng chọn */
.sp-root .spk-giong-bang { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; width: 316px; min-width: 100%; box-sizing: border-box; padding: 6px;
  background: var(--spk-mat-nen); border: 1px solid var(--spk-vien-2); border-radius: var(--spk-r-the); box-shadow: var(--spk-bong-noi); text-align: left; }
.sp-root .spk-giong-bang-dau { display: none; }
.sp-root .spk-giong-ds { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; outline: none; }
.sp-root .spk-giong-muc { display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; align-items: center; column-gap: 10px; min-height: 52px; padding: 6px 12px 6px 6px; border-radius: 12px; cursor: pointer;
  color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); }
.sp-root .spk-giong-muc > .spk-co { justify-self: center; font-size: 20px; }
.sp-root .spk-giong-muc-chu { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sp-root .spk-giong-muc-chu b { font: 600 14.5px/1.25 var(--spk-font); color: inherit; }
.sp-root .spk-giong-muc-chu small { display: inline-flex; align-items: center; gap: 4px; font: 500 12px/1.3 var(--spk-font); color: var(--spk-chu-3); --dm-text-primary: var(--spk-chu-3); --dm-link: var(--spk-chu-3); --dm-link-hover: var(--spk-chu-3); }
.sp-root .spk-giong-muc-chu small.spk-giong-muc-vid { align-self: flex-start; padding: 2px 8px 2px 6px; border-radius: 999px; background: var(--spk-vang-nhat); color: var(--spk-vang-chu); --dm-text-primary: var(--spk-vang-chu); --dm-link: var(--spk-vang-chu); --dm-link-hover: var(--spk-vang-chu); font-weight: 700; }
.sp-root .spk-giong-muc-chu small .spk-giong-ic { width: 13px; height: 13px; margin: 0; vertical-align: 0; }
.sp-root .spk-giong-tick { width: 18px; height: 18px; color: var(--spk-chinh-txt); --dm-text-primary: var(--spk-chinh-txt); --dm-link: var(--spk-chinh-txt); --dm-link-hover: var(--spk-chinh-txt); visibility: hidden; }
.sp-root .spk-giong-muc.is-tro { background: var(--spk-mat-2); }
.sp-root .spk-giong-muc.is-chon { background: var(--spk-chinh-nhat); color: var(--spk-chinh-txt); --dm-text-primary: var(--spk-chinh-txt); --dm-link: var(--spk-chinh-txt); --dm-link-hover: var(--spk-chinh-txt); }
.sp-root .spk-giong-muc.is-chon b { font-weight: 700; }
.sp-root .spk-giong-muc.is-chon .spk-giong-tick { visibility: visible; }
.sp-root .spk-giong-muc.is-chon.is-tro { box-shadow: inset 0 0 0 1px var(--spk-chinh); }
.sp-root .spk-giong-ds:focus-visible { outline: none; }
.sp-root .spk-giong-ds:focus-visible .spk-giong-muc.is-tro { box-shadow: inset 0 0 0 2px var(--spk-focus); }
.sp-root .spk-giong-che { display: none; }
/* Nam / Nữ / ngẫu nhiên: hình người vẽ nét + chữ */
.sp-root .spv2-gender-seg button .spk-giong-ic { width: 17px; height: 17px; }
/* CÙNG cờ + nhãn + ✓ ở Cài đặt (thẻ giọng) và Thi thử (ô chọn giọng của lượt thi): ô cờ rộng cố định ⇒ tên thẳng hàng */
.sp-root .sp-voice-card { position: relative; }
.sp-root .sp-voice-card-flag { display: inline-flex; justify-content: center; flex: none; width: 44px; margin-top: 1px; }
.sp-root .sp-voice-card-flag .spk-co { font-size: 20px; }
.sp-root .sp-voice-card > span:not(.sp-voice-card-flag) { flex: 1 1 auto; min-width: 0; padding-right: 22px; }
.sp-root .sp-voice-card-tick { position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; color: var(--spk-chinh-txt); visibility: hidden; }
.sp-root .sp-voice-card.is-active .sp-voice-card-tick { visibility: visible; }
.sp-root .sp-mock-accent-flag { justify-content: center; flex: none; width: 40px; }
.sp-root .sp-mock-accent-flag .spk-co { font-size: 18px; }
.sp-root .sp-gender-card-emoji .spk-giong-ic, .sp-root .sp-mock-gender-opt .sp-mock-accent-flag .spk-giong-ic { width: 20px; height: 20px; }
/* điện thoại: tấm trượt đáy (không tràn, ngón cái với tới), lớp mờ bấm ra ngoài là đóng */
@media (max-width: 640px) {
  .sp-root .spk-giong-che { display: block; position: fixed; inset: 0; z-index: 2147480990; background: rgba(10, 14, 22, .45); }
  .sp-root .spk-giong-bang { position: fixed; top: auto; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); z-index: 2147480991; width: auto; min-width: 0;
    max-height: min(72vh, 480px); overflow: auto; padding: 8px 8px 10px; border-radius: 22px; }
  .sp-root .spk-giong-bang-dau { display: flex; align-items: center; gap: 8px; margin: 4px 8px 8px; font: 700 15px/1.3 var(--spk-font); color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); }
  .sp-root .spk-giong-bang-dau .spk-giong-ic { width: 18px; height: 18px; }
  .sp-root .spk-giong-muc { min-height: 56px; }
  /* hàng giọng mở ra dưới nút gọn «cờ + tên»: viên thuốc chiếm đúng bề ngang thanh (không tràn), bỏ icon loa (tấm trượt đã có tiêu đề) */
  .sp-root .spv2-voice-pick { flex: 1 1 100%; min-width: 0; max-width: 100%; padding: 0 3px 0 4px; }
  .sp-root .spv2-voice-pick .spv2-voice-pick-label { display: none; }
  .sp-root .spv2-voice-pick .spv2-gender-seg { flex: none; margin-left: auto; }
  .sp-root .spv2-voice-pick .spv2-gender-seg button { padding: 0 8px; }
  .sp-root .spv2-voice-pick .spk-giong-nut { flex: 1 1 auto; min-width: 0; }
  .sp-root .spv2-voice-pick .spk-giong-nut-ten { overflow: hidden; text-overflow: ellipsis; }
  .sp-root .spv2-voice-pick .spk-giong-nut-mui { margin-left: auto; }
  .sp-root .spv2-gender-seg .spk-gioi-chu { display: none; }   /* hàng hẹp (< 380): Nam / Nữ chỉ còn hình người (nút có aria-label + title) */
}
@media (max-width: 640px) and (min-width: 380px) { .sp-root .spv2-gender-seg .spk-gioi-chu { display: inline; } }

/* ---------- 31. ĐỒNG HỒ GHI ÂM — số giây là CHÍNH, giới hạn là dòng PHỤ (anh 30/09: «0:00 / 3:00» lệch cỡ, lệch màu, đọc như phân số) ----------
   Một cụm cho mọi nơi: Luyện tập Part 1/2/3, câu hỏi thêm, Tự dán đề, Thi thử, dock micro điện thoại. Số: chữ số tabular, MỘT màu
   (nghỉ = chữ thường, đang ghi = đỏ «nói», sắp hết giờ = hổ phách); dòng phụ «tối đa 3:00» → «Còn 25 giây» khi sắp hết (window.spkGioPhu). */
.sp-root .spk-gio { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; letter-spacing: 0; line-height: 1; }
.sp-root .spk-gio-so { font: 700 40px/1 var(--spk-font-so); font-variant-numeric: tabular-nums; letter-spacing: .01em; color: var(--spk-chu-2); --dm-text-primary: var(--spk-chu-2); --dm-link: var(--spk-chu-2); --dm-link-hover: var(--spk-chu-2); }
.sp-root .spk-gio-tran { font: 600 12.5px/1.2 var(--spk-font); letter-spacing: .01em; color: var(--spk-chu-3); --dm-text-primary: var(--spk-chu-3); --dm-link: var(--spk-chu-3); --dm-link-hover: var(--spk-chu-3); white-space: nowrap; }
.sp-root .spk-gio-tran:empty { display: none; }
.sp-root .spv2-timer-display--recording .spk-gio-so, .sp-root .sp-mock-timer .spk-gio-so { color: var(--spk-noi); --dm-text-primary: var(--spk-noi); --dm-link: var(--spk-noi); --dm-link-hover: var(--spk-noi); }
.sp-root .spk-gio.is-sap-het .spk-gio-so { color: var(--spk-lech); --dm-text-primary: var(--spk-lech); --dm-link: var(--spk-lech); --dm-link-hover: var(--spk-lech); }
.sp-root .spk-gio.is-sap-het .spk-gio-tran { color: var(--spk-lech); --dm-text-primary: var(--spk-lech); --dm-link: var(--spk-lech); --dm-link-hover: var(--spk-lech); font-weight: 700; }
html.theme-skeuo .sp-root .spk-gio-so { font-weight: 600; }
/* Thi thử: đồng hồ đứng trên nền gỗ (cổ điển) ⇒ chữ kem + bóng tối cho đủ tương phản; đỏ nhạt khi đang ghi */
.sp-root .sp-mock-timer.spk-gio { display: flex; width: 100%; font-family: var(--spk-font); }
.sp-root .sp-mock-timer .spk-gio-so { font-size: 44px; }
.sp-root .sp-mock-timer .spk-gio-tran { font-size: 13px; width: auto !important; }
html.theme-skeuo .sp-root .sp-mock-timer .spk-gio-so { color: #FFB4A6; --dm-text-primary: #FFB4A6; --dm-link: #FFB4A6; --dm-link-hover: #FFB4A6; text-shadow: 0 1px 2px rgba(40, 20, 5, .7); }
html.theme-skeuo .sp-root .sp-mock-timer.is-sap-het .spk-gio-so, html.theme-skeuo .sp-root .sp-mock-timer.is-sap-het .spk-gio-tran { color: #FFD27A !important; --dm-text-primary: #FFD27A; --dm-link: #FFD27A; --dm-link-hover: #FFD27A; }
@media (max-width: 640px) {
  .sp-root .spk-gio-so { font-size: 32px; }
  .sp-practice-v2 .spk-dock--idle .spk-gio { gap: 3px; }
  .sp-practice-v2 .spk-dock--idle .spk-gio-so { font-size: 24px; }
  .sp-practice-v2 .spk-dock--recording .spk-gio { align-items: flex-end; gap: 3px; }
  .sp-practice-v2 .spk-dock--recording .spk-gio-so { font-size: 26px; }
  .sp-practice-v2 .spk-dock--idle .spk-gio-tran, .sp-practice-v2 .spk-dock--recording .spk-gio-tran { font-size: 11.5px; }
}

/* ---------- 28. CÂU TRÍCH THẬT (anh dặn 29/09: không in « » / “ ” trần) ----------
   Tên nút / tên mục = .spk-ten-nut (mục 20). Câu nói được trích, từ tiếng Anh trong lời giải thích, chữ học viên gõ
   = .spk-trich: chữ serif, nền ô giấy nhạt, không ngoặc. <q> giữ kiểu riêng của từng màn, chỉ chặn trình duyệt tự chèn ngoặc. */
html { --spk-trich-nen: rgba(31, 58, 90, .075); --spk-trich-vien: rgba(31, 58, 90, .16); }
html.ae-dark-mode { --spk-trich-nen: rgba(255, 255, 255, .075); --spk-trich-vien: rgba(255, 255, 255, .14); }
html.theme-skeuo { --spk-trich-nen: rgba(120, 80, 20, .085); --spk-trich-vien: rgba(120, 80, 20, .2); }
html.theme-skeuo.ae-dark-mode { --spk-trich-nen: rgba(255, 214, 150, .09); --spk-trich-vien: rgba(255, 214, 150, .2); }
.spk-trich { font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif; font-size: 1.04em; font-weight: 600; letter-spacing: 0;
  color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu);
  background: var(--spk-trich-nen); box-shadow: inset 0 -1px 0 var(--spk-trich-vien); border-radius: 4px; padding: 0 .28em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.sp-root q { quotes: none; }
.sp-root q::before, .sp-root q::after { content: none; }
/* trong bong bóng Anh Sói (chữ vẽ tay): giữ chữ tay, chỉ tô nền giấy vàng nhạt */
.spk-loi-soi .spk-trich { font-family: inherit; font-size: inherit; font-weight: 400; color: var(--spk-to-chu); --dm-text-primary: var(--spk-to-chu); --dm-link: var(--spk-to-chu); --dm-link-hover: var(--spk-to-chu); background: rgba(255, 226, 122, .45); box-shadow: none; }

/* ---------- 29. NÚT THU GỌN / MỞ LẠI THANH BÊN = một «núm» trên MÉP thanh bên, giữa chiều cao (anh 30/09) ----------
   Trước: nút mở nổi ở góc trên trái, đè sát tiêu đề; nút thu gọn thì ở giữa mép ⇒ hai chỗ khác nhau. Giờ cả hai là MỘT núm, CÙNG độ cao:
   • thanh bên mở  : núm nằm giữa mép phải thanh bên (nửa trong, nửa ngoài);
   • thanh bên đóng: núm trượt về mép trái màn hình, cùng độ cao ⇒ không đè tiêu đề / nút ở đầu màn nào, không cần chừa góc trên;
   • điện thoại / máy tính bảng (≤ 1024): ngăn kéo — núm chỉ hiện khi ngăn kéo đang mở (để đóng), cùng chỗ mép, cùng kiểu.
   Độ cao = giữa phần màn dưới thanh quản trị WordPress (có admin bar: +16 px; ≤ 782 px: +23 px). Vùng chạm 44×44.
   Phẳng: ô bo 32×32 vẽ bằng ::before theo token. Cổ điển: giữ tấm kim loại (ảnh 44 px), chỉ đổi chỗ đứng (speaking-skeuo.css dùng !important). */
.sp-root .sp-sidebar-collapse, .sp-root .sp-sidebar-expand { --spk-num-y: 50%; }
.admin-bar .sp-root .sp-sidebar-collapse, .admin-bar .sp-root .sp-sidebar-expand { --spk-num-y: calc(50% + 16px); }
@media screen and (max-width: 782px) { .admin-bar .sp-root .sp-sidebar-collapse, .admin-bar .sp-root .sp-sidebar-expand { --spk-num-y: calc(50% + 23px); } }
html:not(.theme-skeuo) .sp-root .sp-sidebar-collapse, html:not(.theme-skeuo) .sp-root .sp-sidebar-expand {
  position: fixed; top: var(--spk-num-y); transform: translateY(-50%); box-sizing: border-box; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0;
  border: 0; border-radius: 12px; background: transparent; box-shadow: none; align-items: center; justify-content: center;
  color: var(--spk-chu-2); --dm-text-primary: var(--spk-chu-2); --dm-link: var(--spk-chu-2); --dm-link-hover: var(--spk-chu-2);
  transition: left .25s cubic-bezier(.4, 0, .2, 1), color .15s; -webkit-tap-highlight-color: transparent; }
html:not(.theme-skeuo) .sp-root .sp-sidebar-collapse { left: calc(var(--sp-sidebar-w, 260px) - 22px); }
html:not(.theme-skeuo) .sp-root .sp-sidebar-expand { left: 6px; }
html:not(.theme-skeuo) .sp-root .sp-sidebar-collapse::before, html:not(.theme-skeuo) .sp-root .sp-sidebar-expand::before {
  content: ''; position: absolute; inset: 6px; border-radius: 10px; background: var(--spk-mat); border: 1px solid var(--spk-vien-2);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .1), 0 6px 14px -6px rgba(16, 24, 40, .35); transition: background-color .15s, border-color .15s, box-shadow .15s; }
html.ae-dark-mode:not(.theme-skeuo) .sp-root .sp-sidebar-collapse::before, html.ae-dark-mode:not(.theme-skeuo) .sp-root .sp-sidebar-expand::before {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 14px -6px rgba(0, 0, 0, .7); }
html:not(.theme-skeuo) .sp-root .sp-sidebar-collapse .sp-icon-flat, html:not(.theme-skeuo) .sp-root .sp-sidebar-expand .sp-icon-flat { position: relative; width: 18px; height: 18px; }
html:not(.theme-skeuo) .sp-root .sp-sidebar-collapse:hover, html:not(.theme-skeuo) .sp-root .sp-sidebar-expand:hover,
html:not(.theme-skeuo) .sp-root .sp-sidebar-collapse:focus-visible, html:not(.theme-skeuo) .sp-root .sp-sidebar-expand:focus-visible {
  transform: translateY(-50%); background: transparent; box-shadow: none;
  color: var(--spk-chinh-txt); --dm-text-primary: var(--spk-chinh-txt); --dm-link: var(--spk-chinh-txt); --dm-link-hover: var(--spk-chinh-txt); }
html:not(.theme-skeuo) .sp-root .sp-sidebar-collapse:hover::before, html:not(.theme-skeuo) .sp-root .sp-sidebar-expand:hover::before {
  border-color: var(--spk-chinh); background-image: linear-gradient(var(--spk-chinh-nhat), var(--spk-chinh-nhat)); }
html:not(.theme-skeuo) .sp-root .sp-sidebar-collapse:focus-visible, html:not(.theme-skeuo) .sp-root .sp-sidebar-expand:focus-visible { outline: none; }
html:not(.theme-skeuo) .sp-root .sp-sidebar-collapse:focus-visible::before, html:not(.theme-skeuo) .sp-root .sp-sidebar-expand:focus-visible::before {
  border-color: var(--spk-chinh); box-shadow: 0 0 0 3px var(--spk-focus); }
/* cổ điển: tấm kim loại giữ nguyên, chỉ đứng cùng chỗ với bản phẳng (thắng luật !important của speaking-skeuo.css) */
html.theme-skeuo body .sp-root .sp-sidebar-collapse, html.theme-skeuo body .sp-root .sp-sidebar-collapse:hover {
  top: var(--spk-num-y) !important; left: calc(var(--sp-sidebar-w, 260px) - 22px) !important; transform: translateY(-50%) !important; }
html.theme-skeuo body .sp-root .sp-sidebar-expand, html.theme-skeuo body .sp-root .sp-sidebar-expand:hover {
  top: var(--spk-num-y) !important; left: 6px !important; transform: translateY(-50%) !important; }
html.theme-skeuo .sp-root .sp-sidebar-collapse:focus-visible, html.theme-skeuo .sp-root .sp-sidebar-expand:focus-visible { outline: 3px solid var(--spk-focus); outline-offset: 0; border-radius: 12px; }
/* soát 30/09: núm (phần nhìn thấy từ x = 244, tấm kim loại từ 243) đè 6 px lên đầu phải mục menu đang sáng / đang hover nằm ngang tầm núm
   (Bảng xếp hạng 1440, Phòng thợ săn 1280 / 1024 / 390, Lịch sử 1024 + admin bar) ⇒ mục menu dừng ở x = 237, cách núm ≥ 5 px. Lề trái giữ 10. */
.sp-root .sp-sidebar .sp-nav { padding-right: 22px; }
@media (min-width: 1025px) {
  /* núm mở đã về mép trái giữa chiều cao ⇒ bỏ dải 72 px speaking.css chừa ở đầu mọi màn khi thanh bên đóng: lề trên như lúc thanh bên mở
     (.sp-page 32 px; phim demo 8 px; Hướng dẫn tự lo ở speaking-huong-dan.css; Phòng thợ săn .hs thuộc workflow riêng — không đụng) */
  body.sp-sidebar-collapsed .sp-main > .sp-page:not(.spk-hd):not(.spdemo):not(.hs) { padding-top: 32px; }
  body.sp-sidebar-collapsed .sp-main > .sp-page.spdemo { padding-top: 8px; }
  body.sp-sidebar-collapsed .sp-main > .sp-tiep-bar-wrap { padding-top: 20px; }
  /* cổ điển, Luyện tập / Tự dán đề: trước đây giấu núm nổi, thay bằng khoá da 36 px trong thanh công cụ ⇒ khác mọi màn + vùng chạm < 44.
     Giờ dùng CÙNG núm mép trái; các thẻ trong màn (vốn thụt 20 px) lùi vào 60 px bên trái như màn phẳng để không nằm dưới núm. */
  html.theme-skeuo body.sp-sidebar-collapsed:has(.sp-practice-v2) .sp-root #spSidebarExpand,
  html.theme-skeuo body.sp-sidebar-collapsed:has(.sp-anytext) .sp-root #spSidebarExpand { display: flex !important; }
  html.theme-skeuo body.sp-sidebar-collapsed .sp-root .spv2-header-clasp { display: none !important; }
  html.theme-skeuo body.sp-sidebar-collapsed .sp-practice-v2 .spv2-screen > :not(.spv2-breadcrumb) { margin-left: 60px; margin-right: 48px; }
  /* thanh bên MỞ: tấm kim loại (44 px) đứng nửa ngoài mép thanh bên tới x = 282 ⇒ thẻ trong màn (vốn thụt 20 px, bắt đầu x = 280) lùi thêm cho khỏi chạm — bằng lề 28 px của màn phẳng */
  html.theme-skeuo body:not(.sp-sidebar-collapsed) .sp-practice-v2 .spv2-screen > :not(.spv2-breadcrumb) { margin-left: 28px; }
}

/* ---------- 11. Giảm chuyển động ---------- */
@media (prefers-reduced-motion: reduce) {
  .spk-nut, .spk-man-che, .spk-p2-thanh-chay, .sp-root .sp-sidebar-collapse, .sp-root .sp-sidebar-expand, .sp-root .sp-sidebar-collapse::before, .sp-root .sp-sidebar-expand::before { transition: none; }
  .sp-root .sp-quarter-dot, .sp-root .sp-quarter-dot.is-live, .sp-root .spv2-fu-stage-icon--pulse, .sp-root .spv2-fu-loader-bars span { animation: none; }
}