.c35gd-container {
    max-width: 800px;
    margin: 0 auto;
    border-radius: 5px;
}

.c35gd-question-content {
    font-size: 1.2em;
    margin-bottom: 20px;
    padding: 15px;
    background: #fff;
    border-left: 4px solid #0073aa;
}


#c35gd-timer-display {
    display: flex;
    align-items: center;
    padding: 20px 50px;
    max-width: 300px;
    margin: auto;
    position: absolute;
    top: 0px;
    left: 100%;
    transform: translateX(-80%) translateY(-80%);
    flex-direction: column;
    align-items: center;
    transition: left 1s linear;
    z-index: 10;
    white-space: nowrap;
}

#c35gd-progress-bar {
    width: 100%;
    height: 100%;
    background-color: #4caf50;
    border-radius: 6px;
    transition: width 1s linear, background-color 0.5s;
}
#c35gd-timer-image {
    position: absolute;
    left:50px;
    top:0px;
}
#c35gd-timer-image img {
    max-width: 80px;
    height: 80px;
}
#c35gd-timer-display span {
    font-family: inherit;
    color: #FFF;
    margin-left: 25px;
    padding-left: 70px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid #5a1e12;
    border-radius: 50px;
    background: linear-gradient(90deg, #3d0d04 0%, #111424 50%, #3d0d04 100%);
}

/* 1. Container chính: Dùng Grid để chia 2 cột */
.c35gd-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    /* Khởi tạo biến đếm để tự động điền A, B, C, D */
    counter-reset: option-counter; 
    width: 100%;
    max-width: 900px;
}

/* Responsive: Chuyển về 1 cột trên giao diện mobile */
@media (max-width: 768px) {
    .c35gd-options {
        grid-template-columns: 1fr;
    }
}

.c35gd-option {
    position: relative;
    /* Thêm margin nhỏ để viền phát sáng (glow) không bị cắt xén */
    margin: 5px; 
}

/* 2. Ẩn nút radio gốc nhưng vẫn giữ nguyên tính năng chọn */
.c35gd-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Biến nhãn thành khối bao trọn diện tích */
.c35gd-option label {
    display: block;
    width: 100%;
    position: relative;
    cursor: pointer;
}

/* 3. Style mặc định cho các đáp án (Trạng thái Inactive như B, C, D) */
.c35gd-option span {
    display: flex;
    align-items: center;
    min-height: 80px;
    padding: 20px 30px;
    /* Nền gradient 2 bên viền đỏ tối, ở giữa xanh/đen */
    background: linear-gradient(90deg, #590E06A1 0%, #CA1B0DC4 100%);
    border: 2px solid #FFEBD6;
    border-radius: 12px;
    color: #ffffff;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 14px;
    box-sizing: border-box;
    position: relative;
    transition: all 0.3s ease;
    z-index: 1;
    line-height:20px;
    
}

/* 4. Tự động thêm tiền tố A: B: C: D: màu cam */
.c35gd-option span::before {
    counter-increment: option-counter;
    content: counter(option-counter, upper-alpha) ": ";
    color: #FFF; /* Màu cam theo thiết kế */
    font-weight: bold;
    margin-right: 12px;
    font-size: 18px;
}

/* 5. Trạng thái Active (Khi đáp án A được chọn) */
.c35gd-option input[type="radio"]:checked + span {
    border-color: #ff7300;
    background: linear-gradient(90deg, #731a00 0%, #1a1728 50%, #731a00 100%);
    box-shadow:
        0 0 20px rgba(255, 115, 0, 0.4),       /* Ánh sáng tỏa ra ngoài */
        inset 0 0 25px rgba(255, 115, 0, 0.2); /* Ánh sáng tỏa vào trong */
}

/* 6. Hiệu ứng vệt sáng trắng chói ở giữa mép trên và dưới của đáp án đang chọn */
.c35gd-option:has(input[type="radio"]:checked) label::before,
.c35gd-option:has(input[type="radio"]:checked) label::after {
    content: '';
    position: absolute;
    left: 20%;
    right: 20%;
    height: 3px;
    background: #ffffff;
    box-shadow:
        0 0 10px 2px #ffcba4,
        0 0 20px 6px #ff7300;
    z-index: 3;
    border-radius: 50%; /* Hai đầu vệt sáng mờ dần */
    pointer-events: none; /* Không ngăn cản thao tác click chuột */
}

/* Đặt vệt sáng lên mép trên */
.c35gd-option:has(input[type="radio"]:checked) label::before {
    top: -1px;
}

/* Đặt vệt sáng xuống mép dưới */
.c35gd-option:has(input[type="radio"]:checked) label::after {
    bottom: -1px;
}

.c35gd-blank-answer {
    margin-bottom: 20px;
}

.c35gd-blank-answer input[type="text"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
}

.c35gd-button {
    font-family: "SVN-Goham", Sans-serif;
    font-size: 30px;
    font-weight: 700;
    fill: #7A130C;
    color: #7A130C!important;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #ED6E3B;
    border-radius: 10px 10px 10px 10px;
    padding:8px 15px;
    background: linear-gradient(to bottom, #FCAC5D 0%, #D27A3B 100%);
    box-shadow: 0 6px 0 #8d4f00, 0 8px 15px rgba(0, 0, 0, 0.3), inset 0 2px 5px rgba(255, 255, 255, 0.5)!important;
    transition: all 0.1s ease;
}

.c35gd-button:hover {
    transform: translateY(4px)!important;
    box-shadow: 0 2px 0 #8d4f00, 0 4px 10px rgba(0, 0, 0, 0.2)!important;
}

.c35gd-message {
    padding: 50px 15px;
    margin-bottom: 20px;
    border-radius: 20px;
    border:1px solid #FFEBD6;
    background-image: linear-gradient(180deg, #590E06A1 0%, #CA1B0DC4 100%);
    box-shadow: 0 0 5px #ff8800, 0 0 15px #ff3300, 0 0 30px #e61a00, 0 0 60px #990000, inset 0 0 8px #ff8800, inset 0 0 20px #ff3300;
    color: #FFF;
    text-align: center;
    font-weight:700;
    display:flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 15px;
}
.c35gd-message span {
    font-size: 20px;
}


.c35gd-result-content.c35gd-error h3 {
    color: red;
    font-size: 24px;
    line-height: 28px;
    font-weight:700;
}

.c35gd-result-content.c35gd-success h3 {
    color: #FFA12B;
    font-size: 24px;
    line-height: 28px;
    font-weight:700;
}   

.c35gd-puzzle-grid {
    display: flex;
    flex-direction: column;
}

.c35gd-puzzle-piece {
    aspect-ratio: 1;
    background: #eee;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    color: #999;
}

.c35gd-puzzle-piece.collected {
    background: #4caf50;
    color: white;
}

.c35gd-puzzle-piece.rare {
    background: #ffc107;
    color: #333;
}

.c35gd-stats {
    margin-top: 20px;
    padding: 15px;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.c35gd-stats-item {
    margin-bottom: 10px;
}

.c35gd-stats-label {
    font-weight: bold;
    margin-right: 10px;
}

/* Add this to your existing game.css file */

/* Piece notification styling */
.c35gd-piece-notification {
    margin-top: 20px;
    text-align: center;
    animation: fadeInUp 0.5s ease forwards;
}

.c35gd-piece-animation {
    width: 80px;
    height: 80px;
    margin: 0 auto 15px;
    background: linear-gradient(145deg, #FFD700, #FFA500);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    animation: popAndGlow 1s ease forwards;
    transform: scale(0);
}

.c35gd-piece-number {
    font-size: 36px;
    font-weight: bold;
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}

@keyframes popAndGlow {
    0% { transform: scale(0); box-shadow: 0 0 0 rgba(255, 215, 0, 0); }
    50% { transform: scale(1.2); }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); box-shadow: 0 0 20px rgba(255, 215, 0, 0.6); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Result styling */
.c35gd-result {
    text-align: center;
}

.c35gd-result.correct {
    background-color: #e8f5e9;
    border-left: 4px solid #4CAF50;
}

.c35gd-result.incorrect {
    background-color: #ffebee;
    border-left: 4px solid #f44336;
}

/* Thêm style cho timer */
.c35gd-timer {
    background-color: #f9f9f9;
    padding: 10px 15px;
    border-radius: 5px;
    text-align: center;
    margin-bottom: 20px;
    border: 1px solid #ddd;
}

#c35gd-timer-display {
    font-family: monospace;
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

/* Style cho màn hình chào mừng */


.c35gd-welcome h2 {
    color: #4CAF50;
}



#c35gd-start-button {
    background: linear-gradient(to bottom, #FCAC5D 0%, #D27A3B 100%);
    
    /* Hiệu ứng đổ bóng nhiều lớp */
    box-shadow: 
      /* Bóng dưới tạo độ nổi khối (3D) */
      0 6px 0 #8d4f00, 
      /* Bóng đổ mờ của toàn bộ nút */
      0 8px 15px rgba(0, 0, 0, 0.3),
      /* Lớp lóa sáng nhẹ phía trong nút */
      inset 0 2px 5px rgba(255, 255, 255, 0.5);
      
    transition: all 0.1s ease;
    
}

#c35gd-start-button:hover {
    transform: translateY(4px);
    box-shadow: 
      0 2px 0 #8d4f00, 
      0 4px 10px rgba(0, 0, 0, 0.2);
}


/* Loading spinner */
.c35gd-loading {
    text-align: center;
    padding: 20px;
}



.c35gd-spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-left-color: #4CAF50;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Hiển thị mảnh ghép */
.c35gd-piece {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    margin: auto;
    font-size: 16px;
    color: white;
    flex-direction: column;
}

.c35gd-piece img {
    width: 180px;
}

.c35gd-piece-earned {
    text-align: center;
    margin: 20px 0;
}

/*.button-redirect a {*/
/*    display: inline-block;*/
/*    fill: #fff;*/
/*    font-size: 15px;*/
/*    line-height: 1;*/
/*    padding: 12px 15px;*/
/*    text-align: center;*/
/*    transition: all .3s;*/
/*    background-color: #FF671F;*/
/*    border-style: solid;*/
/*    border-width: 1px 1px 1px 1px;*/
/*    border-color: #FF671F;*/
/*    border-radius: 50px 50px 50px 50px;*/
/*    color: #FFF;*/
/*    font-weight: 700;*/
/*    min-width: 150px;*/
/*    transition: all .5s ease-in-out;*/
/*}*/
/*.button-redirect a:hover {*/
/*    background-color: #FFFFFF;*/
/*    color: #FF671F;*/
/*    border-color: #FF671F;*/
/*    transform: scale(1.1);*/
/*}*/


/* Thêm vào file assets/css/game.css */

/* Cập nhật CSS grid để hiển thị 12 mảnh ghép (4x3) */
.c35gd-puzzle-pieces {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 15px;
    margin: 20px 0;
}

/* Đảm bảo các ô có kích thước phù hợp */
.c35gd-puzzle-piece {
    aspect-ratio: 1/1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    position: relative;
    transition: all 0.3s ease;
}

/* Thêm hiệu ứng đặc biệt cho mảnh hiếm (mảnh số 6) */
.c35gd-puzzle-piece.c35gd-collected:nth-child(6) {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.7);
}

.c35gd-rare-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background-color: #FF4500;
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 3px 6px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}



.unfold-container {
    position: relative;
    max-width: 600px; /* Tùy chỉnh độ rộng theo ý bạn */
    font-family: sans-serif;
    line-height: 1.6;
    margin:auto;
}

/* 1. Ẩn checkbox đi vì chúng ta chỉ cần label của nó */
.unfold-toggle {
    display: none; 
}

/* 2. Style cho khối nội dung lúc chưa mở */
.unfold-content {
    max-height: 80px; /* Giới hạn chiều cao ban đầu (Khoảng 2-3 dòng chữ) */
    overflow: hidden;
    position: relative;
    /* Hiệu ứng trượt mượt mà khi xổ ra */
    transition: max-height 0.8s ease-in-out;
    margin:auto;
    text-align: justify;
}

/* Hiệu ứng mờ dần (fade out) ở cuối văn bản lúc bị thu gọn */
.unfold-content::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    /* Lưu ý: Đổi rgba(255,255,255, ...) thành mã màu nền web của bạn nếu nền không phải màu trắng */
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    pointer-events: none;
    transition: opacity 0.5s;
}

/* 3. Style cho nút Xem tiếp */
.unfold-btn {
    display: inline-block;
    margin-top: 5px;
    color: #FFF;
    cursor: pointer;
    font-weight: 600;
}

.unfold-btn:hover {
    text-decoration: underline;
    color: #FFF;
}

/* =========================================
   HIỆU ỨNG KHI ĐÃ ẤN "XEM TIẾP" (CHECKED)
   ========================================= */

/* Khi checkbox được check -> Thay đổi max-height thật lớn để xổ hết nội dung ra */
.unfold-toggle:checked ~ .unfold-content {
    max-height: 2000px; /* Đặt một con số đủ lớn để chứa hết text của bạn */
    text-align: justify;
}

/* Xóa lớp phủ mờ ở dưới đáy đi */
.unfold-toggle:checked ~ .unfold-content::after {
    opacity: 0;
}

/* QUAN TRỌNG: Ẩn nút "Xem tiếp" đi để không thể đóng lại */
.unfold-toggle:checked ~ .unfold-btn {
    display: none;
}

.thong-diep h4,.thong-diep .unfold-content,.c35gd-result-content p {
    color: #FFF;
}



@media (max-width: 1366px) {
    .c35gd-options {
        gap: 10px;
    }
}