/* =====================================================================
   TRANG «HƯỚNG DẪN LÀM BÀI» (?view=landing) — chỉ nạp ở view này.
   Dùng token --spk-* của speaking-he-thong.css. Một chỗ táo bạo: THẺ ĐỀ giấy
   (5 bước) + phim 16 giây trong khung máy quay. Còn lại im lặng, cùng khuôn.
   Không JS: khối gập tự bung, phim đứng ở khung đóng băng (animation-delay âm).
   ===================================================================== */

.spk-hd { max-width: 1120px; margin: 0 auto; padding: 40px 32px 80px; color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); font-family: var(--spk-font); box-sizing: border-box; }
.spk-hd *, .spk-hd *::before, .spk-hd *::after { box-sizing: border-box; }
/* Thanh bên ĐÓNG (máy tính): speaking.css ép «.sp-sidebar-collapsed .sp-page {max-width:none; padding 72/48/60 !important}» cho MỌI màn
   ⇒ trang Hướng dẫn giãn hết màn còn thẻ 5 việc lệch trái (anh báo 30/09). Trang này là trang ĐỌC: giữ khổ 1120 + lề 32 và CĂN GIỮA,
   lề trên như khi thanh bên mở (nút mở thanh bên nằm ở mép trái, giữa chiều cao — không cần chừa góc trên). Chỉ nhắm .spk-hd,
   các màn Speaking khác vẫn giãn hết bề ngang như cũ. */
/* lề trái/phải: 32 px, nhưng màn 1025–1176 px (trang chạm mép) thì nới cho chữ không nằm dưới núm mở thanh bên ở mép trái (núm tới 50 px) */
body.sp-sidebar-collapsed .sp-main > .sp-page.spk-hd { --hd-le: max(32px, calc(60px - max(0px, (100vw - 1120px) / 2)));
  max-width: 1120px !important; margin-left: auto; margin-right: auto; padding: 40px var(--hd-le) 80px !important; }
.spk-hd p { margin: 0; }
.spk-hd b, .spk-hd strong { font-weight: 700; }
.spk-hd p a, .spk-hd li a, .spk-hd dd a { 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); }
.spk-hd-h2 { margin: 0 0 16px; font: 800 34px/1.05 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); text-shadow: var(--spk-bong-chu); }
html.theme-skeuo .spk-hd-h2 { font-weight: 700; font-size: 28px; }
/* skeuo sáng: tiêu đề mục nằm trên gỗ sồi ⇒ đặt lên mẩu giấy kem (tương phản ≥ 4.5:1), không để chữ thẳng trên gỗ */
html.theme-skeuo:not(.ae-dark-mode) .spk-hd > section > .spk-hd-h2 { display: inline-block; padding: 6px 16px 8px; border-radius: 10px; background: var(--spk-mat-nen); border: 1px solid var(--spk-vien); box-shadow: var(--spk-bong-the); }
/* chỗ gắn Anh Sói: chỉ chiếm chỗ khi có tài sản mascot (spk-hd--soi) — không có thì trang chỉ còn chữ */
.spk-hd:not(.spk-hd--soi) .spk-soi { display: none; }
.spk-hd section + section { margin-top: 56px; }
.spk-hd--soi .spk-hd-the { margin-top: 104px; }

/* ---------- 1. MỞ ĐẦU ---------- */
.spk-hd-mo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: 40px; align-items: center; }
.spk-hd-mo-chu { min-width: 0; container-type: inline-size; container-name: spk-mo; }
html.theme-skeuo .spk-hd-mo-chu { background: var(--spk-mat-nen); border: 1px solid var(--spk-vien); border-radius: var(--spk-r-to); box-shadow: var(--spk-bong-the); padding: 28px 28px 24px; }
.spk-hd-chao { display: flex; align-items: flex-end; gap: 10px; margin: 0 0 18px; }
/* lời chào = bong bóng mực của Anh Sói (speaking-he-thong.css mục 25): chừa chỗ cho đuôi vẽ tay chỉ về con sói */
.spk-hd--soi .spk-hd-chao { gap: 32px; }
.spk-hd:not(.spk-hd--soi) .spk-loi-soi-duoi { display: none; }
.spk-soi--dau { width: 56px; height: 56px; flex: none; }
.spk-soi--dau .soi { --soi-co: 56px; }
.spk-hd-chao-bong { max-width: 26em; min-width: 0; }
.spk-hd-chao-bong.spk-loi-soi--nghiem { max-width: 30em; }
.spk-hd-tieude { margin: 0; font: 800 clamp(46px, 5.4vw, 72px)/.98 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); letter-spacing: -.005em; text-wrap: balance; text-shadow: var(--spk-bong-chu); }
html.theme-skeuo .spk-hd-tieude { font-weight: 700; font-size: clamp(38px, 4.4vw, 56px); line-height: 1.06; letter-spacing: -.01em; }
.spk-hd-dan { margin-top: 16px !important; font-size: 17px; line-height: 1.55; 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: 34em; }
.spk-hd-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.spk-hd-cau-dau { margin-top: 14px !important; font-size: 14.5px; line-height: 1.55; 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: 38em; }
.spk-hd-cau-dau q { font-weight: 600; color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); }
.spk-hd-so { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 26px 0 0; padding: 16px 0 0; border-top: 1px solid var(--spk-vien); }
.spk-hd-so > div { padding: 0 14px; border-left: 1px solid var(--spk-vien); min-width: 0; }
.spk-hd-so > div:first-child { padding-left: 0; border-left: 0; }
.spk-hd-so dt { font-size: 12.5px; line-height: 1.3; 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: 6px 0 0; order: 2; }
.spk-hd-so > div { display: flex; flex-direction: column; }
.spk-hd-so dd { margin: 0; order: 1; display: flex; align-items: baseline; gap: 4px; }
.spk-hd-so .spk-so { font-size: 36px; line-height: 1; font-weight: 800; color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); }
html.theme-skeuo .spk-hd-so .spk-so { font-size: 30px; font-weight: 700; }
.spk-hd-so-icon { font-size: 22px; line-height: 1; align-self: center; }
.spk-hd-so-icon .spk-luot-ic { margin-inline: .06em 0; vertical-align: -.1em; }
/* khối chữ hẹp (thẻ cổ điển ở 1440 chỉ còn ~420 px bên trong ⇒ nhãn bẻ «lượt chấm còn / lại») ⇒ 4 số thành lưới 2×2.
   Phẳng ở 1440 rộng ~476 px: 4 cột vẫn vừa nhãn một dòng nên giữ 4 cột. */
@container spk-mo (max-width: 460px) {
  .spk-hd-so { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .spk-hd-so > div:nth-child(3) { padding-left: 0; border-left: 0; }
}
.spk-hd-so-moi { margin-top: 12px !important; font-size: 14px; 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); }

/* ---------- 2. PHIM (khung máy quay: đèn REC, giờ phim, điều khiển ở ĐÁY) ---------- */
.spk-phim { margin: 0; min-width: 0; --vo: #151B24; --vo-2: #1E2631; --vo-chu: #E9EEF5; --vo-chu-2: #A8B3C4; --vo-vien: rgba(255, 255, 255, .08); }
html.theme-skeuo .spk-phim { --vo: linear-gradient(180deg, #E3E6EA 0%, #C3C9D0 100%); --vo-2: rgba(0, 0, 0, .06); --vo-chu: #2B2F35; --vo-chu-2: #4A515B; --vo-vien: rgba(0, 0, 0, .14); }
html.theme-skeuo.ae-dark-mode .spk-phim { --vo: linear-gradient(180deg, #3A322A 0%, #221C16 100%); --vo-2: rgba(0, 0, 0, .25); --vo-chu: #F1E6D2; --vo-chu-2: #CDBB9A; --vo-vien: rgba(255, 214, 150, .12); }
.spk-phim-vo { background: var(--vo); border-radius: 22px; padding: 8px 8px 6px; box-shadow: 0 30px 60px -30px rgba(10, 16, 28, .55), 0 2px 6px rgba(10, 16, 28, .18); }
html.theme-skeuo .spk-phim-vo { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -1px 0 rgba(0, 0, 0, .12), 0 24px 44px -24px rgba(40, 22, 4, .7), 0 2px 4px rgba(40, 22, 4, .25); border: 1px solid rgba(80, 60, 30, .35); }
.spk-phim-dau { display: flex; align-items: center; gap: 8px; padding: 2px 8px 8px; color: var(--vo-chu); --dm-text-primary: var(--vo-chu); --dm-link: var(--vo-chu); --dm-link-hover: var(--vo-chu); font: 600 13px/1 var(--spk-font); }
.spk-phim-rec { width: 9px; height: 9px; border-radius: 50%; background: #E0393E; box-shadow: 0 0 0 3px rgba(224, 57, 62, .22); }
.spk-phim.is-chay .spk-phim-rec { animation: spk-rec 1.2s steps(2, jump-none) infinite; }
@keyframes spk-rec { 50% { opacity: .25; } }
.spk-phim-ten { flex: 1; color: var(--vo-chu); --dm-text-primary: var(--vo-chu); --dm-link: var(--vo-chu); --dm-link-hover: var(--vo-chu); }
.spk-phim-gio { font: 700 15px/1 var(--spk-font-so); letter-spacing: .02em; color: var(--vo-chu-2); --dm-text-primary: var(--vo-chu-2); --dm-link: var(--vo-chu-2); --dm-link-hover: var(--vo-chu-2); font-variant-numeric: tabular-nums; }
.spk-phim-khung { position: relative; width: 100%; height: calc(var(--phim-h) * var(--k, .9) * 1px); overflow: hidden; border-radius: 15px; background: var(--spk-nen); isolation: isolate; }
html.theme-skeuo .spk-phim-khung { background: #F1E7CF; box-shadow: inset 0 1px 3px rgba(40, 22, 4, .35); }
html.theme-skeuo.ae-dark-mode .spk-phim-khung { background: #1C1711; }
.spk-phim-man { position: absolute; left: 0; top: 0; width: calc(var(--phim-w) * 1px); height: calc(var(--phim-h) * 1px); transform: scale(var(--k, .9)); transform-origin: 0 0; }
.spk-phim--chinh { --phim-w: 600; --phim-h: 390; }
.spk-phim--canh { --phim-w: 360; --phim-h: 460; }
.spk-phim-loi { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 8px 6px; color: var(--vo-chu); --dm-text-primary: var(--vo-chu); --dm-link: var(--vo-chu); --dm-link-hover: var(--vo-chu); }
.spk-soi--phim { width: 36px; height: 36px; flex: none; }
.spk-soi--phim .soi { --soi-co: 36px; }
.spk-phim-loi p { font-size: 14px; line-height: 1.45; color: var(--vo-chu); --dm-text-primary: var(--vo-chu); --dm-link: var(--vo-chu); --dm-link-hover: var(--vo-chu); }
.spk-phim-loi b { color: var(--vo-chu); --dm-text-primary: var(--vo-chu); --dm-link: var(--vo-chu); --dm-link-hover: var(--vo-chu); }
.spk-phim-dk { display: flex; align-items: center; gap: 6px; padding: 0 2px 2px; }
.spk-phim-nut { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: var(--vo-2); color: var(--vo-chu); --dm-text-primary: var(--vo-chu); --dm-link: var(--vo-chu); --dm-link-hover: var(--vo-chu); }
.spk-phim-nut svg { width: 18px; height: 18px; }
.spk-phim-nut .spk-phim-nut-dung, .spk-phim.is-chay .spk-phim-nut .spk-phim-nut-chay { display: none; }
.spk-phim.is-chay .spk-phim-nut .spk-phim-nut-dung { display: inline; }
.spk-phim-nut-chay, .spk-phim-nut-dung { display: inline-grid; place-items: center; }
/* phim chỉ tự chạy 1 vòng rồi đứng ở khung đắt ⇒ nút ▶ thành «Xem lại» (speaking-huong-dan.js is-het) */
.spk-phim-nut-lai { display: none; align-items: center; gap: 6px; font: 700 13px/1 var(--spk-font); white-space: nowrap; }
.spk-phim-nut-lai svg { width: 16px; height: 16px; }
.spk-phim.is-het:not(.is-chay) .spk-phim-nut { width: auto; padding: 0 14px 0 12px; border-radius: 22px; }
.spk-phim.is-het:not(.is-chay) .spk-phim-nut .spk-phim-nut-chay { display: none; }
.spk-phim.is-het:not(.is-chay) .spk-phim-nut .spk-phim-nut-lai { display: inline-flex; }
.spk-phim-chuong { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; min-width: 0; }
.spk-phim-chuong button { min-height: 44px; padding: 6px 2px 4px; border: 0; background: transparent; cursor: pointer; text-align: left; color: var(--vo-chu-2); --dm-text-primary: var(--vo-chu-2); --dm-link: var(--vo-chu-2); --dm-link-hover: var(--vo-chu-2);
  font: 600 12.5px/1.2 var(--spk-font); display: flex; flex-direction: column; gap: 6px; border-radius: 8px; min-width: 0; }
.spk-phim-chuong button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 2px; }
@media (max-width: 480px) { .spk-phim-chuong button span { white-space: normal; line-height: 1.15; } }
.spk-phim-chuong button i { display: block; height: 4px; border-radius: 2px; background: var(--vo-vien); overflow: hidden; }
.spk-phim-chuong button em { display: block; height: 100%; width: 0; background: #E0393E; border-radius: inherit; }
.spk-phim-chuong button.is-qua em { width: 100%; background: var(--vo-chu-2); }
.spk-phim-chuong button.is-dang { color: var(--vo-chu); --dm-text-primary: var(--vo-chu); --dm-link: var(--vo-chu); --dm-link-hover: var(--vo-chu); }
.spk-phim-chuong button.is-dang em { width: calc(var(--tien, 1) * 100%); }
.spk-phim-chuong button:hover { color: var(--vo-chu); --dm-text-primary: var(--vo-chu); --dm-link: var(--vo-chu); --dm-link-hover: var(--vo-chu); }
.spk-phim-chu { margin: 10px 4px 0; font-size: 13px; line-height: 1.5; 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 .spk-phim-chu { display: inline-block; padding: 4px 10px; border-radius: 8px; background: rgba(40, 24, 8, .62); color: #FFF3DC; --dm-text-primary: #FFF3DC; --dm-link: #FFF3DC; --dm-link-hover: #FFF3DC; }
.spk-phim-tinh { display: none; }

/* ---------- 3. CẢNH (hệ toạ độ logic, co giãn bằng --k) ---------- */
.p-phim { --T: 16s; --tre: calc(var(--dung, 14.7) * -1s); font-family: var(--spk-font); color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); font-size: 13px; line-height: 1.35; }
.spk-phim--canh .p-phim { --T: 10s; }
.p-thi.p-phim { --T: 9s; }
.p-phim, .p-phim * { animation-duration: var(--T); animation-timing-function: linear; animation-iteration-count: infinite; animation-fill-mode: both; animation-play-state: paused; animation-delay: var(--tre); }
.spk-js .p-phim { --tre: 0s; }                 /* JS điều khiển bằng Web Animations (currentTime) */
.p-khung { position: absolute; inset: 0; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.p-h { font: 800 22px/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); }
.p-pill { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 999px; font-weight: 600; font-size: 12px; 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); border: 1px solid var(--spk-vien); }
.p-pill.is-on { 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); border-color: var(--spk-chinh); }
html.theme-skeuo .p-pill.is-on { background: var(--spk-nut-nen); }
.p-nut-nho { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; 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-weight: 600; font-size: 12.5px; width: max-content; }
.p-nut-nho svg { width: 15px; height: 15px; }
.p-cau-nhan { display: block; font-size: 11.5px; font-weight: 600; 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); padding-bottom: 6px; border-bottom: 2px solid #E36A5F; margin-bottom: 8px; }
/* ngón tay + gợn: JS dựng hoạt ảnh theo data-cham (giây); không JS thì ẩn */
[data-cham] { position: relative; }
.p-ngon { position: absolute; right: -6px; bottom: -18px; width: 30px; height: 30px; z-index: 5; opacity: 0; pointer-events: none; }
.p-ngon svg { width: 30px; height: 30px; fill: #FFFFFF; stroke: #1B2433; stroke-width: 1.5; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.p-gon { position: absolute; left: -6px; top: -8px; width: 22px; height: 22px; border-radius: 50%; background: rgba(224, 57, 62, .55); opacity: 0; }
/* chú thích bút chì (chỉ trong cảnh) */
.p-but { position: absolute; z-index: 6; padding: 3px 9px; border-radius: 8px; background: #FFF7D6; color: #5A4420; --dm-text-primary: #5A4420; --dm-link: #5A4420; --dm-link-hover: #5A4420; border: 1px solid #E6CF8C; font: italic 600 12px/1.25 var(--spk-font);
  box-shadow: 0 3px 8px -3px rgba(60, 40, 0, .35); opacity: 0; white-space: nowrap; transform: rotate(-2deg); }
.p-but::before { content: ''; position: absolute; width: 12px; height: 12px; background: inherit; border: inherit; border-width: 0 0 1px 1px; transform: rotate(-45deg); }

/* Cảnh A — Danh sách đề */
.p-a { animation-name: p-a; }
.p-a-dau { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.p-a-dau .p-h { margin-right: auto; }
.p-a-ds { display: flex; flex-direction: column; gap: 8px; }
.p-hang { display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 14px; border-radius: 12px; background: var(--spk-mat); border: 1px solid var(--spk-vien); }
.p-hang b { font-size: 15px; color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); flex: 1; }
.p-hang small { font-size: 12px; 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); }
.p-stt { width: 18px; font: 700 15px/1 var(--spk-font-so); 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); }
.p-hang--1 { animation-name: p-hang-chon; }
.p-hang--1 .p-ngon { right: 18px; bottom: -14px; }
@keyframes p-a { 0%, 14.4% { opacity: 1; transform: none; } 16.9%, 100% { opacity: 0; transform: translateX(-26px); } }
@keyframes p-hang-chon { 0%, 9.6% { box-shadow: none; } 10.6%, 16% { box-shadow: 0 0 0 2px var(--spk-chinh), 0 6px 14px -8px rgba(0, 0, 0, .4); } 100% { box-shadow: none; } }

/* Cảnh B — Luyện tập */
.p-b { animation-name: p-b; display: grid; grid-template-columns: 1.18fr 1fr; grid-template-rows: auto 1fr; column-gap: 14px; row-gap: 10px; }
.p-b-dau { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 13px; 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); }
.p-b-dau b { color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); font-size: 13.5px; }
.p-lui { display: inline-flex; align-items: center; gap: 2px; 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; }
.p-lui svg { width: 15px; height: 15px; }
.p-b-trai, .p-b-phai { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.p-cau { padding: 12px 14px; border-radius: 14px; background: var(--spk-mat-nen); border: 1px solid var(--spk-vien); box-shadow: var(--spk-bong-the); }
.p-cau-chu { display: block; font-size: 15px; line-height: 1.35; margin-bottom: 8px; color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); }
.p-nut-nghe .p-ngon { right: -10px; }
.p-vid { position: relative; border-radius: 14px; background: var(--spk-mat-nen); border: 1px solid var(--spk-vien); overflow: visible; animation-name: p-vid; transform-origin: top center; }
.p-vid-man { border-radius: 13px 13px 0 0; overflow: hidden; background: var(--spk-mat-2); display: flex; justify-content: center; padding: 6px 0 0; }
.p-vid-man img { display: block; width: 100%; max-width: 186px; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; }
.p-vid-dk { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; font-size: 11.5px; 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-variant-numeric: tabular-nums; }
.p-vid-pp svg, .p-vid-lai svg { width: 14px; height: 14px; }
.p-vid-gio b { font-weight: 700; color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); }
.p-vid-ray { flex: 1; height: 4px; border-radius: 2px; background: var(--spk-vien); overflow: hidden; }
.p-vid-ray i { display: block; height: 100%; background: #E0393E; width: 100%; animation-name: p-vid-ray; }
.p-but--vid { left: calc(100% + 18px); top: 34px; animation-name: p-but-vid; }
.p-but--vid::before { left: -6px; top: 8px; }
@keyframes p-b { 0%, 15.6% { opacity: 0; transform: translateX(26px); } 18.1%, 76.2% { opacity: 1; transform: none; } 78.8%, 100% { opacity: 0; transform: translateX(-26px); } }
@keyframes p-vid { 0%, 28.1% { opacity: 0; transform: scaleY(.2); } 31.25%, 100% { opacity: 1; transform: none; } }
@keyframes p-vid-ray { 0%, 31.25% { width: 0; } 47.5%, 100% { width: 100%; } }
@keyframes p-but-vid { 0%, 33.75% { opacity: 0; } 36.25%, 51.25% { opacity: 1; } 53.75%, 100% { opacity: 0; } }
.p-goiy { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--spk-vang-nhat); color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); font-size: 12.5px; animation-name: p-goiy; transform-origin: top; }
.p-goiy b { font-size: 13px; }
.p-goiy b small { font-weight: 500; 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); }
.p-goiy span { 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); }
@keyframes p-goiy { 0%, 55% { opacity: 1; transform: none; } 57.5%, 100% { opacity: 0; transform: translateY(-8px) scaleY(.6); } }
.p-but--goiy { left: 10px; top: 14px; animation-name: p-but-goiy; }
.p-but--goiy::before { left: 20px; bottom: -6px; transform: rotate(-45deg); border-width: 0 0 1px 1px; }
@keyframes p-but-goiy { 0%, 56.25% { opacity: 0; } 58.75%, 70% { opacity: 1; } 72.5%, 100% { opacity: 0; } }
.p-dock { position: relative; margin-top: auto; height: 84px; border-radius: 16px; background: var(--spk-mat-nen); border: 1px solid var(--spk-vien); box-shadow: var(--spk-bong-the); }
.p-dock > div { position: absolute; inset: 0; display: flex; align-items: center; gap: 10px; padding: 0 12px; }
.p-dock-nghi { animation-name: p-nghi; }
.p-dock-ghi { animation-name: p-ghi; justify-content: space-between; }
.p-dock-cham { animation-name: p-cham; gap: 10px; font-weight: 600; 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-size: 13.5px; }
@keyframes p-nghi { 0%, 53.75% { opacity: 1; } 55%, 100% { opacity: 0; } }
@keyframes p-ghi { 0%, 53.75% { opacity: 0; } 55%, 71.9% { opacity: 1; } 73.1%, 100% { opacity: 0; } }
@keyframes p-cham { 0%, 71.9% { opacity: 0; } 73.1%, 100% { opacity: 1; } }
.p-gio { font: 800 22px/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; white-space: nowrap; }
/* đồng hồ trong cảnh = đúng khuôn đồng hồ thật (anh 30/09): số chính, dòng phụ «tối đa 3:00» nhỏ bên dưới — không «0:00 / 3:00» */
.p-gio:has(small) { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; }
.p-gio small { display: block; font: 600 10.5px/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); }
.p-gio--do { color: #D0392C; --dm-text-primary: #D0392C; --dm-link: #D0392C; --dm-link-hover: #D0392C; }
.p-mic { position: relative; flex: none; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: #D0392C; color: #fff; --dm-text-primary: #fff; --dm-link: #fff; --dm-link-hover: #fff;
  box-shadow: 0 0 0 5px rgba(208, 57, 44, .15), 0 6px 14px -6px rgba(208, 57, 44, .7); }
html.theme-skeuo .p-mic { background: linear-gradient(180deg, #F59A8F 0%, #E0493C 49%, #C7362A 51%, #DE5244 100%); }
.p-mic svg { width: 24px; height: 24px; }
.p-mic .p-ngon { right: -12px; bottom: -16px; }
.p-dock-chu { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.p-dock-chu b { white-space: nowrap; font-size: 14px; color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); }
.p-dock-chu small { font-size: 11.5px; 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); }
.p-song { display: flex; align-items: center; gap: 3px; height: 30px; }
.p-song i { display: block; width: 4px; height: 100%; border-radius: 2px; background: #D0392C; animation: p-song .9s ease-in-out infinite both paused; }
.p-song i:nth-child(2n) { animation-delay: -.3s; } .p-song i:nth-child(3n) { animation-delay: -.6s; } .p-song i:nth-child(5n) { animation-delay: -.45s; }
.spk-phim.is-chay .p-song i { animation-play-state: running; }
@keyframes p-song { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
.p-nut-dung { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 10px; background: var(--spk-nut2-nen); border: 1px solid var(--spk-vien-2); font-weight: 700; font-size: 13px; color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); }
.p-nut-dung svg { width: 14px; height: 14px; color: #D0392C; --dm-text-primary: #D0392C; --dm-link: #D0392C; --dm-link-hover: #D0392C; }
.p-quay { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--spk-vien); border-top-color: var(--spk-chinh); animation: p-quay .8s linear infinite paused; }
.spk-phim.is-chay .p-quay { animation-play-state: running; }
@keyframes p-quay { to { transform: rotate(360deg); } }

/* Cảnh C — Bảng điểm */
.p-c { animation-name: p-c; gap: 12px; }
@keyframes p-c { 0%, 77.5% { opacity: 0; transform: translateY(14px); } 80%, 98.1% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.p-c-tren { position: relative; display: flex; align-items: center; gap: 20px; padding: 12px 16px; border-radius: 14px; background: var(--spk-mat-nen); border: 1px solid var(--spk-vien); box-shadow: var(--spk-bong-the); }
.p-vong { position: relative; flex: none; width: 108px; height: 108px; display: grid; place-items: center; }
.p-vong svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.p-vong-nen { fill: none; stroke: var(--spk-vien); stroke-width: 10; }
.p-vong-day { fill: none; stroke: var(--spk-vang); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 314; animation-name: p-vong; }
@keyframes p-vong { 0%, 80% { stroke-dashoffset: 314; } 86.25%, 100% { stroke-dashoffset: 87.2; } }
.p-vong b { position: relative; font: 800 36px/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); animation-name: p-hien-so; margin-top: -8px; }
.p-vong small { position: absolute; bottom: 26px; font-size: 11px; 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); }
@keyframes p-hien-so { 0%, 82.5% { opacity: 0; } 85%, 100% { opacity: 1; } }
.p-tc { position: relative; flex: 1; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.p-tc-hang { display: grid; grid-template-columns: 138px 1fr 28px; align-items: center; gap: 8px; font-size: 12.5px; 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); }
.p-tc-hang i { height: 6px; border-radius: 3px; background: var(--spk-vien); overflow: hidden; }
.p-tc-hang em { display: block; height: 100%; width: 0; background: var(--spk-chinh); border-radius: inherit; animation-name: p-thanh; animation-delay: calc(var(--tre) + var(--i) * .12s); }
.p-tc-hang.is-thap em { background: #D0392C; }
.p-tc-hang.is-thap span, .p-tc-hang.is-thap b { color: #C0392B; --dm-text-primary: #C0392B; --dm-link: #C0392B; --dm-link-hover: #C0392B; font-weight: 700; }
.p-tc-hang b { font: 800 15px/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); text-align: right; }
@keyframes p-thanh { 0%, 81.25% { width: 0; } 87.5%, 100% { width: calc(var(--d) * 100%); } }
.p-but--thap { right: 6px; bottom: -26px; animation-name: p-but-thap; }
.p-but--thap::before { left: 24px; top: -6px; border-width: 1px 0 0 1px; transform: rotate(45deg); }
@keyframes p-but-thap { 0%, 88.75% { opacity: 0; } 91.25%, 98% { opacity: 1; } 100% { opacity: 0; } }
.p-loi { margin: 10px 0 0 !important; padding: 12px 14px; border-radius: 12px; background: var(--spk-mat); border: 1px solid var(--spk-vien); font-size: 13.5px; line-height: 1.6; color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); }
.p-w { border-radius: 4px; padding: 0 2px; animation-name: p-w; }
/* màu chữ đứng yên (dark-mode.css ép color bằng !important — thắng cả hoạt ảnh), chỉ nền hiện dần */
.p-w--s85 { --w: transparent; color: var(--pw-85); --dm-text-primary: var(--pw-85); --dm-link: var(--pw-85); --dm-link-hover: var(--pw-85); font-weight: 600; }
.p-w--s70 { --w: transparent; color: var(--pw-70); --dm-text-primary: var(--pw-70); --dm-link: var(--pw-70); --dm-link-hover: var(--pw-70); border-bottom: 1px solid var(--pw-70-vach); border-radius: 0; }
.p-w--s60 { --w: var(--pw-60-nen); color: var(--pw-60); --dm-text-primary: var(--pw-60); --dm-link: var(--pw-60); --dm-link-hover: var(--pw-60); }
.p-w--s0 { --w: var(--pw-0-nen); color: var(--pw-0); --dm-text-primary: var(--pw-0); --dm-link: var(--pw-0); --dm-link-hover: var(--pw-0); font-weight: 700; }
.p-w--filler { --w: transparent; color: var(--pw-dem); --dm-text-primary: var(--pw-dem); --dm-link: var(--pw-dem); --dm-link-hover: var(--pw-dem); font-style: italic; }
@keyframes p-w { 0%, 87.5% { background: transparent; } 91.25%, 100% { background: var(--w); } }
.p-c-nut { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
.p-nut-noi-lai { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: 10px; background: #D0392C; color: #fff; --dm-text-primary: #fff; --dm-link: #fff; --dm-link-hover: #fff; font-weight: 700; font-size: 13.5px; animation-name: p-nhip; }
.p-nut-noi-lai svg { width: 15px; height: 15px; }
@keyframes p-nhip { 0%, 93.75% { transform: none; } 95.3% { transform: scale(1.06); } 97%, 100% { transform: none; } }

@media (min-width: 641px) { .p-b .p-dock-nghi .p-gio small { display: none; } .p-b .p-dock > div { gap: 8px; } }
/* bố cục DỌC cho điện thoại: khung 360×480, chữ ≥ 12 px sau co giãn */
@media (max-width: 640px) {
  .spk-phim--chinh { --phim-w: 360; --phim-h: 480; }
  .p-khung { padding: 14px 14px; }
  .p-b { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; }
  .p-b-phai { gap: 8px; }
  .p-vid-man img { max-width: 138px; }
  .p-vid-dk { height: 26px; }
  .p-cau { padding: 10px 12px; }
  .p-cau-chu { font-size: 15px; margin-bottom: 8px; }
  .p-b-trai { gap: 8px; }
  .p-goiy { padding: 8px 10px; gap: 2px; }
  .p-but--goiy { top: 10px; left: 20px; }
  .p-cau-chu { margin-bottom: 6px; }
  .p-but--vid { left: auto; right: 6px; bottom: auto; top: -46px; white-space: normal; max-width: 150px; text-align: left; }
  .p-but--vid::before { left: auto; right: 30px; top: auto; bottom: -6px; transform: rotate(-45deg); border-width: 0 0 1px 1px; }
  .p-dock { height: 78px; }
  .p-c-tren { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; }
  .p-vong { width: 96px; height: 96px; margin: 0 auto; }
  .p-tc-hang { grid-template-columns: 130px 1fr 28px; }
  .p-but--thap { bottom: -30px; top: auto; right: 0; }
  .p-c .p-loi { margin-top: 22px !important; }
}

/* ---------- 4. CẢNH PART 2 (10 s) ---------- */
.p-p2 { display: flex; flex-direction: column; gap: 10px; padding: 14px; height: 100%; }
.p-the2 { position: relative; padding: 12px 14px; border-radius: 10px; background: #FFFDF6; border: 1px solid #E6DCC2; box-shadow: 0 8px 18px -12px rgba(60, 40, 0, .45); color: #2A2A2A; --dm-text-primary: #2A2A2A; --dm-link: #2A2A2A; --dm-link-hover: #2A2A2A; transform: rotate(-.6deg); }
html.ae-dark-mode:not(.theme-skeuo) .p-the2 { background: #F4F1E8; }
.p-the2 .p-cau-nhan { color: #6B6557; --dm-text-primary: #6B6557; --dm-link: #6B6557; --dm-link-hover: #6B6557; }
.p-the2-de { display: block; font-size: 14.5px; line-height: 1.35; margin-bottom: 6px; color: #1E1E1E; --dm-text-primary: #1E1E1E; --dm-link: #1E1E1E; --dm-link-hover: #1E1E1E; }
.p-the2-nen { display: block; font-size: 12px; color: #6B6557; --dm-text-primary: #6B6557; --dm-link: #6B6557; --dm-link-hover: #6B6557; margin-bottom: 4px; }
.p-the2-ds { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.p-the2-ds li { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #2A2A2A; --dm-text-primary: #2A2A2A; --dm-link: #2A2A2A; --dm-link-hover: #2A2A2A; }
.p-the2-ds em { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #B8AE95; color: transparent; font-style: normal; }
.p-the2-ds em svg { width: 12px; height: 12px; animation-name: p2-tick; animation-delay: calc(var(--tre) + var(--i) * .8s); }
@keyframes p2-tick { 0%, 58% { opacity: 0; transform: scale(.4); color: #1C7F50; } 60%, 100% { opacity: 1; transform: none; color: #1C7F50; } }
.p-but--tick { right: -4px; top: 76px; animation-name: p2-but; }
.p-but--tick::before { left: -6px; top: 8px; }
@keyframes p2-but { 0%, 60% { opacity: 0; } 63%, 96% { opacity: 1; } 100% { opacity: 0; } }
.p-p2-giua { position: relative; display: flex; gap: 10px; align-items: stretch; min-height: 92px; }
.p-nut-chuan-bi { position: absolute; left: 0; top: 30px; width: 124px; justify-content: center; padding: 0 6px; animation-name: p2-cb; z-index: 2; }
@keyframes p2-cb { 0%, 11% { opacity: 1; } 12.5%, 100% { opacity: 0; } }
.p-dem60 { flex: none; width: 124px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 12px; border: 2px solid var(--spk-vang); animation-name: p2-dem; }
.p-dem60 b { font: 800 34px/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); }
.p-dem60 small { font-size: 11px; 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); text-align: center; }
@keyframes p2-dem { 0%, 11% { opacity: 0; } 12.5%, 38.5% { opacity: 1; } 40%, 100% { opacity: .35; } }
.p-goiy--p2 { position: relative; flex: 1; animation-name: none; overflow: hidden; }
.p-khoa { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; text-align: center; border-radius: inherit;
  background: rgba(40, 32, 18, .78); color: #FFF3D6; --dm-text-primary: #FFF3D6; --dm-link: #FFF3D6; --dm-link-hover: #FFF3D6; font-weight: 700; font-size: 12.5px; animation-name: p2-khoa; }
.p-khoa svg { width: 16px; height: 16px; flex: none; }
@keyframes p2-khoa { 0%, 39% { opacity: 0; transform: translateY(-12px); } 42%, 100% { opacity: 1; transform: none; } }
.p-p2-noi { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.p-dock--p2 { height: 70px; margin-top: 0; }
.p-dock--p2 .p-dock-nghi { animation-name: p2-nghi; }
.p-dock--p2 .p-dock-ghi { animation-name: p2-ghi; justify-content: flex-start; gap: 14px; }
@keyframes p2-nghi { 0%, 45% { opacity: 1; } 46.5%, 100% { opacity: 0; } }
@keyframes p2-ghi { 0%, 45% { opacity: 0; } 46.5%, 100% { opacity: 1; } }
.p-dai { position: relative; height: 34px; }
.p-dai-ray { position: absolute; left: 0; right: 0; top: 2px; height: 10px; border-radius: 5px; background: var(--spk-vien); overflow: hidden; }
.p-dai-dep { position: absolute; top: 0; bottom: 0; left: 50%; width: 16.667%; background: rgba(28, 127, 80, .25); border-left: 2px solid #1C7F50; border-right: 2px solid #1C7F50; }
.p-dai-chay { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #D0392C; border-radius: 5px; animation-name: p2-dai; opacity: .85; }
@keyframes p2-dai { 0%, 46% { width: 0; } 84%, 100% { width: 66.667%; } }
.p-dai-nhan { position: absolute; top: 16px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.p-dai-nhan--dep { left: 50%; color: #1C7F50; --dm-text-primary: #1C7F50; --dm-link: #1C7F50; --dm-link-hover: #1C7F50; transform: translateX(-30%); }
.p-dai-nhan--dung { right: 0; 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); }
.p-hoi-them { position: absolute; left: 14px; right: 14px; top: 196px; padding: 12px 14px; border-radius: 14px 14px 14px 4px; background: var(--spk-chinh); color: #fff; --dm-text-primary: #fff; --dm-link: #fff; --dm-link-hover: #fff; box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .6); animation-name: p2-hoi; z-index: 4; }
html.ae-dark-mode:not(.theme-skeuo) .p-hoi-them { background: #2B3A52; }
html.theme-skeuo .p-hoi-them { background: #2F5E9E; }
.p-hoi-them-ai { display: block; font-size: 11px; font-weight: 600; opacity: .8; color: #DDE7F5; --dm-text-primary: #DDE7F5; --dm-link: #DDE7F5; --dm-link-hover: #DDE7F5; }
.p-hoi-them b { display: block; font-size: 14px; margin: 2px 0 4px; color: #fff; --dm-text-primary: #fff; --dm-link: #fff; --dm-link-hover: #fff; }
.p-hoi-them small { font-size: 12px; color: #DDE7F5; --dm-text-primary: #DDE7F5; --dm-link: #DDE7F5; --dm-link-hover: #DDE7F5; }
@keyframes p2-hoi { 0%, 85% { opacity: 0; transform: translateY(12px); } 88%, 100% { opacity: 1; transform: none; } }

/* ---------- 5. CẢNH THI THỬ (9 s) ---------- */
.p-thi { display: flex; flex-direction: column; gap: 8px; padding: 14px; height: 100%; }
.p-thi-dau { display: flex; align-items: center; gap: 8px; font-size: 12.5px; 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); }
.p-thi-dau > span:first-child { margin-right: auto; }
.p-thi-dau b { color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); }
.p-thi-so { position: relative; display: inline-grid; font-style: normal; }
.p-thi-so > span, .p-thi-luu > span { grid-area: 1 / 1; }
.p-thi-so-a, .p-thi-luu-a { animation-name: thi-a; }
.p-thi-so-b, .p-thi-luu-b { animation-name: thi-b; }
@keyframes thi-a { 0%, 68.9% { opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes thi-b { 0%, 68.9% { opacity: 0; } 70%, 100% { opacity: 1; } }
.p-thi-luu { display: inline-grid; padding: 2px 8px; 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; font-size: 11.5px; }
.p-thi-het { padding: 3px 8px; border-radius: 8px; border: 1px solid var(--spk-vien-2); font-weight: 600; font-size: 11.5px; 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); }
.p-thi-ray { display: block; height: 4px; border-radius: 2px; background: var(--spk-vien); overflow: hidden; }
.p-thi-ray i { display: block; height: 100%; width: 33%; background: var(--spk-chinh); animation-name: thi-ray; }
@keyframes thi-ray { 0%, 68.9% { width: 33.3%; } 72%, 100% { width: 38.9%; } }
.p-vid--thi { animation-name: none; }
.p-vid--thi .p-vid-man img { max-width: 210px; }
.p-thi-cau { position: relative; display: grid; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--spk-mat-nen); border: 1px solid var(--spk-vien); min-height: 88px; }
.p-thi-cau-a, .p-thi-cau-b { grid-area: 1 / 1; font-size: 15px; line-height: 1.35; color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); }
.p-thi-cau-a { animation-name: thi-cau-a; }
.p-thi-cau-b { animation-name: thi-cau-b; }
@keyframes thi-cau-a { 0%, 20% { filter: blur(6px); opacity: .9; } 22.2%, 68.9% { filter: none; opacity: 1; } 70%, 100% { opacity: 0; filter: blur(6px); } }
@keyframes thi-cau-b { 0%, 68.9% { opacity: 0; filter: blur(6px); } 70%, 100% { opacity: .9; filter: blur(6px); } }
.p-nut-hien { grid-area: 2 / 1; animation-name: thi-hien; }
@keyframes thi-hien { 0%, 20% { opacity: 1; } 22.2%, 68.9% { opacity: 0; } 70%, 100% { opacity: 1; } }
.p-thi-ghi { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--spk-mat-nen); border: 1px solid var(--spk-vien); margin-top: auto; }
.p-thi-ghi .p-gio { margin-right: auto; }
.p-nut-xong { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 10px; 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); font-weight: 700; font-size: 13px; }
html.theme-skeuo .p-nut-xong { background: var(--spk-nut-nen); }
.p-nut-xong svg { width: 14px; height: 14px; }
.p-but--mo { right: 12px; top: 250px; animation-name: thi-but; }
.p-but--mo::before { left: 20px; top: -6px; border-width: 1px 0 0 1px; transform: rotate(45deg); }
@keyframes thi-but { 0%, 2% { opacity: 0; } 5%, 18% { opacity: 1; } 21%, 100% { opacity: 0; } }

/* ---------- 6. THẺ ĐỀ = 5 BƯỚC ---------- */
.spk-the-de { position: relative; padding: 30px 34px 26px; border-radius: 8px; background: var(--td-giay); color: var(--td-muc); --dm-text-primary: var(--td-muc); --dm-link: var(--td-muc); --dm-link-hover: var(--td-muc);
  border: 1px solid var(--td-vien-the); box-shadow: var(--td-bong); }
/* Thẻ đề = tờ giấy. Mực + giấy là TOKEN CỤC BỘ --td-* (và đè --spk-* bên trong thẻ) ⇒ bản sáng: giấy kem, bản tối: giấy
   than chì (phẳng tối) / gỗ óc chó (cổ điển tối). Vạch đỏ dưới tiêu đề + dòng kết nét đứt giữ ở mọi nền để vẫn nhận ra thẻ đề. */
.spk-the-de {
  --td-giay: #FFFEF9; --td-vien-the: #E7DFC9;
  --td-bong: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 26px 50px -30px rgba(40, 30, 10, .45), 0 2px 6px rgba(40, 30, 10, .08);
  --td-muc: #1F2430; --td-muc-2: #454B57; --td-muc-3: #5E6470; --td-muc-4: #8B8471;
  --td-vien: #E3DAC3; --td-ke: #EEE7D6; --td-ke-dut: #D9CFB6; --td-ray: #EDE6D4; --td-ray-2: #E0D6BE; --td-vong: #B9AF97;
  --td-mat: #FFFFFF; --td-mat-2: #F4EEDF; --td-nen-them: #FAF6EC; --td-vien-them: #EAE1CB; --td-nut2-vien: #CFC5AC;
  --td-navy: #1F3A5A; --td-navy-2: #29496E; --td-navy-chu: #FFFFFF;
  --td-do-chu: #A3261C; --td-xanh-chu: #17603D; --td-vang-chu: #7A5410; --td-cam-chu: #8A5A00;
  --td-vang-nhat: #FBF1DC; --td-sang-nen: #FFF1D6; --td-sang-vien: #EACB84; --td-sua-nen: #FBF7EE; --td-sua-vien: #EEE5CF; --td-viet-nen: #EEF3EF; --td-viet-vien: #D5E3D9;
  --spk-chu: var(--td-muc); --spk-chu-2: var(--td-muc-2); --spk-chu-3: var(--td-muc-3); --spk-vien: var(--td-vien); --spk-vien-2: var(--td-nut2-vien); --spk-mat-2: var(--td-mat-2); --spk-mat-nen: var(--td-mat); --spk-mat: var(--td-mat);
  --spk-chinh: var(--td-navy); --spk-chinh-txt: #1F3A5A; --spk-chinh-nhat: #E4EBF4; --spk-dat: #1C7F50; --spk-dat-nhat: #E3F3EA; --spk-vang-chu: var(--td-vang-chu); --spk-vang-nhat: var(--td-vang-nhat);
  --spk-nut2-nen: var(--td-mat); --spk-nut2-chu: var(--td-muc); --spk-nut2-vien: var(--td-nut2-vien); --spk-bong-the: 0 1px 2px rgba(40, 30, 10, .06); }
html.theme-skeuo .spk-the-de { --td-giay: linear-gradient(180deg, #FFFEFB 0%, #F8F2E2 100%); --td-vien-the: #DCCAA3; }
/* phẳng tối: giấy than chì, mực kem */
html.ae-dark-mode .spk-the-de {
  --td-giay: #1F2430; --td-vien-the: #3A4050;
  --td-bong: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 26px 50px -30px rgba(0, 0, 0, .85), 0 2px 6px rgba(0, 0, 0, .3);
  --td-muc: #ECE7DA; --td-muc-2: #C9C3B6; --td-muc-3: #A9A396; --td-muc-4: #8E887C;
  --td-vien: #3A4050; --td-ke: #30364A; --td-ke-dut: #4A5163; --td-ray: #343A48; --td-ray-2: #3E4555; --td-vong: #6B7285;
  --td-mat: #262B36; --td-mat-2: #2C3240; --td-nen-them: #232834; --td-vien-them: #363C4B; --td-nut2-vien: #4A5163;
  --td-navy: #E1B868; --td-navy-2: #EBC67E; --td-navy-chu: #1A1F27;
  --td-do-chu: #F4A094; --td-xanh-chu: #7FD3A5; --td-vang-chu: #EAC67E; --td-cam-chu: #EDB45C;
  --td-vang-nhat: rgba(225, 184, 104, .14); --td-sang-nen: rgba(225, 184, 104, .16); --td-sang-vien: rgba(225, 184, 104, .45);
  --td-sua-nen: #282D39; --td-sua-vien: #3A4050; --td-viet-nen: rgba(92, 203, 147, .08); --td-viet-vien: rgba(92, 203, 147, .26);
  --spk-chinh-txt: #EAC67E; --spk-chinh-nhat: rgba(225, 184, 104, .14); --spk-dat: #5CCB93; --spk-dat-nhat: rgba(92, 203, 147, .13); }
/* cổ điển tối: gỗ óc chó, mực kem, nút đồng thau */
html.theme-skeuo.ae-dark-mode .spk-the-de {
  --td-giay: linear-gradient(180deg, #2F2820 0%, #241E16 100%); --td-vien-the: rgba(255, 214, 150, .22);
  --td-bong: inset 0 1px 0 rgba(255, 236, 196, .08), 0 26px 50px -28px rgba(0, 0, 0, .85), 0 2px 6px rgba(0, 0, 0, .35);
  --td-muc: #F1E6D2; --td-muc-2: #D4C3A4; --td-muc-3: #BCAA8B; --td-muc-4: #9C8B6E;
  --td-vien: rgba(255, 214, 150, .18); --td-ke: rgba(255, 214, 150, .12); --td-ke-dut: rgba(255, 214, 150, .32); --td-ray: rgba(255, 214, 150, .12); --td-ray-2: rgba(255, 214, 150, .2); --td-vong: rgba(255, 214, 150, .45);
  --td-mat: #2A231B; --td-mat-2: #221C15; --td-nen-them: rgba(0, 0, 0, .16); --td-vien-them: rgba(255, 214, 150, .14); --td-nut2-vien: rgba(255, 214, 150, .26);
  --td-navy: #D8A948; --td-navy-2: #E2B85A; --td-navy-chu: #2A1D0C;
  --td-do-chu: #F28B78; --td-xanh-chu: #7BD3A1; --td-vang-chu: #E8C27A; --td-cam-chu: #EFC06A;
  --td-vang-nhat: rgba(216, 169, 72, .16); --td-sang-nen: rgba(216, 169, 72, .18); --td-sang-vien: rgba(216, 169, 72, .45);
  --td-sua-nen: rgba(0, 0, 0, .14); --td-sua-vien: rgba(255, 214, 150, .16); --td-viet-nen: rgba(123, 211, 161, .07); --td-viet-vien: rgba(123, 211, 161, .24);
  --spk-chinh-txt: #E8C27A; --spk-chinh-nhat: rgba(216, 169, 72, .15); --spk-dat: #7BD3A1; --spk-dat-nhat: rgba(123, 211, 161, .13); }
/* cổ điển tối: nút chính trong thẻ = đồng thau gel như cả app (bản sáng giữ navy trên giấy) */
html.theme-skeuo.ae-dark-mode .spk-the-de .spk-nut--chinh { 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); text-shadow: 0 1px 0 rgba(255, 240, 200, .5); }
html.theme-skeuo.ae-dark-mode .spk-the-de .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); }
html.ae-dark-mode .spk-the-de .spk-cham-so { box-shadow: 0 0 0 3px var(--td-mat), 0 2px 6px rgba(0, 0, 0, .5); }
html.ae-dark-mode .spk-the-de .spk-mau-phieu { box-shadow: 0 10px 24px -18px rgba(0, 0, 0, .8); }
.spk-soi--the { position: absolute; right: 22px; top: -86px; width: 112px; height: 112px; }
.spk-soi--the .soi { --soi-co: 112px; }
.spk-the-de-dau { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 2px solid #E36A5F; }
.spk-the-de-dau h2 { margin: 0; font: 800 30px/1.1 var(--spk-font-tieude); color: var(--td-muc); --dm-text-primary: var(--td-muc); --dm-link: var(--td-muc); --dm-link-hover: var(--td-muc); }
html.theme-skeuo .spk-the-de-dau h2 { font-weight: 700; font-size: 26px; }
.spk-the-de-tien { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--td-muc-3); --dm-text-primary: var(--td-muc-3); --dm-link: var(--td-muc-3); --dm-link-hover: var(--td-muc-3); }
.spk-the-de-tien .spk-so { font-size: 22px; color: var(--td-muc); --dm-text-primary: var(--td-muc); --dm-link: var(--td-muc); --dm-link-hover: var(--td-muc); }
.spk-the-de-thanh { display: block; width: 120px; height: 6px; border-radius: 3px; background: var(--td-ray); overflow: hidden; }
.spk-the-de-thanh em { display: block; height: 100%; background: var(--spk-vang); border-radius: inherit; transition: width .4s; }
/* thẻ giãn hết bề rộng nội dung ⇒ đoạn chữ dài trong thẻ giữ ≤ 72 ký tự/dòng cho dễ đọc */
.spk-the-de-phu, .spk-the-de-ket, .spk-buoc-them > .spk-them-doan, .spk-buoc-them > .spk-them-chot { max-width: 72ch; }
.spk-the-de-phu { margin-top: 10px !important; font-size: 14px; color: var(--td-muc-3); --dm-text-primary: var(--td-muc-3); --dm-link: var(--td-muc-3); --dm-link-hover: var(--td-muc-3); }
.spk-the-de-nen { margin-top: 18px !important; font-weight: 700; font-size: 15px; color: var(--td-muc); --dm-text-primary: var(--td-muc); --dm-link: var(--td-muc); --dm-link-hover: var(--td-muc); }
.spk-the-de-ket { margin-top: 18px !important; padding-top: 14px; border-top: 1px dashed var(--td-ke-dut); font-size: 15px; font-style: italic; color: var(--td-muc-2); --dm-text-primary: var(--td-muc-2); --dm-link: var(--td-muc-2); --dm-link-hover: var(--td-muc-2); }
.spk-buoc { list-style: none; margin: 6px 0 0; padding: 0; }
.spk-buoc-muc { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--td-ke); }
.spk-buoc-muc:last-child { border-bottom: 0; }
.spk-buoc-o { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--td-vong); display: grid; place-items: center; margin-top: 2px; color: #fff; --dm-text-primary: #fff; --dm-link: #fff; --dm-link-hover: #fff; }
.spk-buoc-so { font: 800 17px/1 var(--spk-font-so); color: var(--td-muc-3); --dm-text-primary: var(--td-muc-3); --dm-link: var(--td-muc-3); --dm-link-hover: var(--td-muc-3); }
.spk-buoc-o svg { display: none; width: 18px; height: 18px; }
.spk-buoc-muc.is-xong .spk-buoc-o { background: var(--spk-vang); border-color: var(--spk-vang); color: #3A2A08; --dm-text-primary: #3A2A08; --dm-link: #3A2A08; --dm-link-hover: #3A2A08; }
.spk-buoc-muc.is-xong .spk-buoc-o svg { display: block; }
.spk-buoc-muc.is-xong .spk-buoc-so { display: none; }
.spk-buoc-muc.is-tiep .spk-buoc-o { border-color: var(--td-navy); }
.spk-buoc-muc.is-tiep .spk-buoc-so { color: var(--td-navy); --dm-text-primary: var(--td-navy); --dm-link: var(--td-navy); --dm-link-hover: var(--td-navy); }
.spk-buoc-ten { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font: 700 18px/1.3 var(--spk-font); color: var(--td-muc); --dm-text-primary: var(--td-muc); --dm-link: var(--td-muc); --dm-link-hover: var(--td-muc); }
.spk-buoc-nhan-xong { display: none; }
.spk-buoc-muc.is-xong .spk-buoc-nhan-xong { display: inline-flex; }
.spk-buoc-mo { margin-top: 4px !important; font-size: 15px; line-height: 1.55; color: var(--td-muc-2); --dm-text-primary: var(--td-muc-2); --dm-link: var(--td-muc-2); --dm-link-hover: var(--td-muc-2); max-width: 60ch; }
.spk-buoc-meta { display: flex; align-items: center; gap: 6px; margin-top: 6px !important; font-size: 13px; color: var(--td-muc-3); --dm-text-primary: var(--td-muc-3); --dm-link: var(--td-muc-3); --dm-link-hover: var(--td-muc-3); }
.spk-buoc-meta > svg { width: 15px; height: 15px; flex: none; }
.spk-buoc-meta > span { min-width: 0; }
.spk-buoc-nut { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.spk-buoc-mo-nut svg { transition: transform .2s; }
.spk-buoc-mo-nut[aria-expanded="true"] svg { transform: rotate(180deg); }
/* nút trong thẻ đề: thẻ luôn là giấy ⇒ nút chính navy ở mọi nền (không gel/đồng thau lạc chất) */
.spk-the-de .spk-nut--chinh { background: var(--td-navy); border-color: var(--td-navy); color: var(--td-navy-chu); --dm-text-primary: var(--td-navy-chu); --dm-link: var(--td-navy-chu); --dm-link-hover: var(--td-navy-chu); box-shadow: 0 1px 2px rgba(24, 34, 56, .22); text-shadow: none; }
.spk-the-de .spk-nut--chinh:hover { background: var(--td-navy-2); color: var(--td-navy-chu); --dm-text-primary: var(--td-navy-chu); --dm-link: var(--td-navy-chu); --dm-link-hover: var(--td-navy-chu); }
.spk-the-de .spk-nut--noi { background: #D0392C; color: #fff; --dm-text-primary: #fff; --dm-link: #fff; --dm-link-hover: #fff; text-shadow: none; }
.spk-the-de .spk-nut--noi:hover { background: #B92F24; color: #fff; --dm-text-primary: #fff; --dm-link: #fff; --dm-link-hover: #fff; }
.spk-the-de .spk-nut--phu { background: var(--td-mat); color: var(--td-muc); --dm-text-primary: var(--td-muc); --dm-link: var(--td-muc); --dm-link-hover: var(--td-muc); border-color: var(--td-nut2-vien); box-shadow: none; }
.spk-buoc-them { margin-top: 14px; padding: 16px; border-radius: 12px; background: var(--td-nen-them); border: 1px solid var(--td-vien-them); }
.spk-js .spk-buoc-them:not(.is-mo) { display: none; }
.spk-them-tieude { margin: 0 0 10px; font: 700 16px/1.3 var(--spk-font); color: var(--td-muc); --dm-text-primary: var(--td-muc); --dm-link: var(--td-muc); --dm-link-hover: var(--td-muc); }
.spk-them-doan { font-size: 14.5px; line-height: 1.6; color: var(--td-muc-2); --dm-text-primary: var(--td-muc-2); --dm-link: var(--td-muc-2); --dm-link-hover: var(--td-muc-2); }
.spk-them-doan + .spk-them-doan { margin-top: 8px !important; }
.spk-them-chot { margin-top: 12px !important; font-size: 14px; line-height: 1.55; color: var(--td-muc); --dm-text-primary: var(--td-muc); --dm-link: var(--td-muc); --dm-link-hover: var(--td-muc); }
.spk-them-chot--nhe { color: var(--td-muc-3); --dm-text-primary: var(--td-muc-3); --dm-link: var(--td-muc-3); --dm-link-hover: var(--td-muc-3); font-size: 13.5px; }
.spk-hai-cot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.spk-hai-cot--canh { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
.spk-ds-dau, .spk-ds-so { margin: 0; padding: 0 0 0 20px; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; line-height: 1.55; color: var(--td-muc-2); --dm-text-primary: var(--td-muc-2); --dm-link: var(--td-muc-2); --dm-link-hover: var(--td-muc-2); }
.spk-ds-dau { list-style: disc; }
.spk-ds-so { list-style: decimal; }
.spk-ds-dau li::marker, .spk-ds-so li::marker { color: var(--td-muc-4); --dm-text-primary: var(--td-muc-4); --dm-link: var(--td-muc-4); --dm-link-hover: var(--td-muc-4); font-weight: 700; }
.spk-ds-dau--nho { margin-top: 12px; font-size: 13.5px; }
.spk-do-dai { display: grid; border: 1px solid var(--td-vien); border-radius: 10px; overflow: hidden; background: var(--td-mat); }
.spk-do-dai-hang { display: grid; grid-template-columns: 76px minmax(0, 1fr) minmax(0, 1.3fr); gap: 12px; padding: 10px 12px; border-top: 1px solid var(--td-ke); font-size: 14px; line-height: 1.45; color: var(--td-muc-2); --dm-text-primary: var(--td-muc-2); --dm-link: var(--td-muc-2); --dm-link-hover: var(--td-muc-2); }
.spk-do-dai-hang:first-child { border-top: 0; }
.spk-do-dai-hang--dau { background: var(--td-mat-2); font-size: 12.5px; font-weight: 600; color: var(--td-muc-3); --dm-text-primary: var(--td-muc-3); --dm-link: var(--td-muc-3); --dm-link-hover: var(--td-muc-3); }
.spk-do-dai-hang b { color: var(--td-muc); --dm-text-primary: var(--td-muc); --dm-link: var(--td-muc); --dm-link-hover: var(--td-muc); }
.spk-canh-cho:empty { display: none; }

/* ô thử micro */
.spk-thu-mic { padding: 14px; border-radius: 12px; background: var(--td-mat); border: 1px solid var(--td-vien); }
.spk-thu-mic-hang { display: flex; align-items: center; gap: 12px; }
.spk-thu-mic-nut { flex: none; width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; background: #D0392C; color: #fff; --dm-text-primary: #fff; --dm-link: #fff; --dm-link-hover: #fff;
  box-shadow: 0 0 0 5px rgba(208, 57, 44, .14), 0 8px 16px -8px rgba(208, 57, 44, .8); }
.spk-thu-mic-nut svg { width: 24px; height: 24px; }
.spk-thu-mic-nut:disabled { opacity: .6; cursor: wait; }
.spk-thu-mic.is-nghe .spk-thu-mic-nut { animation: spk-mic-nhip 1s ease-in-out infinite; }
@keyframes spk-mic-nhip { 50% { box-shadow: 0 0 0 10px rgba(208, 57, 44, .12), 0 8px 16px -8px rgba(208, 57, 44, .8); } }
.spk-thu-mic-muc { flex: 1; display: flex; align-items: center; gap: 3px; height: 40px; min-width: 0; }
.spk-thu-mic-muc i { flex: 1; height: 12%; border-radius: 2px; background: var(--td-ray-2); transition: height .08s linear; }
.spk-thu-mic.is-nghe .spk-thu-mic-muc i { background: #D0392C; }
.spk-thu-mic-chu { margin-top: 10px !important; font-size: 14px; line-height: 1.5; color: var(--td-muc); --dm-text-primary: var(--td-muc); --dm-link: var(--td-muc); --dm-link-hover: var(--td-muc); font-weight: 600; }
.spk-thu-mic[data-kq="on"] .spk-thu-mic-chu { color: var(--td-xanh-chu); --dm-text-primary: var(--td-xanh-chu); --dm-link: var(--td-xanh-chu); --dm-link-hover: var(--td-xanh-chu); }
.spk-thu-mic[data-kq="chan"] .spk-thu-mic-chu, .spk-thu-mic[data-kq="khong_co"] .spk-thu-mic-chu, .spk-thu-mic[data-kq="trong_app"] .spk-thu-mic-chu { color: var(--td-do-chu); --dm-text-primary: var(--td-do-chu); --dm-link: var(--td-do-chu); --dm-link-hover: var(--td-do-chu); }
.spk-thu-mic[data-kq="nho"] .spk-thu-mic-chu { color: var(--td-cam-chu); --dm-text-primary: var(--td-cam-chu); --dm-link: var(--td-cam-chu); --dm-link-hover: var(--td-cam-chu); }
.spk-thu-mic-nghe { width: 100%; margin-top: 10px; height: 40px; }
.spk-thu-mic-ghi { margin-top: 8px !important; font-size: 12.5px; color: var(--td-muc-3); --dm-text-primary: var(--td-muc-3); --dm-link: var(--td-muc-3); --dm-link-hover: var(--td-muc-3); }

/* bảng điểm mẫu + chấm số */
.spk-mau { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.spk-mau-phieu { position: relative; padding: 16px; border-radius: 14px; background: var(--td-mat); border: 1px solid var(--td-vien); box-shadow: 0 10px 24px -18px rgba(40, 30, 10, .5); }
.spk-mau-cau { font-size: 13.5px; line-height: 1.45; color: var(--td-muc-2); --dm-text-primary: var(--td-muc-2); --dm-link: var(--td-muc-2); --dm-link-hover: var(--td-muc-2); margin-bottom: 12px !important; }
.spk-mau-cau q { font-weight: 600; color: var(--td-muc); --dm-text-primary: var(--td-muc); --dm-link: var(--td-muc); --dm-link-hover: var(--td-muc); }
.spk-mau-tren { display: flex; gap: 16px; align-items: center; }
.spk-mau-vong { position: relative; flex: none; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; align-content: center;
  background: conic-gradient(#E1B868 calc(var(--b) * 360deg), var(--td-ray) 0); }
.spk-mau-vong::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: var(--td-mat); }
.spk-mau-vong b, .spk-mau-vong small { position: relative; }
.spk-mau-vong b { font-size: 30px; line-height: 1; font-weight: 800; color: var(--td-muc); --dm-text-primary: var(--td-muc); --dm-link: var(--td-muc); --dm-link-hover: var(--td-muc); }
.spk-mau-vong small { font-size: 11px; color: var(--td-muc-3); --dm-text-primary: var(--td-muc-3); --dm-link: var(--td-muc-3); --dm-link-hover: var(--td-muc-3); }
.spk-mau-tc { flex: 1; display: grid; grid-template-columns: fit-content(62%) minmax(36px, 1fr) auto; align-items: center; column-gap: 8px; row-gap: 8px; min-width: 0; }
/* một lưới cho cả 4 hàng (hàng = display:contents): nhãn tiếng Việt không bẻ dòng, thanh thẳng cột — y bảng điểm thật */
.spk-mau-tc-hang { display: contents !important; }
.spk-mau-tc-hang > span { white-space: nowrap; }
.spk-mau-tc-hang > span small { white-space: normal; }
.spk-mau-tc-hang { font-size: 13px; color: var(--td-muc-2); --dm-text-primary: var(--td-muc-2); --dm-link: var(--td-muc-2); --dm-link-hover: var(--td-muc-2); }
.spk-mau-tc-hang small { display: block; font-size: 11px; color: var(--td-muc-3); --dm-text-primary: var(--td-muc-3); --dm-link: var(--td-muc-3); --dm-link-hover: var(--td-muc-3); }
.spk-mau-tc-hang i { height: 6px; border-radius: 3px; background: var(--td-ray); overflow: hidden; }
.spk-mau-tc-hang em { display: block; height: 100%; width: calc(var(--d) * 100%); background: var(--td-navy); border-radius: inherit; }
.spk-mau-tc-hang b { font-size: 16px; text-align: right; color: var(--td-muc); --dm-text-primary: var(--td-muc); --dm-link: var(--td-muc); --dm-link-hover: var(--td-muc); }
.spk-mau-tc-hang.is-thap em { background: #D0392C; }
.spk-mau-tc-hang.is-thap > span, .spk-mau-tc-hang.is-thap b { color: var(--td-do-chu); --dm-text-primary: var(--td-do-chu); --dm-link: var(--td-do-chu); --dm-link-hover: var(--td-do-chu); font-weight: 700; }
.spk-mau-nghe { position: relative; display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 8px 10px; border-radius: 10px; background: var(--td-mat-2); font-size: 13px; color: var(--td-muc-2); --dm-text-primary: var(--td-muc-2); --dm-link: var(--td-muc-2); --dm-link-hover: var(--td-muc-2); }
.spk-mau-nghe-nut { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--td-navy); color: var(--td-navy-chu); --dm-text-primary: var(--td-navy-chu); --dm-link: var(--td-navy-chu); --dm-link-hover: var(--td-navy-chu); }
.spk-mau-nghe-nut svg { width: 13px; height: 13px; }
.spk-mau-nghe i { flex: 1; height: 4px; border-radius: 2px; background: var(--td-ray-2); overflow: hidden; }
.spk-mau-nghe em { display: block; width: 36%; height: 100%; background: var(--td-navy); }
.spk-mau-loi { margin-top: 12px !important; font-size: 14.5px; line-height: 1.7; color: var(--td-muc); --dm-text-primary: var(--td-muc); --dm-link: var(--td-muc); --dm-link-hover: var(--td-muc); }
/* chữ tô màu phát âm: ĐÚNG thang màu của bảng điểm thật (speaking.css «TRANSCRIPT TÔ MÀU», 4 nền) — không gạch sóng */
.spk-hd { --pw-85: #16A34A; --pw-70: #0284C7; --pw-70-vach: rgba(2, 132, 199, .55); --pw-60: #B45309; --pw-60-nen: rgba(217, 119, 6, .13); --pw-0: #B91C1C; --pw-0-nen: rgba(220, 38, 38, .12); --pw-0-vach: rgba(220, 38, 38, .6); --pw-dem: #94A3B8; }
html.ae-dark-mode .spk-hd { --pw-85: #4ADE80; --pw-70: #7DD3FC; --pw-70-vach: rgba(125, 211, 252, .55); --pw-60: #FBBF24; --pw-60-nen: rgba(217, 119, 6, .2); --pw-0: #FCA5A5; --pw-0-nen: rgba(220, 38, 38, .22); --pw-0-vach: rgba(252, 165, 165, .65); --pw-dem: #7C90AB; }
html.theme-skeuo .spk-hd { --pw-85: #1B7A3E; --pw-70: #0B4B7A; --pw-70-vach: rgba(11, 75, 122, .5); --pw-60: #8A5A12; --pw-60-nen: rgba(217, 174, 82, .28); --pw-0: #9B2C1E; --pw-0-nen: rgba(200, 70, 50, .16); --pw-0-vach: rgba(155, 44, 30, .55); --pw-dem: #8A7A5C; }
html.theme-skeuo.ae-dark-mode .spk-hd { --pw-85: #B4D48F; --pw-70: #9CC9E8; --pw-70-vach: rgba(156, 201, 232, .5); --pw-60: #F4D98A; --pw-60-nen: rgba(217, 174, 82, .18); --pw-0: #FFA294; --pw-0-nen: rgba(220, 38, 38, .18); --pw-0-vach: rgba(255, 162, 148, .55); --pw-dem: #A8987A; }
.spk-w { border-radius: 3px; }
.spk-w--s85 { color: var(--pw-85); --dm-text-primary: var(--pw-85); --dm-link: var(--pw-85); --dm-link-hover: var(--pw-85); font-weight: 600; }
.spk-w--s70 { color: var(--pw-70); --dm-text-primary: var(--pw-70); --dm-link: var(--pw-70); --dm-link-hover: var(--pw-70); border-bottom: 1px solid var(--pw-70-vach); }
.spk-w--s60 { color: var(--pw-60); --dm-text-primary: var(--pw-60); --dm-link: var(--pw-60); --dm-link-hover: var(--pw-60); background: var(--pw-60-nen); padding: 0 2px; }
.spk-w--s0 { color: var(--pw-0); --dm-text-primary: var(--pw-0); --dm-link: var(--pw-0); --dm-link-hover: var(--pw-0); background: var(--pw-0-nen); border-bottom: 1.5px solid var(--pw-0-vach); font-weight: 700; padding: 0 2px; }
.spk-w--filler { color: var(--pw-dem); --dm-text-primary: var(--pw-dem); --dm-link: var(--pw-dem); --dm-link-hover: var(--pw-dem); font-style: italic; border-bottom: 1px dotted var(--pw-dem); }
.spk-mau-chu-giai { margin-top: 10px; }
.spk-mau-chu-giai .sp-prleg-scale { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.spk-mau-chu-giai .sp-prleg-item { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: var(--td-muc-2); --dm-text-primary: var(--td-muc-2); --dm-link: var(--td-muc-2); --dm-link-hover: var(--td-muc-2); }
.spk-mau-muc { white-space: nowrap; }
.spk-them-doan .sp-prleg-sw, .spk-mau-giai .sp-prleg-sw { display: inline-block; width: 13px; height: 4px; border-radius: 2px; margin: 0 5px 0 2px; vertical-align: .22em; }
.spk-mau-sua { position: relative; display: grid; gap: 6px; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--td-sua-nen); border: 1px solid var(--td-sua-vien); font-size: 13.5px; color: var(--td-muc); --dm-text-primary: var(--td-muc); --dm-link: var(--td-muc); --dm-link-hover: var(--td-muc); }
.spk-mau-sua small { display: block; font-size: 12.5px; color: var(--td-muc-3); --dm-text-primary: var(--td-muc-3); --dm-link: var(--td-muc-3); --dm-link-hover: var(--td-muc-3); }
.spk-mau-sua s { color: var(--td-do-chu); --dm-text-primary: var(--td-do-chu); --dm-link: var(--td-do-chu); --dm-link-hover: var(--td-do-chu); text-decoration-color: var(--td-do-chu); }
.spk-mau-sua-nhan { display: block; font-size: 12px; font-weight: 700; color: var(--td-muc-3); --dm-text-primary: var(--td-muc-3); --dm-link: var(--td-muc-3); --dm-link-hover: var(--td-muc-3); margin-bottom: 2px; }
.spk-mau-viet { position: relative; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--td-viet-nen); border: 1px solid var(--td-viet-vien); }
.spk-mau-viet p { font-size: 13.5px; line-height: 1.6; color: var(--td-muc); --dm-text-primary: var(--td-muc); --dm-link: var(--td-muc); --dm-link-hover: var(--td-muc); }
.spk-mau-cuoi { position: relative; display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.spk-nut--gia { pointer-events: none; min-height: 38px; font-size: 13.5px; padding: 0 12px; }
.spk-mau-ghi { margin-top: 10px !important; font-size: 12px; color: var(--td-muc-3); --dm-text-primary: var(--td-muc-3); --dm-link: var(--td-muc-3); --dm-link-hover: var(--td-muc-3); text-align: right; }
.spk-cham-so { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #D0392C; color: #fff; --dm-text-primary: #fff; --dm-link: #fff; --dm-link-hover: #fff; font: 700 13px/1 var(--spk-font);
  box-shadow: 0 0 0 3px var(--td-mat), 0 2px 6px rgba(0, 0, 0, .25); flex: none; }
.spk-mau-phieu .spk-cham-so { position: absolute; transition: transform .15s; }
.spk-mau-vong .spk-cham-so { right: -6px; top: -4px; }
.spk-mau-nghe .spk-cham-so { right: -10px; top: -10px; }
.spk-mau-sua .spk-cham-so { right: -10px; top: -10px; }
.spk-mau-viet .spk-cham-so { right: -10px; top: -10px; }
.spk-mau-cuoi .spk-cham-so { left: -4px; top: 6px; }
.spk-mau-giai { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.spk-mau-giai li { display: flex; gap: 12px; padding: 10px 10px; border-radius: 10px; cursor: default; outline: none; min-height: 44px; }
.spk-mau-giai li > div > b { display: block; font-size: 14.5px; color: var(--td-muc); --dm-text-primary: var(--td-muc); --dm-link: var(--td-muc); --dm-link-hover: var(--td-muc); }
.spk-mau-giai li p { font-size: 13.5px; line-height: 1.55; color: var(--td-muc-2); --dm-text-primary: var(--td-muc-2); --dm-link: var(--td-muc-2); --dm-link-hover: var(--td-muc-2); }
.spk-mau-giai li.is-sang, .spk-mau-giai li:focus-visible { background: var(--td-sang-nen); box-shadow: inset 0 0 0 1px var(--td-sang-vien); }
.spk-mau.is-soi .spk-mau-phieu .spk-cham-so:not(.is-sang) { transform: scale(.85); opacity: .55; }
.spk-mau-phieu .spk-cham-so.is-sang { transform: scale(1.2); }

/* bảng giá ⚔️ */
.spk-gia { margin: 14px 0 0; display: grid; border: 1px solid var(--td-vien); border-radius: 10px; overflow: hidden; background: var(--td-mat); }
.spk-gia > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-top: 1px solid var(--td-ke); font-size: 14px; color: var(--td-muc-2); --dm-text-primary: var(--td-muc-2); --dm-link: var(--td-muc-2); --dm-link-hover: var(--td-muc-2); }
.spk-gia > div:first-child { border-top: 0; }
.spk-gia dt { min-width: 0; }
.spk-gia dd { margin: 0; font-weight: 700; color: var(--td-muc); --dm-text-primary: var(--td-muc); --dm-link: var(--td-muc); --dm-link-hover: var(--td-muc); text-align: right; white-space: nowrap; }
.spk-gia .is-tong { background: var(--td-vang-nhat); }
.spk-gia .is-tong dd { color: var(--td-vang-chu); --dm-text-primary: var(--td-vang-chu); --dm-link: var(--td-vang-chu); --dm-link-hover: var(--td-vang-chu); }

/* ---------- 7. CÁC PHÒNG KHÁC ---------- */
.spk-phong { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.spk-phong > li:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* số thẻ lẻ ⇒ thẻ cuối trải hết hàng, không lẻ một ô */
.spk-phong-hang { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 12px 14px; border-radius: var(--spk-r-the); background: var(--spk-mat-nen);
  border: 1px solid var(--spk-vien); text-decoration: none; color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); transition: border-color .15s, box-shadow .15s; }
.spk-phong-hang:hover { border-color: var(--spk-vien-2); box-shadow: var(--spk-bong-the); text-decoration: none; color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); }
.spk-phong-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; 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); }
.spk-phong-ic svg { width: 20px; height: 20px; }
.spk-phong-chu { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.spk-phong-chu b { font-size: 15.5px; color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); }
.spk-phong-chu span { font-size: 13.5px; line-height: 1.45; 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-phong-hang > svg { width: 18px; height: 18px; flex: 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); }

/* ---------- 8. GẬP MỞ ---------- */
/* Mỗi mục gập mở là MỘT Ô riêng (anh 30/09: chỉ kẻ ngang, không viền ô ⇒ khó tách từng câu). 3 ô lớn (.spk-gap) = thẻ có viền;
   câu hỏi con (.spk-hoi) = ô nhỏ có viền + nền lõm, cách nhau 8 px. Đang MỞ: vạch nhấn trái + nền đầu ô nhạt màu chính + tiêu đề
   màu chính ⇒ nhìn là biết ô nào đang mở. Mũi tên nằm trong vòng tròn nhỏ (lớp .spk-mui — luật mũi tên KHÔNG ăn icon khiên
   trong chữ). Màu theo token --spk-* ⇒ tự đúng ở 4 nền (phẳng / cổ điển × sáng / tối). */
.spk-hd-gap { display: grid; gap: 12px; }
/* neo #luot-cham / #su-co / #hoi-dap / #buoc (ví, «Cách có thêm lượt»…): chừa chỗ cho thanh trên cố định 56 px ở điện thoại / máy tính bảng */
.spk-hd [id] { scroll-margin-top: 24px; }
@media (max-width: 1024px) { .spk-hd [id] { scroll-margin-top: 72px; } }
.spk-gap { border-radius: var(--spk-r-the); background: var(--spk-mat-nen); border: 1px solid var(--spk-vien-2); box-shadow: var(--spk-bong-the); transition: border-color .15s; }
.spk-gap > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 60px; padding: 8px 14px 8px 20px; cursor: pointer;
  font: 700 17px/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); border-radius: calc(var(--spk-r-the) - 1px);
  transition: background-color .15s, box-shadow .15s, color .15s; }
.spk-gap > summary::-webkit-details-marker, .spk-hoi > summary::-webkit-details-marker { display: none; }
.spk-gap-chu, .spk-hoi-chu { flex: 1 1 auto; min-width: 0; }
/* mũi tên: vòng tròn nhỏ có viền, cân giữa ô; mở ⇒ xoay 180° */
.spk-gap > summary .spk-mui, .spk-hoi > summary .spk-mui { flex: none; box-sizing: border-box; width: 32px; height: 32px; padding: 6px; border-radius: 50%; overflow: visible;
  background: var(--spk-mat); border: 1px solid var(--spk-vien); 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); transition: transform .2s, background-color .15s, border-color .15s, color .15s; }
.spk-hoi > summary .spk-mui { width: 28px; height: 28px; padding: 5px; }
.spk-gap > summary:hover .spk-mui, .spk-hoi > summary:hover .spk-mui { 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); }
.spk-gap[open] > summary .spk-mui, .spk-hoi[open] > summary .spk-mui { transform: rotate(180deg); background: var(--spk-chinh); border-color: 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); }
/* ô lớn: hover nền lõm nhẹ; mở ⇒ viền đậm hơn + đầu ô nhạt màu chính + vạch nhấn trái + gạch ngăn đầu/thân */
.spk-gap > summary:hover { background: var(--spk-mat-2); }
.spk-gap[open] { border-color: var(--spk-vien-2); border-color: color-mix(in srgb, var(--spk-chinh) 42%, var(--spk-vien-2)); }
.spk-gap[open] > summary, .spk-gap[open] > summary: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);
  box-shadow: inset 4px 0 0 var(--spk-chinh), 0 1px 0 var(--spk-vien); border-radius: calc(var(--spk-r-the) - 1px) calc(var(--spk-r-the) - 1px) 0 0; }
.spk-gap > summary:focus-visible, .spk-hoi > summary:focus-visible { outline: 3px solid var(--spk-focus); outline-offset: -3px; }
.spk-gap-than { padding: 18px 20px 20px; }
.spk-gap .spk-them-doan, .spk-gap .spk-them-chot { 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-gap .spk-them-chot { color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); }
.spk-gap .spk-them-tieude { color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); margin-top: 18px; }
.spk-gap .spk-gia { border-color: var(--spk-vien); background: var(--spk-mat); }
.spk-gap .spk-gia > div { border-color: 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); }
.spk-gap .spk-gia dd { color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); }
.spk-gap .spk-gia .is-mien dd { color: var(--spk-dat); --dm-text-primary: var(--spk-dat); --dm-link: var(--spk-dat); --dm-link-hover: var(--spk-dat); }
.spk-gap .spk-ds-so, .spk-gap .spk-ds-dau { 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-chuoi { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.spk-chuoi li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px; border-radius: 10px; background: var(--spk-vang-nhat); font-size: 11.5px; 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); text-align: center; }
.spk-chuoi li b { font: 800 16px/1 var(--spk-font-so); 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-chuoi li em { display: block; font-style: normal; font-size: 13px; margin-top: 2px; 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-chuoi li.is-ruong { background: var(--spk-vang); color: #3A2A08; --dm-text-primary: #3A2A08; --dm-link: #3A2A08; --dm-link-hover: #3A2A08; }
.spk-chuoi li.is-ruong b, .spk-chuoi li.is-ruong em { color: #3A2A08; --dm-text-primary: #3A2A08; --dm-link: #3A2A08; --dm-link-hover: #3A2A08; }
.spk-tab { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: var(--spk-mat-2); margin-bottom: 12px; }
.spk-tab button { min-height: 44px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; cursor: pointer; font: 600 14px/1.2 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-tab button[aria-selected="true"] { 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); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
html.theme-skeuo .spk-tab button[aria-selected="true"] { 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); }
.spk-js .spk-tab-than[data-an] { display: none; }
.spk-hoi-ds { display: grid; gap: 8px; }
/* câu hỏi con = ô nhỏ độc lập: viền đủ 4 cạnh + nền lõm; mở ⇒ nền mặt thẻ, viền màu chính nhạt, đầu ô có vạch nhấn trái */
.spk-hoi { border: 1px solid var(--spk-vien); border-radius: var(--spk-r-hang); background: var(--spk-mat-2); box-shadow: var(--spk-nut2-bong); transition: border-color .15s, background-color .15s; }
.spk-hoi:hover { border-color: var(--spk-vien-2); }
.spk-hoi > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; padding: 8px 10px 8px 16px; cursor: pointer; border-radius: calc(var(--spk-r-hang) - 1px);
  font: 600 15px/1.4 var(--spk-font); color: var(--spk-chu); --dm-text-primary: var(--spk-chu); --dm-link: var(--spk-chu); --dm-link-hover: var(--spk-chu); transition: background-color .15s, box-shadow .15s, color .15s; }
.spk-hoi[open] { background: var(--spk-mat); border-color: var(--spk-vien-2); border-color: color-mix(in srgb, var(--spk-chinh) 42%, var(--spk-vien-2)); }
.spk-hoi[open] > summary { 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 3px 0 0 var(--spk-chinh); border-radius: calc(var(--spk-r-hang) - 1px) calc(var(--spk-r-hang) - 1px) 0 0; }
.spk-hoi > p { padding: 12px 16px 14px; font-size: 14.5px; 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: 70ch; }
.spk-hoi-ds--nho { margin-top: 16px; }
.spk-hd kbd { font: 600 12px/1 var(--spk-font); padding: 2px 6px; border-radius: 5px; border: 1px solid var(--spk-vien-2); 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); }

/* ---------- 9. KẾT ---------- */
.spk-hd-ket { display: flex; align-items: center; gap: 24px; padding: 28px 30px; border-radius: var(--spk-r-to); background: var(--spk-mat-nen); border: 1px solid var(--spk-vien); box-shadow: var(--spk-bong-the); }
.spk-soi--ket { flex: none; width: 150px; height: 150px; }
.spk-soi--ket .soi { --soi-co: 150px; }
.spk-hd-ket-chu p { font-size: 16px; line-height: 1.55; 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-hd-ket-chu p.spk-loi-soi { display: inline-block; max-width: 30em; margin-top: 4px; font-size: 19px; line-height: 1.3; 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-hd-ket-chu p.spk-loi-soi--nghiem { font-size: 15.5px; line-height: 1.5; 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-hd-ket .spk-hd-h2 { margin-bottom: 6px; text-shadow: none; }
.spk-hd-ket .spk-hd-cta { margin-top: 18px; }

/* ---------- 10. ĐÁP ỨNG ---------- */
@media (max-width: 1100px) {
  .spk-hd-mo { grid-template-columns: 1fr; gap: 28px; }
  .spk-phim--chinh { max-width: 640px; }
}
@media (max-width: 820px) {
  .spk-hai-cot, .spk-hai-cot--canh, .spk-mau { grid-template-columns: 1fr; }
  .spk-canh-cho, .spk-hai-cot--canh > [data-canh-cho] { max-width: 380px; }
  .spk-phong { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .spk-hd { padding: 20px 16px 56px; }
  .spk-hd section + section { margin-top: 40px; }
  .spk-hd--soi .spk-hd-the { margin-top: 76px; }
  .spk-hd-tieude { font-size: 48px; }
  html.theme-skeuo .spk-hd-tieude { font-size: 36px; }
  html.theme-skeuo .spk-hd-mo-chu { padding: 18px 16px 16px; border-radius: 16px; }
  .spk-hd-dan { font-size: 16px; }
  .spk-hd-cta { flex-direction: column; align-items: stretch; }
  .spk-hd-cta .spk-nut { width: 100%; }
  .spk-hd-so { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .spk-hd-so > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .spk-hd-so .spk-so { font-size: 32px; }
  .spk-hd-chao { margin-bottom: 14px; }
  .spk-hd-chao-bong { font-size: 17px; }
  .spk-hd-chao-bong.spk-loi-soi--nghiem { font-size: 14px; }
  .spk-phim-vo { border-radius: 18px; padding: 6px 6px 4px; }
  .spk-phim-khung { border-radius: 13px; }
  .spk-phim-chuong button { font-size: 12px; }
  .spk-the-de { padding: 22px 16px 18px; margin-top: 40px; transform: none; }
  .spk-soi--the { width: 84px; height: 84px; top: -64px; right: 10px; }
  .spk-soi--the .soi { --soi-co: 84px; }
  .spk-the-de-dau h2 { font-size: 26px; }
  html.theme-skeuo .spk-the-de-dau h2 { font-size: 22px; }
  .spk-buoc-muc { grid-template-columns: 30px minmax(0, 1fr); gap: 10px; }
  .spk-buoc-o { width: 28px; height: 28px; }
  .spk-buoc-ten { font-size: 17px; }
  .spk-buoc-nut .spk-nut { flex: 1 1 auto; }
  .spk-buoc-them { padding: 12px; margin-left: -40px; }
  .spk-do-dai-hang { grid-template-columns: 60px minmax(0, 1fr); }
  .spk-do-dai-hang > :last-child { grid-column: 2; }
  .spk-do-dai-hang--dau > :last-child { display: none; }
  .spk-mau-tren { flex-direction: column; align-items: stretch; }
  .spk-mau-vong { margin: 0 auto; }
  .spk-hd-h2 { font-size: 28px; }
  .spk-hd-ket { flex-direction: column; text-align: center; padding: 22px 16px; }
  .spk-hd-ket .spk-loi-soi-duoi { display: none; }   /* điện thoại: con sói nằm TRÊN bong bóng ⇒ bỏ đuôi chỉ sang trái */
  .spk-hd-ket-chu p.spk-loi-soi { text-align: left; border-radius: 20px; }
  .spk-hd-ket-chu p.spk-loi-soi--nghiem { border-radius: 16px; }
  .spk-soi--ket { width: 110px; height: 110px; }
  .spk-soi--ket .soi { --soi-co: 110px; }
  .spk-gap > summary { padding: 8px 10px 8px 14px; font-size: 16px; }
  .spk-gap-than { padding: 14px 12px 14px; }
  .spk-hoi > summary { padding: 8px 8px 8px 12px; }
  .spk-hoi > p { padding: 10px 12px 12px; }
  .spk-chuoi { gap: 4px; }
  .spk-chuoi li { font-size: 10.5px; padding: 6px 1px; }
  .spk-tab button { flex: 1 1 40%; padding: 0 8px; }
}

/* ---------- 11. GIẢM CHUYỂN ĐỘNG: đứng ở khung đắt + phụ đề đánh số ---------- */
@media (prefers-reduced-motion: reduce) {
  .spk-phim.is-chay .spk-phim-rec, .spk-thu-mic.is-nghe .spk-thu-mic-nut, .spk-phim.is-chay .p-song i, .spk-phim.is-chay .p-quay { animation: none; }
  .spk-phim:not(.is-chay) .spk-phim-tinh { display: block; margin: 12px 0 0; padding: 0 0 0 20px; font-size: 13.5px; line-height: 1.55; 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-phim:not(.is-chay) .spk-phim-tinh li + li { margin-top: 4px; }
  .spk-the-de-thanh em, .spk-buoc-mo-nut svg, .spk-gap > summary .spk-mui, .spk-hoi > summary .spk-mui, .spk-gap, .spk-gap > summary, .spk-hoi, .spk-hoi > summary { transition: none; }
}

/* điện thoại hẹp (< 390 px: iPhone SE/mini, Android 360): phim tràn hết bề ngang (bỏ lề 16 px) để khung dọc 360 không bị
   thu nhỏ ⇒ chữ trong phim ≥ 11 px sau co giãn (đo: 360 px trước 10,1 px → sau 11,1 px). */
@media (max-width: 389px) {
  .spk-phim--chinh { margin-left: -16px; margin-right: -16px; }
  .spk-phim--chinh .spk-phim-vo { border-radius: 0; padding-left: 6px; padding-right: 6px; }
  .spk-phim--chinh > .spk-phim-chu { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 640px) { .p-vong small { font-size: 12px; bottom: 21px; } }