/* ═══════════════════════════════════════════════════════
   YHW Quiz Master v4.1 — Timer + Font Control + Sharp UI
   ═══════════════════════════════════════════════════════ */
:root {
  --yhw-primary:    #4f46e5;
  --yhw-primary-h:  #4338ca;
  --yhw-primary-lt: #eef2ff;
  --yhw-success:    #10b981;
  --yhw-danger:     #ef4444;
  --yhw-warning:    #f59e0b;
  --yhw-bg:         #f4f5fb;
  --yhw-card:       #ffffff;
  --yhw-border:     #e5e7eb;
  --yhw-text:       #1f2937;
  --yhw-muted:      #6b7280;
  --yhw-radius:     12px;
  --yhw-shadow:     0 2px 16px rgba(79,70,229,.09);
  --yhw-shadow-md:  0 4px 24px rgba(79,70,229,.14);
  --yhw-passage-w:  44%;
  --yhw-fs:         1.25;  /* font scale — JS updates this on :root */
}

/* ── Wrapper: base font via scale ── */
.yhw-quiz-wrapper {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  max-width: 100%; margin: 0;
  color: var(--yhw-text); line-height: 1.7;
  font-size: calc(17px * var(--yhw-fs)) !important;
}
.yhw-quiz-wrapper *, .yhw-quiz-wrapper *::before, .yhw-quiz-wrapper *::after { box-sizing: border-box; }
.yhw-error { background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:12px 16px;color:#b91c1c;font-size:calc(15px * var(--yhw-fs)) !important; }

/* ════ INTRO ════ */
.yhw-screen-intro { padding: 24px 0; }
.yhw-intro-card {
  background: var(--yhw-card); border-radius: var(--yhw-radius);
  box-shadow: var(--yhw-shadow-md); padding: 52px 40px;
  text-align: center; border: 1px solid var(--yhw-border);
  max-width: 560px; margin: 0 auto;
}
.yhw-intro-icon  { font-size:60px;display:block;margin-bottom:12px;animation:yhw-bounce 2s ease-in-out infinite; }
@keyframes yhw-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.yhw-quiz-title  { font-size:calc(26px * var(--yhw-fs)) !important;font-weight:700;margin:0 0 20px; }
.yhw-intro-meta  { display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:32px; }
.yhw-meta-item   { display:flex;align-items:center;gap:6px;background:var(--yhw-bg);border-radius:99px;padding:8px 18px;font-size:calc(15px * var(--yhw-fs)) !important;font-weight:600;color:var(--yhw-muted); }

/* ════ TIMER ════ */
/* Old timer card — hidden in quiz screen (replaced by sticky topbar) */
.yhw-screen-quiz .yhw-timer-card { display: none !important; }
.yhw-timer-card {
  background: var(--yhw-card); border: 1.5px solid var(--yhw-border);
  border-radius: var(--yhw-radius); padding: 14px 16px 12px;
  box-shadow: var(--yhw-shadow); margin-bottom: 12px; text-align: center;
}
.yhw-timer-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: var(--yhw-muted); margin-bottom: 8px;
}
.yhw-timer-display {
  font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--yhw-primary); letter-spacing: 1px; line-height: 1; transition: color .3s;
}
.yhw-timer-display.yhw-timer-warn  { color: var(--yhw-warning); }
.yhw-timer-display.yhw-timer-alert { color: var(--yhw-danger); animation: yhw-pulse .6s ease-in-out infinite; }
@keyframes yhw-pulse{0%,100%{opacity:1}50%{opacity:.4}}
.yhw-timer-bar-wrap { height: 4px; background: var(--yhw-bg); border-radius: 99px; margin-top: 10px; overflow: hidden; }
.yhw-timer-bar { height: 100%; border-radius: 99px; background: var(--yhw-primary); transition: width .9s linear, background .3s; width: 100%; }
.yhw-timer-bar.yhw-tb-warn  { background: var(--yhw-warning); }
.yhw-timer-bar.yhw-tb-alert { background: var(--yhw-danger); }

/* ════ BUTTONS ════ */
.yhw-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 28px; border-radius: 99px; border: none;
  cursor: pointer; font-size: calc(16px * var(--yhw-fs)) !important; font-weight: 600;
  transition: background .18s, transform .18s, box-shadow .18s; background: var(--yhw-primary); color: #fff; will-change: transform;
}
.yhw-btn svg { width:15px; height:15px; }
.yhw-btn:hover { background: var(--yhw-primary-h); transform: translateY(-1px); box-shadow: 0 5px 18px rgba(79,70,229,.3); }
.yhw-btn-start   { padding: 14px 38px; font-size: calc(17px * var(--yhw-fs)) !important; }
.yhw-btn-outline { background: transparent; color: var(--yhw-primary); border: 2px solid var(--yhw-primary); }
.yhw-btn-outline:hover { background: var(--yhw-primary); color: #fff; }

/* ════ QUIZ GRID ════ */
.yhw-screen-quiz { padding: 0; }
.yhw-quiz-layout { display: grid; grid-template-columns: 1fr 240px; gap: 0; align-items: start; min-height: 100vh; }

/* ════ STICKY TOP BAR (timer + font + nộp bài) ════ */
.yhw-sticky-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--yhw-card);
  border-bottom: 1.5px solid var(--yhw-border);
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  flex-wrap: nowrap;
}
.yhw-topbar-timer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.yhw-topbar-timer-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--yhw-muted);
  white-space: nowrap;
}
.yhw-topbar-timer-display {
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--yhw-primary);
  letter-spacing: 1px;
  line-height: 1;
  transition: color .3s;
  white-space: nowrap;
}
.yhw-topbar-timer-display.yhw-timer-warn  { color: var(--yhw-warning); }
.yhw-topbar-timer-display.yhw-timer-alert { color: var(--yhw-danger); animation: yhw-pulse .6s ease-in-out infinite; }
.yhw-topbar-bar-wrap {
  width: 70px;
  height: 4px;
  background: var(--yhw-bg);
  border-radius: 99px;
  overflow: hidden;
  flex-shrink: 0;
}
.yhw-topbar-bar {
  height: 100%;
  border-radius: 99px;
  background: var(--yhw-primary);
  transition: width .9s linear, background .3s;
  width: 100%;
}
.yhw-topbar-bar.yhw-tb-warn  { background: var(--yhw-warning); }
.yhw-topbar-bar.yhw-tb-alert { background: var(--yhw-danger); }
.yhw-topbar-progress {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.yhw-topbar-progress-label {
  font-size: 12px;
  color: var(--yhw-muted);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
.yhw-topbar-progress-bar-wrap {
  flex: 1;
  height: 6px;
  background: var(--yhw-bg);
  border-radius: 99px;
  overflow: hidden;
  min-width: 40px;
}
.yhw-topbar-progress-bar {
  height: 100%;
  border-radius: 99px;
  background: var(--yhw-success);
  width: 0%;
  transition: width .3s ease;
}
.yhw-topbar-font {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.yhw-topbar-font button {
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1.5px solid var(--yhw-border);
  background: var(--yhw-bg);
  color: var(--yhw-text);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
  display: flex; align-items: center; justify-content: center;
}
.yhw-topbar-font button:hover:not(:disabled) { background: var(--yhw-primary); color: #fff; border-color: var(--yhw-primary); }
.yhw-topbar-font button:disabled { opacity: .35; cursor: not-allowed; }
.yhw-topbar-font-label {
  font-size: 11px;
  color: var(--yhw-muted);
  min-width: 22px;
  text-align: center;
  font-weight: 600;
}
.yhw-topbar-submit {
  flex-shrink: 0;
}
.yhw-topbar-submit .yhw-btn {
  padding: 8px 20px;
  font-size: calc(13px * var(--yhw-fs)) !important;
}

/* ════ SECTION BLOCK ════ */
.yhw-section-block {
  background: var(--yhw-card); border: 1px solid var(--yhw-border);
  border-radius: var(--yhw-radius); margin-bottom: 20px; box-shadow: var(--yhw-shadow);
}
.yhw-section-title {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px; font-size: calc(15px * var(--yhw-fs)) !important; font-weight: 700;
  letter-spacing: .3px; border-bottom: 1px solid var(--yhw-border);
  border-radius: var(--yhw-radius) var(--yhw-radius) 0 0;
}
.yhw-section-title.yhw-type-multiple_choice { background: #eef2ff; color: #4f46e5; }
.yhw-section-title.yhw-type-blank_filling   { background: #e0f2fe; color: #0284c7; }
.yhw-section-title.yhw-type-reading         { background: #d1fae5; color: #059669; }
.yhw-section-title.yhw-type-ordering        { background: #fef9c3; color: #b45309; }
.yhw-section-range { margin-left: auto; font-size: calc(13px * var(--yhw-fs)) !important; font-weight: 500; opacity: .75; white-space: nowrap; }

/* ════ PASSAGE SPLIT ════ */
.yhw-passage-split { display: grid; grid-template-columns: var(--yhw-passage-w) 1fr; align-items: start; }
.yhw-passage-col { border-right: 1px solid var(--yhw-border); background: #f8faff; align-self: stretch; }
.yhw-passage-sticky {
  position: sticky; top: 16px; max-height: 80vh; overflow-y: auto;
  padding: 18px 20px; scrollbar-width: thin; scrollbar-color: #c7d2fe transparent;
}
.yhw-passage-sticky::-webkit-scrollbar { width: 5px; }
.yhw-passage-sticky::-webkit-scrollbar-thumb { background: #c7d2fe; border-radius: 99px; }
.yhw-passage-label { font-size: calc(15px * var(--yhw-fs)) !important; font-weight: 700; font-style: italic; color: var(--yhw-text); margin-bottom: 14px; line-height: 1.6; }
.yhw-passage-text  { font-size: calc(16px * var(--yhw-fs)) !important; line-height: 1.9; color: var(--yhw-text); }
.yhw-blank { display: inline-block; background: #dbeafe; color: #1d4ed8; font-weight: 700; border-radius: 4px; padding: 1px 7px; font-size: calc(15px * var(--yhw-fs)) !important; }

/* ════ QUESTION BLOCK ════ */
.yhw-question-block {
  padding: 20px 22px 16px; border-bottom: 1px solid var(--yhw-border);
  scroll-margin-top: 80px; transition: background .25s;
}
.yhw-qs-col .yhw-question-block { padding: 18px 18px 14px; }
.yhw-question-block:last-child,
.yhw-qs-col .yhw-question-block:last-child,
.yhw-normal-qs .yhw-question-block:last-child { border-bottom: none; }
.yhw-question-block.yhw-answered-correct { background: #f0fdf4; }
.yhw-question-block.yhw-answered-wrong   { background: #fff1f2; }
.yhw-question-block.yhw-answered-skip    { background: #fffbeb; }
.yhw-q-num-label { font-size: calc(12px * var(--yhw-fs)) !important; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--yhw-primary); margin-bottom: 8px; }
.yhw-q-text { font-size: calc(18px * var(--yhw-fs)) !important; font-weight: 600; margin-bottom: 16px; line-height: 1.55; }

/* ════ ORDERING ════ */
.yhw-ordering-items { display: flex; flex-direction: column; gap: 9px; margin-bottom: 18px; padding: 14px 16px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; }
.yhw-ordering-item  { display: flex; align-items: flex-start; gap: 10px; font-size: calc(16px * var(--yhw-fs)) !important; line-height: 1.55; }
.yhw-ordering-item-label { min-width: 28px; height: 28px; border-radius: 7px; background: #f59e0b; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; margin-top: 1px; }
.yhw-ordering-item-text { flex: 1; }

/* ════ OPTIONS ════ */
.yhw-options { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
@media(max-width:600px){ .yhw-options { grid-template-columns: 1fr; } }
.yhw-option {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 16px; border: 2px solid var(--yhw-border);
  border-radius: 10px; cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
  background: #fff; user-select: none;
}
.yhw-option:not(.yhw-locked):hover { border-color: var(--yhw-primary); background: var(--yhw-primary-lt); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(79,70,229,.15); }
.yhw-option.yhw-selected { border-color: var(--yhw-primary); background: var(--yhw-primary-lt); }
.yhw-option.yhw-selected .yhw-opt-letter { background: var(--yhw-primary); color: #fff; }
.yhw-option.yhw-locked   { cursor: default; transform: none !important; }
.yhw-option.yhw-correct  { border-color: var(--yhw-success); background: #d1fae5; }
.yhw-option.yhw-correct .yhw-opt-letter  { background: var(--yhw-success); color: #fff; }
.yhw-option.yhw-wrong    { border-color: var(--yhw-danger);  background: #fee2e2; }
.yhw-option.yhw-wrong .yhw-opt-letter    { background: var(--yhw-danger);  color: #fff; }
.yhw-option.yhw-chosen-correct { border-color: var(--yhw-success); background: #d1fae5; }
.yhw-option.yhw-chosen-correct .yhw-opt-letter { background: var(--yhw-success); color: #fff; }
.yhw-opt-letter { width: 34px; height: 34px; border-radius: 8px; background: var(--yhw-bg); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: calc(15px * var(--yhw-fs)) !important; color: var(--yhw-muted); flex-shrink: 0; transition: background .15s, color .15s; }
.yhw-opt-text   { font-size: calc(16px * var(--yhw-fs)) !important; flex: 1; line-height: 1.45; }
.yhw-explain-box { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; padding: 11px 15px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; font-size: calc(15px * var(--yhw-fs)) !important; color: #78350f; animation: yhw-fadein .3s ease; }

/* ════ SUBMIT BAR ════ */
.yhw-submit-wrap { background: var(--yhw-card); border: 1px solid var(--yhw-border); border-radius: var(--yhw-radius); padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; box-shadow: var(--yhw-shadow); flex-wrap: wrap; margin: 0 16px 20px; position: relative; z-index: 2; }
.yhw-submit-status { font-size: calc(15px * var(--yhw-fs)) !important; color: var(--yhw-muted); font-weight: 500; }
.yhw-submit-status strong { color: var(--yhw-primary); font-size: calc(17px * var(--yhw-fs)) !important; }

/* ════ QUESTIONS COL ════ */
.yhw-questions-col { padding: 16px 16px 100px; min-width: 0; isolation: isolate; }

/* ════ TRACKER SIDEBAR ════ */
.yhw-tracker-col {
  position: sticky;
  top: 56px; /* below topbar */
  height: calc(100vh - 56px);
  overflow-y: auto;
  border-left: 1.5px solid var(--yhw-border);
  background: var(--yhw-card);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.yhw-tracker-card { background: transparent; border: none; border-radius: 0; padding: 0; box-shadow: none; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.yhw-tracker-header { display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 700; margin-bottom: 4px; padding-bottom: 10px; border-bottom: 1px solid var(--yhw-border); }
.yhw-tracker-count  { font-size: 13px; color: var(--yhw-muted); font-weight: 500; }
.yhw-tracker-grid   { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; margin-bottom: 8px; }
.yhw-tracker-num { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 7px; background: var(--yhw-bg); border: 2px solid var(--yhw-border); font-size: 11px; font-weight: 700; color: var(--yhw-muted); cursor: pointer; text-decoration: none; transition: all .18s; line-height: 1; }
.yhw-tracker-num:hover { border-color: var(--yhw-primary); color: var(--yhw-primary); background: var(--yhw-primary-lt); }
.yhw-tracker-num.yhw-tracked-done    { background: var(--yhw-primary); border-color: var(--yhw-primary); color: #fff; }
.yhw-tracker-num.yhw-tracked-correct { background: var(--yhw-success); border-color: var(--yhw-success); color: #fff; }
.yhw-tracker-num.yhw-tracked-wrong   { background: var(--yhw-danger);  border-color: var(--yhw-danger);  color: #fff; }
.yhw-tracker-legend  { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--yhw-muted); margin-bottom: 14px; }
.yhw-legend-item     { display: flex; align-items: center; gap: 6px; }
.yhw-dot-sample      { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.yhw-dot-unanswered  { background: var(--yhw-bg); border: 2px solid var(--yhw-border); }
.yhw-dot-answered    { background: var(--yhw-primary); }
.yhw-btn-submit-sm   { width: 100%; justify-content: center; padding: 10px; font-size: 14px; }

/* ════ RESULT ════ */
.yhw-screen-result { padding: 24px 0; }
.yhw-result-card { background: var(--yhw-card); border-radius: var(--yhw-radius); box-shadow: 0 8px 32px rgba(79,70,229,.12); padding: 40px 32px; text-align: center; border: 1px solid var(--yhw-border); max-width: 560px; margin: 0 auto 32px; }
.yhw-result-badge { font-size: 64px; margin-bottom: 6px; }
.yhw-result-title { font-size: calc(24px * var(--yhw-fs)) !important; font-weight: 700; margin: 0 0 6px; }
.yhw-result-time  { font-size: calc(14px * var(--yhw-fs)) !important; color: var(--yhw-muted); font-weight: 500; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; gap: 5px; }
.yhw-result-time strong { color: var(--yhw-text); }
.yhw-score-circle { position: relative; width: 140px; height: 140px; margin: 0 auto 24px; }
.yhw-score-circle svg { width: 120px; height: 120px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.yhw-score-ring   { transition: stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1); }
.yhw-score-inner  { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.yhw-score-pct    { font-size: 30px; font-weight: 800; color: var(--yhw-primary); }
.yhw-score-lbl    { font-size: 12px; color: var(--yhw-muted); font-weight: 600; letter-spacing: 1px; }
.yhw-result-stats { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.yhw-stat         { background: var(--yhw-bg); border-radius: 10px; padding: 14px 20px; min-width: 80px; }
.yhw-stat-n       { display: block; font-size: 28px; font-weight: 800; line-height: 1; margin-bottom: 4px; }
.yhw-stat-l       { font-size: calc(13px * var(--yhw-fs)) !important; color: var(--yhw-muted); font-weight: 600; }
.yhw-stat-correct .yhw-stat-n { color: var(--yhw-success); }
.yhw-stat-wrong   .yhw-stat-n { color: var(--yhw-danger);  }
.yhw-stat-skip    .yhw-stat-n { color: var(--yhw-warning); }
.yhw-result-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.yhw-pass .yhw-score-ring { stroke: var(--yhw-success); }
.yhw-pass .yhw-score-pct  { color: var(--yhw-success); }
.yhw-fail .yhw-score-ring { stroke: var(--yhw-danger); }
.yhw-fail .yhw-score-pct  { color: var(--yhw-danger); }

/* ════ REVIEW ════ */
.yhw-review-wrap { margin-top: 8px; }
.yhw-review-section-block { background: var(--yhw-card); border: 1px solid var(--yhw-border); border-radius: var(--yhw-radius); margin-bottom: 24px; box-shadow: var(--yhw-shadow); }
.yhw-review-section-title { display: flex; align-items: center; gap: 10px; padding: 14px 20px; font-size: calc(15px * var(--yhw-fs)) !important; font-weight: 700; border-bottom: 1px solid var(--yhw-border); border-radius: var(--yhw-radius) var(--yhw-radius) 0 0; }
.yhw-review-section-title.rt-multiple_choice { background: #eef2ff; color: #4f46e5; }
.yhw-review-section-title.rt-blank_filling   { background: #e0f2fe; color: #0284c7; }
.yhw-review-section-title.rt-reading         { background: #d1fae5; color: #059669; }
.yhw-review-section-title.rt-ordering        { background: #fef9c3; color: #b45309; }
.yhw-review-split { display: flex; gap: 20px; align-items: flex-start; }
.yhw-review-passage-col { flex: 0 0 42%; min-width: 0; border-right: 1px solid var(--yhw-border); background: #f8faff; padding: 18px 20px; font-size: calc(16px * var(--yhw-fs)) !important; line-height: 1.9; }
.yhw-review-passage-label { font-size: calc(15px * var(--yhw-fs)) !important; font-weight: 700; font-style: italic; color: var(--yhw-text); margin-bottom: 12px; line-height: 1.6; }
.yhw-review-qs-col { flex: 1; min-width: 0; }
.yhw-review-split .yhw-passage-sticky { position: sticky; top: 16px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 16px; max-height: 80vh; overflow-y: auto; }
.yhw-review-qblock { padding: 18px 20px 14px; border-bottom: 1px solid var(--yhw-border); }
.yhw-review-qblock:last-child { border-bottom: none; }
.yhw-review-qblock.rv-correct { background: #f0fdf4; }
.yhw-review-qblock.rv-wrong   { background: #fff1f2; }
.yhw-review-qblock.rv-skip    { background: #fffbeb; }
.yhw-review-qnum-label { font-size: calc(12px * var(--yhw-fs)) !important; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--yhw-primary); margin-bottom: 6px; }
.yhw-review-qtext { font-size: calc(17px * var(--yhw-fs)) !important; font-weight: 600; margin-bottom: 14px; line-height: 1.5; }
.yhw-review-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media(max-width:600px){ .yhw-review-options { grid-template-columns: 1fr; } }
.yhw-review-option { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 2px solid var(--yhw-border); border-radius: 10px; font-size: calc(15px * var(--yhw-fs)) !important; cursor: default; }
.yhw-review-option.rv-opt-correct { border-color: var(--yhw-success); background: #d1fae5; font-weight: 600; }
.yhw-review-option.rv-opt-correct .yhw-opt-letter { background: var(--yhw-success); color: #fff; }
.yhw-review-option.rv-opt-chosen-correct { border-color: var(--yhw-success); background: #d1fae5; font-weight: 600; }
.yhw-review-option.rv-opt-chosen-correct .yhw-opt-letter { background: var(--yhw-success); color: #fff; }
.yhw-review-option.rv-opt-wrong { border-color: var(--yhw-danger); background: #fee2e2; }
.yhw-review-option.rv-opt-wrong .yhw-opt-letter { background: var(--yhw-danger); color: #fff; }
.yhw-review-ordering-items { margin-bottom: 14px; padding: 12px 16px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; }
.yhw-review-ordering-item  { display: flex; align-items: flex-start; gap: 10px; font-size: calc(15px * var(--yhw-fs)) !important; line-height: 1.5; margin-bottom: 7px; }
.yhw-review-ordering-item:last-child { margin-bottom: 0; }
.yhw-review-explain { margin-top: 10px; padding: 10px 14px; background: #fffbeb; border: 1px solid #fcd34d; border-radius: 8px; font-size: calc(14px * var(--yhw-fs)) !important; color: #92400e; line-height: 1.5; }

/* ════ ANIMATIONS ════ */
@keyframes yhw-fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.yhw-screen-quiz  { animation: yhw-fadein .3s ease; }
.yhw-screen-result { animation: yhw-fadein .3s ease; }

/* ════ RICH TEXT ════ */
.yhw-quiz-wrapper u { text-decoration: underline !important; border-bottom: none !important; }
.yhw-quiz-wrapper b, .yhw-quiz-wrapper strong { font-weight: 700 !important; }
.yhw-quiz-wrapper i, .yhw-quiz-wrapper em { font-style: italic !important; }

/* ════ RESPONSIVE ════ */
@media(max-width:800px){
  .yhw-passage-split,.yhw-review-split{grid-template-columns:1fr;}
  .yhw-passage-col,.yhw-review-passage-col{border-right:none;border-bottom:1px solid var(--yhw-border);}
  .yhw-passage-sticky{position:static;max-height:none;}
}

/* ── MOBILE: tracker chuyển thành bottom bar có thể mở/đóng ── */
@media(max-width:700px){
  /* Layout: 1 cột duy nhất */
  .yhw-quiz-layout { grid-template-columns: 1fr; }

  /* Questions col: padding bottom để không bị bottom bar che */
  .yhw-questions-col { padding: 12px 10px 80px; }

  /* Topbar: nhỏ gọn hơn */
  .yhw-sticky-topbar { padding: 6px 10px; gap: 8px; }
  .yhw-topbar-timer-display { font-size: 18px; }
  .yhw-topbar-timer-label { display: none; }
  .yhw-topbar-bar-wrap { width: 50px; }
  .yhw-topbar-progress-label { display: none; }
  .yhw-topbar-submit .yhw-btn { padding: 6px 14px; font-size: 12px !important; }

  /* Tracker: fixed bottom bar */
  .yhw-tracker-col {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    top: auto;
    height: auto;
    max-height: 60vh;
    overflow: hidden;            /* bản thân col không scroll */
    border-left: none;
    border-top: 2px solid var(--yhw-border);
    box-shadow: 0 -4px 20px rgba(0,0,0,.15);
    z-index: 99;
    padding: 0;
    flex-direction: column;
    background: var(--yhw-card);
  }

  /* Handle bar: luôn hiển thị, nhấn để toggle */
  .yhw-tracker-col::before {
    content: '';
    display: block;
    width: 36px; height: 4px;
    background: var(--yhw-border);
    border-radius: 99px;
    margin: 8px auto 4px;
    flex-shrink: 0;
  }

  .yhw-tracker-card {
    flex-direction: column;
    width: 100%;
    gap: 0;
    overflow: hidden;
  }

  /* Header: luôn hiện, là vùng nhấn toggle */
  .yhw-tracker-header {
    width: 100%;
    margin: 0;
    padding: 8px 14px 8px;
    border-bottom: none;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
  }
  .yhw-tracker-header::after {
    content: '▲';
    font-size: 10px;
    color: var(--yhw-muted);
    transition: transform .2s;
  }
  .yhw-tracker-col.yhw-tracker-collapsed .yhw-tracker-header::after {
    content: '▼';
  }

  /* Grid: ẩn khi collapsed, hiện khi expanded, cuộn được */
  .yhw-tracker-grid-wrap {
    overflow-y: auto;
    max-height: calc(60vh - 80px);
    padding: 6px 12px 4px;
    flex-shrink: 1;
  }
  .yhw-tracker-col.yhw-tracker-collapsed .yhw-tracker-grid-wrap { display: none; }

  .yhw-tracker-grid {
    grid-template-columns: repeat(8, 1fr);
    gap: 5px;
    width: 100%;
    margin-bottom: 8px;
  }
  .yhw-tracker-num { font-size: 11px; }

  /* Legend + submit: ẩn khi collapsed */
  .yhw-tracker-legend { display: none; }
  .yhw-tracker-col.yhw-tracker-collapsed .yhw-btn-submit-sm { display: none; }
  .yhw-btn-submit-sm { width: 100%; justify-content: center; margin: 4px 12px 10px; width: calc(100% - 24px); }

  /* Submit bar: ẩn, dùng topbar + bottom bar */
  .yhw-submit-wrap { margin: 0 10px 16px; }

  .yhw-intro-card { padding: 32px 16px; }
  .yhw-result-card { padding: 28px 16px; }
  .yhw-toolbar { justify-content: flex-start; }
}

@media(max-width:420px){
  .yhw-tracker-grid { grid-template-columns: repeat(8, 1fr); }
  .yhw-topbar-font { display: none; } /* ẩn font control trên màn nhỏ */
}

@media(max-width:680px){
  .yhw-review-split{flex-direction:column;}
  .yhw-review-passage-col{flex:unset;width:100%;}
  .yhw-review-split .yhw-passage-sticky{position:static;max-height:none;}
}

/* Section block: full padding trên desktop */
@media(min-width:701px){
  .yhw-section-block { margin-bottom: 20px; }
  .yhw-questions-col { padding: 16px 20px 80px; }
  .yhw-submit-wrap { margin: 0 0 20px; }
}

/* ═══════════════════════════════════════════════════════
   TỰ LUẬN — Open Question Styles
   sentence_rewrite | word_completion | ielts_writing | word_bank
   ═══════════════════════════════════════════════════════ */

/* Section type colors */
.yhw-type-sentence_rewrite { color:#8b5cf6; border-color:#8b5cf6; }
.yhw-section-block.yhw-type-sentence_rewrite .yhw-section-title { background:linear-gradient(135deg,#8b5cf6,#7c3aed); }
.yhw-type-word_completion  { color:#ec4899; border-color:#ec4899; }
.yhw-section-block.yhw-type-word_completion  .yhw-section-title { background:linear-gradient(135deg,#ec4899,#db2777); }
.yhw-type-ielts_writing    { color:#f97316; border-color:#f97316; }
.yhw-section-block.yhw-type-ielts_writing    .yhw-section-title { background:linear-gradient(135deg,#f97316,#ea580c); }
.yhw-type-word_bank        { color:#14b8a6; border-color:#14b8a6; }
.yhw-section-block.yhw-type-word_bank        .yhw-section-title { background:linear-gradient(135deg,#14b8a6,#0d9488); }

/* Instruction bar */
.yhw-open-instruction {
  background:#f8f9ff;
  border-left:3px solid #8b5cf6;
  padding:9px 14px;
  margin:0 0 14px;
  border-radius:0 8px 8px 0;
  font-size:calc(12.5px * var(--yhw-fs,1.1));
  color:#555;
  font-style:italic;
}
.yhw-type-word_completion  .yhw-open-instruction { border-color:#ec4899; }
.yhw-type-ielts_writing    .yhw-open-instruction { border-color:#f97316; }
.yhw-type-word_bank        .yhw-open-instruction { border-color:#14b8a6; }

/* Word Bank chips */
.yhw-wordbank-box {
  background:#e6faf8;
  border:1.5px dashed #14b8a6;
  border-radius:10px;
  padding:12px 14px;
  margin-bottom:16px;
}
.yhw-wordbank-label {
  font-size:calc(12px * var(--yhw-fs,1.1));
  font-weight:700;
  color:#0d9488;
  margin-bottom:8px;
}
.yhw-wordbank-words { display:flex;flex-wrap:wrap;gap:8px; }
.yhw-wb-chip {
  background:#fff;
  border:1.5px solid #14b8a6;
  color:#0f766e;
  border-radius:20px;
  padding:4px 14px;
  font-size:calc(13px * var(--yhw-fs,1.1));
  font-weight:600;
  cursor:default;
}

/* Open question block */
.yhw-open-block {
  background:#fff;
  border:1.5px solid #e8e8f0;
  border-radius:12px;
  padding:16px 18px;
  margin-bottom:14px;
}
.yhw-open-block .yhw-q-num-label {
  font-size:calc(11px * var(--yhw-fs,1.1));
  font-weight:700;
  color:#8b5cf6;
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:8px;
}
.yhw-type-word_completion  .yhw-open-block .yhw-q-num-label { color:#ec4899; }
.yhw-type-ielts_writing    .yhw-open-block .yhw-q-num-label { color:#f97316; }
.yhw-type-word_bank        .yhw-open-block .yhw-q-num-label { color:#14b8a6; }

/* Rewrite hint line */
.yhw-rewrite-hint {
  display:flex;
  align-items:baseline;
  gap:8px;
  margin:10px 0 8px;
  font-size:calc(14px * var(--yhw-fs,1.1));
}
.yhw-hint-arrow { color:#8b5cf6; font-size:1.1em; flex-shrink:0; }
.yhw-hint-text  { font-weight:700; color:#4b5563; }
.yhw-hint-dots  { color:#ccc; flex:1; overflow:hidden; white-space:nowrap; }

/* Word completion hint */
.yhw-wc-hint {
  display:inline-block;
  background:#fce7f3;
  color:#be185d;
  border-radius:6px;
  padding:3px 10px;
  font-size:calc(13px * var(--yhw-fs,1.1));
  font-weight:600;
  margin:6px 0 8px;
}

/* IELTS task label */
.yhw-ielts-task-label {
  background:#fff7ed;
  border:1.5px solid #fed7aa;
  border-radius:8px;
  padding:6px 12px;
  font-size:calc(12.5px * var(--yhw-fs,1.1));
  color:#c2410c;
  font-weight:700;
  margin:8px 0;
}

/* Textarea */
.yhw-open-textarea {
  width:100%;
  box-sizing:border-box;
  border:1.5px solid #ddd;
  border-radius:10px;
  padding:10px 14px;
  font-size:calc(14px * var(--yhw-fs,1.1));
  line-height:1.6;
  color:#333;
  resize:vertical;
  font-family:inherit;
  transition:border-color .2s, box-shadow .2s;
  margin-top:6px;
}
.yhw-open-textarea:focus {
  outline:none;
  border-color:#8b5cf6;
  box-shadow:0 0 0 3px rgba(139,92,246,.12);
}
.yhw-open-textarea[readonly] {
  background:#f5f5f9;
  color:#888;
  cursor:default;
}
.yhw-type-word_completion  .yhw-open-textarea:focus { border-color:#ec4899; box-shadow:0 0 0 3px rgba(236,72,153,.12); }
.yhw-type-ielts_writing    .yhw-open-textarea:focus { border-color:#f97316; box-shadow:0 0 0 3px rgba(249,115,22,.12); }
.yhw-type-word_bank        .yhw-open-textarea:focus { border-color:#14b8a6; box-shadow:0 0 0 3px rgba(20,184,166,.12); }

/* Model Answer box (hiện sau khi nộp) */
.yhw-model-answer {
  margin-top:12px;
  animation: yhwFadeIn .35s ease;
}
@keyframes yhwFadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.yhw-model-answer-inner {
  background:linear-gradient(135deg,#f0fdf4,#dcfce7);
  border:1.5px solid #86efac;
  border-radius:10px;
  padding:12px 16px;
}
.yhw-model-label {
  font-size:calc(12px * var(--yhw-fs,1.1));
  font-weight:700;
  color:#15803d;
  margin-bottom:6px;
}
.yhw-model-text {
  font-size:calc(14px * var(--yhw-fs,1.1));
  color:#166534;
  line-height:1.7;
  white-space:pre-wrap;
}
.yhw-model-explain {
  display:flex;
  gap:6px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid #bbf7d0;
  font-size:calc(12.5px * var(--yhw-fs,1.1));
  color:#4b5563;
}

/* Notice on result screen */
.yhw-open-notice {
  background:#fef3c7;
  border:1.5px solid #fcd34d;
  border-radius:10px;
  padding:10px 16px;
  font-size:calc(13px * var(--yhw-fs,1.1));
  color:#92400e;
  margin:12px 0;
  text-align:center;
  line-height:1.6;
}

/* ── Review: tự luận ── */
.yhw-review-open-qblock {
  background:#fff;
  border:1.5px solid #e8e8f0;
  border-radius:12px;
  padding:16px 18px;
  margin-bottom:12px;
}
.yhw-review-student-ans {
  background:#f8f9ff;
  border:1.5px solid #e0e0f0;
  border-radius:8px;
  padding:10px 14px;
  margin:10px 0 8px;
}
.yhw-review-student-label {
  font-size:calc(11.5px * var(--yhw-fs,1.1));
  font-weight:700;
  color:#6366f1;
  display:block;
  margin-bottom:5px;
}
.yhw-review-student-text {
  font-size:calc(13.5px * var(--yhw-fs,1.1));
  color:#333;
  white-space:pre-wrap;
  line-height:1.6;
}
.yhw-review-model-ans {
  background:linear-gradient(135deg,#f0fdf4,#dcfce7);
  border:1.5px solid #86efac;
  border-radius:8px;
  padding:10px 14px;
  margin-top:6px;
}
.yhw-review-model-ans .yhw-model-label { margin-bottom:5px; }
.yhw-review-model-ans .yhw-model-text { font-size:calc(13.5px * var(--yhw-fs,1.1)); color:#166534; white-space:pre-wrap; line-height:1.6; }

/* Admin: open question body styling */
.yhw-question-open .yhw-q-body { background:#fafafa; }

/* ═══════════════════════════════════════════════════════
   v15 — Word Bank Passage, Drag Reorder, Matching
   ═══════════════════════════════════════════════════════ */

/* Type colors */
.yhw-section-block.yhw-type-drag_reorder .yhw-section-title{background:linear-gradient(135deg,#6366f1,#4f46e5);}
.yhw-section-block.yhw-type-matching     .yhw-section-title{background:linear-gradient(135deg,#d97706,#b45309);}
.yhw-section-block.yhw-type-word_bank    .yhw-section-title{background:linear-gradient(135deg,#14b8a6,#0d9488);}

/* ══ MATCHING ══ */
.yhw-matching-block{padding:14px 16px;}
.yhw-matching-layout{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;margin-top:12px;align-items:start;}
@media(max-width:540px){.yhw-matching-layout{grid-template-columns:1fr;}}

.yhw-matching-item-a{
  display:flex;align-items:center;gap:8px;
  background:#fff8e1;border:1.5px solid #fcd34d;border-radius:10px;
  padding:9px 12px;min-height:44px;cursor:pointer;
  transition:background .15s,border-color .15s;
  position:relative;
}
.yhw-matching-item-a:hover,.yhw-match-a-over{background:#fef3c7;border-color:#d97706;}
.yhw-matching-item-a.yhw-match-a-selected{border-color:#d97706;box-shadow:0 0 0 3px rgba(217,119,6,.2);}
.yhw-matching-item-a.yhw-match-a-has{background:#fef9ee;}
.yhw-matching-num{font-weight:800;color:#d97706;font-size:calc(13px * var(--yhw-fs,1.1));min-width:18px;}
.yhw-matching-text-a{font-size:calc(14px * var(--yhw-fs,1.1));color:#333;flex:1;}
.yhw-match-badge{
  display:none;font-size:calc(12px * var(--yhw-fs,1.1));font-weight:700;color:#d97706;
  background:#fde68a;border-radius:6px;padding:2px 8px;margin-left:4px;white-space:nowrap;
}

.yhw-matching-item-b-draggable{
  display:flex;align-items:center;
  background:#fff;border:1.5px solid #fdba74;border-radius:10px;
  padding:9px 12px;min-height:44px;cursor:grab;
  transition:background .15s,opacity .2s,box-shadow .2s;
  font-size:calc(14px * var(--yhw-fs,1.1));color:#333;
  user-select:none;
}
.yhw-matching-item-b-draggable:hover{background:#fff7ed;box-shadow:0 2px 8px rgba(217,119,6,.15);}
.yhw-matching-item-b-draggable.yhw-match-b-dragging{opacity:.4;}
.yhw-matching-item-b-draggable.yhw-match-b-selected{border-color:#d97706;box-shadow:0 0 0 3px rgba(217,119,6,.2);background:#fff7ed;}
.yhw-matching-item-b-draggable.yhw-match-b-used{opacity:.35;cursor:default;}
.yhw-matching-item-b-draggable.yhw-match-locked{cursor:default;}
.yhw-matching-text-b{flex:1;}

/* Matching result grid */
.yhw-matching-result{margin-top:12px;border-radius:10px;overflow:hidden;}
.yhw-matching-result-grid{display:flex;flex-direction:column;gap:6px;}
.yhw-match-result-row{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;font-size:calc(13px * var(--yhw-fs,1.1));}
.yhw-match-correct{background:#dcfce7;}
.yhw-match-wrong  {background:#fee2e2;flex-wrap:wrap;}
.yhw-match-col-a  {font-weight:600;flex:1;color:#333;}
.yhw-match-arrow  {font-size:16px;flex-shrink:0;}
.yhw-match-placed {flex:1;}
.yhw-match-correct-b{width:100%;font-size:calc(12px * var(--yhw-fs,1.1));color:#16a34a;font-weight:700;padding-left:4px;}

/* ── Admin instruction hints ── */
.yhw-question-open .yhw-q-body{background:#fafafa;}

/* ── Word Bank correct answer display below zone ── */
.yhw-wb-dropzone.yhw-wb-wrong .yhw-wb-placed{color:#dc2626;text-decoration:line-through;}

/* ═══════════════════════════════════════════════════
   WORD REORDER — kéo thả từng từ ghép câu
   ═══════════════════════════════════════════════════ */
.yhw-section-block.yhw-type-drag_reorder .yhw-section-title{background:linear-gradient(135deg,#6366f1,#4f46e5);}

.yhw-wordreorder-block{padding:14px 16px 16px;}

/* Vùng answer */
.yhw-wr-answer-area{
  margin-top:10px;
}
.yhw-wr-answer-label{
  font-size:calc(11.5px * var(--yhw-fs,1.1));font-weight:700;color:#6366f1;
  margin-bottom:6px;
}
.yhw-wr-answer-slots{
  min-height:48px;
  border:2px dashed #a5b4fc;
  border-radius:12px;
  padding:8px 10px;
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  background:#f5f5ff;
  transition:background .15s,border-color .15s;
  cursor:text;
}
.yhw-wr-answer-slots.yhw-wr-area-over{background:#eef2ff;border-color:#6366f1;border-style:solid;}
.yhw-wr-empty-hint{
  color:#aaa;font-size:calc(12px * var(--yhw-fs,1.1));font-style:italic;padding:2px 4px;
}

/* Placed words in answer area */
.yhw-wr-placed{
  display:inline-flex;align-items:center;
  background:#6366f1;color:#fff;
  border-radius:8px;padding:5px 12px;
  font-size:calc(14px * var(--yhw-fs,1.1));font-weight:600;
  cursor:pointer;user-select:none;
  transition:opacity .15s,background .15s;
}
.yhw-wr-placed:hover{background:#4f46e5;opacity:.9;}
.yhw-wr-placed::after{content:'✕';font-size:10px;margin-left:6px;opacity:.7;}
.yhw-wr-chip-dragging.yhw-wr-placed{opacity:.4;}
/* Correct / wrong after submit */
.yhw-wr-placed-correct{background:#22c55e!important;}
.yhw-wr-placed-wrong  {background:#ef4444!important;}

/* Word bank */
.yhw-wr-bank{margin-top:14px;}
.yhw-wr-bank-label{
  font-size:calc(11.5px * var(--yhw-fs,1.1));font-weight:700;color:#64748b;
  margin-bottom:6px;
}
.yhw-wr-chips{
  display:flex;flex-wrap:wrap;gap:8px;
  min-height:40px;
  border-radius:12px;
  padding:8px 10px;
  background:#f8f9ff;
  border:1.5px solid #e0e0f0;
  transition:background .15s;
}
.yhw-wr-chips.yhw-wr-bank-over{background:#eef2ff;border-color:#a5b4fc;}

.yhw-wr-chip{
  display:inline-flex;align-items:center;
  background:#fff;border:1.5px solid #6366f1;color:#4338ca;
  border-radius:20px;padding:5px 14px;
  font-size:calc(13.5px * var(--yhw-fs,1.1));font-weight:600;
  cursor:pointer;user-select:none;
  transition:opacity .2s,box-shadow .15s,transform .1s;
}
.yhw-wr-chip:hover:not(.yhw-wr-chip-used):not(.yhw-wr-locked){
  background:#eef2ff;box-shadow:0 2px 8px rgba(99,102,241,.2);transform:translateY(-1px);
}
.yhw-wr-chip.yhw-wr-chip-used{opacity:.2;cursor:default;border-style:dashed;}
.yhw-wr-chip.yhw-wr-locked  {cursor:default;}
.yhw-wr-chip.yhw-wr-chip-dragging{opacity:.35;}

/* Reset button */
.yhw-wr-reset{
  margin-top:10px;
  background:none;border:1.5px solid #ddd;border-radius:8px;
  color:#888;font-size:calc(12px * var(--yhw-fs,1.1));padding:4px 12px;cursor:pointer;
  transition:border-color .15s,color .15s;
}
.yhw-wr-reset:hover{border-color:#6366f1;color:#6366f1;}

/* ── Review: Word Bank passage blanks ── */
.yhw-review-wb-passage{
  font-size:calc(15px * var(--yhw-fs,1.1));line-height:2.2;
  background:#fafafa;border:1.5px solid #e8e8f0;border-radius:10px;
  padding:14px 16px;margin-top:10px;
}
.yhw-review-wb-blank{
  display:inline-block;padding:2px 10px;border-radius:6px;
  font-weight:700;margin:0 3px;
}
.yhw-review-wb-expected{
  font-size:calc(11px * var(--yhw-fs,1.1));color:#16a34a;font-weight:700;
  margin-left:2px;
}

/* ── Review: Word Reorder chips ── */
.yhw-wr-review-words{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
.yhw-wr-review-chip{
  display:inline-flex;align-items:center;
  border-radius:8px;padding:4px 12px;
  font-size:calc(13.5px * var(--yhw-fs,1.1));font-weight:600;color:#fff;
}

/* ═══════════════════════════════════════════════════════
   WORD BANK — v17 (Passage + Sentences mode)
   ═══════════════════════════════════════════════════════ */
.yhw-section-block.yhw-type-word_bank .yhw-section-title{background:linear-gradient(135deg,#14b8a6,#0d9488);}

/* Chips tray */
.yhw-wordbank-box{background:#e6faf8;border:1.5px dashed #14b8a6;border-radius:10px;padding:12px 14px;margin-bottom:14px;}
.yhw-wordbank-label{font-size:calc(12px * var(--yhw-fs,1.1));font-weight:700;color:#0d9488;margin-bottom:8px;}
.yhw-wordbank-tray{display:flex;flex-wrap:wrap;gap:8px;min-height:36px;}

/* Chips */
.yhw-wb-chip{display:inline-flex;align-items:center;background:#fff;border:1.5px solid #14b8a6;color:#0f766e;border-radius:20px;padding:5px 14px;font-size:calc(13px * var(--yhw-fs,1.1));font-weight:600;user-select:none;}
.yhw-wb-chip-draggable{cursor:grab;transition:opacity .2s,box-shadow .15s,transform .1s;}
.yhw-wb-chip-draggable:hover:not(.yhw-wr-chip-used){background:#f0fdf9;box-shadow:0 2px 8px rgba(20,184,166,.25);transform:translateY(-1px);}
.yhw-wb-chip-draggable.yhw-wr-chip-used{opacity:.2;cursor:default;border-style:dashed;}
.yhw-chip-dragging{opacity:.35!important;}

/* Passage text */
.yhw-wb-passage-wrap{margin-top:4px;}
.yhw-wb-passage-text,.yhw-wb-sentence-text{
  font-size:calc(15px * var(--yhw-fs,1.1));
  line-height:2.4;
  color:#222;
}

/* ── Drop zone (ô trống) ── */
.yhw-wb-dropzone{
  display:inline-flex;align-items:center;justify-content:center;
  position:relative;
  width:120px;          /* fixed width — tất cả ô bằng nhau */
  min-height:32px;
  margin:0 4px;
  vertical-align:middle;
  border-bottom:2.5px solid #14b8a6;
  border-radius:6px 6px 0 0;
  background:#f0fdfb;
  transition:background .15s,border-color .15s,box-shadow .15s;
  cursor:pointer;
}
.yhw-wb-dropzone.yhw-wb-drag-over{
  background:#ccf2ee;border-color:#0d9488;border-bottom-style:solid;
  box-shadow:0 0 0 2px rgba(20,184,166,.25);
}
.yhw-wb-inner{display:flex;align-items:center;justify-content:center;width:100%;padding:2px 6px;}
/* Placeholder dash (khi trống) */
.yhw-wb-placeholder{display:block;width:80px;height:2px;background:#b2e8e2;border-radius:1px;}
/* Placed word */
.yhw-wb-placed{font-weight:700;color:#0f766e;font-size:calc(13.5px * var(--yhw-fs,1.1));text-align:center;white-space:nowrap;}
/* Clear button */
.yhw-wb-clear{position:absolute;top:-8px;right:-6px;background:#ef4444;border:none;border-radius:50%;width:16px;height:16px;font-size:9px;line-height:16px;text-align:center;color:#fff;cursor:pointer;padding:0;display:none;}
.yhw-wb-clear:hover{background:#dc2626;}
/* States */
.yhw-wb-dropzone.yhw-wb-filled{background:#e6faf8;border-color:#14b8a6;border-bottom-width:2.5px;}
.yhw-wb-dropzone.yhw-wb-correct{background:#dcfce7;border-color:#22c55e;}
.yhw-wb-dropzone.yhw-wb-wrong  {background:#fee2e2;border-color:#ef4444;}
.yhw-wb-dropzone.yhw-wb-correct .yhw-wb-placed{color:#15803d;}
.yhw-wb-dropzone.yhw-wb-wrong   .yhw-wb-placed{color:#dc2626;text-decoration:line-through;}
/* Correct answer label shown below wrong blank */
.yhw-wb-correct-label{
  display:block;font-size:11px;color:#16a34a;font-weight:700;
  position:absolute;top:calc(100% + 2px);left:0;white-space:nowrap;
}

/* Sentence block (sentences mode) */
.yhw-wb-sentence-block{background:#fff;border:1.5px solid #e8e8f0;border-radius:12px;padding:14px 16px;margin-bottom:12px;}
.yhw-wb-sentence-text{font-size:calc(15px * var(--yhw-fs,1.1));line-height:2.6;color:#222;}

/* ── Admin mode toggle ── */
.yhw-wb-admin-box{background:#fafafa;border:1.5px solid #e0e0e0;border-radius:10px;padding:14px;margin-bottom:10px;}
.yhw-wb-mode-row{display:flex;gap:16px;margin-bottom:14px;flex-wrap:wrap;}
.yhw-wb-mode-label{display:flex;align-items:center;gap:7px;cursor:pointer;font-weight:600;font-size:13px;padding:7px 14px;border:1.5px solid #ddd;border-radius:8px;transition:border-color .15s,background .15s;}
.yhw-wb-mode-label:has(input:checked),.yhw-wb-mode-label.active{border-color:#14b8a6;background:#e6faf8;color:#0d9488;}

/* ════════════════════════════════════════════════════════
   WORD BANK — Layout 2 cột: Tray trái sticky | Nội dung phải
   ════════════════════════════════════════════════════════ */

/* Bỏ margin-bottom cũ của wordbank-box khi ở trong layout mới */
.yhw-wb-layout .yhw-wordbank-box { margin-bottom: 0; }

.yhw-wb-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0;
  align-items: start;
  border: 1.5px solid #b2e8e2;
  border-radius: 12px;
  overflow: hidden;
}

/* ── CỘT TRÁI: tray sticky ── */
.yhw-wb-tray-col {
  background: #e6faf8;
  border-right: 1.5px solid #b2e8e2;
}
.yhw-wb-tray-sticky {
  position: sticky;
  top: 72px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  padding: 14px 12px;
}
.yhw-wb-tray-sticky .yhw-wordbank-label {
  font-size: calc(11px * var(--yhw-fs,1.1));
  font-weight: 700;
  color: #0d9488;
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid #14b8a6;
}
.yhw-wb-tray-sticky .yhw-wordbank-tray {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 30px;
}
/* Chip trong tray trái: full-width dạng pill */
.yhw-wb-tray-sticky .yhw-wb-chip-draggable {
  display: block;
  width: 100%;
  text-align: center;
  padding: 7px 10px;
  border-radius: 20px;
  font-size: calc(13px * var(--yhw-fs,1.1));
}
.yhw-wb-tray-hint {
  font-size: 10px;
  color: #5eead4;
  text-align: center;
  margin-top: 10px;
  line-height: 1.4;
}

/* Chip active (tap mode - zone đang chờ) */
.yhw-wb-zone-active {
  box-shadow: 0 0 0 3px rgba(20,184,166,.5) !important;
  background: #ccfbf1 !important;
  border-color: #0d9488 !important;
}
.yhw-wb-chip-draggable.yhw-wb-chip-selected {
  background: #14b8a6 !important;
  color: #fff !important;
  border-color: #0d9488 !important;
}

/* ── CỘT PHẢI: nội dung ── */
.yhw-wb-content-col {
  padding: 16px 18px;
}
.yhw-wb-content-col .yhw-open-instruction {
  margin-top: 0;
  margin-bottom: 14px;
}

/* ── Placeholder text trong ô trống ── */
.yhw-wb-placeholder {
  display: block;
  width: 70px;
  height: 2px;
  background: #b2e8e2;
  border-radius: 1px;
  /* override nếu dùng text placeholder */
}
/* Khi dùng text "___" làm placeholder */
.yhw-wb-dropzone .yhw-wb-placeholder:not(:empty) {
  width: auto;
  height: auto;
  background: none;
  color: #94a3b8;
  font-size: calc(13px * var(--yhw-fs,1.1));
  font-style: italic;
}

/* ════════════════════════════════════════════════════════
   WORD BANK — Review: hiển thị đúng/sai inline
   ════════════════════════════════════════════════════════ */

/* Chip header trong review */
.yhw-rv-wb-chipbox {
  background: #f0fdfb;
  border: 1px solid #b2e8e2;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
}
.yhw-rv-wb-chiplist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.yhw-rv-wb-chip {
  opacity: .65;
  font-size: calc(12px * var(--yhw-fs,1.1));
}

/* Passage review */
.yhw-review-wb-passage {
  font-size: calc(15px * var(--yhw-fs,1.1));
  line-height: 2.4;
  background: #fafafa;
  border: 1.5px solid #e8e8f0;
  border-radius: 10px;
  padding: 16px 18px;
  margin-top: 4px;
}

/* Sentences review rows */
.yhw-rv-wb-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding: 10px 14px;
  margin-bottom: 6px;
  border-radius: 10px;
  font-size: calc(14px * var(--yhw-fs,1.1));
  line-height: 2;
  background: #fafafa;
  border: 1px solid #e8e8f0;
}
.yhw-rv-wb-num {
  font-weight: 700;
  color: #0d9488;
  flex-shrink: 0;
  font-size: calc(13px * var(--yhw-fs,1.1));
}
.yhw-rv-wb-sent { flex: 1; }

/* Blank states dùng trong cả passage + sentences review */
.yhw-rv-wb-blank {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 8px;
  border-radius: 5px;
  font-size: calc(13.5px * var(--yhw-fs,1.1));
  vertical-align: middle;
  margin: 0 2px;
}
.yhw-rv-wb-blank-ok {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #86efac;
}
.yhw-rv-wb-blank-err {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}
.yhw-rv-wb-blank-skip {
  background: #f1f5f9;
  color: #94a3b8;
  border: 1px solid #e2e8f0;
}
.yhw-rv-wb-fix {
  color: #16a34a;
  font-weight: 700;
  font-size: calc(11px * var(--yhw-fs,1.1));
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════
   RESPONSIVE — Mobile Word Bank
   ════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Chuyển sang layout dọc: tray trên, nội dung dưới */
  .yhw-wb-layout {
    grid-template-columns: 1fr;
  }
  .yhw-wb-tray-col {
    border-right: none;
    border-bottom: 1.5px solid #b2e8e2;
  }
  .yhw-wb-tray-sticky {
    position: static;
    max-height: none;
    padding: 12px;
  }
  /* Tray ngang trên mobile */
  .yhw-wb-tray-sticky .yhw-wordbank-tray {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .yhw-wb-tray-sticky .yhw-wb-chip-draggable {
    display: inline-flex;
    width: auto;
    padding: 6px 14px;
  }
  .yhw-wb-tray-hint { display: none; }
  .yhw-wb-content-col { padding: 12px; }

  /* Dropzone nhỏ hơn trên mobile */
  .yhw-wb-dropzone { width: 90px; min-height: 28px; }

  /* Review passage font nhỏ hơn tí */
  .yhw-review-wb-passage { padding: 12px; font-size: calc(14px * var(--yhw-fs,1.1)); }
}

/* ═══════════════════════════════════════════════════════
   WORD BANK — Layout trái/phải sticky (v17 fix)
   ═══════════════════════════════════════════════════════ */

/* Bố cục 2 cột: tray sticky bên trái, nội dung bên phải */
.yhw-wb-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0;
  align-items: start;
  border: 1.5px solid #99f6e4;
  border-radius: 12px;
  overflow: hidden;
  margin-top: 10px;
}

/* CỘT TRÁI — word bank tray */
.yhw-wb-tray-col {
  background: #e6faf8;
  border-right: 1.5px solid #99f6e4;
}
.yhw-wb-tray-sticky {
  position: sticky;
  top: 76px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  padding: 14px 12px;
}
.yhw-wb-tray-sticky .yhw-wordbank-label {
  font-size: calc(11px * var(--yhw-fs,1.1));
  font-weight: 700;
  color: #0d9488;
  text-transform: uppercase;
  letter-spacing: .4px;
  border-bottom: 2px solid #14b8a6;
  padding-bottom: 6px;
  margin-bottom: 10px;
}
.yhw-wb-tray-sticky .yhw-wordbank-tray {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 40px;
}
/* Chip trong tray bên trái: full width */
.yhw-wb-tray-sticky .yhw-wb-chip-draggable {
  display: block;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: calc(13px * var(--yhw-fs,1.1));
  cursor: grab;
  background: #fff;
  border: 1.5px solid #14b8a6;
  color: #0f766e;
  font-weight: 600;
  transition: background .15s, opacity .2s, transform .1s;
  user-select: none;
}
.yhw-wb-tray-sticky .yhw-wb-chip-draggable:hover:not(.yhw-wr-chip-used) {
  background: #14b8a6;
  color: #fff;
  transform: translateX(2px);
}
.yhw-wb-tray-sticky .yhw-wb-chip-draggable.yhw-wr-chip-used {
  opacity: .25;
  cursor: default;
  text-decoration: line-through;
  border-style: dashed;
}
/* Chip được chọn (active tap mode) */
.yhw-wb-tray-sticky .yhw-wb-chip-draggable.yhw-wb-chip-selected {
  background: #0d9488;
  color: #fff;
  box-shadow: 0 0 0 3px #99f6e4;
}
.yhw-wb-tray-hint {
  font-size: calc(10px * var(--yhw-fs,1.1));
  color: #5eead4;
  text-align: center;
  margin-top: 10px;
  line-height: 1.4;
}

/* CỘT PHẢI — nội dung */
.yhw-wb-content-col {
  padding: 16px 18px;
  background: #fff;
}

/* Zone active (tap mode) */
.yhw-wb-dropzone.yhw-wb-zone-active {
  background: #ccf2ee !important;
  border-color: #0d9488 !important;
  box-shadow: 0 0 0 3px rgba(20,184,166,.35) !important;
}

/* Tăng kích thước touch target trên mobile */
.yhw-wb-dropzone {
  min-width: 90px;
  min-height: 36px;
  touch-action: manipulation;
}
.yhw-wb-chip-draggable {
  touch-action: manipulation;
}
.yhw-wb-clear {
  width: 20px;
  height: 20px;
  font-size: 10px;
  line-height: 20px;
  top: -10px;
  right: -8px;
}

/* ═══════════════════════════════════════════════════════
   WORD BANK — Review (sau khi nộp bài)
   ═══════════════════════════════════════════════════════ */

/* Header chips trong review */
.yhw-rv-wb-chipbox {
  background: #f0fdfb;
  border: 1px solid #99f6e4;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
}
.yhw-rv-wb-chiplist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.yhw-rv-wb-chip {
  background: #f3f4f6;
  color: #6b7280;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: 3px 10px;
  font-size: calc(12px * var(--yhw-fs,1.1));
  font-weight: 500;
}

/* Passage mode review: đoạn văn với ô màu inline */
.yhw-review-wb-passage {
  font-size: calc(15px * var(--yhw-fs,1.1));
  line-height: 2.4;
  background: #fafafa;
  border: 1.5px solid #e8e8f0;
  border-radius: 10px;
  padding: 16px 18px;
  margin-top: 4px;
}

/* Blank inline trong review */
.yhw-rv-wb-blank {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: calc(14px * var(--yhw-fs,1.1));
  vertical-align: middle;
  margin: 0 2px;
  font-weight: 600;
}
.yhw-rv-wb-blank-ok {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #86efac;
}
.yhw-rv-wb-blank-err {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}
.yhw-rv-wb-blank-err b {
  text-decoration: line-through;
  opacity: .7;
}
.yhw-rv-wb-blank-skip {
  background: #f3f4f6;
  color: #6b7280;
  border: 1px solid #d1d5db;
  font-style: italic;
  font-weight: 400;
}
.yhw-rv-wb-fix {
  color: #16a34a;
  font-weight: 700;
  font-size: calc(12px * var(--yhw-fs,1.1));
  white-space: nowrap;
}

/* Sentences mode review: mỗi dòng */
.yhw-rv-wb-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding: 10px 12px;
  margin-bottom: 6px;
  border-radius: 8px;
  border-left: 4px solid #e5e7eb;
  background: #fafafa;
  font-size: calc(14px * var(--yhw-fs,1.1));
  line-height: 2;
}
.yhw-rv-wb-num {
  font-weight: 700;
  color: #0d9488;
  flex-shrink: 0;
  font-size: calc(13px * var(--yhw-fs,1.1));
}
.yhw-rv-wb-sent { flex: 1; color: #222; }

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — Mobile Word Bank
   ═══════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Trên mobile: tray nằm trên, nội dung nằm dưới */
  .yhw-wb-layout {
    grid-template-columns: 1fr;
  }
  .yhw-wb-tray-col {
    border-right: none;
    border-bottom: 1.5px solid #99f6e4;
  }
  .yhw-wb-tray-sticky {
    position: static;
    max-height: none;
    overflow-y: visible;
    padding: 12px 14px;
  }
  .yhw-wb-tray-sticky .yhw-wordbank-tray {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }
  .yhw-wb-tray-sticky .yhw-wb-chip-draggable {
    display: inline-flex;
    width: auto;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: calc(13px * var(--yhw-fs,1.1));
  }
  .yhw-wb-tray-hint {
    display: none;
  }
  .yhw-wb-content-col {
    padding: 12px 14px;
  }
  /* Ô trống trên mobile rộng hơn, dễ nhấn hơn */
  .yhw-wb-dropzone {
    min-width: 80px;
    min-height: 38px;
    font-size: calc(14px * var(--yhw-fs,1.1));
  }
}

/* ===== SECTION STATS TABLE ===== */
.yhw-section-stats {
  margin: 16px 0 8px;
  width: 100%;
}
.yhw-section-stats-title {
  font-size: 14px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 8px;
  text-align: left;
}
.yhw-section-stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  text-align: center;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.yhw-section-stats-table thead tr {
  background: #1a5276;
  color: #fff;
}
.yhw-section-stats-table th {
  padding: 8px 10px;
  font-weight: 600;
  font-size: 12px;
}
.yhw-section-stats-table td {
  padding: 7px 10px;
  border-bottom: 1px solid #e8e8f0;
  background: #fff;
}
.yhw-section-stats-table tr:nth-child(even) td { background: #f8f9fc; }
.yhw-ss-label { text-align: left; font-weight: 500; color: #333; }
.yhw-ss-ok   { color: #27ae60; font-weight: 700; }
.yhw-ss-bad  { color: #e74c3c; font-weight: 700; }
.yhw-ss-skip { color: #888; }
.yhw-ss-pct  { font-weight: 700; color: #1a5276; }
.yhw-ss-free { font-size: 11px; color: #888; font-weight: normal; }
.yhw-ss-subtotal-row td {
  font-weight: 700;
  border-top: 1px dashed #aaa;
}
.yhw-ss-subtotal-listening td {
  background: #fff8e1 !important;
  color: #7c4a00;
}
.yhw-ss-subtotal-quiz td {
  background: #e8f5e9 !important;
  color: #1b5e20;
}
.yhw-ss-total-row td {
  background: #eaf2fb !important;
  font-weight: 700;
  border-top: 2px solid #1a5276;
}
.yhw-ss-note {
  font-size: 11px;
  color: #888;
  text-align: left;
  margin: 6px 0 0;
  font-style: italic;
}

/* ══ LISTENING INTEGRATION STYLES ══ */
.yhw-listening-block {
  margin-bottom: 0;
  border: 2px solid #fbbf24;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.yhw-listening-header {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  padding: 10px 18px;
  letter-spacing: 0.3px;
}
.yhw-listening-block .yhwl-player-bar {
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
}
.yhw-listening-block .yhwl-questions-area {
  padding: 0 4px;
}
.yhw-listening-block .yhwl-section-block {
  border-radius: 8px;
  margin: 10px 10px 4px;
}

/* ── Dual score layout ── */
.yhw-score-dual-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin: 16px 0 10px;
}
.yhw-score-part {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 150px;
}
.yhw-score-part-label {
  font-size: 14px;
  font-weight: 700;
  color: #374151;
  margin-bottom: 2px;
}
.yhw-score-divider {
  width: 2px;
  background: #e5e7eb;
  align-self: stretch;
  min-height: 120px;
  border-radius: 2px;
}
.yhw-score-circle-listening .yhw-score-ring-listening { stroke: #f59e0b; }
.yhw-score-circle-listening .yhw-score-lbl { color: #d97706; }

/* ── Total score bar ── */
.yhw-total-score-bar {
  text-align: center;
  margin: 12px auto 6px;
  font-size: 15px;
  color: #374151;
  background: linear-gradient(135deg, #eef2ff, #fef3c7);
  border: 1.5px solid #c7d2fe;
  border-radius: 10px;
  padding: 10px 20px;
  font-weight: 600;
  max-width: 340px;
}
.yhw-total-score-bar strong { color: #4f46e5; font-size: 17px; }

/* ── Listening rows in stats table ── */
.yhw-ss-row-listening td {
  background: #fefce8 !important;
  color: #92400e;
}
.yhw-ss-row-listening .yhw-ss-label { color: #d97706; }

/* ── Separator between listening and quiz ── */
.yhw-screen-quiz > div[style*="linear-gradient"] {
  margin: 0 0 12px;
}

@media (max-width: 480px) {
  .yhw-score-dual-wrap { flex-direction: column; align-items: center; }
  .yhw-score-divider { width: auto; height: 2px; min-height: unset; align-self: stretch; }
}