/* ============================================================
 * PVA Question Bank v1.0 — qb-widget.css
 * Style widget cau hoi (khach hang). Fork tu Dynamic Survey v4 survey.css,
 * class svy-* -> qb-*. LIGHT THEME — Prudential (trang_chu_ui_guidance.md).
 * ONLY :root token block chua raw hex/px; moi rule khac dung var().
 * Host page co the override theme qua CSS vars tren #qb-app (--qb-accent...).
 * ============================================================ */

:root {
  --font-base: 'Open Sans', Helvetica, Arial, sans-serif;
  --fs-12: 12px; --fs-14: 14px; --fs-16: 16px; --fs-18: 18px;
  --fs-22: 22px; --fs-26: 26px; --fs-32: 32px; --fs-40: 40px; --fs-48: 48px;
  --fw-base: 400; --fw-semi: 600; --fw-bold: 700; --lh-base: 1.55;

  --color-text-primary: #ffffff;
  --color-text-secondary: #da291c;      /* Prudential red */
  --color-text-secondary-deep: #a81d13;
  --color-text-tertiary: #1c1d1b;
  --color-text-muted: #6b6a67;
  --color-text-inverse: #cfcecb;
  --color-surface-muted: #fbeae8;
  --color-surface-soft: #f4f4f5;
  --color-surface-page: #ffffff;
  --color-ok: #16a34a;
  --hairline: #e7e4e1;

  --sp-4: 4px; --sp-6: 6px; --sp-8: 8px; --sp-10: 10px; --sp-12: 12px;
  --sp-14: 14px; --sp-16: 16px; --sp-20: 20px; --sp-24: 24px; --sp-28: 28px;
  --sp-32: 32px; --sp-40: 40px; --sp-48: 48px; --sp-56: 56px;

  --radius-xs: 10px; --radius-sm: 16px; --radius-pill: 100px;
  --motion: 260ms cubic-bezier(0.22, 1, 0.36, 1);
  --touch-target: 48px;
}

/* Theme hooks cho host page (default = pva tokens) */
#qb-app {
  --qb-accent: var(--color-text-secondary);
  --qb-accent-deep: var(--color-text-secondary-deep);
  --qb-fill: var(--color-surface-muted);
  /* Duong kinh nut dieu huong tron — doi CHI O DAY, icon tu scale theo */
  --qb-navbtn-size: calc(var(--sp-40) * 1.15);
  font-family: var(--font-base);
  font-size: var(--fs-16);
  font-weight: var(--fw-base);
  line-height: var(--lh-base);
  color: var(--color-text-tertiary);
}

#qb-app [hidden] { display: none !important; }
#qb-app :focus { outline: none; }
#qb-app :focus-visible { outline: 2px solid var(--qb-accent); outline-offset: 2px; border-radius: var(--radius-xs); }

/* ============ Buttons ============ */
#qb-app .pva-btn {
  display: inline-flex; align-items: center; justify-content: center; position: relative;
  min-height: var(--touch-target); padding: var(--sp-12) var(--sp-24);
  border: none; border-radius: var(--radius-pill);
  background: var(--qb-accent); color: var(--color-text-primary);
  font-family: var(--font-base); font-size: var(--fs-16); font-weight: var(--fw-semi); line-height: 1;
  letter-spacing: 0.01em; text-decoration: none; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  transition: background-color var(--motion), transform var(--motion), box-shadow var(--motion);
}
#qb-app .pva-btn:hover { background: var(--qb-accent-deep); transform: translateY(-1px); }
#qb-app .pva-btn:active { transform: translateY(0); }
#qb-app .pva-btn:disabled { background: var(--qb-fill); color: var(--color-text-muted); cursor: not-allowed; }
#qb-app .pva-btn.is-loading { color: transparent; pointer-events: none; }
#qb-app .pva-btn.is-loading::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: var(--sp-16); height: var(--sp-16);
  margin-left: calc(var(--sp-8) * -1); margin-top: calc(var(--sp-8) * -1);
  border: 2px solid var(--color-text-primary); border-top-color: transparent;
  border-radius: 50%; animation: qb-spin 0.8s linear infinite;
}
#qb-app .pva-btn--ghost {
  background: transparent; color: var(--qb-accent);
  box-shadow: inset 0 0 0 1.5px var(--qb-accent);
}
#qb-app .pva-btn--ghost:hover { background: var(--qb-fill); color: var(--qb-accent-deep); transform: none; }

/* ============ Progress ============ */
#qb-app .qb-progress {
  height: var(--sp-8); background: var(--color-surface-soft);
  border-radius: var(--radius-pill); overflow: hidden; margin-bottom: var(--sp-24);
}
#qb-app .qb-progress__bar {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--qb-accent), var(--qb-accent-deep));
  border-radius: var(--radius-pill); transition: width var(--motion);
}

/* ============ Question ============ */
#qb-app .qb-question { margin-bottom: var(--sp-24); animation: qb-fade var(--motion) both; }
@keyframes qb-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#qb-app .qb-question__count {
  font-size: var(--fs-12); font-weight: var(--fw-semi); letter-spacing: 1px;
  color: var(--color-text-muted); margin-bottom: var(--sp-6);
}
#qb-app .qb-question__html {
  font-size: var(--fs-18); font-weight: var(--fw-semi); line-height: 1.4;
  color: var(--color-text-tertiary); margin-bottom: var(--sp-8);
}
#qb-app .qb-question__desc { font-size: var(--fs-14); color: var(--color-text-muted); margin-bottom: var(--sp-16); }
#qb-app .qb-question__html img, #qb-app .qb-question__desc img { max-width: 100%; border-radius: var(--radius-xs); }

/* ============ Options ============ */
#qb-app .qb-option {
  display: flex; align-items: center; gap: var(--sp-12);
  min-height: var(--touch-target); padding: var(--sp-14) var(--sp-16);
  border: 1.5px solid var(--hairline); border-radius: var(--radius-xs);
  margin-bottom: var(--sp-10); cursor: pointer;
  transition: border-color var(--motion), background var(--motion), box-shadow var(--motion);
}
#qb-app .qb-option:hover { border-color: var(--qb-accent); }
#qb-app .qb-option input { width: var(--sp-20); height: var(--sp-20); flex: 0 0 auto; accent-color: var(--qb-accent); }
#qb-app .qb-option.is-selected {
  border-color: var(--qb-accent); background: var(--qb-fill);
  box-shadow: inset 0 0 0 1px var(--qb-accent);
}

/* ============ Rating stars (5 hoac 10 sao) ============ */
#qb-app .qb-stars {
  display: flex; flex-wrap: wrap;
  justify-content: center;            /* sao can GIUA khoi cau hoi */
  gap: var(--sp-16);
  font-size: var(--fs-40);
  line-height: 1;
  margin: var(--sp-16) 0;
}
#qb-app .qb-stars--many { font-size: var(--fs-26); gap: var(--sp-8); }
#qb-app .qb-star {
  /* BAT BUOC: <button> KHONG ke thua font cua cha — trinh duyet ap font mac dinh ~13px,
     nen font-size dat o .qb-stars se khong bao gio toi duoc ngoi sao neu thieu dong nay. */
  font: inherit;
  cursor: pointer; color: var(--color-text-inverse);
  transition: color var(--motion), transform var(--motion);
  background: none; border: none; padding: 0;
  line-height: 1;
  min-width: var(--touch-target); min-height: var(--touch-target);
  display: flex; align-items: center; justify-content: center;
}
#qb-app .qb-stars--many .qb-star { min-width: var(--sp-40); }
#qb-app .qb-star:hover { transform: scale(1.12); }
#qb-app .qb-star.is-on { color: var(--qb-accent); }

/* ============ Error / banner / loading ============ */
#qb-app .qb-error { font-size: var(--fs-14); font-weight: var(--fw-semi); color: var(--qb-accent); margin-top: var(--sp-8); }
#qb-app .qb-banner { padding: var(--sp-14) var(--sp-16); border-radius: var(--radius-xs); margin: var(--sp-16) 0; font-size: var(--fs-14); }
#qb-app .qb-banner--error { background: var(--qb-fill); color: var(--qb-accent-deep); border-left: 4px solid var(--qb-accent); }
#qb-app .qb-center { text-align: center; padding: var(--sp-48) var(--sp-16); }
#qb-app .qb-spinner {
  display: inline-block; width: var(--sp-40); height: var(--sp-40);
  border: 3px solid var(--qb-fill); border-top-color: var(--qb-accent);
  border-radius: 50%; animation: qb-spin 0.8s linear infinite; margin-bottom: var(--sp-16);
}
@keyframes qb-spin { to { transform: rotate(360deg); } }

/* ============ Nav ============ */
/* Nut dieu huong TRON kieu nut play: chi con icon, nhan chu nam o aria-label/title.
   Thu tu DOM la back roi next; can giua, next luon nam ben PHAI. */
#qb-app .qb-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  /* Khoang cach = 2 lan be ngang nut. Tinh theo chinh --qb-navbtn-size nen doi kich thuoc nut
     la khoang cach tu giu dung ty le (ke ca ban mobile), khong phai chinh tay lan nua. */
  gap: calc(var(--qb-navbtn-size) * 2);
  margin-top: var(--sp-28);
}
#qb-app .qb-navbtn {
  flex: 0 0 auto;
  width: var(--qb-navbtn-size); height: var(--qb-navbtn-size);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border: none; border-radius: 100px;
  background: var(--qb-accent); color: var(--color-text-primary);
  cursor: pointer;
  transition: background var(--motion), transform var(--motion), box-shadow var(--motion);
}
#qb-app .qb-navbtn:hover { background: var(--qb-accent-deep); transform: scale(1.06); }
#qb-app .qb-navbtn:active { transform: scale(0.98); }
#qb-app .qb-navbtn:focus-visible { outline: 2px solid var(--qb-accent-deep); outline-offset: 3px; }
#qb-app .qb-navbtn:disabled { background: var(--qb-fill); color: var(--color-text-muted); cursor: not-allowed; transform: none; }
/* Mui ten phai: dich sang phai 1px cho can thi giac (tam giac nang ve trai) */
/* Icon = 40% duong kinh nut => doi kich thuoc nut la icon tu can lai */
#qb-app .qb-navbtn .qb-navbtn__icon {
  display: block;
  width: calc(var(--qb-navbtn-size) * 0.4); height: calc(var(--qb-navbtn-size) * 0.4);
  margin-left: 2px;
}
#qb-app .qb-navbtn--ghost .qb-navbtn__icon { margin-left: 0; margin-right: 2px; }
/* Nut quay lai: vien, khong dac — de nut di tiep giu vai tro hanh dong chinh */
#qb-app .qb-navbtn--ghost {
  background: transparent;
  color: var(--qb-accent);
  box-shadow: inset 0 0 0 2px var(--qb-accent);
}
#qb-app .qb-navbtn--ghost:hover {
  background: var(--qb-fill); color: var(--qb-accent-deep);
  box-shadow: inset 0 0 0 2px var(--qb-accent-deep);
}
/* Trang thai dang gui: an icon, hien spinner giua nut tron */
#qb-app .qb-navbtn.is-loading { color: transparent; pointer-events: none; position: relative; }
#qb-app .qb-navbtn.is-loading .qb-navbtn__icon { visibility: hidden; }
#qb-app .qb-navbtn.is-loading::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: var(--sp-14); height: var(--sp-14); margin: calc(var(--sp-14) / -2) 0 0 calc(var(--sp-14) / -2);
  border: 2px solid var(--color-text-primary); border-top-color: transparent;
  border-radius: 50%; animation: qb-spin 0.7s linear infinite;
}
/* Mobile: giu nguyen hang ngang — nut tron nho, khong can xep chong nhu nut chu dai */
@media (max-width: 767px) {
  #qb-app { --qb-navbtn-size: calc(var(--sp-32) * 1.15); }
}

/* ============ Man ket thuc (finish / thank-you) ============ */
#qb-app .qb-finish { text-align: center; padding: var(--sp-24) 0; animation: qb-fade var(--motion) both; }
#qb-app .qb-finish__title { font-size: var(--fs-26); font-weight: var(--fw-bold); color: var(--color-text-tertiary); margin: 0 0 var(--sp-16); }
#qb-app .qb-congrats { margin-top: var(--sp-16); }
#qb-app .qb-given-at { color: var(--color-text-muted); font-size: var(--fs-14); margin-top: var(--sp-16); }

/* Gift box (thank-you view) */
#qb-app .qb-gift-box {
  padding: var(--sp-24); background: var(--qb-fill);
  border: 1px dashed var(--qb-accent); border-radius: var(--radius-sm);
  margin: var(--sp-20) 0;
}
#qb-app .qb-gift-box__title { font-size: var(--fs-22); font-weight: var(--fw-bold); color: var(--qb-accent); margin-bottom: var(--sp-8); }

/* Portrayal card */
#qb-app .qb-portrayal { text-align: center; }
#qb-app .qb-portrayal__img { max-width: 200px; border-radius: var(--radius-sm); margin-bottom: var(--sp-16); }
#qb-app .qb-portrayal__label {
  font-size: var(--fs-12); text-transform: uppercase; letter-spacing: 2px;
  color: var(--qb-accent); font-weight: var(--fw-semi); margin-bottom: var(--sp-6);
}
#qb-app .qb-portrayal__body { max-width: 480px; margin: 0 auto; }

/* Quiz review */
#qb-app .qb-quiz-score { font-size: var(--fs-18); margin-bottom: var(--sp-20); }
#qb-app .qb-quiz-review { text-align: left; max-width: 560px; margin: 0 auto; }
#qb-app .qb-quiz-item {
  display: flex; gap: var(--sp-12); align-items: flex-start;
  padding: var(--sp-14) var(--sp-16); border: 1.5px solid var(--hairline);
  border-radius: var(--radius-xs); margin-bottom: var(--sp-10);
}
#qb-app .qb-quiz-item__icon {
  flex: 0 0 auto; width: var(--sp-28); height: var(--sp-28);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-weight: var(--fw-bold); color: var(--color-text-primary);
}
#qb-app .qb-quiz-item--ok .qb-quiz-item__icon { background: var(--color-ok); }
#qb-app .qb-quiz-item--bad .qb-quiz-item__icon { background: var(--qb-accent); }
#qb-app .qb-quiz-item--ok { border-color: var(--color-ok); }
#qb-app .qb-quiz-item--bad { border-color: var(--qb-fill); }
#qb-app .qb-quiz-item__q { font-weight: var(--fw-semi); margin-bottom: var(--sp-4); }
#qb-app .qb-quiz-item__a, #qb-app .qb-quiz-item__c { font-size: var(--fs-14); color: var(--color-text-muted); }
#qb-app .qb-quiz-item__c { color: var(--qb-accent-deep); }

/* ============ 2 nut tren man chan dung + form lead (context audience=prospect) ============ */
#qb-app .qb-cta-row {
  display: flex; gap: var(--sp-12); justify-content: center; flex-wrap: wrap;
  margin-top: var(--sp-24);
}
#qb-app .qb-cta-row .pva-btn { min-width: 220px; text-decoration: none; }
/* nut 2 la the <a> nen phai tu can giua text nhu <button> */
#qb-app .qb-cta-row a.pva-btn { display: inline-flex; align-items: center; justify-content: center; }

#qb-app .qb-lead {
  max-width: 460px; margin: var(--sp-20) auto 0; text-align: left;
  padding: var(--sp-20); background: var(--qb-fill);
  border-radius: var(--radius-sm); animation: qb-fade var(--motion) both;
}
#qb-app .qb-lead__row { margin-bottom: var(--sp-14); }
#qb-app .qb-lead__label {
  display: block; font-size: var(--fs-14); font-weight: var(--fw-semi);
  color: var(--color-text-tertiary); margin-bottom: var(--sp-6);
}
#qb-app .qb-lead__input {
  width: 100%; box-sizing: border-box; min-height: var(--touch-target);
  padding: var(--sp-10) var(--sp-14); font-family: var(--font-base); font-size: var(--fs-16);
  color: var(--color-text-tertiary); background: var(--color-surface-page);
  border: 1.5px solid var(--hairline); border-radius: var(--radius-xs);
  transition: border-color var(--motion);
}
#qb-app .qb-lead__input:focus { outline: none; border-color: var(--qb-accent); }
#qb-app .qb-lead__consent {
  display: flex; gap: var(--sp-10); align-items: flex-start;
  font-size: var(--fs-14); line-height: var(--lh-base); color: var(--color-text-tertiary);
  margin: var(--sp-8) 0 var(--sp-14); cursor: pointer;
}
#qb-app .qb-lead__consent input { margin-top: var(--sp-4); flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--qb-accent); }
#qb-app .qb-lead__err {
  font-size: var(--fs-14); color: var(--qb-accent-deep); font-weight: var(--fw-semi);
  margin-bottom: var(--sp-12);
}
#qb-app .qb-lead__actions { display: flex; gap: var(--sp-10); }
#qb-app .qb-lead__actions .pva-btn { flex: 1; }
#qb-app .qb-lead__done {
  text-align: center; font-weight: var(--fw-semi); color: var(--color-ok);
  padding: var(--sp-16) 0;
}
@media (max-width: 480px) {
  #qb-app .qb-cta-row { flex-direction: column; }
  #qb-app .qb-cta-row .pva-btn { min-width: 0; width: 100%; }
  #qb-app .qb-lead__actions { flex-direction: column-reverse; }
}