/* ═══════════════════════════════════════════════════
   ghepcau.css – Ghép Câu tiếng Anh (Phase 6)
   Chỉ chứa style riêng gc-* ; nền tảng dùng english.css + quiz.css
   ═══════════════════════════════════════════════════ */

.gc-zone{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:6px;
}

/* ── Bản dịch tiếng Việt (gợi ý cố định) ── */
.gc-hint-vi{
  font-size:15px;
  color:#8fb8e0;
  background:rgba(56,120,190,.08);
  border:1px dashed rgba(90,150,210,.35);
  border-radius:10px;
  padding:10px 14px;
  line-height:1.5;
}

/* ── Khu vực câu đang ghép ── */
.gc-target{
  min-height:64px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding:12px;
  border-radius:12px;
  background:rgba(10,25,45,.55);
  border:2px dashed rgba(90,150,210,.4);
  transition:border-color .2s;
}
.gc-target.gc-full{ border-style:solid; border-color:rgba(90,200,140,.55); }

.gc-target-empty{
  font-size:13px;
  color:#4a6a8a;
  font-style:italic;
  padding:6px 4px;
}

/* ── Kho từ ── */
.gc-bank{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:4px 0;
  min-height:44px;
}

/* ── Chip từ ── */
.gc-chip{
  appearance:none;
  border:1px solid rgba(90,150,210,.45);
  background:linear-gradient(180deg,#16304e,#102540);
  color:#dcecfb;
  font-size:16px;
  font-weight:600;
  padding:9px 14px;
  border-radius:10px;
  cursor:pointer;
  user-select:none;
  transition:transform .12s, background .15s, border-color .15s, opacity .15s;
}
.gc-chip:hover{ transform:translateY(-2px); border-color:#6fb1ff; }
.gc-chip:active{ transform:scale(.95); }
.gc-chip:focus-visible{ outline:2px solid #6fb1ff; outline-offset:2px; }

.gc-target .gc-chip{
  background:linear-gradient(180deg,#1d3a5e,#16304e);
  border-color:rgba(120,180,240,.6);
}

/* Chip khóa bởi gợi ý (từ đầu câu) */
.gc-chip.gc-locked{
  background:linear-gradient(180deg,#3a3113,#2c250e);
  border-color:#c9a227;
  color:#ffe9a0;
  cursor:default;
}
.gc-chip.gc-locked:hover{ transform:none; }

/* Trạng thái sau khi chấm */
.gc-target.gc-right .gc-chip{ border-color:#4ade80; color:#c8f7d8; }
.gc-target.gc-wrong .gc-chip{ border-color:#f87171; color:#ffd6d6; }
.gc-chip[disabled]{ cursor:default; opacity:.85; }
.gc-bank .gc-chip[disabled]{ opacity:.35; }

/* ── Nút hành động ── */
.gc-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.gc-check{
  flex:1;
  min-width:150px;
  border:none;
  border-radius:10px;
  padding:12px 18px;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  color:#04121f;
  background:linear-gradient(135deg,#4facfe,#00f2fe);
  transition:filter .15s, transform .12s;
}
.gc-check:hover{ filter:brightness(1.08); }
.gc-check:active{ transform:scale(.98); }
.gc-check[disabled]{ filter:grayscale(.6); opacity:.5; cursor:default; }

.gc-clear{
  border:1px solid rgba(150,170,200,.35);
  background:transparent;
  color:#9fb8d5;
  border-radius:10px;
  padding:12px 16px;
  font-size:14px;
  cursor:pointer;
  transition:background .15s;
}
.gc-clear:hover{ background:rgba(120,160,210,.1); }
.gc-clear[disabled]{ opacity:.4; cursor:default; }

/* ── Công cụ (gợi ý / nghe) ── */
.gc-tools{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.gc-hint-btn,
.gc-speak-btn{
  border:1px solid rgba(201,162,39,.5);
  background:rgba(201,162,39,.08);
  color:#f0d27a;
  border-radius:9px;
  padding:8px 14px;
  font-size:13px;
  cursor:pointer;
  transition:background .15s;
}
.gc-hint-btn:hover{ background:rgba(201,162,39,.18); }
.gc-hint-btn[disabled]{ opacity:.4; cursor:default; }
.gc-speak-btn{
  border-color:rgba(90,150,210,.5);
  background:rgba(56,120,190,.08);
  color:#8fb8e0;
}
.gc-speak-btn:hover{ background:rgba(56,120,190,.18); }

/* ── Ô lộ đáp án sau khi chấm ── */
.gc-reveal{
  display:none;
  border-radius:10px;
  padding:12px 14px;
  font-size:14px;
  line-height:1.6;
  background:rgba(10,25,45,.6);
  border:1px solid rgba(90,150,210,.3);
  color:#c9ddf2;
}
.gc-reveal.show{ display:block; }
.gc-reveal b{ color:#fff; }
.gc-reveal .gc-word{ color:#6fb1ff; font-weight:700; }

/* ── Mobile ── */
@media (max-width:600px){
  .gc-chip{ font-size:14px; padding:8px 11px; }
  .gc-check{ min-width:100%; }
}

@media (prefers-reduced-motion:reduce){
  .gc-chip, .gc-check{ transition:none; }
}