/* BFVN Theme — shared site styles (loaded sau Tailwind CDN)
 * Vai trò: utilities ngoài Tailwind + pattern grain + mega menu + prose
 */

html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: #FAFCFE;
  color: #0B1B26;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: 'Lora', Georgia, serif; letter-spacing: -0.01em; }

/* Pill (eyebrow tag) */
.pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .75rem; border-radius: 9999px;
  font-size: .72rem; font-weight: 500; line-height: 1; letter-spacing: .01em;
}

/* Timeline dot (mission section) */
.timeline-dot {
  width: 14px; height: 14px; border-radius: 9999px;
  background: #1FB9FB; box-shadow: 0 0 0 4px rgba(31,185,251,.18);
}

/* Grain texture overlay (hero backgrounds) */
.grain::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(5,59,87,.05) 1px, transparent 1px);
  background-size: 3px 3px; pointer-events: none; mix-blend-mode: multiply;
}

/* MEGA MENU (full container width) */
.nav-row { position: relative; }
.has-mega { position: static; }
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #FAFCFE; border: 1px solid #DCE9F3;
  border-radius: 24px; box-shadow: 0 24px 60px -20px rgba(5,59,87,.25);
  padding: 28px 32px; opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 50;
  margin-top: 8px;
}
.has-mega:hover > .mega,
.has-mega:focus-within > .mega,
.mega.open {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
.mega-link { display: block; padding: 10px 12px; border-radius: 12px; transition: background .15s; }
.mega-link:hover { background: #F0FAFF; }
.mega-link .ttl { font-weight: 600; font-size: .92rem; color: #0B1B26; }
.mega-link .desc { font-size: .78rem; color: #52708A; line-height: 1.4; margin-top: 2px; }
.nav-caret { transition: transform .2s; }
.has-mega:hover .nav-caret,
.has-mega.open .nav-caret { transform: rotate(180deg); }

/* PAGE HERO gradient (used by inner pages) */
.page-hero {
  background:
    radial-gradient(1200px 400px at 80% -50%, rgba(31,185,251,.12), transparent 60%),
    radial-gradient(800px 300px at 0% 100%, rgba(31,185,251,.08), transparent 70%),
    linear-gradient(180deg, #F0FAFF 0%, #FAFCFE 100%);
}

/* Breadcrumb */
.crumb { font-size: .78rem; color: #52708A; }
.crumb a { color: #52708A; }
.crumb a:hover { color: #0589C5; }

/* Utility */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* MOBILE menu */
.mobile-menu { display: none; }
.mobile-menu.open { display: block; }
.mobile-sub { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.mobile-sub.open { max-height: 1500px; }

/* PROSE-PVF (long-form article content) */
.prose-pvf p { color: #1F3B4A; line-height: 1.75; margin-bottom: 1rem; }
.prose-pvf h2 { font-size: 1.75rem; font-weight: 600; margin-top: 2.5rem; margin-bottom: 1rem; }
.prose-pvf h3 { font-size: 1.25rem; font-weight: 600; margin-top: 1.75rem; margin-bottom: .75rem; }
.prose-pvf ul { list-style: disc; padding-left: 1.25rem; color: #1F3B4A; margin-bottom: 1rem; }
.prose-pvf ul li { margin-bottom: .35rem; line-height: 1.7; }
.prose-pvf a { color: #0589C5; text-decoration: underline; text-underline-offset: 3px; }
.prose-pvf blockquote {
  border-left: 3px solid #1FB9FB; padding: .25rem 0 .25rem 1.25rem;
  font-style: italic; color: #1F3B4A; margin: 1.25rem 0;
}

/* FADE animations (Intersection Observer adds .is-visible) */
.fade-up, .fade-left, .fade-right { opacity: 0; transition: opacity .6s ease, transform .6s ease; }
.fade-up    { transform: translateY(24px); }
.fade-left  { transform: translateX(-24px); }
.fade-right { transform: translateX(24px); }
.fade-up.is-visible, .fade-left.is-visible, .fade-right.is-visible {
  opacity: 1; transform: translate(0, 0);
}

/* Card hover lift */
.card-lift { transition: box-shadow .25s ease, transform .25s ease; }
.card-lift:hover { transform: translateY(-2px); }