/* Trang chủ ba hướng. CSS khung lấy từ templates/website.html của kit Noir 2.0 (bỏ vụ án mẫu và bảng giá), chỉ dùng token. */
html[data-kit] [hidden] { display: none !important; }
html[data-kit] .sec { padding: clamp(64px, 9vw, 112px) 0; border-top: 1px solid color-mix(in srgb, var(--ivory) 6%, transparent); }
html[data-kit] .sec-head { display: grid; gap: 14px; margin-bottom: 36px; max-width: 700px; }
html[data-kit] .sec-head--c { margin-inline: auto; text-align: center; justify-items: center; }
html[data-kit] .sec h2 { text-wrap: balance; }

/* Nav */
html[data-kit] .nav-cta { margin-left: 8px; }
html[data-kit] .nr-nav-link { white-space: nowrap; }
html[data-kit] .nav-toggle { display: none; margin-left: auto; }
@media (max-width: 1100px) {
  html[data-kit] .nav-toggle { display: inline-flex; }
  html[data-kit] .nr-nav-links { display: none; position: absolute; top: 68px; left: 0; right: 0; margin: 0; flex-direction: column; gap: 0; padding: 8px 16px 20px; background: color-mix(in srgb, var(--ink) 97%, transparent); box-shadow: 0 24px 40px -20px #000; }
  html[data-kit] .nr-nav-links.is-open { display: flex; }
  html[data-kit] .nr-nav-link { padding: 14px 8px; border-bottom: 1px solid color-mix(in srgb, var(--ivory) 6%, transparent); }
  html[data-kit] .nr-nav-link[aria-current="page"]::after { left: 8px; right: auto; width: 24px; bottom: 8px; }
  html[data-kit] .nav-cta { margin: 14px 0 0; }
}

/* Hero */
html[data-kit] .hero { min-height: min(820px, 100svh); display: grid; align-items: center; }
html[data-kit] .hero-grid { position: relative; z-index: 4; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(24px, 5vw, 72px); align-items: center; padding: 72px 0 80px; }
html[data-kit] .hero-title { font-size: clamp(3.25rem, 7.4vw, 6.75rem); line-height: 1; font-weight: 900; }
html[data-kit] .hero-copy { display: grid; gap: 24px; }
html[data-kit] .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
html[data-kit] .hero-proof { display: flex; align-items: center; gap: 14px; color: var(--smoke); font-size: var(--t-sm); }
html[data-kit] .hero-lamp { position: absolute; z-index: 1; right: 26%; top: 0; width: 2px; height: 22%; background: linear-gradient(var(--coal-2), var(--coal-3)); }
html[data-kit] .hero-lamp::after { content: ""; position: absolute; left: -18px; bottom: -8px; width: 38px; height: 12px; border-radius: 0 0 20px 20px; background: var(--coal-2); box-shadow: 0 10px 60px 30px rgb(var(--amber-glow) / 0.22), 0 6px 0 -2px var(--amber-hi); }
html[data-kit] .peek { display: grid; gap: 16px; padding: 28px 24px 22px; }
html[data-kit] .peek-top { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px; }
html[data-kit] .peek-top noir-character { width: clamp(120px, 15vw, 190px); height: clamp(120px, 15vw, 190px); margin: -34px -6px -14px 0; }
html[data-kit] .peek-q { font-weight: 600; font-size: 1.0625rem; margin: 0; }
html[data-kit] .peek-opts { display: grid; gap: 10px; }
html[data-kit] .peek-opts .nr-option { padding: 13px 16px; }
html[data-kit] .peek-foot { display: flex; align-items: center; gap: 14px; font-size: var(--t-sm); color: var(--smoke); }
html[data-kit] .peek-foot .nr-progress { flex: 1; }
@media (max-width: 900px) {
  html[data-kit] .hero { align-items: start; }
  html[data-kit] .hero-grid { grid-template-columns: 1fr; padding: 40px 0 56px; }
  html[data-kit] .hero-lamp { right: 12%; }
}

/* Bốn thám tử */
html[data-kit] .duo { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 0; margin-top: 20px; border-radius: var(--r-2); overflow: hidden; box-shadow: inset 0 0 0 1px var(--coal-3); background: var(--coal); }
html[data-kit] .duo-stage { position: relative; min-height: 400px; display: grid; place-items: end center; background: radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--amber) 8%, var(--ink)), var(--ink) 70%); }
html[data-kit] .duo-stage .nr-backdrop { opacity: 0.8; }
html[data-kit] .duo-stage noir-character { position: relative; z-index: 2; width: min(340px, 90%); height: min(340px, 90%); }
html[data-kit] .duo-body { padding: clamp(24px, 4vw, 44px); display: grid; gap: 22px; align-content: center; }
html[data-kit] .duo-body h3 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
html[data-kit] .asks { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
html[data-kit] .asks li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; color: var(--ivory); }
html[data-kit] .asks noir-icon { color: var(--amber); margin-top: 2px; }
html[data-kit] .duo-case { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--coal-3); color: var(--ivory-dim); font-size: var(--t-sm); }
html[data-kit] .tabs-wrap { display: flex; }
@media (max-width: 900px) { html[data-kit] .duo { grid-template-columns: 1fr; } html[data-kit] .duo-stage { min-height: 300px; } }
html[data-kit] .neon-tag { color: color-mix(in srgb, var(--neon) 55%, var(--ivory)); }

/* Ba bước */
html[data-kit] .steps { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 88px); align-items: start; }
html[data-kit] .steps-sticky { position: sticky; top: 100px; display: grid; gap: 18px; }
html[data-kit] .step-list { list-style: none; margin: 0; padding: 0; display: grid; counter-reset: s; }
html[data-kit] .step { counter-increment: s; position: relative; display: grid; grid-template-columns: 76px 1fr; gap: 20px; padding: 0 0 44px; }
html[data-kit] .step:last-child { padding-bottom: 0; }
html[data-kit] .step::before { content: ""; position: absolute; left: 37px; top: 70px; bottom: 6px; width: 1px; background: linear-gradient(var(--amber-lo), transparent); }
html[data-kit] .step:last-child::before { display: none; }
html[data-kit] .step-n { width: 76px; height: 76px; display: grid; place-items: center; border-radius: 50%; font: 600 2rem/1 var(--f-display); color: var(--amber); background: var(--coal); box-shadow: inset 0 0 0 1.5px var(--amber-lo), 0 0 30px -10px rgb(var(--amber-glow) / 0.6); }
html[data-kit] .step-n::before { content: counter(s); }
html[data-kit] .step h3 { margin-bottom: 8px; }
html[data-kit] .step p { margin: 0; color: var(--ivory-dim); max-width: 52ch; }
html[data-kit] .step-tag { display: inline-flex; margin-top: 12px; }
@media (max-width: 900px) { html[data-kit] .steps { grid-template-columns: 1fr; } html[data-kit] .steps-sticky { position: static; } html[data-kit] .step { grid-template-columns: 56px 1fr; gap: 14px; } html[data-kit] .step-n { width: 56px; height: 56px; font-size: 1.5rem; } html[data-kit] .step::before { left: 27px; top: 52px; } }

/* Lời chứng thực */
html[data-kit] .quotes { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
html[data-kit] .quote-main { padding: clamp(28px, 4vw, 48px); display: grid; gap: 28px; align-content: space-between; }
html[data-kit] .quote-main blockquote { margin: 0; font: 500 clamp(1.375rem, 2.6vw, 2rem)/1.35 var(--f-body); letter-spacing: -0.005em; text-wrap: pretty; }
html[data-kit] .quote-side { display: grid; gap: 20px; }
html[data-kit] .quote-side .nr-case { padding: 22px; display: grid; gap: 16px; }
html[data-kit] .quote-side blockquote { margin: 0; color: var(--ivory-dim); }
html[data-kit] .who { display: flex; align-items: center; gap: 12px; }
html[data-kit] .who b { display: block; font-weight: 600; }
html[data-kit] .who small { color: var(--smoke); font-size: var(--t-sm); }
@media (max-width: 900px) { html[data-kit] .quotes { grid-template-columns: 1fr; } }

/* FAQ */
html[data-kit] .faq { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(28px, 6vw, 88px); align-items: start; }
html[data-kit] .faq-side { position: sticky; top: 100px; display: grid; gap: 16px; }
html[data-kit] .faq-list { border-top: 1px solid var(--coal-3); }
@media (max-width: 900px) { html[data-kit] .faq { grid-template-columns: 1fr; } html[data-kit] .faq-side { position: static; } }

/* CTA cuối */
html[data-kit] .final { min-height: 520px; display: grid; place-items: center; text-align: center; }
html[data-kit] .final-in { position: relative; z-index: 4; display: grid; gap: 24px; justify-items: center; padding: 72px 0; }
html[data-kit] .final h2 { font-size: clamp(2.5rem, 6vw, 4.75rem); max-width: 14ch; }
html[data-kit] .final noir-character { width: 120px; height: 120px; }
html[data-kit] .nr-nav-link:focus-visible, html[data-kit] footer a:focus-visible { outline-offset: 2px; }

html[data-kit] footer { padding: 56px 0 40px; border-top: 1px solid color-mix(in srgb, var(--ivory) 6%, transparent); color: var(--smoke); font-size: var(--t-sm); }
html[data-kit] .foot { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 32px; }
html[data-kit] .foot h4 { margin: 0 0 12px; font: 600 var(--t-sm)/1 var(--f-body); color: var(--ivory); }
html[data-kit] .foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
html[data-kit] .foot a { text-decoration: none; }
html[data-kit] .foot a:hover { color: var(--amber); }
html[data-kit] .foot-end { margin-top: 40px; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--ivory) 6%, transparent); }
@media (max-width: 700px) { html[data-kit] .foot { grid-template-columns: 1fr 1fr; } html[data-kit] .foot > :first-child { grid-column: 1 / -1; } }

/* Sân khấu ba hướng: ảnh thật làm nền, nhân vật đứng trước */
html[data-kit] .duo-stage { overflow: hidden; }
html[data-kit] .stage-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.82) contrast(1.04); }
html[data-kit] .duo-stage::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 10%, transparent) 30%, color-mix(in srgb, var(--ink) 88%, transparent)); }
html[data-kit] .duo-stage noir-character { width: min(200px, 46%); height: min(200px, 46%); justify-self: end; margin: 0 16px -6px 0; }
html[data-kit] .stage-cap { position: absolute; left: 20px; bottom: 18px; z-index: 2; max-width: 60%; color: var(--ivory-dim); font-size: var(--t-sm); }
html[data-kit] .duo-panel { display: grid; gap: 18px; }
html[data-kit] .duo-panel .nr-body { margin: 0; color: var(--ivory-dim); }
html[data-kit] .duo-go { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
html[data-kit] .duo-for { font-family: var(--f-mono); font-size: var(--t-sm); color: var(--amber); letter-spacing: 0.04em; }

/* Bằng chứng thật */
html[data-kit] .proof-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 28px; }
html[data-kit] .proof-stat { padding: 22px 24px; display: grid; gap: 6px; }
html[data-kit] .proof-stat b { font: 600 clamp(2rem, 4vw, 3rem)/1 var(--f-display); color: var(--amber); }
html[data-kit] .proof-stat span { color: var(--ivory-dim); font-size: var(--t-sm); }
html[data-kit] .proof-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
html[data-kit] .proof-item { margin: 0; display: grid; gap: 10px; align-content: start; }
html[data-kit] .proof-item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border-radius: var(--r-2); box-shadow: inset 0 0 0 1px var(--coal-3); background: var(--coal); }
html[data-kit] .proof-item--wide { grid-column: span 2; }
html[data-kit] .proof-item--wide img { aspect-ratio: 16 / 10; object-position: center; }
html[data-kit] .proof-item figcaption { color: var(--ivory-dim); font-size: var(--t-sm); line-height: 1.45; }
html[data-kit] .proof-item figcaption b { display: block; color: var(--ivory); font-weight: 600; }
@media (max-width: 900px) { html[data-kit] .proof-stats { grid-template-columns: 1fr; } html[data-kit] .proof-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { html[data-kit] .proof-item--wide { grid-column: 1 / -1; } }

/* Về tui */
html[data-kit] .about { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 80px); align-items: center; }
html[data-kit] .about-photo { margin: 0; position: relative; }
html[data-kit] .about-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-2); box-shadow: inset 0 0 0 1px var(--coal-3); }
html[data-kit] .about-copy { display: grid; gap: 18px; }
html[data-kit] .about-copy p { margin: 0; color: var(--ivory-dim); max-width: 58ch; }
html[data-kit] .about-roles { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
html[data-kit] .about-roles li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; color: var(--ivory); }
html[data-kit] .about-roles noir-icon { color: var(--amber); margin-top: 2px; }
@media (max-width: 900px) { html[data-kit] .about { grid-template-columns: 1fr; } html[data-kit] .about-photo { max-width: 420px; } }

/* Blog nổi bật */
html[data-kit] .posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
html[data-kit] .post { display: grid; grid-template-rows: auto 1fr; padding: 0; overflow: hidden; text-decoration: none; color: inherit; transition: transform var(--d-mid); }
html[data-kit] .post:hover { transform: translateY(-3px); }
html[data-kit] .post img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
html[data-kit] .post-body { padding: 20px 22px 24px; display: grid; gap: 10px; align-content: start; }
html[data-kit] .post-body h3 { font-size: 1.25rem; line-height: 1.3; margin: 0; }
html[data-kit] .post-body p { margin: 0; color: var(--smoke); font-size: var(--t-sm); }
html[data-kit] .posts-more { margin-top: 28px; display: flex; justify-content: center; }
@media (max-width: 900px) { html[data-kit] .posts { grid-template-columns: 1fr; } }

html[data-kit] .final-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* Skip link: hidden until focused */
html[data-kit] .nr-skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;background:var(--amber);color:var(--amber-ink);border-radius:var(--r-1);font-weight:600;text-decoration:none}
html[data-kit] .nr-skip:focus{top:12px}

/* Site globals.css colors h1–h6 for the light theme; let kit pages inherit the kit text color */
html[data-kit] h1, html[data-kit] h2, html[data-kit] h3, html[data-kit] h4, html[data-kit] h5, html[data-kit] h6 { color: inherit; letter-spacing: normal; }