/*
Theme Name: Jun88 Đăng Nhập - SEO Theme
Theme URI: https://jun88.com
Author: SEO Theme Developer
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ế với cấu trúc chuẩn SEO, tốc độ tải trang nhanh và trải nghiệm người dùng tối ưu.
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: jun88-dang-nhap
Tags: seo, betting, casino, sports, esports, responsive, mobile-friendly

Theme được thiết kế đặc biệt cho từ khóa: Jun88 đăng nhập, Jun88.com, nhà cái Jun88, cá cược trực tuyến
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #1a56db;
    --secondary-color: #fbbf24;
    --accent-color: #dc2626;
    --text-dark: #1f2937;
    --text-light: #6b7280;
    --bg-light: #f9fafb;
    --white: #ffffff;
    --border-color: #e5e7eb;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--white);
}

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

/* Header Styles */
header {
    background: var(--white);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-top {
    background: linear-gradient(135deg, var(--primary-color), #1e40af);
    color: var(--white);
    padding: 8px 0;
    font-size: 14px;
}

.header-top .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-main {
    padding: 15px 0;
}

.header-main .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-logo {
    font-size: 28px;
    font-weight: bold;
    color: var(--primary-color);
    text-decoration: none;
}

.site-logo span {
    color: var(--accent-color);
}

/* Navigation Desktop */
.nav-desktop {
    display: flex;
    align-items: center;
}

.nav-desktop ul {
    display: flex;
    list-style: none;
    gap: 5px;
}

.nav-desktop ul li {
    position: relative;
}

.nav-desktop ul li a {
    display: block;
    padding: 12px 18px;
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.3s ease;
    border-radius: 6px;
}

.nav-desktop ul li a:hover,
.nav-desktop ul li.current-menu-item a {
    background: var(--primary-color);
    color: var(--white);
}

.btn-login {
    background: linear-gradient(135deg, var(--accent-color), #b91c1c);
    color: var(--white) !important;
    padding: 12px 24px !important;
    border-radius: 8px;
    font-weight: 700 !important;
    margin-left: 15px;
    text-transform: uppercase;
    box-shadow: 0 4px 6px rgba(220, 38, 38, 0.3);
}

.btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(220, 38, 38, 0.4);
}

/* Mobile Menu Toggle */
.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: 10px;
}

.menu-toggle span {
    width: 25px;
    height: 3px;
    background: var(--primary-color);
    margin: 3px 0;
    transition: 0.3s;
    border-radius: 2px;
}

/* Navigation Mobile */
.nav-mobile {
    display: none;
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    background: var(--white);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 999;
}

.nav-mobile.active {
    display: block;
}

.nav-mobile ul {
    list-style: none;
    padding: 15px;
}

.nav-mobile ul li {
    border-bottom: 1px solid var(--border-color);
}

.nav-mobile ul li a {
    display: block;
    padding: 15px;
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
}

.nav-mobile ul li a:hover {
    background: var(--bg-light);
    color: var(--primary-color);
}

/* Hero Section */
.hero-section {
    background: linear-gradient(135deg, #1e3a8a, #1e40af, #3b82f6);
    color: var(--white);
    padding: 80px 0;
    text-align: center;
}

.hero-section h1 {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.2;
}

.hero-section p {
    font-size: 20px;
    max-width: 800px;
    margin: 0 auto 30px;
    opacity: 0.95;
}

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

.btn-primary, .btn-secondary {
    display: inline-block;
    padding: 16px 32px;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 10px;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.btn-primary {
    background: linear-gradient(135deg, var(--secondary-color), #f59e0b);
    color: var(--text-dark);
    box-shadow: 0 6px 20px rgba(251, 191, 36, 0.4);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(251, 191, 36, 0.5);
}

.btn-secondary {
    background: var(--white);
    color: var(--primary-color);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3);
}

.btn-secondary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.4);
}

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

.content-section:nth-child(even) {
    background: var(--bg-light);
}

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

.section-title h2 {
    font-size: 36px;
    color: var(--primary-color);
    margin-bottom: 15px;
    font-weight: 700;
}

.section-title p {
    font-size: 18px;
    color: var(--text-light);
    max-width: 700px;
    margin: 0 auto;
}

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

.feature-card {
    background: var(--white);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
    border-color: var(--primary-color);
}

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

.feature-card h3 {
    font-size: 22px;
    color: var(--primary-color);
    margin-bottom: 15px;
    font-weight: 700;
}

.feature-card p {
    color: var(--text-light);
    line-height: 1.8;
}

/* Stats Section */
.stats-section {
    background: linear-gradient(135deg, var(--primary-color), #1e40af);
    color: var(--white);
    padding: 60px 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    text-align: center;
}

.stat-item h3 {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 10px;
    color: var(--secondary-color);
}

.stat-item p {
    font-size: 18px;
    opacity: 0.95;
}

/* Content Area */
.content-area {
    max-width: 900px;
    margin: 0 auto;
}

.content-area h1 {
    font-size: 42px;
    color: var(--primary-color);
    margin-bottom: 30px;
    line-height: 1.3;
}

.content-area h2 {
    font-size: 32px;
    color: var(--text-dark);
    margin: 40px 0 20px;
    font-weight: 700;
}

.content-area h3 {
    font-size: 24px;
    color: var(--text-dark);
    margin: 30px 0 15px;
    font-weight: 600;
}

.content-area p {
    font-size: 17px;
    line-height: 1.9;
    margin-bottom: 20px;
    color: #374151;
}

.content-area ul, .content-area ol {
    margin: 20px 0 20px 30px;
}

.content-area li {
    margin-bottom: 12px;
    line-height: 1.8;
    font-size: 17px;
}

/* Footer */
footer {
    background: linear-gradient(135deg, #1f2937, #111827);
    color: var(--white);
    padding: 60px 0 30px;
}

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

.footer-column h4 {
    font-size: 20px;
    margin-bottom: 20px;
    color: var(--secondary-color);
    font-weight: 700;
}

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

.footer-column ul li {
    margin-bottom: 12px;
}

.footer-column ul li a {
    color: #d1d5db;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-column ul li a:hover {
    color: var(--secondary-color);
}

.footer-bottom {
    border-top: 1px solid #374151;
    padding-top: 30px;
    text-align: center;
    color: #9ca3af;
}

/* Responsive */
@media (max-width: 768px) {
    .nav-desktop {
        display: none;
    }
    
    .menu-toggle {
        display: flex;
    }
    
    .hero-section {
        padding: 50px 0;
    }
    
    .hero-section h1 {
        font-size: 32px;
    }
    
    .hero-section p {
        font-size: 16px;
    }
    
    .section-title h2 {
        font-size: 28px;
    }
    
    .content-area h1 {
        font-size: 32px;
    }
    
    .content-area h2 {
        font-size: 26px;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stat-item h3 {
        font-size: 36px;
    }
}

@media (max-width: 480px) {
    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .btn-primary, .btn-secondary {
        width: 100%;
        text-align: center;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
}