/* CSS riêng cho trang học liệu mẫu (mau-hoc-lieu-quadratics.html).
   Phần dùng chung nằm ở assets/css/theme.c142105d.css — xem DESIGN_SYSTEM.md. */

.tab-btn {
    position: relative;
    padding: 16px 4px;
    font-weight: 600;
    font-size: 14px;
    color: #78716C;           /* stone-500 */
    white-space: nowrap;
}
.tab-btn.active { color: #0D1F33; }   /* navy-900 */
.tab-btn.active::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: #C08A2E;      /* gold-500 — cùng cách đánh dấu mục đang xem như thanh nav */
}
.tab-btn:hover { color: #16324F; }    /* navy-700 */

/* ---- Cách trình bày nội dung bài học ----
   Theo khuôn đã chốt trong DESIGN_SYSTEM.md (mục tham chiếu Save My Exams):
   tiêu đề là câu hỏi học viên sẽ hỏi, thân bài là gạch đầu dòng chứ không phải đoạn văn. */

/* Tiêu đề dạng câu hỏi: "Discriminant là gì?" thay cho nhãn "2. The discriminant" */
.question-heading {
    margin-top: 40px;
    margin-bottom: 16px;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
    color: #0D1F33;             /* navy-900 */
}
.question-heading:first-of-type { margin-top: 8px; }

/* Gạch đầu dòng: mỗi dòng một ý, dấu tick vàng thay cho bullet tròn mặc định */
.note-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: #57534E;             /* stone-600 */
}
.note-list > li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 10px;
}
.note-list > li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 0.62em;
    width: 6px;
    height: 6px;
    background: #C08A2E;        /* gold-500 */
}
.note-list b { color: #122840; font-weight: 700; }   /* navy-800 — in đậm từ khóa thao tác */

/* Khối "Mẹo phòng thi": vỏ nhận diện riêng, không dùng chung kiểu thẻ với phần lý thuyết */
.exam-tip {
    margin-top: 24px;
    margin-bottom: 24px;
    padding: 24px;
    background: #FBF3E2;        /* gold-50 */
    border-left: 4px solid #C08A2E;
}
.exam-tip .note-list { color: #44403C; }             /* stone-700, đọc rõ trên nền vàng nhạt */

/* ---- Chế độ xem thử (?preview=1): nội dung có phí bị làm mờ ---- */
/* Lưu ý: đây chỉ là lớp chắn ở giao diện — ai mở DevTools vẫn đọc được HTML. Muốn chặn thật
   thì server không được trả nội dung bài học cho người chưa mua (xem DESIGN_SYSTEM.md). */
.locked-blur {
    filter: blur(5px);
    user-select: none;
    pointer-events: none;
}

/* Mục sidebar bị khóa: mờ đi và không bấm được */
.locked-item {
    opacity: 0.45;
    pointer-events: none;
}