/*!
 * NhanSo theme styles.
 *
 * Layered on top of the legacy Contents/assets/css/style.css so the site keeps
 * the original nhanso.vn look: white surfaces, #d9232d accent, #556270 chrome.
 * Only WordPress-specific components are defined here.
 */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    --ns-red: #d9232d;
    --ns-red-soft: #e24d55;
    --ns-red-wash: rgba(217, 35, 45, .08);
    --ns-ink: #212529;
    --ns-chrome: #556270;
    --ns-muted: #6c757d;
    --ns-paper: #ffffff;
    --ns-alt: #eff3f8;
    --ns-line: #dbe1ea;
    --ns-line-soft: #e8edf3;
    --ns-footer: #4a5562;
    --ns-footer-top: #515d6a;
    --ns-shadow-sm: 0 2px 10px rgba(85, 98, 112, .08);
    --ns-shadow: 0 6px 24px rgba(85, 98, 112, .10);
    --ns-shadow-lg: 0 14px 40px rgba(85, 98, 112, .14);
    --ns-radius: 6px;
    --ns-radius-lg: 10px;
    --ns-section: 60px;
    /* #header is .fixed-top, so anything at scroll-top sits under it. Inner
       heroes add this to their own padding so the eyebrow stays visible. */
    --ns-header-h: 83px;
}

@media (max-width: 991px) {
    :root {
        --ns-header-h: 59px;
    }
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
body {
    background: var(--ns-paper);
    color: var(--ns-ink);
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--ns-chrome);
    line-height: 1.3;
}

a {
    color: var(--ns-red);
    text-decoration: none;
}

a:hover {
    color: var(--ns-red-soft);
}

img {
    max-width: 100%;
    height: auto;
}

#preloader {
    background: var(--ns-paper);
}

/* Loading: a ring turning round a number counting 1 to 9, the site name
   under it. CSS only (transform and opacity, so it stays on the compositor);
   nhanso.js fades it out, and it fades itself out after 2.5s if the script
   never runs. The legacy gold spinner (#preloader:before) is switched off. */
#preloader.nhanso-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: radial-gradient(circle at 50% 42%, #fff 0, #fff 30%, var(--ns-alt) 100%);
    transition: opacity .25s ease;
    animation: nhanso-loader-out .3s ease 2.5s forwards;
}

#preloader.nhanso-loader::before {
    content: none;
    display: none;
}

.nhanso-loader__mark {
    position: relative;
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
}

.nhanso-loader__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(217, 35, 45, 0) 0deg, rgba(217, 35, 45, .15) 120deg, var(--ns-red) 330deg, rgba(217, 35, 45, 0) 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    animation: nhanso-loader-spin .9s linear infinite;
    will-change: transform;
}

.nhanso-loader__digits {
    height: 1em;
    overflow: hidden;
    font: 700 30px/1 Georgia, "Times New Roman", serif;
    color: var(--ns-ink);
}

.nhanso-loader__digits > span {
    display: block;
    width: 1ch;
    word-break: break-all;
    text-align: center;
    animation: nhanso-loader-count 2.7s steps(9) infinite;
}

.nhanso-loader__word {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ns-chrome);
    animation: nhanso-loader-breathe 1.8s ease-in-out infinite;
}

.nhanso-loader__word b {
    color: var(--ns-red);
}

@keyframes nhanso-loader-spin {
    to { transform: rotate(360deg); }
}

@keyframes nhanso-loader-count {
    to { transform: translateY(-9em); }
}

@keyframes nhanso-loader-breathe {
    50% { opacity: .45; }
}

@keyframes nhanso-loader-out {
    to { opacity: 0; visibility: hidden; }
}

/* Leaving a page: a thin bar runs along the top until the next one paints. */
.nhanso-navbar-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    height: 3px;
    background: linear-gradient(90deg, var(--ns-red), #f5b544);
    transform: scaleX(0);
    transform-origin: 0 50%;
    opacity: 0;
    pointer-events: none;
}

.nhanso-leaving .nhanso-navbar-progress {
    opacity: 1;
    animation: nhanso-progress 6s cubic-bezier(.1, .7, .2, 1) forwards;
}

@keyframes nhanso-progress {
    10% { transform: scaleX(.35); }
    to { transform: scaleX(.92); }
}

@media (prefers-reduced-motion: reduce) {
    .nhanso-loader__ring,
    .nhanso-loader__digits > span,
    .nhanso-loader__word {
        animation: none;
    }
}

/* The legacy layout used a fixed particle canvas behind the page. The light
   theme does not need it, so any leftover markup stays hidden. */
.nhanso-about-sky,
.nhanso-about-star,
.nhanso-about-comet,
.nhanso-particles,
#tsparticles > canvas {
    display: none !important;
}

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   3. Header / navigation
   -------------------------------------------------------------------------- */
#header.nhanso-header {
    background: var(--ns-paper);
    padding: 18px 0;
    min-height: 0;
    border-bottom: 1px solid var(--ns-line-soft);
    box-shadow: none;
    transition: padding .3s ease, box-shadow .3s ease;
}

#header.nhanso-header.header-scrolled {
    padding: 10px 0;
    box-shadow: 0 2px 15px rgba(0, 0, 0, .1);
}

#header.nhanso-header .container {
    gap: 16px;
}

/* Flex (not inline-flex on the anchor alone) so the mark centres on the bar
   instead of resting on the h1 text baseline. */
#header .logo {
    display: flex;
    align-items: center;
    font-size: 28px;
    margin: 0;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
}

#header .logo a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ns-chrome);
}

/* Legacy style.css nudges the mark up with margin-top:-4px to sit on the
   wordmark baseline. The anchor is a centred flex row, so that offset just
   knocks the logo 4px above the optical centre. */
#header .logo img {
    max-height: 43px;
    /* The mark is square, and it carries width and height attributes so the
       header does not reflow when it loads. Inside the flex row those
       attributes were winning on the phone, where the wordmark beside it is
       hidden and the image is the only child: a 128x128 mark drawn 128x34.
       Sizing from the height and letting the width follow keeps it square at
       every width. */
    height: 43px;
    width: auto;
    flex: 0 0 auto;
    margin: 0;
}

#LogoTitle {
    line-height: 1;
    color: var(--ns-chrome);
}

#header .navbar > ul {
    align-items: center;
    gap: 2px;
}

#header .navbar a,
#header .navbar a:focus {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px 12px;
    font-size: 15px;
    font-weight: 500;
    color: var(--ns-chrome);
    white-space: nowrap;
    border-radius: var(--ns-radius);
    transition: color .25s ease, background-color .25s ease;
}

#header .navbar a i {
    font-size: 12px;
    line-height: 0;
}

#header .navbar a:hover,
#header .navbar .active,
#header .navbar li:hover > a {
    color: var(--ns-red);
    background: transparent;
}

#header .navbar .getstarted,
#header .navbar .getstarted:focus {
    background: var(--ns-red);
    color: #fff;
    padding: 8px 22px;
    margin-left: 18px;
    border-radius: 4px;
    font-weight: 400;
}

#header .navbar .getstarted:hover {
    background: var(--ns-red-soft);
    color: #fff;
}

/* Dropdowns */
#header .navbar .dropdown ul {
    display: block;
    position: absolute;
    left: 8px;
    top: calc(100% + 24px);
    margin: 0;
    padding: 8px 0;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    min-width: 240px;
    background: var(--ns-paper);
    border: 1px solid var(--ns-line-soft);
    border-radius: var(--ns-radius);
    box-shadow: var(--ns-shadow-lg);
    transition: .25s ease;
    max-height: 70vh;
    overflow-y: auto;
}

#header .navbar .dropdown:hover > ul {
    opacity: 1;
    visibility: visible;
    top: 100%;
}

#header .navbar .dropdown ul a {
    padding: 9px 18px;
    font-size: 14.5px;
    font-weight: 400;
    text-transform: none;
    border-radius: 0;
}

#header .navbar .dropdown ul a:hover {
    color: var(--ns-red);
    background: var(--ns-alt);
}

/* Mobile navigation */
/* Drawn with CSS bars rather than the icon font: the glyph silently failed to
   paint on the <button>, which left mobile with no way to open the menu. */
.nhanso-mobile-toggle,
.mobile-nav-toggle {
    display: none;
    position: relative;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: var(--ns-radius);
    background: none;
    color: var(--ns-chrome);
    cursor: pointer;
    font-size: 0;
}

.nhanso-mobile-toggle::before,
.mobile-nav-toggle::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 13px;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    box-shadow: 0 7px 0 currentColor, 0 14px 0 currentColor;
    transition: box-shadow .2s ease, transform .2s ease;
}

.navbar-mobile .nhanso-mobile-toggle,
.navbar-mobile .mobile-nav-toggle {
    position: absolute;
    top: 14px;
    right: 14px;
    color: #fff;
    z-index: 10000;
}

.navbar-mobile .nhanso-mobile-toggle::before,
.navbar-mobile .mobile-nav-toggle::before {
    top: 20px;
    box-shadow: none;
    transform: rotate(45deg);
}

.navbar-mobile .nhanso-mobile-toggle::after,
.navbar-mobile .mobile-nav-toggle::after {
    content: "";
    position: absolute;
    left: 11px;
    top: 20px;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transform: rotate(-45deg);
}

@media (max-width: 991px) {
    .nhanso-mobile-toggle,
    .mobile-nav-toggle {
        display: block;
        z-index: 9999;
    }

    #header.nhanso-header {
        padding: 8px 0;
    }

    #header .logo img {
        max-height: 34px;
        height: 34px;
    }

    /* The legacy stylesheet hides the wordmark below 1199px, which left a
       34px mark alone in a 390px header. There is no nav bar competing for
       the room on a phone — just the mark and the hamburger — so it comes
       back, on one line. */
    #header .logo #LogoTitle {
        display: block;
        font-size: 19px;
        white-space: nowrap;
    }

    #header .logo a {
        gap: 9px;
    }

    #header .navbar ul {
        display: none;
    }

    #header .navbar.navbar-mobile {
        position: fixed;
        overflow: hidden;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background: rgba(33, 37, 41, .85);
        transition: .3s;
        z-index: 999;
    }

    #header .navbar.navbar-mobile > ul {
        display: block;
        position: absolute;
        top: 55px;
        right: 15px;
        bottom: 15px;
        left: 15px;
        padding: 10px 0;
        background: var(--ns-paper);
        border-radius: var(--ns-radius);
        overflow-y: auto;
    }

    #header .navbar.navbar-mobile a {
        padding: 10px 20px;
        font-size: 15px;
    }

    #header .navbar.navbar-mobile .dropdown ul {
        position: static;
        display: none;
        opacity: 1;
        visibility: visible;
        border: 0;
        box-shadow: none;
        padding: 0 0 10px 12px;
        max-height: none;
    }

    #header .navbar.navbar-mobile .dropdown > .dropdown-active {
        display: block;
    }

    #header .navbar.navbar-mobile .getstarted {
        margin: 12px 20px;
        display: inline-flex;
    }
}

/* --------------------------------------------------------------------------
   4. Hero carousel
   -------------------------------------------------------------------------- */
#hero.nhanso-hero {
    height: 56vh;
    min-height: 400px;
    max-height: 620px;
    background-color: rgba(63, 73, 83, .8);
}

/* Darker at the bottom so the copy always has something to sit on. */
.nhanso-hero .carousel-item::before {
    background-color: transparent;
    background-image: linear-gradient(180deg, rgba(20, 24, 30, .45) 0%, rgba(20, 24, 30, .62) 45%, rgba(20, 24, 30, .82) 100%);
}

.nhanso-hero .carousel-container {
    top: 70px;
}

/* animate.css holds its "from" keyframe (opacity 0 + translate3d(0, ±100%, 0))
   when the animation never runs, which left the hero blank and made the copy
   collide with the button. Hero content must render without any animation. */
.nhanso-hero .carousel-item .animate__animated,
.nhanso-hero .carousel-item h2,
.nhanso-hero .carousel-item p,
.nhanso-hero .carousel-item .glow-on-hover,
.nhanso-hero .carousel-item .nhanso-hero-button {
    animation: none !important;
    transform: none !important;
    visibility: visible !important;
}

/* Only the active slide's copy is forced opaque, so carousel-fade still works. */
.nhanso-hero .carousel-item.active .animate__animated,
.nhanso-hero .carousel-item.active h2,
.nhanso-hero .carousel-item.active p,
.nhanso-hero .carousel-item.active .glow-on-hover,
.nhanso-hero .carousel-item.active .nhanso-hero-button {
    opacity: 1 !important;
}

.nhanso-hero h1,
.nhanso-hero h2 {
    color: #fff;
    font-size: 46px;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 16px;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}

.nhanso-hero p {
    color: rgba(255, 255, 255, .92);
    font-size: 17px;
    max-width: 680px;
    margin: 0 auto 26px auto;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}

/* Thin rules either side rather than a solid pill: the badge read as a loud
   sticker pasted over the artwork. */
.nhanso-hero-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 0;
    background: none;
    border-radius: 0;
    color: rgba(255, 255, 255, .82);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 3.4px;
    text-transform: uppercase;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}

.nhanso-hero-kicker::before,
.nhanso-hero-kicker::after {
    content: "";
    width: 30px;
    height: 1px;
    background: rgba(255, 255, 255, .42);
}

.nhanso-hero .glow-on-hover,
.nhanso-hero-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* Legacy .glow-on-hover hard-codes 277x50; let it size to its label. */
    width: auto;
    height: auto;
    max-width: 100%;
    padding: 12px 30px;
    border: 0;
    border-radius: 4px;
    background: var(--ns-red);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    transition: background .3s ease, transform .2s ease;
}

.nhanso-hero .glow-on-hover:hover,
.nhanso-hero-button:hover {
    background: var(--ns-red-soft);
    color: #fff;
    transform: translateY(-2px);
}

.nhanso-hero .carousel-indicators li {
    cursor: pointer;
    background: rgba(255, 255, 255, .6);
}

.nhanso-hero .carousel-indicators li.active {
    background: var(--ns-red);
}

@media (max-width: 767px) {
    #hero.nhanso-hero {
        height: 62vh;
        min-height: 340px;
        max-height: 460px;
    }

    .nhanso-hero .carousel-container {
        top: 64px;
        left: 16px;
        right: 16px;
    }

    .nhanso-hero h1,
.nhanso-hero h2 {
        font-size: 27px;
        margin-bottom: 12px;
    }

    .nhanso-hero p {
        font-size: 15px;
        margin-bottom: 20px;
    }

    .nhanso-hero-kicker {
        font-size: 10.5px;
        letter-spacing: 2.4px;
        gap: 8px;
        margin-bottom: 12px;
    }

    .nhanso-hero-kicker::before,
    .nhanso-hero-kicker::after {
        width: 18px;
    }

    /* Side arrows sit on top of the copy on narrow screens. */
    .nhanso-hero .carousel-control-prev,
    .nhanso-hero .carousel-control-next {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   5. Shared atoms
   -------------------------------------------------------------------------- */
.nhanso-eyebrow {
    display: inline-block;
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ns-red);
}

.nhanso-primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 26px;
    border: 0;
    border-radius: 4px;
    background: var(--ns-red);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background .25s ease, transform .2s ease;
}

.nhanso-primary-btn:hover {
    background: var(--ns-red-soft);
    color: #fff;
    transform: translateY(-2px);
}

.nhanso-link,
.nhanso-home-link,
.nhanso-about-link,
.nhanso-read-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    color: var(--ns-red);
}

.nhanso-link:hover,
.nhanso-home-link:hover,
.nhanso-about-link:hover,
.nhanso-read-more:hover {
    gap: 10px;
    color: var(--ns-red-soft);
}

.section-title {
    text-align: center;
    padding-bottom: 30px;
}

.section-title h2 {
    position: relative;
    display: inline-block;
    font-size: 32px;
    font-weight: 700;
    color: var(--ns-chrome);
    margin: 0 0 16px;
    padding-bottom: 14px;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.3;
}

.section-title h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 56px;
    height: 3px;
    border-radius: 3px;
    transform: translateX(-50%);
    background: var(--ns-red);
}

.nhanso-section-title-split h2::after {
    left: 0;
    transform: none;
}

.section-title p {
    max-width: 720px;
    margin: 0 auto;
    font-size: 16px;
    color: var(--ns-muted);
    text-transform: none;
    font-weight: 400;
}

.nhanso-section-title-split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    text-align: left;
}

.nhanso-section-title-split h2 {
    margin-bottom: 6px;
}

.nhanso-section-title-split p {
    margin: 0;
}

.nhanso-section-title-split > a {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

@media (max-width: 767px) {
    .nhanso-section-title-split {
        flex-direction: column;
        align-items: flex-start;
    }

    .section-title h2 {
        font-size: 25px;
    }
}

.nhanso-empty-state {
    padding: 26px;
    text-align: center;
    background: var(--ns-alt);
    border: 1px dashed var(--ns-line);
    border-radius: var(--ns-radius);
}

.nhanso-empty-state > i {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: var(--ns-red-wash);
    color: var(--ns-red);
    font-size: 22px;
}

.nhanso-empty-state strong {
    display: block;
    color: var(--ns-chrome);
    margin-bottom: 4px;
}

.nhanso-empty-state span {
    color: var(--ns-muted);
    font-size: 14.5px;
}

.nhanso-rounded-media,
.nhanso-article-image {
    border-radius: var(--ns-radius-lg);
    overflow: hidden;
    box-shadow: var(--ns-shadow-sm);
}

/* Reveal-on-scroll.
   Content is visible by default and only hidden once the script has confirmed
   it is running (html.nhanso-js-ready). The observer adds .is-visible; if it
   never fires — no JS, no IntersectionObserver, an error earlier in the
   bundle — the content still renders instead of leaving a blank page. */
[data-reveal] {
    opacity: 1;
    transform: none;
}

.nhanso-js-ready [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .5s ease, transform .5s ease;
}

.nhanso-js-ready [data-reveal].is-visible,
.nhanso-js-ready [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .nhanso-js-ready [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   6. Section rhythm
   -------------------------------------------------------------------------- */
main > section,
.nhanso-content-section {
    padding: var(--ns-section) 0;
}

.nhanso-band-dark,
.nhanso-band {
    background: var(--ns-paper);
}

/* Alternating bands, with hairlines so the boundary reads even on a pale tint. */
.nhanso-home-overview,
.nhanso-feature-grid-section,
.nhanso-number-meaning {
    background: var(--ns-alt);
    border-top: 1px solid var(--ns-line);
    border-bottom: 1px solid var(--ns-line);
}

/* --------------------------------------------------------------------------
   7. Home — about
   -------------------------------------------------------------------------- */
.nhanso-about-shell {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 40px;
    align-items: center;
}

.nhanso-about-copy h2 {
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 14px;
}

.nhanso-about-copy h4 {
    font-size: 17px;
    font-weight: 400;
    line-height: 1.75;
    color: var(--ns-muted);
    margin-bottom: 22px;
}

.nhanso-about-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin-bottom: 26px;
}

.nhanso-about-actions .btn-outline-success {
    border-color: var(--ns-red);
    color: var(--ns-red);
    border-radius: 4px;
    padding: 10px 22px;
}

.nhanso-about-actions .btn-outline-success:hover {
    background: var(--ns-red);
    border-color: var(--ns-red);
    color: #fff;
}

.nhanso-about-signals {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.nhanso-about-signals span {
    display: block;
    padding: 14px;
    background: var(--ns-alt);
    border: 1px solid var(--ns-line-soft);
    border-radius: var(--ns-radius);
}

.nhanso-about-signals b {
    display: block;
    color: var(--ns-chrome);
    font-size: 15px;
}

.nhanso-about-signals em {
    font-style: normal;
    font-size: 13.5px;
    color: var(--ns-muted);
}

.nhanso-about-panel {
    padding: 28px;
    background: var(--ns-paper);
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-radius-lg);
    box-shadow: var(--ns-shadow);
}

.nhanso-about-panel-head {
    padding-bottom: 16px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--ns-line-soft);
}

.nhanso-about-panel-head span {
    display: block;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ns-red);
}

.nhanso-about-panel-head strong {
    font-size: 20px;
    color: var(--ns-chrome);
}

.nhanso-about-steps {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
}

.nhanso-about-steps li {
    display: flex;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--ns-line-soft);
}

.nhanso-about-steps li:last-child {
    border-bottom: 0;
}

.nhanso-about-steps i {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ns-red-wash);
    color: var(--ns-red);
    font-size: 18px;
}

.nhanso-about-steps b {
    display: block;
    color: var(--ns-chrome);
}

.nhanso-about-steps p {
    margin: 0;
    font-size: 14.5px;
    color: var(--ns-muted);
}

.nhanso-about-note {
    padding: 16px;
    background: var(--ns-alt);
    border-left: 3px solid var(--ns-red);
    border-radius: 0 var(--ns-radius) var(--ns-radius) 0;
}

.nhanso-about-note b {
    display: block;
    color: var(--ns-chrome);
    margin-bottom: 4px;
}

.nhanso-about-note span {
    font-size: 14.5px;
    color: var(--ns-muted);
}

@media (max-width: 991px) {
    .nhanso-about-shell {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575px) {
    .nhanso-about-signals {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   8. Home — overview, metrics, profile
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   9. Calculator / tool strip / results
   -------------------------------------------------------------------------- */
.nhanso-tool-strip {
    background: var(--ns-paper);
}

.nhanso-tool-strip h2 {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 12px;
}

.nhanso-tool-strip > .container > .row > div > p {
    color: var(--ns-muted);
}

.nhanso-calculator {
    padding: 28px;
    background: var(--ns-paper);
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-radius-lg);
    box-shadow: var(--ns-shadow);
}

.nhanso-calculator label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ns-chrome);
}

.nhanso-calculator input,
.nhanso-calculator select,
.nhanso-lookup-panel input,
.nhanso-lookup-panel select {
    width: 100%;
    padding: 10px 14px;
    font-size: 15px;
    color: var(--ns-ink);
    background: var(--ns-paper);
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-radius);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.nhanso-calculator input:focus,
.nhanso-calculator select:focus,
.nhanso-lookup-panel input:focus,
.nhanso-calculator .nhanso-primary-btn {
    margin-top: 18px;
}

.nhanso-result {
    margin-top: 18px;
    padding: 18px;
    background: var(--ns-alt);
    border: 1px solid var(--ns-line-soft);
    border-radius: var(--ns-radius);
    color: var(--ns-muted);
    font-size: 15px;
}

/* JS adds .has-result to the form once a result is rendered, and flashes
   .is-live-result / .is-error-result on the result box itself. */
.has-result .nhanso-result,
.nhanso-result.has-result {
    background: var(--ns-paper);
    border-color: rgba(217, 35, 45, .22);
    color: var(--ns-ink);
}

.nhanso-result.is-live-result {
    animation: nhansoResultIn .45s ease;
}

.nhanso-result.is-error-result {
    background: var(--ns-red-wash);
    border-color: rgba(217, 35, 45, .35);
    color: #a2151d;
}

@keyframes nhansoResultIn {
    from {
        opacity: .35;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nhanso-result.is-live-result {
        animation: none;
    }
}

.nhanso-result-kicker {
    display: block;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ns-red);
}

.nhanso-result-profile {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 12px 0 4px;
}

.nhanso-result-profile > p {
    margin: 0;
    flex: 1;
    min-width: 0;
    color: var(--ns-ink);
}

.nhanso-result-profile strong {
    color: var(--ns-chrome);
}

@media (max-width: 575px) {
    .nhanso-result-profile {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
}

/* --------------------------------------------------------------------------
   10. Feature cards / zodiac preview / number cards
   -------------------------------------------------------------------------- */
.nhanso-feature-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 28px 24px;
    background: var(--ns-paper);
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-radius-lg);
    box-shadow: var(--ns-shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.nhanso-feature-card:hover {
    transform: translateY(-5px);
    border-color: rgba(217, 35, 45, .3);
    box-shadow: var(--ns-shadow-lg);
}

.nhanso-feature-card > i {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    margin-bottom: 16px;
    border-radius: var(--ns-radius);
    background: var(--ns-red-wash);
    color: var(--ns-red);
    font-size: 24px;
}

.nhanso-feature-card h2,
.nhanso-feature-card h3 {
    font-size: 19px;
    margin-bottom: 8px;
}

.nhanso-feature-card p {
    flex-grow: 1;
    margin-bottom: 14px;
    font-size: 15px;
    color: var(--ns-muted);
}

.nhanso-feature-card > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    color: var(--ns-red);
}

.nhanso-zodiac-preview {
    background: var(--ns-paper);
}

.nhanso-zodiac-mini-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
}

.nhanso-zodiac-mini-grid a {
    display: block;
    padding: 18px 12px;
    text-align: center;
    background: var(--ns-paper);
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-radius-lg);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.nhanso-zodiac-mini-grid a:hover {
    transform: translateY(-4px);
    border-color: rgba(217, 35, 45, .3);
    box-shadow: var(--ns-shadow);
}

.nhanso-zodiac-mini-grid img {
    width: 84px;
    height: 84px;
    object-fit: contain;
    margin-bottom: 10px;
    transition: transform .3s ease;
}

.nhanso-zodiac-mini-grid a:hover img {
    transform: scale(1.08);
}

.nhanso-zodiac-mini-grid strong {
    display: block;
    font-size: 15px;
    color: var(--ns-chrome);
}

.nhanso-zodiac-mini-grid span {
    font-size: 12.5px;
    color: var(--ns-muted);
}

@media (max-width: 991px) {
    .nhanso-zodiac-mini-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 575px) {
    .nhanso-zodiac-mini-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .nhanso-zodiac-mini-grid a {
        padding: 12px 4px;
    }

    .nhanso-zodiac-mini-grid img {
        width: 58px;
        height: 58px;
        margin-bottom: 6px;
    }

    .nhanso-zodiac-mini-grid strong {
        font-size: 13.5px;
    }

    .nhanso-zodiac-mini-grid span {
        font-size: 11.5px;
    }
}

.nhanso-number-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    background: var(--ns-paper);
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-radius-lg);
    box-shadow: var(--ns-shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease;
}

.nhanso-number-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--ns-shadow-lg);
}

.nhanso-number-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.nhanso-number-card > div {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 20px;
}

.nhanso-number-card h3 {
    font-size: 18px;
    margin-bottom: 8px;
}

.nhanso-number-card p {
    flex-grow: 1;
    font-size: 14.5px;
    color: var(--ns-muted);
    margin-bottom: 12px;
}

.nhanso-number-card a {
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   11. Post cards / blog
   -------------------------------------------------------------------------- */

.nhanso-post-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    background: var(--ns-paper);
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-radius-lg);
    box-shadow: var(--ns-shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease;
}

.nhanso-post-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--ns-shadow-lg);
}

/* The class lands on either the <img> itself (home) or an <a> wrapping it
   (hub), so both shapes need to crop to the same band. */
.nhanso-post-card > img,
.nhanso-post-card__image {
    display: block;
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.nhanso-post-card > img,
img.nhanso-post-card__image {
    object-fit: cover;
}

a.nhanso-post-card__image > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.nhanso-post-card:hover a.nhanso-post-card__image > img {
    transform: scale(1.05);
}

.nhanso-post-card__body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 20px;
}

.nhanso-post-card__body time {
    font-size: 13px;
    color: var(--ns-muted);
}

.nhanso-post-card__body h3 {
    font-size: 18px;
    margin: 6px 0 10px;
    line-height: 1.4;
}

.nhanso-post-card__body h3 a {
    color: var(--ns-chrome);
}

.nhanso-post-card__body h3 a:hover {
    color: var(--ns-red);
}

.nhanso-post-card__body p {
    margin: 0;
    font-size: 14.5px;
    color: var(--ns-muted);
}

/* The hub template puts this class on a Bootstrap .row whose children are
   .col-* items; turning that into a CSS grid collapses every card. Only style
   it as a grid when it is a standalone container. */
.nhanso-blog-card-grid:not(.row) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

@media (max-width: 991px) {
    .nhanso-blog-card-grid:not(.row) {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .nhanso-blog-card-grid:not(.row) {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   12. Page shells
   -------------------------------------------------------------------------- */
.nhanso-page-main {
    background: var(--ns-paper);
}

.nhanso-inner-hero,
.nhanso-hub-hero,
.nhanso-post-hero,
.nhanso-numerology-legacy-hero {
    padding: calc(var(--ns-header-h) + 34px) 0 44px;
    background: var(--ns-alt);
    border-bottom: 1px solid var(--ns-line);
}

/* Legacy style.css ships `@media (max-width:600px){section{padding:40px 0
   !important}}`, which wipes the header offset above — so this has to shout
   back. Only the hero shells are targeted, never nested sections. */
@media (max-width: 991px) {
    .nhanso-inner-hero,
.nhanso-hub-hero,
.nhanso-post-hero,
.nhanso-numerology-legacy-hero {
        padding: calc(var(--ns-header-h) + 26px) 0 32px !important;
    }
}

.nhanso-inner-hero h1,
.nhanso-hub-hero h1,
.nhanso-post-hero h1 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--ns-chrome);
}

.nhanso-inner-hero p,
.nhanso-hub-hero p,
.nhanso-post-hero p {
    max-width: 780px;
    margin-bottom: 0;
    color: var(--ns-muted);
}

.nhanso-result-kicker {
    color: var(--ns-red);
}

@media (max-width: 767px) {
    .nhanso-inner-hero h1,
.nhanso-hub-hero h1,
.nhanso-post-hero h1 {
        font-size: 27px;
    }
}

.nhanso-story-panel,
.nhanso-lookup-panel,
.nhanso-history-panel,
.nhanso-sidebar-widget,
.nhanso-account-panel {
    padding: 26px;
    background: var(--ns-paper);
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-radius-lg);
    box-shadow: var(--ns-shadow-sm);
}

.nhanso-story-panel h2,
.nhanso-story-panel h3,
.nhanso-sidebar-widget h3 {
    font-size: 19px;
    margin-bottom: 14px;
}

.nhanso-sidebar-widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nhanso-sidebar-widget li {
    padding: 9px 0;
    border-bottom: 1px solid var(--ns-line-soft);
}

.nhanso-sidebar-widget li:last-child {
    border-bottom: 0;
}

.nhanso-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.nhanso-tag-cloud a {
    padding: 5px 13px;
    font-size: 13.5px;
    background: var(--ns-alt);
    border: 1px solid var(--ns-line);
    border-radius: 999px;
    color: var(--ns-chrome);
}

.nhanso-tag-cloud a:hover {
    background: var(--ns-red);
    border-color: var(--ns-red);
    color: #fff;
}

/* --------------------------------------------------------------------------
   13. Article / imported legacy content
   -------------------------------------------------------------------------- */
.nhanso-article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 40px;
    align-items: start;
}

@media (max-width: 991px) {
    .nhanso-article-layout {
        grid-template-columns: 1fr;
    }
}

.nhanso-wp-content,
.nhanso-imported-content,
.nhanso-legacy-article {
    color: var(--ns-ink);
    font-size: 16.5px;
    line-height: 1.85;
    overflow-wrap: break-word;
}

.nhanso-wp-content h2,
.nhanso-imported-content h2,
.nhanso-legacy-article h2 {
    font-size: 26px;
    margin: 30px 0 12px;
}

.nhanso-wp-content h3,
.nhanso-imported-content h3,
.nhanso-legacy-article h3 {
    font-size: 21px;
    margin: 24px 0 10px;
}

.nhanso-wp-content p,
.nhanso-imported-content p,
.nhanso-legacy-article p {
    margin-bottom: 16px;
}

.nhanso-wp-content img,
.nhanso-imported-content img,
.nhanso-legacy-article img {
    max-width: 100%;
    height: auto;
    border-radius: var(--ns-radius);
}

.nhanso-wp-content ul,
.nhanso-wp-content ol,
.nhanso-imported-content ul,
.nhanso-imported-content ol {
    padding-left: 22px;
    margin-bottom: 16px;
}

.nhanso-wp-content blockquote,
.nhanso-imported-content blockquote {
    padding: 16px 20px;
    margin: 20px 0;
    background: var(--ns-alt);
    border-left: 3px solid var(--ns-red);
    border-radius: 0 var(--ns-radius) var(--ns-radius) 0;
    color: var(--ns-ink);
}

.nhanso-wp-content table,
.nhanso-imported-content table {
    width: 100%;
    margin-bottom: 18px;
    border-collapse: collapse;
}

.nhanso-wp-content th,
.nhanso-wp-content td,
.nhanso-imported-content th,
.nhanso-imported-content td {
    padding: 10px 12px;
    border: 1px solid var(--ns-line);
    text-align: left;
}

.nhanso-wp-content th,
.nhanso-imported-content th {
    background: var(--ns-alt);
    color: var(--ns-chrome);
}

.nhanso-legacy-lead {
    font-size: 18px;
    color: var(--ns-muted);
    margin-bottom: 20px;
}

/* The legacy divider is an <img> (hr1.png), not an <hr>; the rule above would
   squash it to a 1px line. */
img.vintage-hr {
    display: block;
    width: min(100%, 320px);
    height: auto;
    margin: 26px auto;
    background: none;
    opacity: .7;
}

/* Imported article images must never collapse to zero. */
.nhanso-legacy-article img,
.nhanso-imported-content img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Metric chips: markup is <span><b>value</b><em>label</em></span> */
.nhanso-profile-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    margin-top: 20px;
}

/* Three counters at 150px do not fit a phone, so they fell to two and one and
   the odd one sat beside a hole. Below 576px the last of an odd set takes the
   whole row; from 576px up all three fit across and this must not apply, or it
   would break the row that was already fine. */
@media (max-width: 575px) {
    .nhanso-profile-metrics > *:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

/* Rendered inside a narrow result box, so it needs a smaller track. */

.nhanso-profile-metrics > * {
    display: block;
    padding: 14px 16px;
    text-align: center;
    background: var(--ns-paper);
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-radius);
}

.nhanso-profile-metrics b,
.nhanso-profile-metrics strong {
    display: block;
    font-size: 19px;
    line-height: 1.3;
    color: var(--ns-red);
}

.nhanso-profile-metrics em {
    display: block;
    margin-top: 2px;
    font-style: normal;
    font-size: 13px;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--ns-muted);
}

/* Bootstrap accordion wrapper: each .accordion-item carries its own border. */
.nhanso-number-accordion {
    display: grid;
    gap: 12px;
}

.nhanso-number-accordion .accordion-item {
    border-radius: var(--ns-radius);
    overflow: hidden;
}

.nhanso-number-accordion .accordion-header {
    margin: 0;
}

.nhanso-number-accordion .accordion-button {
    font-size: 16px;
    padding: 15px 18px;
}

/* The number poster is portrait; unconstrained it stretched each open panel to
   ~600px for two lines of summary. */
.nhanso-number-accordion .accordion-body img {
    max-height: 190px;
    width: auto;
    margin-left: auto;
    border-radius: var(--ns-radius);
}

.nhanso-number-accordion .accordion-body {
    padding: 18px;
    font-size: 15.5px;
    line-height: 1.8;
}

.nhanso-rating-card,
.nhanso-discussion-card {
    padding: 22px;
    background: var(--ns-paper);
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-radius-lg);
    box-shadow: var(--ns-shadow-sm);
}

.nhanso-forecast-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.nhanso-forecast-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--ns-line-soft);
}

.nhanso-forecast-line:last-child {
    border-bottom: 0;
}

/* --------------------------------------------------------------------------
   18. Health
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   19. Community / rating / discussion / profile / account
   -------------------------------------------------------------------------- */
.nhanso-rating-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.nhanso-discussion-card {
    display: flex;
    gap: 16px;
}

.nhanso-discussion-avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--ns-alt);
}

.nhanso-rating-stars {
    color: #f5b544;
    letter-spacing: 2px;
}

.nhanso-profile-shell {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 34px;
    align-items: start;
}

@media (max-width: 991px) {
    .nhanso-profile-shell {
        grid-template-columns: 1fr;
    }
}

.nhanso-profile-side,
.nhanso-profile-main {
    padding: 24px;
    background: var(--ns-paper);
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-radius-lg);
    box-shadow: var(--ns-shadow-sm);
}

.nhanso-profile-preview {
    width: 100%;
    border-radius: var(--ns-radius);
}

.nhanso-account-shell {
    display: grid;
    place-items: center;
    min-height: 70vh;
    /* The card is centred in the shell, so without the header offset a tall
       card (register) slides its logo up under the fixed bar. */
    padding: calc(var(--ns-header-h) + 30px) 0 40px;
    background: var(--ns-alt);
}

.nhanso-account-panel {
    width: 100%;
    max-width: 440px;
    box-shadow: var(--ns-shadow);
}

.nhanso-account-logo {
    display: block;
    max-height: 52px;
    margin: 0 auto 18px;
}

.nhanso-account-form label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: var(--ns-chrome);
    font-size: 14px;
}

.nhanso-account-form input {
    width: 100%;
    padding: 10px 14px;
    margin-bottom: 16px;
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-radius);
}

.nhanso-account-switch {
    margin-top: 16px;
    text-align: center;
    font-size: 14.5px;
    color: var(--ns-muted);
}

/* --------------------------------------------------------------------------
   20. Cung mệnh — in nhanso-cung-menh.css, loaded only on those pages.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   21. Archive / pagination
   -------------------------------------------------------------------------- */
.nhanso-archive-page,
.nhanso-single-page,
.nhanso-static-page,
.nhanso-hub-page {
    background: var(--ns-paper);
}

.pagination,
.nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 34px;
}

.page-numbers {
    display: inline-grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    background: var(--ns-paper);
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-radius);
    color: var(--ns-chrome);
    font-weight: 500;
}

.page-numbers:hover,
.page-numbers.current {
    background: var(--ns-red);
    border-color: var(--ns-red);
    color: #fff;
}

/* --------------------------------------------------------------------------
   22. Footer
   -------------------------------------------------------------------------- */
#footer.nhanso-footer {
    background: var(--ns-footer);
    color: #fff;
    font-size: 14px;
    padding: 0 0 30px;
}

.nhanso-footer .footer-top {
    background: var(--ns-footer-top);
    padding: 60px 0 30px;
}

.nhanso-footer .footer-info h3 {
    font-size: 24px;
    line-height: 1;
    margin: 0 0 20px;
    font-weight: 700;
    color: #fff;
}

.nhanso-footer .footer-info p {
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 0;
    color: #fff;
}

.nhanso-footer h4 {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    position: relative;
    padding-bottom: 12px;
}

.nhanso-footer .footer-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nhanso-footer .footer-links li {
    display: flex;
    align-items: center;
    padding: 10px 0;
}

.nhanso-footer .footer-links li:first-child {
    padding-top: 0;
}

.nhanso-footer .footer-links li i {
    padding-right: 2px;
    font-size: 11px;
    line-height: 1;
    color: rgba(255, 255, 255, .6);
}

.nhanso-footer .footer-links a {
    display: inline-block;
    line-height: 1;
    color: rgba(255, 255, 255, .6);
    transition: .3s;
}

.nhanso-footer .footer-links a:hover {
    color: #fff;
}

.nhanso-footer .footer-newsletter p {
    color: rgba(255, 255, 255, .75);
}

.nhanso-footer .social-links {
    display: flex;
    gap: 4px;
}

.nhanso-footer .social-links a {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    font-size: 18px;
    line-height: 1;
    border-radius: 4px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    transition: .3s;
}

.nhanso-footer .social-links a:hover {
    background: var(--ns-red);
    color: #fff;
}

.nhanso-footer-search {
    display: flex;
    gap: 6px;
    margin-top: 30px;
    padding: 6px 10px;
    background: #fff;
    border-radius: 4px;
}

.nhanso-footer-search input {
    flex-grow: 1;
    min-width: 0;
    padding: 4px;
    border: 0;
    background: transparent;
    color: var(--ns-ink);
}

.nhanso-footer-search input:focus {
    outline: 0;
}

.nhanso-footer-search button {
    flex-shrink: 0;
    padding: 0 16px;
    border: 0;
    border-radius: 4px;
    background: var(--ns-red);
    color: #fff;
    cursor: pointer;
    transition: .3s;
}

.nhanso-footer-search button:hover {
    background: var(--ns-red-soft);
}

.nhanso-footer .footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 30px;
}

.nhanso-footer .copyright,
.nhanso-footer .credits {
    color: rgba(255, 255, 255, .75);
    font-size: 14px;
}

.nhanso-footer .copyright span {
    color: #fff;
}

.nhanso-footer .credits a {
    color: rgba(255, 255, 255, .75);
}

.nhanso-footer .credits a:hover {
    color: #fff;
}

@media (max-width: 767px) {
    .nhanso-footer .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

/* Back to top */
.back-to-top {
    position: fixed;
    right: 15px;
    bottom: 15px;
    z-index: 996;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 4px;
    background: var(--ns-red);
    color: #fff;
    opacity: 0;
    visibility: hidden;
    transition: all .4s;
}

.back-to-top.active {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background: var(--ns-red-soft);
}

.back-to-top i {
    font-size: 28px;
    line-height: 0;
    color: #fff;
}

/* ==========================================================================
   HOME PAGE
   Rebuilt to carry imagery and colour instead of stacked white cards.
   ========================================================================== */

/* --- Quick tool rail ---------------------------------------------------- */
.nhanso-quick-rail {
    padding: 0;
    background: linear-gradient(180deg, #2b3442 0%, #212a36 100%);
}

.nhanso-quick-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
}

.nhanso-quick-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 22px 10px;
    color: rgba(255, 255, 255, .88);
    font-size: 14.5px;
    font-weight: 600;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, .09);
    transition: background .25s ease, color .25s ease, transform .25s ease;
}

.nhanso-quick-tile:last-child {
    border-right: 0;
}

.nhanso-quick-tile i {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 21px;
    color: #fff;
    background: var(--tone, var(--ns-red));
    box-shadow: 0 8px 20px rgba(0, 0, 0, .28);
    transition: transform .25s ease;
}

.nhanso-quick-tile:hover {
    background: rgba(255, 255, 255, .07);
    color: #fff;
}

.nhanso-quick-tile:hover i {
    transform: translateY(-3px) scale(1.06);
}

.nhanso-tone--sun   { --tone: var(--tone-sun); }
.nhanso-tone--teal  { --tone: var(--tone-teal); }
.nhanso-tone--violet{ --tone: var(--tone-violet); }
.nhanso-tone--rose  { --tone: var(--tone-rose); }
.nhanso-tone--gold  { --tone: var(--tone-gold); }
.nhanso-tone--mint  { --tone: var(--tone-mint); }
.nhanso-tone--sky   { --tone: var(--tone-sky); }
.nhanso-tone--slate { --tone: var(--tone-slate); }

/* Eight across on a desktop: keep each label on one line. */
@media (min-width: 992px) {
    .nhanso-quick-tile {
        padding-left: 4px;
        padding-right: 4px;
        white-space: nowrap;
    }
}

@media (max-width: 991px) {
    .nhanso-quick-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .nhanso-quick-tile:nth-child(4) {
        border-right: 0;
    }

    .nhanso-quick-tile:nth-child(-n+4) {
        border-bottom: 1px solid rgba(255, 255, 255, .09);
    }
}

@media (max-width: 420px) {
    .nhanso-quick-tile {
        padding: 16px 6px;
        font-size: 12.5px;
        gap: 6px;
    }

    .nhanso-quick-tile i {
        width: 38px;
        height: 38px;
        font-size: 18px;
    }
}

/* --- About ------------------------------------------------------------- */
.nhanso-about {
    background: var(--ns-paper);
}

.nhanso-about-shell {
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    gap: 48px;
    align-items: center;
}

.nhanso-about-media {
    position: relative;
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 22px 50px rgba(37, 47, 62, .18);
}

.nhanso-about-media img {
    display: block;
    width: 100%;
}

.nhanso-about-copy h2 {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.22;
    margin-bottom: 14px;
}

.nhanso-about-lead {
    font-size: 16.5px;
    color: var(--ns-muted);
    margin-bottom: 24px;
}

.nhanso-about-list {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
    display: grid;
    gap: 14px;
}

.nhanso-about-list li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 16px;
    background: var(--ns-alt);
    border-radius: 12px;
    border-left: 3px solid var(--ns-red);
}

.nhanso-about-list i {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--ns-red);
    color: #fff;
    font-size: 17px;
}

.nhanso-about-list b {
    display: block;
    color: var(--ns-chrome);
    font-size: 15.5px;
}

.nhanso-about-list span {
    font-size: 14.5px;
    color: var(--ns-muted);
}

.nhanso-about-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

@media (max-width: 991px) {
    .nhanso-about-shell {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

/* --- Stats band (image backed) ----------------------------------------- */
.nhanso-stats-band {
    position: relative;
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    color: #fff;
}

.nhanso-stats-head {
    max-width: 720px;
    margin: 0 auto 40px;
    text-align: center;
}

.nhanso-stats-head .nhanso-eyebrow {
    color: #ffb3b8;
}

.nhanso-stats-head h2 {
    color: #fff;
    font-size: 33px;
    font-weight: 700;
    line-height: 1.28;
    margin: 0;
}

.nhanso-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.nhanso-stat-card {
    padding: 26px 20px;
    text-align: center;
    border-radius: 14px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    backdrop-filter: blur(2px);
    transition: transform .25s ease, background .25s ease;
}

.nhanso-stat-card:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, .11);
}

.nhanso-stat-card > i {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: var(--ns-red);
    color: #fff;
    font-size: 20px;
}

.nhanso-stat-card strong {
    display: block;
    font-size: 40px;
    line-height: 1.05;
    color: #fff;
}

.nhanso-stat-card span {
    display: block;
    font-weight: 600;
    color: #fff;
}

.nhanso-stat-card small {
    color: rgba(255, 255, 255, .68);
    font-size: 13px;
}

@media (max-width: 991px) {
    .nhanso-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .nhanso-stats-head h2 {
        font-size: 25px;
    }
}

/* --- Calculator strip --------------------------------------------------- */
.nhanso-tool-strip {
    background:
        radial-gradient(circle at 12% 20%, rgba(217, 35, 45, .09), transparent 42%),
        radial-gradient(circle at 88% 80%, rgba(22, 179, 167, .1), transparent 46%),
        var(--ns-alt);
    border-top: 1px solid var(--ns-line);
    border-bottom: 1px solid var(--ns-line);
}

.nhanso-tool-shell {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 44px;
    align-items: center;
}

.nhanso-tool-copy h2 {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.24;
    margin-bottom: 12px;
}

.nhanso-tool-copy > p {
    color: var(--ns-muted);
    margin-bottom: 18px;
}

.nhanso-tool-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 9px;
}

.nhanso-tool-points li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    color: var(--ns-chrome);
}

.nhanso-tool-points i {
    color: var(--ns-red);
    font-size: 17px;
}

.nhanso-tool-strip .nhanso-calculator {
    box-shadow: 0 22px 50px rgba(37, 47, 62, .14);
    border-radius: 16px;
}

@media (max-width: 991px) {
    .nhanso-tool-shell {
        grid-template-columns: 1fr;
        gap: 26px;
    }
}

/* --- Number meaning cards ---------------------------------------------- */
.nhanso-number-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.nhanso-number-card {
    background: var(--ns-paper);
    border: 1px solid var(--ns-line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(37, 47, 62, .07);
    transition: transform .28s ease, box-shadow .28s ease;
}

.nhanso-number-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px rgba(37, 47, 62, .18);
}

.nhanso-number-card > a {
    display: block;
    color: inherit;
}

.nhanso-number-card__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    /* Matches the dark number artwork so the tile never flashes empty white. */
    background: #14110f;
}

.nhanso-number-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.nhanso-number-card:hover .nhanso-number-card__media img {
    transform: scale(1.06);
}

/* Kept inside the media box: the parent clips overflow for the zoom effect. */
.nhanso-number-card__media em {
    position: absolute;
    left: 14px;
    bottom: 14px;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--ns-red);
    color: #fff;
    font-style: normal;
    font-size: 23px;
    font-weight: 700;
    border: 3px solid rgba(255, 255, 255, .9);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
}

.nhanso-number-card__body {
    display: block;
    padding: 20px;
}

.nhanso-number-card__body b {
    display: block;
    font-size: 18px;
    color: var(--ns-chrome);
    margin-bottom: 8px;
}

.nhanso-number-card__body > span {
    display: block;
    font-size: 14.5px;
    color: var(--ns-muted);
    margin-bottom: 14px;
}

.nhanso-number-card__body i {
    font-style: normal;
    font-weight: 600;
    color: var(--ns-red);
}

.nhanso-number-more {
    margin-top: 34px;
    text-align: center;
}

@media (max-width: 991px) {
    .nhanso-number-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* On a phone a stacked 16:10 card is ~430px tall; six of them swallow the
   page. Below 576px they become compact horizontal rows instead. */
@media (max-width: 575px) {
    .nhanso-number-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .nhanso-number-card {
        border-radius: 12px;
    }

    .nhanso-number-card > a {
        display: grid;
        grid-template-columns: 104px minmax(0, 1fr);
        align-items: stretch;
    }

    .nhanso-number-card__media {
        aspect-ratio: auto;
        height: 100%;
        min-height: 112px;
    }

    .nhanso-number-card__media em {
        left: 8px;
        bottom: 8px;
        width: 32px;
        height: 32px;
        font-size: 15px;
        border-width: 2px;
    }

    .nhanso-number-card__body {
        padding: 12px 14px;
    }

    .nhanso-number-card__body b {
        font-size: 15.5px;
        margin-bottom: 4px;
    }

    .nhanso-number-card__body > span {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 13px;
        line-height: 1.55;
        margin-bottom: 8px;
    }

    .nhanso-number-card__body i {
        font-size: 13px;
    }

    .nhanso-number-more {
        margin-top: 22px;
    }
}

/* --- Zodiac tiles ------------------------------------------------------- */
.nhanso-zodiac-preview {
    background: var(--ns-paper);
}

.nhanso-zodiac-mini-grid a {
    padding: 20px 12px;
    border-radius: 14px;
    background: linear-gradient(180deg, var(--ns-paper), var(--ns-alt));
}

.nhanso-zodiac-mini-grid a:hover {
    background: var(--ns-paper);
}

/* --- Home posts --------------------------------------------------------- */

/* --------------------------------------------------------------------------
   22b. Nested sections
   --------------------------------------------------------------------------
   Legacy style.css applies `section { padding: 60px 0; overflow: hidden }` to
   every section. Components rendered as <section> inside a page section must
   not inherit that page-level rhythm. */
.nhanso-content-section section,
.nhanso-imported-content section,
.nhanso-story-panel section {
    padding: 0;
    overflow: visible;
}

.nhanso-score-meter {
    display: block;
    height: 6px;
    margin-top: 12px;
    border-radius: 999px;
    background: var(--ns-line-soft);
    overflow: hidden;
}

.nhanso-score-meter > i {
    display: block;
    width: var(--nhanso-score, 0%);
    height: 100%;
    border-radius: inherit;
    background: var(--nhanso-tone, var(--ns-red));
    transition: width .9s cubic-bezier(.22, .8, .3, 1);
}

@media (prefers-reduced-motion: reduce) {
    .nhanso-score-meter > i {
        transition: none;
    }
}

/* Chart.js owns the canvas box (responsive + maintainAspectRatio:false).
   Forcing width/height here breaks its scaling, so only the shell is sized. */
/* Legacy style.css forces `section { padding: 40px 0 !important }` below 600px.
   Nested component sections must opt out of that page-level rhythm. */
@media only screen and (max-width: 600px) {
    .nhanso-content-section section,
    .nhanso-imported-content section,
        .nhanso-story-panel section {
        padding: 0 !important;
    }

    .nhanso-calculator,
.nhanso-story-panel,
.nhanso-lookup-panel,
.nhanso-history-panel,
.nhanso-sidebar-widget,
.nhanso-account-panel,
.nhanso-about-panel,
.nhanso-profile-side,
.nhanso-profile-main {
        padding: 18px;
    }

    .nhanso-feature-card,
    .nhanso-home-metric {
        padding: 20px 18px;
    }

    /* Full-bleed rail must not inherit the legacy 40px section rhythm. */
    section.nhanso-quick-rail {
        padding: 0 !important;
    }

    /* Desktop display sizes are too large for a 390px column. */
    .nhanso-about-copy h2,
    .nhanso-home-overview-head h2,
    .nhanso-home-profile-copy h2,
    .nhanso-tool-strip h2 {
        font-size: 24px;
    }

    .nhanso-about-copy h4 {
        font-size: 15.5px;
    }

    .section-title h2 {
        font-size: 23px;
    }

    
}

/* ==========================================================================
   NUMEROLOGY STORY / EPISODES
   Port of .episode / .episode__content / .story / .vintage-hr from the .NET
   result.css: an oversized sticky index beside the reading for each layer.
   Own class names so the legacy sheet (which hard-codes #444 surfaces and
   only loads on numerology routes) cannot leak onto the light pages.
   ========================================================================== */
.nhanso-story {
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid var(--ns-line);
}

/* Loading veil while the reading is prepared */
.nhanso-card-loading {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 18px;
    background: rgba(5, 7, 16, .93);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s;
}

.nhanso-card-loading.is-active {
    opacity: 1;
    visibility: visible;
}

.nhanso-card-loading__text {
    color: #fff;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 13px;
}

.nhanso-card-loading__bar {
    position: relative;
    width: 220px;
    height: 2px;
    background: rgba(255, 255, 255, .25);
    overflow: hidden;
}

.nhanso-card-loading__bar span {
    position: absolute;
    inset: 0;
    background: var(--ns-red);
    transform: scaleX(0);
    transform-origin: left;
    animation: nhansoLoaderFill 1.1s ease forwards;
}

@keyframes nhansoLoaderFill {
    to { transform: scaleX(1); }
}

/* --------------------------------------------------------------------------
   22g. Toast + decorative leftovers
   -------------------------------------------------------------------------- */
.nhanso-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 1200;
    max-width: min(92vw, 420px);
    padding: 12px 20px;
    border-radius: var(--ns-radius);
    background: var(--ns-chrome);
    color: #fff;
    font-size: 14.5px;
    text-align: center;
    box-shadow: var(--ns-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 12px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
}

.nhanso-toast.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.nhanso-burst-layer {
    display: none !important;
}

/* Legacy category chip: white on #ff8700 fails contrast, so deepen it. */
a.post-category,
.post-meta .post-category {
    background-color: #c25a00 !important;
    color: #fff !important;
    border-radius: 3px;
    padding: 3px 9px;
    font-size: 12px;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   23. Neutralise legacy dark rules
   --------------------------------------------------------------------------
   Contents/css/result.css was written for the old dark numerology result page
   (body #444, dark accordions). The WordPress templates render the light
   nhanso-* components instead, so those rules are reset here to keep the page
   consistent with the rest of the site. */
body.nhanso-tool-zodiac,
body.nhanso-tool-health,
body.nhanso-tool-hub {
    background-color: var(--ns-paper) !important;
}

/* ==========================================================================
   The dark "ma mi" treatment the .NET site gave numerology, the moon and the
   playing cards is gone: each section was rebuilt with a sheet of its own.
   What stays is the numerology history page's dark page colour, which sits
   under the numerology group but has no sheet of its own yet.
   ========================================================================== */
body.nhanso-tool-numerology {
    background-color: #0d1020 !important;
    color: rgba(233, 238, 250, .88);
}

.accordion-item {
    background-color: var(--ns-paper);
    color: var(--ns-ink);
    border: 1px solid var(--ns-line);
}

.accordion-button {
    background-color: var(--ns-alt);
    color: var(--ns-chrome);
    font-weight: 600;
}

.accordion-button:not(.collapsed) {
    background-color: var(--ns-red-wash);
    color: var(--ns-red);
    box-shadow: none;
}

.accordion-button:focus {
    border-color: var(--ns-line);
    box-shadow: 0 0 0 3px var(--ns-red-wash);
}

.accordion-body {
    background-color: var(--ns-paper);
    color: var(--ns-ink);
}

/* --- Lookup history ------------------------------------------------------ */
.nhanso-history-panel__note {
    margin: 0 0 14px;
    font-size: 14px;
    color: var(--ns-muted);
}

.nhanso-history-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nhanso-history-list a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: var(--ns-radius);
    border: 1px solid var(--ns-line);
    background: var(--ns-paper);
    text-decoration: none;
    transition: border-color .2s ease, transform .2s ease;
}

.nhanso-history-list a:hover {
    border-color: var(--ns-red);
    transform: translateX(3px);
}

.nhanso-history-list__number {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-weight: 700;
    color: #fff;
    background: var(--ns-red);
}

.nhanso-history-list__body {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.nhanso-history-list__body strong {
    color: var(--ns-chrome);
}

.nhanso-history-list__body em {
    font-style: normal;
    font-size: 13px;
    color: var(--ns-muted);
}

.nhanso-history-list__time {
    margin-left: auto;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    color: var(--ns-muted);
}

/* --------------------------------------------------------------------------
   24. WordPress admin bar offset
   -------------------------------------------------------------------------- */
body.admin-bar #header.nhanso-header {
    top: 32px;
}

@media (max-width: 782px) {
    body.admin-bar #header.nhanso-header {
        top: 46px;
    }
}

/* --------------------------------------------------------------------------
   25. Account and profile screens

   Contents/css/login.css still ships for /dang-nhap/ and /dang-ky/ and carries
   a bare `a { color: #fff }`, which is invisible on the light card. profile.css
   is no longer loaded at all — the three classes the profile template borrowed
   from it are defined below instead.
   -------------------------------------------------------------------------- */
body.nhanso-tool-login .nhanso-page-main a,
body.nhanso-tool-register .nhanso-page-main a {
    color: var(--ns-red);
}

/* The size belonged on the image, not on the anchor wrapping it, so the mark
   rendered at its natural 270px straight over the card heading. */
.nhanso-account-logo {
    max-height: none;
}

.nhanso-account-logo img {
    display: block;
    max-height: 52px;
    width: auto;
    margin: 0 auto;
}

/* Secondary action next to a solid primary button. */
.nhanso-primary-btn.nhanso-primary-btn--ghost {
    color: var(--ns-red);
    background: transparent;
    border: 1px solid currentColor;
    box-shadow: none;
}

.nhanso-primary-btn.nhanso-primary-btn--ghost:hover,
.nhanso-primary-btn.nhanso-primary-btn--ghost:focus-visible {
    color: var(--ns-paper);
    background: var(--ns-red);
}

.nhanso-profile-brand {
    display: block;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--ns-chrome);
    text-decoration: none;
}

.nhanso-profile-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 14px 0 10px;
    border-radius: 50%;
    font-weight: 700;
    color: #fff;
    background: var(--ns-red);
}

.nhanso-profile-main img {
    display: block;
    width: 100%;
    max-width: 220px;
    height: auto;
    margin-bottom: 18px;
    border-radius: var(--ns-radius-lg);
}

/* --------------------------------------------------------------------------
   25b. Not found / search results
   -------------------------------------------------------------------------- */
.nhanso-notfound {
    display: grid;
    gap: 18px;
    justify-items: center;
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

.nhanso-notfound-code {
    font-size: 88px;
    font-weight: 700;
    line-height: 1;
    color: var(--ns-red);
}

.nhanso-notfound-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.nhanso-notfound-search {
    display: flex;
    width: 100%;
    max-width: 420px;
    gap: 8px;
}

.nhanso-notfound-search input {
    flex: 1;
    padding: 11px 14px;
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-radius);
    background: var(--ns-paper);
    color: var(--ns-ink);
}

@media (max-width: 767px) {
    .nhanso-notfound-code {
        font-size: 60px;
    }
}

/* The h4 runs are the seven areas of life; a rule on the left keeps them
   reading as a list of facets rather than as new top-level topics. */
/* --- The twelve sign cards ----------------------------------------------- */
/* --------------------------------------------------------------------------
   28. (Cung mệnh reference tables — moved to nhanso-cung-menh.css.)
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   30. Community pages

   /danh-gia carries the six testimonials the .NET controller shipped, set as
   quotes with the writer's life path underneath -- the legacy markup rendered
   that number as a star rating, which it never was.

   /thao-luan has no discussions to show and none can be invented, so it opens
   onto the articles that can actually be commented on.
   -------------------------------------------------------------------------- */
.nhanso-rating-heading {
    margin: 38px 0 18px;
    font-size: clamp(21px, 2.4vw, 26px);
    color: var(--ns-chrome);
}

/* Quotes vary a lot in length, and stretching every card in a row to the
   tallest one left half of them mostly empty. */
.nhanso-rating-grid {
    align-items: start;
}

.nhanso-rating-card--quote {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px 26px;
    border-radius: var(--ns-radius-lg);
    background: var(--ns-paper);
    border: 1px solid var(--ns-line);
}

.nhanso-rating-quote {
    position: relative;
    margin: 0;
    padding-top: 6px;
    font-size: 15.5px;
    line-height: 1.78;
    color: var(--ns-ink);
}

.nhanso-rating-quote::before {
    content: "\201C";
    display: block;
    margin-bottom: -14px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 46px;
    line-height: 1;
    color: rgba(214, 60, 79, .28);
}

.nhanso-rating-card--quote footer {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--ns-line);
}

.nhanso-rating-card--quote footer strong {
    font-size: 15px;
    color: var(--ns-chrome);
}

.nhanso-rating-card--quote footer a {
    font-size: 13px;
    color: var(--ns-red);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- Discussion starting points ------------------------------------------ */
.nhanso-discussion-prompts {
    margin-top: 26px;
    padding: 26px 28px;
    border-radius: var(--ns-radius-lg);
    background: var(--ns-paper);
    border: 1px solid var(--ns-line);
}

.nhanso-discussion-prompts h2 {
    margin: 0 0 8px;
    font-size: clamp(20px, 2.2vw, 24px);
    color: var(--ns-chrome);
}

.nhanso-discussion-prompts > p {
    margin: 0 0 20px;
    font-size: 15px;
    line-height: 1.75;
    color: var(--ns-ink);
}

.nhanso-discussion-prompts ul {
    display: grid;
    gap: 0;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.nhanso-discussion-prompts li {
    display: grid;
    gap: 5px;
    padding: 16px 0;
    border-top: 1px solid var(--ns-line);
}

.nhanso-discussion-prompts li:last-child {
    border-bottom: 1px solid var(--ns-line);
}

.nhanso-discussion-prompts li > a {
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--ns-chrome);
}

.nhanso-discussion-prompts li > a:hover {
    color: var(--ns-red);
}

.nhanso-discussion-prompts li span {
    font-size: 14px;
    line-height: 1.7;
    color: var(--ns-muted);
}

.nhanso-discussion-prompts li em {
    display: flex;
    align-items: center;
    gap: 6px;
    font-style: normal;
    font-size: 12.5px;
    color: var(--ns-muted);
}

@media (max-width: 575px) {
    .nhanso-discussion-prompts {
        padding: 20px 18px;
    }

    .nhanso-rating-card--quote {
        padding: 20px 20px;
    }
}

/* --------------------------------------------------------------------------
   32. (Cung mệnh answer — moved to nhanso-cung-menh.css.)
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   33. Âm lịch

   Four views share this: today, a month, a day and the converter. The grid is
   the anchor — it has to stay readable at phone width with two numbers in
   every cell, so the lunar number sits under the solar one rather than beside.
   -------------------------------------------------------------------------- */

/* --- Today card ---------------------------------------------------------- */

/* --- Month grid ---------------------------------------------------------- */

/* --- Reading panels ------------------------------------------------------ */

/* Hoàng đạo or hắc đạo, and the tasks the day suits (links to /xem-ngay-tot/). */

/* Giờ xuất hành: the whole row, time on the left, state and its gist on the right. */

/* --- Converter ----------------------------------------------------------- */

/* --- CTA and explainer --------------------------------------------------- */

/* --------------------------------------------------------------------------
   34. Related tools

   Several tool pages had no internal link inside <main> at all: you arrived,
   used the tool, and the only way onward was the header.
   -------------------------------------------------------------------------- */
.nhanso-related-tools {
    margin-top: 30px;
    padding-top: 28px;
    border-top: 1px solid var(--m-line, var(--ns-line));
}

.nhanso-related-tools h2 {
    margin: 0 0 18px;
    font-size: clamp(20px, 2.3vw, 25px);
    color: var(--m-ink, var(--ns-chrome));
}

.nhanso-related-tools__grid {
    display: grid;
    /* Three across, not auto-fill. The block always shows six tools — seven
       minus the page you are on — and at a 1140px container auto-fill chose
       four, so every page ended on a row of two with a hole beside it. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

@media (max-width: 991px) {
    .nhanso-related-tools__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .nhanso-related-tools__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.nhanso-related-tools__grid a {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-areas: "icon name" "icon gist";
    gap: 2px 12px;
    padding: 16px 18px;
    border-radius: var(--ns-radius-lg);
    background: var(--m-panel, var(--ns-paper));
    border: 1px solid var(--m-line, var(--ns-line));
    transition: border-color .2s ease, transform .2s ease;
}

.nhanso-related-tools__grid a:hover {
    transform: translateY(-2px);
    border-color: var(--m-gold, var(--ns-red));
}

.nhanso-related-tools__grid i {
    grid-area: icon;
    align-self: center;
    font-size: 21px;
    color: var(--m-gold, var(--ns-red));
}

.nhanso-related-tools__grid strong {
    grid-area: name;
    align-self: end;
    font-size: 15.5px;
    color: var(--m-ink, var(--ns-chrome));
}

.nhanso-related-tools__grid span {
    grid-area: gist;
    align-self: start;
    font-size: 13px;
    line-height: 1.55;
    color: var(--m-dim, var(--ns-muted));
}

/* --------------------------------------------------------------------------
   33b. Âm lịch, second pass

   The first pass was legible but flat. The lunar day number is the moon's age,
   so the card shows the moon; the twelve double-hours are a cycle, so they are
   a ring; the travel directions are directions, so they are a compass.
   -------------------------------------------------------------------------- */

/* --- Day card ------------------------------------------------------------ */

/* A faint starfield, drawn rather than fetched. */

/* --- Month grid, refined ------------------------------------------------- */

/* A dot rather than a fill: the colour reads as a mark on the day instead of
   swamping the number. */

/* --- Hour ring ----------------------------------------------------------- */

/* --- Compass ------------------------------------------------------------- */

/* --- Panels -------------------------------------------------------------- */

/* The compass card is tall. Letting it span two rows only helps when there
   are three columns to balance it against; in a two-column layout it just
   leaves the other side ragged. */

/* --------------------------------------------------------------------------
   35. Health tools

   Each page was a form, one line of disclaimer and the same stock photo of a
   ribcage — on all four, including the two that have nothing to do with
   breathing. The scale a result should be read against is the useful thing, so
   it is on the page before anything is typed.
   -------------------------------------------------------------------------- */

/* --- Reference ----------------------------------------------------------- */

/* --- Worked example, reading, other tools, questions --------------------- */

.nhanso-health-guide h2,
.nhanso-health-more h2,
.nhanso-faq h2 {
    margin: 0 0 14px;
    font-size: clamp(19px, 2.1vw, 23px);
    color: var(--ns-chrome);
}

.nhanso-faq {
    margin-top: 28px;
}

.nhanso-faq details {
    margin: 0 0 10px;
    padding: 14px 18px;
    border-radius: var(--ns-radius);
    background: var(--ns-paper);
    border: 1px solid var(--ns-line);
}

.nhanso-faq summary {
    font-weight: 700;
    color: var(--ns-chrome);
    cursor: pointer;
}

.nhanso-faq details p {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--ns-ink);
}

/* --------------------------------------------------------------------------
   36. Profile avatar

   The initial sits under a transparent default avatar, so a real Gravatar
   covers it and the absence of one shows a letter rather than the grey
   mystery-person placeholder scaled up to 560px.
   -------------------------------------------------------------------------- */
.nhanso-profile-avatar {
    position: relative;
    display: grid;
    place-items: center;
    width: 128px;
    height: 128px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: linear-gradient(150deg, #e0424f 0%, #a8121f 100%);
    font-size: 52px;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
}

.nhanso-profile-avatar::before {
    content: attr(data-initial);
    line-height: 1;
}

.nhanso-profile-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* --------------------------------------------------------------------------
   37. Article footer

   A post page carried no internal link at all inside <main>: you finished
   reading and the only way on was the header.
   -------------------------------------------------------------------------- */
.nhanso-article-footer {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid var(--ns-line);
}

.nhanso-article-terms {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-bottom: 30px;
}

.nhanso-article-terms span {
    font-size: 11.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ns-muted);
}

.nhanso-article-terms a {
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--ns-alt);
    font-size: 13.5px;
    color: var(--ns-chrome);
}

.nhanso-article-terms a:hover {
    background: var(--ns-red);
    color: #fff;
}

.nhanso-article-related h2 {
    margin: 0 0 18px;
    font-size: clamp(20px, 2.3vw, 25px);
    color: var(--ns-chrome);
}

.nhanso-article-related__grid {
    display: grid;
    /* Always three items, so auto-fit would leave a fourth column empty. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 22px;
}

.nhanso-article-related__grid article {
    display: grid;
    gap: 8px;
    align-content: start;
}

.nhanso-article-related__image {
    display: block;
    overflow: hidden;
    border-radius: var(--ns-radius-lg);
    aspect-ratio: 16 / 10;
}

.nhanso-article-related__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.nhanso-article-related__image:hover img {
    transform: scale(1.04);
}

.nhanso-article-related__title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--ns-chrome);
}

.nhanso-article-related__title:hover {
    color: var(--ns-red);
}

.nhanso-article-related p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--ns-muted);
}

@media (max-width: 767px) {
    .nhanso-article-related__grid {
        grid-template-columns: 1fr;
    }

    .nhanso-article-related__image {
        aspect-ratio: 16 / 9;
    }
}

/* The article body sets its own image sizing; the related cards are outside it
   and need the crop to hold regardless of the source dimensions. */
.nhanso-article-related__image img {
    display: block;
    aspect-ratio: 16 / 10;
}

/* --------------------------------------------------------------------------
   33c. Âm lịch — spacing

   The grid was legible but packed: six pixels between cells that carry two
   numbers each, so the whole month read as one solid block and the solar and
   lunar figures sat on top of one another. The cells also stayed short while
   the column stretched, which left the calendar card floating well above the
   bottom of the one beside it.
   -------------------------------------------------------------------------- */

/* The dot was tucked into a corner three pixels from the edge. */

/* --- CTA ----------------------------------------------------------------
   The text column had no width of its own, so it collapsed to two ragged
   lines while the button sat far off to the right.
   ------------------------------------------------------------------------ */

/* Below the two-column breakpoint the text and the button fight over one row:
   the sentence breaks into two ragged lines and the button floats off to the
   right of them. Give each its own row instead. */

/* The ring is about 210px tall. Beside a six-row list it floats in the middle
   of a column three times its height, so below the width where the list can
   stay short the two stack instead and the list takes the full panel. */

/* --------------------------------------------------------------------------
   38. Spacing pass across the rest of the site

   Found by scripts/ui-audit/spacing.mjs at 900px and 1280px, the band where a
   two-column layout collapses and a short column is left floating in a tall
   one.
   -------------------------------------------------------------------------- */

/* /thao-luan/ intro. Was wearing the legacy comment composer's clothes. */
.nhanso-discussion-intro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 20px;
    margin-bottom: 22px;
    padding: 20px 24px;
    border-radius: var(--ns-radius-lg);
    background: var(--ns-alt);
    border: 1px solid var(--ns-line);
}

.nhanso-discussion-intro img {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.nhanso-discussion-intro > div {
    flex: 1 1 320px;
    min-width: 0;
}

.nhanso-discussion-intro strong {
    display: block;
    margin-bottom: 4px;
    font-size: 16px;
    color: var(--ns-chrome);
}

.nhanso-discussion-intro p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--ns-ink);
}

.nhanso-discussion-intro .nhanso-primary-btn {
    flex: 0 0 auto;
}

/* A number's reading runs to five thousand pixels beside an aside of nine
   hundred, so the aside was gone for most of the scroll. Let it follow.
   
   The legacy stylesheet carries a bare `section { overflow: hidden }`, which
   makes every section on the site a scroll container and so silently kills
   position:sticky anywhere inside one. `overflow-x: clip` still clips sideways
   but does not create that container, so sticky works again. */
/* Every sticky element in this stylesheet sits inside a <section>, so all of
   them were dead: .nhanso-chosen, the zodiac artwork column, the episode aside
   and the result episode headers included. Clipping sideways keeps whatever
   the legacy rule was guarding against; it is the vertical hidden that made a
   scroll container. */
.nhanso-content-section {
    overflow-x: clip;
    overflow-y: visible;
}

/* 40. Lunar year overview.
   Twelve month cards plus a summary strip. The cards are links, so the whole
   card takes the hover and focus state rather than the heading inside it. */

/* 41. The header between 1200px and 1500px.
   Above 1500px the wordmark sits on one line beside the mark with room to
   spare. Below it the container narrows but the nav does not, so "NHÂN SỐ"
   wrapped onto two lines and the block ended 16px from the first menu item —
   the logo looked broken rather than tight. Keeping it on one line needs
   about 60px, which comes out of the nav's horizontal padding: eight items
   give it back without the row reading as cramped. */
@media (min-width: 1200px) and (max-width: 1499px) {
    #header .logo #LogoTitle {
        white-space: nowrap;
        font-size: 21px;
    }

    #header .logo a {
        gap: 9px;
    }

    #header .navbar a,
    #header .navbar a:focus {
        padding: 10px 8px;
        font-size: 14px;
    }

    #header .navbar .getstarted,
    #header .navbar .getstarted:focus {
        padding: 8px 16px;
        margin-left: 10px;
    }
}

/* 42. Profile activity.
   The page said it tracked public activity and then showed a name, three
   counters and the footer. These are the lists that were missing, plus the
   empty state for an account that has not posted yet. */
.nhanso-profile-activity {
    margin: 28px 0 0;
    text-align: left;
}

.nhanso-profile-activity section + section {
    margin-top: 24px;
}

.nhanso-profile-activity h3 {
    margin: 0 0 12px;
    font-size: 17px;
    letter-spacing: .02em;
    text-transform: uppercase;
    opacity: .75;
}

.nhanso-profile-activity ul {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--ns-border, rgba(37, 47, 62, .12));
}

.nhanso-profile-activity li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--ns-border, rgba(37, 47, 62, .12));
}

.nhanso-profile-activity li a {
    color: inherit;
    text-decoration: none;
}

.nhanso-profile-activity li a:hover {
    color: var(--ns-accent, #e03131);
}

.nhanso-profile-activity time {
    flex: 0 0 auto;
    font-size: 14px;
    opacity: .6;
    font-variant-numeric: tabular-nums;
}

.nhanso-profile-empty {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 20px;
    padding: 18px 20px;
    border-radius: var(--ns-radius-lg);
    background: var(--ns-surface-2, #f5f7fa);
    opacity: .9;
}

.nhanso-profile-empty i {
    margin-top: 2px;
    font-size: 18px;
    opacity: .7;
}

@media (max-width: 575px) {
    .nhanso-profile-activity li {
        flex-direction: column;
        gap: 4px;
    }
}

/* 43. Hub sidebar.
   Two widgets against a six-article list left the bottom right of every hub
   page blank. A third widget fills part of it, and the column follows the
   scroll rather than stopping a third of the way down.

   Sticky works here only because section { overflow: hidden } was taken out of
   the legacy sheet earlier — a scroll container anywhere above kills it
   silently. */
.nhanso-sidebar-tools ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nhanso-sidebar-tools li + li {
    margin-top: 2px;
}

.nhanso-sidebar-tools a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    color: inherit;
    text-decoration: none;
}

.nhanso-sidebar-tools a:hover {
    color: var(--ns-accent, #e03131);
}

.nhanso-sidebar-tools i {
    flex: 0 0 auto;
    width: 20px;
    font-size: 15px;
    opacity: .65;
    text-align: center;
}

@media (min-width: 992px) {
    .nhanso-hub-aside__inner {
        position: sticky;
        top: calc(var(--ns-header-h, 72px) + 24px);
    }
}

/* 44. The imported article, as a column rather than a grid.
   The picture sits above the piece at the column's full width; the eyebrow and
   heading follow; the prose runs underneath. */
.nhanso-article-body > .nhanso-article-image {
    display: block;
    width: 100%;
    margin: 0 0 24px;
}

.nhanso-article-body > .nhanso-eyebrow {
    margin: 0 0 6px;
}

.nhanso-article-body > h2 {
    margin: 0 0 20px;
    font-size: 30px;
    line-height: 1.25;
}

@media (max-width: 575px) {
    .nhanso-article-body > h2 {
        font-size: 25px;
    }
}

/* Freed from the grid, the prose ran the full container — about 104
   characters a line, which is as tiring to read as the 39 it was stuck at
   before. Capped at a normal measure; pictures, tables and quotes inside the
   article are left free to use the full width. */
.nhanso-article-body > .nhanso-imported-content > p,
.nhanso-article-body > .nhanso-imported-content > ul,
.nhanso-article-body > .nhanso-imported-content > ol,
.nhanso-article-body > .nhanso-imported-content > h2,
.nhanso-article-body > .nhanso-imported-content > h3,
.nhanso-article-body > .nhanso-imported-content > h4,
.nhanso-article-body > .nhanso-wp-content > p,
.nhanso-article-body > .nhanso-wp-content > ul,
.nhanso-article-body > .nhanso-wp-content > ol,
.nhanso-article-body > .nhanso-wp-content > h2,
.nhanso-article-body > .nhanso-wp-content > h3,
.nhanso-article-body > .nhanso-wp-content > h4 {
    max-width: 68ch;
}

/* single.php has no sidebar beside it, so the column itself is centred. */
.nhanso-single-page .nhanso-article-body > .nhanso-wp-content,
.nhanso-single-page .nhanso-article-body > .nhanso-article-image {
    max-width: 820px;
    margin-inline: auto;
}

/* 45. An odd last article card, laid on its side.
   The grid is two across, so an odd number of posts left the last card alone
   with an empty half beside it. When the last item sits at an odd position —
   which is exactly when the count is odd — it takes the full width and turns
   horizontal, picture left, so a full-width row reads as a choice rather
   than a stretched card. */
@media (min-width: 768px) {
    .nhanso-blog-card-grid > [class*="col-"]:last-child:nth-child(odd) {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .nhanso-blog-card-grid > [class*="col-"]:last-child:nth-child(odd) .nhanso-post-card {
        display: grid;
        grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
        align-items: stretch;
    }

    /* A fixed height, not 100%: these thumbnails are portrait playing cards,
       and letting them drive the row made the card 250px tall with the body
       floating in the middle of the empty half. 200px matches the cards
       above it, and object-fit crops rather than stretches. */
    .nhanso-blog-card-grid > [class*="col-"]:last-child:nth-child(odd) .nhanso-post-card__image {
        height: 200px;
        align-self: stretch;
    }

    .nhanso-blog-card-grid > [class*="col-"]:last-child:nth-child(odd) .nhanso-post-card__image > img {
        height: 200px;
        object-fit: cover;
    }

    .nhanso-blog-card-grid > [class*="col-"]:last-child:nth-child(odd) .nhanso-post-card__body {
        justify-content: center;
        padding: 26px 28px;
    }

    .nhanso-blog-card-grid > [class*="col-"]:last-child:nth-child(odd) .nhanso-post-card__body h3 {
        font-size: 21px;
    }
}

/* 46. Profile shortcuts, so the left column is not 130px of card next to 300. */
.nhanso-profile-links {
    margin: 24px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid var(--ns-line);
    text-align: left;
}

.nhanso-profile-links h2 {
    margin: 0 0 10px;
    font-size: 12px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ns-muted);
}

.nhanso-profile-links ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nhanso-profile-links a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    color: inherit;
    text-decoration: none;
    font-size: 15px;
}

.nhanso-profile-links a:hover {
    color: var(--ns-accent, #e03131);
}

.nhanso-profile-links i {
    flex: 0 0 auto;
    width: 19px;
    font-size: 15px;
    opacity: .6;
    text-align: center;
}

/* --------------------------------------------------------------------------
   The card box under each of the 54 "Ý nghĩa khi rút được lá …" articles
   (template-parts/card/article-box.php). Here rather than in
   nhanso-card.css because the articles load only this sheet.
   -------------------------------------------------------------------------- */
.nhanso-card-box {
    margin: 32px 0 8px;
    padding: 20px 22px;
    background: #fbf7f5;
    border: 1px solid #eadcdc;
    border-left: 4px solid #b02f4e;
    border-radius: var(--ns-radius-lg);
}

.nhanso-card-box__main {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.nhanso-card-box__main img {
    flex: 0 0 auto;
    width: 96px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 10px 18px -12px rgba(38, 21, 28, .7);
}

.nhanso-card-box__kicker {
    margin: 0 0 8px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #b02f4e;
}

.nhanso-card-box dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 18px;
    margin: 0 0 12px;
}

.nhanso-card-box dl div {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    align-items: baseline;
}

.nhanso-card-box dt {
    font-size: 13px;
    font-weight: 600;
    color: var(--ns-muted);
}

.nhanso-card-box dd {
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ns-ink);
}

.nhanso-card-box .nhanso-cd-stars {
    display: inline-flex;
    gap: 2px;
    color: #e0a93b;
}

.nhanso-card-box__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 8px 16px;
    font-size: 14.5px;
    font-weight: 700;
    color: #fff;
    background: var(--ns-red);
    border-radius: var(--ns-radius);
}

.nhanso-card-box__cta:hover {
    color: #fff;
    background: #b81c25;
}

.nhanso-card-box__more {
    margin: 16px 0 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ns-ink);
}

.nhanso-card-box__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nhanso-card-box__list a {
    display: inline-block;
    padding: 4px 11px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ns-chrome);
    background: #fff;
    border: 1px solid #eadcdc;
    border-radius: 99px;
}

.nhanso-card-box__list a:hover {
    color: #b02f4e;
    border-color: #b02f4e;
}

@media (max-width: 575px) {
    .nhanso-card-box {
        padding: 16px;
    }

    .nhanso-card-box__main {
        gap: 14px;
    }

    .nhanso-card-box__main img {
        width: 76px;
    }

    .nhanso-card-box dl {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --------------------------------------------------------------------------
   The home page's "Hôm nay" strip (template-parts/nhanso-home-today.php):
   the day as each section reads it, one tap from each.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Sharing and the remembered birth dates (inc/nhanso-social.php,
   assets/js/nhanso-social.js). Used across sections, so the palette is the
   night-and-gold every rebuilt hero shares, on the light page below it.
   -------------------------------------------------------------------------- */
.nhanso-share {
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: 26px;
    align-items: center;
    padding: 22px;
    color: #eef1f7;
    background:
        radial-gradient(ellipse 60% 90% at 100% 0%, rgba(217, 178, 106, .16), transparent 60%),
        linear-gradient(160deg, #1d2c4a, #101a2c);
    border-radius: 22px;
    box-shadow: 0 26px 60px -34px rgba(16, 26, 44, .7);
}

.nhanso-share__preview {
    display: block;
    overflow: hidden;
    border-radius: 14px;
    box-shadow: 0 0 0 1px rgba(217, 178, 106, .35), 0 18px 36px -20px rgba(0, 0, 0, .8);
}

.nhanso-share__preview img {
    display: block;
    width: 100%;
    height: auto;
}

.nhanso-share__kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 6px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #f2dca8;
}

.nhanso-share__heading {
    margin: 0 0 6px;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.3;
    color: #fff;
}

.nhanso-share__lede {
    margin: 0 0 14px;
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(238, 241, 247, .78);
}

.nhanso-share__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.nhanso-share .nhanso-share__btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 9px 16px;
    font: inherit;
    font-size: 14.5px;
    font-weight: 700;
    color: #eef1f7;
    text-decoration: none;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 12px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.nhanso-share .nhanso-share__btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, .15);
    border-color: rgba(217, 178, 106, .6);
}

.nhanso-share .nhanso-share__btn.is-primary,
.nhanso-share .nhanso-share__btn.is-invite {
    color: #2a1c00;
    background: linear-gradient(180deg, #f2dca8, #d9b26a);
    border-color: #d9b26a;
}

.nhanso-share .nhanso-share__btn.is-primary:hover,
.nhanso-share .nhanso-share__btn.is-invite:hover {
    color: #2a1c00;
    background: #f2dca8;
}

.nhanso-share__btn.is-facebook i {
    color: #7fb2ff;
}

.nhanso-share .nhanso-share__btn[hidden] {
    display: none;
}

.nhanso-share__invite {
    margin: 16px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.nhanso-share__invite p {
    margin: 0 0 10px;
    font-size: 14.5px;
    line-height: 1.55;
    color: rgba(238, 241, 247, .85);
}

.nhanso-share__invite i {
    color: #f2dca8;
}

.nhanso-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 1090;
    padding: 12px 18px;
    font-size: 14.5px;
    font-weight: 700;
    color: #fff;
    background: #101a2c;
    border: 1px solid rgba(217, 178, 106, .5);
    border-radius: 12px;
    box-shadow: 0 16px 36px -14px rgba(0, 0, 0, .6);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 12px);
    transition: opacity .2s, transform .2s;
}

.nhanso-toast.is-shown {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* --- Every page: the share row, the floating button, the sheet ----------- */
.nhanso-sharebar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 18px;
    margin: 32px 0 8px;
    padding: 14px 16px 14px 20px;
    background:
        linear-gradient(90deg, rgba(217, 178, 106, .14), transparent 45%),
        #fff;
    border: 1px solid #ecdcb8;
    border-radius: 18px;
    box-shadow: 0 14px 34px -26px rgba(16, 26, 44, .55);
}

.nhanso-sharebar__label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
    color: #3a3f4d;
}

.nhanso-sharebar__label i {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    font-size: 16px;
    color: #2a1c00;
    background: linear-gradient(180deg, #f2dca8, #d9b26a);
    border-radius: 50%;
}

.nhanso-sharebar__label b {
    color: #1d2c4a;
}

.nhanso-sharebar__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.nhanso-sharebtn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    padding: 8px 15px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    color: #1d2c4a;
    text-decoration: none;
    background: #f4f6fa;
    border: 1px solid #dfe4ee;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .15s;
}

.nhanso-sharebtn:hover,
.nhanso-sharebtn:focus-visible {
    color: #1d2c4a;
    background: #fff;
    border-color: #d9b26a;
    transform: translateY(-1px);
}

.nhanso-sharebtn i {
    font-size: 16px;
}

.nhanso-sharebtn.is-native {
    color: #2a1c00;
    background: linear-gradient(180deg, #f2dca8, #d9b26a);
    border-color: #d9b26a;
}

.nhanso-sharebtn.is-facebook {
    color: #fff;
    background: #1877f2;
    border-color: #1877f2;
}

.nhanso-sharebtn.is-facebook:hover,
.nhanso-sharebtn.is-facebook:focus-visible {
    color: #fff;
    background: #0f66d8;
    border-color: #0f66d8;
}

.nhanso-sharebtn.is-done {
    color: #1d6b3a;
    background: #e6f6ec;
    border-color: #8fd1a6;
}

.nhanso-sharebtn[hidden],
.nhanso-sharesheet__grid li[hidden] {
    display: none;
}

/* The floating button sits just above "back to top", out of the way until
   the reader has scrolled, and steps aside over the footer. */
.nhanso-sharefab {
    position: fixed;
    right: 15px;
    bottom: 66px;
    z-index: 996;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 18px 0 15px;
    font: inherit;
    font-size: 14.5px;
    font-weight: 800;
    color: #f6efe2;
    background: linear-gradient(160deg, #24365a, #101a2c);
    border: 1px solid rgba(217, 178, 106, .55);
    border-radius: 999px;
    box-shadow: 0 14px 30px -12px rgba(16, 26, 44, .7);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .25s, transform .25s, visibility .25s, box-shadow .2s;
}

.nhanso-sharefab i {
    font-size: 16px;
    color: #f2dca8;
}

.nhanso-sharefab.is-shown {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.nhanso-sharefab:hover,
.nhanso-sharefab:focus-visible {
    box-shadow: 0 0 0 3px rgba(217, 178, 106, .35), 0 14px 30px -12px rgba(16, 26, 44, .7);
}

html.is-sharing {
    overflow: hidden;
}

.nhanso-sharesheet {
    width: min(520px, calc(100vw - 32px));
    max-width: none;
    max-height: calc(100dvh - 32px);
    padding: 0;
    overflow: auto;
    color: #eef1f7;
    background:
        radial-gradient(ellipse 70% 60% at 100% 0%, rgba(217, 178, 106, .18), transparent 60%),
        linear-gradient(165deg, #1f2f50, #0f1828);
    border: 1px solid rgba(217, 178, 106, .35);
    border-radius: 24px;
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8);
}

.nhanso-sharesheet::backdrop {
    background: rgba(9, 14, 26, .6);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.nhanso-sharesheet[open] {
    animation: nhanso-sheet-in .24s cubic-bezier(.2, .8, .2, 1);
}

@keyframes nhanso-sheet-in {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.98);
    }
}

.nhanso-sharesheet__inner {
    padding: 18px 20px 20px;
}

.nhanso-sharesheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 14px;
}

.nhanso-sharesheet__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #f2dca8;
}

.nhanso-sharesheet__close {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    color: #eef1f7;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    cursor: pointer;
}

.nhanso-sharesheet__close:hover,
.nhanso-sharesheet__close:focus-visible {
    background: rgba(255, 255, 255, .16);
}

.nhanso-sharesheet__card {
    margin: 0 0 18px;
    overflow: hidden;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
}

.nhanso-sharesheet__card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 630;
    background: #16223a;
}

.nhanso-sharesheet__card figcaption {
    display: grid;
    gap: 3px;
    padding: 12px 14px 13px;
}

.nhanso-sharesheet__host {
    font-size: 11.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(238, 241, 247, .55);
}

.nhanso-sharesheet__card b {
    font-size: 15.5px;
    line-height: 1.35;
    color: #fff;
}

.nhanso-sharesheet__text {
    display: -webkit-box;
    overflow: hidden;
    font-size: 13.5px;
    line-height: 1.5;
    color: rgba(238, 241, 247, .72);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.nhanso-sharesheet__grid {
    display: grid;
    /* Five tiles on a computer, eight on a phone (the share sheet, Messenger
       and the picture appear there): let the row count follow. */
    grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
    gap: 14px 8px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.nhanso-sharetile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 4px 2px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    color: #eef1f7;
    text-decoration: none;
    background: none;
    border: 0;
    border-radius: 14px;
    cursor: pointer;
}

.nhanso-sharetile:hover,
.nhanso-sharetile:focus-visible {
    color: #fff;
}

.nhanso-sharetile__icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    font-size: 22px;
    color: #fff;
    background: rgba(255, 255, 255, .1);
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
    transition: transform .15s, box-shadow .15s;
}

.nhanso-sharetile:hover .nhanso-sharetile__icon,
.nhanso-sharetile:focus-visible .nhanso-sharetile__icon {
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 10px 22px -10px rgba(0, 0, 0, .7);
}

.nhanso-sharetile.is-native .nhanso-sharetile__icon { color: #2a1c00; background: linear-gradient(180deg, #f2dca8, #d9b26a); }
.nhanso-sharetile.is-files .nhanso-sharetile__icon { background: linear-gradient(160deg, #8b6cf0, #5a3fc4); }
.nhanso-sharetile.is-facebook .nhanso-sharetile__icon { background: #1877f2; }
.nhanso-sharetile.is-messenger .nhanso-sharetile__icon { background: linear-gradient(160deg, #00b2ff, #006aff 60%, #a033ff); }
.nhanso-sharetile.is-x .nhanso-sharetile__icon { background: #000; }
.nhanso-sharetile.is-telegram .nhanso-sharetile__icon { background: #27a7e7; }
.nhanso-sharetile.is-email .nhanso-sharetile__icon { background: #5b6b86; }
.nhanso-sharetile.is-download .nhanso-sharetile__icon { background: #2f8f5b; }

.nhanso-sharesheet__link {
    display: flex;
    gap: 8px;
    padding: 6px;
    background: rgba(0, 0, 0, .25);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
}

.nhanso-sharesheet__link input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 12px;
    font-size: 14px;
    color: rgba(238, 241, 247, .85);
    background: transparent;
    border: 0;
    outline: 0;
}

.nhanso-sharesheet__link .nhanso-sharebtn {
    flex: 0 0 auto;
    color: #2a1c00;
    background: linear-gradient(180deg, #f2dca8, #d9b26a);
    border-color: #d9b26a;
}

.nhanso-sharesheet__link .nhanso-sharebtn.is-done {
    color: #1d6b3a;
    background: #e6f6ec;
    border-color: #8fd1a6;
}

@media (max-width: 575px) {
    .nhanso-sharebar {
        padding: 14px;
    }

    .nhanso-sharebar__buttons {
        width: 100%;
    }

    .nhanso-sharebar__buttons .nhanso-sharebtn {
        flex: 1 1 auto;
        justify-content: center;
    }

    .nhanso-sharefab {
        width: 46px;
        padding: 0;
        justify-content: center;
    }

    .nhanso-sharefab span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    /* A bottom sheet, the way a phone's own share sheet comes up. */
    .nhanso-sharesheet {
        width: 100%;
        max-height: 92dvh;
        margin: auto 0 0;
        border-width: 1px 0 0;
        border-radius: 24px 24px 0 0;
    }

    .nhanso-sharesheet[open] {
        animation-name: nhanso-sheet-up;
    }

    @keyframes nhanso-sheet-up {
        from {
            transform: translateY(100%);
        }
    }

    .nhanso-sharesheet__inner {
        padding: 14px 16px calc(18px + env(safe-area-inset-bottom));
    }

    .nhanso-sharesheet__inner::before {
        content: "";
        display: block;
        width: 42px;
        height: 4px;
        margin: 0 auto 12px;
        background: rgba(255, 255, 255, .25);
        border-radius: 4px;
    }

    .nhanso-sharetile__icon {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nhanso-sharesheet[open],
    .nhanso-sharefab {
        animation: none;
        transition: none;
    }
}

/* The offer to keep a date: this is mine, or someone I know. */
.nhanso-savebar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin: 0 0 24px;
    padding: 14px 18px;
    background: #fff8e8;
    border: 1px solid #efd9a4;
    border-radius: 16px;
}

.nhanso-savebar[hidden] {
    display: none;
}

.nhanso-savebar p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: #3a3120;
}

.nhanso-savebar p i {
    color: #b0801f;
}

.nhanso-savebar__form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.nhanso-savebar__form input {
    min-width: 0;
    height: 42px;
    padding: 0 12px;
    font-size: 14.5px;
    border: 1px solid #e0caa0;
    border-radius: 10px;
}

.nhanso-savebar__form button,
.nhanso-myday__form button {
    min-height: 42px;
    padding: 8px 16px;
    font-size: 14.5px;
    font-weight: 700;
    color: #fff;
    background: #1d2c4a;
    border: 1px solid #1d2c4a;
    border-radius: 10px;
    cursor: pointer;
}

.nhanso-savebar__form button.is-ghost {
    color: #1d2c4a;
    background: transparent;
}

.nhanso-prefill-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 10px 0 0;
    font-size: 13.5px;
    color: inherit;
    opacity: .85;
}

.nhanso-prefill-note button {
    padding: 0;
    font: inherit;
    font-weight: 700;
    color: inherit;
    text-decoration: underline;
    background: none;
    border: 0;
    cursor: pointer;
}

/* Hôm nay của bạn. */
.nhanso-myday {
    padding: 22px;
    color: #eef1f7;
    background:
        radial-gradient(ellipse 50% 80% at 100% 0%, rgba(217, 178, 106, .16), transparent 60%),
        linear-gradient(160deg, #1d2c4a, #101a2c);
    border-radius: 22px;
    box-shadow: 0 26px 60px -34px rgba(16, 26, 44, .7);
}

.nhanso-myday--empty {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 18px 28px;
    align-items: center;
}

.nhanso-myday__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 16px;
    margin: 0 0 14px;
}

.nhanso-myday__kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #f2dca8;
}

.nhanso-myday__who,
.nhanso-myday__title {
    margin: 0;
    font-size: 15.5px;
    font-weight: 700;
    color: #fff;
}

.nhanso-myday__title {
    margin-top: 6px;
    font-size: 18px;
    line-height: 1.45;
}

.nhanso-myday__note {
    margin: 6px 0 0;
    font-size: 13.5px;
    color: rgba(238, 241, 247, .7);
}

.nhanso-myday__link {
    margin-left: 8px;
    padding: 0;
    font: inherit;
    font-size: 13.5px;
    color: #f2dca8;
    text-decoration: underline;
    background: none;
    border: 0;
    cursor: pointer;
}

.nhanso-myday__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.nhanso-myday a.nhanso-myday__tile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 12px;
    align-items: center;
    padding: 14px;
    color: #eef1f7;
    text-decoration: none;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(217, 178, 106, .28);
    border-radius: 16px;
    transition: background .15s, border-color .15s, transform .15s;
}

.nhanso-myday a.nhanso-myday__tile:hover {
    color: #fff;
    background: rgba(255, 255, 255, .11);
    border-color: rgba(217, 178, 106, .7);
    transform: translateY(-2px);
}

.nhanso-myday__tile b {
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 26px;
    color: #2a1c00;
    background: linear-gradient(180deg, #f2dca8, #d9b26a);
    border-radius: 50%;
}

.nhanso-myday__tile b.is-symbol {
    font-family: inherit;
    font-size: 22px;
}

.nhanso-myday__tile span {
    font-size: 14.5px;
    font-weight: 800;
}

.nhanso-myday__tile em {
    font-size: 12.5px;
    font-style: normal;
    line-height: 1.4;
    color: rgba(238, 241, 247, .72);
}

.nhanso-myday__people {
    margin: 16px 0 0;
}

.nhanso-myday__label {
    margin: 0 0 8px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(238, 241, 247, .65);
}

.nhanso-myday__people ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nhanso-myday__people li {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 99px;
}

.nhanso-myday .nhanso-myday__people li a,
.nhanso-myday .nhanso-myday__people li button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 6px 12px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    color: #eef1f7;
    text-decoration: none;
    background: none;
    border: 0;
    cursor: pointer;
}

.nhanso-myday__people li small {
    font-size: 12px;
    font-weight: 500;
    color: rgba(238, 241, 247, .65);
}

.nhanso-myday .nhanso-myday__people li a:hover,
.nhanso-myday .nhanso-myday__people li button:hover {
    color: #f2dca8;
}

.nhanso-myday .nhanso-myday__people a.nhanso-myday__pair {
    padding: 6px 8px;
    font-size: 12.5px;
    color: #f2dca8;
    border-left: 1px solid rgba(255, 255, 255, .14);
}

.nhanso-myday .nhanso-myday__people li [data-remove] {
    padding: 6px 10px 6px 4px;
    font-size: 16px;
    color: rgba(238, 241, 247, .55);
}

.nhanso-myday__people li.is-add {
    border-style: dashed;
}

.nhanso-myday__adder {
    margin: 12px 0 0;
}

.nhanso-myday__form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.nhanso-myday__form input {
    width: 90px;
    min-width: 0;
    height: 42px;
    padding: 0 10px;
    font-size: 15px;
    color: #182033;
    background: #fff;
    border: 1px solid #d3ccbb;
    border-radius: 10px;
}

.nhanso-myday__form input[name="name"] {
    width: 150px;
}

.nhanso-myday__form input[name="y"] {
    width: 100px;
}

.nhanso-myday .nhanso-myday__form button {
    color: #2a1c00;
    background: linear-gradient(180deg, #f2dca8, #d9b26a);
    border-color: #d9b26a;
}

@media (max-width: 991px) {
    .nhanso-share,
    .nhanso-myday--empty {
        grid-template-columns: minmax(0, 1fr);
    }

    .nhanso-myday__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .nhanso-share,
    .nhanso-myday {
        padding: 18px 16px;
        border-radius: 18px;
    }

    .nhanso-myday a.nhanso-myday__tile {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 6px;
        padding: 12px;
    }

    .nhanso-myday__tile b {
        grid-row: auto;
        width: 40px;
        height: 40px;
        font-size: 21px;
    }

    .nhanso-myday__form input,
    .nhanso-myday__form input[name="y"] {
        flex: 1 1 70px;
        width: auto;
    }

    .nhanso-myday__form input[name="name"] {
        flex-basis: 100%;
    }
}

/* The way to the whole birth profile (template-parts/birth/teaser.php). */
.nhanso-teasers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

a.nhanso-teaser {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 20px;
    color: #182033;
    text-decoration: none;
    background: #fff;
    border: 1px solid #e5e0d4;
    border-left: 4px solid #d9b26a;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(24, 32, 51, .05), 0 14px 34px -22px rgba(24, 32, 51, .35);
    transition: transform .15s, border-color .15s;
}

a.nhanso-teaser:hover {
    color: #182033;
    border-color: #d9b26a;
    transform: translateY(-2px);
}

.nhanso-teaser__kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #8a6420;
}

.nhanso-teaser__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
}

.nhanso-teaser__facts > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
}

.nhanso-teaser__facts b {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    font-size: 14px;
    color: #2a1c00;
    background: linear-gradient(180deg, #f2dca8, #d9b26a);
    border-radius: 50%;
}

.nhanso-teaser__go {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14.5px;
    font-weight: 800;
    color: #b3303d;
}

@media (max-width: 767px) {
    .nhanso-teasers {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --------------------------------------------------------------------------
   "Thêm vào lịch" (template-parts/nhanso-calendar.php)
   -------------------------------------------------------------------------- */
.nhanso-cal-box {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin: 18px 0 0;
    padding: 18px 20px;
    color: #221c2d;
    background: #fff;
    border: 1px solid #e6e0d4;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(34, 28, 45, .05), 0 14px 30px -24px rgba(34, 28, 45, .4);
}

.nhanso-cal-box__icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 48px;
    height: 48px;
    font-size: 22px;
    color: #f1d99c;
    background: linear-gradient(150deg, #2a2340, #110e19);
    border-radius: 14px;
}

.nhanso-cal-box__body {
    min-width: 0;
}

.nhanso-cal-box__title {
    margin: 0 0 2px;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.35;
}

.nhanso-cal-box__lede {
    margin: 0 0 12px;
    font-size: 14.5px;
    line-height: 1.5;
    color: #5b5466;
}

.nhanso-cal-box__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.nhanso-cal-box a.nhanso-cal-box__btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 700;
    color: #221c2d;
    text-decoration: none;
    background: #f6f3ee;
    border: 1px solid #e0d8c8;
    border-radius: 12px;
}

.nhanso-cal-box a.nhanso-cal-box__btn:hover {
    color: #221c2d;
    border-color: #c9a553;
}

.nhanso-cal-box a.nhanso-cal-box__btn.is-primary {
    color: #fff;
    background: #1f1930;
    border-color: #1f1930;
}

.nhanso-cal-box a.nhanso-cal-box__btn.is-primary:hover {
    color: #fff;
    background: #110e19;
}

.nhanso-cal-box__note {
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: #7a7385;
}

.nhanso-cal-box--dark {
    color: #eef1f7;
    background: linear-gradient(160deg, #1d2c4a, #101a2c);
    border-color: transparent;
}

.nhanso-cal-box--dark .nhanso-cal-box__lede,
.nhanso-cal-box--dark .nhanso-cal-box__note {
    color: rgba(238, 241, 247, .72);
}

@media (max-width: 575px) {
    .nhanso-cal-box {
        flex-direction: column;
        gap: 12px;
        padding: 16px;
    }

    .nhanso-cal-box__icon {
        width: 42px;
        height: 42px;
        font-size: 19px;
    }

    .nhanso-cal-box__actions a.nhanso-cal-box__btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   A long reading folded on a phone ([data-clamp], nhanso-social.js)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    [data-clamp].is-clamped {
        max-height: 15em;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
        mask-image: linear-gradient(to bottom, #000 55%, transparent);
    }
}

.nhanso-clamp-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 42px;
    margin: 4px 0 0;
    padding: 8px 16px;
    font: inherit;
    font-size: 14.5px;
    font-weight: 700;
    color: #221c2d;
    cursor: pointer;
    background: #f6f3ee;
    border: 1px solid #e0d8c8;
    border-radius: 999px;
}

/* --------------------------------------------------------------------------
   The logo: a night-sky seal (nhanso_logo_mark()) and a bold wordmark.
   Be Vietnam Pro Bold, cut to the letters of the name
   (scripts/build-fonts.mjs), in a violet-to-gold wash; the tagline in the
   site's own face, spaced out.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: "Nhanso Logo";
    /* ?v= changes with the face (functions.php preloads the same address),
       so a browser holding the old Literata cut fetches the new one. */
    src: url("../fonts/nhanso-logo.woff2?v=2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

#header .logo {
    text-transform: none;
}

#header .logo a {
    gap: 11px;
    text-decoration: none;
}

#header .logo .nhanso-mark {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    filter: drop-shadow(0 2px 5px rgba(43, 30, 110, .3));
    transition: transform .6s cubic-bezier(.2, .8, .2, 1), filter .3s ease;
}

#header .logo a:hover .nhanso-mark {
    transform: rotate(-12deg) scale(1.04);
    filter: drop-shadow(0 6px 16px rgba(201, 150, 60, .45));
}

.nhanso-mark__orbit {
    transform-origin: 32px 32px;
    animation: nhanso-orbit 48s linear infinite;
}

.nhanso-mark__spark {
    transform-origin: 42px 25px;
    animation: nhanso-spark 3.6s ease-in-out infinite;
}

@keyframes nhanso-orbit {
    to { transform: rotate(360deg); }
}

@keyframes nhanso-spark {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .35; transform: scale(.55); }
}

@media (prefers-reduced-motion: reduce) {
    .nhanso-mark__orbit,
    .nhanso-mark__spark {
        animation: none;
    }
}

.nhanso-wordmark {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

#header .logo #LogoTitle {
    display: block;
    font-family: "Nhanso Logo", "Be Vietnam Pro", "Segoe UI", Arial, sans-serif !important;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -.01em;
    white-space: nowrap;
    text-transform: capitalize;
    color: #2b1e6e;
    background: linear-gradient(100deg, #26195f 0%, #5b3fb3 52%, #b8862e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.nhanso-wordmark__tag {
    display: block;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .24em;
    white-space: nowrap;
    text-transform: uppercase;
    color: #a57a2c;
}

@media (min-width: 1200px) and (max-width: 1499px) {
    #header .logo #LogoTitle {
        font-size: 22px;
    }

    #header .logo .nhanso-mark {
        width: 42px;
        height: 42px;
    }
}

@media (max-width: 1199px) {
    #header .logo #LogoTitle {
        font-size: 23px;
    }

    #header .logo .nhanso-mark {
        width: 42px;
        height: 42px;
    }

    #header .logo a {
        gap: 10px;
    }
}

@media (max-width: 359px) {
    .nhanso-wordmark__tag {
        letter-spacing: .16em;
    }
}

/* The menu button matches the seal: violet lines on a pale violet disc. */
.nhanso-header .mobile-nav-toggle {
    color: #2b1e6e;
    background: #f3effb;
    border-radius: 50%;
}

.nhanso-header .navbar-mobile .mobile-nav-toggle {
    color: #fff;
    background: rgba(255, 255, 255, .12);
}

/* Where the related tools sit straight under <main> (the health pages), they
   were a bare <section> and took the legacy 60px section padding; as a <div>
   they keep that room below them explicitly. */
main > .container > .nhanso-related-tools {
    padding-bottom: 56px;
}

/* --------------------------------------------------------------------------
   Mùng một, rằm and the lunar holidays (inc/nhanso-lunar-festivals.php)
   -------------------------------------------------------------------------- */

/* A marked day carries one more line; every cell of its week stretches to
   match, so the row stays an even band (height:1px lets a table cell's
   child take height:100%). */

/* Văn khấn from the lunar pages (template-tool-lunar.php). */

/* ==========================================================================
   Home: "Lịch tâm linh" (template-parts/nhanso-home-ritual.php) — the next
   prayers, the next good days, Tết counting down.
   ========================================================================== */

/* ==========================================================================
   Home sections (front-page.php): one head, one rhythm.

   Every section below "Hôm nay" opens the same way: a small red label, a
   left-aligned h2, one line of lede, and "xem tất cả" on the right. Each
   sits 56px from its neighbours (40px on a phone), white and grey in turn.
   ========================================================================== */
.nhanso-hsec {
    padding: 56px 0;
    background: var(--ns-paper);
}

.nhanso-hsec--alt {
    background: var(--ns-alt);
    border-top: 1px solid var(--ns-line);
    border-bottom: 1px solid var(--ns-line);
}

.nhanso-hsec__head {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    align-items: flex-end;
    justify-content: space-between;
    margin: 0 0 22px;
}

.nhanso-hsec__head .nhanso-eyebrow {
    margin: 0 0 6px;
}

.nhanso-hsec__head h2,
.nhanso-home-today__head h2,
.nhanso-home-ritual__head h2,
.nhanso-tool-copy h2 {
    margin: 0 0 6px;
    font-size: clamp(23px, 2.3vw, 30px);
    font-weight: 700;
    line-height: 1.25;
    color: var(--ns-chrome);
}

.nhanso-hsec__head p:not(.nhanso-eyebrow) {
    margin: 0;
    color: var(--ns-muted);
}

.nhanso-hsec__more {
    display: inline-flex;
    flex: none;
    gap: 6px;
    align-items: center;
    font-weight: 600;
    color: var(--ns-red);
    text-decoration: none;
}

/* "Hôm nay" and "Lịch tâm linh" follow the same head. */

/* The calculator: copy on the left, form on the right. */
.nhanso-tool-strip.nhanso-hsec {
    padding: 56px 0;
}

.nhanso-tool-copy > p {
    margin: 0;
}

/* The label is a <p> too; it stays red like every other section label. */
.nhanso-tool-copy > .nhanso-eyebrow {
    margin: 0 0 6px;
    color: var(--ns-red);
}

/* --- Khám phá ------------------------------------------------------------- */
.nhanso-explore {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .nhanso-explore {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.nhanso-explore__group {
    padding: 18px 18px 10px;
    background: var(--ns-paper);
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-radius-lg);
}

.nhanso-explore__group h3 {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0 0 6px;
    font-size: 17px;
    color: var(--ns-ink);
}

.nhanso-explore__group h3 i {
    color: var(--ns-red);
}

.nhanso-explore ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nhanso-explore li + li {
    border-top: 1px solid var(--ns-line-soft);
}

.nhanso-explore a {
    display: flex;
    gap: 12px;
    align-items: center;
    min-height: 52px;
    padding: 8px 0;
    color: var(--ns-ink);
    text-decoration: none;
}

.nhanso-explore a > i {
    display: grid;
    flex: none;
    place-items: center;
    width: 34px;
    height: 34px;
    font-size: 16px;
    color: var(--ns-red);
    background: var(--ns-red-wash);
    border-radius: 9px;
}

.nhanso-explore b {
    display: block;
    font-size: 15px;
    font-weight: 600;
}

.nhanso-explore small {
    display: block;
    font-size: 13px;
    color: var(--ns-muted);
}

.nhanso-explore a:hover b {
    color: var(--ns-red);
}

/* --- Con số chủ đạo ----------------------------------------------------- */
.nhanso-number-tiles {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nhanso-number-tiles a {
    display: grid;
    gap: 6px;
    align-content: start;
    height: 100%;
    padding: 16px 14px;
    color: var(--ns-ink);
    text-decoration: none;
    background: linear-gradient(160deg, #1f1b16 0%, #2c261d 100%);
    border-radius: var(--ns-radius-lg);
    transition: transform .2s ease, box-shadow .2s ease;
}

.nhanso-number-tiles a:hover {
    transform: translateY(-3px);
    box-shadow: var(--ns-shadow);
}

.nhanso-number-tiles b {
    font-size: 34px;
    line-height: 1;
    color: #c9a86a;
}

.nhanso-number-tiles span {
    font-size: 13.5px;
    line-height: 1.4;
    color: #efe6d2;
}

/* --- Bài viết mới ------------------------------------------------------- */

/* Pinned to the frame, so a tall card picture is cropped, not stretched. */

.nhanso-number-tiles .is-more a {
    align-content: center;
    justify-items: start;
    background: var(--ns-paper);
    border: 1px dashed #c9a86a;
}

.nhanso-number-tiles .is-more span {
    font-size: 14px;
    font-weight: 700;
    color: #8c6a2c;
}

/* Footer on a phone: the two link lists side by side. */
@media (max-width: 767px) {
    .nhanso-footer .footer-top {
        padding: 36px 0 20px;
    }

    .nhanso-footer .footer-links ul li {
        padding: 5px 0;
    }

    .nhanso-footer .footer-links ul a {
        font-size: 14px;
    }
}

/* --- Tablet and phone ----------------------------------------------------- */
@media (max-width: 991px) {
    .nhanso-explore {
        grid-template-columns: 1fr;
    }

    /* A tablet: each group two columns wide. */
    .nhanso-explore ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 20px;
    }

    .nhanso-explore li + li {
        border-top: 0;
    }

    .nhanso-number-tiles {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    

    /* A post as a row: a small picture beside the words. */
    

    

    

    

    
}

@media (max-width: 575px) {
    .nhanso-hsec,
    .nhanso-tool-strip.nhanso-hsec {
        padding: 40px 0;
    }

    .nhanso-hsec__head {
        margin-bottom: 16px;
    }

    .nhanso-hsec__more {
        font-size: 14px;
    }

    

    /* Khám phá on a phone: two columns of names, no gists. */
    .nhanso-explore__group {
        padding: 14px 12px 8px;
    }

    .nhanso-explore ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 10px;
    }

    .nhanso-explore li + li {
        border-top: 0;
    }

    .nhanso-explore a {
        gap: 8px;
        min-height: 48px;
    }

    .nhanso-explore a > i {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }

    .nhanso-explore b {
        font-size: 13.5px;
        line-height: 1.3;
    }

    .nhanso-explore small {
        display: none;
    }

    .nhanso-number-tiles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .nhanso-number-tiles a {
        padding: 12px 10px;
    }

    .nhanso-number-tiles b {
        font-size: 28px;
    }

    .nhanso-number-tiles span {
        font-size: 12px;
    }

    .nhanso-zodiac-mini-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }

    .nhanso-zodiac-mini-grid a {
        padding: 10px 2px;
    }

    .nhanso-zodiac-mini-grid img {
        width: 46px;
        height: 46px;
        margin-bottom: 4px;
    }

    .nhanso-zodiac-mini-grid strong {
        font-size: 12.5px;
    }

    .nhanso-zodiac-mini-grid span {
        font-size: 10.5px;
    }

    

    

    /* Lịch tâm linh: tighter rows. */
    
}


/* Search: the pages a search names, above the tools (search.php). */
.nhanso-search-pages {
    margin: 0 0 28px;
}

.nhanso-search-pages h2 {
    margin: 0 0 12px;
    font-size: 22px;
}

.nhanso-search-pages ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nhanso-search-pages a {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    color: var(--ns-ink);
    text-decoration: none;
    background: var(--ns-paper, #fff);
    border: 1px solid var(--ns-line);
    border-radius: 10px;
}

.nhanso-search-pages a:hover,
.nhanso-search-pages a:focus-visible {
    border-color: var(--ns-red);
}

.nhanso-search-pages span {
    flex: none;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ns-red);
    background: var(--ns-red-wash);
    border-radius: 999px;
}

.nhanso-search-pages b {
    flex: 1;
    font-weight: 600;
}

@media (max-width: 767px) {
    .nhanso-search-pages ul {
        grid-template-columns: minmax(0, 1fr);
    }
}