/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');

/* CSS Variables */
:root {
    --font-family-base: 'Inter', sans-serif;
    --primary-color: #007bff; /* Blue */
    --secondary-color: #6c757d; /* Gray */
    --success-color: #28a745; /* Green */
    --danger-color: #dc3545; /* Red */
    --light-color: #f8f9fa;
    --dark-color: #343a40;
    --border-color: #dee2e6;
    --background-color: #f8f9fa; /* Nền trang */
    --container-bg: #ffffff; /* Nền container chính */
    --word-bg: var(--primary-color);
    --word-text: #ffffff;
    --word-hover-bg: #0056b3;
    --word-used-bg: #e9ecef;
    --word-used-text: #6c757d;
    --dropzone-border: var(--primary-color);
    --dropzone-bg: #f8f9fa;
    --box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    --border-radius: 8px;
    --spacing-unit: 1rem; /* 16px */
}

/* Global Styles */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family-base);
    line-height: 1.6;
    background-color: var(--background-color);
    color: var(--dark-color);
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Căn trên cùng */
    min-height: 100vh;
    padding: calc(var(--spacing-unit) * 1.5); /* Padding cho body */
}

/* Game Container */
.game-container {
    background-color: var(--container-bg);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: calc(var(--spacing-unit) * 2);
    max-width: 850px;
    width: 100%;
    margin: 0 auto;
}

/* Header */
.game-header {
    text-align: center;
    margin-bottom: calc(var(--spacing-unit) * 1.5);
    padding-bottom: var(--spacing-unit);
    border-bottom: 1px solid var(--border-color);
}

.game-header h1 {
    font-size: 1.8em;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.status-message {
    color: var(--secondary-color);
    font-size: 0.95em;
    min-height: 1.5em; /* Đảm bảo không nhảy layout */
}

/* Game Area */
.game-area {
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.section-label {
    display: block;
    font-weight: 500;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
    color: var(--dark-color);
    font-size: 0.9em;
}

/* Drop Zone (Answer Area) */
.drop-zone {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing-unit) * 0.6);
    border: 2px dashed var(--dropzone-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-unit);
    margin-bottom: calc(var(--spacing-unit) * 1.5);
    min-height: 60px;
    align-items: center;
    background-color: var(--dropzone-bg);
    transition: background-color 0.3s ease;
}

.drop-zone .placeholder {
    color: var(--secondary-color);
    font-style: italic;
    font-size: 0.9em;
    width: 100%;
    text-align: center;
}

.drop-zone .word {
    cursor: grab; /* Hoặc default nếu không dùng kéo thả */
}

/* Word Bank (Source Words) */
.word-bank {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing-unit) * 0.7);
    justify-content: center;
    padding: var(--spacing-unit) 0; /* Padding top/bottom */
}

/* Word Styling */
.word {
    padding: calc(var(--spacing-unit) * 0.5) calc(var(--spacing-unit) * 1);
    background-color: var(--word-bg);
    color: var(--word-text);
    border-radius: 50px; /* Pill shape */
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    font-size: 0.95em;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.word:hover {
    background-color: var(--word-hover-bg);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.word.used {
    background-color: var(--word-used-bg);
    color: var(--word-used-text);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    opacity: 0.7;
}

.word.used:hover {
    background-color: var(--word-used-bg); /* Giữ nguyên màu khi hover */
}

/* Controls and Feedback */
.game-feedback-controls {
    text-align: center;
    margin-top: var(--spacing-unit);
}

.result-message {
    font-size: 1.1em;
    font-weight: 500;
    min-height: 1.6em; /* Giữ chỗ */
    margin-bottom: var(--spacing-unit);
}

.result-message:not(:empty) { /* Chỉ áp dụng padding khi có nội dung */
     padding: calc(var(--spacing-unit) * 0.5) var(--spacing-unit);
     border-radius: var(--border-radius);
}

.result-message[style*="color: green"] { /* Dựa vào inline style từ JS */
    background-color: #e9f7ef; /* Light green */
    color: var(--success-color);
    border: 1px solid #a6d7b5;
}

.result-message[style*="color: red"] { /* Dựa vào inline style từ JS */
    background-color: #fdeded; /* Light red */
    color: var(--danger-color);
     border: 1px solid #f5c6cb;
}

.button-group {
    display: flex;
    justify-content: center;
    gap: var(--spacing-unit);
}

/* Button Base Styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-unit) * 0.5);
    padding: calc(var(--spacing-unit) * 0.6) calc(var(--spacing-unit) * 1.2);
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 1em;
    font-weight: 500;
    font-family: var(--font-family-base);
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.btn i {
    font-size: 1em; /* Icon cùng cỡ chữ */
    line-height: 1;
}

.btn:hover:not(:disabled) {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.btn:disabled {
    background-color: var(--word-used-bg);
    color: var(--word-used-text);
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.7;
}

/* Specific Button Colors */
.btn-primary {
    background-color: var(--primary-color);
    color: white;
}
.btn-primary:hover:not(:disabled) {
    background-color: var(--word-hover-bg);
}

.btn-secondary {
    background-color: var(--secondary-color);
    color: white;
}
.btn-secondary:hover:not(:disabled) {
    background-color: #5a6268;
}

/* Stats / History Section */
.game-stats {
    margin-top: calc(var(--spacing-unit) * 2.5);
    border-top: 1px solid var(--border-color);
    padding-top: var(--spacing-unit);
}

.stats-section {
    margin-bottom: var(--spacing-unit);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden; /* Đảm bảo bo góc cho nội dung bên trong */
}

.section-summary {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 0.5);
    background-color: var(--light-color);
    padding: calc(var(--spacing-unit) * 0.8) var(--spacing-unit);
    cursor: pointer;
    font-weight: 500;
    list-style: none; /* Xóa marker mặc định của summary */
    transition: background-color 0.2s ease;
}

.section-summary::-webkit-details-marker {
    display: none; /* Xóa marker trên Chrome/Safari */
}

.section-summary::before { /* Tạo marker tùy chỉnh */
    content: '\f0da'; /* FontAwesome icon right arrow */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-right: calc(var(--spacing-unit) * 0.5);
    transition: transform 0.2s ease;
}

details[open] > .section-summary::before {
    transform: rotate(90deg);
}

.section-summary:hover {
    background-color: #e9ecef;
}

.section-content {
    padding: var(--spacing-unit);
    background-color: var(--container-bg);
}

/* Chart Container */
.chart-container {
    margin-bottom: calc(var(--spacing-unit) * 1.5);
    padding: var(--spacing-unit);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--light-color);
}
.chart-container h3 {
    text-align: center;
    font-size: 1em;
    font-weight: 500;
    margin-bottom: var(--spacing-unit);
    color: var(--secondary-color);
}

canvas {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto calc(var(--spacing-unit) * 1.5) auto; /* Căn giữa và thêm khoảng cách dưới */
}

/* History Tables */
.history-table-container {
    margin-top: var(--spacing-unit);
}
.history-table-container h3 {
    font-size: 1.1em;
    margin-bottom: calc(var(--spacing-unit) * 0.8);
    font-weight: 500;
}

.score-summary-text {
    text-align: center;
    font-weight: 500;
    margin-bottom: var(--spacing-unit);
    padding: calc(var(--spacing-unit) * 0.5);
    background-color: var(--light-color);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--spacing-unit);
    font-size: 0.9em;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    border-radius: var(--border-radius); /* Áp dụng bo góc nếu overflow: hidden */
    overflow: hidden; /* Cần thiết để border-radius hoạt động trên table */
}

th, td {
    border: 1px solid var(--border-color);
    padding: calc(var(--spacing-unit) * 0.6) calc(var(--spacing-unit) * 0.8);
    text-align: left;
}

th {
    background-color: var(--light-color);
    font-weight: 500;
    text-align: center;
}
td:nth-child(1), /* STT / Lần */
td:nth-child(3), /* Đúng */
td:nth-child(4), /* Tổng / Kết quả */
td:nth-child(5) { /* Tỷ lệ */
    text-align: center;
}
td:nth-child(4):contains("Đúng") {
    color: var(--success-color);
    font-weight: 500;
}
td:nth-child(4):contains("Sai") {
    color: var(--danger-color);
    font-weight: 500;
}

tbody tr:nth-child(even) {
    background-color: var(--light-color);
}
tbody tr:hover {
    background-color: #e9ecef;
}

/* Responsive */
@media (max-width: 768px) {
    body {
        padding: var(--spacing-unit);
    }
    .game-container {
        padding: var(--spacing-unit);
    }
    .game-header h1 {
        font-size: 1.5em;
    }
    .drop-zone, .word-bank {
        gap: calc(var(--spacing-unit) * 0.5);
    }
    .word {
        padding: calc(var(--spacing-unit) * 0.4) calc(var(--spacing-unit) * 0.8);
        font-size: 0.9em;
    }
    .button-group {
        flex-direction: column; /* Stack buttons vertically */
        align-items: center;
    }
    .btn {
        width: 80%; /* Make buttons wider */
    }
    th, td {
        padding: calc(var(--spacing-unit) * 0.5);
    }
    table {
        font-size: 0.85em;
    }
}

@media (max-width: 480px) {
    .game-header h1 {
        font-size: 1.3em;
    }
     table, thead, tbody, th, td, tr {
        display: block; /* Stack table cells */
    }
     thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
     tr {
        border: 1px solid var(--border-color);
        margin-bottom: var(--spacing-unit);
        border-radius: var(--border-radius);
        overflow: hidden;
    }
     td {
        border: none;
        border-bottom: 1px solid var(--border-color);
        position: relative;
        padding-left: 50%;
        text-align: right; /* Căn phải nội dung */
    }
     td:before {
        position: absolute;
        top: 50%;
        left: calc(var(--spacing-unit) * 0.5);
        transform: translateY(-50%);
        width: 45%;
        padding-right: var(--spacing-unit);
        white-space: nowrap;
        text-align: left; /* Căn trái label */
        font-weight: 500;
        content: attr(data-label); /* Lấy nội dung từ data-label */
    }
    /* Thêm data-label cho các td (Cần thêm trong JS hoặc sửa HTML) */
    /* Ví dụ nếu thêm data-label trong HTML: <td data-label="STT">...</td> */
    /* Hoặc bạn có thể thêm data-label bằng JS khi tạo bảng */

     /* Cập nhật lại selector để target td cụ thể nếu dùng JS */
     #previous-history-body td:nth-child(1):before { content: "STT"; }
     #previous-history-body td:nth-child(2):before { content: "Thời gian"; }
     #previous-history-body td:nth-child(3):before { content: "Đúng"; }
     #previous-history-body td:nth-child(4):before { content: "Tổng"; }
     #previous-history-body td:nth-child(5):before { content: "Tỷ lệ (%)"; }

     #history-body td:nth-child(1):before { content: "Lần"; }
     #history-body td:nth-child(2):before { content: "Câu bạn làm"; }
     #history-body td:nth-child(3):before { content: "Đáp án đúng"; }
     #history-body td:nth-child(4):before { content: "Kết quả"; }

    td:nth-child(n) { text-align: right; } /* Reset text-align cho td */
    td:last-child { border-bottom: 0; }
}
/* === STYLING FOR USAGE GUIDE === */
.usage-guide {
    margin-bottom: calc(var(--spacing-unit) * 1.5); /* Khoảng cách dưới */
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: #eef7ff; /* Nền xanh nhạt nhẹ */
    overflow: hidden;
}

.usage-guide > .section-summary {
    background-color: #d1e7fd; /* Nền xanh nhạt đậm hơn */
    color: var(--primary-color);
}

.usage-guide > .section-summary:hover {
    background-color: #b6d4fa;
}

.usage-guide .guide-content {
    padding: var(--spacing-unit);
    background-color: #f7fbff; /* Nền trắng xanh rất nhạt */
    font-size: 0.9em;
    color: #333;
}

.guide-content ul {
    list-style: none; /* Bỏ dấu chấm đầu dòng mặc định */
    padding-left: 0;
}

.guide-content li {
    margin-bottom: calc(var(--spacing-unit) * 0.6);
}

.guide-content ul ul {
    margin-top: calc(var(--spacing-unit) * 0.4);
    padding-left: calc(var(--spacing-unit) * 1.5); /* Thụt lề cho danh sách con */
}

.guide-content ul ul li::before {
    content: '-'; /* Dùng gạch ngang cho mục con */
    margin-right: calc(var(--spacing-unit) * 0.5);
    font-weight: bold;
}

.guide-content strong {
    color: var(--primary-color); /* Làm nổi bật tiêu đề mục */
}

.guide-content i.fas { /* Định dạng icon trong hướng dẫn */
    color: var(--secondary-color);
    font-size: 0.9em;
}

/* Kế thừa style mũi tên từ .stats-section */
.usage-guide > .section-summary::before {
    content: '\f0da'; /* FontAwesome icon right arrow */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-right: calc(var(--spacing-unit) * 0.5);
    transition: transform 0.2s ease;
}

.usage-guide[open] > .section-summary::before {
    transform: rotate(90deg);
}

.usage-guide > .section-summary::-webkit-details-marker {
    display: none; /* Xóa marker trên Chrome/Safari */
}
/* === END USAGE GUIDE STYLING === */
/* Container chính của hộp chat */
.support-box {
  /* Giữ các thuộc tính vị trí, kích thước, nền, bóng đổ cũ */
  position: fixed;
  /* bottom: 80px; /* Có thể cần điều chỉnh vị trí Y */
  /* right: 20px; */
  bottom: 20px; /* Đặt lại vị trí gần nút gốc hơn nếu muốn */
  right: 20px;
  width: 500px; /* Chiều rộng tổng thể */
  height: 60vh; /* Chiều cao tổng thể */
  background: white;
  border-radius: 16px; /* Bo góc */
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
  overflow: hidden; /* Quan trọng */
  z-index: 1000;

  /* --- THAY ĐỔI QUAN TRỌNG --- */
  display: none; /* Mặc định ẩn */
  flex-direction: row; /* Sắp xếp con theo hàng ngang (header trái, iframe phải) */
}

/* Khi hộp chat được mở (có class visible) */
.support-box.visible {
  display: flex; /* Hiện và áp dụng flexbox */
}

/* Thanh header dọc bên trái */
.support-header-bar {
  background: #007bff; /* Màu nền xanh */
  color: white;
  width: 55px; /* Chiều rộng cố định cho thanh dọc */
  height: 100%; /* Chiều cao 100% của container */
  padding: 10px 0; /* Padding trên dưới */
  display: flex;
  flex-direction: column; /* Sắp xếp logo và nút đóng theo chiều dọc */
  justify-content: space-between; /* Đẩy logo lên trên, nút đóng xuống dưới */
  align-items: center; /* Căn giữa theo chiều ngang */
  flex-shrink: 0; /* Không cho phép thanh này co lại */
  box-sizing: border-box; /* Tính cả padding vào width */
}

/* Logo/Title trong header */
.support-header-bar .header-logo {
  font-size: 14px;
  font-weight: bold;
  margin-top: 10px; /* Khoảng cách trên */
  /* Có thể xoay chữ nếu muốn */
  /* writing-mode: vertical-rl; */
  /* transform: rotate(180deg); */
}

/* Phần chứa nút đóng */
.support-header-bar .header-controls {
   margin-bottom: 5px; /* Khoảng cách dưới */
}

/* Nút đóng (X) */
.support-header-bar .close-btn {
  background: none;
  border: none;
  color: white;
  font-size: 24px; /* Kích thước nút X */
  cursor: pointer;
  padding: 0; /* Bỏ padding mặc định */
  line-height: 1; /* Căn chỉnh chiều cao */
}
 .support-header-bar .close-btn:hover {
   opacity: 0.8; /* Hiệu ứng hover đơn giản */
}


/* Iframe chứa nội dung chat */
.support-box iframe {
  flex-grow: 1; /* Chiếm hết không gian ngang còn lại */
  height: 100%; /* Chiếm hết chiều cao */
  border: none; /* Bỏ viền */
  width: auto; /* Để flex-grow kiểm soát chiều rộng */
}

/* --- CSS cho nút bật/tắt gốc --- */
.support-toggle-btn {
  /* Giữ nguyên CSS cũ cho nút này */
  position: fixed;
  bottom: 20px;
  right: 20px;
  /* ... các thuộc tính khác ... */
  z-index: 999; /* Nằm dưới hộp chat khi mở */
}

 /* --- Responsive cho màn hình nhỏ --- */
 @media (max-width: 768px) {
   .support-box {
     width: 95%;
     height: 80vh;
     bottom: 10px; /* Điều chỉnh vị trí */
     right: 2.5%;
   }
   .support-header-bar {
      width: 45px; /* Thu nhỏ thanh header */
   }
    .support-header-bar .header-logo {
       font-size: 12px;
    }
    .support-header-bar .close-btn {
       font-size: 20px;
    }
 }
/* --- CSS Nâng Cấp cho Nút Trợ Lý AI --- */
.support-toggle-btn {
  position: fixed;
  bottom: 25px; /* Hơi nâng lên một chút */
  right: 25px;  /* Hơi cách lề một chút */
  background: linear-gradient(145deg, #0088ff, #0061c5); /* Gradient xanh dương hiện đại */
  color: #fff;
  border: none;
  padding: 10px 20px; /* Điều chỉnh padding */
  border-radius: 12px; /* Bo góc vuông vắn hơn, hiện đại hơn */
  cursor: pointer;
  font-size: 16px;
  font-weight: 600; /* Giữ nguyên hoặc 500 */
  font-family: 'Roboto', sans-serif; /* Đảm bảo font được áp dụng */
  letter-spacing: 0.5px; /* Tăng khoảng cách chữ một chút */
  box-shadow: 0 4px 10px rgba(0, 97, 197, 0.2), /* Bóng mờ chính */
              0 1px 3px rgba(0, 0, 0, 0.1);       /* Bóng nhẹ gần hơn */
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transition mượt mà hơn */
  z-index: 999;
  display: inline-flex; /* Sử dụng flex để căn chỉnh icon và text */
  align-items: center;
  gap: 8px; /* Khoảng cách giữa icon và text */
  white-space: nowrap; /* Không xuống dòng */
}

.support-toggle-btn:hover {
  background: linear-gradient(145deg, #007ae0, #0055b0); /* Gradient đậm hơn khi hover */
  transform: translateY(-3px); /* Hiệu ứng nhấc lên nhẹ */
  box-shadow: 0 7px 18px rgba(0, 97, 197, 0.3), /* Bóng đổ rõ hơn khi hover */
              0 3px 6px rgba(0, 0, 0, 0.15);
}

.support-toggle-btn:active {
  transform: translateY(0px); /* Hiệu ứng nhấn xuống */
  background: #0056b3; /* Màu nền đậm khi nhấn */
  box-shadow: 0 2px 5px rgba(0, 97, 197, 0.2); /* Bóng đổ nhỏ hơn khi nhấn */
}
/* --- Backup & Restore Section --- */
.backup-restore {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #dee2e6;
	    padding: 30px;
}

.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;
}