/* --- Reset & Base Styles --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: #f4f7f6; /* Màu nền xám rất nhạt */
    color: #333;
    line-height: 1.6;
    display: flex;
    justify-content: center;
    padding: 20px;
    min-height: 100vh;
}

/* --- Container --- */
.container {
    background-color: #ffffff;
    padding: 30px 40px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    width: 100%;
    max-width: 1100px;
    text-align: center;
}

/* --- Typography --- */
h1 {
    font-size: 2rem; /* 32px */
    color: #2c3e50; /* Màu xanh đậm */
    margin-bottom: 25px;
    font-weight: 700;
}

h2 {
    font-size: 1.5rem; /* 24px */
    color: #34495e; /* Màu xanh xám */
    margin-top: 30px;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    text-align: left;
}

/* --- Practice Area --- */
.practice-area {
    margin-bottom: 30px;
    padding: 25px; /* Tăng padding một chút */
    background-color: #fdfdfd;
    border: 1px solid #eef1f0;
    border-radius: 8px;
}

.countdown {
    font-size: 1rem;
    color: #888;
    margin-bottom: 15px;
    min-height: 1.6em; /* Giữ không gian */
}

.sentence-display {
    font-size: 1.5rem; /* 24px */
    margin-bottom: 25px;
    color: #555;
    min-height: 1.6em * 1.5; /* Giữ không gian đủ cho 1 dòng câu */
    display: block; /* Luôn hiển thị để giữ không gian */
    /* Nội dung sẽ được JS điền vào, có thể ban đầu để trống */
		display: none;
}

.input-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px 15px; /* Tăng khoảng cách dọc để chứa icon loa và span đáp án */
    margin-bottom: 25px;
    padding: 10px 0; /* Thêm padding trên dưới cho grid */
}

.word-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.input-box {
    font-size: 1.1rem; /* 17.6px */
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    width: 130px;
    text-align: center;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 5px; /* Khoảng cách với icon loa */
}

.input-box:focus {
    border-color: #3498db; /* Màu xanh dương nhấn */
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
    outline: none;
}

.input-box:disabled {
    background-color: #f8f8f8;
    cursor: not-allowed;
}

.input-box.correct-input { /* Lớp CSS mới cho input đúng */
    border-color: #2ecc71; /* Màu xanh lá cây */
    background-color: #e8f8f0;
}

.input-box.incorrect-input { /* Lớp CSS mới cho input sai */
    border-color: #e74c3c; /* Màu đỏ */
    background-color: #fdedec;
}

/* Định dạng cho span hiển thị đáp án đúng khi sai */
.word-container span[id^="answer-"] {
    display: block;
    margin-top: 4px;
    font-size: 0.9rem;
    color: #e74c3c; /* Màu đỏ cho đáp án sai */
    font-weight: 500;
    min-height: 1.4em; /* Giữ không gian */
}

/* Hiển thị lại icon loa */
.speaker-icon {
    display: block; /* Hiển thị lại icon */
    font-size: 1rem;
    color: #777;
    cursor: pointer;
    margin-top: 5px;
    transition: color 0.2s ease;
}
.speaker-icon:hover {
    color: #3498db;
}

.controls {
    margin-top: 25px; /* Tăng khoảng cách */
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Cho phép nút xuống dòng trên màn hình hẹp */
    gap: 15px;
}

.controls button {
    background-color: #3498db; /* Màu xanh dương làm màu nhấn */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500; /* Hơi đậm hơn */
    transition: background-color 0.3s ease, transform 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Khoảng cách giữa icon và text */
}

.controls button:hover:not(:disabled) {
    background-color: #2980b9; /* Màu xanh dương đậm hơn khi hover */
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.controls button:disabled {
    background-color: #bdc3c7; /* Màu xám nhạt cho nút bị vô hiệu hóa */
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.controls button i {
    font-size: 1.1em;
}

.result-feedback {
    font-size: 1.1rem;
    font-weight: bold;
    min-height: 1.5em; /* Giữ không gian */
    margin-top: 15px;
    color: #e67e22; /* Màu cam cho feedback */
}

/* --- ========================== --- */
/* --- ADDED: Instructions Section CSS --- */
/* --- ========================== --- */
.instructions-section {
    margin: 25px auto; /* Khoảng cách trên dưới, căn giữa */
    background-color: #f8f9fa; /* Nền hơi khác */
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 10px 15px; /* Padding trong */
    max-width: 800px; /* Giới hạn chiều rộng */
    text-align: left; /* Căn trái nội dung */
}

.instructions-section summary {
    font-weight: 600;
    color: #495057;
    cursor: pointer;
    padding: 8px 5px; /* Tăng padding cho summary */
    list-style: none; /* Ẩn mũi tên mặc định */
    display: flex;
    align-items: center;
    gap: 10px; /* Tăng khoảng cách icon và text */
    transition: color 0.2s ease;
    user-select: none; /* Ngăn chọn text của summary */
}

.instructions-section summary:hover {
    color: #3498db; /* Màu nhấn khi hover */
}

/* Biểu tượng tùy chỉnh cho summary (thay thế mũi tên mặc định) */
.instructions-section summary::before {
    content: '\f0da'; /* Mã FontAwesome cho icon caret-right */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-right: 8px;
    transition: transform 0.3s ease;
    display: inline-block; /* Để transform hoạt động */
    color: #6c757d; /* Màu xám cho icon */
    width: 1em; /* Đảm bảo icon chiếm đủ không gian */
}

.instructions-section[open] summary::before {
    transform: rotate(90deg); /* Xoay icon khi mở */
}

.instructions-section summary::-webkit-details-marker {
    display: none; /* Ẩn mũi tên mặc định trên Chrome/Safari */
}
.instructions-section summary::-moz-list-bullet {
     list-style-type: none; /* Ẩn mũi tên mặc định trên Firefox */
}
.instructions-section summary::marker {
    display: none; /* Ẩn mũi tên mặc định chuẩn */
}

.instructions-content {
    padding: 15px 5px 10px 5px; /* Padding cho nội dung */
    border-top: 1px solid #e9ecef; /* Đường kẻ phân cách */
    margin-top: 10px;
    color: #555;
    font-size: 0.95rem;
}

.instructions-content h4 {
    font-size: 1.1rem;
    color: #34495e;
    margin-top: 10px;
    margin-bottom: 8px;
}
.instructions-content h4:first-child {
    margin-top: 0;
}

.instructions-content ul {
    list-style: disc; /* Kiểu danh sách */
    margin-left: 25px; /* Thụt lề danh sách */
    margin-bottom: 15px;
    padding-left: 10px; /* Thêm padding trái cho ul */
}

.instructions-content li {
    margin-bottom: 8px; /* Tăng khoảng cách dòng */
}

.instructions-content i {
    color: #3498db; /* Màu icon trong hướng dẫn */
    margin: 0 2px;
    display: inline-block;
    width: 1.1em; /* Đảm bảo icon căn đều */
    text-align: center;
}

.instructions-content strong {
    color: #333;
}
.instructions-content p {
    margin-top: 15px;
    font-size: 0.9rem;
    color: #6c757d;
}
.instructions-content code {
    background-color: #e9ecef;
    padding: 2px 4px;
    border-radius: 3px;
    font-family: monospace;
}

/* --- Statistics Overview --- */
.stats-overview {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    background-color: #ecf0f1; /* Nền xám nhạt */
    padding: 15px 20px;
    border-radius: 8px;
    margin-top: 25px; /* Thêm margin top sau mục hướng dẫn */
    margin-bottom: 30px;
    gap: 20px; /* Tăng khoảng cách */
}

.score-display, .average-scores, .progress-info {
    font-size: 1rem;
    color: #555;
}

.score-display span, .average-scores span {
    font-weight: 700;
    margin: 0 3px; /* Khoảng cách nhỏ */
}

#correctPercentage {
    color: #27ae60; /* Màu xanh lá cây đậm hơn */
    font-size: 1.1em; /* Hơi lớn hơn */
}

#averageTotalScoreText, #averageSentenceScoreText {
    color: #2c3e50; /* Màu xanh navy đậm */
}

.progress-info {
    color: #8e44ad; /* Màu tím */
    font-weight: bold;
}

/* --- Charts Section (Separated) --- */
.charts-section {
    margin-bottom: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

/* Thêm tiêu đề cho từng biểu đồ trong HTML nếu muốn */
/* h2 { ... } đã được định dạng */

#chart, #spiderChart {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px; /* Tăng padding */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06); /* Tăng bóng đổ nhẹ */
    max-width: 100%;
    width: 95%; /* Chiếm gần hết chiều rộng container */
    margin: 25px auto; /* Tăng khoảng cách giữa các biểu đồ */
    display: block; /* Đảm bảo là block element */
}

/* --- History Section --- */
.history-section {
    margin-bottom: 30px;
    text-align: left;
}

.history-container {
    
    overflow-y: auto;
    border: 1px solid #e0e0e0; /* Viền rõ hơn chút */
    border-radius: 8px;
    padding: 15px; /* Tăng padding */
    background-color: #fdfdfd;
}

.history-entry {
    border: 1px solid #eaeaea;
    padding: 15px 20px;
    margin-bottom: 15px;
    border-radius: 6px;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.history-entry h5 {
    margin-bottom: 12px; /* Tăng khoảng cách */
    font-size: 1.1rem;
    color: #2c3e50;
}

/* Sử dụng lại và tạo kiểu cho Bảng so sánh gốc */
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 0.9rem;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
    overflow: hidden;
}

.comparison-table td {
    border: 1px solid #eee;
    padding: 8px 10px;
    text-align: center;
    transition: background-color 0.3s ease;
}

.comparison-table td:first-child { /* Label */
    font-weight: bold;
    background-color: #f8f9fa;
    color: #555;
    text-align: right;
    padding-right: 15px;
    width: 80px;
    white-space: nowrap;
}

.comparison-table .correct { /* Từ đúng */
    background-color: #d4edda;
    color: #155724;
    font-weight: 500; /* Hơi đậm hơn */
}

.comparison-table .incorrect { /* Từ sai */
    background-color: #f8d7da;
    color: #721c24;
    /* Có thể thêm hiệu ứng gạch chân hoặc làm mờ nếu muốn */
}

/* --- Statistics Table Section --- */
.stats-table-section {
    margin-bottom: 20px;
    text-align: left;
}
.table-wrapper {
     overflow-x: auto;
}

#sessionStatsTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 0.95rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Thêm bóng đổ nhẹ */
}

#sessionStatsTable th, #sessionStatsTable td {
    border: 1px solid #e0e0e0;
    padding: 12px 15px; /* Tăng padding */
    text-align: center;
    white-space: nowrap;
}

#sessionStatsTable th {
    background-color: #f1f3f5; /* Màu nền header khác */
    color: #343a40;
    font-weight: 600;
    text-transform: uppercase; /* Viết hoa header */
    font-size: 0.85rem; /* Chữ header nhỏ hơn */
    letter-spacing: 0.5px; /* Tăng khoảng cách chữ */
}

#sessionStatsTable tbody tr:nth-child(even) {
    background-color: #fdfdfd;
}

#sessionStatsTable tbody tr:hover {
    background-color: #e9ecef;
}

/* --- Responsive Design --- */
@media (max-width: 992px) {
     .container {
        max-width: 95%;
        padding: 25px 30px;
    }
     h1 { font-size: 1.9rem; }
     h2 { font-size: 1.4rem; }
     .instructions-section {
         max-width: 90%;
     }
}

@media (max-width: 768px) {
    .container {
        padding: 20px;
    }

    h1 {
        font-size: 1.7rem;
    }
    h2 {
        font-size: 1.3rem;
    }
    .instructions-section {
         max-width: 100%;
         margin-left: 0;
         margin-right: 0;
    }

    .input-grid {
        gap: 20px 10px;
    }

    .input-box {
        width: 110px;
        font-size: 1rem;
    }

    .controls {
        flex-direction: column; /* Nút xếp chồng lên nhau */
        gap: 10px;
        align-items: center; /* Căn giữa các nút */
    }

    .controls button {
        width: 80%; /* Không full width */
        max-width: 250px; /* Giới hạn chiều rộng tối đa */
        margin: 0;
    }

    .stats-overview {
        flex-direction: column;
        align-items: flex-start; /* Căn trái nội dung */
        padding: 15px;
        gap: 10px; /* Giảm khoảng cách */
    }

    #chart, #spiderChart {
        width: 100%;
        padding: 15px;
    }

    #sessionStatsTable th, #sessionStatsTable td {
        padding: 10px 12px;
        font-size: 0.9rem;
    }

    .history-entry {
         overflow-x: auto; /* Cho phép cuộn ngang bảng so sánh */
    }
     .comparison-table td {
         white-space: nowrap;
     }
}

@media (max-width: 480px) {
     h1 {
        font-size: 1.5rem;
    }
     h2 {
        font-size: 1.2rem;
    }
    .container {
        padding: 15px;
    }
    .practice-area {
        padding: 15px;
    }
    .input-box {
        width: 85px;
        padding: 8px;
    }
    .input-grid {
        gap: 15px 8px;
    }
    .controls button {
        padding: 10px 15px;
        font-size: 0.9rem;
        width: 90%;
    }
    #sessionStatsTable th, #sessionStatsTable td {
        font-size: 0.8rem;
        padding: 8px 10px;
    }
    .comparison-table td {
        padding: 6px 8px;
        font-size: 0.85rem;
    }
     .comparison-table td:first-child {
         width: 60px;
         padding-right: 10px;
     }
     .stats-overview {
         padding: 10px;
         font-size: 0.9rem;
     }
     .score-display span, .average-scores span, .progress-info {
         font-size: 0.9rem;
     }
     .instructions-section {
         padding: 8px 12px;
     }
     .instructions-content {
          font-size: 0.9rem;
     }
     .instructions-content h4 {
         font-size: 1rem;
     }
     .instructions-content ul {
         margin-left: 20px;
         padding-left: 5px;
     }
}

/* --- Backup & Restore Section --- */
.backup-restore {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #dee2e6;
}

.backup-restore h3 {
    margin-bottom: 1rem;
}

.backup-restore button,
.restore-label {
    display: inline-block; /* Align next to each other */
    margin-right: 1rem;
    margin-bottom: 0.5rem; /* Spacing for wrapping */
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
    font-weight: 500;
    border: 1px solid #007bff;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    background-color: #fff;
    color: #007bff;
    text-align: center;
}

.backup-restore button:hover,
.restore-label:hover {
    background-color: #e7f3ff;
}

.backup-restore .restore-label {
    background-color: #28a745; /* Green for restore */
    border-color: #28a745;
    color: white;
}
.backup-restore .restore-label:hover {
     background-color: #218838;
     border-color: #1e7e34;
}

.backup-restore .note {
    font-size: 0.85rem;
    color: #6c757d;
    margin-top: 0.5rem;
}
.logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
}

.logo {
    max-width: 150px; /* KĂ­ch thÆ°á»›c gốc */
    height: auto;
    display: block;
}