/* =============================================================================
   KHỐI NỘI DUNG BÀI HỌC, bộ trang trí cho mọi thứ bai-hoc.js in ra.
   Dùng chung cho trang học (learn.html) và khung xem trước của trình soạn
   (quan-tri-khoa-hoc.html). CSS BỐ CỤC TRANG HỌC (lưới hai cột, cột trái, hàng tab,
   thẻ phần) nằm ở assets/css/pages/hoc-bai.4d654fac.css, không ở đây.

   11/09/2026, BỐ CỤC TUTOPIYA (sandbox/dac-ta-giao-dien-kieu-tutopiya.md): cấu trúc
   và thành phần theo trang mẫu Tutopiya, MÀU VÀ FONT CỦA VPATH theo bảng đổi màu
   trong đặc tả:
     màu nhấn (thanh tiến độ, chữ "N left", nhãn hộp xanh)  navy-700
     AT A GLANCE / ANSWER / HOW TO AVOID IT / Examiner keyword  gold-50 nền, gold-200 viền, gold-700 nhãn
     QUICK RECAP / WHEN TO USE                            navy-50 nền, navy-100 viền, navy-700 nhãn
     MEMORISE THIS                                        paper-dim nền, --ao-vien viền
     SEE ALSO / hộp công thức / thẻ Step / thanh FAQ      paper
     chip, chip số                                        paper-dim
     thẻ worked example                                   navy-50 nền, navy-100 viền
     thẻ lỗi                                              trắng, --ao-vien, viền trái 3px gold-500,
                                                          dấu x red-600 trên red-50 (lớp Tailwind, màu TRẠNG THÁI)
     link chữ                                             navy-700 đậm, gạch chân gold-500
   Không teal, không gradient, không blob. Bán kính: hộp var(--ao-r-nho), hộp nhỏ và nút
   tròn 10px/999px. Cạnh nào mang vạch màu thì vuông (luật cũ của bộ áo). Mọi màu viết
   bằng var(); màu nào không có token CSS (đỏ trạng thái) thì dùng lớp Tailwind có sẵn
   trong markup thay vì chép hex vào đây.
   ============================================================================= */

/* ---- Khung bài viết Detailed Notes: bai-hoc.js bọc cả phần ghiChu trong nó ---- */
.bai-hoc-bai-viet {
    padding: 28px 28px 24px;
    background: var(--trang);
    border: 1px solid var(--ao-vien);
    border-radius: var(--ao-r-nho);
    color: var(--ao-chu);
}
.bai-hoc-bai-viet > :first-child { margin-top: 0; }
.bai-hoc-bai-viet > :last-child { margin-bottom: 0; }

/* ---- Tên bài viết (khối title) + dòng dẫn ---- */
.bai-hoc-bv-dau { margin: 0 0 22px; }
.bai-hoc-bv-ten {
    margin: 0;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 800;
    color: var(--navy-900);
}
/* Không đặt max-width cho dòng dẫn và đoạn văn (12/09/2026): trang mẫu Tutopiya để chữ chạy hết
   bề ngang bài viết, và đoạn văn ngắn hơn gạch đầu dòng ngay dưới nó làm mép phải lởm chởm. */
.bai-hoc-bv-dan {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--ao-chu-nhat);
}

/* ---- Tiêu đề mục: hairline mở mục, mốc vàng đè lên hairline ----
   Sức nặng lấy từ weight 800 và mốc chứ không từ cỡ chữ (18px như mục của Tutopiya).
   Mốc đặt tại left:0 chứ KHÔNG thò ra lề âm: khung xem trước của trình soạn có
   overflow-y:auto nên trục ngang tự thành auto, mọi thứ thò ra lề sẽ đẻ thanh cuộn ngang.
   scroll-margin-top: mục lục IN THIS NOTE nhảy tới heading, mà trang học có header và hàng
   tab dính che mép trên; trang đặt --hoc-bai-cuon nếu cần con số khác. */
.question-heading {
    position: relative;
    margin: 40px 0 16px;
    padding-top: 22px;
    border-top: 1px solid var(--ao-vien);
    font-size: 18px;
    line-height: 1.35;
    font-weight: 800;
    color: var(--navy-900);
    scroll-margin-top: var(--hoc-bai-cuon, 150px);
}
.question-heading::before {
    content: '';
    position: absolute;
    left: 0;
    top: -1px;                /* vạch 3px đè lên hairline 1px rồi thò xuống 2px */
    width: 36px;
    height: 3px;
    background: var(--gold-500);
}
.question-heading:first-child { margin-top: 4px; padding-top: 0; border-top: 0; }
.question-heading:first-child::before { content: none; }
/* Dòng phụ dưới tiêu đề (heading.sub): "Rewrite as a(x+h)²+k." */
.question-heading__phu {
    margin: -10px 0 16px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ao-chu-nhat);
}

/* ---- Đoạn văn ---- */
.bai-hoc-doan {
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 1.75;
    color: var(--ao-chu);
}
.bai-hoc-doan b { color: var(--navy-900); }

/* ---- Gạch đầu dòng thân bài: chữ chảy, KHÔNG vỏ, ô vuông vàng ---- */
.note-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 1.75;
    color: var(--ao-chu);
}
.note-list > li { position: relative; padding-left: 24px; margin-bottom: 8px; }
.note-list > li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 0.68em;
    width: 7px;
    height: 7px;
    background: var(--gold-500);   /* trên nền trắng 3,05:1, đạt ngưỡng 3:1 của đồ hoạ */
}
.note-list b { color: var(--navy-900); font-weight: 700; }

/* ---- Danh sách ĐÁNH SỐ (bullets style 'number'): các bước của một phương pháp ---- */
.bai-hoc-so {
    list-style: none;
    counter-reset: bai-hoc-so;
    padding: 0;
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--ao-chu);
}
.bai-hoc-so > li {
    counter-increment: bai-hoc-so;
    position: relative;
    padding-left: 34px;
    margin-bottom: 10px;
}
.bai-hoc-so > li::before {
    content: counter(bai-hoc-so);
    position: absolute;
    left: 0;
    top: 0.15em;
    width: 22px;
    height: 22px;
    border-radius: var(--ao-r-vien-thuoc);
    background: var(--paper-dim);
    font-size: 12px;
    line-height: 22px;
    font-weight: 800;
    text-align: center;
    color: var(--navy-900);
    font-variant-numeric: tabular-nums;
}
.bai-hoc-so b { color: var(--navy-900); }

/* ---- Danh sách dấu tick = DANH SÁCH KẾT QUẢ, có vỏ khung viền ---- */
.bai-hoc-check {
    list-style: none;
    margin: 22px 0;
    padding: 16px 20px;
    background: var(--trang);
    border: 1px solid var(--ao-vien);
    border-radius: var(--ao-r-nho);
    font-size: 16px;
    line-height: 1.75;
}
.bai-hoc-check > li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 8px;
    color: var(--ao-chu);
}
.bai-hoc-check > li:last-child { margin-bottom: 0; }
.bai-hoc-check b { color: var(--navy-900); }
/* (0,1,3) nên thắng .text-gold-600 và .text-xs mà bộ dựng in ra, không phải sửa JS */
.bai-hoc-check > li > i { color: var(--gold-600); font-size: 13px; margin-top: 4px; }

/* =============================================================================
   HỘP NHÃN (khối box): At a glance, What you'll learn, Quick recap, Memorise this,
   How it's examined, See also; và dòng Sources chữ nhỏ.
   ============================================================================= */
.bai-hoc-hop {
    container-type: inline-size;
    margin: 22px 0;
    padding: 20px;
    background: var(--trang);
    border: 1px solid var(--ao-vien);
    border-radius: var(--ao-r-nho);
    font-size: 15px;
    line-height: 1.7;
    color: var(--ao-chu);
}
.bai-hoc-hop__nhan {
    margin: 0 0 10px;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--navy-700);
}
.bai-hoc-hop__phu {
    margin: -6px 0 12px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--stone-600);
}
.bai-hoc-hop__chu { margin: 0 0 10px; }
.bai-hoc-hop__chu:last-child { margin-bottom: 0; }
.bai-hoc-hop b { color: var(--navy-900); }
.bai-hoc-hop__ds {
    list-style: none;
    margin: 0;
    padding: 0;
}
.bai-hoc-hop__ds > li { position: relative; padding-left: 20px; margin-bottom: 6px; }
.bai-hoc-hop__ds > li:last-child { margin-bottom: 0; }
.bai-hoc-hop__ds > li::before {
    content: '';
    position: absolute;
    left: 1px;
    top: 0.7em;
    width: 6px;
    height: 6px;
    background: var(--navy-700);
}
/* Hàng thuật ngữ + nội dung (Memorise this: tên + công thức). Hai cột khi hộp đủ rộng. */
.bai-hoc-hop__hang { display: grid; gap: 8px; margin: 0; }
.bai-hoc-hop__hang > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 16px; }
.bai-hoc-hop__hang dt { font-weight: 700; color: var(--navy-900); }
.bai-hoc-hop__hang dd { margin: 0; min-width: 0; overflow-x: auto; overflow-y: hidden; }
@container (min-width: 30rem) {
    .bai-hoc-hop__hang > div { grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr); align-items: baseline; }
}
.bai-hoc-hop__lien { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.bai-hoc-hop--glance { background: var(--gold-50); border-color: var(--gold-200); }
.bai-hoc-hop--glance .bai-hoc-hop__nhan { color: var(--gold-700); }
/* ô vuông gold-600 trên gold-50: 3,48:1, navy-700 cũng đạt nhưng hộp vàng đi với mốc vàng */
.bai-hoc-hop--glance .bai-hoc-hop__ds > li::before { background: var(--gold-600); }
.bai-hoc-hop--recap { background: var(--navy-50); border-color: var(--navy-100); }
.bai-hoc-hop--memorise { background: var(--paper-dim); }
.bai-hoc-hop--seealso { background: var(--paper); }

/* Dòng Sources: chữ nhỏ cuối bài, không hộp. 12px nên theo luật tiếp cận là stone-600. */
.bai-hoc-nguon {
    margin: 22px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--stone-600);
}
.bai-hoc-nguon b { font-weight: 700; color: var(--ao-chu); }

/* ---- Mục lục IN THIS NOTE: bai-hoc.js tự sinh từ heading của Detailed Notes ---- */
.bai-hoc-muc-luc {
    container-type: inline-size;
    margin: 22px 0;
    padding: 16px;
    background: var(--trang);
    border: 1px solid var(--ao-vien);
    border-radius: var(--ao-r-nho);
}
.bai-hoc-muc-luc__nhan {
    margin: 0 0 8px 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--navy-700);
}
.bai-hoc-muc-luc__ds {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
@container (min-width: 32rem) {
    .bai-hoc-muc-luc__ds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.bai-hoc-muc-luc__muc {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--navy-800);
    text-decoration: none;
    transition: background-color var(--ao-nhanh), color var(--ao-nhanh);
}
.bai-hoc-muc-luc__muc:hover { background: var(--paper); color: var(--navy-900); }
.bai-hoc-muc-luc__so {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: var(--ao-r-vien-thuoc);
    background: var(--paper-dim);
    font-size: 11px;
    font-weight: 800;
    color: var(--navy-900);
    font-variant-numeric: tabular-nums;
}

/* ---- Thẻ biến đổi từng dòng (khối derivation) ---- */
.bai-hoc-bien-doi {
    margin: 22px 0;
    padding: 18px 20px;
    background: var(--paper);
    border: 1px solid var(--ao-vien);
    border-radius: var(--ao-r-nho);
}
.bai-hoc-bien-doi__ds { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bai-hoc-bien-doi__bt {
    font-size: 17px;
    line-height: 1.6;
    color: var(--navy-900);
    overflow-x: auto;
    overflow-y: hidden;
}
.bai-hoc-bien-doi__chu {
    margin: 2px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--stone-600);
}
.bai-hoc-bien-doi__kq {
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--ao-vien);
    font-size: 16px;
    font-weight: 700;
    color: var(--navy-900);
    overflow-x: auto;
    overflow-y: hidden;
}
.bai-hoc-bien-doi__chan {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ao-chu);
}

/* =============================================================================
   ĐỒ THỊ (khối graph): SVG do bai-hoc.js vẽ từ số. Màu đặt ở đây bằng var() vì thuộc
   tính trình bày của SVG không nhận var(), còn thuộc tính CSS thì nhận.
   ============================================================================= */
.bai-hoc-do-thi { container-type: inline-size; margin: 24px 0; }
.bai-hoc-do-thi__luoi {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}
/* Một khung: giữ bề ngang vừa phải, không để đồ thị phình hết cột 900px và chữ trục to theo. */
.bai-hoc-do-thi__luoi[data-so-khung="1"] { max-width: 27rem; }
/* Hai, ba khung khi phải đứng MỘT cột (hình hẹp): cũng giữ mỗi khung vừa phải. Không giữ thì ba khung
   phình hết bề ngang, chữ số trục lên 20px và cả hình cao gần 1.500px (đo 11/09/2026 ở 768 và 1024).
   Hình từ 34rem thì hai cột (ba khung thành 2 + 1), từ 46rem thì ba khung một hàng. */
.bai-hoc-do-thi__luoi[data-so-khung="2"],
.bai-hoc-do-thi__luoi[data-so-khung="3"] { max-width: 22rem; }
@container (min-width: 34rem) {
    .bai-hoc-do-thi__luoi[data-so-khung="2"],
    .bai-hoc-do-thi__luoi[data-so-khung="3"] { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 46rem) {
    .bai-hoc-do-thi__luoi[data-so-khung="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Mỗi khung là một container riêng: cỡ chữ trong SVG chọn theo bề ngang THẬT của khung (xem khối
   @container ngay dưới các lớp màu). */
.bai-hoc-do-thi__khung {
    container-type: inline-size;
    min-width: 0;
    padding: 12px 12px 8px;
    background: var(--trang);
    border: 1px solid var(--ao-vien);
    border-radius: var(--ao-r-nho);
}
.bai-hoc-do-thi__ten {
    margin: 0 4px 2px;
    font-size: 14px;
    font-weight: 700;
    color: var(--navy-900);
}
.bai-hoc-do-thi__phu {
    margin: 0 4px 6px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--stone-600);
}
.bai-hoc-do-thi__svg { display: block; width: 100%; height: auto; overflow: visible; }
.bai-hoc-do-thi__vach { stroke: var(--ao-vien); stroke-width: 1; }
.bai-hoc-do-thi__truc { stroke: var(--ao-chu); stroke-width: 1.25; }
/* Chữ số trục và tên trục cũng mang viền trắng như nhãn: đường cong, điểm và vùng tô đi ngang qua chúng
   ở cả bốn đồ thị của Quadratics (đo 11/09/2026: tám chữ số bị nét cong cắt ngang). */
.bai-hoc-do-thi__so {
    fill: var(--stone-600);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    paint-order: stroke;
    stroke: var(--trang);
    stroke-width: 3px;
    stroke-linejoin: round;
}
.bai-hoc-do-thi__ten-truc {
    fill: var(--ao-chu);
    font-size: 12px;
    font-style: italic;
    font-weight: 600;
    paint-order: stroke;
    stroke: var(--trang);
    stroke-width: 3px;
    stroke-linejoin: round;
}
.bai-hoc-do-thi__vung { fill: var(--gold-100); opacity: .9; }
.bai-hoc-do-thi__thang { stroke: var(--navy-500); stroke-width: 1.75; }
.bai-hoc-do-thi__thang--dung { stroke: var(--navy-300); stroke-dasharray: 5 4; }
.bai-hoc-do-thi__cong { fill: none; stroke: var(--navy-700); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.bai-hoc-do-thi__diem { fill: var(--navy-700); stroke: var(--trang); stroke-width: 1.5; }
.bai-hoc-do-thi__diem--dac-biet { fill: var(--gold-600); }
/* Nhãn có viền trắng (paint-order) để đọc được khi đè lên lưới hay đường cong. */
.bai-hoc-do-thi__nhan {
    fill: var(--navy-900);
    font-size: 11px;
    font-weight: 700;
    paint-order: stroke;
    stroke: var(--trang);
    stroke-width: 3px;
    stroke-linejoin: round;
}
/* CỠ CHỮ THEO BỀ NGANG THẬT CỦA KHUNG. Chữ trong SVG tính bằng đơn vị viewBox, nên cỡ trên màn hình =
   cỡ trong SVG x (bề ngang SVG / bề ngang viewBox). Cỡ gốc ở trên (10 / 11 / 12) chỉ đúng khi SVG rộng
   xấp xỉ viewBox của nó; điện thoại 375px vẽ viewBox 360 vào 251px nên chữ số trục còn 7px (đo 11/09).
   Container query đo content box của khung, tức đúng bề ngang SVG, nên ngưỡng dưới đây là bề ngang SVG
   để tỉ lệ co còn khoảng 0,82 (phóng 1,2 lần) và dưới đó (phóng 1,5 lần). Hai loại viewBox co theo hai
   tỉ lệ khác nhau nên có ngưỡng riêng: 360 (một, hai khung) và 270 (ba khung, lớp --hep). Độ lệch của
   chữ khỏi trục và khỏi điểm viết bằng em trong bai-hoc.js nên đi theo cỡ chữ mới. */
@container (max-width: 363px) {
    .bai-hoc-do-thi__svg:not(.bai-hoc-do-thi__svg--hep) .bai-hoc-do-thi__so { font-size: 12px; }
    .bai-hoc-do-thi__svg:not(.bai-hoc-do-thi__svg--hep) .bai-hoc-do-thi__nhan { font-size: 13px; }
    .bai-hoc-do-thi__svg:not(.bai-hoc-do-thi__svg--hep) .bai-hoc-do-thi__ten-truc { font-size: 14px; }
}
@container (max-width: 294px) {
    .bai-hoc-do-thi__svg:not(.bai-hoc-do-thi__svg--hep) .bai-hoc-do-thi__so { font-size: 15px; }
    .bai-hoc-do-thi__svg:not(.bai-hoc-do-thi__svg--hep) .bai-hoc-do-thi__nhan { font-size: 16px; }
    .bai-hoc-do-thi__svg:not(.bai-hoc-do-thi__svg--hep) .bai-hoc-do-thi__ten-truc { font-size: 17px; }
}
@container (max-width: 272px) {
    .bai-hoc-do-thi__svg--hep .bai-hoc-do-thi__so { font-size: 12px; }
    .bai-hoc-do-thi__svg--hep .bai-hoc-do-thi__nhan { font-size: 13px; }
    .bai-hoc-do-thi__svg--hep .bai-hoc-do-thi__ten-truc { font-size: 14px; }
}
@container (max-width: 220px) {
    .bai-hoc-do-thi__svg--hep .bai-hoc-do-thi__so { font-size: 15px; }
    .bai-hoc-do-thi__svg--hep .bai-hoc-do-thi__nhan { font-size: 16px; }
    .bai-hoc-do-thi__svg--hep .bai-hoc-do-thi__ten-truc { font-size: 17px; }
}

/* =============================================================================
   KEY FORMULAE: mỗi công thức một thẻ (tên, công thức hàng riêng, chú giải ký hiệu,
   hộp WHEN TO USE).
   ============================================================================= */
.bai-hoc-cong-thuc { display: grid; gap: 14px; margin: 0 0 22px; }
.bai-hoc-ct {
    min-width: 0;
    padding: 16px;
    background: var(--trang);
    border: 1px solid var(--ao-vien);
    border-radius: var(--ao-r-nho);
}
.bai-hoc-ct__ten {
    margin: 0 0 10px;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 700;
    color: var(--navy-900);
}
/* Công thức: hộp giấy, cỡ chữ lớn, cuộn ngang khi dài hơn thẻ. */
.bai-hoc-ct__cong {
    padding: 12px 16px;
    background: var(--paper);
    border-radius: 10px;
    font-size: 17px;
    line-height: 1.6;
    color: var(--navy-900);
    overflow-x: auto;
    overflow-y: hidden;
}
.bai-hoc-ct__cong .katex { font-size: 1.12em; }
.bai-hoc-ct__ky-hieu { display: grid; gap: 4px 12px; margin: 12px 0 0; }
.bai-hoc-ct__ky-hieu > div { display: flex; gap: 10px; align-items: baseline; font-size: 14px; line-height: 1.55; }
.bai-hoc-ct__ky-hieu dt { flex: none; min-width: 2.2em; font-weight: 700; color: var(--navy-900); }
.bai-hoc-ct__ky-hieu dd { margin: 0; min-width: 0; color: var(--ao-chu-nhat); }
/* Cột nghĩa thẳng hàng dù ký hiệu dài ngắn khác nhau ("a, b, c" và "Δ"): mỗi cặp dt/dd là một hàng của
   lưới cha qua subgrid. Máy chưa có subgrid giữ hàng flex ở trên. */
@supports (grid-template-columns: subgrid) {
    .bai-hoc-ct__ky-hieu { grid-template-columns: max-content minmax(0, 1fr); }
    .bai-hoc-ct__ky-hieu > div { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; }
    .bai-hoc-ct__ky-hieu dt { min-width: 0; }
}
.bai-hoc-ct__khi {
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--navy-50);
    border: 1px solid var(--navy-100);
    border-radius: 10px;
}
.bai-hoc-ct__nhan {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--navy-700);
}
.bai-hoc-ct__khi-chu { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ao-chu); }

/* ---- DEFINITIONS: mỗi thuật ngữ một thẻ, badge "Examiner keyword" ---- */
.bai-hoc-dinh-nghia { display: grid; gap: 12px; margin: 0 0 22px; }
.bai-hoc-dn {
    margin: 0;
    padding: 16px;
    background: var(--trang);
    border: 1px solid var(--ao-vien);
    border-radius: var(--ao-r-nho);
}
.bai-hoc-dn__ten {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 700;
    color: var(--navy-900);
}
.bai-hoc-dn__nhan {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    background: var(--gold-50);
    border: 1px solid var(--gold-200);
    border-radius: var(--ao-r-vien-thuoc);
    font-size: 11px;
    line-height: 1.5;
    font-weight: 700;
    color: var(--gold-700);
    white-space: nowrap;
}
.bai-hoc-dn__nghia {
    margin: 6px 0 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--ao-chu);
}

/* ---- Gập/mở dùng chung (details/summary): bỏ mũi tên mặc định, mũi tên tự vẽ xoay khi mở ---- */
.bai-hoc-loi__tom,
.bai-hoc-faq__hoi { list-style: none; cursor: pointer; }
.bai-hoc-loi__tom::-webkit-details-marker,
.bai-hoc-faq__hoi::-webkit-details-marker { display: none; }
.bai-hoc-mui {
    flex: none;
    margin-left: auto;
    align-self: center;
    font-size: 12px;
    color: var(--stone-500);
    transition: transform var(--ao-vua) var(--ao-ease);
}
details[open] > summary > .bai-hoc-mui { transform: rotate(180deg); }

/* ---- COMMON MISTAKES: thẻ trắng, viền trái vàng (cạnh mang vạch thì vuông) ---- */
.bai-hoc-loi {
    list-style: none;
    display: grid;
    gap: 12px;
    margin: 0 0 22px;
    padding: 0;
}
.bai-hoc-loi__the {
    background: var(--trang);
    border: 1px solid var(--ao-vien);
    border-left: 3px solid var(--gold-500);
    border-radius: 0 var(--ao-r-nho) var(--ao-r-nho) 0;
}
.bai-hoc-loi__dong {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
}
/* Dấu x trong chấm tròn: màu do lớp Tailwind text-red-600 bg-red-50 trong markup. */
.bai-hoc-loi__dau {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    border-radius: var(--ao-r-vien-thuoc);
    font-size: 12px;
}
.bai-hoc-loi__dau-chu { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bai-hoc-loi__ten { font-size: 16px; line-height: 1.45; font-weight: 700; color: var(--navy-900); }
.bai-hoc-loi__nguon { font-size: 12px; line-height: 1.5; font-weight: 500; color: var(--stone-600); }
.bai-hoc-loi__cau { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--ao-chu); }
.bai-hoc-loi__cau b { color: var(--navy-900); }
.bai-hoc-loi__mo { padding: 0 16px 16px 52px; }
.bai-hoc-loi__nhan {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gold-700);
}
.bai-hoc-loi__chu { margin: 0 0 8px; font-size: 15px; line-height: 1.7; color: var(--ao-chu); }
.bai-hoc-loi__chu:last-child { margin-bottom: 0; }
.bai-hoc-loi__tranh {
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--gold-50);
    border: 1px solid var(--gold-200);
    border-radius: 10px;
}

/* ---- FAQ: thẻ viền, thanh "Top questions..." rồi các hàng câu hỏi ---- */
.bai-hoc-faq {
    margin: 0 0 22px;
    padding: 10px;
    background: var(--trang);
    border: 1px solid var(--ao-vien);
    border-radius: var(--ao-r-nho);
}
.bai-hoc-faq__dau {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 4px;
    padding: 12px 16px;
    background: var(--paper);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--navy-900);
}
.bai-hoc-faq__dau > i { color: var(--navy-700); }
.bai-hoc-faq__muc + .bai-hoc-faq__muc { border-top: 1px solid var(--ao-vien); }
.bai-hoc-faq__hoi {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 600;
    color: var(--navy-900);
}
.bai-hoc-faq__dap { padding: 0 20px 16px; }
.bai-hoc-faq__dap p { margin: 0 0 8px; font-size: 15px; line-height: 1.7; color: var(--ao-chu); }
.bai-hoc-faq__dap p:last-child { margin-bottom: 0; }

/* =============================================================================
   GỢI NGHĨA: chữ tiếng Anh, nghĩa tiếng Việt hiện khi rê chuột / focus / chạm.
   Dấu hiệu PHẢI nhìn thấy được: một chữ có chú thích mà trông y hệt chữ thường thì không
   ai biết để rê chuột vào. Gạch chân CHẤM chứ không phải nét liền: nét liền đọc thành
   đường dẫn. border-bottom thay text-decoration để chọn riêng màu nhạt hơn màu chữ.
   KHÔNG dùng thuộc tính title=: hiện chậm, phông hệ thống, không xuống dòng, không sờ
   được trên điện thoại, không vẽ được KaTeX.
   ============================================================================= */
.bai-hoc-goi {
    cursor: help;
    border-bottom: 1px dotted var(--gold-600);
}
/* Vòng focus cách chữ 3px để không đè lên gạch chân chấm (màu vòng do luật chung của theme.css). */
.bai-hoc-goi:focus-visible {
    outline: 2px solid var(--gold-500);
    outline-offset: 3px;
}
/* Tên khái niệm của thẻ công thức / thuật ngữ: kèm chấm i nhỏ. Keyword trong câu thì không. */
.bai-hoc-goi--dau {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
}
/* Nghĩa gốc ẩn khỏi MẮT nhưng Ở LẠI trong cây trợ năng (khuôn sr-only). Không dùng
   display:none / visibility:hidden vì cả hai đều gỡ khỏi cây trợ năng. */
.bai-hoc-goi__noi,
.bai-hoc-an {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
/* Trên nền trắng dùng gold-600 (3,70:1). */
.bai-hoc-goi__dau {
    font-size: 10px;
    color: var(--gold-600);
    opacity: 0.8;
}
.bai-hoc-goi:hover .bai-hoc-goi__dau,
.bai-hoc-goi:focus .bai-hoc-goi__dau { opacity: 1; }

/* Hộp thả nổi: JS gắn thẳng vào <body> và đặt toạ độ, vì hộp công thức có overflow-x:auto mà
   overflow-x:auto cắt luôn chiều dọc, hộp position:absolute trong đó sẽ bị xén mất nửa trên. */
.bai-hoc-goi__hop {
    position: fixed;
    z-index: 60;
    max-width: min(340px, calc(100vw - 16px));
    padding: 10px 14px;
    background: var(--navy-900);
    color: var(--navy-100);
    border: 1px solid var(--navy-700);
    border-top: 2px solid var(--gold-500);   /* cùng khuôn viền vàng trên nền navy của cả hệ */
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: normal;
    text-transform: none;
    text-align: left;
    box-shadow: var(--ao-bong-cao);
    /* Hộp NHẬN chuột (WCAG 1.4.13, "rê vào được"): người dùng kính lúp màn hình kéo chuột lên hộp mới
       đọc được nghĩa. Hộp nằm cách chữ 10px nên không che chính chữ đang mở nó; bai-hoc.js hẹn đóng
       200ms khi chuột rời chữ để kịp băng qua khe đó. */
}
/* Hộp lật xuống dưới (chữ sát mép trên màn hình): vệt vàng theo xuống chân hộp. */
.bai-hoc-goi__hop--duoi {
    border-top: 1px solid var(--navy-700);
    border-bottom: 2px solid var(--gold-500);
}
.bai-hoc-goi__hop .katex { color: var(--trang); }

/* =============================================================================
   BÀI GIẢI MẪU (khối example cũ): khuôn thẻ worked example của Tutopiya, nền navy-50.
   Nhãn QUESTION / STEP-BY-STEP SOLUTION, các thẻ Step nền giấy, hộp ANSWER nền vàng nhạt.
   ============================================================================= */
.bai-hoc-vi-du {
    margin: 26px 0;
    padding: 16px 18px 18px;
    background: var(--navy-50);
    border: 1px solid var(--navy-100);
    border-radius: var(--ao-r-nho);
    font-size: 16px;
    line-height: 1.7;
    color: var(--ao-chu);
}
.bai-hoc-vd-ten {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 4px;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 700;
    color: var(--navy-900);
}
.bai-hoc-vd-ten > i { font-size: 13px; color: var(--navy-700); }
.bai-hoc-vd-nhan {
    margin: 14px 0 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--stone-600);
}
.bai-hoc-vd-de { margin: 0; color: var(--navy-900); }
.bai-hoc-vd-giai { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bai-hoc-vd-buoc {
    padding: 10px 14px;
    background: var(--paper);
    border-radius: 10px;
}
.bai-hoc-vd-buoc__so {
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
    font-weight: 700;
    color: var(--navy-700);
}
.bai-hoc-vd-buoc__chu { overflow-x: auto; overflow-y: hidden; }
.bai-hoc-ket-luan {
    margin-top: 12px;
    padding: 10px 14px 12px;
    background: var(--gold-50);
    border: 1px solid var(--gold-200);
    border-radius: 10px;
}
.bai-hoc-ket-luan .bai-hoc-vd-nhan { margin-top: 0; color: var(--gold-700); }
.bai-hoc-ket-luan__chu { margin: 0; font-weight: 600; color: var(--navy-900); }
.bai-hoc-vi-du b { color: var(--navy-900); }

/* ---- Hộp lưu ý: khối TRẦM NHẤT, chỉ có nền ---- */
.bai-hoc-callout {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 22px 0;
    padding: 16px 18px;
    background: var(--paper-dim);
    border: 0;
    border-radius: var(--ao-r-nho);
    font-size: 15px;
    line-height: 1.65;
    color: var(--ao-chu);
}
.bai-hoc-callout > i { color: var(--navy-700); font-size: 14px; margin-top: 2px; }
.bai-hoc-callout b { color: var(--navy-900); }

/* ---- Mẹo phòng thi (khối tip): hộp vàng nhạt kiểu EXAMINER TIP ---- */
.exam-tip {
    margin: 22px 0;
    padding: 16px 20px;
    background: var(--gold-50);
    border: 1px solid var(--gold-200);
    border-radius: var(--ao-r-nho);
}
.exam-tip__nhan {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gold-700);
}
.exam-tip .note-list { color: var(--ao-chu); margin-bottom: 0; }
/* ô vuông gold-500 trên nền gold-50 chỉ 2,76:1 (dưới ngưỡng 3:1 của đồ hoạ), gold-600 là 3,70:1 */
.exam-tip .note-list > li::before { background: var(--gold-600); }

/* ---- Liên kết: dạng NÚT (mặc định, cửa ra cuối bài) và dạng CHỮ (style 'inline') ---- */
.bai-hoc-lien-ket {
    margin: 30px 0 4px;
    padding-top: 22px;
    border-top: 1px solid var(--ao-vien);
}
.bai-hoc-link-dong { margin: 16px 0; font-size: 15px; }
/* Link neo "#phan-..." tới một phần KHÔNG có trên trang của người đang xem (Video Solutions với khách
   xem thử, hay bài chưa có video giải đề): learn.page.js gắn [hidden] lên chỗ bọc. Viết rõ ở đây để
   không lớp nào đặt display đè được. */
.bai-hoc-link-dong[hidden],
.bai-hoc-lien-ket[hidden],
.bai-hoc-hop__lien > li[hidden] { display: none; }
.bai-hoc-link {
    font-weight: 700;
    color: var(--navy-700);
    text-decoration: underline;
    text-decoration-color: var(--gold-500);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    transition: color var(--ao-nhanh), text-decoration-color var(--ao-nhanh);
}
.bai-hoc-link:hover { color: var(--navy-900); text-decoration-color: var(--gold-600); }
.bai-hoc-link > i { margin-left: 6px; font-size: .8em; }

/* ---- Mã inline trong chữ ---- */
.bai-hoc-bai-viet code, .bai-hoc-doan code, .note-list code, .bai-hoc-so code, .bai-hoc-check code,
.bai-hoc-loi code, .bai-hoc-vi-du code, .bai-hoc-callout code, .bai-hoc-dinh-nghia code,
.bai-hoc-hop code, .bai-hoc-faq code, .bai-hoc-cong-thuc code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9em;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--paper-dim);
    color: var(--navy-900);
}

/* ---- Công thức hàng riêng \[ ... \] ---- */
.katex-display { margin: 12px 0 16px; overflow-x: auto; overflow-y: hidden; }

/* ---- Ảnh minh hoạ: hình vẽ nét cần một cái lề như hình in trong sách ---- */
.bai-hoc-anh { margin: 26px 0; }
.bai-hoc-anh img {
    display: block;
    width: 100%;
    height: auto;
    padding: 14px;
    background: var(--paper-dim);
    border: 1px solid var(--ao-vien);
    border-radius: var(--ao-r-nho);
}
/* 13px là nhỏ hơn text-sm nên theo luật tiếp cận phải là stone-600 */
.bai-hoc-anh figcaption,
.bai-hoc-video figcaption,
.bai-hoc-pdf figcaption,
.bai-hoc-do-thi figcaption {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--stone-600);
}

/* ---- Video (bản render() của khung xem trước trình soạn: iframe trong khung 16:9) ----
   Trang học tự vẽ mặt tiền bấm-mới-phát bằng Vue từ phần video của phanNhom(). */
.bai-hoc-video { margin: 26px 0; }
.bai-hoc-video-khung {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: var(--navy-900);
    border-radius: var(--ao-r-the);
    overflow: hidden;
}
.bai-hoc-video-khung iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* =================================================================================================
   KHỐI TÀI LIỆU PDF: TRÌNH CHIẾU (05/09/2026), điều khiển kiểu Tutopiya (11/09/2026)
   ==================================================================================================
   Handout của bài, XEM TẠI CHỖ, KHÔNG có đường tải về: pdf.js vẽ từng trang lên canvas nên thứ
   nằm trong DOM là điểm ảnh chứ không phải một file. Một sân cố định lật từng slide, sân lấy ĐÚNG
   tỉ lệ trang thật do pdf.js đo ở trang đầu (16/9 chỉ là bản dự phòng trước khi đo xong).
   Dưới sân: thanh tiến độ bốn đoạn, rồi một hàng ba cụm: lật trang | số slide và phút đọc | thu,
   phóng. Không toàn màn hình, không tải, không in.
   ============================================================================================== */
.bai-hoc-pdf { container-type: inline-size; margin: 0; }

.bai-hoc-pdf__san {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--paper);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.bai-hoc-pdf__anh {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--trang);
}
/* Phóng trên 1x: sân cuộn được, canvas mang bề ngang px do JS đặt. display:block chứ không flex:
   flex căn giữa làm phần tràn mép trái/trên không bao giờ cuộn tới được. */
.bai-hoc-pdf__san--phong { display: block; overflow: auto; overscroll-behavior: contain; }
.bai-hoc-pdf__san--phong .bai-hoc-pdf__anh { width: auto; height: auto; max-width: none; object-fit: fill; }
.bai-hoc-pdf__cho,
.bai-hoc-pdf__loi {
    margin: 0;
    padding: 0 24px;
    text-align: center;
    font-size: 13px;
    line-height: 1.6;
    font-weight: 500;
    color: var(--stone-600);
}
.bai-hoc-pdf__cho-ten {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--navy-900);
}
.bai-hoc-pdf__loi { font-weight: 700; color: var(--navy-900); }
.bai-hoc-pdf__loi-icon { display: block; margin: 0 auto 10px; font-size: 18px; color: var(--gold-600); }
/* Không mở được tài liệu (khách xem thử nhận 403, file mất): bai-hoc.js gắn lớp --loi. Thanh tiến độ trống
   và hàng nút vô hiệu dưới câu báo là điều khiển của một thứ không có, nên ẩn đi (đo 12/09/2026). Sân cũng
   bỏ khung 16:9: không có slide nào để giữ chỗ, và ở 1440px khung 16:9 là gần 560px giấy trống quanh một câu. */
.bai-hoc-pdf--loi .bai-hoc-pdf__tien,
.bai-hoc-pdf--loi .bai-hoc-pdf__dieu { display: none; }
.bai-hoc-pdf--loi .bai-hoc-pdf__san { aspect-ratio: auto; min-height: 11rem; padding: 32px 0; }

/* THANH TIẾN ĐỘ BỐN ĐOẠN: đoạn đã qua tô màu nhấn, đoạn đang đi tô tới đúng slide. */
.bai-hoc-pdf__tien {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin-top: 14px;
}
.bai-hoc-pdf__tien > span {
    height: 4px;
    border-radius: var(--ao-r-vien-thuoc);
    background: var(--ao-vien);
    overflow: hidden;
}
.bai-hoc-pdf__tien > span > i {
    display: block;
    width: 0;
    height: 100%;
    background: var(--navy-700);
    transition: width var(--ao-vua) var(--ao-ease);
}

/* HÀNG ĐIỀU KHIỂN: cụm trái (lật trang), giữa (tổng số slide, phút đọc), phải (thu, phóng). */
.bai-hoc-pdf__dieu {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px 12px;
    margin-top: 12px;
}
.bai-hoc-pdf__nhom { display: flex; align-items: center; gap: 8px; }
.bai-hoc-pdf__nhom--phai { justify-self: end; }
.bai-hoc-pdf__nut {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: var(--ao-r-vien-thuoc);
    background: var(--paper-dim);
    color: var(--navy-900);
    font-size: 12px;
    cursor: pointer;
    transition: background-color var(--ao-nhanh), color var(--ao-nhanh);
}
.bai-hoc-pdf__nut:hover:not(:disabled) { background: var(--navy-100); }
.bai-hoc-pdf__nut:disabled { opacity: .4; cursor: not-allowed; }
.bai-hoc-pdf__con {
    min-width: 4.5em;
    text-align: center;
    font-size: 14px;
    font-weight: 800;
    color: var(--navy-700);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.bai-hoc-pdf__tong {
    font-size: 12px;
    font-weight: 600;
    color: var(--stone-600);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* Hẹp (điện thoại, khung xem trước trình soạn): cụm giữa xuống một hàng riêng ở cuối. */
@container (max-width: 26rem) {
    .bai-hoc-pdf__dieu { grid-template-columns: 1fr auto; }
    .bai-hoc-pdf__tong { grid-column: 1 / -1; order: 3; text-align: center; }
}

/* RÀO GIAO DIỆN: cùng luật với ảnh đề ở phòng làm bài. Không chặn được người chụp màn hình, và
   không cố chặn: mục tiêu là không có đường TẢI FILE nào, còn canvas thì vốn không phải một file. */
.bai-hoc-pdf__anh {
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

/* ---- Khối cuối của một phần không mang lề dưới: thẻ phần của trang học đã có padding dưới, cộng
   thêm 22px là một khoảng trống thừa ở chân thẻ Key Formulae / Definitions / Mistakes / FAQ. */
.bai-hoc-cong-thuc:last-child, .bai-hoc-dinh-nghia:last-child, .bai-hoc-loi:last-child,
.bai-hoc-faq:last-child, .bai-hoc-hop:last-child, .bai-hoc-do-thi:last-child, .bai-hoc-bien-doi:last-child,
.bai-hoc-callout:last-child, .exam-tip:last-child, .bai-hoc-vi-du:last-child, .bai-hoc-check:last-child,
.bai-hoc-anh:last-child, .bai-hoc-video:last-child, .bai-hoc-link-dong:last-child,
.note-list:last-child, .bai-hoc-so:last-child, .bai-hoc-doan:last-child { margin-bottom: 0; }

/* ---- Màn hẹp. Mốc 639px là mốc sm đã dùng trong theme.css, không chế mốc mới ---- */
@media (max-width: 639px) {
    .bai-hoc-bai-viet { padding: 20px 16px 18px; }
    .bai-hoc-hop { padding: 16px; }
    .bai-hoc-loi__mo { padding: 0 14px 14px 14px; }
    .bai-hoc-loi__dong { padding: 12px 14px; }
    .bai-hoc-faq__hoi { padding: 14px 12px; }
    .bai-hoc-faq__dap { padding: 0 12px 14px; }
    .bai-hoc-ct, .bai-hoc-dn { padding: 14px; }
}

/* =============================================================================
   PHẦN VIỆC CỦA MỘT BÀI (05/09/2026): thẻ việc và bảng chấm (phần Practice / Topical
   Exam Quiz của trang học). Phần gia sư chấm lên BẢNG NAVY: nền navy là NƠI THẦY VIẾT.
   ============================================================================= */

/* ---- Thẻ một việc ---- */
.bai-hoc-viec { display: flex; flex-direction: column; gap: 16px; margin-bottom: 8px; }
/* Tab trống: nói rõ vì sao trống và làm gì tiếp. Viền đứt để phân biệt với thẻ việc thật. */
.viec-trong {
    border: 1px dashed var(--stone-300);
    border-radius: var(--ao-r-nho);
    padding: 28px 24px;
    text-align: center;
    background: var(--trang);
}
.viec-trong > i { font-size: 22px; color: var(--stone-400); }
.viec-trong__ten { margin-top: 10px; font-weight: 700; color: var(--navy-900); }
.viec-trong__mo { margin: 6px auto 0; max-width: 34rem; font-size: 14px; line-height: 1.6; color: var(--stone-600); }
.viec-trong .nut { margin-top: 16px; }

/* Ổ KHOÁ CỦA CỔNG MỞ DẦN (06/09/2026): cùng khuôn viec-trong nhưng viền vàng nét đứt, vì đây là
   việc CỦA EM (đánh dấu xong bài học, nộp bài) chứ không phải việc VPath còn nợ. */
.viec-khoa {
    text-align: center;
    padding: 22px 18px;
    margin-bottom: 18px;
    border: 1px dashed var(--gold-400);
    background: var(--gold-50);
    border-radius: var(--ao-r-nho);
}
.viec-khoa > i { font-size: 20px; color: var(--gold-600); }
.viec-khoa__ten { margin-top: 8px; font-weight: 700; color: var(--navy-900); }
.viec-khoa__mo { margin: 6px auto 0; max-width: 34rem; font-size: 14px; line-height: 1.6; color: var(--stone-600); }
.viec-khoa .nut { margin-top: 14px; }
.viec-nhan--khoa { background: var(--gold-50); color: var(--gold-700); border: 1px dashed var(--gold-400); }

.viec-the {
    border: 1px solid var(--ao-vien);
    border-radius: var(--ao-r-nho);
    background: var(--trang);
    padding: 20px 22px;
}
.viec-the__dau { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.viec-the__ten { flex: 1; margin: 0; font: 800 16px/1.35 inherit; color: var(--navy-900); }
.viec-the__mo { margin: 0 0 12px; font-size: 13.5px; line-height: 1.7; color: var(--stone-600); }
.viec-the__meta {
    display: flex; flex-wrap: wrap; gap: 16px;
    margin: 0; font-size: 12px; font-weight: 600; color: var(--stone-600);
}
.viec-the__meta i { margin-right: 6px; color: var(--gold-600); }
.viec-the__nut { margin-top: 18px; }

/* ---- Nhãn trạng thái ---- */
.viec-nhan {
    flex: none;
    padding: 4px 10px;
    border-radius: var(--ao-r-vien-thuoc);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}
.viec-nhan--xong { background: var(--navy-900); color: var(--gold-300); }
.viec-nhan--cho  { background: var(--gold-50); color: var(--gold-700); border: 1px solid var(--gold-200); }
.viec-nhan--con  { background: var(--paper-dim); color: var(--stone-600); border: 1px solid var(--ao-vien); }

/* ---- BẢNG CHẤM: đây là chỗ thầy viết ---- */
.viec-cham {
    display: flex;
    align-items: stretch;
    gap: 20px;
    margin-top: 18px;
    padding: 18px 20px;
    background: var(--navy-900);
    border-top: 3px solid var(--gold-500);
}
.viec-cham__diem {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    padding-right: 20px;
    border-right: 1px solid var(--navy-700);
}
.viec-cham__so { font: 800 34px/1 inherit; color: var(--gold-300); }
.viec-cham__nhan { margin-top: 4px; font-size: 11px; font-weight: 700; color: var(--navy-100); }
.viec-cham__loi { flex: 1; min-width: 0; }
.viec-cham__ai {
    margin: 0 0 8px;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    color: var(--gold-300);
}
.viec-cham__ai i { margin-right: 8px; }
.viec-cham__chu { margin: 0; font-size: 13.5px; line-height: 1.75; color: var(--trang); }

@media (max-width: 640px) {
    .viec-cham { flex-direction: column; gap: 14px; }
    .viec-cham__diem {
        flex-direction: row; gap: 8px; min-width: 0; padding: 0 0 12px;
        border-right: 0; border-bottom: 1px solid var(--navy-700);
    }
}

/* ---- CÔNG TẮC VI/EN (.nn-doi): CHỈ CÒN MỘT CHỖ DÙNG ----
   Công tắc ngôn ngữ của SẢN PHẨM đã bỏ hẳn: trang học bài 11/09/2026, hai phòng làm bài và trang
   nội dung khoá 12/09/2026 (bản .nn-doi ở noi-dung-khoa.css đã xoá theo). Khối này KHÔNG phải rác:
   quan-tri-khoa-hoc.html nạp bai-hoc.css và còn dùng .nn-doi cho khung XEM TRƯỚC của trình soạn,
   nơi admin soi cùng một khối ở bản gốc VI và bản EN. Đó là một công tắc cục bộ của màn quản trị,
   không đọc ngon-ngu.js, nên nó sống hay chết theo màn đó chứ không theo luật ngôn ngữ của sản phẩm.
   outline-offset ÂM vì .nn-doi có overflow:hidden: vòng focus chung của theme.css (offset +2px) sẽ
   bị cắt mất ở mép ngoài. */
.nn-doi {
    display: inline-flex;
    flex: none;
    border: 1px solid var(--stone-300);
    border-radius: 2px;
    overflow: hidden;
    background: var(--trang);
}
.nn-doi__nut {
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--stone-600);
    background: transparent;
    transition: background-color var(--ao-nhanh), color var(--ao-nhanh);
}
.nn-doi__nut + .nn-doi__nut { border-left: 1px solid var(--stone-300); }
.nn-doi__nut:hover { color: var(--navy-900); }
.nn-doi__nut--dang { background: var(--navy-900); color: var(--trang); }
.nn-doi__nut--dang:hover { color: var(--trang); }
.nn-doi__nut:focus-visible { outline: 2px solid var(--gold-500); outline-offset: -2px; }