/* ==========================================================================
   GIAO DIỆN SÁNG / TỐI – phần CHỈNH TAY (ui-theme.css)
   - ui-light.css (tự động) đổi màu cả app sang sáng; file này tinh chỉnh thêm cho đẹp + nút đổi giao diện.
   - Mọi quy tắc cho bản sáng bắt đầu bằng html[data-ui="light"] để luôn thắng CSS gốc.
   ========================================================================== */

/* ---------- Nút đổi giao diện (☀ / ☾) ---------- */
.ui-tg {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 38px; height: 38px; padding: 0; border-radius: 10px; cursor: pointer;
  color: #cbd5e1; background: #1e293b; border: 1px solid #334155;
  transition: background .15s, color .15s, border-color .15s, transform .15s;
  -webkit-tap-highlight-color: transparent;
}
.ui-tg:hover { background: #334155; color: #fff; }
.ui-tg:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
.ui-tg:active { transform: scale(.94); }
.ui-tg .ui-tg-ico { display: inline-flex; }
.ui-tg svg { width: 18px; height: 18px; }
.home-top-row .ui-tg-home { margin-left: auto; }
#practice-header-tools .ui-tg-pv { width: 36px; height: 36px; border-radius: 10px; }

html[data-ui="light"] .ui-tg { color: #334155; background: #ffffff; border-color: #d5dce8; box-shadow: 0 1px 2px rgba(15,23,42,.06); }
html[data-ui="light"] .ui-tg:hover { background: #f1f5fb; color: #0f172a; }

/* Công tắc trong bảng ⚙ (điện thoại) – giống .pvc-sw */
.ui-sw { position: relative; flex: none; width: 51px; height: 31px; padding: 0; border-radius: 999px; border: 0; background: #2a3550; cursor: pointer; transition: background .2s; -webkit-tap-highlight-color: transparent; }
.ui-sw i { position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.3); transition: transform .2s; }
.ui-sw[aria-checked="true"] { background: #2563eb; }
.ui-sw[aria-checked="true"] i { transform: translateX(20px); }
html[data-ui="light"] .ui-sw { background: #d5dce8; }
html[data-ui="light"] .ui-sw[aria-checked="true"] { background: #2563eb; }

/* Chữ nằm trên nút màu mà thiếu tương phản → ui-theme.js gắn lớp: trắng / xanh than */
html[data-ui="light"] .lt-ink-w { color: #fff !important; -webkit-text-fill-color: #fff; }
html[data-ui="light"] .lt-ink-d { color: #0f172a !important; -webkit-text-fill-color: #0f172a; }

/* ==========================================================================
   BẢN SÁNG – tinh chỉnh theo nhận xét designer (vòng 1)
   Bảng màu: trang #f4f6fb · thẻ #fff · viền #e3e8f1 / đậm #cbd5e1 / chia #eef1f6
             chữ #0f172a / phụ #475569 / mờ #64748b / tắt #94a3b8 · chính #2563eb
   ========================================================================== */
html[data-ui="light"] body { background-color: #f4f6fb; }

/* Công tắc: rãnh tắt #cbd5e1, núm trắng có bóng */
html[data-ui="light"] .pvc-sw,
html[data-ui="light"] .ui-sw { background: #cbd5e1; }
html[data-ui="light"] .pvc-sw[aria-checked="true"],
html[data-ui="light"] .ui-sw[aria-checked="true"] { background: #2563eb; }
html[data-ui="light"] .pvc-sw i,
html[data-ui="light"] .ui-sw i { background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.25); }
html[data-ui="light"] .dc-switch { background: #e2e8f0; border-color: #cbd5e1; }
html[data-ui="light"] .dc-switch i { background: #64748b; }
html[data-ui="light"] .dc-switch.on { background: #2563eb; border-color: #2563eb; }
html[data-ui="light"] .dc-switch.on i { background: #fff; }
html[data-ui="light"] #pv-dictation .pvc-dcrow .dc-switch { background: #cbd5e1; border-color: #cbd5e1; }
html[data-ui="light"] #pv-dictation .pvc-dcrow .dc-switch i { background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.25); }
html[data-ui="light"] #pv-dictation .pvc-dcrow .dc-switch.on { background: #2563eb; border-color: #2563eb; }

/* Trang Ủng hộ: tab đang chọn chữ trắng; 4 góc khung QR chỉ đổi màu viền */
html[data-ui="light"] .dn-tab[aria-selected="true"] { color: #fff; }
html[data-ui="light"] .dn-scan i { border-color: #2563eb; }

/* Ô nhập: nền trắng, viền trung tính, focus xanh; chữ gợi ý xám */
html[data-ui="light"] ::placeholder { color: #94a3b8; opacity: 1; }

/* Nút "Vào xem" khi chưa dùng được */
html[data-ui="light"] .oy-start:disabled { background: #e8ecf3; color: #94a3b8; border-color: #e3e8f1; box-shadow: none; filter: none; opacity: 1; }

/* 4 nút trên cùng trang chủ: cùng một kiểu nút phụ */
html[data-ui="light"] .home-top-row .vocab-btn.primary,
html[data-ui="light"] .home-top-row .ss-auth-btn,
html[data-ui="light"] .home-top-row .coffee-btn,
html[data-ui="light"] .home-top-row .ui-tg { background: #fff; border: 1px solid #d5dce8; color: #1e293b; box-shadow: 0 1px 2px rgba(15,23,42,.06); }
html[data-ui="light"] .home-top-row .vocab-btn.primary { border-color: #bfd0f5; color: #1d4ed8; }
html[data-ui="light"] .home-top-row .coffee-btn { color: #b45309; }
html[data-ui="light"] .home-top-row .vocab-btn.primary:hover,
html[data-ui="light"] .home-top-row .ss-auth-btn:hover,
html[data-ui="light"] .home-top-row .coffee-btn:hover,
html[data-ui="light"] .home-top-row .ui-tg:hover { background: #f1f5fb; }
.home-top-row .home-top-btn, .home-top-row .ss-auth-btn, .home-top-row .ui-tg { height: 40px; }
.home-top-row .ui-tg { width: 40px; }
@media (max-width:560px) { .home-top-row .ss-auth-btn, .home-top-row .ss-auth-btn.in { width: 40px; } }

/* Cửa sổ nổi: lớp nền tối mờ, hộp trắng có bóng */
html[data-ui="light"] .ai-modal-backdrop { background: rgba(15,23,42,.45); }
html[data-ui="light"] .ai-modal { background: #fff; border-color: #e3e8f1; box-shadow: 0 24px 64px -12px rgba(15,23,42,.35); }
html[data-ui="light"] .ai-modal-title { color: #0f172a; }
html[data-ui="dark"] .ai-modal-title { color: #f1f5f9; }
html[data-ui="light"] .ai-btn-copy { background: #fff; color: #1e293b; border-color: #d5dce8; box-shadow: 0 1px 2px rgba(15,23,42,.06); }
html[data-ui="light"] .ai-btn-copy:hover { background: #f1f5fb; }

/* Bảng ⚙ (điện thoại) */
html[data-ui="light"] .pvc-panel { background: #f4f6fb; border-color: #e3e8f1; box-shadow: 0 -12px 40px -8px rgba(15,23,42,.25); }
html[data-ui="light"] .pvc-group { background: #fff; border-color: #e3e8f1; }
html[data-ui="light"] .pvc-row, html[data-ui="light"] .pvc-item { color: #0f172a; background: transparent; }
html[data-ui="light"] .pvc-row + .pvc-row, html[data-ui="light"] .pvc-item + .pvc-item, html[data-ui="light"] .pvc-row + .pvc-item { border-top-color: #eef1f6; }
html[data-ui="light"] .pvc-lbl svg, html[data-ui="light"] .pvc-item svg { color: #2563eb; }

/* Trang Từ vựng: "Ôn tập" nút chính xanh lá đặc, còn lại nút phụ trắng */
html[data-ui="light"] .vocab-top .vocab-btn { background: #fff; border: 1px solid #d5dce8; color: #1e293b; box-shadow: 0 1px 2px rgba(15,23,42,.06); }
html[data-ui="light"] .vocab-top .vocab-btn:hover { background: #f1f5fb; }
html[data-ui="light"] .vocab-top .vocab-btn.danger { color: #b91c1c; }
html[data-ui="light"] #vocab-review-btn { background: #16a34a !important; border-color: #16a34a; color: #fff; }
html[data-ui="light"] #vocab-review-btn:hover { background: #15803d !important; }
html[data-ui="light"] #vocab-review-btn .vocab-due-badge { background: #fff; color: #15803d; }

/* Dòng tiếng Việt: xanh mòng két (28/10/2026 – thay hổ phách #a85a00 bị Giang chê "nâu, bẩn") */
:root[data-ui="light"] { --vi-color-base: #0f766e; }

/* Aa: nút "Mặc định" cùng màu xanh */
html[data-ui="light"] .fs-grp button.fs-reset.amber { color: #2563eb; }

/* Karaoke / Song ngữ khi bật: đỏ dịu */
html[data-ui="light"] #btn-toggle-karaoke.bg-red-600\/30, html[data-ui="light"] #btn-toggle-bilingual.bg-red-600\/30 { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; box-shadow: none; }
html[data-ui="dark"] #btn-toggle-karaoke.bg-red-600\/30, html[data-ui="dark"] #btn-toggle-bilingual.bg-red-600\/30 { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.5); color: #fca5a5; box-shadow: none; }

/* Tab Đọc sách / Luyện dịch ở trang chủ */
html[data-ui="light"] .bk-intro h3, html[data-ui="light"] .bk-lib-title h4, html[data-ui="light"] .bk-sample-title { color: #0f172a; }
html[data-ui="light"] .bk-sample-author { color: #b45309; }
html[data-ui="light"] .bk-drop:not(#screen-book *) { background: #f8fafc; border: 2px dashed #bfd0f5; }
html[data-ui="light"] .bk-drop:not(#screen-book *):hover, html[data-ui="light"] .bk-drop.drag:not(#screen-book *), html[data-ui="light"] .bk-drop.over:not(#screen-book *) { background: #eff4ff; border-color: #2563eb; }
html[data-ui="light"] .bk-drop b { color: #0f172a; }
html[data-ui="light"] .bk-drop span { color: #64748b; }
html[data-ui="light"] .bk-drop svg, html[data-ui="light"] .bk-drop i { color: #2563eb; }
html[data-ui="light"] .bk-paste-row input:not(#screen-book *), html[data-ui="light"] #bk-paste-text { background: #fff; border-color: #d5dce8; color: #0f172a; }
html[data-ui="light"] .bk-or::before, html[data-ui="light"] .bk-or::after { background: #e3e8f1; }
html[data-ui="light"] .bk-card:not(#screen-book *) { background: #fff; border-color: #e3e8f1; }
html[data-ui="light"] .bk-card-title:not(#screen-book *) { color: #0f172a; }
html[data-ui="light"] .bk-bar:not(#screen-book *) { background: #e6ebf4; }
html[data-ui="light"] .bk-sample:not(#screen-book *) { background: #fff8eb; border-color: #f5d9a8; }

/* Thẻ video: viền trung tính + bóng nhẹ thay viền xanh; rê chuột mới hiện xanh */
html[data-ui="light"] .yt-card { box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 4px 16px -6px rgba(15,23,42,.08); }
html[data-ui="light"] .yt-card:hover { border-color: #93b4f5; box-shadow: 0 10px 28px -8px rgba(37,99,235,.28); }
html[data-ui="light"] .yt-thumb-wrapper { border-color: rgba(15,23,42,.08); }

/* Chép chính tả: sóng âm rõ hơn */
html[data-ui="light"] .dc-wave b { background: #c7d2e5; }
html[data-ui="light"] .dc-wave b.on { background: #2563eb; }
html[data-ui="light"] .dc-wave:hover b:not(.on) { background: #a9b8d3; }

/* Thanh thời gian: núm trắng viền đỏ thẫm (hợp nút Play), bóng nhẹ; rãnh xám */
html[data-ui="light"] .tl-thumb { background: #fff; box-shadow: 0 0 0 3px rgba(122,31,43,.28), 0 1px 4px rgba(15,23,42,.3); }
html[data-ui="light"] .tl-rail { background: #d5dce8; }

/* Dòng "HOẶC …" ở tab Đọc sách / Luyện dịch */
html[data-ui="light"] .bk-or:not(#screen-book *) { color: #64748b; }
html[data-ui="light"] .bk-or:not(#screen-book *)::before, html[data-ui="light"] .bk-or:not(#screen-book *)::after { background: #e3e8f1; }
html[data-ui="dark"] .bk-or:not(#screen-book *) { color: #8593ad; }
html[data-ui="dark"] .bk-or:not(#screen-book *)::before, html[data-ui="dark"] .bk-or:not(#screen-book *)::after { background: rgba(148,163,184,.14); }
html[data-ui="light"] .bk-drop:not(#screen-book *) span { color: #64748b; }

/* Ô tô sáng từ đã lưu: vàng nhạt trên nền trắng (bản tối giữ như cũ) */
html[data-ui="light"] { --vs-color: #facc15; --vs-opacity: .35; --vs-bg: #fdf0b0; --vs-bg: color-mix(in srgb, var(--vs-color) calc(var(--vs-opacity) * 100%), #ffffff); }

/* Ảnh thumbnail: nền khung ảnh xám nhạt (không lộ viền đen quanh ảnh) */
html[data-ui="light"] .yt-thumb-wrapper, html[data-ui="light"] .vt-thumb { background-color: #e8ecf3; }

/* Thanh trên màn luyện tập: nút Quay lại / Từ vựng / Aa / ⚙ = nút phụ trắng, biểu tượng xanh */
html[data-ui="light"] #screen-practice header > div:first-child > button:first-child,
html[data-ui="light"] #screen-practice header .vocab-btn,
html[data-ui="light"] #screen-practice header #fs-btn,
html[data-ui="light"] #pvc-gear { background: #fff; border: 1px solid #d5dce8; color: #1e293b; box-shadow: 0 1px 2px rgba(15,23,42,.06); }
html[data-ui="light"] #screen-practice header > div:first-child > button:first-child svg,
html[data-ui="light"] #screen-practice header .vocab-btn svg,
html[data-ui="light"] #pvc-gear svg { color: #2563eb; }
html[data-ui="light"] #screen-practice header > div:first-child > button:first-child:hover,
html[data-ui="light"] #screen-practice header .vocab-btn:hover,
html[data-ui="light"] #screen-practice header #fs-btn:hover,
html[data-ui="light"] #pvc-gear:hover { background: #f1f5fb; }
html[data-ui="light"] #pv-switch-btn { border-color: #bfd0f5; }

/* Bản tối: dòng "lượt xem · người học" rõ hơn */
html[data-ui="dark"] #video-stats-footer, html[data-ui="dark"] #video-stats-footer * { color: #64748b; }
html[data-ui="light"] .txt-thumb.has-img { background-image: none; }

/* ===== Vòng 4 (designer R4) ===== */
/* Bảng ⚙ điện thoại – bản sáng: thanh kéo rõ hơn, lớp che nhẹ hơn */
html[data-ui="light"] .pvc-grab { background: #cbd5e1; width: 36px; height: 4px; }
html[data-ui="light"] .pvc-back { background: rgba(15,23,42,.35); }
/* Chép chính tả – bản sáng: số câu chưa làm xám, chỉ câu đang chọn xanh; chữ thống kê xám */
html[data-ui="light"] .dc-chip.todo { color: #475569; }
html[data-ui="light"] .dc-side-meta, html[data-ui="light"] .dc-side-meta * { color: #64748b; }
html[data-ui="light"] .dc-side-big span, html[data-ui="light"] .dc-side-big small { color: #64748b; }
/* Tên video – bản sáng: chữ đậm thường, không xanh như link */
html[data-ui="light"] #pv-header-title { color: #0f172a; }
html[data-ui="light"] #vi-title { color: #6b7789; } /* 05/11 Giang: thẻ tên video bớt nổi (trước #0f172a) */
html[data-ui="light"] .vi-meta, html[data-ui="light"] .vi-meta .vi-ch { color: #8e99a8; }
html[data-ui="light"] #vi-title:hover { color: #2563eb; }
/* Chip "All-in-one" – bản sáng: viền nhẹ */
html[data-ui="light"] .hero-title-block > .inline-flex.rounded-full { background: #eff6ff; border-color: #bfdbfe; }
/* Từ vựng – bản tối: nút Xoá tất cả chữ đỏ như bản sáng */
html[data-ui="dark"] .vocab-btn.danger { color: #f87171; border-color: rgba(248,113,113,.35); }
/* Số đếm / đồng hồ không nhảy */
.tabular-nums-auto, #vt-side-big, .dc-side-big, .pv-time, #current-time, #duration { font-variant-numeric: tabular-nums; }
/* Vòng 5: ô phím Enter/Tab bản sáng */
html[data-ui="light"] .dc-keys kbd, html[data-ui="light"] .sh-keys kbd { background: #f1f5f9; border-color: #e2e8f0; color: #475569; }
html[data-ui="light"] .dc-keys, html[data-ui="light"] .dc-keys span, html[data-ui="light"] .sh-keys, html[data-ui="light"] .sh-keys span { color: #64748b; }

/* ==========================================================================
   BẢN SÁNG – nền đọc trắng (28/10/2026, Giang yêu cầu)
   - Mặc định (máy tính/iPad): ô phụ đề TRẮNG chiếm hết bảng (đã bỏ khung xám bọc ngoài) → chữ đen nổi rõ.
   - Shadowing: thẻ câu hiện tại nền TRẮNG, chỉ giữ viền xanh + glow.
   ========================================================================== */
@media (min-width: 768px) {
  /* Bỏ lớp khung thừa quanh ô phụ đề (Giang: "không biết để làm gì") → ô phụ đề trắng chiếm hết bảng, thêm chỗ cho chữ */
  html[data-ui="light"] #panel-right { background-color: #ffffff; border-color: #dfe4ee; }
  html[data-ui="light"] #panel-right #subtitles-scroll-container { padding: 0; }
  html[data-ui="light"] #panel-right .sub-textmode-container {
    background-color: #ffffff !important; background-image: none !important;
    border: 0; border-radius: 0; box-shadow: none; min-height: 100%;
  }
  html[data-ui="light"] #panel-right #sub-search-bar { background-color: #f6f8fb; background-image: none; border-top-color: #e3e8f1; }
  html[data-ui="light"] #panel-right #sub-search-input { background-color: #ffffff; }
}
/* Bản tối: cũng bỏ lớp khung bọc ngoài (Giang yêu cầu 28/10/2026) – ô phụ đề hoà vào nền bảng */
@media (min-width: 768px) {
  html:not([data-ui="light"]) #panel-right #subtitles-scroll-container { padding: 0; }
  html:not([data-ui="light"]) #panel-right .sub-textmode-container {
    background-color: transparent !important; background-image: none !important;
    border: 0; border-radius: 0; box-shadow: none; min-height: 100%;
  }
}
html[data-ui="light"] .sh-row.active {
  background-color: #ffffff; background-image: none; border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37,99,235,.13), 0 14px 40px rgba(15,23,42,.10);
}
html[data-ui="light"] .sh-row.active:hover { background-color: #ffffff; }

/* Karaoke (bản sáng, 28/10/2026): bỏ ô đỏ chữ trắng → cùng kiểu với chữ đang đọc ở thẻ dưới video (.cs-w.cs-cur):
   nền xanh nhạt, chữ đen, viền mảnh. Bản tối giữ ô đỏ. */
html[data-ui="light"] .karaoke-word-active,
html[data-ui="light"] #subtitles-scroll-container .sub-word-unit.karaoke-word-active,
html[data-ui="light"] .sub-word-unit.vs-w.karaoke-word-active {
  background-color: rgba(96, 165, 250, .30) !important; background-image: none !important;
  color: #0e1624 !important; -webkit-text-fill-color: #0e1624;
  box-shadow: 0 0 0 2px rgba(92, 161, 245, .165) !important;
}

/* ===== Chép chính tả – lưới "Danh sách câu" (29/10/2026): nút TRÒN + vòng % độ chính xác quanh viền =====
   --p (0–100) do index.html gắn vào từng nút (dcChip). Đúng hết = vòng xanh lá tươi khép kín + ánh xanh nhẹ.
   Vòng vẽ bằng ::before (conic-gradient + mask) để ui-light/ui-dark.css (đặt background-image: none cho .dc-chip) không xoá mất. */
@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }
html #dc-side-grid { grid-template-columns: repeat(5, 1fr); gap: 9px 6px; justify-items: center; }
html #dc-side-grid .dc-chip, html #dc-pop .dc-pop-grid .dc-chip {
  --ring: #22c55e; --track: #1d2b55; --fill: #0d1630; --ink: #9fb0cf;
  position: relative; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 0;
  background: var(--fill); color: var(--ink); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  outline: none; transition: transform .12s, box-shadow .2s, background-color .2s;
}
html #dc-pop .dc-pop-grid { grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); justify-items: center; gap: 8px 4px; }
html #dc-side-grid .dc-chip::before, html #dc-pop .dc-pop-grid .dc-chip::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%; padding: 3px; pointer-events: none;
  background: conic-gradient(var(--ring) calc(var(--p) * 1%), var(--track) 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
html #dc-side-grid .dc-chip:hover, html #dc-pop .dc-pop-grid .dc-chip:hover { transform: scale(1.08); color: #fff; }
html #dc-side-grid .dc-chip.perfect, html #dc-pop .dc-pop-grid .dc-chip.perfect { --fill: rgba(34, 197, 94, .16); --ink: #86efac; box-shadow: 0 0 10px rgba(34, 197, 94, .35); }
html #dc-side-grid .dc-chip.partial, html #dc-pop .dc-pop-grid .dc-chip.partial { --ring: #f59e0b; --ink: #fcd34d; }
html #dc-side-grid .dc-chip.poor, html #dc-pop .dc-pop-grid .dc-chip.poor { --ring: #ef4444; --ink: #fca5a5; }
html #dc-side-grid .dc-chip.revealed, html #dc-pop .dc-pop-grid .dc-chip.revealed { --ring: #64748b; --ink: #cbd5e1; }
html #dc-side-grid .dc-chip.cur, html #dc-pop .dc-pop-grid .dc-chip.cur { color: #fff; box-shadow: 0 0 0 2px #0b1226, 0 0 0 4px #60a5fa; }
html #dc-side-grid .dc-chip.perfect.cur, html #dc-pop .dc-pop-grid .dc-chip.perfect.cur { box-shadow: 0 0 0 2px #0b1226, 0 0 0 4px #60a5fa, 0 0 12px rgba(34, 197, 94, .4); }
/* Vừa chấm xong: vòng chạy từ 0 tới % mới, đúng hết thì nảy nhẹ */
html .dc-chip.ring-in { animation: dcRingIn .7s cubic-bezier(.22, 1, .36, 1); }
html .dc-chip.perfect.ring-in { animation: dcRingIn .7s cubic-bezier(.22, 1, .36, 1), dcPop .45s .55s ease-out; }
@keyframes dcRingIn { from { --p: 0; } }
@keyframes dcPop { 0% { transform: scale(1); } 45% { transform: scale(1.16); } 100% { transform: scale(1); } }
@media (pointer: coarse) { html #dc-side-grid .dc-chip, html #dc-pop .dc-pop-grid .dc-chip { width: 42px; height: 42px; } }
@media (prefers-reduced-motion: reduce) { html .dc-chip.ring-in, html .dc-chip.perfect.ring-in { animation: none; } }
/* Giao diện sáng */
html[data-ui="light"] #dc-side-grid .dc-chip, html[data-ui="light"] #dc-pop .dc-pop-grid .dc-chip { --track: #e2e8f0; --fill: #fff; --ink: #475569; }
html[data-ui="light"] #dc-side-grid .dc-chip:hover, html[data-ui="light"] #dc-pop .dc-pop-grid .dc-chip:hover { color: #0f172a; }
html[data-ui="light"] #dc-side-grid .dc-chip.perfect, html[data-ui="light"] #dc-pop .dc-pop-grid .dc-chip.perfect { --ring: #16a34a; --fill: #ecfdf3; --ink: #15803d; box-shadow: 0 0 10px rgba(22, 163, 74, .25); }
html[data-ui="light"] #dc-side-grid .dc-chip.partial, html[data-ui="light"] #dc-pop .dc-pop-grid .dc-chip.partial { --ink: #b45309; }
html[data-ui="light"] #dc-side-grid .dc-chip.poor, html[data-ui="light"] #dc-pop .dc-pop-grid .dc-chip.poor { --ink: #b91c1c; }
html[data-ui="light"] #dc-side-grid .dc-chip.revealed, html[data-ui="light"] #dc-pop .dc-pop-grid .dc-chip.revealed { --ink: #475569; }
html[data-ui="light"] #dc-side-grid .dc-chip.cur, html[data-ui="light"] #dc-pop .dc-pop-grid .dc-chip.cur { color: #0f172a; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3b82f6; }
html[data-ui="light"] #dc-side-grid .dc-chip.perfect.cur, html[data-ui="light"] #dc-pop .dc-pop-grid .dc-chip.perfect.cur { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3b82f6, 0 0 12px rgba(22, 163, 74, .3); }

/* 30/10/2026: nút "Thư viện video" (đầu trang thể loại) + 2 nút cuối trang (Quay lại / Lên đầu trang) – bản sáng tự động ra xám đục → trắng viền xám, rê vào xanh */
html[data-ui="light"] .lib-back-btn { color: #334155; background-color: #fff; border-color: #d5dce8; box-shadow: 0 1px 2px rgba(15,23,42,.06); }
html[data-ui="light"] .lib-back-btn:hover { color: #1d4ed8; background-color: #eff6ff; border-color: #93c5fd; }

/* 31/10/2026 QA a11y: chữ nhỏ bản sáng tương phản < 4,5:1 (đo bằng màu thật) → đậm thêm 1 bậc, không đổi bố cục */
:root[data-ui="light"] .dc-seg button:not(.on) { color: #546174; }            /* 4,27 → 5,8 (Nghe thuần / Có gợi ý / 0.5x…) */
:root[data-ui="light"] .tl-time:not(.cur) { color: #546174; }                 /* 3,92 → 5,3 (thời lượng video) */
:root[data-ui="light"] .pv-sw-label small { color: #3b5fb0; }                 /* 3,64 → 5,6 (chữ "GIAO DIỆN" 9,5px) */
:root[data-ui="light"] .pv-switch-btn:hover .pv-sw-label small { color: #1e3a8a; } /* rê / chạm: nền xanh đậm hơn → 3,1 → 6+ */
:root[data-ui="light"] #library-total-count { color: #2f6db0; }               /* 4,18 → 5,3 */
:root[data-ui="light"] .fs-grp button.fs-reset.blue { color: #2563eb; }       /* bảng Aa "Mặc định": 3,98 → 5,2 */
:root[data-ui="light"] .pv-opt-desc { color: #475569; }                       /* mô tả giao diện trên nền xanh nhạt khi chọn: 3,86 → 6,2 */

/* 31/10/2026 QA a11y: màn cảm ứng – nới VÙNG CHẠM vô hình (::after) cho nút nhỏ < 40px, KHÔNG đổi kích thước nhìn thấy */
@media (pointer: coarse) {
  .oy-info, .pv-acct-btn, .pv-set-btn, .sh-collapse, .row-more-btn { position: relative; }
  .oy-info::after, .pv-acct-btn::after, .pv-set-btn::after, .sh-collapse::after, .row-more-btn::after, .dc-switch::after { content: ""; position: absolute; }
  .oy-info::after { inset: -8px; }              /* (i) 28px → 44px */
  .pv-acct-btn::after { inset: -6px; }          /* ảnh đại diện 30px → 42px */
  .pv-set-btn::after { inset: -4px; }           /* ⚙ 34px → 42px */
  .sh-collapse::after { inset: -4px; }          /* X thu gọn câu 30–34px → 38–42px */
  .row-more-btn::after { inset: -5px 0 -3px; }  /* "Xem thêm" cao 32px → 40px */
  .dc-switch::after { inset: -6px -2px; }       /* công tắc Có gợi ý 28px → 40px */
}

/* Trang Hướng dẫn: ô "chỉ cài được trên máy tính" – viên thuốc kính mờ hợp với thẻ bước, biểu tượng trong vòng tròn màu như nút Chrome Web Store (31/10/2026) */
:root[data-ui][data-ui][data-ui] #screen-guide .gd-pc-note { display: inline-flex; align-items: center; gap: 11px; max-width: 700px; margin: 18px auto 0; padding: 7px 18px 7px 7px;
  border-radius: 999px; font-size: 14.5px; line-height: 1.4; font-weight: 500; text-align: left;
  color: #475569; background: rgba(255,255,255,.72); border: 1px solid #e2e8f0; box-shadow: 0 4px 18px rgba(15,23,42,.06); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
:root[data-ui][data-ui][data-ui] #screen-guide .gd-pc-note b { color: #0f172a; font-weight: 800; }
:root[data-ui][data-ui][data-ui] #screen-guide .gd-pc-ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff;
  background: linear-gradient(135deg, #f43f5e, #6366f1); box-shadow: 0 3px 10px rgba(99,102,241,.28); }
:root[data-ui][data-ui][data-ui] #screen-guide .gd-pc-ic svg { width: 16px; height: 16px; margin: 0; }
:root[data-ui="dark"][data-ui][data-ui] #screen-guide .gd-pc-note { color: #cbd5e1; background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); box-shadow: none; }
:root[data-ui="dark"][data-ui][data-ui] #screen-guide .gd-pc-note b { color: #fff; }
@media (max-width: 560px) {
  :root[data-ui][data-ui][data-ui] #screen-guide .gd-pc-note { border-radius: 18px; align-items: flex-start; font-size: 13.5px; padding: 8px 14px 8px 8px; }
}

/* 31/10/2026 (Giang): công tắc IPA / Tự dừng khi BẬT – bản sáng cục tròn TRẮNG (build-light.js đổi #cfdcff/#bbd6c4 thành xám đậm → trông như hỏng) */
:root[data-ui="light"] .cs-auto[aria-checked="true"] .sw::after,
:root[data-ui="light"] .cs-ipa-sw[aria-checked="true"] .sw::after { background: #ffffff; box-shadow: 0 1px 2px rgba(15,23,42,.25); }

/* ===== 01/11/2026 (Giang, Safari Mac + giao diện sáng) ===== */
/* Nhãn trình độ A2 / B1 / B2 / C1 trên thẻ video: build-light.js tự đổi chữ trắng → đen trên nền màu (cả Chrome lẫn Safari) → giữ chữ TRẮNG như bản tối */
:root[data-ui="light"] .lv-pill { color: #fff; }
/* Ô chọn (Lọc bài học, Sắp xếp, Trình độ…): Safari vẽ kiểu nút xám mặc định của Mac, bỏ qua viền bo tròn → tắt kiểu mặc định ở mọi trình duyệt, tự vẽ mũi tên */
select:not([multiple]):not([size]) {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 10px center !important; background-size: 12px 12px !important;
  padding-right: 30px !important;
}
/* Nút "Giao diện" (màn luyện tập): rê chuột nền xanh đậm trông bẩn (Giang) → kiểu YouTube: nền trắng viền xám như các nút cạnh bên,
   rê chuột chỉ xám xanh rất nhạt; đang mở menu: viền xanh + quầng mờ */
:root[data-ui="light"] #pv-switch-btn.pv-switch-btn { background: #fff; border-color: #d5dce8; color: #0f172a; box-shadow: 0 1px 2px rgba(15,23,42,.06); }
:root[data-ui="light"] #pv-switch-btn.pv-switch-btn:hover { background: #f4f7fc; border-color: #c3cfe2; color: #0f172a; }
:root[data-ui="light"] #pv-switch-btn.pv-switch-btn[aria-expanded="true"] { background: #fff; border-color: #93b4f5; box-shadow: 0 0 0 3px rgba(59,130,246,.12); }
:root[data-ui="light"] #pv-switch-btn .pv-sw-ico { background: #eef3fd; color: #1d4ed8; }
:root[data-ui="light"] #pv-switch-btn .pv-sw-label small,
:root[data-ui="light"] #pv-switch-btn:hover .pv-sw-label small { color: #5b6b85; }
:root[data-ui="light"] #pv-switch-btn .pv-sw-caret { color: #64748b; }
:root[data-ui="dark"] #pv-switch-btn.pv-switch-btn:hover { background: rgba(30, 58, 138, .5); border-color: #2b4fb8; color: #fff; }
/* Nút "Từ khó" (AI liệt kê từ khó): Giang tạm bỏ 01/11/2026 – ẩn ở thanh trên + bảng ⚙ điện thoại (openKeyVocabModal vẫn còn) */
#btn-keyvocab, .pvc-item[data-a="keyvocab"] { display: none !important; }

/* 10/11/2026 (Giang: rà giao diện sáng – chữ khó đọc khi rê chuột) */
html[data-ui="light"] .sh-loop-delay button:hover { background: #059669; color: #fff; border-color: #059669; }
html[data-ui="light"] .vocab-btn.primary:hover,
html[data-ui="light"] #screen-guide .gd-back:hover,
html[data-ui="light"] .dn-copy:hover { background-color: #2563eb; color: #fff; }
html[data-ui="light"] .home-top-row .vocab-btn.primary:hover { background-color: #f1f5fb; color: #1d4ed8; }