/* ====================== */
/* KQXS - KIỂU TRUYỀN THỐNG CHUẨN (THU GỌN 700PX) */
/* ====================== */
:root {
    --border-color: #7f7f7f;
    --text-color: #000000;
    --special-color: #dd0000;
    --bg-header: #f2f2f2;
    --bg-label: #ffffff;
    --bg-giai-nhat: #ffc107;
}

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

body {
    font-family: Arial, sans-serif;
    background: #ffffff;
    color: var(--text-color);
    padding: 15px; /* Giảm padding body để tăng không gian hiển thị */
}

h2 {
    text-align: center;
    font-size: 1.6rem;
    margin-bottom: 20px;
}

/* Wrap chứa 2 bảng cố định chiều rộng tổng thể 700px */
.wrap {
    display: flex;
    gap: 12px; /* Giảm khoảng cách giữa 2 bảng để tiết kiệm không gian */
    max-width: 690px; /* Độ rộng toàn bộ trang theo yêu cầu của bạn */
    margin: 0 auto 25px auto;
    align-items: flex-start;
    justify-content: space-between;
}

/* ====================== */
/* BẢNG KẾT QUẢ CHÍNH (Thu gọn kích thước) */
/* ====================== */
.kq-box {
    width: 440px; /* Đặt chiều rộng cố định lý tưởng trong không gian 700px */
    border: 3px solid var(--border-color); /* Giảm độ dày viền một chút cho thanh thoát */
    background: #ffffff;
    flex-shrink: 0;
}

.header {
    background: var(--bg-header);
    color: var(--text-color);
    padding: 8px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: bold;
    border-bottom: 2px solid var(--border-color);
}

/* Cấu trúc hàng dạng Flexbox */
.row {
    display: flex;
    border-bottom: 2px solid var(--border-color);
    min-height: 42px; /* Giảm chiều cao hàng một chút */
    align-items: stretch;
}

.row:last-child {
    border-bottom: none;
}

/* Cột tiêu đề giải (Đặc biệt, Giải nhất...) */
.label {
    width: 85px; /* Thu hẹp chiều rộng label từ 100px xuống 85px */
    padding: 5px;
    font-weight: bold;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 2px solid var(--border-color);
    flex-shrink: 0;
    text-align: center;
}

/* Vùng chứa các số trúng thưởng */
.numbers {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 2px 5px;
    font-size: 1.35rem; /* Giảm font-size để không bị tràn hoặc sát vạch */
    font-weight: bold;
}

/* Định dạng riêng cho hàng Giải Đặc Biệt */
.row.db .label {
    color: var(--special-color);
}
.row.db .numbers {
    color: var(--special-color);
    font-size: 1.8rem; /* Giảm từ 2.2rem xuống 1.8rem để vừa vặn chiều ngang mới */
    font-weight: bold;
}

/* Định dạng riêng cho hàng Giải Nhất */
.row.giai-nhat {
    background: var(--bg-giai-nhat);
}

/* Thiết lập chia cột bằng border dọc cho các giải */
.numbers span {
    flex: 1;
    text-align: center;
    padding: 0px 0;
    white-space: nowrap; /* Đảm bảo số không bao giờ bị rớt dòng */
}
.numbers span:not(:last-child) {
    border-right: 1px solid var(--border-color);
}

/* ====================== */
/* BẢNG LÔ TÔ (Thu gọn kích thước) */
/* ====================== */
.loto {
    width: 248px; /* Tự động lấp đầy phần còn lại (700px - 440px - 12px gap = 248px) */
    border-collapse: collapse;
    border: 3px solid var(--border-color);
    background: white;
    flex-shrink: 0;
}

.loto th {
    background: #ffffff;
    color: #dd0000;
    padding: 8px 5px;
    font-size: 1.1rem;
    font-weight: bold;
    border-bottom: 2px solid var(--border-color);
    border-right: 1px solid var(--border-color);
}
.loto th:last-child {
    border-right: none;
}

.loto td {
    padding: 6px 8px; /* Giảm bớt padding của các ô loto */
    border-bottom: 1px solid var(--border-color);
    font-size: 1.05rem; /* Thu nhỏ font loto một chút để chứa được chuỗi số dài */
    font-weight: bold;
    vertical-align: middle;
}
.loto tr:last-child td {
    border-bottom: none;
}

/* Cột Đầu */
.loto td:first-child {
    color: #dd0000;
    width: 45px; /* Giảm chiều rộng cột Đầu để nhường chỗ cho cột hiển thị số */
    text-align: center;
    border-right: 2px solid var(--border-color);
}

/* Cột Lô tô số */
.loto td:last-child {
    text-align: left;
    letter-spacing: 0.2px;
    word-break: break-word; /* Tự động ngắt dòng thông minh nếu một đầu trúng quá nhiều số loto */
}

/* Định dạng chữ số loto */
.loto td:last-child span {
    color: #000000;
}
.loto td:last-child span.highlight {
    color: var(--special-color);
}

/* ====================== */
/* PHÂN TRANG          */
/* ====================== */
.pagination {
    text-align: center;
    margin: 30px 0;
}
.pagination a {
    display: inline-block;
    padding: 6px 12px;
    margin: 0 3px;
    background: #f2f2f2;
    color: #333;
    text-decoration: none;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.pagination a:hover, .pagination a.active {
    background: var(--border-color);
    color: white;
}