/* =========================================================
   Custom: Login modal (dùng cho Bài tập + Tài liệu)
   ========================================================= */

.xq-modal-backdrop{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  z-index:9998;
}

.xq-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:9999;
  align-items:center;
  justify-content:center;
  padding:18px;
}

.xq-modal.is-open{display:flex}
.xq-modal-backdrop.is-open{display:block}

.xq-modal-card{
  width:100%;
  max-width:420px;
  border:3px double var(--xq-border);
  background:#fff;
  border-radius:10px;
  overflow:hidden;
}

.xq-modal-head{
  background:var(--xq-panel);
  border-bottom:1px solid var(--xq-border);
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.xq-modal-title{font-weight:800}

.xq-modal-close{
  border:1px solid var(--xq-border2);
  background:#fff;
  cursor:pointer;
  padding:4px 10px;
  border-radius:8px;
  font-weight:700;
}

.xq-modal-body{
  padding:12px;
  background:var(--xq-panel2);
}

.xq-modal-body input{
  width:100%;
  margin-bottom:8px;
  padding:8px 10px;
  border:1px solid var(--xq-border2);
}

.xq-modal-msg{
  font-size:13px;
  color:#444;
  margin:0 0 10px 0;
}

.xq-modal-errors{
  display:none;
  margin:0 0 10px 0;
  padding:8px 10px;
  border:1px solid #e0b4b4;
  background:#fff0f0;
  color:#900;
  border-radius:8px;
  font-size:13px;
}

.xq-modal-actions{
  display:flex;
  gap:8px;
  align-items:center;
}

.xq-modal-actions .xq-btn{flex:1}

.xq-modal-actions a{
  font-size:12px;
  color:var(--xq-link);
  text-decoration:none;
}