/* ═══════════════════════════════════════════════════════════
   MAIN STYLES — SoiMenh · OBSIDIAN & GOLD · Dark Celestial Luxury
   v5.0.0 — "Thiên Mệnh" redesign: pure black + gold, NO purple
   Skills: ui-ux-pro-max, frontend-design, theme-factory, canvas-design, web-design-guidelines
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════
   GLOBAL — Film grain + Focus + Cursor
   ═══════════════════════════════════════ */

/* Film grain overlay — subtle luxury texture (skill: canvas-design + frontend-design) */
.sm-body::after {
    content: '';
    position: fixed;
    top:0;right:0;bottom:0;left:0;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 9998;
}

/* ═══════════════════════════════════════════════════════════════
   VIGNETTE SHADOW — Subtle scroll-parchment edge effect
   Replaces meander rails: cleaner, responsive, no hardcoded px
   ═══════════════════════════════════════════════════════════════ */
html::before {
    content: '';
    position: fixed;
    top:0;right:0;bottom:0;left:0;
    pointer-events: none;
    z-index: 101;
    background:
        linear-gradient(to right,  rgba(3,2,1,0.85) 0%, transparent 3%),
        linear-gradient(to left,   rgba(3,2,1,0.85) 0%, transparent 3%);
}

/* Focus-visible gold ring — accessibility (skill: web-design-guidelines + ui-ux-pro-max) */
:focus-visible {
    outline: 2px solid var(--color-primary-400);
    outline-offset: 3px;
}

/* Cursor pointer on all interactive elements (skill: ui-ux-pro-max — CRITICAL) */
a, button, [role="button"], input[type="submit"], input[type="checkbox"],
.sm-tool-card, .sm-pricing-card, .sm-share__btn { cursor: pointer; }

/* Heading text-wrap balance (skill: web-design-guidelines — Vercel) */
h1, h2, h3, h4 { text-wrap: balance; }

/* Skip-to-content link — accessibility (a11y) */
.sm-skip-to-content {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.sm-skip-to-content:focus {
    position: fixed; left: 16px; top: 16px;
    width: auto; height: auto;
    padding: 10px 20px; margin: 0;
    overflow: visible;
    clip: auto; clip-path: none;
    white-space: normal;
    background: #0c0c0a; color: #c9a96e;
    font-size: 1rem; z-index: 99999;
    border: 2px solid #c9a96e;
    text-decoration: none;
}

/* ══════════════════════════════════════════════════════════════
   HEADER — THIÊN MÔN v3 "Cổng Thiên Địa"
   Dấu ấn: nebula glow, logo thống trị, chữ phân tầng, seal triện
   ══════════════════════════════════════════════════════════════ */

/* ── BASE — nền obsidian, blur sâu ── */
.sm-header {
    position: fixed; top: 0; left: 0; right: 0;
    width: 100%; max-width: var(--container-max);
    margin-left: auto; margin-right: auto;
    height: 88px;
    background: linear-gradient(to bottom, rgba(18,17,14,0.96) 0%, rgba(12,11,9,0.94) 100%);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border-bottom: 1px solid rgba(201,169,110,0.06);
    box-shadow: 0 1px 0 rgba(201,169,110,0.04), 0 8px 40px rgba(0,0,0,0.7);
    z-index: var(--z-header);
    overflow: visible;
    transition: background 500ms ease, box-shadow 400ms ease;
}
/* Hide header + grain during ANY cinematic loading overlay.
   backdrop-filter on .sm-header creates a compositor layer that ignores z-index,
   so we hide the header entirely when any cinematic is active.
   Convention A: [id$="-loading"] hidden via .hidden class (TSH, address, baby, biz, etc.)
   Convention B: [id$="cinematic"] hidden via hidden attribute (tutu, gieo-que, tarot, etc.)
   Convention C: [id$="cinematic"] hidden via style.display (kymon, lucnham — no hidden attr)
   Convention D: #tr-fan-select hidden via hidden attribute (tarot fan selection) */
/* Layer 1 (JS-driven, bulletproof): main.js adds .sm-cine-active on body */
body.sm-cine-active .sm-header,
body.sm-cine-active .sm-header-transition,
body.sm-cine-active .sm-mobile-menu,
body.sm-cine-active #wpadminbar { display: none !important; }
body.sm-cine-active::after { display: none !important; }
html:has(body.sm-cine-active)::before { display: none !important; }
body.sm-cine-active,
html:has(body.sm-cine-active) { overflow: hidden !important; height: 100svh !important; }
/* Layer 2 (CSS-only fallback via :has()): covers if JS hasn't loaded yet */
body:has([id$="cinematic"]:not([hidden]):not([style*="display: none"]):not([style*="display:none"])) .sm-header,
body:has([id$="cinematic"]:not([hidden]):not([style*="display: none"]):not([style*="display:none"])) .sm-header-transition,
body:has([id$="-loading"]:not(.hidden)) .sm-header,
body:has([id$="-loading"]:not(.hidden)) .sm-header-transition,
body:has(#tr-fan-select:not([hidden])) .sm-header,
body:has(#tr-fan-select:not([hidden])) .sm-header-transition { display: none !important; }
body:has([id$="cinematic"]:not([hidden]):not([style*="display: none"]):not([style*="display:none"]))::after,
body:has([id$="-loading"]:not(.hidden))::after,
body:has(#tr-fan-select:not([hidden]))::after { display: none !important; }

.sm-header.is-scrolled {
    height: 88px;
    background: linear-gradient(to bottom, rgba(16,15,12,0.98) 0%, rgba(10,9,7,0.97) 100%);
    backdrop-filter: blur(28px) saturate(1.5);
    -webkit-backdrop-filter: blur(28px) saturate(1.5);
    box-shadow: 0 1px 0 rgba(201,169,110,0.06), 0 12px 48px rgba(0,0,0,0.8);
    border-bottom: 1px solid rgba(201,169,110,0.08);
}

/* ── BOTTOM BORDER — clean gold line ── */
.sm-header::before { display: none; }

/* ══════════════════════════════════════════════════════
   THIÊN ĐỊA GIAO — Header→Content 3-layer transition
   ══════════════════════════════════════════════════════ */
.sm-header-transition {
    position: fixed; top: var(--header-height, 124px); left: 0; right: 0;
    max-width: var(--container-max);
    margin: 0 auto;
    height: 14px;
    pointer-events: none;
    z-index: calc(var(--z-header) - 2);
    overflow: hidden;
    background-color: var(--bg-obsidian, #0c0c0a);
}

/* Lớp 1: Meander Greek Key — 8px, fade 2 đầu */
.sm-ht__meander {
    width: 100%; height: 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M0.5,7 L0.5,0.5 L7,0.5 L7,7 L2.5,7 L2.5,3 L5.5,3 L5.5,5.5 L3.5,5.5 L3.5,4 L4.5,4' fill='none' stroke='%23c9a96e' stroke-width='0.7' stroke-linejoin='miter' stroke-linecap='square'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-position: center;
    opacity: 0.18;
}

/* Lớp 2: Dot constellation — 6px */
.sm-ht__dots {
    width: 100%; height: 6px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='6'%3E%3Ccircle cx='12' cy='2' r='.7' fill='%23c9a96e' opacity='.12'/%3E%3Ccircle cx='45' cy='4' r='.5' fill='%23c9a96e' opacity='.08'/%3E%3Ccircle cx='78' cy='1.5' r='.8' fill='%23c9a96e' opacity='.1'/%3E%3Ccircle cx='105' cy='3.5' r='.6' fill='%23c9a96e' opacity='.09'/%3E%3Ccircle cx='130' cy='2' r='.7' fill='%23c9a96e' opacity='.11'/%3E%3Ccircle cx='158' cy='4.5' r='.5' fill='%23c9a96e' opacity='.08'/%3E%3Ccircle cx='185' cy='1' r='.9' fill='%23c9a96e' opacity='.1'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
}

/* Lớp 3: Golden glow — 30px tỏa xuống */
.sm-ht__glow {
    width: 100%; height: 30px;
    background: linear-gradient(to bottom,
        rgba(201,169,110,.06) 0%,
        rgba(201,169,110,.02) 40%,
        transparent 100%);
}

/* ══════════════════════════════════════════════════════════════
   THANH THIÊN CƠ — Celestial Bar (dưới header, trên transition)
   Âm Dương Lịch · Can Chi · Trực · Giờ Hoàng Đạo · Pha Trăng
   ══════════════════════════════════════════════════════════════ */
.sm-celestial-bar {
    position: fixed; top: var(--header-bar, 88px); left: 0; right: 0;
    max-width: var(--container-max);
    margin: 0 auto;
    height: var(--cbar-height, 36px);
    /* Solid dark background — NO transparency on mobile */
    background: #0e0d0a;
    border-bottom: 1px solid rgba(201,169,110,0.08);
    z-index: calc(var(--z-header) - 1);
    overflow: hidden;
    font-family: var(--font-body, 'Be Vietnam Pro', sans-serif);
    font-size: 12.5px;
    color: #a09880;
    box-sizing: border-box;
}
.sm-celestial-bar .sm-container { height: 100%; }
.sm-cbar__inner {
    display: flex; align-items: center; justify-content: center;
    gap: 18px; height: 100%;
    padding: 0 16px;
    white-space: nowrap;
}

/* Blocks */
.sm-cbar__block { display: flex; align-items: center; gap: 5px; }
.sm-cbar__sep { color: rgba(201,169,110,0.3); font-size: 8px; }
.sm-cbar__label {
    font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em;
    color: rgba(201,169,110,0.82);
    font-family: 'Lexend Deca', sans-serif;
}

/* Cross-links → Hoàng Lịch */
.sm-cbar__link {
    text-decoration: none; color: inherit; cursor: pointer;
    transition: color 200ms ease;
}
.sm-cbar__link:hover { color: #c9a96e; }
.sm-cbar__link:hover .sm-cbar__duong,
.sm-cbar__link:hover .sm-cbar__cc-ngay,
.sm-cbar__link:hover .sm-cbar__sao { color: #f5d58c; }
.sm-cbar__link:hover .sm-cbar__svg { color: #f5d58c; }

/* SVG Icons — Mystic Imperial gold */
.sm-cbar__svg {
    width: 14px; height: 14px;
    color: #c9a96e; flex-shrink: 0;
    vertical-align: middle;
    transition: color 200ms ease;
}
.sm-cbar__svg--moon { width: 16px; height: 16px; }
.sm-cbar__svg--yy { width: 15px; height: 15px; }

/* Date block */
.sm-cbar__duong { color: #c8c0b0; font-weight: 500; }
.sm-cbar__am { color: #c9a96e; font-weight: 500; }

/* Can Chi block */
.sm-cbar__cc-ngay {
    color: #f5d58c;
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 600; font-size: 13px;
}
.sm-cbar__hanh { font-size: 12px; }
.sm-cbar__truc { display: inline-flex; align-items: center; gap: 4px; }
.sm-cbar__badge {
    font-size: 8.5px; padding: 1px 5px; border-radius: 3px;
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    line-height: 1.4;
}
.sm-cbar__badge--hd {
    background: rgba(201,169,110,0.15); color: #c9a96e;
    border: 1px solid rgba(201,169,110,0.25);
}
.sm-cbar__badge--hac {
    background: rgba(120,100,80,0.1); color: #a89878;
    border: 1px solid rgba(120,100,80,0.15);
}
.sm-cbar__truc--good { color: #c9a96e; }
.sm-cbar__truc--caution { color: #a09070; }

/* Moon & Sao */
.sm-cbar__moon { font-size: 14px; line-height: 1; }
.sm-cbar__sao { font-size: 11px; color: #a09880; }

/* Giờ Hoàng Đạo chips */
.sm-cbar__gio { gap: 3px; }
.sm-cbar__gio-chip {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 2px 5px; border-radius: 3px;
    font-size: 11px; font-weight: 500;
    background: rgba(201,169,110,0.06);
    color: #908870;
    border: 1px solid rgba(201,169,110,0.1);
    transition: background 300ms, color 300ms, border-color 300ms, box-shadow 300ms;
}
.sm-cbar__gio-chip small {
    font-size: 8.5px; opacity: 0.78; margin-left: 1px;
}
/* Giờ Hắc Đạo (hiện tại nhưng không phải Hoàng Đạo) */
.sm-cbar__gio-chip.is-hac {
    background: rgba(120,100,80,0.08);
    color: #9a8a72;
    border-color: rgba(120,100,80,0.15);
    border-style: dashed;
}
/* Giờ hiện tại — Hoàng Đạo */
.sm-cbar__gio-chip.is-now {
    background: rgba(201,169,110,0.2);
    color: #f5d58c;
    border-color: rgba(201,169,110,0.4);
    box-shadow: 0 0 8px rgba(201,169,110,0.2);
    animation: cbar-glow 3s ease-in-out infinite;
}
/* Giờ hiện tại — Hắc Đạo: viền dashed + glow nhẹ hơn */
.sm-cbar__gio-chip.is-now.is-hac {
    background: rgba(160,140,110,0.12);
    color: #c8b890;
    border-color: rgba(160,140,110,0.3);
    border-style: dashed;
    box-shadow: 0 0 6px rgba(160,140,110,0.12);
    animation: cbar-glow-dim 3s ease-in-out infinite;
}
@keyframes cbar-glow-dim {
    0%, 100% { box-shadow: 0 0 4px rgba(160,140,110,0.08); }
    50%      { box-shadow: 0 0 10px rgba(160,140,110,0.18); }
}
@keyframes cbar-glow {
    0%, 100% { box-shadow: 0 0 8px rgba(201,169,110,0.15); }
    50%      { box-shadow: 0 0 16px rgba(201,169,110,0.35); }
}

/* Cinematic hide — celestial bar */
body.sm-cine-active .sm-celestial-bar { display: none !important; }
body:has([id$="cinematic"]:not([hidden]):not([style*="display: none"]):not([style*="display:none"])) .sm-celestial-bar,
body:has([id$="-loading"]:not(.hidden)) .sm-celestial-bar,
body:has(#tr-fan-select:not([hidden])) .sm-celestial-bar { display: none !important; }

/* ── RESPONSIVE: Tablet ── */
@media (max-width: 1024px) {
    .sm-cbar__astro { display: none; }
    .sm-cbar__inner { gap: 12px; }
}

/* ── RESPONSIVE: Mobile — STRICT 2 ROWS via CSS Grid ── */
@media (max-width: 768px) {
    :root { --cbar-height: 52px; --header-height: 140px; }
    .sm-celestial-bar {
        height: var(--cbar-height);
        font-size: 11px;
        border-bottom: 1px solid rgba(201,169,110,0.06);
    }
    /* Grid 2 hàng cứng — không bao giờ wrap thành 3 hàng */
    .sm-cbar__inner {
        display: grid;
        grid-template-areas: "date date" "canchi gio";
        grid-template-columns: auto 1fr;
        grid-template-rows: 1fr 1fr;
        align-items: center;
        gap: 0 6px;
        padding: 3px 10px;
        height: 100%;
    }
    /* Hàng 1: ngày tháng */
    .sm-cbar__date {
        grid-area: date;
        justify-content: center;
        gap: 4px; font-size: 10.5px;
        white-space: nowrap;
    }
    .sm-cbar__date .sm-cbar__svg { width: 12px; height: 12px; }
    /* Hàng 2 trái: can chi */
    .sm-cbar__canchi {
        grid-area: canchi;
        gap: 4px; font-size: 11px;
        white-space: nowrap;
    }
    /* Hàng 2 phải: giờ — clip thay vì wrap */
    .sm-cbar__gio {
        grid-area: gio;
        gap: 2px;
        overflow: hidden;
        flex-wrap: nowrap;
        white-space: nowrap;
        min-width: 0;
    }
    .sm-cbar__gio .sm-cbar__svg { width: 11px; height: 11px; flex-shrink: 0; }
    /* Ẩn trên mobile */
    .sm-cbar__astro { display: none; }
    .sm-cbar__hanh { display: none; }
    .sm-cbar__label { display: none; }
    .sm-cbar__canchi .sm-cbar__sep { display: none; }
    /* Chips compact */
    .sm-cbar__gio-chip {
        padding: 1px 4px; font-size: 10px;
        border: none; background: rgba(201,169,110,0.05);
        flex-shrink: 0;
    }
    .sm-cbar__gio-chip small { display: none; }
    .sm-cbar__gio-chip.is-now {
        background: rgba(201,169,110,0.18);
        border: 1px solid rgba(201,169,110,0.3);
    }
    .sm-cbar__cc-ngay { font-size: 11.5px; }
    .sm-cbar__badge { font-size: 8px; padding: 1px 4px; }
}

/* ── RESPONSIVE: Small mobile — thu nhỏ thêm ── */
@media (max-width: 413px) {
    .sm-cbar__date .sm-cbar__duong { font-size: 10px; }
    .sm-cbar__inner { gap: 0 4px; padding: 2px 8px; }
    .sm-cbar__cc-ngay { font-size: 10.5px; }
    .sm-cbar__badge { font-size: 7px; padding: 0px 3px; letter-spacing: -0.3px; }
    .sm-cbar__truc { font-size: 10px; }
    .sm-cbar__gio { gap: 1px; }
    .sm-cbar__gio-chip { padding: 1px 3px; font-size: 9px; }
    .sm-cbar__gio .sm-cbar__svg { width: 10px; height: 10px; }
}
@media (max-width: 360px) {
    .sm-cbar__truc { font-size: 9.5px; }
    .sm-cbar__badge { font-size: 6.5px; padding: 0 2px; }
    .sm-cbar__gio-chip { padding: 0px 2px; font-size: 8.5px; }
    .sm-cbar__cc-ngay { font-size: 10px; }
}

/* Grain texture header */
.sm-header::after {
    content: ''; position: absolute; top:0;right:0;bottom:0;left:0; z-index: 0;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    pointer-events: none; mix-blend-mode: overlay;
}

/* ── NEBULA — disabled, was leaking outside header ── */
.sm-header__nebula { display: none; }

/* ── INNER LAYOUT ── */
.sm-header .sm-container { position: relative; z-index: 3; height: 100%; }
.sm-header__inner {
    display: flex; align-items: center; justify-content: space-between;
    height: 100%; padding: 0 var(--space-6);
    padding-bottom: 0;
}

/* ── GÓC L-BRACKET + TRIGRAM ── */
.sm-header__corner {
    display: none;
    position: absolute; top: 0;
    width: 64px; height: 64px;
    pointer-events: none; z-index: 1;
    opacity: 0.55;
    transition: opacity 400ms ease, transform 400ms ease;
}
.sm-header__corner--tl { left: 0; }
.sm-header__corner--tr { right: 0; }
.sm-header.is-scrolled .sm-header__corner { opacity: 0.55; }
.sm-corner-breathe { animation: cornerBreathe 7s ease-in-out infinite; }
@keyframes cornerBreathe { 0%,100%{opacity:1} 50%{opacity:.55} }

/* ── MEANDER BORDER ── */
.sm-header__meander { display: none; } /* deprecated */

/* ── BOTTOM SEAL — hidden, replaced by gold line on header ── */
.sm-header__seal { display: none; }
@keyframes sealBreath {
    0%,100% { opacity: 0.5; }
    50%      { opacity: 0.85; }
}

/* ── ATMOSPHERIC BLEED — removed: causes visible band gap ── */

/* ── LOGO CONTAINER — Thiên Cơ Ấn v2 ── */
.sm-header__logo {
    display: inline-flex; align-items: center; gap: 10px;
    text-decoration: none; flex-shrink: 0;
    transition: opacity 300ms ease;
}
.sm-header__logo:hover { opacity: .85; }

/* Icon 3 lớp — viewBox 44, render 40px */
.sm-header__logo-icon {
    width: 40px; height: 40px; flex-shrink: 0; display: block;
}

/* Orbit dashed — xoay chậm 60s */
.sm-logo-orbit {
    transform-origin: 22px 22px;
    animation: ftLogoSpin 60s linear infinite;
}

/* Text wrapper */
.sm-header__logo-words {
    display: inline-grid;
    grid-template-columns: 1fr;
    gap: 0; flex-shrink: 0;
}

/* Dòng 1: SoiMệnh */
.sm-header__logo-name {
    font-family: var(--font-body); font-size: 28px; font-weight: 400;
    letter-spacing: 0.02em; line-height: 1.15;
    color: var(--text-primary); white-space: nowrap; display: block;
    padding-bottom: 4px;
}
.sm-header__logo-name strong {
    font-weight: 700;
    background: linear-gradient(115deg, #b8924a 0%, #c9a96e 25%, #f5d58c 50%, #c9a96e 75%, #b8924a 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: logoShimmer 8s ease-in-out infinite;
}
@keyframes logoShimmer {
    0%,100% { background-position: 200% center; }
    50%     { background-position: -200% center; }
}

/* Thiên Hà Tuyến — gạch gradient fade 2 đầu */
.sm-header__logo-line {
    display: block; width: 100%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,169,110,.4) 15%, rgba(201,169,110,.4) 85%, transparent);
    margin-bottom: 5px;
}

/* Dòng 2: GIẢI MÃ THIÊN CƠ */
.sm-header__logo-sub {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 9px; font-weight: 700; font-style: normal;
    color: rgba(201,169,110,.75);
    text-transform: uppercase; line-height: 1; letter-spacing: .1em;
    white-space: nowrap; display: block;
    width: 100%; text-align: justify; text-align-last: justify;
}

/* ══════════════════════════════════════════════════════
   HEADER SEARCH BAR — Gold-bordered pill on obsidian
   ══════════════════════════════════════════════════════ */
.sm-header__search {
    display: none;
    flex: 1;
    max-width: 520px;
    margin: 0 clamp(16px, 3vw, 40px);
    position: relative;
    z-index: 2147483645;
}
@media (min-width: 1025px) {
    .sm-header__search { display: block; }
}
.sm-hsearch-form {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 42px;
    padding: 0 18px;
    background: rgba(201,169,110,0.06);
    border: 1px solid rgba(201,169,110,0.22);
    border-radius: 999px;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.sm-hsearch-form:hover {
    border-color: rgba(201,169,110,0.4);
    background: rgba(201,169,110,0.08);
}
.sm-hsearch-form:focus-within {
    border-color: rgba(201,169,110,0.6);
    background: rgba(201,169,110,0.1);
    box-shadow: 0 0 0 3px rgba(201,169,110,0.1);
}
.sm-hsearch-icon {
    flex-shrink: 0;
    color: rgba(201,169,110,0.45);
    transition: color 0.2s ease;
}
.sm-hsearch-form:focus-within .sm-hsearch-icon { color: #c9a96e; }
.sm-hsearch-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 0.875rem;
    color: #e8e0d0;
    line-height: 40px;
    min-width: 0;
}
.sm-hsearch-form:has(.sm-hsearch-typewriter:not(.is-hidden)) .sm-hsearch-input::placeholder { color: transparent; }
.sm-hsearch-input::placeholder {
    color: rgba(201,169,110,0.35);
    font-style: normal;
    letter-spacing: 0.02em;
}
.sm-hsearch-input::-webkit-search-cancel-button { display: none; }
.sm-hsearch-form { position: relative; }
.sm-hsearch-typewriter {
    position: absolute;
    left: 40px;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 0.875rem;
    color: rgba(201,169,110,0.4);
    pointer-events: none;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
}
.sm-hsearch-typewriter::after {
    content: '|';
    animation: twCursor 0.7s step-end infinite;
    color: rgba(201,169,110,0.5);
    margin-left: 1px;
    font-weight: 300;
}
@keyframes twCursor { 0%,100%{opacity:1} 50%{opacity:0} }
.sm-hsearch-typewriter.is-hidden { display: none; }
.sm-hsearch-clear {
    flex-shrink: 0;
    border: none;
    background: none;
    color: rgba(201,169,110,0.4);
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    transition: background 0.15s ease, color 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sm-hsearch-clear:hover { background: rgba(201,169,110,0.1); color: #c9a96e; }

/* Dropdown results */
.sm-hsearch-results {
    display: none;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: rgba(12,12,10,0.97);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border: 1px solid rgba(201,169,110,0.25);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    max-height: 520px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    z-index: 2147483646;
    animation: smHsearchIn 0.2s cubic-bezier(0.16,1,0.3,1) forwards;
}
.sm-hsearch-results::-webkit-scrollbar { display: none; }
.sm-hsearch-results.is-active { display: flex; }
@keyframes smHsearchIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Reuse dropdown item styles from category page */
.sm-hsearch-results .sbh-sr-section-label,
.sm-hsearch-results .sbh-live-result-item,
.sm-hsearch-results .sbh-live-result-thumb,
.sm-hsearch-results .sbh-live-result-thumb-placeholder,
.sm-hsearch-results .sbh-live-result-text,
.sm-hsearch-results .sbh-live-result-title,
.sm-hsearch-results .sbh-live-result-title mark,
.sm-hsearch-results .sbh-sr-history,
.sm-hsearch-results .sbh-sr-icon,
.sm-hsearch-results .sbh-sr-hist-text,
.sm-hsearch-results .sbh-sr-hist-del,
.sm-hsearch-results .sbh-sr-trending-wrap,
.sm-hsearch-results .sbh-sr-trending-tag,
.sm-hsearch-results .sbh-sr-featured,
.sm-hsearch-results .sbh-sr-featured-badge,
.sm-hsearch-results .sbh-sr-featured-text,
.sm-hsearch-results .sbh-live-result-footer,
.sm-hsearch-results .sbh-live-result-all,
.sm-hsearch-results .sbh-live-result-empty {
    /* inherits from the category page styles */
}

/* Backdrop */
.sm-hsearch-backdrop {
    display: none;
    position: fixed;
    top:0;right:0;bottom:0;left:0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2147483640;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.sm-hsearch-backdrop.is-active {
    display: block;
    opacity: 1;
    pointer-events: auto;
}
body.sm-hsearch-open #smc-aiv-launcher,
body.sm-hsearch-open #smc-aiv-panel {
    opacity: 0 !important;
    pointer-events: none !important;
}
body.sm-hsearch-open .sm-header__corner {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease;
}

/* ══════════════════════════════════════════════════════
   NAV — THIÊN MÔN v2 · Kim Cương Ấn · Khai Quang
   ══════════════════════════════════════════════════════ */
.sm-header__nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    height: 100%;
    position: relative;
    z-index: 1;
}
.sm-header__menu {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
    height: 100%;
    margin: 0; padding: 0;
}

/* Item — stagger fade in */
.sm-header__menu > li {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    opacity: 1;
    animation: navFadeIn 600ms ease both;
}
.sm-header__menu > li:nth-child(1) { animation-delay: 100ms }
.sm-header__menu > li:nth-child(2) { animation-delay: 180ms }
.sm-header__menu > li:nth-child(3) { animation-delay: 260ms }
.sm-header__menu > li:nth-child(4) { animation-delay: 340ms }
.sm-header__menu > li:nth-child(5) { animation-delay: 420ms }
@keyframes navFadeIn { from { opacity:0 } to { opacity:1 } }

/* ◈ Kim Cương separator — SVG diamond */
.sm-header__menu > li + li::before {
    content: '';
    display: inline-block;
    width: 8px; height: 8px; flex-shrink: 0;
    margin: 0 4px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 .5 L7.5 4 L4 7.5 L.5 4Z' fill='none' stroke='%23c9a96e' stroke-width='.8' opacity='.3'/%3E%3Ccircle cx='4' cy='4' r='.8' fill='%23c9a96e' opacity='.2'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    transition: opacity 300ms ease;
}
/* Separator sáng lên khi hover mục bên cạnh */
.sm-header__menu > li:hover + li::before { opacity: 1; }

/* Link — Lexend Deca uppercase, hierarchy */
.sm-header__menu > li > a {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 14px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: rgba(220,210,192,0.55);
    transition: color 300ms ease, text-shadow 300ms ease;
}

/* Hierarchy: mục đầu = Công Cụ = gold nổi bật */
.sm-header__menu > li:first-child > a {
    font-weight: 600;
    color: rgba(201,169,110,.85);
    letter-spacing: .18em;
}

/* Hover — Khai Quang: sáng + hào quang */
.sm-header__menu > li > a:hover {
    color: #f5d58c;
    text-shadow: 0 0 14px rgba(201,169,110,.3);
}

/* Active / current */
.sm-header__menu > li.current-menu-item > a,
.sm-header__menu > li.current-menu-ancestor > a {
    color: rgba(201,169,110,.9);
}

/* Underline — mọc từ giữa ra 2 bên, glow */
.sm-header__menu > li > a::after {
    content: '';
    position: absolute;
    bottom: 10px; left: 50%;
    width: 0; height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg,
        transparent, rgba(201,169,110,.5) 20%,
        rgba(245,213,140,.9) 50%,
        rgba(201,169,110,.5) 80%, transparent);
    box-shadow: 0 0 8px rgba(201,169,110,.25);
    transition: width 340ms cubic-bezier(0.4,0,0.2,1);
    pointer-events: none;
}
.sm-header__menu > li > a:hover::after { width: 70%; }
.sm-header__menu > li.current-menu-item > a::after,
.sm-header__menu > li.current-menu-ancestor > a::after { width: 50%; }

/* Dropdown "Thiên Cơ Các" */
.sm-header__menu .sub-menu {
    list-style: none !important;
    position: absolute !important; top: 100% !important; left: 50% !important;
    transform: translateX(-50%) translateY(-8px) !important;
    min-width: 180px; padding: 12px 0;
    background: rgba(9,8,7,0.97);
    backdrop-filter: blur(28px) saturate(1.3);
    -webkit-backdrop-filter: blur(28px) saturate(1.3);
    border: none !important;
    border-top: 1px solid rgba(201,169,110,0.22) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.8);
    opacity: 0 !important; visibility: hidden !important;
    pointer-events: none;
    transition: opacity 280ms ease, transform 280ms cubic-bezier(0.4,0,0.2,1), visibility 0ms 280ms;
    z-index: 200;
}
/* Meander bottom */
.sm-header__menu .sub-menu::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M0.5,7 L0.5,0.5 L7,0.5 L7,7 L2.5,7 L2.5,3 L5.5,3 L5.5,5.5 L3.5,5.5 L3.5,4 L4.5,4' fill='none' stroke='%23c9a96e' stroke-width='0.7' stroke-linejoin='miter' stroke-linecap='square'/%3E%3C/svg%3E");
    background-repeat: repeat-x; background-position: center;
    opacity: 0.3; pointer-events: none;
}
.sm-header__menu > li:hover > .sub-menu,
.sm-header__menu > li:focus-within > .sub-menu {
    opacity: 1 !important; visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
    pointer-events: auto;
    transition: opacity 280ms ease, transform 280ms cubic-bezier(0.4,0,0.2,1), visibility 0ms 0ms;
}
.sm-header__menu .sub-menu li {
    position: relative;
    opacity: 0; transform: translateX(-6px);
    display: block; height: auto;
}
/* Stagger animation */
.sm-header__menu > li:hover > .sub-menu li,
.sm-header__menu > li:focus-within > .sub-menu li {
    opacity: 1; transform: translateX(0);
    transition: opacity 250ms ease, transform 250ms ease;
}
.sm-header__menu > li:hover > .sub-menu li:nth-child(1),
.sm-header__menu > li:focus-within > .sub-menu li:nth-child(1) { transition-delay: 40ms; }
.sm-header__menu > li:hover > .sub-menu li:nth-child(2),
.sm-header__menu > li:focus-within > .sub-menu li:nth-child(2) { transition-delay: 80ms; }
.sm-header__menu > li:hover > .sub-menu li:nth-child(3),
.sm-header__menu > li:focus-within > .sub-menu li:nth-child(3) { transition-delay: 120ms; }
.sm-header__menu > li:hover > .sub-menu li:nth-child(4),
.sm-header__menu > li:focus-within > .sub-menu li:nth-child(4) { transition-delay: 160ms; }
.sm-header__menu > li:hover > .sub-menu li:nth-child(5),
.sm-header__menu > li:focus-within > .sub-menu li:nth-child(5) { transition-delay: 200ms; }
.sm-header__menu > li:hover > .sub-menu li:nth-child(6),
.sm-header__menu > li:focus-within > .sub-menu li:nth-child(6) { transition-delay: 240ms; }
.sm-header__menu > li:hover > .sub-menu li:nth-child(7),
.sm-header__menu > li:focus-within > .sub-menu li:nth-child(7) { transition-delay: 280ms; }
.sm-header__menu > li:hover > .sub-menu li:nth-child(8),
.sm-header__menu > li:focus-within > .sub-menu li:nth-child(8) { transition-delay: 320ms; }
.sm-header__menu > li:hover > .sub-menu li:nth-child(9),
.sm-header__menu > li:focus-within > .sub-menu li:nth-child(9) { transition-delay: 360ms; }
.sm-header__menu > li:hover > .sub-menu li:nth-child(10),
.sm-header__menu > li:focus-within > .sub-menu li:nth-child(10) { transition-delay: 400ms; }
.sm-header__menu > li:hover > .sub-menu li:nth-child(11),
.sm-header__menu > li:focus-within > .sub-menu li:nth-child(11) { transition-delay: 440ms; }
/* Diamond separator trước mỗi item */
.sm-header__menu .sub-menu li + li::before { display: none; }
/* Gradient separator giữa items */
.sm-header__menu .sub-menu li + li::after {
    content: '';
    position: absolute; top: 0; left: 16px; right: 16px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,169,110,0.12) 30%, rgba(201,169,110,0.12) 70%, transparent);
    pointer-events: none;
}
/* Gạch ngang bên trái */
.sm-header__menu .sub-menu li a {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 20px 10px 16px; height: auto;
    color: rgba(224,216,200,0.55);
    font-family: 'Lexend Deca', sans-serif;
    font-size: 0.65rem; font-weight: 400;
    letter-spacing: 0.12em; text-transform: uppercase;
    white-space: nowrap;
    transition: color 200ms ease, padding-left 200ms ease;
}
.sm-header__menu .sub-menu li a::before {
    content: '';
    display: inline-block; flex-shrink: 0;
    width: 6px; height: 6px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 .5 L7.5 4 L4 7.5 L.5 4Z' fill='none' stroke='%23c9a96e' stroke-width='.8' opacity='.4'/%3E%3C/svg%3E");
    background-size: contain; background-repeat: no-repeat;
    transition: opacity 200ms ease;
}
.sm-header__menu .sub-menu li a:hover { color: rgba(245,213,140,0.9); padding-left: 22px; }
.sm-header__menu .sub-menu li a:hover::before { opacity: .8; }
.sm-header__menu .sub-menu li a::after { display: none; }

/* ══════════════════════════════════════════════════════
   HAMBURGER — Trigram Càn ☰ style, NO border/frame
   ══════════════════════════════════════════════════════ */
.sm-header__toggle {
    display: none;
    background: transparent !important;
    border: none !important; outline: none !important;
    -webkit-appearance: none; appearance: none;
    box-shadow: none;
    cursor: pointer;
    padding: 12px 10px;
    flex-direction: column; gap: 7px;
    min-width: 44px; min-height: 44px;
    align-items: center; justify-content: center;
    transition: filter 300ms ease;
    border-radius: 0;
}
.sm-header__toggle:hover {
    filter: drop-shadow(0 0 6px rgba(212,175,55,0.35));
}
.sm-header__toggle:focus { outline: none !important; box-shadow: none !important; }
.sm-header__toggle:active { background: transparent !important; }
/* 3 nét Trigram — nét 1 và 3 dài (22px), nét 2 ngắn (14px) như Trigram Càn */
.sm-header__toggle span {
    display: block; height: 1.5px;
    background: rgba(201,169,110,0.65);
    border-radius: 1px;
    transform-origin: center;
    transition:
        transform 250ms cubic-bezier(0.4,0,0.2,1),
        opacity 200ms ease,
        background 200ms ease;
}
/* Tam Tài: Thiên 18px — Nhân 24px — Địa 14px */
.sm-header__toggle span:nth-child(1) { width: 18px; }
.sm-header__toggle span:nth-child(2) { width: 24px; }
.sm-header__toggle span:nth-child(3) { width: 14px; }
.sm-header__toggle:hover span { background: rgba(212,175,55,0.9); }

/* Open state — transform thành X đẹp */
.sm-header__toggle.is-open span:nth-child(1) {
    transform: translateY(8.5px) rotate(45deg);
}
.sm-header__toggle.is-open span:nth-child(2) {
    opacity: 0; transform: scaleX(0);
}
.sm-header__toggle.is-open span:nth-child(3) {
    transform: translateY(-8.5px) rotate(-45deg);
}
.sm-header__toggle.is-open span { background: rgba(212,175,55,0.85); }

/* ══════════════════════════════════════════════════════
   MOBILE MENU "Huyền Điện" — Fade từ trên xuống
   ══════════════════════════════════════════════════════ */
.sm-mobile-menu {
    display: block; position: fixed;
    top: var(--header-bar, 88px); left: 0; right: 0;
    width: 100%; max-width: var(--container-max);
    margin-left: auto; margin-right: auto;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Ccircle cx='20' cy='30' r='1' fill='%23c9a96e' opacity='0.08'/%3E%3Ccircle cx='80' cy='15' r='0.8' fill='%23c9a96e' opacity='0.06'/%3E%3Ccircle cx='140' cy='45' r='1.2' fill='%23c9a96e' opacity='0.07'/%3E%3Ccircle cx='170' cy='20' r='0.7' fill='%23c9a96e' opacity='0.05'/%3E%3Ccircle cx='55' cy='65' r='0.9' fill='%23c9a96e' opacity='0.06'/%3E%3Ccircle cx='120' cy='80' r='1' fill='%23c9a96e' opacity='0.08'/%3E%3Ccircle cx='185' cy='70' r='0.8' fill='%23c9a96e' opacity='0.05'/%3E%3Ccircle cx='35' cy='90' r='1.1' fill='%23c9a96e' opacity='0.06'/%3E%3C/svg%3E") repeat,
        rgba(9,8,7,0.98);
    padding: 0;
    border-top: 1px solid rgba(201,169,110,0.14);
    border-bottom: none;
    box-shadow: 0 24px 80px rgba(0,0,0,0.9), 0 1px 0 rgba(201,169,110,0.06);
    z-index: var(--z-mobile);
    transform: translateY(-12px); opacity: 0;
    pointer-events: none;
    transition: transform 250ms cubic-bezier(0.4,0,0.2,1), opacity 200ms ease;
    will-change: transform, opacity;
    overflow: hidden;
}
.sm-mobile-menu.active { transform: translateY(0); opacity: 1; pointer-events: auto; }
.sm-mobile-menu[aria-hidden="true"] a,
.sm-mobile-menu[aria-hidden="true"] button { visibility: hidden; }
[aria-hidden="true"]#smc-aiv-panel a,
[aria-hidden="true"]#smc-aiv-panel button,
[aria-hidden="true"]#smc-aiv-panel input,
[aria-hidden="true"]#smc-aiv-panel textarea { visibility: hidden; }

/* Meander frame — top & bottom */
.sm-mobile-menu__meander {
    height: 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M0.5,7 L0.5,0.5 L7,0.5 L7,7 L2.5,7 L2.5,3 L5.5,3 L5.5,5.5 L3.5,5.5 L3.5,4 L4.5,4' fill='none' stroke='%23c9a96e' stroke-width='0.7' stroke-linejoin='miter' stroke-linecap='square'/%3E%3C/svg%3E");
    background-repeat: repeat-x; background-position: center;
    opacity: 0.3; pointer-events: none;
}

/* Watermark — radial gradient bottom-right */
.sm-mobile-menu__watermark {
    position: absolute; bottom: 0; right: 0;
    width: 120px; height: 120px;
    background: radial-gradient(circle at 100% 100%, rgba(201,169,110,0.04) 0%, transparent 70%);
    pointer-events: none;
}

/* Menu list */
.sm-mobile-menu__list {
    list-style: none;
    padding: 6px 0;
}

/* Items — stagger animation on open */
.sm-mobile-menu__list li {
    position: relative;
    opacity: 0; transform: translateX(-8px);
    transition: opacity 180ms ease, transform 180ms cubic-bezier(0.4,0,0.2,1);
}
.sm-mobile-menu.active .sm-mobile-menu__list li {
    opacity: 1; transform: translateX(0);
}
.sm-mobile-menu.active .sm-mobile-menu__list li:nth-child(1) { transition-delay: 30ms; }
.sm-mobile-menu.active .sm-mobile-menu__list li:nth-child(2) { transition-delay: 60ms; }
.sm-mobile-menu.active .sm-mobile-menu__list li:nth-child(3) { transition-delay: 90ms; }
.sm-mobile-menu.active .sm-mobile-menu__list li:nth-child(4) { transition-delay: 120ms; }
.sm-mobile-menu.active .sm-mobile-menu__list li:nth-child(5) { transition-delay: 150ms; }

/* Gradient fade separator between items */
.sm-mobile-menu__list li + li::after {
    content: '';
    position: absolute; top: 0; left: 20px; right: 20px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,169,110,0.15) 30%, rgba(201,169,110,0.15) 70%, transparent);
    pointer-events: none;
}

/* ◈ Diamond marker — left side, CHỈ top-level items */
.sm-mobile-menu__list > li::before {
    content: '';
    position: absolute; left: 20px; top: 50%;
    transform: translateY(-50%);
    width: 10px; height: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 .5 L7.5 4 L4 7.5 L.5 4Z' fill='none' stroke='%23c9a96e' stroke-width='.8' opacity='.35'/%3E%3Ccircle cx='4' cy='4' r='.8' fill='%23c9a96e' opacity='.2'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    transition: opacity 250ms ease;
}
.sm-mobile-menu__list > li:first-child::before { opacity: .9; }
.sm-mobile-menu__list > li:hover::before { opacity: .9; }
/* Parent có sub-menu: ẩn CSS ::before diamond (top:50% lệch khi sub mở) → dùng JS inject thay */
.sm-mobile-menu__list > li.menu-item-has-children::before { display: none; }
/* JS-injected diamond — cố định theo link, không theo li */
.sm-mob-diamond {
    position: absolute; left: 20px; top: 0;
    width: 10px; height: 10px;
    pointer-events: none;
    /* center vertically with the link's min-height 56px + padding 18px top */
    margin-top: calc(18px + (56px - 18px * 2 - 10px) / 2);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 .5 L7.5 4 L4 7.5 L.5 4Z' fill='none' stroke='%23c9a96e' stroke-width='.8' opacity='.35'/%3E%3Ccircle cx='4' cy='4' r='.8' fill='%23c9a96e' opacity='.2'/%3E%3C/svg%3E");
    background-size: contain; background-repeat: no-repeat;
    opacity: .9;
}

/* Nav link — Lexend Deca uppercase, hierarchy */
.sm-mobile-menu__list li a {
    display: flex; align-items: center;
    padding: 18px 22px 18px 42px;
    min-height: 56px;
    color: rgba(224,216,200,0.55);
    font-family: 'Lexend Deca', sans-serif;
    font-size: 0.92rem; font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 220ms ease, padding-left 220ms cubic-bezier(0.4,0,0.2,1);
}
/* Hierarchy: first item = Công Cụ = gold, prominent */
.sm-mobile-menu__list li:first-child a {
    font-weight: 600; color: rgba(201,169,110,.85);
    letter-spacing: .18em;
}
.sm-mobile-menu__list li a:hover,
.sm-mobile-menu__list li.current-menu-item a {
    color: rgba(245,213,140,0.92);
    padding-left: 48px;
}

/* Parent có sub-menu — chevron toggle button bên phải */
.sm-mobile-menu__list > .menu-item-has-children {
    position: relative;
}
.sm-mobile-menu__list > .menu-item-has-children > a {
    padding-right: 56px;
}
.sm-mob-chevron {
    position: absolute; right: 0; top: 0; bottom: 0;
    width: 52px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 2;
    -webkit-tap-highlight-color: transparent;
    background: none; border: none; padding: 0;
}
.sm-mob-chevron::after {
    content: '';
    width: 10px; height: 10px;
    border-right: 1.5px solid rgba(201,169,110,.5);
    border-bottom: 1.5px solid rgba(201,169,110,.5);
    transform: rotate(45deg);
    transition: transform 300ms ease;
}
.menu-item-has-children.sub-open > .sm-mob-chevron::after {
    transform: rotate(-135deg);
}

/* Sub-menu — accordion "Cuộn Trục" */
.sm-mobile-menu__list .sub-menu {
    list-style: none; padding: 0; margin: 0;
    max-height: 0; overflow: hidden;
    transition: max-height 200ms cubic-bezier(0.4,0,0.2,1);
    contain: layout style;
}
.sm-mobile-menu__list .menu-item-has-children.sub-open > .sub-menu {
    max-height: 500px;
}

/* Sub-menu items */
.sm-mobile-menu__list .sub-menu li {
    position: relative;
    opacity: 0; transform: translateX(-6px);
    transition: opacity 150ms ease, transform 150ms ease;
}
.sm-mobile-menu__list .menu-item-has-children.sub-open > .sub-menu li {
    opacity: 1; transform: translateX(0);
}
.sm-mobile-menu__list .menu-item-has-children.sub-open > .sub-menu li:nth-child(1) { transition-delay: 20ms; }
.sm-mobile-menu__list .menu-item-has-children.sub-open > .sub-menu li:nth-child(2) { transition-delay: 40ms; }
.sm-mobile-menu__list .menu-item-has-children.sub-open > .sub-menu li:nth-child(3) { transition-delay: 60ms; }
.sm-mobile-menu__list .menu-item-has-children.sub-open > .sub-menu li:nth-child(4) { transition-delay: 80ms; }
.sm-mobile-menu__list .menu-item-has-children.sub-open > .sub-menu li:nth-child(5) { transition-delay: 100ms; }
.sm-mobile-menu__list .menu-item-has-children.sub-open > .sub-menu li:nth-child(6) { transition-delay: 120ms; }

/* Sub-menu link style — nhỏ hơn, indent, gạch ngang thay diamond */
.sm-mobile-menu__list .sub-menu li a {
    padding: 14px 22px 14px 62px;
    min-height: 44px;
    font-size: 0.65rem; font-weight: 400;
    color: rgba(224,216,200,0.5);
    letter-spacing: .12em;
}
.sm-mobile-menu__list .sub-menu li a:hover,
.sm-mobile-menu__list .sub-menu li.current-menu-item a {
    color: rgba(245,213,140,0.85);
    padding-left: 68px;
}
/* Diamond nhỏ cho sub-items */
.sm-mobile-menu__list .sub-menu li::before {
    content: '';
    position: absolute; left: 44px; top: 50%;
    transform: translateY(-50%);
    width: 7px; height: 7px;
    background: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 .5 L7.5 4 L4 7.5 L.5 4Z' fill='none' stroke='%23c9a96e' stroke-width='.8' opacity='.35'/%3E%3C/svg%3E");
    background-size: contain; background-repeat: no-repeat;
    pointer-events: none;
}
/* Bỏ diamond marker cho sub-items */
.sm-mobile-menu__list .sub-menu li + li::after {
    left: 42px; right: 22px;
    background: linear-gradient(90deg, transparent, rgba(201,169,110,0.08) 30%, rgba(201,169,110,0.08) 70%, transparent);
}

/* ═══════════════════════════════════════
   PAGE TRANSITION ZONE — Header → Body seamless connection
   Áp dụng cho TẤT CẢ trang: tool pages, hub pages, content pages
   ═══════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   REVERSE BLEED SYSTEM — Tool atmosphere bleeds into header zone
   Architecture: CSS Custom Properties on body:has() → universal rules read vars
   Technique: color-mix(in oklch) for perceptual blending + @supports fallback
   ══════════════════════════════════════════════════════════ */

/* Default tokens (fallback when no cosmos active) */
:root {
    --tool-bg-blend:     #0c0c0a;
    --tool-accent-main:  #c9a96e;
    --tool-accent-subtle: rgba(201,169,110,0.06);
}

/* ── TOOL ATMOSPHERE TOKENS — 1 line per tool, drives ALL breadcrumb gradients ── */
body:has(.tsh-cosmos)    { --tool-bg-blend:#080705; --tool-accent-main:#c9a96e; --tool-accent-subtle:rgba(201,169,110,0.07); }
body:has(.nh-cosmos)     { --tool-bg-blend:#080c0a; --tool-accent-main:#3c9070; --tool-accent-subtle:rgba(60,144,112,0.07); }
body:has(.tt-cosmos)     { --tool-bg-blend:#0c0808; --tool-accent-main:#c85040; --tool-accent-subtle:rgba(200,80,64,0.07); }
body:has(.hh-cosmos)     { --tool-bg-blend:#0c0808; --tool-accent-main:#d4707a; --tool-accent-subtle:rgba(212,112,122,0.07); }
body:has(.tr-cosmos)     { --tool-bg-blend:#08060c; --tool-accent-main:#7040a8; --tool-accent-subtle:rgba(112,64,168,0.07); }
body:has(.bkieu-cosmos)  { --tool-bg-blend:#090b07; --tool-accent-main:#7a9848; --tool-accent-subtle:rgba(122,152,72,0.07); }
body:has(.qc-cosmos)     { --tool-bg-blend:#070a08; --tool-accent-main:#1e7048; --tool-accent-subtle:rgba(30,112,72,0.07); }
body:has(.gq-cosmos)     { --tool-bg-blend:#0a0806; --tool-accent-main:#c06830; --tool-accent-subtle:rgba(192,104,48,0.07); }
body:has(.lh-cosmos)     { --tool-bg-blend:#0c0c0a; --tool-accent-main:#7a9878; --tool-accent-subtle:rgba(122,152,120,0.07); }
body:has(.qkm-cosmos)    { --tool-bg-blend:#080c0a; --tool-accent-main:#4a9070; --tool-accent-subtle:rgba(74,144,112,0.07); }
body:has(.qa-cosmos)     { --tool-bg-blend:#0a0808; --tool-accent-main:#c83050; --tool-accent-subtle:rgba(200,48,80,0.07); }
body:has(.mh-cosmos)     { --tool-bg-blend:#0c0a08; --tool-accent-main:#c87858; --tool-accent-subtle:rgba(200,120,88,0.07); }
body:has(.sh-cosmos)     { --tool-bg-blend:#0c0606; --tool-accent-main:#d03020; --tool-accent-subtle:rgba(208,48,32,0.07); }
body:has(.km-cosmos)     { --tool-bg-blend:#080a08; --tool-accent-main:#1e6858; --tool-accent-subtle:rgba(30,104,88,0.07); }
body:has(.ln-cosmos)     { --tool-bg-blend:#08080c; --tool-accent-main:#3a4a8c; --tool-accent-subtle:rgba(58,74,140,0.07); }
body:has(.ta-cosmos)     { --tool-bg-blend:#0a0608; --tool-accent-main:#8b2a38; --tool-accent-subtle:rgba(139,42,56,0.07); }
body:has(.tv-cosmos)     { --tool-bg-blend:#0a0810; --tool-accent-main:#6c3082; --tool-accent-subtle:rgba(108,48,130,0.07); }
body:has(.cx-cosmos)     { --tool-bg-blend:#0c0a06; --tool-accent-main:#a8862a; --tool-accent-subtle:rgba(168,134,42,0.07); }
body:has(.zd-cosmos)     { --tool-bg-blend:#0d0f12; --tool-accent-main:#5a7eb8; --tool-accent-subtle:rgba(90,126,184,0.07); }
body:has(.vk-page)       { --tool-bg-blend:#0c0806; --tool-accent-main:#a84838; --tool-accent-subtle:rgba(168,72,56,0.07); }
body:has(.bds-cosmos)    { --tool-bg-blend:#080806; --tool-accent-main:#2a3a7a; --tool-accent-subtle:rgba(42,58,122,0.07); }
body:has(.hc-cosmos)     { --tool-bg-blend:#080608; --tool-accent-main:#b0506b; --tool-accent-subtle:rgba(176,80,107,0.07); }
body:has(.ct-db-cosmos)  { --tool-bg-blend:#080806; --tool-accent-main:#4a5a9b; --tool-accent-subtle:rgba(74,90,155,0.07); }
body:has(.ct-cosmos)     { --tool-bg-blend:#0a0808; --tool-accent-main:#a06850; --tool-accent-subtle:rgba(160,104,80,0.07); }
body:has(.tm-cosmos)     { --tool-bg-blend:#080806; --tool-accent-main:#c07848; --tool-accent-subtle:rgba(192,120,72,0.07); }
body:has(.nr-cosmos)     { --tool-bg-blend:#080806; --tool-accent-main:#a05530; --tool-accent-subtle:rgba(160,85,48,0.07); }
body:has(.addr-cosmos)   { --tool-bg-blend:#080705; --tool-accent-main:#72b890; --tool-accent-subtle:rgba(114,184,144,0.07); }
body:has(.baby-cosmos)   { --tool-bg-blend:#080705; --tool-accent-main:#b8a0d8; --tool-accent-subtle:rgba(184,160,216,0.07); }
body:has(.biz-cosmos)    { --tool-bg-blend:#080705; --tool-accent-main:#c98e4e; --tool-accent-subtle:rgba(201,142,78,0.07); }
body:has(.compat-cosmos) { --tool-bg-blend:#080705; --tool-accent-main:#e895b3; --tool-accent-subtle:rgba(232,149,179,0.07); }
body:has(.daily-cosmos)  { --tool-bg-blend:#080705; --tool-accent-main:#e06858; --tool-accent-subtle:rgba(224,104,88,0.07); }
body:has(.phone-cosmos)  { --tool-bg-blend:#080705; --tool-accent-main:#7ec8d4; --tool-accent-subtle:rgba(126,200,212,0.07); }
body:has(.plate-cosmos)  { --tool-bg-blend:#080705; --tool-accent-main:#a8b8c8; --tool-accent-subtle:rgba(168,184,200,0.07); }
body:has(.wd-cosmos)     { --tool-bg-blend:#0c0c0a; --tool-accent-main:#d4856e; --tool-accent-subtle:rgba(212,133,110,0.07); }
body:has(.pt-cosmos)     { --tool-bg-blend:#0a0606; --tool-accent-main:#c04038; --tool-accent-subtle:rgba(192,64,56,0.07); }
body:has(.pt-bt-cosmos)  { --tool-bg-blend:#0a0608; --tool-accent-main:#982848; --tool-accent-subtle:rgba(152,40,72,0.07); }
body:has(.pt-bc-cosmos)  { --tool-bg-blend:#060a0c; --tool-accent-main:#3098c0; --tool-accent-subtle:rgba(48,152,192,0.07); }
body:has(.pt-cy-cosmos)  { --tool-bg-blend:#060a06; --tool-accent-main:#2d8b4a; --tool-accent-subtle:rgba(45,139,74,0.07); }
body:has(.pt-ct-cosmos)  { --tool-bg-blend:#080a0e; --tool-accent-main:#5a7d9a; --tool-accent-subtle:rgba(90,125,154,0.07); }
body:has(.pt-htmn-cosmos){ --tool-bg-blend:#0a0806; --tool-accent-main:#c07040; --tool-accent-subtle:rgba(192,112,64,0.07); }
body:has(.pt-hn-cosmos)  { --tool-bg-blend:#0a0806; --tool-accent-main:#c89830; --tool-accent-subtle:rgba(200,152,48,0.07); }
body:has(.pt-ms-cosmos)  { --tool-bg-blend:#0a0608; --tool-accent-main:#c050a0; --tool-accent-subtle:rgba(192,80,160,0.07); }
body:has(.pt-pt-cosmos)  { --tool-bg-blend:#08060a; --tool-accent-main:#8b6baf; --tool-accent-subtle:rgba(139,107,175,0.07); }
body:has(.pt-ss-cosmos)  { --tool-bg-blend:#080a10; --tool-accent-main:#3a60c8; --tool-accent-subtle:rgba(58,96,200,0.07); }
body:has(.pt-xn-cosmos)  { --tool-bg-blend:#0a0806; --tool-accent-main:#a87838; --tool-accent-subtle:rgba(168,120,56,0.07); }
body:has(.pt-at-cosmos)  { --tool-bg-blend:#0a0806; --tool-accent-main:#586070; --tool-accent-subtle:rgba(88,96,112,0.07); }

/* ── HEADER ACCENT GLOW — soft diffused glow, no hard line ── */
body:has([class*="-cosmos"]) .sm-header {
    box-shadow:
        0 4px 20px color-mix(in oklch, var(--tool-accent-main) 8%, transparent),
        0 8px 40px rgba(0,0,0,0.6);
}
body:has([class*="-cosmos"]) .sm-header.is-scrolled {
    box-shadow:
        0 6px 28px color-mix(in oklch, var(--tool-accent-main) 12%, transparent),
        0 12px 48px rgba(0,0,0,0.8);
}

/* ── SM-MAIN ATMOSPHERIC FADE ── */
.sm-main { position: relative; }
.sm-main::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 280px;
    /* Base: obsidian fade (all pages) */
    background: linear-gradient(to bottom,
        rgba(12,12,10,0.94) 0%,
        rgba(12,12,10,0.6)  28%,
        rgba(12,12,10,0.2)  58%,
        transparent 100%);
    pointer-events: none;
    z-index: 0;
}
/* Fallback: tool bg at bottom (browsers without color-mix) */
body:has([class*="-cosmos"]) .sm-main::before {
    background: linear-gradient(to bottom,
        rgba(12,12,10,0.94) 0%,
        rgba(12,12,10,0.5)  35%,
        rgba(12,12,10,0.1)  65%,
        var(--tool-bg-blend) 100%);
}
/* Premium: oklch perceptual blending (Chrome 111+, FF 113+, Safari 16.2+) */
@supports (background: color-mix(in oklch, red, blue)) {
    body:has([class*="-cosmos"]) .sm-main::before {
        background: linear-gradient(to bottom,
            rgba(12,12,10,0.94) 0%,
            color-mix(in oklch, rgba(12,12,10,0.94) 65%, var(--tool-bg-blend) 35%) 40%,
            color-mix(in oklch, transparent 20%, var(--tool-bg-blend) 80%) 80%,
            var(--tool-bg-blend) 100%);
    }
}

/* Breadcrumb zone — atmospheric pseudo elements (padding defined at line ~1428) */
/* Cosmos sau breadcrumb: không cần thêm padding-top header */
.sm-breadcrumb ~ [class*="-cosmos"] {
    padding-top: 0;
    position: relative;
    z-index: 1;
}

/* ═══════════════════════════════════════
   HERO — Obsidian & Gold — Centered
   ═══════════════════════════════════════ */
.sm-hero {
    position: relative; overflow: hidden;
    padding: calc(var(--header-height) + var(--space-16)) 0 var(--space-16);
    /* NO min-height: 100vh — content defines size, kills dead space */
}
.sm-hero__bg { position: absolute; top:0;right:0;bottom:0;left:0; z-index: 0; }

/* Constellation overlay */
.sm-hero__constellation {
    position: absolute; top:0;right:0;bottom:0;left:0; z-index: 0;
    pointer-events: none;
}
.sm-constellation__svg {
    width: 100%; height: 100%;
    animation: constellationPulse 6s ease-in-out infinite;
}

/* Centered content layout */
.sm-hero__grid { max-width: 720px; margin: 0 auto; }
.sm-hero__left { text-align: center; }

/* Hero entrance animations */
.sm-hero__anim {
    opacity: 0;
    transform: translateY(30px);
    animation: heroFadeIn 0.8s ease-out forwards;
    animation-delay: var(--anim-delay, 0s);
}

/* Starfield — CSS box-shadow stars */
.sm-hero__stars { position: absolute; top:0;right:0;bottom:0;left:0; overflow: hidden; }
.sm-hero__stars::before,
.sm-hero__stars::after {
    content: ''; position: absolute;
    width: 1px; height: 1px;
    background: transparent; border-radius: 50%;
}
.sm-hero__stars::before {
    box-shadow:
        25px 50px 0 0 rgba(255,255,255,0.3), 75px 180px 0 0 rgba(255,255,255,0.2),
        130px 60px 0 0 rgba(255,255,255,0.4), 200px 300px 0 0 rgba(255,255,255,0.2),
        260px 130px 0 0 rgba(255,255,255,0.35), 340px 400px 0 0 rgba(255,255,255,0.15),
        410px 80px 0 0 rgba(255,255,255,0.3), 480px 250px 0 0 rgba(255,255,255,0.25),
        560px 450px 0 0 rgba(255,255,255,0.2), 620px 160px 0 0 rgba(255,255,255,0.4),
        700px 380px 0 0 rgba(255,255,255,0.15), 780px 90px 0 0 rgba(255,255,255,0.3),
        850px 320px 0 0 rgba(255,255,255,0.2), 920px 200px 0 0 rgba(255,255,255,0.35),
        1000px 430px 0 0 rgba(255,255,255,0.2), 1080px 70px 0 0 rgba(255,255,255,0.3),
        1150px 350px 0 0 rgba(255,255,255,0.15), 1230px 150px 0 0 rgba(255,255,255,0.4),
        1300px 280px 0 0 rgba(255,255,255,0.2), 1500px 400px 0 0 rgba(255,255,255,0.2),
        90px 500px 0 0 rgba(255,255,255,0.2), 300px 550px 0 0 rgba(255,255,255,0.3),
        500px 580px 0 0 rgba(255,255,255,0.15), 700px 530px 0 0 rgba(255,255,255,0.25),
        900px 560px 0 0 rgba(255,255,255,0.2), 1100px 510px 0 0 rgba(255,255,255,0.3);
    animation: starTwinkle 4s ease-in-out infinite alternate;
}
.sm-hero__stars::after {
    width: 2px; height: 2px;
    box-shadow:
        100px 120px 0 0 rgba(201,169,110,0.5), 350px 200px 0 0 rgba(255,255,255,0.6),
        580px 80px 0 0 rgba(201,169,110,0.4), 800px 300px 0 0 rgba(255,255,255,0.5),
        1050px 150px 0 0 rgba(201,169,110,0.6), 200px 420px 0 0 rgba(255,255,255,0.5),
        650px 350px 0 0 rgba(201,169,110,0.4), 1100px 450px 0 0 rgba(255,255,255,0.6),
        400px 600px 0 0 rgba(201,169,110,0.3), 900px 650px 0 0 rgba(255,255,255,0.4);
    animation: starTwinkle 6s ease-in-out infinite alternate-reverse;
}
@keyframes starTwinkle {
    0% { opacity: 0.6; }
    100% { opacity: 1; }
}

/* Ambient lighting — Obsidian & Gold (NO purple) */
.sm-hero__aura {
    position: absolute; top:0;right:0;bottom:0;left:0;
    background:
        radial-gradient(ellipse 100% 80% at 50% 45%, rgba(212, 175, 55, 0.12) 0%, transparent 65%),
        radial-gradient(ellipse 80% 60% at 50% 45%, rgba(212, 175, 55, 0.06) 0%, transparent 55%),
        radial-gradient(ellipse 50% 70% at 0% 70%, rgba(190, 169, 142, 0.05) 0%, transparent 60%),
        radial-gradient(ellipse 50% 70% at 100% 30%, rgba(201, 169, 110, 0.04) 0%, transparent 60%),
        var(--surface-primary);
}

/* ── SVG VONG VAN MENH — Celestial seal, centered watermark ── */
.sm-vvm {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(1);
    width: 850px; height: 850px;
    pointer-events: none;
    opacity: 0;
    animation: heroVVMReveal 1.2s ease-out 0.2s forwards;
}
.sm-vvm__svg { width: 100%; height: 100%; }

/* Ring rotations + glow pulse */
.sm-vvm__ring--outer {
    transform-origin: 300px 300px;
    animation: vvmRotate 120s linear infinite reverse, ringGlowPulse 8s ease-in-out infinite;
  will-change: transform;
}
.sm-vvm__ring--middle {
    transform-origin: 300px 300px;
    animation: vvmRotate 90s linear infinite, ringGlowPulse 8s ease-in-out infinite 2s;
  will-change: transform;
}
.sm-vvm__ring--inner {
    transform-origin: 300px 300px;
    animation: ringGlowPulse 8s ease-in-out infinite 4s;
}
.sm-vvm__center {
    transform-origin: 300px 300px;
    animation: vvmRotate 60s linear infinite reverse;
  will-change: transform;
}
@keyframes vvmRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ── HERO CONTENT ── */
.sm-hero__content { position: relative; z-index: 1; text-align: center; }
.sm-hero__above {
    font-size: 0.7rem; font-weight: var(--font-weight-medium);
    letter-spacing: 0.3em; text-transform: uppercase;
    color: var(--color-primary-400); margin-bottom: var(--space-4);
    opacity: 0.8;
}
/* Hero title — luxury serif + solid gold gradient (shimmer broke rendering) */
.sm-hero__title {
    font-family: var(--font-hero);
    font-size: clamp(var(--font-size-5xl), 8vw, var(--font-size-8xl));
    font-weight: var(--font-weight-normal);
    line-height: 1.15;
    margin-bottom: var(--space-4);
    letter-spacing: 0.02em;
    color: var(--color-primary-300);
    text-shadow: 0 0 60px rgba(201, 169, 110, 0.4), 0 0 120px rgba(201, 169, 110, 0.15), 0 2px 4px rgba(0, 0, 0, 0.6);
}
.sm-hero__subtitle {
    font-size: var(--font-size-lg); color: var(--text-secondary);
    font-weight: var(--font-weight-light);
    margin-bottom: var(--space-8);
    letter-spacing: 0.08em;
}
.sm-hero__form {
    max-width: 560px; margin: 0 auto var(--space-4);
    border-color: rgba(201, 169, 110, 0.3);
    background: rgba(12, 12, 10, 0.9);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(201, 169, 110, 0.25);
}
.sm-hero__social-proof { font-size: var(--font-size-sm); color: var(--text-muted); }
.sm-hero__count { color: var(--color-primary-400); font-weight: var(--font-weight-bold); }

/* ── QUICK FORM ── */
.sm-quick-form__row {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);
    margin-bottom: var(--space-4);
}
.sm-quick-form__age-gate { margin-bottom: var(--space-4); }
.sm-quick-form__note {
    font-size: var(--font-size-xs); color: var(--text-muted);
    text-align: center; margin-top: var(--space-3);
}

/* ═══════════════════════════════════════
   GOLD LINE DIVIDERS — minimal luxury
   ═══════════════════════════════════════ */
.sm-gold-divider {
    display: flex; justify-content: center; align-items: center;
    gap: var(--space-4); padding: var(--space-8) 0;
    max-width: 500px; margin: 0 auto;
}
.sm-gold-divider__line {
    flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.3), transparent);
}
.sm-gold-divider__diamond {
    width: 8px; height: 8px; flex-shrink: 0;
    background: rgba(212, 175, 55, 0.2);
    border: 1px solid rgba(212, 175, 55, 0.3);
    transform: rotate(45deg);
}

/* ═══════════════════════════════════════
   SECTIONS — Premium spacing (skill: frontend-design)
   ═══════════════════════════════════════ */
.sm-section { position: relative; padding: var(--space-16) 0; }

.sm-section__title {
    font-family: var(--font-calligraphy);
    font-size: clamp(var(--font-size-3xl), 4vw, var(--font-size-4xl));
    font-weight: var(--font-weight-normal);
    text-align: center;
    margin-bottom: var(--space-4);
    line-height: 1.2;
    letter-spacing: 0.03em;
    background: var(--gradient-gold-text);
    background-size: 200% auto;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.sm-section__subtitle {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: var(--space-12);
    max-width: 600px;
    margin-left: auto; margin-right: auto;
    line-height: var(--line-height-loose);
}

/* ═══════════════════════════════════════
   TOOL CARDS — Doctor Strange Mandala × Ancient Chinese Seal Frame
   Equal 3-column balanced layout
   (skill: frontend-design + ui-ux-pro-max + canvas-design)
   ═══════════════════════════════════════ */

/* ── GRID — Equal 3 columns, balanced ── */
.sm-tool-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
    margin-bottom: var(--space-12);
}

/* ── CARD BASE ── */
.sm-tool-card {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    padding: var(--space-10) var(--space-6) var(--space-8);
    text-decoration: none; color: inherit;
    border-color: rgba(201, 169, 110, 0.12);
    box-shadow: var(--shadow-card);
    transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 400ms ease, border-color 400ms ease;
}

/* ── LAYER 1: Subtle slow-rotating mandala border ── */
.sm-tool-card::before {
    content: ''; position: absolute; top:-2px;right:-2px;bottom:-2px;left:-2px;
    border-radius: var(--radius-xl); padding: 2px;
    background: conic-gradient(from 0deg,
        transparent 0%, rgba(212, 175, 55, 0.3) 4%, transparent 8%,
        transparent 50%, rgba(201, 169, 110, 0.2) 54%, transparent 58%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: borderRotate 60s linear infinite;
    opacity: 0.2;
    pointer-events: none;
    transition: opacity 400ms ease;
  will-change: transform;
}
/* Stagger border rotation start — each card at different angle */
.sm-tool-card:nth-child(2)::before { animation-delay: -4s; }
.sm-tool-card:nth-child(3)::before { animation-delay: -8s; }

/* ── LAYER 2: Portal energy aura ── */
.sm-tool-card::after {
    content: ''; position: absolute;
    top: var(--space-8); left: 50%; transform: translateX(-50%);
    width: 180px; height: 180px; border-radius: 50%;
    background: radial-gradient(circle,
        rgba(212, 175, 55, 0.07) 0%,
        rgba(201, 169, 110, 0.03) 45%,
        transparent 70%
    );
    pointer-events: none; z-index: 0;
    animation: portalAuraPulse 6s ease-in-out infinite;
    transition: all 400ms ease;
}
.sm-tool-card:nth-child(2)::after { animation-delay: -2s; }
.sm-tool-card:nth-child(3)::after { animation-delay: -4s; }

/* ── CHINESE CORNER ORNAMENTS — Ancient seal frame (回字紋 inspired) ── */
.sm-tool-card__frame {
    position: absolute; top:10px;right:10px;bottom:10px;left:10px;
    pointer-events: none; z-index: 2;
    /* 8 gradients = 4 corners × 2 lines each (horizontal + vertical) */
    background:
        /* ╔ Top-left H */  linear-gradient(90deg, rgba(212,175,55,0.4), transparent) no-repeat 0 0 / 28px 1.5px,
        /* ╔ Top-left V */  linear-gradient(180deg, rgba(212,175,55,0.4), transparent) no-repeat 0 0 / 1.5px 28px,
        /* ╗ Top-right H */ linear-gradient(270deg, rgba(212,175,55,0.4), transparent) no-repeat 100% 0 / 28px 1.5px,
        /* ╗ Top-right V */ linear-gradient(180deg, rgba(212,175,55,0.4), transparent) no-repeat 100% 0 / 1.5px 28px,
        /* ╚ Bot-left H */  linear-gradient(90deg, rgba(212,175,55,0.4), transparent) no-repeat 0 100% / 28px 1.5px,
        /* ╚ Bot-left V */  linear-gradient(0deg, rgba(212,175,55,0.4), transparent) no-repeat 0 100% / 1.5px 28px,
        /* ╝ Bot-right H */ linear-gradient(270deg, rgba(212,175,55,0.4), transparent) no-repeat 100% 100% / 28px 1.5px,
        /* ╝ Bot-right V */ linear-gradient(0deg, rgba(212,175,55,0.4), transparent) no-repeat 100% 100% / 1.5px 28px;
    transition: all 400ms ease;
}
/* Inner seal line — Chinese double-frame */
.sm-tool-card__frame::before {
    content: ''; position: absolute; top:6px;right:6px;bottom:6px;left:6px;
    border: 0.5px solid rgba(201, 169, 110, 0.05);
    pointer-events: none;
    transition: border-color 400ms ease;
}
/* Corner jewel dots — gold accents at frame intersections */
.sm-tool-card__frame::after {
    content: ''; position: absolute; top:-3px;right:-3px;bottom:-3px;left:-3px;
    pointer-events: none;
    background:
        radial-gradient(circle 3px at 0 0, rgba(212,175,55,0.25), transparent) no-repeat 0 0 / 6px 6px,
        radial-gradient(circle 3px at 100% 0, rgba(212,175,55,0.25), transparent) no-repeat 100% 0 / 6px 6px,
        radial-gradient(circle 3px at 0 100%, rgba(212,175,55,0.25), transparent) no-repeat 0 100% / 6px 6px,
        radial-gradient(circle 3px at 100% 100%, rgba(212,175,55,0.25), transparent) no-repeat 100% 100% / 6px 6px;
    transition: all 400ms ease;
}

/* ── ICON with Doctor Strange mandala rings ── */
.sm-tool-card__icon {
    width: 120px; height: 120px;
    margin-bottom: var(--space-6);
    color: var(--color-primary-400);
    position: relative; z-index: 3;
    transition: filter 400ms ease;
}
.sm-tool-card__icon svg { width: 100%; height: 100%; position: relative; z-index: 1; }
/* Outer mandala ring — clockwise rotation */
.sm-tool-card__icon::before {
    content: ''; position: absolute;
    top:-16px;right:-16px;bottom:-16px;left:-16px; border-radius: 50%;
    border: 1px solid rgba(201, 169, 110, 0.08);
    background: repeating-conic-gradient(from 0deg,
        transparent 0deg 4deg,
        rgba(212, 175, 55, 0.1) 5deg 7deg,
        transparent 8deg 30deg
    );
    animation: spin 25s linear infinite;
    pointer-events: none;
    transition: all 400ms ease;
  will-change: transform;
}
/* Inner mandala ring — counter-clockwise */
.sm-tool-card__icon::after {
    content: ''; position: absolute;
    top:-8px;right:-8px;bottom:-8px;left:-8px; border-radius: 50%;
    border: 0.5px dashed rgba(201, 169, 110, 0.06);
    animation: spin 18s linear infinite reverse;
    pointer-events: none;
    transition: all 400ms ease;
  will-change: transform;
}
/* Stagger icon ring rotations */
.sm-tool-card:nth-child(2) .sm-tool-card__icon::before { animation-delay: -8s; }
.sm-tool-card:nth-child(3) .sm-tool-card__icon::before { animation-delay: -16s; }

/* ── Card text ── */
.sm-tool-card h3 {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl); margin-bottom: var(--space-3);
    font-weight: var(--font-weight-normal); letter-spacing: 0.04em;
    color: var(--color-primary-300);
    position: relative; z-index: 3;
}
.sm-tool-card p {
    color: var(--text-secondary); font-size: var(--font-size-sm);
    line-height: var(--line-height-loose); margin-bottom: var(--space-5);
    position: relative; z-index: 3;
}
/* CTA — Chinese seal stamp micro-button (印章 style) */
.sm-tool-card__cta {
    font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);
    color: var(--color-primary-400);
    margin-top: auto;
    position: relative; z-index: 3;
    padding: var(--space-2) var(--space-5);
    border: 1px solid rgba(201, 169, 110, 0.2);
    letter-spacing: 0.04em;
    transition: all 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Double-line seal effect */
.sm-tool-card__cta::before {
    content: ''; position: absolute; top:3px;right:3px;bottom:3px;left:3px;
    border: 0.5px solid rgba(201, 169, 110, 0.1);
    pointer-events: none;
    transition: border-color 400ms ease;
}

/* ═══ HOVER — PORTAL ACTIVATES (no movement — cards stay fixed) ═══ */
.sm-tool-card:hover {
    border-color: rgba(201, 169, 110, 0.35);
    box-shadow: var(--shadow-card-hover), 0 0 60px rgba(212, 175, 55, 0.08);
    transform: none;
}
/* Mandala border subtly intensifies */
.sm-tool-card:hover::before { opacity: 0.4; }
/* Portal aura expands */
.sm-tool-card:hover::after {
    width: 240px; height: 240px;
    background: radial-gradient(circle,
        rgba(212, 175, 55, 0.12) 0%,
        rgba(201, 169, 110, 0.05) 45%,
        transparent 70%
    );
}
/* Corner ornaments intensify */
.sm-tool-card:hover .sm-tool-card__frame {
    background:
        linear-gradient(90deg, rgba(212,175,55,0.65), transparent) no-repeat 0 0 / 36px 2px,
        linear-gradient(180deg, rgba(212,175,55,0.65), transparent) no-repeat 0 0 / 2px 36px,
        linear-gradient(270deg, rgba(212,175,55,0.65), transparent) no-repeat 100% 0 / 36px 2px,
        linear-gradient(180deg, rgba(212,175,55,0.65), transparent) no-repeat 100% 0 / 2px 36px,
        linear-gradient(90deg, rgba(212,175,55,0.65), transparent) no-repeat 0 100% / 36px 2px,
        linear-gradient(0deg, rgba(212,175,55,0.65), transparent) no-repeat 0 100% / 2px 36px,
        linear-gradient(270deg, rgba(212,175,55,0.65), transparent) no-repeat 100% 100% / 36px 2px,
        linear-gradient(0deg, rgba(212,175,55,0.65), transparent) no-repeat 100% 100% / 2px 36px;
}
.sm-tool-card:hover .sm-tool-card__frame::before { border-color: rgba(201, 169, 110, 0.12); }
.sm-tool-card:hover .sm-tool-card__frame::after {
    background:
        radial-gradient(circle 4px at 0 0, rgba(212,175,55,0.45), transparent) no-repeat 0 0 / 8px 8px,
        radial-gradient(circle 4px at 100% 0, rgba(212,175,55,0.45), transparent) no-repeat 100% 0 / 8px 8px,
        radial-gradient(circle 4px at 0 100%, rgba(212,175,55,0.45), transparent) no-repeat 0 100% / 8px 8px,
        radial-gradient(circle 4px at 100% 100%, rgba(212,175,55,0.45), transparent) no-repeat 100% 100% / 8px 8px;
}
/* Portal mandala rings expand */
.sm-tool-card:hover .sm-tool-card__icon::before {
    top:-22px;right:-22px;bottom:-22px;left:-22px;
    border-color: rgba(201, 169, 110, 0.18);
    background: repeating-conic-gradient(from 0deg,
        transparent 0deg 3deg,
        rgba(212, 175, 55, 0.18) 4deg 6deg,
        transparent 7deg 30deg
    );
}
.sm-tool-card:hover .sm-tool-card__icon::after {
    top:-14px;right:-14px;bottom:-14px;left:-14px;
    border-color: rgba(201, 169, 110, 0.1);
}
/* Icon glows (no scale — stays in place) */
.sm-tool-card:hover .sm-tool-card__icon {
    filter: drop-shadow(0 0 24px rgba(201, 169, 110, 0.5));
}
.sm-tool-card:hover .sm-tool-card__cta {
    color: var(--color-primary-300);
    letter-spacing: 0.08em;
    border-color: rgba(201, 169, 110, 0.45);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.12), inset 0 0 15px rgba(212, 175, 55, 0.04);
    background: rgba(212, 175, 55, 0.04);
}
.sm-tool-card:hover .sm-tool-card__cta::before {
    border-color: rgba(201, 169, 110, 0.2);
}

/* Upcoming tools — 5-column grid */
.sm-tool-cards--upcoming {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-5);
    margin-top: var(--space-8);
    padding-top: var(--space-8);
    border-top: 1px solid rgba(201, 169, 110, 0.06);
}
/* "Sắp ra mắt" dimmed card state — unused, kept for legacy */
.sm-tool-card--soon {
    opacity: 0.5;
    pointer-events: none;
    cursor: default;
}
.sm-tool-card--soon.sm-tool-card--link {
    pointer-events: auto !important;
    cursor: pointer !important;
    opacity: 0.7;
}
.sm-tool-card--soon .sm-tool-card__icon {
    width: 80px; height: 80px;
    margin-bottom: var(--space-4);
}
.sm-tool-card--soon h3 { font-size: var(--font-size-lg); }
.sm-tool-card--soon p { font-size: var(--font-size-xs); margin-bottom: 0; }
/* Coming soon badge */
.sm-tool-card__badge-soon {
    position: absolute; top: 8px; right: 8px;
    font-size: 10px; color: var(--color-primary-500);
    text-transform: uppercase; letter-spacing: 0.1em;
    font-weight: var(--font-weight-medium);
    padding: 2px 8px;
    border: 0.5px solid rgba(201, 169, 110, 0.15);
    border-radius: var(--radius-sm);
    z-index: 4;
}

/* ═══════════════════════════════════════
   PRICING — "Ngọc Bài" Imperial Jade Tablet
   DISTINCT from tool cards — deeper surface, top crown,
   edge glow inlay, NO mandala/corner brackets
   ═══════════════════════════════════════ */

/* ── GRID — 3 columns, pyramid alignment ── */
.sm-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    align-items: end;
}

/* ── CARD BASE — Jade tablet surface ── */
.sm-pricing-card {
    position: relative;
    background:
        linear-gradient(180deg,
            rgba(201, 169, 110, 0.06) 0%,
            rgba(12, 12, 10, 0.95) 15%,
            rgba(12, 12, 10, 0.98) 85%,
            rgba(201, 169, 110, 0.04) 100%
        );
    border: 1px solid rgba(201, 169, 110, 0.15);
    border-radius: var(--radius-lg);
    padding: var(--space-10) var(--space-8) var(--space-8);
    text-align: center;
    box-shadow:
        0 2px 4px rgba(0,0,0,0.3),
        0 8px 24px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(201, 169, 110, 0.1);
    transition: box-shadow 400ms ease, border-color 400ms ease;
}

/* ── LAYER 1: Top crown line — gold gradient header strip ── */
.sm-pricing-card::before {
    content: ''; position: absolute;
    top: 0; left: 20%; right: 20%; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.5), transparent);
    border-radius: 0 0 2px 2px;
    pointer-events: none;
    transition: all 400ms ease;
}

/* ── LAYER 2: Bottom edge glow — subtle gold reflection ── */
.sm-pricing-card::after {
    content: ''; position: absolute;
    bottom: 0; left: 15%; right: 15%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 169, 110, 0.25), transparent);
    pointer-events: none;
    transition: all 400ms ease;
}

/* ── FRAME — Elegant continuous double-line border (NOT L-brackets) ── */
.sm-pricing-card__frame {
    position: absolute; top:8px;right:8px;bottom:8px;left:8px;
    border: 0.5px solid rgba(201, 169, 110, 0.06);
    border-radius: calc(var(--radius-lg) - 4px);
    pointer-events: none; z-index: 1;
    transition: border-color 400ms ease;
}
/* Outer soft glow line — edge inlay effect */
.sm-pricing-card__frame::before {
    content: ''; position: absolute; top:-8px;right:-8px;bottom:-8px;left:-8px;
    border-radius: var(--radius-lg);
    box-shadow: inset 0 0 30px rgba(201, 169, 110, 0.03);
    pointer-events: none;
    transition: box-shadow 400ms ease;
}
/* Top center diamond ornament — replaces corner dots */
.sm-pricing-card__frame::after {
    content: '◆'; position: absolute;
    top: -5px; left: 50%; transform: translateX(-50%);
    font-size: 8px; color: rgba(201, 169, 110, 0.25);
    pointer-events: none;
    transition: color 400ms ease;
}

/* ── ICON — Hexagonal frame (bát quái inspired, NOT mandala) ── */
.sm-pricing-card__icon {
    width: 72px; height: 72px;
    margin: 0 auto var(--space-5);
    position: relative; z-index: 3;
}
.sm-pricing-card__icon svg { width: 100%; height: 100%; position: relative; z-index: 1; }
/* Static octagonal ring — no rotation, no animation */
.sm-pricing-card__icon::before {
    content: ''; position: absolute;
    top:-10px;right:-10px;bottom:-10px;left:-10px; border-radius: 50%;
    border: 1px solid rgba(201, 169, 110, 0.1);
    pointer-events: none;
    transition: border-color 400ms ease, box-shadow 400ms ease;
}
/* Second static ring — tighter */
.sm-pricing-card__icon::after {
    content: ''; position: absolute;
    top:-4px;right:-4px;bottom:-4px;left:-4px; border-radius: 50%;
    border: 0.5px solid rgba(201, 169, 110, 0.05);
    pointer-events: none;
    transition: border-color 400ms ease;
}

/* ── Card text ── */
.sm-pricing-card__name {
    font-family: var(--font-calligraphy);
    font-size: var(--font-size-4xl);
    margin-bottom: var(--space-3);
    color: var(--text-primary);
    letter-spacing: 0.02em;
    line-height: 1.1;
    position: relative; z-index: 3;
}
.sm-pricing-card__amount {
    font-family: var(--font-family);
    font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold);
    background: var(--gradient-gold-text);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative; z-index: 3;
}
.sm-pricing-card__original {
    font-family: var(--font-family);
    font-size: var(--font-size-sm); color: var(--text-muted);
    text-decoration: line-through; margin-left: var(--space-2);
}
.sm-pricing-card__period { font-size: var(--font-size-sm); color: var(--text-muted); }
.sm-pricing-card__desc { color: var(--text-secondary); margin: var(--space-3) 0; font-size: var(--font-size-sm); }

/* ── Feature list — gold separator dots instead of lines ── */
.sm-pricing-card__features {
    list-style: none; text-align: left;
    margin: var(--space-6) 0;
    padding: var(--space-4) 0;
    border-top: 1px solid rgba(201, 169, 110, 0.08);
    border-bottom: 1px solid rgba(201, 169, 110, 0.08);
    position: relative; z-index: 3;
}
.sm-pricing-card__features li {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-2) 0; font-size: var(--font-size-sm);
    color: var(--text-secondary);
}
.sm-pricing-card__features li + li {
    border-top: 1px solid rgba(201, 169, 110, 0.04);
}
.sm-pricing-card__features li svg {
    width: 16px; height: 16px; flex-shrink: 0;
    opacity: 0.7;
}
.sm-pricing-card__compare { font-size: var(--font-size-xs); color: var(--text-muted); margin-top: var(--space-4); }

/* ── CTA — Refined gold outline (NOT seal stamp) ── */
.sm-pricing-card .sm-btn {
    position: relative; z-index: 3;
    letter-spacing: 0.05em;
    transition: all 300ms ease;
}
.sm-pricing-card .sm-btn--secondary {
    background: transparent;
    border: 1px solid rgba(201, 169, 110, 0.2);
    color: var(--color-primary-400);
}
.sm-pricing-card .sm-btn--secondary:hover {
    border-color: rgba(201, 169, 110, 0.5);
    background: rgba(201, 169, 110, 0.05);
    box-shadow: 0 0 20px rgba(201, 169, 110, 0.08);
}

/* ═══ POPULAR CARD — Imperial gold treatment ═══ */
.sm-pricing-card--popular {
    border-color: rgba(201, 169, 110, 0.3);
    background:
        radial-gradient(ellipse 80% 40% at 50% 0%, rgba(212, 175, 55, 0.08), transparent 60%),
        linear-gradient(180deg,
            rgba(26, 24, 20, 0.98) 0%,
            rgba(12, 12, 10, 0.99) 30%,
            rgba(12, 12, 10, 0.99) 70%,
            rgba(26, 24, 20, 0.98) 100%
        );
    box-shadow:
        0 4px 8px rgba(0,0,0,0.3),
        0 16px 48px rgba(0,0,0,0.5),
        0 0 40px rgba(201, 169, 110, 0.08),
        inset 0 1px 0 rgba(201, 169, 110, 0.15);
    transform: scale(1.05) translateY(-28px);
    z-index: 2;
}
/* Popular top crown — wider, brighter */
.sm-pricing-card--popular::before {
    left: 10%; right: 10%; height: 2px;
    background: linear-gradient(90deg,
        transparent, rgba(212, 175, 55, 0.3) 20%, rgba(212, 175, 55, 0.7) 50%, rgba(212, 175, 55, 0.3) 80%, transparent
    );
}
/* Popular bottom glow — stronger */
.sm-pricing-card--popular::after {
    left: 10%; right: 10%;
    background: linear-gradient(90deg, transparent, rgba(201, 169, 110, 0.35), transparent);
}
/* Popular frame — more visible */
.sm-pricing-card--popular .sm-pricing-card__frame {
    border-color: rgba(201, 169, 110, 0.12);
}
.sm-pricing-card--popular .sm-pricing-card__frame::before {
    box-shadow: inset 0 0 40px rgba(201, 169, 110, 0.06);
}
.sm-pricing-card--popular .sm-pricing-card__frame::after {
    color: rgba(201, 169, 110, 0.5);
    font-size: 10px;
}
/* Popular icon rings — brighter */
.sm-pricing-card--popular .sm-pricing-card__icon::before {
    border-color: rgba(201, 169, 110, 0.2);
    box-shadow: 0 0 16px rgba(201, 169, 110, 0.06);
}
.sm-pricing-card--popular .sm-pricing-card__icon::after {
    border-color: rgba(201, 169, 110, 0.1);
}

/* Badge */
.sm-pricing-card__badge {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    background: var(--gradient-gold);
    color: var(--text-inverse); padding: var(--space-1) var(--space-5);
    border-radius: var(--radius-sm); font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold); white-space: nowrap;
    z-index: 5;
    box-shadow: 0 4px 16px rgba(201, 169, 110, 0.25);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ═══ HOVER — Glow intensifies (NO movement, NO animation) ═══ */
.sm-pricing-card:hover {
    transform: none;
    border-color: rgba(201, 169, 110, 0.3);
    box-shadow:
        0 2px 4px rgba(0,0,0,0.3),
        0 8px 24px rgba(0,0,0,0.4),
        0 0 30px rgba(201, 169, 110, 0.06),
        inset 0 1px 0 rgba(201, 169, 110, 0.15);
}
.sm-pricing-card--popular:hover {
    transform: scale(1.05) translateY(-28px);
    box-shadow:
        0 4px 8px rgba(0,0,0,0.3),
        0 16px 48px rgba(0,0,0,0.5),
        0 0 60px rgba(201, 169, 110, 0.12),
        inset 0 1px 0 rgba(201, 169, 110, 0.2);
}
/* Crown line brightens */
.sm-pricing-card:hover::before {
    left: 15%; right: 15%;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.7), transparent);
}
.sm-pricing-card--popular:hover::before {
    left: 5%; right: 5%;
    background: linear-gradient(90deg,
        transparent, rgba(212, 175, 55, 0.4) 15%, rgba(212, 175, 55, 0.9) 50%, rgba(212, 175, 55, 0.4) 85%, transparent
    );
}
/* Bottom glow strengthens */
.sm-pricing-card:hover::after {
    background: linear-gradient(90deg, transparent, rgba(201, 169, 110, 0.4), transparent);
}
/* Inner frame shows more */
.sm-pricing-card:hover .sm-pricing-card__frame {
    border-color: rgba(201, 169, 110, 0.12);
}
.sm-pricing-card:hover .sm-pricing-card__frame::before {
    box-shadow: inset 0 0 40px rgba(201, 169, 110, 0.06);
}
.sm-pricing-card:hover .sm-pricing-card__frame::after {
    color: rgba(201, 169, 110, 0.5);
}
/* Icon rings glow */
.sm-pricing-card:hover .sm-pricing-card__icon::before {
    border-color: rgba(201, 169, 110, 0.2);
    box-shadow: 0 0 20px rgba(201, 169, 110, 0.08);
}
.sm-pricing-card:hover .sm-pricing-card__icon::after {
    border-color: rgba(201, 169, 110, 0.1);
}
/* Feature section border brightens */
.sm-pricing-card:hover .sm-pricing-card__features {
    border-color: rgba(201, 169, 110, 0.12);
}

/* ═══════════════════════════════════════
   TESTIMONIALS
   ═══════════════════════════════════════ */
.sm-testimonials {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
}
.sm-testimonial {
    padding: var(--space-8) var(--space-6); position: relative;
    text-align: center;
    border-color: rgba(201, 169, 110, 0.2);
    box-shadow: var(--shadow-card);
    transition: transform 250ms ease, box-shadow 250ms ease;
}
.sm-testimonial:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
}
.sm-testimonial__stars { margin-bottom: var(--space-4); }
.sm-testimonial__stars svg { width: 80px; height: 16px; margin: 0 auto; display: block; }
.sm-testimonial__quote {
    font-family: var(--font-display);
    font-size: 5rem; line-height: 0.8;
    background: var(--gradient-gold-text);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0.3;
    margin-bottom: var(--space-2);
}
.sm-testimonial__text {
    color: var(--text-secondary); font-size: var(--font-size-sm);
    line-height: var(--line-height-loose);
    font-style: italic;
    margin-bottom: var(--space-5);
}
.sm-testimonial__author {
    font-size: var(--font-size-xs); color: var(--color-primary-400);
    font-style: normal; font-weight: var(--font-weight-medium);
}

/* ── TRUST LINE ── */
.sm-trust-line {
    font-size: var(--font-size-sm); color: var(--text-muted);
    letter-spacing: 0.08em; margin-bottom: var(--space-8);
}

/* ── PRICING SECTION — gold mist center ── */
.sm-section--pricing {
    background:
        radial-gradient(ellipse 70% 50% at 50% 30%, rgba(212, 175, 55, 0.05), transparent 60%),
        radial-gradient(ellipse 50% 80% at 80% 60%, rgba(190, 169, 142, 0.04), transparent 50%),
        var(--surface-primary);
}

/* ── CTA SECTION — gold ambient glow ── */
.sm-section--cta {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(212, 175, 55, 0.1) 0%, transparent 60%),
        radial-gradient(ellipse at 50% 50%, rgba(190, 169, 142, 0.04) 0%, transparent 80%),
        var(--surface-secondary);
    border-top: 1px solid rgba(201, 169, 110, 0.1);
    border-bottom: 1px solid rgba(201, 169, 110, 0.1);
}

/* ── SECTION ALT — obsidian depth ── */
.sm-section--alt {
    background:
        radial-gradient(ellipse at 30% 0%, rgba(26, 24, 20, 0.8) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 100%, rgba(190, 169, 142, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 0%, rgba(212, 175, 55, 0.04) 0%, transparent 50%),
        var(--surface-secondary);
}

/* ═══════════════════════════════════════
   FOG — smooth section blending (120px)
   ═══════════════════════════════════════ */
.sm-section--alt::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 120px;
    background: linear-gradient(to bottom, var(--surface-primary), transparent);
    pointer-events: none; z-index: 1;
}
.sm-section--alt::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 120px;
    background: linear-gradient(to top, var(--surface-primary), transparent);
    pointer-events: none; z-index: 1;
}

/* Fog for tools section too */
.sm-section--tools::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 120px;
    background: linear-gradient(to bottom, var(--surface-primary), transparent);
    pointer-events: none; z-index: 1;
}
.sm-section--tools::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 120px;
    background: linear-gradient(to top, var(--surface-primary), transparent);
    pointer-events: none; z-index: 1;
}

/* Tools section — obsidian + gold mist */
.sm-section--tools {
    background:
        radial-gradient(ellipse 60% 80% at 0% 30%, rgba(26, 24, 20, 0.6), transparent 60%),
        radial-gradient(ellipse 50% 60% at 100% 20%, rgba(212, 175, 55, 0.06), transparent 60%),
        radial-gradient(ellipse 80% 40% at 50% 0%, rgba(201, 169, 110, 0.04), transparent 50%),
        var(--surface-secondary);
}

/* ═══════════════════════════════════════
   SCROLL REVEAL — staggered children (skill: frontend-design)
   ═══════════════════════════════════════ */
.sm-reveal {
    opacity: 0; transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.sm-reveal.is-visible { opacity: 1; transform: translateY(0); }
/* Staggered children delays */
.sm-reveal:nth-child(2) { transition-delay: 100ms; }
.sm-reveal:nth-child(3) { transition-delay: 200ms; }
.sm-reveal:nth-child(4) { transition-delay: 300ms; }


/* Gold Dust Particles — REMOVED (founder request) */

/* ═══════════════════════════════════════
   BLOG / ARTICLE / SHARE / OTHER PAGES
   "THƯ VIỆN CỔ THƯ HUYỀN BÍ" — Mystic Imperial Fusion
   Gold frame · Corner ornaments · Entrance stagger · Elder-friendly
   ═══════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   SM-BLOG-HERO v2 — "Cổng Vào Kho Tàng Huyền Học"
   Mystic Imperial Fusion: Astrolabe bg · L-bracket corners · Meander
   Accessible: font ≥17px · contrast ≥4.5:1 · WCAG AA
   ════════════════════════════════════════════════════════════════════ */

/* ── Hero wrapper ── */
.sm-blog-listing { position: relative; padding-top: var(--space-6); }

.sm-blog-hero {
    position: relative;
    margin-bottom: var(--space-8);
    padding: 56px 52px 48px;
    overflow: visible;
    border: 1px solid rgba(201,169,110,0.18);
    background:
        radial-gradient(ellipse 80% 70% at 50% 42%, rgba(201,169,110,0.048) 0%, transparent 65%),
        rgba(12,12,10,0.35);
}
/* Double inner frame line (Ancient Chinese double-border motif) */
.sm-blog-hero::before {
    content: '';
    position: absolute;
    top:7px;right:7px;bottom:7px;left:7px;
    border: 1px solid rgba(201,169,110,0.07);
    pointer-events: none;
    z-index: 0;
}

/* ── Background: astrolabe SVG + ambient glow ── */
.sm-blog-hero__bg {
    position: absolute;
    top:0;right:0;bottom:0;left:0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.sm-blog-hero__astrolabe {
    width: min(700px, 105%);
    height: auto;
    flex-shrink: 0;
}

/* Astrolabe ring animations — 3 independent speeds/directions */
.sbh-ring--slow    { transform-origin: 300px 300px; animation: sbhRotateSlow    120s linear infinite; }
.sbh-ring--counter { transform-origin: 300px 300px; animation: sbhRotateCounter  85s linear infinite; }
.sbh-ring--medium  { transform-origin: 300px 300px; animation: sbhRotateMedium   58s linear infinite; }
@keyframes sbhRotateSlow    { to { transform: rotate(360deg);  } }
@keyframes sbhRotateCounter { to { transform: rotate(-360deg); } }
@keyframes sbhRotateMedium  { to { transform: rotate(360deg);  } }

/* ── Corner L-brackets ── */
.sm-blog-hero__corners {
    position: absolute;
    top:0;right:0;bottom:0;left:0;
    pointer-events: none;
    z-index: 2;
}
.sm-blog-hero__corner { position: absolute; }
.sbh-corner-tl { top: 0;    left: 0;  }
.sbh-corner-tr { top: 0;    right: 0; }
.sbh-corner-bl { bottom: 0; left: 0;  }
.sbh-corner-br { bottom: 0; right: 0; }

/* ── Content: stacked column, centered ── */
.sm-blog-hero__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Top ornament: meander SVG */
.sm-blog-hero__ornament {
    width: min(520px, 88%);
    margin-bottom: 22px;
}
.sbh-meander { width: 100%; height: auto; display: block; }

/* Eyebrow badge: "Kho Tàng Huyền Học" with diamond ornaments */
.sm-blog-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    animation: sbhFadeUp 0.7s cubic-bezier(0.22,1,0.36,1) both;
    animation-delay: 0.1s;
}
.sbh-eyebrow-text {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(201,169,110,0.52);
}

/* H1 Title: Lexend Deca, gold shimmer, large + accessible */
.sm-blog-hero__title {
    font-family: 'Lexend Deca', sans-serif;
    font-size: clamp(2.75rem, 8vw, 5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.07em;
    margin: 0 0 10px;
    /* Gold shimmer via background-clip */
    color: transparent;
    background: linear-gradient(135deg, #c9a96e 0%, #f5d58c 32%, #e8c870 58%, #c9a96e 78%, #f5d58c 100%);
    background-size: 260% auto;
    -webkit-background-clip: text;
    background-clip: text;
    animation:
        sbhTitleShimmer 5.5s linear infinite,
        sbhFadeUp 0.85s cubic-bezier(0.22,1,0.36,1) both;
    animation-delay: 0s, 0.2s;
}
@keyframes sbhTitleShimmer {
    to { background-position: 260% center; }
}
@keyframes sbhFadeUp {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Decorative rule under title: line · ○ · ● · ○ · line */
.sbh-title-rule {
    width: min(220px, 52%);
    margin: 0 auto 18px;
    animation: sbhFadeUp 0.7s cubic-bezier(0.22,1,0.36,1) both;
    animation-delay: 0.3s;
}
.sbh-title-rule svg { width: 100%; height: auto; display: block; }

/* Subtitle: Playfair italic, minimum 18px for elderly readability */
.sm-blog-hero__subtitle {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.125rem, 2.5vw, 1.4375rem);
    color: #e8e0d0;
    font-style: italic;
    line-height: 1.6;
    letter-spacing: 0.01em;
    max-width: 580px;
    margin: 0 0 8px;
    animation: sbhFadeUp 0.7s cubic-bezier(0.22,1,0.36,1) both;
    animation-delay: 0.4s;
}

/* Tagline: smaller, explicit plain language — for elderly users */
.sm-blog-hero__tagline {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: clamp(0.875rem, 1.5vw, 1.0625rem);
    color: rgba(232,224,208,0.48);
    letter-spacing: 0.04em;
    margin: 0 0 26px;
    animation: sbhFadeUp 0.7s cubic-bezier(0.22,1,0.36,1) both;
    animation-delay: 0.5s;
}

/* Stats row: 50+ · 11 · Wiki */
.sm-blog-hero__stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    flex-wrap: wrap;
    margin-bottom: 30px;
    animation: sbhFadeUp 0.7s cubic-bezier(0.22,1,0.36,1) both;
    animation-delay: 0.55s;
}
.sbh-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.sbh-stat__num {
    font-family: 'Lexend Deca', sans-serif;
    font-size: clamp(1.25rem, 3vw, 1.875rem);
    font-weight: 700;
    color: #c9a96e;
    line-height: 1;
}
.sbh-stat__plus { font-size: 0.7em; vertical-align: super; }
.sbh-stat__lbl {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 0.5625rem;
    color: rgba(201,169,110,0.42);
    text-transform: uppercase;
    letter-spacing: 0.16em;
}
.sbh-stat-sep { display: flex; align-items: center; margin-top: -3px; }

/* Search bar: live filter for blog cards */
.sm-blog-hero__search {
    width: min(560px, 90%);
    animation: sbhFadeUp 0.7s cubic-bezier(0.22,1,0.36,1) both;
    animation-delay: 0.65s;
}
.sbh-search-label {
    display: block;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 0.5625rem;
    font-weight: 500;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: rgba(201,169,110,0.48);
    margin-bottom: 10px;
    text-align: center;
}
.sbh-search-wrap {
    display: flex;
    align-items: center;
    background: rgba(10,10,8,0.72);
    border: 1px solid rgba(201,169,110,0.30);
    border-radius: 4px;
    padding: 0 14px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.sbh-search-wrap:focus-within {
    border-color: rgba(201,169,110,0.62);
    box-shadow: 0 0 0 3px rgba(201,169,110,0.06), 0 0 22px rgba(201,169,110,0.07);
}
.sbh-search-icon { flex-shrink: 0; margin-right: 12px; }
.sbh-search-input {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    outline: none;
    color: #e8e0d0;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 1.0625rem;       /* 17px — prevents iOS auto-zoom, elderly-friendly */
    padding: 15px 0;
    caret-color: #c9a96e;
}
.sbh-search-input::placeholder { color: rgba(201,169,110,0.32); font-style: italic; }
.sbh-search-input::-webkit-search-cancel-button { display: none; }
.sbh-search-clear {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    opacity: 0.65;
    transition: opacity 0.2s;
}
.sbh-search-clear:hover { opacity: 1; }
.sbh-search-hint {
    margin: 8px 0 0;
    font-size: 0.8125rem;
    color: rgba(201,169,110,0.48);
    text-align: center;
    min-height: 1.4em;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-style: italic;
}

/* Instant search dropdown */
.sm-blog-hero__search { position: relative; z-index: 2147483645; }
/* ── Search Dropdown: Frosted Obsidian Glass ── */
.sbh-live-results {
    display: none;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 2px);
    left: 0; right: 0;
    background: rgba(12,12,10,0.97);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border: 1px solid rgba(201,169,110,0.3);
    border-radius: 0 0 4px 4px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2), 0 24px 48px rgba(0,0,0,0.35);
    max-height: 460px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    z-index: 2147483646;
    scrollbar-width: none;
    -ms-overflow-style: none;
    transform-origin: top center;
    animation: sbh-dropdown-in 0.2s cubic-bezier(0.16,1,0.3,1) forwards;
}
.sbh-live-results::-webkit-scrollbar { display: none; }
.sbh-live-results.is-active { display: flex; }
@keyframes sbh-dropdown-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Result items — with left accent bar on hover */
.sbh-live-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    text-decoration: none;
    color: #e8e0d0;
    transition: background 0.15s ease;
    cursor: pointer;
    position: relative;
}
.sbh-live-result-item:hover,
.sbh-live-result-item.is-selected {
    background: rgba(201,169,110,0.08);
}
.sbh-live-result-item::before {
    content: '';
    position: absolute;
    left: 0; top: 20%; bottom: 20%;
    width: 3px;
    background: #c9a96e;
    border-radius: 0 2px 2px 0;
    opacity: 0;
    transform: scaleY(0.5);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.sbh-live-result-item:hover::before,
.sbh-live-result-item.is-selected::before {
    opacity: 1;
    transform: scaleY(1);
}

/* Thumbnail */
.sbh-live-result-thumb {
    width: 52px; height: 52px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    background: rgba(201,169,110,0.06);
}
.sbh-live-result-thumb-placeholder {
    width: 52px; height: 52px;
    border-radius: 4px;
    flex-shrink: 0;
    background: rgba(201,169,110,0.06);
    display: flex; align-items: center; justify-content: center;
    color: rgba(201,169,110,0.25);
}

/* Icon for items without thumbnail */
.sbh-live-result-icon {
    flex-shrink: 0;
    width: 20px; height: 20px;
    color: rgba(201,169,110,0.35);
}

/* Title & category */
.sbh-live-result-text { flex: 1; min-width: 0; }
.sbh-live-result-title {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    font-family: 'Be Vietnam Pro', sans-serif;
    color: #e8e0d0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sbh-live-result-item:hover .sbh-live-result-title { color: #f5d58c; }
.sbh-live-result-title mark {
    background: rgba(201,169,110,0.2);
    color: #f5d58c;
    padding: 0 2px;
    border-radius: 2px;
}
.sbh-live-result-cat {
    font-size: 0.7rem;
    color: rgba(201,169,110,0.4);
    margin-top: 3px;
}

/* Section labels */
.sbh-sr-section-label {
    padding: 10px 16px 5px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: rgba(201,169,110,0.5);
    text-transform: uppercase;
    font-family: 'Be Vietnam Pro', sans-serif;
    border-top: 1px solid rgba(201,169,110,0.08);
}
.sbh-sr-section-label:first-child { border-top: none; padding-top: 10px; }
.sbh-sr-label-icon { vertical-align: -1px; margin-right: 2px; }

/* History items */
.sbh-sr-history {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.sbh-sr-history:hover { background: rgba(201,169,110,0.06); }
.sbh-sr-icon {
    flex-shrink: 0;
    width: 15px; height: 15px;
    color: rgba(201,169,110,0.3);
}
.sbh-sr-hist-text {
    flex: 1;
    font-size: 0.85rem;
    color: #e8e0d0;
    font-family: 'Be Vietnam Pro', sans-serif;
}
.sbh-sr-hist-del {
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(201,169,110,0.3);
    font-size: 15px;
    padding: 2px 4px;
    line-height: 1;
    opacity: 0;
    border-radius: 50%;
    transition: opacity 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
}
.sbh-sr-history:hover .sbh-sr-hist-del { opacity: 1; }
.sbh-sr-hist-del:hover { background: rgba(200,50,50,0.15); color: #e06050; }

/* Trending tags inside dropdown */
.sbh-sr-trending-wrap {
    padding: 6px 16px 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.sbh-sr-trending-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    background: rgba(201,169,110,0.06);
    border: 1px solid rgba(201,169,110,0.15);
    border-radius: 20px;
    font-size: 0.75rem;
    font-family: 'Be Vietnam Pro', sans-serif;
    color: rgba(232,224,208,0.7);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.sbh-sr-trending-tag:hover {
    background: rgba(201,169,110,0.15);
    border-color: rgba(201,169,110,0.4);
    color: #f5d58c;
}
.sbh-sr-trending-tag svg {
    width: 12px; height: 12px;
    color: rgba(201,169,110,0.35);
}

/* Featured item */
.sbh-sr-featured {
    padding: 12px 16px;
    margin: 6px 10px 10px;
    border: 1px solid rgba(201,169,110,0.12);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    text-decoration: none;
    background: rgba(201,169,110,0.03);
}
.sbh-sr-featured:hover { background: rgba(201,169,110,0.08); border-color: rgba(201,169,110,0.25); }
.sbh-sr-featured-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(201,169,110,0.12);
    border: 1px solid rgba(201,169,110,0.3);
    border-radius: 999px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    color: #c9a96e;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}
.sbh-sr-featured-badge svg { fill: #c9a96e; }
.sbh-sr-featured-text {
    font-size: 0.8rem;
    color: rgba(232,224,208,0.7);
    font-weight: 400;
    font-family: 'Be Vietnam Pro', sans-serif;
    line-height: 1.35;
}
.sbh-sr-featured:hover .sbh-sr-featured-text { color: #e8e0d0; }

/* Footer: "xem tất cả" */
.sbh-live-result-footer {
    padding: 10px 16px;
    border-top: 1px solid rgba(201,169,110,0.1);
    text-align: center;
}
.sbh-live-result-all {
    font-size: 0.8rem;
    font-weight: 600;
    color: #c9a96e;
    text-decoration: none;
    transition: color 0.15s ease;
}
.sbh-live-result-all:hover { color: #f5d58c; text-decoration: underline; }

/* Empty state */
.sbh-live-result-empty {
    padding: 20px 16px;
    text-align: center;
    font-size: 0.875rem;
    color: rgba(201,169,110,0.4);
    font-style: italic;
}
.sbh-live-result-empty a { color: #c9a96e; }

/* ── Tool result items in header search ── */
.sbh-sr-section-tools { color: rgba(201,169,110,0.7); font-weight: 600; }
.sbh-sr-section-articles {
    border-top: 1px solid rgba(201,169,110,0.1);
    margin-top: 4px;
    padding-top: 6px;
}
/* Tool item — accent left bar + icon + text */
.sbh-tool-item {
    padding: 10px 16px 10px 13px !important;
    border-left: 3px solid var(--ta, #c9a96e);
}
.sbh-tool-item::before { display: none !important; }
.sbh-tool-item:hover,
.sbh-tool-item.is-selected {
    background: rgba(var(--tr, 201,169,110), 0.07);
}
.sbh-tool-item:hover .sbh-live-result-title { color: var(--ta, #f5d58c); }
/* Icon box */
.sbh-ti {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 10px;
    border: 1px solid;
    flex-shrink: 0;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sbh-ti svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.sbh-tool-item:hover .sbh-ti {
    transform: scale(1.08);
    box-shadow: 0 0 14px rgba(var(--tr, 201,169,110), 0.25);
}
/* Meta row: group · CTA */
.sbh-tm {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 3px;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 0.68rem;
    line-height: 1;
}
.sbh-tg {
    color: rgba(201,169,110,0.5);
    font-weight: 500;
    letter-spacing: 0.02em;
}
.sbh-td {
    color: rgba(201,169,110,0.25);
    margin: 0 2px;
}
.sbh-tc {
    font-weight: 600;
    color: var(--ta, #c9a96e);
    opacity: 0.3;
    transition: opacity 0.15s ease;
    white-space: nowrap;
}
.sbh-tool-item:hover .sbh-tc,
.sbh-tool-item.is-selected .sbh-tc { opacity: 1; }

/* Count label */
.sbh-live-result-count {
    padding: 8px 16px;
    font-size: 0.7rem;
    color: rgba(201,169,110,0.35);
    border-bottom: 1px solid rgba(201,169,110,0.08);
    font-family: 'Be Vietnam Pro', sans-serif;
}

/* Skeleton loader */
.sbh-skeleton-item {
    display: flex;
    gap: 12px;
    padding: 10px 16px;
}
.sbh-skeleton-thumb {
    width: 52px; height: 52px;
    border-radius: 4px;
    background: rgba(201,169,110,0.08);
    animation: sbh-pulse 1.2s ease-in-out infinite;
}
.sbh-skeleton-lines { flex: 1; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.sbh-skeleton-line {
    height: 10px;
    border-radius: 4px;
    background: rgba(201,169,110,0.08);
    animation: sbh-pulse 1.2s ease-in-out infinite;
}
.sbh-skeleton-line:last-child { width: 60%; }
@keyframes sbh-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Search blur backdrop */
.sbh-search-backdrop {
    display: none;
    position: fixed;
    top:0;right:0;bottom:0;left:0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2147483640;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.sbh-search-backdrop.is-active {
    display: block;
    opacity: 1;
    pointer-events: auto;
}
body.sbh-search-open .sm-blog-hero__corners,
body.sbh-search-open .sm-blog-hero__scroll {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease;
}
body.sbh-search-open #smc-aiv-launcher,
body.sbh-search-open #smc-aiv-panel {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease;
}

/* Scroll hint: animated double-chevron */
.sm-blog-hero__scroll {
    display: flex;
    justify-content: center;
    padding-top: 30px;
    position: relative;
    z-index: 1;
}
.sbh-chevron { animation: sbhChevronBob 2.8s ease-in-out infinite; }
@keyframes sbhChevronBob {
    0%, 100% { transform: translateY(0);  opacity: 0.45; }
    50%       { transform: translateY(7px); opacity: 0.7; }
}

/* ── Responsive: tablet (≤900px) ── */
@media (max-width: 900px) {
    .sm-blog-hero { padding: 44px 38px 38px; }
}
/* ── Responsive: mobile (≤768px) ── */
@media (max-width: 768px) {
    .sm-blog-hero { padding: 36px 22px 30px; border-left: none; border-right: none; }
    .sm-blog-hero__title { font-size: clamp(2.25rem, 12vw, 3.25rem); }
    .sbh-corner-bl, .sbh-corner-br { display: none; }
    .sm-blog-hero__stats { gap: 14px; }
}
/* ── Responsive: small mobile (≤480px) ── */
@media (max-width: 480px) {
    .sm-blog-hero { padding: 28px 14px 26px; }
    .sm-blog-hero__ornament { display: none; }
    .sm-blog-hero__title { font-size: clamp(2rem, 14vw, 2.75rem); }
    .sbh-corner-tl, .sbh-corner-tr { width: 42px; height: 42px; }
    .sm-blog-hero__subtitle { font-size: 1.0625rem; }
    .sbh-eyebrow-text { letter-spacing: 0.14em; }
}

/* ── ORNAMENTAL DIVIDER — Greek key + Astrolabe center ── */
.sm-blog-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 0 auto var(--space-4);
    max-width: 420px;
    position: relative;
}
.sm-blog-divider::before,
.sm-blog-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to var(--dir, right), rgba(201,169,110,0.5), transparent);
}
.sm-blog-divider::after { --dir: left; }
.sm-blog-divider svg { flex-shrink: 0; }
.sm-blog-divider__ring {
    animation: blogDividerSpin 40s linear infinite;
}
@keyframes blogDividerSpin {
    to { transform: rotate(360deg); }
}

/* ════════════════════════════════════════════════════════════════
   SM-ARCHIVE-HERO — Tag / Category archive header
   Mystic Imperial Fusion: L-brackets · meander · double frame
   ════════════════════════════════════════════════════════════════ */
.sm-archive-listing { position: relative; padding-top: var(--space-6); }

.sm-archive-hero {
    position: relative;
    margin-bottom: var(--space-8);
    padding: 40px 36px 32px;
    overflow: hidden;
    border: 1px solid rgba(201,169,110,0.18);
    border-radius: 4px;
    background:
        radial-gradient(ellipse 80% 70% at 50% 42%, rgba(201,169,110,0.04) 0%, transparent 65%),
        rgba(12,12,10,0.35);
}
/* Double inner frame */
.sm-archive-hero::before {
    content: '';
    position: absolute;
    top:6px;right:6px;bottom:6px;left:6px;
    border: 1px solid rgba(201,169,110,0.07);
    pointer-events: none;
}
/* L-bracket top-left */
.sm-archive-hero__frame {
    position: relative;
    z-index: 1;
    text-align: center;
}
.sm-archive-hero__frame::before,
.sm-archive-hero__frame::after {
    content: ''; position: absolute; width: 18px; height: 18px;
    border-color: rgba(201,169,110,0.35); border-style: solid;
    pointer-events: none;
}
.sm-archive-hero__frame::before { top: -40px; left: -36px; border-width: 2px 0 0 2px; }
.sm-archive-hero__frame::after { bottom: -32px; right: -36px; border-width: 0 2px 2px 0; }

.sm-archive-hero__title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 700;
    color: #e8e0d0;
    margin: var(--space-3) 0 var(--space-2);
    line-height: 1.25;
    text-transform: capitalize;
}

.sm-archive-hero__divider {
    width: 80px; height: 6px; margin: var(--space-2) auto var(--space-3);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6'%3E%3Cpath d='M0.5,5.5 L0.5,0.5 L5.5,0.5 L5.5,5.5 L2,5.5 L2,2.5 L4,2.5 L4,4 L3,4' fill='none' stroke='%23c9a96e' stroke-width='0.6'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    opacity: 0.35;
}

.sm-archive-hero__desc {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 0.93rem;
    color: rgba(232,224,208,0.6);
    max-width: 520px;
    margin: 0 auto var(--space-3);
    line-height: 1.6;
}

.sm-archive-hero__count {
    display: inline-block;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: rgba(201,169,110,0.5);
    padding: 4px 14px;
    border: 1px solid rgba(201,169,110,0.12);
    border-radius: 4px;
}

@media (min-width: 768px) {
    .sm-archive-hero { padding: 52px 60px 44px; }
    .sm-archive-hero__frame::before { top: -52px; left: -60px; width: 24px; height: 24px; }
    .sm-archive-hero__frame::after { bottom: -44px; right: -60px; width: 24px; height: 24px; }
}
@media (max-width: 480px) {
    .sm-archive-hero { padding: 28px 20px 24px; }
    .sm-archive-hero__frame::before { top: -28px; left: -20px; }
    .sm-archive-hero__frame::after { bottom: -24px; right: -20px; }
}

/* ── BLOG GRID ── */
.sm-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

/* ── FEATURED: first card spans 2 columns ── */
.sm-blog-grid .sm-post-card:first-child {
    grid-column: 1 / 3;
}
.sm-blog-grid .sm-post-card:first-child .sm-post-card__thumb {
    aspect-ratio: 21/10;
}
.sm-blog-grid .sm-post-card:first-child .sm-post-card__title {
    font-size: clamp(1.25rem, 2.2vw, 1.5rem);
}
.sm-blog-grid .sm-post-card:first-child .sm-post-card__excerpt {
    font-size: 1rem;
    -webkit-line-clamp: 3;
}

/* ═══ POST CARD — "Cổ Thư Huyền Bí" ═══ */
.sm-post-card {
    position: relative;
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient(
        168deg,
        rgba(26, 24, 20, 0.95) 0%,
        rgba(18, 17, 14, 0.9) 50%,
        rgba(14, 13, 11, 0.95) 100%
    );
    border: 1px solid rgba(201, 169, 110, 0.22);
    box-shadow: var(--shadow-card);
    transition:
        transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 420ms ease,
        border-color 350ms ease;
    /* Entrance animation */
    opacity: 0;
    transform: translateY(32px);
}
/* Entrance: revealed by JS IntersectionObserver */
.sm-post-card.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 600ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 420ms ease,
        border-color 350ms ease;
}

/* ── CORNER ORNAMENTS — L-brackets (visible always, bright on hover) ── */
.sm-post-card__frame {
    position: absolute;
    top:6px;right:6px;bottom:6px;left:6px;
    pointer-events: none;
    z-index: 3;
    background:
        /* ╔ Top-left H */  linear-gradient(90deg, rgba(201,169,110,0.45), transparent) no-repeat 0 0 / 24px 1.2px,
        /* ╔ Top-left V */  linear-gradient(180deg, rgba(201,169,110,0.45), transparent) no-repeat 0 0 / 1.2px 24px,
        /* ╗ Top-right H */ linear-gradient(270deg, rgba(201,169,110,0.45), transparent) no-repeat 100% 0 / 24px 1.2px,
        /* ╗ Top-right V */ linear-gradient(180deg, rgba(201,169,110,0.45), transparent) no-repeat 100% 0 / 1.2px 24px,
        /* ╚ Bot-left H */  linear-gradient(90deg, rgba(201,169,110,0.45), transparent) no-repeat 0 100% / 24px 1.2px,
        /* ╚ Bot-left V */  linear-gradient(0deg, rgba(201,169,110,0.45), transparent) no-repeat 0 100% / 1.2px 24px,
        /* ╝ Bot-right H */ linear-gradient(270deg, rgba(201,169,110,0.45), transparent) no-repeat 100% 100% / 24px 1.2px,
        /* ╝ Bot-right V */ linear-gradient(0deg, rgba(201,169,110,0.45), transparent) no-repeat 100% 100% / 1.2px 24px;
    transition: all 350ms ease;
}
.sm-post-card:hover .sm-post-card__frame {
    top:5px;right:5px;bottom:5px;left:5px;
    background:
        linear-gradient(90deg, rgba(212,175,55,0.7), transparent) no-repeat 0 0 / 30px 1.5px,
        linear-gradient(180deg, rgba(212,175,55,0.7), transparent) no-repeat 0 0 / 1.5px 30px,
        linear-gradient(270deg, rgba(212,175,55,0.7), transparent) no-repeat 100% 0 / 30px 1.5px,
        linear-gradient(180deg, rgba(212,175,55,0.7), transparent) no-repeat 100% 0 / 1.5px 30px,
        linear-gradient(90deg, rgba(212,175,55,0.7), transparent) no-repeat 0 100% / 30px 1.5px,
        linear-gradient(0deg, rgba(212,175,55,0.7), transparent) no-repeat 0 100% / 1.5px 30px,
        linear-gradient(270deg, rgba(212,175,55,0.7), transparent) no-repeat 100% 100% / 30px 1.5px,
        linear-gradient(0deg, rgba(212,175,55,0.7), transparent) no-repeat 100% 100% / 1.5px 30px;
}

/* ── ROTATING MANDALA BORDER (subtle, always on) ── */
.sm-post-card::before {
    content: '';
    position: absolute;
    top:-2px;right:-2px;bottom:-2px;left:-2px;
    padding: 2px;
    background: conic-gradient(from 0deg,
        transparent 0%, rgba(201, 169, 110, 0.25) 3%, transparent 6%,
        transparent 50%, rgba(201, 169, 110, 0.15) 53%, transparent 56%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: borderRotate 50s linear infinite;
    opacity: 0.35;
    pointer-events: none;
    z-index: 0;
    transition: opacity 400ms ease;
    will-change: transform;
}
.sm-post-card:nth-child(2)::before { animation-delay: -6s; }
.sm-post-card:nth-child(3)::before { animation-delay: -12s; }
.sm-post-card:nth-child(4)::before { animation-delay: -18s; }
.sm-post-card:nth-child(5)::before { animation-delay: -24s; }
.sm-post-card:nth-child(6)::before { animation-delay: -30s; }
.sm-post-card:hover::before { opacity: 0.7; }

/* ── GOLD GLOW AURA (bottom of card, hover amplify) ── */
.sm-post-card::after {
    content: '';
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 80px;
    background: radial-gradient(ellipse, rgba(201,169,110,0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    transition: opacity 400ms ease;
}
.sm-post-card:hover::after {
    background: radial-gradient(ellipse, rgba(212,175,55,0.12) 0%, transparent 70%);
}

/* ── HOVER STATE ── */
.sm-post-card:hover {
    transform: translateY(-8px);
    border-color: rgba(212, 175, 55, 0.45);
    box-shadow:
        0 16px 48px rgba(0,0,0,0.6),
        0 0 0 1px rgba(201,169,110,0.2),
        0 0 40px rgba(201,169,110,0.1),
        inset 0 1px 0 rgba(212,175,55,0.15);
}
.sm-post-card.is-visible:hover {
    transform: translateY(-8px);
}

/* ── THUMBNAIL ── */
.sm-post-card__thumb {
    display: block;
    aspect-ratio: 16/10;
    overflow: hidden;
    position: relative;
}
/* Mystical vignette over image */
.sm-post-card__thumb::after {
    content: '';
    position: absolute;
    top:0;right:0;bottom:0;left:0;
    background:
        linear-gradient(to bottom, transparent 30%, rgba(14,13,11,0.5) 75%, rgba(14,13,11,0.88) 100%),
        radial-gradient(ellipse at center, transparent 50%, rgba(14,13,11,0.25) 100%);
    z-index: 1;
    transition: opacity 350ms ease;
}
.sm-post-card:hover .sm-post-card__thumb::after { opacity: 0.75; }
.sm-post-card__thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1), filter 500ms ease;
    display: block;
}
.sm-post-card:hover .sm-post-card__thumb img {
    transform: scale(1.08);
    filter: brightness(1.08) contrast(1.05);
}

/* ── ASTROLABE SVG — Always visible (subtle), rotates on hover ── */
.sm-post-card__astrolabe {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 100px;
    height: 100px;
    z-index: 2;
    opacity: 0.18;
    transition: opacity 500ms ease, transform 2s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    animation: astrolabeSpin 90s linear infinite;
}
@keyframes astrolabeSpin { to { transform: rotate(360deg); } }
.sm-post-card:hover .sm-post-card__astrolabe {
    opacity: 0.45;
}

/* ── CARD BODY ── */
.sm-post-card__body {
    position: relative;
    z-index: 2;
    padding: 20px 22px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* ── CATEGORY BADGE — Gold seal style ── */
.sm-badge--category {
    display: inline-block;
    align-self: flex-start;
    font-family: var(--font-display);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-primary-300);
    background: linear-gradient(135deg, rgba(201,169,110,0.12), rgba(201,169,110,0.06));
    border: 1px solid rgba(201, 169, 110, 0.32);
    padding: 4px 12px;
    line-height: 1.6;
    text-decoration: none;
    transition: all 250ms ease;
}
.sm-badge--category:hover {
    background: linear-gradient(135deg, rgba(212,175,55,0.2), rgba(201,169,110,0.1));
    border-color: rgba(212, 175, 55, 0.55);
    color: #f5d58c;
    box-shadow: 0 0 12px rgba(201,169,110,0.15);
}

/* ── TITLE — Large, elder-friendly, gold shimmer on hover ── */
.sm-post-card__title {
    font-family: var(--font-display);
    font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
    font-weight: 600;
    margin: 12px 0 10px;
    line-height: 1.45;
}
.sm-post-card__title a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color 250ms ease;
}
.sm-post-card:hover .sm-post-card__title a {
    color: var(--color-primary-200);
}

/* ── EXCERPT — Readable, warm ── */
.sm-post-card__excerpt {
    font-size: 0.9375rem;
    color: rgba(232, 224, 208, 0.72);
    margin-bottom: 16px;
    line-height: 1.75;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── META FOOTER — Date + Read more in one row ── */
.sm-post-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid rgba(201, 169, 110, 0.12);
    padding-top: 14px;
    margin-top: auto;
}

.sm-post-card__meta {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8125rem;
    color: rgba(201, 169, 110, 0.55);
    border: none;
    padding: 0;
    margin: 0;
}
.sm-post-card__meta-icon { flex-shrink: 0; opacity: 0.65; }
.sm-post-card__meta time { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── "KHÁM PHÁ" CTA LINK — Gold, arrow animates ── */
.sm-post-card__read {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary-400);
    text-decoration: none;
    white-space: nowrap;
    transition: gap 250ms ease, color 250ms ease;
}
.sm-post-card__read:hover { gap: 10px; color: #f5d58c; }
.sm-post-card__read svg { transition: transform 250ms ease; }
.sm-post-card__read:hover svg { transform: translateX(3px); }

.sm-article { padding: 0 0 var(--space-10); }

/* ── ARTICLE HERO CARD — Mystic Imperial Fusion ── */
.sm-article-hero {
    position: relative;
    padding: var(--space-3) 0 var(--space-6);
    background:
        radial-gradient(ellipse 80% 60% at 50% 100%, rgba(201,169,110,0.06) 0%, transparent 70%),
        linear-gradient(to bottom, rgba(14,13,11,0.97) 0%, rgba(12,12,10,0.93) 100%);
    border-bottom: none;
    overflow: hidden;
}
/* Dissolve hero into content — gradient fade at bottom */
.sm-article-hero::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 48px;
    background: linear-gradient(to bottom, transparent 0%, #0c0c0a 100%);
    pointer-events: none;
    z-index: 2;
}
/* Subtle grain texture */
.sm-article-hero::before {
    content: ''; position: absolute; top:0;right:0;bottom:0;left:0; z-index: 0;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    pointer-events: none;
}
/* Double inset frame with L-bracket corners */
.sm-article-hero__frame {
    position: relative; z-index: 1;
    margin: 0 var(--space-4);
    padding: var(--space-6) var(--space-5);
    border: 1px solid rgba(201,169,110,0.15);
}
.sm-article-hero__frame::before,
.sm-article-hero__frame::after {
    content: ''; position: absolute; width: 18px; height: 18px;
    border-color: rgba(201,169,110,0.4); border-style: solid;
}
.sm-article-hero__frame::before {
    top: -1px; left: -1px;
    border-width: 2px 0 0 2px;
}
.sm-article-hero__frame::after {
    bottom: -1px; right: -1px;
    border-width: 0 2px 2px 0;
}
/* Meander divider between title and meta */
.sm-article-hero__divider {
    width: 120px; height: 6px; margin: var(--space-3) 0 var(--space-4);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6'%3E%3Cpath d='M0.5,5.5 L0.5,0.5 L5.5,0.5 L5.5,5.5 L2,5.5 L2,2.5 L4,2.5 L4,4 L3,4' fill='none' stroke='%23c9a96e' stroke-width='0.6'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    opacity: 0.35;
}

.sm-article__title { font-family: var(--font-display); font-size: var(--font-size-3xl); margin: var(--space-3) 0 var(--space-2); line-height: 1.25; }
/* ════════════════════════════════════════════════════════════════
   SM-ARTICLE-META v5 — Imperial Horizontal Meta Bar
   Star · Calendar · Clock icons · Gold dividers · L-brackets
   ════════════════════════════════════════════════════════════════ */
.sm-article-meta {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    margin-top: 20px;
    padding: 11px 18px;
    position: relative;
    background: rgba(201,169,110,0.04);
    border: 1px solid rgba(201,169,110,0.14);
    border-radius: 4px;
}
/* L-bracket corners */
.sm-article-meta::before,
.sm-article-meta::after {
    content: ''; position: absolute; width: 12px; height: 12px;
    border-color: rgba(201,169,110,0.4); border-style: solid;
    pointer-events: none;
}
.sm-article-meta::before { top: -1px; left: -1px; border-width: 1.5px 0 0 1.5px; }
.sm-article-meta::after  { bottom: -1px; right: -1px; border-width: 0 1.5px 1.5px 0; }

.sm-article-meta__item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 0.78rem;
    line-height: 1;
    white-space: nowrap;
}
.sm-article-meta__item:first-child { padding-left: 0; }
.sm-article-meta__item:last-of-type { padding-right: 0; }

.sm-article-meta__icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    opacity: 0.9;
}

.sm-article-meta__label {
    color: rgba(201,169,110,0.5);
    font-size: 0.73rem;
    letter-spacing: 0.01em;
}

.sm-article-meta__value {
    color: #c9a96e;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: color 0.25s;
}
a.sm-article-meta__value:hover { color: #f5d58c; }

/* Vertical separator */
.sm-article-meta__sep {
    display: block;
    width: 1px;
    height: 18px;
    background: linear-gradient(to bottom, transparent, rgba(201,169,110,0.3) 30%, rgba(201,169,110,0.3) 70%, transparent);
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .sm-article-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 12px 16px;
    }
    .sm-article-meta__sep { width: 32px; height: 1px; background: linear-gradient(to right, rgba(201,169,110,0.3), transparent); margin-left: 0; }
    .sm-article-meta__item { padding: 0; }
}
.sm-article__hero { margin-bottom: var(--space-8); border-radius: var(--radius-lg); overflow: hidden; }

/* ── Desktop: wider frame, centered ── */
@media (min-width: 768px) {
    .sm-article-hero { padding: var(--space-4) 0 var(--space-8); }
    .sm-article-hero__frame { margin: 0 auto; max-width: var(--container-max); padding: var(--space-8) var(--space-10); }
    .sm-article-hero__frame::before,
    .sm-article-hero__frame::after { width: 24px; height: 24px; }
    .sm-article__title { font-size: clamp(2rem, 3.5vw, 2.75rem); }
}

/* ════════════════════════════════════════════════════════════════
   HERO v2 — Per-Category Theming via data-cat attribute
   Mỗi danh mục = 1 accent color + 1 motif SVG decorative
   ════════════════════════════════════════════════════════════════ */

/* ── Category CSS Variables (scoped to hero) ── */
.sm-article-hero { --cat-accent: #c9a96e; --cat-accent-rgb: 201,169,110; }
/* All categories use unified gold accent — no per-category color overrides */

/* ── Hero background uses cat-accent ── */
.sm-article-hero {
    background:
        radial-gradient(ellipse 80% 60% at 50% 100%, rgba(var(--cat-accent-rgb),0.08) 0%, transparent 70%),
        linear-gradient(to bottom, rgba(14,13,11,0.97) 0%, rgba(12,12,10,0.93) 100%);
}

/* ── Motif: decorative SVG background per category ── */
.sm-article-hero__motif {
    position: absolute;
    top:0;right:0;bottom:0;left:0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.09;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 90%;
    -webkit-mask-image: radial-gradient(ellipse 55% 80% at 85% 50%, rgba(0,0,0,0.7) 0%, transparent 70%);
    mask-image: radial-gradient(ellipse 55% 80% at 85% 50%, rgba(0,0,0,0.7) 0%, transparent 70%);
}
/* Mirror motif on left side */
.sm-article-hero__motif::before {
    content: '';
    position: absolute;
    top:0;right:0;bottom:0;left:0;
    background: inherit;
    background-position: left center;
    transform: scaleX(-1);
    -webkit-mask-image: radial-gradient(ellipse 55% 80% at 85% 50%, rgba(0,0,0,0.5) 0%, transparent 70%);
    mask-image: radial-gradient(ellipse 55% 80% at 85% 50%, rgba(0,0,0,0.5) 0%, transparent 70%);
}
@media (max-width: 768px) {
    .sm-article-hero__motif { opacity: 0.06; background-size: auto 70%; }
}

/* Tướng Học — Mandala mặt người + scrollwork viền */
[data-cat="tuong-hoc"] .sm-article-hero__motif {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400'%3E%3Cdefs%3E%3CclipPath id='th1'%3E%3Crect width='300' height='400'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23th1)'%3E%3C!-- Outer ornamental frame --%3E%3Crect x='20' y='20' width='260' height='360' rx='2' fill='none' stroke='%23d4a050' stroke-width='0.8'/%3E%3Crect x='30' y='30' width='240' height='340' rx='2' fill='none' stroke='%23d4a050' stroke-width='0.4'/%3E%3C!-- Corner flourishes --%3E%3Cpath d='M20 20 Q20 50 35 50 Q20 50 20 65' fill='none' stroke='%23d4a050' stroke-width='1'/%3E%3Cpath d='M280 20 Q280 50 265 50 Q280 50 280 65' fill='none' stroke='%23d4a050' stroke-width='1'/%3E%3Cpath d='M20 380 Q20 350 35 350 Q20 350 20 335' fill='none' stroke='%23d4a050' stroke-width='1'/%3E%3Cpath d='M280 380 Q280 350 265 350 Q280 350 280 335' fill='none' stroke='%23d4a050' stroke-width='1'/%3E%3C!-- Central face mandala --%3E%3Cellipse cx='150' cy='180' rx='75' ry='95' fill='none' stroke='%23d4a050' stroke-width='1'/%3E%3Cellipse cx='150' cy='180' rx='85' ry='105' fill='none' stroke='%23d4a050' stroke-width='0.3' stroke-dasharray='5 3'/%3E%3C!-- Eyes as ornamental suns --%3E%3Ccircle cx='120' cy='165' r='12' fill='none' stroke='%23d4a050' stroke-width='0.8'/%3E%3Ccircle cx='180' cy='165' r='12' fill='none' stroke='%23d4a050' stroke-width='0.8'/%3E%3Ccircle cx='120' cy='165' r='5' fill='none' stroke='%23d4a050' stroke-width='0.5'/%3E%3Ccircle cx='180' cy='165' r='5' fill='none' stroke='%23d4a050' stroke-width='0.5'/%3E%3Ccircle cx='120' cy='165' r='2' fill='%23d4a050' opacity='0.4'/%3E%3Ccircle cx='180' cy='165' r='2' fill='%23d4a050' opacity='0.4'/%3E%3C!-- Eye rays --%3E%3Cg stroke='%23d4a050' stroke-width='0.3'%3E%3Cline x1='120' y1='151' x2='120' y2='146'/%3E%3Cline x1='132' y1='165' x2='137' y2='165'/%3E%3Cline x1='108' y1='165' x2='103' y2='165'/%3E%3Cline x1='180' y1='151' x2='180' y2='146'/%3E%3Cline x1='192' y1='165' x2='197' y2='165'/%3E%3Cline x1='168' y1='165' x2='163' y2='165'/%3E%3C/g%3E%3C!-- Nose + mouth --%3E%3Cline x1='150' y1='175' x2='150' y2='200' stroke='%23d4a050' stroke-width='0.6'/%3E%3Cpath d='M135 212 Q150 224 165 212' fill='none' stroke='%23d4a050' stroke-width='0.8'/%3E%3C!-- Crown flourish --%3E%3Cpath d='M100 90 Q125 60 150 75 Q175 60 200 90' fill='none' stroke='%23d4a050' stroke-width='0.7'/%3E%3Cpath d='M110 95 Q130 70 150 80 Q170 70 190 95' fill='none' stroke='%23d4a050' stroke-width='0.4'/%3E%3Ccircle cx='150' cy='65' r='6' fill='none' stroke='%23d4a050' stroke-width='0.6'/%3E%3C!-- Bottom scrollwork --%3E%3Cpath d='M80 300 Q110 280 150 290 Q190 280 220 300' fill='none' stroke='%23d4a050' stroke-width='0.6'/%3E%3Cpath d='M80 300 Q60 310 70 325 Q80 340 100 335' fill='none' stroke='%23d4a050' stroke-width='0.5'/%3E%3Cpath d='M220 300 Q240 310 230 325 Q220 340 200 335' fill='none' stroke='%23d4a050' stroke-width='0.5'/%3E%3C!-- Symmetry lines --%3E%3Cline x1='150' y1='40' x2='150' y2='360' stroke='%23d4a050' stroke-width='0.2' stroke-dasharray='2 8'/%3E%3Cline x1='40' y1='180' x2='260' y2='180' stroke='%23d4a050' stroke-width='0.2' stroke-dasharray='2 8'/%3E%3C/g%3E%3C/svg%3E");
}
/* Tử Vi — Thiên bàn mandala 12 cung với vòng xoay đồng tâm */
[data-cat="tu-vi"] .sm-article-hero__motif {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3C!-- Outer ornamental ring --%3E%3Ccircle cx='150' cy='150' r='140' fill='none' stroke='%239070c0' stroke-width='0.6'/%3E%3Ccircle cx='150' cy='150' r='136' fill='none' stroke='%239070c0' stroke-width='0.3'/%3E%3Ccircle cx='150' cy='150' r='130' fill='none' stroke='%239070c0' stroke-width='0.8'/%3E%3C!-- 12-section dividers --%3E%3Cg stroke='%239070c0' stroke-width='0.5'%3E%3Cline x1='150' y1='10' x2='150' y2='55'/%3E%3Cline x1='215' y1='17.3' x2='192.5' y2='55.2'/%3E%3Cline x1='267.7' y1='65' x2='237.4' y2='87.5'/%3E%3Cline x1='290' y1='150' x2='245' y2='150'/%3E%3Cline x1='267.7' y1='235' x2='237.4' y2='212.5'/%3E%3Cline x1='215' y1='282.7' x2='192.5' y2='244.8'/%3E%3Cline x1='150' y1='290' x2='150' y2='245'/%3E%3Cline x1='85' y1='282.7' x2='107.5' y2='244.8'/%3E%3Cline x1='32.3' y1='235' x2='62.6' y2='212.5'/%3E%3Cline x1='10' y1='150' x2='55' y2='150'/%3E%3Cline x1='32.3' y1='65' x2='62.6' y2='87.5'/%3E%3Cline x1='85' y1='17.3' x2='107.5' y2='55.2'/%3E%3C/g%3E%3C!-- Inner rings --%3E%3Ccircle cx='150' cy='150' r='95' fill='none' stroke='%239070c0' stroke-width='0.5'/%3E%3Ccircle cx='150' cy='150' r='60' fill='none' stroke='%239070c0' stroke-width='0.4'/%3E%3Ccircle cx='150' cy='150' r='30' fill='none' stroke='%239070c0' stroke-width='0.6'/%3E%3C!-- Center star --%3E%3Cpolygon points='150,125 155,142 173,142 159,153 164,170 150,160 136,170 141,153 127,142 145,142' fill='none' stroke='%239070c0' stroke-width='0.5'/%3E%3C!-- Star decorations in cells --%3E%3Cg fill='%239070c0' opacity='0.4'%3E%3Ccircle cx='150' cy='25' r='3'/%3E%3Ccircle cx='214' cy='42' r='2'/%3E%3Ccircle cx='255' cy='95' r='2.5'/%3E%3Ccircle cx='260' cy='165' r='2'/%3E%3Ccircle cx='230' cy='230' r='3'/%3E%3Ccircle cx='170' cy='265' r='2'/%3E%3Ccircle cx='100' cy='255' r='2.5'/%3E%3Ccircle cx='50' cy='215' r='2'/%3E%3Ccircle cx='30' cy='140' r='3'/%3E%3Ccircle cx='45' cy='75' r='2'/%3E%3Ccircle cx='105' cy='30' r='2.5'/%3E%3Ccircle cx='150' cy='150' r='4'/%3E%3C/g%3E%3C!-- Decorative arcs between rings --%3E%3Cpath d='M120 60 Q150 45 180 60' fill='none' stroke='%239070c0' stroke-width='0.3'/%3E%3Cpath d='M240 120 Q255 150 240 180' fill='none' stroke='%239070c0' stroke-width='0.3'/%3E%3Cpath d='M180 240 Q150 255 120 240' fill='none' stroke='%239070c0' stroke-width='0.3'/%3E%3Cpath d='M60 180 Q45 150 60 120' fill='none' stroke='%239070c0' stroke-width='0.3'/%3E%3C/svg%3E");
}
/* Phong Thủy — La bàn Bát Quái ornamental mandala */
[data-cat="phong-thuy"] .sm-article-hero__motif {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3C!-- Outermost decorative ring --%3E%3Ccircle cx='150' cy='150' r='140' fill='none' stroke='%23c06048' stroke-width='0.5'/%3E%3Ccircle cx='150' cy='150' r='135' fill='none' stroke='%23c06048' stroke-width='0.8'/%3E%3Ccircle cx='150' cy='150' r='128' fill='none' stroke='%23c06048' stroke-width='0.5'/%3E%3C!-- Octagonal frame (Bát Quái) --%3E%3Cpolygon points='150,15 208,40 240,92 240,208 208,260 150,285 92,260 60,208 60,92 92,40' fill='none' stroke='%23c06048' stroke-width='0.7'/%3E%3C!-- Inner octagon --%3E%3Cpolygon points='150,55 190,72 210,110 210,190 190,228 150,245 110,228 90,190 90,110 110,72' fill='none' stroke='%23c06048' stroke-width='0.5'/%3E%3C!-- 8 directional lines --%3E%3Cg stroke='%23c06048' stroke-width='0.4'%3E%3Cline x1='150' y1='15' x2='150' y2='285'/%3E%3Cline x1='15' y1='150' x2='285' y2='150'/%3E%3Cline x1='47' y1='47' x2='253' y2='253'/%3E%3Cline x1='253' y1='47' x2='47' y2='253'/%3E%3C/g%3E%3C!-- Yin-Yang center --%3E%3Ccircle cx='150' cy='150' r='28' fill='none' stroke='%23c06048' stroke-width='0.8'/%3E%3Cpath d='M150 122 A28 28 0 0 1 150 178 A14 14 0 0 1 150 150 A14 14 0 0 0 150 122' fill='%23c06048' opacity='0.15'/%3E%3Ccircle cx='150' cy='136' r='4' fill='none' stroke='%23c06048' stroke-width='0.5'/%3E%3Ccircle cx='150' cy='164' r='4' fill='%23c06048' opacity='0.2'/%3E%3C!-- Trigram bars at 8 positions --%3E%3Cg fill='%23c06048' opacity='0.5'%3E%3C!-- N: Kan --%3E%3Crect x='140' y='35' width='20' height='3'/%3E%3Crect x='140' y='42' width='8' height='3'/%3E%3Crect x='152' y='42' width='8' height='3'/%3E%3Crect x='140' y='49' width='20' height='3'/%3E%3C!-- S: Li --%3E%3Crect x='140' y='248' width='20' height='3'/%3E%3Crect x='140' y='255' width='20' height='3'/%3E%3Crect x='140' y='262' width='8' height='3'/%3E%3Crect x='152' y='262' width='8' height='3'/%3E%3C!-- E --%3E%3Crect x='248' y='145' width='3' height='20' transform='rotate(90 250 155)'/%3E%3C!-- W --%3E%3Crect x='38' y='145' width='3' height='20' transform='rotate(90 40 155)'/%3E%3C/g%3E%3C!-- Decorative dots at compass points --%3E%3Cg fill='%23c06048' opacity='0.3'%3E%3Ccircle cx='150' cy='22' r='3'/%3E%3Ccircle cx='150' cy='278' r='3'/%3E%3Ccircle cx='22' cy='150' r='3'/%3E%3Ccircle cx='278' cy='150' r='3'/%3E%3C/g%3E%3C/svg%3E");
}
/* Thần Số Học — Sacred geometry Pythagorean mandala */
[data-cat="than-so-hoc"] .sm-article-hero__motif {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3C!-- Outer decorative circles --%3E%3Ccircle cx='150' cy='150' r='140' fill='none' stroke='%23c9a96e' stroke-width='0.5'/%3E%3Ccircle cx='150' cy='150' r='135' fill='none' stroke='%23c9a96e' stroke-width='0.8'/%3E%3Ccircle cx='150' cy='150' r='130' fill='none' stroke='%23c9a96e' stroke-width='0.3'/%3E%3C!-- Enneagram (9-pointed star) --%3E%3Ccircle cx='150' cy='150' r='100' fill='none' stroke='%23c9a96e' stroke-width='0.6'/%3E%3Cpolygon points='150,50 187,68 210,100 210,200 187,232 150,250 113,232 90,200 90,100 113,68' fill='none' stroke='%23c9a96e' stroke-width='0.4'/%3E%3C!-- Inner triangle --%3E%3Cpolygon points='150,65 225,195 75,195' fill='none' stroke='%23c9a96e' stroke-width='0.5'/%3E%3Cpolygon points='150,235 75,105 225,105' fill='none' stroke='%23c9a96e' stroke-width='0.5'/%3E%3C!-- Inner circle --%3E%3Ccircle cx='150' cy='150' r='55' fill='none' stroke='%23c9a96e' stroke-width='0.4'/%3E%3C!-- Numbers around the wheel --%3E%3Cg font-family=''Lexend Deca', sans-serif' font-size='16' fill='%23c9a96e' opacity='0.5' text-anchor='middle'%3E%3Ctext x='150' y='35'%3E1%3C/text%3E%3Ctext x='210' y='72'%3E2%3C/text%3E%3Ctext x='240' y='135'%3E3%3C/text%3E%3Ctext x='230' y='210'%3E4%3C/text%3E%3Ctext x='185' y='260'%3E5%3C/text%3E%3Ctext x='115' y='260'%3E6%3C/text%3E%3Ctext x='70' y='210'%3E7%3C/text%3E%3Ctext x='60' y='135'%3E8%3C/text%3E%3Ctext x='90' y='72'%3E9%3C/text%3E%3C/g%3E%3C!-- Center number --%3E%3Cg font-family=''Lexend Deca', sans-serif' font-size='28' fill='%23c9a96e' opacity='0.25' text-anchor='middle'%3E%3Ctext x='150' y='160'%3E9%3C/text%3E%3C/g%3E%3C!-- Connecting inner lines (3-6-9 triangle) --%3E%3Cg stroke='%23c9a96e' stroke-width='0.3' opacity='0.4'%3E%3Cline x1='150' y1='50' x2='90' y2='200'/%3E%3Cline x1='90' y1='200' x2='210' y2='200'/%3E%3Cline x1='210' y1='200' x2='150' y2='50'/%3E%3C/g%3E%3C!-- Decorative corner scrolls --%3E%3Cpath d='M25 25 Q25 55 45 55 Q25 55 25 75' fill='none' stroke='%23c9a96e' stroke-width='0.6'/%3E%3Cpath d='M275 25 Q275 55 255 55 Q275 55 275 75' fill='none' stroke='%23c9a96e' stroke-width='0.6'/%3E%3Cpath d='M25 275 Q25 245 45 245 Q25 245 25 225' fill='none' stroke='%23c9a96e' stroke-width='0.6'/%3E%3Cpath d='M275 275 Q275 245 255 245 Q275 245 275 225' fill='none' stroke='%23c9a96e' stroke-width='0.6'/%3E%3C/svg%3E");
}
/* Ngũ Hành — Ngũ giác sinh khắc mandala */
[data-cat="ngu-hanh"] .sm-article-hero__motif {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3C!-- Outer rings --%3E%3Ccircle cx='150' cy='150' r='140' fill='none' stroke='%23b08030' stroke-width='0.5'/%3E%3Ccircle cx='150' cy='150' r='135' fill='none' stroke='%23b08030' stroke-width='0.8'/%3E%3C!-- Pentagon --%3E%3Cpolygon points='150,20 277,112 228,270 72,270 23,112' fill='none' stroke='%23b08030' stroke-width='0.7'/%3E%3C!-- Inner pentagon --%3E%3Cpolygon points='150,65 240,130 205,240 95,240 60,130' fill='none' stroke='%23b08030' stroke-width='0.4'/%3E%3C!-- Pentagram (sinh) --%3E%3Cg stroke='%23b08030' stroke-width='0.4' opacity='0.6'%3E%3Cline x1='150' y1='20' x2='228' y2='270'/%3E%3Cline x1='228' y1='270' x2='23' y2='112'/%3E%3Cline x1='23' y1='112' x2='277' y2='112'/%3E%3Cline x1='277' y1='112' x2='72' y2='270'/%3E%3Cline x1='72' y1='270' x2='150' y2='20'/%3E%3C/g%3E%3C!-- Element circles at vertices --%3E%3Cg fill='none' stroke='%23b08030' stroke-width='0.6'%3E%3Ccircle cx='150' cy='25' r='12'/%3E%3Ccircle cx='272' cy='115' r='12'/%3E%3Ccircle cx='225' cy='268' r='12'/%3E%3Ccircle cx='75' cy='268' r='12'/%3E%3Ccircle cx='28' cy='115' r='12'/%3E%3C/g%3E%3C!-- Element characters --%3E%3Cg font-family='serif' font-size='14' fill='%23b08030' opacity='0.5' text-anchor='middle'%3E%3Ctext x='150' y='30'%3E%E7%81%AB%3C/text%3E%3Ctext x='272' y='120'%3E%E5%9C%9F%3C/text%3E%3Ctext x='225' y='273'%3E%E9%87%91%3C/text%3E%3Ctext x='75' y='273'%3E%E6%B0%B4%3C/text%3E%3Ctext x='28' y='120'%3E%E6%9C%A8%3C/text%3E%3C/g%3E%3C!-- Center circle --%3E%3Ccircle cx='150' cy='150' r='35' fill='none' stroke='%23b08030' stroke-width='0.5'/%3E%3Ccircle cx='150' cy='150' r='30' fill='none' stroke='%23b08030' stroke-width='0.3' stroke-dasharray='4 4'/%3E%3C/svg%3E");
}
/* Tứ Trụ — Tứ trụ bát tự ornamental wheel */
[data-cat="tu-tru"] .sm-article-hero__motif {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3C!-- Outer rings --%3E%3Ccircle cx='150' cy='150' r='140' fill='none' stroke='%234a8060' stroke-width='0.5'/%3E%3Ccircle cx='150' cy='150' r='135' fill='none' stroke='%234a8060' stroke-width='0.8'/%3E%3Ccircle cx='150' cy='150' r='128' fill='none' stroke='%234a8060' stroke-width='0.4'/%3E%3C!-- 4 pillar dividers --%3E%3Cg stroke='%234a8060' stroke-width='0.5'%3E%3Cline x1='150' y1='10' x2='150' y2='290'/%3E%3Cline x1='10' y1='150' x2='290' y2='150'/%3E%3C/g%3E%3C!-- Inner rings --%3E%3Ccircle cx='150' cy='150' r='95' fill='none' stroke='%234a8060' stroke-width='0.5'/%3E%3Ccircle cx='150' cy='150' r='60' fill='none' stroke='%234a8060' stroke-width='0.4'/%3E%3C!-- 12 Earthly Branches tick marks --%3E%3Cg stroke='%234a8060' stroke-width='0.3' opacity='0.5'%3E%3Cline x1='150' y1='15' x2='150' y2='35'/%3E%3Cline x1='200' y1='23' x2='192' y2='42'/%3E%3Cline x1='240' y1='57' x2='228' y2='72'/%3E%3Cline x1='285' y1='150' x2='265' y2='150'/%3E%3Cline x1='240' y1='243' x2='228' y2='228'/%3E%3Cline x1='200' y1='277' x2='192' y2='258'/%3E%3Cline x1='150' y1='285' x2='150' y2='265'/%3E%3Cline x1='100' y1='277' x2='108' y2='258'/%3E%3Cline x1='60' y1='243' x2='72' y2='228'/%3E%3Cline x1='15' y1='150' x2='35' y2='150'/%3E%3Cline x1='60' y1='57' x2='72' y2='72'/%3E%3Cline x1='100' y1='23' x2='108' y2='42'/%3E%3C/g%3E%3C!-- 4 pillar labels --%3E%3Cg font-family='serif' font-size='16' fill='%234a8060' opacity='0.45' text-anchor='middle'%3E%3Ctext x='150' y='85'%3E%E5%B9%B4%3C/text%3E%3Ctext x='215' y='155'%3E%E6%9C%88%3C/text%3E%3Ctext x='150' y='225'%3E%E6%97%A5%3C/text%3E%3Ctext x='85' y='155'%3E%E6%99%82%3C/text%3E%3C/g%3E%3C!-- Center dot --%3E%3Ccircle cx='150' cy='150' r='8' fill='none' stroke='%234a8060' stroke-width='0.6'/%3E%3Ccircle cx='150' cy='150' r='3' fill='%234a8060' opacity='0.3'/%3E%3C!-- Diagonal cross --%3E%3Cg stroke='%234a8060' stroke-width='0.2' stroke-dasharray='4 6'%3E%3Cline x1='47' y1='47' x2='253' y2='253'/%3E%3Cline x1='253' y1='47' x2='47' y2='253'/%3E%3C/g%3E%3C/svg%3E");
}
/* Kinh Dịch — Hexagram mandala with 8 trigrams */
[data-cat="kinh-dich"] .sm-article-hero__motif {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 360'%3E%3C!-- Outer frame --%3E%3Crect x='30' y='10' width='240' height='340' rx='2' fill='none' stroke='%23b87c30' stroke-width='0.6'/%3E%3Crect x='40' y='20' width='220' height='320' rx='2' fill='none' stroke='%23b87c30' stroke-width='0.3'/%3E%3C!-- Central hexagram (6 lines) --%3E%3Cg fill='%23b87c30' opacity='0.6'%3E%3C!-- Line 6 (top) — yang --%3E%3Crect x='95' y='55' width='110' height='7' rx='1'/%3E%3C!-- Line 5 — yin --%3E%3Crect x='95' y='75' width='48' height='7' rx='1'/%3E%3Crect x='157' y='75' width='48' height='7' rx='1'/%3E%3C!-- Line 4 — yang --%3E%3Crect x='95' y='95' width='110' height='7' rx='1'/%3E%3C!-- Line 3 — yin --%3E%3Crect x='95' y='125' width='48' height='7' rx='1'/%3E%3Crect x='157' y='125' width='48' height='7' rx='1'/%3E%3C!-- Line 2 — yang --%3E%3Crect x='95' y='145' width='110' height='7' rx='1'/%3E%3C!-- Line 1 (bottom) — yang --%3E%3Crect x='95' y='165' width='110' height='7' rx='1'/%3E%3C/g%3E%3C!-- Bagua circle below --%3E%3Ccircle cx='150' cy='260' r='65' fill='none' stroke='%23b87c30' stroke-width='0.6'/%3E%3Ccircle cx='150' cy='260' r='55' fill='none' stroke='%23b87c30' stroke-width='0.3'/%3E%3Ccircle cx='150' cy='260' r='40' fill='none' stroke='%23b87c30' stroke-width='0.4'/%3E%3C!-- 8 radial lines for bagua --%3E%3Cg stroke='%23b87c30' stroke-width='0.3'%3E%3Cline x1='150' y1='195' x2='150' y2='220'/%3E%3Cline x1='196' y1='214' x2='183' y2='228'/%3E%3Cline x1='215' y1='260' x2='190' y2='260'/%3E%3Cline x1='196' y1='306' x2='183' y2='292'/%3E%3Cline x1='150' y1='325' x2='150' y2='300'/%3E%3Cline x1='104' y1='306' x2='117' y2='292'/%3E%3Cline x1='85' y1='260' x2='110' y2='260'/%3E%3Cline x1='104' y1='214' x2='117' y2='228'/%3E%3C/g%3E%3C!-- Yin-Yang center --%3E%3Ccircle cx='150' cy='260' r='15' fill='none' stroke='%23b87c30' stroke-width='0.5'/%3E%3Cpath d='M150 245 A15 15 0 0 1 150 275 A7.5 7.5 0 0 1 150 260 A7.5 7.5 0 0 0 150 245' fill='%23b87c30' opacity='0.15'/%3E%3C!-- Decorative side flourishes --%3E%3Cpath d='M55 100 Q45 120 55 140' fill='none' stroke='%23b87c30' stroke-width='0.4'/%3E%3Cpath d='M245 100 Q255 120 245 140' fill='none' stroke='%23b87c30' stroke-width='0.4'/%3E%3C/svg%3E");
}
/* Chiêm Tinh — Zodiac wheel with constellation lines */
[data-cat="chiem-tinh"] .sm-article-hero__motif {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3C!-- Outer zodiac ring --%3E%3Ccircle cx='150' cy='150' r='140' fill='none' stroke='%235080c0' stroke-width='0.5'/%3E%3Ccircle cx='150' cy='150' r='133' fill='none' stroke='%235080c0' stroke-width='0.8'/%3E%3Ccircle cx='150' cy='150' r='120' fill='none' stroke='%235080c0' stroke-width='0.5'/%3E%3C!-- 12 zodiac dividers --%3E%3Cg stroke='%235080c0' stroke-width='0.4'%3E%3Cline x1='150' y1='10' x2='150' y2='30'/%3E%3Cline x1='220' y1='25' x2='210' y2='43'/%3E%3Cline x1='275' y1='80' x2='258' y2='93'/%3E%3Cline x1='290' y1='150' x2='270' y2='150'/%3E%3Cline x1='275' y1='220' x2='258' y2='207'/%3E%3Cline x1='220' y1='275' x2='210' y2='257'/%3E%3Cline x1='150' y1='290' x2='150' y2='270'/%3E%3Cline x1='80' y1='275' x2='90' y2='257'/%3E%3Cline x1='25' y1='220' x2='42' y2='207'/%3E%3Cline x1='10' y1='150' x2='30' y2='150'/%3E%3Cline x1='25' y1='80' x2='42' y2='93'/%3E%3Cline x1='80' y1='25' x2='90' y2='43'/%3E%3C/g%3E%3C!-- Inner rings --%3E%3Ccircle cx='150' cy='150' r='85' fill='none' stroke='%235080c0' stroke-width='0.4'/%3E%3Ccircle cx='150' cy='150' r='45' fill='none' stroke='%235080c0' stroke-width='0.3'/%3E%3C!-- Constellation pattern (Ursa Major style) --%3E%3Cg fill='%235080c0' opacity='0.5'%3E%3Ccircle cx='120' cy='90' r='3'/%3E%3Ccircle cx='140' cy='95' r='2.5'/%3E%3Ccircle cx='160' cy='88' r='2'/%3E%3Ccircle cx='175' cy='100' r='3'/%3E%3Ccircle cx='170' cy='120' r='2'/%3E%3Ccircle cx='185' cy='130' r='2.5'/%3E%3Ccircle cx='195' cy='115' r='2'/%3E%3C/g%3E%3Cg stroke='%235080c0' stroke-width='0.4' opacity='0.4'%3E%3Cline x1='120' y1='90' x2='140' y2='95'/%3E%3Cline x1='140' y1='95' x2='160' y2='88'/%3E%3Cline x1='160' y1='88' x2='175' y2='100'/%3E%3Cline x1='175' y1='100' x2='170' y2='120'/%3E%3Cline x1='170' y1='120' x2='185' y2='130'/%3E%3Cline x1='185' y1='130' x2='195' y2='115'/%3E%3Cline x1='195' y1='115' x2='175' y2='100'/%3E%3C/g%3E%3C!-- Scattered stars --%3E%3Cg fill='%235080c0' opacity='0.3'%3E%3Ccircle cx='80' cy='180' r='1.5'/%3E%3Ccircle cx='95' cy='210' r='1'/%3E%3Ccircle cx='200' cy='200' r='1.5'/%3E%3Ccircle cx='220' cy='180' r='1'/%3E%3Ccircle cx='110' cy='240' r='1.5'/%3E%3Ccircle cx='190' cy='240' r='1'/%3E%3Ccircle cx='70' cy='130' r='1'/%3E%3Ccircle cx='230' cy='150' r='1.5'/%3E%3C/g%3E%3C!-- Center sun --%3E%3Ccircle cx='150' cy='150' r='12' fill='none' stroke='%235080c0' stroke-width='0.6'/%3E%3Ccircle cx='150' cy='150' r='5' fill='%235080c0' opacity='0.2'/%3E%3Cg stroke='%235080c0' stroke-width='0.3'%3E%3Cline x1='150' y1='133' x2='150' y2='128'/%3E%3Cline x1='150' y1='167' x2='150' y2='172'/%3E%3Cline x1='133' y1='150' x2='128' y2='150'/%3E%3Cline x1='167' y1='150' x2='172' y2='150'/%3E%3C/g%3E%3C/svg%3E");
}
/* Bói & Xin Xăm — Oracle incense + lotus mandala */
[data-cat="boi-xam"] .sm-article-hero__motif {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400'%3E%3C!-- Ornamental frame --%3E%3Crect x='25' y='15' width='250' height='370' rx='2' fill='none' stroke='%23c05060' stroke-width='0.6'/%3E%3Crect x='35' y='25' width='230' height='350' rx='2' fill='none' stroke='%23c05060' stroke-width='0.3'/%3E%3C!-- Incense stick --%3E%3Cline x1='150' y1='380' x2='150' y2='200' stroke='%23c05060' stroke-width='1.5'/%3E%3C!-- Smoke swirls --%3E%3Cpath d='M150 200 Q140 180 150 160 Q160 140 150 120 Q140 100 150 80 Q160 60 150 40' fill='none' stroke='%23c05060' stroke-width='0.8' opacity='0.5'/%3E%3Cpath d='M150 190 Q130 170 135 150 Q140 130 125 110 Q110 90 120 70' fill='none' stroke='%23c05060' stroke-width='0.5' opacity='0.3'/%3E%3Cpath d='M150 190 Q170 170 165 150 Q160 130 175 110 Q190 90 180 70' fill='none' stroke='%23c05060' stroke-width='0.5' opacity='0.3'/%3E%3C!-- Lotus base --%3E%3Cpath d='M110 220 Q130 205 150 210 Q170 205 190 220' fill='none' stroke='%23c05060' stroke-width='0.6'/%3E%3Cpath d='M120 230 Q135 218 150 222 Q165 218 180 230' fill='none' stroke='%23c05060' stroke-width='0.4'/%3E%3C!-- Mandala around incense --%3E%3Ccircle cx='150' cy='200' r='40' fill='none' stroke='%23c05060' stroke-width='0.4' stroke-dasharray='4 4'/%3E%3Ccircle cx='150' cy='200' r='55' fill='none' stroke='%23c05060' stroke-width='0.3' stroke-dasharray='2 6'/%3E%3C!-- Corner L-brackets --%3E%3Cpath d='M30 20 L50 20 M30 20 L30 40' stroke='%23c05060' stroke-width='0.8'/%3E%3Cpath d='M270 20 L250 20 M270 20 L270 40' stroke='%23c05060' stroke-width='0.8'/%3E%3Cpath d='M30 380 L50 380 M30 380 L30 360' stroke='%23c05060' stroke-width='0.8'/%3E%3Cpath d='M270 380 L250 380 M270 380 L270 360' stroke='%23c05060' stroke-width='0.8'/%3E%3C/svg%3E");
}
/* Lịch & Ngày Tốt — Calendar mandala with celestial frame */
[data-cat="hoang-lich"] .sm-article-hero__motif {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3C!-- Outer decorative ring --%3E%3Ccircle cx='150' cy='150' r='140' fill='none' stroke='%23a08838' stroke-width='0.5'/%3E%3Ccircle cx='150' cy='150' r='135' fill='none' stroke='%23a08838' stroke-width='0.7'/%3E%3C!-- Calendar grid centered --%3E%3Crect x='55' y='65' width='190' height='170' rx='2' fill='none' stroke='%23a08838' stroke-width='0.7'/%3E%3Crect x='60' y='70' width='180' height='160' rx='2' fill='none' stroke='%23a08838' stroke-width='0.3'/%3E%3C!-- Header bar --%3E%3Cline x1='60' y1='100' x2='240' y2='100' stroke='%23a08838' stroke-width='0.5'/%3E%3C!-- Grid lines --%3E%3Cg stroke='%23a08838' stroke-width='0.25' opacity='0.5'%3E%3Cline x1='90' y1='100' x2='90' y2='230'/%3E%3Cline x1='120' y1='100' x2='120' y2='230'/%3E%3Cline x1='150' y1='100' x2='150' y2='230'/%3E%3Cline x1='180' y1='100' x2='180' y2='230'/%3E%3Cline x1='210' y1='100' x2='210' y2='230'/%3E%3Cline x1='60' y1='130' x2='240' y2='130'/%3E%3Cline x1='60' y1='160' x2='240' y2='160'/%3E%3Cline x1='60' y1='190' x2='240' y2='190'/%3E%3C/g%3E%3C!-- Moon phases at top --%3E%3Ccircle cx='100' cy='42' r='12' fill='none' stroke='%23a08838' stroke-width='0.5'/%3E%3Cpath d='M100 30 A12 12 0 0 1 100 54 A8 8 0 0 0 100 30' fill='%23a08838' opacity='0.15'/%3E%3Ccircle cx='150' cy='42' r='12' fill='none' stroke='%23a08838' stroke-width='0.5'/%3E%3Ccircle cx='150' cy='42' r='4' fill='%23a08838' opacity='0.15'/%3E%3Ccircle cx='200' cy='42' r='12' fill='none' stroke='%23a08838' stroke-width='0.5'/%3E%3Cpath d='M200 30 A12 12 0 0 0 200 54 A8 8 0 0 1 200 30' fill='%23a08838' opacity='0.15'/%3E%3C!-- Bottom decoration --%3E%3Cpath d='M100 260 Q150 245 200 260' fill='none' stroke='%23a08838' stroke-width='0.4'/%3E%3Cpath d='M110 270 Q150 258 190 270' fill='none' stroke='%23a08838' stroke-width='0.3'/%3E%3C/svg%3E");
}
/* Tam Thức — Kỳ Môn magic square + Lạc Thư mandala */
[data-cat="tam-thuc"] .sm-article-hero__motif {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3C!-- Outer circle --%3E%3Ccircle cx='150' cy='150' r='140' fill='none' stroke='%237868a0' stroke-width='0.5'/%3E%3Ccircle cx='150' cy='150' r='135' fill='none' stroke='%237868a0' stroke-width='0.7'/%3E%3C!-- Magic square grid --%3E%3Crect x='55' y='55' width='190' height='190' fill='none' stroke='%237868a0' stroke-width='0.7'/%3E%3Crect x='60' y='60' width='180' height='180' fill='none' stroke='%237868a0' stroke-width='0.3'/%3E%3Cg stroke='%237868a0' stroke-width='0.4'%3E%3Cline x1='120' y1='55' x2='120' y2='245'/%3E%3Cline x1='180' y1='55' x2='180' y2='245'/%3E%3Cline x1='55' y1='120' x2='245' y2='120'/%3E%3Cline x1='55' y1='180' x2='245' y2='180'/%3E%3C/g%3E%3C!-- Lạc Thư numbers --%3E%3Cg font-family=''Lexend Deca', sans-serif' font-size='24' fill='%237868a0' opacity='0.35' text-anchor='middle'%3E%3Ctext x='88' y='98'%3E4%3C/text%3E%3Ctext x='150' y='98'%3E9%3C/text%3E%3Ctext x='212' y='98'%3E2%3C/text%3E%3Ctext x='88' y='160'%3E3%3C/text%3E%3Ctext x='150' y='160'%3E5%3C/text%3E%3Ctext x='212' y='160'%3E7%3C/text%3E%3Ctext x='88' y='222'%3E8%3C/text%3E%3Ctext x='150' y='222'%3E1%3C/text%3E%3Ctext x='212' y='222'%3E6%3C/text%3E%3C/g%3E%3C!-- Diagonal lines --%3E%3Cg stroke='%237868a0' stroke-width='0.2' stroke-dasharray='4 6'%3E%3Cline x1='55' y1='55' x2='245' y2='245'/%3E%3Cline x1='245' y1='55' x2='55' y2='245'/%3E%3C/g%3E%3C!-- Outer corner brackets --%3E%3Cpath d='M30 30 L55 30 M30 30 L30 55' stroke='%237868a0' stroke-width='0.7'/%3E%3Cpath d='M270 30 L245 30 M270 30 L270 55' stroke='%237868a0' stroke-width='0.7'/%3E%3Cpath d='M30 270 L55 270 M30 270 L30 245' stroke='%237868a0' stroke-width='0.7'/%3E%3Cpath d='M270 270 L245 270 M270 270 L270 245' stroke='%237868a0' stroke-width='0.7'/%3E%3C/svg%3E");
}

/* ── Badge sigil (small SVG before category name) ── */
.sm-badge__sigil {
    display: inline-block;
    width: 12px; height: 12px;
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.7;
}
/* Default sigil — diamond */
.sm-badge__sigil {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1L11 6L6 11L1 6Z' fill='none' stroke='%23c9a96e' stroke-width='1'/%3E%3Ccircle cx='6' cy='6' r='1.5' fill='%23c9a96e' opacity='0.5'/%3E%3C/svg%3E");
}
/* Per-category sigils */
[data-cat="tuong-hoc"] .sm-badge__sigil {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cellipse cx='6' cy='5.5' rx='4' ry='5' fill='none' stroke='%23d4a050' stroke-width='0.8'/%3E%3Ccircle cx='4.5' cy='4.5' r='1' fill='%23d4a050' opacity='0.5'/%3E%3Ccircle cx='7.5' cy='4.5' r='1' fill='%23d4a050' opacity='0.5'/%3E%3C/svg%3E");
}
[data-cat="tu-vi"] .sm-badge__sigil {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='5' fill='none' stroke='%239070c0' stroke-width='0.8'/%3E%3Ccircle cx='6' cy='6' r='1.5' fill='%239070c0' opacity='0.4'/%3E%3Ccircle cx='6' cy='1.5' r='0.8' fill='%239070c0' opacity='0.5'/%3E%3Ccircle cx='10' cy='8' r='0.8' fill='%239070c0' opacity='0.5'/%3E%3C/svg%3E");
}
[data-cat="phong-thuy"] .sm-badge__sigil {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='5' fill='none' stroke='%23c06048' stroke-width='0.8'/%3E%3Cline x1='1' y1='6' x2='11' y2='6' stroke='%23c06048' stroke-width='0.4'/%3E%3Cline x1='6' y1='1' x2='6' y2='11' stroke='%23c06048' stroke-width='0.4'/%3E%3C/svg%3E");
}
[data-cat="kinh-dich"] .sm-badge__sigil {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='2' y='2' width='8' height='1.5' fill='%23b87c30' opacity='0.6'/%3E%3Crect x='2' y='5.25' width='3' height='1.5' fill='%23b87c30' opacity='0.6'/%3E%3Crect x='7' y='5.25' width='3' height='1.5' fill='%23b87c30' opacity='0.6'/%3E%3Crect x='2' y='8.5' width='8' height='1.5' fill='%23b87c30' opacity='0.6'/%3E%3C/svg%3E");
}

/* ── Badge uses unified gold accent ── */
.sm-badge--category { color: var(--cat-accent); border-color: rgba(var(--cat-accent-rgb),0.3); }

/* ── Frame border uses cat-accent ── */
.sm-article-hero__frame {
    border-color: rgba(var(--cat-accent-rgb), 0.15);
}
.sm-article-hero__frame::before,
.sm-article-hero__frame::after {
    border-color: rgba(var(--cat-accent-rgb), 0.4);
}

/* ── Meta separator uses cat-accent ── */
.sm-article__meta-sep { color: rgba(var(--cat-accent-rgb), 0.3); }

.sm-article__cta { margin: 0 0 var(--space-6); text-align: center; }
.sm-article__cta h3 { margin-bottom: var(--space-2); }
.sm-article__cta p { color: var(--text-secondary); margin-bottom: var(--space-4); }
/* Reset .sm-prose h3 styles khi CTA nằm bên trong content */
.sm-prose .sm-article__cta { margin-top: var(--space-8); }
.sm-prose .sm-article__cta h3 {
    padding-left: 0;
    border-left: none;
    margin-top: 0;
    position: static;
}
.sm-prose .sm-article__cta h3::before { display: none; }
.sm-prose .sm-article__cta .sm-btn { color: var(--text-inverse); text-decoration: none; }
.sm-prose .sm-article__cta .sm-btn:hover { color: var(--text-inverse); }
.sm-article__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-4); }
.sm-tag {
    padding: var(--space-1) var(--space-3); background: rgba(201, 169, 110, 0.08);
    color: var(--color-primary-400); border-radius: 2px; font-size: var(--font-size-xs);
    border: 1px solid rgba(201,169,110,0.12);
}

.sm-share { display: flex; align-items: center; gap: 10px; margin: 0; flex-wrap: wrap; }
.sm-share__label {
    font-family: var(--font-display); font-size: 0.75rem; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: rgba(201,169,110,0.5);
}
.sm-share__btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 2px;
    border: 1px solid rgba(201,169,110,0.25); background: rgba(201,169,110,0.06);
    color: rgba(201,169,110,0.6); cursor: pointer; text-decoration: none;
    transition: all 250ms ease;
}
.sm-share__btn:hover { background: rgba(201,169,110,0.14); border-color: rgba(201,169,110,0.5); color: #f5d58c; }
.sm-share__btn svg { width: 15px; height: 15px; }
.sm-share__btn--copy.copied { border-color: rgba(201,169,110,0.6); color: #f5d58c; }

/* ── Tool-page share band (under every tool, above "other tools") ──
   Big-tap targets (≥44px) for low-vision founder · gold-on-black tone */
.sm-tool-share { padding: 8px 20px 4px; }
.sm-tool-share__inner {
    max-width: 760px; margin: 0 auto; text-align: center;
}
.sm-tool-share__lead {
    font-family: var(--font-display, 'Lexend Deca', system-ui, sans-serif);
    font-size: 0.95rem; font-weight: 500; letter-spacing: 0.01em;
    color: rgba(201,169,110,0.82); margin: 6px 0 14px;
}
.sm-tool-share .sm-share { justify-content: center; gap: 14px; }
.sm-tool-share .sm-share__btn {
    width: 46px; height: 46px; border-radius: 4px;
    border-color: rgba(201,169,110,0.4); background: rgba(201,169,110,0.08);
    color: rgba(201,169,110,0.85);
}
.sm-tool-share .sm-share__btn svg { width: 20px; height: 20px; }
.sm-tool-share .sm-share__btn:hover,
.sm-tool-share .sm-share__btn:focus-visible {
    background: rgba(201,169,110,0.18); border-color: rgba(201,169,110,0.65);
    color: #f5d58c; outline: none;
}
.sm-tool-share .sm-share__btn--zalo { color: #b9d4ff; border-color: rgba(120,170,255,0.4); }
.sm-tool-share .sm-share__btn--zalo:hover { background: rgba(120,170,255,0.16); border-color: rgba(120,170,255,0.7); color: #d6e6ff; }
.sm-tool-share .sm-share__btn--fb { color: #c9d6ff; border-color: rgba(120,150,255,0.38); }
.sm-tool-share .sm-share__btn--fb:hover { background: rgba(90,120,240,0.16); border-color: rgba(120,150,255,0.7); color: #e0e8ff; }
@media (max-width: 480px) {
    .sm-tool-share .sm-share__btn { width: 48px; height: 48px; }
    .sm-tool-share__lead { font-size: 0.9rem; }
}

/* ════════════════════════════════════════════════════════════════
   ARTICLE EPILOGUE — "Bạt Thư" · CTA + Author + Tags + Share
   One unified zone instead of four floating islands
   ════════════════════════════════════════════════════════════════ */
.sm-article__epilogue {
    margin-top: var(--space-10);
    padding: var(--space-8) 0 var(--space-6);
    position: relative;
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(18,16,13,0.5) 12%,
        rgba(18,16,13,0.5) 88%,
        transparent 100%);
}
/* Top meander — signals "prose ends, epilogue begins" */
.sm-article__epilogue::before {
    content: '';
    display: block;
    width: 100%; height: 6px;
    margin-bottom: var(--space-6);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6'%3E%3Cpath d='M0.5,5.5 L0.5,0.5 L5.5,0.5 L5.5,5.5 L2,5.5 L2,2.5 L4,2.5 L4,4 L3,4' fill='none' stroke='%23c9a96e' stroke-width='0.6'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    opacity: 0.25;
}
/* Bottom meander — closes epilogue before related posts */
.sm-article__epilogue::after {
    content: '';
    display: block;
    width: 100%; height: 6px;
    margin-top: var(--space-6);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6'%3E%3Cpath d='M0.5,5.5 L0.5,0.5 L5.5,0.5 L5.5,5.5 L2,5.5 L2,2.5 L4,2.5 L4,4 L3,4' fill='none' stroke='%23c9a96e' stroke-width='0.6'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    opacity: 0.25;
}

/* ════════════════════════════════════════════════════════════════
   RELATED POSTS — "Thiên Thư Liên Hoàn"
   ════════════════════════════════════════════════════════════════ */
/* ── Category Orb Carousel ── */
.sm-cat-carousel {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 36px;
    position: relative;
}
.sm-cat-carousel__track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 10px 4px;
    flex: 1;
    min-width: 0;
}
.sm-cat-carousel__track::-webkit-scrollbar { display: none; }
.sm-cat-carousel__arrow {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(201,169,110,0.06);
    border: 1px solid rgba(201,169,110,0.2);
    border-radius: 50%;
    cursor: pointer;
    transition: all 250ms ease;
}
.sm-cat-carousel__arrow:hover {
    background: rgba(201,169,110,0.12);
    border-color: rgba(201,169,110,0.45);
}
.sm-cat-orb {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    flex-shrink: 0;
    scroll-snap-align: center;
}
.sm-cat-orb__ring {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201,169,110,0.08) 0%, transparent 70%);
    border: 1px solid rgba(201,169,110,0.12);
    transition: all 400ms cubic-bezier(0.22,1,0.36,1);
}
.sm-cat-orb__ring svg { width: 100%; height: 100%; transition: transform 6s linear; }
.sm-cat-orb:hover .sm-cat-orb__ring {
    background: radial-gradient(circle, rgba(201,169,110,0.16) 0%, transparent 70%);
    border-color: rgba(201,169,110,0.35);
    box-shadow: 0 0 20px rgba(201,169,110,0.15);
}
.sm-cat-orb:hover .sm-cat-orb__ring svg { transform: rotate(360deg); }
.sm-cat-orb__name {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(201,169,110,0.55);
    text-align: center;
    line-height: 1.3;
    white-space: nowrap;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 300ms ease;
}
.sm-cat-orb:hover .sm-cat-orb__name { color: #f5d58c; }
.sm-cat-orb.is-active .sm-cat-orb__ring {
    background: radial-gradient(circle, rgba(201,169,110,0.16) 0%, transparent 70%);
    border-color: rgba(201,169,110,0.35);
    box-shadow: 0 0 16px rgba(201,169,110,0.12);
}
.sm-cat-orb.is-active .sm-cat-orb__name { color: #f5d58c; }
@media (max-width: 480px) {
    .sm-cat-carousel__arrow { width: 30px; height: 30px; }
    .sm-cat-carousel__arrow svg { width: 16px; height: 16px; }
    .sm-cat-orb__ring { width: 60px; height: 60px; }
    .sm-cat-orb__name { font-size: 0.6875rem; max-width: 68px; }
    .sm-cat-carousel__track { gap: 14px; }
}

.sm-related {
    margin-top: var(--space-10);
    padding: var(--space-8) 0 var(--space-6);
    position: relative;
}
.sm-related .sm-post-card { opacity: 1; transform: none; }
.sm-related::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(201,169,110,0.2) 20%, rgba(201,169,110,0.35) 50%, rgba(201,169,110,0.2) 80%, transparent 100%);
}
.sm-related__title {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(201,169,110,0.5);
    margin: 0 0 var(--space-6);
    text-align: center;
}
.sm-blog-grid--3 {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px;
}
.sm-blog-grid--3 .sm-post-card:first-child { grid-column: auto; }
.sm-blog-grid--3 .sm-post-card:first-child .sm-post-card__thumb { aspect-ratio: 16/10; }
.sm-blog-grid--3 .sm-post-card:first-child .sm-post-card__title { font-size: clamp(1.0625rem, 1.6vw, 1.1875rem); }
.sm-blog-grid--3 .sm-post-card:first-child .sm-post-card__excerpt { -webkit-line-clamp: 2; font-size: 0.9375rem; }
/* Đồng nhất tất cả card trong related grid */
.sm-blog-grid--3 .sm-post-card__thumb { aspect-ratio: 16/10; }
.sm-blog-grid--3 .sm-post-card__title { font-size: clamp(1.0625rem, 1.6vw, 1.1875rem); }
.sm-blog-grid--3 .sm-post-card__excerpt { -webkit-line-clamp: 2; font-size: 0.9375rem; }
@media (max-width: 1024px) {
    .sm-blog-grid--3 { grid-template-columns: repeat(2, 1fr) !important; gap: 18px; }
    .sm-blog-grid--3 .sm-post-card:last-child:nth-child(odd) {
        grid-column: 1 / -1; max-width: 400px; margin: 0 auto;
    }
}
@media (max-width: 640px) {
    .sm-blog-grid--3 { grid-template-columns: 1fr !important; gap: 16px; }
    .sm-blog-grid--3 .sm-post-card:last-child:nth-child(odd) {
        grid-column: auto; max-width: none; margin: 0;
    }
}

/* ══════════════════════════════════════════════════
   BREADCRUMB "THIÊN LỘ" v2.0
   1 CSS cho 72 trang — tự đọc --tool-accent-main
   ══════════════════════════════════════════════════ */
.sm-breadcrumb {
    padding: calc(var(--header-height) + 22px) 0 8px;
    position: relative; z-index: 1;
    overflow: hidden;
}
/* ── Single post: breadcrumb dissolves into hero ── */
body.single-post .sm-breadcrumb {
    padding-bottom: 0;
}
/* ── Mobile breadcrumb: single line + truncate title ── */
@media (max-width: 767px) {
    .sm-bc__list {
        flex-wrap: nowrap;
        overflow: hidden;
    }
    .sm-bc__item {
        flex-shrink: 0;
    }
    .sm-bc__item--current {
        flex: 1;
        min-width: 0;
        overflow: hidden;
    }
    .sm-bc__item--current .sm-bc__current {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
/* ── Cosmos blend background ── */
body:has([class*="-cosmos"]) .sm-breadcrumb {
    background: linear-gradient(to bottom,
        rgba(12,12,10,0.96) 0%,
        var(--tool-bg-blend, rgba(12,12,10,0.92)) 100%);
    border-bottom: none;
}
@supports (background: color-mix(in oklch, red, blue)) {
    body:has([class*="-cosmos"]) .sm-breadcrumb {
        background:
            radial-gradient(ellipse 60% 50% at 50% 100%,
                color-mix(in oklch, var(--tool-accent-main, #c9a96e) 8%, transparent) 0%,
                transparent 70%),
            linear-gradient(to bottom,
                rgba(14,13,11,0.97) 0%,
                var(--tool-bg-blend, rgba(12,12,10,0.92)) 100%);
    }
}

/* ── Decorative lines ── */
.sm-bc__line {
    height: 1px;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-4);
    transform-origin: center;
    animation: smBcLineIn .6s cubic-bezier(.23,1,.32,1) forwards;
}
.sm-bc__line--top {
    display: none;
}
.sm-bc__line--bottom {
    margin-top: 10px;
    background: linear-gradient(90deg,
        transparent 5%,
        rgba(201,169,110,.05) 30%,
        rgba(201,169,110,.05) 70%,
        transparent 95%);
}
@keyframes smBcLineIn {
    from { transform: scaleX(0); opacity: 0; }
    to   { transform: scaleX(1); opacity: 1; }
}
.sm-bc__line--bottom { animation-delay: 150ms; }

/* ── List ── */
.sm-bc__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

/* ── Item ── */
.sm-bc__item {
    display: flex;
    align-items: center;
    font-size: 0.82rem;
    font-family: 'Be Vietnam Pro', sans-serif;
    letter-spacing: .01em;
    color: rgba(232,224,208,.5);
    opacity: 0;
    animation: smBcItemIn .4s ease forwards;
}
.sm-bc__item:nth-child(1) { animation-delay: 50ms; }
.sm-bc__item:nth-child(2) { animation-delay: 110ms; }
.sm-bc__item:nth-child(3) { animation-delay: 170ms; }
.sm-bc__item:nth-child(4) { animation-delay: 230ms; }
.sm-bc__item:nth-child(5) { animation-delay: 290ms; }
@keyframes smBcItemIn {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: none; }
}

/* ── Link ── */
.sm-bc__link {
    display: flex;
    align-items: center;
    gap: 5px;
    color: rgba(232,224,208,.5);
    text-decoration: none;
    transition: color .2s ease;
    padding: 2px 0;
}
.sm-bc__link:hover {
    color: var(--tool-accent-main, #c9a96e);
}

/* ── Home icon ── */
.sm-bc__home {
    width: 13px; height: 13px;
    opacity: .5;
    transition: opacity .2s;
    flex-shrink: 0;
}
.sm-bc__link:hover .sm-bc__home { opacity: .85; }

/* ── Separator ── */
.sm-bc__sep {
    display: flex;
    align-items: center;
    padding: 0 8px;
}
.sm-bc__sep svg {
    width: 6px; height: 10px;
    color: rgba(201,169,110,.35);
}

/* ── Current item (last crumb) ── */
.sm-bc__current {
    color: var(--tool-accent-main, rgba(232,224,208,.75));
    font-weight: 500;
    position: relative;
}
.sm-bc__current::before {
    content: '\25C8'; /* ◈ */
    font-size: .55em;
    margin-right: 5px;
    opacity: .45;
    color: var(--tool-accent-main, #c9a96e);
    vertical-align: 1px;
}
/* Fallback for no accent variable — slightly brighter text */
@supports not (color: color-mix(in oklch, red, blue)) {
    .sm-bc__current { color: rgba(232,224,208,.8); }
}
@supports (color: color-mix(in oklch, red, blue)) {
    .sm-bc__current {
        color: color-mix(in oklch, var(--tool-accent-main, #c9a96e) 70%, rgba(232,224,208,.8) 30%);
    }
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .sm-bc__list { padding: 0 var(--space-3); }
    .sm-bc__item { font-size: .78rem; }
    .sm-bc__sep { padding: 0 5px; }
    .sm-bc__home { width: 11px; height: 11px; }
    .sm-bc__line { display: none; }
    .sm-breadcrumb { padding-bottom: 6px; }
}
@media (max-width: 480px) {
    .sm-bc__sep { padding: 0 4px; }
    .sm-bc__current::before { display: none; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .sm-bc__item,
    .sm-bc__line {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ── GLOBAL EYEBROW & FORM-DISC MINIMUM STANDARDS ──
   Override tool-specific files that set dangerously small/faint values.
   Individual tool colors preserved — only size & readability enforced. */
[class*="-eyebrow"] {
    font-size: max(0.85rem, 13.6px) !important;
    text-shadow: 0 0 16px color-mix(in oklch, var(--tool-accent-main, #c9a96e) 20%, transparent);
}
[class*="-form-disc"] {
    font-size: max(0.88rem, 14px) !important;
    max-width: 560px;
}
/* Ensure form-disc is never invisible */
@supports (color: color-mix(in oklch, red, blue)) {
    [class*="-form-disc"] {
        color: color-mix(in oklch, var(--tool-accent-main, #c9a96e) 25%, rgba(232,224,208,0.6)) !important;
    }
}
@supports not (color: color-mix(in oklch, red, blue)) {
    [class*="-form-disc"] {
        color: rgba(232,224,208,0.6) !important;
    }
}

.sm-pagination {
    margin-top: 56px;
    text-align: center;
    position: relative;
}
/* Meander top rule */
.sm-pagination::before {
    content: '';
    display: block;
    width: 120px;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(201,169,110,0.4), transparent);
    margin: 0 auto 28px;
}
.sm-pagination .nav-links { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.sm-pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 48px; height: 48px; padding: 0 14px;
    font-size: 0.9375rem;
    font-family: var(--font-display, 'Playfair Display', serif);
    color: rgba(232,224,208,0.7);
    background: rgba(18,17,14,0.6);
    border: 1px solid rgba(201,169,110,0.18);
    transition: background 220ms ease, border-color 220ms ease, color 220ms ease, box-shadow 220ms ease;
    text-decoration: none;
}
.sm-pagination .page-numbers:hover {
    background: rgba(201,169,110,0.12);
    border-color: rgba(201,169,110,0.4);
    color: #f5d58c;
    box-shadow: 0 0 16px rgba(201,169,110,0.1);
}
.sm-pagination .page-numbers.current {
    background: rgba(201,169,110,0.16);
    color: #f5d58c;
    border-color: rgba(201,169,110,0.45);
    box-shadow: 0 0 20px rgba(201,169,110,0.12), inset 0 1px 0 rgba(201,169,110,0.2);
    font-weight: 600;
}
.sm-pagination .page-numbers.dots {
    border-color: transparent;
    background: transparent;
    color: rgba(201,169,110,0.4);
    min-width: 32px;
}

/* ── FOOTER ── */
.sm-footer {
    background:
        radial-gradient(ellipse 80% 40% at 50% 0%, rgba(201, 169, 110, 0.04) 0%, transparent 60%),
        radial-gradient(ellipse 50% 30% at 20% 100%, rgba(201, 169, 110, 0.02) 0%, transparent 50%),
        #0c0c0a;
    padding: 0 0 var(--space-8);
    position: relative;
}
.sm-footer::after {
    display: none; /* Removed: meander bottom rail — keep footer clean */
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 12px;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M0.5%2C11 L0.5%2C0.5 L11%2C0.5 L11%2C11 L3.5%2C11 L3.5%2C4 L8.5%2C4 L8.5%2C8.5 L5.5%2C8.5 L5.5%2C6 L6.5%2C6' fill='none' stroke='%23c9a96e' stroke-width='0.7' stroke-linejoin='miter' stroke-linecap='square'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-position: center;
    background-size: 12px 12px;
    opacity: 0.35;
    animation: sealBreath 5s ease-in-out infinite;
    animation-delay: -3s;
}

/* ── Meander divider ── */
.sm-footer__meander {
    width: 100%; height: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M0.5,7 L0.5,0.5 L7,0.5 L7,7 L2.5,7 L2.5,3 L5.5,3 L5.5,5.5 L3.5,5.5 L3.5,4 L4.5,4' fill='none' stroke='%23c9a96e' stroke-width='0.7' stroke-linejoin='miter' stroke-linecap='square'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-position: center;
    opacity: 0.2;
    margin-bottom: var(--space-16);
}

.sm-footer__grid {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr;
    gap: var(--space-8);
    margin-bottom: 0;
    align-items: start;
}

/* ── Brand col ── */
.sm-footer__col--brand { display: flex; flex-direction: column; align-items: center; text-align: center; }
.sm-footer__logo {
    display: inline-flex; align-items: center; gap: 10px;
    text-decoration: none; color: var(--text-primary);
    margin-bottom: 16px;
    transition: opacity 300ms ease;
}
.sm-footer__logo:hover { opacity: .85; }

svg.sm-footer__logo-icon {
    width: 40px; height: 40px; flex-shrink: 0; display: block;
}
@keyframes ftLogoSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.sm-footer__logo-words {
    display: inline-grid;
    grid-template-columns: 1fr;
    gap: 0; flex-shrink: 0;
}

.sm-footer__logo-name {
    font-family: var(--font-body); font-size: 28px; font-weight: 400;
    letter-spacing: 0.02em; line-height: 1.15;
    white-space: nowrap; display: block;
    padding-bottom: 4px;
}
.sm-footer__logo-name strong {
    font-weight: 700;
    background: linear-gradient(115deg, #b8924a 0%, #c9a96e 25%, #f5d58c 50%, #c9a96e 75%, #b8924a 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: logoShimmer 8s ease-in-out infinite;
}

.sm-footer__logo-line {
    display: block; width: 100%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,169,110,.4) 15%, rgba(201,169,110,.4) 85%, transparent);
    margin-bottom: 5px;
}

.sm-footer__logo-sub {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 9px; font-weight: 700; font-style: normal;
    color: rgba(201,169,110,.75);
    text-transform: uppercase; line-height: 1; letter-spacing: .1em;
    white-space: nowrap; display: block;
    width: 100%; text-align: justify; text-align-last: justify;
}

.sm-footer__desc {
    color: var(--text-muted); font-size: var(--font-size-sm);
    line-height: var(--line-height-loose); max-width: 280px;
    margin-bottom: var(--space-5); text-align: center;
}

/* Social icons */
.sm-footer__social {
    display: flex; align-items: center; gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.sm-footer__social-link {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 4px;
    border: 1px solid rgba(201, 169, 110, 0.15);
    color: var(--text-muted); transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}
.sm-footer__social-link svg { width: 16px; height: 16px; }
.sm-footer__social-link:hover {
    color: var(--color-primary-300);
    border-color: rgba(201, 169, 110, 0.4);
    background: rgba(201, 169, 110, 0.06);
}

/* Email link */
.sm-footer__email {
    display: inline-flex; align-items: center; gap: var(--space-2);
    color: var(--text-muted); font-size: var(--font-size-sm);
    text-decoration: none; transition: color 150ms ease;
}
.sm-footer__email svg { width: 15px; height: 15px; flex-shrink: 0; }
.sm-footer__email:hover { color: var(--color-primary-300); }

/* ── Nav cols ── */
.sm-footer__heading {
    font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--color-primary-500); margin-bottom: var(--space-4);
    min-height: 1.5em;
}
.sm-footer__links { list-style: none; }
.sm-footer__links li { margin-bottom: 10px; }
.sm-footer__links a { color: var(--text-muted); font-size: var(--font-size-sm); transition: color 150ms ease; }
.sm-footer__links a:hover { color: var(--color-primary-300); }
.sm-footer__links-more a {
    color: var(--color-primary-600) !important; font-size: var(--font-size-xs);
    letter-spacing: 0.04em; margin-top: var(--space-1); display: inline-block;
}
.sm-footer__links-more a:hover { color: var(--color-primary-400) !important; }

/* Trust badge */
.sm-footer__trust {
    display: flex; align-items: center; gap: var(--space-2);
    margin-top: var(--space-5); font-size: 0.7rem;
    color: rgba(232, 224, 208, 0.3); letter-spacing: 0.04em;
}
.sm-footer__trust svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.6; }

/* ── Divider ── */
.sm-footer__divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 169, 110, 0.12) 20%, rgba(201, 169, 110, 0.12) 80%, transparent);
    margin-bottom: var(--space-6);
}

/* ── Bottom ── */
.sm-footer__bottom {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: var(--space-5); margin-top: var(--space-8);
    border-top: 1px solid rgba(201, 169, 110, 0.08);
    flex-wrap: wrap; gap: var(--space-2);
}
.sm-footer__copy { font-size: var(--font-size-xs); color: var(--text-muted); }
.sm-footer__easter-egg {
    font-size: var(--font-size-xs); color: var(--text-muted);
    opacity: 0.3; font-style: italic;
}

.sm-disclaimer { text-align: center; padding: var(--space-4); margin: var(--space-8) 0; }
.sm-disclaimer p {
    display: flex; align-items: center; justify-content: center; gap: var(--space-2);
    font-size: var(--font-size-xs); color: var(--text-muted); flex-wrap: wrap;
}
.sm-disclaimer svg { width: 16px; height: 16px; flex-shrink: 0; }
.sm-disclaimer a { color: var(--text-muted); text-decoration: underline; transition: color 150ms ease; }
.sm-disclaimer a:hover { color: var(--color-primary-400); }

.sm-404__icon { font-size: 4rem; margin-bottom: var(--space-6); opacity: 0.4; }
.sm-empty { text-align: center; color: var(--text-muted); padding: var(--space-20) 0; }

/* ── COSMIC LOADER ── */
.sm-cosmic-loader { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-12); }
.sm-cosmic-loader__orbit { position: relative; width: 60px; height: 60px; animation: spin 3s linear infinite; will-change: transform; }
.sm-cosmic-loader__planet {
    position: absolute; width: 8px; height: 8px;
    background: var(--color-primary-400); border-radius: 50%;
    box-shadow: 0 0 10px var(--color-primary-500);
}
.sm-cosmic-loader__planet:nth-child(1) { top: 0; left: 50%; transform: translateX(-50%); }
.sm-cosmic-loader__planet:nth-child(2) { bottom: 10%; left: 10%; }
.sm-cosmic-loader__planet:nth-child(3) { bottom: 10%; right: 10%; }
.sm-cosmic-loader__text { font-size: var(--font-size-sm); color: var(--text-muted); animation: gentlePulse 2s infinite; }

.sm-tools-listing__hero { padding-bottom: var(--space-8); }
.sm-tools-listing__group-title {
    font-family: var(--font-display); font-size: var(--font-size-lg);
    color: var(--color-primary-500); text-transform: uppercase;
    letter-spacing: 0.1em; margin-bottom: var(--space-8); text-align: center;
}

/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */
@media (max-width: 1200px) {
    .sm-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
    .sm-footer__col:nth-child(3) { grid-column: 2; grid-row: 2; }
    .sm-footer__col:nth-child(4) { grid-column: 3; grid-row: 2; }
    .sm-footer__col:nth-child(5) { grid-column: 4; grid-row: 2; }
}
@media (max-width: 1024px) {
    .sm-footer__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
    .sm-footer__col:nth-child(n) { grid-column: auto; grid-row: auto; }
    .sm-footer__col--brand { grid-column: 1 / -1; }
    .sm-vvm { width: 650px; height: 650px; }
    .sm-section { padding: var(--space-12) 0; }
    .sm-hero__grid { max-width: 100%; }
    .sm-tool-cards { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
    .sm-pricing-grid { gap: var(--space-4); }
    .sm-pricing-card--popular { transform: scale(1.03) translateY(-20px); }
    .sm-pricing-card--popular:hover { transform: scale(1.03) translateY(-20px); }
}
@media (max-width: 768px) {
    /* Imperial Scroll Frame — hide on mobile */
    body::before, .sm-footer::after { display: none !important; }
    html::before, html::after { display: none !important; }
    .sm-header__nav, .sm-header__actions { display: none; }
    .sm-header__corner { width: 36px; height: 36px; opacity: 0.28; }
    .sm-header__inner {
        padding: 0 12px;
        display: flex; align-items: center;
        justify-content: space-between;
        width: 100%; box-sizing: border-box;
    }
    .sm-header__logo { gap: 10px; flex: 1; min-width: 0; }
    .sm-header__logo-icon { width: 38px; height: 38px; }
    .sm-header__logo-name { font-size: 26px; padding-bottom: 3px; }
    .sm-header__logo-sub { font-size: 8.5px; }
    .sm-header__logo-line { margin-bottom: 4px; }
    .sm-header__nebula { width: 220px; height: 80px; }
    .sm-header-transition { height: 14px; }
    .sm-header__toggle {
        display: flex; flex-shrink: 0;
        margin-left: 8px;
    }
    /* sm-mobile-menu.active handled globally via visibility/opacity */
    .sm-hero { padding: calc(var(--header-height) + var(--space-10)) 0 var(--space-10); }
    .sm-hero__grid { max-width: 100%; }
    .sm-hero__left { text-align: center; }
    .sm-hero__form { margin: 0 auto var(--space-4); }
    .sm-vvm { width: 400px; height: 400px; opacity: 0.15 !important; }
    .sm-hero__constellation { display: none; }
    .sm-quick-form__row { grid-template-columns: 1fr; }
    .sm-tool-cards { grid-template-columns: repeat(2, 1fr); max-width: 100%; margin: 0 auto var(--space-10); }
    .sm-tool-card__icon::before { top:-12px;right:-12px;bottom:-12px;left:-12px; }
    .sm-tool-card__icon::after { top:-6px;right:-6px;bottom:-6px;left:-6px; }
    .sm-pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; align-items: stretch; }
    .sm-pricing-card--popular { transform: none; }
    .sm-pricing-card--popular:hover { transform: none; }
    .sm-pricing-card__icon::before { top:-10px;right:-10px;bottom:-10px;left:-10px; }
    .sm-pricing-card__icon::after { top:-5px;right:-5px;bottom:-5px;left:-5px; }
    .sm-testimonials { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; }
    /* Blog grid: 2-col on tablet, featured card still spans 2 */
    .sm-blog-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .sm-post-card__title { font-size: 1.0625rem; }
    .sm-post-card__excerpt { font-size: 0.9375rem; }
    .sm-blog-grid .sm-post-card:first-child { grid-column: 1 / -1; }
    .sm-blog-grid .sm-post-card:first-child .sm-post-card__thumb { aspect-ratio: 21/10; }
    .sm-blog-grid .sm-post-card:first-child .sm-post-card__title { font-size: 1.25rem; }
    .sm-footer__grid { grid-template-columns: 1fr 1fr; }
    .sm-footer__col--brand { grid-column: 1 / -1; }
    .sm-footer__col:nth-child(n) { grid-column: auto; grid-row: auto; }
    .sm-footer__bottom { flex-direction: column; align-items: center; text-align: center; }
    .sm-section__title { font-size: var(--font-size-2xl); }
    .sm-section { padding: var(--space-10) 0; }
    .sm-body::after { display: none; } /* Remove grain on mobile for performance */
}
@media (max-width: 480px) {
    .sm-vvm { width: 300px; height: 300px; }
    .sm-hero__title { font-size: var(--font-size-4xl); }
    .sm-tool-cards { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto var(--space-10); }
    .sm-footer__grid { grid-template-columns: 1fr; }
    .sm-footer__col--brand { grid-column: 1; }
    .sm-footer__desc { max-width: 100%; }
    /* Blog: 1-col on small mobile, featured card resets to normal */
    .sm-blog-grid { grid-template-columns: 1fr; gap: 18px; }
    .sm-blog-grid .sm-post-card:first-child { grid-column: 1; }
    .sm-blog-grid .sm-post-card:first-child .sm-post-card__thumb { aspect-ratio: 16/10; }
    .sm-blog-grid .sm-post-card:first-child .sm-post-card__title { font-size: 1.0625rem; }
    .sm-blog-grid .sm-post-card:first-child .sm-post-card__excerpt { font-size: 0.9375rem; }
    .sm-post-card__footer { flex-wrap: wrap; }
    .sm-post-card__body { padding: 16px 16px 20px; }
}

/* ══════════════════════════════════════════════════════════════
   TOOL PAGE — Thần Số Học · DOCTOR STRANGE × HUYỀN HỌC ĐÔNG PHƯƠNG
   Sacred geometry + cosmic portal + ancient mysticism
   ══════════════════════════════════════════════════════════════ */

/* ── Sacred Geometry Animations ── */
@keyframes sacredRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes sacredRotateReverse {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}
@keyframes portalPulse {
    0%, 100% { opacity: 0.15; transform: scale(1); }
    50% { opacity: 0.25; transform: scale(1.02); }
}
@keyframes revealUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes numberGlow {
    0%, 100% { text-shadow: 0 0 8px rgba(201, 169, 110, 0.3); }
    50% { text-shadow: 0 0 20px rgba(201, 169, 110, 0.6), 0 0 40px rgba(201, 169, 110, 0.2); }
}
@keyframes runeFloat {
    0%, 100% { opacity: 0.06; transform: translateY(0) rotate(0deg); }
    50% { opacity: 0.12; transform: translateY(-8px) rotate(3deg); }
}

/* ── Tool Hero — Sacred Portal ── */
.sm-tool-hero {
    padding: var(--space-16) 0 var(--space-12);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.sm-tool-hero::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 169, 110, 0.06) 0%, transparent 70%);
    animation: portalPulse 6s ease-in-out infinite;
    pointer-events: none;
}
.sm-tool-hero__inner {
    max-width: 640px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.sm-tool-hero__icon {
    width: 180px;
    height: 180px;
    margin: 0 auto var(--space-6);
}
.sm-tool-hero__icon svg { width: 100%; height: 100%; }
/* Sacred Astrolabe — multi-ring rotations */
.sm-hero-ring, .sm-hero-orbit { transform-box: view-box; transform-origin: 50% 50%; }
.sm-hero-ring--outer { animation: sacredRotate 50s linear infinite; will-change: transform; }
.sm-hero-ring--mid { animation: sacredRotateReverse 35s linear infinite; }
.sm-hero-ring--inner { animation: sacredRotate 65s linear infinite; }
.sm-hero-orbit--1 { animation: sacredRotate 10s linear infinite; }
.sm-hero-orbit--2 { animation: sacredRotateReverse 16s linear infinite; will-change: transform; }
.sm-hero-center { animation: heroCenterBreathe 4s ease-in-out infinite; }
@keyframes heroCenterBreathe {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}
.sm-tool-hero__title {
    font-family: var(--font-calligraphy);
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-normal);
    background: var(--gradient-gold-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-3);
    letter-spacing: 0.02em;
}
.sm-tool-hero__subtitle {
    color: var(--text-secondary);
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-10);
    font-style: italic;
}

/* ── Results Crown Layout ── */
.sm-tool-hero--results { padding: var(--space-10) 0 var(--space-8); }
.sm-tsh-crown__label {
    font-size: var(--font-size-xs);
    color: var(--gold);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: var(--space-4);
}
.sm-tsh-crown__name {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    letter-spacing: 0.04em;
    margin-bottom: var(--space-6);
    line-height: 1.1;
}
.sm-tool-hero--results .sm-tool-hero__icon {
    width: 200px;
    height: 200px;
    margin-bottom: var(--space-4);
}
.sm-tsh-crown__archetype {
    font-family: var(--font-calligraphy);
    font-size: var(--font-size-xl);
    color: var(--gold);
    margin-bottom: var(--space-8);
    font-style: italic;
}
.sm-tsh-crown__numbers {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}
.sm-tsh-mini-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-5);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    background: rgba(12, 12, 10, 0.4);
    min-width: 80px;
}
.sm-tsh-mini-card__number {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-light);
    background: var(--gradient-gold-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}
.sm-tsh-mini-card--master .sm-tsh-mini-card__number {
    background: var(--gradient-gold-shimmer);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: masterShimmer 3s ease-in-out infinite;
}
.sm-tsh-mini-card__label {
    font-size: 0.6rem;
    color: var(--text-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.sm-tsh-crown__element { margin-bottom: var(--space-2); }

/* ── Tool Form — Glass Portal ── */
.sm-tool-form {
    max-width: 560px;
    margin: 0 auto;
    padding: var(--space-8);
    background: rgba(12, 12, 10, 0.6);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    position: relative;
}
.sm-tool-form::before {
    content: '';
    position: absolute;
    top:-1px;right:-1px;bottom:-1px;left:-1px;
    border-radius: var(--radius-xl);
    padding: 1px;
    background: linear-gradient(135deg, rgba(201, 169, 110, 0.3), transparent 50%, rgba(201, 169, 110, 0.15));
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
    pointer-events: none;
}
.sm-tool-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}
.sm-tool-form__submit { margin-top: var(--space-2); }
.sm-tool-form__note {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-top: var(--space-3);
}

/* ── Alert ── */
.sm-alert { padding: var(--space-4); border-radius: var(--radius-lg); margin-bottom: var(--space-6); }
.sm-alert--error {
    background: rgba(200, 50, 50, 0.12);
    border: 1px solid rgba(200, 50, 50, 0.3);
    color: #f08080;
}

/* ── Result Header — Sacred Portal Reveal ── */
.sm-tsh-result-header {
    text-align: center;
    padding: var(--space-12) 0 var(--space-8);
    position: relative;
}
.sm-tsh-result-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: var(--space-8);
    background: linear-gradient(to bottom, transparent, var(--color-primary-500), transparent);
}
.sm-tsh-result-header__inner {
    max-width: 600px;
    margin: 0 auto;
}
.sm-tsh-result-header__name {
    font-family: var(--font-calligraphy);
    font-size: var(--font-size-4xl);
    background: var(--gradient-gold-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-2);
}
.sm-tsh-result-header__date {
    color: var(--text-secondary);
    font-size: var(--font-size-lg);
    letter-spacing: 0.05em;
}

/* ── Section Divider — Mystical ── */
.sm-tsh-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-6) 0;
    color: var(--color-primary-600);
    font-size: var(--font-size-sm);
    letter-spacing: 0.2em;
}
.sm-tsh-divider::before,
.sm-tsh-divider::after {
    content: '';
    flex: 1;
    max-width: 120px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-primary-600), transparent);
}

/* ── Core Numbers Grid — Sacred Sigil Cards ── */
.sm-tsh-core__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
    max-width: 880px;
    margin: 0 auto;
}
.sm-tsh-number-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-6) var(--space-4);
    background: rgba(12, 12, 10, 0.6);
    border: 1px solid rgba(201, 169, 110, 0.15);
    border-radius: var(--radius-xl);
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: border-color 400ms ease, transform 400ms ease, box-shadow 400ms ease;
}
.sm-tsh-number-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg, transparent, rgba(201, 169, 110, 0.08), transparent, rgba(201, 169, 110, 0.04), transparent);
    animation: sacredRotate 20s linear infinite;
    pointer-events: none;
  will-change: transform;
}
.sm-tsh-number-card::after {
    content: '';
    position: absolute;
    top:1px;right:1px;bottom:1px;left:1px;
    border-radius: calc(var(--radius-xl) - 1px);
    background: rgba(12, 12, 10, 0.9);
    z-index: 0;
}
.sm-tsh-number-card > * { position: relative; z-index: 1; }
.sm-tsh-number-card:hover {
    border-color: rgba(201, 169, 110, 0.4);
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(201, 169, 110, 0.1), 0 0 0 1px rgba(201, 169, 110, 0.2);
}
.sm-tsh-number-card__icon {
    font-size: 1.5rem;
    margin-bottom: var(--space-3);
    filter: drop-shadow(0 0 4px rgba(201, 169, 110, 0.3));
}
.sm-tsh-number-card__value {
    font-family: var(--font-display);
    font-size: var(--font-size-4xl);
    color: var(--color-primary-400);
    line-height: 1;
    margin-bottom: var(--space-2);
    animation: numberGlow 4s ease-in-out infinite;
}
.sm-tsh-number-card__label {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ── Detail Card — Mystical Glass Scroll ── */
.sm-tsh-detail__card {
    background: rgba(12, 12, 10, 0.5);
    border: 1px solid rgba(201, 169, 110, 0.12);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    margin-bottom: var(--space-6);
    position: relative;
    overflow: hidden;
    transition: border-color 400ms ease, box-shadow 400ms ease;
}
.sm-tsh-detail__card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(to bottom, var(--color-primary-400), var(--color-primary-700), transparent);
    border-radius: 3px 0 0 3px;
}
.sm-tsh-detail__card:hover {
    border-color: rgba(201, 169, 110, 0.25);
    box-shadow: 0 4px 24px rgba(201, 169, 110, 0.06);
}
.sm-tsh-detail__header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid rgba(201, 169, 110, 0.08);
}
.sm-tsh-detail__icon {
    font-size: 2.5rem;
    filter: drop-shadow(0 0 6px rgba(201, 169, 110, 0.3));
}
.sm-tsh-detail__title {
    font-family: var(--font-calligraphy);
    font-size: var(--font-size-2xl);
    color: var(--text-primary);
    letter-spacing: 0.01em;
}
.sm-tsh-detail__number {
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    color: var(--color-primary-400);
    animation: numberGlow 4s ease-in-out infinite;
}
.sm-tsh-detail__body p {
    color: var(--text-secondary);
    line-height: 1.8;
    font-size: var(--font-size-base);
}
.sm-tsh-detail__body p + p { margin-top: var(--space-3); }
.sm-tsh-detail__interp-title {
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    color: var(--color-primary-400);
    margin-bottom: var(--space-3);
    font-weight: var(--font-weight-semibold);
}
.sm-tsh-detail__strengths,
.sm-tsh-detail__weaknesses,
.sm-tsh-detail__career,
.sm-tsh-detail__love,
.sm-tsh-detail__life-stage,
.sm-tsh-detail__advice {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(201, 169, 110, 0.06);
}
.sm-tsh-detail__strengths h4,
.sm-tsh-detail__weaknesses h4,
.sm-tsh-detail__career h4,
.sm-tsh-detail__love h4,
.sm-tsh-detail__life-stage h4,
.sm-tsh-detail__advice h4 {
    font-family: var(--font-display);
    font-size: var(--font-size-base);
    color: var(--text-primary);
    margin-bottom: var(--space-3);
    font-weight: var(--font-weight-medium);
}
.sm-tsh-detail__strengths ul,
.sm-tsh-detail__weaknesses ul {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--space-2);
}
.sm-tsh-detail__strengths li,
.sm-tsh-detail__weaknesses li {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.6;
}
.sm-tsh-detail__strengths li {
    background: rgba(76, 175, 80, 0.06);
    border-left: 3px solid rgba(76, 175, 80, 0.4);
}
.sm-tsh-detail__weaknesses li {
    background: rgba(255, 152, 0, 0.06);
    border-left: 3px solid rgba(255, 152, 0, 0.4);
}
.sm-tsh-detail__advice {
    background: rgba(201, 169, 110, 0.04);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    border-top: none;
    border-left: 3px solid var(--color-primary-500);
}
.sm-tsh-detail__advice p {
    color: var(--text-secondary);
    font-style: italic;
    line-height: 1.8;
}

/* ── Strength & Weakness ── */
.sm-tsh-sw__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
}
.sm-tsh-sw__card {
    padding: var(--space-6);
    border-radius: var(--radius-xl);
}
.sm-tsh-sw__card h3 {
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-3);
}
.sm-tsh-sw__card p { color: var(--text-secondary); line-height: 1.8; }
.sm-tsh-sw__card--strong {
    background: rgba(76, 175, 80, 0.06);
    border: 1px solid rgba(76, 175, 80, 0.15);
}
.sm-tsh-sw__card--strong h3 { color: #81c784; }
.sm-tsh-sw__card--weak {
    background: rgba(255, 152, 0, 0.06);
    border: 1px solid rgba(255, 152, 0, 0.15);
}
.sm-tsh-sw__card--weak h3 { color: #ffb74d; }

/* ── Lo Shu Grid ── */
/* ── Lo Shu Grid — Ancient Lạc Thư ── */
.sm-tsh-loshu {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-width: 380px;
    margin: var(--space-8) auto;
    padding: var(--space-6);
    background: rgba(12, 12, 10, 0.5);
    border: 1px solid rgba(201, 169, 110, 0.15);
    border-radius: var(--radius-xl);
    position: relative;
}
.sm-tsh-loshu::before {
    content: '洛書';
    position: absolute;
    top: var(--space-3);
    right: var(--space-4);
    font-size: var(--font-size-xs);
    color: rgba(201, 169, 110, 0.2);
    letter-spacing: 0.1em;
}
.sm-tsh-loshu__row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
}
.sm-tsh-loshu__cell {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    position: relative;
    transition: all 300ms ease;
}
.sm-tsh-loshu__cell--active {
    background: rgba(201, 169, 110, 0.08);
    border: 1px solid rgba(201, 169, 110, 0.3);
    box-shadow: inset 0 0 20px rgba(201, 169, 110, 0.05);
}
.sm-tsh-loshu__cell--active:hover {
    background: rgba(201, 169, 110, 0.12);
    box-shadow: 0 0 16px rgba(201, 169, 110, 0.1), inset 0 0 20px rgba(201, 169, 110, 0.08);
}
.sm-tsh-loshu__cell--empty {
    background: rgba(255, 255, 255, 0.015);
    border: 1px dashed rgba(255, 255, 255, 0.06);
}
.sm-tsh-loshu__num {
    font-family: var(--font-display);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    position: absolute;
    top: 6px;
    left: 8px;
    opacity: 0.4;
}
.sm-tsh-loshu__count {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    color: var(--color-primary-400);
    letter-spacing: 0.15em;
    text-shadow: 0 0 8px rgba(201, 169, 110, 0.2);
}
.sm-tsh-loshu__cell--empty .sm-tsh-loshu__count { color: transparent; }

/* ── Lo Shu Arrows ── */
.sm-tsh-arrows { margin-top: var(--space-6); }
.sm-tsh-arrows h3 {
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    color: var(--text-primary);
    margin-bottom: var(--space-3);
}
.sm-tsh-arrow {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
}
.sm-tsh-arrow--strong {
    background: rgba(76, 175, 80, 0.06);
    border-left: 3px solid rgba(76, 175, 80, 0.4);
}
.sm-tsh-arrow--weak {
    background: rgba(255, 152, 0, 0.06);
    border-left: 3px solid rgba(255, 152, 0, 0.4);
}
.sm-tsh-arrow__name { font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.sm-tsh-arrow__nums { color: var(--text-muted); font-size: var(--font-size-sm); margin-left: var(--space-2); }
.sm-tsh-arrow__desc { color: var(--text-secondary); margin-top: var(--space-1); font-size: var(--font-size-sm); }

/* ── Year Cycle Track ── */
.sm-tsh-cycle__track {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    padding: var(--space-4) 0;
    scroll-snap-type: x mandatory;
}
.sm-tsh-cycle__track::-webkit-scrollbar { height: 4px; }
.sm-tsh-cycle__track::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); border-radius: 2px; }
.sm-tsh-cycle__track::-webkit-scrollbar-thumb { background: rgba(201,169,110,0.2); border-radius: 2px; }
.sm-tsh-cycle__year {
    flex: 0 0 auto;
    min-width: 100px;
    padding: var(--space-4) var(--space-3);
    background: rgba(201, 169, 110, 0.03);
    border: 1px solid rgba(201, 169, 110, 0.08);
    border-radius: var(--radius-lg);
    text-align: center;
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    transition: border-color 300ms ease, background 300ms ease;
}
.sm-tsh-cycle__year--current {
    background: rgba(201, 169, 110, 0.1);
    border-color: rgba(201, 169, 110, 0.4);
    box-shadow: 0 0 20px rgba(201, 169, 110, 0.1);
}
.sm-tsh-cycle__yr { font-size: var(--font-size-sm); color: var(--text-muted); }
.sm-tsh-cycle__num {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    color: var(--color-primary-400);
}
.sm-tsh-cycle__age { font-size: var(--font-size-xs); color: var(--text-muted); }
.sm-tsh-cycle__title { font-size: var(--font-size-xs); color: var(--text-secondary); }

/* ── Personality Groups Bars ── */
.sm-tsh-groups__bars { max-width: 600px; margin: 0 auto; }
.sm-tsh-bar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.sm-tsh-bar__label { display: flex; align-items: center; gap: var(--space-2); min-width: 200px; }
.sm-tsh-bar__num {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(201, 169, 110, 0.1);
    border-radius: 50%;
    font-size: var(--font-size-xs);
    color: var(--color-primary-400);
    font-weight: var(--font-weight-semibold);
}
.sm-tsh-bar__name { font-size: var(--font-size-sm); color: var(--text-secondary); }
.sm-tsh-bar__track {
    height: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    overflow: hidden;
}
.sm-tsh-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, #c9a96e, #e0c88f);
    border-radius: 3px;
    transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sm-tsh-bar__pct { font-size: var(--font-size-sm); color: var(--text-muted); min-width: 36px; text-align: right; }

/* ── Career Holland Grid ── */
.sm-tsh-career__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    max-width: 700px;
    margin: 0 auto;
}
.sm-tsh-career__item {
    padding: var(--space-4);
    background: rgba(201, 169, 110, 0.03);
    border: 1px solid rgba(201, 169, 110, 0.08);
    border-radius: var(--radius-lg);
}
.sm-tsh-career__code {
    display: inline-block;
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    color: var(--color-primary-400);
    margin-bottom: var(--space-1);
}
.sm-tsh-career__name {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}


/* ── Result Header Inner ── */
.sm-tsh-result-header__inner {
    max-width: 600px;
    margin: 0 auto;
}

/* ── Share Section ── */
.sm-tsh-share .sm-share {
    justify-content: center;
}
/* Share brand colors removed — unified gold tone */
.sm-tsh-share__cta {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    margin-top: var(--space-3);
}

/* ── Tool Section Titles — Mystical Treatment ── */
.sm-tsh-detail .sm-section__title,
.sm-tsh-core .sm-section__title,
.sm-tsh-chart .sm-section__title,
.sm-tsh-cycle .sm-section__title,
.sm-tsh-groups .sm-section__title,
.sm-tsh-career .sm-section__title,
.sm-tsh-sw .sm-section__title {
    position: relative;
    display: inline-block;
    width: 100%;
}
.sm-tsh-detail .sm-section__title::after,
.sm-tsh-core .sm-section__title::after,
.sm-tsh-chart .sm-section__title::after {
    content: '';
    display: block;
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, var(--color-primary-500), transparent);
    margin: var(--space-3) auto 0;
}

/* ── Scroll Reveal — Mystical Entrance ── */
.sm-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.sm-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.sm-reveal--delay-1 { transition-delay: 100ms; }
.sm-reveal--delay-2 { transition-delay: 200ms; }
.sm-reveal--delay-3 { transition-delay: 300ms; }
.sm-reveal--delay-4 { transition-delay: 400ms; }

/* Staggered children reveal */
.sm-reveal-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.sm-reveal-stagger.is-visible > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 50ms; }
.sm-reveal-stagger.is-visible > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 100ms; }
.sm-reveal-stagger.is-visible > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 150ms; }
.sm-reveal-stagger.is-visible > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 200ms; }
.sm-reveal-stagger.is-visible > *:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 250ms; }
.sm-reveal-stagger.is-visible > *:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 300ms; }
.sm-reveal-stagger.is-visible > *:nth-child(7) { opacity: 1; transform: translateY(0); transition-delay: 350ms; }
.sm-reveal-stagger.is-visible > *:nth-child(8) { opacity: 1; transform: translateY(0); transition-delay: 400ms; }

/* ── Sacred Geometry Decoration — Floating Runes ── */
.sm-sacred-rune {
    position: absolute;
    pointer-events: none;
    color: rgba(201, 169, 110, 0.06);
    font-size: 2rem;
    animation: runeFloat 8s ease-in-out infinite;
}
.sm-sacred-rune:nth-child(2) { animation-delay: 2s; }
.sm-sacred-rune:nth-child(3) { animation-delay: 4s; }

/* ═══════════════════════════════════════════════════════════
   CROWN SYSTEM v4.0 — Sacred Numerology Redesign
   SVG icons, master numbers, energy colors, animated reveals
   ═══════════════════════════════════════════════════════════ */

/* ── SVG Icon System — Draw-in Animation ── */
@keyframes svgDrawIn {
    from { stroke-dashoffset: 200; opacity: 0.2; }
    to   { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes iconGlowPulse {
    0%, 100% { opacity: .6; }
    50% { opacity: 1; }
}

.sm-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary-400);
    line-height: 0;
}
.sm-icon svg {
    color: inherit;
}
.sm-icon svg path,
.sm-icon svg circle,
.sm-icon svg line,
.sm-icon svg polyline,
.sm-icon svg polygon,
.sm-icon svg ellipse,
.sm-icon svg rect {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    transition: stroke-dashoffset 0s;
}

/* Trigger draw-in when parent section becomes visible */
.is-visible .sm-icon svg path,
.is-visible .sm-icon svg circle,
.is-visible .sm-icon svg line,
.is-visible .sm-icon svg polyline,
.is-visible .sm-icon svg polygon,
.is-visible .sm-icon svg ellipse,
.is-visible .sm-icon svg rect {
    animation: svgDrawIn 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.is-visible .sm-icon svg *:nth-child(2) { animation-delay: 0.1s; }
.is-visible .sm-icon svg *:nth-child(3) { animation-delay: 0.2s; }
.is-visible .sm-icon svg *:nth-child(4) { animation-delay: 0.25s; }
.is-visible .sm-icon svg *:nth-child(5) { animation-delay: 0.3s; }
.is-visible .sm-icon svg *:nth-child(6) { animation-delay: 0.35s; }
.is-visible .sm-icon svg *:nth-child(7) { animation-delay: 0.4s; }
.is-visible .sm-icon svg *:nth-child(8) { animation-delay: 0.45s; }

/* Gentle glow after draw completes */
.is-visible .sm-icon svg {
    will-change: opacity;
    filter: drop-shadow(0 0 4px rgba(201, 169, 110, 0.3));
    animation: iconGlowPulse 4s ease-in-out 1.5s infinite;
}

/* Icon in number cards */
.sm-tsh-number-card__icon {
    font-size: unset;
    filter: none;
}
.sm-tsh-number-card__icon .sm-icon {
    color: var(--color-primary-400);
    margin-bottom: var(--space-2);
}

/* Icon in detail cards */
.sm-tsh-detail__icon {
    font-size: unset;
    filter: none;
}
.sm-tsh-detail__icon .sm-icon {
    color: var(--color-primary-400);
}

/* Hover re-trigger: reset and replay on card hover */
.sm-tsh-number-card:hover .sm-icon svg path,
.sm-tsh-number-card:hover .sm-icon svg circle,
.sm-tsh-number-card:hover .sm-icon svg line {
    animation: svgDrawIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ── Updated Divider — SVG Ornamental ── */
.sm-tsh-divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-8) 0;
    color: var(--color-primary-600);
}
.sm-tsh-divider::before,
.sm-tsh-divider::after {
    content: none; /* Remove old pseudo-element lines */
}
.sm-tsh-divider__svg {
    width: 100%;
    max-width: 400px;
    height: 40px;
    color: var(--color-primary-500);
    opacity: 0.5;
}
/* SVG divider draw-in on reveal */
.sm-tsh-divider__svg line,
.sm-tsh-divider__svg polygon,
.sm-tsh-divider__svg circle {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
}
.sm-tsh-divider.is-visible .sm-tsh-divider__svg line,
.sm-tsh-divider.is-visible .sm-tsh-divider__svg polygon,
.sm-tsh-divider.is-visible .sm-tsh-divider__svg circle {
    animation: svgDrawIn 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.sm-tsh-divider.is-visible .sm-tsh-divider__svg *:nth-child(2) { animation-delay: 0.3s; }
.sm-tsh-divider.is-visible .sm-tsh-divider__svg *:nth-child(3) { animation-delay: 0.5s; }
.sm-tsh-divider.is-visible .sm-tsh-divider__svg *:nth-child(4) { animation-delay: 0.7s; }
.sm-tsh-divider__text {
    font-size: var(--font-size-xs);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-primary-600);
    opacity: 0.6;
}

/* ── Master Number Treatment (11, 22, 33) ── */
@keyframes masterShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
@keyframes masterAuraPulse {
    0%, 100% { opacity: 0.2; box-shadow: 0 0 0 2px rgba(244, 208, 63, 0.15); }
    50% { opacity: 0.5; box-shadow: 0 0 0 4px rgba(244, 208, 63, 0.25), 0 0 20px rgba(244, 208, 63, 0.1); }
}
.sm-tsh-number-card[data-master="true"] {
    border-color: rgba(244, 208, 63, 0.3);
    animation: masterAuraPulse 3s ease-in-out infinite;
}
.sm-tsh-number-card[data-master="true"] .sm-tsh-number-card__value {
    background: linear-gradient(135deg, #fff8dc 0%, #f4d03f 30%, #c9a96e 60%, #f4d03f 90%, #fff8dc 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: masterShimmer 4s ease-in-out infinite;
    text-shadow: none;
}
.sm-tsh-number-card[data-master="true"] .sm-icon {
    color: #f4d03f;
}

/* ── Hero Number Reveal Cascade ── */
/* Cards stagger in (existing), then icons draw, then numbers blur-to-clear */
@keyframes numberBlurReveal {
    0% { filter: blur(8px); opacity: 0; transform: scale(0.8); }
    60% { filter: blur(2px); opacity: 0.7; transform: scale(1.05); }
    100% { filter: blur(0); opacity: 1; transform: scale(1); }
}
@keyframes labelFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.sm-reveal-stagger.is-visible .sm-tsh-number-card__value {
    animation: numberBlurReveal 800ms cubic-bezier(0.16, 1, 0.3, 1) forwards,
               numberGlow 4s ease-in-out 1.2s infinite;
}
.sm-reveal-stagger.is-visible .sm-tsh-number-card__label {
    animation: labelFadeIn 600ms ease-out 0.8s both;
}
/* Stagger the blur reveal per card */
.sm-reveal-stagger.is-visible > *:nth-child(1) .sm-tsh-number-card__value { animation-delay: 0.4s; }
.sm-reveal-stagger.is-visible > *:nth-child(2) .sm-tsh-number-card__value { animation-delay: 0.5s; }
.sm-reveal-stagger.is-visible > *:nth-child(3) .sm-tsh-number-card__value { animation-delay: 0.6s; }
.sm-reveal-stagger.is-visible > *:nth-child(4) .sm-tsh-number-card__value { animation-delay: 0.7s; }
.sm-reveal-stagger.is-visible > *:nth-child(5) .sm-tsh-number-card__value { animation-delay: 0.8s; }
.sm-reveal-stagger.is-visible > *:nth-child(6) .sm-tsh-number-card__value { animation-delay: 0.9s; }
.sm-reveal-stagger.is-visible > *:nth-child(7) .sm-tsh-number-card__value { animation-delay: 1.0s; }
.sm-reveal-stagger.is-visible > *:nth-child(8) .sm-tsh-number-card__value { animation-delay: 1.1s; }

/* ── Element Badge — Ngu Hanh Energy Colors ── */
.sm-tsh-element-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.04em;
    border: 1px solid;
}
.sm-tsh-element-badge--kim {
    color: #c9a96e;
    border-color: rgba(201, 169, 110, 0.4);
    background: rgba(201, 169, 110, 0.08);
}
.sm-tsh-element-badge--moc {
    color: #66bb6a;
    border-color: rgba(76, 175, 80, 0.4);
    background: rgba(76, 175, 80, 0.08);
}
.sm-tsh-element-badge--thuy {
    color: #42a5f5;
    border-color: rgba(66, 165, 245, 0.4);
    background: rgba(66, 165, 245, 0.08);
}
.sm-tsh-element-badge--hoa {
    color: #ef5350;
    border-color: rgba(239, 83, 80, 0.4);
    background: rgba(239, 83, 80, 0.08);
}
.sm-tsh-element-badge--tho {
    color: #ffa726;
    border-color: rgba(255, 167, 38, 0.4);
    background: rgba(255, 167, 38, 0.08);
}

/* Element energy tint on result header glow */
[data-element="kim"] .sm-tsh-result-header__name { text-shadow: 0 0 40px rgba(201, 169, 110, 0.15); }
[data-element="moc"] .sm-tsh-result-header__name { text-shadow: 0 0 40px rgba(76, 175, 80, 0.12); }
[data-element="thuy"] .sm-tsh-result-header__name { text-shadow: 0 0 40px rgba(66, 165, 245, 0.12); }
[data-element="hoa"] .sm-tsh-result-header__name { text-shadow: 0 0 40px rgba(239, 83, 80, 0.12); }
[data-element="tho"] .sm-tsh-result-header__name { text-shadow: 0 0 40px rgba(255, 167, 38, 0.12); }

/* ── Year Cycle Enhancements — Past / Current / Future ── */
@keyframes currentYearPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}
.sm-tsh-cycle__year--past {
    opacity: 0.5;
    border-style: solid;
}
.sm-tsh-cycle__year--current {
    transform: scale(1.08);
    z-index: 2;
    position: relative;
}
.sm-tsh-cycle__year--current::after {
    content: '';
    position: absolute; top:0;right:0;bottom:0;left:0;
    border-radius: inherit;
    box-shadow: 0 0 30px rgba(201, 169, 110, 0.2), 0 0 60px rgba(201, 169, 110, 0.08);
    pointer-events: none;
    opacity: 0.5;
    animation: currentYearPulse 3s ease-in-out infinite;
}
.sm-tsh-cycle__year--future {
    opacity: 0.7;
    border-style: dashed;
}
.sm-tsh-cycle__marker {
    display: inline-block;
    font-size: 0.625rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-primary-400);
    background: rgba(201, 169, 110, 0.1);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    margin-top: var(--space-1);
    animation: gentlePulse 2s ease-in-out infinite;
}

/* ── Animated Bar Fills — Grow on Scroll Reveal ── */
.sm-tsh-bar__fill {
    width: 0;
    transition: width 800ms cubic-bezier(0.4, 0, 0.2, 1);
}
.is-visible .sm-tsh-bar__fill {
    width: var(--bar-width, 0%);
}

/* ── Lo Shu Active Cell Breathe ── */
@keyframes cellBreathe {
    0%, 100% { box-shadow: inset 0 0 20px rgba(201, 169, 110, 0.05); }
    50% { box-shadow: inset 0 0 24px rgba(201, 169, 110, 0.1), 0 0 8px rgba(201, 169, 110, 0.06); }
}
.sm-tsh-loshu__cell--active {
    animation: cellBreathe 4s ease-in-out infinite;
}
/* High energy cells (count > 2) get stronger glow */
.sm-tsh-loshu__cell[data-count="3"],
.sm-tsh-loshu__cell[data-count="4"],
.sm-tsh-loshu__cell[data-count="5"] {
    border-color: rgba(201, 169, 110, 0.5);
    background: rgba(201, 169, 110, 0.12);
}
.sm-tsh-loshu__cell[data-count="3"] .sm-tsh-loshu__count,
.sm-tsh-loshu__cell[data-count="4"] .sm-tsh-loshu__count,
.sm-tsh-loshu__cell[data-count="5"] .sm-tsh-loshu__count {
    text-shadow: 0 0 12px rgba(201, 169, 110, 0.4);
}

/* ── Lo Shu SVG Arrow Overlay ── */
.sm-tsh-loshu {
    position: relative;
}
.sm-tsh-loshu__arrows-svg {
    position: absolute;
    /* Match the padding of .sm-tsh-loshu to overlay exactly on the grid cells */
    top: var(--space-6);
    left: var(--space-6);
    width: calc(100% - var(--space-6) * 2);
    height: calc(100% - var(--space-6) * 2);
    pointer-events: none;
    z-index: 2;
}
.sm-tsh-loshu__arrows-svg line {
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    opacity: 0.5;
}
.is-visible .sm-tsh-loshu__arrows-svg line {
    animation: svgDrawIn 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.is-visible .sm-tsh-loshu__arrows-svg line:nth-child(2) { animation-delay: 0.3s; }
.is-visible .sm-tsh-loshu__arrows-svg line:nth-child(3) { animation-delay: 0.6s; }
.is-visible .sm-tsh-loshu__arrows-svg line:nth-child(4) { animation-delay: 0.9s; }
.sm-tsh-loshu__arrows-svg .arrow-strong { stroke: #66bb6a; }
.sm-tsh-loshu__arrows-svg .arrow-weak { stroke: #ffa726; stroke-dasharray: 6 4; }


/* ── Strength/Weakness Tag Pills (override bullet list) ── */
.sm-tsh-detail__strengths ul,
.sm-tsh-detail__weaknesses ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.sm-tsh-detail__strengths li,
.sm-tsh-detail__weaknesses li {
    border-left: none;
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-4);
    font-size: var(--font-size-sm);
    white-space: nowrap;
}
.sm-tsh-detail__strengths li {
    background: rgba(76, 175, 80, 0.08);
    border: 1px solid rgba(76, 175, 80, 0.2);
    color: #81c784;
}
.sm-tsh-detail__weaknesses li {
    background: rgba(255, 152, 0, 0.08);
    border: 1px solid rgba(255, 152, 0, 0.2);
    color: #ffb74d;
}

/* ── Section Title Enhancement ── */
.sm-section__title {
    font-family: var(--font-calligraphy);
    letter-spacing: 0.06em;
}

/* ── Detail Card Watermark Number ── */
.sm-tsh-detail__card {
    position: relative;
}
.sm-tsh-detail__number {
    position: relative;
}

/* ══════════════════════════════════════════
   RESPONSIVE — Crown System
   ══════════════════════════════════════════ */

/* ── Tool Page Responsive ── */
@media (max-width: 768px) {
    .sm-tool-form { padding: var(--space-5); }
    .sm-tool-form__row { grid-template-columns: 1fr; }
    .sm-tsh-core__grid { grid-template-columns: repeat(2, 1fr); }
    .sm-tsh-sw__grid { grid-template-columns: 1fr; }
    .sm-tsh-career__grid { grid-template-columns: repeat(2, 1fr); }
    .sm-tsh-bar__label { min-width: 140px; }
    .sm-tool-hero__icon { width: 140px; height: 140px; }
    .sm-tool-hero--results .sm-tool-hero__icon { width: 160px; height: 160px; }
    .sm-tool-hero__title { font-size: var(--font-size-3xl); }
    .sm-tool-hero { padding: var(--space-10) 0 var(--space-8); }
    .sm-tsh-mini-card { padding: var(--space-2) var(--space-4); min-width: 70px; }
    .sm-tsh-detail__card { padding: var(--space-5); }
    .sm-tsh-loshu { padding: var(--space-4); }

    /* Crown: reduce animation distances on mobile */
    .sm-reveal { transform: translateY(20px); }
    .sm-reveal-stagger > * { transform: translateY(12px); }

    /* Crown: tag pills allow wrap on mobile */
    .sm-tsh-detail__strengths li,
    .sm-tsh-detail__weaknesses li {
        white-space: normal;
    }

    /* Crown: divider scales */
    .sm-tsh-divider__svg { max-width: 280px; }

    /* Crown: cycle year cards slightly smaller */
    .sm-tsh-cycle__year { min-width: 88px; padding: var(--space-3) var(--space-2); }
    .sm-tsh-cycle__year--current { transform: scale(1.05); }
}
@media (max-width: 480px) {
    .sm-tsh-core__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
    .sm-tsh-career__grid { grid-template-columns: 1fr; }
    .sm-tsh-bar__label { min-width: 100px; }
    .sm-tsh-bar__name { font-size: var(--font-size-xs); }
    .sm-tool-hero__icon { width: 120px; height: 120px; }
    .sm-tool-hero--results .sm-tool-hero__icon { width: 140px; height: 140px; }
    .sm-tool-hero__title { font-size: var(--font-size-2xl); }
    .sm-tsh-mini-card { padding: var(--space-2) var(--space-3); min-width: 64px; }
    .sm-tsh-mini-card__number { font-size: var(--font-size-xl); }
    .sm-tsh-number-card { padding: var(--space-4) var(--space-3); }
    .sm-tsh-number-card__value { font-size: var(--font-size-3xl); }

    /* Crown: smaller icons on mobile */
    .sm-tsh-number-card__icon .sm-icon svg { width: 24px; height: 24px; }
    .sm-tsh-divider__svg { max-width: 200px; height: 30px; }

    /* Crown: element badge compact */
    .sm-tsh-element-badge { font-size: var(--font-size-xs); padding: 2px var(--space-2); }
}
/* ── Accessibility: Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    .sm-hero-ring, .sm-hero-orbit, .sm-hero-center,
    .sm-tsh-number-card::before { animation: none !important; }
    .sm-reveal, .sm-reveal-stagger > * { transition: none !important; transform: none !important; opacity: 1 !important; }
}

/* ── Entrance fallback: auto-reveal if JS observer fails ── */
@keyframes smEntranceFallback { to { opacity: 1; transform: none; } }
[class*="-entrance"]:not(.is-visible) {
  animation: smEntranceFallback 0s 2.5s forwards;
}

/* ── Accessibility: Screen-reader only ── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ═══════════════════════════════════════
   FEEDBACK FAB + MODAL — "Thần Linh Đang Nghe"
   ═══════════════════════════════════════ */

/* ── FAB: Desktop = edge tab right · Mobile = circle bottom-left ── */
.smfb-fab {
  position: fixed; z-index: 999988; cursor: pointer;
  display: flex; align-items: center; gap: 0;
  -webkit-tap-highlight-color: transparent;
}

/* Desktop: vertical edge tab, right side — FIXED, no animation */
@media (min-width: 769px) {
  .smfb-fab {
    right: max(12px, calc(50% - 650px)); top: 42%; transform: translateY(-50%);
    writing-mode: vertical-rl; text-orientation: mixed;
    background: linear-gradient(135deg, #1a1610 0%, #0c0c0a 100%);
    border: 1px solid rgba(201,169,110,.35);
    border-radius: 6px;
    padding: 16px 9px;
    box-shadow: 0 0 20px rgba(201,169,110,.1);
  }
  .smfb-fab:hover {
    border-color: rgba(201,169,110,.7);
    box-shadow: 0 0 30px rgba(201,169,110,.25);
  }
  .smfb-fab::after { display: none; }
  .smfb-fab--burst, .smfb-fab--burst::before { animation: none; }
  .smfb-fab__glow {
    display: none;
  }
  .smfb-fab__icon {
    width: 20px; height: 20px; color: #c9a96e;
    margin-bottom: 8px;
  }
  .smfb-fab__icon svg { width: 100%; height: 100%; }
  .smfb-fab__label {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 13px; font-weight: 500; letter-spacing: 1.5px;
    color: #c9a96e; text-transform: uppercase;
  }
}

/* Mobile: pill FAB bottom-left — icon + "Báo lỗi" label always visible */
@media (max-width: 768px) {
  .smfb-fab {
    transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, border-color .25s ease;
    left: 16px; bottom: 107px;
    height: 40px; padding: 0 14px 0 10px; gap: 6px;
    border-radius: 20px;
    background: linear-gradient(135deg, #1a1815 0%, #0c0b09 100%);
    border: 1.5px solid rgba(201,169,110,.55);
    justify-content: center;
    box-shadow: 0 4px 20px rgba(201,169,110,.25),
                0 0 30px rgba(201,169,110,.08),
                inset 0 0 12px rgba(201,169,110,.05);
  }
  .smfb-fab:active { transform: scale(.95); }
  .smfb-fab__icon {
    width: 18px; height: 18px; color: #c9a96e; flex-shrink: 0;
    filter: drop-shadow(0 0 4px rgba(201,169,110,.3));
  }
  .smfb-fab__icon svg { width: 100%; height: 100%; }
  .smfb-fab__label {
    display: block;
    font-family: 'Be Vietnam Pro', sans-serif; font-size: 12px; font-weight: 600;
    color: #c9a96e; white-space: nowrap; letter-spacing: .5px;
  }
  .smfb-fab__glow { display: none; }
}
@media (max-width: 480px) {
  .smfb-fab { bottom: 102px; }
}

/* Hide standalone tooltip (no longer used) */
.smfb-tooltip { display: none; }

/* ── Breathing glow animation ── */
.smfb-fab::after {
  content: ''; position: absolute; top:-6px;right:-6px;bottom:-6px;left:-6px; border-radius: inherit;
  background: radial-gradient(circle, rgba(201,169,110,.15) 0%, transparent 70%);
  animation: smfb-breathe 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes smfb-breathe {
  0%, 100% { opacity: .3; transform: scale(1); }
  50% { opacity: .8; transform: scale(1.08); }
}
/* ── Mobile: attention ring pulse every 8s ── */
@media (max-width: 768px) {
  .smfb-fab::before {
    content: ''; position: absolute; top:0;right:0;bottom:0;left:0; border-radius: 20px;
    border: 2px solid rgba(201,169,110,.6);
    animation: smfb-ring 8s ease-out infinite;
    pointer-events: none;
  }
}
@keyframes smfb-ring {
  0% { transform: scale(1); opacity: .7; }
  15% { transform: scale(1.4); opacity: 0; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* ── Idle particle burst (45s) ── */
.smfb-fab--burst::before {
  content: '✦'; position: absolute;
  font-size: 10px; color: #c9a96e;
  animation: smfb-particle 1.2s ease-out forwards;
  pointer-events: none;
}
@keyframes smfb-particle {
  0% { opacity: 1; transform: translate(0,0) scale(1); }
  100% { opacity: 0; transform: translate(-20px,-30px) scale(0); }
}
.smfb-fab--burst {
  animation: smfb-pulse-burst .6s ease-out;
}
@keyframes smfb-pulse-burst {
  0% { box-shadow: 0 0 0 0 rgba(201,169,110,.5); }
  70% { box-shadow: 0 0 0 16px rgba(201,169,110,0); }
  100% { box-shadow: 0 0 0 0 rgba(201,169,110,0); }
}

/* ── Overlay ── */
.smfb-overlay {
  display: none; position: fixed; top:0;right:0;bottom:0;left:0;
  background: rgba(0,0,0,.65); backdrop-filter: blur(4px);
  z-index: 999993; opacity: 0; transition: opacity .3s;
}
.smfb-overlay.is-open { display: block; opacity: 1; }

/* ── Modal ── */
.smfb-modal {
  display: flex; position: fixed; z-index: 999994;
  background: linear-gradient(170deg, #141210 0%, #0c0c0a 100%);
  border: 1px solid rgba(201,169,110,.3);
  border-radius: 6px;
  box-shadow: 0 20px 60px rgba(0,0,0,.7), 0 0 40px rgba(201,169,110,.08);
  overflow: hidden;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 350ms cubic-bezier(0.34, 1.3, 0.64, 1), opacity 250ms ease, visibility 0ms 350ms;
}
.smfb-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform 350ms cubic-bezier(0.34, 1.3, 0.64, 1), opacity 250ms ease, visibility 0ms 0ms;
}

@media (min-width: 769px) {
  .smfb-modal {
    right: max(12px, calc(50% - 650px)); top: 42%;
    transform: scale(0.3) translateY(-50%);
    transform-origin: right center;
    width: 420px; max-height: 85vh;
  }
  .smfb-modal.is-open {
    transform: scale(1) translateY(-50%);
  }
}
@media (max-width: 768px) {
  .smfb-modal {
    bottom: 0; left: 0; right: 0;
    max-height: 88vh;
    border-radius: 14px 14px 0 0;
    border-bottom: none;
    transform: translateY(100%);
  }
  .smfb-modal.is-open {
    transform: translateY(0);
  }
}

.smfb-modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(201,169,110,.15);
  background: linear-gradient(90deg, rgba(201,169,110,.06), transparent);
}
.smfb-modal__title {
  font-family: 'Lexend Deca', sans-serif;
  font-size: 15px; color: #c9a96e; font-weight: 600;
  letter-spacing: 1px;
}
.smfb-modal__close {
  background: none; border: none; color: #888; font-size: 24px;
  cursor: pointer; padding: 0 4px; line-height: 1;
  transition: color .2s;
}
.smfb-modal__close:hover { color: #c9a96e; }

.smfb-modal__body {
  padding: 16px 20px; overflow-y: auto; flex: 1;
  display: flex; flex-direction: column; gap: 14px;
}

/* Context banner — shows what page user is on */
.smfb-ctx-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 4px;
  background: rgba(201,169,110,.06);
  border: 1px solid rgba(201,169,110,.12);
}
.smfb-ctx-banner__icon { font-size: 16px; flex-shrink: 0; }
.smfb-ctx-banner__text {
  font-size: 12px; color: #c9a96e; font-weight: 500;
  font-family: 'Be Vietnam Pro', sans-serif;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Bug sub-type dropdown */
.smfb-subcat { }
.smfb-subcat__select {
  width: 100%; padding: 8px 12px; border-radius: 4px;
  border: 1px solid rgba(201,169,110,.2);
  background: #0c0c0a; color: #e8e0d0;
  font-size: 13px; font-family: 'Be Vietnam Pro', sans-serif;
  cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23c9a96e' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.smfb-subcat__select:focus { outline: none; border-color: rgba(201,169,110,.5); }

/* Star rating */
.smfb-stars { text-align: center; }
.smfb-stars__label {
  display: block; font-size: 12px; color: #888; margin-bottom: 6px;
  font-family: 'Be Vietnam Pro', sans-serif;
}
.smfb-stars__row { display: flex; justify-content: center; gap: 6px; }
.smfb-star {
  font-size: 28px; cursor: pointer; transition: transform .15s;
  user-select: none; line-height: 1;
}
.smfb-star:hover { transform: scale(1.2); }
.smfb-star--active { transform: scale(1.1); }
@keyframes smfb-shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* Category pills */
.smfb-cats {
  display: flex; gap: 8px;
}
.smfb-cat {
  flex: 1; text-align: center;
  padding: 8px 6px; border-radius: 4px;
  border: 1px solid rgba(201,169,110,.15);
  background: rgba(201,169,110,.03);
  color: #999; font-size: 13px; cursor: pointer;
  transition: all .2s;
  font-family: 'Be Vietnam Pro', sans-serif;
}
.smfb-cat:hover {
  border-color: rgba(201,169,110,.4);
  color: #e8e0d0;
}
.smfb-cat--active {
  border-color: #c9a96e;
  background: rgba(201,169,110,.1);
  color: #c9a96e; font-weight: 500;
}

/* Textarea */
.smfb-textarea {
  width: 100%; border-radius: 4px;
  border: 1px solid rgba(201,169,110,.2);
  background: rgba(201,169,110,.03);
  color: #e8e0d0; font-size: 14px;
  padding: 12px; resize: vertical;
  font-family: 'Be Vietnam Pro', sans-serif;
  transition: border-color .2s;
  box-sizing: border-box;
}
.smfb-textarea::placeholder { color: #666; }
.smfb-textarea:focus {
  outline: none;
  border-color: rgba(201,169,110,.5);
  box-shadow: 0 0 0 2px rgba(201,169,110,.08);
}

/* Context info */
.smfb-context {
  font-size: 11px; color: #666;
  font-family: 'Be Vietnam Pro', sans-serif;
}

/* Footer + Submit */
.smfb-modal__footer {
  padding: 12px 20px 16px;
  border-top: 1px solid rgba(201,169,110,.1);
}
.smfb-submit {
  width: 100%; padding: 12px;
  border: 1px solid #c9a96e;
  background: linear-gradient(135deg, rgba(201,169,110,.15), rgba(201,169,110,.05));
  color: #c9a96e; font-size: 15px; font-weight: 600;
  border-radius: 4px; cursor: pointer;
  font-family: 'Be Vietnam Pro', sans-serif;
  letter-spacing: .5px;
  transition: all .25s;
}
.smfb-submit:hover {
  background: linear-gradient(135deg, rgba(201,169,110,.25), rgba(201,169,110,.1));
  box-shadow: 0 0 20px rgba(201,169,110,.15);
}
.smfb-submit:disabled {
  opacity: .5; cursor: not-allowed;
}

/* Success state */
.smfb-success {
  flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 20px; text-align: center; gap: 16px;
}
.smfb-success__icon {
  font-size: 40px; color: #c9a96e;
  animation: smfb-success-pop .5s cubic-bezier(.175,.885,.32,1.275);
}
@keyframes smfb-success-pop {
  0% { transform: scale(0) rotate(-180deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.smfb-success__text {
  font-size: 16px; color: #e8e0d0; line-height: 1.6;
  font-family: 'Be Vietnam Pro', sans-serif;
}

/* ── Hide FAB on admin & when search is open ── */
body.sm-hsearch-open .smfb-fab,
body.sbh-search-open .smfb-fab { display: none; }

/* ── Address tool: shift FAB up to avoid Aa button ── */
body.smfb-shift-up .smfb-fab { bottom: 134px; }

/* ═══════════════════════════════════════
   MOBILE PERF — kill GPU-expensive props on weak devices
   backdrop-filter → solid bg (visually near-identical on small screens)
   ═══════════════════════════════════════ */
@media (max-width: 768px) {
  .sm-header {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: rgba(14,13,11,0.98);
  }
  .sm-header.is-scrolled {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: rgba(10,9,7,0.99);
  }
  .sm-mobile-menu {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: rgba(12,11,9,0.99);
  }
  .sm-hsearch-overlay {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: rgba(0,0,0,0.92);
  }
  .sm-celestial-bar {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: rgba(12,11,9,0.98);
  }
  .smfb-overlay {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: rgba(0,0,0,0.85);
  }
}

/* ════════════════════════════════════════════════════════════════
   iOS-12 / Safari <14.1 FLEX-GAP FALLBACK
   iPhone 5S (iOS 12) không hỗ trợ `gap` trong flexbox → các hàng dính sát.
   JS thêm class .no-flexgap vào <html> khi browser KHÔNG hỗ trợ flex-gap.
   Chỉ áp cho browser cũ — browser hiện đại không bị ảnh hưởng.
   Dùng margin tương đương đúng giá trị gap gốc. (replace-not-delete: chỉ thêm, không sửa rule cũ)
   ════════════════════════════════════════════════════════════════ */
html.no-flexgap .hh-gender-row > * + *,
html.no-flexgap .hh-huong-row > * + * { margin-left: 12px; }
html.no-flexgap .sm-header__logo > * + * { margin-left: 10px; }
html.no-flexgap .smh-head__title > * + * { margin-left: 10px; }
html.no-flexgap .sm-bc__link > * + * { margin-left: 5px; }
html.no-flexgap .sm-cbar__block > * + * { margin-left: 4px; }
html.no-flexgap .pt-trust-stars-row > * + * { margin-left: 2px; }
html.no-flexgap .sm-share > * + *,
html.no-flexgap .sm-tool-share .sm-share > * + * { margin-left: 14px; }
html.no-flexgap .tc-step > * + *,
html.no-flexgap .tc-use-item > * + *,
html.no-flexgap .tc-faq-q > * + *,
html.no-flexgap .tc-diff-item > * + * { margin-left: 12px; }

/* ═══ FIX 10/08/2026 — iPhone TỰ PHÓNG TO khi bấm vào ô nhập (đo được trên 36/37 tool) ═══
   Safari iOS tự zoom trang khi ô nhập có font-size < 16px, zoom xong KHÔNG tự trả về
   → user bị đẩy lệch khỏi khung, phải tự chụm tay thu nhỏ = trải nghiệm rất tệ trên điện thoại.
   Chỉ nâng cỡ chữ lên đúng ngưỡng 16px trên màn hình cảm ứng, desktop giữ nguyên thẩm mỹ cũ. */
@media (max-width: 900px) {
  .smfb-subcat__select,
  .smfb-textarea,
  .smfb-modal__body input[type="text"],
  .smfb-modal__body input[type="email"],
  .smfb-modal__body textarea,
  .smfb-modal__body select { font-size: 16px !important; }
}

/* ═══ FIX 10/08/2026 — VÙNG CHẠM đường dẫn quá nhỏ (đo được 24px trên 37/37 tool) ═══
   Chuẩn cảm ứng là 44px; link đường dẫn chỉ cao 24px nên ngón tay hay bấm trượt.
   Nới vùng chạm bằng padding dọc — KHÔNG phóng to chữ, nên nhìn y hệt cũ. */
@media (pointer: coarse) {
  /* 12px trên+dưới để chạm mốc 44px chuẩn Apple (10px chỉ ra 39,97px — hụt gang tấc). */
  .sm-bc__link { padding-top: 12px; padding-bottom: 12px; }
  .sm-bc { margin-top: -10px; margin-bottom: -10px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIX 10/08/2026 — DỌN GỌN 6 KHỐI NỔI CHEN NHAU TRÊN ĐIỆN THOẠI
   Founder chốt phương án "dọn gọn": giữ ĐỦ chức năng, không cái nào đè chữ.
   Bằng chứng đo được trước khi sửa (390×844, trang cung-mệnh):
     · thanh lịch âm che 81% dòng "Công Cụ"
     · header dính che 39% chữ nội dung
     · 6 khối nổi cùng hiện một lúc
   Nguyên tắc: KHÔNG xoá khối nào, chỉ đổi cách hiện. Máy tính giữ nguyên 100%.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* (0) DẢI HOA VĂN CHUYỂN TIẾP — dán cứng ở giữa màn hình với NỀN ĐEN ĐỤC,
     nên nó sơn đè cắt ngang chữ đang cuộn qua (nhìn thấy: dòng "từ toạ độ nơi
     sinh. Bản" bị chém đôi ở Bản Đồ Sao). Cho nó trượt đi cùng trang như thanh
     lịch; giữ nguyên hoa văn, chỉ thôi treo. Đồng thời thả cho lớp ánh vàng
     toả xuống thật (đang bị cắt cụt 30px → tạo mép sắc lẹm). */
  .sm-header-transition { position: absolute !important; overflow: visible !important; }

  /* (1) THANH LỊCH ÂM — thôi dán cứng, cho nó trượt đi cùng trang.
     Vẫn thấy đủ khi mới vào trang; cuộn xuống thì nhường chỗ cho nội dung,
     không còn treo lơ lửng đè lên chữ. Chỗ trống đã được giữ sẵn nên
     không gây nhảy khung. */
  .sm-celestial-bar { position: absolute !important; }

  /* (2) CỤM NÚT DƯỚI — đo thật thấy 3 khối ĐANG CHỒNG LÊN NHAU:
     bong bóng chat y688-742 · nút Báo Lỗi y734-778 · cụm cỡ chữ y772-830.
     Xếp lại: bên phải là cột chat + cỡ chữ có khe hở thật; nút Báo Lỗi
     trả về góc trái như thiết kế gốc để không dồn đống một chỗ. */
  .sm-chuto        { bottom: 14px !important; right: 12px !important; }
  #smc-aiv-launcher { bottom: 82px !important; right: 12px !important; }
  .smfb-fab        { left: 16px !important; right: auto !important; bottom: 16px !important; }

  /* (3) CHỪA ĐẤT DƯỚI CHÂN TRANG — để cụm nút nổi không bao giờ nằm đè
     lên chữ cuối trang (trước đây đè lên "Thấy hữu ích? Chia sẻ..."). */
  body { padding-bottom: 120px; }
}

/* ═══ FIX 10/08/2026 — CHỮ CỦA TRANG LỘ QUA HEADER (nhìn thấy bằng mắt trên điện thoại) ═══
   Nền header đang là rgba(...,0.98–0.99) — hở 1–2%. Trên nền đen với chữ vàng
   độ tương phản cao, khe hở đó đủ làm chữ bên dưới hiện mờ chồng lên logo "SoiMệnh",
   trông như trang bị lỗi in. Bịt kín thành đục hoàn toàn; màu giữ y nguyên nên
   nhìn không khác gì bản cũ, chỉ hết lem. */
@media (max-width: 768px) {
  .sm-header            { background: #0e0d0b !important; }
  .sm-header.is-scrolled{ background: #0a0907 !important; }
}

/* ═══ FIX 10/08/2026 — NÚT "BÁO LỖI" THU VỀ BIỂU TƯỢNG TRÊN ĐIỆN THOẠI ═══
   Dạng viên thuốc rộng 103px nằm đè lên nội dung công cụ ở đáy khung nhìn
   (đo được: che mục "Nơi sinh" ở Bản Đồ Sao, che dòng hướng dẫn ở Bói Kiều).
   Thu về nút tròn 44×44 — vẫn đủ chuẩn ngón tay, vẫn nguyên chức năng,
   vẫn còn nhãn cho máy đọc màn hình. Máy tính giữ nguyên dạng cũ. */
@media (max-width: 768px) {
  .smfb-fab { width: 44px; height: 44px; padding: 0 !important; justify-content: center; }
  .smfb-fab__label {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}

/* ═══ FIX 10/08/2026 — VÉT NỐT Ô NHẬP <16px (iPhone tự phóng to) ═══
   Quét 49/49 tool xong còn sót 10 ô ở nhóm lịch: hoàng lịch (lh-*), xem ngày tốt (xnt-*),
   và hl-vd-year. Cùng bệnh với form góp ý đã vá: Safari iOS zoom khi chạm ô <16px.
   Đặt luật VÉT CHUNG cho mọi ô nhập trong khu công cụ, thay vì đuổi theo từng id. */
@media (max-width: 900px) {
  .sm-main input[type="text"],
  .sm-main input[type="number"],
  .sm-main input[type="tel"],
  .sm-main input[type="date"],
  .sm-main input[type="search"],
  .sm-main input:not([type]),
  .sm-main select,
  .sm-main textarea { font-size: 16px !important; }
}

/* Vét nốt ô năm của Hoàng Lịch — nằm NGOÀI khu .sm-main nên luật vét chung không với tới. */
@media (max-width: 900px) { .hl-vd-year { font-size: 16px !important; } }

/* ═══════════════════════════════════════════════════════════════
   T02 — CỔNG THIÊN CƠ · SHARED SHELL CONTRACT
   One layer, one focus path, one visual grammar. Existing palette only.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --sm-z-utility: 900;
  --sm-z-backdrop: 1200;
  --sm-z-layer: 1201;
  --sm-z-notice: 1210;
  --sm-open-duration: 220ms;
}
body.sm-ui-layer-open { overflow: hidden !important; }

/* Thiên Ấn: shared 24px icon grammar */
.sm-ti { width: 20px; height: 20px; flex: 0 0 auto; color: inherit; }
.sm-ti--seal { width: 18px; height: 18px; }

/* Native mobile search seal */
.sm-header__search-toggle {
  display: none; width: 44px; height: 44px; min-width: 44px; padding: 10px;
  align-items: center; justify-content: center;
  appearance: none; border: 0; background: transparent;
  color: rgba(201,169,110,.65); border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
}
.sm-header__search-toggle svg { width: 22px; height: 22px; }
.sm-header__search-toggle:hover,
.sm-header__search-toggle[aria-expanded="true"] { color: rgba(212,175,55,.9); }
.sm-header__search-toggle:focus-visible,
.sm-header__toggle:focus-visible {
  outline: 2px solid var(--color-primary-400) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* Shared opening signature: quiet border-first reveal */
.smfb-modal::before,
.sm-aiv-panel::before,
.sm-hsearch-results::before,
.sm-toc-sheet::before {
  content: ''; position: absolute; top: 0; left: 18%; right: 18%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,169,110,.55), transparent);
  transform: scaleX(0); transform-origin: center; opacity: 0;
  transition: transform var(--sm-open-duration) ease, opacity var(--sm-open-duration) ease;
  pointer-events: none; z-index: 3;
}
.smfb-modal.is-open::before,
.sm-aiv-panel--open::before,
.sm-hsearch-results.is-active::before,
.sm-toc-sheet.is-open::before { transform: scaleX(1); opacity: 1; }

/* A single, finite z-index ladder */
.smfb-fab, #smc-aiv-launcher, .sm-chuto, .sm-toc-bar { z-index: var(--sm-z-utility) !important; }
.sm-hsearch-backdrop, .smfb-overlay, .sm-aiv-overlay, .sm-toc-backdrop { z-index: var(--sm-z-backdrop) !important; }
.sm-header__search, .sm-mobile-menu, .smfb-modal, .sm-aiv-panel, .sm-toc-sheet { z-index: var(--sm-z-layer) !important; }

/* The active layer owns the screen; unrelated utilities yield. */
body.sm-ui-layer-menu .smfb-fab,
body.sm-ui-layer-menu #smc-aiv-launcher,
body.sm-ui-layer-menu .sm-chuto,
body.sm-ui-layer-menu .sm-toc-bar,
body.sm-ui-layer-search .smfb-fab,
body.sm-ui-layer-search #smc-aiv-launcher,
body.sm-ui-layer-search .sm-chuto,
body.sm-ui-layer-search .sm-toc-bar,
body.sm-ui-layer-feedback #smc-aiv-launcher,
body.sm-ui-layer-feedback .sm-chuto,
body.sm-ui-layer-feedback .sm-toc-bar,
body.sm-ui-layer-advisor .smfb-fab,
body.sm-ui-layer-advisor .sm-chuto,
body.sm-ui-layer-advisor .sm-toc-bar,
body.sm-ui-layer-toc .smfb-fab,
body.sm-ui-layer-toc #smc-aiv-launcher,
body.sm-ui-layer-toc .sm-chuto {
  opacity: 0 !important; visibility: hidden !important; pointer-events: none !important;
}

/* Feedback controls now use the same seal geometry on every OS. */
.smfb-fab { appearance: none; font: inherit; }
.smfb-modal__title { display: inline-flex; align-items: center; gap: 9px; }
.smfb-modal__close {
  width: 44px; height: 44px; padding: 11px; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 50%;
}
.smfb-modal__close svg { width: 22px; height: 22px; }
.smfb-ctx-banner__icon { width: 20px; height: 20px; color: #c9a96e; }
.smfb-ctx-banner__icon svg { display: block; width: 100%; height: 100%; }
.smfb-cat {
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; appearance: none;
}
.smfb-cat svg { width: 18px; height: 18px; flex: 0 0 auto; }
.smfb-star {
  width: 44px; height: 44px; padding: 8px; display: inline-flex;
  align-items: center; justify-content: center; appearance: none;
  border: 0; background: transparent; color: #c9a96e; border-radius: 50%;
}
.smfb-star svg { width: 26px; height: 26px; }
.smfb-success__icon { width: 48px; height: 48px; }
.smfb-success__icon svg { width: 100%; height: 100%; }

/* TOC trigger remains a readable bar while becoming a native button. */
.sm-toc-bar { width: 100%; padding: 0; appearance: none; border-right: 0; border-bottom: 0; border-left: 0; }
.sm-toc-bar__chevron {
  width: 8px; height: 8px; border-top: 1px solid currentColor;
  border-left: 1px solid currentColor; transform: rotate(45deg); font-size: 0;
}
.sm-toc-bar.is-open .sm-toc-bar__chevron { transform: rotate(225deg); }
.sm-toc-sheet__header { display: flex; align-items: center; justify-content: center; gap: 8px; }

@media (max-width: 768px) {
  .sm-header__inner { gap: 2px; }
  .sm-header__logo { margin-right: auto; }
  .sm-header__search-toggle { display: inline-flex; flex: 0 0 auto; }
  .sm-header__toggle { margin-left: 0; }
  .sm-header__search {
    display: none; position: fixed; top: calc(var(--header-bar, 88px) + 10px);
    left: 12px; right: 12px; width: auto; max-width: none; margin: 0;
  }
  body.sm-hsearch-open .sm-header__search { display: block; }
  .sm-hsearch-form { height: 48px; padding: 0 14px; background: rgba(12,12,10,.99); }
  .sm-hsearch-results {
    top: calc(100% + 8px); max-height: min(66vh, 540px);
    border-radius: 12px; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .sm-hsearch-input { font-size: 16px; }
  .sm-hsearch-clear { width: 40px; height: 40px; padding: 12px; }
  .sm-mobile-menu { max-height: calc(100dvh - var(--header-bar, 88px)); overflow-y: auto; overscroll-behavior: contain; }
  .smfb-cats { gap: 6px; }
  .smfb-cat { padding: 8px 5px; }
  .smfb-stars__row { gap: 2px; }
}

@media (max-width: 360px) {
  .sm-header__logo-icon { width: 34px; height: 34px; }
  .sm-header__logo-name { font-size: 23px; }
  .sm-header__logo-sub { font-size: 7.5px; }
  .sm-header__logo { gap: 7px; }
  .sm-header__search-toggle, .sm-header__toggle { min-width: 44px; width: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .smfb-modal::before, .sm-aiv-panel::before, .sm-hsearch-results::before, .sm-toc-sheet::before,
  .smfb-modal, .sm-aiv-panel, .sm-hsearch-results, .sm-toc-sheet,
  .sm-header__search-toggle, .sm-header__toggle { transition: none !important; animation: none !important; }
}

/* T02 motion budget: finite state transitions only. */
.smfb-fab::before, .smfb-fab::after { animation: none !important; }
.smfb-modal, .sm-hsearch-results, .sm-mobile-menu, .sm-toc-sheet { transition-duration: var(--sm-open-duration) !important; }

/* T02 menu backdrop: the page below the open gate cannot receive a stray tap. */
.sm-mobile-menu-backdrop {
  display: none; position: fixed; top: var(--header-bar,88px); left: 0; right: 0; bottom: 0;
  z-index: var(--sm-z-backdrop); background: rgba(0,0,0,.65); opacity: 0;
  pointer-events: none; transition: opacity var(--sm-open-duration) ease;
}
.sm-mobile-menu-backdrop.is-active { display: block; opacity: 1; pointer-events: auto; }
.sm-mobile-menu { z-index: var(--sm-z-layer) !important; }
@media (prefers-reduced-motion: reduce) { .sm-mobile-menu-backdrop { transition: none !important; } }

/* ═══ SHARED ALL-DEVICE READING CHROME ══════════════════════════
   One state owner for touch, wheel, trackpad and keyboard on long pages. */
body .sm-header,
body .sm-header-transition,
body .sm-celestial-bar,
body #smfb-fab,
body #smc-aiv-launcher,
body .sm-chuto {
  transition: opacity 180ms cubic-bezier(.2,.7,.2,1), transform 180ms cubic-bezier(.2,.7,.2,1), visibility 0s linear 0s !important;
}
body.sm-reading-compact .sm-header,
body.sm-reading-compact .sm-header-transition,
body.sm-reading-compact .sm-celestial-bar,
body.sm-reading-compact #smfb-fab,
body.sm-reading-compact #smc-aiv-launcher,
body.sm-reading-compact .sm-chuto {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 180ms cubic-bezier(.2,.7,.2,1), transform 180ms cubic-bezier(.2,.7,.2,1), visibility 0s linear 180ms !important;
}
body.sm-reading-compact .sm-header,
body.sm-reading-compact .sm-header-transition,
body.sm-reading-compact .sm-celestial-bar {
  transform: translateY(calc(-100% - 18px)) !important;
}
body.sm-reading-compact #smfb-fab {
  transform: translate(110px,-50%) scale(.94) !important;
}
body.sm-reading-compact #smc-aiv-launcher,
body.sm-reading-compact .sm-chuto {
  transform: translateX(78px) scale(.88) !important;
}
@media (max-width: 768px) {
  body.sm-reading-compact #smfb-fab {
    transform: translateX(-70px) scale(.88) !important;
  }
  /* One deliberate edge and one restrained depth shadow; remove stacked rings. */
  body .smfb-fab {
    border: 1px solid rgba(201,169,110,.55) !important;
    border-radius: 50% !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.42) !important;
  }
  body .smfb-fab::before,
  body .smfb-fab::after {
    content: none !important;
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .sm-header,
  body .sm-header-transition,
  body .sm-celestial-bar,
  body #smfb-fab,
  body #smc-aiv-launcher,
  body .sm-chuto { transition: none !important; }
}