/* ============================================================
 * PVA Event Check-in v1.0 — CSS riêng của ứng dụng
 * Nạp SAU pva-tokens.css. Chỉ :root trong pva-tokens.css được chứa hex/px thô;
 * mọi thứ ở đây phải dùng var(--…).
 * Dùng chung cho: trang mã QR, trang PG check-in và trạng thái loading/error.
 * Giao diện riêng của lead form nằm trong evt-lead.css.
 * Trang admin và dashboard dùng thêm pva-admin.css.
 * ============================================================ */

/* ============================================================
   Token bổ sung của app
   ============================================================
   Quy tắc trong CLAUDE.md: ngoài khối token ra, mọi nơi phải dùng var().
   Đây là những sắc độ bộ token Prudential chưa có mà app cần, khai tập trung
   ở một chỗ thay vì rải hex thô khắp file.
   ============================================================ */
:root {
  --color-text-hint:     #555555;   /* chú thích phụ */
  --color-text-faint:    #777777;   /* chú thích mờ hơn nữa */
  --color-line-soft:     #e6e6e8;
  --color-line-mid:      #d4d4d8;
  --color-line-strong:   #c9c9c9;
  --color-skeleton-hi:   #ececee;   /* dải sáng chạy qua skeleton */
  --color-scrim:         rgba(0,0,0,.55);  /* nền mờ sau modal cây DE */

  --color-success-bg:    #e8f6ec;
  --color-success-ink:   #16a34a;
  --color-warn-bg:       #fef3e2;
  --color-warn-ink:      #f59e0b;

  /* Hai giá trị dưới đây CỐ Ý là màu tuyệt đối, không đi theo theme:
     - qr-paper: nền QR phải trắng tuyệt đối thì máy mới quét được
     - camera-bg: khung camera phải đen để không loè khi chưa có hình */
  --color-qr-paper:      #ffffff;
  --color-camera-bg:     #000000;
  --color-camera-hint:   #bbbbbb;
}

/* ---------- Nền sáng cho mọi trang của app này ---------- */
body {
  background: var(--color-text-primary);   /* #fff */
  color: var(--color-text-tertiary);       /* #1c1d1b */
}

/* ---------- Thành phần dùng chung ---------- */
.evt-otp-row { display: flex; gap: var(--sp-8); align-items: stretch; }
.evt-otp-row .pva-input { flex: 1 1 auto; }

/* ---------- Trạng thái ---------- */
.evt-error {
  font-size: var(--fs-12); color: var(--color-text-secondary);
  font-weight: 600; margin-top: var(--sp-4); min-height: 16px;
}
.evt-skeleton {
  background: linear-gradient(90deg, var(--color-surface-soft) 25%, var(--color-skeleton-hi) 37%, var(--color-surface-soft) 63%);
  background-size: 400% 100%;
  animation: evtShimmer 1.4s ease infinite;
  border-radius: var(--radius-xs);
}
@keyframes evtShimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.evt-sk-line { height: 48px; margin-bottom: var(--sp-16); }
.evt-sk-line--short { height: 20px; width: 40%; margin-bottom: var(--sp-8); }

/* Phản hồi xúc giác — quan trọng với PG bấm hàng trăm lần một ca */
.pva-btn:active:not(:disabled) { transform: scale(0.98); }

/* ============================================================
   1. TRANG MÃ QR CỦA KHÁCH
   ============================================================
   Nền trắng tuyệt đối và QR đủ lớn là yêu cầu CHỨC NĂNG, không phải thẩm mỹ:
   PG quét từ màn hình khách, mà màn hình bị auto-brightness hạ sáng thì rất khó quét. */
.evt-code-page { max-width: 420px; margin: 0 auto; padding: var(--sp-24) var(--sp-16); text-align: center; }
.evt-qr-box {
  background: var(--color-qr-paper);                         /* cố ý trắng tuyệt đối, không dùng token */
  padding: var(--sp-16);
  border-radius: var(--radius-xs);
  display: inline-block;
  margin: var(--sp-16) 0;
}
.evt-qr-box svg, .evt-qr-box img { width: 260px; height: 260px; display: block; }
.evt-code-text {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 40px; font-weight: 700; letter-spacing: 6px;
  color: var(--color-text-tertiary);
  margin: var(--sp-12) 0;
}
.evt-bright-hint {
  background: var(--color-surface-muted);
  border-radius: var(--radius-xs);
  padding: var(--sp-12);
  font-size: var(--fs-14);
  margin-top: var(--sp-16);
}

/* ============================================================
   3. TRANG PG CHECK-IN
   ============================================================
   Dùng ngoài trời, một tay, có thể đeo găng => contrast cao, touch target lớn. */
.evt-pg { max-width: 520px; margin: 0 auto; padding: var(--sp-16) var(--sp-16) var(--sp-32); }

/* Nhịp dọc của màn hình PG do CHÍNH màn hình quyết định bằng gap, không phải
   margin-bottom rải trên từng thành phần. Lý do: trang này bật/tắt khối liên tục
   (thẻ kết quả, dòng lỗi, nút đèn pin) — với margin thì khối ẩn vẫn để lại lỗ
   còn khối hiện lại dính sát nhau; với gap thì khoảng trống đi theo khối. */
.evt-pg > section { display: flex; flex-direction: column; gap: var(--sp-16); }
.evt-pg > section > * { margin-top: 0; margin-bottom: 0; }
/* Ô rỗng (chưa tra mã, chưa tìm, không có lỗi) không được chiếm một nhịp gap. */
.evt-pg > section > *:empty { display: none; }
.evt-pg-head { display: flex; flex-direction: column; gap: var(--sp-4); }
.evt-pg .evt-field { display: flex; flex-direction: column; gap: var(--sp-4); }
.evt-pg .evt-field .pva-hint { margin: 0; }
.evt-pg #stationList,
.evt-pg #searchResults { display: flex; flex-direction: column; gap: var(--sp-8); }
/* Kết quả tìm nằm trong .evt-field nên phải tự tách khỏi ô nhập, và khi rỗng thì
   không được ăn một nhịp gap của ô. */
.evt-pg #searchResults:empty { display: none; }
.evt-pg #searchResults:not(:empty) { margin-top: var(--sp-8); }
/* Khối "lượt gần đây" là công cụ phụ — gạch ngang tách nó khỏi vùng làm việc chính. */
.evt-pg > section > details {
  border-top: 1px solid var(--color-line-soft);
  padding-top: var(--sp-16);
}
.evt-pg > section > details > summary { margin-bottom: var(--sp-12); }
.evt-pg-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-12); padding: var(--sp-12) var(--sp-16);
  background: var(--color-surface-muted);
  border-radius: var(--radius-xs);
  font-size: var(--fs-14);
}
.evt-stage {
  position: relative; width: 100%; padding-top: 100%;
  background: var(--color-camera-bg); border-radius: var(--radius-xs);
  overflow: hidden;
}
.evt-stage video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.evt-stage .evt-guide {
  position: absolute; top: 15%; left: 15%; width: 70%; height: 70%;
  border: 2px solid rgba(255, 255, 255, .9);
  border-radius: var(--radius-xs);
  box-shadow: 0 0 0 2000px rgba(0, 0, 0, .35);
}
.evt-stage .evt-ph {
  position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%);
  text-align: center; color: var(--color-camera-hint); font-size: var(--fs-14); padding: 0 var(--sp-16);
}
.evt-pg-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
.evt-pg-actions .pva-btn { width: 100%; }

/* ---------- Modal quét QR ----------
   Khung camera chỉ tồn tại khi đang quét. Dùng modal riêng chứ không dùng .pva-modal:
   trang PG không nạp pva-admin.css, và khung quét cần chiếm gần hết màn hình chứ không
   phải một hộp form. */
.evt-scan {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-16);
  background: var(--color-scrim);
}
.evt-scan__panel {
  display: flex; flex-direction: column; gap: var(--sp-12);
  width: 100%; max-width: 480px;
  max-height: calc(100vh - var(--sp-32));
  overflow-y: auto;
  padding: var(--sp-16);
  background: var(--color-text-primary);   /* #fff */
  border-radius: var(--radius-xs);
}
.evt-scan__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-12); font-size: var(--fs-16);
}
.evt-scan__head .pva-btn { width: auto; }
/* Hàng nút trong modal là FLEX chứ không phải grid 2 cột: phần lớn thời gian chỉ có một
   nút hiện (đèn pin tuỳ máy, "Quét lại" chỉ khi đã dừng), grid 2 cột sẽ để nút đó nằm
   lệch nửa hàng. */
.evt-scan .evt-pg-actions { display: flex; }
.evt-scan .evt-pg-actions .pva-btn { flex: 1 1 auto; }
/* Khung camera trong modal: vuông nhưng không được cao quá màn hình, nếu không thì nút
   đèn pin và dòng trạng thái bị đẩy ra khỏi tầm nhìn trên máy màn hình nhỏ. */
/* height khai hai lần có chủ đích: máy đời cũ không hiểu min() sẽ dùng dòng đầu. */
.evt-scan .evt-stage { padding-top: 0; height: 72vw; }
.evt-scan .evt-stage { height: min(72vw, 360px); }
/* Máy xoay ngang: khung vuông theo chiều cao, khỏi tràn ra ngoài */
@media (orientation: landscape) and (max-height: 520px) {
  .evt-scan .evt-stage { height: 46vh; }
}
/* Thẻ kết quả tra mã — PG phải đọc được trong 1 giây */
.evt-result {
  display: flex; flex-direction: column; gap: var(--sp-4);
  border-radius: var(--radius-xs); padding: var(--sp-16);
  background: var(--color-surface-soft);
  border-left: 4px solid var(--color-text-secondary);
}
.evt-result--ok   { background: var(--color-success-bg); border-left-color: var(--color-success-ink); }
.evt-result--warn { background: var(--color-warn-bg); border-left-color: var(--color-warn-ink); }
.evt-result--err  { background: var(--color-surface-muted); border-left-color: var(--color-text-secondary); }
.evt-result__name { font-size: var(--fs-18); font-weight: 700; }
.evt-result__code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-26); font-weight: 700; letter-spacing: 3px;
}
.evt-progress-dots { display: flex; gap: var(--sp-4); margin-top: var(--sp-8); }
.evt-dot { width: 22px; height: 6px; border-radius: 3px; background: var(--color-line-mid); }
.evt-dot--done { background: var(--color-success-ink); }

/* ============================================================
   3b. DANH SÁCH CHỌN (modal admin)
   ============================================================
   Dùng cho ô "Trạm được phép" của nhân viên PG: trước đây là ô CSV gõ tay.
   Cao tối đa 220px rồi cuộn — chương trình nhiều trạm thì danh sách không
   đẩy nút Lưu của modal ra khỏi màn hình. */
.evt-pick {
  display: flex; flex-direction: column; gap: var(--sp-8);
  max-height: 220px; overflow-y: auto;
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-xs);
  padding: var(--sp-12);
  margin-top: var(--sp-8);
}
.evt-pick__row { margin: 0; }
/* Mã trạm đứng cạnh tên trạm chỉ để đối chiếu, không được to bằng tên.
   (.muted không được khai ở đâu trong bộ token nên phải tự lo ở đây.) */
.evt-pick__row .pva-mono { color: var(--color-text-faint); font-size: var(--fs-12); }
.evt-pick .pva-empty { margin: 0; }

/* ============================================================
   3c. CLASS BỊ THIẾU CỦA BỘ DÙNG CHUNG + NHỊP DỌC TRANG ADMIN
   ============================================================
   Markup của app này dùng một loạt class mà pva-tokens.css + pva-admin.css
   (bản dùng chung giữa các project, CỐ Ý giữ nguyên không sửa) không khai:

     .pva-lede  .pva-hint  .muted  .pva-btn--block  .pva-btn--sm
     .row  .pva-modal__body

   Không khai thì chúng là thẻ trần: chú thích to bằng chữ thường, ô tìm kiếm
   dính liền nút, nút "block" không kéo hết chiều ngang, nội dung modal không có
   nhịp nào cả. Đúng chỗ này là lý do trang admin trông chật.

   Giá trị lấy theo bản admin của Dynamic Survey v4 và Customer Verification
   Session để các project nhìn giống nhau; hai project đó cũng khai ở file riêng
   của mình chứ không sửa bộ dùng chung.
   ============================================================ */
.pva-lede {
  font-size: var(--fs-14); color: var(--color-text-hint);
  line-height: 1.55; margin: 0 0 var(--sp-16);
  padding: 10px;
}
.pva-hint { font-size: var(--fs-12); color: var(--color-text-hint); margin: var(--sp-4) 0 0; }
.muted { font-size: var(--fs-12); color: var(--color-text-faint); font-weight: 400; }
.pva-btn--block { width: 100%; }
/* Nút phụ: nhỏ hơn nút chính nhưng vẫn >= 32px để bấm được bằng ngón tay. */
.pva-btn--sm {
  min-height: var(--sp-32); padding: var(--sp-4) var(--sp-12);
  font-size: var(--fs-14);
}
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-12); }
.row .pva-btn { width: auto; white-space: nowrap; }
/* .pva-modal đã có padding 24 và tự cuộn — thân modal chỉ cần nhịp dọc. */
.pva-modal__body { display: flex; flex-direction: column; gap: var(--sp-16); }
.pva-modal__body > * { margin-top: 0; margin-bottom: 0; }
.pva-modal__body > *:empty { display: none; }

/* Nhịp dọc trong một tab: cùng cách làm như màn hình PG — gap của panel, không
   phải margin inline trên từng khối, để khối ẩn không để lại lỗ. */
.pva-tab-panel { display: flex; flex-direction: column; gap: var(--sp-16); }
.pva-tab-panel > * { margin-top: 0; margin-bottom: 0; }
.pva-tab-panel > *:empty { display: none; }
/* Thanh chọn chương trình nằm sát mép trên của panel đầu tiên nên cần tách ra. */
.pva-campaign-picker { margin-bottom: var(--sp-4); }

/* ============================================================
   4. DASHBOARD
   ============================================================ */
.evt-kpi-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-16);
  margin-bottom: var(--sp-24);
}
@media (min-width: 640px)  { .evt-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .evt-kpi-grid { grid-template-columns: repeat(4, 1fr); } }
/* Không dùng thẻ card — phân nhóm bằng đường kẻ và khoảng trắng */
.evt-kpi { border-top: 2px solid var(--color-text-tertiary); padding-top: var(--sp-12); }
.evt-kpi__label { font-size: var(--fs-12); color: var(--color-text-hint); text-transform: uppercase; letter-spacing: .04em; }
.evt-kpi__value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-32); font-weight: 700; line-height: 1.1;
}
.evt-kpi__sub { font-size: var(--fs-12); color: var(--color-text-faint); margin-top: var(--sp-4); }
.evt-kpi--muted { border-top-color: var(--color-line-strong); }
.evt-kpi--muted .evt-kpi__value { color: var(--color-text-hint); }

/* Cảnh báo hai đại lượng không so sánh được — xem PVA_EVT_Companion.txt */
.evt-caveat {
  background: var(--color-surface-muted);
  border-radius: var(--radius-xs);
  padding: var(--sp-12) var(--sp-16);
  font-size: var(--fs-12);
  margin-bottom: var(--sp-24);
}
.evt-bar { height: 8px; background: var(--color-line-soft); border-radius: 4px; overflow: hidden; }
.evt-bar__fill { height: 100%; background: var(--color-text-secondary); }

/* ============================================================
   Modal cây thư mục chọn Data Extension (trang admin)
   ============================================================
   Nổi TRÊN modal chương trình (.pva-modal có z-index 100) nên scrim phải cao hơn.
   Nền scrim dùng rgba chứ KHÔNG dùng opacity: panel nằm bên TRONG scrim, đặt
   opacity ở scrim thì cả cây mờ theo và chữ phía sau lộ xuyên qua.
   ============================================================ */
.evt-de {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--color-scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-16);
}
.evt-de__panel {
  width: 100%;
  max-width: 720px;
  max-height: 84vh;
  background: var(--color-text-primary);   /* #fff — panel phải ĐẶC */
  color: var(--color-text-tertiary);
  border-radius: var(--radius-xs);
  padding: var(--sp-24);
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}
.evt-de__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-16);
}
.evt-de__head .pva-modal__title { margin: 0; }
.evt-de__x {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: var(--fs-18);
  line-height: 1;
  color: var(--color-text-hint);
  min-width: var(--touch-target);
  min-height: var(--touch-target);
}
.evt-de__bar { display: flex; gap: var(--sp-8); align-items: center; }
.evt-de__bar .pva-input { flex: 1 1 auto; }
.evt-de__tree {
  flex: 1 1 auto;
  overflow: auto;
  min-height: 220px;
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-xs);
  padding: var(--sp-8) 0;
}
.evt-de__row { display: flex; align-items: center; gap: var(--sp-4); }
.evt-de__row--other {
  padding: var(--sp-8) var(--sp-12);
  font-size: var(--fs-12);
  color: var(--color-text-faint);
}
.evt-de__caret {
  flex: none;
  width: var(--sp-24);
  height: var(--sp-32);
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--color-text-hint);
  font-size: var(--fs-12);
  line-height: 1;
}
.evt-de__caret.is-leaf { visibility: hidden; }
.evt-de__node {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  min-width: 0;
  min-height: var(--sp-32);
  padding: var(--sp-4) var(--sp-8);
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-base);
  font-size: var(--fs-14);
  color: var(--color-text-tertiary);
}
.evt-de__node:hover { background: var(--color-surface-soft); }
.evt-de__node--de { color: var(--color-text-hint); }
.evt-de__node.is-picked {
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  font-weight: 600;
}
.evt-de__ic { flex: none; font-size: var(--fs-12); }
.evt-de__nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Nhánh Shared Data Extensions: DE ở đây phải gọi bằng ENT.<tên>, nên phải nhìn ra ngay */
.evt-de__tag {
  flex: none;
  margin-left: var(--sp-8);
  padding: 0 var(--sp-8);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  font-size: var(--fs-12);
  line-height: 1.6;
}
.evt-de__foot { display: flex; align-items: center; gap: var(--sp-8); }
.evt-de__info {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-12);
  color: var(--color-text-hint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Ô chọn DE trong form + cặp ô ngày/giờ ---------- */
.evt-depick { display: flex; gap: var(--sp-8); align-items: center; flex-wrap: wrap; }
.evt-depick__val { flex: 1 1 220px; min-width: 0; }
.evt-dtrow { display: flex; gap: var(--sp-8); }
.evt-dtrow input[type="date"] { flex: 1 1 auto; min-width: 0; }
.evt-dtrow input[type="time"] { flex: 0 0 116px; }

@media (max-width: 767px) {
  .evt-de__panel { max-height: 92vh; padding: var(--sp-16); }
  .evt-depick .pva-btn { flex: 1 1 auto; }
}

/* ============================================================
   QUILL TRONG MODAL ADMIN
   ============================================================
   Quill tự dựng .ql-toolbar + .ql-container nên phải kéo hai khối đó về đúng bo góc và
   đường viền của .pva-input, nếu không ô soạn thảo trông như vật thể lạ giữa form. */
.ql-toolbar.ql-snow {
  border-color: var(--color-line);
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  background: var(--color-surface-soft);
}
.ql-container.ql-snow {
  border-color: var(--color-line);
  border-radius: 0 0 var(--radius-xs) var(--radius-xs);
  font-family: var(--font-base);
  font-size: var(--fs-14);
}
/* Đủ cao để soạn một đoạn đồng ý mà không phải cuộn trong ô — đoạn đó thường dài nhất. */
.ql-editor { min-height: 140px; }
.ql-editor a { color: var(--color-text-secondary); }   /* --color-text-secondary LA do brand */

/* ============================================================
   QR KHẢO SÁT DỰ PHÒNG (màn hình PG)
   ============================================================
   Hiện khi mạng ở sự kiện làm tin nhắn tới chậm: khách quét thẳng từ màn hình PG.
   Nền trắng và viền rõ là bắt buộc — máy quét bắt kém hẳn khi QR nằm trên nền màu. */
.evt-svqr {
  margin-top: var(--sp-12);
  padding: var(--sp-12);
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-xs);
  text-align: center;
}
.evt-svqr__hint {
  margin-bottom: var(--sp-8);
  font-size: var(--fs-12);
  color: var(--color-text-hint);
}
/* Chặn trên 220px: PG cầm điện thoại, QR to quá thì khách phải lùi xa mới quét được,
   mà chỗ đứng ở trạm thường chật. */
.evt-svqr svg,
.evt-svqr img { width: 100%; max-width: 220px; height: auto; }

/* ============================================================
   ADMIN — FORM TỔNG: modal 3 bước, chọn sự kiện con, nhãn loại trong bảng
   ============================================================ */
/* Chọn loại chương trình: hai thẻ radio */
.evt-type-pick { display: grid; grid-template-columns: 1fr; gap: var(--sp-12); }
.evt-type-card {
  display: flex; gap: var(--sp-12); align-items: flex-start; padding: var(--sp-12) var(--sp-16);
  border: 1px solid var(--color-text-inverse); border-radius: var(--radius-xs); cursor: pointer;
  background: var(--color-text-primary); transition: border-color var(--motion), background var(--motion);
}
.evt-type-card input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--color-text-secondary); }
.evt-type-card b { display: block; font-size: var(--fs-14); }
.evt-type-card span { display: block; font-size: var(--fs-12); color: var(--color-text-hint); margin-top: 2px; }
.evt-type-card.is-on { border-color: var(--color-text-secondary); background: var(--color-surface-muted); }
.evt-type-card.is-locked { cursor: not-allowed; opacity: .55; }
@media (min-width: 768px) { .evt-type-pick { grid-template-columns: 1fr 1fr; } }

/* Danh sách chọn sự kiện con trong modal form tổng */
.evt-child-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-12); flex-wrap: wrap; }
.evt-child-list { border: 1px solid var(--color-text-inverse); border-radius: var(--radius-xs); overflow: hidden; }
.evt-child-row {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: var(--sp-12); align-items: center;
  padding: var(--sp-10) var(--sp-16); border-bottom: 1px solid var(--color-line-soft); cursor: pointer;
  font-size: var(--fs-14);
}
.evt-child-row:last-child { border-bottom: 0; }
.evt-child-row:hover { background: var(--color-surface-soft); }
.evt-child-row.is-on { background: var(--color-surface-muted); }
.evt-child-row.is-off { cursor: not-allowed; color: var(--color-text-hint); }
.evt-child-row input { width: 20px; height: 20px; margin: 0; accent-color: var(--color-text-secondary); }
.evt-child-row__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evt-child-row__sub { display: block; font-size: var(--fs-12); color: var(--color-text-hint); font-weight: 400; margin-top: 2px; }
.evt-child-row__right { display: flex; gap: var(--sp-8); align-items: center; flex-wrap: wrap; justify-content: flex-end; }

/* Khung ghi chú trong modal (sự kiện con thuộc form tổng nào) */
.evt-callout {
  grid-column: 1 / -1; padding: var(--sp-12) var(--sp-16); border-left: 4px solid var(--color-text-secondary);
  border-radius: var(--radius-xs); background: var(--color-surface-muted); font-size: var(--fs-14);
}
.evt-callout b { display: block; margin-bottom: var(--sp-4); }

/* Nhãn loại trong bảng */
.evt-type-tag { display: inline-flex; align-items: center; border-radius: var(--radius-sm); padding: 2px var(--sp-8);
  font-size: var(--fs-12); font-weight: 600; white-space: nowrap; }
.evt-type-tag--master { background: var(--color-text-secondary); color: var(--color-text-primary); }
.evt-type-tag--child  { background: var(--color-surface-muted); color: var(--color-text-tertiary); }
.evt-type-tag--single { background: var(--color-surface-soft); color: var(--color-text-hint); }
.pva-table tr.is-child td:first-child { padding-left: var(--sp-32); }
.evt-chiplist { display: flex; flex-wrap: wrap; gap: var(--sp-8); margin-top: var(--sp-12); justify-content: center; }
.evt-chiplist button { min-height: 36px; padding: 4px var(--sp-12); border: 1px solid var(--color-text-tertiary);
  border-radius: var(--radius-sm); background: var(--color-text-primary); font-family: var(--font-base);
  font-size: var(--fs-14); cursor: pointer; }

/* Stepper 3 bước trong modal */
.evt-steps { display: flex; gap: var(--sp-8); list-style: none; margin: 0 0 var(--sp-24); padding: 0; counter-reset: none; }
.evt-step { flex: 1 1 0; min-width: 0; }
.evt-step button { display: flex; align-items: center; gap: var(--sp-8); width: 100%; padding: var(--sp-8) 0 var(--sp-12);
  border: 0; border-bottom: 3px solid var(--color-text-inverse); background: none; font-family: var(--font-base);
  font-size: var(--fs-14); color: var(--color-text-hint); text-align: left; cursor: pointer; }
.evt-step button:disabled { cursor: default; }
.evt-step__no { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 50%; border: 1px solid currentColor; font-weight: 700; font-size: var(--fs-12); }
.evt-step__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evt-step.is-done button { color: var(--color-text-tertiary); border-bottom-color: var(--color-text-tertiary); }
.evt-step.is-current button { color: var(--color-text-secondary); font-weight: 700; border-bottom-color: var(--color-text-secondary); }
.evt-step.is-current .evt-step__no { background: var(--color-text-secondary); border-color: var(--color-text-secondary); color: var(--color-text-primary); }
@media (max-width: 767px) { .evt-step__label { display: none; } .evt-step.is-current .evt-step__label { display: inline; } }
.evt-step-panel[hidden] { display: none !important; }