/* Reset và Cài đặt Cơ bản */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f7f9; /* Màu nền xám rất nhạt */
    color: #333;
    line-height: 1.6;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Căn lề trên cùng */
    min-height: 100vh;
}

/* Container Chính */
.quiz-container {
    width: 95%;
    max-width: 900px; /* Tăng max-width một chút */
    background-color: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Đổ bóng nhẹ nhàng hơn */
    padding: 30px;
    border-radius: 12px; /* Bo góc nhiều hơn */
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Khu vực Câu hỏi */
.question-area {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e0e0e0; /* Đường kẻ phân cách nhẹ */
}

#word {
    font-size: 2.2em; /* Tăng kích thước chữ */
    font-weight: 600; /* Đậm vừa phải */
    color: #0056b3; /* Màu xanh đậm hơn */
    margin-bottom: 10px;
    text-align: center;
}

#examples {
    margin-bottom: 15px;
    color: #555;
    font-size: 1.1em;
    text-align: center;
    padding: 0 15px; /* Thêm padding */
}

#word-type {
    font-style: italic;
    color: #777;
    margin-bottom: 5px;
    text-align: center;
    font-size: 1em;
}

/* Khu vực Tương tác */
.interaction-area {
    display: flex;
    flex-direction: column; /* Mặc định xếp chồng */
    gap: 30px;
    margin-bottom: 30px;
}

/* Responsive cho interaction-area */
@media (min-width: 768px) {
    .interaction-area {
        flex-direction: row; /* Xếp ngang trên màn hình lớn hơn */
        gap: 40px; /* Tăng khoảng cách */
    }
    .word-bank-container,
    .answer-container {
        flex: 1; /* Chia đều không gian */
    }
}

.interaction-area h3 {
    font-size: 1.1em;
    font-weight: 600;
    color: #444;
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
}

/* Ngân hàng từ */
#word-bank {
    display: flex;
    flex-wrap: wrap;
    gap: 12px; /* Tăng gap */
    padding: 15px;
    background-color: #f8f9fa; /* Nền sáng hơn */
    border-radius: 8px;
    min-height: 100px; /* Đảm bảo có chiều cao tối thiểu */
}

#word-bank div {
    padding: 8px 18px; /* Điều chỉnh padding */
    background-color: #e9ecef; /* Màu nền xám nhạt */
    border: 1px solid #dee2e6; /* Border nhẹ */
    color: #495057;
    border-radius: 20px; /* Bo tròn nhiều hơn */
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    font-size: 0.95em;
    user-select: none; /* Ngăn chọn chữ */
}

#word-bank div:hover {
    background-color: #d6dee2;
    transform: translateY(-1px); /* Hiệu ứng nhấc lên nhẹ */
}

#word-bank div.disabled,
#word-bank div[style*="opacity: 0.5"] /* Bắt style inline của JS */ {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none; /* Quan trọng: Ngăn click */
}

/* Khu vực trả lời */
#sentence {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
    min-height: 100px;
}

#sentence div {
    flex: 1;
    min-width: 120px; /* Chiều rộng tối thiểu */
    padding: 10px 15px;
    background-color: #fff; /* Nền trắng */
    border: 1px solid #ced4da; /* Border thay cho dashed */
    border-radius: 6px;
    min-height: 45px; /* Tăng chiều cao tối thiểu */
    text-align: center;
    display: flex; /* Căn giữa nội dung */
    align-items: center;
    justify-content: center;
    font-weight: 500;
    color: #495057;
    transition: background-color 0.3s ease;
}

/* Định dạng cho ô trả lời đúng/sai (JS sẽ thêm style inline) */
#sentence div[style*="background-color: lightgreen;"] {
    border-color: #28a745;
    color: #155724;
    background-color: #d4edda !important; /* Ghi đè style inline nếu cần */
}

#sentence div[style*="background-color: lightcoral;"] {
    border-color: #dc3545;
    color: #721c24;
    background-color: #f8d7da !important; /* Ghi đè style inline nếu cần */
}


/* Khu vực Điều khiển */
.controls {
    margin-bottom: 30px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0; /* Đường kẻ phân cách */
    display: flex;
    gap: 15px; /* Khoảng cách giữa các nút */
    justify-content: center; /* Căn giữa các nút */
    flex-wrap: wrap; /* Xuống dòng nếu không đủ chỗ */
}

button {
    padding: 12px 25px; /* Tăng padding */
    background-color: #007bff; /* Màu xanh dương chính */
    color: #ffffff;
    border: none;
    border-radius: 6px; /* Bo góc vừa phải */
    cursor: pointer;
    font-size: 1em;
    font-weight: 500;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    min-width: 120px; /* Đảm bảo nút không quá nhỏ */
}

button:hover {
    background-color: #0056b3; /* Đậm hơn khi hover */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

button:active {
     background-color: #004085; /* Đậm hơn nữa khi nhấn */
     transform: translateY(1px);
}


button:disabled {
    background-color: #adb5bd; /* Màu xám cho nút vô hiệu hóa */
    cursor: not-allowed;
    box-shadow: none;
}

#reset-button {
    background-color: #6c757d; /* Màu xám cho nút làm lại */
}
#reset-button:hover {
    background-color: #5a6268;
}
#reset-button:active {
    background-color: #495057;
}

#next-button {
    background-color: #28a745; /* Màu xanh lá cho nút tiếp tục */
}
#next-button:hover {
    background-color: #218838;
}
#next-button:active {
    background-color: #1e7e34;
}

/* Khu vực Kết quả & Thống kê */
.results-area {
    margin-bottom: 30px;
    text-align: center;
}

#result {
    padding: 15px;
    font-size: 1.1em;
    margin-bottom: 15px;
    color: #17a2b8; /* Màu xanh lam nhạt */
    background-color: #e7f7f9;
    border: 1px solid #bee5eb;
    border-radius: 6px;
    min-height: 50px; /* Đảm bảo có chiều cao */
}

#statistics {
    font-size: 1em;
    font-weight: 500;
    color: #555;
}

/* Khu vực Lịch sử */
.history-area {
    margin-top: 20px;
}

#learning-history-container {
    margin-top: 20px;
    font-size: 0.9em; /* Giảm cỡ chữ bảng */
}

#learning-history-container h3 {
    font-size: 1.2em; /* Cỡ chữ tiêu đề lịch sử */
    margin-bottom: 15px;
    text-align: center;
    color: #333;
}
#average-percentage-container {
    text-align: center;
    margin-bottom: 15px;
    font-size: 1em;
}

.table-wrapper {
     max-height: 400px; /* Giới hạn chiều cao và thêm scroll */
     overflow-y: auto;
     border: 1px solid #dee2e6; /* Thêm border cho khu vực cuộn */
     border-radius: 6px;
     margin-top: 10px;
}

#learning-history {
    width: 100%;
    border-collapse: collapse; /* Gộp đường viền */
}

#learning-history th,
#learning-history td {
    border: 1px solid #e0e0e0; /* Border nhạt hơn */
    padding: 10px 12px; /* Tăng padding */
    text-align: center;
    vertical-align: middle;
}

#learning-history th {
    background-color: #f8f9fa; /* Nền sáng cho header */
    font-weight: 600; /* Đậm hơn */
    color: #495057;
    position: sticky; /* Giữ header cố định khi cuộn */
    top: 0;
    z-index: 1;
}

#learning-history tbody tr:nth-child(even) {
    background-color: #fdfdfe; /* Màu nền xen kẽ rất nhạt */
}
#learning-history tbody tr:hover {
    background-color: #eef2f5; /* Highlight nhẹ khi hover */
}

/* Responsive cho màn hình nhỏ */
@media (max-width: 600px) {
    body {
        padding: 10px;
    }
    .quiz-container {
        padding: 15px;
    }
    #word {
        font-size: 1.8em;
    }
    #examples {
        font-size: 1em;
    }
    .interaction-area {
        flex-direction: column; /* Luôn xếp chồng trên màn hình nhỏ */
        gap: 20px;
    }
    #word-bank div, #sentence div {
        padding: 8px 15px;
        min-width: 100px;
    }
    button {
        padding: 10px 15px;
        font-size: 0.95em;
        width: 100%; /* Nút chiếm toàn bộ chiều rộng */
        margin-bottom: 5px; /* Khoảng cách khi nút xuống dòng */
    }
    .controls {
        gap: 10px;
    }

    /* Ẩn bớt cột trong bảng trên màn hình nhỏ nếu cần */
     #learning-history th:nth-child(1), /* STT */
     #learning-history td:nth-child(1),
     #learning-history th:nth-child(4), /* Tổng số từ */
     #learning-history td:nth-child(4) {
         /* display: none; /* Uncomment để ẩn cột */
     }
}