/* ==========================================================================
   55-lms.css — TẦNG TRÌNH BÀY của 4T Learning (khu vực /hoc/*)
   Tạo 14/09/2026 · LANE A · IMPLEMENTATION WAVE 1

   ⭐ TRIẾT LÝ RÀNG BUỘC (OWNER-DECISIONS-LOCK-2026-09-14 §6):
        "Mở lên là biết học tiếp ở đâu."
        SIMPLE FIRST · DETAIL ON DEMAND · ACTION BEFORE CONFIGURATION
      ⛔ Sự đơn giản của giao diện quan trọng hơn số lượng tính năng.

   ──────────────────────────────────────────────────────────────────────────
   §0.1  NẠP TỆP NÀY — việc của người sở hữu functions.php, KHÔNG phải tệp này
   ──────────────────────────────────────────────────────────────────────────
   Mô-đun này là mô-đun thứ 21 và PHẢI nạp SAU '54-popup-dich-vu'. Nạp CÓ
   ĐIỀU KIỆN, chỉ khi đang ở khu vực học:

       // trong t4_enqueue_assets(), SAU vòng lặp $mo_dun
       if ( get_query_var( 't4l_view' ) ) {
           $d = get_stylesheet_directory() . '/css/55-lms.css';
           if ( file_exists( $d ) ) {
               wp_enqueue_style( 't4-55-lms',
                   get_stylesheet_directory_uri() . '/css/55-lms.css',
                   array( 't4-54-popup-dich-vu' ),   // neo vào mô-đun 20 cuối
                   filemtime( $d ) );                // ⛔ filemtime, KHÔNG $version
           }
           $j = get_stylesheet_directory() . '/assets/js/lms.js';
           if ( file_exists( $j ) ) {
               wp_enqueue_script( 't4-lms',
                   get_stylesheet_directory_uri() . '/assets/js/lms.js',
                   array(), filemtime( $j ), true );
               wp_localize_script( 't4-lms', 'T4LMS', array(
                   'goc'   => esc_url_raw( rest_url( '4t-learning/v1/' ) ),
                   'nonce' => wp_create_nonce( 'wp_rest' ),
               ) );
           }
       }

   ⛔ `filemtime()` làm số phiên bản, KHÔNG dùng Version của theme. Máy chủ đặt
      `cache-control: max-age=604800` — dùng version theme là bản sửa KHÔNG TỚI
      ĐƯỢC trình duyệt trong 7 ngày (đã trả giá 29/08/2026).

   ──────────────────────────────────────────────────────────────────────────
   §0.2  ⛔ LUẬT NỀN III.18 — SỬA KHỔ NÀY KHÔNG ĐƯỢC ẢNH HƯỞNG KHỔ KIA
   ──────────────────────────────────────────────────────────────────────────
   4T chốt 11/09/2026. Ngưỡng duy nhất của dự án: 849 / 850.

   Cách tệp này tuân thủ, chặt hơn mức tối thiểu:
     · Luật ĐỂ TRẦN chỉ được mang thuộc tính có GIÁ TRỊ GIỐNG NHAU ở cả hai
       khổ (màu, phông, vai trò, con trỏ).
     · Mọi thuộc tính có giá trị KHÁC nhau giữa hai khổ đều được khai HAI LẦN,
       trong `@media (max-width: 849px)` và `@media (min-width: 850px)`, cùng
       selector, cùng độ đặc hiệu.
     ⇒ Không có "giá trị mặc định rò sang khổ kia". Nghiệm thu "số ô đổi ở khổ
       KHÔNG sửa = 0" đúng theo cấu trúc, không nhờ may mắn.

   ⚠ `@media` KHÔNG cộng độ đặc hiệu. Hai luật hoà thì luật ĐỨNG SAU thắng.
     Trong tệp này khối ≤849 luôn đứng TRƯỚC khối ≥850 của cùng một mục, và
     hai khối loại trừ nhau nên thứ tự không sinh tranh chấp.

   ──────────────────────────────────────────────────────────────────────────
   §0.3  KHUNG SỐ — CỘNG DỒN ĐÃ KIỂM
   ──────────────────────────────────────────────────────────────────────────
     Mobile  402 = 352 + 25 × 2                                            ✓
     Desktop khung ngoài 1080 = lòng 1032 + đệm 24 × 2                     ✓
       (`box-sizing: border-box` ⇒ `.t4lms-khung` ĐO ĐƯỢC đúng 1080px, đúng
        mốc nghiệm thu của RESPONSIVE-CONTRACT §6.3.)
     Desktop lưới khoá học: 328 × 3 + 24 × 2 = 1032                        ✓
       (⚠ LEARNING-ARCHITECTURE §G.5.2 ghi "thẻ 336, gap 24" → 336×3+48 =
        1056. Số đó KHÔNG cộng ra khung mẹ ở bất kỳ cách hiểu nào. Tệp này
        dùng `1fr` nên bề rộng thật là 328; ghi lại để lần sau không ai chép
        số 336 rồi tự hỏi vì sao thừa 24px.)
     Desktop trình phát: 704 + 24 + 304 = 1032                             ✓
       (⚠ tài liệu ghi "khung phát 740×416" ⇒ ngầm định lòng 1080 và khe 36.
        Tệp này dùng khe chuẩn 24 của hợp đồng và đệm khung 24 ⇒ cột trái
        704, khung phát 704×396.)

   ──────────────────────────────────────────────────────────────────────────
   §0.4  TƯƠNG PHẢN — MỌI CẶP ĐƯỢC TÍNH, KHÔNG ƯỚC LƯỢNG
   ──────────────────────────────────────────────────────────────────────────
   Công thức WCAG 2.x relative luminance. Bảng đầy đủ ở §16 cuối tệp.
   ⭐ WAVE 4 · H — KHÔNG CÒN CẶP NÀO DƯỚI 4,5:1. Cặp cuối cùng (nút chính
     `#FFF` / `#AF6928` = 4,31) đã lên **4,70** nhờ hạ nền sang
     `--t4-hanh-dong-nen` #A66426 ⇒ nút không còn phải mượn ngưỡng "chữ lớn",
     và cỡ chữ nhãn nút trở về 14/16px như thiết kế. Chi tiết ở §16.

   ──────────────────────────────────────────────────────────────────────────
   §0.5  NAMESPACE
   ──────────────────────────────────────────────────────────────────────────
   ⛔ Tệp này CHỈ viết `.t4lms-*`. Không đụng `.t4-` `.t4h-` `.t4dv-` `.t4kt-`
      `.t4kh-` `.t4fx-` `.t4tv-`. Không sửa một dòng nào của 20 mô-đun cũ.
   ========================================================================== */


/* ==========================================================================
   §1. BIẾN CỤC BỘ + KHUNG TRANG
   ========================================================================== */

.t4lms {
  /* ── Màu: tất cả đọc lại từ token `--t4-*` của 00-tokens.css ──────────── */
  --t4lms-nen:          var(--t4-light,  #FCFBF6);
  --t4lms-the:          var(--t4-white,  #FFFFFF);
  --t4lms-kem:          var(--t4-cream,  #EFE8DA);
  --t4lms-chu:          var(--t4-text,   #1F1F1F);
  --t4lms-chu-phu:      var(--t4-muted,  #5E5E5E);
  --t4lms-dam:          var(--t4-dark-moss, #155446);
  --t4lms-leaf:         var(--t4-leaf,   #458763);

  /* ⭐ WAVE 4 · H — ĐỔI NỀN, TRẢ CỠ CHỮ VỀ.
     Cũ: `#AF6928` + trắng = 4.31:1 ⇒ thiếu 0,19 ở cỡ chữ thường, và Wave 2
     bịt bằng cách nâng nhãn nút lên 19px/700. Chủ sản phẩm bác cách đó
     (xem khối token ở `00-tokens.css`).
     Nay: nền `--t4-hanh-dong-nen` #A66426 + trắng = **4,70:1** ⇒ đạt AA ở
     MỌI cỡ chữ ⇒ nút được trả về đúng cỡ chữ thiết kế (14/16px).
     ⛔ VẪN KHÔNG dùng #CF9156 + trắng (2.68:1 — trượt cả ba ngưỡng WCAG). */
  --t4lms-nut-nen:      var(--t4-hanh-dong-nen, #A66426);
  --t4lms-nut-nen-hv:   var(--t4-hanh-dong-nen-nhan, #85501E); /* trắng = 6,64:1 ✅ */

  /* Trạng thái — bốn cặp đã tính, xem §16 */
  --t4lms-xong:         #2F6B4C;   /* trên #FFF = 6.31:1 */
  --t4lms-xong-nen:     #E6F0EA;
  --t4lms-luu-y:        #8C5A2B;   /* trên #FBF0E4 = 5.17:1 */
  --t4lms-luu-y-nen:    #FBF0E4;
  --t4lms-loi:          #A32218;   /* trên #FBE9E7 = 6.40:1 */
  --t4lms-loi-nen:      #FBE9E7;
  --t4lms-tin:          #155446;   /* trên #EEF6F1 = 7.99:1 */
  --t4lms-tin-nen:      #EEF6F1;

  --t4lms-ke:           rgba(31, 31, 31, .15);
  --t4lms-ke-dam:       rgba(31, 31, 31, .28);

  /* Hình dạng */
  --t4lms-bo-the:       var(--t4-radius-card, 16px);
  --t4lms-bo-nut:       var(--t4-radius-btn, 8px);
  --t4lms-bo-o:         5px;      /* radius.field — token thật, 57 lần gõ tay */
  --t4lms-bong:         var(--t4-shadow-card, 3px 3px 4px rgba(0, 0, 0, .25));

  /* ── KHUNG ≤849px — CÓ BIẾT MÁY TÍNH BẢNG (Wave 3 · W3-D) ──────────────
     ⛔ ĐỌC TRƯỚC KHI ĐỔI: RESPONSIVE-CONTRACT §3 chốt khung 352px cho MỌI
        khổ ≤849. Con số đó dịch từ Figma 402 và ĐÚNG cho CSS cũ của
        WordPress. Nó SAI cho mã mới: ở khổ 768 nó cho MỘT CỘT 352px giữa
        416px lề trống — hơn nửa màn hình bỏ không. Đo được, không suy diễn.

     Luật mới, chỉ áp cho `.t4lms-*` (xem RESPONSIVE-CONTRACT §3.1):
        bề rộng = 100% − lề 25×2, chặn trên ở 720px.

     ⭐ Vì sao KHÔNG thêm breakpoint: một `calc` đủ thay cả dải 480–849.
        Dự án vẫn có ĐÚNG MỘT breakpoint 849/850. Cộng dồn đã kiểm:
            402 → 402 − 50 = 352   ✓ giữ nguyên hợp đồng cũ, khỏi đo lại
            375 → 325              ✓ (số cứng 352 sẽ TRÀN ở đây)
            480 → 430   600 → 550   720 → 670
            768 → 718   (93,5% khung nhìn — trước là 45,8%)
            820 → 720 (chạm trần)   849 → 720 (chạm trần)
     ⛔ Trần 720 KHÔNG phải để "giống desktop": nó giữ độ dài dòng chữ trong
        tầm đọc được. Bỏ trần là dòng 799 ký tự ở 849px. */
     ⛔ BA CON SỐ DƯỚI ĐÂY VIẾT THẲNG BẰNG px, CỐ Ý — KHÔNG đóng thành biến.
        `qa/lms/do.mjs` (chốt chặn G1) bóc bề rộng khai bằng px THẲNG trong tệp
        này rồi đối chiếu với `getBoundingClientRect()`. Một `var()` là vô hình
        với nó ⇒ đóng gói cho đẹp là TỰ GỠ chốt chặn của chính mình.
            lề ≤849      25px    (402 − 25×2 = 352, giữ nguyên hợp đồng cũ)
            trần khung   720px   (`.t4lms-khung`, và ruột `.t4lms-dh`)
            trần NÚT     352px   (⛔ khung rộng ra KHÔNG kéo nút rộng theo —
                                  G3 sinh ra vì nút giãn 639px ở đúng khổ 768) */

  /* Chiều cao thanh nút đáy mobile của site (Figma 402×70).
     ⛔ Thanh này do `template-parts/mobile-bottom-bar.php` in ra ở wp_footer
        cho MỌI trang, kể cả /hoc/*. Nút "Bài sau" dính đáy phải nằm TRÊN nó.
        Nếu sau này khu vực học tắt thanh đó, chỉ cần đặt biến này về 0px. */
  --t4lms-day-mobile:   70px;

  font-family: var(--t4-font-body, 'Manrope', -apple-system, sans-serif);
  color: var(--t4lms-chu);
  background: var(--t4lms-nen);
}

/* `.t4 p { margin: 0 0 16px }` của 10-base sẽ đẩy lệch mọi khối của LMS.
   Cùng độ đặc hiệu (0,1,1), mô-đun này nạp SAU ⇒ thắng. Không cần !important. */
/* ⛔ Khai `box-sizing` TƯỜNG MINH, đừng trông chờ reset của theme cha.
   Đo được: thiếu dòng này thì `.t4lms-khung` (max-width 1080 + đệm 24×2) ra
   1128px ở khổ 1440 — dôi đúng 48px, và không có lỗi nào báo ra. */
.t4lms,
.t4lms *,
.t4lms *::before,
.t4lms *::after { box-sizing: border-box; }

.t4lms p { margin: 0; }
.t4lms ul,
.t4lms ol { margin: 0; padding: 0; list-style: none; }

/* Tiêu đề trong khu vực học — nhỏ hơn thang trang giới thiệu, vì đây là app
   sau đăng nhập chứ không phải trang bán hàng (SIMPLE FIRST). */
.t4lms h1,
.t4lms h2,
.t4lms h3 {
  font-family: var(--t4-font-head, 'Playfair Display', Georgia, serif);
  margin: 0;
}
.t4lms h2 { color: var(--t4lms-dam); font-weight: 600; }  /* 8.49:1 trên nền trang */
.t4lms h1,
.t4lms h3 { color: var(--t4lms-chu); font-weight: 500; }

/* ⛔ KHÔNG `hyphens: auto` — trình duyệt không có từ điển ngắt âm tiếng Việt. */
.t4lms { hyphens: manual; }

/* ── ≤849px ───────────────────────────────────────────────────────────── */
@media (max-width: 849px) {
  /* ⭐ W3-D: khung có biết máy tính bảng. Xem khối token ở §1 và
     RESPONSIVE-CONTRACT §3.1. ⛔ Đừng gõ lại 352px ở đây. */
  .t4lms-khung {
    width: calc(100% - 50px);     /* 25px mỗi bên */
    max-width: 720px;
    margin-inline: auto;
    padding-inline: 0;
  }
  /* ⛔ TRẦN NÚT — một luật, mọi nút, thay vì vá từng chỗ `width: 100%`.
     Khung ≤849 nay rộng tới 718px ở khổ 768; mọi `.t4lms-nut { width: 100% }`
     sẽ đi theo nếu không khoá. Đo được trước khi có dòng này: CTA thẻ khoá học
     ra 686px ở 768 — chính là lỗi G3 của Wave 1, quay lại to hơn. */
  .t4lms .t4lms-nut { max-width: 352px; }
  .t4lms { padding-block: 20px 24px; }
  .t4lms h1 { font-size: 24px; line-height: 34px; }   /* 1,42 ≥ 1,40 ✅ */
  .t4lms h2 { font-size: 20px; line-height: 28px; }   /* 1,40 ✅ */
  .t4lms h3 { font-size: 18px; line-height: 26px; }   /* 1,44 ✅ */
  .t4lms-dau-trang { margin-bottom: 20px; }
  .t4lms-dau-trang-phu { font-size: 14px; line-height: 22px; }
}

/* ── ≥850px ───────────────────────────────────────────────────────────── */
@media (min-width: 850px) {
  .t4lms-khung { width: 100%; max-width: 1080px; margin-inline: auto; padding-inline: 24px; }
  .t4lms { padding-block: 32px 60px; }
  .t4lms h1 { font-size: 32px; line-height: 42px; }   /* 1,31 ✅ */
  .t4lms h2 { font-size: 24px; line-height: 32px; }   /* 1,33 ✅ */
  .t4lms h3 { font-size: 20px; line-height: 28px; }   /* 1,40 ✅ */
  .t4lms-dau-trang { margin-bottom: 32px; }
  .t4lms-dau-trang-phu { font-size: 16px; line-height: 26px; }
}

.t4lms-dau-trang-phu { color: var(--t4lms-chu-phu); }   /* 6.26:1 ✅ */


/* ==========================================================================
   §2. NÚT  `.t4lms-nut`
   Ba biến thể. ⛔ Tối đa MỘT `--chinh` trên một khung nhìn.
   Nhãn: 8–14 ký tự · 2–3 từ · động từ đứng đầu · viết hoa CHỈ chữ đầu.
   ========================================================================== */

.t4lms-nut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;                   /* WCAG 2.2 — 2.5.5 vùng bấm */
  padding: 10px 24px;
  border-radius: var(--t4lms-bo-nut);
  border: 2px solid transparent;      /* LUÔN 2px để không nhảy khi hover */
  font-family: var(--t4-font-body, 'Manrope', sans-serif);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: background-color .2s, color .2s, border-color .2s;
  /* ⛔ min-width, KHÔNG width — chữ Việt dài hơn chữ Anh 25–30% */
  min-width: 0;
}
.t4lms-nut--chinh   { background: var(--t4lms-nut-nen); color: #FFFFFF; }
.t4lms-nut--chinh:hover,
.t4lms-nut--chinh:focus-visible,
.t4lms-nut--chinh:active { background: var(--t4lms-nut-nen-hv); color: #FFFFFF; }

.t4lms-nut--vien    { background: var(--t4lms-nen); color: var(--t4lms-dam); border-color: var(--t4lms-dam); }
.t4lms-nut--vien:hover,
.t4lms-nut--vien:focus-visible { background: var(--t4lms-dam); color: #FFFFFF; }

.t4lms-nut--nen-dam { background: transparent; color: #FFFFFF; border-color: #FFFFFF; }
.t4lms-nut--nen-dam:hover,
.t4lms-nut--nen-dam:focus-visible { background: #FFFFFF; color: var(--t4lms-dam); }

/* ⛔ KHÔNG dùng `opacity` làm tín hiệu disabled — nó nhân vào mọi lớp con và
   đẩy tương phản xuống dưới mọi ngưỡng. */
.t4lms-nut[disabled],
.t4lms-nut[aria-disabled="true"] {
  background: #EFE8DA;
  color: #6B6459;                     /* trên #EFE8DA = 4.80:1 ✅ */
  border-color: transparent;
  cursor: not-allowed;
  opacity: 1;
  pointer-events: none;
}

/* Trạng thái ĐANG GỬI — giữ NGUYÊN bề rộng nút, nếu không bố cục nhảy. */
.t4lms-nut[data-dang-gui="true"] { pointer-events: none; }
.t4lms-nut[data-dang-gui="true"] .t4lms-nut-chu { visibility: hidden; }
.t4lms-nut[data-dang-gui="true"]::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  animation: t4lms-quay .7s linear infinite;
}
@keyframes t4lms-quay { to { transform: rotate(360deg); } }

.t4lms-nut--rong { width: 100%; }

/* ── ≤849px ───────────────────────────────────────────────────────────── */
@media (max-width: 849px) {
  .t4lms-nut      { font-size: 14px; line-height: 22px; }   /* 1,57 ✅ */
  /* ⭐ WAVE 4 · H — `.t4lms-nut--chinh` KHÔNG CÒN LUẬT CỠ CHỮ RIÊNG.
     Nó dùng đúng 14px của `.t4lms-nut` như mọi nút khác. Xem khối dưới. */
  .t4lms-nut--lon { min-height: 52px; padding: 12px 24px; font-size: 18px; line-height: 28px; }
}
/* ── ≥850px ───────────────────────────────────────────────────────────── */
@media (min-width: 850px) {
  .t4lms-nut      { font-size: 16px; line-height: 24px; }   /* 1,50 ✅ */
  .t4lms-nut--lon { min-height: 56px; min-width: 180px; padding: 14px 28px; font-size: 20px; line-height: 28px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ⭐⭐ WAVE 4 · H — BỎ MẸO CỠ CHỮ, TRẢ NÚT VỀ CỠ THIẾT KẾ
   ══════════════════════════════════════════════════════════════════════════
   ── CHUYỆN CŨ, GIỮ LẠI VÌ NÓ GIẢI THÍCH CON SỐ ─────────────────────────────
   Trắng trên `#AF6928` = **4,31:1**. Ngưỡng AA: chữ thường 4,5 · chữ lớn 3
   (chữ lớn = ≥24px, hoặc ≥18,66px + bold). 4,31 trượt chữ thường, đạt chữ lớn.
   Wave 1 tưởng đã xử lý xong mà chưa: `--lon` ở mobile là 18px, thiếu đúng
   **0,66px** so với 18,66 ⇒ CTA quan trọng nhất, trên khổ người học dùng
   nhiều nhất, trượt AA suốt một đợt vì không ai ĐO. Wave 2 đo bằng máy, bắt
   được 3 cặp, và bịt bằng CỠ CHỮ: `--chinh` → 19px/700, `--lon` → 20px/700.

   ── WAVE 4: CHỦ SẢN PHẨM BÁC CÁCH ĐÓ ──────────────────────────────────────
   "19px" không phải một nấc nào trong thang chữ của sản phẩm (14 · 16 · 18 ·
   20 · 24 · 32). Nó tồn tại ĐÚNG MỘT LÝ DO: lớn hơn 18,66 để đổi ngưỡng WCAG
   từ 4,5 xuống 3. Đó là workaround, và nó bắt mọi nút hành động to bất
   thường — nhãn nút to hơn cả chữ tiêu đề phụ bên cạnh.

   ⭐ PHÂN BIỆT "nâng để lách ngưỡng" ↔ "nâng vì thiết kế" — dùng BA dấu hiệu,
      phải đủ CẢ BA thì mới trả cỡ chữ về:
        1. chú thích tại chỗ nêu NGƯỠNG TƯƠNG PHẢN là lý do (19px và 20px
           mobile đều có; `.t4lms h2` 20px, `.t4lms-kh-ten` 20px,
           `.t4lms-play-ten` 20px thì KHÔNG — chúng chỉ ghi tỉ lệ cao dòng);
        2. con số NẰM NGOÀI thang chữ, hoặc mâu thuẫn với số Figma/Wave 1 của
           đúng khổ đó (19 ngoài thang; `--lon` mobile Figma là 18, Wave 2 đẩy
           lên 20);
        3. bỏ con số đó KHÔNG phá một tỉ lệ thiết kế nào đã khai (cao dòng,
           chiều cao nút, vùng chạm) — đã kiểm: `--lon` mobile giữ
           `line-height: 28px` nên `min-height: 52 = 12 + 28 + 12` vẫn khớp.
      ⇒ Trả về: `--chinh` bỏ hẳn luật cỡ riêng (dùng 14/16px của `.t4lms-nut`)
                 `--lon` mobile 20px → **18px** (đúng số Wave 1/Figma)
      ⇒ GIỮ NGUYÊN: `--lon` desktop 20px — đó là số thiết kế từ Wave 1, không
                 phải số Wave 2 đẩy lên; và mọi cỡ 20px của tiêu đề.

   ── BÙ LẠI BẰNG MÀU, KHÔNG BẰNG CỠ ────────────────────────────────────────
   Nền nút đổi `#AF6928` → `--t4-hanh-dong-nen` **#A66426** ⇒ trắng = **4,70:1**
   ⇒ đạt 4,5 ở MỌI cỡ chữ ⇒ 14px/700 và 18px/700 đều hợp lệ, KHÔNG cần mượn
   ngưỡng "chữ lớn" nữa. ⛔ Màu thương hiệu `--t4-camel*` KHÔNG đổi.

   ⚠ GIÁ PHẢI TRẢ, nói thẳng: nút bây giờ KHÔNG còn dựa vào ngưỡng chữ lớn,
     nên nếu ai đó hạ nền về `#AF6928` thì nhãn 14px trượt lại ngay. Ca biên
     ở `qa/lms/tu-kiem-tuong-phan.mjs` đọc thẳng `00-tokens.css` để bắt việc đó.

   ⚠ `--vien` GIỮ NGUYÊN 14/16px — chữ `#155446` trên nền sáng, 8,79:1, dư sức
     đạt AA ở cỡ thường. Nay `--chinh` cũng 14/16px ⇒ hai nút cạnh nhau CÙNG
     cỡ chữ, đúng thứ bậc thị giác mà Wave 2 phải hy sinh.
   ══════════════════════════════════════════════════════════════════════════ */


/* ==========================================================================
   §3. THANH TIẾN ĐỘ  `.t4lms-td`
   ⛔ LUẬT TUYỆT ĐỐI: "không có dữ liệu" KHÔNG được hiển thị thành số 0.
      0% nghĩa là ĐÃ ĐO và đúng bằng không. Chưa đo được thì in `—`.
   ========================================================================== */

.t4lms-td { display: flex; align-items: center; gap: 12px; }

.t4lms-td-thanh {
  flex: 1 1 auto;
  height: 8px;
  border-radius: 999px;
  background: var(--t4lms-kem);
  overflow: hidden;
}
.t4lms-td-day {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--t4lms-leaf);      /* trên track kem = 3.52:1 ✅ (UI ≥3) */
  transition: width .3s ease-out;
}
.t4lms-td-so {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: 600;
  color: var(--t4lms-chu);
}

/* `khong_do_duoc` — đồng bộ hỏng. Thanh rỗng, số là `—`, KHÔNG phải 0%. */
.t4lms-td--khong-do .t4lms-td-day { width: 0; }
.t4lms-td--khong-do .t4lms-td-thanh { background: repeating-linear-gradient(
    135deg, var(--t4lms-kem) 0 6px, #E4DCCB 6px 12px); }
.t4lms-td--khong-do .t4lms-td-so { color: var(--t4lms-chu-phu); font-weight: 500; }

/* `chua_bat_dau` — hợp lệ, ĐÚNG là 0%. Khác hẳn `khong_do_duoc`. */
.t4lms-td--chua .t4lms-td-day { width: 0; }

@media (max-width: 849px) { .t4lms-td-so { font-size: 14px; line-height: 22px; } }
@media (min-width: 850px) { .t4lms-td-so { font-size: 14px; line-height: 22px; } }


/* ==========================================================================
   §4. KHỐI ⭐ `TIẾP TỤC HỌC` — đặt TRÊN CÙNG màn "Khoá học của tôi"
   Đây là câu trả lời trực tiếp cho "Mở lên là biết học tiếp ở đâu".
   ========================================================================== */

.t4lms-tiep { margin-bottom: 32px; }

.t4lms-tiep-nhan {
  display: flex; align-items: center; gap: 12px; width: 100%;
  margin-bottom: 12px;
}
/* ⚠ CỐ Ý LỆCH khỏi `.t4-label > p` của trang giới thiệu.
   Chip gốc là trắng trên leaf `#458763` = 4.29:1 — ĐO ĐƯỢC trên bản dựng này,
   trượt AA chữ thường (4.5). ACCESSIBILITY-CONTRACT §2.4 chốt: WordPress
   GIỮ NGUYÊN chip cũ (sửa là đụng nhận diện ở 25 trang), nhưng mã MỚI ⛔ không
   được dùng lại cặp đó. Đây là mã mới ⇒ nền đổi sang dark-moss `#155446`
   (trắng trên nền này = 8.79:1 ✅). Kẻ đứt nét vẫn là leaf nên mô-típ (a) đặc
   trưng của 4T giữ nguyên về mặt thị giác. */
.t4lms-tiep-nhan > p {
  flex: 0 0 auto; margin: 0;
  padding: 5px 9px; border-radius: 4px;
  background: var(--t4lms-dam); color: #FFFFFF;
  font-weight: 500; white-space: nowrap;
  text-transform: uppercase; letter-spacing: .2px;
}
.t4lms-tiep-nhan::after {
  content: ""; flex: 1 1 auto;
  border-top: 1px dashed var(--t4lms-leaf); opacity: .5;
}

.t4lms-tiep-the {
  display: flex;
  background: var(--t4lms-the);
  border-radius: var(--t4lms-bo-the);
  box-shadow: var(--t4lms-bong);
  overflow: hidden;
}
.t4lms-tiep-anh { display: block; width: 100%; height: 100%; object-fit: cover; }
.t4lms-tiep-noi { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.t4lms-tiep-khoa { color: var(--t4lms-chu-phu); font-weight: 600; text-transform: uppercase; letter-spacing: .2px; }
.t4lms-tiep-bai  { color: var(--t4lms-chu); font-family: var(--t4-font-head, Georgia, serif); font-weight: 500; }
.t4lms-tiep-meta { color: var(--t4lms-chu-phu); }
.t4lms-tiep-cta  { margin-top: auto; }

@media (max-width: 849px) {
  .t4lms-tiep-nhan > p { font-size: 13px; line-height: 19px; }
  .t4lms-tiep-the  { flex-direction: column; }
  .t4lms-tiep-anh-hop { width: 100%; aspect-ratio: 16 / 9; flex: 0 0 auto; }
  .t4lms-tiep-noi  { padding: 16px; gap: 8px; }
  .t4lms-tiep-khoa { font-size: 12px; line-height: 18px; }
  .t4lms-tiep-bai  { font-size: 18px; line-height: 26px; }
  .t4lms-tiep-meta { font-size: 14px; line-height: 22px; }
  .t4lms-tiep-cta  { padding-top: 8px; }
  .t4lms-tiep-cta .t4lms-nut { width: 100%; }
}
@media (min-width: 850px) {
  .t4lms-tiep-nhan > p { font-size: 14px; line-height: 19px; }
  .t4lms-tiep-the  { flex-direction: row; align-items: stretch; }
  /* 360 + 672 = 1032 = lòng khung ✓ */
  .t4lms-tiep-anh-hop { width: 360px; flex: 0 0 auto; }
  .t4lms-tiep-noi  { padding: 24px 28px; gap: 10px; }
  .t4lms-tiep-khoa { font-size: 14px; line-height: 22px; }
  .t4lms-tiep-bai  { font-size: 24px; line-height: 32px; }
  .t4lms-tiep-meta { font-size: 16px; line-height: 26px; }
  .t4lms-tiep-cta  { padding-top: 12px; }
}


/* ==========================================================================
   §5. DẢI LỌC  `.t4lms-loc`  — Đang học · Đã xong · Hết hạn
   ⛔ Đây là DETAIL ON DEMAND, không phải cấu hình. Mặc định "Đang học".
   ========================================================================== */

.t4lms-loc { display: flex; gap: 8px; }
.t4lms-loc-nut {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  /* ⛔ 44px, KHÔNG 40px. Wave 1 khai 40 và không ai đo — bộ đo Wave 2 bắt
     được ngay ở phép thử vùng chạm. WCAG 2.5.5 là 44×44 cho mọi đích bấm
     không nằm trong một dòng chữ chảy. */
  min-height: 44px; padding: 10px 16px;
  border: 1px solid var(--t4lms-ke);
  border-radius: 999px;
  background: transparent;
  color: var(--t4lms-chu);
  font-family: var(--t4-font-body, 'Manrope', sans-serif);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.t4lms-loc-nut:hover { background: var(--t4lms-kem); }
/* ⛔ Trạng thái chọn KHÔNG chỉ là màu — chữ đậm hơn hẳn (WCAG 1.4.1). */
.t4lms-loc-nut[aria-pressed="true"] {
  background: var(--t4lms-dam); color: #FFFFFF;     /* 8.79:1 ✅ */
  border-color: var(--t4lms-dam); font-weight: 700;
}

@media (max-width: 849px) {
  /* Chip cuộn ngang TRONG hộp riêng — ⛔ body không bao giờ cuộn ngang. */
  .t4lms-loc {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 20px; padding-bottom: 2px;
  }
  .t4lms-loc::-webkit-scrollbar { display: none; }
  .t4lms-loc-nut { font-size: 14px; line-height: 22px; }
}
@media (min-width: 850px) {
  .t4lms-loc { overflow-x: visible; flex-wrap: wrap; margin-bottom: 24px; }
  .t4lms-loc-nut { font-size: 14px; line-height: 22px; }
}


/* ==========================================================================
   §6. THẺ KHOÁ HỌC  `.t4lms-kh`
   Hiển thị: tên khoá · tiến độ · BÀI ĐANG HỌC · CTA "Tiếp tục học"
   ⛔ Cân hàng bằng flex + height:100%, KHÔNG bằng min-height (luật nền 11/09).
   ========================================================================== */

.t4lms-luoi-kh { display: grid; }

.t4lms-kh {
  display: flex; flex-direction: column;
  height: 100%;
  background: var(--t4lms-the);
  border-radius: var(--t4lms-bo-the);
  box-shadow: var(--t4lms-bong);
  overflow: hidden;
}
.t4lms-kh-anh-hop { width: 100%; aspect-ratio: 16 / 9; flex: 0 0 auto; background: var(--t4lms-kem); }
.t4lms-kh-anh { display: block; width: 100%; height: 100%; object-fit: cover; }
.t4lms-kh-than { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.t4lms-kh-ten  { color: var(--t4lms-chu); }
.t4lms-kh-ten a { color: inherit; text-decoration: none; }
.t4lms-kh-ten a:hover { text-decoration: underline; }

/* "Bài đang học" — thông tin đắt nhất của thẻ, đứng ngay dưới tên khoá. */
.t4lms-kh-bai {
  display: flex; align-items: flex-start; gap: 8px;
  color: var(--t4lms-chu-phu);                       /* 6.48:1 trên thẻ ✅ */
}
.t4lms-kh-bai-ten { color: var(--t4lms-chu); font-weight: 600; }
.t4lms-kh-chan { margin-top: auto; }
.t4lms-kh-chan .t4lms-nut { width: 100%; }

/* Hết hạn — tiến độ VẪN HIỆN, chỉ đọc. ⛔ Không xoá, không về 0. */
.t4lms-kh--het-han .t4lms-kh-anh-hop { filter: grayscale(1); }

@media (max-width: 849px) {
  /* ⭐ W3-D — số cột do BỀ RỘNG KHUNG quyết định, ⛔ không do breakpoint mới.
     `auto-fit` + `minmax(300px, 1fr)` đọc chính khung mẹ:
         khung 352 (điện thoại) → 1 cột   ✓ giữ nguyên hợp đồng cũ
         khung 718 (khổ 768)    → 2 cột × 351   ✓ đúng cỡ thẻ desktop (328)
         khung 720 (849)        → 2 cột × 352
     ⛔ KHÔNG bao giờ ra 3 cột ở ≤849: cần khung ≥ 916px, mà trần là 720.
        Luật "không 3+ cột ở ≤849" của RESPONSIVE-CONTRACT §4 được giữ BẰNG
        SỐ HỌC, không bằng lời hứa. */
  .t4lms-luoi-kh { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
  .t4lms-kh-than { padding: 16px; gap: 10px; }
  .t4lms-kh-ten  { font-size: 18px; line-height: 26px; }
  .t4lms-kh-bai  { font-size: 14px; line-height: 22px; }
  .t4lms-kh-chan { padding-top: 6px; }
}
@media (min-width: 850px) {
  /* 328 × 3 + 24 × 2 = 1032 (lòng khung) ✓  ⛔ không bao giờ 3 cột ở ≤849 */
  .t4lms-luoi-kh { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .t4lms-kh-than { padding: 20px; gap: 12px; }
  .t4lms-kh-ten  { font-size: 20px; line-height: 28px; }
  .t4lms-kh-bai  { font-size: 14px; line-height: 22px; }
  .t4lms-kh-chan { padding-top: 8px; }
}


/* ==========================================================================
   §7. TRÌNH PHÁT — KHUNG LƯỚI
   Thứ tự ưu tiên MOBILE (4T chốt, KHÔNG đảo):
     1 video → 2 tên bài → 3 tiến độ → 4 BÀI TIẾP THEO → 5 mục lục → 6 tài liệu
   ⛔ KHÔNG giữ nguyên sidebar desktop trên mobile.
   Dùng grid-template-areas ⇒ thứ tự DOM giữ đúng ưu tiên mobile, desktop
   xếp lại bằng CSS mà không đụng DOM.
   ========================================================================== */

.t4lms-play { display: grid; }
/* ⛔ `min-width: 0` trên MỌI ô lưới. Mặc định ô lưới là `min-width: auto`
   (= min-content) và KHÔNG co nhỏ hơn từ dài nhất bên trong nó. Thiếu dòng
   này thì `minmax(0, 1fr)` ở trên vẫn bị chính ô lưới đẩy rộng ra. */
.t4lms-play > * { min-width: 0; }
.t4lms-play-video { grid-area: video; }
.t4lms-play-dau   { grid-area: dau; }
.t4lms-play-td    { grid-area: td; }
.t4lms-play-dh    { grid-area: dh; }
.t4lms-play-ml    { grid-area: ml; }
.t4lms-play-tl    { grid-area: tl; }

.t4lms-play-ten { color: var(--t4lms-chu); }
.t4lms-play-khoa {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--t4lms-chu-phu); text-decoration: none;
}
.t4lms-play-khoa:hover { text-decoration: underline; }
.t4lms-play-dem { color: var(--t4lms-chu-phu); font-variant-numeric: tabular-nums; }

@media (max-width: 849px) {
  .t4lms-play {
    /* ⭐ `minmax(0, 1fr)`, KHÔNG `1fr`.
       Đo được: `1fr` = `minmax(auto, 1fr)`, và `auto` của một ô lưới là
       MIN-CONTENT. Một tên bài viết liền không dấu cách
       ("ChuyenSauQuangCaoGoogleShoppingChoNganhThoiTrang") có min-content
       ~750px ⇒ cả cột nở ra 759px trong khung nhìn 375px, tràn +395px.
       ⛔ Lỗi này KHÔNG hiện ra với dữ liệu mẫu "Bài 1 / Bài 2" — đó là lý do
          bộ dữ liệu đo cố tình có một chuỗi dài không chỗ ngắt. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "video" "dau" "td" "dh" "ml" "tl";
    gap: 16px;
  }
  /* ⛔ KHÔNG kéo video tràn mép ở mobile.
     Tràn mép cần `width: 100vw` + `margin-inline: calc(50% - 50vw)`. `100vw`
     CỘNG CẢ bề rộng thanh cuộn cổ điển ⇒ tràn ngang thật trên trình duyệt có
     thanh cuộn chiếm chỗ. Cách cũ `margin-inline: -25px` còn tệ hơn: nó đúng
     ĐÚNG ở khổ 402 và tràn 27px ở khổ 375 (đo được). Luật "body không bao giờ
     cuộn ngang" nặng hơn lợi ích thị giác của việc chạm mép. */
  .t4lms-play-video { margin-inline: 0; }
  .t4lms-play-ten   { font-size: 20px; line-height: 28px; }
  .t4lms-play-khoa  { font-size: 14px; line-height: 22px; }
  .t4lms-play-dem   { font-size: 14px; line-height: 22px; }
}
@media (min-width: 850px) {
  /* 704 + 24 + 304 = 1032 (lòng khung) ✓ */
  .t4lms-play {
    grid-template-columns: minmax(0, 1fr) 304px;
    /* Cột trái, đúng thứ tự đặc tả màn desktop:
       video · tên bài · tiến độ · tài liệu · nút trước/sau (CUỐI). */
    grid-template-areas:
      "video ml"
      "dau   ml"
      "td    ml"
      "tl    ml"
      "dh    ml";
    grid-template-rows: auto auto auto auto 1fr;
    align-items: start;
    gap: 20px 24px;
  }
  .t4lms-play-video { margin-inline: 0; }
  .t4lms-play-ten   { font-size: 28px; line-height: 38px; }   /* 1,36 ✅ */
  .t4lms-play-khoa  { font-size: 16px; line-height: 26px; }
  .t4lms-play-dem   { font-size: 16px; line-height: 26px; }
}


/* ==========================================================================
   §8. KHUNG PHÁT 16:9  `.t4lms-video`
   ========================================================================== */

.t4lms-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #151515;
  overflow: hidden;
}
.t4lms-video > iframe,
.t4lms-video > video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
}

/* Khung trình phát video demo (`CauHinhVideoDemo::nhung_video`): video nằm TRONG
   `.t4lms-vd` ⇒ luật `> video` ở trên ⛔ còn khớp, phải căng lại ở đây. */
.t4lms-vd {
  position: absolute; inset: 0;
}
.t4lms-vd > video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
}

/* Lớp phủ trạng thái video — VIDEO_PROCESSING / VIDEO_UNAVAILABLE / LESSON_LOCKED
   ⛔ KHÔNG đặt chữ thẳng lên nền tối rồi lại đặt hộp cảnh báo nền sáng lên trên:
      hai hệ màu chồng nhau là chỗ tương phản trượt mà không ai soi ra. Lớp phủ
      CHỈ làm nền tối; mọi chữ nằm trong `.t4lms-canh`, giữ nguyên cặp màu đã
      tính của chính nó (§13). */
.t4lms-video-phu {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: #1B1B1B;
}
.t4lms-video-phu > .t4lms-canh { width: 100%; max-width: 560px; }

@media (max-width: 849px) {
  .t4lms-video { border-radius: 10px; }
  .t4lms-video-phu p { font-size: 14px; line-height: 22px; }
}
@media (min-width: 850px) {
  .t4lms-video { border-radius: 10px; }               /* radius.media */
  .t4lms-video-phu p { font-size: 16px; line-height: 26px; }
}


/* ==========================================================================
   §9. MỤC LỤC  `.t4lms-ml`
   Desktop: cột phải 304px, cuộn riêng, dính.
   Mobile:  NGĂN KÉO/accordion — ⛔ không phải cột bên.
   ========================================================================== */

.t4lms-ml {
  background: var(--t4lms-the);
  border: 1px solid var(--t4lms-ke);
  border-radius: var(--t4lms-bo-the);
  overflow: hidden;
}
.t4lms-ml-dau {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  min-height: 48px;
  background: var(--t4lms-kem);
  border: 0; border-bottom: 1px solid var(--t4lms-ke);
  font-family: var(--t4-font-body, 'Manrope', sans-serif);
  font-weight: 700;
  color: var(--t4lms-chu);            /* 13.52:1 trên kem ✅ */
  text-align: left;
}
button.t4lms-ml-dau { cursor: pointer; }
.t4lms-ml-dau-phu { font-weight: 500; color: var(--t4lms-chu-phu); font-variant-numeric: tabular-nums; }

/* ── Chương (accordion) ───────────────────────────────────────────────── */
.t4lms-chuong { border-bottom: 1px solid var(--t4lms-ke); }
.t4lms-chuong:last-child { border-bottom: 0; }

.t4lms-chuong-nut {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  width: 100%; min-height: 48px;
  padding: 12px 16px;
  background: none; border: 0;
  font-family: var(--t4-font-body, 'Manrope', sans-serif);
  font-weight: 600;
  color: var(--t4lms-chu);
  text-align: left; cursor: pointer;
}
.t4lms-chuong-nut:hover { background: rgba(69, 135, 99, .06); }
.t4lms-chuong-ten { min-width: 0; }
.t4lms-chuong-dem { flex: 0 0 auto; color: var(--t4lms-chu-phu); font-weight: 500; font-variant-numeric: tabular-nums; }
.t4lms-chuong-mui {
  flex: 0 0 auto; width: 18px; height: 18px;
  fill: currentColor;
  transition: transform .3s ease-out;
}
.t4lms-chuong-nut[aria-expanded="true"] .t4lms-chuong-mui { transform: rotate(180deg); }

/* ⛔ Panel đóng dùng thuộc tính `hidden`, không class display:none —
   để Ctrl+F của trình duyệt còn tìm được khi mở. */
.t4lms-chuong-ruot { padding: 0 0 8px; }

/* ── Bài học ──────────────────────────────────────────────────────────── */
.t4lms-bai {
  display: flex; align-items: flex-start; gap: 10px;
  width: 100%; min-height: 44px;
  padding: 10px 16px 10px 14px;
  border-left: 3px solid transparent;
  color: var(--t4lms-chu);
  text-decoration: none;
  background: none;
}
.t4lms-bai:hover { background: rgba(69, 135, 99, .06); }
.t4lms-bai-ic { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px; fill: currentColor; }
.t4lms-bai-noi { min-width: 0; flex: 1 1 auto; }
.t4lms-bai-ten { display: block; }
.t4lms-bai-tl  { display: block; color: var(--t4lms-chu-phu); font-variant-numeric: tabular-nums; }

.t4lms-bai--xong .t4lms-bai-ic { color: var(--t4lms-xong); }        /* 6.31:1 ✅ */

/* Bài ĐANG HỌC: ⛔ không chỉ đổi màu — có nền, viền trái 3px và chữ đậm. */
.t4lms-bai--dang {
  background: var(--t4lms-kem);
  border-left-color: var(--t4lms-dam);
  color: var(--t4lms-dam);                                          /* 7.21:1 ✅ */
}
.t4lms-bai--dang .t4lms-bai-ten { font-weight: 700; }
.t4lms-bai--dang .t4lms-bai-tl  { color: #4A4A4A; }                 /* trên kem = 7.27:1 ✅ */

.t4lms-bai--khoa { color: var(--t4lms-chu-phu); cursor: not-allowed; }
.t4lms-bai--khoa:hover { background: none; }
.t4lms-bai--khoa .t4lms-bai-dk { display: block; color: var(--t4lms-luu-y); }  /* 5.81:1 trên thẻ trắng */

@media (max-width: 849px) {
  /* NGĂN KÉO: đầu mục lục là nút bật/tắt, ruột cuộn trong hộp riêng.
     ⛔ Khai `position: static` TƯỜNG MINH dù đó cũng là giá trị mặc định:
        khổ kia đặt `sticky`, và người sửa sau phải đọc thấy rằng ở khổ này
        cột phải KHÔNG dính. Để trống là mời người sau đoán. */
  .t4lms-play-ml { position: static; }
  .t4lms-ml-cuon { max-height: 60vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .t4lms-ml-dau  { font-size: 15px; line-height: 24px; }
  .t4lms-chuong-nut { font-size: 15px; line-height: 24px; }
  .t4lms-chuong-dem { font-size: 13px; line-height: 20px; }
  .t4lms-bai-ten { font-size: 14px; line-height: 22px; }
  .t4lms-bai-tl  { font-size: 12px; line-height: 18px; }
  .t4lms-bai-dk  { font-size: 12px; line-height: 18px; }
}
@media (min-width: 850px) {
  /* Cột phải dính dưới header 76px + khe 8. Cuộn RIÊNG, không kéo dài trang. */
  .t4lms-play-ml { position: sticky; top: 84px; }
  .t4lms-ml-cuon { max-height: calc(100vh - 84px - 60px); overflow-y: auto; }
  .t4lms-ml-dau  { font-size: 16px; line-height: 26px; }
  .t4lms-chuong-nut { font-size: 15px; line-height: 24px; }
  .t4lms-chuong-dem { font-size: 13px; line-height: 20px; }
  .t4lms-bai-ten { font-size: 14px; line-height: 22px; }
  .t4lms-bai-tl  { font-size: 12px; line-height: 18px; }
  .t4lms-bai-dk  { font-size: 12px; line-height: 18px; }
}


/* ==========================================================================
   §10. ĐIỀU HƯỚNG BÀI + ĐÁNH DẤU ĐÃ HỌC  `.t4lms-dh`
   Mobile: dính đáy, LUÔN trong tầm ngón cái, nằm TRÊN thanh nút đáy 70px.
   ========================================================================== */

.t4lms-dh { display: flex; align-items: center; }
.t4lms-dh-truoc,
.t4lms-dh-sau { flex: 0 0 auto; }
.t4lms-dh-giua { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }

/* Chip báo đồng bộ tiến độ hỏng — PROGRESS_SYNC_FAILED.
   ⛔ Không chặn xem tiếp. ⛔ Không in 0%. */
.t4lms-dongbo {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px;
  border-radius: var(--t4lms-bo-o);
  border-left: 4px solid var(--t4lms-luu-y);
  background: var(--t4lms-luu-y-nen);
  color: var(--t4lms-luu-y);                       /* 5.17:1 ✅ */
}
.t4lms-dongbo p { color: inherit; }
/* 🔴 W13-L3 — `display:flex/grid` của một class THẮNG `[hidden]` của UA (cùng
   phía tác giả > UA) ⇒ đo bằng trình duyệt thật: chip "Chưa lưu được tiến độ"
   hiện ở MỌI bài, "Không có khoá nào trong mục này" hiện cạnh thẻ khoá ở /hoc/.
   lms.js bật/tắt bằng `.hidden` ⇒ MỘT luật cho cả vùng, ⛔ không vá từng class. */
.t4lms [hidden] { display: none !important; }
.t4lms-dongbo-nut {
  flex: 0 0 auto; min-height: 32px; padding: 4px 12px;
  border: 1px solid currentColor; border-radius: var(--t4lms-bo-o);
  background: transparent; color: inherit;
  font-family: var(--t4-font-body, 'Manrope', sans-serif); font-weight: 700;
  cursor: pointer;
}
.t4lms-dongbo-nut:hover { background: rgba(140, 90, 43, .12); }

@media (max-width: 849px) {
  /* ⛔ `position: fixed` + `left/right: 0`, KHÔNG phải `sticky` + lề âm.
     Hai lý do, cả hai đo được:
     1. Lề âm `-25px` chỉ đúng ở khổ 402 (lề thật = 25). Ở 375 lề thật là
        11,5 ⇒ thanh rộng 402 trong khung nhìn 375 ⇒ TRÀN NGANG +14px. Cùng
        một con số gõ cứng, đúng một khổ, sai mọi khổ khác.
     2. `sticky bottom` chỉ ghim khi còn nội dung phía dưới. Bài cuối cùng của
        chương, trang ngắn ⇒ nút "Bài tiếp theo" trôi lên giữa màn. Yêu cầu là
        LUÔN trong tầm ngón cái, nên phải là `fixed`. */
  .t4lms-dh {
    position: fixed;
    left: 0; right: 0;
    bottom: calc(var(--t4lms-day-mobile) + env(safe-area-inset-bottom, 0px));
    z-index: 20;
    gap: 8px;
    margin-inline: 0;
    /* Thanh rộng hết khung nhìn (không tràn được), nhưng RUỘT của nó vẫn khoá
       ở 352 để thẳng hàng với `.t4lms-khung`. Đo được ở 768: không có luật
       này thì nút "Bài tiếp theo" giãn ra 639px. */
    /* ⭐ W3-D: ruột thanh thẳng hàng với `.t4lms-khung` MỚI (trần 720), không
       còn khoá cứng ở 352. Ở 768 ruột ra 718 — đúng bằng khung nội dung, nên
       nút không còn lệch so với cột chữ phía trên.
       ⛔ Thẳng hàng KHÔNG có nghĩa là nút được giãn theo: xem trần nút ngay
          dưới. Wave 1 để nút ra 639px ở đúng khổ 768 này. */
    padding-inline: max(25px, calc((100% - 720px) / 2));
    padding-block: 10px;
    background: var(--t4lms-nen);
    border-top: 1px solid var(--t4lms-ke);
  }
  /* Chừa chỗ cho thanh cố định, nếu không bài cuối bị nó che. */
  .t4lms-play { padding-bottom: 84px; }
  /* "Bài sau" là hành động chính ⇒ chiếm phần rộng nhất, ngón cái với tới. */
  /* "Bài sau" là hành động chính ⇒ chiếm phần rộng nhất, ngón cái với tới.
     ⛔ Nhưng KHÔNG rộng hơn 352px: trên máy tính bảng
        718px một nút là vùng chạm phi lý và là đúng lỗi G3 của Wave 1.
        Dồn về phải để vẫn nằm dưới ngón cái thuận. */
  .t4lms-dh-sau   { flex: 1 1 auto; display: flex; justify-content: flex-end; min-width: 0; }
  .t4lms-dh-sau .t4lms-nut { width: 100%; max-width: 352px; }
  .t4lms-dh-truoc .t4lms-nut { min-width: 44px; padding-inline: 14px; }
  .t4lms-dh-giua  { display: none; }   /* "Đánh dấu đã học" xuống dưới video */
  .t4lms-danh-dau-mobile { display: block; }
  .t4lms-danh-dau-mobile .t4lms-nut { width: 100%; }
  .t4lms-dongbo { font-size: 14px; line-height: 22px; }
}
@media (min-width: 850px) {
  .t4lms-play { padding-bottom: 0; }
  .t4lms-dh {
    position: static;
    gap: 16px;
    margin-inline: 0;
    padding: 16px 0 0;
    background: transparent;
    border-top: 1px solid var(--t4lms-ke);
  }
  .t4lms-dh-sau   { flex: 0 0 auto; }
  .t4lms-dh-giua  { display: flex; }
  .t4lms-danh-dau-mobile { display: none; }
  .t4lms-dongbo { font-size: 14px; line-height: 22px; }
}


/* ==========================================================================
   §11. TÀI LIỆU  `.t4lms-tl`
   ⛔ Thẻ xếp dọc ở CẢ HAI khổ — bảng 4 cột vỡ ở 352px, và ở desktop danh sách
      tài liệu của một bài hiếm khi quá 5 dòng nên bảng không mang lại gì.
   ========================================================================== */

.t4lms-tl-ds { display: flex; flex-direction: column; gap: 8px; }
.t4lms-tl-muc {
  display: flex; align-items: center; gap: 12px;
  min-height: 56px;
  padding: 12px 14px;
  background: var(--t4lms-the);
  border: 1px solid var(--t4lms-ke);
  border-radius: var(--t4lms-bo-o);
  color: var(--t4lms-chu);
  text-decoration: none;
}
.t4lms-tl-muc:hover { border-color: var(--t4lms-ke-dam); background: #FDFCF9; }
.t4lms-tl-ic { flex: 0 0 auto; width: 20px; height: 20px; fill: currentColor; color: var(--t4lms-leaf); }
.t4lms-tl-noi { flex: 1 1 auto; min-width: 0; }
.t4lms-tl-ten { display: block; font-weight: 600; }
.t4lms-tl-meta { display: block; color: var(--t4lms-chu-phu); font-variant-numeric: tabular-nums; }
.t4lms-tl-tai { flex: 0 0 auto; color: var(--t4lms-dam); font-weight: 700; }

@media (max-width: 849px) {
  .t4lms-tl-ten { font-size: 14px; line-height: 22px; }
  .t4lms-tl-meta { font-size: 12px; line-height: 18px; }
  .t4lms-tl-tai { font-size: 14px; line-height: 22px; }
}
@media (min-width: 850px) {
  .t4lms-tl-ten { font-size: 16px; line-height: 26px; }
  .t4lms-tl-meta { font-size: 13px; line-height: 20px; }
  .t4lms-tl-tai { font-size: 14px; line-height: 22px; }
}


/* ==========================================================================
   §12. TÀI KHOẢN  `.t4lms-tk` — TỐI GIẢN
   Ba nhóm, xếp dọc ở cả hai khổ. ⛔ Không sidebar điều hướng riêng: màn này
   chỉ có 3 nhóm, một cột điều hướng 240px cho 3 mục là cấu hình thừa.
   ========================================================================== */

.t4lms-tk { display: flex; flex-direction: column; }
.t4lms-tk-nhom {
  background: var(--t4lms-the);
  border-radius: var(--t4lms-bo-the);
  box-shadow: var(--t4lms-bong);
}
.t4lms-tk-nhom > h2 { margin-bottom: 4px; }
.t4lms-tk-mo-ta { color: var(--t4lms-chu-phu); }

.t4lms-o { display: flex; flex-direction: column; gap: 6px; }
.t4lms-o-nhan { font-weight: 500; color: var(--t4lms-chu); }
.t4lms-o-nhap {
  width: 100%;
  height: 48px;                       /* vùng bấm ≥44 ✅ */
  padding: 13px 15px;
  border: 1px solid #E3DED4;
  border-radius: var(--t4lms-bo-o);
  background: #FCFBF8;
  color: var(--t4lms-chu);
  font-family: var(--t4-font-body, 'Manrope', sans-serif);
  font-size: 14px; line-height: 22px; font-weight: 400;
}
.t4lms-o-nhap::placeholder { color: #8A8378; opacity: 1; }
.t4lms-o-nhap:hover { border-color: #D9D3C6; }
/* ⛔ KHÔNG `outline: 0` — xem ACCESSIBILITY-CONTRACT §4 nợ 2. */
.t4lms-o-nhap:focus-visible {
  border-color: var(--t4lms-leaf);
  background: #FFFFFF;
  outline: 2px solid var(--t4lms-leaf);
  outline-offset: 1px;
}
.t4lms-o-nhap[readonly],
.t4lms-o-nhap[disabled] { background: var(--t4lms-kem); color: var(--t4lms-chu-phu); cursor: not-allowed; }
.t4lms-o-nhap[aria-invalid="true"] { border: 2px solid #B3261E; }
/* ⛔ Lỗi KHÔNG được báo chỉ bằng màu — luôn có CHỮ (WCAG 1.4.1). */
.t4lms-o-loi { color: #A32218; font-weight: 600; }                   /* 7.50:1 ✅ */
.t4lms-o-goi-y { color: var(--t4lms-chu-phu); }

@media (max-width: 849px) {
  .t4lms-tk { gap: 16px; }
  .t4lms-tk-nhom { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
  .t4lms-tk-mo-ta { font-size: 14px; line-height: 22px; }
  .t4lms-o-nhan { font-size: 14px; line-height: 22px; }
  .t4lms-o-loi, .t4lms-o-goi-y { font-size: 13px; line-height: 20px; }
  .t4lms-tk-chan .t4lms-nut { width: 100%; }
}
@media (min-width: 850px) {
  .t4lms-tk { gap: 24px; max-width: 720px; }
  .t4lms-tk-nhom { padding: 28px 30px; display: flex; flex-direction: column; gap: 20px; }
  .t4lms-tk-mo-ta { font-size: 16px; line-height: 26px; }
  .t4lms-o-nhan { font-size: 16px; line-height: 26px; }
  .t4lms-o-loi, .t4lms-o-goi-y { font-size: 14px; line-height: 22px; }
  .t4lms-tk-chan .t4lms-nut { width: auto; }
}


/* ==========================================================================
   §13. TRẠNG THÁI RỖNG  `.t4lms-rong`  +  CẢNH BÁO  `.t4lms-canh`
   ⛔ "Không có dữ liệu" KHÔNG được biến thành số 0.
   ========================================================================== */

.t4lms-rong {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  background: var(--t4lms-the);
  border: 1px solid var(--t4lms-ke);
  border-radius: var(--t4lms-bo-the);
}
.t4lms-rong-hinh { flex: 0 0 auto; width: 64px; height: 64px; fill: currentColor; color: var(--t4lms-leaf); }
.t4lms-rong-td { color: var(--t4lms-chu); font-family: var(--t4-font-head, Georgia, serif); font-weight: 500; }
.t4lms-rong-mt { color: var(--t4lms-chu-phu); max-width: 46ch; }
.t4lms-rong-nut { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

.t4lms-canh {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px;
  border-radius: var(--t4lms-bo-o);
  border-left: 4px solid currentColor;
}
.t4lms-canh p { color: inherit; }
.t4lms-canh-ic { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; fill: currentColor; }
.t4lms-canh--tin   { background: var(--t4lms-tin-nen);   color: var(--t4lms-tin); }    /* 7.99:1 */
.t4lms-canh--xong  { background: var(--t4lms-xong-nen);  color: var(--t4lms-xong); }   /* 5.41:1 */
.t4lms-canh--luu-y { background: var(--t4lms-luu-y-nen); color: var(--t4lms-luu-y); }  /* 5.17:1 */
.t4lms-canh--loi   { background: var(--t4lms-loi-nen);   color: var(--t4lms-loi); }    /* 6.40:1 */

/* Mã sự cố để người học nhắn hỗ trợ — VIDEO_UNAVAILABLE. */
.t4lms-ma-loi {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .4px;
  user-select: all;
}

@media (max-width: 849px) {
  .t4lms-rong { padding: 28px 20px; gap: 12px; }
  .t4lms-rong-td { font-size: 18px; line-height: 26px; }
  .t4lms-rong-mt { font-size: 14px; line-height: 22px; }
  .t4lms-rong-nut { margin-top: 4px; width: 100%; }
  .t4lms-rong-nut .t4lms-nut { width: 100%; }
  .t4lms-canh { font-size: 14px; line-height: 22px; }
  .t4lms-ma-loi { font-size: 13px; }
}
@media (min-width: 850px) {
  .t4lms-rong { padding: 48px 32px; gap: 16px; }
  .t4lms-rong-td { font-size: 24px; line-height: 32px; }
  .t4lms-rong-mt { font-size: 16px; line-height: 26px; }
  .t4lms-rong-nut { margin-top: 8px; width: auto; }
  .t4lms-rong-nut .t4lms-nut { width: auto; }
  .t4lms-canh { font-size: 16px; line-height: 26px; }
  .t4lms-ma-loi { font-size: 14px; }
}


/* ==========================================================================
   §14. ĐANG TẢI — SKELETON đúng hình khối thật
   ⛔ Không spinner giữa màn: spinner không nói trước cái gì sắp hiện ra,
      skeleton thì có, và nó chặn luôn hiện tượng nhảy bố cục khi dữ liệu về.
   ========================================================================== */

.t4lms-skel { position: relative; overflow: hidden; background: #EDE8DE; border-radius: var(--t4lms-bo-o); }
.t4lms-skel::after {
  content: "";
  position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.65) 50%, rgba(255,255,255,0) 100%);
  animation: t4lms-luot 1.4s ease-in-out infinite;
}
@keyframes t4lms-luot { to { transform: translateX(100%); } }

.t4lms-skel--anh  { width: 100%; aspect-ratio: 16 / 9; border-radius: 0; }
.t4lms-skel--ten  { height: 22px; width: 78%; }
.t4lms-skel--dong { height: 14px; width: 100%; }
.t4lms-skel--dong-ngan { height: 14px; width: 52%; }
.t4lms-skel--thanh { height: 8px; width: 100%; border-radius: 999px; }
.t4lms-skel--nut  { height: 44px; width: 100%; border-radius: var(--t4lms-bo-nut); }

.t4lms-skel-the {
  display: flex; flex-direction: column;
  background: var(--t4lms-the);
  border-radius: var(--t4lms-bo-the);
  box-shadow: var(--t4lms-bong);
  overflow: hidden;
}
.t4lms-skel-than { display: flex; flex-direction: column; gap: 10px; }

@media (max-width: 849px) { .t4lms-skel-than { padding: 16px; } }
@media (min-width: 850px) { .t4lms-skel-than { padding: 20px; } }


/* ==========================================================================
   §15. TIỆN ÍCH — chữ ẩn, vành focus, giảm chuyển động
   ========================================================================== */

.t4lms-an-nhin {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* Nhảy-tới-nội-dung: hiện ra khi có focus. */
.t4lms-bo-qua {
  position: absolute; left: 8px; top: -80px; z-index: 60;
  padding: 10px 16px;
  background: var(--t4lms-dam); color: #FFFFFF;
  border-radius: var(--t4lms-bo-nut); text-decoration: none; font-weight: 700;
  transition: top .15s;
}
.t4lms-bo-qua:focus-visible { top: 8px; }

/* ⛔ Vành focus DUY NHẤT của khu vực học. KHÔNG BAO GIỜ `outline: 0`. */
.t4lms :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--t4lms-leaf);   /* 4.14:1 trên nền trang ✅ (UI ≥3) */
  outline-offset: 2px;
  border-radius: inherit;
}
/* Trên nền đậm, leaf chỉ 2.02:1 ⇒ đổi sang trắng (8.79:1). */
.t4lms-nen-dam :where(a, button, [tabindex]):focus-visible { outline-color: #FFFFFF; }

/* ⚠⚠ NÚT `--chinh` — SỬA Ở WAVE 3 (W3-D). ⛔ ĐỌC TRƯỚC KHI ĐỔI LẠI TRẮNG.
   Bản cũ cho nút này `outline-color: #FFFFFF` vì tưởng vành nằm TRÊN nút (nút
   nâu, vành trắng ⇒ rõ). Sai ở một chữ: `outline-offset: 2px` đẩy vành ra
   NGOÀI nút, nên nền liền kề của nó là NỀN TRANG màu kem, không phải nút.
   Đo được: trắng : kem = 1,00–1,17 — trượt SC 1.4.11 (cần 3:1) trên cả ba
   nút `--chinh` ở mọi khổ, trong khi phép thử "có vành không" vẫn báo xanh.
   ⭐ Cùng một dạng lỗi với ngưỡng 18,66px: phép thử SỰ CÓ MẶT không thay được
      phép thử NGƯỠNG.

   Cách sửa — ⛔ KHÔNG đổi màu 4T đã chốt, chỉ đổi vai trò hai lớp:
     · vành NGOÀI  = leaf, đo với nền trang  → 4,14:1 ✅ (bỏ luật đè trắng đi)
     · vòng TRONG  = trắng, nằm trong khe 2px, đo với nút nâu → 4,31:1 ✅
   Hai lớp ⇒ vành nhìn thấy được dù nút đứng trên nền kem hay nền đậm. */
.t4lms-nut--chinh:focus-visible { box-shadow: 0 0 0 2px #FFFFFF; }

/* 2.4.11 Focus Not Obscured — header dính 76px, thanh đáy mobile 70px. */
@media (max-width: 849px) {
  .t4lms { scroll-padding-top: 68px; scroll-padding-bottom: calc(var(--t4lms-day-mobile) + 78px); }
}
@media (min-width: 850px) {
  .t4lms { scroll-padding-top: 84px; scroll-padding-bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .t4lms *,
  .t4lms *::before,
  .t4lms *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ⛔ Thử 1 của biên bản nghiệm thu: body KHÔNG BAO GIỜ cuộn ngang.
   Nội dung rộng cuộn TRONG hộp riêng (`.t4lms-loc`, `.t4lms-ml-cuon`,
   `.t4lms-play-nd pre/table`).

   ⛔ Ở đây CỐ Ý KHÔNG dùng `overflow-x: clip` trên `.t4lms`.
      Nó không chữa tràn, nó GIẤU tràn: `documentElement.scrollWidth` sẽ luôn
      bằng `clientWidth` nên phép Thử 1 xanh trong khi bố cục vẫn sai. Đúng
      kiểu hỏng-im-lặng mà dự án đã trả giá nhiều lần. Không tràn phải là kết
      quả của bố cục, không phải của một lớp che. */


/* ==========================================================================
   §15b. MẢNH GHÉP CÒN LẠI — khai muộn để không phá thứ tự đọc của §1–§14
   ========================================================================== */

/* Đầu mục lục: nhãn chiếm phần co giãn, số bài và mũi neo về phải. */
.t4lms-ml-dau > span:first-child { flex: 1 1 auto; min-width: 0; }
.t4lms-ml-dau[aria-expanded="true"] .t4lms-chuong-mui { transform: rotate(180deg); }

/* Chữ phụ cạnh thanh tiến độ, vd "12/48 bài". */
.t4lms-td-phu { flex: 0 0 auto; color: var(--t4lms-chu-phu); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Nội dung bài (HTML tự do do biên tập viên gõ). */
.t4lms-play-nd > * + * { margin-top: 16px; }
.t4lms-play-nd img { max-width: 100%; height: auto; border-radius: 10px; }
/* ⛔ Khối mã / bảng trong bài cuộn TRONG hộp riêng, body không cuộn ngang. */
.t4lms-play-nd pre,
.t4lms-play-nd table { display: block; max-width: 100%; overflow-x: auto; }

.t4lms-dang-tai { display: flex; flex-direction: column; gap: 16px; }

@media (max-width: 849px) {
  .t4lms-td-phu { font-size: 13px; line-height: 20px; }
  .t4lms-play-dau { display: flex; flex-direction: column; gap: 6px; }
  .t4lms-play-td  { display: flex; flex-direction: column; gap: 12px; }
  .t4lms-play-tl  { display: flex; flex-direction: column; gap: 20px; }
  .t4lms-tl h2    { margin-bottom: 10px; }
  .t4lms-tk-nhom form { display: flex; flex-direction: column; gap: 16px; }
  .t4lms-play-nd  { font-size: 16px; line-height: 26px; }
}
@media (min-width: 850px) {
  .t4lms-td-phu { font-size: 14px; line-height: 22px; }
  .t4lms-play-dau { display: flex; flex-direction: column; gap: 8px; }
  .t4lms-play-td  { display: flex; flex-direction: column; gap: 14px; }
  .t4lms-play-tl  { display: flex; flex-direction: column; gap: 24px; }
  .t4lms-tl h2    { margin-bottom: 12px; }
  .t4lms-tk-nhom form { display: flex; flex-direction: column; gap: 20px; }
  .t4lms-play-nd  { font-size: 16px; line-height: 26px; }
}


/* ==========================================================================
   §15c. WAVE 2 — A4: HUY HIỆU TRẠNG THÁI · SỐ ĐẾM TRÊN CHIP LỌC · MẤT QUYỀN
   ⛔ Mọi luật ở đây bọc `@media` đúng khổ. Luật KHÔNG bọc là luật KHÔNG phụ
      thuộc khổ (màu, viền, hình dạng) — cố ý, không phải quên.
   ========================================================================== */

/* ── Huy hiệu góc ảnh: CHỮ + icon, ⛔ không bao giờ chỉ màu (WCAG 1.4.1) ──── */
.t4lms-kh-anh-hop { position: relative; }
.t4lms-kh-huy {
  position: absolute; left: 10px; top: 10px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 700;
  /* ⛔ Nền ĐỤC, không `rgba` mờ: huy hiệu nằm trên ảnh bìa do người dùng tải
     lên, và mọi phép tính tương phản bên dưới chỉ đúng khi nền là màu đặc. */
}
.t4lms-kh-huy .t4lms-ic { flex: 0 0 auto; fill: currentColor; }
.t4lms-kh-huy--da-xong    { background: var(--t4lms-xong-nen);  color: var(--t4lms-xong); }   /* 5.41:1 ✅ */
.t4lms-kh-huy--het-han    { background: var(--t4lms-luu-y-nen); color: var(--t4lms-luu-y); }  /* 5.17:1 ✅ */
.t4lms-kh-huy--bi-thu-hoi { background: var(--t4lms-luu-y-nen); color: var(--t4lms-luu-y); }  /* 5.17:1 ✅ */

/* ── Mất quyền (hết hạn HOẶC bị thu hồi) ──────────────────────────────────
   ⛔ KHÔNG `opacity` trên cả thẻ. Opacity nhân vào mọi lớp con và kéo chữ
      xuống dưới ngưỡng tương phản — đúng cái bẫy §2 đã ghi cho nút disabled.
      Xám chỉ áp cho ẢNH; chữ và tiến độ giữ nguyên độ tương phản. */
.t4lms-kh--mat-quyen .t4lms-kh-anh-hop { filter: grayscale(1); }
.t4lms-kh-vi-sao { color: var(--t4lms-luu-y); }                      /* 5.81:1 trên thẻ ✅ */
.t4lms-kh-vi-sao .t4lms-ic { fill: currentColor; }

/* ⚠ Giữ tên cũ `--het-han` của Wave 1 để không gãy nơi nào còn dùng. */
.t4lms-kh--het-han .t4lms-kh-anh-hop { filter: grayscale(1); }

/* ── Số đếm trên chip lọc ─────────────────────────────────────────────────
   ⛔ Số là PHẦN TỬ THẬT trong nút, không phải `content` của `::after`: nội
      dung sinh bằng CSS không tới được mọi trình đọc màn hình và không copy
      được. Xem `khoa-hoc-cua-toi.php`. */
.t4lms-loc-nut  { gap: 7px; }
.t4lms-loc-so   { color: var(--t4lms-chu-phu); font-variant-numeric: tabular-nums; font-weight: 700; }
.t4lms-loc-nut[aria-pressed="true"] .t4lms-loc-so { color: #FFFFFF; }
/* Chip "0" vẫn hiện — 0 ở đây là ĐÃ ĐẾM và bằng không, khác hẳn "chưa đo
   được". Ẩn nó đi là giấu một câu trả lời đúng. */

@media (max-width: 849px) {
  .t4lms-kh-huy { font-size: 12px; line-height: 18px; }
  .t4lms-loc-so { font-size: 13px; line-height: 22px; }
}
@media (min-width: 850px) {
  .t4lms-kh-huy { font-size: 13px; line-height: 19px; }
  .t4lms-loc-so { font-size: 13px; line-height: 22px; }
}


/* ==========================================================================
   §17. QUẢN TRỊ — COURSE OUTLINE  `.t4lms-qt`   (WAVE 2)

   ⚠ MÀN NÀY CHẠY TRONG `wp-admin`, KHÔNG PHẢI MẶT TIỀN.
     Hai hệ quả đo được:

     ① Ngưỡng của wp-admin là **782** (menu rời ra) và **960** (menu gấp còn
        36px) — KHÁC ngưỡng 849/850 của 4T. ⛔ Không được "sửa" ngưỡng của
        WordPress, và cũng ⛔ không được thêm 782/960 vào vốn breakpoint của
        4T (RESPONSIVE-CONTRACT §1 chốt đúng MỘT breakpoint).
        ⇒ Lối thoát: bố cục hàng ở đây **KHÔNG dùng breakpoint nào cả**. Nó
        co giãn bằng `flex-wrap` + `min-width` nên đúng ở MỌI bề rộng, kể cả
        782 và 960. Đo được: 8 khổ × 0 tràn.

     ② Không có 20 mô-đun CSS của mặt tiền. Mọi thứ màn này cần phải tự khai
        hoặc đọc từ `00-tokens.css`. ⛔ Không trông chờ `10-base.css`.

   ⛔ Gutenberg TẮT toàn cục ⇒ đây là meta box cổ điển. Không một luật nào
      dưới đây được viết cho `.block-editor-*`.
   ========================================================================== */

/* Gốc: huỷ nền và đệm của `.t4lms` mặt tiền — meta box tự có khung riêng. */
.t4lms-qt {
  background: transparent;
  padding-block: 0;
  font-size: 13px;
  line-height: 1.5;
}
.t4lms-qt * { box-sizing: border-box; }

/* ── Dải tab ─────────────────────────────────────────────────────────────
   ⛔ Chỉ vẽ khi có ≥2 tab ĐÃ DỰNG XONG (tệp mẫu quyết định, không phải CSS).
      Dải tab một mục là trang trí thuần tuý. */
.t4lms-qt-tab {
  display: flex; flex-wrap: wrap; gap: 4px;
  border-bottom: 1px solid var(--t4lms-ke);
  margin-bottom: 16px;
}
.t4lms-qt-tab-muc {
  display: inline-flex; align-items: center;
  min-height: 44px;                    /* vùng chạm — WCAG 2.5.5 */
  padding: 0 16px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  margin-bottom: -1px;
  color: var(--t4lms-dam);             /* 8.49:1 trên nền wp-admin #f0f0f1 ✅ */
  text-decoration: none;
  font-weight: 600;
}
.t4lms-qt-tab-muc:hover { background: rgba(21, 84, 70, .07); }
/* ⛔ Tab đang mở KHÔNG chỉ khác màu — nó có nền trắng, viền, và chữ đậm hơn. */
.t4lms-qt-tab-muc[aria-current="page"] {
  background: var(--t4lms-the);
  border-color: var(--t4lms-ke);
  color: var(--t4lms-chu);             /* 16.48:1 ✅ */
  font-weight: 700;
}

/* ── Đầu khối ───────────────────────────────────────────────────────────── */
.t4lms-qt-dau {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: 12px 16px;
  margin-bottom: 12px;
}
.t4lms-qt-dau-chu { flex: 1 1 240px; min-width: 0; }
.t4lms-qt-dau-nut { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 8px; }
.t4lms-qt-ten  { font-size: 16px; line-height: 24px; color: var(--t4lms-dam); }
.t4lms-qt-meta { color: var(--t4lms-chu-phu); }                      /* 6.26:1 ✅ */
/* ⛔ `overflow-wrap` chứ không `word-break: break-all`: tên khoá tiếng Việt
   bị cắt giữa âm tiết là không đọc được. `anywhere` chỉ cắt khi KHÔNG CÒN
   cách nào khác — đúng cho tên khoá một từ dài do người dùng gõ. */
.t4lms-qt-meta,
.t4lms-qt-tieu-de { overflow-wrap: anywhere; }

/* ── Cây outline ────────────────────────────────────────────────────────── */
.t4lms-qt-cay,
.t4lms-qt-bai-ds { margin: 0; padding: 0; list-style: none; }

.t4lms-qt-chuong {
  background: var(--t4lms-the);
  border: 1px solid var(--t4lms-ke);
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
}

/* MỘT luật hàng dùng cho CẢ chương lẫn bài — khác nhau chỉ ở nền và cỡ chữ.
   ⛔ Viết hai luật gần giống nhau là cách chúng lệch dần qua từng lần sửa. */
.t4lms-qt-hang {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 10px;
  padding: 10px 12px;
}
.t4lms-qt-hang--chuong {
  background: var(--t4lms-kem);
  border-bottom: 1px solid var(--t4lms-ke);
}
.t4lms-qt-so {
  flex: 0 0 auto;
  min-width: 34px;
  color: var(--t4lms-chu-phu);                                        /* 5.32:1 trên kem ✅ */
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
/* ⭐ `min-width: 0` là dòng giữ cả khối khỏi tràn: mặc định `flex-basis: auto`
   của một phần tử flex KHÔNG co nhỏ hơn nội dung, nên một tên bài dài một từ
   sẽ đẩy hàng rộng ra ngoài khung. Đo được ở khổ 375. */
.t4lms-qt-noi { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.t4lms-qt-tieu-de { color: var(--t4lms-chu); font-weight: 600; }
.t4lms-qt-hang--chuong .t4lms-qt-tieu-de { font-size: 14px; }
.t4lms-qt-phu {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  color: var(--t4lms-chu-phu);
}
/* ⛔ Dấu `·` là CHỮ đang hiện trên màn, nên nó phải đạt ngưỡng tương phản như
   mọi chữ khác. Wave 2 đo được `--t4lms-ke-dam` (rgba .28) ra **1.81:1** —
   trượt xa. `aria-hidden` chỉ giấu nó khỏi trình đọc màn hình, KHÔNG miễn cho
   nó nghĩa vụ với người nhìn bằng mắt. */
.t4lms-qt-cham { color: var(--t4lms-chu-phu); }                       /* 6.48:1 ✅ */

/* Nút "Lưu thứ tự" lúc tắt: `.button:disabled` của wp-admin là #a7aaad trên
   #f6f7f7 = **2.17:1**. Trạng thái disabled được WCAG miễn trừ, nhưng §2 của
   chính tệp này đã chốt là 4T không dùng chữ mờ làm tín hiệu — nên dùng lại
   đúng cặp disabled đã tính của LMS. */
.t4lms-qt-luu[disabled],
.t4lms-qt-luu:disabled {
  background: #EFE8DA !important;
  color: #6B6459 !important;                                          /* 4.80:1 ✅ */
  border-color: #D9D3C6 !important;
}

/* Trạng thái bài — CHỮ, không phải chấm màu. */
.t4lms-qt-tt { padding: 1px 8px; border-radius: 999px; font-weight: 700; }
.t4lms-qt-tt--dang  { background: var(--t4lms-xong-nen);  color: var(--t4lms-xong); }   /* 5.41:1 ✅ */
.t4lms-qt-tt--nhap  { background: var(--t4lms-kem);       color: var(--t4lms-chu-phu); }/* 5.32:1 ✅ */
.t4lms-qt-tt--cho   { background: var(--t4lms-luu-y-nen); color: var(--t4lms-luu-y); }  /* 5.17:1 ✅ */
.t4lms-qt-tt--rieng { background: var(--t4lms-tin-nen);   color: var(--t4lms-tin); }    /* 7.99:1 ✅ */

.t4lms-qt-bai-ds > .t4lms-qt-bai + .t4lms-qt-bai { border-top: 1px solid var(--t4lms-ke); }
.t4lms-qt-chuong-rong {
  padding: 12px;
  color: var(--t4lms-chu-phu);
  font-style: italic;
}

/* ── Nút ▲▼ ─────────────────────────────────────────────────────────────
   ⛔ 44×44 KHÔNG THƯƠNG LƯỢNG. Nút wp-admin mặc định cao 30px; đây là hai nút
      sát nhau, bấm nhầm là đảo nhầm thứ tự bài của cả khoá. Vùng chạm nhỏ +
      hậu quả phá dữ liệu = không được phép.
   ⛔ Kéo-thả KHÔNG phải cách duy nhất: hai nút này chạy bằng bàn phím, bằng
      trình đọc màn hình, và chạy cả khi JS hỏng (chúng là submit thật). */
.t4lms-qt-xep-hop { flex: 0 0 auto; display: flex; gap: 4px; }
.t4lms-qt-xep {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid var(--t4lms-ke-dam);
  border-radius: 6px;
  background: var(--t4lms-the);
  color: var(--t4lms-dam);                                            /* 8.79:1 ✅ */
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.t4lms-qt-xep:hover { background: var(--t4lms-dam); color: #FFFFFF; border-color: var(--t4lms-dam); }
/* ⛔ KHÔNG `opacity` cho disabled — xem §2. Đổi cặp màu, giữ nguyên độ đục. */
.t4lms-qt-xep[disabled] {
  background: #EFE8DA; color: #6B6459; border-color: transparent;     /* 4.80:1 ✅ */
  cursor: not-allowed;
}
.t4lms-qt-sua { flex: 0 0 auto; }

/* ── Màn rỗng của người DỰNG khoá ───────────────────────────────────────── */
.t4lms-qt-rong {
  background: var(--t4lms-the);
  border: 1px dashed var(--t4lms-ke-dam);
  border-radius: 8px;
  padding: 28px 20px;
  text-align: center;
}
.t4lms-qt-rong-td { font-size: 15px; font-weight: 700; color: var(--t4lms-chu); margin-bottom: 4px; }
.t4lms-qt-rong-mt { color: var(--t4lms-chu-phu); max-width: 56ch; margin: 0 auto 12px; }
.t4lms-qt-ghi-chu { margin-top: 10px; }

/* Nút "Lưu thứ tự" chỉ sáng khi thứ tự THẬT SỰ đổi — lms.js gỡ `disabled`.
   ⛔ Nút lưu luôn sáng dạy người dùng bấm theo phản xạ. */
.t4lms-qt-luu[disabled] { cursor: not-allowed; }

/* Hàng vừa bị chuyển chỗ — nháy một cái để mắt bắt kịp.
   `prefers-reduced-motion` ở §15 đã tắt animation này giúp rồi. */
@keyframes t4lms-qt-nhay {
  from { background: rgba(69, 135, 99, .22); }
  to   { background: transparent; }
}
.t4lms-qt-vua-chuyen > .t4lms-qt-hang { animation: t4lms-qt-nhay .9s ease-out 1; }


/* ==========================================================================
   §15d. WAVE 2 — CHỮ DO NGƯỜI DÙNG GÕ ĐƯỢC PHÉP NGẮT KHI HẾT ĐƯỜNG

   Mọi chuỗi dưới đây do biên tập viên hoặc người dựng khoá gõ vào, nên bề
   rộng của chúng KHÔNG BAO GIỜ nằm trong tay CSS. Một tên bài viết liền
   không dấu cách là đủ để nở khung — đã đo được ở khổ 375.

   ⛔ `overflow-wrap: anywhere`, KHÔNG `word-break: break-all`.
      `break-all` cắt MỌI dòng ở bất kỳ đâu, kể cả khi còn chỗ ngắt tử tế —
      tiếng Việt bị cắt giữa âm tiết thì không đọc được. `anywhere` chỉ cắt
      khi đã hết mọi chỗ ngắt hợp lệ.
   ⛔ KHÔNG `hyphens: auto` — trình duyệt không có từ điển ngắt âm tiếng Việt
      (xem §1).
   ⚠ Luật này KHÔNG bọc `@media`: nó đúng ở mọi khổ, và bọc nó vào một khổ là
     tạo ra đúng kiểu lỗi "đúng một khổ, sai khổ kia" mà LUẬT NỀN III.18 cấm.
   ========================================================================== */

.t4lms-kh-ten,
.t4lms-kh-bai-ten,
.t4lms-tiep-khoa,
.t4lms-tiep-bai,
.t4lms-play-ten,
.t4lms-play-khoa,
.t4lms-chuong-ten,
.t4lms-bai-ten,
.t4lms-tl-ten,
.t4lms-rong-td,
/* ⭐ Nội dung bài là HTML TỰ DO do biên tập viên dán vào — nguồn tràn khó
   đoán nhất của cả khu vực học. Đo được: một từ dài trong `<p>` của bài làm
   `documentElement.scrollWidth` ra 441px trong khung nhìn 375px. */
.t4lms-play-nd { overflow-wrap: anywhere; }


/* ==========================================================================
   §15e. WAVE 2 — VÙNG CHẠM 44px: BỐN CHỖ BỘ ĐO BẮT ĐƯỢC

   ⛔ Không chỗ nào trong đây là "đã đủ rồi". Cả bốn đều được đo bằng
      `getBoundingClientRect()` ở 8 khổ, và cả bốn đều DƯỚI 44px trước khi sửa:

        `.t4lms-bo-qua`      172×38   nút nhảy-tới-nội-dung
        `.t4lms-kh-ten a`    270×21   tên khoá trên thẻ  ← tệ nhất
        `.t4lms-dongbo-nut`  106×32   "Thử lại ngay"
        `.t4lms-qt .button`   45×30   nút của wp-admin trong màn outline
   ========================================================================== */

/* ⭐ Tên khoá trên thẻ: 21px cao — KHÔNG ĐẠT cả ngưỡng 24px (AA 2.5.8) lẫn
   44px (AAA 2.5.5). Đây là đích bấm chính thứ hai của thẻ.
   ⛔ Cách sửa KHÔNG được làm xê dịch bố cục: đệm dọc +11px rồi lề dọc −11px
      ⇒ chữ nằm ĐÚNG CHỖ CŨ, chỉ vùng bấm nở ra.
   ⚠ Lề âm ở đây là lề DỌC. Lề âm NGANG mới là thứ đã gây tràn +14px ở khổ 375
     của Wave 1; lề dọc không thể gây cuộn ngang. Chốt chặn G2 nghiệm thu lại
     điều đó ở cả 8 khổ sau mỗi lần sửa. */
.t4lms-kh-ten a {
  display: block;
  padding-block: 11px;
  margin-block: -11px;
}

.t4lms-bo-qua { padding: 13px 16px; }                       /* 38 → 44+ */

.t4lms-dongbo-nut { min-height: 44px; padding: 8px 14px; }  /* 32 → 44 */

/* Liên kết "← tên khoá" trên trình phát: 26px cao ở desktop. Cùng cách chữa
   như tên khoá trên thẻ — đệm dọc nở vùng bấm, lề dọc âm trả chữ về chỗ cũ.
   ⛔ `align-self: flex-start` là bắt buộc: `.t4lms-play-dau` là flex cột, mà
      mặc định `align-items: stretch` sẽ kéo liên kết rộng hết hàng ⇒ bấm vào
      khoảng trắng bên phải tên khoá cũng điều hướng. Vùng bấm phải ôm đúng
      chữ, không ôm cả dòng. */
.t4lms-play-khoa {
  align-self: flex-start;
  padding-block: 11px;
  margin-block: -11px;
}

/* Nút chuẩn của wp-admin cao 30px. Trong màn outline chúng là đích bấm THẬT
   (Sửa · Thêm chương · Lưu thứ tự) nên phải theo luật 44px của 4T.
   ⚠ Chỉ áp TRONG `.t4lms-qt` — ⛔ không được rò ra phần còn lại của wp-admin. */
.t4lms-qt .button {
  min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 14px;
}


/* ==========================================================================
   §16. BẢNG TƯƠNG PHẢN — MỌI CẶP TỆP NÀY DÙNG, ĐÃ TÍNH
   Công thức WCAG 2.x relative luminance, làm tròn 2 chữ số.
   ──────────────────────────────────────────────────────────────────────────
   ✅ ĐẠT AA chữ thường (≥ 4.5:1)
     #1F1F1F / #FCFBF6  nền trang ............................ 15.91
     #1F1F1F / #FFFFFF  trên thẻ ............................. 16.48
     #1F1F1F / #EFE8DA  trên kem ............................. 13.52
     (lớp phủ video `#1B1B1B` KHÔNG mang chữ — mọi chữ nằm trong hộp
      `.t4lms-canh` nền sáng, dùng lại đúng bốn cặp đã tính bên dưới)
     #155446 / #FCFBF6  H2 ....................................  8.49
     #155446 / #FFFFFF  H2 trên thẻ ...........................  8.79
     #FFFFFF / #155446  nút --vien:hover · nút --nen-dam ......  8.79
     #FFFFFF / #155446  chip "Tiếp tục học" ...................  8.79
     #155446 / #EEF6F1  cảnh báo --tin ........................  7.99
     #4A4A4A / #EFE8DA  thời lượng bài đang học ...............  7.27
     #A32218 / #FFFFFF  chữ lỗi ô nhập ........................  7.50
     #155446 / #EFE8DA  bài đang học trong mục lục ............  7.21
     #5E5E5E / #FFFFFF  chữ phụ trên thẻ ......................  6.48
     #A32218 / #FBE9E7  cảnh báo --loi ........................  6.40
     #2F6B4C / #FFFFFF  icon "đã xong" ........................  6.31
     #5E5E5E / #FCFBF6  chữ phụ trên nền trang ................  6.26
     #FFFFFF / #A66426  ⭐ nút chính (nghỉ) — WAVE 4 ...........  4.70
     #FFFFFF / #85501E  ⭐ nút chính :hover/:focus/:active ......  6.64
     #8C5A2B / #FFFFFF  điều kiện mở bài bị khoá ..............  5.81
     #2F6B4C / #E6F0EA  cảnh báo --xong .......................  5.41
     #5E5E5E / #EFE8DA  chữ phụ trên kem ......................  5.32
     #8C5A2B / #FBF0E4  cảnh báo --luu-y · chip đồng bộ .......  5.17
     #6B6459 / #EFE8DA  chữ nút disabled ......................  4.80

   ✅ ĐẠT ngưỡng 3:1 (thành phần giao diện / ranh giới đồ hoạ — WCAG 1.4.11)
     #458763 / #FCFBF6  vành focus ............................  4.14
     #458763 / #FFFFFF  vành focus trên thẻ ...................  4.29
     #458763 / #EFE8DA  thanh tiến độ: phần đầy / phần rỗng ...  3.52
     ⚠ Ba cặp này KHÔNG mang chữ chạy nhiều dòng — chỉ là vành và mảng tô.

   ══════════════════════════════════════════════════════════════════════════
   ⭐ WAVE 2 — BẢNG NÀY ĐÃ ĐƯỢC MÁY ĐO LẠI, KHÔNG CÒN LÀ LỜI HỨA
   ══════════════════════════════════════════════════════════════════════════
   `node qa/lms/do.mjs` duyệt MỌI phần tử có chữ trong 10 kịch bản × 8 khổ,
   dựng lại nền THẬT (chồng mọi lớp bán trong suốt), rồi tính tỉ số WCAG.
   Ba cặp trượt AA bị bắt — không cặp nào trong số đó có mặt ở bảng dưới đây
   khi Wave 1 viết nó ra:

     1.81:1  `.t4lms-qt-cham`  dấu `·` màu `--t4lms-ke-dam` (rgba .28)
             ⇒ đổi sang `--t4lms-chu-phu` = 6.48:1 ✅
             ⚠ `aria-hidden` giấu nó khỏi trình đọc màn hình, KHÔNG miễn cho
               nó nghĩa vụ với người nhìn bằng mắt.
     2.17:1  `.button:disabled` của wp-admin (#a7aaad / #f6f7f7) ở nút
             "Lưu thứ tự" ⇒ dùng lại cặp disabled của LMS = 4.80:1 ✅
     4.31:1  `.t4lms-nut--chinh` CỠ THƯỜNG (14/16px) và `--lon` ở MOBILE (18px)
             · Wave 2 chữa bằng CỠ CHỮ: cả hai lên ≥18,66px + 700 ⇒ ngưỡng 3:1.
             · ⭐ WAVE 4 GỠ cách chữa đó (chủ sản phẩm bác workaround) và chữa
               bằng MÀU: nền #A66426 ⇒ **4,70:1** ⇒ đạt 4,5 ở cỡ chữ THƯỜNG
               ⇒ `--chinh` về 14/16px, `--lon` mobile về 18px.

   ⚠ DÒNG DƯỚI ĐÂY LÀ CỦA WAVE 2 — WAVE 4 ĐÃ ĐỔI:
   ⛔ (Wave 2) KHÔNG cặp nào được sửa bằng cách đổi màu 4T đã chốt.
   ⭐ (Wave 4) Cặp cuối ĐƯỢC sửa bằng màu — nhưng bằng một BIẾN THỂ MỚI
      (`--t4-hanh-dong-nen`), ⛔ KHÔNG bằng cách ghi đè `--t4-camel*`. Màu
      thương hiệu vẫn nguyên giá trị và nguyên vai trò.
   ══════════════════════════════════════════════════════════════════════════

   ⭐ WAVE 4 · H — MỤC NÀY ĐÃ ĐÓNG. Giữ nguyên văn bên dưới để người đọc sau
      còn thấy đường đã đi và vì sao rẽ.
   ⚠ (CŨ — Wave 2) CẶP KHÔNG ĐẠT 4.5:1 Ở CỠ THƯỜNG — và cách xử lý
     #FFFFFF / #AF6928  nút `--chinh` CỠ THƯỜNG (16px/700) ....  4.31
       · Đây là lựa chọn 4T ĐÃ CHỐT cho LMS, thay cho nút brand
         #FFFFFF/#CF9156 = 2.68:1 vốn TRƯỢT CẢ BA ngưỡng. Tức là bước này
         đã nâng tương phản lên +61% so với nút đang chạy trên production.
       · Xử lý 1 — ⚠ SỬA Ở WAVE 2: Wave 1 viết "`--lon` … 18px/700 ở mobile"
         và coi là xong. 18 < 18.66 ⇒ mobile VẪN TRƯỢT, suốt cả một đợt, trên
         đúng khổ người học dùng nhiều nhất. Nay:
             `--chinh` = 19px/700  ·  `--lon` = 20px/700   ở CẢ HAI khổ
         Từ 18.66px + bold trở lên ngưỡng WCAG là 3:1 ⇒ 4.31 ĐẠT AA đầy đủ.
       · Xử lý 2 — mọi trạng thái :hover / :focus-visible / :active chuyển
         nền sang #8C5A2B ⇒ 5.81:1, đạt AA thường. Người đi bằng bàn phím
         và người đang trỏ chuột luôn nhìn ở mức đạt chuẩn.
       · Xử lý 3 — ⛔ KHÔNG có một dòng chữ chạy nào của LMS đặt trên nền
         camel. Nền camel chỉ mang nhãn nút 2–3 từ.
       · ⭐ Từ Wave 2, LMS KHÔNG CÒN nút `--chinh` nào ở cỡ thường ⇒ khoản
         nợ "thiếu 0.19" của Wave 1 ĐÃ ĐÓNG bằng cỡ chữ, ⛔ không bằng đổi màu.
       · ⭐⭐ WAVE 4 ĐI ĐÚNG ĐƯỜNG GHI SẴN Ở DÒNG DƯỚI, và đi TRỌN chứ không
         nửa vời: `--t4lms-nut-nen` → #A66426 (4,70) VÀ `--t4lms-nut-nen-hv`
         → #85501E (6,64). Hai nền cách nhau 1,41:1, RÕ HƠN bậc cũ (1,35).
         ⚠ Ghi chú Wave 2 bên dưới đề #8C5A2B; ⛔ KHÔNG dùng con số đó nữa —
           #8C5A2B đang mang vai trò KHÁC (`--t4lms-luu-y`, "điều kiện mở bài
           bị khoá"); lấy nó làm nền nút là trộn hai nghĩa vào một sắc.
         ⚠ Vẫn ghi lại đường sửa cũ của Wave 2 dưới đây để đối chiếu:
             --t4lms-nut-nen: #8C5A2B;   /* 5.81:1 — đạt AA mọi cỡ */
         Sau khi đổi, nền nghỉ và nền hover bằng nhau ⇒ phải chọn một sắc
         hover khác và TÍNH LẠI. Đừng đổi một nửa.
       · Đo lại bằng: node scripts nội bộ hoặc đoạn kiểm trong biên bản —
         duyệt MỌI nút chữ/nền đang kết xuất, không chỉ nút trong mẫu.
   ========================================================================== */

/* ============================================================================
 * ⭐ W5 · TÍCH HỢP — CHỮ TRÊN NỀN RIÊNG PHẢI ĐỌC ĐƯỢC
 * ============================================================================
 *
 * 🔴 NGUYÊN NHÂN GỐC — MỘT, không phải bốn:
 *   `10-base.css:33` khai `.t4 a { color: inherit; }` — độ ưu tiên **(0,1,1)**.
 *   Mọi khai báo màu chữ của nút/liên kết ở đây là **(0,1,0)** ⇒ THUA.
 *   ⇒ Phần tử TỰ MANG NỀN (nút chính, liên kết nhảy-tới-nội-dung) vẫn thừa kế
 *     chữ TỐI của tổ tiên, trên nền tối/nâu của chính nó.
 *
 * ⛔ `@media` KHÔNG cộng độ ưu tiên — bọc lại cũng vô ích. Phải thắng bằng
 *    ĐỘ ƯU TIÊN: `.t4 a.<lớp>` = (0,2,1) > (0,1,1).
 *
 * ⛔ KHÔNG sửa `.t4 a { color: inherit }` — nó là luật cũ phủ toàn site, và
 *    thu hẹp nó ở đây là đổi màu chữ của hàng trăm liên kết không ai đo.
 *
 * Số đo (tự tính bằng công thức WCAG, ⛔ không tin chú thích):
 *   trắng / --t4-dark-moss #155446      = 8,59 : 1   (trước: 1,87 — chữ #1F1F1F)
 *   trắng / --t4-hanh-dong-nen #A66426  = 4,70 : 1   (trước: 3,51)
 *   trắng / #446084 (nút Flatsome)      = 6,46 : 1   (trước: 2,55)
 */
.t4 a.t4lms-bo-qua { color: #FFFFFF; }
.t4lms a.t4lms-bo-qua { color: #FFFFFF; }
.t4 a.t4lms-bo-qua:focus-visible { color: #FFFFFF; }

.t4 a.t4lms-nut--chinh,
.t4lms a.t4lms-nut--chinh,
.t4 a.t4lms-nut--chinh .t4lms-nut-chu,
.t4lms a.t4lms-nut--chinh .t4lms-nut-chu { color: #FFFFFF; }

/* CTA mua khoá học — mượn lớp `button primary` của Flatsome (nền xanh #446084). */
.t4 a.button.primary,
.t4 a.t4l-cta-mua { color: #FFFFFF; }

/* ⚠ Tooltip báo lỗi form là của THEME MẸ Flatsome, ⛔ không phải CSS của 4T.
 *   #7D7C7C trên nền kem = 4,02 — trượt. Đây là chữ báo lỗi cho người đang
 *   điền biểu mẫu, tức đúng lúc họ cần đọc được nhất.
 *   #6F6E6E = 4,91 (⛔ không lấy #747373 = 4,56 — mỏng quá, làm tròn một nấc
 *   ở bất kỳ khâu nào là trượt lại). */
/* ⚠ Luật tooltip lỗi ĐÃ CHUYỂN sang `30-components.css` — xem lý do ở đó.
 *   `55-lms.css` chỉ được nạp trên các trang `/hoc/`, mà tooltip xuất hiện ở
 *   trang chủ và trang bán. Đặt ở đây là luật KHÔNG BAO GIỜ chạy. */

/* ⭐ [17/09/2026] Màn đăng nhập/đăng ký SĐT+PIN — ĐO ĐƯỢC: Flatsome
 *   `input[type="tel"|"email"|"password"|"text"]` (0,1,1) thắng `.t4lms-o-nhap` (0,1,0)
 *   ⇒ ô cao 39px, chữ 15.52px trên desktop/iPad ngang (iPad phóng to khi chạm ô <16px).
 *   Cố ý áp CẢ HAI khổ: 48px vùng bấm + 16px chống zoom iOS. Đã đo 1920/1024/849/360. */
.t4lms--dang-nhap .t4lms-o-nhap {
  height: 48px;
  font-size: 16px;
  line-height: 22px;
  margin-bottom: 0;
}

/* ⭐ [17/09/2026] Ô PIN có nút Hiện/Ẩn + lỗi từng ô (màn đăng nhập/đăng ký/đặt PIN). */
.t4lms--dang-nhap .t4lms-o-pin { position: relative; }
.t4lms--dang-nhap .t4lms-o-pin .t4lms-o-nhap { padding-right: 84px; letter-spacing: 0.15em; font-variant-numeric: tabular-nums; }
.t4lms--dang-nhap .t4lms-nut-xem {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  min-width: 72px; min-height: 40px; margin: 0; padding: 0 12px;
  border: 0; border-radius: 8px; background: transparent; box-shadow: none;
  color: #5C564C; font-size: 14px; font-weight: 600; line-height: 1; text-transform: none; letter-spacing: 0;
}
.t4lms--dang-nhap .t4lms-nut-xem:hover { background: #F2EFE8; }
.t4lms--dang-nhap .t4lms-nut-xem:focus-visible { outline: 2px solid #1F4D3A; outline-offset: 2px; }
.t4lms--dang-nhap .t4lms-o-loi { margin: 6px 0 0; color: #B3261E; font-size: 14px; line-height: 20px; }
.t4lms--dang-nhap .t4lms-o-loi[hidden] { display: none; }