/* ====================================================
   FEATURE DETAIL PAGE — GAMING TECH BACKGROUND & EFFECTS
   ==================================================== */

html,
body {
    overflow-x: clip !important;
}

body {
    background-color: var(--bg-dark, #050C16);
    background-image: 
        linear-gradient(to right, rgba(14, 165, 233, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(14, 165, 233, 0.03) 1px, transparent 1px),
        radial-gradient(ellipse at 50% 0%, rgba(14, 165, 233, 0.10) 0%, transparent 65%),
        radial-gradient(ellipse at 50% 50%, rgba(2, 132, 199, 0.08) 0%, transparent 65%),
        radial-gradient(ellipse at 50% 100%, rgba(14, 165, 233, 0.10) 0%, transparent 65%);
    background-size: 36px 36px, 36px 36px, 100% 100%, 100% 100%, 100% 100%;
    background-attachment: fixed;
    color: #E2E8F0;
    font-family: 'Be Vietnam Pro', 'Montserrat', sans-serif;
}

/* Navbar — Blue Ambient Glassmorphism & Centered Logo */
.navbar,
.navbar.scrolled {
    background: rgba(6, 18, 34, 0.88) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-bottom: 1px solid rgba(0, 229, 255, 0.22) !important;
    box-shadow: 0 4px 30px rgba(0, 229, 255, 0.12), inset 0 -1px 0 rgba(0, 229, 255, 0.1) !important;
}
.navbar .nav-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}
.navbar .logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px;
    margin: 0 auto;
    font-size: 1.65rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    color: #fff;
    text-shadow: none;
}
.navbar .logo img,
.logo img,
.logo-img {
    width: 38px !important;
    height: 38px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
}

/* ── Section 1: Hero Section ── */
.feature-hero-clean {
    position: relative;
    padding: 135px 0 75px;
    background: transparent;
    border-bottom: 1px solid rgba(14, 165, 233, 0.15);
    overflow: hidden;
}

/* Static Gentle Background Glows (No flickering / animation) */
.feature-hero-clean::before {
    content: '';
    position: absolute;
    top: -120px;
    left: -80px;
    width: 650px;
    height: 650px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.08) 0%, rgba(14, 165, 233, 0) 70%);
    filter: blur(75px);
    pointer-events: none;
    z-index: 0;
}

.feature-hero-clean::after {
    content: '';
    position: absolute;
    bottom: -160px;
    right: -80px;
    width: 750px;
    height: 750px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 229, 255, 0.12) 0%, rgba(0, 229, 255, 0) 70%);
    filter: blur(85px);
    pointer-events: none;
    z-index: 0;
}

.feature-hero-clean .container {
    position: relative;
    z-index: 1;
}

.feature-hero-clean-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.feature-breadcrumb-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}
.feature-breadcrumb-nav::-webkit-scrollbar {
    display: none;
}
.breadcrumb-home {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.95rem;
    color: #94A3B8;
    text-decoration: none;
    transition: color 0.25s ease;
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
}
.breadcrumb-home:hover {
    color: var(--primary);
}
.breadcrumb-separator {
    font-size: 0.72rem;
    color: rgba(148, 163, 184, 0.45);
    flex-shrink: 0;
}
.feature-quick-links {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    flex-shrink: 0;
}
.feature-nav-pill {
    padding: 7px 16px;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1;
    color: #94A3B8 !important;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    text-decoration: none;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(10px);
    white-space: nowrap;
    flex-shrink: 0;
    overflow: visible;
}
.feature-nav-pill img {
    width: 22px !important;
    height: 22px !important;
    object-fit: contain !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}
.feature-nav-pill img.pill-icon-builder {
    width: 24px !important;
    height: 24px !important;
}
.feature-nav-pill img.pill-icon-switch {
    width: 19px !important;
    height: 19px !important;
}
.feature-nav-pill:hover {
    color: #F8FAFC !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    box-shadow: none;
    transform: translateY(-2px);
}
.feature-nav-pill.active {
    color: #FFFFFF !important;
    background: linear-gradient(135deg, #0284C7, #075985) !important;
    border-color: #7DD3FC !important;
    box-shadow: 0 2px 14px rgba(2, 132, 199, 0.35) !important;
    font-weight: 700;
}
.feature-nav-pill.active img {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.feature-title-clean {
    font-family: var(--font-heading);
    font-size: 2.85rem;
    font-weight: 900;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 16px;
    text-shadow: none;
    white-space: nowrap;
}

.feature-desc-short {
    font-size: 1.05rem; color: #A0AEC0; line-height: 1.7; margin-bottom: 28px;
}
.feature-desc-short strong {
    color: #FFFFFF;
    font-weight: 700;
    text-shadow: none;
}

/* CTA buttons */
.hero-cta-buttons { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.btn-download-now {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 13px 30px; border-radius: var(--radius-md);
    background: linear-gradient(135deg, #00E5FF, #0284C7); color: #031728;
    font-family: var(--font-heading); font-size: .95rem; font-weight: 800;
    text-decoration: none; transition: .3s;
    box-shadow: 0 4px 28px rgba(0, 229, 255, 0.5);
}
.btn-download-now:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 38px rgba(0, 229, 255, 0.75);
}

.btn-contact-admin {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 13px 26px; border-radius: var(--radius-md);
    background: rgba(255,255,255,.07); color: #fff;
    font-family: var(--font-heading); font-size: .95rem; font-weight: 700;
    text-decoration: none; border: 1px solid rgba(0, 229, 255, 0.3); transition: .3s;
    backdrop-filter: blur(12px);
}
.btn-contact-admin:hover {
    background: rgba(0, 229, 255, 0.12);
    border-color: var(--primary); color: var(--primary);
    transform: translateY(-3px);
    box-shadow: 0 5px 25px rgba(0, 229, 255, 0.3);
}

/* UI preview image container */
.feature-ui-preview {
    border-radius: var(--radius-lg); overflow: hidden;
    border: 1.5px solid rgba(0, 229, 255, 0.45);
    box-shadow: 
        0 0 45px rgba(0, 229, 255, 0.35), 
        0 0 90px rgba(0, 229, 255, 0.22), 
        0 20px 50px rgba(0,0,0,.85);
    background: rgba(8, 12, 20, 0.9);
    backdrop-filter: blur(14px);
    transition: .4s ease;
    max-width: 72%;
    margin-left: auto;
    margin-top: 36px;
}
.feature-ui-preview:hover {
    border-color: rgba(0, 229, 255, 0.8);
    box-shadow: 
        0 0 65px rgba(0, 229, 255, 0.55), 
        0 0 110px rgba(0, 229, 255, 0.35), 
        0 25px 65px rgba(0,0,0,.95);
    transform: translateY(-5px) scale(1.015);
}
.feature-ui-img { width: 100%; height: auto; display: block; }

/* ── Section 2: Demo Section ── */
.demo-section {
    position: relative;
    padding: 85px 0 35px;
    background: transparent;
    border-bottom: none;
    overflow: visible;
}

/* Ambient glow orb for Demo section */
.demo-section::before {
    content: '';
    position: absolute;
    top: 25%;
    right: -100px;
    width: 650px;
    height: 650px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.20) 0%, transparent 70%);
    filter: blur(90px);
    pointer-events: none;
}

.demo-section::after {
    content: '';
    position: absolute;
    bottom: 10%;
    left: -120px;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(2, 132, 199, 0.18) 0%, transparent 70%);
    filter: blur(95px);
    pointer-events: none;
}

.demo-section .container {
    position: relative;
    z-index: 1;
    max-width: 1240px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.demo-header { text-align: center; margin-bottom: 55px; }
.demo-header h2 {
    font-family: var(--font-heading); font-size: 2.4rem; font-weight: 900;
    color: #fff; margin-bottom: 12px;
    text-shadow: 0 0 30px rgba(0, 229, 255, 0.35);
}
.demo-header p { font-size: 1rem; color: #A0AEC0; }

.demo-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 40px;
    align-items: start;
}

@media (max-width: 1024px) {
    .demo-grid {
        grid-template-columns: 1fr;
    }
    .demo-right-panel {
        position: static;
    }
}

/* Left column */
.demo-left-column { display: flex; flex-direction: column; }

.demo-category-title {
    font-family: var(--font-heading); font-size: .88rem; font-weight: 800;
    color: var(--primary); letter-spacing: 2.5px; text-transform: uppercase;
    margin: 24px 0 14px;
    padding-left: 8px;
    display: flex; align-items: center; gap: 8px;
    text-shadow: 0 0 12px rgba(0, 229, 255, 0.4);
}
.demo-category-title:first-child { margin-top: 0; }

/* Item capsules with uniform height */
.demo-item-box {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 20px; 
    min-height: 92px;
    box-sizing: border-box;
    background: rgba(10, 15, 24, 0.82);
    border: 1px solid rgba(0, 229, 255, 0.15); 
    border-radius: 14px;
    margin-bottom: 12px; cursor: pointer; transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(14px);
}
.demo-item-box:hover {
    background: rgba(16, 24, 38, 0.92);
    border-color: rgba(0, 229, 255, 0.55); 
    transform: translateX(6px);
    box-shadow: 0 5px 25px rgba(0, 229, 255, 0.2);
}
.demo-item-box.active {
    background: rgba(18, 28, 44, 0.98);
    border: 1.8px solid var(--primary);
    box-shadow: 0 0 28px rgba(0, 229, 255, 0.4), inset 0 0 18px rgba(0, 229, 255, 0.08);
    transform: translateX(6px);
}

.item-play-icon {
    width: 34px; height: 34px; min-width: 34px; border-radius: 50%;
    background: linear-gradient(135deg, #00E5FF, #0284C7); color: #031728;
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem; transition: .3s ease;
    overflow: hidden;
}
.demo-item-box:hover .item-play-icon,
.demo-item-box.active .item-play-icon {
    transform: scale(1.15); 
}

.item-play-icon img,
.item-play-inner-img {
    width: 20px !important; height: 20px !important;
    max-width: 20px !important; max-height: 20px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
}

.item-icon-wrapper {
    width: 60px !important; height: 52px !important; min-width: 60px !important; min-height: 52px !important;
    max-width: 60px !important; max-height: 52px !important;
    flex-shrink: 0 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
}
.item-icon-wrapper img,
.item-standalone-icon,
.item-img-icon {
    width: 58px !important; height: 50px !important;
    max-width: 58px !important; max-height: 50px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    display: block !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
    transition: transform 0.3s ease;
}
.demo-item-box:hover .item-icon-wrapper img,
.demo-item-box.active .item-icon-wrapper img,
.demo-item-box:hover .item-standalone-icon,
.demo-item-box.active .item-standalone-icon,
.demo-item-box:hover .item-img-icon,
.demo-item-box.active .item-img-icon {
    transform: scale(1.08);
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45));
}

.item-text-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.item-title {
    font-family: var(--font-heading); font-size: 1rem; font-weight: 800;
    color: #fff; margin-bottom: 3px;
}
.item-desc { font-size: .84rem; color: #94A3B8; line-height: 1.5; margin: 0; }

.item-action-arrow {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding-left: 8px;
    width: 24px; min-width: 24px;
    position: relative;
}
.item-action-arrow img {
    width: 24px !important; height: 24px !important;
    max-width: 24px !important; max-height: 24px !important;
    object-fit: contain !important;
    display: block !important;
    transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
}
.arrow-icon-default {
    opacity: 0.7;
    filter: drop-shadow(0 0 1px rgba(0, 229, 255, 0.2));
}
.arrow-icon-hover {
    position: absolute; top: 50%; right: 0;
    transform: translateY(-50%);
    opacity: 0;
    filter: drop-shadow(0 0 2px rgba(0, 229, 255, 0.4));
}
.demo-item-box:hover .arrow-icon-default,
.demo-item-box.active .arrow-icon-default {
    opacity: 0;
}
.demo-item-box:hover .arrow-icon-hover,
.demo-item-box.active .arrow-icon-hover {
    opacity: 1;
    transform: translateY(-50%) translateX(3px);
}

/* Right column — sticky video & details */
.demo-right-panel {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 90px !important;
    display: flex !important;
    flex-direction: column !important;
    align-self: start !important;
    z-index: 20 !important;
}

.demo-video-box {
    width: 100%; aspect-ratio: 16/9;
    background: #0B0E14 url('img-card-1.jpg') center/cover no-repeat;
    border-radius: 16px; position: relative; overflow: hidden;
    border: 1.5px solid rgba(0, 229, 255, 0.4);
    box-shadow: 0 0 40px rgba(0, 229, 255, 0.25), 0 20px 45px rgba(0,0,0,.85);
    display: flex; align-items: center; justify-content: center;
}
.demo-video-overlay {
    position: absolute; inset: 0;
    background: rgba(5, 7, 12, 0.55);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; transition: .3s;
}
.demo-video-box:hover .demo-video-overlay { background: rgba(5, 7, 12, 0.3); }

.video-center-btn {
    width: 68px; height: 68px; border-radius: 50%;
    background: linear-gradient(135deg, #00E5FF, #0284C7); color: #031728;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; cursor: pointer;
    box-shadow: 0 0 35px rgba(0, 229, 255, 0.6); transition: .3s;
}
.demo-video-box:hover .video-center-btn {
    transform: scale(1.15);
    box-shadow: 0 0 50px rgba(0, 229, 255, 0.9);
}

/* Active label */
.active-status-label {
    font-size: .78rem; font-weight: 800; color: var(--primary);
    letter-spacing: 2px; text-transform: uppercase;
    margin-top: 22px; margin-bottom: 6px;
    display: flex; align-items: center; gap: 6px;
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.4);
}
.active-feature-name {
    font-family: var(--font-heading);
    font-size: 1.18rem;
    font-weight: 700;
    color: #fff;
    margin-top: 14px;
    margin-bottom: 12px;
    letter-spacing: 0.3px;
    text-shadow: 0 0 15px rgba(0, 229, 255, 0.25);
}

/* Details box */
.active-details-box {
    background: rgba(10, 14, 22, 0.92);
    border: 1px solid rgba(0, 229, 255, 0.25);
    border-left: 4px solid var(--primary);
    border-radius: 12px; padding: 18px 20px;
    backdrop-filter: blur(20px);
    box-shadow: 0 10px 35px rgba(0,0,0,0.65), inset 0 0 25px rgba(0, 229, 255, 0.05);
}
.details-box-subtitle {
    font-size: .88rem; font-weight: 700; color: #fff;
    margin-bottom: 16px; display: flex; align-items: center; gap: 0;
    letter-spacing: 0.2px;
    padding-left: 0;
}
.subtitle-sparkle-star,
.details-box-subtitle i.fa-sparkles,
.details-box-subtitle .sparkle-cyan,
.details-box-subtitle .sparkle-orange {
    color: #00E5FF;
    font-size: .82rem;
    line-height: 1;
    text-shadow: 0 0 6px rgba(0, 229, 255, 0.8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 10px;
    margin-right: 12px;
    flex-shrink: 0;
}

/* Structured Feature Items List (Timeline Clean Cyan Dashed Line & Elegant Dots) */
.details-feature-list {
    display: flex;
    flex-direction: column;
    position: relative;
    padding-left: 0;
}

/* Connecting vertical dashed line centered exactly through dots */
.details-feature-list::before {
    content: '';
    position: absolute;
    top: 9px;
    bottom: 0px;
    left: 5px;
    transform: translateX(-50%);
    width: 0px;
    border-left: 1.5px dashed rgba(0, 229, 255, 0.45);
    z-index: 1;
}

.detail-feature-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
    position: relative;
    padding-bottom: 8px;
}

.detail-feature-row:last-child {
    padding-bottom: 2px;
}

.detail-feature-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 700;
    color: #ffffff;
    position: relative;
    z-index: 2;
}

/* Clean, Non-Glaring Cyan Round Dot */
.detail-dot,
.detail-sparkle-star {
    width: 10px;
    height: 10px;
    box-sizing: border-box;
    border-radius: 50%;
    background: #00E5FF;
    border: 2px solid #0B111E;
    box-shadow: 0 0 3px rgba(0, 229, 255, 0.35);
    display: inline-block;
    flex-shrink: 0;
    position: relative;
    z-index: 3;
    margin-right: 0;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.detail-feature-row:hover .detail-dot {
    transform: scale(1.2);
    box-shadow: 0 0 6px rgba(0, 229, 255, 0.6);
}

.detail-feature-header i,
.detail-feature-header .detail-inline-icon,
.detail-feature-header img {
    width: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
    height: 26px !important;
    max-height: 26px !important;
    object-fit: contain !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    vertical-align: middle;
}

.detail-feature-title {
    color: #FFFFFF;
    font-weight: 700;
    font-size: 0.88rem;
    letter-spacing: 0.2px;
}

.detail-inline-desc {
    font-weight: 400;
    color: #94A3B8;
    font-size: 0.84rem;
    margin-left: 5px;
    vertical-align: baseline;
}

.detail-inline-desc strong {
    color: #FFFFFF;
    font-weight: 700;
}

.detail-feature-desc {
    font-size: 0.80rem;
    color: #94A3B8;
    line-height: 1.52;
    padding-left: 52px;
}

.detail-feature-row:not(:has(.detail-inline-icon, i, img)) .detail-feature-desc {
    padding-left: 18px;
}

.detail-feature-desc strong {
    color: #E2E8F0;
    font-weight: 600;
}

/* Recommended combo mini cards in detail box */
/* Stylized Prominent Combo Mini Cards (Aligned with Timeline Description) */
.combo-recommend-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 12px;
    padding-left: 22px;
    width: 100%;
    box-sizing: border-box;
}

.combo-recommend-card {
    background: rgba(18, 10, 32, 0.92);
    border: 1px solid rgba(192, 132, 252, 0.25);
    border-radius: 12px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    min-width: 0;
    box-sizing: border-box;
}

.combo-recommend-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
}

.combo-recommend-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
}

.combo-recommend-card.card-top1 {
    border-color: rgba(255, 215, 0, 0.35);
    background: linear-gradient(145deg, rgba(30, 20, 10, 0.9), rgba(18, 10, 32, 0.95));
}
.combo-recommend-card.card-top1:hover {
    border-color: #FFD700;
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.25);
}

.combo-recommend-card.card-top2 {
    border-color: rgba(56, 189, 248, 0.35);
    background: linear-gradient(145deg, rgba(14, 25, 40, 0.9), rgba(18, 10, 32, 0.95));
}
.combo-recommend-card.card-top2:hover {
    border-color: #38BDF8;
    box-shadow: 0 6px 20px rgba(56, 189, 248, 0.25);
}

.combo-recommend-card.card-top3 {
    border-color: rgba(249, 115, 22, 0.35);
    background: linear-gradient(145deg, rgba(35, 18, 15, 0.9), rgba(18, 10, 32, 0.95));
}
.combo-recommend-card.card-top3:hover {
    border-color: #FB923C;
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.25);
}

.theme-emerald .combo-recommend-card {
    background: linear-gradient(145deg, rgba(6, 32, 24, 0.92), rgba(10, 20, 25, 0.95)) !important;
    border: 1px solid rgba(52, 211, 153, 0.3) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important;
    padding: 8px 10px !important;
    gap: 10px !important;
    border-radius: 12px !important;
}

.theme-emerald .combo-troop-avatar {
    width: 48px !important;
    height: 48px !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
}

.theme-emerald .combo-recommend-card:hover {
    border-color: #34D399 !important;
    box-shadow: 0 6px 20px rgba(52, 211, 153, 0.25) !important;
    transform: translateY(-2px);
}

.combo-recommend-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    flex-shrink: 0;
    position: relative;
}

.combo-troop-avatar {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    object-fit: cover;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    transition: transform 0.3s ease;
}

.combo-recommend-card:hover .combo-troop-avatar {
    transform: scale(1.06);
}

.combo-recommend-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
    overflow: visible;
}

/* Rank Badges: Stylized Gaming Pills */
.rank-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.60rem;
    font-weight: 900;
    letter-spacing: 0.3px;
    padding: 1.5px 5px;
    border-radius: 4px;
    width: fit-content;
    text-transform: uppercase;
    line-height: 1.2;
    white-space: nowrap;
}

.rank-top1 {
    background: linear-gradient(135deg, #FFDF00 0%, #D97706 100%);
    color: #000000;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    border: 1px solid #FFF380;
}
.rank-top1 .crown-icon {
    display: inline-block;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 1px rgba(0, 0, 0, 0.6));
    transform: scale(1.15);
    line-height: 1;
}

.rank-top2 {
    background: linear-gradient(135deg, #E0F2FE 0%, #38BDF8 100%);
    color: #032B44;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.45);
    border: 1px solid #BAE6FD;
}

.rank-top3 {
    background: linear-gradient(135deg, #FFEDD5 0%, #EA580C 100%);
    color: #431407;
    box-shadow: 0 0 8px rgba(249, 115, 22, 0.45);
    border: 1px solid #FED7AA;
}

.lineup-role-label {
    font-size: 0.72rem;
    color: #94A3B8;
    font-weight: 600;
    line-height: 1.2;
}

.lineup-main-label {
    font-size: 0.90rem;
    color: #FFFFFF;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.combo-recommend-tag {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.combo-recommend-name {
    font-size: 0.74rem;
    color: #FFFFFF;
    font-weight: 700;
    letter-spacing: 0.1px;
    white-space: nowrap;
    overflow: visible;
    line-height: 1.2;
}

.details-bullets-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.details-bullets-list li {
    font-size: .89rem; color: #94A3B8; line-height: 1.6;
    position: relative; padding-left: 22px;
}
.details-bullets-list li::before {
    content: '✦'; position: absolute; left: 0; color: #00E5FF;
    font-size: .85rem; top: 2px;
    text-shadow: 0 0 10px #00E5FF, 0 0 15px rgba(0, 229, 255, 0.6);
}
.details-bullets-list strong { color: #fff; }

/* CTA Section */
.feature-cta-section {
    position: relative;
    padding: 85px 0; 
    background: transparent;
    border-top: 1px solid rgba(14, 165, 233, 0.2);
    overflow: hidden;
}
.feature-cta-section::before {
    content: '';
    position: absolute;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    height: 350px;
    background: radial-gradient(ellipse at center, rgba(14, 165, 233, 0.22) 0%, transparent 70%);
    filter: blur(85px);
    pointer-events: none;
}

@media (max-width: 992px) {
    .feature-hero-clean-grid { grid-template-columns: 1fr; gap: 35px; }
    .feature-ui-preview { max-width: 100%; margin-left: 0; }
    .feature-title-clean { font-size: 2.4rem; }
    .demo-grid { grid-template-columns: 1fr; gap: 40px; }
    .demo-right-panel { position: static; }
}

/* ── Combo Detail Layout (Unit Squad & Hero Skills Grid - Image Mockup Style) ── */
.combo-layout-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 6px;
}

.combo-sub-title {
    font-size: 0.84rem;
    font-weight: 800;
    color: #FF8800;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

/* Combo layout inside timeline structure */
.combo-units-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding-left: 22px;
    margin-top: 4px;
}

.combo-unit-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(14, 20, 32, 0.85);
    border: 1px solid rgba(0, 229, 255, 0.2);
    border-radius: 10px;
    transition: all 0.25s ease;
}
.combo-unit-badge:hover {
    border-color: #00E5FF;
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.25);
    background: rgba(18, 28, 44, 0.95);
}

.combo-unit-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
}

.combo-unit-icon img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}

.combo-unit-icon img[src*="valky"] {
    width: 37px !important;
    height: 37px !important;
    transform: scale(1.04);
}

.item-icon-wrapper img[src*="valky"] {
    transform: scale(1.08);
}
.demo-item-box:hover .item-icon-wrapper img[src*="valky"],
.demo-item-box.active .item-icon-wrapper img[src*="valky"] {
    transform: scale(1.15);
}

.combo-unit-info {
    display: flex;
    flex-direction: column;
}
.combo-unit-label {
    font-size: 0.68rem;
    color: #94A3B8;
    line-height: 1.2;
}
.combo-unit-value {
    font-size: 0.82rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.3;
}

/* 2x2 Hero Skills Grid inside timeline structure */
.hero-skills-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-left: 22px;
    margin-top: 4px;
}

.hero-skill-card {
    background: rgba(14, 20, 32, 0.85);
    border: 1px solid rgba(0, 229, 255, 0.2);
    border-radius: 10px;
    padding: 8px 11px 9px;
    transition: all 0.25s ease;
}
.hero-skill-card:hover {
    border-color: #00E5FF;
    background: rgba(18, 28, 44, 0.95);
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.2);
}

.hero-card-header {
    font-size: 0.64rem;
    font-weight: 800;
    color: #00E5FF;
    letter-spacing: 0.6px;
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    gap: 4px;
    line-height: 1.1;
}

.hero-skills-icons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.skill-slot-icon {
    width: 48px;
    height: 48px;
    border-radius: 9px;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    overflow: hidden;
}

.skill-slot-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 9px;
    display: block;
}

/* ── Feature Pagination Navigation Section (Previous / Next / Center Logo) ── */
.feature-pagination-section {
    padding: 15px 0 80px;
    background: transparent;
    border-top: none;
}
.feature-pagination-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: 1240px;
    margin: 0 auto;
}
.feature-pagination-card {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 18px 24px;
    background: rgba(10, 16, 26, 0.85);
    border: 1.5px solid rgba(0, 229, 255, 0.2);
    border-radius: 18px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(14px);
    flex: 1;
    max-width: 430px;
    box-sizing: border-box;
}
.feature-pagination-card.prev-card {
    justify-content: flex-start;
}
.feature-pagination-card.next-card {
    justify-content: flex-end;
}
.feature-pagination-card:hover {
    background: rgba(16, 26, 42, 0.95);
    border-color: var(--primary);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 229, 255, 0.18);
}
.pagination-center-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-decoration: none;
    padding: 10px 18px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}
.pagination-center-brand img,
.pagination-center-logo,
.feature-pagination-center img {
    height: 46px !important;
    width: auto !important;
    max-width: 50px !important;
    max-height: 46px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    filter: drop-shadow(0 0 14px rgba(255, 215, 0, 0.45));
}
.pagination-center-brand span {
    font-family: var(--font-heading);
    font-size: 1.85rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    color: #FFFFFF;
}
.pagination-center-brand:hover {
    transform: scale(1.06);
}
.pagination-arrow-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 229, 255, 0.1);
    border: 1px solid rgba(0, 229, 255, 0.3);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}
.feature-pagination-card:hover .pagination-arrow-icon {
    background: var(--primary);
    color: #031728;
    box-shadow: 0 0 16px rgba(0, 229, 255, 0.6);
}
.prev-card:hover .pagination-arrow-icon {
    transform: translateX(-4px);
}
.next-card:hover .pagination-arrow-icon {
    transform: translateX(4px);
}
.pagination-text-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.pagination-sub-label {
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.pagination-main-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 800;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
@media (max-width: 900px) {
    .feature-pagination-grid {
        flex-direction: column;
        gap: 16px;
    }
    .feature-pagination-card {
        max-width: 100%;
        width: 100%;
    }
    .pagination-center-brand {
        order: -1;
    }
}

/* ====================================================
   THEME PURPLE (COSMIC VIOLET) — DÀNH RIÊNG CHO LÀNG ĐÊM
   ==================================================== */
body.theme-purple {
    background-color: #06040A;
    background-image: 
        linear-gradient(to right, rgba(168, 85, 247, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(168, 85, 247, 0.04) 1px, transparent 1px),
        radial-gradient(ellipse at 50% 0%, rgba(168, 85, 247, 0.16) 0%, transparent 65%),
        radial-gradient(ellipse at 50% 50%, rgba(147, 51, 234, 0.12) 0%, transparent 65%),
        radial-gradient(ellipse at 50% 100%, rgba(168, 85, 247, 0.15) 0%, transparent 65%);
}

.theme-purple .navbar,
.theme-purple .navbar.scrolled {
    background: rgba(14, 8, 24, 0.90) !important;
    border-bottom: 1px solid rgba(168, 85, 247, 0.35) !important;
    box-shadow: 0 4px 30px rgba(168, 85, 247, 0.20), inset 0 -1px 0 rgba(168, 85, 247, 0.15) !important;
}

.theme-purple .feature-hero-clean {
    border-bottom: 1px solid rgba(168, 85, 247, 0.22);
}
.theme-purple .feature-hero-clean::before {
    background: radial-gradient(circle, rgba(168, 85, 247, 0.16) 0%, rgba(147, 51, 234, 0) 70%);
}
.theme-purple .feature-hero-clean::after {
    background: radial-gradient(circle, rgba(192, 132, 252, 0.20) 0%, rgba(168, 85, 247, 0) 70%);
}

.theme-purple .breadcrumb-home:hover {
    color: #C4B5FD;
}
.theme-purple .feature-nav-pill.active {
    background: linear-gradient(135deg, #7C3AED, #5B21B6) !important;
    border-color: #A78BFA !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 14px rgba(124, 58, 237, 0.4) !important;
}

.theme-purple .btn-download-now {
    background: linear-gradient(135deg, #C084FC, #9333EA) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 28px rgba(168, 85, 247, 0.55) !important;
}
.theme-purple .btn-download-now:hover {
    box-shadow: 0 8px 38px rgba(168, 85, 247, 0.85) !important;
}

.theme-purple .btn-contact-admin {
    border: 1px solid rgba(168, 85, 247, 0.4);
    background: rgba(255, 255, 255, 0.06);
}
.theme-purple .btn-contact-admin:hover {
    background: rgba(168, 85, 247, 0.2);
    border-color: #C084FC;
    color: #E9D5FF;
    box-shadow: 0 5px 25px rgba(168, 85, 247, 0.4);
}

.theme-purple .feature-ui-preview {
    border: 1.5px solid rgba(192, 132, 252, 0.5);
    box-shadow: 
        0 0 45px rgba(168, 85, 247, 0.40), 
        0 0 90px rgba(147, 51, 234, 0.25), 
        0 20px 50px rgba(0,0,0,.9);
    background: rgba(14, 8, 24, 0.92);
}
.theme-purple .feature-ui-preview:hover {
    border-color: rgba(216, 180, 254, 0.85);
    box-shadow: 
        0 0 65px rgba(168, 85, 247, 0.65), 
        0 0 110px rgba(147, 51, 234, 0.40), 
        0 25px 65px rgba(0,0,0,.98);
}

.theme-purple .demo-section::before {
    background: radial-gradient(circle, rgba(168, 85, 247, 0.22) 0%, transparent 70%);
}
.theme-purple .demo-section::after {
    background: radial-gradient(circle, rgba(147, 51, 234, 0.20) 0%, transparent 70%);
}

.theme-purple .demo-header h2 {
    text-shadow: 0 0 30px rgba(168, 85, 247, 0.5);
}

.theme-purple .demo-category-title {
    color: #C084FC;
    text-shadow: 0 0 12px rgba(168, 85, 247, 0.55);
}

.theme-purple .demo-item-box {
    background: rgba(16, 9, 28, 0.85);
    border: 1px solid rgba(168, 85, 247, 0.22);
}
.theme-purple .demo-item-box:hover {
    background: rgba(26, 14, 46, 0.95);
    border-color: rgba(192, 132, 252, 0.65);
    box-shadow: 0 5px 25px rgba(168, 85, 247, 0.3);
}
.theme-purple .demo-item-box.active {
    background: rgba(30, 16, 52, 0.98);
    border: 1.8px solid #C084FC;
    box-shadow: 0 0 28px rgba(168, 85, 247, 0.45), inset 0 0 18px rgba(168, 85, 247, 0.12);
}

.theme-purple .demo-video-box {
    border: 1.5px solid rgba(192, 132, 252, 0.45);
    box-shadow: 0 0 40px rgba(168, 85, 247, 0.30), 0 20px 45px rgba(0,0,0,.85);
}
.theme-purple .video-center-btn {
    background: linear-gradient(135deg, #C084FC, #9333EA);
    color: #FFFFFF;
    box-shadow: 0 0 35px rgba(168, 85, 247, 0.7);
}
.theme-purple .demo-video-box:hover .video-center-btn {
    box-shadow: 0 0 50px rgba(192, 132, 252, 0.95);
}

.theme-purple .active-status-label {
    color: #C084FC;
    text-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
}
.theme-purple .active-feature-name {
    text-shadow: 0 0 15px rgba(168, 85, 247, 0.4);
}

.theme-purple .active-details-box {
    background: rgba(14, 8, 24, 0.94);
    border: 1px solid rgba(168, 85, 247, 0.30);
    border-left: 4px solid #A855F7;
    box-shadow: 0 10px 35px rgba(0,0,0,0.65), inset 0 0 25px rgba(168, 85, 247, 0.1);
}

.theme-purple .subtitle-sparkle-star,
.theme-purple .details-bullets-list li::before {
    color: #C084FC;
    text-shadow: 0 0 10px #C084FC, 0 0 15px rgba(168, 85, 247, 0.7);
}

.theme-purple .details-feature-list::before {
    border-left: 1.5px dashed rgba(192, 132, 252, 0.75);
}

.theme-purple .detail-dot,
.theme-purple .detail-sparkle-star {
    background: #C084FC;
    border: 2px solid #140A22;
    box-shadow: 0 0 5px rgba(168, 85, 247, 0.55);
}
.theme-purple .detail-feature-row:hover .detail-dot {
    box-shadow: 0 0 8px rgba(192, 132, 252, 0.85);
}

.theme-purple .combo-recommend-card {
    background: rgba(22, 12, 38, 0.92);
    border: 1px solid rgba(168, 85, 247, 0.28);
}
.theme-purple .combo-recommend-card.card-top1 {
    border-color: rgba(255, 215, 0, 0.4);
    background: linear-gradient(145deg, rgba(38, 26, 12, 0.95), rgba(22, 12, 38, 0.95));
}
.theme-purple .combo-recommend-card.card-top1:hover {
    border-color: #FFD700;
    box-shadow: 0 6px 22px rgba(255, 215, 0, 0.35);
}
.theme-purple .combo-recommend-card.card-top2 {
    border-color: rgba(56, 189, 248, 0.4);
    background: linear-gradient(145deg, rgba(14, 28, 45, 0.95), rgba(22, 12, 38, 0.95));
}
.theme-purple .combo-recommend-card.card-top2:hover {
    border-color: #38BDF8;
    box-shadow: 0 6px 22px rgba(56, 189, 248, 0.35);
}
.theme-purple .combo-recommend-card.card-top3 {
    border-color: rgba(249, 115, 22, 0.4);
    background: linear-gradient(145deg, rgba(42, 20, 16, 0.95), rgba(22, 12, 38, 0.95));
}
.theme-purple .combo-recommend-card.card-top3:hover {
    border-color: #FB923C;
    box-shadow: 0 6px 22px rgba(249, 115, 22, 0.35);
}

.theme-purple .feature-pagination-card {
    background: rgba(16, 9, 28, 0.88);
    border: 1.5px solid rgba(168, 85, 247, 0.25);
}
.theme-purple .feature-pagination-card:hover {
    background: rgba(28, 16, 48, 0.96);
    border-color: #A855F7;
    box-shadow: 0 10px 25px rgba(168, 85, 247, 0.25);
}
.theme-purple .pagination-arrow-icon {
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.35);
    color: #C084FC;
}
.theme-purple .feature-pagination-card:hover .pagination-arrow-icon {
    background: #A855F7;
    color: #FFFFFF;
    box-shadow: 0 0 16px rgba(168, 85, 247, 0.75);
}
.theme-purple .pagination-sub-label {
    color: #C084FC;
}
.theme-purple .arrow-icon-default {
    filter: hue-rotate(85deg) saturate(2) drop-shadow(0 0 2px rgba(168, 85, 247, 0.4));
}
.theme-purple .arrow-icon-hover {
    filter: hue-rotate(85deg) saturate(2.2) drop-shadow(0 0 10px rgba(192, 132, 252, 0.95)) drop-shadow(0 0 18px rgba(168, 85, 247, 0.8));
}

/* ====================================================
   THEME ORANGE (CYBER AMBER) — DÀNH RIÊNG CHO NÂNG CẤP CÔNG TRÌNH
   ==================================================== */
body.theme-orange {
    background-color: #0C0805;
    background-image: 
        linear-gradient(to right, rgba(217, 119, 6, 0.02) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(217, 119, 6, 0.02) 1px, transparent 1px),
        radial-gradient(ellipse at 50% 0%, rgba(217, 119, 6, 0.08) 0%, transparent 65%),
        radial-gradient(ellipse at 50% 50%, rgba(180, 83, 9, 0.05) 0%, transparent 65%),
        radial-gradient(ellipse at 50% 100%, rgba(217, 119, 6, 0.06) 0%, transparent 65%);
}

.theme-orange .navbar,
.theme-orange .navbar.scrolled {
    background: rgba(20, 12, 7, 0.94) !important;
    border-bottom: 1px solid rgba(217, 119, 6, 0.20) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 -1px 0 rgba(217, 119, 6, 0.10) !important;
}

.theme-orange .feature-hero-clean {
    border-bottom: 1px solid rgba(217, 119, 6, 0.15);
}
.theme-orange .feature-hero-clean::before {
    background: radial-gradient(circle, rgba(217, 119, 6, 0.08) 0%, rgba(180, 83, 9, 0) 70%);
}
.theme-orange .feature-hero-clean::after {
    background: radial-gradient(circle, rgba(245, 158, 11, 0.08) 0%, rgba(217, 119, 6, 0) 70%);
}

.theme-orange .breadcrumb-home:hover {
    color: #F59E0B;
}
.theme-orange .feature-nav-pill.active {
    background: linear-gradient(135deg, #C2410C, #7C2D12) !important;
    border-color: #E07A2A !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 10px rgba(194, 65, 12, 0.25) !important;
}

.theme-orange .btn-download-now {
    background: linear-gradient(135deg, #D97706, #B45309) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 18px rgba(217, 119, 6, 0.30) !important;
}
.theme-orange .btn-download-now:hover {
    box-shadow: 0 6px 26px rgba(217, 119, 6, 0.50) !important;
}

.theme-orange .btn-contact-admin {
    border: 1px solid rgba(217, 119, 6, 0.28);
    background: rgba(255, 255, 255, 0.04);
}
.theme-orange .btn-contact-admin:hover {
    background: rgba(217, 119, 6, 0.12);
    border-color: #D97706;
    color: #FEF3C7;
    box-shadow: 0 4px 18px rgba(217, 119, 6, 0.25);
}

.theme-orange .feature-ui-preview {
    border: 1px solid rgba(217, 119, 6, 0.30);
    box-shadow: 
        0 0 20px rgba(217, 119, 6, 0.15), 
        0 15px 45px rgba(0, 0, 0, 0.85);
    background: rgba(20, 12, 7, 0.92);
}
.theme-orange .feature-ui-preview:hover {
    border-color: rgba(245, 158, 11, 0.50);
    box-shadow: 
        0 0 35px rgba(217, 119, 6, 0.28), 
        0 20px 55px rgba(0, 0, 0, 0.95);
}

.theme-orange .demo-section::before {
    background: radial-gradient(circle, rgba(217, 119, 6, 0.10) 0%, transparent 70%);
}
.theme-orange .demo-section::after {
    background: radial-gradient(circle, rgba(180, 83, 9, 0.08) 0%, transparent 70%);
}

.theme-orange .demo-header h2 {
    text-shadow: 0 0 20px rgba(217, 119, 6, 0.3);
}

.theme-orange .demo-category-title {
    color: #F59E0B;
    text-shadow: 0 0 8px rgba(217, 119, 6, 0.30);
}

.theme-orange .demo-item-box {
    background: rgba(22, 13, 8, 0.85);
    border: 1px solid rgba(217, 119, 6, 0.18);
}
.theme-orange .demo-item-box:hover {
    background: rgba(34, 18, 10, 0.95);
    border-color: rgba(245, 158, 11, 0.45);
    box-shadow: 0 4px 18px rgba(217, 119, 6, 0.20);
}
.theme-orange .demo-item-box.active {
    background: rgba(38, 20, 10, 0.98);
    border: 1.5px solid #D97706;
    box-shadow: 0 0 20px rgba(217, 119, 6, 0.28), inset 0 0 12px rgba(217, 119, 6, 0.08);
}

.theme-orange .demo-video-box {
    border: 1px solid rgba(217, 119, 6, 0.30);
    box-shadow: 0 0 25px rgba(217, 119, 6, 0.18), 0 15px 40px rgba(0,0,0,.85);
}
.theme-orange .video-center-btn {
    background: linear-gradient(135deg, #D97706, #B45309);
    color: #FFFFFF;
    box-shadow: 0 0 22px rgba(217, 119, 6, 0.45);
}
.theme-orange .demo-video-box:hover .video-center-btn {
    box-shadow: 0 0 35px rgba(245, 158, 11, 0.65);
}

.theme-orange .active-status-label {
    color: #F59E0B;
    text-shadow: 0 0 8px rgba(217, 119, 6, 0.3);
}
.theme-orange .active-feature-name {
    text-shadow: 0 0 10px rgba(217, 119, 6, 0.25);
}

.theme-orange .active-details-box {
    background: rgba(20, 12, 7, 0.94);
    border: 1px solid rgba(217, 119, 6, 0.20);
    border-left: 3px solid #D97706;
    box-shadow: 0 8px 28px rgba(0,0,0,0.65), inset 0 0 15px rgba(217, 119, 6, 0.06);
}

.theme-orange .subtitle-sparkle-star,
.theme-orange .details-bullets-list li::before {
    color: #F59E0B;
    text-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

.theme-orange .details-feature-list::before {
    border-left: 1.5px dashed rgba(217, 119, 6, 0.35);
}

.theme-orange .detail-dot,
.theme-orange .detail-sparkle-star {
    background: #D97706;
    border: 2px solid #160B05;
    box-shadow: 0 0 4px rgba(217, 119, 6, 0.35);
}
.theme-orange .detail-feature-row:hover .detail-dot {
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.6);
}

.theme-orange .feature-pagination-card {
    background: rgba(22, 13, 8, 0.88);
    border: 1px solid rgba(217, 119, 6, 0.18);
}
.theme-orange .feature-pagination-card:hover {
    background: rgba(34, 19, 11, 0.96);
    border-color: #D97706;
    box-shadow: 0 8px 20px rgba(217, 119, 6, 0.18);
}
.theme-orange .pagination-arrow-icon {
    background: rgba(217, 119, 6, 0.10);
    border: 1px solid rgba(217, 119, 6, 0.25);
    color: #F59E0B;
}
.theme-orange .feature-pagination-card:hover .pagination-arrow-icon {
    background: #D97706;
    color: #FFFFFF;
    box-shadow: 0 0 12px rgba(217, 119, 6, 0.50);
}
.theme-orange .pagination-sub-label {
    color: #F59E0B;
}
.theme-orange .arrow-icon-default {
    filter: hue-rotate(205deg) saturate(1.8) drop-shadow(0 0 2px rgba(217, 119, 6, 0.25));
}
.theme-orange .arrow-icon-hover {
    filter: hue-rotate(205deg) saturate(2.0) drop-shadow(0 0 6px rgba(245, 158, 11, 0.65));
}

/* ====================================================
   THEME EMERALD (CRYSTAL GREEN) — DÀNH CHO KINH ĐÔ BANG HỘI
   ==================================================== */
body.theme-emerald {
    background-color: #030A07;
    background-image: 
        linear-gradient(to right, rgba(16, 185, 129, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(16, 185, 129, 0.04) 1px, transparent 1px),
        radial-gradient(ellipse at 50% 0%, rgba(16, 185, 129, 0.16) 0%, transparent 65%),
        radial-gradient(ellipse at 50% 50%, rgba(5, 150, 105, 0.12) 0%, transparent 65%),
        radial-gradient(ellipse at 50% 100%, rgba(16, 185, 129, 0.15) 0%, transparent 65%);
}

.theme-emerald .navbar,
.theme-emerald .navbar.scrolled {
    background: rgba(8, 24, 18, 0.92) !important;
    border-bottom: 1px solid rgba(16, 185, 129, 0.35) !important;
    box-shadow: 0 4px 30px rgba(16, 185, 129, 0.20), inset 0 -1px 0 rgba(16, 185, 129, 0.15) !important;
}

.theme-emerald .feature-hero-clean {
    border-bottom: 1px solid rgba(16, 185, 129, 0.22);
}
.theme-emerald .feature-hero-clean::before {
    background: radial-gradient(circle, rgba(16, 185, 129, 0.16) 0%, rgba(5, 150, 105, 0) 70%);
}
.theme-emerald .feature-hero-clean::after {
    background: radial-gradient(circle, rgba(6, 95, 70, 0.20) 0%, rgba(16, 185, 129, 0) 70%);
}
.theme-emerald .breadcrumb-home:hover {
    color: #6EE7B7;
}
.theme-emerald .feature-nav-pill.active {
    background: linear-gradient(135deg, #059669, #065F46) !important;
    border-color: #6EE7B7 !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 14px rgba(5, 150, 105, 0.4) !important;
}

.theme-emerald .btn-download-now {
    background: linear-gradient(135deg, #34D399, #059669) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 28px rgba(16, 185, 129, 0.55) !important;
}
.theme-emerald .btn-download-now:hover {
    box-shadow: 0 8px 38px rgba(16, 185, 129, 0.85) !important;
}

.theme-emerald .btn-contact-admin {
    border: 1px solid rgba(16, 185, 129, 0.4);
    background: rgba(255, 255, 255, 0.06);
}
.theme-emerald .btn-contact-admin:hover {
    background: rgba(16, 185, 129, 0.2);
    border-color: #34D399;
    color: #D1FAE5;
    box-shadow: 0 5px 25px rgba(16, 185, 129, 0.4);
}

.theme-emerald .feature-ui-preview {
    border: 1.5px solid rgba(52, 211, 153, 0.5);
    box-shadow: 
        0 0 45px rgba(16, 185, 129, 0.40), 
        0 0 90px rgba(5, 150, 105, 0.25), 
        0 20px 50px rgba(0,0,0,.9);
    background: rgba(8, 24, 18, 0.92);
}
.theme-emerald .feature-ui-preview:hover {
    border-color: rgba(110, 231, 183, 0.85);
    box-shadow: 
        0 0 65px rgba(16, 185, 129, 0.65), 
        0 0 110px rgba(5, 150, 105, 0.40), 
        0 25px 65px rgba(0,0,0,.98);
}

.theme-emerald .demo-section::before {
    background: radial-gradient(circle, rgba(16, 185, 129, 0.22) 0%, transparent 70%);
}
.theme-emerald .demo-section::after {
    background: radial-gradient(circle, rgba(5, 150, 105, 0.20) 0%, transparent 70%);
}

.theme-emerald .demo-header h2 {
    text-shadow: 0 0 30px rgba(16, 185, 129, 0.5);
}

.theme-emerald .demo-category-title {
    color: #34D399;
    text-shadow: 0 0 12px rgba(16, 185, 129, 0.55);
}

.theme-emerald .demo-item-box {
    background: rgba(8, 26, 18, 0.85);
    border: 1px solid rgba(16, 185, 129, 0.22);
}
.theme-emerald .demo-item-box:hover {
    background: rgba(12, 42, 28, 0.95);
    border-color: rgba(52, 211, 153, 0.65);
    box-shadow: 0 5px 25px rgba(16, 185, 129, 0.3);
}
.theme-emerald .demo-item-box.active {
    background: rgba(14, 48, 32, 0.98);
    border: 1.8px solid #34D399;
    box-shadow: 0 0 28px rgba(16, 185, 129, 0.45), inset 0 0 18px rgba(16, 185, 129, 0.12);
}

.theme-emerald .demo-video-box {
    border: 1.5px solid rgba(52, 211, 153, 0.45);
    box-shadow: 0 0 40px rgba(16, 185, 129, 0.30), 0 20px 45px rgba(0,0,0,.85);
}
.theme-emerald .video-center-btn {
    background: linear-gradient(135deg, #34D399, #059669);
    color: #FFFFFF;
    box-shadow: 0 0 35px rgba(16, 185, 129, 0.7);
}
.theme-emerald .demo-video-box:hover .video-center-btn {
    box-shadow: 0 0 50px rgba(110, 231, 183, 0.95);
}

.theme-emerald .active-status-label {
    color: #34D399;
    text-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}
.theme-emerald .active-feature-name {
    text-shadow: 0 0 15px rgba(16, 185, 129, 0.4);
}

.theme-emerald .active-details-box {
    background: rgba(8, 24, 18, 0.94);
    border: 1px solid rgba(16, 185, 129, 0.30);
    border-left: 4px solid #10B981;
    box-shadow: 0 10px 35px rgba(0,0,0,0.65), inset 0 0 25px rgba(16, 185, 129, 0.1);
}

.theme-emerald .subtitle-sparkle-star,
.theme-emerald .details-bullets-list li::before {
    color: #34D399;
    text-shadow: 0 0 10px #34D399, 0 0 15px rgba(16, 185, 129, 0.7);
}

.theme-emerald .details-feature-list::before {
    border-left: 1.5px dashed rgba(16, 185, 129, 0.55);
}

.theme-emerald .detail-dot,
.theme-emerald .detail-sparkle-star {
    background: #34D399;
    border: 2px solid #061B12;
    box-shadow: 0 0 5px rgba(16, 185, 129, 0.55);
}
.theme-emerald .detail-feature-row:hover .detail-dot {
    box-shadow: 0 0 8px rgba(110, 231, 183, 0.85);
}

.theme-emerald .feature-pagination-card {
    background: rgba(8, 26, 18, 0.88);
    border: 1.5px solid rgba(16, 185, 129, 0.25);
}
.theme-emerald .feature-pagination-card:hover {
    background: rgba(14, 44, 30, 0.96);
    border-color: #10B981;
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.25);
}
.theme-emerald .pagination-arrow-icon {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #34D399;
}
.theme-emerald .feature-pagination-card:hover .pagination-arrow-icon {
    background: #10B981;
    color: #FFFFFF;
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.75);
}
.theme-emerald .pagination-sub-label {
    color: #34D399;
}
.theme-emerald .arrow-icon-default {
    filter: hue-rotate(325deg) saturate(2) drop-shadow(0 0 2px rgba(16, 185, 129, 0.4));
}
.theme-emerald .arrow-icon-hover {
    filter: hue-rotate(325deg) saturate(2.2) drop-shadow(0 0 10px rgba(52, 211, 153, 0.95)) drop-shadow(0 0 18px rgba(16, 185, 129, 0.8));
}

/* ====================================================
   THEME CRIMSON (RUBY RED) — DÀNH CHO CLAN GAMES
   ==================================================== */
body.theme-crimson {
    background-color: #0B0407;
    background-image: 
        linear-gradient(to right, rgba(225, 29, 72, 0.02) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(225, 29, 72, 0.02) 1px, transparent 1px),
        radial-gradient(ellipse at 50% 0%, rgba(225, 29, 72, 0.08) 0%, transparent 65%),
        radial-gradient(ellipse at 50% 50%, rgba(159, 18, 57, 0.05) 0%, transparent 65%),
        radial-gradient(ellipse at 50% 100%, rgba(225, 29, 72, 0.06) 0%, transparent 65%);
}

.theme-crimson .navbar,
.theme-crimson .navbar.scrolled {
    background: rgba(22, 6, 12, 0.94) !important;
    border-bottom: 1px solid rgba(225, 29, 72, 0.18) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 -1px 0 rgba(225, 29, 72, 0.10) !important;
}

.theme-crimson .feature-hero-clean {
    border-bottom: 1px solid rgba(225, 29, 72, 0.15);
}
.theme-crimson .feature-hero-clean::before {
    background: radial-gradient(circle, rgba(225, 29, 72, 0.08) 0%, rgba(159, 18, 57, 0) 70%);
}
.theme-crimson .feature-hero-clean::after {
    background: radial-gradient(circle, rgba(244, 63, 94, 0.08) 0%, rgba(225, 29, 72, 0) 70%);
}

.theme-crimson .breadcrumb-home:hover {
    color: #F43F5E;
}
.theme-crimson .feature-nav-pill.active {
    background: linear-gradient(135deg, #BE123C, #881337) !important;
    border-color: #E11D48 !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 10px rgba(190, 18, 60, 0.25) !important;
}

.theme-crimson .btn-download-now {
    background: linear-gradient(135deg, #E11D48, #9F1239) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 18px rgba(225, 29, 72, 0.30) !important;
}
.theme-crimson .btn-download-now:hover {
    box-shadow: 0 6px 26px rgba(225, 29, 72, 0.50) !important;
}

.theme-crimson .btn-contact-admin {
    border: 1px solid rgba(225, 29, 72, 0.28);
    background: rgba(255, 255, 255, 0.04);
}
.theme-crimson .btn-contact-admin:hover {
    background: rgba(225, 29, 72, 0.12);
    border-color: #E11D48;
    color: #FFE4E6;
    box-shadow: 0 4px 18px rgba(225, 29, 72, 0.25);
}

.theme-crimson .feature-ui-preview {
    border: 1px solid rgba(225, 29, 72, 0.30);
    box-shadow: 
        0 0 20px rgba(225, 29, 72, 0.15), 
        0 15px 45px rgba(0, 0, 0, 0.85);
    background: rgba(22, 6, 12, 0.92);
}
.theme-crimson .feature-ui-preview:hover {
    border-color: rgba(244, 63, 94, 0.50);
    box-shadow: 
        0 0 35px rgba(225, 29, 72, 0.28), 
        0 20px 55px rgba(0, 0, 0, 0.95);
}

.theme-crimson .demo-section::before {
    background: radial-gradient(circle, rgba(225, 29, 72, 0.10) 0%, transparent 70%);
}
.theme-crimson .demo-section::after {
    background: radial-gradient(circle, rgba(159, 18, 57, 0.08) 0%, transparent 70%);
}

.theme-crimson .demo-header h2 {
    text-shadow: 0 0 20px rgba(225, 29, 72, 0.3);
}

.theme-crimson .demo-category-title {
    color: #F43F5E;
    text-shadow: 0 0 8px rgba(225, 29, 72, 0.30);
}

.theme-crimson .demo-item-box {
    background: rgba(22, 6, 12, 0.85);
    border: 1px solid rgba(225, 29, 72, 0.18);
}
.theme-crimson .demo-item-box:hover {
    background: rgba(36, 10, 20, 0.95);
    border-color: rgba(244, 63, 94, 0.45);
    box-shadow: 0 4px 18px rgba(225, 29, 72, 0.20);
}
.theme-crimson .demo-item-box.active {
    background: rgba(40, 10, 22, 0.98);
    border: 1.5px solid #E11D48;
    box-shadow: 0 0 20px rgba(225, 29, 72, 0.28), inset 0 0 12px rgba(225, 29, 72, 0.08);
}

.theme-crimson .demo-video-box {
    border: 1px solid rgba(225, 29, 72, 0.30);
    box-shadow: 0 0 25px rgba(225, 29, 72, 0.18), 0 15px 40px rgba(0,0,0,.85);
}
.theme-crimson .video-center-btn {
    background: linear-gradient(135deg, #E11D48, #9F1239);
    color: #FFFFFF;
    box-shadow: 0 0 22px rgba(225, 29, 72, 0.45);
}
.theme-crimson .demo-video-box:hover .video-center-btn {
    box-shadow: 0 0 35px rgba(244, 63, 94, 0.65);
}

.theme-crimson .active-status-label {
    color: #F43F5E;
    text-shadow: 0 0 8px rgba(225, 29, 72, 0.3);
}
.theme-crimson .active-feature-name {
    text-shadow: 0 0 10px rgba(225, 29, 72, 0.25);
}

.theme-crimson .active-details-box {
    background: rgba(22, 6, 12, 0.94);
    border: 1px solid rgba(225, 29, 72, 0.20);
    border-left: 3px solid #E11D48;
    box-shadow: 0 8px 28px rgba(0,0,0,0.65), inset 0 0 15px rgba(225, 29, 72, 0.06);
}

.theme-crimson .subtitle-sparkle-star,
.theme-crimson .details-bullets-list li::before {
    color: #F43F5E;
    text-shadow: 0 0 8px rgba(244, 63, 94, 0.4);
}

.theme-crimson .details-feature-list::before {
    border-left: 1.5px dashed rgba(225, 29, 72, 0.35);
}

.theme-crimson .detail-dot,
.theme-crimson .detail-sparkle-star {
    background: #E11D48;
    border: 2px solid #14040A;
    box-shadow: 0 0 4px rgba(225, 29, 72, 0.35);
}
.theme-crimson .detail-feature-row:hover .detail-dot {
    box-shadow: 0 0 6px rgba(244, 63, 94, 0.6);
}

.theme-crimson .feature-pagination-card {
    background: rgba(22, 6, 12, 0.88);
    border: 1px solid rgba(225, 29, 72, 0.18);
}
.theme-crimson .feature-pagination-card:hover {
    background: rgba(36, 10, 20, 0.96);
    border-color: #E11D48;
    box-shadow: 0 8px 20px rgba(225, 29, 72, 0.18);
}
.theme-crimson .pagination-arrow-icon {
    background: rgba(225, 29, 72, 0.10);
    border: 1px solid rgba(225, 29, 72, 0.25);
    color: #F43F5E;
}
.theme-crimson .feature-pagination-card:hover .pagination-arrow-icon {
    background: #E11D48;
    color: #FFFFFF;
    box-shadow: 0 0 12px rgba(225, 29, 72, 0.50);
}
.theme-crimson .pagination-sub-label {
    color: #F43F5E;
}
.theme-crimson .arrow-icon-default {
    filter: hue-rotate(160deg) saturate(1.8) drop-shadow(0 0 2px rgba(225, 29, 72, 0.25));
}
.theme-crimson .arrow-icon-hover {
    filter: hue-rotate(160deg) saturate(2.0) drop-shadow(0 0 6px rgba(244, 63, 94, 0.65));
}

/* ====================================================
   THEME GOLD (ROYAL AMBER-GOLD) — DÀNH CHO TỰ ĐỘNG ĐỔI ACC
   ==================================================== */
body.theme-gold {
    background-color: #0A0802;
    background-image: 
        linear-gradient(to right, rgba(245, 158, 11, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(245, 158, 11, 0.04) 1px, transparent 1px),
        radial-gradient(ellipse at 50% 0%, rgba(245, 158, 11, 0.16) 0%, transparent 65%),
        radial-gradient(ellipse at 50% 50%, rgba(217, 119, 6, 0.12) 0%, transparent 65%),
        radial-gradient(ellipse at 50% 100%, rgba(245, 158, 11, 0.15) 0%, transparent 65%);
}

.theme-gold .navbar,
.theme-gold .navbar.scrolled {
    background: rgba(26, 20, 6, 0.92) !important;
    border-bottom: 1px solid rgba(245, 158, 11, 0.35) !important;
    box-shadow: 0 4px 30px rgba(245, 158, 11, 0.20), inset 0 -1px 0 rgba(245, 158, 11, 0.15) !important;
}

.theme-gold .feature-hero-clean {
    border-bottom: 1px solid rgba(245, 158, 11, 0.22);
}
.theme-gold .feature-hero-clean::before {
    background: radial-gradient(circle, rgba(245, 158, 11, 0.16) 0%, rgba(217, 119, 6, 0) 70%);
}
.theme-gold .feature-hero-clean::after {
    background: radial-gradient(circle, rgba(251, 191, 36, 0.20) 0%, rgba(245, 158, 11, 0) 70%);
}

.theme-gold .breadcrumb-home:hover {
    color: #FBBF24;
}
.theme-gold .feature-nav-pill {
    background: rgba(38, 30, 8, 0.7);
    border: 1px solid rgba(245, 158, 11, 0.25);
    color: #FBBF24;
}
.theme-gold .feature-nav-pill:hover {
    color: #fff;
    background: rgba(245, 158, 11, 0.22);
    border-color: rgba(251, 191, 36, 0.7);
}
.theme-gold .feature-nav-pill.active {
    background: linear-gradient(135deg, #F59E0B, #B45309) !important;
    border-color: #FBBF24 !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 18px rgba(245, 158, 11, 0.55) !important;
}

.theme-gold .btn-download-now {
    background: linear-gradient(135deg, #FDE047, #D97706) !important;
    color: #1A1204 !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 28px rgba(245, 158, 11, 0.55) !important;
}
.theme-gold .btn-download-now:hover {
    box-shadow: 0 8px 38px rgba(245, 158, 11, 0.85) !important;
}

.theme-gold .btn-contact-admin {
    border: 1px solid rgba(245, 158, 11, 0.4);
    background: rgba(255, 255, 255, 0.06);
}
.theme-gold .btn-contact-admin:hover {
    background: rgba(245, 158, 11, 0.2);
    border-color: #FBBF24;
    color: #FEF3C7;
    box-shadow: 0 5px 25px rgba(245, 158, 11, 0.4);
}

.theme-gold .feature-ui-preview {
    border: 1.5px solid rgba(251, 191, 36, 0.5);
    box-shadow: 
        0 0 45px rgba(245, 158, 11, 0.40), 
        0 0 90px rgba(217, 119, 6, 0.25), 
        0 20px 50px rgba(0,0,0,.9);
    background: rgba(26, 20, 6, 0.92);
}
.theme-gold .feature-ui-preview:hover {
    border-color: rgba(253, 224, 71, 0.85);
    box-shadow: 
        0 0 65px rgba(245, 158, 11, 0.65), 
        0 0 110px rgba(217, 119, 6, 0.40), 
        0 25px 65px rgba(0,0,0,.98);
}

.theme-gold .demo-section::before {
    background: radial-gradient(circle, rgba(245, 158, 11, 0.22) 0%, transparent 70%);
}
.theme-gold .demo-section::after {
    background: radial-gradient(circle, rgba(217, 119, 6, 0.20) 0%, transparent 70%);
}

.theme-gold .demo-header h2 {
    text-shadow: 0 0 30px rgba(245, 158, 11, 0.5);
}

.theme-gold .demo-category-title {
    color: #FBBF24;
    text-shadow: 0 0 12px rgba(245, 158, 11, 0.55);
}

.theme-gold .demo-item-box {
    background: rgba(26, 20, 6, 0.85);
    border: 1px solid rgba(245, 158, 11, 0.22);
}
.theme-gold .demo-item-box:hover {
    background: rgba(42, 32, 10, 0.95);
    border-color: rgba(251, 191, 36, 0.65);
    box-shadow: 0 5px 25px rgba(245, 158, 11, 0.3);
}
.theme-gold .demo-item-box.active {
    background: rgba(48, 36, 12, 0.98);
    border: 1.8px solid #FBBF24;
    box-shadow: 0 0 28px rgba(245, 158, 11, 0.45), inset 0 0 18px rgba(245, 158, 11, 0.12);
}

.theme-gold .demo-video-box {
    border: 1.5px solid rgba(251, 191, 36, 0.45);
    box-shadow: 0 0 40px rgba(245, 158, 11, 0.30), 0 20px 45px rgba(0,0,0,.85);
}
.theme-gold .video-center-btn {
    background: linear-gradient(135deg, #FDE047, #D97706);
    color: #1A1204;
    box-shadow: 0 0 35px rgba(245, 158, 11, 0.7);
}
.theme-gold .demo-video-box:hover .video-center-btn {
    box-shadow: 0 0 50px rgba(253, 224, 71, 0.95);
}

.theme-gold .active-status-label {
    color: #FBBF24;
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
}
.theme-gold .active-feature-name {
    text-shadow: 0 0 15px rgba(245, 158, 11, 0.4);
}

.theme-gold .active-details-box {
    background: rgba(26, 20, 6, 0.94);
    border: 1px solid rgba(245, 158, 11, 0.30);
    border-left: 4px solid #F59E0B;
    box-shadow: 0 10px 35px rgba(0,0,0,0.65), inset 0 0 25px rgba(245, 158, 11, 0.1);
}

.theme-gold .subtitle-sparkle-star,
.theme-gold .details-bullets-list li::before {
    color: #FBBF24;
    text-shadow: 0 0 10px #FBBF24, 0 0 15px rgba(245, 158, 11, 0.7);
}

.theme-gold .details-feature-list::before {
    border-left: 1.5px dashed rgba(245, 158, 11, 0.55);
}

.theme-gold .detail-dot,
.theme-gold .detail-sparkle-star {
    background: #FBBF24;
    border: 2px solid #1C1604;
    box-shadow: 0 0 5px rgba(245, 158, 11, 0.55);
}
.theme-gold .detail-feature-row:hover .detail-dot {
    box-shadow: 0 0 8px rgba(253, 224, 71, 0.85);
}

.theme-gold .feature-pagination-card {
    background: rgba(26, 20, 6, 0.88);
    border: 1.5px solid rgba(245, 158, 11, 0.25);
}
.theme-gold .feature-pagination-card:hover {
    background: rgba(44, 34, 10, 0.96);
    border-color: #F59E0B;
    box-shadow: 0 10px 25px rgba(245, 158, 11, 0.25);
}
.theme-gold .pagination-arrow-icon {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #FBBF24;
}
.theme-gold .feature-pagination-card:hover .pagination-arrow-icon {
    background: #F59E0B;
    color: #FFFFFF;
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.75);
}
.theme-gold .pagination-sub-label {
    color: #FBBF24;
}