/* ==========================================================================
   LUNA MOONLIT NIGHT - THEME & GSAP MOTION STYLES
   Bản thiết kế Ánh Trăng Đêm Huyền Ảo cho Luna Rental
   ========================================================================== */

:root {
    --luna-bg-deep: #050b14;
    --luna-bg-midnight: #081226;
    --luna-surface-glass: rgba(12, 24, 46, 0.72);
    --luna-surface-hover: rgba(19, 36, 68, 0.85);
    --luna-border-silver: rgba(226, 232, 240, 0.14);
    --luna-border-glow: rgba(56, 189, 248, 0.3);
    --luna-silver: #f1f5f9;
    --luna-silver-dim: #94a3b8;
    --luna-gold: #fbbf24;
    --luna-gold-glow: rgba(251, 191, 36, 0.45);
    --luna-cyan: #38bdf8;
    --luna-cyan-glow: rgba(56, 189, 248, 0.4);
    --luna-emerald: #10b981;
}

/* Celestial Midnight Background */
html[data-theme="dark"] body.public-site,
body.public-site {
    background: 
        radial-gradient(circle at 80% 120px, rgba(56, 189, 248, 0.15), transparent 450px),
        radial-gradient(circle at 15% 300px, rgba(251, 191, 36, 0.1), transparent 380px),
        linear-gradient(180deg, #050b14 0%, #081226 40%, #060e1d 100%) !important;
    color: var(--luna-silver) !important;
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
}

/* Floating Moon Orb Background Element */
.luna-celestial-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.luna-moon-orb {
    position: absolute;
    top: 40px;
    right: clamp(20px, 8vw, 150px);
    width: clamp(130px, 16vw, 210px);
    height: clamp(130px, 16vw, 210px);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffffff 0%, #fffde6 35%, #f6e8b8 70%, #d4bf88 100%) !important;
    box-shadow: 
        0 0 55px rgba(255, 253, 230, 0.75),
        0 0 120px rgba(56, 189, 248, 0.35),
        inset -18px -18px 40px rgba(130, 110, 75, 0.45) !important;
    opacity: 0.95 !important;
    transform-origin: center center;
    will-change: transform, opacity;
    display: block !important;
}

.luna-moon-halo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 220%;
    height: 220%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(240, 249, 255, 0.3) 0%, rgba(56, 189, 248, 0.15) 35%, transparent 70%);
    pointer-events: none;
    will-change: transform, opacity;
}

/* Ensure UI page sits above celestial canvas */
.ui-page {
    position: relative;
    z-index: 3;
    background: transparent !important;
}

.ui-shell {
    background: transparent !important;
}

/* ==========================================================================
   NAVIGATION BAR (Elevated Luxury Moonlit Glass Nav)
   ========================================================================== */
.public-site .public-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    max-width: 1260px !important;
    margin: 18px auto 32px !important;
    padding: 12px 24px !important;
    border-radius: 999px !important;
    background: rgba(8, 17, 34, 0.78) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: 
        0 16px 45px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 0 25px rgba(56, 189, 248, 0.08) !important;
    position: sticky !important;
    top: 16px !important;
    z-index: 100 !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.public-site .public-nav.nav--scrolled {
    padding: 8px 20px !important;
    background: rgba(5, 11, 22, 0.94) !important;
    border-color: rgba(56, 189, 248, 0.35) !important;
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.7),
        0 0 20px rgba(56, 189, 248, 0.15) !important;
    transform: translateY(-2px);
}

/* Brand Link & Typography */
.public-brand-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-decoration: none !important;
    color: inherit !important;
    transition: transform 0.3s ease !important;
}

.public-brand-link:hover {
    transform: scale(1.02);
}

.public-brand-logo {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    object-fit: contain !important;
    background: #050b14 !important;
    border: 1px solid rgba(56, 189, 248, 0.4) !important;
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.3) !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease !important;
}

.public-brand-link:hover .public-brand-logo {
    transform: rotate(6deg) scale(1.08) !important;
    box-shadow: 0 0 24px rgba(56, 189, 248, 0.55), 0 0 15px rgba(251, 191, 36, 0.35) !important;
}

.public-brand-moon-icon {
    font-size: 1.6rem;
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.6));
}

.public-brand-identity {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
}

.public-brand-title {
    font-size: 1.05rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.08em !important;
    background: linear-gradient(135deg, #ffffff 40%, #fde68a 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
}

.public-brand-subtitle {
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    color: var(--luna-cyan) !important;
    text-transform: uppercase !important;
}

/* Center Nav Items */
.public-nav-center {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(14, 27, 52, 0.5) !important;
    padding: 5px 8px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.public-site .public-nav-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 16px !important;
    border-radius: 999px !important;
    color: var(--luna-silver-dim) !important;
    font-size: 0.92rem !important;
    font-weight: 650 !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    position: relative !important;
}

.nav-link-dot {
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: transparent !important;
    transition: all 0.25s ease !important;
}

.public-site .public-nav-link:hover {
    color: #ffffff !important;
    background: rgba(56, 189, 248, 0.14) !important;
}

.public-site .public-nav-link:hover .nav-link-dot {
    background: var(--luna-cyan) !important;
    box-shadow: 0 0 8px var(--luna-cyan) !important;
}

.public-site .public-nav-link.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.25), rgba(56, 189, 248, 0.1)) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.15) !important;
}

.public-site .public-nav-link.active .nav-link-dot {
    background: var(--luna-gold) !important;
    box-shadow: 0 0 8px var(--luna-gold) !important;
}

/* Nav Right (Meta & CTA) */
.public-nav-right {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.public-site .public-theme-toggle {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: rgba(14, 27, 52, 0.75) !important;
    border: 1px solid var(--luna-border-silver) !important;
    color: var(--luna-gold) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 16px !important;
    transition: all 0.3s ease !important;
}

.public-site .public-theme-toggle:hover {
    transform: rotate(30deg) scale(1.08) !important;
    border-color: var(--luna-gold) !important;
    box-shadow: 0 0 12px var(--luna-gold-glow) !important;
}

.public-site .locale-switcher {
    border-radius: 999px !important;
    padding: 3px !important;
    background: rgba(14, 27, 52, 0.75) !important;
    border: 1px solid var(--luna-border-silver) !important;
}

.public-site .locale-switcher__link {
    padding: 6px 12px !important;
    font-size: 0.78rem !important;
    font-weight: 750 !important;
    border-radius: 999px !important;
    transition: all 0.25s ease !important;
}

.public-site .locale-switcher__link.is-active {
    background: linear-gradient(135deg, #0284c7, #0369a1) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(2, 132, 199, 0.4) !important;
}

/* Standout Golden Moon CTA Button */
.luna-nav-cta-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 20px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #ffffff !important;
    font-size: 0.88rem !important;
    font-weight: 750 !important;
    text-decoration: none !important;
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    white-space: nowrap !important;
}

.luna-nav-cta-btn:hover {
    transform: translateY(-2px) scale(1.03) !important;
    box-shadow: 0 10px 28px rgba(245, 158, 11, 0.65), 0 0 15px rgba(251, 191, 36, 0.4) !important;
}

.luna-nav-cta-btn .cta-arrow {
    transition: transform 0.25s ease !important;
}

.luna-nav-cta-btn:hover .cta-arrow {
    transform: translateX(4px) !important;
}

@media (max-width: 992px) {
    .public-site .public-nav {
        border-radius: 20px !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        padding: 14px 18px !important;
    }
    .public-nav-center {
        order: 3;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }
    .luna-nav-cta-btn {
        display: none !important;
    }
}

/* ==========================================================================
   HERO SECTION (LUNA MOONLIT HERO)
   ========================================================================== */
.public-site .lunar-hero {
    background: 
        radial-gradient(circle at 10% 20%, rgba(56, 189, 248, 0.12), transparent 45%),
        radial-gradient(circle at 85% 30%, rgba(251, 191, 36, 0.08), transparent 40%),
        linear-gradient(145deg, rgba(12, 24, 46, 0.85) 0%, rgba(7, 15, 30, 0.95) 100%) !important;
    border: 1px solid var(--luna-border-silver) !important;
    border-radius: 28px !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    position: relative;
    overflow: hidden;
}

.public-site .lunar-hero::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.12), transparent 70%);
    pointer-events: none;
}

.public-site .lunar-eyebrow {
    color: var(--luna-cyan) !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase;
    font-weight: 800;
}

.public-site .lunar-eyebrow > span {
    background: var(--luna-gold) !important;
    box-shadow: 0 0 10px var(--luna-gold-glow) !important;
}

.public-site .lunar-hero-title {
    color: #ffffff !important;
    font-size: clamp(2.4rem, 4.5vw, 4rem) !important;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.public-site .lunar-hero-title span.luna-text-highlight {
    background: linear-gradient(135deg, #ffffff 20%, #fde68a 60%, #38bdf8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.public-site .lunar-hero-copy {
    color: var(--luna-silver-dim) !important;
    font-size: 1.08rem !important;
    line-height: 1.7;
}

/* Moonlit Search Bar */
.public-site .lunar-search-panel {
    background: rgba(10, 20, 38, 0.88) !important;
    border: 1px solid var(--luna-border-silver) !important;
    border-radius: 20px !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(16px);
}

.public-site .lunar-search-field {
    border-color: rgba(226, 232, 240, 0.1) !important;
}

.public-site .lunar-search-field small {
    color: var(--luna-silver-dim) !important;
    font-weight: 600;
}

.public-site .lunar-search-field strong {
    color: var(--luna-silver) !important;
}

.public-site .lunar-search-dot {
    background: var(--luna-cyan) !important;
    box-shadow: 0 0 10px var(--luna-cyan-glow) !important;
}

.public-site .lunar-search-dot-gold {
    background: var(--luna-gold) !important;
    box-shadow: 0 0 10px var(--luna-gold-glow) !important;
}

.public-site .lunar-search-panel .ui-btn-primary {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4) !important;
    font-weight: 700;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.public-site .lunar-search-panel .ui-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(245, 158, 11, 0.6) !important;
}

.public-site .lunar-proof-row {
    color: var(--luna-silver-dim) !important;
}

/* Status Card */
.public-site .lunar-status-card {
    background: rgba(14, 27, 52, 0.85) !important;
    border: 1px solid var(--luna-border-silver) !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(16px);
}

.public-site .lunar-status-card h2 {
    color: #ffffff !important;
}

.public-site .lunar-status-card p,
.public-site .lunar-status-card ul li {
    color: var(--luna-silver-dim) !important;
}

.public-site .lunar-status-head span {
    color: var(--luna-silver-dim);
}

.public-site .lunar-status-head b {
    color: var(--luna-gold);
}

.luna-pulse-beacon {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--luna-emerald);
    box-shadow: 0 0 12px var(--luna-emerald);
    margin-right: 8px;
    animation: luna-pulse 2s infinite ease-in-out;
}

@keyframes luna-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.65; }
}

/* ==========================================================================
   TRUST SIGNALS
   ========================================================================== */
.public-site .lunar-trust {
    background: rgba(10, 20, 38, 0.8) !important;
    border: 1px solid var(--luna-border-silver) !important;
    border-radius: 22px !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(14px);
}

.public-site .lunar-trust .home-trust-item {
    border-color: rgba(226, 232, 240, 0.08) !important;
}

.public-site .lunar-trust-icon {
    background: rgba(56, 189, 248, 0.12) !important;
    color: var(--luna-cyan) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
}

.public-site .lunar-trust .home-trust-item strong {
    color: #ffffff !important;
}

.public-site .lunar-trust .home-trust-item > div > span {
    color: var(--luna-silver-dim) !important;
}

/* ==========================================================================
   ROOMS SECTION & FILTER
   ========================================================================== */
.public-site .lunar-section-header h2 {
    color: #ffffff !important;
    font-size: 2.2rem;
    font-weight: 800;
}

.public-site .lunar-section-header .ui-muted {
    color: var(--luna-silver-dim) !important;
}

.public-site .lunar-text-link {
    color: var(--luna-cyan) !important;
    font-weight: 700;
    transition: color 0.25s ease;
}

.public-site .lunar-text-link:hover {
    color: var(--luna-gold) !important;
}

.public-site .lunar-filter-card {
    background: rgba(10, 20, 38, 0.82) !important;
    border: 1px solid var(--luna-border-silver) !important;
    border-radius: 22px !important;
    backdrop-filter: blur(14px);
}

.public-site .home-filter-header,
.public-site .home-filter-title {
    color: #ffffff !important;
}

.public-site .home-filter-check {
    color: var(--luna-silver-dim) !important;
}

.public-site .home-price-preset-btn {
    background: rgba(15, 30, 58, 0.7) !important;
    border: 1px solid var(--luna-border-silver) !important;
    color: var(--luna-silver-dim) !important;
    border-radius: 10px !important;
    transition: all 0.2s ease;
}

.public-site .home-price-preset-btn:hover,
.public-site .home-price-preset-btn.home-price-preset--active {
    background: var(--luna-cyan) !important;
    color: #050b14 !important;
    font-weight: 700;
    border-color: var(--luna-cyan) !important;
    box-shadow: 0 4px 15px var(--luna-cyan-glow);
}

.public-site .home-price-display {
    background: rgba(15, 30, 58, 0.85) !important;
    color: var(--luna-silver) !important;
    border: 1px solid var(--luna-border-silver) !important;
}

.public-site .home-rooms-count-text {
    color: var(--luna-silver-dim);
}

/* ==========================================================================
   ROOM CARDS (Moon-Frosted Cards with 3D Depth)
   ========================================================================== */
.public-site .home-room-card {
    background: var(--luna-surface-glass) !important;
    border: 1px solid var(--luna-border-silver) !important;
    border-radius: 22px !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow: hidden;
    position: relative;
    will-change: transform, box-shadow;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.public-site .home-room-card:hover {
    border-color: rgba(56, 189, 248, 0.4) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65), 0 0 25px rgba(56, 189, 248, 0.15) !important;
}

/* Moonbeam light sweep on hover */
.public-site .home-room-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    transform: skewX(-25deg);
    pointer-events: none;
    transition: left 0.75s ease;
}

.public-site .home-room-card:hover::after {
    left: 200%;
}

.public-site .home-room-img-wrap {
    min-height: 210px !important;
    background: linear-gradient(135deg, #09172e, #13274a) !important;
    overflow: hidden;
    position: relative;
}

.public-site .home-room-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.public-site .home-room-card:hover .home-room-img {
    transform: scale(1.06);
}

.public-site .home-room-body {
    padding: 20px !important;
}

.public-site .home-room-name {
    color: #ffffff !important;
    font-size: 1.22rem !important;
    font-weight: 700;
    margin: 8px 0 10px;
}

.public-site .home-room-description {
    color: var(--luna-silver-dim) !important;
    font-size: 0.92rem;
    line-height: 1.6;
}

.public-site .home-room-price {
    background: linear-gradient(135deg, #0f2444, #193863) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    color: #ffffff !important;
    font-weight: 700;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.public-site .home-room-status {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    font-weight: 600;
}

.public-site .home-room-stars {
    color: var(--luna-gold) !important;
    font-weight: 700;
    text-shadow: 0 0 8px var(--luna-gold-glow);
}

.public-site .home-room-reviews {
    color: var(--luna-silver-dim) !important;
}

.public-site .home-amenity {
    background: rgba(15, 30, 58, 0.8) !important;
    color: var(--luna-silver) !important;
    border: 1px solid var(--luna-border-silver) !important;
    border-radius: 8px !important;
    padding: 4px 10px !important;
    font-size: 0.8rem;
}

.public-site .home-room-action {
    display: block;
    text-align: center;
    margin-top: 16px;
    padding: 11px 18px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.15), rgba(56, 189, 248, 0.05));
    border: 1px solid rgba(56, 189, 248, 0.35);
    color: #ffffff !important;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

.public-site .home-room-card:hover .home-room-action {
    background: linear-gradient(135deg, #0284c7, #0369a1);
    border-color: #38bdf8;
    box-shadow: 0 8px 25px rgba(2, 132, 199, 0.5);
    transform: translateY(-2px);
}

.public-site .home-load-more-btn {
    background: rgba(14, 28, 54, 0.85) !important;
    border: 1px solid var(--luna-border-silver) !important;
    color: var(--luna-silver) !important;
    border-radius: 14px !important;
    padding: 12px 28px !important;
    font-weight: 700;
    transition: all 0.3s ease;
}

.public-site .home-load-more-btn:hover {
    background: rgba(56, 189, 248, 0.15) !important;
    border-color: var(--luna-cyan) !important;
    box-shadow: 0 8px 25px var(--luna-cyan-glow);
}

/* ==========================================================================
   FOOTER (Midnight Obsidian)
   ========================================================================== */
/* ==========================================================================
   ULTIMATE CELESTIAL FOOTER & HEADER BADGE
   ========================================================================== */
.luna-nav-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    background: rgba(16, 185, 129, 0.12) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    color: #34d399 !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
}

.public-site .luna-ultimate-footer {
    position: relative !important;
    margin-top: 60px !important;
    padding: 48px 36px 28px !important;
    border-radius: 36px 36px 0 0 !important;
    background: 
        radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.14), transparent 60%),
        radial-gradient(circle at 85% 30%, rgba(251, 191, 36, 0.08), transparent 45%),
        linear-gradient(180deg, #09152b 0%, #040913 100%) !important;
    border: 1px solid rgba(226, 232, 240, 0.15) !important;
    border-bottom: none !important;
    box-shadow: 0 -25px 80px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(20px);
    overflow: hidden;
}

.luna-footer-horizon-glow {
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.7), rgba(251, 191, 36, 0.6), transparent);
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.6);
}

.luna-footer-grid {
    display: grid !important;
    grid-template-columns: 1.35fr 1fr 1.15fr 1.1fr !important;
    gap: 32px !important;
    align-items: start !important;
}

.luna-footer-brand-header {
    margin-bottom: 14px;
}

.luna-footer-manifesto {
    color: var(--luna-silver-dim) !important;
    font-size: 0.92rem;
    line-height: 1.65;
    margin: 0 0 18px !important;
}

.luna-footer-trust-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.luna-trust-chip {
    font-size: 0.76rem;
    font-weight: 650;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(14, 27, 52, 0.7);
    border: 1px solid var(--luna-border-silver);
    color: var(--luna-silver);
}

.luna-footer-heading {
    color: #ffffff !important;
    font-size: 1.05rem !important;
    font-weight: 750 !important;
    margin: 0 0 16px !important;
    letter-spacing: -0.01em;
}

.luna-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.luna-footer-link {
    color: var(--luna-silver-dim) !important;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 550;
    transition: all 0.25s ease;
    display: inline-block;
}

.luna-footer-link:hover {
    color: var(--luna-cyan) !important;
    transform: translateX(4px);
}

/* Hotline Card in Footer */
.luna-footer-hotline-card {
    background: rgba(12, 23, 44, 0.75);
    border: 1px solid var(--luna-border-silver);
    border-radius: 18px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.luna-hotline-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #34d399;
}

.luna-hotline-line {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
}

.luna-hotline-line a {
    color: #ffffff !important;
    text-decoration: none;
    transition: color 0.2s ease;
}

.luna-hotline-line a:hover {
    color: var(--luna-gold) !important;
}

.luna-hotline-email {
    margin: 0;
    font-size: 0.85rem;
    color: var(--luna-cyan);
}

.luna-footer-address {
    margin: 0;
    font-size: 0.8rem;
    color: var(--luna-silver-dim);
    line-height: 1.5;
}

/* QR & Interactive Card */
.luna-footer-qr-card {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.14), rgba(12, 24, 46, 0.85));
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    margin-bottom: 16px;
}

.luna-footer-qr-card:hover {
    transform: translateY(-3px);
    border-color: var(--luna-cyan);
    box-shadow: 0 16px 35px rgba(56, 189, 248, 0.25);
}

.luna-qr-visual {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.luna-qr-icon {
    font-size: 2rem;
    filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.5));
}

.luna-qr-text {
    display: flex;
    flex-direction: column;
}

.luna-qr-text strong {
    color: #ffffff;
    font-size: 0.92rem;
}

.luna-qr-text small {
    color: var(--luna-silver-dim);
    font-size: 0.78rem;
}

.luna-qr-action-btn {
    display: block;
    text-align: center;
    padding: 8px 14px;
    border-radius: 10px;
    background: linear-gradient(135deg, #0284c7, #0369a1);
    color: #ffffff !important;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35);
    transition: transform 0.2s ease;
}

.luna-qr-action-btn:hover {
    transform: scale(1.02);
}

/* VIP Newsletter */
.luna-newsletter-label {
    display: block;
    color: var(--luna-silver-dim);
    font-size: 0.78rem;
    margin-bottom: 6px;
}

.luna-newsletter-input-wrap {
    display: flex;
    align-items: center;
    background: rgba(14, 27, 52, 0.85);
    border: 1px solid var(--luna-border-silver);
    border-radius: 12px;
    overflow: hidden;
}

.luna-newsletter-input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 9px 12px;
    color: #ffffff;
    font-size: 0.85rem;
    outline: none;
}

.luna-newsletter-btn {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border: none;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.82rem;
    padding: 9px 16px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.luna-newsletter-btn:hover {
    background: #d97706;
}

/* Footer Bottom Bar */
.luna-footer-bottom-bar {
    margin-top: 32px !important;
    padding-top: 20px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.85rem;
}

.luna-footer-bottom-left {
    color: var(--luna-silver-dim);
}

.luna-footer-bottom-right {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--luna-silver-dim);
}

.luna-footer-bottom-right a {
    color: var(--luna-silver-dim);
    text-decoration: none;
    transition: color 0.2s ease;
}

.luna-footer-bottom-right a:hover {
    color: var(--luna-cyan);
}

.luna-system-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #34d399;
    font-size: 0.78rem;
    font-weight: 600;
}

.luna-divider {
    color: rgba(255, 255, 255, 0.2);
}

@media (max-width: 1024px) {
    .luna-footer-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 640px) {
    .luna-footer-grid {
        grid-template-columns: 1fr !important;
    }
    .luna-nav-badge {
        display: none !important;
    }
}

/* ==========================================================================
   ROOMS PAGE & FILTER (Bản danh sách phòng /rooms)
   ========================================================================== */
.public-site .ui-toolbar {
    margin-bottom: 24px;
    padding: 20px 24px;
    background: rgba(12, 24, 46, 0.75);
    border: 1px solid var(--luna-border-silver);
    border-radius: 20px;
    backdrop-filter: blur(16px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.public-site .ui-toolbar h2 {
    color: #ffffff !important;
    font-size: 1.85rem;
    font-weight: 800;
    margin: 4px 0 0;
}

.public-site .ui-toolbar .ui-kicker {
    color: var(--luna-cyan) !important;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.public-site .ui-form-card.ui-filter {
    background: rgba(10, 20, 38, 0.85) !important;
    border: 1px solid var(--luna-border-silver) !important;
    border-radius: 20px !important;
    padding: 20px !important;
    backdrop-filter: blur(16px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4) !important;
    margin-bottom: 30px;
}

.public-site .ui-filter .ui-input,
.public-site .ui-filter .ui-select {
    background: rgba(15, 30, 58, 0.8) !important;
    border: 1px solid var(--luna-border-silver) !important;
    color: var(--luna-silver) !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
}

.public-site .ui-filter .ui-input:focus,
.public-site .ui-filter .ui-select:focus {
    border-color: var(--luna-cyan) !important;
    box-shadow: 0 0 12px var(--luna-cyan-glow) !important;
    outline: none;
}

.public-site .ui-filter .ui-btn-primary {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 700;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px var(--luna-gold-glow) !important;
    cursor: pointer;
    transition: transform 0.25s ease;
}

.public-site .ui-filter .ui-btn-primary:hover {
    transform: translateY(-2px);
}

/* Beautiful Room Placeholder (Thay thế hoàn toàn khối xám "Không có ảnh") */
.luna-room-placeholder,
.home-room-image-empty {
    width: 100%;
    min-height: 200px;
    height: 100%;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: 
        radial-gradient(circle at 50% 35%, rgba(56, 189, 248, 0.22), transparent 60%),
        linear-gradient(135deg, #09172e 0%, #112548 100%) !important;
    position: relative;
    overflow: hidden;
    color: var(--luna-silver) !important;
}

.luna-room-placeholder::before,
.home-room-image-empty::before {
    content: "🌙";
    font-size: 2.4rem;
    filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.7));
    animation: luna-float 4s ease-in-out infinite;
}

.luna-room-badge-moon {
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--luna-cyan);
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.3);
    padding: 3px 12px;
    border-radius: 999px;
}

.luna-placeholder-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--luna-silver-dim);
}

@keyframes luna-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* ==========================================================================
   UNIVERSAL INFO & FORM CARDS (Sửa triệt để lỗi chữ trắng trên nền trắng)
   ========================================================================== */
.public-site .ui-info-card,
.public-site .ui-form-card,
.public-site .ui-card {
    background: rgba(12, 24, 46, 0.88) !important;
    border: 1px solid var(--luna-border-silver) !important;
    border-radius: 22px !important;
    color: var(--luna-silver) !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(16px);
}

.public-site .ui-info-card h2,
.public-site .ui-info-card h3,
.public-site .ui-info-card h4,
.public-site .ui-form-card h2,
.public-site .ui-form-card h3,
.public-site .ui-card h2,
.public-site .ui-card h3 {
    color: #ffffff !important;
    font-weight: 700;
}

.public-site .ui-info-card p,
.public-site .ui-info-card .muted,
.public-site .ui-form-card p,
.public-site .ui-form-card .muted,
.public-site .ui-card p {
    color: var(--luna-silver-dim) !important;
}

/* ==========================================================================
   MAP PAGE & FULL WIDTH MAP (Bản đồ Full Chiều Rộng)
   ========================================================================== */
.public-site .public-map-hero {
    background: 
        radial-gradient(circle at 8% 25%, rgba(56, 189, 248, 0.16), transparent 45%),
        linear-gradient(145deg, rgba(14, 27, 52, 0.92) 0%, rgba(8, 16, 32, 0.98) 100%) !important;
    border: 1px solid var(--luna-border-silver) !important;
    border-radius: 24px !important;
    padding: 32px 36px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(16px);
    margin-bottom: 24px !important;
}

.public-site .public-map-title {
    color: #ffffff !important;
    font-size: clamp(1.8rem, 3.5vw, 2.4rem) !important;
    font-weight: 800 !important;
    margin: 6px 0 12px !important;
    letter-spacing: -0.025em;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.public-site .public-map-copy {
    color: var(--luna-silver-dim) !important;
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
    margin: 0 !important;
    max-width: 800px;
}

.public-site .public-map-frame {
    width: 100% !important;
    border-radius: 24px !important;
    border: 1px solid var(--luna-border-silver) !important;
    background: rgba(8, 16, 32, 0.95) !important;
    box-shadow: 0 25px 65px rgba(0, 0, 0, 0.65), 0 0 30px rgba(56, 189, 248, 0.12) !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin-top: 16px;
    backdrop-filter: blur(16px);
}

.public-site .public-map-frame iframe {
    display: block !important;
    width: 100% !important;
    min-height: 550px !important;
    height: 70vh !important;
    max-height: 800px !important;
    border: 0 !important;
    border-radius: 24px !important;
}

/* Mobile Responsiveness */
@media (max-width: 800px) {
    .luna-moon-orb {
        top: 25px;
        right: 20px;
        width: 100px;
        height: 100px;
        opacity: 0.8;
    }
}

@media (prefers-reduced-motion: reduce) {
    .luna-moon-orb,
    .luna-moon-halo,
    .luna-pulse-beacon,
    .home-room-card {
        animation: none !important;
        transition: none !important;
    }
}