@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap');

body { font-family: 'Plus Jakarta Sans', sans-serif; }

/* Nút bấm trắc nghiệm 3D - Bấm lún cực đã */
.option-btn {
    background-color: #ffffff;
    border: 2px solid #e2e8f0;
    box-shadow: 0 4px 0 0 #cbd5e1;
    transition: all 0.08s ease;
}
.option-btn:hover:not(:disabled) {
    border-color: #f59e0b; /* Màu Amber 500 */
    background-color: #fffbeb; /* Màu Amber 50 */
}
.option-btn:active:not(:disabled) {
    transform: translateY(4px);
    box-shadow: 0 0 0 0 #cbd5e1;
}

/* Khi đã chọn đúng */
.opt-correct {
    background-color: #ecfdf5 !important;
    border-color: #10b981 !important;
    box-shadow: 0 2px 0 0 #059669 !important;
    color: #065f46 !important;
}
/* Khi chọn sai */
.opt-wrong {
    background-color: #fff1f2 !important;
    border-color: #f43f5e !important;
    box-shadow: 0 2px 0 0 #e11d48 !important;
    color: #881337 !important;
}
/* Hiệu ứng loading bar */
.progress-animate {
    transition: width 0.3s ease-in-out;
}

/* ===== HỖ TRỢ ĐIỆN THOẠI & IPAD ===== */
/* Vùng chạm tối thiểu 44px theo khuyến nghị Apple/Google cho các nút bấm
   trắc nghiệm và nút hành động chính, tránh bấm nhầm trên màn cảm ứng. */
@media (pointer: coarse) {
    .option-btn { min-height: 48px; }
    button, .qb-btn-edit, .qb-btn-delete, .qb-btn-add, .qb-btn-mini, .qb-btn-upload {
        min-height: 40px;
    }
}
/* Tôn trọng vùng an toàn (notch/thanh cử chỉ) trên iPhone/iPad khi hiển thị
   toàn màn hình (PWA / thêm vào màn hình chính). */
#mobile-topbar { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
body { padding-bottom: env(safe-area-inset-bottom); }
/* Khoá cuộn nền khi menu ngăn kéo di động đang mở (bổ sung cho class
   Tailwind overflow-hidden được toggle bằng JS ở index.html/arena.html) */
body.overflow-hidden { overflow: hidden; }

/* Custom animations & Scrollbar */
.fade-in { animation: fadeIn 0.3s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
/* ===== HIỆU ỨNG "+500đ" BAY LÊN KHI CHỌN ĐÁP ÁN ĐÚNG ===== */
.score-float-anim {
    position: fixed;
    transform: translate(-50%, 0);
    font-weight: 900;
    font-size: 1.1rem;
    color: #10b981;
    text-shadow: 0 1px 0 rgba(255,255,255,0.6);
    pointer-events: none;
    z-index: 9999;
    animation: scoreFloatUp 1.1s ease-out forwards;
}
@keyframes scoreFloatUp {
    0%   { opacity: 0; transform: translate(-50%, 0) scale(0.7); }
    15%  { opacity: 1; transform: translate(-50%, -10px) scale(1.15); }
    100% { opacity: 0; transform: translate(-50%, -70px) scale(1); }
}

/* ===== KHO ĐỀ / KHO TÀI LIỆU ===== */
.bank-doc-row {
    transition: background-color 0.15s ease;
}
.bank-doc-row:hover { background-color: #f8fafc; }
.bank-featured-card {
    border: 2px solid #fbbf24 !important;
    box-shadow: 0 4px 14px 0 rgba(251, 191, 36, 0.18);
}
.bank-new-badge {
    background: linear-gradient(135deg, #f43f5e, #fb923c);
}

/* ===== AUTH SCREEN - WAYGROUND STYLE ===== */
#screen-auth input:focus {
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);
}
#screen-auth .auth-card {
    backdrop-filter: blur(20px);
}