(Phương án C 2026-09-15: nay là EvaluationProcessOverviewPage.razor, route "/evaluations/process-overview"; trước đó là Index.razor khi màn này còn là nội dung landing), không phải một trang độc lập; đổi sẽ rò rỉ nền này ra toàn bộ app. - Tiêu đề hero giữ cấu trúc 2 key sẵn có (EvaluationProcessTitlePrefix + EvaluationTitle accent toàn bộ) thay vì tách cứng 2 từ "Đánh giá"/"nhân sự" trong 1 chuỗi — bản en-US của EvaluationTitle chỉ có 1 từ ("Evaluation") nên không tách được an toàn theo cùng quy tắc cho cả 2 ngôn ngữ. - Thêm trạng thái link không khả dụng (AC-EVAL-PROCESS-003), focus-visible và prefers-reduced-motion — bản HTML tĩnh không có 3 phần này. - Full-height (phản hồi người dùng 2026-09-14): nền gradient/lưới chấm trước đó chỉ cao bằng nội dung (header + 5 thẻ), để lộ khoảng trống phẳng bên dưới - nhìn như 1 "snapshot" thay vì lấp đầy layout.

không dùng convention .main.flex_column của app (wwwroot/css/app.css, dòng ~862-963) nên không tự stretch theo #content (height:100vh, xem LayoutMain.razor); cách không phải sửa EvaluationProcessOverviewPage.razor/LayoutMain (ngoài scope feature này) là tự đặt min-height ở đây, trừ đúng hằng số header 52px app đã dùng cho .main.flex_column và padding p-5 (24px x2) của

bao quanh. */ .evaluation-process-overview { --eval-process-primary: #346bda; --eval-process-primary-700: #2c59b4; --eval-process-primary-300: #6994eb; --eval-process-primary-50: #e8edf8; --eval-process-primary-tint: #f5f8fd; --eval-process-border: #ebebec; --eval-process-divider: #eeeff2; --eval-process-text: #2b2b2b; --eval-process-muted: #6e6e73; --eval-process-faint: #9b9b9b; --eval-process-title: #54687c; --eval-process-radius-card: 12px; box-sizing: border-box; min-height: calc(100vh - 52px - 0px); padding: 0 24px; background-color: #f6f8fc; background-image: radial-gradient( 900px 380px at 50% -40px, rgba(52, 107, 218, 0.14), transparent 70% ), radial-gradient(rgba(52, 107, 218, 0.05) 1px, transparent 1px); /* background-size: auto, 24px 24px; */ background-position: 0 0, 0 0; } .evaluation-process-overview__hero { text-align: center; margin: 0 auto; padding: 24px 20px 4px; } .evaluation-process-overview__title { margin: 0; font-size: 56px; font-weight: 800; letter-spacing: 0.035em; text-transform: uppercase; color: var(--eval-process-title); } .evaluation-process-overview__title-accent { color: var(--eval-process-primary); } .evaluation-process-overview__description { margin: 14px auto 0; font-size: 14px; color: var(--eval-process-muted); line-height: 1.65; } .evaluation-process-overview__steps { display: flex; flex-wrap: nowrap; align-items: stretch; justify-content: center; gap: 0; width: 100%; margin-top: 60px; } .evaluation-process-overview__connector { flex: 0 0 44px; display: flex; align-items: center; justify-content: center; align-self: center; color: var(--eval-process-primary-300); } .evaluation-process-overview__connector svg { width: 38px; height: 22px; } .evaluation-process-step-card { flex: 1 1 200px; min-width: 0; background: #fff; border: 1px solid var(--eval-process-border); border-radius: var(--eval-process-radius-card); padding: 20px 18px 8px; display: flex; flex-direction: column; transition: 0.16s ease; } .evaluation-process-step-card:hover { border-color: var(--eval-process-primary-300); box-shadow: 0 6px 28px rgba(20, 40, 90, 0.08); transform: translateY(-2px); } .evaluation-process-step-card--optional { border-style: dashed; border-color: var(--eval-process-primary-300); background: #f3f7fe; } .evaluation-process-step-card--optional .evaluation-process-step-card__icon { background: #fff; } .evaluation-process-step-card--optional .evaluation-process-step-card__number { background: #fff; border: 1.5px dashed var(--eval-process-primary-300); color: var(--eval-process-primary-300); } .evaluation-process-step-card--optional:hover { border-color: var(--eval-process-primary-300); box-shadow: 0 6px 28px rgba(52, 107, 218, 0.12); } .evaluation-process-step-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .evaluation-process-step-card__icon { width: 44px; height: 44px; border-radius: 10px; background: var(--eval-process-primary-50); color: var(--eval-process-primary); display: inline-flex; align-items: center; justify-content: center; } .evaluation-process-step-card__number { width: 26px; height: 26px; border-radius: 999px; background: var(--eval-process-primary); color: #fff; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; } .evaluation-process-step-card__title { font-size: 16px; font-weight: 600; color: var(--eval-process-text); line-height: 1.35; margin: 0; } .evaluation-process-step-card__tag { align-self: flex-start; margin-top: 9px; font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--eval-process-primary-50); color: var(--eval-process-primary); } .evaluation-process-step-card__description { font-size: 13.5px; color: var(--eval-process-muted); line-height: 1.6; margin: 9px 0 0; } .evaluation-process-step-card__links { margin-top: 14px; display: flex; flex-direction: column; } .evaluation-process-step-card__link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 6px; margin: 0 -6px; border-top: 1px solid var(--eval-process-divider); font-size: 13.5px; font-weight: 500; color: var(--eval-process-primary); text-decoration: none; transition: 0.12s; } .evaluation-process-step-card__link:hover { background: var(--eval-process-primary-tint); color: var(--eval-process-primary-700); } .evaluation-process-step-card__link:active { color: #223a6b; } .evaluation-process-step-card__link:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(52, 107, 218, 0.16); } .evaluation-process-step-card__link-arrow { transition: transform 0.12s; flex: none; } .evaluation-process-step-card__link:hover .evaluation-process-step-card__link-arrow { transform: translateX(3px); } .evaluation-process-step-card__link--unavailable { color: var(--eval-process-faint); cursor: default; flex-direction: column; align-items: flex-start; gap: 2px; } .evaluation-process-step-card__link--unavailable:hover { background: none; color: var(--eval-process-faint); } .evaluation-process-step-card__link-reason { font-size: 11px; font-weight: 400; font-style: italic; } @media (max-width: 1200px) { .evaluation-process-overview__steps { flex-direction: column; align-items: center; } .evaluation-process-step-card { width: 100%; max-width: 520px; flex: none; } .evaluation-process-overview__connector { flex: none; height: 34px; transform: rotate(90deg); } } @media (max-width: 767px) { .evaluation-process-overview { padding: 16px 0 32px; } .evaluation-process-overview__title { font-size: 20px; } } @media (prefers-reduced-motion: reduce) { .evaluation-process-step-card, .evaluation-process-step-card__link, .evaluation-process-step-card__link-arrow { transition: none; } .evaluation-process-step-card:hover, .evaluation-process-step-card--optional:hover { transform: none; } }