/* ══════════════════════════════════════════════════════════════════════
Trí Lữ Lesson V25 — lớp da phủ lên Atlas V26
══════════════════════════════════════════════════════════════════════
Gắn SAU hoc-lesson-atlas-v26.css bằng đúng một thẻ . Không đổi
HTML, không đổi JS, không chạm một byte dữ liệu bài học nào.
Bốn việc lớp này làm:
1. Cảnh nền dawn/night — vẽ bằng body::before/::after nên không cần
thêm thẻ div nào vào 550 trang.
2. Thang chữ có sàn: không nhãn nào dưới 13px, thân bài 17px.
3. Bảng màu theo khối + dải màu chữ ký dùng chung.
4. Chế độ tối: nền lặng, chữ phát quang.
══════════════════════════════════════════════════════════════════════ */
:root{
--v25-label:13px;
--v25-meta:14px;
--v25-body:17px;
--v25-open:#155e91;
--v25-form:#0e7a6f;
--v25-example:#b0344f;
--v25-check:#8a4bc4;
--v25-warm:#9c4d08;
--v25-grad:linear-gradient(120deg,#155e91,#8a4bc4 52%,#b0344f);
/* Opaque text is the shared baseline. The earlier clipped gradient left
learner-facing labels transparent in the iOS App-UA compositor. */
--v25-heading-ink:var(--tl-ink,#172833);
--v25-scene-dawn:image-set(url("/anh-art/lesson-dawn-900.avif") type("image/avif"),
url("/anh-art/lesson-dawn-900.webp") type("image/webp"));
--v25-scene-night:image-set(url("/anh-art/lesson-night-900.avif") type("image/avif"),
url("/anh-art/lesson-night-900.webp") type("image/webp"));
--v25-base:#dfeaf2;
--v25-veil:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(235,245,251,.06) 42%,rgba(214,228,239,.46) 100%);
--v25-glass:rgba(250,252,249,.80);
--v25-glass-soft:rgba(250,252,249,.66);
}
/* V28.1 — tiện ích hoc-nang-cap chèn nút này sau stylesheet và đặt 38px.
Khóa sàn chạm 44px ở lớp shared, không sửa file tiện ích untracked/WIP. */
#hnc-am {
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
min-height: 44px !important;
}
html[data-mode="dark"]{
--v25-open:#7cc8f5;
--v25-form:#6fe3d0;
--v25-example:#ffa3b8;
--v25-check:#c9a6ff;
--v25-warm:#ffc073;
--v25-grad:linear-gradient(120deg,#83e8ff,#c7a9ff 52%,#ff9bc8);
--v25-heading-ink:var(--tl-ink,#f0eee6);
--v25-base:#020713;
--v25-veil:linear-gradient(180deg,rgba(1,5,14,.06) 0%,rgba(2,7,19,.26) 52%,rgba(2,7,19,.72) 100%);
--v25-glass:rgba(9,28,50,.82);
--v25-glass-soft:rgba(7,24,44,.70);
}
@media(min-width:760px){
:root{
--v25-scene-dawn:image-set(url("/anh-art/lesson-dawn-1200.avif") type("image/avif"),
url("/anh-art/lesson-dawn-1200.webp") type("image/webp"));
--v25-scene-night:image-set(url("/anh-art/lesson-night-1200.avif") type("image/avif"),
url("/anh-art/lesson-night-1200.webp") type("image/webp"));
}
}
@media(min-width:1400px){
:root{
--v25-scene-dawn:image-set(url("/anh-art/lesson-dawn-1672.avif") type("image/avif"),
url("/anh-art/lesson-dawn-1672.webp") type("image/webp"));
--v25-scene-night:image-set(url("/anh-art/lesson-night-1672.avif") type("image/avif"),
url("/anh-art/lesson-night-1672.webp") type("image/webp"));
}
}
/* ── 1. cảnh nền, không cần thêm thẻ nào ─────────────────────────────── */
body{background:var(--v25-base)!important}
body::before,body::after{content:"";position:fixed;inset:0;pointer-events:none}
body::before{z-index:-2;background-image:var(--v25-scene-dawn);background-size:cover;background-position:center top;background-repeat:no-repeat}
html[data-mode="dark"] body::before{background-image:var(--v25-scene-night)}
body::after{z-index:-1;background:var(--v25-veil)}
/* ── 2. thang chữ có sàn ─────────────────────────────────────────────── */
.sec-kicker{font-size:var(--v25-label)!important;font-weight:700!important;letter-spacing:.12em!important;color:var(--v25-warm)!important}
.pmeta,.pmeta span{font-size:var(--v25-meta)!important}
.hd-tt small,.fl-top small,.hubcard :is(p,span:where(.hubcard-description)),.stat .l{font-size:var(--v25-meta)!important}
.fl-hintswipe{font-size:var(--v25-label)!important;letter-spacing:.1em!important}
/* Đo trên trang thật còn 10 chỗ tụt xuống 9,1-11,2px. Nâng hết lên sàn. */
.hd-kicker{font-size:var(--v25-label)!important;letter-spacing:.1em!important}
.lm-switch button{font-size:var(--v25-meta)!important}
.fl-step,.w-num{font-size:var(--v25-label)!important}
.g-lbl{font-size:var(--v25-label)!important;font-weight:700!important}
.exspk{font-size:var(--v25-meta)!important}
.bnav button{font-size:var(--v25-label)!important}
#tl-furi.noi{font-size:var(--v25-meta)!important}
/* Vét nốt: nhãn từ loại và nhãn giải chữ Hán trên trang từ vựng/Hán tự. */
.w-pos,.wchip,.kb-lbl,.k-lbl{font-size:var(--v25-label)!important}
.g-ex .vn,.w-ex .vn{font-size:max(var(--v25-body),16px)!important;line-height:1.75!important}
.tl-micro-body,.kb-info,.kb-note,.g-explain{font-size:max(var(--v25-body),16px)!important;line-height:1.75!important}
.w-mean[hidden],.g-ex .vn[hidden],.w-ex .vn[hidden]{display:none!important}
.tl-meaning-toggle,.tl-example-meaning-toggle{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 13px;border:1px solid color-mix(in srgb,var(--v25-example) 36%,var(--line));border-radius:12px;background:var(--v25-glass-soft);color:var(--v25-example);font-family:"Bricolage Grotesque","Be Vietnam Pro",sans-serif;font-size:var(--v25-meta);font-weight:700;cursor:pointer}
.w-hero>.tl-meaning-toggle{margin:9px auto 3px}
.g-ex>.tl-example-meaning-toggle,.w-ex>.tl-example-meaning-toggle{margin-top:10px}
.spk,.exspk,.hd-mode,.hd-back,.fl-prev,.fl-next,.knowbtn,.opt,.mt,.ghost,.nextbtn{min-height:44px!important}
/* ── 3. mặt kính + màu theo khối ─────────────────────────────────────── */
.hd{background:var(--v25-glass)!important;-webkit-backdrop-filter:blur(26px) saturate(180%)!important;backdrop-filter:blur(26px) saturate(180%)!important;box-shadow:0 12px 34px rgba(8,26,44,.14),inset 0 1px 0 rgba(255,255,255,.5)!important}
html[data-mode="dark"] .hd{box-shadow:0 12px 34px rgba(0,6,16,.4),inset 0 1px 0 rgba(186,224,255,.18)!important}
#flowBox,.fc-stage,.hub,.exwrap,.stat-grid>.stat,.chips{background:var(--v25-glass-soft)!important;-webkit-backdrop-filter:blur(16px) saturate(160%)!important;backdrop-filter:blur(16px) saturate(160%)!important}
#flowBox,.exwrap{box-shadow:0 22px 70px rgba(27,47,66,.16),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(12,34,54,.10)!important}
html[data-mode="dark"] #flowBox,html[data-mode="dark"] .exwrap{box-shadow:0 22px 80px rgba(0,5,15,.44),inset 0 1px 0 rgba(186,224,255,.20),inset 0 -1px 0 rgba(0,0,0,.30)!important}
/* ví dụ: gờ hồng, tách khỏi phần giảng */
.g-ex,.w-ex{border-left:3px solid color-mix(in srgb,var(--v25-example) 62%,transparent)!important;
background:linear-gradient(100deg,color-mix(in srgb,var(--v25-example) 6%,transparent),transparent 62%),var(--v25-glass-soft)!important}
/* công thức: gờ xanh lam */
.tl-formula-group,.g-struct,#fcS{border-left:3px solid color-mix(in srgb,var(--v25-form) 62%,transparent)!important;
background:linear-gradient(100deg,color-mix(in srgb,var(--v25-form) 6%,transparent),transparent 62%),var(--v25-glass-soft)!important}
/* ── 4. dải màu chữ ký — thứ anh Trí thích ở nút "Tiếp tục" ──────────── */
.fl-next,.nextbtn{background:var(--v25-grad)!important;color:#fff!important;border:0!important}
html[data-mode="dark"] .fl-next,html[data-mode="dark"] .nextbtn{color:#06111f!important;box-shadow:0 10px 30px rgba(131,232,255,.22)!important}
.pbar>i,#pFill{background:var(--v25-grad)!important}
/* .ic là emoji — cắt nền theo chữ sẽ biến nó thành khối màu đặc.
Dùng gạch chân dải màu dưới mục đang mở thay vì tô vào biểu tượng. */
.bnav button.on{position:relative}
.bnav button.on::after{content:"";position:absolute;left:22%;right:22%;bottom:6px;height:3px;border-radius:3px;background:var(--v25-grad)}
.lm-switch button.on{background:var(--v25-grad)!important;color:#fff!important}
html[data-mode="dark"] .lm-switch button.on{color:#06111f!important}
/* Nhãn khối giữ mực đặc theo token hệ thống. Không phụ thuộc background-clip:
App-UA có thể nhận CSS gradient nhưng không vẽ lớp chữ đã clip. */
.fl-top b,.hubcard :is(h3,span:where(.hubcard-heading)){background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;color:var(--v25-heading-ink)!important;-webkit-text-fill-color:var(--v25-heading-ink)!important}
/* ── 5. chế độ tối: chữ phát quang ───────────────────────────────────── */
html[data-mode="dark"] .fl-top b,html[data-mode="dark"] .hubcard :is(h3,span:where(.hubcard-heading)){filter:drop-shadow(0 0 16px rgba(140,200,255,.30))}
html[data-mode="dark"] .q-stem{text-shadow:0 0 26px rgba(124,200,245,.26)}
html[data-mode="dark"] .sec-kicker{text-shadow:0 0 13px color-mix(in srgb,var(--v25-warm) 55%,transparent)}
html[data-mode="dark"] .g-ex .jp b,html[data-mode="dark"] .w-ex .jp b{text-shadow:0 0 16px color-mix(in srgb,var(--v25-example) 65%,transparent)}
/* ── 6. dự phòng ─────────────────────────────────────────────────────── */
@media(prefers-reduced-transparency:reduce){
body::before,body::after{display:none}
.hd,#flowBox,.fc-stage,.hub,.exwrap,.chips{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
@media(forced-colors:active){
body::before,body::after{display:none!important}
.fl-next,.nextbtn,.lm-switch button.on{background:Highlight!important;color:HighlightText!important}
.fl-top b,.hubcard :is(h3,span:where(.hubcard-heading)),.bnav button.on .ic{background:none!important;color:CanvasText!important;-webkit-text-fill-color:CanvasText!important}
}
@media print{body::before,body::after{display:none!important}}
/* ══════════════════════════════════════════════════════════════════════
V25.1 — BỐ CỤC: cho tấm kính nổi lên trên cảnh
══════════════════════════════════════════════════════════════════════
Đo ngày 16/08: .app rộng đúng bằng màn hình, #flowBox bo góc 0px và
không lề, .hd tràn viền. Nghĩa là nội dung phủ kín 100% khung nhìn nên
nền cảnh không có chỗ nào lộ ra — đổi màu bao nhiêu cũng vẫn ra tờ giấy.
Lớp này tạo khe: bo góc, thêm lề, giới hạn bề rộng. Không đổi HTML,
không đổi thứ tự đọc, không đụng dữ liệu.
══════════════════════════════════════════════════════════════════════ */
.app{max-width:min(100%,780px)!important;margin:0 auto!important;padding:10px 12px 96px!important}
/* thanh đầu trang: viên kính nổi, không còn dán mép */
.hd{border-radius:20px!important;margin:0 0 12px!important;padding:12px 14px!important;
border:1px solid rgba(255,255,255,.5)!important}
html[data-mode="dark"] .hd{border-color:rgba(186,224,255,.16)!important}
/* khối nội dung chính: bo góc, có lề, để lộ cảnh hai bên và giữa các khối */
#flowBox,.exwrap,.fc-stage,.hub,.chips,#pointList{
border-radius:22px!important;margin:0 0 14px!important;
border:1px solid rgba(255,255,255,.46)!important}
html[data-mode="dark"] #flowBox,html[data-mode="dark"] .exwrap,
html[data-mode="dark"] .fc-stage,html[data-mode="dark"] .hub,
html[data-mode="dark"] .chips,html[data-mode="dark"] #pointList{border-color:rgba(186,224,255,.14)!important}
/* thanh chuyển chế độ học cũng thành viên kính rời */
.lm-switch{border-radius:16px!important;margin:0 0 12px!important;overflow:hidden}
/* Thanh điều hướng dưới: nổi lên khỏi mép, bo tròn.
CHỈ áp ở <=820px. V26 dùng đúng breakpoint này để chuyển .bnav thành thanh
ngang cố định; rộng hơn thì nó là CỘT DỌC bên cạnh. Áp luật thanh ngang cho
mọi kích thước sẽ kéo cột dọc vào giữa màn hình — đúng lỗi bài 16 ngày 16/08. */
@media(max-width:820px){
.bnav{left:50%!important;transform:translateX(-50%)!important;width:min(calc(100% - 24px),756px)!important;
bottom:10px!important;border-radius:20px!important;
border:1px solid rgba(255,255,255,.5)!important;
-webkit-backdrop-filter:blur(24px) saturate(170%)!important;backdrop-filter:blur(24px) saturate(170%)!important}
html[data-mode="dark"] .bnav{border-color:rgba(186,224,255,.16)!important}
}
/* kính đậm hơn để ra chất thuỷ tinh, không phải giấy */
:root{--v25-glass:rgba(252,253,251,.72);--v25-glass-soft:rgba(252,253,251,.58)}
html[data-mode="dark"]{--v25-glass:rgba(8,26,47,.76);--v25-glass-soft:rgba(7,23,42,.62)}
.bnav{background:var(--v25-glass)!important}
/* thẻ bên trong khối thì trong hơn nữa, để thấy tầng lớp */
.wcard,.g-sec,.kb{background:color-mix(in srgb,var(--v25-glass-soft) 86%,transparent)!important}
/* màn rộng: cảnh lộ nhiều hơn ở hai bên */
@media(min-width:900px){ .app{padding:18px 20px 104px!important} }
/* ══════════════════════════════════════════════════════════════════════
V25.2 — CHỮ: đưa font hiển thị vào, đuổi font code ra khỏi nhãn
══════════════════════════════════════════════════════════════════════
Đo 16/08: tiêu đề bài đang là Be Vietnam Pro 16px weight 400 — tức là
font thân bài, cỡ thân bài, đậm thân bài. Không có font hiển thị nào.
Nhãn thì dùng JetBrains Mono, là font lập trình, nên "CHẶNG 1/10" đọc
ra như dòng log chứ không như nhãn của một bài học.
Cặp chữ mới:
· Bricolage Grotesque — tiêu đề, nhãn. Có chân chữ hơi lệch, đọc ra
chất thủ công, hợp với hệ Cinema đang dùng ở trang chủ.
· Be Vietnam Pro — thân bài. Giữ nguyên vì dựng riêng cho dấu tiếng Việt.
· Noto Serif JP — chữ Nhật. Giữ nguyên, vốn đã đúng.
══════════════════════════════════════════════════════════════════════ */
.hd-tt,.hd-tt b,.hd-tt strong{font-family:"Bricolage Grotesque","Be Vietnam Pro",sans-serif!important;
font-size:17px!important;font-weight:600!important;letter-spacing:-.01em!important;line-height:1.25!important}
.hd-kicker{font-family:"Bricolage Grotesque","Be Vietnam Pro",sans-serif!important;font-weight:700!important}
/* nhãn: bỏ font code, dùng khoảng chữ rộng cho ra chất nhãn */
.sec-kicker,.fl-step,.w-num,.g-lbl,.q-label,.fl-hintswipe,.bnav button,.lm-switch button{
font-family:"Bricolage Grotesque","Be Vietnam Pro",sans-serif!important}
.fl-step,.w-num{letter-spacing:.12em!important;font-weight:600!important}
/* tiêu đề trong bài và câu hỏi */
.q-stem,.g-title,.hubcard :is(h3,span:where(.hubcard-heading)),.stat .v{font-family:"Bricolage Grotesque","Be Vietnam Pro",sans-serif!important;
letter-spacing:-.015em!important}
/* nghĩa tiếng Việt của từ: cho nó ra dáng tiêu đề phụ, không phải chú thích */
.w-m{font-family:"Bricolage Grotesque","Be Vietnam Pro",sans-serif!important;font-weight:600!important;
font-size:clamp(19px,2.4vw,23px)!important;letter-spacing:-.01em!important}
/* ══════════════════════════════════════════════════════════════════════
V25.3 — ICON: thay 14 emoji bằng một bộ vector
══════════════════════════════════════════════════════════════════════
Emoji mỗi hệ điều hành vẽ một kiểu, không nhận màu theo chủ đề, và
không bao giờ khớp nét với nhau. Dùng mask-image + SVG data-URI nên
icon ăn theo currentColor, nhận được cả dải màu chữ ký, và KHÔNG phải
sửa một dòng HTML nào của 550 trang.
══════════════════════════════════════════════════════════════════════ */
/* Nút nav là flex container nên phải khoá flex, không thì icon bị co về 0px. */
.bnav .ic{font-size:0!important;line-height:0!important;display:block!important;
width:24px!important;height:24px!important;min-width:24px!important;flex:0 0 24px!important;
margin:0 auto 2px!important;background:currentColor!important;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
/* Học — quyển sách mở */
.bnav button:nth-child(1) .ic{-webkit-mask-image:var(--ic-book);mask-image:var(--ic-book)}
/* Thẻ nhớ — hai thẻ xếp lớp */
.bnav button:nth-child(2) .ic{-webkit-mask-image:var(--ic-cards);mask-image:var(--ic-cards)}
/* Bài tập — bút viết */
.bnav button:nth-child(3) .ic{-webkit-mask-image:var(--ic-pen);mask-image:var(--ic-pen)}
/* Tiến độ — biểu đồ cột */
.bnav button:nth-child(4) .ic{-webkit-mask-image:var(--ic-chart);mask-image:var(--ic-chart)}
/* mục đang mở: icon ăn dải màu chữ ký */
.bnav button.on .ic{background:var(--v25-grad)!important}
:root{
--ic-book:url('data:image/svg+xml;utf8,');
--ic-cards:url('data:image/svg+xml;utf8,');
--ic-pen:url('data:image/svg+xml;utf8,');
--ic-chart:url('data:image/svg+xml;utf8,');
--ic-speaker:url('data:image/svg+xml;utf8,');
}
/* nút loa trên thẻ và cạnh câu ví dụ */
.spk,.exspk,#fcSpk,.ls-play{position:relative}
.spk,#fcSpk{font-size:0!important;color:transparent!important}
.spk::after,#fcSpk::after{content:"";position:absolute;inset:0;margin:auto;width:20px;height:20px;
background:currentColor;color:var(--v25-form);
-webkit-mask:var(--ic-speaker) center/contain no-repeat;mask:var(--ic-speaker) center/contain no-repeat}
html[data-mode="dark"] .spk::after,html[data-mode="dark"] #fcSpk::after{color:var(--v25-form)}
/* dự phòng: máy không hỗ trợ mask thì trả emoji về, còn hơn mất icon */
@supports not ((-webkit-mask-image:url('')) or (mask-image:url(''))){
.bnav .ic{font-size:20px!important;line-height:1!important;background:none!important;width:auto;height:auto}
.spk,#fcSpk{font-size:inherit!important;color:inherit!important}
.spk::after,#fcSpk::after{display:none}
}
@media(forced-colors:active){
.bnav .ic{background:CanvasText!important}
.bnav button.on .ic{background:Highlight!important}
}
/* ── V25.3b — vét nốt 8 emoji còn lại ────────────────────────────────── */
:root{
--ic-doc:url('data:image/svg+xml;utf8,');
--ic-moon:url('data:image/svg+xml;utf8,');
--ic-sun:url('data:image/svg+xml;utf8,');
--ic-flow:url('data:image/svg+xml;utf8,');
--ic-list:url('data:image/svg+xml;utf8,');
--ic-flame:url('data:image/svg+xml;utf8,');
}
/* helper: biến một nút chữ thành nút icon */
.hd-mode,.lm-switch button{position:relative}
.hd-mode{font-size:0!important;color:transparent!important}
.hd-mode::after{content:"";position:absolute;inset:0;margin:auto;width:21px;height:21px;
background:var(--v25-ink,currentColor);color:inherit;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
-webkit-mask-size:contain;mask-size:contain}
.hd-row a.hd-mode::after{-webkit-mask-image:var(--ic-doc);mask-image:var(--ic-doc)}
#modeBtn::after{-webkit-mask-image:var(--ic-moon);mask-image:var(--ic-moon)}
html[data-mode="dark"] #modeBtn::after{-webkit-mask-image:var(--ic-sun);mask-image:var(--ic-sun)}
/* Nút được đặt color:transparent để giấu emoji, nên currentColor cũng trong
suốt theo — icon biến mất. Phải cho màu tường minh, không dùng currentColor. */
.hd-mode::after{background:#1d3a52!important}
html[data-mode="dark"] .hd-mode::after{background:#dbeaf7!important}
/* ĐÃ BỎ 16/08: ba nút dưới đây có emoji nằm CHUNG text node với chữ
("🔉 nghe câu", "🔥 1 ngày", "🧩 Học theo chặng"). CSS không giấu riêng
được một ký tự trong text node, nên chèn ::before sẽ ra hai icon chồng
nhau. Muốn thay thì phải bỏ emoji trong HTML — để lượt rollout riêng,
có kiểm soát, chứ không hack bằng text-indent. */
@supports not ((-webkit-mask-image:url('')) or (mask-image:url(''))){
.hd-mode{font-size:inherit!important;color:inherit!important}
.hd-mode::after,.lm-switch button::before,.exspk::before,#xpTxt::before{display:none}
.lm-switch button{padding-left:inherit!important}
.exspk{padding-left:inherit!important}
#xpTxt{padding-left:0}
}
/* ══════════════════════════════════════════════════════════════════════
V25.4 — SÁNG HƠN · NHIỀU MÀU HƠN · MẶT KÍNH SOI
══════════════════════════════════════════════════════════════════════
Ba việc anh Trí yêu cầu:
(a) Mặt kính soi — làm trong canary rồi nhưng quên bê sang lớp da này.
(b) Sáng hơn — lớp phủ đang đè 72% ở đáy nên cảnh bị dập, kính lại đục
76% nên cả trang ra một mảng navy phẳng.
(c) Nhiều màu hơn — panel đang trung tính hoàn toàn, màu chỉ nằm ở
vài nhãn nhỏ. Giờ chính tấm kính cũng mang màu.
══════════════════════════════════════════════════════════════════════ */
/* ── (b) nhả cảnh ra, bớt đè ──────────────────────────────────────────── */
:root{
--v25-veil:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(240,247,252,.02) 46%,rgba(206,224,238,.28) 100%);
--v25-glass:rgba(253,254,252,.60);
--v25-glass-soft:rgba(253,254,252,.44);
}
html[data-mode="dark"]{
--v25-veil:linear-gradient(180deg,rgba(1,5,14,0) 0%,rgba(3,12,26,.10) 50%,rgba(3,11,24,.44) 100%);
--v25-glass:rgba(12,34,60,.58);
--v25-glass-soft:rgba(11,31,55,.44);
}
/* cảnh rực hơn thay vì bị dập */
body::before{filter:saturate(1.22) contrast(1.06) brightness(1.04)}
html[data-mode="dark"] body::before{filter:saturate(1.24) contrast(1.05) brightness(1.12)}
/* ── (c) tấm kính mang màu, không còn trung tính ──────────────────────── */
#flowBox,.exwrap{
background:
radial-gradient(120% 80% at 6% 0%,color-mix(in srgb,var(--v25-open) 16%,transparent),transparent 58%),
radial-gradient(110% 70% at 96% 100%,color-mix(in srgb,var(--v25-example) 13%,transparent),transparent 56%),
var(--v25-glass-soft)!important}
.hd{background:
linear-gradient(112deg,color-mix(in srgb,var(--v25-open) 15%,transparent),color-mix(in srgb,var(--v25-check) 11%,transparent) 62%,transparent),
var(--v25-glass)!important}
.bnav{background:
linear-gradient(112deg,color-mix(in srgb,var(--v25-check) 13%,transparent),color-mix(in srgb,var(--v25-example) 10%,transparent) 70%,transparent),
var(--v25-glass)!important}
.fc-stage,.hub,.chips,#pointList{background:
radial-gradient(120% 80% at 8% 0%,color-mix(in srgb,var(--v25-form) 14%,transparent),transparent 56%),
var(--v25-glass-soft)!important}
/* viền cũng ăn màu, không còn viền trắng vô hồn */
#flowBox,.exwrap{border:1px solid color-mix(in srgb,var(--v25-open) 30%,transparent)!important}
.hd{border:1px solid color-mix(in srgb,var(--v25-check) 26%,transparent)!important}
.bnav{border:1px solid color-mix(in srgb,var(--v25-example) 24%,transparent)!important}
/* ── (a) mặt kính soi: vệt loé chéo + mép dày ─────────────────────────── */
/* .hd dùng position:sticky và .bnav dùng position:fixed — KHÔNG được đặt
position:relative cho chúng, nếu không thanh đầu trang mất tính năng dính
và thanh dưới rơi khỏi đáy màn hình. Chỉ cho overflow. */
#flowBox,.exwrap,.fc-stage,.hub,.lm-switch,.wcard,.g-sec{position:relative;overflow:hidden}
.hd,.bnav{overflow:hidden}
.hd::before,#flowBox::before,.exwrap::before,.fc-stage::before,.hub::before,.bnav::before,.wcard::before{
content:"";position:absolute;left:0;right:0;top:0;height:54%;pointer-events:none;z-index:0;
background:linear-gradient(168deg,rgba(255,255,255,.50),rgba(255,255,255,.12) 44%,transparent);
mix-blend-mode:soft-light}
html[data-mode="dark"] .hd::before,html[data-mode="dark"] #flowBox::before,
html[data-mode="dark"] .exwrap::before,html[data-mode="dark"] .fc-stage::before,
html[data-mode="dark"] .hub::before,html[data-mode="dark"] .bnav::before,
html[data-mode="dark"] .wcard::before{
background:linear-gradient(168deg,rgba(200,236,255,.30),rgba(180,220,255,.08) 46%,transparent)}
/* mép trên sáng, mép dưới tối — cho ra cảm giác kính có độ dày */
.hd,#flowBox,.exwrap,.fc-stage,.hub,.bnav{
box-shadow:0 20px 60px rgba(20,44,68,.16),
inset 0 1px 0 rgba(255,255,255,.72),
inset 0 -1px 0 rgba(12,34,54,.10)!important}
html[data-mode="dark"] .hd,html[data-mode="dark"] #flowBox,html[data-mode="dark"] .exwrap,
html[data-mode="dark"] .fc-stage,html[data-mode="dark"] .hub,html[data-mode="dark"] .bnav{
box-shadow:0 22px 70px rgba(0,5,15,.44),
inset 0 1px 0 rgba(198,232,255,.34),
inset 0 -1px 0 rgba(0,0,0,.34)!important}
/* kính dày hơn: blur mạnh, saturate cao → màu sau kính rực lên */
.hd,.bnav{-webkit-backdrop-filter:blur(30px) saturate(200%)!important;backdrop-filter:blur(30px) saturate(200%)!important}
#flowBox,.exwrap,.fc-stage,.hub{-webkit-backdrop-filter:blur(22px) saturate(185%)!important;backdrop-filter:blur(22px) saturate(185%)!important}
/* chữ và nội dung phải nằm TRÊN vệt loé */
.hd>*,#flowBox>*,.exwrap>*,.fc-stage>*,.hub>*,.bnav>*,.wcard>*{position:relative;z-index:1}
@media(prefers-reduced-transparency:reduce){
.hd::before,#flowBox::before,.exwrap::before,.fc-stage::before,
.hub::before,.bnav::before,.wcard::before{display:none}
}
@media(forced-colors:active){
.hd::before,#flowBox::before,.exwrap::before,.fc-stage::before,
.hub::before,.bnav::before,.wcard::before{display:none!important}
}
/* ══════════════════════════════════════════════════════════════════════
V25.5 — THẺ TỪ VỰNG: dựng lại phân cấp
══════════════════════════════════════════════════════════════════════
Anh Trí: "thẻ từ vựng quá đơn điệu, tạo cảm giác không có tâm."
Đúng. Đo ra thì thẻ chỉ là một chồng phần tử canh giữa, không phân cấp:
ảnh minh hoạ 220x165 chiếm chỗ lớn nhất, chữ Hán 64px thì trôi giữa,
nhãn từ loại 11,8px một màu xanh chết, nghĩa tiếng Việt 21,6px lọt thỏm,
ví dụ là hộp viền trơn. Không có gì dẫn mắt.
Xếp lại thứ bậc: chữ Hán là nhân vật chính → nghĩa là câu trả lời →
từ loại là chỉ dẫn phụ nhưng có màu riêng → ví dụ là khối tách bạch.
══════════════════════════════════════════════════════════════════════ */
/* số thứ tự: từ nhãn xám cô đơn thành viên đếm mang dải màu */
.w-num{display:inline-flex!important;align-items:center;padding:4px 11px!important;
border-radius:999px!important;background:var(--v25-grad)!important;color:#fff!important;
font-weight:700!important;letter-spacing:.08em!important;box-shadow:0 4px 14px rgba(20,60,110,.22)}
html[data-mode="dark"] .w-num{color:#06111f!important}
/* ảnh minh hoạ: có khung, có vầng sáng, ra dáng được đặt vào chứ không dán vào */
.w-photo{border-radius:18px!important;
box-shadow:0 14px 34px rgba(18,44,66,.20),0 0 0 1px rgba(255,255,255,.55) inset!important}
html[data-mode="dark"] .w-photo{box-shadow:0 16px 40px rgba(0,6,16,.5),0 0 0 1px rgba(186,224,255,.18) inset!important}
/* chữ Hán là nhân vật chính */
.w-kanji{font-size:clamp(66px,17vw,92px)!important;line-height:1.12!important}
html[data-mode="dark"] .w-kanji{text-shadow:0 0 34px rgba(124,200,245,.26),0 0 70px rgba(201,166,255,.14)}
.w-kanji rt{font-size:.30em!important;letter-spacing:.16em!important;color:var(--v25-warm)!important;font-weight:600!important}
/* nghĩa tiếng Việt: câu trả lời, phải to và chắc */
.w-mean{font-size:clamp(24px,5.4vw,30px)!important;font-weight:700!important;
letter-spacing:-.015em!important;line-height:1.25!important;
background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;
color:var(--v25-heading-ink)!important;-webkit-text-fill-color:var(--v25-heading-ink)!important}
html[data-mode="dark"] .w-mean{filter:drop-shadow(0 0 18px rgba(140,200,255,.28))}
/* ── từ loại: mỗi nhóm một màu, nhìn là biết ─────────────────────────── */
/* V26 tô màu .tag qua selector có html[data-mode] nên độ ưu tiên cao hơn
.tag.pos — phải viết đủ cả html[...] mới thắng được. */
html .tag.pos,html[data-mode="dark"] .tag.pos{
font-size:13px!important;font-weight:700!important;letter-spacing:.04em!important;
padding:5px 13px!important;border-radius:999px!important;
border:1px solid color-mix(in srgb,var(--pos,var(--v25-warm)) 45%,transparent)!important;
background:color-mix(in srgb,var(--pos,var(--v25-warm)) 15%,transparent)!important;
color:var(--pos,var(--v25-warm))!important}
html .tag.pos[data-nhom="danh-tu"],html[data-mode="dark"] .tag.pos[data-nhom="danh-tu"] {--pos:var(--v25-open)}
html .tag.pos[data-nhom="dong-tu"],html[data-mode="dark"] .tag.pos[data-nhom="dong-tu"] {--pos:var(--v25-form)}
html .tag.pos[data-nhom="tinh-tu"],html[data-mode="dark"] .tag.pos[data-nhom="tinh-tu"] {--pos:var(--v25-example)}
html .tag.pos[data-nhom="pho-tu"],html[data-mode="dark"] .tag.pos[data-nhom="pho-tu"] {--pos:var(--v25-check)}
html .tag.pos[data-nhom="dai-tu"],html[data-mode="dark"] .tag.pos[data-nhom="dai-tu"] {--pos:var(--v25-open)}
html .tag.pos[data-nhom="giao-tiep"],html[data-mode="dark"] .tag.pos[data-nhom="giao-tiep"]{--pos:var(--v25-warm)}
html .tag.pos[data-nhom="phu-to"],html[data-mode="dark"] .tag.pos[data-nhom="phu-to"] {--pos:var(--v25-warm)}
/* ── ví dụ: thành khối riêng có nhãn, không còn là hộp viền trơn ─────── */
.w-ex{position:relative;padding:26px 16px 16px!important;border-radius:16px!important;
border:1px solid color-mix(in srgb,var(--v25-example) 26%,transparent)!important;
border-left:3px solid var(--v25-example)!important;
background:linear-gradient(102deg,color-mix(in srgb,var(--v25-example) 9%,transparent),transparent 64%),
var(--v25-glass-soft)!important}
.w-ex::before{content:"VÍ DỤ";position:absolute;left:16px;top:8px;
font-family:"Bricolage Grotesque","Be Vietnam Pro",sans-serif;
font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--v25-example);opacity:.85}
.w-ex .jp{font-size:clamp(20px,4.6vw,24px)!important;line-height:2!important}
/* nút "đã thuộc": hành động chính của thẻ, cho nó có mặt */
.knowbtn{border:1px solid color-mix(in srgb,var(--v25-form) 40%,transparent)!important;
background:color-mix(in srgb,var(--v25-form) 12%,transparent)!important;
color:var(--v25-form)!important;font-weight:700!important}
.knowbtn:hover{background:color-mix(in srgb,var(--v25-form) 20%,transparent)!important}
@media(forced-colors:active){
.w-num,.w-mean{background:none!important;color:CanvasText!important;-webkit-text-fill-color:CanvasText!important}
.tag.pos{border-color:CanvasText!important;color:CanvasText!important;background:Canvas!important}
.w-ex::before{color:CanvasText}
}
/* ══════════════════════════════════════════════════════════════════════
V25.6 — TỪ ĐANG HỌC ĐƯỢC TÔ TRONG CÂU · NỀN TRONG HẲN
══════════════════════════════════════════════════════════════════════ */
/* Từ vừa học, tô ngay trong câu ví dụ để thấy mối liên hệ */
mark.tl-v25-target{background:linear-gradient(180deg,transparent 58%,color-mix(in srgb,var(--v25-example) 32%,transparent) 58%)!important;
color:var(--v25-example)!important;font-weight:700;padding:0 2px;border-radius:3px}
html[data-mode="dark"] mark.tl-v25-target{color:var(--v25-example)!important;
text-shadow:0 0 16px color-mix(in srgb,var(--v25-example) 60%,transparent)}
mark.tl-v25-target rt{color:var(--v25-warm)!important}
/* Mẫu ngữ pháp được nhấn trong ví dụ cũng dùng đúng ngôn ngữ đó */
.g-ex .jp b,.w-ex .jp b,.tl-micro-jp b{color:var(--v25-example)!important;font-weight:700!important;
background:linear-gradient(180deg,transparent 58%,color-mix(in srgb,var(--v25-example) 30%,transparent) 58%)}
/* ── nền trong hẳn: đã có ảnh nền thì phải thấy ảnh nền ───────────────── */
:root{--v25-glass:rgba(253,254,252,.42);--v25-glass-soft:rgba(253,254,252,.26)}
html[data-mode="dark"]{--v25-glass:rgba(12,34,60,.40);--v25-glass-soft:rgba(11,31,55,.26)}
/* trong hơn thì phải bù bằng blur mạnh, nếu không chữ sẽ bơi trên ảnh */
#flowBox,.exwrap,.fc-stage,.hub{-webkit-backdrop-filter:blur(34px) saturate(190%)!important;backdrop-filter:blur(34px) saturate(190%)!important}
.hd,.bnav{-webkit-backdrop-filter:blur(38px) saturate(210%)!important;backdrop-filter:blur(38px) saturate(210%)!important}
/* thẻ từ trong lồng: trong nhất, để nhìn xuyên tới ảnh nền */
.wcard,.g-sec,.kb{background:transparent!important;border:1px solid color-mix(in srgb,var(--v25-open) 18%,transparent)!important}
/* chữ phải dày dạn hơn để đứng vững trên nền trong */
html[data-mode="dark"] .w-kanji,html[data-mode="dark"] .q-stem,html[data-mode="dark"] .g-title{
text-shadow:0 2px 18px rgba(0,8,20,.7),0 0 34px rgba(124,200,245,.24)}
html:not([data-mode="dark"]) .w-kanji,html:not([data-mode="dark"]) .q-stem{
text-shadow:0 1px 0 rgba(255,255,255,.8)}
/* ══════════════════════════════════════════════════════════════════════
V25.7 — ba chỗ anh Trí chỉ ra
══════════════════════════════════════════════════════════════════════ */
/* 1 ── Thanh đầu trang thôi bám theo.
Nó vốn sticky từ V26, nhưng khi em bo góc và tách khỏi mép thì nó thành
một cái hộp trôi theo mắt, gây khó chịu. Cho nó cuộn đi cùng nội dung. */
.hd{position:static!important;top:auto!important}
/* 2 ── Chữ phiên âm わたし bị dính nền của thẻ đánh dấu.
bọc cả cụm nên nền phủ lên cả phần