/* Global small helpers on top of Tailwind (loaded via CDN in each page) */

html, body {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  }
  
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
  ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
  
  @keyframes fadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
  .animate-fade-in { animation: fadeIn .25s ease-out; }
  
  /* Math content should never overflow horizontally on mobile */
  .math-content { overflow-x: auto; max-width: 100%; }
  
  /* FIX: Tailwind CDN Preflight ép mọi <svg> thành display:block
     (svg,video,canvas,... { display:block }). MathJax xuất công thức SVG
     (<mjx-container><svg>...</svg></mjx-container>), nên mỗi công thức
     toán bị đẩy xuống dòng riêng, làm vỡ câu văn thành nhiều dòng.
     Khôi phục hiển thị inline cho công thức trong dòng ($...$),
     giữ nguyên display block/căn giữa cho công thức khối ($$...$$ hoặc \[...\]). */
  .math-content mjx-container[jax="SVG"] {
    display: inline-block !important;
    vertical-align: -0.2ex;
    max-width: 100%;
  }
  .math-content mjx-container[jax="SVG"] > svg {
    display: inline-block !important;
  }
  
  /* QUAN TRỌNG: KHÔNG đặt overflow-x/overflow-y: auto cho công thức inline —
     overflow:auto biến mỗi công thức nhỏ thành 1 khung cuộn riêng, phần khung
     cuộn ngang dự trữ (scrollbar gutter) sẽ ăn bớt chiều cao, làm công thức
     trông như bị "cụt" phía dưới. Chỉ công thức khối lớn (display="true",
     $$...$$ hoặc \[...\]) mới cần cuộn ngang vì có thể rất dài/rộng. */
  .math-content mjx-container[jax="SVG"][display="true"] {
    display: block !important;
    margin: 0.75em auto !important;
    text-align: center;
    overflow-x: auto;
    overflow-y: hidden;
  }
  
  /* Question grid palette buttons (student exam page) */
  .qnav-btn {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px; font-weight: 600; font-size: 14px;
    border: 1.5px solid #e2e8f0; background: #fff; color: #475569;
    cursor: pointer; transition: all .15s;
  }
  .qnav-btn:hover { border-color: #6366f1; }
  .qnav-btn.answered { background: #eef2ff; border-color: #6366f1; color: #4338ca; }
  .qnav-btn.current { background: #4f46e5; border-color: #4f46e5; color: #fff; }
  
  .badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
  .badge-blue { background: #dbeafe; color: #1e40af; }
  .badge-green { background: #dcfce7; color: #166534; }
  .badge-amber { background: #fef3c7; color: #92400e; }
  .badge-red { background: #fee2e2; color: #991b1b; }
  .badge-slate { background: #f1f5f9; color: #334155; }
  
  @media print {
    #sidebar, header, .no-print { display: none !important; }
  }

  .pdf-question-card { page-break-inside: avoid; }
  .pdf-question-card-splittable { page-break-inside: auto; }