/* DLQ Frontend (Astra-friendly) */
/* Scope: dlq- prefix only */

:root{
  --dlq-primary:#19a974;          /* nút xanh */
  --dlq-primary-2:#148a5f;
  --dlq-info:#1ea7fd;             /* nút xanh dương */
  --dlq-info-2:#0b84d8;
  --dlq-muted:#e9eef3;
  --dlq-muted-2:#d6dde6;
  --dlq-text:#1f2d3d;
  --dlq-sub:#6b7c93;
  --dlq-danger:#e74c3c;
  --dlq-danger-2:#c0392b;

  --dlq-card:#ffffff;
  --dlq-border:#e6edf5;
  --dlq-shadow:0 8px 22px rgba(15, 23, 42, 0.08);
  --dlq-radius:14px;

  --dlq-correct:#16a34a;
  --dlq-wrong:#ef4444;

  --dlq-pill:#f2f7ff;
  --dlq-pill-ghost:#f4f6f8;
  --dlq-explain:#fff3cd; /* vàng nhạt */
}

.dlq-wrap{
  font-family: inherit;
  color: var(--dlq-text);
}

.dlq-topbar{
  margin: 10px 0 14px;
}
.dlq-title{
  font-weight: 800;
  letter-spacing: .3px;
  font-size: 20px;
}

.dlq-grid{
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 16px;
  align-items: start;
}

@media (max-width: 980px){
  .dlq-grid{ grid-template-columns: 1fr; }
}

.dlq-card{
  background: var(--dlq-card);
  border: 1px solid var(--dlq-border);
  border-radius: var(--dlq-radius);
  box-shadow: var(--dlq-shadow);
  padding: 14px;
}

.dlq-row{
  display:flex;
  align-items:center;
}
.dlq-gap{ gap: 10px; }
.dlq-row-between{
  justify-content: space-between;
}
.dlq-subtitle{
  font-weight: 800;
  font-size: 14px;
  color: var(--dlq-text);
}
.dlq-mini{
  font-size: 12px;
  color: var(--dlq-sub);
}

.dlq-select{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--dlq-border);
  background: #fff;
  color: var(--dlq-text);
  font-size: 14px;
  outline: none;
}

.dlq-btn{
  border: 0;
  border-radius: 1px;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  text-decoration:none;
  user-select:none;
}

.dlq-btn:disabled,
.dlq-btn[disabled]{
  opacity: .55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none;
}

.dlq-btn:disabled:hover,
.dlq-btn[disabled]:hover{
  filter: none;
}

.dlq-btn-sm{
  padding: 8px 10px;
  border-radius: 1px;
  font-size: 13px;
}

.dlq-btn-full{ width: 100%; }

.dlq-btn-primary{
  background: var(--dlq-primary);
  color: #fff;
}
.dlq-btn-primary:hover{ background: var(--dlq-primary-2); }

.dlq-btn-info{
  background: var(--dlq-info);
  color: #fff;
}
.dlq-btn-info:hover{ background: var(--dlq-info-2); }

/* Yellow warning button (for launcher modal) */
.dlq-btn-warning{
  background: #facc15;
  color: #111827;
}
.dlq-btn-warning:hover{ background: #eab308; }

.dlq-btn-muted{
  background: var(--dlq-muted);
  color: var(--dlq-text);
}
.dlq-btn-muted:hover{ background: var(--dlq-muted-2); }

.dlq-btn-danger{
  background: var(--dlq-danger);
  color:#fff;
}
.dlq-btn-danger:hover{ background: var(--dlq-danger-2); }

.dlq-number-grid{
  margin-top: 10px;
  display:grid;
  --dlq-num-gap: 6px;
  --dlq-num-size: 34px;
  grid-template-columns: repeat(var(--dlq-num-cols, 6), minmax(0, 1fr));
  gap: var(--dlq-num-gap);
  max-height: calc(var(--dlq-num-rows, 10) * var(--dlq-num-size) + (var(--dlq-num-rows, 10) - 1) * var(--dlq-num-gap) + 8px);
  overflow:auto;
  padding: 4px;
}

@media (max-width: 980px){
  .dlq-number-grid{ --dlq-num-gap: 5px; --dlq-num-size: 32px; }
}
@media (max-width: 520px){
  .dlq-number-grid{ --dlq-num-gap: 4px; --dlq-num-size: 30px; }
}

.dlq-num{
  position: relative;
  border: 1px solid var(--dlq-border);
  background: #fff;
  color: var(--dlq-text);
  border-radius: 1px;
  height: var(--dlq-num-size, 34px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 0;
  line-height: 1;
  font-weight: 900;
  cursor:pointer;
  text-align:center;
  transition: transform .05s ease, background .15s ease, border-color .15s ease;
  box-shadow: 3px 3px 3px rgb(52 52 52 / 10%);
}
.dlq-num:hover{ transform: translateY(-1px); }
.dlq-num.is-active{
  outline: 2px solid rgb(237 165 34 / 25%);
  border-color: rgb(185 126 18 / 35%);
}
.dlq-num.is-answered{
  /* Thi thử: đã chọn đáp án => vàng để biết đã làm */
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.45);
}
.dlq-num.is-correct{
  background: rgba(22,163,74,.12);
  border-color: rgba(22,163,74,.35);
  color: var(--dlq-correct);
}
.dlq-num.is-wrong{
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.30);
  color: var(--dlq-wrong);
}

/* Bookmark marker (red dot on question number) */
.dlq-num.is-bookmarked::after{
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 2px rgba(255,255,255,.9);
}

/* Điểm liệt marker (option A): dấu * nhỏ góc trái trên nút câu */
.dlq-num.is-diem-liet::before{
  content: "*";
  position: absolute;
  top: 1px;
  left: 4px;
  font-size: 14px;
  line-height: 1;
  font-weight: 900;
  color: #ef4444;
  text-shadow: 0 0 0 2px rgba(255,255,255,.9);
}

.dlq-question-card{ position: relative; }

.dlq-q-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.dlq-q-meta{
  text-align:center;
  min-width: 160px;
}
.dlq-q-count{
  font-weight: 900;
  font-size: 16px;
}
.dlq-q-hint{
  margin-top: 3px;
  font-size: 12px;
  color: var(--dlq-sub);
}

.dlq-q-badges{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 10px;
}
.dlq-badge{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--dlq-muted);
  color: var(--dlq-text);
  font-weight: 900;
  font-size: 13px;
}
.dlq-badge-primary{
  background: rgba(25,169,116,.15);
  color: var(--dlq-primary);
}

.dlq-bookmark{
  margin-left: auto;
  border: 0;
  background: transparent;
  border-radius: 12px;
  width: 44px;
  height: 44px;
  padding: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color: #94a3b8; /* xám tro */
}
.dlq-bookmark .dlq-icon{
  display:block;
  width: 22px;
  height: 22px;
}
.dlq-bookmark .dlq-icon-on{ display:none; }
.dlq-bookmark.is-on{ color: #f59e0b; }
.dlq-bookmark.is-on .dlq-icon-off{ display:none; }
.dlq-bookmark.is-on .dlq-icon-on{ display:block; }
.dlq-bookmark.is-on{ }

.dlq-bookmark:focus-visible{
  outline: 2px solid rgba(245,158,11,.35);
  outline-offset: 2px;
}

.dlq-q-title{
  font-weight: 900;
  font-size: 18px;
  line-height: 1.35;
  margin-bottom: 12px;
}

.dlq-q-image{
  text-align: center;
  margin: 10px 0 12px;
}
.dlq-q-image img{
  display: inline-block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--dlq-border);
}

.dlq-choices{
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.dlq-choice{
  border: 1px solid #cfd7ff;
  background: #fff;
  border-radius: 1px;
  padding: 12px 12px;
  cursor:pointer;
  display:flex;
  gap: 10px;
  align-items:flex-start;
  transition: background .15s ease, border-color .15s ease, transform .08s ease, box-shadow .15s ease;
}
.dlq-choice:hover{
  background: #fbfff3;
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.10);
}

.dlq-choice.is-selected{
  border-color: rgba(31,45,61,.35);
  box-shadow: 0 0 0 2px rgba(31,45,61,.35);
  background: #ffeeb2;
}

.dlq-choice.is-selected{
  border-width: 2px;
  border-color: rgba(31, 45, 61, 0.45);
  background: #fff;
}

.dlq-choice .dlq-choice-no{
  min-width: 26px;
  height: 26px;
  border-radius: 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  border: 1px solid var(--dlq-border);
  background: var(--dlq-muted);
  color: var(--dlq-text);
}

.dlq-choice .dlq-choice-text{
  font-size: 14px;
  line-height: 1.45;
  color: var(--dlq-text);
  font-weight: 700;
}

.dlq-choice.is-correct{
  border-color: rgba(22,163,74,.35);
  background: rgba(22,163,74,.10);
}
.dlq-choice.is-wrong{
  border-color: rgba(239,68,68,.30);
  background: rgba(239,68,68,.08);
}
.dlq-choice.is-correct .dlq-choice-no{
  background: rgba(22,163,74,.15);
  color: var(--dlq-correct);
  border-color: rgba(22,163,74,.35);
}
.dlq-choice.is-wrong .dlq-choice-no{
  background: rgba(239,68,68,.12);
  color: var(--dlq-wrong);
  border-color: rgba(239,68,68,.35);
}

.dlq-explain{
  margin-top: 12px;
  background: var(--dlq-explain);
  border: 1px solid rgba(245,158,11,.35);
  border-radius: 12px;
  padding: 12px;
}
.dlq-explain-title{
  font-weight: 900;
  margin-bottom: 6px;
}
.dlq-explain-body{
  font-size: 14px;
  line-height: 1.5;
  color: #3b2f1a;
  font-weight: 700;
}

.dlq-memo{
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(245,158,11,.35);
}
.dlq-memo-title{
  font-weight: 900;
  margin-bottom: 6px;
}
.dlq-memo-body{
  font-size: 14px;
  line-height: 1.6;
  color: #3b2f1a;
}
.dlq-memo-body img{
  max-width: 100%;
  height: auto;
  display: block;
  margin: 10px auto;
}
.dlq-memo-body p{ margin: 0 0 10px; }
.dlq-memo-body *:last-child{ margin-bottom: 0; }

.dlq-q-bottom{
  margin-top: 14px;
  display:flex;
  justify-content: space-between;
  gap: 10px;
}

.dlq-loading{
  position:absolute;
  inset: 0;
  border-radius: var(--dlq-radius);
  background: rgba(255,255,255,.75);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  color: var(--dlq-text);
  backdrop-filter: blur(2px);
}

.dlq-stats{
  margin-top: 16px;
}

.dlq-stats-top{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
  margin-bottom: 10px;
}
.dlq-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--dlq-pill);
  border: 1px solid var(--dlq-border);
  font-weight: 900;
  color: var(--dlq-text);
}
.dlq-pill-ghost{
  background: var(--dlq-pill-ghost);
  text-decoration:none;
  color: var(--dlq-text);
}

.dlq-stats-card{
  background: var(--dlq-card);
  border: 1px solid var(--dlq-border);
  border-radius: var(--dlq-radius);
  box-shadow: var(--dlq-shadow);
  padding: 12px;
}

.dlq-stats-table{
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.dlq-stat-row{
  display:grid;
  grid-template-columns: 220px 1fr 120px;
  gap: 12px;
  align-items:center;
}
@media (max-width: 720px){
  .dlq-stat-row{ grid-template-columns: 1fr; }
}

.dlq-stat-name{
  font-weight: 900;
  color: var(--dlq-text);
}

.dlq-bar{
  height: 12px;
  border-radius: 999px;
  background: var(--dlq-muted);
  overflow:hidden;
  border: 1px solid var(--dlq-border);
}
.dlq-bar > span{
  display:block;
  height: 100%;
  background: var(--dlq-primary);
  width: 0%;
}

.dlq-stat-right{
  text-align:right;
  font-weight: 900;
  color: var(--dlq-sub);
}

.dlq-exam-config{
  margin-bottom: 14px;
}
.dlq-exam-note{
  margin-top: 8px;
  font-size: 13px;
  color: var(--dlq-sub);
  font-weight: 700;
}

/* ===== Exam: Result summary (full width like official mock test) ===== */
.dlq-exam-summary{ margin-bottom: 14px; }
.dlq-exam-summary-card{
  background: var(--dlq-card);
  border: 1px solid var(--dlq-border);
  border-radius: var(--dlq-radius);
  overflow: hidden;
  box-shadow: var(--dlq-shadow);
}
.dlq-exam-summary-head{
  background: linear-gradient(90deg, var(--dlq-info), var(--dlq-info-2));
  color: #fff;
  font-weight: 900;
  letter-spacing: .3px;
  padding: 12px 14px;
  text-align: center;
}
.dlq-exam-summary-head span{ font-weight: 900; }
.dlq-exam-summary-status{
  padding: 12px 14px;
  text-align: center;
  font-weight: 900;
  color: var(--dlq-wrong);
}
.dlq-exam-summary-status.is-pass{ color: var(--dlq-correct); }
.dlq-exam-summary-table{ border-top: 1px solid var(--dlq-border); }
.dlq-exam-summary-row{
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--dlq-border);
}
.dlq-exam-summary-row .label{ font-weight: 900; }
.dlq-exam-summary-row .value{ font-weight: 900; }
.dlq-exam-summary-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-top: 1px solid var(--dlq-border);
  background: #f8fafc;
}

.dlq-exam-result{
  margin-top: 14px;
}
.dlq-result-title{
  font-weight: 900;
  font-size: 18px;
  margin-bottom: 8px;
}
.dlq-result-line{
  font-weight: 800;
  color: var(--dlq-text);
  margin: 4px 0;
}
.dlq-wrong-list{
  margin-top: 10px;
  padding-left: 18px;
}
.dlq-wrong-list li{
  margin: 8px 0;
}
.dlq-wrong-q{
  font-weight: 900;
}
.dlq-wrong-meta{
  color: var(--dlq-sub);
  font-weight: 800;
  font-size: 13px;
}

/* ===== Exam: Timer bar ===== */
.dlq-exam-timer{ margin: 12px 0 14px; }
.dlq-exam-timer-track{
  position: relative;
  height: 44px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  background: #e8f3ff;
}
.dlq-exam-timer-fill{
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 100%;
  background: linear-gradient(90deg, #1ea7fd, #0b84d8);
  transition: width .2s linear;
}
.dlq-exam-timer-text{
  position: relative;
  z-index: 1;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: aliceblue;
  text-shadow: 2px 2px 6px rgba(0,0,0,.45);
}

/* ===== Modal ===== */
html.dlq-modal-open{ overflow: hidden; }
.dlq-modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 999999;
}
.dlq-modal{
  position: relative;
  width: min(520px, 100%);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
  padding: 18px;
}
.dlq-modal-close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  color: #6b7280;
}
.dlq-modal-close:hover{
  background: rgba(0,0,0,.06);
  color: #111827;
}
.dlq-modal-title{
  font-size: 18px;
  font-weight: 900;
  margin-bottom: 10px;
}
.dlq-modal-body{
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 14px;
}
.dlq-modal-actions{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.dlq-modal-actions.is-between{ justify-content: space-between; }
.dlq-result-auto{
  margin-top: 10px;
}


/* Result line inside explain */
.dlq-explain-result{
  margin: 6px 0 10px;
  font-weight: 900;
  font-size: 22px;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}
.dlq-explain-result::before{
  font-size: 22px;
  line-height: 1;
}
.dlq-explain-result.is-correct{ color: var(--dlq-correct); }
.dlq-explain-result.is-correct::before{ content: "✓"; color: var(--dlq-correct); }
.dlq-explain-result.is-wrong{ color: var(--dlq-wrong); }
.dlq-explain-result.is-wrong::before{ content: "✕"; color: var(--dlq-wrong); }

/* Confetti (canvas) */
.dlq-confetti-canvas{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99999;
}

/* Warning overlay */
.dlq-warning-overlay{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dlq-warning-icon{
  width: min(300px, 68vw);
  height: min(300px, 68vw);
  opacity: 0;
  transform: scale(0.92);
  filter: drop-shadow(0 18px 30px rgba(15, 23, 42, 0.18));
  display: flex;
  align-items: center;
  justify-content: center;
}
.dlq-warning-icon svg{
  width: 100%;
  height: 100%;
  display: block;
}

.dlq-warning-overlay.is-show .dlq-warning-icon{
  animation: dlq-warning-pop 1s ease forwards;
}
@keyframes dlq-warning-pop{
  0%   { opacity: 0;   transform: scale(0.92); }
  15%  { opacity: .75; transform: scale(1.00); }
  85%  { opacity: .75; transform: scale(1.00); }
  100% { opacity: 0;   transform: scale(1.02); }
}

/* Learn mode: lock choices after first answer (do not allow changing answer) */
#dlq-app.dlq-answered .dlq-choice {
  pointer-events: none;
}
#dlq-app.dlq-answered .dlq-choice:hover {
  transform: none !important;
  box-shadow: none !important;
}