@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply bg-office-bg text-office-text font-sans m-0 p-0 h-screen overflow-hidden;
  }

  /* Ẩn thanh cuộn nhưng vẫn cho phép cuộn */
  .hide-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
  .hide-scrollbar::-webkit-scrollbar {
    display: none;
  }
}

@media print {
  /* Ẩn các thành phần UI thừa hoàn toàn khỏi luồng layout */
  header, aside, footer, button, .fixed {
    display: none !important;
  }

  /* Reset lại toàn bộ khung layout (h-screen, overflow-hidden) để tài liệu chảy liền mạch */
  body, html, #app, 
  #app > div, 
  #app > div > div, 
  main, 
  #scroll-area {
    display: block !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    position: static !important;
    padding: 0 !important;
    margin: 0 !important;
    background: white !important;
  }

  #main-editor {
    width: 210mm !important; /* Kích thước A4 chuẩn */
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    zoom: 1 !important; /* Hủy zoom của giao diện web để in đúng tỷ lệ */
  }

  /* Ngắt trang thông minh */
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    break-after: avoid;
  }
  
  table, img, .katex-display {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  @page {
    size: A4;
    margin: 0mm; /* Tắt header/footer mặc định của trình duyệt */
  }
}