/* ══════════════════════════════════════════════
   AE-PLX-LANGSON – Module HỌC TIẾNG ANH
   static/css/dientu.css  (Phase 5: Điền Từ)
   Dùng KÈM english.css + quiz.css
   ══════════════════════════════════════════════ */

.dt-zone{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  width:100%;max-width:620px;
}

/* Câu bị khuyết từ */
.dt-sentence{
  font-size:22px;font-weight:700;color:#fff;
  text-align:center;line-height:1.6;
  background:rgba(42,127,255,.06);
  border:1px solid rgba(42,127,255,.15);
  border-radius:14px;padding:18px 22px;width:100%;
}
.dt-sentence .dt-blank{
  color:#4a9fff;letter-spacing:2px;
  border-bottom:2px dashed rgba(42,127,255,.5);
  padding:0 4px;
}
.dt-sentence.dt-meaning-mode{font-size:26px;color:#8ec0ff;}

.dt-hint-vi{
  font-size:13px;color:var(--muted);font-style:italic;text-align:center;
  min-height:0;
}

/* Ô nhập + nút kiểm tra */
.dt-input-row{display:flex;gap:10px;width:100%;max-width:480px;}
.dt-input{
  flex:1;padding:13px 18px;border-radius:12px;
  background:var(--surface2);
  border:1px solid rgba(42,127,255,.25);
  font-size:17px;font-weight:700;color:#fff;
  font-family:inherit;outline:none;
  text-align:center;letter-spacing:1px;
  transition:.2s;
}
.dt-input::placeholder{color:#2a4a5a;font-weight:500;font-size:13px;letter-spacing:0;}
.dt-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(42,127,255,.15);}
.dt-input.good{border-color:#00c864;box-shadow:0 0 0 3px rgba(0,200,100,.15);color:#00e87a;}
.dt-input.bad{
  border-color:#e04848;box-shadow:0 0 0 3px rgba(255,77,77,.12);color:#ff9a9a;
  animation:dtShake .35s ease;
}
@keyframes dtShake{20%{transform:translateX(-5px);}40%{transform:translateX(5px);}
  60%{transform:translateX(-3px);}80%{transform:translateX(3px);}}

.dt-check{
  padding:12px 22px;border-radius:12px;cursor:pointer;border:none;
  background:linear-gradient(90deg,var(--blue2),var(--blue));
  font-size:13px;font-weight:800;color:#fff;
  transition:.2s;white-space:nowrap;
}
.dt-check:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(42,127,255,.35);}
.dt-check:disabled{opacity:.4;cursor:default;transform:none;box-shadow:none;}

/* Nút công cụ */
.dt-tools{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.dt-hint-btn{
  padding:8px 16px;border-radius:16px;cursor:pointer;
  background:rgba(255,200,0,.07);
  border:1px solid rgba(255,200,0,.22);
  font-size:11px;font-weight:700;color:#ffd23a;transition:.18s;
}
.dt-hint-btn:hover{background:rgba(255,200,0,.14);transform:translateY(-1px);}
.dt-hint-btn:disabled{opacity:.4;cursor:default;transform:none;}
.dt-speak-btn{
  padding:8px 16px;border-radius:16px;cursor:pointer;
  background:rgba(42,127,255,.08);
  border:1px solid rgba(42,127,255,.25);
  font-size:11px;font-weight:700;color:#8ec0ff;transition:.18s;
}
.dt-speak-btn:hover{background:rgba(42,127,255,.16);}

/* Vùng lộ đáp án (tái dùng .ln-reveal style) */
.ln-reveal{
  min-height:0;font-size:17px;font-weight:700;color:#8ec0ff;
  text-align:center;line-height:1.45;max-width:520px;
}
.ln-reveal .ln-reveal-sub{
  display:block;font-size:12px;font-weight:500;color:var(--muted);margin-top:3px;
}

@media(max-width:800px){
  .dt-sentence{font-size:18px;padding:14px 16px;}
  .dt-sentence.dt-meaning-mode{font-size:21px;}
  .dt-input-row{flex-direction:column;}
}