/* topic-nav.css — dùng CHUNG cho mọi file /topics/*.html. KHÔNG sửa file này riêng cho từng chuyên đề — sửa 1 lần ở đây, mọi chuyên đề đang chạy tự động cập nhật theo. */ :root { --tn-navy: #1e3a8a; --tn-navy-dark: #16296b; --tn-gold: #f5a623; } /* QUAN TRỌNG: dùng position:fixed (không phải sticky) để thanh nav LUÔN bị đưa ra khỏi luồng layout bình thường của trang, bất kể file chuyên đề gốc dùng body{display:flex/grid} hay css lạ gì khác. Nếu để sticky, nó vẫn là 1 phần tử con của — hễ body là flex container (rất hay gặp vì layout kiểu "1 khung card giữa màn hình") thì thanh nav sẽ bị xử lý như 1 flex-item đứng CẠNH nội dung thay vì nằm TRÊN nội dung, gây ra khối màu đặc to bất thường + vỡ layout trên mobile. */ #topic-nav-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; background: var(--tn-navy); color: #fff; font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 14px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); } #topic-nav-bar .tn-inner { max-width: 1180px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } #topic-nav-bar .tn-crumb { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; } #topic-nav-bar .tn-crumb a, #topic-nav-bar .tn-crumb span.tn-current { color: #fff; text-decoration: none; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #topic-nav-bar .tn-crumb a:hover { opacity: 1; text-decoration: underline; } #topic-nav-bar .tn-crumb span.tn-current { opacity: 1; font-weight: 600; } #topic-nav-bar .tn-sep { opacity: 0.5; } #topic-nav-bar .tn-cta { flex: 0 0 auto; background: var(--tn-gold); color: #1a1f2e; font-weight: 700; text-decoration: none; padding: 7px 14px; border-radius: 20px; white-space: nowrap; } #topic-nav-bar .tn-cta:hover { filter: brightness(1.05); } /* Khoảng đệm đẩy nội dung gốc xuống dưới thanh nav (vì nav giờ fixed, không tự nhường chỗ) — chiều cao thật của nav được đo bằng JS và cộng thêm vào padding-top gốc của , xem topic-nav.js. Không đặt cứng ở đây vì chiều cao thanh nav có thể đổi (vd bọc xuống 2 dòng trên màn hình rất hẹp). */ @media (max-width: 640px) { #topic-nav-bar .tn-cta { display: none; } /* nhường chỗ cho breadcrumb trên mobile */ } @media (max-width: 480px) { /* Màn hình rất hẹp: chỉ giữ "🏠 Trang chủ › ", bớt tên chương ở giữa để breadcrumb không bị vỡ xuống nhiều dòng. */ #topic-nav-bar .tn-crumb-mid { display: none; } } /* Chip "chuyên đề ôn tập nhanh" hiện dưới mỗi chương trong chapter-panel ở trang chủ/dashboard — file này đã được include ở header.php nên dùng lại luôn, không cần thêm 1 file CSS riêng. */ .topic-chip-row-label { font-size: 12.5px; font-weight: 600; color: #6b7488; margin: 2px 0 6px 4px; } .topic-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px 4px; } .topic-chip { display: inline-block; font-size: 12.5px; color: var(--tn-navy, #1e3a8a); background: #eef3fc; border: 1px solid #d6e3f7; border-radius: 14px; padding: 4px 10px; text-decoration: none; } .topic-chip:hover { background: #dde9fb; } .exam-item-pending { cursor: default; opacity: 0.75; } .exam-item-pending:hover { background: inherit; }