/* ==========================================================================
   Kiến Thức 365 — "Đông Hồ" Neo-Folk theme layer
   Loaded after each page's inline styles. Palette: đỏ / vàng / xanh / trắng.
   ========================================================================== */
:root{
  --kt-red:#da251d; --kt-red-dark:#b01c17;
  --kt-yellow:#ffcd00; --kt-yellow-deep:#e3a600;
  --kt-navy:#1d3a6b; --kt-navy-2:#2e5a8c;
  --kt-ink:#16223f; --kt-paper:#fffdf4; --kt-line:#16223f;
}

/* ---- Base type + ground ------------------------------------------------- */
html body{
  font-family:'Be Vietnam Pro',system-ui,-apple-system,sans-serif;
  background:var(--kt-paper);
  color:var(--kt-ink);
}
html body h1, html body h2, html body h3,
html body .nav-logo, html body .footer-logo, html body .footer-logo-new,
html body .hero h1, html body .page-header h1,
html body .card-title, html body .section-title, html body .section-title h2,
html body .dish-name-text, html body .detail-logo,
html body .picker-card h3, html body .topic-card h3, html body .dish-card h3,
html body .practice-cta-box h2, html body .tab-title, html body .cta-title,
html body .comic-title, html body .m-h1{
  font-family:'Baloo 2','Be Vietnam Pro',system-ui,cursive;
  letter-spacing:-0.005em;
}

/* ---- Navigation: navy bar, yellow underline ---------------------------- */
html body .site-nav, html body .nav{
  background:var(--kt-navy);
  border-bottom:4px solid var(--kt-yellow);
}
html body .nav-logo{ color:#fff; }
html body .nav-logo span{ color:var(--kt-yellow); }
html body .nav-links a, html body .nav-links-list a{
  color:#dbe3f2; font-weight:600; border-radius:8px;
}
html body .nav-links a:hover, html body .nav-links-list a:hover,
html body .nav-links a.active, html body .nav-links-list a.active{
  color:var(--kt-ink); background:var(--kt-yellow); text-decoration:none;
}
html body .nav-search{ background:var(--kt-navy-2); border:1px solid var(--kt-navy-2); }
html body .nav-search input{ color:#fff; }
html body .nav-search input::placeholder{ color:#c4d3ee; }
html body .nav-search svg{ color:#c4d3ee; }

/* ---- Cards: bold navy outline + flat offset shadow --------------------- */
html body .card,
html body .essay-card,
html body .dish-card,
html body .topic-card,
html body .q-card,
html body .picker-card,
html body .parent-guide-box,
html body .practice-cta-box,
html body .intro-box,
html body .comic-card{
  border:2px solid var(--kt-line) !important;
  border-radius:14px;
  box-shadow:5px 5px 0 var(--kt-navy);
}
html body .card:hover,
html body .essay-card:hover,
html body .dish-card:hover,
html body .topic-card:hover,
html body .comic-card:hover{
  box-shadow:7px 7px 0 var(--kt-navy);
}
/* modal keeps a heavier frame, no offset (it floats) */
html body .detail-modal{ border:3px solid var(--kt-line); border-radius:16px; box-shadow:0 24px 60px -20px rgba(22,34,63,.6); }

/* ---- Hero / page header ------------------------------------------------- */
html body .hero, html body .page-header{ background:#fff; }
html body .hero h1 em, html body .hero h1 span{ color:var(--kt-red); }
html body .hero-eyebrow, html body .page-eyebrow{
  background:var(--kt-red); color:#fff; border:none; font-weight:700;
}

/* ---- Grade chips / buttons --------------------------------------------- */
html body .grade-btn{
  border:2px solid var(--kt-line); background:#fff; color:var(--kt-ink);
  border-radius:10px; font-weight:600;
}
html body .grade-btn:hover, html body .grade-btn.active{
  background:var(--kt-yellow); color:var(--kt-ink); border-color:var(--kt-line);
}

/* ---- Filter pills (grade + index) ------------------------------------- */
html body .filter-btn{ border:2px solid var(--kt-line); background:#fff; color:var(--kt-ink); font-weight:600; }
html body .filter-btn:hover{ background:var(--kt-yellow); color:var(--kt-ink); }
html body .filter-btn.active,
html body .filter-btn[class*="active-"]{
  background:var(--kt-red) !important; color:#fff !important; border-color:var(--kt-line) !important;
}

/* ---- Subject tabs on grade pages -------------------------------------- */
html body .tab-btn.active-nv, html body .tab-btn.active-av{
  background:var(--kt-yellow); border-color:var(--kt-line);
}
html body .tab-btn.active-nv .tab-title, html body .tab-btn.active-av .tab-title{ color:var(--kt-ink); }

/* ---- Index tabs (underline style) — keep underline, make it red ------- */
html body .tabs .tab-btn.active{ color:var(--kt-red); border-bottom-color:var(--kt-red); }

/* ---- Links, arrows, "read" CTAs --------------------------------------- */
html body a{ color:var(--kt-red); }
html body .section-link, html body .card-arrow, html body .card-read,
html body .m-card-read, html body .topic-cta, html body .btn-link{ color:var(--kt-red); font-weight:700; }

/* ---- Buttons / call-to-action ----------------------------------------- */
html body .btn-read{
  background:var(--kt-yellow); color:var(--kt-ink); font-weight:700;
  border-top:2px solid var(--kt-line);
}
html body .btn-read:hover{ background:var(--kt-yellow-deep); }
html body .bottom-nav a{
  border:2px solid var(--kt-line); border-radius:12px; font-weight:700;
  box-shadow:3px 3px 0 var(--kt-navy); color:var(--kt-ink);
}
html body .bottom-nav a:hover{ background:var(--kt-yellow); text-decoration:none; }

/* ---- Level tabs (practice) -------------------------------------------- */
html body .level-tab{ border:2px solid var(--kt-line); font-weight:700; }
html body .level-tab.active-basic{ background:var(--kt-yellow); color:var(--kt-ink); border-color:var(--kt-line); }
html body .level-tab.active-inter{ background:var(--kt-red); color:#fff; border-color:var(--kt-line); }
html body .level-tab.active-adv{ background:var(--kt-navy); color:#fff; border-color:var(--kt-line); }

/* ---- Practice picker badge -------------------------------------------- */
html body .picker-badge{ background:var(--kt-yellow); color:var(--kt-ink); font-weight:800; }
html body .picker-arrow{ color:var(--kt-red); font-weight:800; }

/* ---- Footer ----------------------------------------------------------- */
html body .site-footer{ background:var(--kt-navy); border-top:4px solid var(--kt-yellow); }
html body .site-footer .footer-logo, html body .site-footer .footer-logo-new{ color:#fff; }
html body .site-footer .footer-logo span, html body .site-footer .footer-logo-new span{ color:var(--kt-yellow); }
html body .footer-links a, html body .footer-links-new a{ color:#dbe3f2; }
html body .footer-links a:hover, html body .footer-links-new a:hover{ color:var(--kt-yellow); }
html body .footer-copy, html body .footer-copy-new{ color:#9fb0d0; }

/* ---- Motion courtesy --------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html body *{ transition:none !important; }
}