/* ============================================================
   tve.css — Theme ".tve-modern" của MẶT ĐỌC Thư viện điện tử.

   Dựng lại từ khối .tve-* trong css/library.css của hệ cũ
   (D:/Code/web2025/thuviennhatruong.edu.vn/css/library.css) để mặt đọc
   bản mới GIỐNG bản cũ về bố cục · bảng màu · cách dùng.

   VÌ SAO CÓ TỆP NÀY thay vì dùng tiếp Tailwind:
   - Bản cũ có một bộ dạng riêng (nền #f5f7fb, chủ đạo xanh dương #2563eb,
     nhấn ngọc #14b8a6, bo góc 14px, thẻ sách nhấc lên khi rê chuột, chip có
     badge tròn…). Diễn đạt lại bằng lớp tiện ích Tailwind thì mỗi template
     phải chép lại hàng chục lớp, sai một chỗ là lệch cả trang.
   - Bộ chọn đều gắn tiền tố `.tve-modern` nên KHÔNG rò ra trang khác của dự
     án; tệp cũng chỉ được nạp ở các trang thư viện điện tử.

   KHÁC bản cũ ở đúng ba chỗ, đều có lý do:
   - Bản cũ dựa vào lưới Bootstrap (.row/.col-md-2) và dùng `:has()` để biến
     .row thành grid. Ở đây KHÔNG có Bootstrap nên .tve-row là grid thật —
     bớt một phụ thuộc và chạy được cả trên trình duyệt không hỗ trợ :has().
   - Có thêm phần cho chế độ TỐI: khung layouts/app của bản mới có nút bật/tắt
     tối, không thể để mặt đọc trắng lóa giữa trang tối.
   - Không port .tve-auth / .tve-toolbar / .tve-video-* : đó là dạng của trang
     đăng nhập, học liệu và video — không thuộc mặt đọc.
   ============================================================ */

.tve-modern {
    /* Bảng màu & biến giao diện (đổi ở đây là đổi cả theme) */
    --tve-bg: #f5f7fb;
    --tve-surface: #ffffff;
    --tve-primary: #2563eb;      /* xanh dương hiện đại */
    --tve-primary-dark: #1e40af;
    --tve-accent: #14b8a6;       /* xanh ngọc nhấn */
    --tve-text: #1f2937;
    --tve-text-muted: #6b7280;
    --tve-border: #e5e7eb;
    --tve-radius: 14px;
    --tve-radius-sm: 10px;
    --tve-shadow: 0 1px 3px rgba(16, 24, 40, .08);
    --tve-shadow-hover: 0 12px 28px rgba(16, 24, 40, .18);
    --tve-gap: 18px;

    background: var(--tve-bg);
    color: var(--tve-text);
    padding: 0 0 40px;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

/* Chế độ tối: chỉ đổi 6 biến nền/chữ, mọi quy tắc dưới đây dùng lại nguyên. */
.dark .tve-modern,
:root[data-theme="dark"] .tve-modern {
    --tve-bg: #0b1220;
    --tve-surface: #111c2e;
    --tve-text: #e2e8f0;
    --tve-text-muted: #94a3b8;
    --tve-border: #24344d;
    --tve-shadow: 0 1px 3px rgba(0, 0, 0, .5);
    --tve-shadow-hover: 0 12px 28px rgba(0, 0, 0, .6);
}

.tve-modern .content-section { padding: 14px 0 0; }
.tve-modern .container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}
.tve-modern a { text-decoration: none; }

/* ============================================================
   HEADER: thương hiệu · ô tìm kiếm · tủ sách/đăng nhập · QR · nav
   ============================================================ */
.tve-modern .tve-header {
    position: sticky; top: 0; z-index: 1000;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--tve-border);
    box-shadow: 0 1px 8px rgba(16, 24, 40, .06);
}
.dark .tve-modern .tve-header,
:root[data-theme="dark"] .tve-modern .tve-header { background: rgba(17, 28, 46, .94); }

@media (max-width: 768px) {
    /* Không ghim trên điện thoại: header cao chiếm gần hết màn hình. */
    .tve-modern .tve-header { position: static; }
    .tve-modern .tve-header.open { max-height: 90vh; overflow-y: auto; }
}
.tve-modern .tve-header-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 8px 16px;
    display: flex;
    flex-direction: column;   /* 2 hàng: brand+tìm kiếm / nav chủ đề */
    gap: 4px;
}
.tve-modern .tve-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 16px;
}
.tve-modern .tve-search {
    flex: 1 1 280px;
    min-width: 150px;
    max-width: 480px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px;
    background: var(--tve-bg);
    border: 1px solid var(--tve-border);
    border-radius: 999px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.tve-modern .tve-search i { color: var(--tve-text-muted); font-size: 14px; }
.tve-modern .tve-search input {
    flex: 1 1 auto;
    width: 100%;
    border: 0;
    background: transparent;
    outline: none;
    font-size: 14px;
    color: var(--tve-text);
}
.tve-modern .tve-search:focus-within {
    border-color: var(--tve-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
    background: var(--tve-surface);
}
.tve-modern .tve-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 1 auto;
    min-width: 0;
}
.tve-modern .tve-brand-logo {
    width: 40px; height: 40px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center; justify-content: center;
    color: #fff; font-size: 19px;
    background: linear-gradient(135deg, var(--tve-primary), var(--tve-accent));
    box-shadow: 0 4px 12px rgba(37, 99, 235, .3);
    flex: 0 0 auto;
}
.tve-modern .tve-brand-name {
    font-weight: 800;
    font-size: 17px;
    color: var(--tve-text);
    line-height: 1.2;
    max-width: 60vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tve-modern .tve-qr {
    margin-left: 10px;
    width: 80px; height: 80px;
    align-self: center;
    flex: 0 0 auto;
    background: #fff;
    padding: 3px;
    border-radius: 8px;
    border: 1px solid var(--tve-border);
    box-sizing: border-box;
}
.tve-modern .tve-qr img,
.tve-modern .tve-qr canvas { width: 100% !important; height: 100% !important; display: block; }

/* ---------- Nav 6 chủ đề lớn (hàng dưới) ---------- */
.tve-modern .tve-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    border-top: 1px solid var(--tve-border);
    padding-top: 6px;
    margin-top: 2px;
}
.tve-modern .tve-nav a {
    padding: 8px 12px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    color: var(--tve-text-muted);
    white-space: nowrap;
    transition: all .15s ease;
}
.tve-modern .tve-nav a:hover,
.tve-modern .tve-nav a.tve-nav-active {
    color: var(--tve-primary);
    background: rgba(37, 99, 235, .08);
}
.tve-modern .tve-nav a.tve-nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    color: var(--tve-primary);
    background: rgba(37, 99, 235, .08);
    border: 1px solid var(--tve-border);
}
.tve-modern .tve-nav a.tve-nav-cta:hover {
    background: var(--tve-primary);
    color: #fff;
    border-color: var(--tve-primary);
}
/*
 * THANH NAV LUÔN GỌN MỘT DÒNG.
 *
 * Khung chứa khóa cứng ở max-width 1240px (xem .tve-modern .container), nên bề
 * rộng thật của thanh nav LUÔN là ~1208px, bất kể màn hình to đến đâu — ngưỡng
 * theo bề rộng màn hình ở đây là vô nghĩa. Đo nội dung thật (1 nút Tất cả + 6
 * chủ đề lớn + dropdown "Hoạt động thư viện" + 2 nút CTA, cỡ chữ 14px): ~1520px
 * → luôn tràn, nav vỡ làm hai dòng.
 *
 * Hai việc đưa về ~1215px, vừa một dòng:
 *   1. bóp cỡ chữ / padding / gap của riêng thanh nav;
 *   2. ẩn phần ĐUÔI của nhãn nút CTA (.tve-cta-dai — xem _thanh.php):
 *      "Thư viện truyền thống" hiện thành "Thư viện", giữ đủ chữ ở thuộc tính
 *      title nên rê chuột vẫn đọc được.
 *
 * BỎ margin-left:auto của bản trước: nó nuốt toàn bộ khoảng trống còn lại nên
 * chỉ cần thiếu vài pixel là đẩy "Giải bài tập" xuống dòng — đúng lỗi người
 * dùng báo. Nay các nút xếp sát ngay sau dropdown.
 */
/*
 * ⚠️ KHÔNG đặt overflow (kể cả overflow-x: auto) lên .tve-nav.
 *
 * Bất kỳ overflow nào khác `visible` đều CẮT phần tử con định vị tuyệt đối —
 * mà menu xổ của "Hoạt động thư viện" chính là một phần tử như thế. Đã dính
 * thật: thêm overflow-x làm lưới an toàn chống tràn thì menu xổ ra bị cắt cụt,
 * người dùng bấm vào thấy nó nằm khuất dưới băng ảnh banner.
 *
 * Nội dung nav sau khi bóp còn ~1168px, khung chứa 1208px — đã vừa nên không
 * cần lưới an toàn nào. Giữ `flex-wrap: wrap`: đơn vị nào có tên chủ đề dài bất
 * thường thì nav xuống dòng (xấu một chút) chứ menu xổ vẫn dùng được.
 */
.tve-modern .tve-nav { gap: 3px; flex-wrap: wrap; }
.tve-modern .tve-nav a { padding: 7px 8px; font-size: 12.5px; }
.tve-modern .tve-nav a.tve-nav-cta { padding: 6px 11px; gap: 5px; margin-left: 0; }
.tve-modern .tve-nav a.tve-nav-cta-first { margin-left: 10px; }
.tve-modern .tve-nav .tve-cta-dai { display: none; }
.tve-modern .tve-dropdown-toggle { padding: 7px 8px; font-size: 12.5px; }
/* Nút CTA của TRANG ĐANG MỞ (tham số 'active' của tve_modern_open hệ cũ). */
.tve-modern .tve-nav a.tve-nav-cta-active,
.tve-modern .tve-nav a.tve-nav-cta-active:hover {
    background: var(--tve-primary);
    color: #fff;
    border-color: var(--tve-primary);
}

/* ---------- Dropdown "Hoạt động thư viện" ---------- */
.tve-modern .tve-dropdown { position: relative; display: inline-flex; }
.tve-modern .tve-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border: 0;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    color: var(--tve-text-muted);
    background: transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: all .15s ease;
}
.tve-modern .tve-dropdown-toggle:hover,
.tve-modern .tve-dropdown.open .tve-dropdown-toggle {
    color: var(--tve-primary);
    background: rgba(37, 99, 235, .08);
}
.tve-modern .tve-dropdown-toggle .tve-caret { font-size: 12px; opacity: .7; transition: transform .15s ease; }
.tve-modern .tve-dropdown.open .tve-dropdown-toggle .tve-caret { transform: rotate(180deg); }
.tve-modern .tve-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 1200;
    min-width: 248px;
    padding: 6px;
    background: var(--tve-surface);
    border: 1px solid var(--tve-border);
    border-radius: var(--tve-radius-sm);
    box-shadow: var(--tve-shadow-hover);
    display: none;
    flex-direction: column;
}
.tve-modern .tve-dropdown-menu::before {
    content: "";
    position: absolute;
    top: -10px; left: 0; right: 0;
    height: 12px;
}
.tve-modern .tve-dropdown:hover .tve-dropdown-menu,
.tve-modern .tve-dropdown.open .tve-dropdown-menu { display: flex; }
.tve-modern .tve-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--tve-text);
    white-space: nowrap;
}
.tve-modern .tve-dropdown-menu a i { width: 16px; text-align: center; color: var(--tve-primary); }
.tve-modern .tve-dropdown-menu a:hover { background: rgba(37, 99, 235, .08); color: var(--tve-primary); }
.tve-modern .tve-dropdown-menu .num { margin-left: auto; font-size: 11.5px; color: var(--tve-text-muted); }

@media (max-width: 720px) {
    .tve-modern .tve-dropdown { display: block; width: 100%; }
    .tve-modern .tve-dropdown-toggle { width: 100%; justify-content: flex-start; }
    .tve-modern .tve-dropdown-menu {
        position: static;
        box-shadow: none;
        border: 0;
        padding: 0 0 0 16px;
        min-width: 0;
    }
    .tve-modern .tve-dropdown:hover .tve-dropdown-menu { display: none; }
    .tve-modern .tve-dropdown.open .tve-dropdown-menu { display: flex; }
}

/* ---------- Cụm nút bên phải header ---------- */
.tve-modern .tve-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}
.tve-modern .tve-login {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--tve-primary);
    color: #fff !important;
    font-weight: 600;
    font-size: 14px;
    transition: all .15s ease;
}
.tve-modern .tve-login:hover { background: var(--tve-primary-dark); }
.tve-modern .tve-myshelf {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--tve-text);
    padding: 7px 12px;
    border: 1px solid var(--tve-border);
    border-radius: 999px;
}
.tve-modern .tve-myshelf:hover { border-color: var(--tve-primary); color: var(--tve-primary); }
.tve-modern .tve-user {
    font-size: 13.5px;
    color: var(--tve-text);
    display: inline-flex;
    gap: 6px;
    align-items: center;
}
.tve-modern .tve-logout {
    color: var(--tve-text-muted);
    font-size: 16px;
    padding: 6px 8px;
}
.tve-modern .tve-logout:hover { color: #dc2626; }
.tve-modern .tve-nav-toggle {
    display: none;
    border: 1px solid var(--tve-border);
    background: var(--tve-surface);
    border-radius: 9px;
    width: 42px; height: 40px;
    font-size: 18px;
    color: var(--tve-text);
    cursor: pointer;
    flex: 0 0 auto;
}
@media (max-width: 1024px) {
    .tve-modern .tve-nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
    .tve-modern .tve-brand-name { font-size: 15px; }
    .tve-modern .tve-nav { display: none; flex-direction: column; align-items: stretch; gap: 2px; }
    .tve-modern .tve-header.open .tve-nav { display: flex; }
    .tve-modern .tve-nav a { padding: 11px 12px; }
    .tve-modern .tve-nav a.tve-nav-cta { justify-content: center; }
    .tve-modern .tve-nav a.tve-nav-cta-first { margin-left: 0; margin-top: 4px; }
}

/* ============================================================
   BĂNG ẢNH BANNER ĐƠN VỊ
   Bản cũ dùng owl-carousel (jQuery). Ở đây là băng trượt CSS thuần
   (scroll-snap) + 2 nút — không thêm thư viện JS nào.
   ============================================================ */
.tve-modern .tve-banner {
    position: relative;
    z-index: 0;
    margin: 0 0 26px;
    border-radius: var(--tve-radius);
    overflow: hidden;
    box-shadow: var(--tve-shadow);
    background: #eef2f7;
}
.tve-modern .tve-banner-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.tve-modern .tve-banner-track::-webkit-scrollbar { display: none; }
.tve-modern .tve-banner .item {
    flex: 0 0 100%;
    scroll-snap-align: center;
    line-height: 0;
}
.tve-modern .tve-banner img {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}
.tve-modern .tve-banner-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px; height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 23, 42, .45);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}
.tve-modern .tve-banner-nav:hover { background: rgba(15, 23, 42, .7); }
.tve-modern .tve-banner-prev { left: 10px; }
.tve-modern .tve-banner-next { right: 10px; }

/* ============================================================
   KHỐI "THÀNH TÍCH CÁ NHÂN" (học sinh / giáo viên)
   ============================================================ */
.tve-modern .tve-stats {
    background: linear-gradient(135deg, var(--tve-primary), var(--tve-primary-dark));
    color: #fff;
    border-radius: var(--tve-radius);
    box-shadow: var(--tve-shadow);
    padding: 16px 18px;
    margin: 4px 0 22px;
}
.tve-modern .tve-stats-head { font-size: 15px; margin-bottom: 14px; opacity: .95; }
.tve-modern .tve-stats-head i { margin-right: 6px; color: #fde68a; }
.tve-modern .tve-stats-head b { font-weight: 700; }
.tve-modern .tve-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.tve-modern .tve-stat {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--tve-radius-sm);
    padding: 12px 14px;
    text-align: center;
}
.tve-modern .tve-stat-num { display: block; font-size: 26px; font-weight: 800; line-height: 1.1; }
.tve-modern .tve-stat-lbl { display: block; margin-top: 4px; font-size: 12.5px; opacity: .9; }
@media (max-width: 700px) { .tve-modern .tve-stats-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   KHỐI 1 CHỦ ĐỀ (lớn hoặc con): đầu khối + chip + lưới bìa
   ============================================================ */
.tve-modern .tve-home-title { font-size: 20px; font-weight: 700; margin: 14px 0 8px; }
.tve-modern .tve-cat { margin-bottom: 34px; }
.tve-modern .tve-cat-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 14px;
}
.tve-modern .tve-cat-head .tve-cat-icon {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    display: inline-flex;
    align-items: center; justify-content: center;
    border-radius: 12px;
    color: #fff;
    font-size: 19px;
    background: linear-gradient(135deg, var(--tve-primary), var(--tve-accent));
    box-shadow: 0 4px 12px rgba(37, 99, 235, .28);
}
.tve-modern .tve-cat-head h2 {
    flex: 1 1 auto;
    margin: 0;
    font-size: clamp(18px, 2.4vw, 24px);
    font-weight: 700;
    line-height: 1.25;
}
.tve-modern .tve-cat-head h2 a { color: var(--tve-text); }
.tve-modern .tve-cat-head h2 a:hover { color: var(--tve-primary); }
/*
 * SỐ TÀI LIỆU của cả chủ đề lớn. `flex: 0 0 auto` + `nowrap` để nó không bị co
 * lại thành hai dòng khi tên chủ đề dài — h2 bên cạnh đã là `flex: 1 1 auto`
 * nên chính nó là phần nhường chỗ.
 */
.tve-modern .tve-cat-head .tve-cat-count {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--tve-text-muted);
    white-space: nowrap;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--tve-bg);
    border: 1px solid var(--tve-border);
}
/* Tổng của cả kho, ngay dưới tiêu đề trang chủ. */
.tve-modern .tve-home-count {
    margin: 0 0 18px;
    font-size: 14px;
    color: var(--tve-text-muted);
}
.tve-modern .tve-home-count b { color: var(--tve-primary); font-size: 16px; }
.tve-modern .tve-home-count .fa { margin-right: 6px; opacity: .7; }
.tve-modern .tve-seeall {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    color: var(--tve-primary);
    padding: 7px 14px;
    border: 1px solid var(--tve-border);
    border-radius: 999px;
    background: var(--tve-surface);
    white-space: nowrap;
    transition: all .15s ease;
}
.tve-modern .tve-seeall:hover { background: var(--tve-primary); color: #fff; border-color: var(--tve-primary); }
@media (max-width: 560px) {
    .tve-modern .tve-cat-head { flex-wrap: wrap; }
    .tve-modern .tve-seeall { order: 3; }
}

/* ---------- Chủ đề con (chip / pill) ---------- */
.tve-modern .tve-chip-row { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 18px; }
.tve-modern .tve-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--tve-text);
    padding: 7px 13px;
    border: 1px solid var(--tve-border);
    border-radius: 999px;
    background: var(--tve-surface);
    box-shadow: var(--tve-shadow);
    transition: all .15s ease;
}
.tve-modern .tve-chip:hover { border-color: var(--tve-primary); color: var(--tve-primary); transform: translateY(-2px); }
.tve-modern .tve-chip .num {
    display: inline-flex;
    align-items: center; justify-content: center;
    min-width: 20px; height: 20px;
    padding: 0 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--tve-primary-dark);
    background: rgba(37, 99, 235, .12);
    border-radius: 999px;
}
.tve-modern .tve-chip:hover .num { background: var(--tve-primary); color: #fff; }
.tve-modern .tve-chip.tve-chip-active {
    background: var(--tve-primary);
    border-color: var(--tve-primary);
    color: #fff;
}
.tve-modern .tve-chip.tve-chip-active .num { background: rgba(255, 255, 255, .25); color: #fff; }
/* Chip nổi bật (stt_highlight = 1) */
.tve-modern .tve-chip.tve-chip-hl { border-color: #f59e0b; color: #b45309; background: #fffbeb; }
.tve-modern .tve-chip.tve-chip-hl .num { background: rgba(245, 158, 11, .18); color: #b45309; }
.tve-modern .tve-chip.tve-chip-hl:hover { background: #f59e0b; color: #fff; border-color: #f59e0b; }
.tve-modern .tve-chip.tve-chip-hl:hover .num { background: rgba(255, 255, 255, .3); color: #fff; }

/* ---------- Khối "Lọc theo chủ đề" của trang chủ đề con ---------- */
.tve-modern .tve-related { margin: 0 0 24px; }
.tve-modern .tve-related-title {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--tve-text-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
}

/* ---------- Dải lọc ĐÓNG/MỞ (trang Học liệu điện tử) ----------
   Dùng <details>/<summary>: đóng mở được cả khi JS hỏng, và trang công khai
   này không nạp khung Alpine. Chỉ cần dọn lại vẻ mặc định của trình duyệt. */
.tve-modern .tve-loc { margin: 0 0 16px; }
.tve-modern .tve-loc > .tve-loc-nut {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    padding: 6px 12px 6px 10px;
    border: 1px solid var(--tve-border, #e5e7eb);
    border-radius: 999px;
    background: #fff;
    margin-bottom: 0;
    list-style: none;             /* bỏ tam giác mặc định của <summary> */
}
.tve-modern .tve-loc > .tve-loc-nut::-webkit-details-marker { display: none; }
.tve-modern .tve-loc > .tve-loc-nut:hover { border-color: var(--tve-primary, #2563eb); color: var(--tve-primary, #2563eb); }
/* Mũi tên tự vẽ, xoay khi mở — cho biết bấm vào sẽ xổ ra. */
.tve-modern .tve-loc > .tve-loc-nut::after {
    content: '▾';
    font-size: 10px;
    transition: transform .15s ease;
}
.tve-modern .tve-loc:not([open]) > .tve-loc-nut::after { transform: rotate(-90deg); }
/* Số chip đang chọn, in ngay trên nút để dải đang ĐÓNG vẫn nói được trạng thái. */
.tve-modern .tve-loc > .tve-loc-nut .num {
    background: var(--tve-primary, #2563eb);
    color: #fff;
    border-radius: 999px;
    padding: 1px 7px;
    font-size: 11px;
}
.tve-modern .tve-loc[open] > .tve-loc-nut { margin-bottom: 10px; }

.tve-modern .tve-empty { color: var(--tve-text-muted); font-style: italic; margin: 4px 0 18px; }

/* ============================================================
   LƯỚI BÌA SÁCH — 6 cột, tự co (bản cũ: .row + :has() + Bootstrap)
   ============================================================ */
.tve-modern .tve-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--tve-gap);
    margin: 0 0 26px;
}
@media (max-width: 1199px) { .tve-modern .tve-row { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 991px)  { .tve-modern .tve-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575px)  { .tve-modern .tve-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .tve-modern .tve-row { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

.tve-modern .product-item {
    background: var(--tve-surface);
    border: 1px solid var(--tve-border);
    border-radius: var(--tve-radius);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: var(--tve-shadow);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    min-width: 0;
}
.tve-modern .product-item:hover {
    transform: translateY(-6px);
    box-shadow: var(--tve-shadow-hover);
    border-color: rgba(37, 99, 235, .35);
}
.tve-modern .product-thumb {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: #eef2f7;
}
.tve-modern .product-thumb a { display: block; height: 100%; }
.tve-modern .product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
.tve-modern .product-item:hover .product-thumb img { transform: scale(1.06); }
/* Lớp phủ "Đọc ngay" khi rê chuột (nằm trong thẻ <a> nên bấm được) */
.tve-modern .product-thumb a::after {
    content: "\f06e  Đọc ngay";
    font-family: "FontAwesome", sans-serif;
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 9px 10px;
    text-align: center;
    font-size: 13px;
    color: #fff;
    background: linear-gradient(180deg, rgba(37,99,235,0), rgba(30,64,175,.92));
    transform: translateY(100%);
    transition: transform .2s ease;
}
.tve-modern .product-item:hover .product-thumb a::after { transform: translateY(0); }
.tve-modern .product-content {
    padding: 10px 12px 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}
/* Nhãn nhỏ trên thẻ bìa — hệ cũ dùng cho "Chia sẻ từ: <tên trường>" ở trang
   Học liệu điện tử (css/library.css dòng 205 của bản cũ, giữ nguyên bộ dạng). */
.tve-modern .product-content .tve-card-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 2px 8px;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.5;
    color: #0f766e;
    background: rgba(20, 184, 166, .12);
    border-radius: 999px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tve-modern .product-content .tve-card-tag i { font-size: 9.5px; flex: 0 0 auto; }
.tve-modern .product-content h5 {
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tve-modern .product-content h5 a {
    color: var(--tve-text);
    font-weight: 600;
    transition: color .15s ease;
}
.tve-modern .product-content h5 a:hover { color: var(--tve-primary); }

/* ============================================================
   ĐẦU TRANG (breadcrumb / tiêu đề / số tài liệu) + PHÂN TRANG
   ============================================================ */
.tve-modern .tve-pagehead { margin: 4px 0 22px; }
.tve-modern .tve-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    color: var(--tve-text-muted);
    margin-bottom: 12px;
}
.tve-modern .tve-crumb a { color: var(--tve-primary); }
.tve-modern .tve-crumb a:hover { text-decoration: underline; }
.tve-modern .tve-crumb i { color: var(--tve-text-muted); font-size: 12px; }
.tve-modern .tve-crumb span { color: var(--tve-text); font-weight: 600; }
.tve-modern .tve-pagetitle {
    margin: 0;
    font-size: clamp(20px, 3vw, 28px);
    font-weight: 800;
    color: var(--tve-text);
    line-height: 1.25;
    display: flex;
    align-items: center;
    gap: 12px;
}
.tve-modern .tve-pagetitle .tve-cat-icon {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    display: inline-flex;
    align-items: center; justify-content: center;
    border-radius: 12px;
    color: #fff;
    font-size: 19px;
    background: linear-gradient(135deg, var(--tve-primary), var(--tve-accent));
    box-shadow: 0 4px 12px rgba(37, 99, 235, .28);
}
.tve-modern .tve-pagecount { margin: 8px 0 0; color: var(--tve-text-muted); font-size: 14px; }
.tve-modern .tve-pagecount i { color: var(--tve-primary); margin-right: 6px; }
.tve-modern .tve-scope-clear { margin: 8px 0 0; font-size: 13.5px; color: var(--tve-text-muted); }
.tve-modern .tve-scope-clear i { color: var(--tve-accent); margin-right: 5px; }
.tve-modern .tve-scope-clear a { color: var(--tve-primary); font-weight: 600; }
.tve-modern .tve-scope-clear a:hover { text-decoration: underline; }

.tve-modern .tve-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 6px 0 32px;
}
.tve-modern .tve-pager a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--tve-border);
    background: var(--tve-surface);
    color: var(--tve-text);
    font-weight: 600;
    font-size: 14px;
    box-shadow: var(--tve-shadow);
    transition: all .15s ease;
}
.tve-modern .tve-pager a:hover { background: var(--tve-primary); color: #fff; border-color: var(--tve-primary); }
.tve-modern .tve-pager-info { font-size: 14px; color: var(--tve-text-muted); }

/* ============================================================
   TRANG CHI TIẾT 1 QUYỂN (.tve-detail) + TRÌNH ĐỌC (.tve-reader)

   Port khối tương ứng của css/library.css hệ cũ (dòng 1090-1262).
   Khác hệ cũ: dùng biến --tve-surface/--tve-border thay cho #fff/#f3f4f6 viết
   cứng, để chế độ TỐI của khung layouts/app không bị hai mảng trắng lóa.
   ============================================================ */
.tve-modern .tve-detail {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    background: var(--tve-surface);
    border: 1px solid var(--tve-border);
    border-radius: var(--tve-radius);
    box-shadow: var(--tve-shadow);
    padding: 24px;
    margin-bottom: 30px;
}
.tve-modern .tve-detail-media { flex: 0 0 280px; max-width: 280px; }
.tve-modern .tve-detail-cover {
    position: relative;
    border-radius: var(--tve-radius-sm);
    overflow: hidden;
    border: 1px solid var(--tve-border);
    background: var(--tve-bg);
}
.tve-modern .tve-detail-cover img { display: block; width: 100%; height: auto; }

/* Mã QR ĐÈ LÊN góc dưới-phải bìa sách (hệ cũ), rê chuột phóng to 1.45 lần. */
.tve-modern .tve-detail-qr {
    position: absolute;
    right: 8px; bottom: 8px;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--tve-border);
    border-radius: var(--tve-radius-sm);
    box-shadow: 0 4px 14px rgba(16, 24, 40, .28);
    line-height: 0;
    transition: transform .15s ease;
}
.tve-modern .tve-detail-qr:hover { transform: scale(1.45); transform-origin: bottom right; }
.tve-modern .tve-detail-qr img { width: 78px; height: 78px; display: block; image-rendering: pixelated; }
@media (max-width: 480px) { .tve-modern .tve-detail-qr img { width: 62px; height: 62px; } }

.tve-modern .tve-detail-info { flex: 1 1 auto; min-width: 0; }
.tve-modern .tve-detail-title {
    margin: 4px 0 12px;
    font-size: clamp(20px, 3vw, 28px);
    font-weight: 800;
    line-height: 1.25;
    color: var(--tve-text);
}
.tve-modern .tve-detail-meta { color: var(--tve-text-muted); font-size: 14.5px; margin: 0 0 16px; }
.tve-modern .tve-detail-meta i { color: var(--tve-primary); margin-right: 6px; }
.tve-modern .tve-detail-meta b { color: var(--tve-text); }
.tve-modern .tve-detail-desc { color: var(--tve-text); font-size: 15px; line-height: 1.75; }
.tve-modern .tve-detail-desc img { max-width: 100%; height: auto; }
.tve-modern .tve-detail-desc table { max-width: 100%; border-collapse: collapse; }
.tve-modern .tve-detail-desc td, .tve-modern .tve-detail-desc th { border: 1px solid var(--tve-border); padding: 6px 10px; }
.tve-modern .tve-detail-related { margin-top: 6px; }

/* Dòng báo lỗi của các nút ajax (lưu tủ sách / chuyển kho học liệu). */
.tve-modern .tve-detail-loi { margin: 2px 0 14px; color: #b91c1c; font-size: 14px; }

/* ---------- Hàng nút thao tác ---------- */
.tve-modern .tve-detail-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 4px 0 20px;
}
.tve-modern .tve-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 16px;
    border-radius: var(--tve-radius-sm);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all .15s ease;
}
.tve-modern .tve-btn-read {
    background: linear-gradient(180deg, var(--tve-primary), var(--tve-primary-dark));
    color: #fff;
    box-shadow: 0 6px 16px rgba(37, 99, 235, .28);
}
.tve-modern .tve-btn-read:hover { filter: brightness(1.06); color: #fff; }
.tve-modern .tve-btn-ghost {
    background: var(--tve-surface);
    color: var(--tve-primary);
    border-color: var(--tve-border);
}
.tve-modern .tve-btn-ghost:hover { border-color: var(--tve-primary); background: rgba(37, 99, 235, .07); }
.tve-modern .tve-btn-disabled,
.tve-modern .tve-btn:disabled {
    color: var(--tve-text-muted);
    background: var(--tve-bg);
    border-color: var(--tve-border);
    cursor: default;
}
.tve-modern .tve-btn-disabled:hover { background: var(--tve-bg); border-color: var(--tve-border); }

/* Hết hạn hợp đồng: chiếm trọn hàng nút, dạng lời nhắc màu hổ phách (hệ cũ). */
.tve-modern .tve-detail-actions .tve-detail-expired { flex: 1 1 100%; }
.tve-modern .tve-detail-expired {
    color: #b45309;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--tve-radius-sm);
    padding: 12px 14px;
    font-size: 14px;
    margin: 0;
}
.tve-modern .tve-detail-expired a { color: #92400e; font-weight: 700; text-decoration: underline; }

@media (max-width: 768px) {
    .tve-modern .tve-detail { flex-direction: column; padding: 16px; }
    .tve-modern .tve-detail-media { flex-basis: auto; max-width: 220px; margin: 0 auto; }
}
@media (max-width: 480px) {
    /* Màn nhỏ: mỗi nút một dòng cho dễ bấm. */
    .tve-modern .tve-detail-actions .tve-btn { flex: 1 1 100%; }
}

/* ---------- Trình đọc tài liệu (docsach_view) ---------- */
.tve-modern .tve-reader {
    background: var(--tve-surface);
    border: 1px solid var(--tve-border);
    border-radius: var(--tve-radius);
    box-shadow: var(--tve-shadow);
    overflow: hidden;
    margin-bottom: 24px;
}
.tve-modern .tve-reader-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--tve-border);
}
.tve-modern .tve-reader-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--tve-text);
    flex: 1 1 auto;
    min-width: 0;
}
.tve-modern .tve-reader-head .tve-btn { padding: 8px 13px; font-size: 14px; }
.tve-modern .tve-reader-note {
    margin: 0;
    padding: 11px 18px;
    font-size: 14px;
    color: var(--tve-text-muted);
    border-bottom: 1px solid var(--tve-border);
}
.tve-modern .tve-reader-note i { color: var(--tve-primary); margin-right: 6px; }
.tve-modern .tve-reader-body { background: var(--tve-bg); line-height: 0; }
.tve-modern .tve-reader-body iframe {
    display: block;
    width: 100%;
    height: 82vh;
    min-height: 460px;
    border: 0;
}
.tve-modern .tve-reader-body audio { display: block; width: 92%; max-width: 640px; margin: 26px auto; }
.tve-modern .tve-reader-body video { display: block; width: 100%; max-height: 82vh; background: #000; }
.tve-modern .tve-reader-msg { padding: 28px 18px; text-align: center; }
.tve-modern .tve-reader-msg p { margin: 0 0 14px; color: var(--tve-text); font-size: 15px; }

/* ============================================================
   FOOTER riêng của Thư viện điện tử
   ============================================================ */
.tve-modern .tve-footer { margin-top: 26px; background: #0f172a; color: #cbd5e1; }
.tve-modern .tve-footer-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 36px 16px 26px;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.4fr;
    gap: 28px;
}
@media (max-width: 768px) { .tve-modern .tve-footer-inner { grid-template-columns: 1fr; gap: 22px; } }
.tve-modern .tve-foot-brand { display: flex; align-items: flex-start; gap: 12px; }
.tve-modern .tve-foot-brand strong { color: #fff; font-size: 16px; display: block; line-height: 1.3; }
.tve-modern .tve-foot-brand p { margin: 4px 0 0; font-size: 13.5px; color: #94a3b8; }
.tve-modern .tve-footer h4 { color: #fff; font-size: 15px; margin: 0 0 12px; font-weight: 700; }
.tve-modern .tve-footer p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.55; }
.tve-modern .tve-foot-stat { font-size: 15px; color: #e2e8f0; }
.tve-modern .tve-foot-stat b { color: var(--tve-accent); font-size: 20px; }
.tve-modern .tve-footer i { color: var(--tve-accent); margin-right: 6px; }
.tve-modern .tve-footer a { color: #93c5fd; }
.tve-modern .tve-footer a:hover { text-decoration: underline; }
.tve-modern .tve-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .08);
    text-align: center;
    padding: 16px;
    font-size: 13px;
    color: #94a3b8;
}

/* ---------- Nút cuộn lên đầu trang ---------- */
.tve-totop {
    position: fixed;
    right: 18px; bottom: 22px;
    width: 46px; height: 46px;
    border: 0; border-radius: 50%;
    background: #2563eb;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(37, 99, 235, .4);
    opacity: 0; visibility: hidden;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 1300;
}
.tve-totop.show { opacity: 1; visibility: visible; }
.tve-totop:hover { transform: translateY(-3px); background: #1e40af; }

/* =====================================================================
   GIẢI BÀI TẬP SÁCH GIÁO KHOA (module giaibaitap)
   ===================================================================== */

/* --- Ô môn học ở trang chỉ mục: LƯỚI 2×2 bìa các bộ sách ---
   Hệ cũ dựng bằng 2 hàng flex lồng nhau kèm style nội tuyến; ở đây là một
   grid 2 cột nên 1, 2, 3 hay 4 bìa đều xếp cân, không cần 4 nhánh if. */
/* Ô VUÔNG chứ không phải 3/4 như thẻ bìa một-ảnh: bên trong là 2×2 bìa, khung
   3/4 để lại một khoảng trống lớn ở dưới khi môn chỉ có 1-2 bộ sách. */
.tve-modern .product-thumb.gbt-thumb-4 { aspect-ratio: 1 / 1; }
.tve-modern .product-thumb.gbt-thumb-4 a {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Hàng cao BẰNG NHAU: để mặc định (auto) thì ảnh height:100% không có gì
       để bám, ô sập xuống và bìa chồng lên nhau ở góc trên. */
    grid-auto-rows: 1fr;
    gap: 4px;
    padding: 4px;
    background: var(--tve-bg);
}
.tve-modern .product-thumb.gbt-thumb-4 img {
    width: 100%;
    height: 100%;
    /* `contain` chứ không phải `cover` như thẻ bìa một-ảnh: đây là BÌA SÁCH thu
       nhỏ, cắt mất mép là mất luôn tên sách — thứ duy nhất phân biệt các bộ. */
    object-fit: contain;
    border-radius: 4px;
}
/* Chỉ có 1 bìa thì cho nó chiếm cả ô, đỡ trông lệch một góc. */
.tve-modern .product-thumb.gbt-thumb-4 img:only-child { grid-column: 1 / -1; grid-row: 1 / -1; }
/* Lớp phủ "Đọc ngay" của .product-thumb không hợp với ô ghép 4 ảnh. */
.tve-modern .product-thumb.gbt-thumb-4 a::after { content: none; }

/* --- Mục lục (trang muc-luc) --- */
.tve-modern .gbt-mucluc {
    background: var(--tve-surface);
    border: 1px solid var(--tve-border);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 22px;
}
.tve-modern .gbt-mucluc ul.gbt-ml { list-style: none; margin: 0; padding: 0; }
/* Thụt lề do CSS lo (hệ cũ dùng margin-left cứng 40/60/90/120px cho từng cấp,
   cây sâu 5 cấp là tràn ngang trên điện thoại). */
.tve-modern .gbt-mucluc ul.gbt-ml ul.gbt-ml { padding-left: 18px; border-left: 1px dashed var(--tve-border); margin-left: 4px; }
.tve-modern .gbt-mucluc li { margin: 5px 0; line-height: 1.55; }
.tve-modern .gbt-mucluc li > span { font-weight: 600; color: var(--tve-text); }
.tve-modern .gbt-mucluc li.gbt-ml-c1 > span { font-size: 16px; }
.tve-modern .gbt-mucluc li > a { color: var(--tve-primary); }
.tve-modern .gbt-mucluc li > a:hover { text-decoration: underline; }
.tve-modern .gbt-mucluc li > a i { margin-right: 6px; opacity: .7; }

/* --- Trang lời giải: hai cột (cây | nội dung) --- */
.tve-modern .gbt-doc {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    margin-bottom: 24px;
}
.tve-modern .gbt-ben {
    background: var(--tve-surface);
    border: 1px solid var(--tve-border);
    border-radius: 12px;
    padding: 12px 14px;
    /* Hệ cũ khóa cứng height: 850px cho jqxSplitter — màn thấp là cụt, màn cao
       là thừa. Dính theo màn hình và tự cuộn trong cột. */
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 24px);
    overflow: auto;
}
.tve-modern .gbt-ben-dau {
    font-weight: 700;
    font-size: 14px;
    padding-bottom: 10px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--tve-border);
}
.tve-modern .gbt-ben-dau i { color: var(--tve-primary); margin-right: 6px; }
.tve-modern ul.gbt-cay { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.tve-modern ul.gbt-cay ul.gbt-cay { padding-left: 12px; border-left: 1px dashed var(--tve-border); margin-left: 6px; }
.tve-modern .gbt-cay li { margin: 3px 0; line-height: 1.5; }
.tve-modern .gbt-cay summary {
    cursor: pointer;
    font-weight: 600;
    padding: 3px 2px;
    border-radius: 5px;
}
.tve-modern .gbt-cay summary:hover { background: rgba(37, 99, 235, .08); color: var(--tve-primary); }
.tve-modern .gbt-cay li.gbt-cay-la > a,
.tve-modern .gbt-cay li.gbt-cay-la > span { display: block; padding: 3px 6px; border-radius: 5px; }
.tve-modern .gbt-cay li.gbt-cay-la > a { color: var(--tve-text); }
.tve-modern .gbt-cay li.gbt-cay-la > a:hover { background: rgba(37, 99, 235, .08); color: var(--tve-primary); }
.tve-modern .gbt-cay li.gbt-cay-chon > a,
.tve-modern .gbt-cay li.gbt-cay-chon > span { background: var(--tve-primary); color: #fff; font-weight: 700; }

.tve-modern .gbt-noi {
    background: var(--tve-surface);
    border: 1px solid var(--tve-border);
    border-radius: 12px;
    padding: 18px 22px 24px;
    min-width: 0;
}
.tve-modern .gbt-tenbai { font-size: 21px; font-weight: 800; margin: 0 0 6px; color: #b91c1c; }
.tve-modern .gbt-meta { color: var(--tve-text-muted); font-size: 13.5px; margin: 0 0 14px; }
.tve-modern .gbt-meta i { color: var(--tve-primary); margin-right: 5px; }

/* Dải neo "[Câu 1][Câu 2]…" dính đầu — đúng khối .sticky của hệ cũ, nhưng
   position: sticky đã được mọi trình duyệt hiện hành hỗ trợ nên bỏ được
   thư viện vá Stickyfill mà hệ cũ phải nạp thêm. */
.tve-modern .gbt-neo {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    background: #e6e6e6;
    padding: 9px 12px;
    border-radius: 8px;
    margin: 0 0 16px;
}
.tve-modern .gbt-neo a {
    font-size: 13px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--tve-border);
    color: var(--tve-text);
}
.tve-modern .gbt-neo a:hover { background: var(--tve-primary); color: #fff; border-color: var(--tve-primary); }

.tve-modern .gbt-phan { scroll-margin-top: 56px; padding-bottom: 8px; }
/* HTML lời giải cạo từ nguồn ngoài: ép mọi thứ nằm trong bề rộng cột. */
.tve-modern .gbt-html { font-size: 15.5px; line-height: 1.8; word-break: break-word; }
.tve-modern .gbt-html img { max-width: 100%; height: auto; }
.tve-modern .gbt-html table { max-width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.tve-modern .gbt-html td, .tve-modern .gbt-html th { border: 1px solid var(--tve-border); padding: 6px 10px; }
.tve-modern .gbt-html p { margin: 0 0 10px; }
.tve-modern .gbt-nguon { text-align: right; color: var(--tve-text-muted); font-size: 12.5px; margin: 16px 0 0; }

@media (max-width: 900px) {
    /* Điện thoại: cây lên trên, gập lại cho khỏi che nội dung. */
    .tve-modern .gbt-doc { grid-template-columns: 1fr; }
    .tve-modern .gbt-ben { position: static; max-height: 320px; }
}

/* ============================================================
   GIẢI BÀI TẬP — BẢN LÀM LẠI (25/09/2026): chỉ bộ Kết nối tri thức.
   Tiền tố .gbt2-* (các lớp .gbt-* cũ ở trên để nguyên cho màn khác nếu còn dùng).
   Mọi màu đi qua biến --tve-*, nên chế độ TỐI tự đúng.
   ============================================================ */
.tve-modern .gbt2 { --gbt2-r: 16px; }
.tve-modern .gbt2-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13.5px; color: var(--tve-text-muted); margin: 4px 0 14px; }
.tve-modern .gbt2-crumb a { color: var(--tve-text-muted); }
.tve-modern .gbt2-crumb a:hover { color: var(--tve-primary); }
.tve-modern .gbt2-crumb span { color: var(--tve-text); font-weight: 600; }
.tve-modern .gbt2-crumb .fa-angle-right { opacity: .5; }
.tve-modern .gbt2-nhan { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
    color: var(--mau, var(--tve-primary)); background: color-mix(in srgb, var(--mau, var(--tve-primary)) 12%, transparent);
    padding: 4px 10px; border-radius: 999px; }

/* ---- Hero trang đầu ---- */
.tve-modern .gbt2-hero { border-radius: 22px; padding: 28px 26px; margin: 6px 0 18px; color: #fff;
    background: radial-gradient(120% 140% at 0% 0%, #3b82f6 0%, #2563eb 38%, #0f766e 100%); box-shadow: 0 14px 34px rgba(37, 99, 235, .28); }
.tve-modern .gbt2-hero h1 { font-size: clamp(26px, 4vw, 38px); font-weight: 800; margin: 10px 0 6px; color: #fff; letter-spacing: -.01em; }
.tve-modern .gbt2-hero p { margin: 0 0 18px; opacity: .92; font-size: 15px; }
.tve-modern .gbt2-hero .gbt2-nhan { color: #fff; background: rgba(255, 255, 255, .18); }

/* ---- Ô tìm ---- */
.tve-modern .gbt2-tim { display: flex; align-items: center; gap: 8px; background: var(--tve-surface); border: 1px solid var(--tve-border);
    border-radius: 999px; padding: 6px 6px 6px 16px; box-shadow: var(--tve-shadow); margin: 0 0 16px; max-width: 760px; }
.tve-modern .gbt2-tim:focus-within { border-color: var(--tve-primary); box-shadow: 0 0 0 4px rgba(37, 99, 235, .15); }
.tve-modern .gbt2-tim > .fa { color: var(--tve-text-muted); }
.tve-modern .gbt2-tim input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--tve-text); font-size: 15px; padding: 8px 4px; }
.tve-modern .gbt2-tim button { border: 0; border-radius: 999px; background: var(--tve-primary); color: #fff; font-weight: 700; padding: 10px 20px; cursor: pointer; }
.tve-modern .gbt2-tim button:hover { background: var(--tve-primary-dark); }
.tve-modern .gbt2-tim-lon { padding: 8px 8px 8px 20px; margin-bottom: 0; }
.tve-modern .gbt2-tim-lon input { font-size: 16.5px; padding: 11px 4px; }
.tve-modern .gbt2-tim-lon button { padding: 12px 26px; font-size: 15.5px; }
.tve-modern .gbt2 > .gbt2-tim-lon { margin-bottom: 16px; }

/* ---- Nút lớp / nút môn ---- */
.tve-modern .gbt2-lop { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 20px; }
.tve-modern .gbt2-lop-nhom { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tve-modern .gbt2-lop-ten { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--tve-text-muted); margin-right: 2px; }
.tve-modern .gbt2-chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 42px; height: 38px; padding: 0 14px;
    border-radius: 999px; border: 1px solid var(--tve-border); background: var(--tve-surface); color: var(--tve-text); font-weight: 600; font-size: 14px;
    transition: all .15s ease; }
.tve-modern .gbt2-chip:hover { border-color: var(--tve-primary); color: var(--tve-primary); }
.tve-modern .gbt2-chip.dang { background: var(--tve-primary); border-color: var(--tve-primary); color: #fff; box-shadow: 0 4px 12px rgba(37, 99, 235, .3); }
.tve-modern .gbt2-chip .fa-user { font-size: 11px; opacity: .8; }
.tve-modern .gbt2-mon-doi { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; margin: 0 0 12px; scrollbar-width: thin; }
.tve-modern .gbt2-chip-mon { white-space: nowrap; flex: none; }
.tve-modern .gbt2-chip-mon i { color: var(--mau); }
.tve-modern .gbt2-chip-mon.dang { background: var(--mau); border-color: var(--mau); box-shadow: none; }
.tve-modern .gbt2-chip-mon.dang i { color: #fff; }

/* ---- Khối lớp + thẻ môn ---- */
.tve-modern .gbt2-khoi { margin: 0 0 26px; }
.tve-modern .gbt2-khoi-ten { font-size: 20px; font-weight: 800; margin: 0 0 12px; color: var(--tve-text); display: flex; align-items: baseline; gap: 10px; }
.tve-modern .gbt2-khoi-ten span { font-size: 13px; font-weight: 600; color: var(--tve-text-muted); }
.tve-modern .gbt2-mon-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.tve-modern .gbt2-mon { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--gbt2-r); background: var(--tve-surface);
    border: 1px solid var(--tve-border); color: var(--tve-text); box-shadow: var(--tve-shadow); transition: transform .15s ease, box-shadow .15s ease, border-color .15s; }
.tve-modern .gbt2-mon:hover { transform: translateY(-2px); box-shadow: var(--tve-shadow-hover); border-color: var(--mau); }
.tve-modern .gbt2-mon-icon { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 20px;
    color: var(--mau); background: color-mix(in srgb, var(--mau) 14%, transparent); }
.tve-modern .gbt2-mon-icon-lon { width: 64px; height: 64px; font-size: 28px; border-radius: 18px; }
.tve-modern .gbt2-mon-chu { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tve-modern .gbt2-mon-chu b { font-size: 15.5px; line-height: 1.3; }
.tve-modern .gbt2-mon-chu small { color: var(--tve-text-muted); font-size: 12.5px; margin-top: 2px; }
.tve-modern .gbt2-mon-toi { color: var(--tve-text-muted); font-size: 18px; }

/* ---- Đầu trang môn ---- */
.tve-modern .gbt2-dau { display: flex; align-items: center; gap: 16px; margin: 0 0 16px; }
.tve-modern .gbt2-dau h1 { margin: 0; font-size: clamp(22px, 3vw, 30px); font-weight: 800; color: var(--tve-text); }
.tve-modern .gbt2-dau h1 span { color: var(--mau); }
.tve-modern .gbt2-dau p { margin: 2px 0 0; color: var(--tve-text-muted); }

/* ---- Nhóm quyển ---- */
.tve-modern .gbt2-nhom { margin: 8px 0 24px; }
.tve-modern .gbt2-nhom h2 { font-size: 17px; font-weight: 800; margin: 0 0 12px; padding-left: 10px; border-left: 4px solid var(--tve-primary); color: var(--tve-text); }
.tve-modern .gbt2-quyen-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.tve-modern .gbt2-quyen { display: flex; flex-direction: column; gap: 6px; color: var(--tve-text); }
.tve-modern .gbt2-bia { display: block; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: var(--tve-border);
    box-shadow: 0 6px 16px rgba(16, 24, 40, .14); transition: transform .18s ease, box-shadow .18s ease; }
.tve-modern .gbt2-bia img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tve-modern .gbt2-quyen:hover .gbt2-bia { transform: translateY(-3px) rotate(-.4deg); box-shadow: var(--tve-shadow-hover); }
.tve-modern .gbt2-quyen-ten { font-weight: 700; font-size: 14.5px; }
.tve-modern .gbt2-quyen-so { font-size: 12.5px; color: var(--tve-text-muted); margin-top: -4px; }

/* ---- Mục lục ---- */
.tve-modern .gbt2-quyen-dau { display: flex; gap: 20px; align-items: center; background: var(--tve-surface); border: 1px solid var(--tve-border);
    border-radius: 20px; padding: 18px; margin: 0 0 16px; box-shadow: var(--tve-shadow); }
.tve-modern .gbt2-quyen-dau-bia { width: 110px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; box-shadow: 0 6px 16px rgba(16, 24, 40, .18); flex: none; }
.tve-modern .gbt2-quyen-dau h1 { margin: 8px 0 4px; font-size: clamp(20px, 2.6vw, 26px); font-weight: 800; color: var(--tve-text); }
.tve-modern .gbt2-quyen-dau p { margin: 0 0 12px; color: var(--tve-text-muted); }
.tve-modern .gbt2-nut { display: inline-flex; align-items: center; gap: 8px; background: var(--tve-primary); color: #fff; font-weight: 700;
    padding: 10px 18px; border-radius: 999px; box-shadow: 0 6px 16px rgba(37, 99, 235, .3); }
.tve-modern .gbt2-nut:hover { background: var(--tve-primary-dark); color: #fff; }
.tve-modern .gbt2-loc { position: sticky; top: 64px; z-index: 5; display: flex; align-items: center; gap: 10px; background: var(--tve-surface);
    border: 1px solid var(--tve-border); border-radius: 14px; padding: 4px 14px; margin: 0 0 14px; box-shadow: var(--tve-shadow); }
.tve-modern .gbt2-loc input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--tve-text); font-size: 15px; padding: 10px 0; }
.tve-modern .gbt2-loc > .fa, .tve-modern .gbt2-loc span { color: var(--tve-text-muted); font-size: 13px; }
.tve-modern .gbt2-muc { display: grid; gap: 12px; }
.tve-modern .gbt2-chuong { background: var(--tve-surface); border: 1px solid var(--tve-border); border-radius: var(--gbt2-r); overflow: hidden; box-shadow: var(--tve-shadow); }
.tve-modern .gbt2-chuong > summary { cursor: pointer; list-style: none; padding: 14px 18px; font-weight: 800; font-size: 15.5px; color: var(--tve-text);
    display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tve-modern .gbt2-chuong > summary::-webkit-details-marker { display: none; }
.tve-modern .gbt2-chuong > summary::after { content: '\f107'; font-family: FontAwesome; color: var(--tve-text-muted); transition: transform .2s; }
.tve-modern .gbt2-chuong[open] > summary::after { transform: rotate(180deg); }
.tve-modern .gbt2-chuong-than { padding: 0 10px 10px; }
.tve-modern .gbt2-chuong-con h4 { margin: 10px 8px 4px; font-size: 13.5px; font-weight: 700; color: var(--tve-text-muted); text-transform: uppercase; letter-spacing: .02em; }
.tve-modern .gbt2-muc-tron { padding: 8px 10px; color: var(--tve-text-muted); font-size: 14px; }
.tve-modern .gbt2-bai { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--tve-text); line-height: 1.45; }
.tve-modern .gbt2-bai > .fa:first-child { color: var(--tve-primary); opacity: .75; flex: none; }
.tve-modern .gbt2-bai span { flex: 1; min-width: 0; }
.tve-modern .gbt2-bai > .fa-angle-right { color: var(--tve-text-muted); opacity: 0; transition: opacity .15s; }
.tve-modern .gbt2-bai:hover { background: rgba(37, 99, 235, .07); color: var(--tve-primary); }
.tve-modern .gbt2-bai:hover > .fa-angle-right { opacity: 1; }
.tve-modern .gbt2-bai mark { background: #fde68a; color: inherit; border-radius: 3px; padding: 0 1px; }
.tve-modern [hidden] { display: none !important; }

/* ---- Trang lời giải ---- */
.tve-modern .gbt2-cong-cu { position: sticky; top: 64px; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    background: color-mix(in srgb, var(--tve-surface) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--tve-border); border-radius: 14px; padding: 6px; margin: 0 0 14px; box-shadow: var(--tve-shadow); }
.tve-modern .gbt2-cc-nut { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid transparent;
    background: transparent; color: var(--tve-text); font-weight: 600; font-size: 14px; cursor: pointer; }
.tve-modern .gbt2-cc-nut:hover { background: rgba(37, 99, 235, .08); color: var(--tve-primary); }
.tve-modern .gbt2-cc-chinh { background: var(--tve-primary); color: #fff; }
.tve-modern .gbt2-cc-chinh:hover { background: var(--tve-primary-dark); color: #fff; }
.tve-modern .gbt2-cc-cach { flex: 1; }
.tve-modern .gbt2-cc-vi { font-size: 12.5px; color: var(--tve-text-muted); padding: 0 6px; }
.tve-modern .gbt2-cc-ml { display: none; }
.tve-modern .gbt2-doc { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
.tve-modern .gbt2-ben { position: sticky; top: 124px; max-height: calc(100vh - 140px); display: flex; flex-direction: column; background: var(--tve-surface);
    border: 1px solid var(--tve-border); border-radius: var(--gbt2-r); box-shadow: var(--tve-shadow); overflow: hidden; }
.tve-modern .gbt2-ben-dau { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--tve-border); font-weight: 700; }
.tve-modern .gbt2-ben-dau a { color: var(--tve-text); }
.tve-modern .gbt2-ben-dau a i { color: var(--tve-primary); margin-right: 4px; }
.tve-modern .gbt2-ben-dong { display: none; border: 0; background: transparent; font-size: 24px; line-height: 1; color: var(--tve-text-muted); cursor: pointer; }
.tve-modern .gbt2-ben-loc { margin: 10px 12px 6px; border: 1px solid var(--tve-border); border-radius: 10px; padding: 8px 10px; background: var(--tve-bg); color: var(--tve-text); font-size: 14px; }
.tve-modern .gbt2-ben-cay { overflow-y: auto; padding: 4px 8px 12px; font-size: 13.5px; }
.tve-modern .gbt2-ben-cay ul { list-style: none; margin: 0; padding: 0; }
.tve-modern .gbt2-ben-cay ul ul { padding-left: 10px; margin-left: 6px; border-left: 1px dashed var(--tve-border); }
.tve-modern .gbt2-ben-cay summary { cursor: pointer; padding: 6px 8px; border-radius: 8px; font-weight: 700; color: var(--tve-text); }
.tve-modern .gbt2-ben-cay summary:hover { background: rgba(37, 99, 235, .07); }
.tve-modern .gbt2-ben-cay li > a, .tve-modern .gbt2-ben-cay li > span { display: block; padding: 6px 8px; border-radius: 8px; color: var(--tve-text); line-height: 1.4; }
.tve-modern .gbt2-ben-cay li > a:hover { background: rgba(37, 99, 235, .07); color: var(--tve-primary); }
.tve-modern .gbt2-ben-cay li.dang > a { background: var(--tve-primary); color: #fff; font-weight: 700; }
.tve-modern .gbt2-man { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 1090; }
.tve-modern .gbt2-noi { --co: 16px; background: var(--tve-surface); border: 1px solid var(--tve-border); border-radius: 20px; padding: 24px 28px; box-shadow: var(--tve-shadow); min-width: 0; }
.tve-modern .gbt2-tenbai { font-size: clamp(21px, 2.6vw, 28px); font-weight: 800; line-height: 1.3; margin: 12px 0 6px; color: var(--tve-text); }
.tve-modern .gbt2-meta { color: var(--tve-text-muted); font-size: 13px; margin: 0 0 16px; }
.tve-modern .gbt2-neo { position: sticky; top: 118px; z-index: 4; display: flex; gap: 6px; overflow-x: auto; padding: 8px 0; margin: 0 0 12px;
    background: var(--tve-surface); border-bottom: 1px solid var(--tve-border); scrollbar-width: thin; }
.tve-modern .gbt2-neo a { flex: none; white-space: nowrap; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px;
    border: 1px solid var(--tve-border); color: var(--tve-text); }
.tve-modern .gbt2-neo a:hover { background: var(--mau, var(--tve-primary)); border-color: var(--mau, var(--tve-primary)); color: #fff; }
.tve-modern .gbt2-phan { scroll-margin-top: 170px; padding: 16px 0 6px; border-top: 1px dashed var(--tve-border); }
.tve-modern .gbt2-phan:first-of-type { border-top: 0; }
.tve-modern .gbt2-phan h2 { font-size: 16.5px; font-weight: 800; color: var(--mau, var(--tve-primary)); margin: 0 0 10px; }
.tve-modern .gbt2-html { font-size: var(--co); line-height: 1.8; word-break: break-word; color: var(--tve-text); }
.tve-modern .gbt2-html img { max-width: 100%; height: auto; border-radius: 6px; }
.tve-modern .gbt2-html table { max-width: 100%; border-collapse: collapse; display: block; overflow-x: auto; margin: 8px 0; }
.tve-modern .gbt2-html td, .tve-modern .gbt2-html th { border: 1px solid var(--tve-border); padding: 6px 10px; }
.tve-modern .gbt2-html p { margin: 0 0 10px; }
.tve-modern .gbt2-tiep { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 26px 0 0; }
.tve-modern .gbt2-tiep a { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--tve-border); color: var(--tve-text); }
.tve-modern .gbt2-tiep a:hover { border-color: var(--tve-primary); box-shadow: var(--tve-shadow-hover); }
.tve-modern .gbt2-tiep a.sau { text-align: right; }
.tve-modern .gbt2-tiep small { color: var(--tve-text-muted); font-weight: 700; }
.tve-modern .gbt2-tiep b { font-size: 14.5px; line-height: 1.4; }
.tve-modern .gbt2-nguon { text-align: right; color: var(--tve-text-muted); font-size: 12px; margin: 14px 0 0; }

/* ---- Kết quả tìm ---- */
.tve-modern .gbt2-kq-dem { color: var(--tve-text-muted); margin: 0 0 12px; }
.tve-modern .gbt2-kq { background: var(--tve-surface); border: 1px solid var(--tve-border); border-radius: var(--gbt2-r); padding: 6px 8px 8px; margin: 0 0 12px; box-shadow: var(--tve-shadow); }
.tve-modern .gbt2-kq h2 { font-size: 15px; font-weight: 800; margin: 8px 8px 4px; }
.tve-modern .gbt2-kq h2 a { color: var(--tve-text); }
.tve-modern .gbt2-kq h2 a i { color: var(--tve-primary); margin-right: 4px; }
.tve-modern .gbt2-trong { text-align: center; padding: 40px 10px; color: var(--tve-text-muted); }
.tve-modern .gbt2-trong > .fa { font-size: 40px; opacity: .35; }

/* ---- Điện thoại ---- */
@media (max-width: 900px) {
    .tve-modern .gbt2-doc { grid-template-columns: 1fr; }
    .tve-modern .gbt2-cc-ml { display: inline-flex; }
    .tve-modern .gbt2-ben { position: fixed; top: 0; bottom: 0; left: 0; width: min(340px, 86vw); max-height: none; z-index: 1100; border-radius: 0 18px 18px 0;
        transform: translateX(-105%); transition: transform .22s ease; }
    .tve-modern .gbt2-ben.mo { transform: none; }
    .tve-modern .gbt2-ben-dong { display: block; }
    .tve-modern .gbt2-noi { padding: 18px 16px; border-radius: 16px; }
    .tve-modern .gbt2-cc-vi { display: none; }
    .tve-modern .gbt2-hero { padding: 22px 16px; border-radius: 18px; }
    .tve-modern .gbt2-mon-luoi { grid-template-columns: 1fr 1fr; gap: 10px; }
    .tve-modern .gbt2-mon { flex-direction: column; align-items: flex-start; gap: 8px; }
    .tve-modern .gbt2-mon-toi { display: none; }
    .tve-modern .gbt2-quyen-luoi { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
    .tve-modern .gbt2-quyen-dau-bia { width: 84px; }
    .tve-modern .gbt2-tiep { grid-template-columns: 1fr; }
    .tve-modern .gbt2-tim button { padding: 10px 14px; }
}
@media print {
    .tve-modern .tve-header, .tve-modern .gbt2-crumb, .tve-modern .gbt2-cong-cu, .tve-modern .gbt2-ben, .tve-modern .gbt2-neo,
    .tve-modern .gbt2-tiep, .tve-modern footer { display: none !important; }
    .tve-modern .gbt2-doc { display: block; }
    .tve-modern .gbt2-noi { border: 0; box-shadow: none; padding: 0; }
}

/* ---- Giải bài tập theo DANH MỤC CHUẨN (biên mục KNTT 2026-2027) ---- */
.tve-modern .gbt2-bia { position: relative; }
.tve-modern .gbt2-nhan-chua { position: absolute; left: 8px; bottom: 8px; font-size: 11.5px; font-weight: 700; color: #fff;
    background: rgba(15, 23, 42, .72); padding: 3px 8px; border-radius: 999px; }
.tve-modern .gbt2-quyen.chua .gbt2-bia img { filter: saturate(.55); opacity: .85; }
.tve-modern .gbt2-quyen-nut { display: flex; flex-wrap: wrap; gap: 6px; }
.tve-modern .gbt2-nut-nho { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; padding: 5px 10px;
    border-radius: 999px; border: 1px solid var(--tve-border); color: var(--tve-text); background: var(--tve-surface); }
.tve-modern .gbt2-nut-nho small { font-weight: 600; color: var(--tve-text-muted); }
.tve-modern .gbt2-nut-nho:hover { border-color: var(--tve-primary); color: var(--tve-primary); }
.tve-modern .gbt2-nut-lg { background: var(--tve-primary); border-color: var(--tve-primary); color: #fff; }
.tve-modern .gbt2-nut-lg small { color: rgba(255, 255, 255, .85); }
.tve-modern .gbt2-nut-lg:hover { background: var(--tve-primary-dark); color: #fff; }
/* Giải bài tập BẢN MỚI (BaiTapMoiService, 28/09/2026): nút "Lời giải mới" xanh lá, và các khối của trang bài. */
.tve-modern .gbt2-nut-moi, .tve-modern .gbt2-nut-moi:hover { background: #16a34a; border-color: #16a34a; color: #fff; }
.tve-modern .gbt2-moi-nhan { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: #e7f6ee; color: #146c43; }
.tve-modern .gbt2-moi-nhan.kiem { background: #eaf2ff; color: #1d4ed8; }
.tve-modern .gbt2-moi-nhan.goiy { background: #fff4e5; color: #9a5b00; }
.tve-modern .gbt2-moi-khoi { margin: 14px 0; padding: 14px 16px; border: 1px solid var(--tve-border); border-radius: 12px; background: var(--tve-surface); }
.tve-modern .gbt2-moi-khoi h2 { font-size: 16px; margin: 0 0 8px; color: var(--mau, var(--tve-primary)); }
.tve-modern .gbt2-moi-khoi p { margin: 0 0 .6em; line-height: 1.7; }
.tve-modern .gbt2-moi-de { background: #f8fafc; }
/* Chế độ tối (01/10/2026 — chủ dự án chụp màn điện thoại: khung Đề bài nền trắng cố định, chữ nhạt theo
   màu tối → gần như không đọc được). Mọi nền viết cứng ở khối bài tập mới đổi sang tông tối. */
.dark .tve-modern .gbt2-moi-de, :root[data-theme="dark"] .tve-modern .gbt2-moi-de { background: #0f1a2b; color: var(--tve-text); }
.dark .tve-modern .gbt2-moi-khoi, :root[data-theme="dark"] .tve-modern .gbt2-moi-khoi { color: var(--tve-text); }
.dark .tve-modern .gbt2-moi-hinh, :root[data-theme="dark"] .tve-modern .gbt2-moi-hinh { background: rgba(245, 158, 11, .12); color: var(--tve-text); }
.dark .tve-modern .gbt2-moi-hinh summary, :root[data-theme="dark"] .tve-modern .gbt2-moi-hinh summary { color: #fbbf24; }
.dark .tve-modern .gbt2-moi-dapso span, :root[data-theme="dark"] .tve-modern .gbt2-moi-dapso span { background: rgba(99, 102, 241, .2); color: var(--tve-text); }
.dark .tve-modern .gbt2-moi-nhan, :root[data-theme="dark"] .tve-modern .gbt2-moi-nhan { background: rgba(22, 163, 74, .18); color: #4ade80; }
.dark .tve-modern .gbt2-moi-nhan.kiem, :root[data-theme="dark"] .tve-modern .gbt2-moi-nhan.kiem { background: rgba(59, 130, 246, .18); color: #93c5fd; }
.dark .tve-modern .gbt2-moi-nhan.goiy, :root[data-theme="dark"] .tve-modern .gbt2-moi-nhan.goiy { background: rgba(245, 158, 11, .18); color: #fbbf24; }
.tve-modern .gbt2-moi-hinh { margin: 10px 0; padding: 10px 12px; border-left: 4px solid #f59e0b; background: #fffbeb; border-radius: 6px; font-size: 14px; }
.tve-modern .gbt2-moi-hinh details { margin-top: 6px; }
.tve-modern .gbt2-moi-hinh summary { cursor: pointer; color: #92400e; }
.tve-modern .gbt2-moi-dapso { display: flex; flex-wrap: wrap; gap: 6px; }
.tve-modern .gbt2-moi-dapso span { padding: 3px 10px; border-radius: 8px; background: #eef2ff; font-size: 14px; }
.tve-modern .gbt2-moi-ghichu { font-size: 12.5px; color: var(--tve-text-muted); font-style: italic; }
.tve-modern .gbt2-bai span.gbt2-moi-trang { flex: none; margin-left: auto; font-size: 12px; color: var(--tve-text-muted); white-space: nowrap; }
.tve-modern .gbt2-nut-phu { background: var(--tve-surface); color: var(--tve-primary); border: 1px solid var(--tve-primary); box-shadow: none; margin-left: 8px; }
.tve-modern .gbt2-nut-phu:hover { background: rgba(37, 99, 235, .08); color: var(--tve-primary); }

/* ---------- "Lọc theo chủ đề" gọn (30/09/2026) — cùng mẫu hệ cũ thuviendientu_moi/list.php ----------
   Tên nhóm một dòng riêng, chip nhỏ, số xám không nền, chip < 5 quyển giấu sau "+ n mục nữa";
   điện thoại: mỗi nhóm một hàng vuốt ngang. */
.tve-modern .tve-locnhom .tln-nhom { margin: 0 0 10px; }
.tve-modern .tve-locnhom .tln-ten { font-size: 12.5px; font-weight: 600; color: var(--tve-text-muted); margin: 0 0 6px; letter-spacing: .01em; }
.tve-modern .tve-locnhom .tln-hang { gap: 7px; margin: 0; }
.tve-modern .tve-locnhom .tve-chip { font-size: 14px; padding: 5px 12px; gap: 6px; box-shadow: none; }
.tve-modern .tve-locnhom .tve-chip:hover { transform: none; }
.tve-modern .tve-locnhom .tve-chip .num,
.tve-modern .tve-locnhom .tve-chip:hover .num { background: none; min-width: 0; height: auto; padding: 0; font-weight: 500; font-size: 12.5px; color: var(--tve-text-muted); }
.tve-modern .tve-locnhom .tve-chip.tve-chip-active .num { color: rgba(255, 255, 255, .85); }
.tve-modern .tve-locnhom .tve-chip.tve-chip-hl .num { color: #b45309; }
.tve-modern .tve-locnhom .tln-nho { display: none; }
.tve-modern .tve-locnhom .tln-hang.mo .tln-nho { display: inline-flex; }
.tve-modern .tve-locnhom .tln-hang.mo .tln-them { display: none; }
.tve-modern .tve-locnhom .tln-them { cursor: pointer; color: var(--tve-text-muted); border-style: dashed; background: transparent; font-family: inherit; }
@media (max-width: 640px) {
    .tve-modern .tve-locnhom .tln-hang {
        flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
        margin-right: -16px; padding: 1px 16px 4px 0;
    }
    .tve-modern .tve-locnhom .tln-hang::-webkit-scrollbar { display: none; }
    .tve-modern .tve-locnhom .tve-chip { flex: 0 0 auto; white-space: nowrap; }
}