/* Hallmark · macrostructure: Long Document (marketing) · tone: warm editorial, ceremonial · anchor hue: rose-red 18
 * theme: custom · vibe: "thiệp đỏ, giấy dó ấm, mực son, gọn gàng" · paper oklch(97.6% 0.009 30) · accent oklch(48% 0.19 18) rose-red
 * display: Playfair Display (roman only) · body: Be Vietnam Pro · axes: light / high-contrast-serif / warm
 * Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V3
 * Site chrome only (homepage, /mau/, bảng giá, dashboard, editor chrome, preview chrome). Invitations/templates/skins are NOT touched:
 * editor overrides are scoped to chrome containers so the classic in-page preview (#invitation) keeps its own tokens.
 * Rollback: remove the <link> to this file (and the font link) from the pages. */

:root {
  --st-paper: oklch(97.6% 0.009 30);
  --st-paper-2: oklch(95% 0.016 22);
  --st-paper-3: oklch(92.5% 0.024 20);
  --st-card: oklch(99% 0.005 30);
  --st-rule: oklch(87% 0.02 20);
  --st-muted: oklch(45% 0.025 18);
  --st-ink: oklch(22% 0.025 18);
  --st-accent: oklch(48% 0.19 18);
  --st-accent-hover: oklch(41% 0.17 17);
  --st-accent-deep: oklch(30% 0.11 16);
  --st-accent-tint: oklch(94% 0.035 15);
  --st-on-accent: oklch(98.5% 0.008 30);
  --st-on-deep: oklch(94% 0.02 30);
  --st-on-deep-muted: oklch(82% 0.03 25);
  --st-focus: oklch(55% 0.2 18);
  --st-font-display: 'Playfair Display', 'Noto Serif', Georgia, serif;
  --st-font-body: 'Be Vietnam Pro', system-ui, sans-serif;
  --st-ease-out: cubic-bezier(.22, .61, .36, 1);
  --st-shadow: 0 1px 2px oklch(30% 0.05 18 / .06), 0 14px 34px oklch(30% 0.08 18 / .07);

  /* existing marketing tokens (css/home.css) re-pointed to the new palette */
  --bg: var(--st-paper); --bg2: var(--st-paper-2); --ink: var(--st-ink); --muted: var(--st-muted);
  --gold: var(--st-accent); --gold2: var(--st-accent-hover); --line: var(--st-rule);
  --card: var(--st-card); --dark: var(--st-accent-deep);
  --serif: var(--st-font-display); --sans: var(--st-font-body);
  --shadow: var(--st-shadow);
}
html, body { overflow-x: clip; }
body:not(.editor-body) { font-family: var(--st-font-body); color: var(--st-ink); background: var(--st-paper); }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--st-focus); outline-offset: 2px; }

/* ---------- headings: roman only, emphasis by colour + drawn underline (no italic / script) ---------- */
.hero h1 em, .section-head h2 em, .mg-hero h1 em, .cta-band h2 em {
  font-style: normal; font-family: inherit; font-size: 1em; font-weight: inherit; color: var(--st-accent);
  background: linear-gradient(currentColor, currentColor) 0 92% / 100% 2px no-repeat; padding-bottom: .04em;
}
.hero h1, .section-head h2, .mg-hero h1, .price h3, .tpl-meta h3, .feat h3, .step h3, .pain-card h3, .footer h4, .cta-band h2 { font-family: var(--st-font-display); font-style: normal; letter-spacing: -.005em; overflow-wrap: anywhere; }
.hero h1 { font-weight: 600; line-height: 1.1; }
.section-head h2 { font-weight: 600; }

/* ---------- nav ---------- */
.nav.scrolled { background: color-mix(in oklch, var(--st-paper) 92%, transparent); border-bottom-color: var(--st-rule); }
.nav .logo span { font-family: var(--st-font-display); font-weight: 600; color: var(--st-ink); }
.nav .logo::before { content: "囍"; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; background: var(--st-accent); color: var(--st-on-accent); font: 600 17px/1 'Noto Serif', serif; flex: none; }
.nav .logo img { display: none; }
.nav-links a { opacity: 1; color: var(--st-muted); transition: color .2s var(--st-ease-out); }
.nav-links a:hover, .nav-links a.active { color: var(--st-accent); }
.nav-links a.btn-primary, .nav-links a.btn-primary:hover { color: var(--st-on-accent); }
.nav-links a.active:not(.btn) { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat; padding-bottom: 2px; }

/* ---------- buttons ---------- */
.btn { white-space: nowrap; transition: background-color .2s var(--st-ease-out), border-color .2s var(--st-ease-out), color .2s var(--st-ease-out); }
.btn:hover { transform: none; }
.btn:active { transform: translateY(1px); }
.btn-primary, .cta-band .btn-primary { background: var(--st-accent); color: var(--st-on-accent); box-shadow: none; border-color: var(--st-accent); }
.btn-primary:hover, .cta-band .btn-primary:hover { background: var(--st-accent-hover); border-color: var(--st-accent-hover); }
.btn-ghost { border-color: color-mix(in oklch, var(--st-accent) 45%, transparent); color: var(--st-accent); background: transparent; }
.btn-ghost:hover { background: var(--st-accent-tint); border-color: var(--st-accent); }
.btn-light { background: var(--st-card); color: var(--st-accent-deep); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* ---------- eyebrows: only the hero keeps one; section kickers are dropped (Hallmark: no eyebrow on every section) ---------- */
.eyebrow { background: transparent; border: 0; padding: 0; color: var(--st-accent); letter-spacing: .12em; font-weight: 600; }
.section-head .eyebrow { display: none; }

/* ---------- hero ---------- */
.hero { background: var(--st-paper); border-bottom: 1px solid var(--st-rule); }
.hero::before { content: ""; position: absolute; inset: 0 0 auto auto; width: min(44vw, 560px); height: 100%; background: var(--st-paper-2); z-index: 0; }
.hero > .container { position: relative; z-index: 1; }
.hero-metrics { border-top: 1px solid var(--st-rule); padding-top: 18px; }
.hero-metrics b { font-family: var(--st-font-display); color: var(--st-accent); font-variant-numeric: tabular-nums; }
.phone { background: var(--st-accent-deep); box-shadow: var(--st-shadow); }

/* ---------- sections: alternate paper bands + ornament rule between them ---------- */
.section { position: relative; }
.section.tint { background: var(--st-paper-2); }
.section + .section::before { content: ""; position: absolute; left: 50%; top: 0; width: 9px; height: 9px; transform: translate(-50%, -50%) rotate(45deg); background: var(--st-accent); box-shadow: 0 0 0 5px var(--st-paper); }
.section.tint + .section::before, .section + .section.tint::before { box-shadow: 0 0 0 5px var(--st-paper-2); }
.section-head { margin-bottom: 40px; }

/* ---------- cards ---------- */
.pain-card, .feat, .step, .quote, .price, .tpl-card, .faq details { background: var(--st-card); border-color: var(--st-rule); box-shadow: none; }
.pain-card .ico { background: var(--st-accent-tint); color: var(--st-accent); width: 44px; height: 44px; border-radius: 10px; }
.pain-card .ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.feat .num { color: var(--st-accent); font-family: var(--st-font-display); font-variant-numeric: tabular-nums; }
.step::before { background: var(--st-accent); color: var(--st-on-accent); font-family: var(--st-font-display); }
.quote p { font-style: normal; font-family: var(--st-font-display); }
.price .plan { color: var(--st-accent); }
.price li::before { color: var(--st-accent); }
.price.featured { background: var(--st-accent-deep); color: var(--st-on-deep); }
.price.featured .muted, .price.featured li { color: var(--st-on-deep-muted); }
.price.featured .plan, .price.featured li::before { color: oklch(84% 0.08 20); }
.price.featured .btn-primary { background: var(--st-on-deep); color: var(--st-accent-deep); border-color: var(--st-on-deep); }
.price.featured .btn-primary:hover { background: var(--st-card); }
.faq summary::after { color: var(--st-accent); }
.tpl-cover .tag, .gal-badge { background: var(--st-card); color: var(--st-accent-deep); }

/* ---------- CTA band + footer ---------- */
.cta-band { background: var(--st-accent-deep); color: var(--st-on-deep); }
.cta-band p { color: var(--st-on-deep-muted); opacity: 1; }
.cta-band .btn-primary { background: var(--st-on-deep); color: var(--st-accent-deep); border-color: var(--st-on-deep); }
.cta-band .btn-primary:hover { background: var(--st-card); }
.cta-band .btn-ghost { color: var(--st-on-deep); border-color: color-mix(in oklch, var(--st-on-deep) 50%, transparent); }
.footer { background: var(--st-paper-2); border-top: 2px solid var(--st-accent); }
.footer a:hover { color: var(--st-accent); }

@media (max-width: 960px) {
  .nav-links { background: var(--st-paper); }
  .hero::before { width: 100%; height: 38%; inset: auto 0 0 0; }
}
@media (prefers-reduced-motion: reduce) { .btn, .nav-links a { transition: none; } }

/* ======================= /mau/ gallery chrome ======================= */
.mg-body { background: var(--st-paper); }
.mg-hero { background: var(--st-paper); border-bottom: 1px solid var(--st-rule); }
.mg-eyebrow { color: var(--st-accent); letter-spacing: .12em; font-weight: 600; }
.mg-hero h1 { font-weight: 600; }
.mg-search { border-color: var(--st-rule); background: var(--st-card); }
.mg-search:focus-within { border-color: var(--st-accent); }
.mg-filters { background: color-mix(in oklch, var(--st-paper) 94%, transparent); border-color: var(--st-rule); }
.mg-sec-head h2 { font-family: var(--st-font-display); font-style: normal; font-weight: 600; }

/* ======================= preview.html shell chrome ======================= */
body.pv-shell { background: var(--st-paper-2); color: var(--st-ink); font-family: var(--st-font-body); }
body.pv-shell .pv-bar { background: var(--st-card); border-bottom: 2px solid var(--st-accent); }
body.pv-shell .pv-brand { font-family: var(--st-font-display); color: var(--st-accent-deep); }
body.pv-shell .pv-brand small { font-family: var(--st-font-body); color: var(--st-muted); }
body.pv-shell .pv-bar select, body.pv-shell .pv-seg { border-color: var(--st-rule); background: var(--st-card); }
body.pv-shell .pv-seg button { background: var(--st-card); color: var(--st-ink); }
body.pv-shell .pv-seg button[aria-pressed="true"] { background: var(--st-accent-deep); color: var(--st-on-deep); }
body.pv-shell .pv-use { background: var(--st-accent); color: var(--st-on-accent); }
body.pv-shell .pv-use:hover { background: var(--st-accent-hover); }
body.pv-shell .pv-meta { color: var(--st-muted); }

/* ======================= editor chrome (scoped: never reaches #invitation / the iframe) ======================= */
.editor-topbar, .editor-panel, .preview-toolbar, .modal-content {
  --gold: var(--st-accent); --gold-dark: var(--st-accent-hover); --gold-light: var(--st-accent-tint);
  --rose: var(--st-accent); --rose-dark: var(--st-accent-hover); --pink: var(--st-accent-tint); --pink-soft: var(--st-paper-2); --pink-deep: oklch(80% 0.07 18);
  --dark: var(--st-ink); --text: var(--st-ink); --text-light: var(--st-muted);
}
.editor-topbar { background: var(--st-card); border-bottom: 1px solid var(--st-rule); box-shadow: none; }
.editor-topbar .topbar-title { font-family: var(--st-font-display); font-weight: 600; color: var(--st-ink); }
.editor-topbar .btn-primary, .modal-content .btn-primary { background: var(--st-accent); color: var(--st-on-accent); border-color: var(--st-accent); box-shadow: none; }
.editor-topbar .btn-primary:hover, .modal-content .btn-primary:hover { background: var(--st-accent-hover); }
.editor-topbar .btn-outline { color: var(--st-accent); border-color: color-mix(in oklch, var(--st-accent) 45%, transparent); background: transparent; }
.editor-panel { background: var(--st-card); border-right: 1px solid var(--st-rule); }
.editor-panel .panel-tabs { background: var(--st-card); border-bottom: 1px solid var(--st-rule); }
.editor-panel .panel-tab { color: var(--st-muted); }
.editor-panel .panel-tab.active { color: var(--st-accent); box-shadow: inset 0 -2px 0 var(--st-accent); border-bottom-color: var(--st-accent); background: transparent; }
.editor-panel .form-section-title, .editor-panel h3 { font-family: var(--st-font-display); font-style: normal; color: var(--st-ink); }
.editor-panel input:focus, .editor-panel select:focus, .editor-panel textarea:focus { border-color: var(--st-accent); box-shadow: 0 0 0 3px var(--st-accent-tint); outline: none; }
.editor-panel .ef-note { background: var(--st-accent-tint); border-color: oklch(84% 0.06 18); color: var(--st-accent-deep); }
.preview-area { background: var(--st-paper-2); }
.preview-toolbar { background: var(--st-paper); border-bottom: 1px solid var(--st-rule); }
.preview-toolbar .device-btn.active { background: var(--st-accent); color: var(--st-on-accent); }

.mg-modal, .mg-m-bar { background: oklch(19% 0.04 18); }
.mg-m-bar { color: var(--st-on-deep); }
.mg-m-seg button[aria-pressed="true"], .mg-m-use { background: var(--st-on-deep); color: var(--st-accent-deep); }
.mg-m-use:hover { background: var(--st-card); }
.mg-m-stage { background: oklch(15% 0.03 18); }
.mg-chip[aria-pressed="true"], .mg-chip.is-on, .mg-chip.active { background: var(--st-accent); border-color: var(--st-accent); color: var(--st-on-accent); }
.mg-chip:hover:not(:disabled) { border-color: var(--st-accent); }
.mg-card-media:focus-visible { box-shadow: 0 0 0 3px var(--st-paper), 0 0 0 5px var(--st-accent); }
.editor-topbar .logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.editor-topbar .logo img { display: none; }
.editor-topbar .logo::before { content: "囍"; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; background: var(--st-accent); color: var(--st-on-accent); font: 600 17px/1 'Noto Serif', serif; }
.editor-topbar .logo::after { content: "Thiệp Cưới Hay"; font-family: var(--st-font-display); font-weight: 600; font-size: 1.05rem; color: var(--st-ink); white-space: nowrap; }
@media (max-width: 640px) { .editor-topbar .logo::after { display: none; } }