/*
Theme Name: SEO Theme Tại Jun88
Theme URI: https://jun88.com
Author: Jun88 Team
Author URI: https://jun88.com
Description: WordPress theme tối ưu SEO cho Jun88 - Nhà cái cá cược uy tín hàng đầu châu Á. Theme được thiết kế chuyên nghiệp với giao diện responsive, tốc độ tải nhanh và tích hợp đầy đủ các tính năng hiện đại.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: seo-theme-tai-jun88
Tags: casino, betting, gaming, sports, entertainment, responsive, seo-optimized

Jun88 - Nhà cái cá cược quốc tế được cấp phép bởi Curaçao, cung cấp đa dạng các sản phẩm giải trí: Casino trực tuyến, cá cược thể thao, slot game, bắn cá, đá gà, xổ số lô đề.
*/

/* ===================================
   CSS Reset & Base Styles
   =================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #0a192f;
    --secondary-color: #112240;
    --accent-color: #64ffda;
    --text-primary: #e6f1ff;
    --text-secondary: #8892b0;
    --text-light: #ccd6f6;
    --white: #ffffff;
    --transition: all 0.3s ease;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--primary-color);
    overflow-x: hidden;
}

/* ===================================
   Typography
   =================================== */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: var(--text-light);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p {
    margin-bottom: 1rem;
    color: var(--text-secondary);
}

a {
    color: var(--accent-color);
    text-decoration: none;
    transition: var(--transition);
}

a:hover {
    color: var(--text-light);
    text-decoration: underline;
}

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

/* ===================================
   Layout
   =================================== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.site-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-content {
    flex: 1;
    padding: 40px 0;
}

/* ===================================
   Header & Navigation - PC Desktop Styles
   =================================== */
.site-header {
    background: linear-gradient(135deg, var(--secondary-color) 0%, rgba(10, 25, 47, 0.95) 100%);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(100, 255, 218, 0.1);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    max-width: 1400px;
    margin: 0 auto;
    height: 70px;
}

/* Logo Styles - PC */
.site-logo {
    flex-shrink: 0;
}

.site-logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.site-logo span {
    font-size: 2rem;
    font-weight: 800;
    color: var(--accent-color);
    letter-spacing: 2px;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--accent-color) 0%, #4cdbc0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 10px rgba(100, 255, 218, 0.3));
    transition: var(--transition);
}

.site-logo span:hover {
    filter: drop-shadow(0 0 20px rgba(100, 255, 218, 0.5));
}

.site-logo img {
    height: 50px;
    width: auto;
    transition: var(--transition);
}

.site-logo img:hover {
    transform: scale(1.05);
}

/* Desktop Navigation - PC Optimized */
.nav-desktop {
    display: flex;
    align-items: center;
    gap: 5px;
}

.nav-desktop .primary-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 5px;
}

.nav-desktop li {
    position: relative;
    margin: 0;
}

.nav-desktop a {
    color: var(--text-light);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 12px 18px;
    display: block;
    transition: all 0.3s ease;
    border-radius: 6px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.nav-desktop a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
    transition: width 0.3s ease;
}

.nav-desktop a:hover {
    color: var(--accent-color);
    background-color: rgba(100, 255, 218, 0.08);
    text-decoration: none;
    transform: translateY(-2px);
}

.nav-desktop a:hover::before {
    width: 80%;
}

.nav-desktop a.active {
    color: var(--accent-color);
    background-color: rgba(100, 255, 218, 0.1);
}

.nav-desktop a.active::before {
    width: 80%;
}

/* Desktop CTA Buttons */
.nav-desktop .cta-buttons {
    display: flex;
    gap: 10px;
    margin-left: 20px;
}

.nav-desktop .btn-cta {
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.nav-desktop .btn-primary {
    background: linear-gradient(135deg, var(--accent-color) 0%, #4cdbc0 100%);
    color: var(--primary-color);
    box-shadow: 0 4px 15px rgba(100, 255, 218, 0.3);
}

.nav-desktop .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(100, 255, 218, 0.5);
}

.nav-desktop .btn-secondary {
    background: transparent;
    color: var(--accent-color);
    border: 2px solid var(--accent-color);
}

.nav-desktop .btn-secondary:hover {
    background-color: rgba(100, 255, 218, 0.1);
    transform: translateY(-3px);
}

/* ===================================
   Mobile Navigation Styles
   =================================== */
.menu-toggle {
    display: none !important; /* Hidden by default on PC */
    background: linear-gradient(135deg, rgba(100, 255, 218, 0.1) 0%, rgba(100, 255, 218, 0.05) 100%);
    border: 2px solid var(--accent-color);
    color: var(--accent-color);
    padding: 10px 16px;
    cursor: pointer;
    font-size: 1.4rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    align-items: center;
    justify-content: center;
}

.menu-toggle:hover {
    background-color: rgba(100, 255, 218, 0.15);
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(100, 255, 218, 0.3);
}

.menu-toggle .hamburger {
    line-height: 1;
    font-weight: 300;
}

/* Mobile Navigation Panel */
.nav-mobile {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, var(--secondary-color) 0%, var(--primary-color) 100%);
    overflow-y: auto;
    z-index: 9999; /* Higher z-index to be above everything */
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -5px 0 20px rgba(0, 0, 0, 0.5);
    padding-top: 70px; /* Space for header */
}

.nav-mobile.active {
    display: block !important; /* Force display when active */
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.nav-mobile .mobile-menu {
    list-style: none;
    margin: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nav-mobile li {
    margin: 0;
    width: 100%;
}

.nav-mobile a {
    color: var(--text-light);
    font-size: 1.1rem;
    font-weight: 600;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    background-color: rgba(10, 25, 47, 0.3);
    border: 1px solid rgba(100, 255, 218, 0.05);
}

.nav-mobile a::after {
    content: '→';
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
    color: var(--accent-color);
    font-size: 1.3rem;
}

.nav-mobile a:hover {
    color: var(--accent-color);
    background-color: rgba(100, 255, 218, 0.08);
    border-color: rgba(100, 255, 218, 0.2);
    padding-left: 25px;
}

.nav-mobile a:hover::after {
    opacity: 1;
    transform: translateX(0);
}

.nav-mobile a.active {
    color: var(--accent-color);
    background-color: rgba(100, 255, 218, 0.1);
    border-color: rgba(100, 255, 218, 0.3);
}

/* Mobile CTA Buttons */
.nav-mobile .mobile-cta {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.nav-mobile .btn-cta {
    width: 100%;
    padding: 14px 20px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 8px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Mobile Menu Overlay */
.nav-mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9998; /* Below nav-mobile but above content */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.nav-mobile-overlay.active {
    display: block !important;
    opacity: 1;
    visibility: visible;
}

/* Mobile Menu Header */
.nav-mobile-header {
    padding: 20px;
    border-bottom: 1px solid rgba(100, 255, 218, 0.1);
    margin-bottom: 10px;
}

.nav-mobile-header h3 {
    color: var(--accent-color);
    font-size: 1.3rem;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Scroll indicator for mobile menu */
.nav-mobile::-webkit-scrollbar {
    width: 6px;
}

.nav-mobile::-webkit-scrollbar-track {
    background: rgba(10, 25, 47, 0.5);
}

.nav-mobile::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: 3px;
}

.nav-mobile::-webkit-scrollbar-thumb:hover {
    background: #4cdbc0;
}

/* ===================================
   Hero Section
   =================================== */
.hero-section {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    padding: 80px 0;
    text-align: center;
}

.hero-content h1 {
    font-size: 3rem;
    margin-bottom: 20px;
    color: var(--accent-color);
}

.hero-content p {
    font-size: 1.2rem;
    max-width: 800px;
    margin: 0 auto 30px;
    color: var(--text-secondary);
}

.hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn {
    display: inline-block;
    padding: 15px 30px;
    border-radius: 5px;
    font-weight: 600;
    text-transform: uppercase;
    transition: var(--transition);
    border: none;
    cursor: pointer;
}

.btn-primary {
    background-color: var(--accent-color);
    color: var(--primary-color);
}

.btn-primary:hover {
    background-color: #4cdbc0;
    text-decoration: none;
}

.btn-secondary {
    background-color: transparent;
    color: var(--accent-color);
    border: 2px solid var(--accent-color);
}

.btn-secondary:hover {
    background-color: rgba(100, 255, 218, 0.1);
    text-decoration: none;
}

/* ===================================
   Content Sections
   =================================== */
.content-section {
    padding: 60px 0;
}

.section-title {
    text-align: center;
    margin-bottom: 40px;
}

.section-title h2 {
    color: var(--accent-color);
    font-size: 2.5rem;
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
}

.section-title h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background-color: var(--accent-color);
}

.content-block {
    background-color: var(--secondary-color);
    padding: 40px;
    border-radius: 8px;
    margin-bottom: 30px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

/* Content with Image Layout */
.content-with-image {
    display: flex;
    gap: 30px;
    align-items: center;
    margin-bottom: 30px;
}

.content-with-image.image-left {
    flex-direction: row-reverse;
}

.content-with-image .content-text {
    flex: 1;
}

.content-with-image .content-image {
    flex: 0 0 400px;
}

.content-with-image .content-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.content-with-image .content-image img:hover {
    transform: scale(1.02);
}

/* Feature Card Images */
.feature-card .feature-image {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.content-block h3 {
    color: var(--accent-color);
    margin-bottom: 20px;
}

.content-block ul,
.content-block ol {
    margin-left: 30px;
    margin-bottom: 20px;
    color: var(--text-secondary);
}

.content-block li {
    margin-bottom: 10px;
}

/* ===================================
   Features Grid
   =================================== */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.feature-card {
    background-color: var(--secondary-color);
    padding: 30px;
    border-radius: 8px;
    text-align: center;
    transition: var(--transition);
    border: 1px solid transparent;
}

.feature-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-color);
    box-shadow: 0 10px 20px rgba(100, 255, 218, 0.1);
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 20px;
}

.feature-card h3 {
    color: var(--accent-color);
    margin-bottom: 15px;
}

/* ===================================
   Products Table
   =================================== */
.products-table {
    width: 100%;
    border-collapse: collapse;
    margin: 30px 0;
    background-color: var(--secondary-color);
    border-radius: 8px;
    overflow: hidden;
}

.products-table th,
.products-table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid rgba(100, 255, 218, 0.1);
}

.products-table th {
    background-color: rgba(10, 25, 47, 0.8);
    color: var(--accent-color);
    font-weight: 600;
    text-transform: uppercase;
}

.products-table tr:hover {
    background-color: rgba(100, 255, 218, 0.05);
}

/* ===================================
   FAQ Section
   =================================== */
.faq-section {
    background-color: var(--secondary-color);
    padding: 60px 0;
    border-radius: 8px;
    margin-top: 40px;
}

.faq-item {
    margin-bottom: 30px;
    padding: 20px;
    border-left: 4px solid var(--accent-color);
    background-color: rgba(10, 25, 47, 0.5);
    border-radius: 4px;
}

.faq-item h3 {
    color: var(--accent-color);
    margin-bottom: 15px;
    font-size: 1.3rem;
}

/* ===================================
   Footer
   =================================== */
.site-footer {
    background-color: var(--secondary-color);
    padding: 40px 0 20px;
    margin-top: auto;
    border-top: 1px solid rgba(100, 255, 218, 0.1);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 30px;
}

.footer-section h4 {
    color: var(--accent-color);
    margin-bottom: 20px;
    font-size: 1.2rem;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 10px;
}

.footer-section a {
    color: var(--text-secondary);
    transition: var(--transition);
}

.footer-section a:hover {
    color: var(--accent-color);
    text-decoration: none;
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(100, 255, 218, 0.1);
    color: var(--text-secondary);
}

/* ===================================
   Responsive Design - Mobile & Tablet
   =================================== */
@media (max-width: 1024px) {
    /* Tablet - Reduce spacing */
    .header-container {
        padding: 0 20px;
    }
    
    .nav-desktop a {
        padding: 10px 14px;
        font-size: 0.9rem;
    }
}

@media (max-width: 768px) {
    /* Mobile - Hide desktop nav, show hamburger */
    .nav-desktop {
        display: none !important;
    }
    
    .menu-toggle {
        display: flex !important; /* Show hamburger on mobile */
    }
    
    /* Logo smaller on mobile */
    .site-logo span {
        font-size: 1.5rem;
        letter-spacing: 1px;
    }
    
    .site-logo img {
        height: 40px;
    }
    
    /* Header container adjustments */
    .header-container {
        padding: 0 15px;
        height: 60px;
    }
    
    /* Hero section mobile */
    .hero-content h1 {
        font-size: 1.8rem;
        margin-bottom: 15px;
    }
    
    .hero-content p {
        font-size: 1rem;
        margin-bottom: 20px;
    }
    
    .hero-buttons {
        flex-direction: column;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
    
    .hero-buttons .btn {
        width: 100%;
        text-align: center;
    }
    
    /* Content blocks mobile */
    .content-block {
        padding: 20px;
        margin-bottom: 20px;
    }
    
    /* Content with image mobile */
    .content-with-image {
        flex-direction: column !important;
        gap: 20px;
    }
    
    .content-with-image .content-image {
        flex: 0 0 100%;
    }
    
    .content-with-image .content-image img {
        max-height: 250px;
    }
    
    /* Feature images mobile */
    .feature-card .feature-image {
        height: 120px;
    }
    
    .section-title h2 {
        font-size: 1.8rem;
    }
    
    /* Features grid - single column */
    .features-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .feature-card {
        padding: 25px;
    }
    
    /* Table responsive */
    .products-table {
        font-size: 0.85rem;
    }
    
    .products-table th,
    .products-table td {
        padding: 12px 8px;
    }
    
    /* Typography scale down */
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.6rem; }
    h3 { font-size: 1.3rem; }
    h4 { font-size: 1.1rem; }
    
    /* Footer mobile */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .footer-section {
        text-align: center;
    }
    
    /* Contact form mobile */
    .contact-form div[style*="grid-template-columns"] {
        display: block !important;
    }
    
    .contact-form input,
    .contact-form select,
    .contact-form textarea {
        width: 100% !important;
    }
}

@media (max-width: 480px) {
    /* Extra small mobile */
    .site-logo span {
        font-size: 1.3rem;
        letter-spacing: 0.5px;
    }
    
    .header-container {
        padding: 0 10px;
        height: 55px;
    }
    
    .menu-toggle {
        width: 45px;
        height: 45px;
        font-size: 1.2rem;
    }
    
    .hero-content h1 {
        font-size: 1.5rem;
    }
    
    .hero-content p {
        font-size: 0.9rem;
    }
    
    .btn {
        padding: 12px 20px;
        font-size: 0.85rem;
    }
    
    .feature-icon {
        font-size: 2.5rem;
    }
    
    .nav-mobile a {
        font-size: 1rem;
        padding: 14px 16px;
    }
}

/* Landscape mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .nav-mobile {
        max-height: calc(100vh - 60px);
    }
    
    .hero-section {
        padding: 40px 0;
    }
}

/* Print styles */

/* ===================================
   Utility Classes
   =================================== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }

.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }

.hidden { display: none; }
.visible { display: block; }