/* Trang gop test tram cam - 4 nut chuyen bai khong reload. Dong bo mau voi engine pro. */
.dep-hub{
  --dh-accent:#6c5ce7;--dh-accent2:#00a8c6;--dh-text:#1f2433;--dh-muted:#5b6477;
  --dh-soft:#f3f5fc;--dh-line:#e4e8f4;
  max-width:720px;margin:24px auto;
  font-family:'Roboto','Segoe UI',system-ui,-apple-system,Arial,sans-serif;color:var(--dh-text);
}
.dep-hub *{box-sizing:border-box}
.dep-hub .dep-hub-title{font-size:24px;font-weight:800;text-align:center;margin:0 0 6px;text-transform:none !important}
.dep-hub .dep-hub-intro{color:var(--dh-muted);text-align:center;margin:0 0 20px;text-transform:none !important}

/* Thanh 4 nut */
.dep-hub .dep-hub-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:22px}
.dep-hub .dep-hub-tab{
  display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;cursor:pointer;
  background:var(--dh-soft);border:1.5px solid var(--dh-line);border-radius:14px;padding:14px 10px;
  transition:.16s;color:var(--dh-text);text-transform:none !important;font-family:inherit !important;
}
.dep-hub .dep-hub-tab:hover{border-color:var(--dh-accent);transform:translateY(-2px)}
.dep-hub .dep-hub-tab.dep-on{background:linear-gradient(90deg,var(--dh-accent),var(--dh-accent2));border-color:transparent;color:#fff;
  box-shadow:0 10px 22px -10px rgba(108,92,231,.8)}
.dep-hub .dep-hub-tab-label{font-size:16px;font-weight:700;line-height:1.2}
.dep-hub .dep-hub-tab-desc{font-size:11.5px;line-height:1.3;opacity:.8}
.dep-hub .dep-hub-tab.dep-on .dep-hub-tab-desc{opacity:.92}

/* Khi DA bat dau lam bai -> an tab + tieu de de tap trung hoan toan vao bai,
   va noi rong de bai test hien layout 2 cot tren PC. */
.dep-hub.dep-started{max-width:1080px}
.dep-hub.dep-started .dep-hub-tabs,
.dep-hub.dep-started .dep-hub-title,
.dep-hub.dep-started .dep-hub-intro{display:none}

/* Panel bai test */
.dep-hub .dep-hub-panel[hidden]{display:none}
.dep-hub .dep-hub-panel{scroll-margin-top:16px}
.dep-hub .dep-hub-panel .puramu-quiz{margin:0 auto}
.dep-hub .dep-hub-missing{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:12px;padding:14px 16px;text-align:center}

@media(max-width:560px){
  .dep-hub{margin:12px auto}
  .dep-hub .dep-hub-tabs{grid-template-columns:repeat(2,1fr);gap:8px}
  .dep-hub .dep-hub-tab{padding:12px 8px}
  .dep-hub .dep-hub-tab-label{font-size:15px}
  .dep-hub .dep-hub-tab-desc{font-size:11px}
  .dep-hub .dep-hub-title{font-size:20px}
}