/* ===========================================================
   Từ Vựng TOEIC — bổ sung cho chặng TOEIC 400+
   Nạp SAU luyen-tap.css. File này CHỈ thêm class mới, không
   sửa hay ghi đè bất cứ class nào của luyen-tap.css hay styles.css.
   =========================================================== */

/* --- nhãn ĐỌC / NGHE trên thẻ bài --- */
.kindtag{
  display:inline-block;margin-left:9px;padding:2px 9px;border-radius:999px;
  font-size:10px;font-weight:700;letter-spacing:.09em;vertical-align:1px;
}
.kindtag.doc{background:#eef2f8;color:#1e3a63}
.kindtag.nghe{background:#f3ece1;color:#8a6316}

/* --- hoạt động 8: đặt câu --- */
.wr{
  border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:14px;background:#fff;
  transition:border-color .18s,background .18s;
}
.wr.dat{border-color:var(--ok-line);background:#fbfefc}
.wr.chua{border-color:var(--bad-line);background:#fffbfb}

.wr-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px}
.wr-no{
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--navy-2);
  background:var(--bg-soft);border:1px solid var(--line);padding:4px 11px;border-radius:999px;
}
.wr-w{font-size:19px;font-weight:700;color:var(--navy);letter-spacing:-0.01em}
.wr-ipa{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;color:var(--navy-2)}
.wr-pos{font-size:12px;color:var(--muted);font-style:italic}
.wr-vn{font-size:14.5px;color:var(--muted)}
.wr-vn::before{content:"— ";color:#c3c9d4}

.wr-in{
  display:block;width:100%;font-family:inherit;font-size:16px;line-height:1.65;color:var(--ink);
  padding:12px 15px;border:1px solid var(--line);border-radius:11px;background:#fff;resize:vertical;min-height:56px;
}
.wr-in:focus{outline:2px solid var(--navy-2);outline-offset:1px}
.wr-in::placeholder{color:#b6bcc7}

.wr-fb:empty{display:none}
.wr-fb{margin-top:12px;font-size:14px;line-height:1.65}
.wr-ok{color:var(--ok);font-weight:500}
.wr-no2{color:var(--bad);font-weight:500}
.wr-mau{
  margin-top:10px;padding:11px 14px;background:var(--bg-soft);border:1px solid var(--line);
  border-left:3px solid var(--navy-2);border-radius:0 10px 10px 0;
}
.wr-mau span{
  display:block;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--navy-2);margin-bottom:4px;
}
.wr-mau i{font-size:15px;color:#2c3949}

@media(max-width:560px){
  .wr{padding:15px}
  .wr-top{gap:8px}
  .wr-w{font-size:17px}
  .wr-vn{width:100%}
  .wr-vn::before{content:""}
}