/* ============================================================
   Trung Tâm Gia Sư Bách Khoa TNK — Global Styles
   ============================================================ */

/* Base reset */
@layer base {
  html, body { margin: 0; padding: 0; }
  body { overscroll-behavior: none; }
  main > :first-child { margin-top: 0 !important; }
  main > :last-child  { margin-bottom: 0 !important; }
}

/* ── Page Transitions ─────────────────────────────────────── */
.page-fade-in {
  animation: pageFadeIn 0.35s ease forwards;
}
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Header Scroll Shadow ─────────────────────────────────── */
#site-header.scrolled {
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
}

/* ── Mobile Menu ──────────────────────────────────────────── */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  opacity: 0;
}
#mobile-menu.open {
  max-height: 600px;
  opacity: 1;
}

/* ── FAB Zalo Tooltip ─────────────────────────────────────── */
.zalo-tooltip {
  opacity: 0;
  transform: translateX(10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.zalo-fab-wrapper:hover .zalo-tooltip {
  opacity: 1;
  transform: translateX(0);
}

/* ── Admin Sidebar ────────────────────────────────────────── */
#admin-sidebar {
  transition: transform 0.25s ease;
}
@media (max-width: 767px) {
  #admin-sidebar {
    transform: translateX(-100%);
  }
  #admin-sidebar.open {
    transform: translateX(0);
  }
}

/* ── Loading Spinner ──────────────────────────────────────── */
.page-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}
.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #dce1ff;
  border-top-color: #0037b0;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Active Nav Underline ─────────────────────────────────── */
nav a.nav-active {
  color: #0037b0 !important;
  font-weight: 700;
  position: relative;
}
nav a.nav-active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0; right: 0;
  height: 2px;
  background: #0037b0;
  border-radius: 2px;
}

/* ── Print ────────────────────────────────────────────────── */
@media print {
  #site-header, .fab-container, footer { display: none !important; }
  main { margin-top: 0 !important; }
}
/* Accessibility and responsive corrections */
html { --header-height: 104px; scroll-padding-top: calc(var(--header-height) + 1rem); }
body { overflow-wrap: break-word; }
#main-content { padding-top: var(--header-height); }
.skip-link { position: fixed; top: .5rem; left: .5rem; z-index: 100; padding: .75rem 1rem; background: #fff; color: #0037b0; transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid #0037b0; outline-offset: 3px; }
#mobile-menu { visibility: hidden; }
#mobile-menu.open { visibility: visible; max-height: calc(100dvh - var(--header-height)); overflow-y: auto; }
.bg-secondary-container.text-on-secondary { color: #341100; }
@media (max-width: 480px) {
 #site-header > div:nth-child(2) { padding-inline: .75rem; gap: .4rem; }
 #site-header img { max-width: 85px; }
 #site-header .w-8.h-8 { display: none; }
 #site-header a[href^="tel:"] { padding-inline: .5rem; }
 #main-content h1 { font-size: 30px; line-height: 1.25; }
}
@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media (max-width: 640px) { html { --header-height: 160px; } }