/* FIX header sticky (Flatsome) che nội dung */
#hpo-600tn{position:relative;z-index:1}
#hpo-600tn .quiz-shell{padding-top:20px!important}
@media (max-width:768px){#hpo-600tn .quiz-shell{padding-top:70px}}
#hpo-600tn [id]{scroll-margin-top:100px}

/* wpautop safe reset */
#hpo-600tn p{margin:0!important}
#hpo-600tn p:empty{display:none!important}
#hpo-600tn br{display:none!important}
#hpo-600tn,#hpo-600tn *{box-sizing:border-box}
#hpo-600tn{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;line-height:1.4;color:#0f172a}

/* layout */
#hpo-600tn .quiz-shell{padding:10px;display:flex;justify-content:center;align-items:flex-start}
#hpo-600tn .quiz-wrapper{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin:0 auto;
  width:98%;
  max-width:1100px;
  align-items:stretch;
  justify-content:flex-start
}

/* loading */
#hpo-600tn .loading{display:flex;flex-direction:column;align-items:center;gap:10px;padding:26px 10px;color:#333}
#hpo-600tn .spinner{width:44px;height:44px;border-radius:50%;border:5px solid rgba(102,126,234,.25);border-top-color:#667eea;animation:hpoSpin 1s linear infinite}
#hpo-600tn .error-message{background:#fff3cd;border:1px solid #ffeeba;color:#856404;padding:14px;border-radius:12px;width:100%}

/* bỏ progress */
#hpo-600tn .progress-bar{display:none!important}

/* TOPBAR */
#hpo-600tn .quiz-topbar{
  background:#fff;
  border-radius:20px;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 16px 44px rgba(2,6,23,.10);
  padding:14px;
}

/* row dưới */
#hpo-600tn .quiz-mainrow{display:flex;gap:15px;align-items:flex-start}

/* card câu hỏi */
#hpo-600tn .quiz-container{
  background:#fff;border-radius:20px;
  box-shadow:0 16px 44px rgba(2,6,23,.14);
  flex:1 1 auto;min-width:0;
  padding:20px;
  border:1px solid rgba(15,23,42,.08)
}

/* SUBBAR (Câu + Điểm) */
#hpo-600tn .quiz-subbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
#hpo-600tn .question-number{font-weight:900;color:#667eea;white-space:nowrap}
#hpo-600tn .score-display{
  background:linear-gradient(135deg,#667eea,#764ba2);
  color:#fff;padding:8px 16px;border-radius:999px;font-weight:950;white-space:nowrap
}

/* ===== TABS ===== */
#hpo-600tn .qset-wrap{min-width:0;display:flex;flex-direction:column;gap:10px}

/* ✅ DESKTOP: luôn 1 hàng, không tràn, không scroll */
#hpo-600tn .qset-tabs{
  display:flex;
  flex-wrap:nowrap;
  overflow:hidden;                 /* ✅ chặn tràn */
  gap:clamp(6px,0.5vw,10px);       /* ✅ giảm khoảng cách */
  align-items:center;
  width:100%;
  min-width:0;
}

/* ✅ tab tự chia đều chiều ngang */
#hpo-600tn .qtab{
  flex:1 1 0;                      /* ✅ chia đều */
  min-width:0;                     /* ✅ cho phép co */
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;

  border:2px solid rgba(244,67,54,.55);
  background:#fff;
  color:#ef4444;

  padding:clamp(8px,0.65vw,10px) clamp(10px,0.9vw,14px); /* ✅ giảm width */
  border-radius:14px;
  font-weight:950;
  font-size:clamp(13px,0.9vw,16px); /* ✅ co chữ theo màn */
  cursor:pointer;

  transition:transform .12s ease,box-shadow .12s ease,background .12s ease,color .12s ease,border-color .12s ease;
  box-shadow:0 10px 22px rgba(2,6,23,.06);
}
#hpo-600tn .qtab:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(2,6,23,.10)}

/* active */
#hpo-600tn .qtab.is-active{background:linear-gradient(135deg,#ef4444,#fb7185);color:#fff;border-color:transparent;box-shadow:0 18px 36px rgba(239,68,68,.22)}

/* critical */
#hpo-600tn .qtab.is-critical{border-color:#b91c1c;color:#b91c1c}
#hpo-600tn .qtab.is-critical.is-active{background:linear-gradient(135deg,#b91c1c,#ef4444);color:#fff;box-shadow:0 18px 36px rgba(185,28,28,.25)}

/* ✅ FIX: CÂU ĐIỂM LIỆT bị cắt chữ -> ưu tiên độ rộng + bớt ellipsis */
#hpo-600tn .qtab.is-critical{
  flex:1.6 1 0;        /* ✅ rộng hơn tab thường */
  min-width:150px;     /* ✅ không bị bóp quá nhỏ */
  text-overflow:clip;  /* ✅ không cắt thành "Câu điê..." */
}

/* all */
#hpo-600tn .qtab.is-all{border-color:rgba(102,126,234,.55);color:#4f46e5}
#hpo-600tn .qtab.is-all.is-active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 18px 36px rgba(102,126,234,.22)}

/* current title - căn giữa */
#hpo-600tn .qset-current{
  border-radius:16px;padding:12px 14px;font-weight:1000;color:#0b1b3a;
  background:linear-gradient(135deg,#e8f0ff,#f4f6ff);
  border:2px solid rgba(102,126,234,.28);
  box-shadow:0 10px 24px rgba(2,6,23,.08);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center
}

/* ✅ MOBILE mới scroll */
@media (max-width:900px){
  #hpo-600tn .qset-tabs{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    gap:10px;
  }
  #hpo-600tn .qtab{
    flex:0 0 auto;      /* mobile: nút theo nội dung */
    min-width:auto;
    overflow:visible;
    text-overflow:clip;
  }
  #hpo-600tn .qtab.is-critical{
    flex:0 0 auto;
    min-width:auto;
    text-overflow:clip;
  }
  #hpo-600tn .qset-tabs::-webkit-scrollbar{height:8px}
  #hpo-600tn .qset-tabs::-webkit-scrollbar-thumb{background:rgba(15,23,42,.12);border-radius:999px}
}

/* nội dung câu hỏi */
#hpo-600tn .question-title{font-size:1.2em;color:#333;line-height:1.6;margin:0 0 16px;font-weight:600}
#hpo-600tn .question-image{width:80%;max-height:320px;object-fit:contain;border-radius:15px;margin:0 auto 18px;box-shadow:0 5px 15px rgba(0,0,0,.1);background:#f5f5f5;display:block}
#hpo-600tn .question-image.hidden{display:none}
@media (max-width:768px){#hpo-600tn .question-image{width:100%;max-height:320px}}

#hpo-600tn .answers-container{display:flex;flex-direction:column;gap:12px}
#hpo-600tn .answer-option{background:#f8f9fa;border:2px solid #e0e0e0;border-radius:12px;padding:16px 18px;cursor:pointer;transition:all .25s ease;font-size:1.02em;color:#333;position:relative;overflow:hidden}
#hpo-600tn .answer-option:hover{border-color:#667eea;background:#f0f2ff;transform:translateX(3px)}
#hpo-600tn .answer-option.selected{border-color:#667eea;background:linear-gradient(135deg,#667eea20,#764ba220);font-weight:800}
#hpo-600tn .answer-option.correct{border-color:#4caf50;background:linear-gradient(135deg,#4caf5020,#45a04920);animation:hpoCorrectPulse .5s ease}
#hpo-600tn .answer-option.incorrect{border-color:#f44336;background:linear-gradient(135deg,#f4433620,#d32f2f20);animation:hpoShake .5s ease}

#hpo-600tn .answer-number{display:inline-block;width:30px;height:30px;background:#667eea;color:#fff;border-radius:50%;text-align:center;line-height:30px;margin-right:12px;font-weight:900}
#hpo-600tn .answer-option.correct .answer-number{background:#4caf50}
#hpo-600tn .answer-option.incorrect .answer-number{background:#f44336}

#hpo-600tn .feedback{margin-top:16px;padding:14px 16px;border-radius:12px;font-weight:800;text-align:center;animation:hpoSlideDown .3s ease}
#hpo-600tn .feedback.correct{background:#e8f5e9;color:#2e7d32;border:2px solid #4caf50}
#hpo-600tn .feedback.incorrect{background:#ffebee;color:#c62828;border:2px solid #f44336}

#hpo-600tn .buttons-container{display:flex;gap:12px;margin-top:20px;justify-content:center;flex-wrap:wrap}
#hpo-600tn .btn{padding:12px 22px;border:none;border-radius:12px;font-size:1.02em;font-weight:900;cursor:pointer;transition:all .25s ease;text-transform:uppercase;letter-spacing:.5px}
#hpo-600tn .btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}
#hpo-600tn .btn-primary:hover{transform:translateY(-2px);box-shadow:0 5px 20px rgba(102,126,234,.4)}
#hpo-600tn .btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}
#hpo-600tn .btn-secondary{background:#f5f5f5;color:#666}
#hpo-600tn .btn-secondary:hover{background:#e0e0e0;transform:translateY(-2px)}

#hpo-600tn .results-container{text-align:center;padding:30px 10px}
#hpo-600tn .results-container h2{color:#667eea;font-size:2.1em;margin:0 0 10px}
#hpo-600tn .score-circle{width:180px;height:180px;border-radius:50%;margin:18px auto;display:flex;align-items:center;justify-content:center;font-size:2.6em;font-weight:1000;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 10px 30px rgba(102,126,234,.3);animation:hpoScaleIn .5s ease}
#hpo-600tn .score-text{font-size:1.15em;color:#666;margin:0 0 18px}

/* navigator */
#hpo-600tn .question-navigator{
  background:#fff;border-radius:18px;box-shadow:0 14px 34px rgba(2,6,23,.12);
  width:340px;min-width:340px;position:sticky;top:90px;max-height:75vh;overflow:hidden;
  display:none;flex-direction:column;border:1px solid rgba(15,23,42,.08)
}
#hpo-600tn .navigator-header{display:flex;justify-content:space-between;align-items:center;padding:12px 12px;border-bottom:1px solid #e5e7eb;font-weight:900;color:#0f172a}
#hpo-600tn .btn-toggle-nav{border:none;background:#eef2ff;color:#334155;border-radius:10px;padding:6px 10px;cursor:pointer;font-weight:900}
#hpo-600tn .navigator-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:12px;max-height:60vh;overflow:auto;transition:max-height .25s ease,padding .25s ease}
#hpo-600tn .navigator-grid.collapsed{max-height:0;padding:0 12px;overflow:hidden}
#hpo-600tn .question-navigator.collapsed{width:84px;min-width:84px}
#hpo-600tn .question-nav-item{width:48px;height:48px;border-radius:14px;background:#f1f5f9;border:2px solid #e2e8f0;display:flex;align-items:center;justify-content:center;font-weight:1000;cursor:pointer;user-select:none;transition:all .2s ease}
#hpo-600tn .question-nav-item:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(2,6,23,.12)}
#hpo-600tn .question-nav-item.current{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:#667eea;box-shadow:0 0 15px rgba(102,126,234,.35)}
#hpo-600tn .question-nav-item.answered{background:#4caf50;color:#fff;border-color:#4caf50}
#hpo-600tn .question-nav-item.answered.incorrect{background:#f44336;border-color:#f44336}
#hpo-600tn .hpo-flag99{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:8px;
  font-size:18px;
  line-height:1;
  transform:translateY(1px);
  filter:drop-shadow(0 6px 10px rgba(244,67,54,.25));
}

/* responsive tổng */
@media (max-width:768px){
  #hpo-600tn .quiz-mainrow{flex-direction:column}
  #hpo-600tn .quiz-container{padding:15px;width:100%;min-width:auto}
  #hpo-600tn .question-navigator{width:100%;min-width:auto;position:static;max-height:300px;order:-1}
  #hpo-600tn .navigator-grid{grid-template-columns:repeat(5,1fr);max-height:200px}
  #hpo-600tn .navigator-grid.collapsed{max-height:0;padding:0 10px;overflow:hidden;display:grid}
  #hpo-600tn .question-title{font-size:1.05em}
  #hpo-600tn .answer-option{padding:14px 16px}
  #hpo-600tn .buttons-container{flex-direction:column}
  #hpo-600tn .btn{width:100%}
  #hpo-600tn .quiz-subbar{flex-wrap:wrap}
}

/* animations */
@keyframes hpoSpin{to{transform:rotate(360deg)}}
@keyframes hpoScaleIn{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes hpoSlideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@keyframes hpoCorrectPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
@keyframes hpoShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-10px)}75%{transform:translateX(10px)}}