.hero-night {
    --night: #131a24;
    background: linear-gradient(#0a0e15 0%, #10161f 45%, #131a24 72%);
    isolation: isolate;
    min-height: min(100svh, 980px);
    color: #f1f3f6;
    margin-top: -56px;
}
.hero-night .hero-copy { padding-top: calc(5rem + 56px); }
@media (min-width: 640px) {
    .hero-night .hero-copy { padding-top: calc(6rem + 56px); }
}
@media (min-width: 768px) {
    .hero-night { margin-top: -64px; }
    .hero-night .hero-copy { padding-top: calc(6.5rem + 64px); }
}
.hero-night .hero-stage { position: absolute; inset: 0; }
.hero-night .hero-stage .crew {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}
.hero-night .stars,
.hero-night .threads {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    pointer-events: none;
}
.hero-night .threads { z-index: 2; }
.hero-night .astr-star {
    position: absolute;
    z-index: 2;
    left: 74%;
    top: 200px;
    width: 80px;
    height: 80px;
    margin: -40px 0 0 -40px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 35%, #fffdf4 0%, #fdf6dd 45%, #f3e2ac 78%, #e8d097 100%);
    box-shadow: 0 0 60px rgba(253, 240, 200, 0.6), 0 0 160px rgba(253, 240, 200, 0.35), 0 0 260px rgba(253, 240, 200, 0.18);
    display: grid;
    place-items: center;
    pointer-events: none;
}
.hero-night .astr-star::before {
    content: "";
    position: absolute;
    inset: -160px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(246, 220, 150, 0.28), rgba(246, 220, 150, 0.1) 55%, transparent 75%);
    display: block;
}
.hero-night .astr-star img {
    position: relative;
    width: 46px;
    height: 46px;
    object-fit: contain;
    image-rendering: auto;
    border-radius: 14px;
}
.hero-night .twinkle {
    position: absolute;
    width: 3px;
    height: 3px;
    margin: -1.5px;
    border-radius: 50%;
    background: #f4f6fa;
    opacity: 0.15;
    box-shadow: 0 0 6px rgba(244, 246, 250, 0.6);
    animation: hero-twinkle 5.6s ease-in-out infinite;
    pointer-events: none;
}
.hero-night.is-paused .twinkle,
.hero-night.is-paused .astr-star { animation-play-state: paused; }
@keyframes hero-twinkle {
    0%, 100% { opacity: 0.12; transform: scale(0.8); }
    50% { opacity: 0.85; transform: scale(1.2); }
}
.hero-night .crew {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-width: 100%;
    aspect-ratio: 1047 / 240;
    min-height: 180px;
    max-height: 280px;
    background: var(--night);
}
.hero-night .crew > img,
.hero-night .crew > canvas {
    position: absolute;
    left: 0;
    bottom: 0;
    max-width: none;
    image-rendering: pixelated;
}
.hero-night .crew > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left bottom;
}
.hero-night .crew > canvas {
    font-family: Roboto, "Be Vietnam Pro", sans-serif;
    visibility: hidden;
}
.hero-night .crew.is-live > img { visibility: hidden; }
.hero-night .crew.is-live > canvas { visibility: visible; }
.hero-night .hero-text-card {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
.hero-night h1 { color: #f8fafc !important; }
.hero-night h1 span { color: #f5d78e !important; }
.hero-night .hero-text-card p { color: #cbd5e1 !important; }
.hero-night .hero-kicker {
    background: rgba(255,255,255,.1) !important;
    color: #e2e8f0 !important;
}
@media (min-width: 901px) {
    .hero-night .crew { max-height: clamp(240px, 32vh, 360px); }
    .hero-night .hero-copy {
        padding-top: calc(6.5rem + 64px);
        padding-bottom: 340px;
    }
}
@media (max-width: 900px) {
    .hero-night { min-height: 0; }
    .hero-night .hero-stage { position: relative; inset: auto; height: 300px; }
    .hero-night .crew { min-height: 140px; max-height: 190px; }
    .hero-night .astr-star {
        left: 78%;
        top: 56px;
        width: 40px;
        height: 40px;
        margin: -20px 0 0 -20px;
    }
    .hero-night .astr-star::before { inset: -60px; }
    .hero-night .astr-star img { width: 26px; height: 26px; border-radius: 8px; }
    .hero-night .hero-copy { padding-top: 4px !important; padding-bottom: 20px; }
}
/* Khung văn phòng pixel ngay trên footer */
.office-live {
    background: #F4EFE2;
    border-top: 1px solid #e5dcc3;
    border-bottom: 1px solid #e5dcc3;
    padding: 48px 0 64px;
}
.office-live__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}
.office-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-family: monospace;
    color: #8a7a52;
}
.office-kicker-dot { width: 10px; height: 10px; background: #20bbc7; }
.office-title {
    margin-top: 12px;
    font-size: clamp(26px, 1.5vw + 18px, 38px);
    line-height: 1.25;
    font-weight: 800;
    color: #1e293b;
    letter-spacing: -0.01em;
}
.office-lede {
    margin-top: 12px;
    font-size: clamp(14px, 0.2vw + 13px, 16px);
    color: #64748b;
    max-width: 560px;
}
.office-frame {
    margin-top: 28px;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e9e3d4;
    box-shadow: 0 20px 50px rgba(60, 50, 20, 0.08);
}
.office-frame-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    border-bottom: 1px solid #f1ead9;
}
.office-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; }
.office-live .crew-office {
    position: relative;
    aspect-ratio: 1006 / 240;
    overflow: hidden;
    background: #F4EFE2;
}
.office-live .crew-office > img,
.office-live .crew-office > canvas {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    display: block;
    image-rendering: pixelated;
}
.office-live .crew-office > canvas {
    font-family: Roboto, "Be Vietnam Pro", sans-serif;
    visibility: hidden;
}
.office-live .crew-office.is-live > img { visibility: hidden; }
.office-live .crew-office.is-live > canvas { visibility: visible; }
.nav-on-night .nav-link { color: #e2e8f0 !important; }
.nav-on-night .nav-link:hover { color: #fff !important; }
.nav-on-night .nav-link.active { color: #fff !important; font-weight: 700; }
.nav-on-night .nav-link.active::after,
.nav-on-night .nav-link.active-underline::after { background: #FBBF24 !important; }
.nav-on-night .site-name { color: #f8fafc !important; }
.nav-on-night .night-fg { color: #e2e8f0 !important; }
.nav-on-night .night-chip { border-color: rgba(255,255,255,.22) !important; background: transparent; }
.nav-on-night #mobile-menu { background: #fff; border-radius: 12px; padding: 4px 14px 12px; margin-top: 8px; }
.nav-on-night #mobile-menu a, .nav-on-night #mobile-menu p, .nav-on-night #mobile-menu button { color: #000 !important; }
.nav-on-night #mobile-menu .text-red-600, .nav-on-night #mobile-menu button.text-red-600 { color: #dc2626 !important; }
.nav-on-night #mobile-menu .text-red-600 .fa-sign-out-alt { color: #dc2626 !important; }
@media (prefers-reduced-motion: reduce) {
    .hero-night .twinkle { animation: none; opacity: 0.45; }
}