/*
Theme Name: XSMB Theme
Theme URI: https://crichtonphoto.com
Author: CrichtonPhoto
Description: Theme xổ số miền Bắc - Clone from xoso.com.vn
Version: 2.0
*/

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

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: #333;
    background: #f0f0f0;
}

a { color: #0066cc; text-decoration: none; }
a:hover { text-decoration: underline; color: #d32f2f; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 10px; }
.clearfix::after { content: ""; display: table; clear: both; }

/* Header */
.header { background: linear-gradient(180deg, #cc0000 0%, #990000 100%); border-bottom: 3px solid #ff6600; }
.header-top { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.2); }
.header-main { padding: 15px 0; }
.header h1 { color: #fff; font-size: 32px; font-weight: bold; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); margin: 0; }
.header h1 a { color: #fff; }
.header p { color: #fff; font-size: 14px; margin-top: 5px; opacity: 0.9; }

/* Top Menu */
.top-menu { background: #333; padding: 8px 0; }
.top-menu ul { list-style: none; display: flex; flex-wrap: wrap; }
.top-menu li { margin-right: 5px; }
.top-menu a { color: #fff; padding: 5px 12px; display: block; font-size: 13px; border-radius: 3px; }
.top-menu a:hover { background: #d32f2f; text-decoration: none; }

/* Main Navigation */
.main-nav { background: linear-gradient(180deg, #ff6600 0%, #cc5200 100%); border-top: 1px solid #ff8533; border-bottom: 3px solid #990000; }
.main-nav ul { list-style: none; display: flex; }
.main-nav li { }
.main-nav a { color: #fff; font-weight: bold; padding: 12px 18px; display: block; font-size: 14px; text-transform: uppercase; }
.main-nav a:hover { background: rgba(0,0,0,0.2); text-decoration: none; }

/* Live Banner */
.live-banner { background: #fff; padding: 15px 0; margin: 15px 0; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.live-banner h2 { color: #d32f2f; font-size: 24px; text-align: center; margin-bottom: 15px; }
.live-badge { display: inline-block; background: #d32f2f; color: #fff; padding: 5px 15px; border-radius: 20px; font-size: 12px; animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }

/* Main Content Area */
.content-wrapper { display: grid; grid-template-columns: 1fr 300px; gap: 20px; margin: 20px 0; }

/* Main Content */
.main-content { background: #fff; padding: 20px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }

/* Result Table */
.result-table { width: 100%; border-collapse: collapse; margin: 20px 0; }
.result-table th { background: linear-gradient(180deg, #d32f2f 0%, #990000 100%); color: #fff; padding: 12px; text-align: center; font-weight: bold; border: 1px solid #990000; }
.result-table td { padding: 10px; text-align: center; border: 1px solid #ddd; background: #fff; }
.result-table tr:nth-child(even) td { background: #f9f9f9; }
.result-table .dac-biet { background: linear-gradient(180deg, #ffeb3b 0%, #ffc107 100%) !important; font-size: 24px; font-weight: bold; color: #d32f2f; }
.result-table .giai-nhat { font-size: 18px; font-weight: bold; color: #d32f2f; }

/* Section Titles */
.section-title { background: linear-gradient(180deg, #d32f2f 0%, #990000 100%); color: #fff; padding: 12px 20px; font-size: 18px; font-weight: bold; margin: 20px 0 15px 0; border-radius: 3px; border-bottom: 3px solid #ff6600; }

/* Posts Grid */
.posts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin: 20px 0; }
.post-card { border: 1px solid #e0e0e0; padding: 15px; border-radius: 5px; background: #fff; transition: all 0.3s; }
.post-card:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.2); transform: translateY(-2px); border-color: #d32f2f; }
.post-card h3 { font-size: 16px; margin-bottom: 10px; }
.post-card h3 a { color: #333; }
.post-card h3 a:hover { color: #d32f2f; }
.post-card p { color: #666; font-size: 13px; line-height: 1.6; }
.post-card .read-more { display: inline-block; margin-top: 10px; color: #d32f2f; font-weight: bold; }

/* Sidebar */
.sidebar { }
.widget { background: #fff; padding: 15px; margin-bottom: 20px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); border-top: 3px solid #d32f2f; }
.widget h3 { background: #f5f5f5; padding: 10px 15px; margin: -15px -15px 15px -15px; border-bottom: 1px solid #e0e0e0; font-size: 15px; color: #d32f2f; }
.widget ul { list-style: none; }
.widget li { padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
.widget li:last-child { border-bottom: none; }
.widget a { color: #333; }
.widget a:hover { color: #d32f2f; }

/* Stats Table */
.stats-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.stats-table th { background: #f5f5f5; padding: 8px; text-align: center; border: 1px solid #e0e0e0; }
.stats-table td { padding: 8px; text-align: center; border: 1px solid #e0e0e0; }
.stats-table .hot { color: #d32f2f; font-weight: bold; }
.stats-table .cold { color: #0066cc; }

/* Footer */
.footer { background: linear-gradient(180deg, #333 0%, #1a1a1a 100%); color: #ccc; padding: 30px 0 20px 0; margin-top: 30px; border-top: 5px solid #d32f2f; }
.footer-widgets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 20px; }
.footer h3 { color: #fff; font-size: 16px; margin-bottom: 15px; border-bottom: 2px solid #d32f2f; padding-bottom: 10px; }
.footer ul { list-style: none; }
.footer li { padding: 5px 0; }
.footer a { color: #ccc; }
.footer a:hover { color: #fff; }
.footer-bottom { text-align: center; padding-top: 20px; border-top: 1px solid #444; font-size: 13px; }

/* Responsive */
@media (max-width: 768px) {
    .content-wrapper { grid-template-columns: 1fr; }
    .posts-grid { grid-template-columns: 1fr; }
    .footer-widgets { grid-template-columns: 1fr; }
    .main-nav ul { flex-wrap: wrap; }
    .top-menu ul { flex-direction: column; }
}

/* Utility Classes */
.text-center { text-align: center; }
.text-right { text-align: right; }
.mt-10 { margin-top: 10px; }
.mb-10 { margin-bottom: 10px; }
.bold { font-weight: bold; }
.hot { color: #d32f2f; font-weight: bold; }

/* Lottery Navigation */
.lottery-nav { background: linear-gradient(180deg, #ff6600 0%, #cc5200 100%); border-top: 1px solid #ff8533; border-bottom: 2px solid #990000; }
.lottery-nav ul { list-style: none; display: flex; justify-content: center; padding: 0; margin: 0; }
.lottery-nav li { }
.lottery-nav a { color: #fff; padding: 12px 18px; display: block; font-size: 14px; font-weight: bold; }
.lottery-nav a:hover { background: rgba(0,0,0,0.2); text-decoration: none; }
.lottery-nav .divider { color: rgba(255,255,255,0.5); padding: 12px 10px; }

/* Main Navigation - White */
.main-nav { background: #fff; border-bottom: 2px solid #e0e0e0; }
.main-nav ul { list-style: none; display: flex; justify-content: center; padding: 0; margin: 0; }
.main-nav a { color: #333; padding: 12px 18px; display: block; font-size: 13px; font-weight: bold; text-transform: uppercase; }
.main-nav a:hover { background: #f5f5f5; color: #d32f2f; text-decoration: none; }