.day-btn {
    background: #fff;
    color: var(--primary-dark);
    border: none;
    outline: none;
    padding: 3px 10px;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 900;
    margin: 0 1.5px;
    box-shadow: 0 2px 8px rgba(74,71,209,0.07);
    transition: background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.12s;
    cursor: pointer;
    letter-spacing: 0.5px;
    position: relative;
    min-width: 38px;
}
.day-btn:hover {
    background: var(--primary);
    color: #fff;
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 4px 16px rgba(74,71,209,0.13);
}
.day-btn.active, .day-btn:active {
    background: linear-gradient(90deg, #6366F1 0%, #4338CA 100%);
    color: #fff;
    box-shadow: 0 4px 16px rgba(74,71,209,0.18);
    border: 1.5px solid var(--primary);
    z-index: 1;
}

:root {
    --primary: #4A47D1;
    --primary-dark: #2E2A85;
    --bg-light: #F8FAFC;
    --text-dark: #1E293B;
    --text-gray: #64748B;
    --accent-orange: #F59E0B;
    --live-red: #EF4444;
    --nav-bg: #1E1B4B;
    --card-shadow: 0 4px 20px rgba(0,0,0,0.03);
}
* { box-sizing: border-box; font-family: 'Inter', sans-serif; }
body { background-color: #E2E8F0; display: flex; justify-content: center; min-height: 100vh; margin: 0; }

.app-container {
    width: 100%; max-width: 500px; background: var(--bg-light); position: relative;
    min-height: 100vh; padding-top: 85px; padding-bottom: 130px; box-shadow: 0 0 40px rgba(0,0,0,0.1);
}

/* --- COMMON HEADER (FIXED) --- */
.header-fixed {
    position: fixed; top: 0; width: 100%; max-width: 500px; z-index: 1050;
    padding: 15px 20px; display: flex; justify-content: space-between; align-items: center;
    background: white; box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.logo-group { display: flex; align-items: center; gap: 12px; }
.logo-icon {
    width: 45px; height: 45px; background: linear-gradient(135deg, #6366F1, #4338CA);
    border-radius: 12px; display: flex; justify-content: center; align-items: center;
}
.brand-info h1 { font-size: 18px; font-weight: 900; color: var(--primary-dark); line-height: 1.2; margin: 0; }
.brand-info p { font-size: 10px; font-weight: 700; color: #94A3B8; letter-spacing: 0.5px; margin: 0; }

/* --- CONTENT STYLES --- */
.main-title-box { background: white; border-radius: 20px; margin: 20px 20px 15px; padding: 12px; text-align: center; box-shadow: var(--card-shadow); }
.main-title-box h2 { font-size: 20px; font-weight: 900; margin: 0; color: #1E293B; }

.mode-switcher { background: white; border-radius: 20px; margin: 0 20px 20px; display: flex; padding: 5px; box-shadow: var(--card-shadow); }
.mode-btn { flex: 1; padding: 10px; text-align: center; border-radius: 15px; font-size: 11px; font-weight: 800; color: var(--text-gray); cursor: pointer; }
.mode-btn.active { background: var(--primary); color: white; }

.history-card { background: white; border-radius: 35px; margin: 0 15px 25px; padding: 20px; box-shadow: var(--card-shadow); }
.history-table { width: 100%; border-collapse: collapse; }
.history-table th { font-size: 9px; font-weight: 800; color: #94A3B8; text-transform: uppercase; text-align: center; padding-bottom: 10px; }
.history-table td { border: 1px solid #F1F5F9; padding: 8px 2px; text-align: center; font-size: 11px; }
.result-jodi { font-size: 16px; font-weight: 900; color: #1E293B; }
.result-panel { font-size: 9px; color: var(--text-gray); }

.ank-card { background: white; border-radius: 35px; margin: 0 15px 25px; padding: 20px; box-shadow: var(--card-shadow); }
.ank-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 20px; }
.ank-box { background: white; border: 1px solid #F1F5F9; border-radius: 15px; padding: 8px 0; text-align: center; box-shadow: 0 2px 5px rgba(0,0,0,0.02); }
.ank-box span:first-child { display: block; font-size: 14px; font-weight: 900; color: #1E293B; }
.ank-box span:last-child { display: block; font-size: 9px; color: #94A3B8; }

.jodi-hot-card { background: var(--nav-bg); border-radius: 35px; margin: 0 15px; padding: 25px 20px; color: white; }
.jodi-row { background: rgba(255,255,255,0.05); border-radius: 20px; padding: 15px 20px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.jodi-rank { width: 30px; height: 30px; background: white; border-radius: 50%; color: #1E293B; display: flex; justify-content: center; align-items: center; font-size: 11px; font-weight: 900; }
.jodi-num { font-size: 24px; font-weight: 900; color: white; margin-left: 15px; }

/* --- COMMON BOTTOM NAV (FIXED) --- */
.nav-bottom-fixed {
    position: fixed; bottom: 25px; width: 100%; max-width: 460px;
    left: 50%; transform: translateX(-50%); z-index: 1050;
}
.nav-inner {
    background: #2E2A6E; height: 75px; border-radius: 40px; display: flex;
    justify-content: space-around; align-items: center; position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); padding: 0 10px;
}
.nav-item { color: #94A3B8; text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; }
.nav-item.active { color: white; }
.nav-item p { margin: 0; font-size: 10px; font-weight: 800; text-transform: uppercase; color: inherit; }
.live-circle-btn {
    position: absolute; top: -30px; width: 75px; height: 75px;
    background: linear-gradient(to bottom, #FBBF24, #D97706);
    border-radius: 50%; border: 6px solid var(--bg-light);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    color: white; box-shadow: 0 10px 20px rgba(217, 119, 6, 0.3); text-decoration: none;
}
.live-circle-btn span { font-size: 9px; font-weight: 900; margin-top: 2px; }
.btn-more { width: 100%; border: none; background: #F1F5F9; color: var(--text-gray); padding: 12px; border-radius: 15px; font-size: 11px; font-weight: 800; margin-top: 15px; }
/* Hiệu ứng click (Tactile Feedback) cho các nút bấm */
.mode-btn:active { 
    transform: scale(0.95); 
    opacity: 0.9; 
}

.nav-item:active { 
    transform: scale(0.9); 
}

.live-circle-btn:active { 
    transform: scale(0.9) translateY(5px); 
}

.btn-more:active { 
    background: #E2E8F0; 
    transform: scale(0.98); 
}

/* =========================================
   PHẦN CSS MỚI: TỐI ƯU GIAO DIỆN CHỌN ĐÀI
   (Thay thế hoàn toàn đoạn fixed-sm cũ)
   ========================================= */

/* Banner trên Header */
.sm-dev-banner {
    background: #0f172a !important;
    color: #facc15 !important;
    text-align: center !important;
    font-size: 10px !important;
    padding: 5px 0 !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
}

/* Nút chọn đài trên Header (Đã làm nổi bật hơn) */
.sm-select-market-btn {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
    color: white !important;
    border: none !important;
    padding: 8px 14px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4) !important;
    transition: transform 0.2s !important;
}
.sm-select-market-btn:active { transform: scale(0.95) !important; }

/* Lớp phủ Popup - Căn giữa hoàn toàn */
.sm-popup-overlay {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100vw !important; height: 100vh !important;
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 9999 !important;
    display: none; 
    justify-content: center !important;
    align-items: center !important; /* Căn giữa màn hình để thấy hết nội dung */
}

/* Container Popup - Tối ưu chiều cao để không phải scroll */
.sm-popup-container {
    background: white !important;
    width: 95% !important;
    max-width: 480px !important;
    border-radius: 20px !important;
    padding: 15px !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2) !important;
    display: flex !important;
    flex-direction: column !important;
}

.sm-popup-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important; /* Thu hẹp gap để tiết kiệm không gian */
}

/* Thẻ Market Item - Thu gọn chiều cao và làm đẹp hơn */
.sm-market-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    padding: 10px 8px !important; /* Thu hẹp chiều cao tối đa */
    border-radius: 12px !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.sm-market-card:hover {
    border-color: #4f46e5 !important;
    background: #f8faff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.1) !important;
}

/* Tên đài và giờ - Gọn gàng hơn */
.sm-market-name {
    display: block !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    color: #334155 !important;
    margin-bottom: 2px !important;
}

.sm-market-time {
    display: inline-block !important;
    font-size: 10px !important;
    color: #6366f1 !important;
    font-weight: 600 !important;
    background: #f0f2ff !important;
    padding: 1px 8px !important;
    border-radius: 6px !important;
}

/* Mặc định Panel Mode: Hiện tất cả */
.result-wrapper .result-panel {
    display: block;
}

/* Khi ở chế độ Only Jodi: Ẩn các thành phần Panel */
.history-table.only-jodi .result-panel {
    display: none !important;
}

/* Tùy chỉnh thêm cho Jodi to hơn khi ở chế độ Jodi Mode */
.history-table.only-jodi .result-jodi {
    font-size: 1.2rem;
    font-weight: 800;
    padding: 10px 0;
}

/* Hiệu ứng chuyển đổi */
.result-panel, .result-jodi {
    transition: all 0.2s ease;
}

/* Container bọc các nút */
.day-selector-group {
    display: flex;
    gap: 4px;
    background: #f1f5f9; /* Màu nền xám nhạt */
    padding: 3px;
    border-radius: 10px; /* Bo góc cụm nút */
}

/* Style cho từng nút bấm */
.day-btn-jodi {
    border: none;             /* Bỏ viền mặc định */
    background: transparent;  /* Nền trong suốt */
    padding: 4px 10px;
    border-radius: 8px;       /* Bo góc nhẹ cho nút */
    font-size: 11px;
    font-weight: 600;
    color: #64748b;           /* Màu chữ xám */
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Khi nút được kích hoạt (Active) */
.day-btn-jodi.active {
    background: #ffffff;      /* Nền trắng */
    color: #0f172a;           /* Chữ đậm hơn */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Đổ bóng nhẹ */
}