/* EvaluationTemplateEditor.razor — chỉ những gì Bulma/inner_section chưa có sẵn.
   Bố cục theo docs/design-system/reference-html/04..07 (mẫu đánh giá — chi tiết). */

.template-title {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #4b5f73;
  overflow-wrap: anywhere;
}

.template-editor-surface {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Nền cảnh báo cho nhóm/tiêu chí lỗi trong ảnh 06 — dùng đúng màu danger đã có (Bulma không có utility áp
   trực tiếp lên .inner_section). */
.inner_section.is-invalid {
  background: #fef4f4;
  border-color: #f7c9c9;
}

/* Dải phân cách giữa các dòng tiêu chí trong bản chỉ xem (ảnh 04/05) — Bulma không có tiện ích
   "border-top giữa các phần tử liền kề". */
.eval-template-criterion-row + .eval-template-criterion-row {
  border-top: 1px solid var(--bulma-border, #ebebec);
}

/* Tên tiêu chí phải luôn cùng hàng với progress-bar/% bên phải, không được rớt xuống dòng khi tên dài — co lại
   và cắt bằng dấu "…" thay vì wrap (phản hồi người dùng 2026-09-09). */
.eval-template-criterion-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Viền trái nhấn màu ngữ nghĩa cho banner đầu trang (Nháp/hợp lệ, lỗi, chỉ xem) — phản hồi người dùng
   2026-09-09. Bulma `.notification` mặc định không có viền; dùng biến màu Bulma sẵn có, không tự đặt màu mới. */
.notification.is-bordered-left {
  border: 1px solid var(--bulma-border, #ebebec);
  border-left-width: 4px;
  border-radius: var(--bulma-radius-large, 6px);
}
.notification.is-bordered-left.is-info {
  border-left-color: var(--bulma-info, #276cda);
}
.notification.is-bordered-left.is-warning {
  border-left-color: var(--bulma-warning, #ffdd57);
}
.notification.is-bordered-left.is-danger {
  border-left-color: var(--bulma-danger, #ff3860);
}

/* Pill trạng thái đầu trang Phiếu đánh giá quản lý (feedback người dùng 2026-09-10, ảnh mẫu
   reference-html/evaluation-criterion/11-12-...html) — bo tròn hoàn toàn (999px) + màu pastel, khác hẳn `.tag`
   Bulma mặc định (bo góc nhỏ, màu đặc). Không có sẵn biến thể này trong design system nên thêm class riêng, dùng
   đúng bảng màu 3 trạng thái đã thấy trong các ảnh mẫu Đánh giá khác (Tiến độ/Kết quả) để nhất quán toàn module. */
/* Kích thước cố định (phản hồi người dùng 2026-09-15): trước đó pill co giãn theo độ dài chữ ("Đã gửi" hẹp hơn
   hẳn "Chưa bắt đầu"), nhìn lệch nhau trong cùng 1 cột trạng thái. `min-width` (không phải `width` cứng) để
   không cắt/vỡ dòng nhãn dài bất thường ("Chưa xác định — có nhiều lựa chọn" — Reviewer resolution Ambiguous). */
.eval-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 23px;
  min-width: 96px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  border: 1px solid transparent;
  white-space: nowrap;
  box-sizing: border-box;
}
.eval-status-pill.is-neutral {
  background: #f0f2f4;
  color: #4a4a4a;
  border-color: #dde0eb;
}
.eval-status-pill.is-warning {
  background: #fffaeb;
  color: #8a6400;
  border-color: #f5e3ae;
}
.eval-status-pill.is-success {
  background: #effaf5;
  color: #257953;
  border-color: #bfe8d3;
}
/* Thêm 2026-09-10 cho trang Chi tiết kỳ đánh giá (ảnh mẫu reference-html/evaluation-result/08*.html) —
   cùng bảng màu 3 trạng thái ở trên, bổ sung info/danger/current (bước đang chạy trong stage-row) vì trang này
   có nhiều trạng thái hơn Phiếu đánh giá quản lý. */
.eval-status-pill.is-info {
  background: #e8edf8;
  color: #31538c;
  border-color: #c9d8f2;
}
.eval-status-pill.is-danger {
  background: #feecec;
  color: #c22e2e;
  border-color: #f7c9c9;
}
.eval-status-pill.is-current {
  background: #346bda;
  color: #fff;
  border-color: #346bda;
}

/* Chip DS riêng cho 5 trạng thái Kỳ đánh giá (2026-09-15, yêu cầu người dùng — bảng màu chốt, KHÔNG chia sẻ với
   `.eval-status-pill`: các variant is-success/is-warning/is-danger của pill đó còn dùng chung cho trạng thái
   Phiếu đánh giá quản lý và Reviewer resolution qua `PillVariant()`, đổi màu ở đó sẽ ảnh hưởng nhầm các trạng
   thái khác). Dùng chung ở EvaluationCycleList.razor (danh sách) và EvaluationCycleDetailPage.razor (chi tiết)
   qua CycleLabels.ChipClass(status) — một nơi duy nhất map trạng thái kỳ -> class chip. */
/* Kích thước cố định (phản hồi người dùng 2026-09-15, cùng lý do với `.eval-status-pill` ở trên): 5 chip trạng
   thái Kỳ đánh giá dài ngắn khác nhau ("Đã hủy" ngắn hơn hẳn "Đang chuẩn bị") — `min-width` đủ cho nhãn dài nhất
   trong 5 trạng thái để cả 5 hiện cùng kích thước trong cột Trạng thái. */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 23px;
  min-width: 104px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  box-sizing: border-box;
}
.chip.c-prep {
  background: #f0f2f4;
  color: #4a4a4a;
}
.chip.c-sched {
  background: #fffaeb;
  color: #8a6400;
}
.chip.c-active {
  background: #d2dff7;
  color: #305297;
}
.chip.c-done {
  background: #effaf5;
  color: #257953;
}
.chip.c-cancel {
  background: #feecec;
  color: #c22e2e;
}

/* THỬ NGHIỆM (yêu cầu người dùng 2026-09-15): xem chip trạng thái dưới hình dạng Bulma `.tag` gốc (bo góc nhỏ,
   kích thước/padding mặc định của Bulma, không ép min-width) thay vì `.eval-status-pill`/`.chip` bo tròn ở trên
   — GIỮ NGUYÊN đúng bảng màu cũ, chỉ đổi shape. Không xoá `.eval-status-pill`/`.chip` ở trên — nếu người dùng
   không thích, fallback chỉ cần đổi class trong markup lại, không cần viết lại CSS. */
.tag.is-neutral {
  background: #f0f2f4;
  color: #4a4a4a;
}
.tag.is-warning {
  background: #fffaeb;
  color: #8a6400;
}
.tag.is-success {
  background: #effaf5;
  color: #257953;
}
.tag.is-info {
  background: #e8edf8;
  color: #31538c;
}
.tag.is-danger {
  background: #feecec;
  color: #c22e2e;
}
.tag.c-prep {
  background: #f0f2f4;
  color: #4a4a4a;
}
.tag.c-sched {
  background: #e8e320;
  color: #8a6400;
}
.tag.c-active {
  background: #d2dff7;
  color: #305297;
}
.tag.c-done {
  background: #effaf5;
  color: #257953;
}
.tag.c-cancel {
  background: #feecec;
  color: #c22e2e;
}

/* Kích thước cố định cho CHIP TRẠNG THÁI (phản hồi người dùng 2026-09-15: "tag tốt nhưng cần kích thước bằng
   nhau"). Đánh dấu bằng class riêng `eval-status-chip` thay vì áp trực tiếp lên `.tag.is-warning`/`.tag.is-success`
   v.v. — các modifier `is-*` này là tên Bulma dùng chung toàn app (StepCard, CycleStepNav, badge Đạt/Không đạt...
   cũng dùng `tag is-success`/`is-warning`), ép min-width lên thẳng chúng sẽ làm lệch kích thước những tag không
   phải trạng thái đó.

   Bug EVAL_V1_211 (testcase QC ngoài, 2026-09-21) — nhãn dài ("Chưa xác định — có nhiều lựa chọn", Reviewer
   resolution Ambiguous) bị tràn chữ ra ngoài khung pill ở Bước 2 Wizard tạo kỳ, màn ≤768px. Nguyên nhân: khi
   `<td>` cha trở thành flex container (`.table.is-responsive td { display:flex; width:100% }` ở `mobile.css`),
   khai báo `min-width` tường minh trên 1 flex item VÔ HIỆU HOÁ min-width mặc định của trình duyệt (vốn tự bảo
   vệ không co nhỏ hơn nội dung `white-space:nowrap`) — chỉ còn đúng 100px làm sàn, nên nhãn dài bị bóp nhỏ hơn
   độ rộng chữ thật, chữ `nowrap` tràn ra ngoài nền pill. `flex-shrink: 0` khôi phục đúng hành vi "không bao giờ
   co nhỏ hơn nội dung" cho MỌI kích thước chip (min-width vẫn giữ để 3 trạng thái ngắn lệch kích thước như cũ),
   không phải "min-width (không phải width cứng)" như suy nghĩ ban đầu — giả định đó chỉ đúng khi container cha
   không phải flex co giãn. */
.tag.eval-status-chip {
  justify-content: left;
  min-width: 100px;
  flex-shrink: 0;
  box-sizing: border-box;
}

/* Tabs của trang Chi tiết kỳ đánh giá dùng <button class="button is-white"> bên trong <li> (không phải <a>) để
   giữ hành vi @onclick — CSS gạch chân mặc định của Bulma `.tabs` chỉ nhắm vào <a>, không tự áp dụng cho
   <button>. Thêm class `.eval-cycle-tabs` để phục hồi đúng chỉ báo tab đang chọn theo ảnh mẫu 08/08b/13
   (phản hồi người dùng 2026-09-10). */
.eval-cycle-tabs .button.is-white {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  color: #5a5a5f !important;
  font-weight: 500 !important;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  height: auto !important;
  box-shadow: none !important;
}
.eval-cycle-tabs li.is-active .button.is-white {
  color: #2b2b2b !important;
  border-bottom-color: #346bda !important;
  font-weight: 600 !important;
}
/* Khoảng cách giữa các tab (phản hồi người dùng 2026-09-10): ép padding nút xuống .25rem ở trên làm các tab
   dính sát nhau — ảnh mẫu có khoảng cách 28px giữa các tab, bù lại bằng gap trên chính <ul>. */
.eval-cycle-tabs ul {
  gap: 28px;
  border-bottom: none !important;
}
/* Đường kẻ đáy liên tục dưới CẢ HÀNG tab (kể cả đoạn dưới các tab không active) — ảnh mẫu đặt border-bottom trên
   chính khối `.tabs` bọc ngoài, không phải trên `<ul>` bên trong; đặt lại đúng chỗ đó để đường kẻ không phụ thuộc
   viền riêng của từng nút (phản hồi người dùng 2026-09-10, dẫn chứng: `<li>` không active không có class nào để
   tự vẽ viền, nên phải có đường nền chung từ container). */
.eval-cycle-tabs {
  border-bottom: 1px solid #eeeff2;
}

/* Pill trạng thái/stage nằm bên trong tiêu đề trang (chữ hoa, `title is-5 is-uppercase...`) sẽ bị kế thừa
   text-transform theo mặc định CSS — chặn lại vì pill vẫn phải hiện chữ thường như ảnh mẫu (phản hồi người
   dùng 2026-09-10). */
.eval-status-pill {
  text-transform: none;
}

/* Ngăn cách giữa các khối inner_section liền kề trong 1 tab (Tổng quan: Tình hình hiện tại/Thông tin đã
   chốt/Sự kiện quan trọng...) — mặc định là 0, khiến các khối dính liền nhau (phản hồi người dùng 2026-09-10). */
.eval-section-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Card thống kê (Tổng quan) và pill trạng thái dàn đều theo hàng (stage-row) — ảnh mẫu 08 dùng nền phẳng
   #F5F6F8 không viền, và pill kéo full-width theo từng cột thay vì co theo nội dung rồi căn giữa
   (phản hồi người dùng 2026-09-10). */
.eval-stat-tile {
  background: #f5f6f8;
  border-radius: 10px;
  padding: 16px 18px;
}
.eval-stage-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.eval-stage-pill {
  width: 100%;
  justify-content: center;
  box-sizing: border-box;
}

/* Bố cục bộ lọc 2 tầng (nhãn phía trên ô nhập) của tab Người tham gia/Tiến độ — ảnh mẫu 08b/13 dùng layout này
   thay vì chỉ đặt placeholder làm nhãn (phản hồi người dùng 2026-09-10). */
.eval-filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.eval-filter-field > span.eval-filter-label {
  font-size: 12.5px;
  color: #5a5a5f;
}

/* Khối "Nhân viên tự chấm" trong Phiếu đánh giá quản lý (feedback người dùng 2026-09-10) — phẳng, không shadow,
   bo góc NHỎ HƠN khối tiêu chí bọc ngoài (`.inner_section` bo 12px) để phân biệt rõ đây là khối lồng bên trong,
   không phải 1 card ngang hàng. Màu nền và bo góc lấy đúng theo `.self-note` trong ảnh mẫu
   `reference-html/evaluation-criterion/11-...html`. */
.eval-peer-note {
  background: #f7f8fa;
  border-radius: 8px;
  padding: 10px 12px;
}

/* Nhãn "NHÂN VIÊN TỰ CHẤM" trong khối `.eval-peer-note` — gạch ngang phân cách với phần điểm/nhận xét bên dưới,
   thêm mới theo yêu cầu người dùng 2026-09-10 (không có trong ảnh mẫu gốc, chỉ là 1 dải phân cách nhẹ). */
.eval-peer-note-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bulma-grey, #8a93a0);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--bulma-border, #ebebec);
}

/* Biến thể 1 dòng ngang của `.eval-peer-note`, dùng khi phiếu quản lý CHƯA gửi (2026-09-19, ảnh
   docs/design-system/screens/phieu_danh_gia/image.png + image copy.png) — khác nhánh IsReadOnly phía trên vẫn
   giữ bố cục xếp dọc cũ (mục tiêu "các phần khác giữ nguyên"). `.eval-peer-note-label` dùng lại y hệt nhãn
   nhưng KHÔNG có gạch chân dưới vì đứng cùng dòng với điểm/nhận xét, không phải đứng riêng 1 dòng.
   2026-09-19 (phản hồi người dùng sau khi xem bản thật): thêm viền mỏng ngoài (chỉ biến thể inline này, nhánh
   IsReadOnly cũ không đổi) và tăng `gap` 6px → 10px — các phần tử (nhãn/điểm/dấu `|`/nhận xét) đứng quá sát
   nhau ở bản trước. */
.eval-peer-note--inline {
  display: flex;
  /* `center` thay `baseline` (2026-09-19) — từ khi mức thang cố định bọc trong `.eval-level-badge` (hình tròn
     26px), `baseline` làm badge lệch dòng so với chữ xung quanh; `center` canh giữa mọi phần tử đều nhau. */
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  border: 1px solid var(--bulma-border, #ebebec);
}
.eval-peer-note--inline .eval-peer-note-label {
  padding-bottom: 0;
  border-bottom: none;
}
/* Dấu `|` phân cách điểm/nhận xét — xám trung tính (`#8a93a0`, cùng token `.eval-group-caption`/
   `.eval-level-badge`), KHÔNG dùng màu viền `#ebebec` (quá nhạt, gần như vô hình khi làm màu chữ — phản hồi
   người dùng 2026-09-19) và không đậm (không bọc `<strong>`, `font-weight` để mặc định `normal`). */
.eval-peer-note-divider {
  color: var(--bulma-grey, #8a93a0);
  font-weight: 400;
}

/* Nhãn "ĐIỂM CỦA BẠN (QUẢN LÝ)" đứng ngay trước khối chấm điểm của quản lý, phân biệt với khu đối chiếu tự
   đánh giá phía trên — tái dùng đúng token xanh primary `#346bda` đã dùng ở `.eval-form-progress-fill`/
   `.eval-level-option.is-selected`, không phát minh màu mới. */
.eval-manager-score-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #346bda;
}

/* Banner "đã gửi" của Phiếu đánh giá quản lý (feedback người dùng 2026-09-10) — `notification is-info is-light`
   của Bulma lệch màu/bo góc so với ảnh mẫu `reference-html/evaluation-criterion/11-...html`; dùng đúng hex của
   `--info-bg`/`--info-border`/`--info-body` trong ảnh mẫu đó thay vì token Bulma gần đúng. */
.eval-notice-banner {
  background: #e8edf8;
  border: 1px solid #c9d8f2;
  border-radius: 10px;
  padding: 13px 16px;
  font-size: 13.5px;
  color: #31538c;
}
/* Biến thể trung tính cho banner "Ý nghĩa" của trang Chi tiết kỳ đánh giá (ảnh mẫu reference-html/evaluation-
   result/08*.html) — banner này không mang ngữ nghĩa info/thành công, chỉ diễn giải trạng thái hiện tại
   (phản hồi người dùng 2026-09-10). */
.eval-notice-banner.is-neutral {
  background: #f3f5f8;
  border-color: #e7eaf0;
  color: #45526b;
}
.eval-notice-banner.is-neutral strong {
  color: #2b3648;
}

@media (max-width: 640px) {
  .template-title {
    font-size: 17px;
  }
  .template-header .buttons {
    width: 100%;
  }
  .template-header .buttons .button {
    flex: 1;
  }
}

/* Stepper hình tròn của trang Tạo kỳ đánh giá (ảnh mẫu docs/design-system/screens/evaluations/
   tao_ky_danh_gia_buoc_1/2/3*.png, thay ảnh d05-UXR05-cycle-create-s1 cũ — xem docs/design-system/screens.md
   mục UXR05+UXR06). Bulma không có component stepper sẵn nên viết CSS riêng: vòng tròn cố định 36px nối bằng
   đường kẻ flex:1 khiến vòng đầu/cuối tự nằm sát 2 mép, nhờ vậy hàng nhãn bên dưới canh trái/giữa/phải
   (is-start/is-center/is-end) tự thẳng cột mà không cần tính toán grid-column. */
.eval-stepper-circles {
  display: flex;
  align-items: center;
}
.eval-stepper-circle-wrap {
  display: flex;
}
.eval-stepper-line {
  flex: 1;
  height: 2px;
  background: #dde0eb;
  margin: 0 6px;
}
.eval-stepper-line.is-done {
  background: #346bda;
}
.eval-stepper-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #dde0eb;
  background: #fff;
  color: #8a93a0;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.eval-stepper-circle:disabled {
  cursor: not-allowed;
}
.eval-stepper-circle.is-current {
  border-color: #346bda;
  color: #346bda;
}
.eval-stepper-circle.is-done {
  background: #346bda;
  border-color: #346bda;
  color: #fff;
}
/* Bước kế tiếp (ngay sau bước hiện tại) — viền nét đứt cùng màu xanh của trạng thái "đã qua", phân biệt với bước
   xa hơn (viền liền xám, disable) — phản hồi người dùng 2026-09-13. */
.eval-stepper-circle.is-next {
  border-style: dashed;
  border-color: #346bda;
  color: #346bda;
}

/* Hàng trong section "Tóm tắt" (ảnh tao_ky_danh_gia_buoc_*) — gap rõ hơn mặc định `py-1` (4px) và có gạch ngang
   phân cách giữa các hàng, phản hồi người dùng 2026-09-13. */
.eval-summary-row {
  padding: 10px 0;
  border-bottom: 1px solid #eeeff2;
}
.eval-summary-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Dòng mô tả dưới tiêu đề trang (ảnh tao_ky_danh_gia_buoc_*) — Bulma `.subtitle` quá đậm/quá tối so với ảnh mẫu;
   dùng đúng màu chữ mờ của design system (`--ds-color-text-muted` = #5a5a5f, xem DESIGN.md mục Design tokens),
   phản hồi người dùng 2026-09-13. */
.eval-page-subtitle {
  font-size: 13.5px;
  font-weight: 400;
  color: #5a5a5f;
  margin-top: 0;
}

.eval-stepper-labels {
  display: flex;
  margin-top: 10px;
  gap: 8px;
}
.eval-stepper-label {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.eval-stepper-label.is-start {
  align-items: flex-start;
  text-align: left;
}
.eval-stepper-label.is-center {
  align-items: center;
  text-align: center;
}
.eval-stepper-label.is-end {
  align-items: flex-end;
  text-align: right;
}
.eval-stepper-title {
  font-weight: 600;
  color: #2b3648;
}
.eval-stepper-title.is-current {
  color: #346bda;
}
.eval-stepper-hint {
  font-size: 12.5px;
  color: #8a93a0;
}
.eval-stepper-next-pill {
  margin-top: 6px;
}

/* Trạng thái rỗng "Chưa có người tham gia nào" ở bước 2 Tạo kỳ đánh giá (ảnh tao_ky_danh_gia_buoc_2_rong_users) —
   biến thể empty-with-CTA (docs/design-system/components.md mục "Hai kiểu rỗng khác nhau"), nút hành động chính
   đã có sẵn ngay phía trên khối này nên không lặp lại nút trong khối rỗng. */
/* Giờ là <button> bấm được (phản hồi người dùng 2026-09-13: trước đó chỉ trang trí) — reset chrome mặc định của
   <button> để vẫn giữ đúng hình tròn của ảnh mẫu. */
.eval-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #f0f2f4;
  color: #8a93a0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  border: none;
  cursor: pointer;
  padding: 0;
}
.eval-empty-icon:hover {
  background: #e7eaef;
}
.eval-empty-icon:disabled {
  cursor: not-allowed;
}

/* Banner "Còn vấn đề chặn phát hành"/"Sẵn sàng phát hành" ở bước 3 Tạo kỳ đánh giá — đổi từ
   `notification is-warning/is-success is-light` phẳng sang đúng kiểu viền trái dày đã dùng ở
   EvaluationCriterionEditor.razor/EvaluationScaleEditor.razor (`.notification.evaluation-criterion-lock-notice`),
   phản hồi người dùng 2026-09-13. */
.notification.eval-blocker-notice {
  background: var(--bulma-warning-95);
  border: var(--bulma-control-border-width) solid var(--bulma-border);
  border-left-width: calc(var(--bulma-control-border-width) * 3);
  border-left-color: var(--bulma-warning);
  border-radius: var(--bulma-radius-large);
}
.notification.eval-ready-notice {
  background: var(--bulma-success-95);
  border: var(--bulma-control-border-width) solid var(--bulma-border);
  border-left-width: calc(var(--bulma-control-border-width) * 3);
  border-left-color: var(--bulma-success);
  border-radius: var(--bulma-radius-large);
}

/* Danh sách ứng viên chỉ định người đánh giá (ảnh popup_chi_dinh_nguoi_danh_gia.png) — khung cuộn cố định chiều
   cao thay vì để danh sách dài kéo giãn cả modal. */
.eval-candidate-list {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid #ebebec;
  border-radius: 6px;
  padding: 4px 10px;
}

/* Popup "Thêm người tham gia" (ảnh popup_them_nhan_vien.png) — phản hồi người dùng 2026-09-13:
   1) kích thước popup cố định, không nhảy theo số dòng: bọc thân popup thành cột flex cao cố định;
   2) chỉ vùng bảng (`.eval-picker-scroll`) cuộn, không cuộn cả `.modal-card-body`. */
.eval-picker-body {
  height: 60vh;
  display: flex;
  flex-direction: column;
}
.eval-picker-filter-bar {
  flex-shrink: 0;
}
.eval-picker-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Dropdown lọc "Tất cả đơn vị"/"Vị trí công việc" ở popup Thêm người tham gia và Chỉ định người đánh giá —
   phản hồi người dùng 2026-09-14: đổi từ ghi đè CSS lên trigger "ghost" mặc định sang dùng đúng
   `TriggerClass` mới thêm ở DepartmentDropdown/JobPositionDropdown (tham khảo cách Payroll/_MemberPopup.razor
   dựng dropdown lọc — trigger dạng nút thường, không phải link). Class này chỉ set độ rộng cố định vừa đủ chữ
   cho ô dropdown; ô tìm kiếm cạnh bên dùng `is-flex-grow-1` (tỉ lệ, không fix px). */
.eval-filter-dropdown {
  width: 190px;
}

/* Bảng "Người tham gia" ở bước 2 Tạo kỳ đánh giá — khung cuộn cố định chiều cao thay vì để nhiều người tham gia
   kéo giãn cả trang (phản hồi người dùng 2026-09-13, lần 2). */
.eval-participants-scroll {
  max-height: 420px;
  overflow-y: auto;
}

/* Link "Xử lý ở bước…" trong danh sách vấn đề chặn phát hành (bước 3) — chữ thường có gạch chân, không phải nút
   có nền/viền, để không cạnh tranh thị giác với số liệu đứng ngay trước (phản hồi người dùng 2026-09-13, lần 2). */
.eval-inline-link {
  background: none;
  border: none;
  padding: 0;
  color: #346bda;
  text-decoration: underline;
  cursor: pointer;
  font-size: inherit;
}
.eval-inline-link:hover {
  color: #2c59b4;
}

/* Link/toggle không gạch chân — khác `.eval-inline-link` ở trên (gạch chân, dùng cho link "Xử lý ở bước…" nằm
   trong 1 dòng dữ liệu). Dùng cho "Xem khung đối chiếu" / "+ Thêm nhận xét" (phản hồi người dùng 2026-09-18:
   "+ Thêm nhận xét" không nên có gạch chân). */
.eval-toggle-link {
  background: none;
  border: none;
  padding: 0;
  color: #346bda;
  cursor: pointer;
  font-size: inherit;
}
.eval-toggle-link:hover {
  color: #2c59b4;
}

/* Phiếu đánh giá (SelfAssessmentForm/CriterionResponseField) — redesign theo ảnh
   docs/design-system/screens/phieu_danh_gia/ (phản hồi người dùng 2026-09-18, view nhân viên trước).
   Tái dùng đúng token xanh/xám đã có ở .eval-stepper-* (#346bda/#dde0eb/#8a93a0/#f0f2f4) — không phát minh màu
   mới, đúng `design-assets.md`. */
.eval-form-progress {
  display: flex;
  align-items: center;
  gap: 10px;
}
.eval-form-progress-track {
  width: 120px;
  height: 6px;
  border-radius: 3px;
  background: #dde0eb;
  overflow: hidden;
}
.eval-form-progress-fill {
  height: 100%;
  background: #346bda;
  border-radius: 3px;
  transition: width 0.2s ease;
}
.eval-form-progress-label {
  font-size: 12.5px;
  color: #5a5a5f;
  white-space: nowrap;
}

/* Tiêu đề nhóm tiêu chí — chữ hoa, nhỏ, xám, thay cho <h2> đậm/lớn trước đây. Chữ hoa dựng bằng
   `.ToUpperInvariant()` phía C# (`SelfAssessmentForm.razor`), KHÔNG dùng `text-transform: uppercase` — CSS
   uppercase không đáng tin cậy với vài tổ hợp dấu tiếng Việt tuỳ trình duyệt (phản hồi người dùng 2026-09-18:
   caption hiện KHÔNG in hoa dù CSS đã set). Độ đậm 600 (2026-09-19, phản hồi người dùng: cần nổi bật hơn —
   trước đó 400 do lần đổi 2026-09-18 coi 600 "quá đậm", nay yêu cầu ngược lại; giữ nguyên `color`/`font-size`/
   `letter-spacing`, chỉ đổi `font-weight`). Áp dụng chung cả Self và Manager (cùng 1 class dùng ở cả 2 trang). */
.eval-group-caption {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #8a93a0;
}

/* Khung 1 tiêu chí nổi viền xanh khi ĐÃ CHẤM (có Response) — không phải trạng thái đang cuộn/focus. */
.inner_section.eval-criterion-card--answered {
  border-color: #346bda;
}

/* Độ đậm normal (phản hồi người dùng 2026-09-18) — trước đó 600 bị coi là quá đậm so với phần còn lại của card. */
.eval-criterion-status {
  font-size: 13px;
  font-weight: 400;
  color: #8a93a0;
  white-space: nowrap;
}
.eval-criterion-status.is-answered {
  color: #346bda;
}

/* Mỗi mức trong thang điểm cố định — dựng lại thành hàng dạng thẻ thay vì radio trần, giữ nguyên <input
   type="radio"> ẩn thị giác (is-sr-only) bên trong <label> để không đổi ngữ nghĩa/khả năng thao tác bàn phím. */
.eval-level-option {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #dde0eb;
  border-radius: 10px;
  padding: 10px 14px;
}
/* Chọn = viền xanh + 1 vòng box-shadow CÙNG giá trị với `:focus-within` bên dưới — khi cả 2 cùng khớp (chọn rồi
   vẫn đang giữ focus ngay sau khi bấm) chỉ có 1 giá trị cuối cùng được áp dụng (CSS không cộng dồn box-shadow từ
   2 rule trùng thuộc tính), nên không còn hiện tượng "2 viền" (viền đậm + outline nhỏ) như trước
   (phản hồi người dùng 2026-09-18). */
.eval-level-option.is-selected {
  border-color: #346bda;
  background: rgba(52, 107, 218, 0.06);
  box-shadow: 0 0 0 1px #346bda;
}
.eval-level-option:focus-within {
  border-color: #346bda;
  box-shadow: 0 0 0 1px #346bda;
}
.eval-level-badge {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #f0f2f4;
  color: #8a93a0;
  font-weight: 600;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.eval-level-option.is-selected .eval-level-badge {
  background: #346bda;
  color: #fff;
}
/* Biến thể xanh của `.eval-level-badge` — dùng ở cột "Bạn chấm" trong khu đối chiếu đã gửi (2026-09-19, ảnh
   `16 danh gia quan ly doi chieu .png`), cùng màu với trạng thái "đã chọn" phía trên để phân biệt rõ đây là
   câu trả lời CỦA CHÍNH phiếu này, không phải trạng thái chọn tương tác. */
.eval-level-badge--primary {
  background: #346bda;
  color: #fff;
}
.eval-level-check {
  margin-left: auto;
  color: #346bda;
  flex: none;
}

/* Khu "Đối chiếu đánh giá" 2 cột, chỉ hiện khi phiếu quản lý ĐÃ GỬI và có tự đánh giá để so sánh (2026-09-19,
   ảnh `docs/design-system/screens/phieu_danh_gia/16 danh gia quan ly doi chieu .png`) — thay hẳn danh sách
   liệt kê mọi mức của bản ReadOnly cũ. Cột trái (câu trả lời của chính phiếu quản lý) tô nền xanh nhạt để phân
   biệt với cột phải (nhân viên) — cùng công thức `rgba(52,107,218, x)` đã dùng ở `.eval-level-option.is-selected`,
   không phát minh màu mới. */
.eval-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid #ebebec;
  border-radius: 10px;
  overflow: hidden;
}
.eval-compare-col {
  padding: 14px 16px;
}
.eval-compare-col--you {
  background: rgba(52, 107, 218, 0.05);
  border-right: 1px solid #ebebec;
}
/* 2026-09-20 — biến thể 1 cột full-width của khu đối chiếu, dùng khi phiếu ĐÃ GỬI nhưng không có dữ liệu để
   đối chiếu (chỉ còn hiện đúng phần "của bạn"). Bỏ `border-right` thừa của `.eval-compare-col--you` (không có
   cột thứ hai để cần đường phân cách). */
.eval-compare-col--solo {
  border-right: none;
}

/* Trang "Đánh giá của tôi" khi kỳ KHÔNG bật tự đánh giá (2026-09-20, ảnh
   docs/design-system/screens/phieu_danh_gia/16b danh gia chi quan ly.png) — chỉ còn 1 phía "Quản lý đánh giá",
   không phải khu đối chiếu 2 cột nên KHÔNG dùng `.eval-compare-grid`. Điểm và nhận xét mỗi thứ 1 khung thẻ
   riêng (khác `.eval-compare-col` — ảnh này không gộp chung 1 khối như khu đối chiếu). */
.eval-compare-score-card {
  background: rgba(52, 107, 218, 0.05);
  border: 1px solid #ebebec;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.eval-compare-note-card {
  border: 1px solid #ebebec;
  border-radius: 10px;
  padding: 12px 14px;
}
/* Nhãn tiêu đề cột + nhãn "Nhận xét của..." trong khu đối chiếu — KHÔNG gạch chân dưới (khác
   `.eval-peer-note-label` gốc, vốn có `border-bottom` cho bố cục xếp dọc cũ) — phản hồi người dùng 2026-09-19
   đã chốt "không gạch chân" cho kiểu nhãn này. */
.eval-compare-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8a93a0;
}
.eval-compare-label--primary {
  color: #346bda;
}
.eval-compare-score {
  display: flex;
  /* `flex-start` thay `center` (2026-09-20) — từ khi có dòng mô tả hành vi nhiều dòng bên cạnh badge, `center`
     làm badge trôi xuống giữa khối; không ảnh hưởng các chỗ chỉ có 1 dòng (freescore, N/A). */
  align-items: flex-start;
  gap: 8px;
  margin: 0;
}
.eval-compare-divider {
  border-top: 1px solid #ebebec;
  margin: 12px 0;
}
@media (max-width: 640px) {
  .eval-compare-grid {
    grid-template-columns: 1fr;
  }
  .eval-compare-col--you {
    border-right: none;
    border-bottom: 1px solid #ebebec;
  }
}

/* Trang "Kết quả đánh giá" (MyResultView.razor) — redesign theo ảnh
   docs/design-system/screens/ket_qua_danh_gia/image.png (yêu cầu người dùng 2026-09-20). Tái dùng token đã khai
   báo ở DESIGN.md (`--ds-color-success`/`--ds-color-danger`) cho màu đạt/chưa đạt của thanh điểm, và đúng xanh
   `#346bda` đã dùng xuyên suốt module cho banner nhóm — không phát minh màu mới. */
.eval-result-score-track-wrap {
  position: relative;
  padding-top: 22px;
}
.eval-result-score-track {
  position: relative;
  height: 10px;
  border-radius: 5px;
  background: #ebebec;
}
.eval-result-score-fill {
  height: 100%;
  border-radius: 5px;
  background: var(--ds-color-danger, #f24949);
}
.eval-result-score-fill.is-passed {
  background: var(--ds-color-success, #48c78e);
}
.eval-result-score-fill.is-neutral {
  background: #8a93a0;
}
.eval-result-score-threshold {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  background: #2b2b2b;
  transform: translateX(-1px);
}
.eval-result-score-threshold-label {
  position: absolute;
  top: 0;
  transform: translate(-50%, -100%);
  font-size: 11px;
  color: #5a5a5f;
  white-space: nowrap;
}
.eval-result-score-axis {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #8a93a0;
  margin-top: 6px;
}

/* Banner nhóm tiêu chí — nền xanh đầy, thay hẳn `.eval-group-caption` chữ xám nhỏ trước đây, chỉ dùng ở trang
   Kết quả (các trang phiếu Manager/Self vẫn giữ nguyên `.eval-group-caption`, không đổi theo). */
.eval-result-group-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #346bda;
  color: #fff;
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.03em;
}

/* Chip điểm/mức ở góc phải mỗi thẻ tiêu chí — bọc `.eval-level-badge--primary` (hình tròn có sẵn) trong 1 nền
   xanh nhạt dạng viên thuốc, không tạo biến thể badge mới. */
.eval-result-level-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  background: rgba(52, 107, 218, 0.08);
  border-radius: 999px;
  padding: 4px 14px 4px 4px;
  font-weight: 600;
  color: #2b2b2b;
  white-space: nowrap;
}

/* Pill "Kết luận" (Đạt/Chưa đạt) — to hơn, đậm hơn Bulma `.tag` mặc định (phản hồi người dùng 2026-09-20, ảnh
   `docs/design-system/screens/ket_qua_danh_gia/ket qua cac muc.png`: cần rõ ràng hơn). Vẫn ghép chung với
   `tag is-success/is-danger is-light` để giữ đúng cặp màu nền nhạt/chữ đậm Bulma đã tính sẵn, chỉ ghi đè
   kích thước/bo góc/độ đậm — không tự pha màu mới. */
.eval-result-conclusion-pill.tag {
  height: auto;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 8px;
  gap: 4px;
}