/* ESC Luyện thi - CSS cấu trúc tối thiểu. Giao diện đẹp do theme ghi đè bằng biến --escl-*. */
.escl {
  --escl-text: var(--wp--preset--color--contrast, #1d2433);
  --escl-bg: var(--wp--preset--color--base, #fff);
  --escl-muted: #5b6577;
  --escl-accent: var(--wp--preset--color--primary, #1f5fd1);
  --escl-on-accent: #fff;
  --escl-border: #d5dbe6;
  --escl-surface: #f4f6fa;
  --escl-ok: #1b7f3b;
  --escl-ok-bg: #e5f5ea;
  --escl-bad: #b3261e;
  --escl-bad-bg: #fbe9e7;
  --escl-flag: #b26a00;
  --escl-radius: 8px;
  --escl-gap: 1rem;
  color: var(--escl-text);
}
.escl *, .escl *::before, .escl *::after { box-sizing: border-box; }
.escl [hidden] { display: none !important; }
.escl-main { margin: 1.5rem 0; }

/* nút */
.escl-btn {
  display: inline-block; padding: .6rem 1.1rem; border-radius: var(--escl-radius); border: 1px solid var(--escl-accent);
  font: inherit; font-weight: 600; line-height: 1.3; cursor: pointer; text-decoration: none; text-align: center;
}
.escl-btn-primary { background: var(--escl-accent); color: var(--escl-on-accent); }
.escl-btn-secondary { background: transparent; color: var(--escl-accent); }
.escl-btn:disabled { opacity: .45; cursor: not-allowed; }
.escl-btn:focus-visible, .escl-num:focus-visible, .escl-flag:focus-visible, .escl-card:focus-visible, .escl-speak:focus-visible,
.escl-opt:focus-within, .escl-input:focus-visible, .escl-faq-item summary:focus-visible, .escl-hub-link:focus-visible {
  outline: 3px solid var(--escl-accent); outline-offset: 2px;
}
.escl-input { width: 100%; max-width: 22rem; padding: .55rem .7rem; font: inherit; border: 1px solid var(--escl-border); border-radius: var(--escl-radius); background: var(--escl-bg); color: inherit; }
.escl-field { margin: 0 0 1rem; }
.escl-field label { display: block; margin-bottom: .3rem; font-weight: 600; }

/* hub */
.escl-hub { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--escl-gap); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.escl-hub-card { border: 1px solid var(--escl-border); border-radius: var(--escl-radius); display: flex; flex-direction: column; gap: .5rem; padding: 1rem; }
.escl-hub-link { display: flex; flex-direction: column; gap: .5rem; color: inherit; text-decoration: none; height: 100%; }
.escl-hub-name { font-weight: 700; font-size: 1.1em; }
.escl-hub-stat { color: var(--escl-muted); font-size: .9em; }
.escl-hub-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; }

/* câu hỏi */
.escl-q { border: 0; margin: 0 0 1.5rem; padding: 0; min-width: 0; scroll-margin-top: 6rem; }
.escl-q-text { padding: 0; font-weight: 600; margin-bottom: .6rem; }
.escl-q-num { display: inline-block; min-width: 2.2em; font-weight: 700; color: var(--escl-accent); }
.escl-q-hoi { display: inline; }
.escl-opts { display: grid; gap: .5rem; }
.escl-opt { display: flex; gap: .7rem; align-items: flex-start; padding: .6rem .8rem; border: 1px solid var(--escl-border); border-radius: var(--escl-radius); cursor: pointer; }
.escl-opt input { margin-top: .3rem; flex: none; }
.escl-opt-key { flex: none; font-weight: 700; min-width: 1.2em; color: var(--escl-muted); }
.escl-opt.is-selected { border-color: var(--escl-accent); }
.escl-opt.is-correct { border-color: var(--escl-ok); background: var(--escl-ok-bg); }
.escl-opt.is-wrong { border-color: var(--escl-bad); background: var(--escl-bad-bg); }
.escl-explain { margin-top: .7rem; padding: .7rem .9rem; border-left: 4px solid var(--escl-border); background: var(--escl-surface); border-radius: 0 var(--escl-radius) var(--escl-radius) 0; }
.escl-q.is-correct .escl-explain { border-color: var(--escl-ok); }
.escl-q.is-wrong .escl-explain, .escl-q.is-skipped .escl-explain { border-color: var(--escl-bad); }
.escl-explain p { margin: .3rem 0; }
.escl-verdict { font-weight: 700; }
.escl-q-tools { margin-top: .5rem; }
.escl-flag { font: inherit; font-size: .9em; padding: .3rem .7rem; border: 1px solid var(--escl-border); border-radius: 999px; background: transparent; color: inherit; cursor: pointer; }
.escl-flag[aria-pressed="true"] { border-color: var(--escl-flag); color: var(--escl-flag); font-weight: 600; }
.blank { display: inline-block; min-width: 2.5em; padding: 0 .3em; border-bottom: 2px solid currentColor; text-align: center; font-weight: 700; }

/* đề thi */
.escl-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1rem; padding: .6rem .8rem; background: var(--escl-bg); border-bottom: 2px solid var(--escl-border); }
.escl-bar .escl-btn { margin-left: auto; }
.escl-timer { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.3em; }
.escl-timer.is-low { color: var(--escl-bad); }
.escl-nav { display: flex; flex-wrap: wrap; gap: .35rem; padding: .8rem 0; }
.escl-num { min-width: 2.4rem; height: 2.4rem; padding: 0 .3rem; font: inherit; font-size: .85em; border: 1px solid var(--escl-border); border-radius: 6px; background: transparent; color: inherit; cursor: pointer; }
.escl-num.is-done { background: var(--escl-accent); color: var(--escl-on-accent); border-color: var(--escl-accent); }
.escl-num.is-flagged { box-shadow: inset 0 -4px 0 var(--escl-flag); }
.escl-num.is-current { outline: 2px solid var(--escl-text); outline-offset: 1px; }
.escl-num.is-correct { background: var(--escl-ok); border-color: var(--escl-ok); color: #fff; }
.escl-num.is-wrong, .escl-num.is-skipped { background: var(--escl-bad); border-color: var(--escl-bad); color: #fff; }
.escl-confirm, .escl-result { margin: 1rem 0; padding: 1rem; border: 1px solid var(--escl-border); border-radius: var(--escl-radius); background: var(--escl-surface); }
.escl-result:empty { display: none; }
.escl-confirm .escl-btn { margin-right: .5rem; }
.escl-score-big { font-size: 2rem; font-weight: 800; }
.escl-result-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.escl-start { padding: 1.2rem; border: 1px solid var(--escl-border); border-radius: var(--escl-radius); }
.escl-start-info { display: flex; gap: 1.5rem; list-style: none; padding: 0; }
.escl-start-actions, .escl-resume { margin: 1rem 0; }
.escl-part-title { margin-top: 2rem; }
.escl-group { margin-bottom: 1.5rem; }
.escl-passage { border: 1px solid var(--escl-border); border-radius: var(--escl-radius); padding: 1rem; margin-bottom: 1rem; background: var(--escl-surface); }
.escl-group-title { margin-top: 0; font-size: 1em; }
.escl-passage .doc + .doc { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--escl-border); }
@media (min-width: 900px) {
  .escl-exam .escl-group:not(.is-single) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
  .escl-exam .escl-passage { position: sticky; top: 4.5rem; margin-bottom: 0; max-height: calc(100vh - 6rem); overflow: auto; }
}

/* trình độ: mỗi màn một câu */
.escl-level.is-step .escl-q { display: none; }
.escl-level.is-step .escl-q.is-current { display: block; }
.escl-progress { height: 8px; background: var(--escl-border); border-radius: 99px; overflow: hidden; margin: .8rem 0; }
.escl-progress-fill { display: block; height: 100%; width: 0; background: var(--escl-accent); transition: width .2s; }
.escl-step-nav { display: flex; justify-content: space-between; gap: 1rem; }
.escl-level .escl-bar { position: static; }

/* quy đổi / bảng */
.escl-out-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .8rem; margin: 0; }
.escl-out-list div { padding: .7rem; border: 1px solid var(--escl-border); border-radius: var(--escl-radius); }
.escl-out-list dt { color: var(--escl-muted); font-size: .85em; }
.escl-out-list dd { margin: 0; font-size: 1.4em; font-weight: 700; }
.escl-form { margin-bottom: 2rem; }
.escl-table-wrap { overflow-x: auto; margin: 1rem 0 2rem; }
.escl-table { width: 100%; border-collapse: collapse; }
.escl-table caption { text-align: left; font-weight: 700; padding-bottom: .4rem; }
.escl-table th, .escl-table td { padding: .5rem .7rem; border-bottom: 1px solid var(--escl-border); text-align: left; vertical-align: top; }
.escl-table thead th { background: var(--escl-surface); }
.escl-ipa, .escl-exvi { display: block; color: var(--escl-muted); font-size: .9em; font-weight: 400; }

/* flashcard */
.escl-card { perspective: 1000px; max-width: 28rem; min-height: 15rem; margin: 1rem auto; cursor: pointer; }
.escl-card-inner { position: relative; min-height: 15rem; transition: transform .45s; transform-style: preserve-3d; }
.escl-card.is-flipped .escl-card-inner { transform: rotateY(180deg); }
.escl-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: 1.2rem; text-align: center;
  border: 1px solid var(--escl-border); border-radius: calc(var(--escl-radius) * 2); background: var(--escl-bg); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.escl-face-back { transform: rotateY(180deg); overflow: auto; }
.escl-card-word { font-size: 2rem; font-weight: 800; }
.escl-card-type, .escl-card-ipa, .escl-card-exvi { color: var(--escl-muted); }
.escl-card-mean { font-size: 1.25rem; font-weight: 700; }
.escl-card-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.escl-study-progress, .escl-hint { text-align: center; color: var(--escl-muted); }
.escl-study-done { text-align: center; padding: 2rem 0; }
.escl-speak { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border: 1px solid var(--escl-border); border-radius: 50%; background: transparent; color: var(--escl-accent); cursor: pointer; vertical-align: middle; }
@media (prefers-reduced-motion: reduce) { .escl-card-inner, .escl-progress-fill { transition: none; } }

/* động từ */
.escl-filter { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; margin-bottom: 1rem; }
.escl-filter .escl-field { margin: 0; }
.escl-filter-count { width: 100%; margin: 0; color: var(--escl-muted); }
.escl-selftest { margin: 1rem 0 2rem; padding: 1rem; border: 1px solid var(--escl-border); border-radius: var(--escl-radius); }
.escl-test-list { padding-left: 1.4rem; }
.escl-test-row { margin-bottom: .9rem; display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: center; }
.escl-test-l { display: inline-flex; align-items: center; gap: .4rem; }
.escl-test-l .escl-input { width: 9rem; }
.escl-input.is-correct { border-color: var(--escl-ok); background: var(--escl-ok-bg); }
.escl-input.is-wrong { border-color: var(--escl-bad); background: var(--escl-bad-bg); }
.escl-test-fb { flex-basis: 100%; font-size: .9em; }

/* quiz, FAQ */
.escl-quiz { margin: 2.5rem 0; padding: 1.2rem; border: 1px solid var(--escl-border); border-radius: var(--escl-radius); }
.escl-quiz-end { margin-top: 1rem; }
.escl-quiz-score { font-size: 1.2em; font-weight: 700; }
.escl-faq-item { border-bottom: 1px solid var(--escl-border); padding: .6rem 0; }
.escl-faq-item summary { cursor: pointer; font-weight: 600; }
.escl-note { color: var(--escl-muted); font-size: .9em; }