/* style.kq.css - Giao diện Bảng Vàng */
body { font-family: 'Segoe UI', sans-serif; background:#f4f7f6; padding:20px; text-align:center; }
.grid { display:flex; flex-wrap:wrap; gap:25px; justify-content:center; margin-top:30px; }
.card { background:white; border-radius:15px; width:320px; box-shadow:0 8px 20px rgba(0,0,0,0.1); overflow:hidden; position:relative; display:flex; flex-direction:column; transition: 0.3s; }
.card:hover { transform: translateY(-5px); }
.card img { width:100%; height:180px; object-fit:cover; border-bottom:1px solid #eee; cursor:pointer; }
.card-info { padding:10px; font-weight:bold; color:#0056b3; font-size:1.1em; }

.btn-del { position:absolute; top:10px; right:10px; background:rgba(255, 77, 79, 0.9); color:white; border:none; border-radius:5px; padding:5px 8px; cursor:pointer; z-index:10; font-weight:bold;}
.sb3-zone { padding:30px 10px; background:#e3f2fd; color:#1565c0; flex-grow:1; }
.btn-down { display:inline-block; margin-top:10px; padding:8px 15px; background:#28a745; color:white; text-decoration:none; border-radius:20px; font-size:0.9em; font-weight:bold;}

/* Khu vực nhận xét cho Thầy */
.comment-area { padding:15px; background:#fff; border-top:1px solid #eee; text-align:left; }
.comment-area label { font-size:0.8em; color:#666; font-weight:bold; }
.comment-area textarea { width:100%; height:60px; margin-top:5px; border:1px solid #ddd; border-radius:5px; padding:8px; font-family:inherit; resize:none; box-sizing:border-box; }
.btn-save { width:100%; margin-top:8px; padding:8px; background:#007bff; color:white; border:none; border-radius:5px; cursor:pointer; font-weight:bold; }

/* Chế độ xem của Học sinh */
.student-comment { padding:15px; background:#e8f4f8; border-top:2px solid #bce8f1; text-align:left; flex-grow: 1;}
.student-comment h4 { margin:0 0 5px 0; color:#31708f; font-size:0.9em;}
.student-comment p { margin:0; color:#333; font-weight:500; font-style:italic;}

#mode-badge { display:inline-block; padding:8px 20px; border-radius:25px; font-weight:bold; cursor:pointer; margin-top:10px; color:white; background:#ff9800; box-shadow: 0 4px 10px rgba(0,0,0,0.2); transition:0.3s;}
#mode-badge:hover { transform: scale(1.05); }

/* THÊM MỚI: Modal Đăng Nhập Giáo Viên */
.login-modal {
    display: none; position: fixed; z-index: 20000; left: 0; top: 0; 
    width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); 
    justify-content: center; align-items: center; backdrop-filter: blur(5px);
}
.login-modal.show { display: flex; }
.login-box {
    background: #fff; padding: 40px; border-radius: 20px; 
    border: 3px solid #007bff; text-align: center; color: #333; 
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); width: 400px; max-width: 90%;
}
.login-box h2 { margin-top: 0; color: #007bff; }
.login-box p { font-size: 1em; color: #666; margin-bottom: 20px; }
.login-box input {
    width: 100%; padding: 12px; margin-bottom: 20px; border-radius: 8px; 
    border: 1px solid #ccc; font-size: 1.1em; text-align: center; outline: none; box-sizing: border-box;
}
.login-box input:focus { border-color: #007bff; }
.login-box button {
    padding: 12px; background: #007bff; border: none; color: white; 
    font-weight: bold; font-size: 1.1em; border-radius: 8px; 
    cursor: pointer; transition: 0.3s; width: 100%; margin-bottom: 10px;
}
.login-box button:hover { background: #0056b3; }
.login-box .btn-cancel { background: #dc3545; }
.login-box .btn-cancel:hover { background: #c82333; }