:root {
    --primary: #54a0ff;       /* Xanh da trời */
    --accent: #ff9f43;        /* Cam năng động */
    --success: #1dd1a1;       /* Xanh lá (Đúng) */
    --error: #ff6b6b;         /* Đỏ hồng (Sai) */
    --bg-body: #fff2cc;       /* Nền vàng kem */
    --text-main: #576574;
    --card-bg: #ffffff;
}

body {
    font-family: 'Nunito', sans-serif;
    background-color: var(--bg-body);
    background-image: radial-gradient(#ffeaa7 10%, transparent 10%);
    background-size: 20px 20px;
    color: var(--text-main);
    margin: 0;
    padding: 20px;
}

.main-wrapper { max-width: 800px; margin: 0 auto; }

/* HEADER */
header {
    text-align: center;
    background: white;
    padding: 30px 20px;
    border-radius: 25px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    margin-bottom: 30px;
    border: 3px solid #fff;
    position: relative;
    overflow: hidden;
}

header::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 8px;
    background: linear-gradient(90deg, #ff9f43, #ff6b6b, #1dd1a1, #54a0ff);
}

.mascot { font-size: 50px; margin-bottom: 10px; animation: bounce 2s infinite; }
h1 { color: var(--primary); font-weight: 900; margin: 0; text-transform: uppercase; }
p { color: #8395a7; font-weight: 700; margin-top: 5px; }

/* CARD CÂU HỎI */
.question-card {
    background: var(--card-bg);
    padding: 30px;
    margin-bottom: 25px;
    border-radius: 20px;
    box-shadow: 0 6px 0 #e0e0e0;
    border: 2px solid #f1f2f6;
    transition: transform 0.2s;
}

.question-card:hover { transform: translateY(-3px); }
.question-title { font-weight: 800; font-size: 20px; color: #2f3542; margin-bottom: 20px; }
.question-title::before { content: "❓"; margin-right: 10px; }

/* ĐÁP ÁN */
.options { list-style-type: none; padding: 0; display: grid; gap: 12px; }

.options label {
    display: flex; align-items: center; padding: 15px 20px;
    background-color: #f7f9fc;
    border: 2px solid #e1e5ea;
    border-radius: 15px;
    cursor: pointer; transition: all 0.2s;
    font-weight: 700; color: #576574;
}

.options label:hover { background-color: #e3f2fd; border-color: var(--primary); transform: scale(1.01); }
.options input { margin-right: 15px; width: 20px; height: 20px; accent-color: var(--primary); }
.options label:has(input:checked) { background-color: #e3f2fd; border-color: var(--primary); color: var(--primary); }

/* KẾT QUẢ ĐÚNG/SAI */
.question-card.correct { border-color: var(--success); background-color: #f0fff4; box-shadow: 0 6px 0 #b8e994; }
.question-card.correct .options label.selected-correct { background-color: var(--success); color: white; border-color: var(--success); }
.question-card.correct .result-msg { color: var(--success); font-weight: bold; margin-top: 10px; display: block; text-align: center; }

.question-card.incorrect { border-color: var(--error); background-color: #fff0f0; animation: shake 0.4s; box-shadow: 0 6px 0 #ffcccc; }
.question-card.incorrect .options label.selected-wrong { background-color: var(--error); color: white; border-color: var(--error); }
.question-card.incorrect .result-msg { color: var(--error); font-weight: bold; margin-top: 10px; display: block; text-align: center; }

/* BUTTON */
.btn-check {
    background-color: var(--accent); color: white; border: none;
    padding: 12px 30px; border-radius: 50px; font-size: 18px; font-weight: 900;
    cursor: pointer; margin-top: 20px; width: 100%;
    box-shadow: 0 5px 0 #e58e26; transition: all 0.1s; text-transform: uppercase;
}
.btn-check:active { transform: translateY(5px); box-shadow: none; }
.btn-check:hover { background-color: #ffaf40; }

/* PHÂN TRANG (Đã sửa tên ID tương ứng) */
.pagination-controls {
    display: none; justify-content: center; align-items: center; gap: 15px;
    margin: 40px 0; padding: 15px; background: rgba(255,255,255,0.8); border-radius: 50px;
}

.btn-nav {
    background-color: var(--primary); color: white; border: none;
    padding: 10px 20px; border-radius: 20px; font-weight: 700;
    cursor: pointer; box-shadow: 0 4px 0 #2e86de; font-family: 'Nunito', sans-serif;
}
.btn-nav:active { transform: translateY(4px); box-shadow: none; }
.btn-nav:disabled { background-color: #dcdde1; color: #95a5a6; box-shadow: none; cursor: not-allowed; transform: none; }

#page-info {
    background: #fff; color: var(--primary); padding: 8px 15px;
    border-radius: 15px; font-weight: 900; border: 2px solid var(--primary);
}

footer { text-align: center; color: #b2bec3; padding-bottom: 20px; }
.loading { text-align: center; color: var(--primary); font-weight: bold; padding: 50px; }

@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes shake { 0% { translateX(0); } 25% { translateX(-8px); } 50% { translateX(8px); } 75% { translateX(-8px); } 100% { translateX(0); } }

/* --- HIỆU ỨNG RƠI "VẬT THỂ LẠ" 💩 --- */
.falling-poop {
    position: fixed;
    top: -60px; /* Bắt đầu từ phía trên màn hình */
    z-index: 9999; /* Luôn nổi lên trên cùng */
    font-size: 40px; /* Kích thước */
    pointer-events: none; /* Không cho phép click vào để tránh lỗi */
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.2)); /* Bóng đổ nhẹ cho nổi bật */
    will-change: transform, top; /* Tối ưu hiệu suất chuyển động */
}

/* --- CSS CHO KÉO THẢ (DRAG & DROP) --- */
.drag-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
}

/* Khu vực chứa các thẻ cần kéo (Terms) */
.draggable-items {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 15px;
    background: #e3f2fd;
    border-radius: 15px;
    min-height: 60px;
    border: 2px dashed #90caf9;
}

/* Thẻ có thể kéo (Draggable) */
.draggable {
    background: var(--primary);
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    cursor: grab;
    font-weight: bold;
    box-shadow: 0 4px 0 #2980b9;
    user-select: none;
    transition: transform 0.1s;
    
    /* --- MỚI: Ngăn cuộn trang khi chạm vào thẻ để kéo --- */
    touch-action: none;
}

.draggable:active {
    cursor: grabbing;
    transform: scale(0.95);
}

.draggable.dragging {
    opacity: 0.5;
}

/* Khu vực thả (Drop Zones - Definitions) */
.drop-zones {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.drop-zone-row {
    display: flex;
    align-items: center;
    gap: 15px;
}

.definition-text {
    flex: 1;
    background: #fff;
    padding: 15px;
    border-radius: 12px;
    border: 2px solid #eee;
    font-weight: 600;
}

.drop-zone {
    width: 150px;
    height: 50px;
    border: 2px dashed #ccc;
    background: #f9f9f9;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.drop-zone.drag-over {
    background: #d1ecf1;
    border-color: var(--primary);
    transform: scale(1.05);
}

/* Khi thả đúng/sai */
.drop-zone.correct-match {
    background: var(--success);
    border: none;
    color: white;
}
.drop-zone.wrong-match {
    background: var(--error);
    border: none;
}