/* Đông Hồ — Tranh dân gian Đông Hồ: giấy điệp, khắc gỗ, màu thảo mộc. Generated by scripts/gen-styles.mjs; edit scripts/style-specs.mjs instead. */
html[data-kit][data-style="dong-ho"] {
  color-scheme: light;
  --ink: #e4d6bb; --ink-2: #efe4cf; --coal: #f7efdf; --coal-2: #eadcc2; --coal-3: #c2ab84;
  --smoke: #5b4b37; --ivory: #1b1612; --ivory-dim: #3b3026;
  --amber: #c23a22; --amber-hi: #d8553b; --amber-lo: #8f2814; --amber-ink: #fff6ea;
  --neon: #1f5f8b; --neon-lo: color-mix(in srgb, #1f5f8b 70%, #000); --rain: #9a8360; --ok: #2f6b3a;
  --amber-glow: 194 58 34; --neon-glow: 31 95 139;
  --r-1: 0px; --r-2: 0px;
  --shadow-deep: 0 1px 2px rgb(0 0 0 / 0.06), 0 18px 36px -24px rgb(0 0 0 / 0.25);
}
html[data-kit][data-style="dong-ho"] body {
  --f-display: "Fraunces", Georgia, serif; --f-voice: "Fraunces", Georgia, serif; --f-body: "Be Vietnam Pro", system-ui, sans-serif; --f-mono: "IBM Plex Mono", ui-monospace, monospace;
  background: var(--ink-2); color: var(--ivory);
}
html[data-kit][data-style="dong-ho"] :is(.nr-backdrop > canvas, .hero-lamp, .nr-rain, .nr-flashlight, .nr-puddle) { display: none; }
html[data-kit][data-style="dong-ho"] :is(.nr-backdrop, .nr-scene) { background: radial-gradient(circle at 1px 1px, rgb(255 255 255 / 0.55) 1px, transparent 1.6px) 0 0 / 7px 7px, radial-gradient(circle at 4px 5px, rgb(120 90 50 / 0.08) 1px, transparent 1.6px) 0 0 / 9px 9px, var(--ink-2); }
html[data-kit][data-style="dong-ho"] .duo-stage { background: var(--coal-2); }
html[data-kit][data-style="dong-ho"] body.nr-grain::after { display: none; }
html[data-kit][data-style="dong-ho"] noir-character canvas { filter: none; }
html[data-kit][data-style="dong-ho"] :is(.nr-display, h1.nr, h2.nr, h3.nr, .nr-h3, .nr-hero-title, .hero-title) {
  font-family: var(--f-display); font-weight: 900; text-transform: none; letter-spacing: 0; line-height: 1.04;
}
html[data-kit][data-style="dong-ho"] .nr-logo { text-transform: none; font-family: var(--f-display); }
html[data-kit][data-style="dong-ho"] .nr-titlecard.is-in .nr-tl > span { background: linear-gradient(100deg, var(--ivory) 40%, var(--amber-hi) 50%, var(--ivory) 60%) 100% 0 / 300% 100% no-repeat; -webkit-background-clip: text; background-clip: text; }
html[data-kit][data-style="dong-ho"] .nr-neon-text { color: var(--neon); text-shadow: none; }
html[data-kit][data-style="dong-ho"] .nr-lit-text { color: var(--amber); text-shadow: none; }
html[data-kit][data-style="dong-ho"] .nr-redact::after { background: var(--ivory); }
html[data-kit][data-style="dong-ho"] :is(.nr-case, .nr-note, .nr-modal-card, .nr-toast) { background: var(--coal); box-shadow: inset 0 0 0 2px var(--ivory); }
html[data-kit][data-style="dong-ho"] .nr-case::before { background: none; }
html[data-kit][data-style="dong-ho"] :is(.nr-case, .nr-note)::after { display: none; }
html[data-kit][data-style="dong-ho"] .nr-case--featured { background: color-mix(in srgb, var(--amber) 6%, var(--coal)); box-shadow: inset 0 0 0 2px var(--amber); }
html[data-kit][data-style="dong-ho"] .nr-bubble { background: var(--coal-2); }
html[data-kit][data-style="dong-ho"] .duo { box-shadow: inset 0 0 0 2px var(--ivory); }
html[data-kit][data-style="dong-ho"] .step-n { box-shadow: inset 0 0 0 1.5px var(--amber); }
html[data-kit][data-style="dong-ho"] :is(.sec, footer, .foot-end) { border-top-color: var(--coal-3); }
html[data-kit][data-style="dong-ho"] .nr-btn { border-radius: var(--r-2); }
html[data-kit][data-style="dong-ho"] .nr-btn--lamp { background: var(--amber); color: var(--amber-ink); text-shadow: none; box-shadow: 0 2px 0 var(--amber-lo); }
html[data-kit][data-style="dong-ho"] .nr-btn--lamp:hover { background: var(--amber-hi); box-shadow: 0 3px 0 var(--amber-lo); }
html[data-kit][data-style="dong-ho"] .nr-btn--lamp::before, html[data-kit][data-style="dong-ho"] .nr-btn--lamp::after { display: none; }
html[data-kit][data-style="dong-ho"] .nr-btn--ghost { color: var(--ivory); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ivory) 100%, transparent); }
html[data-kit][data-style="dong-ho"] .nr-btn--ghost::before { background: color-mix(in srgb, var(--ivory) 8%, transparent); }
html[data-kit][data-style="dong-ho"] .nr-btn--ghost:hover { box-shadow: inset 0 0 0 2px var(--ivory); }
html[data-kit][data-style="dong-ho"] .nr-btn--coal { background: var(--coal-2); color: var(--ivory); box-shadow: 0 3px 0 var(--coal-3); }
html[data-kit][data-style="dong-ho"] .nr-btn--coal:hover { background: color-mix(in srgb, var(--ivory) 6%, var(--coal-2)); }
html[data-kit][data-style="dong-ho"] .nr-btn--neon { color: var(--neon); text-shadow: none; }
html[data-kit][data-style="dong-ho"] :is(.nr-chip, .nr-option) { box-shadow: inset 0 0 0 2px var(--coal-3), 0 3px 0 var(--coal-3); }
html[data-kit][data-style="dong-ho"] .nr-option:hover { box-shadow: inset 0 0 0 2px var(--smoke), 0 3px 0 var(--coal-3); }
html[data-kit][data-style="dong-ho"] .nr-option[aria-checked="true"] { background: color-mix(in srgb, var(--amber) 10%, var(--coal)); box-shadow: inset 0 0 0 2px var(--amber), 0 3px 0 var(--amber-lo); }
html[data-kit][data-style="dong-ho"] .nr-option.is-right { background: color-mix(in srgb, var(--ok) 12%, var(--coal)); }
html[data-kit][data-style="dong-ho"] .nr-option.is-wrong { background: color-mix(in srgb, var(--neon) 10%, var(--coal)); }
html[data-kit][data-style="dong-ho"] :is(.nr-input, .nr-select, .nr-textarea) { background: var(--coal-2); color: var(--ivory); box-shadow: inset 0 0 0 2px var(--coal-3); }
html[data-kit][data-style="dong-ho"] :is(.nr-input, .nr-select, .nr-textarea)::placeholder { color: var(--smoke); }
html[data-kit][data-style="dong-ho"] :is(.nr-input, .nr-select, .nr-textarea):hover { box-shadow: inset 0 0 0 2px var(--smoke); }
html[data-kit][data-style="dong-ho"] :is(.nr-input, .nr-select, .nr-textarea):focus { background: var(--coal); box-shadow: inset 0 0 0 2px var(--amber); }
html[data-kit][data-style="dong-ho"] :is(.nr-field.is-error .nr-hint, .nr-verdict--wrong .nr-verdict-title, .nr-stat-delta.is-down) { color: var(--neon); }
html[data-kit][data-style="dong-ho"] .nr-badge--neon { color: var(--neon); }
html[data-kit][data-style="dong-ho"] .nr-progress { background: var(--coal-3); box-shadow: none; }
html[data-kit][data-style="dong-ho"] .nr-progress > i { background: var(--amber); }
html[data-kit][data-style="dong-ho"] .nr-progress > i::after { background: var(--amber-hi); }
html[data-kit][data-style="dong-ho"] .nr-switch::after { background: var(--smoke); }
html[data-kit][data-style="dong-ho"] .nr-streak-lamp { background: var(--coal-3); }
html[data-kit][data-style="dong-ho"] .nr-verdict { background: color-mix(in srgb, var(--ok) 6%, var(--coal)); }
html[data-kit][data-style="dong-ho"] .nr-verdict--wrong { background: color-mix(in srgb, var(--neon) 6%, var(--coal)); }
html[data-kit][data-style="dong-ho"] .nr-nav { background: color-mix(in srgb, var(--ink-2) 88%, transparent); box-shadow: 0 1px 0 var(--coal-3); }
html[data-kit][data-style="dong-ho"] .nr-nav-links { box-shadow: none; }
@media (max-width: 1100px) { html[data-kit][data-style="dong-ho"] .nr-nav-links { background: var(--ink-2); box-shadow: 0 1px 0 var(--coal-3); } }
html[data-kit][data-style="dong-ho"] .nr-stylepick { background: var(--coal); box-shadow: inset 0 0 0 1px var(--coal-3); }
html[data-kit][data-style="dong-ho"] .nr-stylepick button { color: var(--ivory-dim); }
html[data-kit][data-style="dong-ho"] .nr-stylepick button:hover { color: var(--ivory); }
html[data-kit][data-style="dong-ho"] .nr-stylepick button[aria-pressed="true"] { background: var(--ivory); color: var(--ink-2); }
html[data-kit][data-style="dong-ho"] .nr-stylepick :is(button, select):focus-visible { outline-color: var(--amber); }
html[data-kit][data-style="dong-ho"] .nr-stylepick select { color: var(--ivory); background-color: var(--coal); }
@media (prefers-reduced-motion: reduce) { html[data-kit][data-style="dong-ho"] :is(.nr-btn, .nr-case--link):hover { transform: none; } }