/**
 * GameShare88 Global Theme Stylesheet
 * Cyberpunk / Dark Gaming Aesthetic for Entire Website
 */

:root {
    --gs-global-primary: #00d2ff;
    --gs-global-secondary: #a855f7;
    --gs-global-bg-dark: #080d1a;
    --gs-global-card-bg: rgba(13, 22, 41, 0.88);
    --gs-global-border: rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   1. Global HTML, Body, Typography & Reset
   ========================================================================== */
html, 
body {
    background: radial-gradient(circle at 50% 0%, #15223a 0%, var(--gs-global-bg-dark, #080d1a) 55%, #050811 100%) fixed !important;
    background-color: var(--gs-global-bg-dark, #080d1a) !important;
    color: #ffffff !important;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Custom Cyberpunk Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #060a14;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--gs-global-primary, #00d2ff) 0%, #2563eb 100%);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gs-global-primary, #00d2ff);
    box-shadow: 0 0 10px var(--gs-global-primary, #00d2ff);
}

/* Text Selection Glow */
::selection {
    background: rgba(0, 210, 255, 0.35);
    color: #ffffff;
}

::-moz-selection {
    background: rgba(0, 210, 255, 0.35);
    color: #ffffff;
}

/* Links */
a {
    color: var(--gs-global-primary, #00d2ff);
    text-decoration: none;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

a:hover {
    color: #ffffff;
    text-shadow: 0 0 8px var(--gs-global-primary, #00d2ff);
}

/* ==========================================================================
   2. Remove Default Theme & Elementor White Backgrounds
   ========================================================================== */
.site-main,
#content,
.site-content,
.page-content,
#primary,
.content-area,
.elementor,
.elementor-section,
.elementor-container,
.e-con,
.e-con-inner,
body.hello-elementor-default {
    background-color: transparent !important;
    color: #ffffff !important;
}

/* Clear white backgrounds on widgets */
.elementor-widget-wrap,
.elementor-column-wrap {
    background-color: transparent !important;
}

/* ==========================================================================
   3. Category & Archive Pages (/category/...)
   ========================================================================== */
.archive .site-main,
.category .site-main,
.archive #content,
.category #content {
    max-width: 1240px !important;
    margin: 30px auto 60px auto !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

/* Archive / Category Header */
.archive .page-header,
.category .page-header,
.archive-header {
    background: linear-gradient(135deg, rgba(17, 28, 53, 0.75) 0%, rgba(11, 18, 34, 0.95) 100%) !important;
    border: 1px solid rgba(0, 210, 255, 0.3) !important;
    border-radius: 18px !important;
    padding: 28px 36px !important;
    margin-bottom: 35px !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 25px rgba(0, 210, 255, 0.15) !important;
    backdrop-filter: blur(12px) !important;
    position: relative !important;
}

.archive .page-header::before,
.category .page-header::before {
    content: "📁 CHUYÊN MỤC GAME";
    display: inline-block;
    background: rgba(0, 210, 255, 0.15);
    border: 1px solid rgba(0, 210, 255, 0.35);
    color: var(--gs-global-primary, #00d2ff);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 4px 12px;
    border-radius: 999px;
    margin-bottom: 12px;
}

.archive .page-title,
.category .page-title {
    font-family: 'Rajdhani', 'Outfit', sans-serif !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.5px !important;
}

.archive .taxonomy-description,
.category .taxonomy-description {
    color: #94a3b8 !important;
    font-size: 15px !important;
    margin-top: 10px !important;
    line-height: 1.6 !important;
}

/* Transform Archive Posts into a 3-Column Gaming Grid */
.archive .site-main > div:not(.page-header),
.category .site-main > div:not(.page-header),
.archive .page-content,
.category .page-content,
.archive .posts-group,
.category .posts-group {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: 24px !important;
    box-sizing: border-box !important;
}

/* Individual Archive Post Card */
.archive article,
.category article {
    background: linear-gradient(180deg, rgba(17, 28, 53, 0.75) 0%, rgba(11, 18, 34, 0.95) 100%) !important;
    border: 1px solid var(--gs-global-border, rgba(255, 255, 255, 0.08)) !important;
    border-radius: 16px !important;
    padding: 22px !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5) !important;
    display: flex !important;
    flex-direction: column !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.archive article:hover,
.category article:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(0, 210, 255, 0.4) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 210, 255, 0.25) !important;
}

/* Archive Post Images */
.archive article img,
.category article img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    margin-bottom: 14px !important;
    display: block !important;
    transition: transform 0.4s ease !important;
}

.archive article:hover img,
.category article:hover img {
    transform: scale(1.04) !important;
}

/* Archive Post Title */
.archive article h2,
.category article h2,
.archive article .entry-title,
.category article .entry-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin: 0 0 12px 0 !important;
}

.archive article h2 a,
.category article h2 a,
.archive article .entry-title a,
.category article .entry-title a {
    color: #ffffff !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.archive article h2 a:hover,
.category article h2 a:hover,
.archive article .entry-title a:hover,
.category article .entry-title a:hover {
    color: var(--gs-global-primary, #00d2ff) !important;
}

/* Archive Post Excerpt */
.archive article .entry-content,
.category article .entry-content,
.archive article .entry-summary,
.category article .entry-summary,
.archive article p,
.category article p {
    color: #94a3b8 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin: 0 0 14px 0 !important;
}

/* Archive Pagination */
.pagination,
.nav-links,
.page-numbers {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 40px 0 !important;
}

.page-numbers {
    padding: 8px 16px !important;
    border-radius: 8px !important;
    background: rgba(17, 28, 53, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.page-numbers.current,
.page-numbers:hover {
    background: var(--gs-global-primary, #00d2ff) !important;
    color: #080d1a !important;
    border-color: var(--gs-global-primary, #00d2ff) !important;
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.4) !important;
}

/* ==========================================================================
   4. Single Post Pages (/cach-cai-dat-...)
   ========================================================================== */
.single-post .site-main,
.single-post #content,
.single-post #primary {
    max-width: 980px !important;
    margin: 30px auto 60px auto !important;
    padding: 40px 48px !important;
    background: var(--gs-global-card-bg, rgba(13, 22, 41, 0.88)) !important;
    border: 1px solid var(--gs-global-border, rgba(255, 255, 255, 0.08)) !important;
    border-radius: 22px !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65), 0 0 30px rgba(0, 210, 255, 0.08) !important;
    backdrop-filter: blur(14px) !important;
    box-sizing: border-box !important;
}

/* Single Post Glass Container (nếu có article) */
.single-post article.post,
.single-post .entry-header-wrap,
.single-post .elementor-widget-theme-post-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Single Post Title */
.single-post h1.entry-title,
.single-post h1.post-title,
.single-post .page-title {
    font-family: 'Rajdhani', 'Outfit', sans-serif !important;
    font-size: 34px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.3 !important;
    margin: 0 0 20px 0 !important;
    letter-spacing: 0.3px !important;
}

/* Single Post Meta */
.single-post .entry-meta,
.single-post .post-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 16px !important;
    padding-bottom: 20px !important;
    margin-bottom: 25px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #94a3b8 !important;
    font-size: 13.5px !important;
}

/* Single Post Featured Image & Content Images */
.single-post .post-thumbnail img,
.single-post .entry-content img {
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.55) !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 20px auto !important;
    display: block !important;
}

/* Single Post Typography & Headings */
.single-post .entry-content p,
.single-post .entry-content li {
    font-size: 16.5px !important;
    line-height: 1.8 !important;
    color: #cbd5e1 !important;
    margin-bottom: 22px !important;
}

.single-post .entry-content h2,
.single-post .entry-content h3,
.single-post .entry-content h4 {
    color: #ffffff !important;
    font-weight: 700 !important;
    margin-top: 38px !important;
    margin-bottom: 18px !important;
    border-left: 4px solid var(--gs-global-primary, #00d2ff) !important;
    padding-left: 14px !important;
}

.single-post .entry-content h2 {
    font-size: 24px !important;
}

.single-post .entry-content h3 {
    font-size: 20px !important;
}

/* Blockquotes */
.single-post .entry-content blockquote {
    background: rgba(17, 28, 53, 0.6) !important;
    border-left: 4px solid var(--gs-global-primary, #00d2ff) !important;
    border-radius: 0 12px 12px 0 !important;
    padding: 16px 22px !important;
    margin: 24px 0 !important;
    font-style: italic !important;
    color: #94a3b8 !important;
}

/* ==========================================================================
   5. Glowing Gaming CTA Buttons (Download Buttons)
   ========================================================================== */
.single-post a img[alt*="LINK TẠI ĐÂY"],
.single-post a[href*="drive.google"] img,
.single-post a[href*="mediafire"] img,
.single-post .btn-download,
.single-post a.download-btn {
    border-radius: 999px !important;
    box-shadow: 0 0 25px rgba(0, 210, 255, 0.45) !important;
    transition: all 0.3s ease !important;
    animation: gsCtaPulse 2.5s infinite ease-in-out !important;
}

@keyframes gsCtaPulse {
    0%, 100% {
        box-shadow: 0 0 15px rgba(0, 210, 255, 0.4);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 35px rgba(0, 210, 255, 0.75);
        transform: scale(1.03);
    }
}

/* ==========================================================================
   6. Footer Styling
   ========================================================================== */
footer,
.site-footer,
#site-footer,
.elementor-location-footer {
    background: #060a14 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #94a3b8 !important;
    padding: 30px 20px !important;
    text-align: center !important;
}

footer a,
.site-footer a {
    color: var(--gs-global-primary, #00d2ff) !important;
}

/* ==========================================================================
   7. Responsive Breakpoints
   ========================================================================== */
@media (max-width: 1024px) {
    .archive .site-main > div:not(.page-header),
    .category .site-main > div:not(.page-header) {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .single-post article.post {
        padding: 30px 28px !important;
    }
}

@media (max-width: 768px) {
    .archive .site-main > div:not(.page-header),
    .category .site-main > div:not(.page-header) {
        grid-template-columns: 1fr !important;
    }

    .archive .page-title,
    .category .page-title {
        font-size: 24px !important;
    }

    .single-post article.post {
        padding: 22px 18px !important;
        border-radius: 16px !important;
    }

    .single-post h1.entry-title,
    .single-post h1.post-title {
        font-size: 24px !important;
    }
}