/* =========================================================
   🔘 TOKEN BUTTON DÙNG CHUNG (chỉnh một chỗ — đồng bộ toàn app)
   ========================================================= */
:root {
    --btn-radius: 10px;
    --btn-pad-y: 10px;
    --btn-pad-x: 18px;
    --btn-min-h: 40px;
    --btn-font-weight: 700;
    --btn-font: 14px;
    --btn-gap: 6px;
    --btn-transition: all .15s ease;
    /* Nhỏ (sm ~32px) */
    --btn-pad-y-sm: 6px;
    --btn-pad-x-sm: 12px;
    --btn-min-h-sm: 32px;
    --btn-font-sm: 13px;
    /* Lớn (lg ~52px) */
    --btn-pad-y-lg: 14px;
    --btn-pad-x-lg: 28px;
    --btn-min-h-lg: 52px;
    --btn-font-lg: 18px;
}

body {
    font-family: 'Nunito', 'Segoe UI', Arial, sans-serif;
    margin: 0;
    padding: 8px;
    color: #1f2d3d;

    background:
        radial-gradient(circle at 12% 18%, rgba(255, 214, 102, 0.35) 0 70px, transparent 72px),
        radial-gradient(circle at 88% 12%, rgba(111, 168, 220, 0.28) 0 90px, transparent 92px),
        radial-gradient(circle at 82% 82%, rgba(147, 196, 125, 0.28) 0 85px, transparent 87px),
        linear-gradient(135deg, #eef7ff 0%, #fff8e8 48%, #f0fff4 100%);
    background-attachment: fixed;
}

/* Các ô form không tự kế thừa font → ép kế thừa để đồng nhất với toàn hệ thống */
input,
select,
button,
textarea {
    font-family: inherit;
}

/* =========================================================
   🧩 KHUNG NỘI DUNG CHUNG (.main-panel)
   Đồng bộ khung của mọi màn (lấy "Cửa hàng đổi thưởng" làm gốc):
   cùng chiều rộng, min-height, nền, bo góc, padding, viền mảnh, bóng nhẹ.
   Hành vi lấp đầy/cuộn nội bộ trên desktop do các rule riêng từng màn đảm nhiệm.
   ========================================================= */
.main-panel {
    width: 100%;
    box-sizing: border-box;
    min-height: 585px;
    padding: 18px;
    background: #fffaf0;
    border-radius: 12px;
    border: 1px solid #d9eaf7;
    box-shadow: 0 6px 18px rgba(31, 78, 121, 0.06);
    margin: 0;
}

/* Mobile: không ép chiều cao tối thiểu (tôn trọng cuộn trang tự nhiên) */
@media (max-width: 900px) {
    .main-panel {
        min-height: auto;
    }
}

.app {
    max-width: 1600px;
    margin: auto;
    background: white;
    padding: 10px 20px;
    border-radius: 10px;
}

h1 {
    text-align: center;
    color: #1f4e79;
    margin: 6px 0 10px;
    font-size: 36px;
    letter-spacing: 1px;
}

.top-bar {
    display: flex;
    justify-content: space-between;
    background: #e2efda;
    padding: 8px 12px;
    border-radius: 6px;
    font-weight: bold;
}

.control-area {
    margin: 10px 0;
}

.main-control-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.left-controls,
.right-controls,
.admin-buttons-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.left-controls {
    justify-content: flex-start;
}

.right-controls,
.admin-buttons-row {
    justify-content: flex-end;
}

.admin-buttons-row {
    margin-top: 6px;
}

.password-input {
    width: 150px;
    padding: 6px 10px;
    margin: 3px;
    border-radius: 6px;
    border: 1px solid #999;
    font-weight: bold;
}

.hidden-keep-space {
    visibility: hidden;
}

.hidden-admin-row {
    display: none !important;
}

button {
    margin: 3px;
    border: none;
    background: #2f75b5;
    color: white;
    cursor: pointer;
    white-space: nowrap;
    /* Khung CHUNG (token) — màu giữ theo từng class */
    padding: var(--btn-pad-y) var(--btn-pad-x);
    min-height: var(--btn-min-h);
    border-radius: var(--btn-radius);
    font-weight: var(--btn-font-weight);
    font-size: var(--btn-font);
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-gap);
    line-height: 1;
    transition: var(--btn-transition);
}

button:hover {
    background: #1f4e79;
}

/* Trạng thái CHUNG cho mọi button */
button:hover:not(:disabled) {
    transform: translateY(-1px);
}

button:active:not(:disabled) {
    transform: translateY(0);
}

button:disabled,
button[disabled] {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

button:focus-visible {
    outline: 2px solid #2f75b5;
    outline-offset: 2px;
}

.student-select {
    padding: 6px 10px;
    margin: 3px;
    border-radius: 6px;
    border: 1px solid #999;
    font-weight: bold;
}

/* ===== LÀM ĐẸP DANH SÁCH CÂU HỎI (EXAM TABLE) ===== */
.exam-table {
    width: 100%;
    border-collapse: separate;
    /* Đổi từ collapse sang separate để hiển thị góc bo tròn mượt hơn */
    border-spacing: 0;
    font-size: 14px;
    background: #ffffff;
    border: 1px solid #d9eaf7;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(31, 78, 121, 0.06);
    overflow: hidden;
    margin-bottom: 20px;
}

.exam-table th {
    /* Header đồng bộ với các bảng khác (xanh gradient, chữ đậm 800) */
    background: linear-gradient(180deg, #eef4f9 0%, #e1edfa 100%);
    color: #1f4e79;
    font-weight: 800;
    padding: 11px 12px;
    border-bottom: 2px solid #d9eaf7;
    text-align: center;
    white-space: nowrap;
    /* 🔥 Ép Header KHÔNG được xuống dòng */
}

.exam-table th,
.exam-table td {
    border-bottom: 1px solid #edf2f7;
    border-right: none;
    border-left: none;
    padding: 4px 8px;
    /* 🔥 Ép mỏng Row lại (từ 10px xuống 5px) để vừa 15 câu */
    vertical-align: middle;
}

.exam-table tr:last-child td {
    border-bottom: none;
    /* Khử đường kẻ đáy ở row cuối cùng */
}

.col-no {
    width: 55px;
    text-align: center;
}

.col-question {
    width: 40%;
}

.col-answer {
    width: 95px;
    background: #fffdf4;
    /* Làm mềm màu vàng nền ô nhập dữ liệu */
    text-align: center;
}

.col-result {
    width: 75px;
    text-align: center;
}

.col-correct {
    width: 110px;
    text-align: center;
}

.col-choice {
    width: 125px;
    text-align: center;
}

.answer-input {
    width: 100%;
    padding: 4px;
    /* Đã thu nhỏ padding để ô không bị cao */
    box-sizing: border-box;
    border: 1px solid #ced4da;
    border-radius: 8px;
    text-align: center;
    font-weight: bold;
    color: #1f4e79;
    background-color: #ffffff;
    transition: border-color 0.15s ease-in-out;
}

.answer-input:focus {
    border-color: #2f75b5;
    outline: none;
    box-shadow: 0 0 0 3px rgba(47, 117, 181, 0.15);
}

.choice-btn {
    width: 100%;
    padding: 4px 6px;
    min-height: 0;
    /* Nút đáp án MCQ giữ chiều cao thấp như cũ (không theo --btn-min-h 40px) */
    margin: 0;
    background: #f8fbff;
    color: #1f4e79;
    border: 1px solid #d9eaf7;
    border-radius: 20px;
    /* 🔥 Đổi thành 20px để tạo hình viên thuốc bo tròn mềm mại */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
    line-height: 18px;
    cursor: pointer;
    /* Thêm hiệu ứng chuyển động mượt mà khi tương tác */
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.choice-btn:hover {
    background: #e8f1fb;
    border-color: #2f75b5;
    transform: translateY(-1px);
    /* Nhấc nhẹ nút lên khi di chuột vào */
}

/* Gộp 4 nút lựa chọn trong ô "Trả lời" của khu Tính nhanh (khi hình thức là Trắc nghiệm) */
.compact-choice-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.choice-btn.selected {
    background: #2f75b5;
    color: white;
    border-color: #2f75b5;
    box-shadow: 0 4px 10px rgba(47, 117, 181, 0.3);
    /* Tạo bóng đổ sâu rõ rệt */
    transform: scale(1.04);
    /* Phóng to nút lên 4% để con biết rõ mình đang chọn nút này */
}

/* Hàng nút bấm nhanh ký tự cho câu VIẾT điền dấu (> < = hoặc + -).
   Vùng chạm to, dễ bấm trên điện thoại cho trẻ. */
.symbol-key-row {
    display: flex;
    gap: 8px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.symbol-key {
    min-width: 44px;
    min-height: 44px;
    padding: 6px 14px;
    background: #f8fbff;
    color: #1f4e79;
    border: 2px solid #d9eaf7;
    border-radius: 14px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s ease;
}

.symbol-key:hover {
    background: #e8f1fb;
    border-color: #2f75b5;
    transform: translateY(-1px);
}

.symbol-key:active {
    background: #2f75b5;
    color: #fff;
    border-color: #2f75b5;
    transform: scale(0.96);
}

.symbol-key:disabled {
    opacity: 0.5;
    cursor: default;
}

.correct {
    color: #2e7d32;
    font-weight: bold;
}

.wrong {
    color: #c62828;
    font-weight: bold;
}

h2 {
    margin: 10px 0 5px;
    font-size: 16px;
}

table {
    border-collapse: collapse;
}

.main-layout {
    display: grid;
    grid-template-columns: minmax(1200px, 1fr) 420px;
    gap: 10px;
    align-items: start;
}

/* ===== LÀM ĐẸP LỊCH SỬ THEO NGÀY (HISTORY PANEL) ===== */
.history-panel {
    /* Khung do .main-panel đảm nhiệm; chỉ giữ hành vi nội dung */
    overflow: hidden;
}

.history-title {
    background: #eef4f9;
    color: #1f4e79;
    font-weight: bold;
    text-align: center;
    padding: 8px;
    font-size: 17px;
    border-bottom: 2px solid #d9eaf7;
}

.history-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}

.history-table th {
    /* Header đồng bộ với các bảng khác (xanh gradient, padding 11x12) */
    background: linear-gradient(180deg, #eef4f9 0%, #e1edfa 100%);
    color: #1f4e79;
    font-weight: 800;
    padding: 11px 12px;
    border-bottom: 2px solid #d9eaf7;
    text-align: center;
}

.history-table th,
.history-table td {
    border-bottom: 1px solid #edf2f7;
    border-right: none;
    border-left: none;
    padding: 6px 11px;
    text-align: center;
    height: auto;
}

.history-table tr:last-child td {
    border-bottom: none;
}

/* Zebra striping cho lịch sử theo ngày (đồng bộ kiểu với .exam-table) */
.history-table tbody tr:nth-child(odd) td {
    background-color: #ffffff;
}

.history-table tbody tr:nth-child(even) td {
    background-color: #f7faff;
}

/* Badge điểm trong ngày */
.history-score-badge {
    display: inline-block;
    min-width: 56px;
    padding: 4px 14px;
    border-radius: 999px;
    background: #eef4f9;
    color: #1f4e79;
    font-weight: 800;
    font-size: 14px;
}

/* Điểm cao (>= 1000): nổi bật màu xanh lá kèm 🔥 */
.history-score-high {
    background: #e2f3e5;
    color: #1e7e34;
}

@media (max-width: 1250px) {
    .main-layout {
        grid-template-columns: 1fr;
    }
}

.blank-answer-space {
    height: 29px;
}

.score-display {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
}

.total-score-input {
    width: 110px;
    padding: 4px 8px;
    border: 1px solid #999;
    border-radius: 5px;
    font-weight: bold;
    text-align: right;
}

.hidden-score-input {
    display: none;
}

.history-table {
    table-layout: fixed;
}

.history-table th,
.history-table td {
    box-sizing: border-box;
}

.history-table th:nth-child(1),
.history-table td:nth-child(1) {
    width: 32%;
}

.history-table th:nth-child(2),
.history-table td:nth-child(2) {
    width: 32%;
}

.history-table th:nth-child(3),
.history-table td:nth-child(3) {
    width: 36%;
}

.history-scroll-area {
    max-height: 350px;
    overflow-y: auto;
    overflow-x: hidden;
}

.history-table-header {
    padding-right: 16px;
    box-sizing: border-box;
}

.left-main-area {
    width: 100%;
}

.reward-section {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.reward-title {
    font-size: 22px;
    font-weight: bold;
    color: #1f4e79;
    margin-bottom: 8px;
}

.reward-table {
    width: 58%;
    border-collapse: collapse;
    font-size: 15px;
    background: white;
}

.reward-table th,
.reward-table td {
    border: 1px solid #000;
    padding: 5px 8px;
    text-align: center;
    height: 26px;
}

.reward-table th {
    font-weight: bold;
}

.reward-table td:nth-child(3),
.reward-table th:nth-child(3) {
    text-align: left;
}

.reward-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #999;
    padding: 4px;
    font-size: 14px;
}

.exchange-title {
    font-size: 22px;
    font-weight: bold;
    color: #1f4e79;
    margin: 18px 0 8px;
}

.exchange-table {
    width: 78%;
    border-collapse: collapse;
    font-size: 15px;
    background: white;
}

.exchange-table th,
.exchange-table td {
    border: 1px solid #000;
    padding: 5px 8px;
    text-align: center;
    height: 26px;
}

.exchange-table th {
    font-weight: bold;
}

.exchange-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #999;
    padding: 4px;
    font-size: 14px;
}

.app-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 12px;
    align-items: start;
}

.side-menu {
    min-height: 720px;
    background: #f8fbff;
    padding: 18px 10px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(31, 78, 121, 0.12);
    display: flex;
    flex-direction: column;
}

/* Menu điều hướng: ẩn thanh cuộn (vẫn cuộn được nếu nội dung tràn), tránh hiện
   thanh cuộn thừa ở một số màn như Cài đặt. */
.side-menu {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.side-menu::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.menu-title {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 22px;
    color: #1f4e79;
}

.menu-link {
    display: block;
    width: 100%;
    margin: 0;
    padding: 5px 10px;
    min-height: 34px;
    /* Thu hẹp nhẹ chiều cao mỗi dòng menu (giảm so với min-height 40px mặc định của button) */
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #1f4e79;
    text-align: left;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
}

.menu-link:hover {
    background: #e8f1fb;
    color: #1f4e79;
}

.menu-link.active-student {
    background: #d9ead3;
    color: #274e13;
}

.menu-link.active-section {
    background: #d9eaf7;
    color: #174366;
}

.hidden-section {
    display: none;
}

.today-score-message {
    margin-top: 6px;
    text-align: center;
    color: #2e7d32;
    /* Đổi từ màu đỏ sang xanh lá cây truyền cảm hứng */
    font-weight: bold;
    min-height: 22px;
}

.settings-panel {
    /* Khung do .main-panel đảm nhiệm. Bỏ max-width/margin auto để trải đủ bề rộng
       như màn gốc (không còn thu hẹp + căn giữa cả khung). */
    width: 100%;
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 14px;
}

.reward-table,
.exchange-table {
    width: 90%;
}

@media (max-width: 900px) {
    .app-layout {
        grid-template-columns: 1fr;
    }

    .side-menu {
        min-height: auto;
    }
}

.student-menu-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

/* [VIỆC 2] Nút "➕ Thêm học sinh" trong tab "Thông tin học sinh" (sau cổng mật khẩu). */
.student-info-add-btn {
    border: 2px dashed #58a55c !important;
    color: #2f7a33 !important;
    background: #f1faf1 !important;
    font-weight: 700;
}

.student-info-add-btn:hover {
    background: #e3f5e4 !important;
}

.student-badge {
    font-size: 11px;
    padding: 3px 6px;
    border-radius: 999px;
    background: #e2efda;
    color: #274e13;
    white-space: nowrap;
}

.student-badge:empty {
    display: none;
}

.student-badge.graded {
    background: #ddebf7;
    color: #1f4e79;
}

.menu-link {
    transition: background 0.15s ease, color 0.15s ease;
}

.main-control-row {
    justify-content: center;
}

.control-area {
    width: 100%;
}

.content-area {
    width: 100%;
    margin: 0;
    padding-left: 0;
    overflow-x: auto;
    text-align: left;
}

.exam-header-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 56px;
    margin-bottom: 10px;
}

.exam-action-wrapper {
    grid-column: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    margin: 0;
}

.exam-btn {
    width: 260px;
    height: 44px;
    font-size: 16px;
    font-weight: bold;
    border-radius: var(--btn-radius);
}

.exam-btn:active {
    transform: scale(0.97);
}

/* Header 3 ô: trái - giữa - phải, không viền */
.main-control-row {
    width: 100%;
}

.exam-header-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin: 10px 0;
    border: none !important;
}

.exam-header-table tr,
.exam-header-table td {
    border: none !important;
}

.exam-header-table td {
    padding: 0;
    vertical-align: middle;
}

.exam-header-left {
    width: 30%;
    text-align: left;
}

.exam-header-center {
    width: 40%;
    text-align: center;
    white-space: nowrap;
}

.exam-header-right {
    width: 30%;
    text-align: right;
}

.hello-text {
    font-size: 28px;
    font-weight: bold;
    color: #1f4e79;
    /* Đổi từ màu đỏ sang xanh dương lịch sự */
    white-space: nowrap;
    margin: 0;
    padding: 0;
}

.exam-btn {
    width: 190px;
    height: 44px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 8px;
    white-space: nowrap;
}

#answerAdminButton {
    width: 130px;
    /* bằng 1/2 nút 260px */
}

.exam-header-center .exam-btn {
    margin: 0 10px;
}

.exam-header-right .exam-btn {
    margin-right: 0;
}

.settings-panel {
    text-align: center;
}

.settings-panel h2 {
    text-align: center;
    font-size: 26px;
    margin: 0 0 18px;
    color: #1f4e79;
}

.admin-buttons-row {
    justify-content: center;
    gap: 10px;
}

.lucky-section {
    /* Khung do .main-panel đảm nhiệm; giữ canh giữa nội dung + cắt tràn */
    text-align: center;
    overflow: hidden;
}

.lucky-title {
    font-size: 30px;
    color: #d92f27;
    margin: 0 0 10px;
}

.lucky-main-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    width: 100%;
    max-width: 1120px;
    margin: 16px auto 0;
    align-items: start;
}

.lucky-left,
.lucky-right {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lucky-right {
    flex-direction: column;
    gap: 20px;
}

.wheel-wrapper {
    position: relative;
    width: 410px;
    height: 410px;
    margin: 0 auto;
}

.lucky-wheel {
    width: 410px;
    height: 410px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 12px solid #ffd65a;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
    position: relative;
    overflow: hidden;
    transition: transform 4.2s cubic-bezier(0.08, 0.82, 0.16, 1);
    background: conic-gradient(from -22.5deg,
            #e3342f 0deg 45deg,
            #f39c12 45deg 90deg,
            #3867d6 90deg 135deg,
            #3aa127 135deg 180deg,
            #f4bd2a 180deg 225deg,
            #d313d3 225deg 270deg,
            #f36f13 270deg 315deg,
            #20a6b8 315deg 360deg);
    cursor: pointer;
    will-change: transform;
}

.lucky-wheel::before {
    content: "QUAY";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 96px;
    height: 96px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #d9362d;
    color: #fff;
    border: 8px solid #ffd65a;
    font-size: 22px;
    font-weight: bold;
    line-height: 96px;
    text-align: center;
    z-index: 5;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28);
}

.lucky-wheel::after {
    content: "";
    position: absolute;
    inset: 125px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    border: 8px solid rgba(255, 214, 90, 0.9);
    z-index: 2;
}

.wheel-pointer {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    width: 0;
    height: 0;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-top: 38px solid #9a5a10;
    filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.35));
}

.wheel-label {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    transform-origin: 0 0;
    z-index: 4;
    pointer-events: none;
}

.wheel-label span {
    position: absolute;
    left: -45px;
    /* Dịch lùi sang trái để bù cho width được mở rộng */
    top: -155px;
    /* Kéo lùi chữ vào gần tâm vòng quay 5px để tránh viền cong */
    width: 90px;
    /* Nới rộng hộp chứa chữ để không bị cắt xén */
    height: 24px;
    line-height: 24px;
    text-align: center;
    color: #fff;
    font-size: 15px;
    /* Giảm nhẹ font chữ từ 17px xuống 15px */
    font-weight: bold;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}

/* Phóng to icon mặt buồn 😢 ("không được quà") lên 1.5 lần trên nhãn vòng quay.
   QUAN TRỌNG: đặt font-size ngay trên CHÍNH ô nhãn .wheel-label span, KHÔNG bọc
   emoji trong <span> con — vì trong ngữ cảnh ô nhãn (position:absolute + xoay),
   trình duyệt không vẽ emoji màu nằm trong span con (icon sẽ biến mất). Nội dung
   phải là con TRỰC TIẾP của .wheel-label span. Cỡ chữ chỉnh thêm trong media query
   để vẫn co theo responsive (gốc 15 → 13 → 11px). */
.wheel-label span.lucky-spin-15x {
    font-size: 22px;
}

.label-1 {
    transform: rotate(0deg);
}

.label-2 {
    transform: rotate(45deg);
}

.label-3 {
    transform: rotate(90deg);
}

.label-4 {
    transform: rotate(135deg);
}

.label-5 {
    transform: rotate(180deg);
}

.label-6 {
    transform: rotate(225deg);
}

.label-7 {
    transform: rotate(270deg);
}

.label-8 {
    transform: rotate(315deg);
}

.label-1 span {
    transform: rotate(0deg);
}

.label-2 span {
    transform: rotate(-45deg);
}

.label-3 span {
    transform: rotate(-90deg);
}

.label-4 span {
    transform: rotate(-135deg);
}

.label-5 span {
    transform: rotate(-180deg);
}

.label-6 span {
    transform: rotate(-225deg);
}

.label-7 span {
    transform: rotate(-270deg);
}

.label-8 span {
    transform: rotate(-315deg);
}

.lucky-info,
.lucky-history-box {
    width: 100%;
    max-width: 520px;
    box-sizing: border-box;
    background: #fff;
    border: 2px solid #f0b400;
    border-radius: 12px;
    padding: 14px 18px;
    font-size: 16px;
    text-align: center;
}

.lucky-history-box {
    border-color: #ffd966;
    min-height: 0;
}

.lucky-history-box h3 {
    text-align: center;
    margin: 0 0 10px;
    color: #1f4e79;
    font-size: 22px;
}

.lucky-history-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    /* Đồng bộ size chữ và tông bảng với các bảng khác */
    font-size: 14px;
    background: #ffffff;
}

.lucky-history-table th,
.lucky-history-table td {
    border: none;
    border-bottom: 1px solid #edf2f7;
    padding: 10px 12px;
    text-align: center;
    vertical-align: middle;
}

.lucky-history-table th {
    /* Header đồng bộ với các bảng khác (xanh gradient) */
    background: linear-gradient(180deg, #eef4f9 0%, #e1edfa 100%);
    color: #1f4e79;
    font-weight: 800;
    border-bottom: 2px solid #d9eaf7;
}

/* Zebra cho đồng bộ với các bảng khác */
.lucky-history-table tbody tr:nth-child(even) td {
    background: #f7faff;
}

.lucky-history-table tbody tr:last-child td {
    border-bottom: none;
}

.lucky-history-table td:nth-child(2) {
    text-align: center;
    font-weight: bold;
}

.lucky-result {
    min-height: 34px;
    margin: 8px auto 0;
    font-size: 24px;
    font-weight: bold;
    color: #d9362d;
    /* Nằm GIỮA dưới vòng quay; gói gọn trong bề rộng vòng quay để không tràn/vỡ. */
    width: 100%;
    max-width: 410px;
    text-align: center;
}

.lucky-result:empty {
    display: none;
}

.lucky-wheel.wheel-disabled {
    cursor: not-allowed;
    filter: grayscale(0.25);
    opacity: 0.85;
}

.lucky-wheel.wheel-disabled::before {
    background: #999;
}

@media (max-width: 1000px) {
    .lucky-main-layout {
        grid-template-columns: 1fr;
        max-width: 520px;
    }

    .wheel-wrapper,
    .lucky-wheel {
        width: 330px;
        height: 330px;
    }

    .lucky-wheel::after {
        inset: 98px;
    }

    .wheel-label span {
        top: -128px;
        font-size: 13px;
    }

    .wheel-label span.lucky-spin-15x {
        font-size: 19px;
    }
}

.exam-header-right {
    text-align: right;
}

.exam-header-right-inner {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    width: 100%;
}

#answerAdminButton {
    margin-right: 0;
}

#finishAdminButton,
#answerAdminButton {
    width: 130px;
}

.lucky-wheel {
    animation: wheelIdleGlow 2.2s ease-in-out infinite;
}

.lucky-wheel.spinning {
    animation: none;
    box-shadow:
        0 0 0 8px rgba(255, 214, 90, 0.35),
        0 16px 34px rgba(0, 0, 0, 0.32);
}

.lucky-wheel.spin-finished {
    animation: wheelStopBounce 0.45s ease;
}

.lucky-wheel::before {
    animation: quayPulse 1.4s ease-in-out infinite;
}

.lucky-result {
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.lucky-result.result-pop {
    animation: resultPop 0.55s ease;
}

@keyframes wheelIdleGlow {

    0%,
    100% {
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
    }

    50% {
        box-shadow:
            0 0 0 5px rgba(255, 214, 90, 0.22),
            0 12px 30px rgba(0, 0, 0, 0.28);
    }
}

@keyframes quayPulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.06);
    }
}

@keyframes wheelStopBounce {
    0% {
        transform: rotate(var(--final-rotation)) scale(1);
    }

    45% {
        transform: rotate(var(--final-rotation)) scale(1.035);
    }

    100% {
        transform: rotate(var(--final-rotation)) scale(1);
    }
}

@keyframes resultPop {
    0% {
        transform: scale(0.85);
        opacity: 0;
    }

    60% {
        transform: scale(1.12);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.student-photo-box {
    margin-top: auto;
    padding-top: 18px;
    width: 100%;
}

.student-photo-frame-box {
    position: relative;
    width: 260px;
    height: 260px;
    margin: 0 auto;
}

.student-photo {
    position: absolute;
    left: 50%;
    top: 50%;
    /* 70% khớp với "ô kính" trong các frame PNG (bronze/silver/gold/diamond/
       legend). Dùng tỉ lệ % để mọi breakpoint cùng 1 ratio → không lệch giữa
       avatar sidebar và preview "Thông tin học sinh". */
    width: 70%;
    height: 70%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
    z-index: 1;
}

.student-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 2;
    pointer-events: none;
}

.admin-bonus-spin-row {
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.admin-bonus-spin-row button {
    min-width: 220px;
}

.admin-bonus-spin-row:not(.hidden-admin-row) {
    display: flex;
}

.history-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 8px;
    background: #f8fbff;
    border-bottom: 1px solid #b7b7b7;
}

.summary-box {
    border: 1px solid #d9eaf7;
    border-radius: 14px;
    padding: 9px 14px;
    background: linear-gradient(160deg, #ffffff 0%, #f3f8fe 100%);
    box-shadow: 0 6px 16px rgba(31, 78, 121, 0.07);
    font-size: 14px;
}

.summary-title {
    font-weight: 800;
    color: #1f4e79;
    font-size: 15px;
    margin-bottom: 5px;
    padding-bottom: 5px;
    text-align: center;
    border-bottom: 2px dashed #d9eaf7;
}

/* Mỗi chỉ số là 1 hàng dashboard: nhãn (kèm icon) bên trái, số to đậm bên phải */
.stat-metric {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 4px;
}

.stat-metric+.stat-metric {
    border-top: 1px solid #eef4f9;
}

.stat-label {
    color: #5a6b7b;
    font-weight: 600;
    font-size: 14px;
}

.stat-value {
    color: #1f4e79;
    font-weight: 800;
    font-size: 18px;
    line-height: 1.1;
    white-space: nowrap;
}

/* Giá trị "ngày học tốt nhất" là chuỗi ngày nên để nhỏ hơn cho cân đối */
.stat-value-day {
    font-size: 13px;
    color: #b45f06;
}

@media (max-width: 700px) {
    .history-summary {
        grid-template-columns: 1fr;
    }
}

.level-label {
    margin-left: 10px;
}

.student-level {
    padding: 3px 9px;
    border-radius: 999px;
    font-weight: bold;
    font-size: 13px;
    white-space: nowrap;
}

.level-bronze {
    background: #f4cccc;
    color: #7f3f00;
}

.level-silver {
    background: #e7e6e6;
    color: #666666;
}

.level-gold {
    background: #fff2cc;
    color: #bf9000;
}

.level-platinum {
    /* Bạch Kim: trắng bạc ánh xanh/tím nhạt — sang hơn Vàng, dưới Kim Cương */
    background: linear-gradient(135deg, #eef0f7 0%, #e3e6f2 100%);
    color: #5a5b8c;
}

.level-diamond {
    background: #ddebf7;
    color: #1f4e79;
}

.level-legend {
    background: #eadcf8;
    color: #7030a0;
}

.student-photo {
    transition: border 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.photo-frame-bronze {
    border-color: #b45f06;
    box-shadow: 0 4px 14px rgba(180, 95, 6, 0.28);
}

.photo-frame-silver {
    border-color: #a6a6a6;
    box-shadow:
        0 0 0 4px rgba(217, 217, 217, 0.7),
        0 6px 18px rgba(120, 120, 120, 0.35);
}

.photo-frame-gold {
    border-color: #f1c232;
    box-shadow:
        0 0 0 4px rgba(255, 242, 204, 0.9),
        0 0 18px rgba(241, 194, 50, 0.75),
        0 8px 22px rgba(191, 144, 0, 0.35);
    /* Căn chỉnh ảnh dùng chung rule .student-photo (top: 50%, scale 1, 70%).
       Không override top/transform riêng cho từng tier nữa. */
}

.photo-frame-platinum {
    /* Bạch Kim: viền trắng bạc ánh xanh/tím, hào quang nhẹ hơn Kim Cương */
    border-color: #aab0d6;
    box-shadow:
        0 0 0 4px rgba(232, 234, 244, 0.92),
        0 0 20px rgba(170, 176, 214, 0.8),
        0 9px 24px rgba(90, 91, 140, 0.38);
}

.photo-frame-diamond {
    border-color: #6fa8dc;
    box-shadow:
        0 0 0 5px rgba(221, 235, 247, 0.95),
        0 0 22px rgba(111, 168, 220, 0.9),
        0 10px 26px rgba(31, 78, 121, 0.42);
}

.photo-frame-legend {
    border-color: #7030a0;
    box-shadow:
        0 0 0 5px rgba(234, 220, 248, 1),
        0 0 22px rgba(112, 48, 160, 0.9),
        0 0 38px rgba(255, 215, 0, 0.7),
        0 12px 32px rgba(80, 30, 130, 0.45);
}

html,
body {
    overflow-x: hidden;
    overflow-y: scroll;
}

.content-area {
    overflow-x: hidden;
    overflow-y: auto;
}

.side-menu {
    overflow: hidden;
}

.side-menu {
    height: 670px;
    min-height: 620px;
    overflow: hidden;
}

/* .lucky-section: box-sizing/min-height do .main-panel đảm nhiệm */

body::before {
    content: "✏️  📘  ➕  🔢  ⭐  📐";
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    pointer-events: none;
    z-index: -1;

    font-size: 46px;
    letter-spacing: 42px;
    line-height: 120px;
    color: rgba(31, 78, 121, 0.08);
    white-space: pre-wrap;
    padding: 40px;
    box-sizing: border-box;
}

.app {
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 8px 28px rgba(31, 78, 121, 0.16);
    backdrop-filter: blur(4px);
}

h1 {
    background: linear-gradient(90deg, #1f4e79, #2f75b5, #70ad47);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    background: #e2efda;
    padding: 8px 12px;
    border-radius: 6px;
    font-weight: bold;
}

.reward-progress-box {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.reward-progress-title {
    color: #1f4e79;
    white-space: nowrap;
    font-size: 14px;
}

.reward-progress-track {
    flex: 1;
    height: 14px;
    border-radius: 999px;
    background: #d9eaf7;
    overflow: hidden;
    border: 1px solid #9dc3e6;
    min-width: 180px;
}

.reward-progress-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, #70ad47, #ffd966);
    transition: width 0.45s ease;
}

.reward-progress-text {
    color: #274e13;
    font-size: 13px;
    white-space: nowrap;
}

.reward-progress-percent {
    min-width: 44px;
    text-align: center;
    padding: 3px 8px;
    border-radius: 6px;
    background: #fff8dc;
    color: #1f4e79;
    font-size: 14px;
}

.reward-progress-hot .reward-progress-fill {
    animation: rewardProgressGlow 1.2s ease-in-out infinite;
}

@keyframes rewardProgressGlow {

    0%,
    100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.2);
    }
}


.hidden-student-menu {
    display: none !important;
}

.xoai-toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    color: #1f4e79;
    cursor: pointer;
}

.xoai-toggle-label input {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* ===== MOBILE RESPONSIVE FIX - Samsung Android / Chrome / Samsung Internet ===== */
@media (max-width: 900px) {

    html,
    body {
        overflow-x: hidden;
        overflow-y: auto;
    }

    body {
        padding: 4px;
    }

    .app {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 8px;
        border-radius: 8px;
    }

    h1 {
        font-size: 24px;
        line-height: 1.2;
        margin: 6px 0 8px;
        letter-spacing: 0;
    }

    .app-layout {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .side-menu {
        height: auto;
        min-height: auto;
        overflow: visible;
        padding: 10px;
    }

    .student-photo-box {
        margin-top: 8px;
        padding-top: 8px;
    }

    .student-photo-frame-box {
        width: 150px;
        height: 150px;
    }

    /* Kích thước .student-photo dùng chung tỉ lệ 70% từ rule gốc (line 1194). */

    .content-area {
        overflow-x: hidden;
        overflow-y: visible;
    }

    .top-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .reward-progress-box {
        flex-wrap: wrap;
        gap: 6px;
    }

    .reward-progress-title,
    .reward-progress-text {
        white-space: normal;
    }

    .reward-progress-track {
        min-width: 120px;
    }

    .score-display {
        justify-content: center;
        flex-wrap: wrap;
    }

    .exam-header-table,
    .exam-header-table tbody,
    .exam-header-table tr,
    .exam-header-table td {
        display: block;
        width: 100%;
    }

    .exam-header-left,
    .exam-header-center,
    .exam-header-right {
        width: 100%;
        text-align: center;
        margin-bottom: 8px;
    }

    .hello-text {
        font-size: 20px;
        white-space: normal;
        text-align: center;
    }

    .exam-header-center {
        white-space: normal;
    }

    .exam-header-center .exam-btn,
    .exam-header-right .exam-btn,
    .exam-btn,
    #finishAdminButton,
    #answerAdminButton {
        width: auto;
        min-width: 130px;
        max-width: 100%;
        margin: 3px;
    }

    .exam-header-right-inner {
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
    }

    #questions {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .exam-table {
        min-width: 860px;
        font-size: 12px;
    }

    .choice-btn {
        font-size: 12px;
        padding: 5px 6px;
    }

    .answer-input {
        min-height: 34px;
        font-size: 16px;
    }

    .reward-section {
        align-items: stretch;
    }

    .reward-table,
    .exchange-table,
    .history-panel,
    .lucky-history-table {
        width: 100%;
    }

    .reward-section,
    .history-panel,
    .lucky-history-box {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .reward-table,
    .exchange-table {
        min-width: 620px;
    }

    .settings-panel {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 12px;
    }

    .settings-row,
    .admin-buttons-row,
    .admin-bonus-spin-row:not(.hidden-admin-row) {
        flex-wrap: wrap;
    }

    .admin-buttons-row button,
    .admin-bonus-spin-row button {
        width: 100%;
        min-width: 0;
        white-space: normal;
    }

    .lucky-section {
        min-height: auto;
        overflow: visible;
        padding: 12px 8px;
    }

    .lucky-main-layout {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 16px;
    }
}

@media (max-width: 600px) {
    .menu-title {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .menu-link {
        font-size: 14px;
        padding: 10px;
        white-space: normal;
    }

    .wheel-wrapper,
    .lucky-wheel {
        width: 280px;
        height: 280px;
    }

    .lucky-wheel::before {
        width: 72px;
        height: 72px;
        line-height: 72px;
        font-size: 18px;
        border-width: 6px;
    }

    .lucky-wheel::after {
        inset: 82px;
    }

    .wheel-label span {
        top: -104px;
        /* Kéo lùi chữ vào gần tâm trên điện thoại */
        left: -35px;
        /* Căn lại tâm cho hộp chữ nới rộng */
        width: 70px;
        /* Nới rộng hộp chữ */
        font-size: 11px;
        /* Thu nhỏ nhẹ chữ trên mobile */
    }

    .wheel-label span.lucky-spin-15x {
        font-size: 16px;
    }

    .lucky-title {
        font-size: 24px;
    }

    .lucky-info,
    .lucky-history-box {
        padding: 10px;
        font-size: 14px;
    }

    .lucky-result {
        font-size: 20px;
    }

    .history-table {
        font-size: 12px;
    }

    .history-table-header {
        padding-right: 0;
    }
}

/* ===== FIX MOBILE SCROLL STUCK - Samsung Android ===== */
@media (max-width: 900px) {

    html,
    body {
        height: auto !important;
        min-height: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        touch-action: pan-y;
    }

    body {
        position: static !important;
        -webkit-overflow-scrolling: touch;
    }

    .app,
    .app-layout,
    .content-area,
    .side-menu,
    .content-section,
    .lucky-section {
        height: auto !important;
        max-height: none !important;
        overflow-y: visible !important;
    }

    .content-area {
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    .side-menu {
        overflow: visible !important;
    }

    #questions,
    .reward-section,
    .history-panel,
    .lucky-history-box {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* ===== MOBILE QUESTION CARD VIEW ONLY ===== */
@media (max-width: 600px) {
    #questions {
        overflow-x: visible !important;
    }

    .exam-table,
    .exam-table thead,
    .exam-table tbody,
    .exam-table tr,
    .exam-table th,
    .exam-table td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }

    .exam-table {
        min-width: 0 !important;
        border-collapse: separate;
        border-spacing: 0;
    }

    .exam-table thead {
        display: none;
    }

    .exam-table tr {
        margin-bottom: 12px;
        border: 1px solid #b7b7b7;
        border-radius: 10px;
        overflow: hidden;
        background: #ffffff;
    }

    .exam-table td {
        border: none;
        border-bottom: 1px solid #e5e5e5;
        padding: 8px 10px;
        text-align: left;
    }

    .exam-table td:last-child {
        border-bottom: none;
    }

    .exam-table td::before {
        display: block;
        margin-bottom: 4px;
        font-weight: bold;
        color: #1f4e79;
        font-size: 12px;
    }

    .exam-table td:nth-child(1)::before {
        content: "Câu hỏi";
    }

    .exam-table td:nth-child(2)::before {
        content: "Câu trả lời";
    }

    /* Thay đổi hiển thị cột Kết quả thành dạng nằm cùng 1 dòng và thêm dấu hai chấm */
    .exam-table td:nth-child(3)::before {
        content: "Kết quả: ";
        display: inline-block;
        margin-bottom: 0;
        margin-right: 4px;
    }

    /* Thay đổi hiển thị cột Đáp án đúng thành dạng nằm cùng 1 dòng và thêm dấu hai chấm */
    .exam-table td:nth-child(4)::before {
        content: "Đáp án đúng: ";
        display: inline-block;
        margin-bottom: 0;
        margin-right: 4px;
    }

    .exam-table td:nth-child(5)::before {
        content: "Đáp án A";
    }

    .exam-table td:nth-child(6)::before {
        content: "Đáp án B";
    }

    .exam-table td:nth-child(7)::before {
        content: "Đáp án C";
    }

    .exam-table td:nth-child(8)::before {
        content: "Đáp án D";
    }

    .col-choice {
        min-height: 0;
    }

    .choice-btn {
        width: 100%;
        min-height: 38px;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        line-height: 1.3;
        font-size: 14px;
    }

    .answer-input {
        width: 100%;
        min-height: 40px;
        font-size: 16px;
    }
}

/* ===== HIDE EMPTY RESULT/CORRECT ANSWER ON MOBILE ===== */
@media (max-width: 600px) {

    /* Ẩn cột Kết quả nếu chưa có nội dung */
    .exam-table td.col-result:empty,
    .exam-table td.col-result:not(:has(*)) {
        display: none;
    }

    /* Ẩn cột đáp án đúng nếu chưa chấm */
    .exam-table td.col-correct:empty,
    .exam-table td.col-correct:not(:has(*)) {
        display: none;
    }

    /* Ẩn luôn label giả */
    .exam-table td.col-result:empty::before,
    .exam-table td.col-correct:empty::before {
        display: none;
    }
}

/* ===== HIDE MCQ AREA FOR INPUT QUESTIONS ON MOBILE ===== */
@media (max-width: 600px) {

    /* Với câu INPUT thì ẩn luôn 4 ô A/B/C/D */
    .exam-table tr:has(.answer-input) td.col-choice {
        display: none;
    }
}

/* =========================================================
   MOBILE ONLY: TINH GỌN VÙNG CÂU HỎI CHO ĐIỆN THOẠI
   (toàn bộ nằm trong media query -> KHÔNG ảnh hưởng giao diện PC)
   ========================================================= */
@media (max-width: 900px) {

    /* Vùng "Tính nhanh" đang bị inline style ép 2 cột rất chật trên điện thoại
       -> ép về 1 cột (cần !important để thắng inline style) */
    .fast-question-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* Hai khối câu hỏi gọn lại, tiêu đề nhỏ vừa phải trên màn hình hẹp */
    .math-quiz-layout {
        gap: 12px;
    }

    .quiz-section {
        padding: 10px;
        border-radius: 16px;
    }

    .quiz-section-header h2 {
        font-size: 16px;
    }
}

@media (max-width: 600px) {

    /* Nội dung đề đã có sẵn "Câu N:" nên ẩn nhãn "Câu hỏi" lặp lại cho đỡ rối */
    .exam-table td.col-question::before {
        display: none !important;
    }

    /* Làm nổi bật dòng đề bài trong thẻ */
    .exam-table td.col-question {
        font-size: 15px;
        font-weight: 700;
        color: #1f4e79;
        line-height: 1.4;
    }

    /* 4 đáp án A/B/C/D xếp lưới 2x2 gọn gàng thay vì 4 dòng dài lê thê.
       Dùng float, được bao bởi overflow:hidden sẵn có trên .exam-table tr */
    .word-exam-table td.col-choice {
        float: left;
        width: 50% !important;
        box-sizing: border-box;
        padding: 4px;
        border-bottom: none;
    }

    /* Nút đã hiển thị nội dung đáp án nên bỏ nhãn "Đáp án A/B/C/D" thừa */
    .word-exam-table td.col-choice::before {
        display: none !important;
    }

    .word-exam-table .choice-btn {
        min-height: 46px;
        font-size: 14px;
    }
}

/* ===== MOBILE: ÉP Ô TRẢI HẾT CHIỀU NGANG & NHÃN + GIÁ TRỊ CÙNG HÀNG ===== */
@media (max-width: 600px) {

    /* Ghi đè width cố định của desktop bị "rò rỉ" xuống mobile.
       PHẢI có "td" để tăng specificity (0,2,1) thắng rule desktop ".x-exam-table .col-*" (0,2,0)
       vốn nằm sau trong file -> câu hỏi, ô trả lời, kết quả, đáp án đúng trải hết bề ngang thẻ */
    .fast-exam-table td.col-question,
    .fast-exam-table td.col-answer,
    .fast-exam-table td.col-result,
    .fast-exam-table td.col-correct,
    .word-exam-table td.col-question,
    .word-exam-table td.col-answer,
    .word-exam-table td.col-result,
    .word-exam-table td.col-correct {
        width: 100% !important;
    }

    /* "Câu trả lời": nhãn và ô nhập / giá trị nằm CÙNG 1 HÀNG */
    .exam-table td.col-answer {
        display: flex !important;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
    }

    .exam-table td.col-answer::before {
        content: "Câu trả lời: ";
        display: inline-block !important;
        margin-bottom: 0 !important;
        white-space: nowrap;
    }

    /* Ô nhập (phần Tính nhanh) nằm ngay cạnh nhãn, chiếm phần còn lại của hàng */
    .exam-table td.col-answer .answer-input {
        width: auto;
        flex: 1 1 90px;
        min-height: 34px;
    }

    /* Giá trị trả lời của phần lời văn (Đúng/đáp án đã chọn) cũng nằm cạnh nhãn */
    .exam-table td.col-answer strong {
        font-weight: 700;
    }
}

.correct-streak-toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    color: #1f4e79;
    cursor: pointer;
}

.correct-streak-toggle-label input {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Thời hạn "Thưởng chuỗi đúng": 2 ô ngày dưới checkbox (ưu tiên dễ nhập trên điện thoại) */
.correct-streak-schedule-row {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 6px;
    width: 100%;
}

.correct-streak-date-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
}

.correct-streak-date-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 140px;
    min-width: 140px;
    font-size: 13px;
    font-weight: 600;
    color: #1f4e79;
}

.correct-streak-date-field input[type="date"] {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid #cbd5e0;
    border-radius: 8px;
    font-size: 16px;
    /* >=16px: tránh iOS tự zoom khi focus */
    color: #2d3748;
    background: #fff;
}

@media (max-width: 640px) {
    .correct-streak-date-field {
        flex: 1 1 100%;
    }
}

.correct-streak-message {
    min-height: 42px;
    margin-bottom: 4px;
    font-size: 15px;
    font-weight: bold;
    line-height: 1.35;
    text-align: left;
    animation: correctStreakBlink 1.4s ease-in-out infinite;
}

.correct-streak-message:empty {
    display: none;
}

.correct-streak-rainbow {
    background: linear-gradient(90deg,
            #ff0000,
            #ff9900,
            #ffff00,
            #33cc33,
            #00ccff,
            #3366ff,
            #cc33ff);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation:
        correctStreakRainbow 2.4s linear infinite,
        correctStreakBlink 1.4s ease-in-out infinite;
}

@keyframes correctStreakRainbow {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 300% 50%;
    }
}

@keyframes correctStreakBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.65;
    }
}

@media (max-width: 900px) {
    .correct-streak-message {
        text-align: center;
        font-size: 14px;
        min-height: auto;
    }
}

/* ===== APP-LIKE MOBILE ONLY - PC KHÔNG BỊ ẢNH HƯỞNG ===== */
@media (max-width: 900px) {
    body {
        padding: 0;
        padding-bottom: 78px;
        background-attachment: scroll;
    }

    .app {
        min-height: 100vh;
        border-radius: 0;
        padding: 8px;
        box-shadow: none;
    }

    h1 {
        position: static;
        /* Để tiêu đề cuộn tự nhiên, nhường chỗ ghim cho Menu bar */
        background: linear-gradient(90deg, #1f4e79, #2f75b5, #70ad47);
        /* Khôi phục màu sắc rực rỡ */
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        padding: 10px 6px;
        box-shadow: none;
        /* Bỏ bóng đổ thừa trên mobile */
    }

    .top-bar {
        border-radius: 16px;
        box-shadow: 0 4px 14px rgba(31, 78, 121, 0.12);
    }

    .menu-title,
    .student-photo-box {
        display: none;
    }

    .menu-link {
        margin: 0;
        padding: 8px 4px;
        border-radius: 14px;
        text-align: center;
        font-size: 11px;
        line-height: 1.2;
        white-space: normal;
    }

    .student-menu-link {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 3px;
    }

    .student-badge {
        font-size: 9px;
        padding: 2px 5px;
    }

    .content-area {
        overflow: visible;
    }

    .exam-header-table {
        margin-top: 8px;
    }

    .exam-header-center {
        display: flex !important;
        justify-content: center;
        gap: 8px;
    }

    .exam-header-center .exam-btn,
    .exam-btn {
        flex: 1;
        min-width: 0;
        height: 46px;
        border-radius: 16px;
        font-size: 14px;
    }

    .history-panel,
    .settings-panel,
    .lucky-section,
    .reward-section {
        border-radius: 18px;
    }

    .summary-box,
    .lucky-info,
    .lucky-history-box {
        border-radius: 16px;
        box-shadow: 0 4px 14px rgba(31, 78, 121, 0.1);
    }

    button,
    .choice-btn,
    .answer-input,
    .password-input {
        border-radius: 14px;
    }
}

/* ===== MOBILE TOP DROPDOWN MENU ONLY - PC KHÔNG ĐỔI ===== */
.mobile-menu-toggle {
    display: none;
}

@media (max-width: 900px) {
    body {
        padding-bottom: 0;
    }

    .side-menu {
        position: sticky;
        top: 0;
        z-index: 60;

        height: auto;
        min-height: auto;
        padding: 8px;

        display: block;
        border-radius: 0 0 18px 18px;
        background: rgba(248, 251, 255, 0.98);
        box-shadow: 0 6px 18px rgba(31, 78, 121, 0.16);
        overflow: visible;
    }

    .mobile-menu-toggle {
        display: block;
        width: 100%;
        height: 46px;
        margin: 0;
        border-radius: 16px;
        font-size: 16px;
        text-align: center;

        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
        -webkit-user-select: none;
    }

    .side-menu .menu-title,
    .side-menu .menu-link,
    .side-menu .side-menu-caption,
    .side-menu .student-photo-box {
        display: none;
    }

    .side-menu.mobile-menu-open .menu-title,
    .side-menu.mobile-menu-open .menu-link,
    .side-menu.mobile-menu-open .side-menu-caption {
        display: block;
    }

    .side-menu.mobile-menu-open .student-menu-link {
        display: flex;
    }

    .side-menu.mobile-menu-open .student-photo-box {
        display: block;
    }

    .side-menu.mobile-menu-open .student-profile-card {
        display: flex;
    }

    .side-menu.mobile-menu-open {
        max-height: 85vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .menu-title {
        margin: 10px 0;
        font-size: 20px;
    }

    .menu-link {
        margin: 6px 0;
        padding: 12px;
        border-radius: 14px;
        text-align: left;
        font-size: 14px;
    }

    .student-photo-frame-box {
        width: 120px;
        height: 120px;
    }

    /* Kích thước .student-photo dùng chung tỉ lệ 70% từ rule gốc (line 1194). */
}

/* ===== FIX LUCKY SCREEN HISTORY SCROLL - PC + MOBILE ===== */
.lucky-main-layout {
    align-items: start;
}

.lucky-left {
    /* Xếp DỌC: vòng quay ở TRÊN, dòng "Đang quay…/Kết quả: Thưởng…" ngay BÊN DƯỚI
       (trước đây xếp ngang → dòng kết quả tràn sang phải gây vỡ hình). */
    flex-direction: column;
    align-items: center;
    padding-top: 0;
}

/* Gỡ bỏ tính năng cuộn ở thẻ bao ngoài cùng để giữ lại Title */
.lucky-history-box {
    max-height: none;
    overflow: hidden;
}

/* Thêm vùng cuộn riêng biệt chỉ dành cho bảng */
.lucky-history-scroll {
    max-height: 325px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.lucky-history-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    /* Dùng bóng đổ nổi hẳn lên để tách biệt dữ liệu cuộn bên dưới */
    box-shadow: 0 4px 12px rgba(31, 78, 121, 0.12);
    background-clip: padding-box;
    /* Đảm bảo màu nền không tràn ra đè lên bóng */
}

@media (max-width: 900px) {
    .lucky-left {
        padding-top: 0;
    }

    .lucky-history-scroll {
        max-height: 260px;
    }
}

/* .reward-shop-section: khung do .main-panel đảm nhiệm; chỉ giữ hành vi lấp đầy
   (height:100% + flex) ở rule riêng phía dưới. */

/* Hàng tiêu đề: tiêu đề căn giữa toàn bộ chiều rộng, nút Lưu căn phải tuyệt đối
   (không ảnh hưởng tới việc căn giữa của tiêu đề so với bảng bên dưới). */
.reward-shop-title-row {
    position: relative;
    /* Tiêu đề cố định cùng thanh tab, không cuộn theo danh sách */
    flex-shrink: 0;
    margin-bottom: 14px;
}

.reward-shop-title {
    font-size: 30px;
    font-weight: bold;
    color: #d9362d;
    text-align: center;
}

/* Nút "Lưu phần thưởng" đặt căn phải trên cùng dòng với tiêu đề */
.reward-shop-save-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
}

.reward-shop-save-btn.hidden-section {
    display: none !important;
}

/* ===== REWARD SHOP: THANH TAB =====
   Dùng chung "Parent tab style" với khối admin tabs để thống nhất giao diện.
   (#nền nhạt, active = nền xanh đậm + chữ trắng + viền vàng dưới) */
.reward-shop-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 4px 4px;
    margin-bottom: 0;
    border-bottom: 2px solid #d9eaf7;
    flex-shrink: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.reward-shop-tab {
    flex: 0 0 auto;
    padding: 10px 18px;
    border: none;
    border-radius: 12px 12px 0 0;
    background: #eef4f9;
    color: #1f4e79;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}

.reward-shop-tab:hover {
    background: #dbe9f6;
    color: #1f4e79;
}

.reward-shop-tab.active-section {
    background: #1f4e79;
    color: #ffffff;
    border-bottom-color: #f0b400;
    font-weight: 800;
}

.reward-shop-tab-panel {
    width: 100%;
    /* Khoảng cách trên đặt bằng margin-top của CHÍNH vùng cuộn (nằm NGOÀI
       scrollport) nên header sticky luôn cách tiêu đề một khoảng cố định,
       không bị xê dịch khi cuộn. KHÔNG dùng padding-top vì padding của vùng
       cuộn sẽ làm hàng dữ liệu lọt lên phía trên header. */
    margin-top: 14px;
    /* Panel đang hiện là phần DUY NHẤT được cuộn (danh sách quà / lịch sử) */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Trên điện thoại: trả về cuộn trang tự nhiên (không khóa chiều cao vùng cửa hàng) */
@media (max-width: 900px) {
    .reward-shop-section {
        height: auto;
        display: block;
        overflow: visible;
    }

    .reward-shop-tab-panel {
        overflow-y: visible;
        min-height: 0;
    }
}

.reward-shop-overview {
    max-width: 900px;
    margin: 0 auto 18px;
    padding: 14px 18px;
    border: 2px solid #ffd966;
    border-radius: 12px;
    background: #ffffff;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 18px;
    font-size: 16px;
}

.reward-shop-body {
    max-width: 1100px;
    /* Không đặt margin-top ở đây (nằm TRONG scrollport sẽ cuộn đi làm header
       xê dịch); khoảng cách trên do .reward-shop-tab-panel đảm nhiệm. */
    margin: 0 auto;
}

/* ===== REWARD SHOP: BẢNG THỐNG NHẤT (đồng bộ tông .exam-table) ===== */
.reward-shop-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #ffffff;
    border: 1px solid #d9eaf7;
    /* Viền trên do thead th đảm nhiệm (giữ nguyên khi header sticky). Bỏ
       border-radius để khi cuộn không bị hở góc lộ dữ liệu phía dưới. */
    border-top: 0;
    /* Không dùng overflow:hidden để header dính (sticky) hoạt động khi cuộn */
    box-shadow: 0 4px 14px rgba(31, 78, 121, 0.06);
    font-size: 14px;
    table-layout: fixed;
}

.reward-shop-table th {
    background: linear-gradient(180deg, #eef4f9 0%, #e1edfa 100%);
    color: #1f4e79;
    font-weight: 800;
    padding: 11px 12px;
    /* Viền trên + dưới gắn vào chính header nên không mất khi cuộn (sticky) */
    border-top: 1px solid #d9eaf7;
    border-bottom: 2px solid #d9eaf7;
    text-align: center;
    /* Header cố định khi cuộn danh sách quà */
    position: sticky;
    top: 0;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(31, 78, 121, 0.12);
}

.reward-shop-table td {
    border-bottom: 1px solid #edf2f7;
    padding: 10px 12px;
    vertical-align: middle;
}

/* Độ rộng + canh lề 4 cột theo yêu cầu */
.reward-shop-table .rs-col-name {
    width: 45%;
    text-align: left;
}

.reward-shop-table .rs-col-detail {
    width: 15%;
    text-align: center;
}

.reward-shop-table .rs-col-status {
    width: 20%;
    text-align: center;
}

.reward-shop-table .rs-col-action {
    width: 20%;
    text-align: center;
}

/* Dòng tiêu đề mốc điểm (colspan=4): nền vàng nhạt, chữ to đậm tách bậc quà */
.reward-shop-milestone-row td {
    background: linear-gradient(90deg, #fff3d4 0%, #fffaf0 100%);
    color: #b45f06;
    font-weight: 800;
    font-size: 16px;
    text-align: left;
    padding: 10px 14px;
    border-bottom: 2px solid #f0d9a6;
}

/* Zebra cho các dòng quà (đếm riêng nên luôn xen kẽ sạch dù có dòng mốc chen vào) */
.reward-shop-row td {
    background: #ffffff;
}

.reward-shop-row-alt td {
    background: #f7faff;
}

.reward-shop-row:hover td {
    background: #eef4f9;
}

.reward-shop-table tr:last-child td {
    border-bottom: none;
}

/* Cột 1: tên + ghi chú nhỏ */
.reward-shop-row-name {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.reward-shop-row-name strong {
    color: #1f4e79;
    font-size: 15px;
}

.reward-shop-icon {
    font-size: 20px;
}

.reward-shop-row-note {
    margin-top: 3px;
    color: #7a8a99;
    font-size: 12.5px;
}

/* Cột 2: nút Chi tiết — cùng bề rộng & padding với nút "Đổi" (.rs-redeem-btn) để đồng bộ. */
.reward-shop-table .reward-detail-btn {
    width: auto;
    min-width: 124px;
    padding: var(--btn-pad-y) var(--btn-pad-x);
}

.rs-empty-cell {
    color: #c3cdd6;
}

/* Cột 3: trạng thái */
.rs-status-ok {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    background: #e2f3e5;
    color: #1e7e34;
    font-weight: 800;
}

.rs-progress-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.rs-progress-track {
    width: 100%;
    max-width: 140px;
    height: 8px;
    border-radius: 999px;
    background: #e6edf3;
    overflow: hidden;
}

.rs-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #9dc3e6, #70ad47);
    transition: width 0.4s ease;
}

.rs-status-missing {
    color: #6b7b8a;
    font-size: 12.5px;
    font-weight: 600;
}

/* Cột 4: nút Đổi / Chưa đủ điểm — RỘNG ĐẦY CỘT để nút enable ("Đổi") và disable
   ("Chưa đủ điểm") LUÔN CÙNG ĐỘ DÀI dù chữ dài ngắn khác nhau. Phân biệt trạng thái
   vẫn giữ ở MÀU NỀN + bóng (rule .btn-bonus / :disabled bên dưới). */
.rs-redeem-btn {
    width: 100%;
    box-sizing: border-box;
    min-width: 124px;
    padding: 8px 14px;
    border-radius: 10px;
    font-weight: 800;
}

.rs-redeem-btn.btn-bonus {
    box-shadow: 0 4px 0 #c98f00, 0 6px 12px rgba(240, 180, 0, 0.35);
}

.rs-redeem-btn.btn-bonus:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #c98f00;
}

.rs-redeem-btn:disabled {
    background: #d6dde3 !important;
    color: #8a97a3 !important;
    cursor: not-allowed;
    box-shadow: none;
}

/* ============================================================
   CỬA HÀNG ĐỔI THƯỞNG — DẠNG THẺ (3 thẻ / hàng, giống màn Cài đặt)
   Bỏ bảng + mốc điểm + trạng thái đủ/thiếu. Mỗi quà = 1 thẻ:
   ảnh (bấm xem to) → icon + tên → mức điểm → nút "Đổi thưởng".
   ============================================================ */
.reward-shop-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    align-items: stretch;
}

@media (max-width: 860px) {
    .reward-shop-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .reward-shop-cards {
        grid-template-columns: 1fr;
    }
}

.rs-card {
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #d9eaf7;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(31, 78, 121, 0.06);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* HEADER (trên cùng): tên + icon CĂN TRÁI | mức điểm CĂN PHẢI (sát góc trên-phải) */
.rs-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.rs-card-title {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    flex: 1 1 auto;
}

.rs-card-title .reward-shop-icon {
    flex: 0 0 auto;
    font-size: 20px;
}

.rs-card-title strong {
    color: #1f4e79;
    font-size: 15.5px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

/* Mức điểm: viên thuốc vàng nhạt, sát góc trên-phải thẻ */
.rs-card-point {
    flex: 0 0 auto;
    background: #fff3d4;
    color: #b45f06;
    font-weight: 800;
    font-size: 13px;
    padding: 4px 12px;
    border-radius: 999px;
    white-space: nowrap;
}

/* BODY (dưới): thumbnail (trái) + nút "Đổi thưởng" (phải, sát ĐÁY ảnh). Đẩy xuống đáy thẻ. */
.rs-card-body {
    margin-top: auto;
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

/* Ảnh thumbnail — THAY nút "Chi tiết"; bấm để xem ảnh to.
   Lấp đầy phần bên trái thẻ (vùng khoanh đỏ); nút "Đổi thưởng" ngắn nằm bên phải. */
.rs-card-media {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    height: 92px;
    border-radius: 10px;
    overflow: hidden;
    background: #f3f8fd;
    border: 1px solid #e3eef8;
    cursor: pointer;
}

.rs-card-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .18s ease;
}

.rs-card-media:hover .rs-card-thumb {
    transform: scale(1.04);
}

/* Không có ảnh → ô placeholder hiện icon (không bấm xem ảnh) */
.rs-card-media-empty {
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rs-card-media-icon {
    font-size: 40px;
    line-height: 1;
}

/* Vùng nút bên phải ảnh — co theo nút (không chiếm hết phần còn lại) */
.rs-card-action {
    flex: 0 0 auto;
}

/* Nút "Đổi thưởng": NGẮN (vừa chữ), bên phải ảnh, đáy nút thẳng đáy ảnh */
.rs-card .rs-redeem-btn {
    width: auto;
    min-width: 0;
    min-height: 40px;
    padding: 0 18px;
    white-space: nowrap;
}

.reward-shop-group {
    margin-bottom: 20px;
}

.reward-shop-group-title {
    font-size: 22px;
    font-weight: bold;
    color: #1f4e79;
    margin: 0 0 10px;
    padding-left: 4px;
}

.reward-shop-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.reward-shop-card {
    min-height: 150px;
    padding: 14px;
    border: 2px solid #d9eaf7;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(31, 78, 121, 0.12);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}

.reward-shop-card-main {
    min-height: 78px;
}

.reward-shop-name {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #1f4e79;
    font-size: 18px;
    line-height: 1.3;
}

.reward-shop-icon {
    font-size: 26px;
    flex: 0 0 30px;
    text-align: center;
}

.reward-shop-note {
    margin-top: 8px;
    color: #555;
    font-size: 14px;
    line-height: 1.45;
}

.reward-actions {
    margin-top: 12px;
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 8px;
    align-items: center;
}

.detail-placeholder {
    display: inline-block;
    width: 92px;
    min-height: 34px;
}

.reward-actions button {
    width: 100%;
    margin: 0;
}

.reward-actions button:disabled {
    background: #70ad47;
    cursor: default;
    opacity: 0.95;
}

.reward-missing {
    min-height: 34px;
    padding: 8px 10px;
    border-radius: 6px;
    background: #f4cccc;
    color: #990000;
    font-weight: bold;
    font-size: 13px;
    text-align: center;
    box-sizing: border-box;
    white-space: nowrap;
}

.reward-shop-empty {
    text-align: center;
    padding: 24px;
    border: 1px dashed #b7b7b7;
    border-radius: 10px;
    background: white;
    color: #666;
    font-weight: bold;
}

@media (max-width: 1100px) {
    .reward-shop-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .reward-shop-overview {
        grid-template-columns: 1fr;
    }

    .reward-shop-grid {
        grid-template-columns: 1fr;
    }

    .reward-actions {
        grid-template-columns: 88px 1fr;
    }

    .detail-placeholder {
        width: 88px;
    }
}

.reward-detail-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    box-sizing: border-box;
}

.reward-detail-box {
    position: relative;
    width: min(560px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
    text-align: center;
    box-sizing: border-box;
}

.reward-detail-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    font-size: 22px;
    line-height: 34px;
    background: #d9362d;
}

.reward-detail-header {
    margin-bottom: 14px;
    padding-right: 34px;
}

.reward-detail-title {
    font-size: 26px;
    font-weight: bold;
    color: #1f4e79;
}

.reward-detail-point {
    margin-top: 4px;
    font-weight: bold;
    color: #d9362d;
}

.reward-detail-image {
    width: 100%;
    max-width: 460px;
    height: auto;
    max-height: 420px;
    object-fit: contain !important;
    /* Giữ nguyên tỷ lệ, không bị méo/mờ */
    object-position: center;
    border-radius: 12px;
    margin: 15px auto 20px;
    display: block;
    box-shadow: 0 8px 25px rgba(31, 78, 121, 0.15);
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    transition: transform 0.25s ease;
}

.reward-detail-image:hover {
    transform: scale(1.03);
}

.reward-detail-note {
    margin: 14px 0;
    font-size: 16px;
    line-height: 1.5;
    color: #333;
    white-space: pre-wrap;
}

.reward-detail-btn {
    /* ĐỒNG BỘ với nút "Đổi" (.rs-redeem-btn.btn-bonus): nền vàng, chữ TRẮNG, in ĐẬM,
       bỏ viền xanh nhạt của .choice-btn, có BÓNG NỔI 3D giống nút "Đổi". */
    background: #f0b400;
    color: #fff;
    border: none;
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 4px 0 #c98f00, 0 6px 12px rgba(240, 180, 0, 0.35);
}

.reward-detail-btn:hover {
    background: #d99a00;
}

.reward-detail-btn:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #c98f00;
}

.reward-shop-admin-panel {
    /* Bỏ viền/box bao quanh để đồng bộ với "Cửa hàng đổi thưởng" (.reward-shop-body) */
    max-width: 1100px;
    margin: 0 auto;
    box-sizing: border-box;
}

.reward-shop-admin-title {
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    color: #1f4e79;
    margin-bottom: 12px;
}

/* [THẺ] Khu quản lý phần thưởng: mỗi quà = 1 thẻ, 2–3 thẻ / hàng (tự co theo bề rộng) */
.reward-shop-admin-body {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
    align-items: start;
}

.reward-shop-admin-card {
    padding: 14px;
    border: 1px solid #b7b7b7;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 3px 10px rgba(31, 78, 121, 0.1);
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Thẻ đang mở bảng icon → nâng lên trên để popup không bị thẻ kế bên đè */
.reward-shop-admin-card.icon-picking {
    z-index: 30;
}

/* Trong thẻ: Tên (full, hàng trên) → hàng dưới: Icon (nhỏ) | Điểm | Ảnh */
.reward-shop-admin-grid {
    display: block;
}

.reward-shop-admin-grid label {
    font-size: 13px;
    font-weight: bold;
    color: #1f4e79;
}

.reward-shop-admin-grid input[type="text"],
.reward-shop-admin-grid input[type="number"] {
    width: 100%;
    margin-top: 4px;
    padding: 7px 8px;
    border: 1px solid #999;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 16px;
}

/* Tên phần thưởng: 1 hàng riêng phía trên */
.reward-shop-admin-name {
    display: block;
}

/* Hàng dưới: Icon (nhỏ) | Điểm | Ảnh(to) — cùng hàng; stretch để ảnh cao bằng cả cột */
.reward-shop-admin-row2 {
    margin-top: 10px;
    display: flex;
    align-items: stretch;
    gap: 10px;
}

/* Ô Điểm: chiếm phần giữa còn lại */
.reward-shop-diem-field {
    flex: 1 1 auto;
    min-width: 60px;
    display: flex;
    flex-direction: column;
}

.reward-shop-diem-field input {
    height: 40px;
}

/* ===== Trường Icon: nút icon NHỎ (≈ 1/2 cũ) + bảng chọn emoji ===== */
.reward-shop-icon-field {
    display: flex;
    flex-direction: column;
    position: relative; /* mỏ neo cho popup nổi đè */
    flex: 0 0 auto;
}

/* Nút hiện icon hiện tại (thay ô gõ tay) — nhỏ gọn ~44x40, đồng cao với ô Điểm & ảnh.
   margin: 4px 0 0 0 để HUỶ margin:3px của button CHUNG (gây lệch cao hơn ô Điểm/Ảnh). */
.reward-shop-icon-btn {
    width: 44px;
    height: 40px;
    min-height: 40px;
    margin: 4px 0 0 0;
    padding: 0;
    border: 1px solid #999;
    border-radius: 6px;
    box-sizing: border-box;
    background: #ffffff;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    text-align: center;
}

.reward-shop-icon-btn:hover {
    background: #ffffff; /* giữ nền trắng (button chung đổi sang xanh khi hover) */
    border-color: #1f4e79;
    box-shadow: 0 0 0 3px rgba(31, 78, 121, 0.12);
}

/* Bảng chọn icon: POPUP NỔI ĐÈ lên thẻ (không đẩy/vỡ form), neo ngay dưới nút icon */
.reward-shop-icon-pop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 40;
    width: 248px;
    max-width: calc(100vw - 48px);
    max-height: 220px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid #cdd8e6;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(31, 78, 121, 0.25);
}

/* Lật mở LÊN TRÊN khi dưới không đủ chỗ (thẻ gần đáy vùng cuộn) */
.reward-shop-icon-pop--up {
    top: auto;
    bottom: calc(100% + 6px);
}

.reward-shop-icon-pop[hidden] {
    display: none;
}

.reward-shop-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 6px;
}

.reward-shop-icon-choice {
    min-height: 40px;
    padding: 4px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
}

.reward-shop-icon-choice:hover {
    border-color: #7aa6d6;
    background: #eaf2fb;
}

.reward-shop-icon-choice.is-selected {
    border-color: #1f7a3d;
    background: #e7f6ec;
    box-shadow: 0 0 0 2px rgba(31, 122, 61, 0.25);
}

/* Input file ẨN HOÀN TOÀN — bấm "📷" hoặc bấm vào ảnh để mở hộp chọn file */
.reward-shop-file-input {
    display: none !important;
}

/* ===== Ô ảnh: CHỈ thumbnail (bỏ chữ "Ảnh"), bên phải ô Điểm, to bằng cả cột ===== */
.reward-shop-image-cell {
    display: flex;
    flex: 0 0 auto;
    align-items: stretch;
}

.reward-shop-image-box {
    position: relative;
    width: 84px;
    align-self: stretch; /* cao bằng cả cột (caption + ô nhập) → thumbnail to như khung đỏ */
    overflow: hidden; /* bo góc ảnh; dấu X nằm BÊN TRONG nên không bị cắt */
    box-sizing: border-box;
    border: 1px solid #b7b7b7;
    border-radius: 8px;
    background: #f8fbff;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ảnh đặt ABSOLUTE lấp đầy khung → KHÔNG để chiều cao ảnh thật đẩy hàng cao lệch nhau */
.reward-shop-admin-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer; /* bấm vào ảnh để đổi ảnh */
}

/* Nút "📷" khi CHƯA có ảnh — lấp đầy ô 60x40 (huỷ margin/min-height của button chung) */
.reward-shop-choose-btn {
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: 1px dashed #7aa6d6;
    border-radius: 8px;
    background: #eaf2fb;
    color: #1f4e79;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.reward-shop-choose-btn:hover {
    background: #dceafa;
}

/* Nút "✕": CHỈ là dấu X (KHÔNG nền/viền/bo tròn), đè lên góc trên-phải thumbnail.
   Huỷ min-height:40 + margin:3px của button CHUNG để không bị kéo dài thành bầu dục.
   CHỈ hiện khi rê chuột/focus. */
.reward-shop-image-remove {
    position: absolute;
    top: 1px;
    right: 2px;
    width: 16px;
    height: 16px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent; /* KHÔNG nền — chỉ thấy dấu X */
    color: #000000;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0; /* ẩn khi không rê chuột */
    outline: none; /* bỏ viền xanh khi focus */
    box-shadow: none;
    text-shadow: 0 0 2px #ffffff, 0 0 3px #ffffff; /* X đen vẫn rõ trên ảnh */
    transition: opacity .12s ease;
}

/* Huỷ hover của button chung (đổi nền xanh + nhấc lên) cho dấu X */
.reward-shop-image-remove:hover:not(:disabled) {
    background: transparent;
    transform: none;
}

.reward-shop-image-remove:focus,
.reward-shop-image-remove:focus-visible {
    outline: none;
    box-shadow: none;
}

/* Hiện X khi rê chuột vào ô ảnh, hoặc khi focus vào chính nút X */
.reward-shop-image-box:hover .reward-shop-image-remove,
.reward-shop-image-remove:focus,
.reward-shop-image-remove:focus-visible {
    opacity: 1;
}

/* Trạng thái "⏳" khi đang tải ảnh — lấp đầy ô, thẻ không bị nhảy */
.reward-shop-image-box .reward-shop-no-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border-radius: 7px;
}

.reward-shop-no-image {
    color: #777;
    font-size: 13px;
    font-weight: bold;
}

.reward-shop-admin-checks {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.reward-shop-admin-checks label {
    font-size: 14px;
    font-weight: bold;
    color: #333;
}

.reward-shop-admin-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.reward-shop-add-btn {
    background: #2f7d32;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 7px 12px;
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
}

.reward-shop-add-btn:hover {
    background: #266b29;
}

.reward-shop-delete-btn {
    background: #d9362d;
}

.reward-shop-delete-btn:hover {
    background: #990000;
}

.reward-shop-admin-empty {
    grid-column: 1 / -1;
    padding: 18px;
    border: 1px dashed #b7b7b7;
    border-radius: 10px;
    text-align: center;
    background: #ffffff;
    color: #666;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Màn hẹp: 1 thẻ / hàng */
@media (max-width: 720px) {
    .reward-shop-admin-body {
        grid-template-columns: 1fr;
    }
}

.reward-shop-status {
    margin-top: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
}

.reward-status-enough {
    background: #d9ead3;
    color: #274e13;
}

.reward-status-missing {
    background: #fff2cc;
    color: #7f6000;
}

.reward-shop-toolbar {
    max-width: 1100px;
    margin: 0 auto 18px;
    display: grid;
    grid-template-columns: 1fr 180px 220px;
    gap: 10px;
}

.reward-shop-toolbar input,
.reward-shop-toolbar select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #999;
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 14px;
}

@media (max-width: 800px) {
    .reward-shop-toolbar {
        grid-template-columns: 1fr;
    }
}

.reward-detail-modal.hidden-section {
    display: none !important;
}

/* ===== Hộp thoại xác nhận dùng chung ===== */
.confirm-dialog-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    box-sizing: border-box;
}

.confirm-dialog-modal.hidden-section {
    display: none !important;
}

.confirm-dialog-box {
    width: min(420px, 100%);
    background: #ffffff;
    border-radius: 14px;
    padding: 22px 22px 18px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    text-align: center;
}

.confirm-dialog-title {
    font-size: 22px;
    font-weight: bold;
    color: #1f4e79;
    margin-bottom: 10px;
}

.confirm-dialog-message {
    font-size: 16px;
    color: #1f2d3d;
    margin-bottom: 20px;
    line-height: 1.4;
}

.confirm-dialog-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.confirm-dialog-btn {
    min-width: 96px;
    height: 42px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}

.confirm-dialog-ok {
    background: #2f75b5;
    color: #ffffff;
}

.confirm-dialog-cancel {
    background: #e8eef4;
    color: #1f2d3d;
}

.reward-shop-section {
    /* Lấp đúng vùng nội dung (.content-section đã cao cố định), KHÔNG tự cuộn;
       chỉ phần danh sách bên trong (.reward-shop-tab-panel) mới cuộn. Dùng 100%
       thay vì 100vh để không bị cuộn đôi với vùng nội dung bên ngoài. */
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
}

.reward-exchange-history-box {
    /* Bỏ viền/box bao quanh để đồng bộ với "Cửa hàng đổi thưởng" (.reward-shop-body) */
    max-width: 1100px;
    /* Khoảng cách trên do .reward-shop-tab-panel đảm nhiệm (xem ghi chú ở đó) */
    margin: 0 auto;
    box-sizing: border-box;
}

.reward-exchange-history-title {
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    color: #1f4e79;
    margin-bottom: 12px;
}

/* Đồng bộ kiểu bảng "Lịch sử đổi thưởng" giống bảng "Cửa hàng" (.reward-shop-table) */
.reward-exchange-history-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    background: #ffffff;
    border: 1px solid #d9eaf7;
    /* Viền trên do thead th đảm nhiệm (giữ nguyên khi header sticky). Bỏ
       border-radius để khi cuộn không bị hở góc lộ dữ liệu phía dưới. */
    border-top: 0;
    /* Không dùng overflow:hidden để header dính (sticky) hoạt động khi cuộn */
    box-shadow: 0 4px 14px rgba(31, 78, 121, 0.06);
}

.reward-exchange-history-table th {
    background: linear-gradient(180deg, #eef4f9 0%, #e1edfa 100%);
    color: #1f4e79;
    font-weight: 800;
    /* Viền trên gắn vào chính header nên không mất khi cuộn (sticky) */
    border-top: 1px solid #d9eaf7;
    border-bottom: 2px solid #d9eaf7;
    /* Header cố định khi cuộn lịch sử */
    position: sticky;
    top: 0;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(31, 78, 121, 0.12);
}

.reward-exchange-history-table th,
.reward-exchange-history-table td {
    padding: 10px 12px;
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid #edf2f7;
}

/* Giữ viền dưới 2px của header (ghi đè rule gộp th,td phía trên) */
.reward-exchange-history-table thead th {
    border-bottom: 2px solid #d9eaf7;
}

/* Zebra giống bảng cửa hàng */
.reward-exchange-history-table tbody tr:nth-child(even) td {
    background: #f7faff;
}

.reward-exchange-history-table tbody tr:last-child td {
    border-bottom: none;
}

/* Mọi ô căn giữa hoàn toàn (kể cả cột tên phần thưởng), chỉ giữ in đậm */
.reward-exchange-history-table td:nth-child(2) {
    text-align: center;
    font-weight: bold;
}

.reward-exchange-note-input {
    width: 100%;
    padding: 7px 8px;
    border: 1px solid #999;
    border-radius: 6px;
    box-sizing: border-box;
    text-align: center;
}

@media (max-width: 800px) {
    .reward-exchange-history-box {
        overflow-x: auto;
    }

    .reward-exchange-history-table {
        min-width: 760px;
    }
}

/* ===== LUCKY INVENTORY BOX ===== */
.lucky-spin-status-box {
    width: 100%;
    max-width: 520px;
    box-sizing: border-box;
    background: #fff7e6;
    border: 2px solid #f0a30a;
    /* Viền cam nổi bật, phân biệt với Kho phần thưởng */
    border-radius: 12px;
    padding: 12px 18px;
    margin-bottom: 14px;
    text-align: center;
}

.lucky-spin-status-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 18px;
    font-weight: bold;
    color: #7a4a00;
}

.lucky-spin-status-count {
    font-size: 24px;
    color: #c0392b;
}

.lucky-spin-status-note {
    margin-top: 6px;
    font-size: 14px;
    color: #5a4a2a;
    line-height: 1.4;
}

.lucky-inventory-box {
    width: 100%;
    max-width: 520px;
    box-sizing: border-box;
    background: #fff;
    border: 2px solid #70ad47;
    /* Viền xanh lá cây nổi bật */
    border-radius: 12px;
    padding: 14px 18px;
    font-size: 16px;
    text-align: center;
}

.lucky-inventory-box h3 {
    margin: 0 0 10px;
    color: #274e13;
    font-size: 22px;
}

.inventory-stats {
    display: flex;
    justify-content: space-around;
    margin-bottom: 15px;
    font-weight: bold;
}

.stat-item {
    background: #e2efda;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #a9d18e;
    color: #385723;
}

.inventory-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.inventory-select {
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #999;
    font-size: 14px;
    flex: 1;
}

.inventory-btn {
    background: #70ad47;
    padding: 9px 15px;
    margin: 0;
    white-space: nowrap;
}

.inventory-btn:hover {
    background: #548235;
}

@media (max-width: 600px) {
    .inventory-stats {
        flex-direction: column;
        gap: 8px;
    }

    .inventory-actions {
        flex-direction: column;
    }

    .inventory-select,
    .inventory-btn {
        width: 100%;
    }
}

/* ===== EFFECT CHÚC MỪNG ĐIỂM TUYỆT ĐỐI ===== */
.celebration-box {
    border: 3px solid #ffd966;
    animation: celebrationPopupPop 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: linear-gradient(135deg, #fffdf0 0%, #ffffff 100%) !important;
}

.celebration-trophy {
    font-size: 75px;
    margin-bottom: 5px;
    animation: celebrationTrophyBounce 1.2s ease infinite;
}

.celebration-title {
    font-size: 32px !important;
    font-weight: bold;
    margin: 5px 0 15px !important;
    background: linear-gradient(90deg, #ff0000, #ff9900, #33cc33, #00ccff, #7030a0);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: correctStreakRainbow 2s linear infinite;
}

.celebration-message {
    font-size: 16px;
    font-weight: 500;
    color: #1f4e79;
    line-height: 1.6;
    margin-bottom: 20px;
}

@keyframes celebrationPopupPop {
    0% {
        transform: scale(0.6);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes celebrationTrophyBounce {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-12px) scale(1.05);
    }
}

/* ===== CSS CHO 3 COMBOBOX KHO PHẦN THƯỞNG ===== */
.inventory-action-group {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #a9d18e;
    text-align: left;
}

.inventory-action-group:first-of-type {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

.inventory-action-title {
    font-size: 14px;
    font-weight: bold;
    color: #274e13;
    margin-bottom: 6px;
}

.inventory-action-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* 🔥 ĐỒNG BỘ ĐỘ DÀI BẰNG NHAU CHO 3 NÚT BẤM */
.inventory-action-row .inventory-btn {
    width: 100px;
    /* Ép cả 3 nút cố định độ rộng 100px bằng chằn chặn */
    text-align: center;
    /* Căn chữ ra chính giữa nút */
    padding-left: 0;
    /* Khử padding ngang để chữ không bị kích */
    padding-right: 0;
    flex-shrink: 0;
    /* Ngăn không cho nút bị bóp méo chữ */
}

/* Đổi màu riêng biệt cho từng nút để phụ huynh không bấm nhầm */
.btn-use {
    background: #e69138;
}

.btn-use:hover {
    background: #ce7e2b;
}

.btn-points {
    background: #f1c232;
    color: #7f6000;
}

.btn-points:hover {
    background: #d9aa00;
    color: #fff;
}

.btn-tickets {
    background: #e06666;
}

.btn-tickets:hover {
    background: #cc0000;
}

@media (max-width: 600px) {
    .inventory-action-row {
        flex-direction: column;
    }

    /* Khi xem trên điện thoại nhỏ, tự động giãn đều 100% theo chiều dọc */
    .inventory-action-row .inventory-select,
    .inventory-action-row .inventory-btn {
        width: 100%;
    }
}

/* ===== CSS CHO NÚT DÙNG VÉ SHOPEE ===== */
.ticket-stat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 6px;
}

.btn-use-ticket {
    padding: 4px 10px;
    font-size: 13px;
    min-width: auto;
    height: auto;
    background: #e06666;
    border-radius: 6px;
}

.btn-use-ticket:hover {
    background: #cc0000;
}

/* ===== HIỆU ỨNG XEN KẼ DÒNG (ZEBRA STRIPING) CHO BẢNG CÂU HỎI ===== */
.exam-table tbody tr:nth-child(odd) td {
    background-color: #ffffff;
    /* Dòng lẻ màu trắng tinh khôi */
}

.exam-table tbody tr:nth-child(even) td {
    background-color: #f7faff;
    /* Dòng chẵn màu xanh nước biển siêu nhạt giúp mắt bám dòng chuẩn xác */
}

/* Đảm bảo ô nhập đáp án tự luận vẫn giữ màu nền ngà vàng đặc trưng không bị đè màu */
.exam-table tbody tr:nth-child(even) td.col-answer {
    background-color: #fffdf4;
}


/* ===== ĐỔI MÀU RIÊNG BIỆT CHO 2 NÚT THAO TÁC TRÊN TOP BAR ===== */
/* Nút tạo đề giữ tông xanh dương nhạt ổn định */
.btn-start-exam {
    background: #2f75b5;
}

.btn-start-exam:hover {
    background: #1f4e79;
}

/* Nút Hoàn thành chuyển hẳn sang màu XANH LÁ CÂY nổi bật kích thích hành động nộp bài */
.btn-finish-exam {
    background: #70ad47;
}

.btn-finish-exam:hover {
    background: #548235;
}

/* ===== FIX KHOẢNG TRỐNG NÚT BẤM TRÊN MOBILE ===== */
@media (max-width: 900px) {

    /* Đổi từ ẩn tàng hình (vẫn chiếm chỗ) sang biến mất hoàn toàn để thu gọn khoảng trống */
    .hidden-keep-space {
        display: none !important;
    }

    /* Bỏ luôn margin thừa của cột bên phải chứa nút ẩn */
    .exam-header-right {
        margin-bottom: 0 !important;
    }
}

/* =========================================================
   🚀 BẢN CẬP NHẬT GIAO DIỆN "EDTECH KIDS" HOÀNH TRÁNG 🚀
   ========================================================= */

/* 1. BỒNG BỀNH & BO GÓC SÂU (KIDS UI) */
.app {
    border-radius: 24px !important;
    box-shadow: 0 16px 40px rgba(31, 78, 121, 0.12) !important;
}

.side-menu {
    border-radius: 20px !important;
    box-shadow: 0 8px 24px rgba(31, 78, 121, 0.05) !important;
    border: 2px solid #eef4f9;
}

.menu-link {
    border-radius: 16px !important;
    font-size: 15px !important;
    padding: 10px 16px !important;
    margin-bottom: 8px !important;
}

/* 2. HEADER ĐIỀU HƯỚNG HIỆN ĐẠI (FLEXBOX) */
.modern-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Bỏ khung: header thành thanh công cụ gọn (trạng thái trái, nút phải), đẩy sát lên trên */
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin-bottom: 12px;
}

.exam-header-left {
    text-align: left !important;
    width: auto !important;
}

.exam-header-right {
    display: flex;
    gap: 12px;
    align-items: center;
    width: auto !important;
    justify-content: flex-end;
}

.hello-text {
    font-size: 32px !important;
}

.today-score-message {
    text-align: left !important;
    margin-top: 8px !important;
    font-size: 16px !important;
}

/* 3. NÚT BẤM 3D GAME (GAMIFICATION) */
.exam-btn {
    border-radius: 18px !important;
    height: 52px !important;
    font-size: 16px !important;
    border: none !important;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-start-exam {
    background: #2f75b5 !important;
    box-shadow: 0 6px 0 #1f4e79, 0 8px 16px rgba(47, 117, 181, 0.3) !important;
}

.btn-finish-exam {
    background: #70ad47 !important;
    box-shadow: 0 6px 0 #548235, 0 8px 16px rgba(112, 173, 71, 0.3) !important;
}

.btn-start-exam:hover {
    background: #3a8cd7 !important;
    transform: translateY(2px);
    box-shadow: 0 4px 0 #1f4e79 !important;
}

.btn-finish-exam:hover {
    background: #82c554 !important;
    transform: translateY(2px);
    box-shadow: 0 4px 0 #548235 !important;
}

/* Hiệu ứng lún nút xuống khi click/chạm */
.btn-start-exam:active,
.btn-finish-exam:active {
    transform: translateY(6px) !important;
    box-shadow: 0 0px 0 transparent !important;
}

/* 4. BẢNG CÂU HỎI THOÁNG ĐÃNG (MODERN TABLE) */
.exam-table {
    border-radius: 20px !important;
    border: 2px solid #d9eaf7 !important;
    box-shadow: 0 8px 24px rgba(31, 78, 121, 0.05) !important;
}

.exam-table th {
    background: #eef4f9 !important;
    font-size: 15px !important;
    padding: 16px 12px !important;
    border-bottom: 2px solid #d9eaf7 !important;
}

.exam-table td {
    padding: 16px 10px !important;
    /* Tăng không gian thở lên gấp rưỡi */
    font-size: 16px !important;
    border-bottom: 1px solid #edf2f7 !important;
}

/* 5. GIAO DIỆN MOBILE - STICKY BOTTOM BUTTONS CHUYÊN NGHIỆP */
@media (max-width: 900px) {
    .modern-header {
        flex-direction: column;
        padding: 16px;
        border-radius: 16px;
    }

    .exam-header-left {
        text-align: center !important;
        margin-bottom: 8px !important;
    }

    .today-score-message {
        text-align: center !important;
    }

    /* Đưa cụm 2 nút thao tác ghim dính chặt xuống đáy màn hình như App thật */
    .exam-header-right {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        padding: 16px 12px 24px 12px !important;
        /* Lót thêm ở dưới phòng cấn viền iPhone */
        box-shadow: 0 -4px 24px rgba(31, 78, 121, 0.15) !important;
        z-index: 999 !important;
        box-sizing: border-box !important;
        border-radius: 24px 24px 0 0 !important;
        justify-content: center !important;
    }

    /* Đẩy khung làm bài lên một chút để không bị cụm nút đè lên câu cuối cùng */
    .exam-table {
        margin-bottom: 110px !important;
    }
}

/* =========================================================
   🚀 BẢN VÁ: THU GỌN BẢNG 15 CÂU & LÀM ĐẸP NÚT ADMIN 🚀
   ========================================================= */

/* 1. LÀM ĐẸP 2 NÚT ADMIN (ĐÁP ÁN & FINISH) CHUẨN 3D */
#answerAdminButton {
    background: #f0b400 !important;
    /* Màu Vàng Cam nổi bật */
    box-shadow: 0 6px 0 #bf9000, 0 8px 16px rgba(240, 180, 0, 0.3) !important;
}

#answerAdminButton:hover {
    background: #ffcc33 !important;
    transform: translateY(2px);
    box-shadow: 0 4px 0 #bf9000 !important;
}

#answerAdminButton:active {
    transform: translateY(6px) !important;
    box-shadow: 0 0px 0 transparent !important;
}

#finishAdminButton {
    background: #9e9e9e !important;
    /* Màu Xám trung tính để phân biệt với nút học sinh */
    box-shadow: 0 6px 0 #777777, 0 8px 16px rgba(158, 158, 158, 0.3) !important;
}

#finishAdminButton:hover {
    background: #b0b0b0 !important;
    transform: translateY(2px);
    box-shadow: 0 4px 0 #777777 !important;
}

#finishAdminButton:active {
    transform: translateY(6px) !important;
    box-shadow: 0 0px 0 transparent !important;
}

/* 2. ÉP MỎNG KÍCH THƯỚC ĐỂ VỪA 15 CÂU TRÊN 1 MÀN HÌNH PC */
.modern-header {
    padding: 10px 20px !important;
    /* Giảm độ cao thẻ Header */
    margin-bottom: 12px !important;
    /* Kéo bảng lại gần Header hơn */
}

.hello-text {
    font-size: 24px !important;
    /* Thu nhỏ chữ Xin chào một xíu */
}

.exam-table th {
    padding: 8px 4px !important;
    /* Ép mỏng độ cao thanh tiêu đề bảng */
    font-size: 14px !important;
}

.exam-table td {
    padding: 4px 6px !important;
    /* 🔥 QUAN TRỌNG: Ép mỏng tối đa chiều cao mỗi dòng */
    font-size: 14px !important;
    /* Giảm font chữ để cân đối với dòng mỏng */
}

/* 3. THU GỌN THÀNH PHẦN BÊN TRONG BẢNG */
.choice-btn {
    padding: 3px 6px !important;
    /* Ép mỏng nút A B C D */
    font-size: 13px !important;
    line-height: 1.2 !important;
}

.answer-input {
    height: 26px !important;
    /* Giới hạn cứng chiều cao ô nhập text */
    padding: 2px 4px !important;
}

/* =========================================================
   🚀 BẢN VÁ HOÀN HẢO 100%: FIX TRÀN MÀN HÌNH & GỌN BẢNG 🚀
   ========================================================= */

/* --- 1. LỆNH MA THUẬT GRID: Ngăn bảng đẩy giao diện ra khỏi màn hình --- */
.content-area {
    min-width: 0 !important;
}

.modern-header {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* --- 2. MỞ KHÓA BỐ CỤC HEADER --- */
@media (min-width: 901px) {
    .modern-header {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        align-items: center !important;
    }

    .exam-header-left {
        width: auto !important;
        flex: 1 1 300px !important;
    }

    .exam-header-right {
        width: auto !important;
        flex: 0 0 auto !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        justify-content: flex-end !important;
    }

    .exam-header-right .exam-btn,
    #answerAdminButton,
    #finishAdminButton {
        width: auto !important;
        min-width: 110px !important;
        padding: 0 16px !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }
}

/* --- 3. ÉP BẢNG THON GỌN THEO CHIỀU DỌC VÀ NGANG --- */
.modern-header {
    /* Không khung nên bỏ luôn padding để text/nút canh thẳng mép với các thẻ bên dưới */
    padding: 0 !important;
    margin-bottom: 12px !important;
}

.exam-table {
    margin-bottom: 0 !important;
    table-layout: auto !important;
    /* Mở khóa co giãn ngang */
}

.exam-table th,
.exam-table td {
    padding: 3px 6px !important;
    font-size: 13.5px !important;
    line-height: 1.3 !important;
}

/* Gỡ bỏ các chiều rộng cố định cồng kềnh cũ gây tràn màn hình */
@media (min-width: 901px) {
    .col-choice {
        width: auto !important;
        min-width: 70px !important;
    }

    .col-correct {
        width: auto !important;
        min-width: 80px !important;
    }

    .col-result {
        width: 60px !important;
    }

    .col-answer {
        width: 85px !important;
    }

    .col-no {
        width: 45px !important;
    }

    .col-question {
        width: 33% !important;
    }
}

.choice-btn {
    padding: 2px 4px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
}

.answer-input {
    height: 24px !important;
    font-size: 14px !important;
    padding: 2px 4px !important;
}

h1 {
    margin: 0 0 6px !important;
    font-size: 32px !important;
}

.top-bar {
    padding: 6px 12px !important;
}

/* =========================================================
   🚀 TỐI ƯU TRẢI NGHIỆM: CHỐNG XÔ LỆCH & PHÂN NHÓM NÚT 🚀
   ========================================================= */

@media (min-width: 901px) {

    /* --- 1. CHỐNG GIẬT BẢNG (VERTICAL SHIFT) --- */
    /* Bắt buộc giữ lại không gian kể cả khi chưa có lời khen chuỗi đúng */
    .correct-streak-message:empty {
        display: block !important;
        /* Thẻ này đã được cài sẵn min-height: 42px ở trên, nên nó sẽ tàng hình nhưng vẫn chống cột tuyệt đối */
    }

    /* --- 2. PHÂN NHÓM NÚT BẤM (HỌC SINH vs ADMIN) --- */
    /* Tách nhóm Admin xích sang phải một khoảng 24px để tạo vùng an toàn */
    #answerAdminButton {
        margin-left: 24px !important;
        position: relative;
    }

    /* Vẽ một vạch kẻ dọc mờ ảo để ngăn cách 2 khu vực */
    #answerAdminButton::before {
        content: "";
        position: absolute;
        left: -17px;
        /* Đặt vạch nằm giữa khoảng trống */
        top: 15%;
        /* Căn lùi xuống một chút so với mép nút */
        height: 70%;
        /* Vạch kẻ cao bằng 70% nút */
        width: 2px;
        /* Độ dày của vạch */
        background-color: #c9dfec;
        /* Màu xanh nước biển siêu nhạt */
        border-radius: 2px;
    }
}

/* ===== CĂN GIỮA NÚT "CON CẢM ƠN" TRONG POPUP CHÚC MỪNG ===== */
.celebration-box .exam-btn {
    margin: 10px auto 0 !important;
    /* Dùng margin auto 2 bên để căn giữa tuyệt đối phần tử Flexbox */
}

/* =========================================================
   🚀 TỐI ƯU UX MOBILE: PHÂN TÁCH NÚT BẤM THÔNG MINH 🚀
   ========================================================= */

@media (max-width: 900px) {

    /* 1. TRẢ CỤM NÚT VỀ VỊ TRÍ TỰ NHIÊN ĐẦU TRANG */
    .exam-header-right {
        position: static !important;
        width: 100% !important;
        background: transparent !important;
        padding: 0 !important;
        box-shadow: none !important;
        justify-content: center !important;
        margin-top: 12px !important;
        display: flex !important;
        flex-wrap: wrap !important;
    }

    /* 2. NÚT "TẠO ĐỀ MỚI" Ở ĐẦU TRANG */
    /* Nằm ngoan ngoãn dưới dòng chữ Xin chào, dễ thấy ngay khi mở app */
    .btn-start-exam {
        position: static !important;
        width: 100% !important;
        max-width: 300px !important;
        margin: 0 auto !important;
    }

    /* 3. NÚT "NỘP BÀI" BIẾN THÀNH NÚT NỔI (FAB) Ở GÓC DƯỚI */
    /* Luôn ghim ở góc phải dưới, vuốt 15 câu xong là ngón cái chạm được luôn */
    .btn-finish-exam {
        position: fixed !important;
        bottom: 24px !important;
        right: 16px !important;
        width: auto !important;
        height: 56px !important;
        padding: 0 24px !important;
        border-radius: 28px !important;
        /* Bo tròn dạng viên thuốc */
        box-shadow: 0 8px 24px rgba(112, 173, 71, 0.4) !important;
        z-index: 9999 !important;
        border: 2px solid white !important;
        /* Viền trắng xịn sò tách biệt với chữ bài toán */
        margin: 0 !important;
    }

    /* 4. XỬ LÝ 2 NÚT ADMIN CŨNG NỔI LÊN GỌN GÀNG (NẾU ĐĂNG NHẬP) */
    #finishAdminButton {
        position: fixed !important;
        bottom: 24px !important;
        right: 150px !important;
        /* Nép sang trái nhường chỗ cho Nộp bài */
        z-index: 9999 !important;
        border-radius: 28px !important;
        border: 2px solid white !important;
        margin: 0 !important;
    }

    #answerAdminButton {
        position: fixed !important;
        bottom: 90px !important;
        /* Nổi lên trên 1 tầng */
        right: 16px !important;
        z-index: 9999 !important;
        border-radius: 28px !important;
        border: 2px solid white !important;
        margin: 0 !important;
    }

    /* 5. ĐỘN KHOẢNG TRỐNG ĐÁY BẢNG (CHỐNG CHE KHUẤT) */
    /* Khi cuộn kịch sàn, câu 15 sẽ được đẩy lên cao, không bị nút Nộp bài che mất đáp án */
    .exam-table {
        margin-bottom: 90px !important;
    }
}

/* ===== BẢN VÁ UX MOBILE: PHÁ BẪY KÍNH MỜ GIẢI CỨU NÚT NỘP BÀI ===== */
@media (max-width: 900px) {
    .exam-header-right {
        /* Phá vỡ cái lồng vô hình, cho phép nút con bên trong được bay ra ngoài màn hình */
        backdrop-filter: none !important;
        transform: none !important;
    }
}

/* ===== BẢN VÁ: ĐỒNG BỘ KÍCH THƯỚC VÀ CĂN GIỮA NÚT TRÊN MOBILE ===== */
@media (max-width: 900px) {

    /* 1. Nút Tạo đề mới */
    .btn-start-exam {
        width: 220px !important;
        /* Cố định chiều ngang */
        border-radius: 28px !important;
        /* Bo góc hình viên thuốc cho giống nút Nộp bài */
        margin: 0 auto !important;
        /* Căn giữa màn hình */
    }

    /* 2. Nút Nộp bài */
    .btn-finish-exam {
        width: 220px !important;
        /* Kích thước bằng đúng nút Tạo đề */
        padding: 0 !important;
        /* Hủy padding để chữ tự động ra giữa */
        right: auto !important;
        /* Hủy ghim góc phải */
        left: 50% !important;
        /* Ghim ra giữa màn hình */
        transform: translateX(-50%) !important;
        /* Căn giữa tuyệt đối */
        justify-content: center !important;
    }

    /* 3. Nắn luôn 2 nút Admin (nếu có bật) để không bị lệch đội hình */
    #finishAdminButton {
        width: 220px !important;
        right: auto !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        bottom: 90px !important;
        /* Nổi lên trên nút Nộp bài 1 tầng */
        padding: 0 !important;
    }

    #answerAdminButton {
        width: 220px !important;
        right: auto !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        bottom: 156px !important;
        /* Nổi lên trên tiếp 1 tầng */
        padding: 0 !important;
    }
}

/* ===== ẨN CỤM NÚT LÀM BÀI TRÊN CÁC MÀN HÌNH KHÁC =====
   Trước đây class này ẩn cả cụm 4 nút. Bây giờ chỉ ẩn 3 nút (Tạo đề mới / Nộp bài / Đáp án)
   và GIỮ nguyên nút Finish (admin) để admin vẫn có thể "Finish" từ màn hình khác.
   Vị trí, màu sắc & logic của nút Finish không đổi vì nó vẫn nằm ở cùng vị trí cũ trong
   `.exam-header-right` (text-align:right) và chỉ chịu thêm class `hidden-keep-space` khi
   chưa unlock admin. */
.exam-header-right.hide-exam-buttons>.exam-btn:not(#finishAdminButton) {
    display: none !important;
}

/* =========================================================
   🚀 BẢN VÁ: CÂN BẰNG 4 NÚT & LÀM ĐẸP VÙNG CÀI ĐẶT 🚀
   ========================================================= */

/* --- 1. ĐỒNG BỘ CHIỀU DÀI 4 NÚT TRÊN PC --- */
@media (min-width: 901px) {

    .exam-header-right .exam-btn,
    #answerAdminButton,
    #finishAdminButton {
        width: 145px !important;
        /* Cố định độ rộng để 4 nút bằng nhau chằn chặn */
        min-width: 145px !important;
        padding: 0 !important;
        /* Bỏ padding để text tự căn giữa */
    }
}

/* --- 2. LÀM ĐẸP VÀ PHÂN BỔ LẠI VÙNG CÀI ĐẶT ADMIN --- */
.admin-buttons-row:not(.hidden-admin-row) {
    display: flex !important;
    gap: 16px;
    align-items: stretch;
    justify-content: space-between;
    margin-top: 12px;
    margin-bottom: 8px;
}

.admin-bonus-spin-row:not(.hidden-admin-row) {
    display: flex !important;
    width: 100%;
}

/* Các hộp chứa nhóm tính năng */
.settings-group-box {
    background: #ffffff;
    border: 1px solid #d9eaf7;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(31, 78, 121, 0.05);
    flex: 1;
    box-sizing: border-box;
}

/* Box "Lịch trình Khu Vườn Sinh Thái" đứng trên box loại hoa → tách khoảng cho rõ */
.garden-schedule-box {
    margin-bottom: 14px;
}

/* Tiêu đề của từng nhóm */
.settings-group-title {
    font-size: 15px;
    font-weight: bold;
    color: #1f4e79;
    margin-bottom: 14px;
    text-align: center;
    border-bottom: 1px dashed #d9eaf7;
    padding-bottom: 8px;
}

/* Hàng chứa các nút bấm */
.settings-btn-row {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Định dạng chuẩn cho mọi nút trong cài đặt */
.settings-btn {
    flex: 1;
    min-width: 110px;
    margin: 0 !important;
    padding: var(--btn-pad-y) var(--btn-pad-x) !important;
    font-size: var(--btn-font) !important;
    border-radius: var(--btn-radius) !important;
    white-space: nowrap;
}

/* Phân loại màu sắc để không bấm nhầm */
.btn-outline {
    background: #f8fbff !important;
    color: #1f4e79 !important;
    border: 1px solid #2f75b5 !important;
}

.btn-outline:hover {
    background: #e8f1fb !important;
}

.btn-bonus {
    background: #f0b400 !important;
    color: #fff !important;
}

.btn-bonus:hover {
    background: #d99a00 !important;
}

/* Trên điện thoại thì tự động xếp dọc các hộp */
@media (max-width: 800px) {
    .admin-buttons-row:not(.hidden-admin-row) {
        flex-direction: column;
        gap: 10px;
    }
}

/* =========================================================
   🎛️ KHỐI ADMIN TABS (Nested Parent → Child)
   ========================================================= */
.admin-auth-row {
    /* Khối nhập mật khẩu mặc định luôn hiển thị. Sau khi unlock sẽ thêm class
       .hidden-admin-row để biến mất; #adminTabsContainer chiếm chỗ tại đây. */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.admin-tabs-container {
    width: 100%;
    box-sizing: border-box;
    margin-top: 4px;
}

.admin-tabs-container.hidden-admin-row {
    display: none !important;
}

/* ----- Parent tabs (tầng trên) ----- */
.admin-parent-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    border-bottom: 2px solid #d9eaf7;
    padding-bottom: 4px;
    margin-bottom: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.admin-parent-tab-btn {
    flex: 0 0 auto;
    padding: 10px 18px;
    border: none;
    border-radius: 12px 12px 0 0;
    background: #eef4f9;
    color: #1f4e79;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}

.admin-parent-tab-btn:hover {
    background: #dbe9f6;
}

.admin-parent-tab-btn.active {
    background: #1f4e79;
    color: #ffffff;
    border-bottom-color: #f0b400;
}

.admin-parent-panel {
    display: none;
}

.admin-parent-panel.active {
    display: block;
}

/* ----- Child tabs (tầng trong) — kiểu khác để phân biệt ----- */
.admin-child-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
    margin-bottom: 12px;
    padding: 6px 8px;
    border-radius: 10px;
    background: #f8fbff;
    border: 1px dashed #d9eaf7;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    /* Giữ cố định hàng tab con khi cuộn nội dung panel bên dưới */
    position: sticky;
    top: 0;
    z-index: 6;
}

.admin-child-tab-btn {
    flex: 0 0 auto;
    padding: 7px 14px;
    border: 1.5px solid #b7c7d6;
    border-radius: 999px;
    background: #ffffff;
    color: #1f4e79;
    font-weight: 600;
    font-size: 13.5px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    white-space: nowrap;
}

.admin-child-tab-btn:hover {
    background: #e8f1fb;
    border-color: #2f75b5;
}

.admin-child-tab-btn.active {
    background: #2f75b5;
    color: #ffffff;
    border-color: #2f75b5;
    box-shadow: 0 4px 10px rgba(47, 117, 181, 0.25);
}

.admin-child-panel {
    display: none;
}

.admin-child-panel.active {
    display: block;
}

/* Toggle rows nằm trong "Cài đặt chung": dùng đường kẻ phân tách nhẹ */
.admin-toggle-row {
    padding: 8px 4px;
    border-bottom: 1px dashed #e6eef7;
}

.admin-toggle-row:last-child {
    border-bottom: none;
}

/* Placeholder text cho "Khu vườn sinh thái" và "Nhiệm vụ" */
.admin-placeholder-box {
    text-align: center;
}

.admin-placeholder-text {
    margin: 16px 0 0;
    padding: 28px 18px;
    border-radius: 12px;
    background: linear-gradient(135deg, #fff8e1, #fffde7);
    border: 1px dashed #ffd966;
    color: #b45f06;
    font-weight: 600;
    font-size: 15px;
}

/* Mobile — Samsung S22 Ultra (~412px portrait, ~915px landscape) */
@media (max-width: 800px) {

    .admin-parent-tabs,
    .admin-child-tabs {
        flex-wrap: nowrap;
    }

    .admin-parent-tab-btn {
        padding: 9px 14px;
        font-size: 14px;
    }

    .admin-child-tab-btn {
        padding: 6px 12px;
        font-size: 13px;
    }
}

@media (max-width: 500px) {
    .admin-parent-tab-btn {
        padding: 8px 12px;
        font-size: 13px;
    }

    .admin-child-tab-btn {
        padding: 6px 10px;
        font-size: 12.5px;
    }
}

/* =========================================================
   📅 QUẢN LÝ LỊCH TRÌNH RÈN LUYỆN
   ========================================================= */
.training-schedule-wrap {
    display: block !important;
    width: 100%;
}

.training-schedule-wrap.hidden-admin-row {
    display: none !important;
}

.training-schedule-box {
    width: 100%;
    flex: 1 1 auto;
}

.training-schedule-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.training-row {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) minmax(170px, 1fr) minmax(170px, 1fr) minmax(140px, 0.8fr);
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #f8fbff;
    border: 1px solid #e6eef7;
}

.training-row-parent {
    background: #eef4f9;
    border-color: #d9eaf7;
}

.training-row-child {
    padding-left: 28px;
    /* indent so child labels look nested under parent */
}

.training-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.training-cell-label {
    font-weight: 700;
    color: #1f4e79;
    cursor: pointer;
    user-select: none;
}

.training-row-parent .training-cell-label {
    color: #103a5e;
}

.training-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #2f75b5;
    flex-shrink: 0;
}

.training-tab-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.training-cell-mini {
    font-size: 12px;
    color: #5a6b7b;
    flex-shrink: 0;
}

.training-date-input {
    flex: 1 1 auto;
    min-width: 110px;
    padding: 5px 8px;
    border: 1px solid #b7c7d6;
    border-radius: 6px;
    font-size: 13px;
    color: #1f4e79;
    background: #fff;
}

.training-date-input:disabled,
.training-row-child[data-locked-by-parent] .training-date-input {
    background: #f1f3f5;
    color: #8a9099;
    cursor: not-allowed;
}

.training-countdown-label {
    font-size: 13px;
    color: #1f4e79;
    font-weight: 600;
    white-space: nowrap;
}

/* Caption đếm ngược hiển thị bên cạnh tên tab con */
.training-tab-caption {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
    vertical-align: middle;
}

.training-tab-caption.upcoming {
    background: #fff4d6;
    color: #b45f06;
    border: 1px solid #ffd966;
}

.training-tab-caption.closing {
    background: #fde0dc;
    color: #c0392b;
    border: 1px solid #f4a8a0;
}

/* Tab con đang ở trạng thái "khóa" (chưa tới ngày mở) */
.renluyen-child-tab-btn.tab-locked {
    opacity: 0.78;
    cursor: not-allowed;
    filter: grayscale(0.2);
}

/* Notice khi user mở tab cha Rèn Luyện nhưng tất cả tab con đang khóa */
.training-locked-notice {
    margin: 18px auto;
    max-width: 520px;
    padding: 20px 24px;
    border-radius: 14px;
    background: linear-gradient(135deg, #fff8e1, #fffde7);
    border: 1px dashed #ffd966;
    color: #5a4500;
    text-align: center;
    font-size: 15px;
    box-shadow: 0 4px 14px rgba(180, 120, 6, 0.08);
}

.training-locked-notice h3 {
    color: #b45f06;
}

/* Mobile: stack mỗi cell theo chiều dọc cho dễ đọc */
@media (max-width: 800px) {
    .training-row {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 10px;
    }

    .training-row-child {
        padding-left: 14px;
    }

    .training-cell-date,
    .training-cell-countdown,
    .training-cell-label {
        width: 100%;
    }

    .training-date-input {
        flex: 1 1 auto;
    }
}

/* =========================================================
   🚀 BẢN VÁ TỐI THƯỢNG: MENU STICKY ÔM KHÍT NỘI DUNG 🚀
   ========================================================= */

@media (min-width: 901px) {

    /* === KHÓA CHIỀU CAO THEO MÀN HÌNH ===
       Cả trang KHÔNG cuộn (không có scroll ngoài). Toàn bộ .app cao đúng bằng
       màn hình; khu 2 cột chiếm phần còn lại. Menu trái kéo dài hết cột và luôn
       cố định; chỉ vùng nội dung bên phải mới cuộn bên trong. */
    html,
    body {
        height: 100%;
        /* Ghi đè overflow-y: scroll mặc định trên CẢ html lẫn body. Quan trọng:
           html đang để overflow-y: scroll khiến thanh cuộn dọc LUÔN hiện dù trang
           không dài hơn màn hình -> phải tắt ở html mới hết thanh cuộn ngoài. */
        overflow: hidden !important;
    }

    .app {
        height: calc(100vh - 16px);
        /* 16px = padding 8px trên + 8px dưới của body */
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    h1,
    .top-bar {
        flex-shrink: 0;
    }

    /* Khu 2 cột chiếm hết phần còn lại; 2 cột cao bằng nhau (stretch) */
    .app-layout {
        flex: 1 1 auto;
        min-height: 0;
        align-items: stretch !important;
    }

    /* Menu trái: cao bằng đúng cột layout (kéo dài tới đáy = vạch đỏ) và luôn
       cố định vì trang không cuộn. Vẫn có thanh cuộn riêng nếu màn hình quá thấp. */
    .side-menu {
        position: static !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
        /* sidebar KHÔNG tự cuộn; chỉ vùng giữa cuộn */

        display: flex !important;
        flex-direction: column !important;
        padding-bottom: 24px !important;
    }

    /* Bố cục 3 phần: hồ sơ (trên) & bánh răng (dưới) cố định; nav (giữa) cuộn */
    .side-menu .student-profile-card,
    .side-menu .side-menu-footer {
        flex-shrink: 0;
    }

    .side-menu .side-menu-nav {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: none;
        /* ẩn thanh cuộn (vẫn cuộn được bằng lăn/chạm) */
        -ms-overflow-style: none;
    }

    .side-menu .side-menu-nav::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    /* Vùng nội dung bên phải: cao bằng menu, không tự cuộn ở cấp này. Header công
       cụ (.control-area) giữ cố định; chỉ section đang mở mới cuộn bên trong. */
    .content-area {
        min-height: 0;
        overflow: hidden !important;
        display: flex;
        flex-direction: column;
    }

    .control-area {
        flex-shrink: 0;
    }

    .content-section {
        flex: 1 1 auto;
        min-height: 0;
        /* Cuộn dọc khi nội dung dài; cuộn ngang khi bảng rộng (vd bảng bài thi) */
        overflow-y: auto;
        overflow-x: auto;
    }

    /* Thu gọn Khung Avatar 30% */
    .student-photo-frame-box {
        width: 180px !important;
        height: 180px !important;
        margin: 0 auto !important;
    }

    /* Kích thước .student-photo dùng chung tỉ lệ 70% từ rule gốc (line 1194). */

    /* Gắn Avatar ngay dưới nút Menu cuối cùng, khoảng cách 20px tuyệt đẹp */
    .student-photo-box {
        margin-top: 20px !important;
        /* 🔥 Bỏ lệnh đẩy xuống đáy, thay bằng lề 20px */
        padding-top: 0 !important;
        width: 100%;
    }
}

/* =========================================================
   🚀 BẢN VÁ: CĂN PHẢI TUYỆT ĐỐI CHO 2 NÚT THƯỜNG (PC) 🚀
   ========================================================= */

@media (min-width: 901px) {

    /* Đổi từ "tàng hình giữ chỗ" sang "biến mất hoàn toàn" để giải phóng không gian */
    .hidden-keep-space {
        display: none !important;
    }
}

/* ===== BẢN VÁ: TỐI ƯU KHOẢNG TRỐNG NÚT TẠO ĐỀ (MOBILE) ===== */
@media (max-width: 900px) {

    /* Ép mỏng lề dưới của cụm chữ chúc mừng */
    .exam-header-left {
        margin-bottom: 2px !important;
    }

    /* Ép mỏng lề trên của cụm nút bấm */
    .exam-header-right {
        margin-top: 6px !important;
    }

    /* Rút gọn thêm phần đuôi của dòng báo điểm nếu có */
    .today-score-message {
        min-height: auto !important;
        margin-bottom: 0 !important;
    }
}

/* =========================================================
   🚀 GIAO DIỆN NHIỆM VỤ THI ĐUA (DAILY/WEEKLY QUESTS) 🚀
   ========================================================= */

/* .quests-panel: khung do .main-panel đảm nhiệm (đồng bộ với màn gốc) */

.quests-main-title {
    text-align: center;
    color: #d9362d;
    font-size: 30px;
    font-weight: bold;
    margin: 0 0 24px 0;
}

.quests-category {
    margin-bottom: 32px;
}

.quests-category-title {
    color: #1f4e79;
    font-size: 24px;
    border-bottom: 3px dashed #d9eaf7;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* =======================================================================
   DẢI BANNER "thời gian hoạt động / đếm ngược ≤24h" — MỎNG 1 dòng, không vỡ
   ======================================================================= */
.quests-active-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 0 16px 0;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    border: 1px solid transparent;
    /* MỘT DÒNG: không cho cao lên / không đẩy vỡ layout 3 cụm bên dưới */
    white-space: nowrap;
    overflow: hidden;
}

.quests-active-banner .qab-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Đang mở bình thường: tông xanh nhạt */
.quests-active-banner.is-open {
    background: #e7f3fe;
    border-color: #b6dcfb;
    color: #1565c0;
}

/* Cận hạn ≤24h (đếm ngược): tông cam nhạt */
.quests-active-banner.is-closing {
    background: #fff3e0;
    border-color: #ffcc80;
    color: #e65100;
}

.quests-active-banner.is-closing strong {
    font-variant-numeric: tabular-nums;
    font-size: 15px;
}

@media (max-width: 600px) {
    .quests-active-banner {
        font-size: 12.5px;
        padding: 6px 12px;
        margin-bottom: 12px;
        /* Cho phép xuống tối đa 2 dòng gọn nếu thật chật, vẫn không tràn ngang */
        white-space: normal;
    }

    /* Thu gọn: ẩn câu khích lệ, GIỮ ngày/đếm ngược */
    .quests-active-banner .qab-cheer {
        display: none;
    }

    .quests-active-banner .qab-text {
        white-space: normal;
    }
}

/* =======================================================================
   [CHỈ MOBILE ≤900px] Màn Nhiệm vụ: khối đầu gồm tiêu đề + banner.
   PC (≥901px) GIỮ NGUYÊN: .quests-sticky-head = display:contents (không sinh
   hộp) → tiêu đề/banner chảy y như cũ.
   ======================================================================= */
.quests-sticky-head {
    display: contents;
    /* PC: trong suốt với layout — không đổi gì so với trước. */
}

@media (max-width: 900px) {

    /* Khối đầu (tiêu đề + banner + 3 tab) hiện trên mobile. ĐÃ TẮT GHIM
       (PIN_ENABLED=false) → cuộn CÙNG cả trang; chỉ giữ nền + bóng tách khỏi danh sách. */
    #questsStickyHead.quests-sticky-head {
        display: block;
        position: relative;
        z-index: 1;
        background: #fffaf0;
        /* khớp nền .main-panel */
        padding: 4px 0 8px;
        box-shadow: 0 5px 10px rgba(31, 78, 121, 0.06);
    }

    #questsStickyHead .quests-main-title {
        margin: 0 0 8px 0;
    }

    #questsStickyHead .quests-active-banner {
        margin-bottom: 8px;
    }

    /* Vùng danh sách CUỘN RIÊNG: chỉ phần này cuộn, khối đầu đứng yên trên cùng.
       max-height do JS đặt = phần màn còn lại (đo runtime). overscroll-behavior:
       contain để không "kéo lây" cả trang. Class .quests-mnav-panel do JS bật/tắt;
       PC không có class này nên panel vẫn tự cuộn như cũ. */
    .quests-panel.quests-mnav-panel .quests-scroll-area {
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* Khi đang ở màn Nhiệm vụ (mobile): bỏ min-height:100vh của .app — vì 100vh
       (CSS) có thể lớn hơn chiều cao màn thật (thanh địa chỉ) khiến trang vẫn dư
       để cuộn, làm khối đầu trôi lên. Bỏ đi → trang vừa khít, chỉ vùng danh sách
       cuộn. Class do JS bật/tắt, chỉ ảnh hưởng khi đang xem Nhiệm vụ. */
    body.quests-mnav-active .app {
        min-height: 0;
    }
}

/* =======================================================================
   THẺ TEASER "Trò chơi mới sắp mở!" (hộp quà + đếm ngược) — thay badge cũ
   ======================================================================= */
/* Chấm nhấp nháy nhẹ cạnh mục "Nhiệm vụ" ở sidebar khi chưa mở */
.quests-locked-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ff7043;
    box-shadow: 0 0 0 0 rgba(255, 112, 67, 0.6);
    vertical-align: middle;
    margin-left: 2px;
    animation: quests-dot-blink 1.6s ease-in-out infinite;
}

/* [NHẮC NHỞ KHU VUI CHƠI] Chấm nhỏ nhấp nháy gắn vào menu "Khu vui chơi" + tab "Rèn Luyện"
   khi có chương trình Rèn Luyện đang mở/sắp mở (dùng chung animation với chấm Nhiệm vụ). */
.attn-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ff7043;
    box-shadow: 0 0 0 0 rgba(255, 112, 67, 0.6);
    vertical-align: middle;
    margin-left: 4px;
    animation: quests-dot-blink 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .attn-dot {
        animation: none;
    }
}

@keyframes quests-dot-blink {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(255, 112, 67, 0.55);
    }

    50% {
        opacity: 0.55;
        box-shadow: 0 0 0 6px rgba(255, 112, 67, 0);
    }
}

.quests-teaser {
    display: flex;
    justify-content: center;
    padding: 8px 4px;
}

.quests-teaser-card {
    width: 100%;
    max-width: 460px;
    text-align: center;
    background: linear-gradient(160deg, #fff8e1 0%, #ffe0b2 100%);
    border: 2px solid #ffcc80;
    border-radius: 20px;
    padding: 28px 22px 26px;
    box-shadow: 0 12px 34px rgba(255, 152, 0, 0.18);
}

.quests-teaser-gift {
    font-size: 64px;
    line-height: 1;
    margin-bottom: 10px;
    animation: quests-gift-bounce 2.2s ease-in-out infinite;
    transform-origin: center bottom;
}

.quests-teaser-title {
    font-size: 24px;
    font-weight: 800;
    color: #e65100;
    margin-bottom: 6px;
}

.quests-teaser-sub {
    font-size: 15px;
    color: #8d6e63;
    margin-bottom: 18px;
}

.quests-teaser-countdown {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.qcd-box {
    min-width: 58px;
    background: #fff;
    border: 1.5px solid #ffcc80;
    border-radius: 12px;
    padding: 8px 6px;
    box-shadow: 0 4px 10px rgba(255, 152, 0, 0.12);
}

.qcd-num {
    font-size: 26px;
    font-weight: 800;
    color: #ef6c00;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.qcd-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #a1887f;
    margin-top: 2px;
}

.quests-teaser-reward {
    display: inline-block;
    background: #fff3e0;
    border: 1.5px dashed #ffb74d;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 700;
    color: #e65100;
}

@keyframes quests-gift-bounce {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-6px) rotate(-3deg);
    }

    50% {
        transform: translateY(0) rotate(0deg);
    }

    65% {
        transform: translateY(-3px) rotate(3deg);
    }
}

/* Tôn trọng người dùng giảm chuyển động: tắt hiệu ứng cho nhẹ nhàng */
@media (prefers-reduced-motion: reduce) {

    .quests-teaser-gift,
    .quests-locked-dot {
        animation: none;
    }
}

/* Responsive: gọn trên điện thoại, đếm ngược không tràn */
@media (max-width: 600px) {
    .quests-teaser-card {
        padding: 22px 14px 20px;
        border-radius: 16px;
    }

    .quests-teaser-gift {
        font-size: 52px;
    }

    .quests-teaser-title {
        font-size: 20px;
    }

    .quests-teaser-countdown {
        gap: 7px;
    }

    .qcd-box {
        min-width: 50px;
        padding: 7px 5px;
    }

    .qcd-num {
        font-size: 22px;
    }
}

.quests-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}

.quest-card {
    background: #f8fbff;
    border: 2px solid #bdd7ee;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 12px rgba(31, 78, 121, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.quest-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(31, 78, 121, 0.15);
}

.quest-card.quest-completed {
    background: #f0fdf4;
    border-color: #86efac;
}

.quest-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.quest-title {
    font-size: 18px;
    font-weight: bold;
    color: #1f4e79;
}

.quest-badge {
    font-size: 24px;
}

.quest-desc {
    font-size: 14px;
    color: #4a5568;
    margin-bottom: 12px;
    min-height: 40px;
}

.quest-reward {
    font-weight: bold;
    color: #d9362d;
    margin-bottom: 16px;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.quest-progress-wrap {
    background: #e2e8f0;
    border-radius: 999px;
    height: 18px;
    position: relative;
    overflow: hidden;
    margin-bottom: 16px;
    border: 1px solid #cbd5e1;
}

.quest-progress-bar {
    background: linear-gradient(90deg, #70ad47, #a9d18e);
    height: 100%;
    border-radius: 999px;
    transition: width 0.5s ease;
}

.quest-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    font-weight: bold;
    color: #1a202c;
    white-space: nowrap;
}

.quest-btn {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quest-btn:disabled {
    background: #cbd5e1;
    color: #64748b;
    cursor: not-allowed;
    box-shadow: none;
}

.quest-btn.btn-claim {
    background: #f0b400;
    color: #fff;
    box-shadow: 0 4px 0 #bf9000;
    animation: questPulse 1.5s infinite;
}

.quest-btn.btn-claim:hover {
    background: #ffcc33;
    transform: translateY(2px);
    box-shadow: 0 2px 0 #bf9000;
}

.quest-btn.btn-claimed {
    background: #e2e8f0;
    color: #475569;
    box-shadow: none;
    cursor: default;
}

/* Hiệu ứng nhấp nháy phát sáng kích thích trẻ bấm nhận quà */
@keyframes questPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(240, 180, 0, 0.7), 0 4px 0 #bf9000;
    }

    70% {
        box-shadow: 0 0 0 10px rgba(240, 180, 0, 0), 0 4px 0 #bf9000;
    }

    100% {
        box-shadow: 0 0 0 0 rgba(240, 180, 0, 0), 0 4px 0 #bf9000;
    }
}

/* Căn chỉnh lại trên Mobile */
@media (max-width: 600px) {
    .quests-panel {
        padding: 16px;
    }

    .quests-main-title {
        font-size: 24px;
    }

    .quests-category-title {
        font-size: 20px;
    }

    .quests-grid {
        grid-template-columns: 1fr;
    }
}

/* 🔥 ÉP ẨN TRIỆT ĐỂ NÚT NHIỆM VỤ TRÊN MOBILE KHI CHƯA BẬT SỰ KIỆN */
@media (max-width: 900px) {

    .side-menu #menu-quests.hidden-section,
    .side-menu button#menu-quests.hidden-section {
        display: none !important;
    }
}

/* =========================================================
   🤝 NHIỆM VỤ KẾT NỐI + NHIỆM VỤ CUỐI (màn trẻ)
   ========================================================= */
/* Badge "Chờ duyệt (n)" cạnh tiêu đề cụm kết nối */
.quests-pending-badge {
    display: inline-block;
    margin-left: 10px;
    padding: 3px 12px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background: #e67e22;
    border-radius: 999px;
    vertical-align: middle;
    animation: questPulse 1.5s infinite;
}

/* Thẻ nhiệm vụ kết nối (không có thanh tiến trình) */
.quest-card.quest-connect {
    background: #fff7f0;
    border-color: #ffd2a6;
}

.quest-card.quest-connect.quest-pending {
    background: #fffbe6;
    border-color: #f6d860;
}

.quest-card.quest-connect.quest-claimed {
    background: #f0fdf4;
    border-color: #86efac;
}

/* Hàng 2 nút duyệt của bố mẹ */
.connect-approve-row {
    display: flex;
    gap: 10px;
}

.connect-approve-row .quest-btn {
    width: auto;
    flex: 1;
}

.quest-btn.connect-reject {
    background: #fde2e2;
    color: #b91c1c;
    box-shadow: 0 4px 0 #f1a9a9;
}

.quest-btn.connect-reject:hover {
    background: #fbcaca;
    transform: translateY(2px);
    box-shadow: 0 2px 0 #f1a9a9;
}

/* Nhiệm vụ cuối tự sinh (chuỗi điểm danh) — viền nổi bật */
.quest-card.quest-card-final {
    background: linear-gradient(160deg, #fff9e6 0%, #fef3c7 100%);
    border-color: #fcd34d;
}

/* =========================================================
   🛠️ TRÌNH CẤU HÌNH NHIỆM VỤ (màn Cài đặt → tab Nhiệm vụ)
   ========================================================= */
.quests-config-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 14px;
}

.quests-config-empty {
    color: #64748b;
    font-style: italic;
    text-align: center;
    padding: 14px;
}

.quests-config-hint {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 12px;
}

/* "Số lượt chơi còn lại" cạnh nút Bắt đầu của 2 game Rèn luyện */
.mg-plays-left,
.math-racing-plays-left {
    font-size: 13.5px;
    font-weight: 700;
    color: #1f4e79;
    margin-left: 10px;
    white-space: nowrap;
}

.math-racing-start-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Form lịch trình thi đua (tab Cài đặt chung của Nhiệm vụ) */
.quests-sched-enable {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: #1f4e79;
    margin: 2px 0 10px;
    cursor: pointer;
}

.quests-sched-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.quests-sched-countdown {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #1f4e79;
    margin-bottom: 4px;
    cursor: pointer;
}

/* Tiêu đề phụ phân nhóm trong 1 box cấu hình (vd 2 game Rèn luyện) */
.quests-config-subtitle {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #1f4e79;
    margin: 6px 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px dashed #d9eaf7;
}

/* Nhãn nhóm hoa trong thẻ cấu hình khu vườn */
.garden-group-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    vertical-align: middle;
}

.garden-group-badge.common {
    background: #fffde7;
    color: #b45309;
    border: 1px solid #ffe082;
}

.garden-group-badge.legendary {
    background: #fce4ec;
    color: #8e24aa;
    border: 1px solid #ce93d8;
}

/* ===== Lưới thẻ hoa Khu vườn (Cài đặt): cố gắng 3 thẻ/hàng, vỡ thì 2, mobile 1 ===== */
.garden-plants-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 14px;
}

@media (max-width: 1100px) {
    .garden-plants-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .garden-plants-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Thẻ phần thưởng Rèn luyện: hàng ngang, tối đa 3 thẻ/hàng (giống tab Khu vườn) ===== */
.training-rewards-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

@media (max-width: 1100px) {
    .training-rewards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .training-rewards-grid {
        grid-template-columns: 1fr;
    }
}

/* Co ngắn các hạng mục bên trong thẻ để 3 ô Điểm/Nước/Phân nằm gọn trên 1 thẻ hẹp */
.training-rewards-grid .quest-config-card {
    padding: 10px;
    gap: 6px;
}

.training-rewards-grid .quest-config-index {
    font-size: 13px;
    line-height: 1.25;
}

.training-rewards-grid .quest-config-rewards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 8px;
}

.training-rewards-grid .quest-config-field {
    font-size: 11.5px;
    gap: 2px;
}

.training-rewards-grid .quest-config-field>span {
    white-space: nowrap;
}

.training-rewards-grid .quest-config-field input {
    padding: 6px 6px;
    font-size: 13px;
    text-align: center;
}

/* Thẻ hoa: TRÁI = tên (text tĩnh) + ảnh hoa; PHẢI = các ô nhập. */
.garden-plant-card {
    background: #f8fbff;
    border: 1px solid #cfe2f4;
    border-radius: 14px;
    padding: 14px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    box-shadow: 0 2px 8px rgba(31, 78, 121, 0.06);
}

.garden-plant-card-main {
    flex: 0 0 40%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* tên + ảnh CĂN TRÁI */
    gap: 8px;
    text-align: left;
}

.garden-plant-card-name {
    width: 100%;
    line-height: 1.3;
}

/* Tên hoa nằm TRONG KHUNG màu theo nhóm: vàng = hoa thường, tím = hoa huyền thoại.
   (Đã bỏ chữ "Thường"/"Huyền thoại"; chính cái khung này thể hiện nhóm hoa.) */
.garden-plant-name-chip {
    display: inline-block;
    max-width: 100%;
    box-sizing: border-box;
    padding: 6px 12px;
    border-radius: 10px;
    font-weight: 800;
    font-size: 14px;
    line-height: 1.3;
    word-break: break-word;
}

.garden-plant-name-chip.common {
    background: #fffde7;
    color: #b45309;
    border: 2px solid #ffe082;
}

.garden-plant-name-chip.legendary {
    background: #fce4ec;
    color: #8e24aa;
    border: 2px solid #ce93d8;
}

.garden-plant-card-imgwrap {
    width: 100%;
    display: flex;
    justify-content: flex-start;
}

.garden-plant-card-img {
    width: 96px;
    height: 96px;
    object-fit: contain;
    display: block;
}

.garden-plant-card-img-emoji {
    font-size: 60px;
    line-height: 1;
    align-items: center;
    justify-content: center;
}

.garden-plant-card-fields {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* [GĐ2] Khối thưởng thu hoạch trong thẻ cấu hình hoa: 1 nhóm, 3 ô (giọt/quay/vé). */
.garden-plant-card-rewards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 2px;
}

.garden-reward-group {
    background: #f0f7ff;
    border: 1px dashed #b9d6ef;
    border-radius: 10px;
    padding: 8px 10px;
}

.garden-reward-title {
    font-size: 12.5px;
    font-weight: 800;
    color: #1f4e79;
    margin-bottom: 6px;
}

.garden-reward-row {
    display: flex;
    gap: 8px;
}

.garden-reward-field {
    flex: 1 1 0;
    min-width: 0;
}

.garden-reward-field>span {
    font-size: 12px;
    white-space: nowrap;
}

/* ============================================================
   [GĐ3] TRÌNH CÀI ĐẶT THẺ "GHÉP HOA" (admin) — ô nhập ≥16px (mobile)
   ============================================================ */
.bouquet-editor-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.bouquet-count {
    font-size: 14px;
    color: #1f4e79;
}

.bouquet-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}

.bouquet-card {
    background: #f8fbff;
    border: 1px solid #cfe2f4;
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bouquet-card.active {
    border-color: #43a047;
    box-shadow: 0 0 0 2px rgba(67, 160, 71, 0.18);
    background: #f5fbf6;
}

.bouquet-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.bouquet-active-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: #2e7d32;
    font-size: 14px;
    cursor: pointer;
}

.bouquet-active-label input {
    width: 20px;
    height: 20px;
}

.bouquet-sub-title {
    font-size: 13px;
    font-weight: 800;
    color: #1f4e79;
    margin-bottom: 4px;
}

.bouquet-flowers {
    background: #fff;
    border: 1px dashed #b9d6ef;
    border-radius: 10px;
    padding: 10px;
}

.bouquet-flower-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.bouquet-flower-select {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 16px;
    padding: 9px 8px;
    border: 1px solid #c4d6e6;
    border-radius: 8px;
    background: #fff;
}

.bouquet-flower-qty {
    flex: 0 0 70px;
    width: 70px;
    font-size: 16px;
    padding: 9px 8px;
    border: 1px solid #c4d6e6;
    border-radius: 8px;
    text-align: center;
}

.bouquet-row-del {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: 1px solid #f3c0c0;
    background: #fff5f5;
    color: #c62828;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
}

.bouquet-row-del:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.bouquet-add-row {
    margin-top: 2px;
}

.bouquet-add-row:disabled,
.bouquet-del-card:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.bouquet-reward-row {
    display: flex;
    gap: 8px;
}

.bouquet-reward-field {
    flex: 1 1 0;
    min-width: 0;
}

.bouquet-reward-field>span {
    font-size: 12px;
    white-space: nowrap;
}

.bouquet-card .quest-config-field input,
.bouquet-card .bouquet-message {
    font-size: 16px;
}

.bouquet-message {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 10px;
    border: 1px solid #c4d6e6;
    border-radius: 8px;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
}

/* Màn rất hẹp: xếp dọc tên/ảnh trên, ô nhập dưới cho dễ thao tác. */
@media (max-width: 460px) {
    .garden-plant-card {
        flex-direction: column;
    }

    .garden-plant-card-main {
        flex: 1 1 auto;
        width: 100%;
    }
}

/* Mỗi nhiệm vụ là 1 thẻ xếp dọc các trường (không dùng bảng ngang → hợp mobile) */
.quest-config-card {
    background: #f8fbff;
    border: 1px solid #cfe2f4;
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 2px 8px rgba(31, 78, 121, 0.06);
}

.quest-config-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.quest-config-index {
    font-weight: bold;
    color: #1f4e79;
}

.quest-config-del {
    background: #fde2e2;
    color: #b91c1c;
    border: none;
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 13px;
    cursor: pointer;
}

.quest-config-del:hover {
    background: #fbcaca;
}

/* Trường nhập: nhãn trên, control dưới */
.quest-config-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13.5px;
    color: #334155;
}

.quest-config-field>span b {
    color: #e11d48;
}

.quest-config-field input,
.quest-config-field select {
    padding: 8px 10px;
    border: 1px solid #bdd7ee;
    border-radius: 9px;
    font-size: 14px;
    background: #fff;
    box-sizing: border-box;
    width: 100%;
}

/* Điều kiện (số đề + điểm) và phần thưởng xếp lưới co giãn */
.quest-config-cond,
.quest-config-rewards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
}

.quest-config-rewards {
    background: #eef6ff;
    border-radius: 10px;
    padding: 10px;
}

.quest-config-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #1f4e79;
    cursor: pointer;
}

/* Khối xem trước đúng dòng chữ trẻ sẽ thấy */
.quest-config-preview {
    border-top: 1px dashed #cbd5e1;
    padding-top: 8px;
}

.quest-config-preview-label {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 4px;
}

.quest-config-preview-desc {
    font-weight: 600;
    color: #0f172a;
}

.quest-config-preview-reward {
    color: #b45309;
    font-weight: 600;
    margin-top: 2px;
}

.quest-config-preview-applies {
    color: #1d4ed8;
    font-weight: 600;
    margin-top: 2px;
}

/* Hàng "Nội dung nhiệm vụ" + "Áp dụng cho" nằm cùng 1 dòng (label & ô nhập ngang nhau) */
.quest-config-connect-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

/* Ô nội dung dài gấp ~3.4 lần ô "Áp dụng cho" */
.quest-config-connect-row .quest-config-field-content {
    flex: 3.4 1 0;
    min-width: 0;
}

.quest-config-connect-row .quest-config-field-applies {
    flex: 1 1 0;
    min-width: 150px;
}

/* Ép 2 ô nhập (textbox + nút combobox) CÙNG chiều cao để thẳng hàng trên & dưới */
.quest-config-connect-row .quest-config-field-content input,
.quest-config-connect-row .quest-applies-toggle {
    height: 40px;
    min-height: 40px;
    box-sizing: border-box;
    margin: 0;
    line-height: 22px;
}

/* Combobox tùy biến cho "Áp dụng cho" */
.quest-applies-dd {
    position: relative;
    width: 100%;
}

.quest-applies-toggle {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #bdd7ee;
    border-radius: 9px;
    background: #fff;
    font-size: 14px;
    color: #1f2937;
    cursor: pointer;
    text-align: left;
}

.quest-applies-dd.open .quest-applies-toggle {
    border-color: #2f75b5;
    box-shadow: 0 0 0 2px rgba(47, 117, 181, 0.15);
}

.quest-applies-summary {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quest-applies-caret {
    flex: none;
    color: #6b7280;
    font-size: 12px;
}

.quest-applies-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 60;
    background: #fff;
    border: 1px solid #bdd7ee;
    border-radius: 9px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
    padding: 6px;
    max-height: 220px;
    overflow-y: auto;
}

.quest-applies-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 6px;
    font-size: 14px;
    color: #1f2937;
    cursor: pointer;
}

.quest-applies-opt:hover {
    background: #eef5fc;
}

/* Ghi đè width:100% mặc định của input trong .quest-config-field để checkbox không bị giãn */
.quest-applies-opt input[type="checkbox"] {
    width: auto;
    margin: 0;
    cursor: pointer;
}

.quests-config-add {
    width: 100%;
    background: #2f75b5 !important;
    color: #fff !important;
}

.quests-config-add:disabled {
    background: #cbd5e1 !important;
    cursor: not-allowed;
}

.quests-config-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.quests-config-actions .settings-btn {
    flex: 1;
}

/* Header "tiêu đề + 2 nút Hủy/Lưu cùng hàng": tiêu đề căn GIỮA box, nút căn phải gọn.
   Grid 1fr auto 1fr → cột trái trống cân với cột nút → tiêu đề đứng GIỮA (giữ nguyên vị trí cũ).
   Dùng cho: Khu vườn (🌱) và 3 khu tab Rèn Luyện (📅/🏆/🎮). */
.garden-config-header,
.config-inline-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #d9eaf7;
    /* gạch chân full-width như tiêu đề cũ */
}

.garden-config-header .settings-group-title,
.config-inline-header .settings-group-title {
    grid-column: 2;
    margin: 0;
    padding: 0;
    border: none;
    text-align: center;
}

.garden-config-header .garden-config-actions,
.config-inline-header .config-inline-actions {
    grid-column: 3;
    justify-self: end;
    margin: 0;
}

@media (max-width: 600px) {

    .garden-config-header,
    .config-inline-header {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .garden-config-header .garden-config-actions,
    .config-inline-header .config-inline-actions {
        justify-self: auto;
        width: 100%;
    }
}

/* Nút Lưu/Hủy GỌN + BẰNG NHAU (Cài đặt chung nhiệm vụ & Lịch trình Rèn Luyện) */
.quests-config-actions.sched-actions-compact {
    justify-content: flex-end;
}

.quests-config-actions.sched-actions-compact .settings-btn {
    flex: 0 0 auto;
    min-width: 130px;
    /* 2 nút cùng độ rộng → bằng nhau */
}

@media (max-width: 600px) {
    .quests-config-actions.sched-actions-compact .settings-btn {
        flex: 1 1 0;
        min-width: 0;
        /* điện thoại: chia đôi đều, không tràn */
    }
}

/* =========================================================
   UPDATED QUIZ LAYOUT: PROFILE CARD + TWO SECTION EXAM
   Native CSS only - no framework
   ========================================================= */
/* THẺ HỒ SƠ NHÂN VẬT KIỂU GAME: avatar -> tên -> huy hiệu cấp độ, căn giữa */
.student-profile-card {
    width: 100%;
    box-sizing: border-box;
    padding: 18px 14px 16px;
    margin-bottom: 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(160deg, #ffffff 0%, #eaf3fc 100%);
    border: 1px solid #cfe2f4;
    border-radius: 20px;
    box-shadow: 0 10px 26px rgba(31, 78, 121, 0.12), inset 0 1px 0 #ffffff;
}

.student-profile-card .student-photo-box {
    margin-top: 0 !important;
    padding-top: 0 !important;
    width: 100%;
    display: flex;
    justify-content: center;
}

.student-profile-name {
    margin-top: 12px;
    color: #14385c;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.2px;
}

.student-profile-level {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    padding: 5px 16px;
    box-shadow: 0 3px 10px rgba(31, 78, 121, 0.12);
}

.side-menu-divider {
    height: 1px;
    margin: 10px 6px;
    background: linear-gradient(90deg, transparent, #c4daf0, transparent);
}

/* Nhãn nhóm nhỏ trong sidebar (gần như không tăng chiều cao) */
.side-menu-caption {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #94a3b8;
    padding: 3px 10px 2px;
    line-height: 1.3;
}

/* Nhãn nhóm thứ 2 (thay đường kẻ divider): có gạch mảnh phía trên để phân tách */
.side-menu-caption-mid {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid #e2ecf6;
}

/* Khối điều hướng nằm giữa thẻ hồ sơ và nút cài đặt dưới đáy */
.side-menu-nav {
    display: flex;
    flex-direction: column;
}

/* Đẩy nút cài đặt xuống đáy sidebar (side-menu là flex-column) */
.side-menu-footer {
    margin-top: auto;
    padding-top: 12px;
    display: flex;
    justify-content: flex-start;
}

/* Nút cài đặt dạng bánh răng tối giản, gọn ở góc dưới */
.side-menu-footer .menu-settings-gear {
    width: 44px;
    height: 44px;
    min-width: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid #d9eaf7;
    border-radius: 50%;
    background: #eef4f9;
    color: #1f4e79;
    font-size: 20px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.25s ease, box-shadow 0.2s ease;
}

.side-menu-footer .menu-settings-gear:hover {
    background: #d9eaf7;
    transform: rotate(45deg);
    box-shadow: 0 3px 10px rgba(31, 78, 121, 0.18);
}

.side-menu-footer .menu-settings-gear.active-section {
    background: #d9eaf7;
    border-color: #9cc3e6;
}

.quiz-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

/* Hai vùng câu hỏi xếp dọc, cách nhau 1 khoảng nhỏ để dồn nội dung lên, hạn chế scroll */
.math-quiz-layout {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quiz-section {
    box-sizing: border-box;
    width: 100%;
    padding: 8px 10px;
    border: 2px solid #d9eaf7;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(31, 78, 121, 0.05);
}

.quiz-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
    padding: 0 2px 5px;
    border-bottom: 2px dashed #d9eaf7;
    color: #1f4e79;
}

.quiz-section-header h2 {
    margin: 0;
    font-size: 17px;
    line-height: 1.2;
}

.quiz-section-header span {
    padding: 5px 12px;
    border-radius: 999px;
    background: #eef4f9;
    color: #1f4e79;
    font-weight: 800;
    white-space: nowrap;
}

.fast-question-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
}

.fast-question-card {
    min-width: 0;
}

.fast-question-card-empty {
    min-height: 74px;
    border: 2px dashed #e7f0f8;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(248, 251, 255, 0.65), rgba(255, 253, 244, 0.65));
}

.fast-exam-table {
    /* Không kéo cao 100% theo cột bên cạnh: mỗi hàng giữ chiều cao tự nhiên bằng nhau,
       cột 3 câu chỉ kết thúc sớm và để trống bên dưới thay vì giãn ra cho bằng cột 4 câu */
    margin-bottom: 0 !important;
    table-layout: fixed !important;
}

.fast-exam-table .col-question {
    width: auto !important;
}

/* Trả lời / Kết quả / Đáp án bằng nhau và rộng ~1.2 lần so với cột Trả lời cũ (86px) */
.fast-exam-table .col-answer {
    width: 103px !important;
}

.fast-exam-table .col-result {
    width: 103px !important;
}

.fast-exam-table .col-correct {
    width: 103px !important;
}

.fast-exam-table .col-choice {
    display: none !important;
}

.fast-exam-table th.col-choice,
.fast-exam-table td.col-choice {
    display: none !important;
}

.fast-exam-table th,
.fast-exam-table td {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.word-exam-table {
    margin-bottom: 0 !important;
    table-layout: fixed !important;
}

.word-exam-table .col-no {
    width: 56px !important;
}

.word-exam-table .col-question {
    width: 38% !important;
}

.word-exam-table .col-answer {
    width: 92px !important;
}

.word-exam-table .col-result {
    width: 64px !important;
}

.word-exam-table .col-correct {
    width: 102px !important;
}

.word-exam-table .col-choice {
    width: 92px !important;
}

.word-exam-table .choice-btn.selected {
    background: #2f75b5 !important;
    color: #ffffff !important;
    border-color: #2f75b5 !important;
}

@media (min-width: 901px) {

    .quiz-section .exam-table td,
    .quiz-section .exam-table th {
        box-sizing: border-box;
        vertical-align: middle !important;
    }

    .student-profile-card .student-photo-frame-box {
        width: 170px !important;
        height: 170px !important;
    }

    /* Kích thước .student-photo dùng chung tỉ lệ 70% từ rule gốc (line 1194). */
}

@media (max-width: 1200px) and (min-width: 901px) {
    .fast-question-grid {
        grid-template-columns: 1fr;
    }

    .fast-question-card-empty {
        display: none;
    }
}

@media (max-width: 900px) {

    .student-profile-card,
    .side-menu-divider {
        display: none;
    }

    .quiz-section {
        padding: 10px;
        border-radius: 18px;
    }

    .quiz-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .fast-question-grid {
        grid-template-columns: 1fr;
    }

    .fast-question-card-empty {
        display: none;
    }
}

/* =========================================================
   🚀 TINH CHỈNH CHIỀU CAO/RỘNG THEO YÊU CẦU (PC) 🚀
   ========================================================= */
@media (min-width: 901px) {

    /* 1) Menu ngắn lại ~1cm: thu chiều cao khu 2 cột xuống một khoảng ở đáy.
       Vì menu trái và vùng nội dung đều "stretch" theo khu 2 cột nên cả hai
       cùng ngắn lại và cùng kết thúc ở một mức (vạch đỏ). */
    .app-layout {
        margin-bottom: 36px;
    }

    /* 2) Màn Câu hỏi: header/bảng vùng "Tính nhanh" / "Thử thách toán có lời văn"
       rộng đúng bằng header bảng Cửa hàng (1100px). .quiz-section có padding ngang
       20px + viền 4px nên cần max-width 1124px để phần bảng bên trong đạt 1100px. */
    .math-quiz-layout {
        max-width: 1124px;
        margin-left: auto;
        margin-right: auto;
    }

    /* 3) Lịch sử theo ngày: cho vùng danh sách kéo dài tới đáy (hiển thị thêm
       dòng dữ liệu), data cuối ngang đáy menu. KHÔNG đổi độ rộng các dòng. */

    /* Màn này tự cuộn bên trong .history-scroll-area nên KHÔNG để cấp ngoài
       (.content-section) cuộn nữa -> tránh thanh cuộn thừa ở mép phải. */
    #section-history {
        overflow: hidden;
    }

    .history-panel {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        margin-bottom: 0;
        /* Viền 1px nằm TRONG chiều cao 100% (nếu không sẽ dư ~2px khiến
           .content-section hiện thêm 1 thanh cuộn ngoài không mong muốn) */
        box-sizing: border-box;
    }

    .history-summary,
    .history-title,
    .history-table-header {
        flex-shrink: 0;
    }

    .history-scroll-area {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
    }

    /* 4) Quay thưởng: vùng "Lịch sử quay thưởng" tự cuộn bên trong, nên chặn
       cấp ngoài (.content-section) cuộn -> mất thanh cuộn thừa ở mép phải.
       Đồng thời thu bớt chiều cao vùng lịch sử để vừa khít, không bị cắt. */
    /* CHỈ áp khi màn Khu Vui Chơi đang mở; nếu thêm display:flex cho cả khi ẩn,
       selector ID sẽ thắng .hidden-section (display:none) làm màn này luôn hiện. */
    #section-playground:not(.hidden-section) {
        overflow: hidden;
        /* Cột dọc để vùng con (.garden-wrapper) lấp đúng phần còn lại */
        display: flex;
        flex-direction: column;
    }

    .lucky-history-scroll {
        max-height: calc(100vh - 580px);
    }

    /* 5) Khu Vườn: LƯỚI 9 ô đất tự co giãn lấp đúng phần còn lại nên đáy lưới
       luôn ngang đáy menu (không cần căn số). Tabs cha/con và thanh tài nguyên
       (Nước/Phân/Tiến độ) nằm ngoài lưới nên tự giữ cố định; chỉ lưới cuộn.
       Chuỗi flex chỉ tác động tab "Khu Vườn" (dùng ID), không ảnh hưởng các tab khác. */
    .garden-wrapper {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .garden-tabs-parent {
        flex-shrink: 0;
    }

    #garden-panel-garden.garden-panel.active {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    #garden-child-plots.garden-child-panel.active {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    #garden-panel-garden .garden-tabs-child,
    #garden-child-plots .garden-resources {
        flex-shrink: 0;
    }

    .garden-plots-grid {
        /* 9 ô / 3 hàng tự co giãn lấp đúng phần còn lại, KHÔNG cuộn dọc. */
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        grid-template-rows: repeat(3, minmax(0, 1fr));
    }

    /* Hai tab con còn lại (Tiệm Hạt Giống / Bộ Sưu Tập) cũng cuộn bên trong,
       tránh bị overflow:hidden của khu chơi cắt mất khi danh sách dài. */
    #garden-child-shop.garden-child-panel.active,
    #garden-child-collection.garden-child-panel.active,
    #garden-child-bouquet.garden-child-panel.active {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* Tab "Bó hoa yêu thương": cho thông báo TRỐNG căn giữa cả vùng tab (cao). */
    #garden-child-bouquet.garden-child-panel.active {
        display: flex;
        flex-direction: column;
    }

    #garden-child-bouquet.garden-child-panel.active .bouquet-cards-child.is-empty {
        flex: 1 1 auto;
    }

    /* 6) Rèn Luyện -> Đường đua: khung đua lấp đúng phần còn lại để đáy (viền
       dưới) ngang đáy menu, không bị overflow:hidden của khu chơi cắt mất.
       Nếu nội dung cao hơn thì cuộn bên trong khung; tabs con giữ cố định. */
    #garden-panel-renluyen.garden-panel.active {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    #renluyen-tabs-child {
        flex-shrink: 0;
    }

    #racing-panel {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .math-racing-wrap {
        flex: 1 1 auto;
        min-height: 0;
        /* KHÔNG cuộn trong vùng đua: nội dung đã co gọn để vừa khít,
           đáy khung (viền dưới) luôn ngang đáy menu nhờ flex lấp đầy. */
        overflow: hidden;
        box-sizing: border-box;
    }

    /* 7) Nhiệm vụ: lấy "Cửa hàng đổi thưởng" làm chuẩn — panel chính lấp đầy vùng
       nội dung để đáy (viền dưới) luôn ngang đáy menu; chỉ phần danh sách nhiệm vụ
       bên trong mới cuộn, không sinh thanh cuộn thừa ở cấp ngoài. */
    #section-quests:not(.hidden-section) {
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    #section-quests .quests-panel {
        flex: 1 1 auto;
        min-height: 0;
        margin-bottom: 0;
        box-sizing: border-box;
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* 8) Khu Vui Chơi → tab "Vòng Quay & Quà": vùng nền vàng (.lucky-section) lấp
       đầy tới đáy menu giống bảng Cửa hàng, thay cho min-height cứng 585px. */
    #garden-panel-spin.garden-panel.active {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    #garden-panel-spin #spin-child-spin.garden-child-panel.active {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    #garden-panel-spin .lucky-section {
        flex: 1 1 auto;
        min-height: 0;
        /* bỏ ràng buộc 585px cứng để tự lấp đầy chiều cao */
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* 9) Bài kiểm tra: khung .main-panel cũng lấp đầy tới đáy menu như
       màn gốc; nội dung dài thì cuộn bên trong khung (không sinh cuộn thừa cấp ngoài). */
    #section-questions:not(.hidden-section) {
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    #section-questions>.main-panel {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }
}

/* =========================================================
   🎛️ LAYOUT 2 CỘT CHO TAB "CÀI ĐẶT CHUNG"
   - Cột trái 40% : 3 checkbox cấu hình hệ thống
   - Cột phải 60% : form đổi mật khẩu admin
   - Trên mobile : xếp dọc, divider chuyển thành đường ngang
   ========================================================= */
.general-settings-box {
    padding: 14px 16px 12px;
}

.general-settings-grid {
    display: flex;
    align-items: stretch;
    gap: 18px;
    margin-top: 4px;
}

.general-settings-col {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.general-settings-col-left {
    flex: 0 0 40%;
    max-width: 40%;
    padding-right: 18px;
    gap: 8px;
}

.general-settings-col-right {
    flex: 1 1 60%;
    max-width: 60%;
    padding-left: 18px;
    border-left: 1px solid #e2e8f0;
}

.general-settings-subtitle {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: #1f4e79;
    margin-bottom: 4px;
    padding-bottom: 6px;
    border-bottom: 1px dashed #d9eaf7;
}

.general-settings-col-left .admin-toggle-row {
    margin: 0;
    padding: 4px 0;
    text-align: left;
    justify-content: flex-start;
}

.general-settings-col-left .admin-toggle-row label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    cursor: pointer;
    font-size: 13.5px;
    line-height: 1.25;
    text-align: left;
    width: 100%;
}

.general-settings-col-left .admin-toggle-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
    margin: 0;
}

.quests-toggle-label {
    color: #1f4e79;
    font-weight: bold;
}

/* =========================================================
   🔒 FORM CẬP NHẬT MẬT KHẨU ADMIN (cột phải)
   ========================================================= */
.admin-password-update-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-password-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: #1f4e79;
    margin-bottom: 2px;
    padding-bottom: 6px;
    border-bottom: 1px dashed #d9eaf7;
}

.admin-password-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-password-row {
    display: flex;
    gap: 10px;
}

.admin-password-row>.admin-password-field {
    flex: 1 1 50%;
    min-width: 0;
}

.admin-password-field {
    position: relative;
    display: flex;
    align-items: center;
}

.admin-password-field-full {
    width: 100%;
}

.admin-password-input {
    flex: 1;
    width: 100%;
    height: 32px;
    padding: 0 34px 0 10px;
    border: 1px solid #cfd9e6;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.2;
    background: #f8fbff;
    color: #1f4e79;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.admin-password-input:focus {
    border-color: #2f75b5;
    background: #fff;
}

.admin-password-eye {
    position: absolute;
    right: 3px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    background: transparent;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-password-eye:hover {
    opacity: 1;
    background: rgba(47, 117, 181, 0.08);
}

.admin-password-eye.is-visible {
    opacity: 1;
    background: rgba(47, 117, 181, 0.12);
}

.admin-password-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 2px;
}

.admin-password-actions .settings-btn {
    flex: 0 0 auto;
    min-width: 0;
    padding: 6px 14px !important;
    font-size: 12.5px !important;
    border-radius: 8px !important;
    height: 30px;
    line-height: 1;
}

.admin-password-submit {
    background: #2f75b5 !important;
    color: #fff !important;
    border: 1px solid #2f75b5 !important;
}

.admin-password-submit:hover {
    background: #255f96 !important;
}

@media (max-width: 900px) {
    .general-settings-grid {
        flex-direction: column;
        gap: 12px;
    }

    .general-settings-col-left,
    .general-settings-col-right {
        flex: 1 1 auto;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
        border-left: none;
    }

    .general-settings-col-right {
        border-top: 1px solid #e2e8f0;
        padding-top: 12px;
    }
}

@media (max-width: 520px) {
    .admin-password-row {
        flex-direction: column;
        gap: 8px;
    }

    .admin-password-row>.admin-password-field {
        flex: 1 1 auto;
    }

    .admin-password-actions {
        justify-content: stretch;
    }

    .admin-password-actions .settings-btn {
        flex: 1 1 auto;
    }
}

/* =========================================================
   🛒 KHỐI "QUẢN LÝ PHẦN THƯỞNG" trong Settings (tab cha mới)
   Header gồm tiêu đề bên trái + nút "Lưu phần thưởng" bên phải, đè lên
   layout absolute cũ của .reward-shop-save-btn vốn dành cho khung Cửa hàng.
   ========================================================= */
.reward-admin-settings-box {
    width: 100%;
    box-sizing: border-box;
}

.reward-admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #d9eaf7;
    flex-wrap: wrap;
}

.reward-admin-title {
    margin: 0;
    padding: 0;
    border: none;
    text-align: left;
    flex: 1 1 auto;
    font-size: 15px;
    color: #1f4e79;
}

.reward-admin-save-btn {
    position: static !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
    flex: 0 0 auto;
}

/* ===== Thiết định tỉ lệ Vòng quay (Cài đặt → Khu vui chơi → Vòng Quay & quà) ===== */
.lucky-rate-box {
    margin-top: 14px;
}

/* [LAYOUT] Tab "Vòng Quay & quà": 2 vùng ngang.
   TRÁI ~1/3 (tặng lượt) bề rộng CỐ ĐỊNH (clamp) → tên con dài không vỡ layout;
   PHẢI ~2/3 (bảng tỉ lệ) chiếm phần còn lại. */
.lucky-admin-layout {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.lucky-admin-left {
    flex: 0 0 clamp(200px, 32%, 320px);
    min-width: 0;
}

.lucky-admin-left .lucky-rate-box,
.lucky-admin-left #adminBonusSpinRow {
    margin-top: 0;
}

.lucky-admin-right {
    flex: 1 1 0;
    min-width: 0;
}

.lucky-admin-right .lucky-rate-box {
    margin-top: 0;
}

/* Nút "Tặng" xếp DỌC, DÀI BẰNG NHAU; tên con quá dài bị cắt gọn (ellipsis). */
.lucky-admin-left #adminBonusSpinButtons {
    flex-direction: column;
    align-items: stretch;
}

.lucky-admin-left #adminBonusSpinButtons .btn-bonus {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Mobile: 2 vùng xếp DỌC, cột trái full bề rộng. */
@media (max-width: 800px) {
    .lucky-admin-layout {
        flex-direction: column;
    }

    .lucky-admin-left {
        flex: 1 1 auto;
        width: 100%;
        max-width: none;
    }
}

/* Hai nút Khôi phục + Lưu lại nằm cạnh nhau ở header */
.lucky-rate-header-actions {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

.lucky-rate-restore-btn {
    margin: 0;
}

.lucky-rate-hint {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: #5a6b7b;
}

.lucky-rate-table {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Danh sách giải dạng 2 cột */
.lucky-rate-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
}

.lucky-rate-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 72px 72px;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    background: #f7fbff;
}

/* Ô nhập "Mức" + nhãn nhỏ bên dưới (bên trong vẫn là trọng số). */
.lucky-rate-muc {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.lucky-rate-muc .lucky-rate-input {
    width: 100%;
}

.lucky-rate-muc-label {
    font-size: 11px;
    font-weight: 600;
    color: #7a8aa0;
    line-height: 1;
}

/* Dòng TỔNG: trải hết bề rộng, canh đều hai bên */
.lucky-rate-row.lucky-rate-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    background: transparent;
    font-weight: 700;
    color: #1f4e79;
    border-top: 1px dashed #d9eaf7;
    border-radius: 0;
    margin-top: 2px;
    padding-top: 10px;
}

.lucky-rate-icon {
    font-size: 20px;
    text-align: center;
}

.lucky-rate-name {
    font-size: 13.5px;
    color: #2c3e50;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lucky-rate-input {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 6px;
    border: 1px solid #cfe0f0;
    border-radius: 8px;
    font-size: 14px;
    text-align: center;
    color: #1f4e79;
}

.lucky-rate-input:focus {
    outline: none;
    border-color: #2f75b5;
    box-shadow: 0 0 0 2px rgba(47, 117, 181, 0.18);
}

.lucky-rate-total-wrap {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #2f75b5;
}

/* % TRÚNG THỰC TẾ: to, đậm, nổi bật (xanh lá) — đây là con số quan trọng nhất. */
.lucky-rate-percent {
    text-align: center;
    font-size: 18px;
    font-weight: 800;
    color: #1e8e57;
    white-space: nowrap;
}

.lucky-rate-foot .lucky-rate-name {
    flex: 1 1 auto;
    white-space: normal;
}

.lucky-rate-warn {
    margin: 10px 0 0;
    font-size: 13px;
    color: #c0392b;
    font-weight: 600;
}

@media (max-width: 600px) {

    /* Màn hẹp: về 1 cột cho dễ thao tác */
    .lucky-rate-grid {
        grid-template-columns: 1fr;
    }

    .lucky-rate-row {
        grid-template-columns: 26px minmax(0, 1fr) 72px 66px;
    }

    .lucky-rate-name {
        white-space: normal;
        font-size: 13px;
    }
}

/* Trong Settings, panel quản lý không cần auto-center 1100px — để nó fill
   theo bề rộng của settings-group-box (đã có padding 16px). */
.reward-admin-settings-box .reward-shop-admin-panel {
    max-width: 100%;
    margin: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px;
    scrollbar-gutter: stable;
}

/* Thanh cuộn nhỏ gọn, đồng tone xanh với hệ thiết kế */
.reward-admin-settings-box .reward-shop-admin-panel::-webkit-scrollbar {
    width: 8px;
}

.reward-admin-settings-box .reward-shop-admin-panel::-webkit-scrollbar-track {
    background: #f0f5fb;
    border-radius: 8px;
}

.reward-admin-settings-box .reward-shop-admin-panel::-webkit-scrollbar-thumb {
    background: #b8cee4;
    border-radius: 8px;
}

.reward-admin-settings-box .reward-shop-admin-panel::-webkit-scrollbar-thumb:hover {
    background: #2f75b5;
}

/* =========================================================
   📐 Desktop (>=901px): #section-settings LẤP ĐẦY cột phải (flex:1 1 auto từ .content-section)
   → đáy panel Cài đặt THẲNG HÀNG đáy cột menu trái (2 cột đã align-items:stretch theo viewport).
   KHÔNG khoá max-height cứng (720 cũ = chiều cao side-menu CŨ, nay đã lỗi thời do menu kéo giãn
   theo viewport). Vẫn dùng flex chain + min-height:0 để vùng danh sách thẻ "Quản lý phần thưởng"
   (và các tab cha khác) cuộn NỘI BỘ, không kéo scroll trang tổng.
   ========================================================= */
@media (min-width: 901px) {
    #section-settings:not(.hidden-section) {
        max-height: none;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    #section-settings .settings-panel {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    #section-settings .admin-tabs-container {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    #section-settings .admin-parent-tabs {
        flex: 0 0 auto;
    }

    /* Mặc định: tab cha cuộn nội bộ nếu có nội dung tràn */
    #section-settings .admin-parent-panel.active {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }

    /* Riêng tab "Cửa hàng đổi thưởng": flex chain để vùng cards cuộn, header ghim */
    #adminParentPanel-shop.admin-parent-panel.active {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    #adminParentPanel-shop .admin-child-tabs {
        flex: 0 0 auto;
    }

    #adminChildPanel-shop-manage.admin-child-panel.active {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    #adminChildPanel-shop-manage .reward-admin-settings-box {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    #adminChildPanel-shop-manage .reward-admin-header {
        flex: 0 0 auto;
    }

    #adminChildPanel-shop-manage .reward-shop-admin-panel {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
    }
}

/* Mobile: chiều cao linh hoạt theo viewport, vẫn cuộn nội bộ vùng cards */
@media (max-width: 900px) {
    .reward-admin-settings-box .reward-shop-admin-panel {
        max-height: calc(100vh - 320px);
        min-height: 220px;
    }
}

@media (max-width: 600px) {
    .reward-admin-header {
        flex-direction: column;
        align-items: stretch;
    }

    .reward-admin-save-btn {
        width: 100%;
    }
}

/* =========================================================
   📱 MOBILE ONLY — Đưa "Nộp bài / Đáp án / Finish" xuống NGAY DƯỚI vùng đề
   PC (≥ 901px) hoàn toàn không bị ảnh hưởng (chỉ áp dụng <= 900px).
   Kỹ thuật: display:contents phá các wrapper trung gian để 4 nút thành
   con trực tiếp của .content-area (flex column), rồi dùng `order` để
   đặt "Tạo đề mới" ở trên đề và 3 nút còn lại ở dưới đề.
   ========================================================= */
@media (max-width: 900px) {
    .content-area {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Phá vỡ các wrapper trung gian; selector con trực tiếp (`>`)
       trong .hide-exam-buttons vẫn hoạt động vì display:contents không
       thay đổi quan hệ DOM, chỉ thay đổi layout. */
    .control-area,
    .control-area .main-control-row,
    .control-area .main-control-row .exam-header-right {
        display: contents !important;
    }

    /* Gỡ position:fixed + các offset cũ của 3 nút "đè lên đề" */
    .btn-finish-exam,
    #answerAdminButton,
    #finishAdminButton {
        position: static !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        top: auto !important;
        transform: none !important;
        z-index: auto !important;
        margin: 6px auto !important;
        width: 220px !important;
        max-width: calc(100% - 32px) !important;
    }

    /* Thứ tự hiển thị dọc trên mobile:
       streak/today → Tạo đề mới → vùng câu hỏi → Đáp án → Finish → Nộp bài */
    .exam-header-left {
        order: 1 !important;
    }

    .btn-start-exam {
        order: 2 !important;
    }

    #section-questions {
        order: 3 !important;
    }

    #section-history,
    #section-shop,
    #section-quests,
    #section-settings,
    #section-playground {
        order: 3 !important;
    }

    #answerAdminButton {
        order: 4 !important;
    }

    #finishAdminButton {
        order: 5 !important;
    }

    .btn-finish-exam {
        order: 6 !important;
    }

    /* Không còn ghim đáy nên không cần đệm 90-110px chống che cuối bảng */
    .exam-table {
        margin-bottom: 12px !important;
    }
}

/* =========================================================
   📱 MOBILE FIX (≤ 900px) — 3 tinh chỉnh nhỏ, không ảnh hưởng PC:
   1. Đẩy nút "Tạo đề mới" xuống cách danh sách câu hỏi một khoảng trống.
   2. Ẩn icon ⚙️ ở footer side-menu khi menu đang gấp; chỉ hiện khi mở.
   3. 3 nút Đáp án / Finish / Nộp bài cao bằng "Tạo đề mới" (52px).
   ========================================================= */
@media (max-width: 900px) {

    /* 1. Khoảng trống giữa "Tạo đề mới" và khung câu hỏi */
    .btn-start-exam {
        margin-bottom: 16px !important;
    }

    /* 2. Khi menu gấp lại (chưa có .mobile-menu-open), ẩn luôn ⚙️ ở chân;
       khi bấm Menu để xổ list xuống thì gear hiện lại đúng vị trí cũ. */
    .side-menu:not(.mobile-menu-open) .side-menu-footer {
        display: none !important;
    }

    .side-menu.mobile-menu-open .side-menu-footer {
        display: flex !important;
    }

    /* 3. Ép 3 nút action có chiều cao 52px bằng .btn-start-exam.
       Một số rule mobile trước đó set padding:0 + height ngầm khiến nút
       trông thấp hơn; rule này khoá lại đồng nhất chiều cao. */
    .btn-finish-exam,
    #answerAdminButton,
    #finishAdminButton {
        height: 52px !important;
        min-height: 52px !important;
        padding: 0 16px !important;
        line-height: 1 !important;
    }

    /* 4. Đồng bộ style "Tạo đề mới" với 3 nút action (pill + viền trắng +
       bóng phẳng có màu). PC vẫn giữ kiểu 3D drop-shadow gốc. */
    .btn-start-exam {
        height: 52px !important;
        min-height: 52px !important;
        padding: 0 16px !important;
        line-height: 1 !important;
        border: 2px solid #ffffff !important;
        box-shadow: 0 8px 24px rgba(47, 117, 181, 0.4) !important;
    }
}

/* =========================================================
   👧 THÔNG TIN HỌC SINH — tab con trong "Thông tin chung"
   Hai cột: ảnh đại diện (40%) + form (60%). Không scrollbar.
   ========================================================= */
.student-info-box {
    overflow: hidden;
}

.student-info-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #e6eef7;
    margin-bottom: 14px;
}

.student-info-segmented {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    min-width: 0;
}

.student-info-segment-btn {
    width: 100%;
    padding: 8px 12px;
    border: 1.5px solid #b7c7d6;
    border-radius: 8px;
    background: #ffffff;
    color: #1f4e79;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.student-info-segment-btn:hover {
    background: #e8f1fb;
    border-color: #2f75b5;
}

.student-info-segment-btn.active {
    background: #2f75b5;
    color: #ffffff;
    border-color: #2f75b5;
    box-shadow: 0 4px 10px rgba(47, 117, 181, 0.25);
}

/* [MOBILE] Tab "Thông tin học sinh": PC hiện Tên hiển thị ĐẦY ĐỦ; điện thoại (≤640px) chỉ
   hiện tối đa 2 chữ CUỐI (vd "Trần Minh Nguyệt" → "Minh Nguyệt") cho gọn 1 tab. 2 span do JS
   xuất, chọn hiện theo bề rộng. KHÔNG đổi giá trị thật (ô input Tên vẫn lưu/hiện tên đầy đủ). */
.student-info-segment-btn .seg-name-short {
    display: none;
}

@media (max-width: 640px) {
    .student-info-segment-btn .seg-name-full {
        display: none;
    }

    .student-info-segment-btn .seg-name-short {
        display: inline;
    }
}

.student-info-active-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #1f4e79;
    font-size: 14px;
    cursor: pointer;
}

.student-info-active-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.student-info-body {
    display: flex;
    flex-direction: row;
    gap: 18px;
    /* [SỬA NÚT CHỌN ẢNH VỠ] flex-start (KHÔNG stretch): cột trái chỉ cao bằng nội dung
       (ảnh + nút), không bị kéo cao theo cột phải (đã cao hơn do thêm khối Ôn thi học kỳ)
       → nút "Chọn ảnh" (.settings-btn có flex:1) không còn bị giãn cao bất thường. */
    align-items: flex-start;
}

.student-info-left {
    flex: 0 0 40%;
    max-width: 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.student-info-photo-frame-box {
    position: relative;
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.student-info-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    z-index: 2;
}

.student-info-photo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Dùng đúng tỉ lệ 70% như .student-photo (sidebar) → preview và avatar
       sidebar hiển thị y hệt nhau sau khi cắt 1:1. */
    width: 70%;
    height: 70%;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
    z-index: 1;
}

.student-info-pick-photo-btn {
    min-width: 130px;
    /* Ghi đè flex:1 của .settings-btn để nút KHÔNG tự giãn (cao) trong cột dọc student-info-left. */
    flex: 0 0 auto;
}

.student-info-photo-input {
    display: none;
}

.student-info-right {
    flex: 1 1 60%;
    max-width: 60%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.student-info-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Hàng "Tên hiển thị" + "Biệt danh" nằm cạnh nhau: tên 2/3, biệt danh 1/3. */
.student-info-name-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.student-info-name-row .student-info-field-name {
    flex: 2 1 0;
    min-width: 0;
}

.student-info-name-row .student-info-field-nickname {
    flex: 1 1 0;
    min-width: 0;
}

/* Hàng "Lớp" + "Học kỳ" chia đôi đều nhau. */
.student-info-name-row .student-info-field-grade,
.student-info-name-row .student-info-field-semester {
    flex: 1 1 0;
    min-width: 0;
}

.student-info-field label {
    font-size: 13px;
    font-weight: 600;
    color: #1f4e79;
}

.student-info-input {
    padding: 8px 12px;
    border: 1.5px solid #b7c7d6;
    border-radius: 8px;
    background: #ffffff;
    color: #1f2937;
    font-size: 16px;
    width: 100%;
    box-sizing: border-box;
}

.student-info-input:focus {
    outline: none;
    border-color: #2f75b5;
    box-shadow: 0 0 0 2px rgba(47, 117, 181, 0.18);
}

.student-info-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 6px;
}

/* [ÔN THI] Khối cấu hình mở ôn thi theo lịch, ngay dưới Lớp & Học kỳ. */
.exam-review-config {
    gap: 8px;
    padding: 12px;
    border: 1.5px dashed #b7c7d6;
    border-radius: 10px;
    background: #f5f9fd;
}

.exam-review-config-title {
    font-size: 14px !important;
    font-weight: 700;
    color: #1f4e79;
}

.exam-review-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.exam-review-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    cursor: pointer;
    flex: 1 1 auto;
    min-width: 0;
}

.exam-review-toggle input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    accent-color: #2f75b5;
    cursor: pointer;
}

.exam-review-date {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.exam-review-num {
    width: 52px;
    padding: 8px 6px;
    border: 1.5px solid #b7c7d6;
    border-radius: 8px;
    background: #ffffff;
    color: #1f2937;
    font-size: 16px;
    text-align: center;
    box-sizing: border-box;
}

.exam-review-num:focus {
    outline: none;
    border-color: #2f75b5;
    box-shadow: 0 0 0 2px rgba(47, 117, 181, 0.18);
}

.exam-review-sep {
    font-weight: 700;
    color: #6b7280;
}

.exam-review-hint {
    margin: 2px 0 0;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}

@media (max-width: 480px) {
    .exam-review-row {
        align-items: flex-start;
    }
    .exam-review-toggle {
        flex: 1 1 100%;
    }
    .exam-review-date {
        flex: 1 1 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 800px) {
    .student-info-body {
        flex-direction: column;
    }

    .student-info-left,
    .student-info-right {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .student-info-photo-frame-box {
        width: 150px;
        height: 150px;
    }
}

/* =========================================================
   ✂️ MODAL CẮT ẢNH AVATAR HỌC SINH
   ========================================================= */
.student-info-cropper-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.student-info-cropper-modal.is-open {
    display: flex;
}

.student-info-cropper-card {
    background: #ffffff;
    border-radius: 14px;
    width: min(520px, 96vw);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.student-info-cropper-header {
    padding: 12px 18px;
    background: #2f75b5;
    color: #ffffff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.2px;
}

.student-info-cropper-stage {
    flex: 1 1 auto;
    background: #f3f6fa;
    padding: 10px;
    min-height: 320px;
    max-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.student-info-cropper-stage img {
    display: block;
    max-width: 100%;
    max-height: 60vh;
}

.student-info-cropper-tools {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 18px 16px;
    border-top: 1px solid #e6eef7;
}

.student-info-cropper-zoom-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #1f4e79;
    font-size: 14px;
}

.student-info-cropper-zoom-label input[type="range"] {
    flex: 1 1 auto;
    accent-color: #2f75b5;
}

.student-info-cropper-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* ==================== LƯỚI 15 Ô GIÁM SÁT TIẾN TRÌNH ==================== */
.math-progress-grid-box {
    margin: 12px 0 16px;
    padding: 12px 14px;
    border: 1px solid #c7d9f8;
    border-radius: 12px;
    background: #f4f8ff;
}

.math-progress-grid-title {
    font-weight: 700;
    color: #1f4e79;
    margin-bottom: 10px;
    font-size: 15px;
}

.math-progress-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.mpg-cell {
    border-radius: 10px;
    padding: 8px 6px;
    text-align: center;
    border: 1px solid #c7d9f8;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(31, 78, 121, 0.06);
    min-height: 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.mpg-cell-no {
    font-weight: 700;
    color: #1f4e79;
    font-size: 13px;
}

.mpg-cell-sheet {
    font-size: 12px;
    color: #333;
    line-height: 1.2;
    word-break: break-word;
}

.mpg-cell-streak {
    font-size: 12px;
    font-weight: 600;
    color: #1f4e79;
}

/* Đúng khối, học kỳ 1: nền xanh lá nhạt */
.mpg-cell--default {
    background: #eaf6e3;
    border-color: #b4dba3;
}

/* Đúng khối, đã lên học kỳ 2: nền xanh dương dịu */
.mpg-cell--sem2 {
    background: #dbe9fb;
    border-color: #93b6ec;
}

/* Học vượt cấp: viền vàng hoàng kim */
.mpg-cell--advanced {
    background: #fff8e0;
    border: 2px solid #d4a017;
    box-shadow: 0 0 0 1px #f1c54a inset;
}

/* Dưới khối mặc định: nền xám nhạt trung tính */
.mpg-cell--below {
    background: #ececec;
    border-color: #bdbdbd;
    color: #555;
}

@media (max-width: 560px) {
    .math-progress-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ===== Màn hình "Lịch sử theo ngày" — tab cha/con + danh sách nhóm theo ngày ===== */
/* Đồng bộ với tab cha "Khu vui chơi" (.garden-tabs-parent / .garden-tab-btn) */
.history-tabs-parent {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
    /* KHÔNG đặt overflow-x: auto ở đây — nó khiến overflow-y tự thành "auto" và sinh
       thanh cuộn dọc thừa khi hàng tab bị co trong cột flex. Tab tự xuống dòng nếu hẹp. */
    margin-bottom: 12px;
    margin-top: 0;
    padding-bottom: 4px;
    border-bottom: 2px solid #d9eaf7;
}

.history-parent-tab-btn {
    flex: 0 0 auto;
    padding: 10px 18px;
    border: none;
    border-radius: 12px 12px 0 0;
    background: #eef4f9;
    color: #1f4e79;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}

.history-parent-tab-btn:hover {
    background: #dbe9f6;
}

.history-parent-tab-btn.active {
    background: #1f4e79;
    color: #ffffff;
    border-bottom-color: #f0b400;
}

/* =======================================================================
   [CHỈ MOBILE ≤900px] STICKY HÀNG TAB CHA — màn Lịch sử + Khu vui chơi.
   Chỉ cố định TAB CHA khi cuộn (để luôn truy cập được); TAB CON KHÔNG sticky
   (cuộn theo nội dung). top = chiều cao thanh Menu (đang sticky top:0), JS đo
   runtime qua --app-mobile-sticky-top (không hardcode).
   PC (≥901px): KHÔNG áp (class do JS chỉ bật trên mobile + rule trong @media);
   2 màn giữ nguyên (panel flex tự cuộn như cũ).
   ======================================================================= */
@media (max-width: 900px) {

    /* Gỡ overflow của tổ tiên (vốn là scroll-container → phá native sticky) để
       tab cha dính theo CUỘN TRANG. Class do JS bật/tắt đúng màn đang xem; màn
       khác đang ẩn → không ảnh hưởng; body vẫn overflow-x:hidden chống tràn. */
    body.hist-parent-sticky .content-area,
    body.garden-parent-sticky .content-area {
        overflow: visible !important;
    }

    body.hist-parent-sticky #section-history .history-panel {
        overflow: visible !important;
    }

    /* Lịch sử: cố định hàng tab CHA. Nền = nền .main-panel (#fffaf0) → trùng nền
       sẵn có nên không đổi hình thức, chỉ để nội dung cuộn dưới không lộ qua. */
    #historyParentTabs {
        position: sticky;
        top: var(--app-mobile-sticky-top, 0px);
        z-index: 30;
        background: #fffaf0;
        box-shadow: 0 4px 10px rgba(31, 78, 121, 0.06);
    }

    /* Khu vui chơi: cố định hàng tab CHA. */
    #section-playground .garden-tabs-parent {
        position: sticky;
        top: var(--app-mobile-sticky-top, 0px);
        z-index: 30;
        box-shadow: 0 4px 10px rgba(31, 78, 121, 0.06);
    }
}

/* Khu vui chơi 641–900px: garden tab cha vốn TRONG SUỐT → thêm nền mờ đục
   (= nền panel) để nội dung cuộn không lộ qua khi dính. (≤640px đã có nền
   #f8fbff opaque sẵn nên bỏ qua, giữ nguyên hình thức.) */
@media (min-width: 641px) and (max-width: 900px) {
    #section-playground .garden-tabs-parent {
        background: #fffaf0;
    }
}

/* Đồng bộ với tab con "Khu vui chơi" (.garden-tabs-child / .garden-child-tab-btn) */
.history-tabs-child {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    flex-shrink: 0;
    margin-top: 6px;
    margin-bottom: 12px;
    padding: 6px 8px;
    border-radius: 10px;
    background: #f8fbff;
    border: 1px dashed #d9eaf7;
}

.history-child-tab-btn {
    flex: 0 0 auto;
    padding: 7px 14px;
    border: 1.5px solid #b7c7d6;
    border-radius: 999px;
    background: #ffffff;
    color: #1f4e79;
    font-weight: 600;
    font-size: 13.5px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    white-space: nowrap;
}

.history-child-tab-btn:hover {
    background: #e8f1fb;
    border-color: #2f75b5;
}

.history-child-tab-btn.active {
    background: #2f75b5;
    color: #ffffff;
    border-color: #2f75b5;
    box-shadow: 0 4px 10px rgba(47, 117, 181, 0.25);
}

.history-list-area {
    width: 100%;
}

/* Bảng lịch sử thống nhất — kế thừa .history-table (header xanh gradient + zebra),
   chỉ định lại bề rộng 4 cột và canh trái cho cột nội dung/ghi chú để đồng bộ với
   kiểu bảng "Lịch sử đổi thưởng" cũ. */
.activity-history-table {
    table-layout: fixed;
}

/* Bảng phẳng (đổi thưởng/vòng quay/khu vườn/rèn luyện/nhiệm vụ) đã BỎ cột Ghi chú →
   để tự co theo nội dung cho gọn (hoctap vẫn dùng layout cố định bên dưới). */
.activity-history-table:not(.hoctap-history-table) {
    table-layout: auto;
}

.activity-history-table:not(.hoctap-history-table) td:first-child,
.activity-history-table:not(.hoctap-history-table) th:first-child {
    white-space: nowrap;
}

.activity-history-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Bề rộng 4 cột bảng Lịch sử học tập: Ngày | Nội dung | Thời gian làm bài | Điểm. */
.hoctap-history-table th:nth-child(1),
.hoctap-history-table td:nth-child(1) {
    width: 16%;
}

.hoctap-history-table th:nth-child(2),
.hoctap-history-table td:nth-child(2) {
    width: 42%;
}

.hoctap-history-table th:nth-child(3),
.hoctap-history-table td:nth-child(3) {
    width: 24%;
}

.hoctap-history-table th:nth-child(4),
.hoctap-history-table td:nth-child(4) {
    width: 18%;
}

/* Khi ẩn cột "Thời gian làm bài" → bảng còn 3 cột: Ngày | Nội dung | Điểm. */
.hoctap-history-table.hide-exam-time th:nth-child(2),
.hoctap-history-table.hide-exam-time td:nth-child(2) {
    width: 62%;
}

.hoctap-history-table.hide-exam-time th:nth-child(3),
.hoctap-history-table.hide-exam-time td:nth-child(3) {
    width: 20%;
}

/* Ô "Thời gian làm bài" — chip thu gọn + chuỗi chi tiết xuống dòng gọn. */
.ah-col-time {
    text-align: left;
}

.ah-time-chip {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    background: #eef4fb;
    color: #1f4e79;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid #d7e6f5;
}

.ah-time-chip:hover {
    background: #dcebfa;
}

.ah-time-detail {
    margin-top: 5px;
    font-size: 12.5px;
    color: #5b6b7a;
    line-height: 1.5;
    word-break: break-word;
    white-space: normal;
}

/* Lịch sử học tập: dòng cha (ngày, bung/thu) + dòng con (từng bài) */
.hoctap-history-table .ah-parent-row {
    cursor: pointer;
}

.hoctap-history-table .ah-parent-row:hover {
    background: #f3f8fd;
}

.ah-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    border-radius: 5px;
    background: #e8f1fb;
    color: #1f4e79;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
}

.hoctap-history-table .ah-child-row {
    background: #fbfdff;
}

.hoctap-history-table .ah-child-cell {
    padding-left: 26px;
    color: #475569;
}

.hoctap-history-table .ah-legacy-note {
    color: #8a99ab;
    font-style: italic;
    padding-left: 26px;
}

/* Khi có cột "Số lần" (tab Vòng quay): bố cục 5 cột. */
.activity-history-table.has-count th:nth-child(1),
.activity-history-table.has-count td:nth-child(1) {
    width: 14%;
}

.activity-history-table.has-count th:nth-child(2),
.activity-history-table.has-count td:nth-child(2) {
    width: 40%;
}

.activity-history-table.has-count th:nth-child(3),
.activity-history-table.has-count td:nth-child(3) {
    width: 10%;
}

.activity-history-table.has-count th:nth-child(4),
.activity-history-table.has-count td:nth-child(4) {
    width: 12%;
}

.activity-history-table.has-count th:nth-child(5),
.activity-history-table.has-count td:nth-child(5) {
    width: 24%;
}

/* Cột Nội dung + Ghi chú canh trái cho dễ đọc; cho phép xuống dòng. */
.activity-history-table td.ah-col-title,
.activity-history-table td.ah-col-note {
    text-align: left;
    word-break: break-word;
    white-space: normal;
}

.activity-history-table td.ah-col-note {
    color: #7a8aa0;
    padding: 4px 8px;
}

/* Ô ghi chú có thể nhập, lưu khi focus out */
.ah-note-input {
    width: 100%;
    box-sizing: border-box;
    padding: 5px 8px;
    border: 1px solid #d7e2ee;
    border-radius: 6px;
    background: #ffffff;
    color: #1f2d3d;
    font-size: 13px;
    font-family: inherit;
}

.ah-note-input:focus {
    outline: none;
    border-color: #2f75b5;
    box-shadow: 0 0 0 2px rgba(47, 117, 181, 0.15);
}

.history-empty {
    text-align: center;
    color: #8a99ab;
    padding: 30px 10px;
}

/* =========================================================
   🔘 ĐỒNG BỘ KHUNG NÚT (đặt cuối để thắng các rule cũ — CHỈ hình dạng/kích cỡ,
   KHÔNG đổi màu). Token định nghĩa ở :root đầu file.
   ========================================================= */

/* Nhóm VỪA (md ~40px): nút hành động phổ biến */
.quest-btn,
.reward-shop-save-btn,
.reward-shop-delete-btn,
.reward-shop-add-btn,
.reward-detail-btn,
.rs-redeem-btn,
.reward-admin-save-btn,
.lucky-rate-restore-btn,
.quests-config-add,
.btn-bonus {
    border-radius: var(--btn-radius);
    padding: var(--btn-pad-y) var(--btn-pad-x);
    min-height: var(--btn-min-h);
}

/* Nhóm NHỎ (sm ~32px): nút inline nhỏ / kho phần thưởng / phụ */
.inventory-btn,
.btn-use,
.btn-points,
.btn-tickets,
.btn-use-ticket,
.quest-config-del,
.admin-password-submit,
.admin-password-cancel {
    border-radius: var(--btn-radius);
    padding: var(--btn-pad-y-sm) var(--btn-pad-x-sm);
    min-height: var(--btn-min-h-sm);
    font-size: var(--btn-font-sm);
}

/* Menu sidebar (trừ nút bánh răng tròn): bo + đậm đồng bộ, giữ canh trái */
.menu-link:not(.menu-settings-gear) {
    border-radius: var(--btn-radius);
    font-weight: var(--btn-font-weight);
}

/* Segmented "Thông tin học sinh" → mẫu tab con viên thuốc */
.student-info-segment-btn {
    border-radius: 999px;
}

/* Ngoại lệ tròn/icon: không ép chiều cao tối thiểu 40px (giữ kích cỡ riêng) */
.menu-settings-gear,
.admin-password-eye {
    min-height: 0;
}

/* ===== CHẶN AUTO-ZOOM KHI FOCUS Ô NHẬP TRÊN ĐIỆN THOẠI =====
   iOS Safari tự phóng to màn hình khi focus vào input có font-size < 16px
   (và bỏ qua user-scalable=no). Chỉ nhắm thiết bị cảm ứng qua (pointer: coarse)
   nên PC dùng chuột (pointer: fine) KHÔNG bị ảnh hưởng — giữ nguyên giao diện PC. */
@media (pointer: coarse) {

    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    textarea,
    select {
        font-size: 16px;
    }
}

/* =========================================================
   [ĐIỆN THOẠI] CHUẨN HOÁ TAB — CHỈ áp ≤640px. MÁY TÍNH GIỮ NGUYÊN như cũ.
   • Tab chính (Cài đặt + Lịch sử) -> 1 HÀNG, CUỘN NGANG (nhãn dài KHÔNG xuống 2 hàng).
   • Tab con chuyển nhanh (Khu vui chơi của trẻ + Lịch sử cấp con) -> CHIP viên thuốc.
   • Tab con trong Cài đặt -> ACCORDION (do JS dựng khi mobile: .tab-accordion*).
   Áp lên CHÍNH các class gốc nên KHÔNG đổi HTML; ngoài 640px mọi thứ về như cũ.
   ========================================================= */
@media (max-width: 640px) {

    /* ---- (1) TAB CHÍNH (Cài đặt + Lịch sử): CHỈ 1 HÀNG + CUỘN NGANG ----
       4–5 tab nhãn dài → KHÔNG xuống 2 hàng, KHÔNG cắt icon/chữ: mỗi tab gọn 1 dòng
       (white-space:nowrap bên dưới), tràn thì VUỐT NGANG (giống các hàng tab cuộn ngang
       khác trên mobile). Ẩn thanh cuộn cho gọn. */
    .admin-parent-tabs,
    .history-tabs-parent {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 10px;
    }

    .admin-parent-tabs::-webkit-scrollbar,
    .history-tabs-parent::-webkit-scrollbar {
        display: none;
    }

    .admin-parent-tab-btn,
    .history-parent-tab-btn {
        flex: none;
        width: auto;
        min-width: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 6px;
        padding: 10px 10px;
        min-height: 44px;
        border: 1.5px solid #d9eaf7;
        border-radius: 12px;
        /* chip bo đều (bỏ kiểu tab góc trên) */
        border-bottom: 1.5px solid #d9eaf7;
        background: #eef4f9;
        color: #1f4e79;
        font-size: 14px;
        font-weight: 700;
        white-space: nowrap;
        /* mỗi tab gọn 1 dòng; tràn thì CUỘN NGANG (KHÔNG xuống dòng) */
        line-height: 1.15;
    }

    .admin-parent-tab-btn.active,
    .history-parent-tab-btn.active {
        background: #1f4e79;
        color: #ffffff;
        border-color: #1f4e79;
    }

    /* ---- (2) CHIP CON (viên thuốc) cho Khu vui chơi (trẻ) + Lịch sử cấp con ----
       Scoped bằng id khu vực để THẮNG rule trong garden.css (nạp sau style.css). */
    #section-playground .garden-tabs-parent,
    #section-history .history-tabs-child {
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        overflow: visible;
        border: 1px dashed #d9eaf7;
        background: #f8fbff;
        border-radius: 10px;
        padding: 6px;
    }

    #section-playground .garden-tab-btn,
    #section-history .history-child-tab-btn {
        flex: 1 1 0;
        min-width: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 4px;
        padding: 8px 6px;
        min-height: 38px;
        border: 1.5px solid #cfddf0;
        border-radius: 999px;
        border-bottom: 1.5px solid #cfddf0;
        background: #ffffff;
        color: #1f4e79;
        font-size: 13px;
        font-weight: 600;
        white-space: normal;
        line-height: 1.1;
    }

    #section-playground .garden-tab-btn.active,
    #section-history .history-child-tab-btn.active {
        background: #e3eefb;
        color: #1f4e79;
        font-weight: 800;
        border-color: #2f75b5;
    }

    /* ---- (C) Cửa hàng trong Cài đặt: ẩn nav tab con thừa (1 mục) trên điện thoại ---- */
    #adminParentPanel-shop .admin-child-tabs {
        display: none !important;
    }

    /* ---- (3) ACCORDION cho tab con Cài đặt (JS dựng khi mobile) ---- */
    .tab-accordion {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .tab-accordion-item {
        border: 1px solid #d9eaf7;
        border-radius: 12px;
        background: #ffffff;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(31, 78, 121, 0.05);
    }

    .tab-accordion-header {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 13px 14px;
        border: none;
        background: #eef4f9;
        color: #1f4e79;
        font-weight: 800;
        font-size: 15px;
        text-align: left;
        cursor: pointer;
        min-height: 48px;
    }

    .tab-accordion-header:hover {
        background: #dbe9f6;
    }

    .tab-accordion-item.open>.tab-accordion-header {
        background: #1f4e79;
        color: #ffffff;
    }

    .tab-accordion-header .tab-accordion-ico {
        font-size: 18px;
        line-height: 1;
        flex: 0 0 auto;
    }

    .tab-accordion-header .tab-accordion-title {
        flex: 1 1 auto;
        min-width: 0;
    }

    .tab-accordion-header .tab-accordion-chevron {
        flex: 0 0 auto;
        font-size: 13px;
        transition: transform .2s ease;
    }

    .tab-accordion-item.open>.tab-accordion-header .tab-accordion-chevron {
        transform: rotate(180deg);
    }

    .tab-accordion-body {
        display: none;
        padding: 12px;
    }

    .tab-accordion-item.open>.tab-accordion-body {
        display: block;
    }
}

/* =========================================================
   [LỊCH SỬ] THẺ DỌC TRÊN ĐIỆN THOẠI (đồng bộ kiểu thẻ cửa hàng đổi thưởng).
   Máy tính (>640px) giữ BẢNG; điện thoại (≤640px) ẩn bảng phẳng, hiện thẻ.
   (Bảng "Lịch sử học tập" .hoctap-history-table xử lý ở lô sau — chưa ẩn ở đây.)
   ========================================================= */
.history-cards {
    display: none;
}

@media (max-width: 640px) {

    /* Ẩn TẤT CẢ bảng lịch sử (kể cả học tập), hiện danh sách thẻ */
    .activity-history-table {
        display: none;
    }

    .history-cards {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    /* Thẻ Lịch sử HỌC TẬP: bấm để bung/thu danh sách bài con */
    .hist-card-hoctap {
        cursor: pointer;
    }

    .hist-card-content .hist-hoctap-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        margin-right: 6px;
        border-radius: 5px;
        background: #e8f1fb;
        color: #1f4e79;
        font-weight: 700;
        font-size: 12px;
        line-height: 1;
        vertical-align: middle;
    }

    .hist-hoctap-children {
        margin-top: 4px;
        border-top: 1px dashed #e6eef7;
        padding-top: 7px;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .hist-subitem {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        font-size: 13px;
        color: #5b6b7a;
    }

    .hist-subitem .hist-subitem-main {
        display: flex;
        gap: 8px;
        min-width: 0;
    }

    .hist-subitem .hist-subitem-time {
        color: #9aa7b3;
        white-space: nowrap;
    }

    .hist-subitem .hist-subitem-title {
        color: #1f4e79;
        font-weight: 600;
        word-break: break-word;
    }

    .hist-subitem .hist-pill {
        font-size: 11.5px;
        padding: 2px 8px;
    }

    /* Nhóm phải của mỗi bài: chip thời gian + nhãn điểm. */
    .hist-subitem .hist-subitem-right {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
    }

    .hist-subitem-right .ah-time-chip {
        font-size: 11.5px;
        padding: 2px 8px;
    }

    /* Chuỗi chi tiết trong thẻ: tách dòng riêng, lùi vào cho gọn. */
    .hist-hoctap-children > .ah-time-detail {
        margin: -2px 0 2px 0;
        padding-left: 2px;
    }

    .hist-legacy-note {
        font-size: 12.5px;
        color: #9aa7b3;
        font-style: italic;
    }

    .hist-card {
        width: 100%;
        box-sizing: border-box;
        background: #ffffff;
        border: 1px solid #d9eaf7;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(31, 78, 121, 0.06);
        padding: 11px 13px;
        display: flex;
        flex-direction: column;
        gap: 7px;
    }

    /* HÀNG TRÊN: ngày (trái) + nhãn điểm (phải) */
    .hist-card-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .hist-card-date {
        color: #7a8a99;
        font-size: 12.5px;
        font-weight: 600;
        white-space: nowrap;
    }

    /* HÀNG GIỮA: nội dung đầy đủ, không cắt chữ */
    .hist-card-content {
        color: #1f4e79;
        font-size: 14.5px;
        font-weight: 700;
        line-height: 1.35;
        word-break: break-word;
    }

    /* HÀNG DƯỚI: số lần / phần thưởng */
    .hist-card-foot {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
    }

    .hist-card-reward {
        color: #5b6b7a;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.35;
        word-break: break-word;
    }

    /* Nhãn viên thuốc */
    .hist-pill {
        display: inline-block;
        padding: 4px 10px;
        border-radius: 999px;
        font-weight: 800;
        font-size: 12.5px;
        white-space: nowrap;
        flex: 0 0 auto;
    }

    .hist-pill-plus {
        background: #e2f3e5;
        color: #1e7e34;
    }

    /* cộng/được thưởng = xanh */
    .hist-pill-minus {
        background: #fde2e1;
        color: #d9362d;
    }

    /* trừ/đổi đi = đỏ */
    .hist-pill-neutral {
        background: #eef1f4;
        color: #5b6b7a;
    }

    /* số lần = xám */
}

/* =========================================================
   🔝 HEADER: tiêu đề (trái) + cụm icon Cài đặt/Đăng xuất (phải)
   Dời ⚙️ và 🚪 lên góc trên phải, ngang hàng tiêu đề.
   ========================================================= */
/* Lưới 3 cột: [spacer 1fr] [tiêu đề auto] [cụm icon 1fr].
   Hai cột 1fr hai bên bằng nhau → tiêu đề LUÔN căn giữa KHUNG, không bị
   cụm icon bên phải đẩy lệch. Cụm icon nằm cột phải, sát mép phải. */
.app-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    /* Khi .app là flex-column (desktop) thì header không bị co lại. */
}

.app-header h1 {
    grid-column: 2;
    text-align: center !important;
    margin: 6px 0 10px !important;
    min-width: 0;
    /* Cho phép tiêu đề co lại để không đẩy icon ra ngoài. */
}

.app-header-actions {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Icon SVG (nút Đăng xuất) hiển thị gọn, canh giữa trong nút. */
.header-icon-btn svg {
    display: block;
}

/* Nút icon trần ở header: vuông bo góc, vùng chạm ≥ 40px. */
.header-icon-btn {
    width: 42px;
    height: 42px;
    min-width: 42px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    border: 1px solid #d9eaf7;
    border-radius: 12px;
    background: #eef4f9;
    color: #1f4e79;
    cursor: pointer;
    transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}

.header-icon-btn:hover {
    background: #d9eaf7;
    box-shadow: 0 3px 10px rgba(31, 78, 121, 0.18);
}

.header-icon-btn:active {
    transform: scale(0.94);
}

/* Đăng xuất: cảnh báo (đỏ) + tách rời nút Cài đặt để trẻ khó bấm nhầm. */
.header-icon-logout {
    margin-left: 14px;
    border-color: #f3b6b2;
    background: #fdecea;
    color: #d9362d;
}

.header-icon-logout:hover {
    background: #fbd5d2;
    border-color: #ef9a96;
    box-shadow: 0 3px 10px rgba(217, 54, 45, 0.18);
}

/* --- Mobile: HAI icon LUÔN hiện ở góc phải (không giấu sau ☰ Menu) --- */
@media (max-width: 900px) {
    .app-header h1 {
        margin: 6px 0 8px !important;
    }

    .header-icon-btn {
        width: 38px;
        height: 38px;
        min-width: 38px;
        font-size: 18px;
        border-radius: 10px;
    }

    .header-icon-logout {
        margin-left: 10px;
    }
}

/* Màn rất hẹp (~360px): thu tiêu đề để không đè lên cụm icon. */
@media (max-width: 400px) {
    .app-header h1 {
        font-size: 19px !important;
        letter-spacing: 0 !important;
        line-height: 1.2 !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ==================================================================== */
/* [MẬT KHẨU CÀI ĐẶT LẦN ĐẦU] Gợi ý ở nút ⚙️ + màn ĐẶT mật khẩu.        */
/*  - Chấm đỏ trên nút bánh răng khi phụ huynh CHƯA đặt mật khẩu cài đặt.*/
/*  - Bong bóng nhắc (tự ẩn) treo dưới cụm icon, không vỡ header.        */
/* ==================================================================== */
.app-header-actions {
    position: relative;
    /* mốc neo cho bong bóng gợi ý (#settingsPwHint) */
}

/* Chấm đỏ thông báo trên nút ⚙️ (chỉ khi có class .has-settings-pw-hint). */
.header-icon-btn.has-settings-pw-hint {
    position: relative;
}

.header-icon-btn.has-settings-pw-hint::after {
    content: "";
    position: absolute;
    top: 1px;
    right: 1px;
    width: 11px;
    height: 11px;
    background: #ff3b30;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(217, 54, 45, 0.35);
    animation: settingsPwDotPulse 1.6s ease-in-out infinite;
}

@keyframes settingsPwDotPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.25); }
}

/* Bong bóng nhắc: treo dưới cụm icon góc phải, không đẩy layout header. */
.settings-pw-hint {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1200;
    max-width: 260px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 10px 9px 12px;
    background: #1f4e79;
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(31, 78, 121, 0.32);
    font-size: 13px;
    line-height: 1.4;
    text-align: left;
    animation: settingsPwHintIn 0.25s ease;
}

/* .settings-pw-hint khai báo SAU .hidden-section nên cần override cụ thể để ẩn đúng. */
.settings-pw-hint.hidden-section {
    display: none;
}

/* Mũi nhọn chỉ lên phía nút ⚙️ (⚙️ đứng TRƯỚC nút Đăng xuất; bong bóng neo right:0
   = mép phải nút Đăng xuất, nên đẩy mũi nhọn sang trái để trỏ vào tâm ⚙️ ~87px). */
.settings-pw-hint::before {
    content: "";
    position: absolute;
    top: -7px;
    right: 80px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #1f4e79;
}

@keyframes settingsPwHintIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.settings-pw-hint-text {
    flex: 1 1 auto;
}

.settings-pw-hint-close {
    flex: 0 0 auto;
    margin: -2px -2px 0 0;
    padding: 0;
    width: 22px;
    height: 22px;
    line-height: 1;
    font-size: 18px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    cursor: pointer;
}

.settings-pw-hint-close:hover {
    background: rgba(255, 255, 255, 0.32);
}

@media (max-width: 480px) {
    .settings-pw-hint {
        max-width: 78vw;
    }
    .settings-pw-hint::before {
        right: 70px;
    }
}

/* Màn ĐẶT mật khẩu cài đặt lần đầu (thay cổng NHẬP với phụ huynh chưa đặt). */
.settings-pw-setup {
    max-width: 460px;
    margin: 6px auto 14px;
    padding: 16px 16px 18px;
    background: #f3f8fc;
    border: 1px solid #d9eaf7;
    border-radius: 14px;
    text-align: center;
    box-sizing: border-box;
}

.settings-pw-setup-title {
    font-size: 17px;
    font-weight: 800;
    color: #1f4e79;
    margin-bottom: 6px;
}

.settings-pw-setup-desc {
    font-size: 13.5px;
    color: #4a6377;
    line-height: 1.5;
    margin-bottom: 12px;
}

.settings-pw-setup-fields {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.settings-pw-setup-fields .settings-pw-input {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    letter-spacing: 2px;
}

.settings-pw-setup-save {
    margin: 2px 0 0;
    padding: 11px 14px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: #2f75b5;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

.settings-pw-setup-save:hover {
    background: #285f93;
}

/* ==================================================================== */
/* [DASHBOARD] MÀN TỔNG QUAN CÁC CON — khớp tông app (xanh #1f4e79,      */
/*  nút #2f75b5, nền pastel, thẻ trắng/kem, viền nhạt #d9eaf7).          */
/* ==================================================================== */
.menu-link-dashboard {
    background: linear-gradient(135deg, #2f75b5, #1f4e79);
    color: #fff;
    font-weight: 800;
    margin-bottom: 8px;
}

.menu-link-dashboard:hover {
    filter: brightness(1.06);
}

.menu-link-dashboard.active-section {
    box-shadow: 0 0 0 2px #1f4e79 inset;
}

/* [ÔN THI] Container + mục "Ôn thi học kỳ" trong menu. Màu cam/vàng để nổi bật mục
   theo mùa (giới hạn thời gian), tách biệt với các mục thường. */
.exam-review-menu {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.exam-review-menu:not(:empty) {
    margin: 4px 0;
}
.menu-link-exam-review {
    background: linear-gradient(135deg, #f6a623, #e8590c);
    color: #fff;
    font-weight: 800;
    border: none;
}
.menu-link-exam-review:hover {
    filter: brightness(1.06);
}
.menu-link-exam-review.active-section {
    box-shadow: 0 0 0 2px #ad3e02 inset;
}

.dash-root {
    font-family: 'Nunito', 'Segoe UI', Arial, sans-serif;
    color: #1f4e79;
    max-width: 1100px;
    margin: 0 auto;
}

/* Mọi phần tử trong dashboard dùng border-box → bề rộng đã gồm padding+viền,
   nhờ vậy ô "Gần nhất" và cặp nút bên dưới khít đúng 2 lề trái/phải. */
.dash-root,
.dash-root * {
    box-sizing: border-box;
}

.dash-loading,
.dash-empty {
    padding: 28px 16px;
    text-align: center;
    color: #5b7a96;
    font-size: 16px;
}

/* --- Thanh đầu --- */
.dash-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid #d9eaf7;
    border-radius: 16px;
    padding: 16px 18px;
    margin-bottom: 14px;
    box-shadow: 0 2px 10px rgba(31, 78, 121, 0.06);
}

.dash-header-main {
    flex: 1 1 240px;
    min-width: 0;
}

.dash-greet {
    font-size: 18px;
}

.dash-greet strong {
    color: #1f4e79;
}

.dash-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.dash-contact {
    margin-top: 6px;
    font-size: 14px;
    color: #5b7a96;
}

.dash-header-actions {
    flex: 0 0 auto;
}

.dash-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #eef7ff;
    border: 1px solid #d9eaf7;
    color: #1f4e79;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 700;
}

.dash-chip-ok {
    background: #f0fff4;
    border-color: #bfe9cd;
    color: #2f7d4f;
}

.dash-chip-warn {
    background: #fff8e8;
    border-color: #f3dca0;
    color: #9a6b00;
}

.dash-chip-danger {
    background: #fdecec;
    border-color: #f3b6b6;
    color: #c0392b;
}

/* --- Dải Cần chú ý --- */
.dash-attention {
    border-radius: 14px;
    padding: 12px 16px;
    margin-bottom: 14px;
    font-size: 15px;
    font-weight: 700;
}

.dash-attention-warn {
    background: #fff8e8;
    border: 1px solid #f3dca0;
    color: #9a6b00;
}

.dash-attention-danger {
    background: #fdecec;
    border: 1px solid #f3b6b6;
    color: #c0392b;
}

/* --- Tiêu đề màn (gọn) --- */
.dash-titlebar {
    margin-bottom: 14px;
}

.dash-title {
    font-size: 20px;
    font-weight: 800;
    color: #1f4e79;
}

.dash-titlebar-house .dash-title {
    margin-top: 4px;
}

.dash-house-sub {
    margin-top: 6px;
    font-size: 14px;
    color: #5b7a96;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* --- Lưới thẻ con: GIÃN ĐỀU hết chiều ngang (auto-fit gom track trống) --- */
.dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    align-items: stretch;
}

.dash-card {
    background: linear-gradient(180deg, #ffffff, #fbfdff);
    border: 1px solid #d9eaf7;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 2px 10px rgba(31, 78, 121, 0.06);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform .15s ease, box-shadow .15s ease;
}

.dash-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(31, 78, 121, 0.12);
}

.dash-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dash-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #d9eaf7;
    background: #eef7ff;
    flex: 0 0 auto;
}

.dash-avatar-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 800;
    color: #2f75b5;
}

.dash-card-id {
    flex: 1 1 auto;
    min-width: 0;
}

.dash-card-name {
    font-size: 17px;
    font-weight: 800;
    color: #1f4e79;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-card-grade {
    font-size: 13px;
    color: #5b7a96;
}

.dash-level {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 800;
}

.dash-card-err {
    background: #fdecec;
    border: 1px solid #f3b6b6;
    color: #c0392b;
    border-radius: 10px;
    padding: 6px 10px;
    font-size: 13px;
}

.dash-card-score {
    font-size: 15px;
    color: #5b7a96;
    font-weight: 700;
}

.dash-score-num {
    font-size: 26px;
    font-weight: 900;
    color: #2f75b5;
}

.dash-activity {
    font-size: 13.5px;
    color: #466583;
    background: #f6fbff;
    border: 1px dashed #d9eaf7;
    border-radius: 10px;
    padding: 8px 10px;
    line-height: 1.4;
}

.dash-activity-label {
    font-weight: 800;
    color: #1f4e79;
}

.dash-activity-when {
    color: #8aa3ba;
    font-size: 12.5px;
    white-space: nowrap;
}

.dash-activity-empty {
    color: #9bb0c4;
    font-style: italic;
}

.dash-card-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
}

/* --- Nút chung của dashboard --- */
.dash-btn {
    /* flex-basis 0 → 2 nút CHIA ĐÔI ĐỀU (không chạy theo độ dài chữ) nên mép ngoài
       của cặp nút khít đúng 2 lề trái/phải của ô "Gần nhất" ngay bên trên. */
    flex: 1 1 0;
    min-width: 0;
    cursor: pointer;
    border: 1px solid #cfe2f4;
    background: #eef7ff;
    color: #1f4e79;
    border-radius: var(--btn-radius);
    padding: 9px 12px;
    min-height: var(--btn-min-h);
    font-family: inherit;
    font-weight: 700;
    font-size: 14px;
    transition: var(--btn-transition);
}

.dash-btn:hover {
    background: #e2f0fc;
}

.dash-btn-primary {
    background: #2f75b5;
    border-color: #2f75b5;
    color: #fff;
}

.dash-btn-primary:hover {
    background: #285f93;
}

.dash-btn-ghost {
    background: #fff;
    border-color: #d9eaf7;
}

.dash-btn-ghost:hover {
    background: #f3f9ff;
}

/* --- Lối tắt --- */
.dash-shortcuts {
    margin-top: 18px;
}

.dash-shortcuts-title {
    font-size: 13px;
    font-weight: 800;
    color: #8aa3ba;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 8px;
}

.dash-shortcuts-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.dash-shortcut {
    cursor: pointer;
    border: 1px solid #d9eaf7;
    background: #fff;
    color: #1f4e79;
    border-radius: 12px;
    padding: 10px 16px;
    font-family: inherit;
    font-weight: 700;
    font-size: 14px;
    transition: var(--btn-transition);
}

.dash-shortcut:hover {
    background: #eef7ff;
    transform: translateY(-1px);
}

/* --- Nút quay lại / tiêu đề chi tiết --- */
.dash-back {
    cursor: pointer;
    border: none;
    background: transparent;
    color: #2f75b5;
    font-family: inherit;
    font-weight: 800;
    font-size: 15px;
    padding: 4px 0;
    margin-bottom: 8px;
}

.dash-back:hover {
    text-decoration: underline;
}

.dash-detail-title {
    font-size: 20px;
    font-weight: 800;
    color: #1f4e79;
    margin-bottom: 14px;
}

.dash-detail-section-title {
    font-size: 15px;
    font-weight: 800;
    color: #1f4e79;
    margin: 16px 0 8px;
}

/* --- Biểu đồ --- */
.dash-chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin: 16px 0 8px;
}

.dash-chart-head .dash-chart-title {
    margin: 0;
}

/* Selectbox phạm vi: cỡ chữ ≥16px để điện thoại KHÔNG auto-zoom. */
.dash-chart-select {
    font-family: 'Nunito', 'Segoe UI', Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #1f4e79;
    background: #fff;
    border: 1.5px solid #d9eaf7;
    border-radius: 10px;
    padding: 8px 12px;
    min-height: 40px;
    cursor: pointer;
}

.dash-chart-select:focus {
    outline: none;
    border-color: #2f75b5;
    box-shadow: 0 0 0 3px rgba(47, 117, 181, 0.15);
}

.dash-chart-box {
    position: relative;
    /* mốc định vị cho tooltip */
    background: #fff;
    border: 1px solid #d9eaf7;
    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 2px 10px rgba(31, 78, 121, 0.06);
}

.dash-chart {
    width: 100%;
    height: 180px;
    display: block;
}

/* Tooltip nổi — không chặn chạm (pointer-events:none) để chạm xuyên xuống canvas. */
.dash-chart-tooltip {
    position: absolute;
    transform: translate(-50%, -115%);
    pointer-events: none;
    background: #1f4e79;
    color: #fff;
    border-radius: 8px;
    padding: 5px 9px;
    font-size: 12.5px;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(31, 78, 121, 0.25);
    z-index: 5;
}

.dash-chart-tooltip strong {
    display: block;
    font-size: 13.5px;
}

.dash-chart-tooltip span {
    display: block;
    opacity: 0.85;
    font-size: 11.5px;
}

.dash-chart-empty {
    background: #f6fbff;
    border: 1px dashed #d9eaf7;
    border-radius: 14px;
    padding: 22px;
    text-align: center;
    color: #8aa3ba;
}

/* --- 4 mảng lịch sử: 2 cột × 2 hàng (rộng, cân đối) --- */
.dash-hist-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.dash-hist-block {
    background: #fff;
    border: 1px solid #d9eaf7;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(31, 78, 121, 0.05);
}

.dash-hist-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #f6fbff;
    border-bottom: 2px solid var(--dash-cat-color, #2f75b5);
    font-weight: 800;
    color: #1f4e79;
}

.dash-hist-head-label {
    flex: 1 1 auto;
}

.dash-hist-count {
    background: #eef7ff;
    border-radius: 999px;
    padding: 1px 9px;
    font-size: 12px;
    color: #5b7a96;
}

.dash-hist-list {
    padding: 6px 10px;
}

.dash-hist-empty {
    padding: 14px;
    text-align: center;
    color: #9bb0c4;
    font-style: italic;
}

.dash-hist-row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 8px 4px;
    border-bottom: 1px solid #f0f6fc;
}

.dash-hist-row:last-child {
    border-bottom: none;
}

.dash-hist-icon {
    font-size: 18px;
    flex: 0 0 auto;
    line-height: 1.4;
}

.dash-hist-body {
    flex: 1 1 auto;
    min-width: 0;
}

.dash-hist-title {
    font-size: 14px;
    color: #1f4e79;
    font-weight: 700;
}

.dash-hist-note {
    font-size: 12.5px;
    color: #7a93ab;
    margin-top: 1px;
}

.dash-hist-right {
    flex: 0 0 auto;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.dash-hist-point {
    font-weight: 800;
    color: #2f7d4f;
    font-size: 14px;
}

.dash-hist-when {
    font-size: 11.5px;
    color: #9bb0c4;
    white-space: nowrap;
}

/* --- Phân trang --- */
.dash-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px;
    border-top: 1px solid #f0f6fc;
}

.dash-pager-btn {
    cursor: pointer;
    border: 1px solid #d9eaf7;
    background: #fff;
    color: #2f75b5;
    border-radius: 8px;
    width: 32px;
    height: 32px;
    font-size: 16px;
    font-weight: 800;
}

.dash-pager-btn:disabled {
    opacity: .4;
    cursor: default;
}

.dash-pager-info {
    font-size: 13px;
    color: #5b7a96;
    font-weight: 700;
}

/* --- Điện thoại: rớt 1 cột, nút/vùng chạm đủ lớn --- */
@media (max-width: 600px) {
    .dash-grid {
        grid-template-columns: 1fr;
    }

    .dash-hist-grid {
        grid-template-columns: 1fr;
    }

    .dash-header {
        padding: 14px;
    }

    .dash-greet {
        font-size: 17px;
    }

    .dash-card-actions {
        flex-direction: column;
    }

    .dash-btn {
        width: 100%;
    }
}

/* ==================================================================== */
/* [SIDEBAR GỌN] Dải CHIP đổi con (thay danh sách con dài).             */
/*  Chip giữ class menu-link/student-menu-link để logic cũ chạy nguyên; */
/*  ở đây override bằng độ ưu tiên cao hơn để hiển thị dạng "viên".     */
/* ==================================================================== */
.student-chip-bar {
    display: flex;
    flex-wrap: nowrap;
    /* 3 chip LUÔN 1 hàng trên desktop */
    gap: 6px;
    /* margin-top + padding-top: đẩy chip rời mép trên vùng cuộn (.side-menu-nav overflow)
       để cạnh trên chip KHÔNG bị mép cắt che, nhất là khi hover viền đậm. */
    margin: 0 0 12px;
    padding-top: 3px;
    padding-bottom: 12px;
    border-bottom: 1px solid #d9eaf7;
    /* tách chip với 3 mục chức năng */
}

.student-chip-bar .student-chip {
    position: relative;
    /* mốc z-index để viền không bị bóng chip bên cạnh đè */
    display: inline-flex;
    flex-direction: row;
    flex: 1 1 0;
    /* CHIA ĐỀU bề rộng → không vỡ 1 hàng */
    min-width: 0;
    /* cho phép co + ellipsis */
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 38px;
    padding: 7px 10px;
    margin: 0;
    border: 1.5px solid #d9eaf7;
    border-radius: 999px;
    background: #fff;
    color: #1f4e79;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
}

/* Tên dài hơn giới hạn (tên cũ) → cắt gọn "…", KHÔNG làm vỡ bố cục 1 hàng. */
.student-chip-bar .student-chip .student-chip-name {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ẩn badge "Đang làm/Đã nộp" trên CHIP để dành chỗ hiện đủ tên bé (logic badge giữ nguyên). */
.student-chip-bar .student-chip .student-badge {
    display: none !important;
}

.student-chip-bar .student-chip:hover {
    background: #eef7ff;
    /* Viền rõ + đủ cả 4 cạnh; z-index để nổi LÊN TRÊN bóng của chip đang chọn kế bên
       (trước đây bóng chip active đè làm "mất đường kẻ trên"). */
    border: 1.5px solid #7eb1de;
    color: #1f4e79;
    z-index: 2;
}

.student-chip-bar .student-chip.active-student {
    background: linear-gradient(135deg, #2f75b5, #1f4e79);
    border-color: #1f4e79;
    color: #fff;
    font-weight: 800;
    /* Bóng gọn (blur nhỏ, không spread) để KHÔNG lan sang đè viền chip kế bên. */
    box-shadow: 0 2px 5px rgba(31, 78, 121, 0.3);
    z-index: 1;
}

.student-chip-bar .student-chip.active-student .student-chip-name {
    color: #fff;
}

.student-chip-bar .student-chip .student-chip-name {
    white-space: nowrap;
}

.student-chip-bar .student-chip.active-student .student-badge {
    background: rgba(255, 255, 255, 0.28);
    color: #fff;
}

/* Mobile (≤900px): dải chip ẩn khi menu thu, hiện khi ☰ mở; chip vẫn xếp viên cuộn dòng. */
@media (max-width: 900px) {
    .side-menu .student-chip-bar {
        display: none;
    }

    .side-menu.mobile-menu-open .student-chip-bar {
        display: flex;
        flex-wrap: wrap;
    }

    .side-menu.mobile-menu-open .student-chip-bar .student-chip {
        display: inline-flex;
        width: auto;
        flex-direction: row;
    }
}

/* ==================================================================== */
/* [LÔ 1] MÀN LÀM BÀI DẠNG THẺ — trắc nghiệm ngang A–D có nhãn.          */
/*  (Lô 2: số cột theo số câu; Lô 3: màu trạng thái sau nộp.)            */
/* ==================================================================== */
.q-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Lô 2 sẽ tinh chỉnh số cột theo số câu */
    gap: 12px;
    align-items: stretch;
    /* đồng bộ chiều cao theo hàng — CSS Grid, KHÔNG JS */
    margin-top: 4px;
}

.q-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #fffdf8;
    /* trắng/kem */
    border: 1px solid #d9eaf7;
    border-radius: var(--border-radius-lg, 14px);
    padding: 13px 14px;
    box-sizing: border-box;
}

.q-card-no {
    font-size: 13px;
    color: #8aa3ba;
    font-weight: 700;
}

.q-card-text {
    font-size: 16px;
    color: #1f2d3d;
    font-weight: 600;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
}

.q-card-answer {
    margin-top: auto;
}

/* dồn vùng trả lời xuống đáy → các thẻ cùng hàng thẳng đáy */

/* Tự luận: ô nhập rộng full thẻ, THẤP gọn như giao diện cũ; cỡ chữ ≥16px (chống auto-zoom). */
.q-answer-input .answer-input,
.q-answer-input input {
    width: 100%;
    box-sizing: border-box;
    min-height: 30px;
    height: 30px;
    padding: 3px 8px;
    font-size: 16px;
}

/* Trắc nghiệm NGANG A–D có nhãn. */
.q-choices {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.q-choice {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    /* THẤP gọn như giao diện cũ */
    padding: 4px 8px;
    border: 1.5px solid #d9eaf7;
    border-radius: 8px;
    background: #fff;
    color: #1f4e79;
    font-family: inherit;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}

.q-choice:hover {
    background: #eef7ff;
}

.q-choice-value {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
}

/* Đang chọn (trắc nghiệm, chưa nộp) — xanh dương nhạt. */
.q-choice.selected {
    background: #e6f1fb;
    border-color: #2f75b5;
    color: #1f4e79;
}

.q-choice[disabled] {
    cursor: default;
}

/* Kết quả sau nộp (Lô 3 sẽ tô nền/viền thẻ + nút theo trạng thái). */
.q-result {
    margin-top: 2px;
    font-size: 13.5px;
    line-height: 1.35;
}

.q-result-badge {
    font-weight: 800;
    font-size: 13.5px;
}

.q-card.is-correct .q-result-badge {
    color: #2f7d4f;
}

.q-card.is-wrong .q-result-badge {
    color: #c0392b;
}

/* Bài sai: badge + đáp án đúng nằm CÙNG 1 dòng (xuống dòng mềm nếu đáp án quá dài). */
.q-correct-inline {
    color: #c0392b;
    font-weight: 700;
}

/* Điện thoại: 1 cột; trắc nghiệm xếp 2×2 (A B / C D). */
@media (max-width: 600px) {
    .q-grid {
        grid-template-columns: 1fr;
    }

    .q-choices {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== Phân số dọc (\frac{}{}) — tử trên / gạch ngang / mẫu dưới (thuần CSS) ===== */
.frac {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    vertical-align: middle;
    margin: 0 .18em;
    line-height: 1.04;
    text-align: center;
}

.frac-num {
    display: block;
    padding: 0 .4em;
}

.frac-den {
    display: block;
    padding: 2px .4em 0;
    border-top: 2px solid currentColor;
}

/* ===== Ô nhập phân số: dáng tử / gạch ngang / mẫu, căn giữa (giống phân số ở đề) ===== */
.frac-input {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    vertical-align: middle;
    gap: 4px;
}

/* Đặc hiệu cao + !important để THẮNG '.q-answer-input input{width:100%}' và '.answer-input{...!important}' */
.q-answer-input .frac-input input,
.frac-input input {
    width: 63px !important;
    height: auto !important;
    min-height: 0 !important;
    text-align: center;
    font-size: 18px !important;
    padding: 5px 4px !important;
    border: 1.5px solid #c7d9f8;
    border-radius: 6px;
    box-sizing: border-box;
}

.q-answer-input .frac-input input:focus,
.frac-input input:focus {
    border-color: #1f4e79;
    outline: none;
}

/* Đường gạch phân số đậm (khớp màu/độ dày gạch ở đề) */
.frac-input .frac-input-line {
    width: 100%;
    height: 2px;
    background: #1f4e79;
}

/* ===== Thẻ câu PHÂN SỐ: chỉ HÀNG (đề + ô nhập) là 2 cột; feedback nằm NGOÀI, dưới cùng ===== */
/* .q-content-row chỉ xuất hiện trong thẻ phân số -> feedback (.q-result) vẫn là block full-width dưới. */
.q-content-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.q-card.is-fraction .q-content-row .q-card-text {
    flex: 1 1 auto;
}

.q-card.is-fraction .q-content-row .q-card-answer {
    flex: 0 0 130px;
    display: flex;
    justify-content: center;
    /* QUAN TRỌNG: huỷ '.q-card-answer{margin-top:auto}' (vốn dồn vùng trả lời xuống đáy ở thẻ thường)
       — trong hàng phân số margin-top:auto đẩy phương án/ô nhập xuống đáy, làm align-items vô hiệu.
       Bỏ margin-top:auto -> align-items của hàng quyết định: INPUT căn giữa, MCQ top (flex-start). */
    margin-top: 0 !important;
}

/* Câu TRẮC NGHIỆM phân số: đẩy cụm phương án lên NGANG DÒNG ĐẦU của đề (top-align). */
.q-card.is-fraction[data-q-type="MCQ"] .q-content-row {
    align-items: flex-start;
}

/* Điện thoại: chật thì đề trên / ô nhập phân số xuống dòng & CĂN GIỮA; feedback vẫn dưới cùng */
@media (max-width: 600px) {
    .q-card.is-fraction .q-content-row {
        flex-wrap: wrap;
    }

    .q-card.is-fraction .q-content-row .q-card-answer {
        flex-basis: 100%;
        justify-content: center;
    }
}

/* ====================================================================
   [DỜI NÚT "THOÁT CÀI ĐẶT"] #finishAdminButton dời từ header vào panel Cài đặt,
   nằm cùng hàng với <h2>Cài đặt</h2> (tiêu đề trái, nút góc phải). Trung hoà mọi
   rule header/mobile-fixed cũ của #finishAdminButton để nó là nút thường trong hàng.
   GIỮ NGUYÊN id/onclick/logic ẩn-hiện (hidden-keep-space + setAdminModeVisible).
   ==================================================================== */
/* Hàng tiêu đề: "Cài đặt" CĂN GIỮA vùng; nút "Thoát Cài đặt" neo GÓC PHẢI (absolute,
   không đẩy tiêu đề → tiêu đề luôn ở giữa). */
.settings-title-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-bottom: 14px;
}

.settings-title-row h2 {
    margin: 0 !important;
    text-align: center;
}

/* Vô hiệu mọi vị trí/kích thước "header" + "nổi đáy mobile" cũ của nút; neo góc phải. */
.settings-title-row #finishAdminButton {
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    order: 0 !important;
    z-index: 2 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 60% !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 18px !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    font-size: 15px !important;
    border-radius: 12px !important;
    white-space: nowrap;
}

/* [KÉO LÊN] Đang ở Cài đặt → ẩn hàng header bài thi (trống) + thu lề để panel Cài đặt
   LÊN SÁT ĐỈNH, lấp vùng trống phía trên. Class do JS (showSection) bật → chạy mọi trình duyệt. */
body.settings-active .control-area {
    margin: 0 !important;
}

body.settings-active .main-control-row {
    display: none !important;
}

/* [CANH ĐÁY] KHÔNG đặt min-height cho panel Cài đặt: trên desktop (≥901px) lớp layout sẵn có
   (.app-layout{align-items:stretch} + .content-area{display:flex;column} + .content-section{flex:1 1 auto})
   ĐÃ tự canh đáy 2 cột bằng nhau; và #section-settings .settings-panel cần GIỮ min-height:0 để cuộn
   nội bộ (ép min-height sẽ CẮT nội dung tab admin trên laptop màn thấp). */

/* [ẨN TRÊN MOBILE] Nút "Thoát Cài đặt" TRÙNG chức năng với nút 🏠 ở header: khi đã mở khóa
   Cài đặt, cả hai đều gọi finishAdminMode() (lưu + khóa admin + về trang chính). Ở ≤900px nút
   header đã đổi thành 🏠 nên ẩn nút này cho gọn — KHÔNG mất lối thoát. PC (>900px) GIỮ NGUYÊN:
   header vẫn là ⚙️ (vào Cài đặt) nên đây là lối thoát chính. Chỉ ẩn HIỂN THỊ, KHÔNG đụng id/onclick/JS. */
@media (max-width: 900px) {
    .settings-title-row #finishAdminButton {
        display: none !important;
    }
}

/* =======================================================================
   [MOBILE BOTTOM NAV — CHỈ ≤900px] Thanh điều hướng dưới 5 mục.
   -----------------------------------------------------------------------
   • PC (≥901px): KHÔNG hiển thị (mặc định display:none) → PC giữ nguyên 100%
     sidebar + 4 menu link như cũ.
   • Mobile: thanh cố định đáy màn (fixed bottom), tô sáng mục đang mở, tự ẩn
     khi ở màn ngoài 5 mục (dashboard/settings/…) qua class .mbn-hidden do JS bật.
   • Auth-overlay (z-index:1000) che thanh khi chưa đăng nhập (thanh z-index:900).
   • Tôn trọng vùng "home indicator" iPhone qua env(safe-area-inset-bottom).
   • Trên mobile: ẩn 4 menu link cũ trong sidebar (tránh trùng) — GIỮ id/handler,
     chỉ ẩn bằng CSS; PC vẫn hiện đủ.
   ======================================================================= */

/* Mặc định (gồm PC ≥901px): ẩn hoàn toàn. */
.mobile-bottom-nav {
    display: none;
}

@media (max-width: 900px) {
    /* Chừa khoảng đáy cho nội dung cuối trang không bị thanh dưới che. */
    .content-area {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    }

    /* Thanh điều hướng dưới. */
    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 900;
        /* < 1000 (auth-overlay) để không đè màn đăng nhập */
        align-items: stretch;
        justify-content: space-around;
        background: rgba(248, 251, 255, 0.98);
        border-top: 1px solid #d9eaf7;
        box-shadow: 0 -4px 14px rgba(31, 78, 121, 0.14);
        padding: 0 0 env(safe-area-inset-bottom, 0px) 0;
        margin: 0;
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
    }

    /* JS bật class này để ẩn thanh ở màn ngoài 5 mục (dashboard/settings/…). */
    .mobile-bottom-nav.mbn-hidden {
        display: none;
    }

    /* Mỗi mục: override style button toàn cục (nền xanh/màu trắng/margin/min-height). */
    .mobile-bottom-nav .mbn-item {
        position: relative;
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: 56px;
        margin: 0;
        padding: 7px 2px;
        border: none;
        border-radius: 0;
        background: transparent;
        color: #5b7188;
        font-weight: 700;
        white-space: nowrap;
        cursor: pointer;
        box-shadow: none;
        -webkit-appearance: none;
        appearance: none;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        transition: color 0.15s ease;
    }

    /* Triệt tiêu hover/active toàn cục của button (translateY/đổi nền). */
    .mobile-bottom-nav .mbn-item:hover,
    .mobile-bottom-nav .mbn-item:hover:not(:disabled),
    .mobile-bottom-nav .mbn-item:active {
        background: transparent;
        transform: none;
        color: #1f4e79;
    }

    .mobile-bottom-nav .mbn-icon {
        font-size: 22px;
        line-height: 1;
    }

    .mobile-bottom-nav .mbn-label {
        font-size: 11px;
        line-height: 1.1;
    }

    /* Mục đang mở: sáng + có vạch vàng phía trên (đồng bộ tông gold #f0b400 của app). */
    .mobile-bottom-nav .mbn-item.mbn-active {
        color: #1f4e79;
    }

    .mobile-bottom-nav .mbn-item.mbn-active .mbn-label {
        font-weight: 800;
    }

    .mobile-bottom-nav .mbn-item.mbn-active::before {
        content: "";
        position: absolute;
        top: 0;
        left: 24%;
        right: 24%;
        height: 3px;
        border-radius: 0 0 3px 3px;
        background: #f0b400;
    }

    /* Ẩn 4 menu link cũ trong sidebar trên mobile (đã có bottom nav) — GIỮ id/handler,
       chỉ ẩn hiển thị. Cần !important để thắng rule .mobile-menu-open .menu-link{display:block}.
       KHÔNG ẩn #menu-dashboard ("← Tổng quan các con") — vẫn truy cập được. */
    #menu-shop,
    #menu-playground,
    #menu-quests,
    #menu-history {
        display: none !important;
    }
}

/* =======================================================================
   [MOBILE LÔ 2 — CHỈ ≤900px] LAYOUT 1 CỘT.
   -----------------------------------------------------------------------
   • Ẩn HẲN sidebar trái; gom thanh hạng + dải chip đổi con + mục Ôn thi + dòng
     "hôm nay" lên ĐẦU vùng nội dung (#mobileTopPanel). Hồ sơ con (avatar+tên+hạng)
     gom lên HEADER (#mobileHeaderProfile — xem block "HEADER MOBILE"). JS MobileLayout
     di chuyển phần tử THẬT, trả về sidebar/top-bar trên PC.
   • Header CỐ ĐỊNH trên cùng; thanh dưới (LÔ 1) cố định đáy; khối tầng-2 CUỘN.
   • PC (≥901px): KHÔNG áp gì (panel mặc định display:none; mọi rule trong @media).
   ======================================================================= */

/* Panel mặc định (gồm PC): ẩn. Trên PC nó luôn TRỐNG (JS không di chuyển gì vào). */
.mobile-top-panel { display: none; }

@media (max-width: 900px) {
    /* 1) Ẩn HẲN sidebar trái (đã gom nội dung cần thiết lên panel). !important để
       thắng cả trạng thái .mobile-menu-open cũ. */
    .side-menu { display: none !important; }

    /* Ẩn khối panel đầu nội dung ở màn Cài đặt + Tổng quan (đồng bộ với LÔ 1: thanh
       dưới cũng ẩn ở 2 màn này) — tránh chồng nội dung Cài đặt + nút "← Tổng quan"
       thừa khi đang Ở Tổng quan. Tái dùng class JS body.settings-active /
       body.dashboard-active (showSection bật), KHÔNG dùng :has() để chạy mọi trình duyệt. */
    body.settings-active .mobile-top-panel,
    body.dashboard-active .mobile-top-panel {
        display: none !important;
    }

    /* 2) Header CỐ ĐỊNH theo VIEWPORT (yêu cầu: chỉ header + thanh dưới cố định, tầng 2
       cuộn). DÙNG position:fixed (chắc chắn đứng yên dù nội dung cuộn trong body).
       LƯU Ý: .app có backdrop-filter (dòng 1612) — backdrop-filter trên tổ tiên PHÁ
       position:sticky VÀ làm position:fixed neo theo .app thay vì viewport → phải GỠ
       backdrop-filter của .app trên mobile thì fixed mới neo đúng viewport. Nội dung
       chừa padding-top = chiều cao header (đo runtime → --mobile-header-h; fallback 56px).
       z-index < thanh dưới (900) và < auth-overlay (1000). */
    .app {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        padding-top: var(--mobile-header-h, 56px) !important;
    }
    .app-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 70;
        background: #ffffff;
        box-shadow: 0 2px 10px rgba(31, 78, 121, 0.10);
        padding: 6px 8px;
    }

    /* 3) Khối đầu nội dung: hiện + xếp dọc, đặt TRƯỚC mọi mục khác trong content-area. */
    .mobile-top-panel {
        display: flex;
        flex-direction: column;
        gap: 10px;
        order: -1;
        margin: 4px 0 8px;
    }

    /* (Nút "← Tổng quan" + thẻ hồ sơ con KHÔNG còn vào panel — đã chuyển lên HEADER;
       xem block "HEADER MOBILE". Đã bỏ các rule cũ dành cho chúng trong panel.) */

    /* Thanh hạng trong panel: bỏ lề thừa (panel đã có gap). */
    .mobile-top-panel .top-bar { margin: 0; }

    /* Dải chip đổi con trong panel: xuống dòng + chip như trạng thái "menu mở" cũ
       (đã được kiểm chứng); bỏ viền/đệm "ngăn cách menu" của sidebar. */
    .mobile-top-panel .student-chip-bar {
        display: flex;
        flex-wrap: wrap;
        border-bottom: none;
        padding-bottom: 0;
        margin: 0;
    }
    .mobile-top-panel .student-chip-bar .student-chip {
        display: inline-flex;
        width: auto;
        flex-direction: row;
    }

    /* Tránh chừa khoảng trắng khi dòng "hôm nay" / mục Ôn thi đang TRỐNG. */
    .mobile-top-panel #todayScoreMessage:empty { display: none; }
    .mobile-top-panel #examReviewMenuContainer:empty { display: none; }
}

/* =======================================================================
   [HEADER MOBILE — CHỈ ≤900px] Header GỌN + CỐ ĐỊNH (avatar + tên + hạng).
   -----------------------------------------------------------------------
   • Ẩn tiêu đề app to + ô tài khoản → header 1 hàng: TRÁI = avatar nhỏ + tên +
     huy hiệu hạng (JS chuyển .student-profile-card vào #mobileHeaderProfile);
     PHẢI = nút Tổng quan (icon) + ⚙️ + 🚪.
   • Header đã sticky top (block trước) → avatar/tên/hạng LUÔN thấy khi cuộn;
     thanh hạng/chip/"hôm nay" cuộn cùng nội dung trong #mobileTopPanel.
   • PC (≥901px): KHÔNG áp gì (#mobileHeaderProfile mặc định display:none; mọi rule
     trong @media; nút Tổng quan + tiêu đề + sidebar giữ y như cũ).
   ======================================================================= */

/* PC + mặc định: slot header mobile ẩn (PC không thấy avatar trên header). */
.mobile-header-profile { display: none; }

@media (max-width: 900px) {
    /* Header 1 hàng: trái = hồ sơ gọn, phải = cụm icon. (Sticky/nền giữ từ block trước.) */
    .app-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    /* Ẩn tiêu đề app to + ô tài khoản trên mobile cho gọn (giữ id, chỉ ẩn; thông tin
       tài khoản vẫn xem trong Cài đặt). PC giữ nguyên cả hai. */
    .app-header h1 { display: none; }
    #authAccountBox { display: none !important; }

    .app-header-actions { flex: 0 0 auto; }

    /* Slot trái: cụm hồ sơ gọn. */
    .mobile-header-profile {
        display: flex;
        align-items: center;
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
    }

    /* Thẻ hồ sơ thu gọn thành cụm NGANG: [avatar] [tên / hạng]. Bỏ nền/viền/bóng của
       thẻ to. Ghi đè .student-profile-card{display:none} + .student-photo-box{display:none}
       (rule mobile cũ của bố cục sidebar). */
    .mobile-header-profile .student-profile-card {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: 8px;
        row-gap: 1px;
        width: auto;
        margin: 0;
        padding: 0;
        background: none;
        border: none;
        box-shadow: none;
        text-align: left;
        min-width: 0;
    }
    .mobile-header-profile .student-photo-box {
        display: flex !important;
        grid-column: 1;
        grid-row: 1 / span 2;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        justify-content: flex-start;
    }
    .mobile-header-profile .student-photo-frame-box {
        width: 42px !important;
        height: 42px !important;
        margin: 0 !important;
    }
    .mobile-header-profile #studentProfileName {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
        font-size: 14px;
        font-weight: 800;
        line-height: 1.15;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .mobile-header-profile #studentLevel {
        grid-column: 2;
        grid-row: 2;
        justify-self: start;
        margin: 0;
        padding: 1px 8px;
        font-size: 10.5px;
        box-shadow: none;
    }

    /* Nút "Tổng quan các con" (#menu-dashboard) trên header mobile = ICON vuông
       (đồng bộ ⚙️/🚪). Ẩn chữ "← Tổng quan các con" (giữ cho PC) bằng font-size:0 +
       icon qua ::before. Giữ NGUYÊN id + handler showSection('dashboard'). */
    .app-header-actions #menu-dashboard {
        width: 38px;
        height: 38px;
        min-width: 38px;
        /* !important cho padding/margin/border-radius để thắng block .menu-link
           (style.css ~4255-4259: padding/margin-bottom/border-radius đều !important),
           nếu không nút icon bị to/lệch thay vì vuông 38px gọn như ⚙️/🚪. */
        padding: 0 !important;
        margin: 0 !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        border: 1px solid #d9eaf7;
        border-radius: 10px !important;
        background: #eef4f9;
        color: #1f4e79;
        /* !important: thắng .menu-link{font-size:15px !important} (style.css ~4257) — nếu
           không, chữ "← Tổng quan các con" vẫn hiện 15px (nguyên nhân LỖI 3). */
        font-size: 0 !important;
        line-height: 1;
        overflow: hidden;
    }
    .app-header-actions #menu-dashboard::before {
        /* 📊 biểu đồ/Tổng quan — đổi từ 🏠 để KHÔNG trùng icon "về nhà" của nút ⚙️→🏠. */
        content: "📊";
        font-size: 18px;
        line-height: 1;
    }
    .app-header-actions #menu-dashboard:hover {
        background: #d9eaf7;
    }

    /* [MOBILE] Khi ĐANG ở Cài đặt: nút ⚙️ (#menu-settings) đổi icon thành 🏠 (về trang
       chính). Đổi icon bằng CSS (ẩn ⚙️ + ::before 🏠) — hành vi do onSettingsHeaderButtonClick,
       nhãn do updateSettingsHeaderButtonLabel. body.settings-active set cả ở PC nhưng rule
       trong @media nên CHỈ mobile; PC giữ ⚙️. !important để chắc thắng .header-icon-btn. */
    body.settings-active #menu-settings {
        font-size: 0 !important;
        overflow: hidden;
    }
    body.settings-active #menu-settings::before {
        content: "🏠";
        font-size: 18px;
        line-height: 1;
    }
}

/* =======================================================================
   [REWARD 2 DÒNG — CHỈ ≤900px] Tách thanh "🎯 Sắp lên hạng" trong panel thành
   2 DÒNG cho đủ thông tin (thay bố cục "1 dòng" cũ làm cắt cụt tên hạng):
     • DÒNG 1: nhãn + TÊN HẠNG đầy đủ (không cắt, không "…"; xuống dòng nếu quá dài).
     • DÒNG 2: thanh tiến độ + số điểm đầy đủ "X / Y điểm" (không rút gọn).
   CHỈ đổi LAYOUT (flex-wrap + bỏ ellipsis/nowrap) — KHÔNG đổi nội dung/cách tính
   hạng-điểm-%. Hiệu ứng "hot" (≥85%) ở .reward-progress-fill giữ nguyên.
   CHỈ áp thanh reward TRONG #mobileTopPanel (mobile). PC giữ nguyên 100%.
   ======================================================================= */
@media (max-width: 900px) {
    .mobile-top-panel .reward-progress-box {
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 8px;
        /* row-gap 4 (giữa 2 dòng) / column-gap 8 (giữa thanh và số ở dòng 2) */
    }

    /* DÒNG 1: nhãn + tên hạng — chiếm TRỌN hàng, hiện ĐẦY ĐỦ (không cắt "…"). */
    .mobile-top-panel .reward-progress-title {
        flex: 1 1 100%;
        min-width: 0;
        max-width: 100%;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        font-size: 14px;
        line-height: 1.25;
    }

    /* DÒNG 2: thanh tiến độ chiếm phần còn lại (bỏ min-width 180px của bản gốc để
       nhường chỗ cho số điểm; vẫn đủ rộng để thấy tiến độ). */
    .mobile-top-panel .reward-progress-track {
        flex: 1 1 auto;
        min-width: 80px;
    }

    /* DÒNG 2: số "X / Y điểm" hiện ĐẦY ĐỦ. white-space:normal để (a) số dài vẫn
       xuống dòng ở khoảng trắng thay vì tràn, (b) thông điệp "đã đạt hạng cao nhất"
       (text dài) không bị tràn ngang. */
    .mobile-top-panel .reward-progress-text {
        flex: 0 1 auto;
        white-space: normal;
        font-size: 13px;
    }
}