/* Interview Q&A detail — mockup UI */
.iq-detail i[class*="fa-"] {
  font-family: "Font Awesome 6 Free" !important;
  font-style: normal !important;
  line-height: 1;
}
.iq-detail i.fa-solid { font-weight: 900 !important; }
.iq-detail i.fa-regular { font-weight: 400 !important; }
.iq-detail i.fa-brands,
.iq-detail .fab,
.iq-detail .whatsapp-float i {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
}

.iq-detail .iqd-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(270px, 0.85fr);
  gap: 24px;
  align-items: start;
}
.iq-detail .iq-article {
  background: #fff;
  border: 0;
  border-radius: 12px;
  padding: 20px;
  box-shadow: none;
}
.iq-detail .iqd-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}
.iq-detail .iqd-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.iq-detail .level-pill.level-easy {
  background: #dcfce7 !important;
  color: #166534 !important;
  border-radius: 999px !important;
  font-weight: 700;
}
.iq-detail .topic-badge {
  background: #eef2f7 !important;
  color: #475569 !important;
  border-radius: 999px !important;
}
.iq-detail .iqd-count { font-size: 0.85rem; font-weight: 600; color: #64748b; }
.iq-detail .iq-article h1 {
  font-size: var(--type-lg) !important;
  color: #35345a !important;
  margin: 14px 0 8px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}
.iq-detail .iqd-meta { margin: 0; color: #64748b; font-weight: 500; font-size: 0.92rem; }
.iq-detail .iqd-copy {
  flex-shrink: 0;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1.5px solid #e86f1a !important;
  background: #fff !important;
  color: #e86f1a !important;
  font-weight: 700;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.iq-teach { display: grid !important; gap: 16px !important; }

.iq-lab-card {
  border-radius: 12px !important;
  padding: 18px 20px !important;
  border: 1px solid transparent !important;
}
.iq-lab-head {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin: 0 0 16px !important;
}
.iq-lab-title { flex: 1; min-width: 0; }
.iq-lab-head h3 {
  margin: 0 !important;
  font-size: 1.02rem !important;
  font-weight: 700 !important;
  color: #35345a !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
}
.iq-lab-sub {
  margin: 4px 0 0 !important;
  font-size: 0.9rem !important;
  color: #4b5563 !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}
.iq-head-ico {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 0.9rem;
}
.iq-head-ico-simple { background: #dbeafe; color: #2563eb; }
.iq-head-ico-take { background: #ffedd5; color: #e86f1a; }
.iq-lab-picture .iq-head-ico { background: #ffedd5; color: #e86f1a; }
.iq-lab-num {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
}
.iq-lab-num-why { background: #e86f1a; }
.iq-lab-num-steps { background: #16a34a; }
.iq-lab-num-example { background: #7c3aed; }

.iq-lab-picture { background: #fff7ed !important; border-color: #fed7aa !important; }
.iq-token-track {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  background: #ea580c;
  border-radius: 999px;
  padding: 10px 14px;
  margin: 4px 0 10px;
}
.iq-token-track span {
  background: #fff;
  color: #c2410c;
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 700;
  font-size: 0.88rem;
}
.iq-lab-picture .iq-viz-note {
  margin: 8px 0 0 !important;
  color: #9a3412 !important;
  font-weight: 500 !important;
}

.iq-lab-simple { background: #eff6ff !important; border-color: #bfdbfe !important; }
.iq-lab-simple p {
  margin: 0 !important;
  color: #1e293b !important;
  font-size: 1.02rem !important;
  font-weight: 600 !important;
  line-height: 1.7 !important;
}

.iq-lab-why { background: #fff7ed !important; border-color: #fed7aa !important; }
.iq-why-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
.iq-why-card {
  background: #fff;
  border-radius: 10px;
  padding: 14px 12px;
  border: 0;
  box-shadow: 0 1px 0 rgba(53,52,90,0.04);
}
.iq-why-ico {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: #4f46e5;
  font-size: 1.05rem;
  margin-bottom: 8px;
}
.iq-why-card b { display: block; color: #35345a; font-size: 0.88rem; margin-bottom: 6px; }
.iq-why-card p {
  margin: 0 !important;
  color: #64748b !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
}

.iq-lab-steps { background: #f0fdf4 !important; border-color: #bbf7d0 !important; }
.iq-step-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid;
  gap: 10px;
}
.iq-step-list li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  font-family: inherit !important;
}
.iq-step-n {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #16a34a;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.78rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.iq-step-list li div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
}
.iq-step-list b { color: #14532d; font-size: 0.92rem; }
.iq-step-list p {
  margin: 0 !important;
  display: inline !important;
  color: #4b5563 !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  font-family: inherit !important;
}

.iq-lab-example { background: #f5f3ff !important; border-color: #ddd6fe !important; }
.iq-ex-flow { display: grid; gap: 4px; }
.iq-ex-row {
  display: grid !important;
  grid-template-columns: 170px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  background: transparent;
  padding: 6px 0;
}
.iq-ex-label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #35345a;
  font-weight: 700;
  font-size: 0.9rem;
}
.iq-ex-label b { color: #35345a; font-weight: 700; }
.iq-ex-ico {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #ede9fe;
  color: #6d28d9;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.iq-ex-body { min-width: 0; }
.iq-ex-box {
  background: #fff;
  border: 1px solid #e9d5ff;
  border-radius: 10px;
  padding: 10px 14px;
  color: #35345a;
  font-weight: 600;
}
.iq-ex-arrow {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 14px;
  padding: 4px 0;
  color: #7c3aed;
  font-size: 1rem;
  line-height: 1;
}
.iq-ex-arrow i {
  grid-column: 2;
  justify-self: center;
}
.iq-tok-row, .iq-id-row { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
.iq-tok {
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  background: #fff !important;
  white-space: nowrap !important;
}
.iq-tok.c0 { color: #db2777 !important; box-shadow: inset 0 0 0 2px #fbcfe8 !important; background: #fdf2f8 !important; }
.iq-tok.c1 { color: #16a34a !important; box-shadow: inset 0 0 0 2px #bbf7d0 !important; background: #f0fdf4 !important; }
.iq-tok.c2 { color: #2563eb !important; box-shadow: inset 0 0 0 2px #bfdbfe !important; background: #eff6ff !important; }
.iq-tok.c3 { color: #d97706 !important; box-shadow: inset 0 0 0 2px #fde68a !important; background: #fffbeb !important; }
.iq-tok.c4 { color: #7c3aed !important; box-shadow: inset 0 0 0 2px #ddd6fe !important; background: #f5f3ff !important; }
.iq-tok.c5 { color: #6d28d9 !important; box-shadow: inset 0 0 0 2px #ddd6fe !important; background: #ede9fe !important; }
.iq-id {
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  background: #fff !important;
  white-space: nowrap !important;
}
.iq-id.c0 { color: #db2777 !important; box-shadow: inset 0 0 0 2px #fbcfe8 !important; background: #fdf2f8 !important; }
.iq-id.c1 { color: #16a34a !important; box-shadow: inset 0 0 0 2px #bbf7d0 !important; background: #f0fdf4 !important; }
.iq-id.c2 { color: #2563eb !important; box-shadow: inset 0 0 0 2px #bfdbfe !important; background: #eff6ff !important; }
.iq-id.c3 { color: #d97706 !important; box-shadow: inset 0 0 0 2px #fde68a !important; background: #fffbeb !important; }
.iq-id.c4 { color: #7c3aed !important; box-shadow: inset 0 0 0 2px #ddd6fe !important; background: #f5f3ff !important; }
.iq-id.c5 { color: #64748b !important; box-shadow: inset 0 0 0 2px #e2e8f0 !important; background: #f8fafc !important; }
.iq-ex-note {
  margin: 10px 0 0 184px !important;
  color: #6b7280 !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
}

.iq-lab-take {
  background: #fff7ed !important;
  border: 1px solid #fed7aa !important;
  border-left: 4px solid #e86f1a !important;
}
.iq-lab-take .iq-head-ico-take { background: #ffedd5; color: #e86f1a; }
.iq-lab-take p {
  margin: 0 !important;
  color: #4b5563 !important;
  font-weight: 500 !important;
  line-height: 1.7 !important;
}

.iq-detail .iq-viz { background: transparent; border: 0; padding: 0; margin: 0; }
.iq-detail .iq-viz-title { display: none; }

.iq-detail .iqd-track {
  background: #fff;
  border: 1px solid #e8e4ef;
  border-radius: 12px;
  padding: 16px;
  display: grid;
  gap: 10px;
}
.iq-detail .iqd-kicker {
  font-size: 0.68rem !important;
  letter-spacing: 0.12em !important;
  font-weight: 700 !important;
  color: #e86f1a !important;
  text-transform: uppercase !important;
}
.iq-detail .iqd-track-hero {
  background: transparent;
  color: inherit;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 12px;
  align-items: center;
}
.iq-detail .iqd-track-bot {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #35345a;
  color: #ffb070;
  display: grid;
  place-items: center;
  font-size: 1.15rem;
}
.iq-detail .iqd-track-hero b { display: block; font-size: 1.05rem; color: #35345a; }
.iq-detail .iqd-track-hero .cd-duration {
  background: #f1f5f9;
  color: #35345a;
  border: 0;
  margin-top: 6px;
}
.iq-detail .iqd-box {
  background: #fff;
  border: 1px solid #e8e4ef;
  border-radius: 12px;
  padding: 16px;
}
.iq-detail .iqd-box h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem !important;
  margin: 0 0 12px !important;
  color: #35345a !important;
}
.iq-detail .iqd-rel a {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 12px 28px 12px 12px;
  border: 1px solid #eeeae4;
  border-radius: 10px;
  text-decoration: none;
  background: #fff;
}
.iq-detail .iqd-go {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.75rem;
}
.iq-detail .iqd-pager {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
}
.iq-detail .iqd-step { font-weight: 700; color: #35345a; text-decoration: none; }

@media (max-width: 1100px) {
  .iq-why-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 980px) {
  .iq-detail .iqd-grid { grid-template-columns: 1fr; }
  .iq-why-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  .iq-ex-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  .iq-ex-arrow { grid-template-columns: 1fr; }
  .iq-ex-arrow i { grid-column: 1; justify-self: center; }
  .iq-ex-note { margin-left: 0 !important; }
}