/* ========================================================
   KHÓA TUYỆT ĐỐI WINDOW VÀ BODY (ZERO BODY SCROLLBAR)
   ======================================================== */
html {
  overflow: hidden !important;
  height: 100% !important;
  max-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
}

body {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

/* ========================================================
   GIAO DIỆN PHÒNG THI CHÍNH
   ======================================================== */
.ielts-exam-master-container {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: #ffffff;
  color: #111827;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  z-index: 99999;
}

.ielts-exam-master-container * {
  box-sizing: border-box;
}

/* 1. TOPBAR TRÊN CÙNG: 56PX */
.ielts-master-topbar {
  flex: 0 0 56px !important;
  height: 56px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  background: #f8fafc;
  padding: 0 20px !important;
  border-bottom: 1.5px solid #cbd5e1;
  user-select: none;
  z-index: 20;
}

.passage-tabs {
  display: flex;
  gap: 8px;
}

.tab-btn {
  padding: 6px 16px;
  background: #e2e8f0;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  color: #334155;
  transition: all 0.2s;
}

.tab-btn.active {
  background: #0284c7;
  color: #fff;
  border-color: #0284c7;
}

.tab-btn.locked,
.nav-arrow-btn.locked,
.q-btn.locked {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  filter: grayscale(100%);
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.timer-box {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1.5px solid #0284c7;
  color: #0284c7;
  font-weight: 700;
  font-size: 15px;
  padding: 4px 14px;
  border-radius: 20px;
}

.timer-box.timer-warning {
  border-color: #dc2626;
  color: #dc2626;
  background: #fef2f2;
  animation: pulse 1s infinite alternate;
}
@keyframes pulse { 0% { transform: scale(1); } 100% { transform: scale(1.04); } }

.btn-start {
  background: #16a34a;
  color: #ffffff;
  border: none;
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(22, 163, 74, 0.2);
}
.btn-start:hover:not(:disabled) { background: #15803d; }
.btn-start:disabled { background: #94a3b8; cursor: not-allowed; }

/* ========================================================
   2. THANH ĐIỀU HƯỚNG CÂU HỎI (ĐƯỢC ĐƯA LÊN TRÊN, DƯỚI TOPBAR)
   Chiều cao 56px, phẳng, không bị che bởi taskbar
   ======================================================== */
.ielts-bottom-bar {
  flex: 0 0 56px !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  background: #0b1329;
  color: #fff;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 16px !important;
  user-select: none;
  border-bottom: 2px solid #1e293b;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  overflow: hidden !important;
  z-index: 15;
}

.nav-arrow-btn {
  height: 36px;
  padding: 0 16px;
  background: #1e293b;
  color: white;
  border: 1px solid #475569;
  cursor: pointer;
  border-radius: 5px;
  font-weight: 700;
  font-size: 13.5px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.nav-arrow-btn:hover:not(:disabled) {
  background: #334155;
  border-color: #64748b;
}

/* Khung chứa các nút số câu hỏi: Giữ trên 1 hàng, không cuộn */
.questions-nav-scroll {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 10px;
  overflow: hidden !important;
}

.questions-nav-scroll::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Kích thước nút câu hỏi: 34px, chuẩn và sắc nét */
.q-btn {
  flex: 0 1 34px;
  min-width: 22px;
  max-width: 36px;
  height: 34px;
  padding: 0;
  background: #1e293b;
  color: #cbd5e1;
  border: 1px solid #475569;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 1;
  transition: all 0.15s ease;
}

.q-btn:hover {
  background: #334155;
  color: #ffffff;
  border-color: #94a3b8;
}

.q-btn.current {
  border: 2px solid #38bdf8 !important;
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(56, 189, 248, 0.5) !important;
}

/* HIỆU ỨNG ĐÈN GIAO THÔNG XANH LÁ (ĐÃ ĐIỀN ĐÁP ÁN) */
.q-btn.answered {
  background: #22c55e !important;
  color: #ffffff !important;
  border-color: #16a34a !important;
  font-weight: 800 !important;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.7) !important;
}

.q-btn.answered.current {
  border: 2px solid #ffffff !important;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.95), 0 0 4px #ffffff !important;
}

/* ========================================================
   3. KHU VỰC THÂN Ở DƯỚI: 2 CỘT TỶ LỆ 50:50 CỐ ĐỊNH
   (100vh trừ Topbar 56px + Nav 56px = 112px)
   ======================================================== */
.ielts-passage-wrapper {
  display: none !important;
  flex: 1 1 auto !important;
  height: calc(100vh - 112px) !important;
  max-height: calc(100vh - 112px) !important;
  width: 100% !important;
  overflow: hidden !important;
}

.ielts-passage-wrapper.active {
  display: flex !important;
}

.split-left, .split-right {
  flex: 0 0 50% !important;
  width: 50% !important;
  min-width: 50% !important;
  max-width: 50% !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

.split-left {
  padding: 24px 28px 40px 28px;
  border-right: 2px solid #e2e8f0;
  background: #ffffff;
}

.split-right {
  padding: 24px 28px 60px 28px;
  background: #ffffff;
}

.split-left::-webkit-scrollbar,
.split-right::-webkit-scrollbar {
  width: 6px !important;
  display: block !important;
}
.split-left::-webkit-scrollbar-track,
.split-right::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}
.split-left::-webkit-scrollbar-thumb,
.split-right::-webkit-scrollbar-thumb {
  background: #bbb;
  border-radius: 4px;
}
.split-left::-webkit-scrollbar-thumb:hover,
.split-right::-webkit-scrollbar-thumb:hover {
  background: #888;
}

/* HIGHLIGHTER & CÁC DẠNG CÂU HỎI */
.hl-yellow { background-color: #ffeb3b !important; color: inherit; }
.hl-cyan   { background-color: #00e5ff !important; color: inherit; }
.hl-orange { background-color: #ffb74d !important; color: inherit; }
#ielts-highlighter-toolbar {
  position: absolute;
  display: none;
  background: #ffffff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  border: 1px solid #ddd;
  border-radius: 20px;
  padding: 4px 8px;
  gap: 8px;
  align-items: center;
  z-index: 999999;
}
.hl-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.15);
  cursor: pointer;
}
.hl-btn:hover { transform: scale(1.2); }
.hl-btn-clear {
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #777;
  padding: 0 4px;
}
.hl-btn-clear:hover { color: #d32f2f; }

.start-placeholder { padding: 60px 20px; text-align: center; }
.placeholder-icon { font-size: 48px; margin-bottom: 12px; }
.placeholder-title { font-size: 20px; font-weight: 700; color: #1e293b; margin-bottom: 8px; }
.placeholder-desc { font-size: 15px; color: #64748b; line-height: 1.6; }

.ielts-section-block { margin-bottom: 36px; padding-bottom: 24px; border-bottom: 1px solid #e5e7eb; }
.ielts-q-heading { font-size: 17px; font-weight: 700; color: #111827; margin: 0 0 6px 0; }
.ielts-instruction { font-size: 15px; font-style: italic; color: #374151; margin: 0 0 14px 0; line-height: 1.5; }
.ielts-rubric-table { margin-bottom: 16px; font-size: 14.5px; line-height: 1.6; margin-left: 20px; }
.ielts-rubric-row { display: flex; gap: 20px; }
.ielts-rubric-label { font-weight: 700; min-width: 110px; }

.ielts-tfng-item { margin-bottom: 16px; padding: 8px 10px; border-radius: 6px; transition: all 0.2s; }
.ielts-tfng-item.focused { background-color: #fff8e1; outline: 2px solid #ffb900; }
.ielts-item-prompt { font-size: 15.5px; line-height: 1.5; margin-bottom: 6px; }
.ielts-item-pills { display: flex; gap: 8px; margin-left: 20px; flex-wrap: wrap; }
.pill-option { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; padding: 4px 10px; background: #f3f4f6; border: 1px solid #d1d5db; border-radius: 14px; cursor: pointer; }
.pill-option:hover { background: #e5e7eb; }
.pill-option input { accent-color: #0284c7; margin: 0; }

.ielts-center-title { text-align: center; font-size: 17.5px; font-weight: 700; margin: 16px 0 14px 0; }
.ielts-sub-heading { font-size: 15.5px; font-weight: 700; margin: 14px 0 8px 0; }
.ielts-bullet-list { padding-left: 24px; margin: 0 0 14px 0; }
.ielts-bullet-list li { font-size: 15px; line-height: 2; margin-bottom: 8px; }
.ielts-blank-wrap { display: inline-flex; align-items: center; gap: 4px; margin: 0 3px; }
.ielts-blank-input { border: none; border-bottom: 1.5px solid #111827; background: transparent; outline: none; padding: 2px 4px; font-size: 15px; font-weight: 600; width: 120px; text-align: center; color: #111827; }
.ielts-blank-input:focus { border-bottom-color: #0284c7; background: #f0f9ff; }

.ielts-headings-box { background: #f9fafb; border: 1px solid #e5e7eb; padding: 14px 18px; border-radius: 6px; margin-bottom: 20px; }
.headings-title { font-weight: 700; margin-bottom: 8px; font-size: 15px; }
.headings-list-grid { display: flex; flex-direction: column; gap: 4px; font-size: 14.5px; line-height: 1.5; }
.heading-row-text { display: flex; gap: 12px; }
.heading-roman-num { font-weight: 700; min-width: 32px; }

.ielts-heading-choice-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px dashed #e5e7eb;
  flex-wrap: wrap;
  gap: 8px;
}
.heading-q-label { font-weight: 700; font-size: 15px; min-width: 110px; }
.roman-pills-bar { display: flex; gap: 4px; flex-wrap: wrap; }
.roman-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 26px; padding: 0 5px; border: 1px solid #cbd5e1; border-radius: 4px; background: #ffffff; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.roman-pill input { display: none; }
.roman-pill:has(input:checked) { background: #0284c7; color: #ffffff; border-color: #0284c7; }

.ielts-dropdown-item { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; padding: 8px 10px; border-radius: 6px; }
.ielts-dropdown-item.focused { background-color: #fff8e1; outline: 2px solid #ffb900; }
.ielts-select-box { padding: 5px 10px; border: 1.5px solid #94a3b8; border-radius: 4px; font-weight: 700; font-size: 14px; background: #ffffff; outline: none; cursor: pointer; }
.ielts-select-box:focus { border-color: #0284c7; }

.picktwo-options-list { display: flex; flex-direction: column; gap: 8px; margin-left: 20px; }
.picktwo-option-row { display: flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; }
.picktwo-option-row input { accent-color: #0284c7; }

.feedback-area { display: inline-flex; align-items: center; gap: 8px; margin-left: 14px; }
.feedback { font-size: 13.5px; font-weight: 700; }
.feedback.correct { color: #16a34a; }
.feedback.incorrect { color: #dc2626; }
.correct-border { border-color: #16a34a !important; background-color: #f0fdf4 !important; }
.incorrect-border { border-color: #dc2626 !important; background-color: #fef2f2 !important; }

.btn-explain { display: none; background: #e0f2fe; color: #0369a1; border: 1px solid #7dd3fc; border-radius: 4px; padding: 2px 8px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.explanation-box { display: none; background: #ffffff; border-left: 4px solid #0284c7; box-shadow: 0 2px 8px rgba(0,0,0,0.06); padding: 10px 14px; margin-top: 8px; font-size: 14px; line-height: 1.5; color: #334155; }
.exp-row { margin-bottom: 4px; }
.exp-label { font-weight: 700; color: #0f172a; min-width: 100px; display: inline-block; }
.exp-clue { font-style: italic; color: #0369a1; }

.result-banner { background: #f1f5f9; border: 1.5px solid #cbd5e1; border-radius: 8px; padding: 16px; text-align: center; margin-bottom: 24px; }
.score-display { font-size: 20px; font-weight: 800; color: #0f172a; }
.exam-actions { display: flex; gap: 14px; padding-top: 14px; border-top: 1px solid #e2e8f0; }
.exam-btn { flex: 1; padding: 12px; font-size: 15px; font-weight: 700; border: none; border-radius: 6px; cursor: pointer; }
.btn-primary { background: #0284c7; color: #fff; }
.btn-secondary { background: #e2e8f0; color: #334155; }