/* =========================================
   GIAO DIỆN DESKTOP CHO HỌC VIÊN
   -----------------------------------------
   Ràng buộc bất biến (docs/student-desktop-web-plan.md):
   - MỌI rule trong file này phải bắt đầu bằng .ht-desktop. Class đó chỉ được gắn bởi
     Areas/Student/Views/Shared/_HtDesktopDetect.cshtml, và không bao giờ có trong app Capacitor
     -> app mobile render y hệt khi chưa có file này.
   - Không đổi tên / bỏ .student-header và .main-content: AJAX-swap (htAjaxSwapPage) dựa vào 2 class đó.
   ========================================= */

.ht-desktop {
    --ht-sidebar-w: 256px;
    /* Màu thương hiệu đậm (nền khung đăng nhập, nút khi rê chuột, mục đang chọn). Đổi theo tenant qua
       StudentBranding.MauChinhDam (_HtDesktopDetect). Màu đỏ báo lỗi/sai/vắng thì giữ #c62828 cố định. */
    --ht-brand-strong: #c62828;
    --ht-read-w: 820px; /* bề rộng tối đa vùng đọc */
    --ht-desk-gutter: max(32px, calc((100vw - var(--ht-sidebar-w) - var(--ht-read-w)) / 2));
}

/* site.css đặt body margin-bottom 60px -> trên desktop sinh thanh cuộn thừa (main-content đã min-height 100vh) */
.ht-desktop body { margin-bottom: 0; }

/* =========================================
   1. SIDEBAR — chính thanh .student-nav của mobile, chỉ đổi bố cục
   (không thêm markup/JS mới: AJAX-swap, đổi icon active... chạy y như mobile)
   ========================================= */
.ht-desktop .student-nav {
    top: 0;
    bottom: 0;
    width: var(--ht-sidebar-w);
    height: 100vh;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 4px;
    padding: 20px 12px;
    border-top: none;
    border-right: 1px solid var(--ht-border);
    box-shadow: none;
}

.ht-desktop .student-nav-item {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    font-size: 14.5px;
}

.ht-desktop .student-nav-item i {
    font-size: 1.15rem;
    margin-bottom: 0;
    width: 22px;
    text-align: center;
}

.ht-desktop .student-nav-item.active i { transform: none; }
.ht-desktop .student-nav-item:hover { background-color: var(--ht-border-light); color: var(--ht-text); }
.ht-desktop .student-nav-item.active,
.ht-desktop .student-nav-item.active:hover { background-color: var(--ht-brand-light); color: var(--ht-brand); }

/* Nút "Học tập": bỏ FAB nổi, thành 1 dòng như các mục khác (icon tròn nhỏ vẫn giữ màu thương hiệu) */
.ht-desktop .student-nav-item.raised {
    justify-content: flex-start;
    padding-bottom: 0;
}
.ht-desktop .nav-fab-btn {
    position: static;
    transform: none;
    width: 22px;
    height: 22px;
    border: none;
    box-shadow: none;
    flex-shrink: 0;
}
.ht-desktop .nav-fab-btn i { font-size: 12px; width: auto; }
.ht-desktop .nav-fab-label { font-size: 14.5px; color: inherit; }
.ht-desktop .student-nav-item.raised.active .nav-fab-label { color: var(--ht-brand); }

/* =========================================
   2. HEADER + VÙNG NỘI DUNG — dời sang phải sidebar, vùng đọc giữa có max-width
   ========================================= */
.ht-desktop .student-header {
    left: var(--ht-sidebar-w);
    width: auto;
    padding-top: 0;
}

.ht-desktop .student-header-content {
    padding-left: var(--ht-desk-gutter) !important;
    padding-right: var(--ht-desk-gutter) !important;
}

/* Tiêu đề header có max-width inline cho màn hình điện thoại */
.ht-desktop .student-header h5,
.ht-desktop .student-header .text-truncate { max-width: 560px !important; }

.ht-desktop .main-content {
    margin-left: var(--ht-sidebar-w);
    width: auto;
    padding-top: calc(var(--header-height) + 28px);
    padding-bottom: 48px;
    padding-left: var(--ht-desk-gutter);
    padding-right: var(--ht-desk-gutter);
}

/* Nút bấm có hiệu ứng :active co lại cho cảm ứng — trên desktop thêm con trỏ tay cho các thẻ bấm được */
.ht-desktop .list-row-ht,
.ht-desktop .chip-select,
.ht-desktop .pill-tab-btn { cursor: pointer; }

/* =========================================
   3. ĐĂNG NHẬP / ĐĂNG KÝ (Layout = null, body.ht-auth-page)
   Chia đôi màn hình: khung thương hiệu bên trái (_HtAuthBrand.cshtml), form bên phải trong .ht-auth-main
   (các khối con gom thành cột 400px). SweetAlert/modal gắn thẳng vào body, không bị ảnh hưởng.
   ========================================= */
.ht-desktop .ht-auth-page { display: flex !important; flex-direction: row !important; justify-content: stretch !important; padding: 0 !important; min-height: 100vh; }
.ht-desktop .ht-auth-main { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 48px 40px; }
.ht-desktop .ht-auth-main > :not(script) { width: 100%; max-width: 400px; margin-left: auto; margin-right: auto; }

.ht-desktop .ht-auth-brand.d-none { display: flex !important; flex: 1 1 560px; flex-direction: column; justify-content: space-between; gap: 40px; padding: 56px 64px; color: #fff;
    background: var(--ht-brand-strong) radial-gradient(circle at 85% 15%, rgba(255,255,255,.12) 0, rgba(255,255,255,0) 40%); }
.ht-desktop .ht-auth-brand-logo { display: flex; align-items: center; gap: 12px; }
.ht-desktop .ht-auth-brand-logo > span:last-child { display: flex; flex-direction: column; line-height: 1.35; }
.ht-desktop .ht-auth-brand-logo b { font-size: 16px; font-weight: 800; letter-spacing: .3px; }
.ht-desktop .ht-auth-brand-logo small { font-size: 13px; opacity: .85; }
.ht-desktop .ht-auth-brand-mark { width: 44px; height: 44px; border-radius: 12px; background: #fff; color: var(--ht-brand-strong); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; letter-spacing: .5px; }
.ht-desktop .ht-auth-brand-body { max-width: 460px; }
.ht-desktop .ht-auth-brand-body h2 { margin: 0 0 28px; font-size: 36px; line-height: 1.25; font-weight: 800; }
.ht-desktop .ht-auth-brand-body ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; font-size: 15px; }
.ht-desktop .ht-auth-brand-body li { display: flex; gap: 12px; align-items: flex-start; }
.ht-desktop .ht-auth-brand-body li i { flex: 0 0 32px; height: 32px; border-radius: 9px; background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; font-size: 16px; }
.ht-desktop .ht-auth-brand-foot { font-size: 13px; opacity: .8; }

/* Đầu form: thay tiêu đề kiểu điện thoại bằng tiêu đề lớn, ô nhập có nhãn */
.ht-desktop .ht-auth-mob-head { display: none !important; }
.ht-desktop .ht-auth-desk-head.d-none { display: block !important; margin-bottom: 24px; }
.ht-desktop .ht-auth-desk-head h1 { margin: 0 0 6px; font-size: 28px; font-weight: 800; color: var(--ht-text); }
.ht-desktop .ht-auth-desk-head p { margin: 0; color: var(--ht-text-secondary); font-size: 14px; }
.ht-desktop .ht-auth-page hr { border-color: #e2ddd7 !important; }
.ht-desktop .ht-auth-label.d-none { display: block !important; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: #57534e; }
.ht-desktop .ht-auth-page .form-control-lg { font-size: 15px; padding: 12px 14px; border-radius: 12px; }
.ht-desktop .ht-auth-page .btn-primary-custom { padding: 13px; border-radius: 12px; cursor: pointer; }
.ht-desktop .ht-auth-page .btn-outline-custom { padding: 13px; border-radius: 12px; background: #fff; }
.ht-desktop .ht-auth-page .btn-outline-custom:hover { border-color: #cfc9c2; color: var(--ht-text); }

/* Đăng ký: tiêu đề theo bước (JS đổi chữ), thanh 3 bước tô theo bước đang mở, mỗi bước là 1 thẻ trắng */
.ht-desktop .ht-auth-reg-head h5 { font-size: 26px; font-weight: 800; }
.ht-desktop .ht-auth-reg-head { margin-bottom: 8px !important; }
.ht-desktop .ht-auth-desk-sub.d-none { display: block !important; margin-bottom: 20px; color: var(--ht-text-secondary); font-size: 14px; }
.ht-desktop .ht-auth-steps.d-none { display: flex !important; align-items: center; gap: 8px; list-style: none; margin-bottom: 20px; padding: 0; font-size: 13px; font-weight: 600; color: var(--ht-text-muted); }
.ht-desktop .ht-auth-steps li[data-step] { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.ht-desktop .ht-auth-steps li[data-step] span { width: 26px; height: 26px; border-radius: 50%; background: #f0ede8; display: flex; align-items: center; justify-content: center; font-weight: 800; }
.ht-desktop .ht-auth-steps-line { flex: 1; min-width: 16px; height: 2px; background: #e2ddd7; }
.ht-desktop .ht-auth-page:has(#step1-phone.step-active) .ht-auth-steps [data-step="1"],
.ht-desktop .ht-auth-page:has(#step2-otp.step-active) .ht-auth-steps [data-step="2"],
.ht-desktop .ht-auth-page:has(#step3-info.step-active) .ht-auth-steps [data-step="3"] { color: var(--ht-brand-strong); font-weight: 700; }
.ht-desktop .ht-auth-page:has(#step1-phone.step-active) .ht-auth-steps [data-step="1"] span,
.ht-desktop .ht-auth-page:has(#step2-otp.step-active) .ht-auth-steps [data-step="2"] span,
.ht-desktop .ht-auth-page:has(#step3-info.step-active) .ht-auth-steps [data-step="3"] span { background: var(--ht-brand); color: #fff; }
/* Bước đã qua: xanh, có dấu tích */
.ht-desktop .ht-auth-page:has(#step2-otp.step-active) .ht-auth-steps [data-step="1"],
.ht-desktop .ht-auth-page:has(#step3-info.step-active) .ht-auth-steps [data-step="1"],
.ht-desktop .ht-auth-page:has(#step3-info.step-active) .ht-auth-steps [data-step="2"] { color: #2e7d32; }
.ht-desktop .ht-auth-page:has(#step2-otp.step-active) .ht-auth-steps [data-step="1"] span,
.ht-desktop .ht-auth-page:has(#step3-info.step-active) .ht-auth-steps [data-step="1"] span,
.ht-desktop .ht-auth-page:has(#step3-info.step-active) .ht-auth-steps [data-step="2"] span { background: #e8f5e9; color: transparent; position: relative; }
.ht-desktop .ht-auth-page:has(#step2-otp.step-active) .ht-auth-steps [data-step="1"] span::after,
.ht-desktop .ht-auth-page:has(#step3-info.step-active) .ht-auth-steps [data-step="1"] span::after,
.ht-desktop .ht-auth-page:has(#step3-info.step-active) .ht-auth-steps [data-step="2"] span::after { content: "\2713"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #2e7d32; }
.ht-desktop .ht-auth-page:has(#step2-otp.step-active) .ht-auth-steps-line:nth-child(2),
.ht-desktop .ht-auth-page:has(#step3-info.step-active) .ht-auth-steps-line { background: #a5d6a7; }
.ht-desktop .ht-auth-page .step-section.step-active { background: #fff; border: 1px solid var(--ht-desk-line); border-radius: 16px; padding: 24px; }

/* =========================================
   4. TRANG THI (BaiLam/Taking) — v2 theo mẫu thiết kế: thanh trên (tên bài, đồng hồ, Nộp bài),
   cột danh sách câu bên trái (tiến độ, đánh dấu), thẻ câu hỏi ở giữa, thanh chuyển câu dưới.
   Phần tử thêm (cột trái, tên bài, nút Nộp bài trên, nút đánh dấu) do ExamApp.desktop.mount() (student-exam.js)
   tạo, chỉ khi có .ht-desktop. Trang thi khóa chế độ lúc tải (HtDesktopLock).
   ========================================= */
.ht-desktop {
    --ht-exam-nav-w: 280px;
    --ht-exam-read-w: 860px;
    --ht-exam-gutter: max(40px, calc((100vw - var(--ht-exam-nav-w) - var(--ht-exam-read-w)) / 2));
}
/* Chiều cao thanh trên: chỉ trang thi (student-exam.css khai báo --header-height ở :root) */
.ht-desktop body:has(> .exam-header) { --header-height: 64px; }

/* Thanh trên */
.ht-desktop .exam-header { height: var(--header-height); padding: 0 24px; gap: 16px; box-shadow: none; border-bottom: 1px solid var(--ht-desk-line); }
.ht-desktop .exam-header > .d-flex { flex: 1; min-width: 0; flex-wrap: nowrap !important; gap: 16px; }
.ht-desktop #btnExit { width: 36px; height: 36px; flex-shrink: 0; margin: 0 !important; border: 1px solid var(--ht-desk-line) !important; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--ht-desk-text-2) !important; }
.ht-desktop #btnExit i { font-size: 15px !important; }
/* "CÂU HỎI n/N" -> thay bằng dòng "Câu n / N" dưới tên bài */
.ht-desktop .exam-header > .d-flex > .text-muted,
.ht-desktop .exam-header > .d-flex > .fw-bold.fs-5 { display: none !important; }
.ht-desktop .exam-desk-title { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.35; }
.ht-desktop .exam-desk-title b { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ht-desktop .exam-desk-title small { font-size: 12px; color: var(--ht-desk-text-3); font-variant-numeric: tabular-nums; }
.ht-desktop .exam-header .timer-badge { font-family: inherit; font-size: 16px; font-weight: 800; height: 38px; padding: 0 14px; border-radius: 10px; display: inline-flex; align-items: center; gap: 8px; background: var(--brand-bg-light); border: 1px solid var(--ht-desk-line); color: var(--text-color); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.ht-desktop .exam-header .timer-badge::before { content: "\F293"; font-family: "bootstrap-icons"; font-weight: 400; color: var(--ht-desk-text-3); font-size: 15px; } /* bi-clock */
.ht-desktop .exam-header .timer-badge.text-danger { background: var(--warning-tint) !important; border-color: #ffcc80; color: var(--danger-color) !important; }
.ht-desktop .exam-desk-submit-top { height: 40px; padding: 0 18px; font-size: 14px; border-radius: 10px !important; flex-shrink: 0; }

/* Cột trái thay cho nút "Xem lại" (modal) */
.ht-desktop #btnReview { display: none; }
.ht-desktop .exam-desk-nav {
    position: fixed; top: var(--header-height); bottom: 0; left: 0; width: var(--ht-exam-nav-w);
    padding: 20px 18px; background: var(--surface); border-right: 1px solid var(--ht-desk-line);
    overflow-y: auto; z-index: 999; display: flex; flex-direction: column; gap: 16px;
}
.ht-desktop .exam-desk-progress { display: flex; flex-direction: column; gap: 6px; }
.ht-desktop .exam-desk-progress-head { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; }
.ht-desktop .exam-desk-progress-head b { font-weight: 800; font-variant-numeric: tabular-nums; }
.ht-desktop .exam-desk-progress-bar { height: 6px; border-radius: 3px; background: #f0ede8; overflow: hidden; }
.ht-desktop .exam-desk-progress-bar span { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--success-color); transition: width .2s; }
.ht-desktop .exam-desk-nav-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--ht-desk-text-2); }
.ht-desktop .exam-desk-grid { max-height: none; overflow: visible; gap: 6px; padding: 4px; }
.ht-desktop .exam-desk-grid .review-item { position: relative; aspect-ratio: auto; height: 38px; border-radius: 8px; font-size: 13px; cursor: pointer; background: #fff; color: var(--ht-desk-text-2); border: 1px solid #d6d3d1; font-variant-numeric: tabular-nums; }
.ht-desktop .exam-desk-grid .review-item:hover { border-color: var(--text-color); }
.ht-desktop .exam-desk-grid .review-item.done { background: var(--text-color); border-color: var(--text-color); color: #fff; }
.ht-desktop .exam-desk-grid .review-item.current { border-width: 1px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand-color); }
.ht-desktop .exam-desk-grid .review-item.current:not(.done) { color: var(--brand-color); border-color: var(--brand-color); }
.ht-desktop .exam-desk-grid .review-item.flagged::after { content: ""; position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--warning-color); border: 2px solid #fff; }
.ht-desktop .exam-desk-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; color: var(--ht-desk-text-2); }
.ht-desktop .exam-desk-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.ht-desktop .exam-desk-key { width: 10px; height: 10px; border-radius: 3px; background: #fff; border: 1px solid #d6d3d1; display: inline-block; }
.ht-desktop .exam-desk-key.is-done { background: var(--text-color); border-color: var(--text-color); }
.ht-desktop .exam-desk-key.is-current { box-shadow: 0 0 0 2px var(--brand-color); border-color: #fff; }
.ht-desktop .exam-desk-key.is-flag { width: 8px; height: 8px; border-radius: 50%; border: none; background: var(--warning-color); }
.ht-desktop .exam-desk-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.ht-desktop .exam-desk-note { padding: 10px 12px; border-radius: 10px; background: var(--brand-bg-light); font-size: 12.5px; color: var(--ht-desk-text-2); }
.ht-desktop #btnDeskSubmit { height: 42px; border-radius: 10px !important; }

/* Vùng câu hỏi */
.ht-desktop .exam-body {
    margin-left: var(--ht-exam-nav-w);
    width: auto; /* .container-fluid đặt width 100% -> cộng margin-left là tràn ngang */
    padding-top: calc(var(--header-height) + 28px);
    padding-left: var(--ht-exam-gutter);
    padding-right: var(--ht-exam-gutter);
}
.ht-desktop .question-card { padding: 24px 28px; border-radius: 16px; border: 1px solid var(--ht-desk-line); box-shadow: none; min-height: 0; }
.ht-desktop .question-card > div:first-child > h5 { font-size: 16px; font-weight: 800; flex-shrink: 0; }
.ht-desktop .question-card > div:first-child > .badge { display: none; } /* "N câu" đã có ở thanh trên */
.ht-desktop .question-card .question-content.fs-5 { font-size: 17px !important; font-weight: 600; line-height: 1.6; }
.ht-desktop .exam-desk-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 1; margin-left: 12px; }
.ht-desktop .exam-desk-type { padding: 2px 8px; border-radius: 6px; background: #f5f3f0; font-size: 12px; font-weight: 600; color: var(--ht-desk-text-2); }
.ht-desktop .exam-desk-flag { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; cursor: pointer; background: #fff; color: var(--ht-desk-text-2); border: 1px dashed #d6d3d1; }
.ht-desktop .exam-desk-flag:hover { border-color: var(--warning-color); color: #b45309; }
.ht-desktop .exam-desk-flag[aria-pressed="true"] { background: var(--warning-tint); color: #b45309; border: 1px solid #ffcc80; }

/* Đề bài chung (bài nghe/đọc) */
.ht-desktop .parent-content { background: var(--accent-tint) !important; border: none !important; border-radius: 16px !important; padding: 16px 20px !important; font-size: 14.5px; }
.ht-desktop .parent-content > .fw-bold.text-primary { font-size: 11.5px; font-weight: 800; letter-spacing: .5px; color: #0d47a1 !important; }

/* Trắc nghiệm: 2 cột, chữ cái A/B/C… trước mỗi phương án (span đầu tiên trong nút vốn để trống) */
.ht-desktop #answerArea:has(> .opt-btn) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; counter-reset: htopt; }
.ht-desktop #answerArea > .opt-btn { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 14px 16px; border-radius: 12px; font-size: 16px; counter-increment: htopt; }
.ht-desktop #answerArea > .opt-btn > span:first-child { margin: 0 !important; width: 28px; height: 28px; border-radius: 8px; background: #f5f3f0; color: var(--ht-desk-text-2); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.ht-desktop #answerArea > .opt-btn > span:first-child::before { content: counter(htopt, upper-alpha); }
.ht-desktop #answerArea > .opt-btn.selected { background: #fff6f6; color: var(--text-color); font-weight: 600; }
.ht-desktop #answerArea > .opt-btn.selected > span:first-child { background: var(--brand-color); color: #fff; }
.ht-desktop #answerArea > .opt-btn > img { flex-basis: 100%; }
.ht-desktop #answerArea .input-group { max-width: 420px; }
.ht-desktop #answerArea .input-group-text { background: var(--brand-bg-light); font-weight: 700; color: var(--ht-desk-text-2); }
.ht-desktop #answerArea .form-control { font-size: 16px; }

/* Thanh chuyển câu (cố định dưới, thẳng cột với thẻ câu hỏi) */
.ht-desktop .exam-footer {
    left: var(--ht-exam-nav-w);
    padding: 14px var(--ht-exam-gutter);
    box-shadow: none !important; /* .shadow-lg (Bootstrap, !important) đổ bóng lấn sang cột trái */
    justify-content: space-between;
    border-top: 1px solid var(--ht-desk-line);
}
.ht-desktop .exam-footer #btnNext, .ht-desktop .exam-footer #btnSubmit { flex: 0 0 auto; }
.ht-desktop .exam-footer .btn { height: 42px; padding: 0 20px !important; border-radius: 10px !important; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.ht-desktop .exam-footer #btnPrev { background: #fff !important; border: 1px solid #e2ddd7 !important; color: var(--ht-desk-text-2) !important; }
.ht-desktop .exam-desk-hint { flex: 1; text-align: center; font-size: 12.5px; color: var(--ht-desk-text-3); }
.ht-desktop .exam-desk-hint kbd { font-family: inherit; font-size: 11.5px; padding: 1px 6px; border-radius: 5px; background: #fff; color: var(--ht-desk-text-2); border: 1px solid #d6d3d1; box-shadow: none; }

/* Nút "Chụp ảnh" (input capture=environment) vô nghĩa trên máy tính — chỉ giữ "Thư viện" */
.ht-desktop label:has(> input[capture]) { display: none !important; }

/* =========================================
   5. TỔNG QUAN (Dashboard) — 2 cột: nhiệm vụ + tổng quan lớp | kết quả gần đây
   .dash-grid/.dash-col-* là div trần trong Dashboard/Index.cshtml, không có CSS trên điện thoại.
   Trang này ẩn header nên được dùng vùng đọc rộng hơn các trang khác.
   ========================================= */
/* Đặt ở <html> (không phải .main-content) để header cũng thẳng hàng; :has tự cập nhật sau AJAX-swap */
.ht-desktop:has(.dash-grid) {
    --ht-read-w: 1120px;
    --ht-desk-gutter: max(32px, calc((100vw - var(--ht-sidebar-w) - var(--ht-read-w)) / 2));
}

.ht-desktop .dash-grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 28px;
    align-items: start;
}

/* =========================================
   6. BẢNG ĐIỂM (TaiKhoan/TienDoBangDiem) — markup đã là bảng (hàng flex), desktop chỉ nới rộng và tăng cỡ chữ
   ========================================= */
.ht-desktop .score-table-header,
.ht-desktop .score-table-row {
    font-size: 14.5px;
    font-variant-numeric: tabular-nums;
}
.ht-desktop .score-table-header {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 4px 16px 12px;
}
.ht-desktop .score-table-row {
    padding: 14px 16px;
    border-radius: 10px;
}
.ht-desktop .score-table-row:hover { background: var(--ht-page-bg); }
.ht-desktop .score-table-col-name { flex: 3; }
.ht-desktop .score-table-col-total { font-size: 15.5px; }

/* =========================================
   7. LỊCH HỌC — lưới tuần phase 2 đã thay bằng mẫu thiết kế v2, xem mục 13.
   ========================================= */

/* =========================================
   8. NỀN TẢNG DESKTOP v2 (theo mẫu thiết kế đã duyệt): phông chữ, menu trái có đầu/cuối
   ========================================= */
/* Phông chỉ tải khi là desktop (_HtDesktopDetect); chưa tải xong thì dùng phông hệ thống */
.ht-desktop body { font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; }
.ht-desktop { --ht-desk-line: #ebe7e2; --ht-desk-text-2: #57534e; --ht-desk-text-3: #6f6862; }

.ht-desktop .student-nav { gap: 2px; padding: 20px 14px; }
.ht-desktop .student-nav-item { height: 42px; font-size: 14px; color: var(--ht-desk-text-2); }

.ht-desktop .ht-desk-nav-head.d-none { display: flex !important; flex-direction: column; gap: 16px; margin-bottom: 14px; }
.ht-desktop .ht-desk-brand,
.ht-desktop .ht-desk-me { display: flex; align-items: center; gap: 10px; }
.ht-desktop .ht-desk-brand { padding: 0 6px; }
.ht-desktop .ht-desk-brand > span:nth-child(2),
.ht-desktop .ht-desk-me > span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ht-desktop .ht-desk-brand small { font-size: 12px; color: var(--ht-desk-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Tên và lớp được xuống tối đa 2 dòng (tên lớp thường dài), đủ chữ xem ở title */
.ht-desktop .ht-desk-me b,
.ht-desktop .ht-desk-me small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.ht-desktop .ht-desk-me b { font-size: 14px; line-height: 1.3; }
.ht-desktop .ht-desk-me small { font-size: 12px; line-height: 1.35; color: var(--ht-desk-text-3); margin-top: 2px; }
.ht-desktop .ht-desk-logo { width: 36px; height: 36px; border-radius: 10px; background: var(--ht-brand); color: #fff; font-weight: 800; font-size: 12.5px; letter-spacing: .5px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ht-desktop .ht-desk-me { padding: 10px; border-radius: 12px; background: var(--ht-page-bg); }
.ht-desktop .ht-desk-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--ht-brand-light); color: var(--ht-brand); font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* Số bài cần làm ở mục Học tập */
.ht-desktop .ht-desk-count.d-none { display: inline-flex !important; margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 11px; background: var(--ht-brand); color: #fff; font-size: 12px; font-weight: 700; align-items: center; justify-content: center; }
.ht-desktop .ht-desk-count.is-zero { display: none !important; }

.ht-desktop .ht-desk-nav-foot.d-none { display: flex !important; flex-direction: column; gap: 2px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--ht-desk-line); }
.ht-desktop .ht-desk-nav-foot a,
.ht-desktop .ht-desk-nav-foot button { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px; border-radius: 12px; color: var(--ht-desk-text-2); font: inherit; font-size: 14px; font-weight: 600; background: none; border: none; width: 100%; cursor: pointer; text-align: left; }
.ht-desktop .ht-desk-nav-foot a:hover,
.ht-desktop .ht-desk-nav-foot button:hover { background: var(--ht-border-light); color: var(--ht-text); }
.ht-desktop .ht-desk-nav-foot i { width: 22px; text-align: center; font-size: 1.05rem; }
.ht-desktop .ht-desk-nav-foot form { margin: 0; }
.ht-desktop .ht-desk-nav-foot a.active,
.ht-desktop .ht-desk-nav-foot a.active:hover { background: var(--ht-brand-light); color: var(--ht-brand); }

/* Nút thu gọn menu */
.ht-desktop .ht-desk-collapse { margin-left: auto; width: 30px; height: 30px; flex-shrink: 0; border: none; border-radius: 8px; background: none; color: var(--ht-desk-text-3); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ht-desktop .ht-desk-collapse:hover { background: var(--ht-border-light); color: var(--ht-text); }
.ht-desktop .ht-desk-collapse:focus-visible { outline: 2px solid var(--ht-accent); outline-offset: 1px; }

/* Menu thu nhỏ thành icon (html.ht-nav-mini, gắn ở _HtDesktopDetect + student-desktop.js) */
.ht-desktop.ht-nav-mini { --ht-sidebar-w: 76px; }
.ht-desktop.ht-nav-mini .student-nav { padding: 16px 10px; }
.ht-desktop.ht-nav-mini .ht-desk-brand { flex-direction: column; gap: 8px; padding: 0; }
.ht-desktop.ht-nav-mini .ht-desk-brand > span:nth-child(2),
.ht-desktop.ht-nav-mini .ht-desk-me > span:last-child,
.ht-desktop.ht-nav-mini .ht-desk-nav-foot span,
.ht-desktop.ht-nav-mini .student-nav-item > span:not(.nav-fab-btn):not(.ht-desk-count) { display: none !important; }
.ht-desktop.ht-nav-mini .ht-desk-collapse { margin-left: 0; }
.ht-desktop.ht-nav-mini .ht-desk-collapse i { transform: rotate(180deg); }
.ht-desktop.ht-nav-mini .ht-desk-me { justify-content: center; padding: 4px; background: none; }
.ht-desktop.ht-nav-mini .student-nav-item,
.ht-desktop.ht-nav-mini .ht-desk-nav-foot a,
.ht-desktop.ht-nav-mini .ht-desk-nav-foot button { justify-content: center; padding: 0; position: relative; }
.ht-desktop.ht-nav-mini .ht-desk-count.d-none { position: absolute; top: 3px; right: 6px; margin: 0; min-width: 18px; height: 18px; padding: 0 4px; font-size: 10.5px; border-radius: 9px; }

/* Hiệu ứng trượt trang là của điện thoại (student-app.css mục 11) — trên máy tính menu trái cũng bị trượt theo,
   nên tắt hẳn: đổi trang tức thời. Áp cho cả đổi trang AJAX lẫn đổi trang thường (nút chuông, link trang con). */
html.ht-desktop::view-transition-old(root),
html.ht-desktop::view-transition-new(root),
html.ht-desktop.vt-forward::view-transition-old(root),
html.ht-desktop.vt-forward::view-transition-new(root),
html.ht-desktop.vt-back::view-transition-old(root),
html.ht-desktop.vt-back::view-transition-new(root) { animation: none !important; }

/* =========================================
   9. TỔNG QUAN DESKTOP (#deskDash, Dashboard/_DesktopDashboard.cshtml, lớp dd-*)
   Có .ht-desktop là hiện #deskDash (khung chờ _HtDeskSkeleton, rồi nội dung nạp về) và ẩn ngay phần điện thoại —
   không để giao diện app nháy lên trong lúc chờ AJAX. Nạp lỗi/rỗng (data-desk-state error/empty) thì trả lại phần điện thoại.
   ========================================= */
.ht-desktop #deskDash[hidden]:not([data-desk-state="error"]):not([data-desk-state="empty"]) { display: block !important; }
.ht-desktop .main-content:has(> #deskDash:not([data-desk-state="error"]):not([data-desk-state="empty"])) > :not(#deskDash):not(style):not(script) { display: none !important; }

.ht-desktop .dd { display: flex; flex-direction: column; gap: 22px; }
.ht-desktop .dd-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.ht-desktop .dd-title { margin: 0 0 4px; font-size: 26px; font-weight: 800; line-height: 1.2; color: var(--ht-text); }
.ht-desktop .dd-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--ht-desk-text-3); }
.ht-desktop .dd-pill { padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.ht-desktop .dd-pill-brand { background: var(--ht-brand-light); color: var(--ht-brand-strong); }
.ht-desktop .dd-pill-ok { background: var(--ht-success-tint); color: var(--ht-success-dark); }
.ht-desktop .dd-pill-bad { background: var(--ht-danger-tint); color: var(--ht-danger); }
.ht-desktop .dd-bell { position: relative; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--ht-desk-line); background: var(--ht-surface); color: var(--ht-desk-text-2); display: flex; align-items: center; justify-content: center; }
.ht-desktop .dd-bell:hover { color: var(--ht-text); }
.ht-desktop .dd-bell-badge { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 4px; box-sizing: border-box; border-radius: 10px; background: var(--ht-brand); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid var(--ht-page-bg); }
.ht-desktop .dd-bell-badge[hidden] { display: none !important; }

.ht-desktop .dd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.ht-desktop .dd-span2 { grid-column: span 2; }
.ht-desktop .dd-card { background: var(--ht-surface); border: 1px solid var(--ht-desk-line); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ht-desktop .dd-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ht-desktop .dd-card-head h2 { margin: 0; font-size: 16px; font-weight: 800; color: var(--ht-text); }
.ht-desktop .dd-card-head a { font-size: 13px; font-weight: 600; color: var(--ht-accent); }
.ht-desktop .dd-card-head a:hover { text-decoration: underline; }
.ht-desktop .dd-muted { color: var(--ht-desk-text-3); font-weight: 500; }
.ht-desktop .dd-tabular { font-variant-numeric: tabular-nums; }
.ht-desktop .dd-empty { color: var(--ht-desk-text-3); font-size: 13.5px; padding: 8px 0; }
.ht-desktop .dd-empty .bi { color: var(--ht-success); margin-right: 4px; }

.ht-desktop .dd-sll { flex-direction: row; align-items: center; gap: 14px; padding: 14px 20px; color: var(--ht-text); }
.ht-desktop .dd-sll > .bi:first-child { font-size: 20px; color: var(--ht-accent); }
.ht-desktop .dd-sll-text { flex: 1; display: flex; flex-direction: column; font-size: 13px; color: var(--ht-desk-text-3); }
.ht-desktop .dd-sll-text b { font-size: 14.5px; color: var(--ht-text); }

/* Cần làm */
.ht-desktop .dd-todo { display: flex; flex-direction: column; }
.ht-desktop .dd-todo-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--ht-border-light); }
.ht-desktop .dd-badge { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 800; background: var(--ht-border-light); color: var(--ht-desk-text-2); font-variant-numeric: tabular-nums; }
.ht-desktop .dd-badge.is-doing { background: var(--ht-accent-tint); color: #0d47a1; }
.ht-desktop .dd-badge.is-speak { background: var(--ht-brand-light); color: var(--ht-brand-strong); }
.ht-desktop .dd-todo-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ht-desktop .dd-todo-body b { font-size: 14.5px; color: var(--ht-text); }
.ht-desktop .dd-todo-body span { font-size: 12.5px; color: var(--ht-desk-text-3); }
.ht-desktop .dd-todo-due { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 110px; }
.ht-desktop .dd-todo-due b { font-size: 12.5px; color: var(--ht-desk-text-2); }
.ht-desktop .dd-todo-due b.is-urgent { color: var(--ht-warning-dark); }
.ht-desktop .dd-todo-due span { font-size: 12px; color: var(--ht-desk-text-3); font-variant-numeric: tabular-nums; }
.ht-desktop .dd-btn { height: 36px; padding: 0 16px; border-radius: 10px; font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; flex-shrink: 0; }
.ht-desktop .dd-btn-primary { background: var(--ht-brand); color: #fff; }
.ht-desktop .dd-btn-primary:hover { background: var(--ht-brand-dark); color: #fff; }
.ht-desktop .dd-btn-soft { background: var(--ht-accent-tint); color: #0d47a1; }
.ht-desktop .dd-btn-soft:hover { background: #d0e6fb; color: #0d47a1; }

/* Buổi học tiếp theo + tuần */
.ht-desktop .dd-next { display: flex; gap: 14px; align-items: center; }
.ht-desktop .dd-next-date { width: 64px; height: 68px; flex-shrink: 0; border-radius: 12px; background: var(--ht-accent-tint); color: #0d47a1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ht-desktop .dd-next-date span { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.ht-desktop .dd-next-date b { font-size: 26px; font-weight: 800; line-height: 1; }
.ht-desktop .dd-next-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 13px; color: var(--ht-desk-text-2); }
.ht-desktop .dd-next-info b { font-size: 15px; color: var(--ht-text); font-variant-numeric: tabular-nums; }
.ht-desktop .dd-next-note { background: var(--ht-page-bg); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--ht-desk-text-2); white-space: pre-line; }
.ht-desktop .dd-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.ht-desktop .dd-week-day { height: 56px; border-radius: 10px; background: var(--ht-page-bg); color: var(--ht-text); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.ht-desktop .dd-week-day span { font-size: 10.5px; font-weight: 700; }
.ht-desktop .dd-week-day b { font-size: 15px; font-weight: 800; }
.ht-desktop .dd-week-day i { width: 6px; height: 6px; border-radius: 50%; }
.ht-desktop .dd-week-day i.has-class { background: var(--ht-accent); }
.ht-desktop .dd-week-day.is-past { color: #8a827b; }
.ht-desktop .dd-week-day.is-today { box-shadow: inset 0 0 0 2px var(--ht-brand); color: var(--ht-brand-strong); background: var(--ht-surface); }
.ht-desktop .dd-week-day.is-next { background: var(--ht-accent-tint); color: #0d47a1; }

/* Chỉ số */
.ht-desktop .dd-kpis { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.ht-desktop .dd-kpi { gap: 6px; padding: 14px 16px; border-radius: 14px; }
.ht-desktop .dd-kpi-label { font-size: 12.5px; font-weight: 600; color: var(--ht-desk-text-3); }
.ht-desktop .dd-kpi-value { font-size: 22px; font-weight: 800; color: var(--ht-text); font-variant-numeric: tabular-nums; }
.ht-desktop .dd-kpi-value small { font-size: 13px; font-weight: 600; color: var(--ht-desk-text-3); }
.ht-desktop .dd-kpi-value.is-ok { color: var(--ht-success-dark); font-size: 17px; }
.ht-desktop .dd-kpi-value.is-bad { color: var(--ht-danger); font-size: 17px; }
.ht-desktop .dd-kpi-note { font-size: 12.5px; color: var(--ht-desk-text-3); }
.ht-desktop .dd-kpi-note.is-up { color: var(--ht-success-dark); font-weight: 600; }
.ht-desktop .dd-kpi-note.is-down { color: var(--ht-warning-dark); font-weight: 600; }
.ht-desktop .dd-bar { display: block; height: 6px; border-radius: 3px; background: var(--ht-border); overflow: hidden; }
.ht-desktop .dd-bar > span { display: block; height: 100%; border-radius: 3px; }
.ht-desktop .dd-bar .is-ok { background: var(--ht-success); }
.ht-desktop .dd-bar .is-accent { background: var(--ht-accent); }

/* Biểu đồ điểm: cột cao tối đa 140px = 10 điểm (14px / điểm, đặt trong markup) */
.ht-desktop .dd-chart { display: flex; gap: 10px; }
.ht-desktop .dd-chart-y { display: flex; flex-direction: column; justify-content: space-between; height: 140px; margin-top: 20px; font-size: 11px; color: var(--ht-desk-text-3); font-variant-numeric: tabular-nums; }
.ht-desktop .dd-chart-y span { line-height: 0; }
.ht-desktop .dd-chart-plot { flex: 1; min-width: 0; }
.ht-desktop .dd-chart-bars { display: flex; align-items: flex-end; gap: 10px; height: 160px; border-bottom: 1px solid var(--ht-desk-line);
    background: linear-gradient(var(--ht-desk-line), var(--ht-desk-line)) 0 20px / 100% 1px no-repeat, linear-gradient(var(--ht-desk-line), var(--ht-desk-line)) 0 90px / 100% 1px no-repeat; }
.ht-desktop .dd-chart-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ht-desktop .dd-chart-val { font-size: 11.5px; font-weight: 700; color: var(--ht-text); font-variant-numeric: tabular-nums; }
.ht-desktop .dd-chart-bar { width: 100%; max-width: 34px; border-radius: 6px 6px 0 0; }
.ht-desktop .dd-chart-bar.is-high { background: var(--ht-success); }
.ht-desktop .dd-chart-bar.is-mid { background: var(--ht-accent); }
.ht-desktop .dd-chart-bar.is-low { background: var(--ht-warning); }
.ht-desktop .dd-chart-x { display: flex; gap: 10px; margin-top: 6px; }
.ht-desktop .dd-chart-x span { flex: 1; min-width: 0; text-align: center; font-size: 11px; color: var(--ht-desk-text-3); font-variant-numeric: tabular-nums; }

/* Chuyên cần từng buổi */
.ht-desktop .dd-sessions { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.ht-desktop .dd-session { height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--ht-border); color: var(--ht-desk-text-3); }
.ht-desktop .dd-session.is-ok { background: var(--ht-success); color: #fff; }
.ht-desktop .dd-session.is-bad { background: var(--ht-danger); color: #fff; }
.ht-desktop .dd-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--ht-desk-text-2); }
.ht-desktop .dd-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ht-desktop .dd-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--ht-border); border: 1px solid #d6d3d1; }
.ht-desktop .dd-legend i.is-ok { background: var(--ht-success); border-color: var(--ht-success); }
.ht-desktop .dd-legend i.is-bad { background: var(--ht-danger); border-color: var(--ht-danger); }

/* Bảng kết quả */
.ht-desktop .dd-table { display: flex; flex-direction: column; }
.ht-desktop .dd-tr { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3fr); gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--ht-border-light); font-size: 13.5px; }
.ht-desktop .dd-th { padding-top: 0; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--ht-desk-text-3); border-bottom-color: var(--ht-desk-line); }
.ht-desktop .dd-num { text-align: right; font-variant-numeric: tabular-nums; }
.ht-desktop .dd-score { font-weight: 800; color: var(--ht-success-dark); }
.ht-desktop .dd-note { color: var(--ht-desk-text-2); font-size: 13px; }
.ht-desktop .dd-strong-link { font-weight: 700; color: var(--ht-text); }
.ht-desktop .dd-strong-link:hover { color: var(--ht-accent); text-decoration: underline; }

/* Thông báo */
.ht-desktop .dd-notices { display: flex; flex-direction: column; gap: 12px; }
.ht-desktop .dd-notice { display: flex; gap: 10px; }
.ht-desktop .dd-notice > i { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex-shrink: 0; background: #d6d3d1; }
.ht-desktop .dd-notice.is-unread > i { background: var(--ht-brand); }
.ht-desktop .dd-notice > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12.5px; }
.ht-desktop .dd-notice b { font-size: 13.5px; color: var(--ht-text); }

/* =========================================
   10. HỌC TẬP DESKTOP (BaiLam/Index.cshtml: .desk-bt) — bảng bài tập + khung chi tiết (trang Intro nạp vào)
   ========================================= */
.ht-desktop:has(.desk-bt) {
    --ht-read-w: 1120px;
    --ht-desk-gutter: max(32px, calc((100vw - var(--ht-sidebar-w) - var(--ht-read-w)) / 2));
}
.ht-desktop .desk-bt.d-none { display: block !important; }
.ht-desktop #panel-baitap > .card-ht,
.ht-desktop .chip-select-auto[data-tab-group="hocTap"] { display: none !important; }

.ht-desktop .desk-bt-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ht-desktop .desk-bt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ht-desktop .desk-chip { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid #e7e5e4; background: var(--ht-surface); color: var(--ht-desk-text-2); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.ht-desktop .desk-chip span { font-variant-numeric: tabular-nums; opacity: .8; }
.ht-desktop .desk-chip:hover { border-color: #d6d3d1; color: var(--ht-text); }
.ht-desktop .desk-chip[aria-pressed="true"] { background: var(--ht-text); border-color: var(--ht-text); color: #fff; }
.ht-desktop .desk-bt-search { display: flex; align-items: center; gap: 8px; height: 38px; width: 260px; box-sizing: border-box; padding: 0 12px; border-radius: 10px; border: 1px solid #e7e5e4; background: var(--ht-surface); color: var(--ht-desk-text-3); margin: 0; }
.ht-desktop .desk-bt-search input { border: none; outline: none; background: transparent; font: inherit; font-size: 13.5px; color: var(--ht-text); flex: 1; min-width: 0; }
.ht-desktop .desk-bt-search:focus-within { border-color: var(--ht-accent); }

.ht-desktop .desk-bt-body { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.ht-desktop .desk-bt-list { flex: 3 1 480px; min-width: 0; background: var(--ht-surface); border: 1px solid var(--ht-desk-line); border-radius: 16px; overflow: hidden; }
.ht-desktop .desk-bt-row { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1.4fr); gap: 12px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--ht-border-light); }
.ht-desktop .desk-bt-row:last-of-type { border-bottom: none; }
.ht-desktop .desk-bt-row[data-desk-status]:not(.is-disabled) { cursor: pointer; }
.ht-desktop .desk-bt-row[data-desk-status]:not(.is-disabled):hover { background: #fcfaf8; }
.ht-desktop .desk-bt-row.is-selected { background: #fff6f6 !important; box-shadow: inset 3px 0 0 var(--ht-brand); }
.ht-desktop .desk-bt-row.is-disabled { opacity: .6; }
.ht-desktop .desk-bt-head { padding-top: 12px; padding-bottom: 12px; background: #fcfbf9; border-bottom-color: var(--ht-desk-line); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--ht-desk-text-3); }
.ht-desktop .desk-bt-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ht-desktop .desk-bt-title b,
.ht-desktop .desk-bt-open { font-weight: 700; font-size: 14px; color: var(--ht-text); }
/* Nút tiêu đề phủ cả dòng (dòng bấm được bằng chuột lẫn bàn phím); link "Xem kết quả" nằm trên lớp phủ */
.ht-desktop .desk-bt-open { background: none; border: none; padding: 0; font-family: inherit; text-align: left; cursor: pointer; }
.ht-desktop .desk-bt-open::after { content: ""; position: absolute; inset: 0; }
.ht-desktop .desk-bt-open:focus-visible { outline: none; }
.ht-desktop .desk-bt-row:has(.desk-bt-open:focus-visible) { box-shadow: inset 0 0 0 2px var(--ht-accent); }
.ht-desktop .desk-bt-title small,
.ht-desktop .desk-bt-due small { font-size: 12px; color: var(--ht-desk-text-3); }
.ht-desktop .desk-bt-due { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--ht-text); font-variant-numeric: tabular-nums; }
.ht-desktop .desk-bt-due small.is-urgent { color: var(--ht-warning-dark); font-weight: 700; }
.ht-desktop .desk-num { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.ht-desktop .desk-score { font-size: 14.5px; font-weight: 800; color: var(--ht-success-dark); font-variant-numeric: tabular-nums; }
.ht-desktop .desk-muted { color: var(--ht-desk-text-3); }
.ht-desktop .desk-bt-result { position: relative; z-index: 1; font-size: 12.5px; font-weight: 700; color: var(--ht-accent); }
.ht-desktop .desk-bt-result:hover { text-decoration: underline; }
.ht-desktop .desk-bt-empty { padding: 40px 18px; text-align: center; color: var(--ht-desk-text-3); }
.ht-desktop .desk-bt-empty[hidden] { display: none !important; }

/* Khung chi tiết: nội dung trang Intro (vốn là giao diện điện thoại, vừa khít cột ~380px) */
.ht-desktop .desk-bt-detail { flex: 2 1 340px; min-width: 0; background: var(--ht-surface); border: 1px solid var(--ht-desk-line); border-radius: 16px; padding: 22px; min-height: 240px; transition: opacity .15s; }
.ht-desktop .desk-bt-detail.is-loading { opacity: .5; }
.ht-desktop .desk-bt-placeholder { color: var(--ht-desk-text-3); font-size: 13.5px; padding: 30px 6px; text-align: center; }
.ht-desktop .desk-bt-detail-title { margin: 0 0 6px; font-size: 19px; font-weight: 800; line-height: 1.3; color: var(--ht-text); text-align: center; }
.ht-desktop .desk-bt-detail-body .card-ht { box-shadow: none; border: 1px solid var(--ht-border); }
.ht-desktop .desk-bt-detail-body .save-bar-ht { margin-top: 16px; }
.ht-desktop .desk-bt-detail-body a[href^="javascript:history.back"],
.ht-desktop .desk-bt-detail-body a.btn-ht-ghost[href$="/Student/BaiLam"] { display: none !important; }

/* Tài liệu: 2 cột */
.ht-desktop #panel-tailieu:not(.d-none) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; }
.ht-desktop #panel-tailieu > .position-relative,
.ht-desktop #panel-tailieu > .empty-state-ht { grid-column: 1 / -1; }

/* =========================================
   11. KẾT QUẢ BÀI LÀM DESKTOP (BaiLam/Result.cshtml: .kq-*) — tóm tắt + lưới câu bên trái, chi tiết bên phải
   ========================================= */
.ht-desktop:has(.kq-layout) {
    --ht-read-w: 1120px;
    --ht-desk-gutter: max(32px, calc((100vw - var(--ht-sidebar-w) - var(--ht-read-w)) / 2));
}
.ht-desktop .kq-head.d-none { display: flex !important; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.ht-desktop .kq-title { margin: 0 0 6px; font-size: 26px; font-weight: 800; line-height: 1.25; color: var(--ht-text); }
.ht-desktop .kq-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ht-desk-text-3); }
.ht-desktop .kq-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.ht-desktop .kq-pill-ok { background: #e8f5e9; color: var(--ht-success-dark); }
.ht-desktop .kq-pill-wait { background: #fff3e0; color: var(--ht-warning-dark); }
.ht-desktop .kq-pill-late { background: #ffebee; color: #c62828; }
.ht-desktop .kq-head-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ht-desktop .kq-btn { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid #e2ddd7; background: var(--ht-surface); color: var(--ht-desk-text-2); font-weight: 700; font-size: 13.5px; text-decoration: none; }
.ht-desktop .kq-btn:hover { border-color: #cfc9c2; color: var(--ht-text); text-decoration: none; }
.ht-desktop .kq-btn-primary { background: var(--ht-brand); border-color: var(--ht-brand); color: #fff; }
.ht-desktop .kq-btn-primary:hover { background: var(--ht-brand-strong); color: #fff; }

.ht-desktop .kq-layout { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.ht-desktop .kq-aside.d-none { display: flex !important; flex-direction: column; gap: 16px; flex: 0 1 300px; min-width: 260px; position: sticky; top: calc(var(--header-height) + 20px); }
.ht-desktop .kq-main { flex: 1 1 520px; min-width: 0; }
.ht-desktop .kq-mobile-score { display: none !important; }

.ht-desktop .kq-card { background: var(--ht-surface); border: 1px solid var(--ht-desk-line); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.ht-desktop .kq-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--ht-desk-text-3); }
.ht-desktop .kq-score { display: flex; align-items: baseline; gap: 4px; line-height: 1; }
.ht-desktop .kq-score b { font-size: 48px; font-weight: 800; color: var(--ht-brand); font-variant-numeric: tabular-nums; }
.ht-desktop .kq-score span { font-size: 18px; font-weight: 700; color: var(--ht-desk-text-3); }
.ht-desktop .kq-sub { font-size: 12.5px; color: var(--ht-desk-text-3); }
.ht-desktop .kq-facts { display: flex; gap: 12px; margin: 0; padding-top: 12px; border-top: 1px solid var(--ht-border-light); }
.ht-desktop .kq-facts > div { flex: 1; }
.ht-desktop .kq-facts dt { font-size: 12px; font-weight: 600; color: var(--ht-desk-text-3); }
.ht-desktop .kq-facts dd { margin: 0; font-size: 15px; font-weight: 800; color: var(--ht-text); font-variant-numeric: tabular-nums; }
.ht-desktop .kq-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ht-desktop .kq-count { display: flex; flex-direction: column; align-items: center; padding: 8px 2px; border-radius: 10px; font-size: 11.5px; font-weight: 600; }
.ht-desktop .kq-count b { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ht-desktop .kq-count.is-dung { background: #e8f5e9; color: var(--ht-success-dark); }
.ht-desktop .kq-count.is-motphan { background: #fff3e0; color: var(--ht-warning-dark); }
.ht-desktop .kq-count.is-sai { background: #ffebee; color: #c62828; }
.ht-desktop .kq-count.is-chualam { background: #f5f5f4; color: var(--ht-desk-text-2); }

.ht-desktop .kq-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.ht-desktop .kq-cell { display: flex; align-items: center; justify-content: center; height: 34px; border-radius: 8px; font-size: 13px; font-weight: 700; text-decoration: none; font-variant-numeric: tabular-nums; border: 1px solid transparent; }
.ht-desktop .kq-cell:hover { text-decoration: none; filter: brightness(.95); }
.ht-desktop .kq-cell:focus-visible { outline: 2px solid var(--ht-accent); outline-offset: 1px; }
.ht-desktop .kq-cell.is-dung { background: #e8f5e9; color: var(--ht-success-dark); }
.ht-desktop .kq-cell.is-motphan { background: #fff3e0; color: var(--ht-warning-dark); }
.ht-desktop .kq-cell.is-sai { background: #ffebee; color: #c62828; }
.ht-desktop .kq-cell.is-chualam { background: var(--ht-surface); color: var(--ht-desk-text-3); border-color: #e2ddd7; border-style: dashed; }
.ht-desktop .kq-cell.is-chocham { background: #e3f2fd; color: #1565c0; }
.ht-desktop .kq-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; color: var(--ht-desk-text-3); }
.ht-desktop .kq-legend span { display: inline-flex; align-items: center; gap: 5px; }
.ht-desktop .kq-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.ht-desktop .kq-legend i.is-dung { background: #66bb6a; }
.ht-desktop .kq-legend i.is-motphan { background: #ffa726; }
.ht-desktop .kq-legend i.is-sai { background: #ef5350; }
.ht-desktop .kq-legend i.is-chualam { background: #fff; border: 1px dashed #a8a29e; }
.ht-desktop .kq-legend i.is-chocham { background: #64b5f6; }

.ht-desktop .kq-filter.d-none { display: flex !important; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.ht-desktop .kq-filter-empty { padding: 32px 18px; text-align: center; color: var(--ht-desk-text-3); background: var(--ht-surface); border: 1px solid var(--ht-desk-line); border-radius: 16px; }
.ht-desktop .kq-filter-empty[hidden],
.ht-desktop .kq-q[hidden],
.ht-desktop .kq-group[hidden] { display: none !important; }
.ht-desktop .kq-q { scroll-margin-top: calc(var(--header-height) + 16px); }
.ht-desktop .kq-q:target { box-shadow: 0 0 0 2px var(--ht-accent), var(--shadow-card) !important; }

/* =========================================
   12. TIẾN ĐỘ DESKTOP (TaiKhoan/TienDo.cshtml: .td-*) — gộp 4 trang Tiến độ: danh sách lớp trái, tab bên phải
   ========================================= */
.ht-desktop:has(.td-desk) {
    --ht-read-w: 1120px;
    --ht-desk-gutter: max(32px, calc((100vw - var(--ht-sidebar-w) - var(--ht-read-w)) / 2));
}
.ht-desktop .main-content:has(> .td-desk) > :not(.td-desk) { display: none !important; }
.ht-desktop .td-desk.d-none { display: flex !important; flex-direction: column; gap: 20px; }
.ht-desktop .td-desk [hidden] { display: none !important; }

.ht-desktop .td-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.ht-desktop .td-title { margin: 0 0 4px; font-size: 26px; font-weight: 800; line-height: 1.2; color: var(--ht-text); }
.ht-desktop .td-sub { font-size: 13.5px; color: var(--ht-desk-text-3); }
.ht-desktop .td-head-stats,
.ht-desktop .td-strip { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ht-desktop .td-stat { background: var(--ht-surface); border: 1px solid var(--ht-desk-line); border-radius: 16px; padding: 10px 18px; display: flex; align-items: baseline; gap: 8px; }
.ht-desktop .td-stat b { font-size: 22px; font-weight: 800; color: var(--ht-text); font-variant-numeric: tabular-nums; }
.ht-desktop .td-stat span { font-size: 13px; font-weight: 600; color: var(--ht-desk-text-2); }

/* Màu dùng chung trong mục 12 */
.ht-desktop .td-desk b.is-brand { color: var(--ht-brand-strong); }
.ht-desktop .td-desk b.is-accent,
.ht-desktop .td-desk .td-total.is-accent { color: var(--ht-accent); }
.ht-desktop .td-desk b.is-good { color: var(--ht-success-dark); }
.ht-desktop .td-desk b.is-bad,
.ht-desktop .td-desk .td-total.is-bad { color: #c62828; }

.ht-desktop .td-body { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.ht-desktop .td-classes { flex: 1 1 260px; max-width: 320px; display: flex; flex-direction: column; gap: 10px; }
.ht-desktop .td-label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--ht-desk-text-2); }
.ht-desktop .td-classes > .td-label { padding: 0 4px; }
.ht-desktop .td-label-gap { margin-top: 6px; }
.ht-desktop .td-class { text-align: left; font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 14px; background: var(--ht-surface); border: 1px solid var(--ht-desk-line); color: var(--ht-text); }
.ht-desktop .td-class:hover { border-color: #d6d3d1; }
.ht-desktop .td-class[aria-pressed="true"] { border-color: var(--ht-brand); box-shadow: inset 3px 0 0 var(--ht-brand); }
.ht-desktop .td-class:focus-visible { outline: 2px solid var(--ht-accent); outline-offset: 2px; }
.ht-desktop .td-class-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ht-desktop .td-class-name { font-weight: 800; font-size: 15px; }
.ht-desktop .td-class-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 4px; }
.ht-desktop .td-class-metrics > span { background: var(--ht-page-bg); border-radius: 8px; padding: 6px 8px; display: flex; flex-direction: column; }
.ht-desktop .td-class-metrics small { font-size: 11px; font-weight: 600; color: var(--ht-desk-text-3); }
.ht-desktop .td-class-metrics b { font-size: 15px; font-variant-numeric: tabular-nums; }
.ht-desktop .td-muted { font-size: 12.5px; color: var(--ht-desk-text-3); }

.ht-desktop .td-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.ht-desktop .td-pill-sm { padding: 1px 8px; font-size: 11px; }
.ht-desktop .td-pill.is-accent { background: #e3f2fd; color: var(--ht-accent); }
.ht-desktop .td-pill.is-good { background: #e8f5e9; color: var(--ht-success-dark); }
.ht-desktop .td-pill.is-bad { background: #ffebee; color: #c62828; }
.ht-desktop .td-pill.is-warn { background: #fff3e0; color: #b45309; }
.ht-desktop .td-pill.is-neutral { background: #f5f3f0; color: var(--ht-desk-text-2); }

.ht-desktop .td-panel { flex: 3 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ht-desktop .td-panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.ht-desktop .td-panel-head h2 { margin: 0; font-size: 20px; font-weight: 800; color: var(--ht-text); }
.ht-desktop .td-tabs { display: flex; gap: 2px; padding: 4px; background: #f0ede8; border-radius: 12px; }
.ht-desktop .td-tabs button { height: 34px; padding: 0 16px; border: 0; border-radius: 9px; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; background: transparent; color: var(--ht-desk-text-3); }
.ht-desktop .td-tabs button:hover { color: var(--ht-text); }
.ht-desktop .td-tabs button[aria-selected="true"] { background: var(--ht-surface); color: var(--ht-text); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.ht-desktop .td-tabs button:focus-visible { outline: 2px solid var(--ht-accent); outline-offset: 1px; }
.ht-desktop .td-pane { display: flex; flex-direction: column; gap: 12px; }

.ht-desktop .td-card { background: var(--ht-surface); border: 1px solid var(--ht-desk-line); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ht-desktop .td-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ht-desktop .td-kpi { gap: 6px; padding: 16px 18px; }
.ht-desktop .td-kpi > span:first-child { font-weight: 600; }
.ht-desktop .td-kpi b { font-size: 28px; font-weight: 800; color: var(--ht-text); font-variant-numeric: tabular-nums; line-height: 1.2; }
.ht-desktop .td-bar { display: block; height: 6px; border-radius: 3px; background: #f0ede8; overflow: hidden; }
.ht-desktop .td-bar > span { display: block; height: 100%; }
.ht-desktop .td-bar > .is-good { background: #2e7d32; }
.ht-desktop .td-bar > .is-accent { background: var(--ht-accent); }

.ht-desktop .td-overview { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; align-items: start; }
.ht-desktop .td-dots { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; }
.ht-desktop .td-dot { height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.ht-desktop .td-dot.is-good,
.ht-desktop .td-legend i.is-good { background: #2e7d32; }
.ht-desktop .td-dot.is-bad,
.ht-desktop .td-legend i.is-bad { background: #c62828; }
.ht-desktop .td-legend { display: flex; gap: 14px; font-size: 12px; color: var(--ht-desk-text-2); }
.ht-desktop .td-legend span { display: inline-flex; align-items: center; gap: 5px; }
.ht-desktop .td-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.ht-desktop .td-recent { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #f0ede8; }
.ht-desktop .td-recent > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.ht-desktop .td-recent b { font-size: 13.5px; color: var(--ht-text); }
.ht-desktop .td-recent small { font-size: 12px; color: var(--ht-desk-text-3); }

.ht-desktop .td-side { display: flex; flex-direction: column; gap: 12px; }
.ht-desktop .td-info { font-size: 13.5px; }
.ht-desktop .td-info > div:not(.td-label) { display: flex; justify-content: space-between; gap: 8px; }
.ht-desktop .td-info > div > span { color: var(--ht-desk-text-3); }
.ht-desktop .td-info b { color: var(--ht-text); text-align: right; }
.ht-desktop .td-sll { flex-direction: row; align-items: center; gap: 12px; padding: 16px 18px; color: var(--ht-text); text-decoration: none; }
.ht-desktop .td-sll:hover { border-color: #d6d3d1; text-decoration: none; color: var(--ht-text); }
.ht-desktop .td-sll-icon { width: 40px; height: 40px; border-radius: 10px; background: #e3f2fd; color: var(--ht-accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; }
.ht-desktop .td-sll-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ht-desktop .td-sll-text small { font-size: 12.5px; color: var(--ht-desk-text-3); }

.ht-desktop .td-btn { margin-left: auto; height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid #e7e5e4; background: var(--ht-surface); color: var(--ht-text); font-weight: 700; font-size: 13.5px; display: inline-flex; align-items: center; text-decoration: none; }
.ht-desktop .td-btn:hover { border-color: #d6d3d1; text-decoration: none; color: var(--ht-text); }

.ht-desktop .td-table-wrap { padding: 0; overflow: hidden; gap: 0; }
.ht-desktop .td-table { width: 100%; border-collapse: collapse; font-size: 13.5px; color: var(--ht-text); }
.ht-desktop .td-table th { padding: 10px 16px; background: #fcfbf9; border-bottom: 1px solid var(--ht-desk-line); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--ht-desk-text-3); text-align: left; }
.ht-desktop .td-table td { padding: 11px 16px; border-bottom: 1px solid #f0ede8; vertical-align: middle; }
.ht-desktop .td-table tr:last-child td { border-bottom: none; }
.ht-desktop .td-table .is-right { text-align: right; }
.ht-desktop .td-table .is-strong { font-weight: 700; }
.ht-desktop .td-table td.td-muted { font-size: 13.5px; }
.ht-desktop .td-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ht-desktop .td-small { font-size: 12.5px; }
.ht-desktop .td-small.is-warn { color: #b45309; font-weight: 600; }
.ht-desktop .td-note { color: #c62828; font-style: italic; }
.ht-desktop .td-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.ht-desktop .td-scores { font-size: 14px; }
.ht-desktop .td-scores td { padding-top: 13px; padding-bottom: 13px; }
.ht-desktop .td-total { font-weight: 800; }
.ht-desktop .td-empty { padding: 32px; text-align: center; color: var(--ht-desk-text-3); }
.ht-desktop .td-rate { flex-direction: row; align-items: center; gap: 16px; padding: 14px 18px; }
.ht-desktop .td-rate b { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ht-desktop .td-rate .td-bar { flex: 1; height: 8px; }
.ht-desktop .td-rate .td-muted { font-size: 13px; color: var(--ht-desk-text-2); }
.ht-desktop .td-final { align-self: flex-start; background: #e3f2fd; border-radius: 16px; padding: 14px 20px; display: flex; align-items: baseline; gap: 10px; color: var(--ht-accent); }
.ht-desktop .td-final b { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ht-desktop .td-final span { font-size: 13px; font-weight: 600; }

/* =========================================
   13. LỊCH HỌC + SỔ LIÊN LẠC DESKTOP (theo mẫu thiết kế đã duyệt)
   - Lịch học (LichHoc/Index.cshtml): .lh-desk (d-none trên điện thoại) = lịch Tuần/Tháng + bảng "Đã học";
     2 tab của điện thoại ẩn đi; cột phải .lh-col-side là khối "Khám phá lớp mới" sẵn có (lọc + cuộn tải thêm giữ nguyên).
   - Sổ liên lạc (SoLienLac/Index.cshtml): danh sách buổi bên trái (.sll-desk-list), thẻ buổi đang chọn bên phải
     (chính .sll-card của điện thoại, giữ nguyên luồng ký tên của so-lien-lac.js).
   ========================================= */
.ht-desktop:has(.lh-desk),
.ht-desktop:has(.sll-desk-body) {
    --ht-read-w: 1180px;
    --ht-desk-gutter: max(32px, calc((100vw - var(--ht-sidebar-w) - var(--ht-read-w)) / 2));
}

/* ----- Lịch học: bố cục 2 cột ----- */
.ht-desktop .lh-layout { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.ht-desktop .lh-col-main { flex: 3 1 640px; min-width: 0; }
.ht-desktop .lh-col-side { flex: 1 1 300px; max-width: 340px; min-width: 0; }
.ht-desktop .lh-col-main > .pill-tabs,
.ht-desktop .lh-col-main > .pill-panel { display: none !important; }

.ht-desktop .lh-desk.d-none { display: flex !important; flex-direction: column; gap: 16px; }
.ht-desktop .lh-desk-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.ht-desktop .lh-desk-title { margin: 0 0 6px; font-size: 26px; font-weight: 800; line-height: 1.2; color: var(--ht-text); }
.ht-desktop .lh-desk-sub { font-size: 13px; color: var(--ht-desk-text-3); }
.ht-desktop .lh-desk-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ht-desktop .lh-mode { display: flex; padding: 3px; border-radius: 10px; background: #f0ede8; }
.ht-desktop .lh-mode button { height: 30px; padding: 0 16px; border: none; border-radius: 8px; background: transparent; color: var(--ht-desk-text-3); font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; }
.ht-desktop .lh-mode button[aria-pressed="true"] { background: #fff; color: var(--ht-text); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.ht-desktop .lh-nav { display: flex; align-items: center; gap: 6px; }
.ht-desktop .lh-nav-btn,
.ht-desktop .lh-today-btn { height: 34px; border-radius: 9px; border: 1px solid #e7e5e4; background: #fff; color: var(--ht-text); font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ht-desktop .lh-nav-btn { width: 34px; padding: 0; }
.ht-desktop .lh-today-btn { padding: 0 12px; }
.ht-desktop .lh-nav-btn:disabled { opacity: .4; cursor: default; }
.ht-desktop .lh-range { min-width: 190px; text-align: center; font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--ht-text); }

.ht-desktop .lh-wk[hidden],
.ht-desktop .lh-mo[hidden] { display: none !important; }
.ht-desktop .lh-wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: #fff; border: 1px solid var(--ht-desk-line); border-radius: 16px; overflow: hidden; }
.ht-desktop .lh-wk-day { min-height: 280px; padding: 12px 10px; display: flex; flex-direction: column; gap: 8px; border-right: 1px solid #f0ede8; min-width: 0; }
.ht-desktop .lh-wk-day:last-child { border-right: none; }
.ht-desktop .lh-wk-day.is-today { background: rgba(var(--ht-brand-rgb), .035); }
.ht-desktop .lh-wk-day.is-out { background: repeating-linear-gradient(135deg, #fbfaf8 0 8px, #f5f3f0 8px 9px); }
.ht-desktop .lh-wk-head { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; }
.ht-desktop .lh-wk-head span { font-size: 12px; font-weight: 700; color: var(--ht-desk-text-3); text-transform: uppercase; letter-spacing: .4px; }
.ht-desktop .lh-wk-head b { font-size: 20px; font-weight: 800; color: var(--ht-text); font-variant-numeric: tabular-nums; }
.ht-desktop .lh-wk-day.is-past .lh-wk-head b { color: #a8a29e; }
.ht-desktop .lh-wk-day.is-today .lh-wk-head b { color: var(--ht-brand); }

/* Màu theo trạng thái buổi: sắp học / hôm nay / có mặt / vắng / nghỉ có phép / chưa cập nhật */
.ht-desktop .lh-sess { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 10px; border: 1px solid; color: var(--ht-text); overflow-wrap: anywhere; }
.ht-desktop .lh-sess-time { font-weight: 800; font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ht-desktop .lh-sess-class { font-weight: 700; font-size: 12.5px; line-height: 1.3; }
.ht-desktop .lh-sess-meta { font-size: 12px; color: #57534e; }
.ht-desktop .lh-sess-badge { align-self: flex-start; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; background: #fff; border: 1px solid; }
.ht-desktop .lh-sess-note { font-size: 11.5px; color: #57534e; line-height: 1.35; border-top: 1px dashed #e2ddd7; padding-top: 6px; }
.ht-desktop .lh-desk .is-sap { --lh-bg: #e3f2fd; --lh-bd: #90caf9; --lh-fg: #0d47a1; }
.ht-desktop .lh-desk .is-homnay { --lh-bg: var(--ht-brand); --lh-bd: var(--ht-brand); --lh-fg: var(--ht-brand-strong); }
.ht-desktop .lh-desk .is-comat { --lh-bg: #e8f5e9; --lh-bd: #a5d6a7; --lh-fg: #1b5e20; }
.ht-desktop .lh-desk .is-vang { --lh-bg: #ffebee; --lh-bd: #ef9a9a; --lh-fg: #b71c1c; }
.ht-desktop .lh-desk .is-nghi { --lh-bg: #f5f3f0; --lh-bd: #d6d3d1; --lh-fg: #57534e; }
.ht-desktop .lh-desk .is-chua { --lh-bg: #fff8e1; --lh-bd: #ffe082; --lh-fg: #8a5a00; }
.ht-desktop .lh-sess[class*="is-"] { background: var(--lh-bg); border-color: var(--lh-bd); }
.ht-desktop .lh-sess .lh-sess-badge { color: var(--lh-fg); border-color: var(--lh-bd); }
.ht-desktop .lh-sess.is-homnay,
.ht-desktop .lh-sess.is-homnay .lh-sess-meta,
.ht-desktop .lh-sess.is-homnay .lh-sess-note { color: #fff; }
.ht-desktop .lh-sess.is-homnay .lh-sess-badge { border-color: #fff; }
.ht-desktop .lh-sess.is-homnay .lh-sess-note { border-top-color: rgba(255,255,255,.5); }

.ht-desktop .lh-mo { background: #fff; border: 1px solid var(--ht-desk-line); border-radius: 16px; overflow: hidden; }
.ht-desktop .lh-mo-head,
.ht-desktop .lh-mo-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ht-desktop .lh-mo-head { background: #fcfbf9; border-bottom: 1px solid var(--ht-desk-line); }
.ht-desktop .lh-mo-head span { padding: 10px 12px; font-size: 11.5px; font-weight: 700; color: var(--ht-desk-text-3); text-transform: uppercase; letter-spacing: .4px; }
.ht-desktop .lh-mo-cell { min-height: 92px; min-width: 0; padding: 8px; display: flex; flex-direction: column; gap: 5px; border-right: 1px solid #f0ede8; border-bottom: 1px solid #f0ede8; }
.ht-desktop .lh-mo-cell:nth-child(7n) { border-right: none; }
.ht-desktop .lh-mo-cell.is-other,
.ht-desktop .lh-mo-cell.is-out { background: #fbfaf8; }
.ht-desktop .lh-mo-cell.is-today { background: rgba(var(--ht-brand-rgb), .035); }
.ht-desktop .lh-mo-num { align-self: flex-start; min-width: 24px; height: 24px; padding: 0 4px; box-sizing: border-box; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--ht-text); font-variant-numeric: tabular-nums; }
.ht-desktop .lh-mo-cell.is-other .lh-mo-num { color: #c4bfb9; }
.ht-desktop .lh-mo-cell.is-out:not(.is-other) .lh-mo-num { color: #a8a29e; }
.ht-desktop .lh-mo-cell.is-today .lh-mo-num { background: var(--ht-brand); color: #fff; }
.ht-desktop .lh-chip { display: block; padding: 3px 6px; border-radius: 6px; font-size: 11.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--lh-bg); color: var(--lh-fg); border: 1px solid var(--lh-bd); }
.ht-desktop .lh-chip.is-homnay { color: #fff; }

.ht-desktop .lh-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 12px; color: #57534e; }
.ht-desktop .lh-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.ht-desktop .lh-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--lh-bg); border: 1px solid var(--lh-bd); }
.ht-desktop .lh-window-note { margin-left: auto; color: var(--ht-desk-text-3); }

.ht-desktop .lh-hist { background: #fff; border: 1px solid var(--ht-desk-line); border-radius: 16px; overflow: hidden; }
.ht-desktop .lh-hist-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 20px 10px; }
.ht-desktop .lh-hist-head h2 { margin: 0; font-size: 16px; font-weight: 800; color: var(--ht-text); }
.ht-desktop .lh-hist-head a { font-size: 13px; font-weight: 600; color: var(--ht-accent); }
.ht-desktop .lh-hist-row { display: grid; grid-template-columns: 150px 120px 130px minmax(0, 1fr); gap: 12px; align-items: center; padding: 11px 20px; border-bottom: 1px solid #f3f0ec; font-size: 13.5px; color: var(--ht-text); }
.ht-desktop .lh-hist-row:last-child { border-bottom: none; }
.ht-desktop .lh-hist-cols { padding-top: 10px; padding-bottom: 10px; background: #fcfbf9; border-top: 1px solid var(--ht-desk-line); border-bottom-color: var(--ht-desk-line); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--ht-desk-text-3); }
.ht-desktop .lh-hist-date { font-weight: 700; font-variant-numeric: tabular-nums; }
.ht-desktop .lh-hist-ca { color: #57534e; font-variant-numeric: tabular-nums; }
.ht-desktop .lh-hist-content small { display: block; font-size: 12px; color: var(--ht-desk-text-3); }
.ht-desktop .lh-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--lh-bg); color: var(--lh-fg); }
.ht-desktop .lh-pill.is-homnay { color: #fff; }
.ht-desktop .lh-hist-empty { padding: 28px 20px; text-align: center; color: var(--ht-desk-text-3); border-top: 1px solid var(--ht-desk-line); }

/* Cột phải: "Khám phá lớp mới" (markup điện thoại, thu gọn thành cột hẹp) */
.ht-desktop .lh-col-side > .section-label { margin: 0 0 12px !important; font-size: 16px; font-weight: 800; color: var(--ht-text); text-transform: none; letter-spacing: 0; }
.ht-desktop .lh-col-side .chip-select { flex: 1; min-width: 0; height: 36px; border-radius: 10px; font-size: 13px; }
.ht-desktop .lh-col-side .lop-item { padding: 16px !important; margin-bottom: 12px !important; box-shadow: none; border: 1px solid var(--ht-desk-line); border-radius: 16px; }

/* ----- Sổ liên lạc ----- */
.ht-desktop .sll-desk-head.d-none { display: block !important; margin-bottom: 14px; }
.ht-desktop .sll-desk-head h1 { margin: 0 0 6px; font-size: 26px; font-weight: 800; line-height: 1.2; color: var(--ht-text); }
.ht-desktop .sll-desk-head p { margin: 0; font-size: 13px; color: var(--ht-desk-text-3); }
.ht-desktop .sll-lop-chips { flex-wrap: wrap; overflow: visible; }
.ht-desktop .sll-lop-chip { cursor: pointer; }

.ht-desktop .sll-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.ht-desktop .sll-stats > .d-flex { display: contents !important; }
.ht-desktop .sll-stats .detail-stat-card { border: 1px solid var(--ht-desk-line); border-radius: 14px; padding: 12px 16px; text-align: left; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px; }
.ht-desktop .sll-stats .detail-stat-value { font-size: 24px; }
.ht-desktop .sll-stats .detail-stat-label { font-size: 12px; margin-top: 0; }

.ht-desktop .sll-desk-body { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.ht-desktop .sll-desk-list.d-none { display: block !important; flex: 1 1 340px; max-width: 400px; background: #fff; border: 1px solid var(--ht-desk-line); border-radius: 16px; overflow: hidden; }
.ht-desktop .sll-buoi-list { flex: 2 1 480px; min-width: 0; }
.ht-desktop .sll-desk-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--ht-desk-line); }
.ht-desktop .sll-desk-toolbar > span { font-size: 12px; color: var(--ht-desk-text-3); }
.ht-desktop .sll-desk-filters { display: flex; gap: 6px; }
.ht-desktop .sll-desk-month[hidden],
.ht-desktop .sll-desk-row[hidden],
.ht-desktop .sll-desk-empty[hidden] { display: none !important; }
.ht-desktop .sll-desk-month-label { padding: 10px 16px 6px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--ht-desk-text-3); background: #fcfbf9; border-bottom: 1px solid #f0ede8; }
.ht-desktop .sll-desk-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: none; border-bottom: 1px solid #f3f0ec; background: #fff; font: inherit; text-align: left; cursor: pointer; color: var(--ht-text); }
.ht-desktop .sll-desk-row:hover { background: #fcfaf8; }
.ht-desktop .sll-desk-row[aria-pressed="true"] { background: #fff6f6; box-shadow: inset 3px 0 0 var(--ht-brand); }
.ht-desktop .sll-desk-row:focus-visible { outline: 2px solid var(--ht-accent); outline-offset: -2px; }
.ht-desktop .sll-desk-date { display: flex; flex-direction: column; align-items: center; width: 44px; flex-shrink: 0; }
.ht-desktop .sll-desk-date b { font-size: 18px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ht-desktop .sll-desk-date small { font-size: 11.5px; font-weight: 600; color: var(--ht-desk-text-3); }
.ht-desktop .sll-desk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ht-desktop .sll-desk-title { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ht-desktop .sll-desk-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ht-desktop .sll-desk-dm { padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800; background: #e8f5e9; color: #1b5e20; }
.ht-desktop .sll-desk-dm.is-vang { background: #ffebee; color: #c62828; }
.ht-desktop .sll-desk-star { font-size: 12px; font-weight: 800; color: #b45309; }
.ht-desktop .sll-desk-ky { flex-shrink: 0; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: #fff; background: var(--ht-brand); }
.ht-desktop .sll-desk-ky.is-done { color: #1b5e20; background: transparent; }
.ht-desktop .sll-desk-empty { padding: 32px 16px; text-align: center; color: var(--ht-desk-text-3); font-size: 13.5px; }

/* Bên phải: chỉ hiện thẻ buổi đang chọn (khi JS đã chạy — không có JS thì vẫn là danh sách thẻ như điện thoại) */
.ht-desktop .sll-desk-body.is-ready .sll-card:not(.is-desk-selected) { display: none !important; }
.ht-desktop .sll-desk-body .sll-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; row-gap: 14px; padding: 22px 24px; margin-bottom: 0 !important; box-shadow: none; border: 1px solid var(--ht-desk-line); border-radius: 16px; }
.ht-desktop .sll-desk-body .sll-card > * { grid-column: 1 / -1; }
.ht-desktop .sll-desk-body .sll-card > .sll-section { grid-column: auto; margin-top: 0; border-top: none; padding: 14px 16px; border-radius: 12px; background: var(--ht-page-bg); }
.ht-desktop .sll-desk-body .sll-card > .sll-section + .sll-section { background: #e3f2fd; }
.ht-desktop .sll-desk-body .sll-section summary { pointer-events: none; font-size: 13px; text-transform: uppercase; letter-spacing: .4px; color: #57534e; }
.ht-desktop .sll-desk-body .sll-section + .sll-section summary { color: #0d47a1; }
.ht-desktop .sll-desk-body .sll-section summary::after { display: none; }
.ht-desktop .sll-desk-body .sll-section-body { padding-left: 0; }
.ht-desktop .sll-desk-body .sll-date { font-size: 20px; }

/* Đã ký: chữ ký trái, ghi chú phải. Chưa ký: khung ký trái, ghi chú + nút phải (thứ tự phần tử giữ nguyên markup) */
.ht-desktop .sll-desk-body .sll-signed,
.ht-desktop .sll-desk-body .sll-ky-panel:not(.d-none) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 18px; align-items: start; margin-top: 0; border-radius: 12px; padding: 16px; }
.ht-desktop .sll-desk-body .sll-signed { border: 1px solid #a5d6a7; background: #f4faf4; }
.ht-desktop .sll-desk-body .sll-ky-panel { border: 1px solid var(--ht-brand-border); background: rgba(var(--ht-brand-rgb), .02); }
.ht-desktop .sll-desk-body .sll-signed > :nth-child(1),
.ht-desktop .sll-desk-body .sll-ky-panel > :nth-child(1) { grid-column: 1; grid-row: 1; }
.ht-desktop .sll-desk-body .sll-signed > :nth-child(2) { grid-column: 1; grid-row: 2 / span 3; }
.ht-desktop .sll-desk-body .sll-ky-panel > :nth-child(2) { grid-column: 1; grid-row: 2 / span 4; }
.ht-desktop .sll-desk-body .sll-signed > :nth-child(n+3),
.ht-desktop .sll-desk-body .sll-ky-panel > :nth-child(n+3) { grid-column: 2; }
.ht-desktop .sll-desk-body .sll-signed > :nth-child(3),
.ht-desktop .sll-desk-body .sll-ky-panel > :nth-child(3) { grid-row: 1; margin-top: 0 !important; }
.ht-desktop .sll-desk-body .sll-signed-img { max-height: 120px; }
.ht-desktop .sll-desk-body .sll-canvas-wrap { height: 160px; cursor: crosshair; }
.ht-desktop .sll-desk-body .sll-ky-panel .d-flex { justify-content: flex-end; }
.ht-desktop .sll-desk-body .sll-ky-panel .flex-fill { flex: 0 0 auto !important; width: auto !important; padding-left: 18px; padding-right: 18px; }
.ht-desktop .sll-desk-body .sll-signed .btn-ht-secondary { width: auto !important; justify-self: end; padding-left: 16px; padding-right: 16px; }

/* =========================================
   14. THÔNG BÁO + CÁ NHÂN DESKTOP
   - Menu trái: mục "Thông báo" (.ht-desk-nav-tb, chỉ máy tính) kèm số chưa đọc
   - ThongBao/Index.cshtml (.desk-tb-*): danh sách bên trái, nội dung bên phải
   - TaiKhoan/CaNhan.cshtml (.desk-cn-*): menu mục bên trái, nội dung mục bên phải
   ========================================= */
.ht-desktop .ht-desk-nav-tb.d-none { display: flex !important; }

.ht-desktop:has(.desk-tb),
.ht-desktop:has(.desk-cn) {
    --ht-read-w: 1120px;
    --ht-desk-gutter: max(32px, calc((100vw - var(--ht-sidebar-w) - var(--ht-read-w)) / 2));
}

/* --- Thông báo --- */
.ht-desktop .desk-tb.d-none { display: block !important; }
.ht-desktop .main-content:has(.desk-tb) #noti-list,
.ht-desktop:has(.desk-tb) #btn-mark-all { display: none !important; }
.ht-desktop .desk-tb-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.ht-desktop .desk-tb-head h1 { margin: 0 0 4px; font-size: 26px; font-weight: 800; line-height: 1.2; color: var(--ht-text); }
.ht-desktop .desk-tb-summary { font-size: 13.5px; color: var(--ht-desk-text-3); }
.ht-desktop .desk-tb-markall { height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid #e7e5e4; background: var(--ht-surface); color: var(--ht-text); font: inherit; font-weight: 700; font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ht-desktop .desk-tb-markall:hover { border-color: #d6d3d1; }
.ht-desktop .desk-tb-body { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.ht-desktop .desk-tb-list { flex: 2 1 360px; max-width: 440px; min-width: 0; background: var(--ht-surface); border: 1px solid var(--ht-desk-line); border-radius: 16px; overflow: hidden; }
.ht-desktop .desk-tb-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 14px 12px; border-bottom: 1px solid var(--ht-desk-line); }
.ht-desktop .desk-tb-chips .desk-chip { height: 30px; padding: 0 11px; font-size: 12.5px; }
.ht-desktop .desk-tb-row { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; padding: 14px 16px; border: none; border-bottom: 1px solid var(--ht-border-light); background: var(--ht-surface); font: inherit; color: inherit; cursor: pointer; }
.ht-desktop .desk-tb-row[hidden] { display: none !important; }
.ht-desktop .desk-tb-row:hover { background: #fcfaf8; }
.ht-desktop .desk-tb-row.is-selected { background: #fff6f6; box-shadow: inset 3px 0 0 var(--ht-brand); }
.ht-desktop .desk-tb-row:focus-visible { outline: 2px solid var(--ht-accent); outline-offset: -2px; }
.ht-desktop .desk-tb-dot { flex: 0 0 8px; height: 8px; border-radius: 50%; margin-top: 14px; background: transparent; }
.ht-desktop .desk-tb-row.is-unread .desk-tb-dot { background: var(--ht-brand); }
.ht-desktop .desk-tb-icon { flex: 0 0 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; background: #fff3e0; color: #b45309; }
.ht-desktop .desk-tb-row.is-baitap .desk-tb-icon { background: #e3f2fd; color: #1565c0; }
.ht-desktop .desk-tb-row.is-ketqua .desk-tb-icon { background: #e8f5e9; color: #1b5e20; }
.ht-desktop .desk-tb-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ht-desktop .desk-tb-line { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.ht-desktop .desk-tb-title { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: var(--ht-desk-text-2); }
.ht-desktop .desk-tb-row.is-unread .desk-tb-title { font-weight: 800; color: var(--ht-text); }
.ht-desktop .desk-tb-ago { flex-shrink: 0; font-size: 12px; color: #8a837c; }
.ht-desktop .desk-tb-preview { font-size: 13px; color: var(--ht-desk-text-3); line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: pre-line; }
.ht-desktop .desk-tb-empty { padding: 40px 18px; text-align: center; color: var(--ht-desk-text-3); }
.ht-desktop .desk-tb-empty[hidden] { display: none !important; }
.ht-desktop .desk-tb-detail { flex: 3 1 460px; min-width: 0; box-sizing: border-box; min-height: 420px; background: var(--ht-surface); border: 1px solid var(--ht-desk-line); border-radius: 16px; padding: 28px 32px; display: flex; flex-direction: column; gap: 18px; position: sticky; top: calc(var(--header-height) + 20px); }
.ht-desktop .desk-tb-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ht-desktop .desk-tb-pill { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #fff3e0; color: #b45309; }
.ht-desktop .desk-tb-pill.is-baitap { background: #e3f2fd; color: #1565c0; }
.ht-desktop .desk-tb-pill.is-ketqua { background: #e8f5e9; color: #1b5e20; }
.ht-desktop .desk-tb-time { font-size: 13px; color: var(--ht-desk-text-3); }
.ht-desktop .desk-tb-detail-title { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.3; color: var(--ht-text); overflow-wrap: anywhere; }
.ht-desktop .desk-tb-content { font-size: 15px; line-height: 1.7; color: var(--ht-text); white-space: pre-line; overflow-wrap: anywhere; }
.ht-desktop .desk-tb-actions[hidden] { display: none !important; }
.ht-desktop .desk-tb-open { height: 42px; padding: 0 18px; border-radius: 10px; background: var(--ht-brand); color: #fff; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.ht-desktop .desk-tb-open:hover { background: var(--ht-brand-strong); color: #fff; text-decoration: none; }
.ht-desktop .desk-tb-note { margin-top: auto; padding-top: 14px; border-top: 1px solid #f0ede8; font-size: 12.5px; color: #8a837c; }

/* --- Cá nhân --- */
.ht-desktop .desk-cn.d-none { display: block !important; }
.ht-desktop .main-content:has(.desk-cn) .cn-mob { display: none !important; }
.ht-desktop .desk-cn-h1 { margin: 0 0 20px; font-size: 26px; font-weight: 800; line-height: 1.2; color: var(--ht-text); }
.ht-desktop .desk-cn-body { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.ht-desktop .desk-cn-side { flex: 1 1 260px; max-width: 300px; display: flex; flex-direction: column; gap: 16px; }
.ht-desktop .desk-cn-card { background: var(--ht-surface); border: 1px solid var(--ht-desk-line); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.ht-desktop .desk-cn-avatar { width: 72px; height: 72px; border-radius: 50%; background: var(--ht-brand-light); color: var(--ht-brand); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 28px; }
.ht-desktop .desk-cn-name { font-weight: 800; font-size: 17px; color: var(--ht-text); overflow-wrap: anywhere; }
.ht-desktop .desk-cn-chip { padding: 2px 10px; border-radius: 999px; background: #f5f3f0; color: var(--ht-desk-text-2); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ht-desktop .desk-cn-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-top: 8px; }
.ht-desktop .desk-cn-stats > div { background: var(--ht-page-bg); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; }
.ht-desktop .desk-cn-stats b { font-size: 18px; font-variant-numeric: tabular-nums; color: var(--ht-text); }
.ht-desktop .desk-cn-stats span { font-size: 12px; color: var(--ht-desk-text-3); }
.ht-desktop .desk-cn-menu { background: var(--ht-surface); border: 1px solid var(--ht-desk-line); border-radius: 16px; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.ht-desktop .desk-cn-menu button { display: flex; align-items: center; gap: 10px; width: 100%; height: 44px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--ht-desk-text-2); font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
.ht-desktop .desk-cn-menu button:hover { background: var(--ht-border-light); color: var(--ht-text); }
.ht-desktop .desk-cn-menu button.is-active { background: var(--ht-brand-light); color: var(--ht-brand-strong); font-weight: 700; }
.ht-desktop .desk-cn-menu button:focus-visible { outline: 2px solid var(--ht-accent); outline-offset: 1px; }
.ht-desktop .desk-cn-ico { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; background: #f5f3f0; flex-shrink: 0; }
.ht-desktop .desk-cn-ico.is-blue { background: #e3f2fd; color: #1565c0; }
.ht-desktop .desk-cn-ico.is-orange { background: #fff3e0; color: #b45309; }
.ht-desktop .desk-cn-ico.is-red { background: #ffebee; color: #c62828; }
.ht-desktop .desk-cn-panel { flex: 3 1 520px; min-width: 0; box-sizing: border-box; min-height: 360px; background: var(--ht-surface); border: 1px solid var(--ht-desk-line); border-radius: 16px; padding: 26px 30px; display: flex; flex-direction: column; gap: 20px; transition: opacity .15s; }
.ht-desktop .desk-cn-panel.is-loading { opacity: .5; }
.ht-desktop .desk-cn-panel-head { display: flex; flex-direction: column; gap: 4px; }
.ht-desktop .desk-cn-panel-head h2 { margin: 0; font-size: 19px; font-weight: 800; color: var(--ht-text); }
.ht-desktop .desk-cn-panel-head span { font-size: 13px; color: var(--ht-desk-text-3); }
/* Trang Thông tin / Đổi mật khẩu / Kiểm tra micro nạp vào khung: bỏ khung thẻ, form gọn 2 cột */
.ht-desktop .desk-cn-panel-body .card-ht { box-shadow: none; border: 1px solid var(--ht-border); }
.ht-desktop .desk-cn-panel-body form { max-width: 640px; }
.ht-desktop .desk-cn-panel-body .save-bar-ht { margin-top: 20px; }
.ht-desktop .desk-cn-panel-body .btn-ht-primary { width: auto; padding-left: 22px; padding-right: 22px; }
.ht-desktop .desk-cn-hotline { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 14px; background: var(--ht-page-bg); }
.ht-desktop .desk-cn-hotline-ico { width: 48px; height: 48px; border-radius: 12px; background: var(--ht-brand-light); color: var(--ht-brand); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.ht-desktop .desk-cn-hotline > div { display: flex; flex-direction: column; flex: 1; min-width: 180px; }
.ht-desktop .desk-cn-hotline > div span { font-size: 13px; color: var(--ht-desk-text-3); }
.ht-desktop .desk-cn-hotline > div b { font-size: 24px; font-weight: 800; letter-spacing: .5px; font-variant-numeric: tabular-nums; color: var(--ht-text); }
.ht-desktop .desk-cn-btn { height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid #e7e5e4; background: var(--ht-surface); color: var(--ht-text); font: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer; white-space: nowrap; }
.ht-desktop .desk-cn-btn:hover { border-color: #d6d3d1; }
.ht-desktop .desk-cn-btn.is-danger { border-color: #c62828; color: #c62828; }
.ht-desktop .desk-cn-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border: 1px solid var(--ht-desk-line); border-radius: 14px; }
.ht-desktop .desk-cn-row + .desk-cn-row { margin-top: 12px; }
.ht-desktop .desk-cn-row > div { display: flex; flex-direction: column; max-width: 520px; }
.ht-desktop .desk-cn-row > div span { font-size: 13px; color: var(--ht-desk-text-3); }
.ht-desktop .desk-cn-row.is-danger { border-color: #ffcdd2; background: #fff8f8; }
.ht-desktop .desk-cn-row.is-danger b { color: #c62828; }

/* =========================================
   15. LÀM BÀI + THI THỬ DESKTOP
   Làm bài: xem mục 4. Thi thử (BaiLam/Index_Prospect.cshtml, học viên học thử): bảng đề + khung chi tiết
   (trang Intro thi thử nạp vào bằng student-desktop.js initThiThu; khung dùng lại kiểu .desk-bt-detail của mục 10)
   và thẻ "Tư vấn lộ trình".
   ========================================= */
.ht-desktop:has(.desk-tt) {
    --ht-read-w: 1120px;
    --ht-desk-gutter: max(32px, calc((100vw - var(--ht-sidebar-w) - var(--ht-read-w)) / 2));
}
.ht-desktop .desk-tt.d-none { display: block !important; }
.ht-desktop .tt-mob { display: none !important; }

.ht-desktop .desk-tt-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.ht-desktop .desk-tt-eyebrow { font-size: 13px; font-weight: 700; color: var(--ht-brand-strong); }
.ht-desktop .desk-tt-title { margin: 4px 0; font-size: 26px; font-weight: 800; color: var(--ht-text); }
.ht-desktop .desk-tt-sub { margin: 0; color: var(--ht-desk-text-3); }
.ht-desktop .desk-tt-stats { display: flex; gap: 10px; }
.ht-desktop .desk-tt-stats > div { background: var(--ht-surface); border: 1px solid var(--ht-desk-line); border-radius: 12px; padding: 10px 16px; display: flex; flex-direction: column; min-width: 110px; }
.ht-desktop .desk-tt-stats span { font-size: 12px; font-weight: 600; color: var(--ht-desk-text-3); }
.ht-desktop .desk-tt-stats b { font-size: 20px; font-weight: 800; color: var(--ht-text); font-variant-numeric: tabular-nums; }

.ht-desktop .desk-tt-body { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.ht-desktop .desk-tt-list { flex: 3 1 520px; min-width: 0; background: var(--ht-surface); border: 1px solid var(--ht-desk-line); border-radius: 16px; overflow: hidden; }
.ht-desktop .desk-tt-row { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 2fr) minmax(0, 2.2fr); gap: 12px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--ht-border-light); }
.ht-desktop .desk-tt-row:last-child { border-bottom: none; }
.ht-desktop .desk-tt-row:not(.desk-tt-row-head) { cursor: pointer; }
.ht-desktop .desk-tt-row:not(.desk-tt-row-head):hover { background: #fcfaf8; }
.ht-desktop .desk-tt-row.is-selected { background: #fff6f6 !important; box-shadow: inset 3px 0 0 var(--ht-brand); }
.ht-desktop .desk-tt-row-head { padding-top: 12px; padding-bottom: 12px; background: #fcfbf9; border-bottom-color: var(--ht-desk-line); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--ht-desk-text-3); }
.ht-desktop .desk-tt-row-head > span:last-child,
.ht-desktop .desk-tt-result { text-align: right; }
/* Nút tên đề phủ cả dòng (bấm được bằng chuột lẫn bàn phím) */
.ht-desktop .desk-tt-open { background: none; border: none; padding: 0; text-align: left; font: inherit; font-size: 14px; font-weight: 700; color: var(--ht-text); cursor: pointer; }
.ht-desktop .desk-tt-open::after { content: ""; position: absolute; inset: 0; }
.ht-desktop .desk-tt-open:focus-visible { outline: none; }
.ht-desktop .desk-tt-row:has(.desk-tt-open:focus-visible) { box-shadow: inset 0 0 0 2px var(--ht-accent); }
.ht-desktop .desk-tt-time { font-size: 13px; color: var(--ht-text); font-variant-numeric: tabular-nums; }
.ht-desktop .desk-tt-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: #f5f3f0; color: var(--ht-desk-text-2); font-variant-numeric: tabular-nums; }
.ht-desktop .desk-tt-badge.is-done { background: #e8f5e9; color: var(--ht-success-dark); }

.ht-desktop .desk-tt-side { flex: 2 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.ht-desktop .desk-tt-detail { flex: none; }
.ht-desktop .desk-tt-call { display: flex; align-items: center; gap: 14px; background: var(--ht-surface); border: 1px solid var(--ht-desk-line); border-radius: 16px; padding: 18px 20px; }
.ht-desktop .desk-tt-call-icon { width: 40px; height: 40px; border-radius: 12px; background: var(--ht-brand-light); color: var(--ht-brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ht-desktop .desk-tt-call-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ht-desktop .desk-tt-call-text small { font-size: 12.5px; color: var(--ht-desk-text-3); }
.ht-desktop .desk-tt-call-btn { height: 38px; padding: 0 14px; border-radius: 10px; background: var(--ht-brand); color: #fff; font-weight: 800; font-size: 13.5px; display: flex; align-items: center; white-space: nowrap; text-decoration: none; font-variant-numeric: tabular-nums; }
.ht-desktop .desk-tt-call-btn:hover { background: var(--ht-brand-strong); color: #fff; text-decoration: none; }