/* 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.css — xem DESIGN_SYSTEM.md. */

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

/* Áo mới 25/08: cụm "thanh tab + panel" là MỘT tấm thẻ ghép từ 2 phần tử chồng lên nhau —
   để nguyên bo 16px cả 4 góc từ .bg-white.border (theme.css) thì hở đường nối giữa 2 phần tử,
   nên bo tay: góc trên cho thanh tab, góc dưới cho panel (16px cùng cỡ thẻ toàn site). */
#learn > .border-b-0 { border-radius: 16px 16px 0 0; }
#learn > section { border-radius: 0 0 16px 16px; }

/* ---- 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: var(--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: var(--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: var(--gold-500);
}
.note-list b { color: var(--navy-800); font-weight: 700; }   /* 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: var(--gold-50);
    border-left: 4px solid var(--gold-500);
    border-radius: 14px;    /* áo mới 25/08: hộp bo 14px như thẻ toàn site */
}
.exam-tip .note-list { color: var(--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;
}