/* Thông báo xoay ngang */
#rotate-notice {
  display: none;
  position: fixed;
  z-index: 9999;
  inset: 0;
  background: #000000cc;
  color: white;
  font-size: 20px;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
}

/* Bao bọc và căn giữa game */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

#wrapper {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #222;
}

#game-container {
  width: 960px;
  height: 540px;
  transform-origin: top left;
}

body {
    font-family: 'Nunito', sans-serif;
    color: #333;
    display: flex; /* Giúp game-world chiếm toàn bộ và căn giữa */
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #E0F7FA; /* Màu nền mặc định */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-image 0.5s ease-in-out, background-color 0.5s ease-in-out;
    overflow: hidden; /* Tránh scrollbars không mong muốn */
}

#game-world {
    width: 100%;
    height: 100%;
    position: relative; /* Để các .screen con có thể định vị */
}

.screen {
    display: none; /* Ẩn tất cả các màn hình ban đầu */
    width: 100%;
    height: 100%;
    position: absolute; /* Chồng lên nhau */
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    padding: 20px;
    overflow-y: auto; /* Cho phép scroll nếu nội dung dài */
}

.screen.active {
    display: flex; /* Sử dụng flex để căn giữa .screen-container */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 1;
}

.screen-container {
    background-color: rgba(255, 255, 255, 0.92);
    padding: 25px 30px;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    text-align: center;
    max-width: 90%; /* Giới hạn chiều rộng */
    width: 650px; /* Chiều rộng cố định hơn cho các box nội dung */
}

/* --- Font Styles --- */
h1, h2, h3 {
    font-family: 'Pacifico', cursive; /* Font tiêu đề kiểu Doraemon */
    color: #0288D1; /* Xanh dương đậm */
    margin-bottom: 20px;
}
#game-title-main { position: absolute; top: 150px; left: 30px; font-size: 3.5em; z-index: 1; color: #f1efed;}
.story-title, .selection-title, .result-title { font-size: 2.5em; }
.options-title { font-size: 1.5em; color: #0277BD; margin-bottom: 15px; }

/* --- Buttons --- */

.start-button {
    position: absolute;
    bottom: 250px; /* Khoảng cách từ dưới khung nhìn lên */
    left: 30px; /* Khoảng cách từ bên trái khung nhìn */
    width: 160px;
    height: 50px;
    background-color: #eeea14;
    color: #212121;
    box-shadow: 0 4px #E6A200;
    border-radius: 12px;
    font-weight: bold;
    font-size: 16px;
     z-index: 1000; /* Đảm bảo nút nổi lên trên các phần tử khác nếu cần */
}

.continue-button {
    padding: 12px 24px;
    font-size: 1em;
    background-color: #ecc92a;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
}

.start-button:hover, .continue-button:hover {
    background-color: #e6b800;
    transform: scale(1.05);

}
.btn {
    display: inline-block;
    min-width: 150px;
    padding: 8px 16px;
    font-size: 1.1em;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    text-align: center;
    border: none;
    border-radius: 12px; /* Bo tròn mềm mại */
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.btn:active {
    transform: scale(0.96);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.btn-primary {
    background: linear-gradient(135deg, #FFD54F, #FFC107); /* Gradient vàng */
    color: #212121;
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #FFCA28, #FFB300);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(255, 152, 0, 0.5);
}

.btn-secondary {
    background: linear-gradient(135deg, #4FC3F7, #29B6F6); /* Gradient xanh */
    color: #fff;
    box-shadow: 0 4px 12px rgba(41, 182, 246, 0.4);
}

.btn-secondary:hover {
    background: linear-gradient(135deg, #4FC3F7, #0288D1);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(2, 136, 209, 0.5);
}

.btn-large {
    padding: 18px 50px;
    font-size: 1.4em;
    border-radius: 14px;
}
/* ----- Nút bấm cơ bản (có thể bạn đã có) ----- */
.menu-button {
    background-color: #007bff; /* Màu xanh dương cơ bản */
    color: white;
    padding: 16px 20px;
    border: none;
    border-radius: 12px; /* Bo góc mềm mại */
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    text-transform: none; /* Không viết hoa */
    letter-spacing: 1px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Đổ bóng nhẹ */
    transition: all 0.3s ease; /* Hiệu ứng chuyển động mượt mà */
    margin: 10px; /* Khoảng cách giữa các nút */
    min-width: 150px; /* Độ rộng tối thiểu để các nút trông đều nhau */
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2); /* Đổ bóng cho chữ */
}

.menu-button:hover {
    background-color: #0056b3; /* Màu đậm hơn khi hover */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px); /* Nâng nút lên một chút */
}

.menu-button:active {
    background-color: #004085; /* Màu đậm hơn nữa khi nhấn */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: translateY(1px);
}

/* ----- CSS riêng cho nút "Tiếp Tục Chơi" ----- */
#continue-game-button {
    background-color: #28a745; /* Màu xanh lá cây, gợi ý "tiếp tục", "thành công" */
    border: 2px solid #1e7e34; /* Viền đậm hơn một chút */
    align-self: flex-start; /* Căn trái cho nút */
}

#continue-game-button:hover {
    background-color: #1e7e34; /* Màu xanh lá cây đậm hơn khi hover */
    border-color: #155724;
}

#continue-game-button:active {
    background-color: #155724; /* Màu xanh lá cây đậm nhất khi nhấn */
}

#main-menu-screen .button-container { /* Bọc các nút trong một div với class="button-container" */
    display: flex;
    flex-direction: column; /* Xếp nút theo chiều dọc */
    align-items: flex-start; /* Căn trái các nút */
    justify-content: center; /* Căn giữa theo chiều dọc (nếu container có chiều cao cố định) */
    margin-top: 30px; /* Khoảng cách với các yếu tố khác */
    padding-left: 20px; /* Thêm khoảng cách bên trái */
}

/* ----- CSS cho High Score Display ----- */
.high-score-text {
    font-size: 1.2em;
    color: #fff; /* Màu chữ cho điểm cao, đảm bảo nổi bật trên nền */
    background-color: rgba(0, 0, 0, 0.3); /* Nền mờ để dễ đọc */
    padding: 8px 15px;
    border-radius: 5px;
    margin-bottom: 20px; /* Khoảng cách với các nút */
    text-align: center;
    text-shadow: 1px 1px 2px #000;
    align-self: flex-start; /* Căn trái cho hiển thị điểm cao */
}


#sound-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background: #a5f2fc; /* màu xanh nhẹ */
  border: none;
  border-radius: 50%; /* nút tròn */
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(8, 8, 8, 0.2); /* bóng đổ */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease, transform 0.15s ease;
  z-index: 9999;
}

#sound-toggle:hover {
  background: #6bd6d1; /* xanh đậm hơn khi hover */
  transform: scale(1.1);
}

#sound-toggle:active {
  transform: scale(0.95);
}

#sound-toggle img {
  width: 28px;  /* icon lớn hơn một chút */
  height: 28px;
  user-select: none; /* tránh bị chọn khi bấm */
  pointer-events: none; /* cho phép click vào nút chứ không phải hình */
  transition: filter 0.3s ease;
}

/* Nếu bạn muốn đổi icon khi tắt âm thanh (ví dụ dùng class 'muted') */
#sound-toggle.muted img {
  filter: grayscale(100%) brightness(70%);
}
#pause-button {
  position: fixed;
  right: 20px;
  top: 80px; /* cao hơn sound-toggle (50px + 10px khoảng cách) */
  width: 50px;
  height: 50px;
  background: #a5f2fc; /* màu xanh nhẹ */
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(8, 8, 8, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease, transform 0.15s ease;
  z-index: 9999;
}

#pause-button:hover {
  background: #6bd6d1;
  transform: scale(1.1);
}

#pause-button:active {
  transform: scale(0.95);
}

#pause-button img {
  width: 70px;
  height: 70px;
  transition: filter 0.3s ease;
}

/* Màn hình tạm dừng (overlay) */
#pause-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(202, 224, 219, 0.65); /* nền mờ */
  display: none; /* mặc định ẩn */
  justify-content: center;
  align-items: center;
  z-index: 9999;
  backdrop-filter: blur(6px); /* hiệu ứng mờ nền */
  animation: fadeIn 0.3s ease-in-out;
}
#pause-screen.active {
  display: flex; /* chỉ hiển thị khi có class 'active' */
}
/* Hiệu ứng xuất hiện nhẹ */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Hộp nội dung chính */
.pause-content {
  background: linear-gradient(135deg, #ffffff, #f0f0f0);
  padding: 40px 30px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  max-width: 400px;
  width: 90%;
  transform: scale(1);
  transition: transform 0.2s ease;
}

.pause-content:hover {
  transform: scale(1.02); /* phóng nhẹ khi hover */
}

.pause-content h2 {
  font-size: 28px;
  margin-bottom: 25px;
  color: #2f95f5;
  font-weight: 600;
}

/* Nút trong màn tạm dừng */
.pause-content button {
  display: block;
  width: 100%;
  max-width: 220px;
  margin: 12px auto;
  padding: 14px;
  font-size: 17px;
  font-weight: bold;
  border: none;
  border-radius: 10px;
  background: linear-gradient(to right, #00c6ff, #0072ff);
  color: white;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 10px rgba(0, 114, 255, 0.3);
}

.pause-content button:hover {
  background: linear-gradient(to right, #0096ff, #0050cc);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 114, 255, 0.45);
}


/* --- Backgrounds cho từng màn hình (qua class trên body) --- */
body.body-story { background-image: url('https://png.pngtree.com/thumb_back/fh260/background/20231225/pngtree-sunrise-over-a-textured-sky-with-clouds-background-image_13850175.png'); }
body.body-main-menu { background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTM9SqIxx-WxykMvrpev89GKZN3-RZXaukyJA&s'); }
body.body-character-selection { background-image: url('https://i.pinimg.com/736x/da/b1/04/dab1043d840bd2cd46b764fcef57007f.jpg'); }
body.body-game-play { background-image: url('https://cafefcdn.com/203337114487263232/2022/10/29/photo-7-16670472051031970982285.jpeg'); } /* Sẽ được thay đổi bởi JS */
body.body-score-result { background-image: url('https://i.pinimg.com/736x/37/b3/ab/37b3aba871e45570abd6bc53b560e0cb.jpg'); }


/* --- Màn Hình Cốt Truyện --- */
.story-container { max-width: 700px; }
.story-image {
    max-width: 200px;
    border-radius: 10px;
    margin-bottom: 20px;
    border: 4px solid #FFF;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.story-text {
    font-size: 1.15em;
    line-height: 1.6;
    color: #555;
    margin-bottom: 25px;
}

/* --- Màn Hình Chính (Menu) --- */
.main-menu-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: -1; /* Luôn nằm dưới */
}

/* --- Màn Hình Chọn Nhân Vật --- */
.character-selection-container {
    width: 100vw;           /* Chiều ngang toàn bộ khung nhìn (viewport) */
    padding: 40px 20px;     /* Tùy chọn: thêm khoảng cách trên/dưới và hai bên */
    box-sizing: border-box; /* Đảm bảo padding không làm vỡ layout */
}

.characters-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}
.character-card {
    background-color: #fff;
    border: 3px solid #AED581; /* Xanh lá nhạt */
    border-radius: 10px;
    padding: 15px;
    width: 150px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}
.character-card:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
    border-color: #FFB74D; /* Cam nhạt */
}
.character-card img {
    width: 100px;
    height: 130px;
    object-fit: contain; /* Giữ tỷ lệ, không bị méo */
    display: block;
    margin: 0 auto 10px;
    border-radius: 5px;
}
.character-card span {
    font-weight: 700;
    color: #0277BD;
    font-size: 1.1em;
}

/* --- Màn Hình Chơi Game --- */
.game-play-container {
    max-width: 1100px;     /* ✅ Rộng hơn */
    height: auto;
    width: 80%;           /* Chiếm toàn bộ chiều ngang nếu có thể */
    margin: 0 auto;        /* ✅ Căn giữa nếu có khung lớn */
    padding: 20px;         /* Tùy chọn: tạo khoảng trống xung quanh */
    box-sizing: border-box;
}
.game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    background-color: rgba(173, 216, 230, 0.5); /* LightBlue mờ */
    padding: 10px 15px;
    border-radius: 10px;
    flex-wrap: wrap; /* Cho phép xuống dòng nếu không đủ chỗ */
}
#selected-character-info {
    display: flex;
    align-items: center;
    font-weight: 700;
    color: #01579B;
    margin-bottom: 10px; /* Thêm khoảng cách nếu xuống dòng */
}
.game-stats {
    display: flex;
    gap: 15px; /* Khoảng cách giữa các thông số */
    align-items: center;
    flex-wrap: wrap; /* Cho phép xuống dòng nếu không đủ chỗ */
}
.selected-char-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-right: 10px;
    border: 2px solid #FFF;
    object-fit: contain;
}
#score-display {
    font-size: 1.3em;
    font-weight: 700;
    color: #FF6F00; /* Cam đậm */
    background-color: #FFF;
    padding: 5px 12px;
    border-radius: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
#question-area {
    background-color: #FFFACD; /* LemonChiffon */
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    border: 2px dashed #FFB74D;
    display: flex; /* THÊM: Để các phần tử con nằm trên một hàng */
    align-items: center; /* THÊM: Căn giữa ảnh và text theo chiều dọc */
    gap: 20px; /* THÊM: Khoảng cách giữa ảnh và text */
}
#question-area {
    position: relative;
}

#bo-dem-thoi-gian-container {
    position: absolute;
    top: 5px;           /* Tùy chỉnh vị trí trên theo nhu cầu */
    right: 10px;         /* Căn sát bên phải */
    
    padding: 10px 12px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-family: 'Nunito', sans-serif;
    font-size: 1em;
    font-weight: bold;
    color: #4A4A4A;
    z-index: 10;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

#thoi-gian-con-lai-hien-thi {
    color: #D32F2F;
    padding: 0 4px;
    font-size: 1.1em;
}

#bo-dem-thoi-gian-container.sap-het-gio {
    background-color: rgba(255, 99, 71, 0.85);
}

#bo-dem-thoi-gian-container.sap-het-gio #thoi-gian-con-lai-hien-thi {
    color: #FFFFFF;
}

/* Hiệu ứng cho bộ đếm ở góc */
@keyframes pulse-timer-corner {
    0% {
        transform: scale(1);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    100% {
        transform: scale(1.04); /* Phóng to nhẹ hơn */
        box-shadow: 0 3px 6px rgba(211, 47, 47, 0.3); /* Bóng đổ màu đỏ */
    }
}


#scenario-image-display {
    width: 250px;        /* Đặt chiều rộng cố định */
    height: 220px;       /* Đặt chiều cao cố định (điều chỉnh nếu cần) */
    object-fit: contain; /* Đảm bảo ảnh vừa vặn bên trong khung, giữ tỷ lệ */
    border-radius: 8px;
    border: 3px solid #fff;
    box-shadow: 0 3px 7px rgba(0,0,0,0.1);
    flex-shrink: 0; /* Giữ nguyên từ lần sửa trước, quan trọng khi dùng flex */
    background-color: #f0f0f0; /* Tùy chọn: Thêm màu nền nhẹ cho khung ảnh */
                                /* nếu ảnh có nền trong suốt và nhỏ hơn khung */
}
#question-text-display {
    font-size: 1.25em;
    color: #4A4A4A;
    line-height: 1.5;
    min-height: 40px; /* Để không bị giật layout */
    flex-grow: 1; /* THÊM: Để text chiếm phần không gian còn lại */
    text-align: left; /* THÊM: Đảm bảo text câu hỏi được căn lề trái */
}
.options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Responsive grid */
    gap: 15px;
    margin-top: 10px;
}
.option-item {
    background-color: #BBDEFB; /* Xanh dương rất nhạt */
    border: 2px solid #64B5F6; /* Xanh dương vừa */
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
    font-size: 1em;
    display: flex;
    flex-direction: column; /* Cho ảnh và text nếu có */
    align-items: center;
    justify-content: center;
    min-height: 60px;
}
.option-item:hover {
    background-color: #90CAF9;
    transform: scale(1.03);
}
.option-item img {
    max-width: 80px;
    max-height: 80px;
    object-fit: contain;
    margin-bottom: 8px;
}
.option-item span {
    font-size: 0.9em;
    color: #333;
}
.feedback {
    margin-top: 20px;
    padding: 10px;
    border-radius: 8px;
    font-size: 1.15em;
    font-weight: 700;
    min-height: 45px; /* Tránh giật layout */
}
.feedback.correct {
    background-color: #C8E6C9; /* Xanh lá nhạt */
    color: #2E7D32; /* Xanh lá đậm */
    border: 1px solid #A5D6A7;
}
.feedback.incorrect {
    background-color: #FFCDD2; /* Đỏ nhạt */
    color: #C62828; /* Đỏ đậm */
    border: 1px solid #EF9A9A;
}
#next-question-button {
    margin-top: 15px;
}

/* --- Màn Hình Kết Quả --- */
.score-result-container { max-width: 500px; }
.result-image-display {
    max-width: 250px;
    margin-bottom: 20px;
    border-radius: 15px;
}
.result-text, .final-score-text, #result-message-text {
    font-size: 1.2em;
    color: #4527A0; /* Tím đậm */
    margin-bottom: 12px;
}
.final-score-text span {
    font-size: 1.5em;
    color: #FF6F00;
    font-weight: bold;
}
#result-message-text {
    font-style: italic;
    color: #00695C; /* Xanh rêu */
    background-color: rgba(200, 230, 201, 0.7); /* Xanh lá mạ mờ */
    padding: 10px;
    border-radius: 8px;
}

/* --- Animation Hiệu ứng (ví dụ, bạn có thể dùng thư viện như Anime.js) --- */
@keyframes fadeInScreen {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.screen.active {
    animation: fadeInScreen 0.4s ease-out forwards;
}

/* Hiệu ứng cho feedback message (ví dụ) */
.feedback.correct, .feedback.incorrect {
    animation: popInFeedback 0.3s ease-out;
}
@keyframes popInFeedback {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Hiệu ứng khi chọn đúng/sai cho câu hỏi (thêm class vào .option-item bằng JS) */
.option-item.selected-correct {
    background-color: #A5D6A7 !important; /* Green */
    border-color: #66BB6A !important;
    animation: pulseCorrect 0.5s;
}
.option-item.selected-incorrect {
    background-color: #EF9A9A !important; /* Red */
    border-color: #EF5350 !important;
    animation: shakeIncorrect 0.4s;
}
@keyframes pulseCorrect {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
@keyframes shakeIncorrect {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
/* ... (các style hiện có của bạn) ... */

#level-info,
#score-display, /* Đổi tên class/id trong JS nếu cần */
#gadgets-collected-info {
    font-size: 1.1em;
    font-weight: 600;
    color: #014D7B;
    background-color: rgba(255, 255, 255, 0.75);
    padding: 6px 12px;
    border-radius: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    min-width: 100px; /* Đảm bảo độ rộng tối thiểu */
    text-align: center;
}

#score-display span,
#level-info span,
#gadgets-collected-info span {
    color: #FF6F00; /* Màu cam cho số */
}


/* --- Màn hình Hoàn thành Level --- */
.level-complete-container {
    background-color: rgba(224, 247, 250, 0.97); /* Màu xanh dương rất nhạt, gần trắng */
    padding: 30px 40px;
    border-radius: 20px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.15);
    text-align: center;
    max-width: 580px;
    width: 90%;
}

.level-complete-container h2 {
    font-size: 2.3em;
    color: #00796B; /* Xanh mòng két */
    margin-bottom: 20px;
}
.level-complete-container h2 span {
    color: #FF8F00; /* Cam cho số level */
}

.level-complete-image {
    max-width: 180px;
    margin-bottom: 25px;
    border-radius: 10px;
    background-color: #FFF;
    padding: 5px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.level-complete-container p {
    font-size: 1.25em;
    color: #3E2723; /* Nâu đậm */
    margin-bottom: 12px;
    line-height: 1.6;
}

.level-complete-container p span {
    font-weight: bold;
    color: #D84315; /* Cam cháy */
    font-size: 1.1em;
}

#next-level-button {
    margin-top: 25px;
    background-color: #4CAF50; /* Màu nền xanh lá cây */
    color: white; /* Màu chữ */
    box-shadow: 0 6px #388E3C; /* Bóng đổ tạo chiều sâu */
    min-width: 150px;
    height: 45px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 14px; /* Bo góc mượt mà hơn */
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    text-transform: uppercase; /* In hoa toàn bộ chữ */
    letter-spacing: 1px; /* Tăng khoảng cách chữ nhẹ để dễ đọc */
}

#next-level-button:hover {
    background-color: #45A049; /* Màu xanh lá đậm hơn khi hover */
    box-shadow: 0 8px #2E7D32; /* Bóng đổ sâu hơn */
    transform: translateY(-2px); /* Hiệu ứng nhấn nhẹ */
}

/* --- Màn Hình Kết Quả - Cập nhật --- */
.final-score-text {
    font-size: 1.25em; /* To hơn chút */
}
.final-score-text span { /* Số bảo bối */
    font-size: 1.6em;
    color: #E65100; /* Cam đậm hơn nữa */
}
/* --- hiệu ứng hiển thị màu sắc đúng sai --- */
.option-item.actual-correct {
    background-color: #A5D6A7 !important; /* Xanh lá nhạt */
    border-color: #66BB6A !important; /* Xanh lá đậm hơn */
    animation: pulseCorrect 0.6s ease-in-out; /* Sử dụng animation đã có hoặc tạo mới */
    opacity: 1 !important; /* Đảm bảo nó không bị làm mờ */
}