/* CVHelper — style dùng chung cho các trang nội dung (blog, chính sách, 404).
   Cùng palette/typography với index.html: nền đêm, vàng cổ, CTA burnt peach. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #0A0A0F; --bg-2: #0E0B13; --bg-3: #131018;
  --gold: #C9A84C; --cta: #D96C4A; --cta-dark: #C05A39;
  --text: #F0EBE3; --text-2: rgba(255,255,255,0.85); --text-3: rgba(255,255,255,0.62);
  --border: rgba(201,168,76,0.1); --border-2: rgba(201,168,76,0.22);
  --wrap: 720px;
}
html { scroll-behavior: smooth; }
body {
  font-family: 'Nunito Sans', sans-serif; background: var(--bg); color: var(--text);
  font-size: 17px; line-height: 1.8; overflow-x: hidden; min-height: 100vh;
  display: flex; flex-direction: column;
}
body::before { /* bầu trời sao rất nhạt */
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.5;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,0.5), transparent 60%),
    radial-gradient(1px 1px at 78% 12%, rgba(255,255,255,0.4), transparent 60%),
    radial-gradient(1px 1px at 33% 72%, rgba(255,255,255,0.35), transparent 60%),
    radial-gradient(1px 1px at 88% 64%, rgba(255,255,255,0.4), transparent 60%),
    radial-gradient(1.5px 1.5px at 55% 40%, rgba(201,168,76,0.5), transparent 60%),
    radial-gradient(1px 1px at 8% 88%, rgba(255,255,255,0.3), transparent 60%),
    radial-gradient(600px 400px at 85% -10%, rgba(201,168,76,0.06), transparent 70%),
    radial-gradient(500px 400px at -10% 110%, rgba(217,108,74,0.05), transparent 70%);
}
main, nav, footer { position: relative; z-index: 1; }
a { color: var(--gold); }
a:focus-visible, button:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }

/* NAV */
nav {
  position: sticky; top: 0; z-index: 100; height: 58px;
  background: rgba(10,10,15,0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0 max(1rem, calc(50% - 680px));
}
.nav-logo {
  font-size: 14px; font-weight: 700; color: var(--text); text-decoration: none;
  letter-spacing: 0.12em; text-transform: uppercase; display: flex; align-items: center; gap: 6px;
}
.logo-star { color: var(--gold); }
.nav-links { display: flex; margin-left: auto; }
.nav-links a {
  font-size: 10px; font-weight: 600; color: var(--text-2); text-decoration: none;
  padding: 6px 14px; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
}
.nav-links a:hover, .nav-links a[aria-current] { color: var(--gold); }
.nav-cta {
  background: var(--cta); color: #FCFCFC; font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; padding: 9px 22px; text-decoration: none; white-space: nowrap;
}
.nav-cta:hover { background: var(--cta-dark); }
@media (max-width: 640px) {
  nav { gap: 0.5rem; }
  .nav-links a { padding: 6px 8px; letter-spacing: 0.08em; }
  .nav-links a.hide-sm { display: none; }
  .nav-cta { padding: 8px 12px; letter-spacing: 0.1em; }
}

/* LAYOUT */
main { flex: 1; width: 100%; max-width: calc(var(--wrap) + 2rem); margin: 0 auto; padding: 72px 1rem 96px; }
main.wide { max-width: 1040px; }
.eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 18px; display: flex; align-items: center; gap: 10px;
}
.eyebrow::before, .eyebrow::after { content: '✦'; font-size: 9px; opacity: 0.6; }
h1, h2, h3 { font-family: 'Playfair Display', serif; font-weight: 900; line-height: 1.2; color: var(--text); }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); margin-bottom: 18px; text-wrap: balance; }
h1 em { color: var(--gold); font-style: italic; }
.lede { color: var(--text-2); font-size: 1.08rem; max-width: 60ch; }
.meta { font-size: 12px; color: var(--text-3); letter-spacing: 0.06em; margin-top: 14px; }
hr.rule { border: 0; height: 1px; margin: 40px 0; background: linear-gradient(90deg, transparent, var(--border-2), transparent); }

/* ARTICLE */
.prose { margin-top: 8px; }
.prose h2 { font-size: 1.55rem; margin: 48px 0 14px; }
.prose h2 .num { color: var(--gold); font-style: italic; margin-right: 10px; }
.prose h3 { font-size: 1.15rem; margin: 28px 0 8px; }
.prose p { color: var(--text-2); margin: 0 0 18px; }
.prose ul, .prose ol { color: var(--text-2); margin: 0 0 20px 1.3em; }
.prose li { margin-bottom: 8px; padding-left: 4px; }
.prose li::marker { color: var(--gold); }
.prose strong { color: var(--text); }
.prose code { font-size: 0.9em; background: var(--bg-3); border: 1px solid var(--border); padding: 1px 6px; }
.omen {
  border: 1px solid var(--border-2); background: rgba(201,168,76,0.04);
  padding: 22px 26px; margin: 28px 0; position: relative;
}
.omen::before { content: '✦ Lời sấm'; display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.omen p:last-child { margin-bottom: 0; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0 26px; }
.compare > div { border: 1px solid var(--border); background: var(--bg-2); padding: 16px 18px; font-size: 15px; color: var(--text-2); }
.compare .label { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 6px; display: block; }
.compare .bad .label { color: var(--text-3); }
.compare .good { border-color: var(--border-2); }
.compare .good .label { color: var(--gold); }
@media (max-width: 600px) { .compare { grid-template-columns: 1fr; } }

/* CTA box cuối bài */
.cta-box {
  margin-top: 56px; border: 1px solid var(--border-2); background: var(--bg-2);
  padding: 32px; text-align: center;
}
.cta-box h3 { font-size: 1.4rem; margin-bottom: 8px; }
.cta-box p { color: var(--text-3); margin-bottom: 20px; font-size: 15px; }
.btn-primary, .btn-ghost {
  display: inline-block; font-family: 'Nunito Sans', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; padding: 13px 30px; text-decoration: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.btn-primary { background: var(--cta); color: #FCFCFC; }
.btn-primary:hover { background: var(--cta-dark); }
.btn-ghost { border: 1px solid var(--border-2); color: var(--text-2); margin-left: 8px; }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
@media (max-width: 480px) { .btn-ghost { margin: 10px 0 0; } }

/* BLOG GRID */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; margin-top: 48px; }
.post-card {
  display: flex; flex-direction: column; gap: 10px; text-decoration: none;
  border: 1px solid var(--border); background: var(--bg-2); padding: 26px 24px 22px;
  transition: border-color 0.2s, transform 0.2s; min-height: 250px; position: relative; overflow: hidden;
}
.post-card:hover { border-color: var(--border-2); transform: translateY(-3px); }
.post-card .arcana {
  position: absolute; right: -6px; top: -14px; font-family: 'Playfair Display', serif; font-weight: 900;
  font-size: 92px; color: rgba(201,168,76,0.06); line-height: 1; pointer-events: none;
}
.post-card .tag { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.post-card h2 { font-size: 1.3rem; }
.post-card p { font-size: 15px; color: var(--text-3); line-height: 1.65; flex: 1; }
.post-card .more { font-size: 11px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-2); }
.post-card:hover .more { color: var(--cta); }
.post-card.soon { opacity: 0.55; pointer-events: none; border-style: dashed; }

/* FOOTER */
footer {
  border-top: 1px solid var(--border); background: var(--bg-2);
  padding: 40px max(1rem, calc(50% - 680px)); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px;
}
.footer-logo { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); text-decoration: none; }
.footer-tagline { font-size: 12px; color: var(--text-3); letter-spacing: 0.06em; }
.footer-links { display: flex; gap: 18px; margin-left: auto; flex-wrap: wrap; }
.footer-links a { font-size: 11px; color: var(--text-3); text-decoration: none; letter-spacing: 0.08em; text-transform: uppercase; }
.footer-links a:hover { color: var(--gold); }
footer small { width: 100%; font-size: 10px; color: var(--text-3); letter-spacing: 0.06em; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }