/*
Theme Name: DABET
Theme URI: https://dabet.com
Author: DABET Team
Author URI: https://dabet.com
Description: DABET - Nền tảng cá cược trực tuyến đẳng cấp từ Hoa Kỳ. Chuyên cung cấp các dịch vụ cá độ thể thao, live casino, bắn cá đổi thưởng và nổ hũ jackpot.
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: dabet
Tags: responsive, custom-menu, featured-images, theme-options
*/

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

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f5f5f5;
}

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

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

a {
    color: #c91010;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #ff1a1a;
}

.btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: #c91010;
    color: #fff;
    border: 2px solid #c91010;
}

.btn-primary:hover {
    background-color: #ff1a1a;
    border-color: #ff1a1a;
    color: #fff;
}

.btn-secondary {
    background-color: transparent;
    color: #fff;
    border: 2px solid #fff;
}

.btn-secondary:hover {
    background-color: #c91010;
    color: #fff;
}

.section {
    padding: 60px 0;
}

.section-title {
    font-size: 2.5rem;
    color: #c91010;
    margin-bottom: 30px;
    text-align: center;
}

.section-content {
    background: #fff;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-bottom: 30px;
}

.hero {
    background: linear-gradient(135deg, #c91010 0%, #ff1a1a 100%);
    color: #fff;
    padding: 80px 0;
    text-align: center;
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 20px;
}

.hero p {
    font-size: 1.2rem;
    max-width: 800px;
    margin: 0 auto 30px;
}

.content-area {
    padding: 40px 0;
}

.sidebar {
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.sidebar-title {
    font-size: 1.5rem;
    color: #c91010;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #c91010;
}

.widget {
    margin-bottom: 30px;
}

.widget ul {
    list-style: none;
}

.widget li {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.widget li:last-child {
    border-bottom: none;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin: 30px 0;
    background: #fff;
}

table th,
table td {
    padding: 15px;
    text-align: left;
    border: 1px solid #ddd;
}

table th {
    background-color: #c91010;
    color: #fff;
    font-weight: 600;
}

table tr:nth-child(even) {
    background-color: #f9f9f9;
}

table tr:hover {
    background-color: #f1f1f1;
}

ul, ol {
    margin-left: 20px;
    margin-bottom: 20px;
}

li {
    margin-bottom: 10px;
}

h1, h2, h3, h4, h5, h6 {
    color: #333;
    margin-bottom: 20px;
    line-height: 1.3;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.75rem;
}

p {
    margin-bottom: 20px;
}

.cta-section {
    background: linear-gradient(135deg, #c91010 0%, #ff1a1a 100%);
    color: #fff;
    padding: 60px 0;
    text-align: center;
}

.cta-section h2 {
    color: #fff;
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.cta-section p {
    font-size: 1.2rem;
    max-width: 800px;
    margin: 0 auto 30px;
}

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

@media (max-width: 768px) {
    body {
        font-size: 14px;
    }

    .container {
        padding: 0 15px;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .section-content {
        padding: 20px;
    }

    .cta-section h2 {
        font-size: 1.8rem;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .btn {
        width: 100%;
        max-width: 300px;
    }

    table {
        font-size: 0.9rem;
    }

    table th,
    table td {
        padding: 10px;
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.6rem;
    }

    h3 {
        font-size: 1.4rem;
    }
}

@media (max-width: 480px) {
    .hero {
        padding: 40px 0;
    }

    .section {
        padding: 30px 0;
    }

    .section-content {
        padding: 15px;
    }
}