/* /Features/Access/AuditLogsPage.razor.rz.scp.css */
.stack[b-kwdyo43blb] {
  display: flex;
  flex-direction: column;
}

.muted[b-kwdyo43blb] {
  font-size: var(--fs-xs);
  color: var(--tx3);
}

/* Mỗi thao tác liệt kê các trường đổi; quá bốn trường thì phần còn lại mở khi cần. */
.changes[b-kwdyo43blb] {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
  word-break: break-word;
}

.more summary[b-kwdyo43blb] {
  cursor: pointer;
  color: var(--brand);
  font-size: var(--fs-sm);
}

.pager[b-kwdyo43blb] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--bd);
}
/* /Features/Access/RolePicker.razor.rz.scp.css */
.roles[b-k7qr1qobqh] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px 20px;
  margin: 0;
  padding: 12px 16px 16px;
  border: 1px solid var(--bd);
  border-radius: var(--radius);
}

.roles legend[b-k7qr1qobqh] {
  padding: 0 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--tx2);
}

.error[b-k7qr1qobqh] {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--dan);
  font-size: var(--fs-sm);
}
/* /Features/Access/TemporaryPasswordDialog.razor.rz.scp.css */
/* Mật khẩu chữ đơn cách, cỡ lớn: người đọc qua điện thoại phân biệt được từng ký tự. */
.secret[b-h3u514rmha] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border: 1px dashed var(--bd2);
  border-radius: var(--radius);
  background: var(--soft);
}

.secret code[b-h3u514rmha] {
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  letter-spacing: 0.08em;
  user-select: all;
}
/* /Features/Access/UserScopesDialog.razor.rz.scp.css */
.scopes[b-ocpb99ejdr] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.scopes li[b-ocpb99ejdr] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 8px 12px;
  border: 1px solid var(--bd);
  border-radius: var(--radius);
}

.name[b-ocpb99ejdr] {
  flex: 1;
  min-width: 160px;
}

.muted[b-ocpb99ejdr] {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--tx3);
}
/* /Features/Access/UsersPage.razor.rz.scp.css */
.stack[b-05lu19ai2a] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.muted[b-05lu19ai2a] {
  font-size: var(--fs-xs);
  color: var(--tx3);
}

.name[b-05lu19ai2a] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

/* /Features/Appraisals/AppraisalTemplateDialog.razor.rz.scp.css */
/* Tổng tỷ trọng xanh khi đủ 100%, vàng khi lệch (BR-20). */
.summary[b-pfyrxqmx5x],
.sum[b-pfyrxqmx5x] {
  font-size: var(--fs-sm);
}

.summary[b-pfyrxqmx5x] {
  padding: 8px 12px;
  border-radius: var(--radius);
}

.summary.ok[b-pfyrxqmx5x],
.sum.ok[b-pfyrxqmx5x] {
  color: var(--ok);
}

.summary.ok[b-pfyrxqmx5x] {
  background: var(--ok-bg);
}

.summary.off[b-pfyrxqmx5x],
.sum.off[b-pfyrxqmx5x] {
  color: var(--warn);
}

.summary.off[b-pfyrxqmx5x] {
  background: var(--warn-bg);
}

.group[b-pfyrxqmx5x] {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--bd);
  border-radius: var(--radius);
}

.group.idle[b-pfyrxqmx5x] {
  background: var(--soft);
}

.group header[b-pfyrxqmx5x] {
  display: flex;
  align-items: center;
  gap: 12px;
}

.group header .sum[b-pfyrxqmx5x] {
  margin-left: auto;
}

.group header .percent[b-pfyrxqmx5x] {
  margin-left: auto;
}

.group header .sum + .percent[b-pfyrxqmx5x] {
  margin-left: 0;
}

.percent[b-pfyrxqmx5x] {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  color: var(--tx3);
}

.group[b-pfyrxqmx5x]  .weight {
  width: 84px;
  text-align: right;
}

.lines[b-pfyrxqmx5x] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.lines li[b-pfyrxqmx5x] {
  display: flex;
  align-items: center;
  gap: 12px;
}

.criteria[b-pfyrxqmx5x] {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  min-width: 0;
}

.criteria code[b-pfyrxqmx5x] {
  font-size: var(--fs-xs);
  color: var(--tx3);
}

.muted[b-pfyrxqmx5x] {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--tx3);
}
/* /Features/Appraisals/CompetencyCriteriaDialog.razor.rz.scp.css */
/* Năm mức hành vi là một khối: viền nhạt, tiêu đề nhỏ như nhãn ô nhập. */
.levels[b-332rg9y34s] {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 12px 16px 16px;
  border: 1px solid var(--bd);
  border-radius: var(--radius);
}

.levels legend[b-332rg9y34s] {
  padding: 0 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--tx2);
}
/* /Features/Appraisals/CompetencyCriteriaPage.razor.rz.scp.css */
/* Mô tả mức 3 dài: tối đa hai dòng trong bảng, đủ để nhận ra tiêu chí; đầy đủ ở hộp thoại sửa. */
.level[b-x05ws47kl1] {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 420px;
  color: var(--tx2);
}
/* /Features/Home/HomeView.razor.rz.scp.css */
/* ---------- Đầu trang: lời chào gọn cùng kiểu đầu trang các màn khác, con số dạng thẻ phẳng ---------- */

.welcome[b-s2lr5br0dy] {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
}

.welcomeTitle[b-s2lr5br0dy] {
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.welcomeMeta[b-s2lr5br0dy] {
  margin: 4px 0 0;
  color: var(--tx2);
}

.stats[b-s2lr5br0dy] {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stat[b-s2lr5br0dy] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 150px;
  padding: 12px 16px;
  border: 1px solid var(--bd);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--tx);
  text-decoration: none;
}

a.stat[b-s2lr5br0dy] {
  transition: border-color var(--dur-1) var(--ease);
}

a.stat:hover[b-s2lr5br0dy] {
  border-color: var(--brand);
}

a.stat:focus-visible[b-s2lr5br0dy] {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

.statValue[b-s2lr5br0dy] {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.2;
}

/* Con số chưa có dữ liệu: vẫn giữ ô để bố cục không nhảy khi số liệu về. */
.statValue.unknown[b-s2lr5br0dy] {
  color: var(--tx3);
}

.statLabel[b-s2lr5br0dy] {
  color: var(--tx2);
  font-size: var(--fs-sm);
}

/* Điện thoại: các ô chia đều bề ngang, hẹp quá thì xuống hàng. */
@media (width <= 767px) {
  .stats[b-s2lr5br0dy] {
    width: 100%;
  }

  .stats > li[b-s2lr5br0dy] {
    flex: 1 1 140px;
  }

  .stat[b-s2lr5br0dy] {
    min-width: 0;
    height: 100%;
  }
}

/* ---------- Tìm nhân sự ---------- */

.search[b-s2lr5br0dy] {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 6px 6px 6px 16px;
  border: 1px solid var(--bd2);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow);
  transition:
    border-color var(--dur-1) var(--ease),
    box-shadow var(--dur-1) var(--ease);
}

.search:focus-within[b-s2lr5br0dy] {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-lt), var(--shadow);
}

.search[b-s2lr5br0dy]  .searchIcon {
  flex: none;
  color: var(--tx3);
}

.searchInput[b-s2lr5br0dy] {
  flex: 1;
  min-width: 0;
  height: 40px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--tx);
  font: inherit;
  font-size: var(--fs-md);
}

.searchInput[b-s2lr5br0dy]::placeholder {
  color: var(--tx3);
}

/* ---------- Bảng việc ---------- */

.board[b-s2lr5br0dy] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: 20px;
}

/* Việc cần xử lý và Sắp tới hạn đứng cạnh nhau; "Của tôi" chiếm cả hàng bên dưới. */
@media (width > 1100px) {
  .board.twoUp[b-s2lr5br0dy] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .board.twoUp[b-s2lr5br0dy] >  :nth-child(3) {
    grid-column: 1 / -1;
  }
}

.items[b-s2lr5br0dy] {
  margin: 0;
  padding: 0;
  list-style: none;
}

.items li + li[b-s2lr5br0dy] {
  border-top: 1px solid var(--bd);
}

.item[b-s2lr5br0dy] {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 12px 20px;
  color: var(--tx);
  text-decoration: none;
}

a.item[b-s2lr5br0dy] {
  transition: background var(--dur-1) var(--ease);
}

a.item:hover[b-s2lr5br0dy] {
  background: var(--soft);
}

a.item:focus-visible[b-s2lr5br0dy] {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

.itemIcon[b-s2lr5br0dy] {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  background: var(--soft);
  color: var(--tx2);
}

.item.busy .itemIcon[b-s2lr5br0dy] {
  background: var(--brand-lt);
  color: var(--brand);
}

.itemText[b-s2lr5br0dy] {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.itemTitle[b-s2lr5br0dy] {
  font-weight: 600;
}

.item:not(.busy) .itemTitle[b-s2lr5br0dy] {
  color: var(--tx2);
}

.itemHint[b-s2lr5br0dy] {
  color: var(--tx3);
  font-size: var(--fs-sm);
}

.itemValue[b-s2lr5br0dy] {
  flex: none;
  text-align: right;
}

.allClear[b-s2lr5br0dy] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 18px 20px;
  color: var(--tx2);
}

.allClear[b-s2lr5br0dy]  svg {
  color: var(--ok);
}

.item[b-s2lr5br0dy]  .itemArrow {
  flex: none;
  color: var(--tx3);
}

/* ---------- Lối tắt ---------- */

.shortcuts[b-s2lr5br0dy] {
  margin-top: 28px;
}

.sectionTitle[b-s2lr5br0dy] {
  margin: 0 0 12px;
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.shortcutList[b-s2lr5br0dy] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.shortcut[b-s2lr5br0dy] {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  min-height: 52px;
  padding: 10px 14px;
  border: 1px solid var(--bd);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--tx);
  font-weight: 600;
  text-decoration: none;
  transition:
    border-color var(--dur-1) var(--ease),
    background var(--dur-1) var(--ease);
}

a.shortcut:hover[b-s2lr5br0dy] {
  border-color: var(--brand);
  background: var(--brand-lt);
  color: var(--brand);
}

a.shortcut:focus-visible[b-s2lr5br0dy] {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

.shortcut.soon[b-s2lr5br0dy] {
  color: var(--tx3);
  font-weight: 500;
}

.shortcutName[b-s2lr5br0dy] {
  flex: 1;
  min-width: 0;
}

.shortcut[b-s2lr5br0dy]  .shortcutArrow {
  flex: none;
  color: var(--brand);
}

@media (width <= 600px) {
  .item[b-s2lr5br0dy] {
    padding: 12px 16px;
  }

  .itemHint[b-s2lr5br0dy] {
    display: none;
  }
}
/* /Features/Organization/AdminUnitImportDialog.razor.rz.scp.css */
.spec[b-igy0414ub1] {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--tx2);
}

.spec code[b-igy0414ub1] {
  word-break: break-word;
}

/* Bốn con số kết quả kiểm tra đọc liền một dòng. */
.counts[b-igy0414ub1] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-size: var(--fs-sm);
  color: var(--tx2);
}

.counts b[b-igy0414ub1] {
  color: var(--tx);
  font-size: var(--fs-md);
}

.errors[b-igy0414ub1] {
  margin: 4px 0 0;
  padding-left: 18px;
  max-height: 240px;
  overflow-y: auto;
}
/* /Features/Organization/DeleteOrgUnitDialog.razor.rz.scp.css */
.note[b-fdh1k3cvwo] {
  margin: 0;
  color: var(--tx2);
}
/* /Features/Organization/HeadcountPlansPage.razor.rz.scp.css */
.totals[b-gi1ufultny] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-size: var(--fs-sm);
  color: var(--tx2);
}

.totals b[b-gi1ufultny] {
  color: var(--tx);
  font-size: var(--fs-md);
}

.totals .over[b-gi1ufultny],
.totals .over b[b-gi1ufultny] {
  color: var(--dan);
}

.stack[b-gi1ufultny] {
  display: flex;
  flex-direction: column;
}

.stack code[b-gi1ufultny],
.muted[b-gi1ufultny] {
  font-size: var(--fs-xs);
  color: var(--tx3);
}
/* /Features/Organization/OrgUnitPage.razor.rz.scp.css */
.layout[b-9zopun01io] {
  display: grid;
  grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

@media (width <= 1000px) {
  .layout[b-9zopun01io] {
    grid-template-columns: minmax(0, 1fr);
  }
}

.filter[b-9zopun01io] {
  margin-bottom: 16px;
}

.filter[b-9zopun01io] ~  .alert {
  margin-bottom: 16px;
}

.tree[b-9zopun01io] {
  margin: 4px -8px 0;
  padding: 0;
  list-style: none;
}

/* Cây con nằm trong TreeNodeView (component khác) — băng qua bằng ::deep. */
.tree[b-9zopun01io]  ul {
  margin: 2px 0 2px 19px;
  padding: 0 0 0 10px;
  list-style: none;
  border-left: 1px dashed var(--bd2);
}

/* ---------- Đơn vị đang chọn ---------- */

.unitHead[b-9zopun01io] {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.unitIcon[b-9zopun01io] {
  display: grid;
  flex: none;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--brand-dk) 0%, var(--brand) 100%);
  color: var(--on-brand);
  box-shadow: var(--shadow-brand);
}

.unitTitle[b-9zopun01io] {
  min-width: 0;
}

.unitCode[b-9zopun01io] {
  margin: 0;
  color: var(--tx3);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

.unitName[b-9zopun01io] {
  margin: 2px 0 8px;
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}

.unitBadges[b-9zopun01io] {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.toolbar[b-9zopun01io] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 20px -20px 0;
  padding: 12px 20px;
  border-block: 1px solid var(--bd);
  background: var(--soft);
}
/* /Features/Organization/ParameterHistoryDialog.razor.rz.scp.css */
/* Dòng thời gian giá trị: mới nhất trên cùng; dòng đang áp dụng nổi bật, dòng đã hết hiệu lực nhạt đi. */
.timeline[b-rqdq3glamw] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.timeline li[b-rqdq3glamw] {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) auto;
  grid-template-areas: "when what action" "when basis action";
  column-gap: 12px;
  row-gap: 2px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--bd);
  border-radius: var(--radius);
}

.timeline li.current[b-rqdq3glamw] {
  border-color: var(--brand);
  background: var(--brand-lt);
}

.timeline li.past[b-rqdq3glamw] {
  color: var(--tx2);
}

.when[b-rqdq3glamw] {
  grid-area: when;
  font-size: var(--fs-sm);
}

.what[b-rqdq3glamw] {
  grid-area: what;
  display: flex;
  align-items: center;
  gap: 8px;
}

.value[b-rqdq3glamw] {
  font-weight: 600;
}

.basis[b-rqdq3glamw] {
  grid-area: basis;
  font-size: var(--fs-sm);
  color: var(--tx3);
}

.timeline li[b-rqdq3glamw]  .button {
  grid-area: action;
}

@media (width <= 640px) {
  .timeline li[b-rqdq3glamw] {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "when action" "what action" "basis action";
  }
}
/* /Features/Organization/ParameterPanel.razor.rz.scp.css */
/* Giá trị đã nhập trước cho tương lai, dưới giá trị đang áp dụng. */
.next[b-7pexo4mc20] {
  display: block;
  margin-top: 2px;
  color: var(--info);
  font-size: var(--fs-xs);
}
/* /Features/Organization/PublicHolidayPanel.razor.rz.scp.css */
/* Hàng thêm ngày: ô ngày hẹp, tên giãn, nút ngang hàng ô nhập. Canh theo đầu hàng rồi đẩy nút xuống đúng một dòng nhãn
   (cỡ chữ nhãn × giãn dòng + khoảng nhãn–ô của Field): canh theo đáy thì dòng báo lỗi dưới ô kéo nút tụt xuống theo. */
.add[b-g3x4yxs777] {
  display: grid;
  grid-template-columns: minmax(160px, 190px) minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  margin-bottom: 16px;
}

.add[b-g3x4yxs777] >  button[type='submit'] {
  margin-top: calc(var(--fs-sm) * var(--lh-base) + 6px);
}

@media (width <= 640px) {
  .add[b-g3x4yxs777] {
    grid-template-columns: minmax(0, 1fr);
  }

  .add[b-g3x4yxs777] >  button[type='submit'] {
    margin-top: 0;
  }
}
/* /Features/Organization/TreeNodeView.razor.rz.scp.css */
.node[b-u8y269b9dg] {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--tx);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    background-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease);
}

.node:hover[b-u8y269b9dg] {
  background: var(--soft);
}

.node[b-u8y269b9dg]  .nodeIcon {
  color: var(--tx3);
}

.selected[b-u8y269b9dg],
.selected:hover[b-u8y269b9dg] {
  background: var(--brand-lt);
  color: var(--brand);
  font-weight: 600;
}

.selected[b-u8y269b9dg]  .nodeIcon {
  color: var(--brand);
}

.nodeName[b-u8y269b9dg] {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* /Features/Organization/TreeSkeletonView.razor.rz.scp.css */
.skeletonRow[b-d9a80dkyp4] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block: 7px;
}
/* /Features/Organization/UnitDetailsView.razor.rz.scp.css */
/* Lưới thông tin đơn vị: nhãn nhỏ ở trên, giá trị bên dưới; tự chia cột theo bề rộng khung chi tiết. */
.details[b-0x31vb570z] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px 24px;
  margin: 20px 0 0;
}

.details dt[b-0x31vb570z] {
  color: var(--tx3);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.details dd[b-0x31vb570z] {
  margin: 4px 0 0;
  color: var(--tx);
  font-weight: 500;
}
/* /Layout/MainLayout.razor.rz.scp.css */
.skipLink[b-8z23tuyrqd] {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 8px 14px;
  border-radius: var(--radius);
  background: var(--card);
  color: var(--brand);
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  transform: translateY(-160%);
  transition: transform var(--dur-2) var(--ease-out);
}

.skipLink:focus[b-8z23tuyrqd] {
  transform: translateY(0);
}

.shell[b-8z23tuyrqd] {
  display: grid;
  grid-template:
    'topbar topbar' var(--topbar-h)
    'sidebar content' 1fr / var(--sidebar-w) minmax(0, 1fr);
  min-height: 100%;
  transition: grid-template-columns var(--dur-2) var(--ease);
}

.collapsed[b-8z23tuyrqd] {
  grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr);
}

/* ---------- Thanh trên ---------- */

/* Thanh chia theo hai cột của khung trang (subgrid): khối thương hiệu rộng bằng thanh bên và co giãn cùng một nhịp khi thu gọn,
   phần công cụ theo vùng nội dung. Cùng bề mặt với thanh bên (--card) để logo giữ đúng màu gốc — logo được thiết kế cho nền
   trắng. Nét thương hiệu của hệ thống là vạch --brand 3px ở mép trên, cùng nét với vạch trên khung đăng nhập và vạch đánh dấu mục
   menu đang chọn; đệm trên 3px để nội dung canh giữa phần còn lại của thanh. */
.topbar[b-8z23tuyrqd] {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-area: topbar;
  grid-template-columns: subgrid;
  align-items: center;
  padding-top: 3px;
  overflow: clip;
  background: var(--card);
  color: var(--tx2);
  box-shadow: inset 0 3px 0 var(--brand), 0 1px 0 var(--bd), var(--shadow);
}

/* Thu gọn: lề trái đặt con dấu giữa cột 68px, tâm 34px trùng tâm biểu tượng menu bên dưới (lề thanh bên 10px + lề mục 14px + nửa
   biểu tượng 10px). Vạch mảnh bên phải nối tiếp viền thanh bên. */
.brand[b-8z23tuyrqd] {
  /* Cao logo; logo rộng theo tỷ lệ tệp gốc 2578 × 681 px. */
  --logo-h: 36px;
  /* Phần lớp nền sáng (giao diện tối) chừa quanh logo. */
  --plate-pad: 4px;

  display: flex;
  align-items: center;
  align-self: stretch;
  min-width: 0;
  padding-left: calc((var(--sidebar-w-collapsed) - var(--logo-h)) / 2);
  overflow: hidden;
  box-shadow: inset -1px 0 0 var(--bd);
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.brand:hover[b-8z23tuyrqd] {
  text-decoration: none;
}

/* Mở rộng: cả logo dời vào giữa khối thương hiệu (rộng bằng thanh bên) — dời bằng translate, cùng nhịp thanh bên co giãn, nên
   chạy trên GPU. Thu gọn: logo trượt về chỗ con dấu, phần chữ mờ nhanh trước khi khối thu tới chữ; mở rộng: chữ hiện sau một nhịp,
   khi khối đã đủ rộng để không cắt ngang chữ. will-change dựng sẵn lớp GPU cho phần trượt và phần mờ: để trình duyệt tạo lớp lúc
   bắt đầu chuyển động thì mỗi lần thu gọn rơi thêm khoảng nửa khung hình (đo Chrome có GPU, tỉ lệ 150%, 20 lượt mỗi kiểu). */
.lockup[b-8z23tuyrqd] {
  position: relative;
  isolation: isolate;
  flex: none;
  translate: calc((var(--sidebar-w) - var(--logo-h) * 2578 / 681) / 2 - (var(--sidebar-w-collapsed) - var(--logo-h)) / 2) 0;
  transition: translate var(--dur-2) var(--ease);
  will-change: translate;
}

/* Lớp nền sáng (--logo-plate) dưới logo: giao diện sáng trùng màu thanh nên không thấy; giao diện tối giữ logo trên nền sáng như
   thiết kế gốc và như đầu khung đăng nhập. ::before là hình tròn ôm con dấu, ::after là viên thuốc ôm cả logo — mờ đi cùng phần
   chữ khi thu gọn, còn lại hình tròn. */
.lockup[b-8z23tuyrqd]::before,
.lockup[b-8z23tuyrqd]::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: calc(-1 * var(--plate-pad));
  border-radius: var(--radius-pill);
  background: var(--logo-plate);
}

.lockup[b-8z23tuyrqd]::before {
  right: auto;
  width: calc(var(--logo-h) + 2 * var(--plate-pad));
}

.lockup[b-8z23tuyrqd]::after {
  right: calc(-3 * var(--plate-pad));
  transition: opacity var(--dur-2) var(--ease) var(--dur-1);
  will-change: opacity;
}

.brand[b-8z23tuyrqd]  .wordmark {
  transition: opacity var(--dur-2) var(--ease) var(--dur-1);
  will-change: opacity;
}

.collapsed .lockup[b-8z23tuyrqd] {
  translate: 0 0;
}

.collapsed .lockup[b-8z23tuyrqd]::after,
.collapsed .brand[b-8z23tuyrqd]  .wordmark {
  opacity: 0;
  transition-duration: var(--dur-1);
  transition-delay: 0s;
}

.tools[b-8z23tuyrqd] {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 12px 0 10px;
}

.spacer[b-8z23tuyrqd] {
  flex: 1;
}

.iconButton[b-8z23tuyrqd] {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition:
    background-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease);
}

.iconButton:hover[b-8z23tuyrqd] {
  background: var(--soft);
  color: var(--tx);
}

/* Khối thương hiệu cao hết thanh: viền tiêu điểm vẽ vào trong, không bị mép thanh cắt. */
.brand:focus-visible[b-8z23tuyrqd] {
  outline-offset: -3px;
}

/* Nút mở menu ngôn ngữ và menu tài khoản đứng cùng hàng các nút thanh trên cùng: cùng cỡ, cùng màu chữ; rê chuột và tiêu điểm
   theo kiểu chung của ActionMenu. */
[b-8z23tuyrqd] .barMenu .trigger {
  width: 36px;
  height: 36px;
  color: inherit;
}

/* Menu tài khoản đứng cuối thanh, vạch mảnh ngăn với các nút cài đặt; nút mở là ảnh đại diện, tên, vai trò và mũi tên. */
[b-8z23tuyrqd] .accountMenu {
  margin-left: 4px;
  padding-left: 10px;
  border-left: 1px solid var(--bd);
}

[b-8z23tuyrqd] .accountMenu .trigger {
  width: auto;
  height: 40px;
  padding: 0 6px 0 4px;
  text-align: start;
}

[b-8z23tuyrqd] .accountMenu .chevron {
  color: var(--tx3);
}

/* Chữ viết tắt trên nền xanh nhạt: điểm màu thương hiệu ở cuối thanh, cân với logo ở đầu thanh. */
.avatar[b-8z23tuyrqd] {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand-lt);
  color: var(--brand);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.userText[b-8z23tuyrqd] {
  display: grid;
  line-height: 1.25;
}

.userName[b-8z23tuyrqd] {
  color: var(--tx);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.userRole[b-8z23tuyrqd] {
  color: var(--tx3);
  font-size: var(--fs-xs);
}

/* Đầu menu tài khoản: tên đậm, dòng phụ nhạt trên nền card của menu. */
.accountHead[b-8z23tuyrqd] {
  display: grid;
  gap: 2px;
  max-width: 280px;
  line-height: 1.35;
}

.accountName[b-8z23tuyrqd] {
  font-weight: 600;
}

.accountLine[b-8z23tuyrqd] {
  color: var(--tx3);
  font-size: var(--fs-sm);
  white-space: normal;
}

.narrowOnly[b-8z23tuyrqd] {
  display: none;
}

.scrim[b-8z23tuyrqd] {
  display: none;
}

/* ---------- Sidebar ---------- */

.sidebar[b-8z23tuyrqd] {
  position: sticky;
  top: var(--topbar-h);
  z-index: 20;
  display: flex;
  flex-direction: column;
  grid-area: sidebar;
  height: calc(100dvh - var(--topbar-h));
  padding: 12px 10px;
  overflow: hidden auto;
  border-right: 1px solid var(--bd);
  background: var(--card);
}

.navList[b-8z23tuyrqd] {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.navSection[b-8z23tuyrqd] {
  position: relative;
  margin: 18px 12px 8px;
  overflow: hidden;
  white-space: nowrap;
  transition: color var(--dur-2) var(--ease);
  color: var(--tx3);
  font-size: var(--fs-sm);
  font-weight: 600;
}

[b-8z23tuyrqd] .navLink {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  /* 14px canh biểu tượng 20px vào giữa thanh thu gọn 68px. */
  padding: 8px 10px 8px 14px;
  border-radius: var(--radius);
  color: var(--tx2);
  font-size: var(--fs-md);
  text-decoration: none;
  transition:
    background-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease);
}

[b-8z23tuyrqd] .navLink:hover {
  background: var(--soft);
  color: var(--tx);
  text-decoration: none;
}

[b-8z23tuyrqd] .navIcon {
  color: var(--tx3);
  transition: color var(--dur-1) var(--ease);
}

[b-8z23tuyrqd] .navLink:hover .navIcon {
  color: var(--tx2);
}

[b-8z23tuyrqd] .navLink.active,
[b-8z23tuyrqd] .navLink.active:hover {
  background: var(--brand-lt);
  color: var(--brand);
  font-weight: 600;
}

[b-8z23tuyrqd] .navLink.active .navIcon {
  color: var(--brand);
}

[b-8z23tuyrqd] .navLink.active::before {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: -10px;
  width: 3px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--brand);
  animation: markIn-b-8z23tuyrqd var(--dur-2) var(--ease-out);
}

@keyframes markIn-b-8z23tuyrqd {
  from {
    opacity: 0;
    transform: scaleY(calc(1 - 0.7 * var(--travel)));
  }
}

.label[b-8z23tuyrqd] {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity var(--dur-2) var(--ease);
}

/* Thu gọn: tiêu đề nhóm giữ chiều cao để các mục bên dưới không giật lên. */
.collapsed .label[b-8z23tuyrqd] {
  opacity: 0;
}

.collapsed .navSection[b-8z23tuyrqd] {
  color: transparent;
}

/* Thu gọn: tên nhóm thành vạch ngăn. Vạch hiện dần sau khi chữ mờ gần hết — hiện ngay thì trông như gạch ngang chữ. */
.navSection[b-8z23tuyrqd]::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto;
  border-top: 1px solid var(--bd);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
}

.collapsed .navSection[b-8z23tuyrqd]::after {
  opacity: 1;
  transition-delay: var(--dur-1);
}

/* ---------- Bảng nổi của mục menu khi thanh bên thu gọn ---------- */

/* Rê chuột hoặc tiêu điểm bàn phím vào một mục: cạnh thanh bên hiện bảng nổi, hàng đầu là tên mục thẳng hàng biểu tượng, bên
   dưới là chức năng của phân hệ. Cùng họ với các pop-up khác (viền, bóng, mục cao --item-h). position: fixed để vùng cuộn của
   thanh bên không cắt mất; interop.js navFlyouts đặt top theo vị trí mục. Rê chuột thì mở sau 80ms — quét chuột ngang qua menu
   không làm bảng nháy; rời mục còn 120ms trước khi mờ để kịp đưa chuột sang bảng, ::before nối khe giữa mục và bảng. Tiêu điểm
   bàn phím thì mở ngay, không chậm lần Tab kế tiếp vào bảng. Chỉ mờ và trượt (GPU); giảm chuyển động bỏ phần trượt (--travel). */
.flyout[b-8z23tuyrqd] {
  display: none;
}

.collapsed .flyout[b-8z23tuyrqd] {
  position: fixed;
  top: 0;
  left: calc(var(--sidebar-w-collapsed) + 6px);
  z-index: 1;
  display: block;
  min-width: 200px;
  border: 1px solid var(--bd2);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--tx);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  translate: calc(-6px * var(--travel)) 0;
  visibility: hidden;
  transition:
    opacity var(--dur-1) var(--ease) 120ms,
    translate var(--dur-1) var(--ease) 120ms,
    visibility 0s linear calc(var(--dur-1) + 120ms);
}

.collapsed .flyout[b-8z23tuyrqd]::before {
  content: '';
  position: absolute;
  top: 0;
  right: 100%;
  bottom: 0;
  width: 18px;
}

@media (hover: hover) {
  .collapsed .navItem:hover > .flyout[b-8z23tuyrqd] {
    opacity: 1;
    translate: 0 0;
    visibility: visible;
    transition:
      opacity var(--dur-2) var(--ease) 80ms,
      translate var(--dur-2) var(--ease-out) 80ms,
      visibility 0s linear 80ms;
  }
}

.collapsed .navItem:has(:focus-visible) > .flyout[b-8z23tuyrqd] {
  opacity: 1;
  translate: 0 0;
  visibility: visible;
  transition:
    opacity var(--dur-2) var(--ease),
    translate var(--dur-2) var(--ease-out),
    visibility 0s;
}

/* Vừa bấm Esc hoặc chọn một chức năng: ẩn tới khi chuột rời mục, hay tiêu điểm rời mục (interop.js navFlyouts). */
.collapsed .navItem[data-flyout-off] > .flyout[b-8z23tuyrqd] {
  opacity: 0;
  visibility: hidden;
  transition: none;
}

/* Cao bằng mục menu (40px) và thẳng hàng với nó: bảng đặt top lùi 1px cho viền. */
.flyoutTitle[b-8z23tuyrqd] {
  display: flex;
  align-items: center;
  min-height: 40px;
  margin: 0;
  padding: 0 14px;
  font-weight: 600;
  white-space: nowrap;
}

.flyoutList[b-8z23tuyrqd] {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 4px;
  border-top: 1px solid var(--bd);
  list-style: none;
}

[b-8z23tuyrqd] .flyoutLink {
  display: flex;
  align-items: center;
  min-height: var(--item-h);
  padding: 0 12px;
  border-radius: var(--radius-sm);
  color: var(--tx);
  font-size: var(--fs-md);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease);
}

[b-8z23tuyrqd] .flyoutLink:hover {
  background: var(--soft);
  text-decoration: none;
}

/* Nền nhạt thôi gần như không thấy trên card trắng: thêm viền thương hiệu như tiêu điểm ở mọi chỗ. */
[b-8z23tuyrqd] .flyoutLink:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
  background: var(--soft);
}

[b-8z23tuyrqd] .flyoutLink.active {
  background: var(--brand-lt);
  color: var(--brand);
  font-weight: 600;
}

/* ---------- Content ---------- */

/* Cột nội dung là ô lưới kéo dài hết màn: trang ngắn thì chân trang nằm sát đáy màn, trang dài thì ở cuối nội dung — chỉ thấy khi
   cuộn tới cuối, không cố định trên màn. */
.content[b-8z23tuyrqd] {
  display: flex;
  flex-direction: column;
  grid-area: content;
  min-width: 0;
  padding: 28px 32px 0;
}

.container[b-8z23tuyrqd] {
  flex: 1;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
}

.siteFooter[b-8z23tuyrqd] {
  width: 100%;
  max-width: var(--content-max);
  margin: 48px auto 0;
  padding: 16px 0 20px;
  border-top: 1px solid var(--bd);
  color: var(--tx3);
  font-size: var(--fs-sm);
}

/* Hiện dần khi cuộn tới: trình duyệt chạy theo vị trí cuộn, chỉ độ mờ và dịch chuyển nên trên GPU. Trang ngắn thì chân trang đã
   nằm trọn trong màn nên hiện đủ ngay; trình duyệt chưa hỗ trợ thì hiện bình thường. */
@supports (animation-timeline: view()) {
  .siteFooter[b-8z23tuyrqd] {
    animation: footIn-b-8z23tuyrqd linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }
}

@keyframes footIn-b-8z23tuyrqd {
  from {
    opacity: 0;
    transform: translateY(calc(8px * var(--travel)));
  }
}

@media (width <= 1100px) {
  .userText[b-8z23tuyrqd] {
    display: none;
  }
}

/* ---------- Màn hẹp: thanh bên thành ngăn kéo phủ lên trang ---------- */

@media (width <= 900px) {
  .shell[b-8z23tuyrqd],
  .collapsed[b-8z23tuyrqd] {
    grid-template:
      'topbar' var(--topbar-h)
      'content' 1fr / minmax(0, 1fr);
  }

  .wideOnly[b-8z23tuyrqd] {
    display: none;
  }

  .narrowOnly[b-8z23tuyrqd] {
    display: inline-flex;
  }

  /* Một hàng như mọi ứng dụng trên điện thoại: nút ngăn kéo, logo K-Market, rồi các nút. */
  .topbar[b-8z23tuyrqd] {
    display: flex;
    gap: 8px;
    padding: 3px 12px 0 10px;
  }

  /* Logo nằm trong dòng sau nút ngăn kéo, thấp hơn (28px) để nút tài khoản không bị thanh cắt ở màn 360–375px; đệm hai bên chừa
     chỗ cho lớp nền sáng của giao diện tối. Trạng thái thu gọn của máy tính không áp lên điện thoại. */
  .brand[b-8z23tuyrqd] {
    --logo-h: 28px;
    --plate-pad: 3px;

    margin-left: 4px;
    padding: 0 calc(3 * var(--plate-pad)) 0 var(--plate-pad);
    box-shadow: none;
  }

  .lockup[b-8z23tuyrqd],
  .collapsed .lockup[b-8z23tuyrqd] {
    translate: none;
    will-change: auto;
  }

  .lockup[b-8z23tuyrqd]::after,
  .collapsed .lockup[b-8z23tuyrqd]::after,
  .brand[b-8z23tuyrqd]  .wordmark,
  .collapsed .brand[b-8z23tuyrqd]  .wordmark {
    opacity: 1;
    will-change: auto;
  }

  .tools[b-8z23tuyrqd] {
    flex: 1;
    padding: 0;
  }

  [b-8z23tuyrqd] .accountMenu {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }

  /* Đóng là ẩn hẳn sau khi trượt ra xong (visibility đổi trễ đúng một nhịp trượt): chỉ dịch ra ngoài màn thì bóng đổ còn lọt vào
     mép trái mọi màn, và Tab, trình đọc màn hình vẫn đi vào các mục menu không ai nhìn thấy (đo 06/10/2026). Mở thì hiện ngay. */
  .sidebar[b-8z23tuyrqd] {
    position: fixed;
    top: var(--topbar-h);
    bottom: 0;
    left: 0;
    z-index: 25;
    width: min(300px, 86vw);
    height: auto;
    box-shadow: var(--shadow-xl);
    visibility: hidden;
    transform: translateX(-105%);
    transition:
      transform var(--dur-3) var(--ease-out),
      visibility 0s linear var(--dur-3);
  }

  .drawerOpen .sidebar[b-8z23tuyrqd] {
    visibility: visible;
    transform: translateX(0);
    transition: transform var(--dur-3) var(--ease-out);
  }

  .collapsed .label[b-8z23tuyrqd] {
    opacity: 1;
  }

  .collapsed .navSection[b-8z23tuyrqd] {
    color: var(--tx3);
  }

  .collapsed .navSection[b-8z23tuyrqd]::after {
    content: none;
  }

  .collapsed .flyout[b-8z23tuyrqd] {
    display: none;
  }

  .scrim[b-8z23tuyrqd] {
    display: block;
    position: fixed;
    inset: var(--topbar-h) 0 0;
    z-index: 24;
    padding: 0;
    border: 0;
    background: var(--backdrop);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--dur-2) var(--ease),
      visibility var(--dur-2) var(--ease);
    cursor: pointer;
  }

  .drawerOpen .scrim[b-8z23tuyrqd] {
    opacity: 1;
    visibility: visible;
  }

  .content[b-8z23tuyrqd] {
    padding: 20px 16px 0;
  }

  .siteFooter[b-8z23tuyrqd] {
    margin-top: 32px;
    padding: 14px 0 18px;
    font-size: var(--fs-xs);
  }
}

/* Điện thoại rất hẹp: chỉ con dấu, để các nút bên phải không bị thanh (overflow: clip) cắt mất. */
@media (width < 360px) {
  .brand[b-8z23tuyrqd] {
    padding-right: var(--plate-pad);
  }

  .lockup[b-8z23tuyrqd]::after,
  .brand[b-8z23tuyrqd]  .wordmark {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shell[b-8z23tuyrqd],
  .sidebar[b-8z23tuyrqd],
  .drawerOpen .sidebar[b-8z23tuyrqd],
  .lockup[b-8z23tuyrqd] {
    transition: none;
  }
}
/* /Pages/Dev/UiDetail.razor.rz.scp.css */
.detailPage[b-92bgq1h18j] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.detailPage[b-92bgq1h18j]  .pageHeader {
  margin-bottom: 8px;
}

.summary[b-92bgq1h18j] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 28px;
}

.avatar[b-92bgq1h18j] {
  display: grid;
  flex: none;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-dk), var(--brand));
  color: var(--on-brand);
  font-size: var(--fs-xl);
  font-weight: 700;
  box-shadow: var(--shadow-brand);
}

.summaryFacts[b-92bgq1h18j],
.groupFacts[b-92bgq1h18j] {
  display: grid;
  flex: 1;
  gap: 16px 24px;
  margin: 0;
}

/* Hẹp hơn ảnh đại diện cộng 280px thì phần trường xuống dưới ảnh, chia hai cột thay vì một cột dài cạnh ảnh. */
.summaryFacts[b-92bgq1h18j] {
  flex: 1 1 280px;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}

.groupFacts[b-92bgq1h18j] {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.summaryFacts dt[b-92bgq1h18j],
.groupFacts dt[b-92bgq1h18j] {
  color: var(--tx3);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.summaryFacts dd[b-92bgq1h18j],
.groupFacts dd[b-92bgq1h18j] {
  margin: 4px 0 0;
  font-weight: 500;
}

.sensitive[b-92bgq1h18j] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* /Pages/Dev/UiForm.razor.rz.scp.css */
.formPage[b-2cbqtju07m] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.formPage[b-2cbqtju07m]  .pageHeader {
  margin-bottom: 8px;
}

.formPage[b-2cbqtju07m]  .simulate {
  border-style: dashed;
  box-shadow: none;
}

.simulateRow[b-2cbqtju07m] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.simulateLabel[b-2cbqtju07m] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
  color: var(--tx3);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.override[b-2cbqtju07m] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--warn);
  border-radius: var(--radius);
  background: var(--card);
}

.fields[b-2cbqtju07m] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px 20px;
}

.fields[b-2cbqtju07m]  .field:has(.wide) {
  grid-column: 1 / -1;
}

/* TL3 §5.3: nút lưu luôn trên màn hình khi cuộn biểu mẫu dài. */
.saveBar[b-2cbqtju07m] {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: 8px -32px -48px;
  padding: 12px 32px;
  border-top: 1px solid var(--bd);
  /* Nền đặc thay cho nền trong suốt làm mờ: dải dính phải vẽ lại lớp mờ ở mọi khung hình khi cuộn. */
  background: var(--card);
  box-shadow: 0 -8px 24px -16px var(--backdrop);
}

.saveState[b-2cbqtju07m] {
  margin-right: auto;
}

@media (width <= 900px) {
  .saveBar[b-2cbqtju07m] {
    margin: 8px -16px -40px;
    padding: 12px 16px;
  }
}
/* /Pages/Dev/UiHome.razor.rz.scp.css */
.previewBar[b-ecw8ev3gqz] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 20px;
  padding: 12px 14px;
  border: 1px dashed var(--bd2);
  border-radius: var(--radius);
  background: var(--card);
}

.previewLabel[b-ecw8ev3gqz] {
  color: var(--tx3);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.roles[b-ecw8ev3gqz] {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 6px;
}

.role[b-ecw8ev3gqz] {
  padding: 6px 12px;
  border: 1px solid var(--bd2);
  border-radius: 999px;
  background: transparent;
  color: var(--tx2);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition:
    background var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease);
}

.role:hover[b-ecw8ev3gqz] {
  border-color: var(--brand);
  color: var(--brand);
}

.role.on[b-ecw8ev3gqz] {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--on-brand);
}

.role:focus-visible[b-ecw8ev3gqz] {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.empty[b-ecw8ev3gqz] {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--tx2);
  font-size: var(--fs-sm);
  cursor: pointer;
}

@media (width <= 600px) {
  .previewBar[b-ecw8ev3gqz] {
    flex-direction: column;
    align-items: stretch;
  }
}
/* /Pages/Dev/UiKit.razor.rz.scp.css */
.toc[b-a578c24c1f] {
  position: sticky;
  top: calc(var(--topbar-h) + 12px);
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  padding: 8px;
  border: 1px solid var(--bd);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}

.toc a[b-a578c24c1f] {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  color: var(--tx2);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.toc a:hover[b-a578c24c1f] {
  background: var(--brand-lt);
  color: var(--brand);
  text-decoration: none;
}

.section[b-a578c24c1f] {
  padding-top: 32px;
  scroll-margin-top: calc(var(--topbar-h) + 72px);
}

.sectionTitle[b-a578c24c1f] {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.015em;
}

.sectionHint[b-a578c24c1f] {
  max-width: 80ch;
  margin: 4px 0 16px;
  color: var(--tx3);
}

.demoRow[b-a578c24c1f] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.demoRow + .demoRow[b-a578c24c1f] {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--bd);
}

.stack[b-a578c24c1f] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.twoCol[b-a578c24c1f],
.threeCol[b-a578c24c1f],
.layoutGrid[b-a578c24c1f] {
  display: grid;
  gap: 16px;
  align-items: start;
}

.twoCol[b-a578c24c1f] {
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

.threeCol[b-a578c24c1f],
.layoutGrid[b-a578c24c1f] {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.formGrid[b-a578c24c1f] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px 20px;
}

/* ---------- Templates ---------- */

.template[b-a578c24c1f] {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  border: 1px solid var(--bd);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--tx);
  box-shadow: var(--shadow);
  transition:
    border-color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    translate var(--dur-2) var(--ease);
}

.template:hover[b-a578c24c1f] {
  border-color: color-mix(in srgb, var(--brand) 45%, var(--bd));
  box-shadow: var(--shadow-lg);
  text-decoration: none;
  translate: 0 -2px;
}

.templateIcon[b-a578c24c1f] {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 6px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--brand-dk), var(--brand));
  color: var(--on-brand);
  box-shadow: var(--shadow-brand);
}

.templateName[b-a578c24c1f] {
  font-size: var(--fs-lg);
  font-weight: 600;
}

.templateText[b-a578c24c1f] {
  flex: 1;
  color: var(--tx3);
  font-size: var(--fs-sm);
}

.templateLink[b-a578c24c1f] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  color: var(--brand);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* ---------- Token và chữ ---------- */

.swatches[b-a578c24c1f] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px;
}

.swatch[b-a578c24c1f] {
  display: grid;
  gap: 2px;
}

.chip[b-a578c24c1f] {
  display: block;
  height: 52px;
  margin-bottom: 6px;
  border: 1px solid var(--bd);
  border-radius: var(--radius);
}

.swatch code[b-a578c24c1f] {
  color: var(--tx);
  font-size: var(--fs-sm);
}

.swatchUse[b-a578c24c1f] {
  color: var(--tx3);
  font-size: var(--fs-xs);
}

.typeScale[b-a578c24c1f] {
  display: grid;
  gap: 14px;
}

.typeScale > div[b-a578c24c1f] {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  align-items: baseline;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--bd);
}

.typeScale > div:last-child[b-a578c24c1f] {
  padding-bottom: 0;
  border-bottom: 0;
}

.typeTag[b-a578c24c1f] {
  color: var(--tx3);
  font-size: var(--fs-xs);
}

.sample[b-a578c24c1f] {
  margin: 0;
}

.h1[b-a578c24c1f] {
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.h2[b-a578c24c1f] {
  font-size: var(--fs-lg);
  font-weight: 600;
}

.eyebrow[b-a578c24c1f] {
  color: var(--brand);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.muted[b-a578c24c1f] {
  color: var(--tx3);
}

/* ---------- Nội dung minh họa khác ---------- */

.facts[b-a578c24c1f] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
  margin: 0;
}

.facts dt[b-a578c24c1f] {
  color: var(--tx3);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.facts dd[b-a578c24c1f] {
  margin: 4px 0 0;
  font-weight: 500;
}

.footNote[b-a578c24c1f] {
  margin-right: auto;
  color: var(--tx3);
  font-size: var(--fs-sm);
}

.tabText[b-a578c24c1f],
.note[b-a578c24c1f] {
  margin: 0;
  color: var(--tx2);
}

.skeletonHead[b-a578c24c1f] {
  display: flex;
  align-items: center;
  gap: 12px;
}

.grow[b-a578c24c1f] {
  flex: 1;
}

@media (width <= 600px) {
  .typeScale > div[b-a578c24c1f] {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .twoCol[b-a578c24c1f] {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* /Pages/Login.razor.rz.scp.css */
/* Hàng dưới ô mật khẩu: ghi nhớ tên đăng nhập bên trái, quên mật khẩu bên phải — chữ nhỏ, không tranh với nút Đăng nhập. */
.options[b-y910npuyo0] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: -4px;
}

.options[b-y910npuyo0]  .label {
  color: var(--tx2);
  font-size: var(--fs-sm);
  font-weight: 400;
}

.options[b-y910npuyo0]  input {
  margin-top: 1px;
}

.forgotLink[b-y910npuyo0] {
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
}

.forgotLink:hover[b-y910npuyo0] {
  text-decoration: underline;
}

.forgotHelp[b-y910npuyo0] {
  margin: -6px 0 0;
  color: var(--tx3);
  font-size: var(--fs-sm);
  animation: settle-b-y910npuyo0 var(--dur-2) var(--ease-out);
}

@keyframes settle-b-y910npuyo0 {
  from {
    opacity: 0;
    transform: translateY(calc(-4px * var(--travel)));
  }
}
/* /Pages/ModulePage.razor.rz.scp.css */
.tiles[b-i273zv034i] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.tile[b-i273zv034i] {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--bd);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--tx);
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: border-color var(--dur-1) var(--ease), translate var(--dur-1) var(--ease);
}

/* Nhích bằng translate, không bằng transform (TL3 §5.2 Chuyển động); vài px nên giữ cả khi giảm chuyển động. */
.tile:hover[b-i273zv034i] {
  border-color: var(--brand);
  translate: 0 -2px;
}

.tile:focus-visible[b-i273zv034i] {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.tileIcon[b-i273zv034i] {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: var(--brand-lt);
  color: var(--brand);
}

.tileName[b-i273zv034i] {
  flex: 1;
  min-width: 0;
  font-weight: 600;
}

.tile[b-i273zv034i]  .tileArrow {
  flex: none;
  color: var(--tx3);
}
/* /Shared/Brand/AuthCard.razor.rz.scp.css */
/* Khung màn đăng nhập và đổi mật khẩu: nền thương hiệu, thẻ logo, tiêu đề và biểu mẫu xếp dọc. Nền chuyển sắc kết thúc ở màu
   logo (--seal) ở cả hai giao diện — giao diện tối --brand là màu nhấn sáng, kết thúc ở đó thì góc nền chói. */
.page[b-31fi0mdsu2] {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 100%;
  padding: 32px 20px;
  overflow: clip;
  background:
    radial-gradient(
      60rem 48rem at 14% 16%,
      color-mix(in srgb, var(--brand-veil) 18%, transparent),
      transparent 62%
    ),
    radial-gradient(
      48rem 44rem at 88% 86%,
      color-mix(in srgb, var(--brand-veil) 11%, transparent),
      transparent 60%
    ),
    linear-gradient(135deg, var(--brand-deep) 0%, var(--brand-mid) 52%, var(--seal) 100%);
}

/* Hoa văn giỏ hàng K-Market (brand/login-pattern.svg): các món vẽ nét đơn như trong con dấu và tranh trên biển hiệu cửa hàng,
   trôi rất chậm lên chéo trái. Lặp liền mạch: mỗi vòng dịch đúng một ô (--tile) theo cả hai trục nên khung cuối trùng khung đầu —
   vệt sọc cũ giật lúc quay vòng vì dịch 26rem trong khi sọc 115° lặp lại theo chiều ngang sau khoảng 28,7rem. Cỡ ô, phần lớp thừa
   ra và quãng dịch cùng tính từ --tile; lớp rộng hơn khung một ô ở phía phải và phía dưới để luôn phủ kín. Chỉ đổi transform nên
   chạy trên GPU (keyframes dùng biến vẫn vậy — đo 06/10/2026). Ô 480px nhân tỉ lệ màn 1,25 / 1,5 / 1,75 vẫn ra số điểm ảnh nguyên,
   các ô ghép không lệch nửa điểm ảnh. */
.page[b-31fi0mdsu2]::before {
  --tile: 480px;
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0 calc(-1 * var(--tile)) calc(-1 * var(--tile)) 0;
  background: url('brand/login-pattern.svg') 0 0 / var(--tile) var(--tile);
  opacity: 0.09;
  animation: drift-b-31fi0mdsu2 120s linear infinite;
  pointer-events: none;
}

.card[b-31fi0mdsu2] {
  position: relative;
  z-index: 1;
  width: min(430px, 100%);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-xl);
  transition:
    translate var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease);
}

/* Rê chuột vào khung: khung nhích lên như đang được chọn. Không gắn theo tiêu điểm — ô tên đăng nhập nhận tiêu điểm ngay khi mở
   trang, khung sẽ nhích sẵn và mất hiệu ứng. Chỉ khi có chuột (chạm thì không có trạng thái rê). Không nhân --travel: là phản hồi
   vài px cho chính cú rê chuột, như nút chính nhích 1px — giảm chuyển động bỏ các chuyển động lớn (trượt khối, vào màn), không bỏ
   phản hồi này. Nhích bằng translate: khung vừa chạy hiệu ứng vào màn (.rise đổi transform), rê chuột mà đổi transform thì Chrome
   chạy hiệu ứng rê chuột trên luồng chính thay vì GPU (đo 03/10/2026; TL3 §5.2 Chuyển động). */
@media (hover: hover) and (pointer: fine) {
  .card:hover[b-31fi0mdsu2] {
    box-shadow: var(--shadow-xl-hi);
    translate: 0 -4px;
  }
}

/*
 * Logo in ra hai màu — xanh thương hiệu với nét trắng bên trong — nên phải nằm trên nền sáng ở cả
 * hai chế độ, không đổi màu theo theme được. Vạch xanh trên cùng giữ phần nhận diện cho khối này.
 */
.header[b-31fi0mdsu2] {
  display: grid;
  justify-items: center;
  padding: 32px 24px 28px;
  border-top: 4px solid var(--brand);
  border-bottom: 1px solid var(--bd);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--brand) 26%, var(--logo-plate)) 0%,
    var(--logo-plate) 64%
  );
}

.body[b-31fi0mdsu2] {
  padding: 30px 30px 32px;
}

.welcome[b-31fi0mdsu2] {
  margin: 0 0 6px;
  color: var(--brand);
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
}

.lead[b-31fi0mdsu2] {
  margin: 0 0 26px;
  color: var(--tx3);
  text-align: center;
}

[b-31fi0mdsu2] .form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

[b-31fi0mdsu2] .submit {
  margin-top: 4px;
}

.languages[b-31fi0mdsu2] {
  margin: 20px 0 0;
}

.footer[b-31fi0mdsu2] {
  margin: 12px 0 0;
  color: var(--tx3);
  font-size: var(--fs-xs);
  text-align: center;
}

@keyframes drift-b-31fi0mdsu2 {
  to {
    transform: translate3d(calc(-1 * var(--tile)), calc(-1 * var(--tile)), 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page[b-31fi0mdsu2]::before {
    animation: none;
  }
}
/* /Shared/Brand/KMarketLogo.razor.rz.scp.css */
.logo[b-50n49nny2v] {
  display: flex;
  flex: none;
  align-items: center;
}

.logo img[b-50n49nny2v] {
  display: block;
  flex: none;
}
/* /Shared/Ui/ActionMenu.razor.rz.scp.css */
.actionMenu[b-46e9p478gm] {
  display: inline-flex;
}

.trigger[b-46e9p478gm] {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--tx2);
  cursor: pointer;
  transition:
    background var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease);
}

/* Nút mở mang nội dung riêng (menu tài khoản): rộng theo nội dung, các phần xếp một hàng. */
.trigger.custom[b-46e9p478gm] {
  display: inline-flex;
  gap: 8px;
  width: auto;
  padding: 0 6px;
  font: inherit;
}

.trigger:hover[b-46e9p478gm],
.trigger[aria-expanded='true'][b-46e9p478gm] {
  background: var(--soft);
  color: var(--tx);
}

/* Đứng trong một thanh thao tác cạnh nút phụ cỡ nhỏ (32px): cùng viền và nền. */
.outlined .trigger[b-46e9p478gm] {
  border: 1px solid var(--bd2);
  background: var(--card);
}

.outlined .trigger:hover[b-46e9p478gm],
.outlined .trigger[aria-expanded='true'][b-46e9p478gm] {
  border-color: var(--brand);
  color: var(--brand);
}

.trigger:focus-visible[b-46e9p478gm] {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

/* Bấm ra ngoài là đóng: lớp trong suốt phủ màn hình ngay dưới menu. */
.backdrop[b-46e9p478gm] {
  position: fixed;
  inset: 0;
  z-index: 59;
}

/* Rộng theo mục dài nhất (từ 160px), mở bằng dropIn chung của mọi pop-up (base.css). Tự đặt màu chữ của card: menu nằm
   trong nơi đặt nó (thanh trên cùng chữ trắng) nên không được thừa hưởng màu từ đó. */
.menu[b-46e9p478gm] {
  position: fixed;
  z-index: 60;
  display: flex;
  flex-direction: column;
  min-width: 160px;
  max-width: calc(100vw - 16px);
  overflow-y: auto;
  border: 1px solid var(--bd2);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--tx);
  box-shadow: var(--shadow-lg);
  overscroll-behavior: contain;
  animation: dropIn var(--dur-2) var(--ease-out);
}

.header[b-46e9p478gm] {
  padding: 12px 14px;
  border-bottom: 1px solid var(--bd);
}

.items[b-46e9p478gm] {
  display: flex;
  flex-direction: column;
  padding: 4px;
}
/* /Shared/Ui/ActionMenuItem.razor.rz.scp.css */
.item[b-8nv0zbq89i] {
  display: flex;
  align-items: center;
  /* Reset của MudBlazor canh giữa nội dung mọi <button> (justify-content: center) — mục menu phải thẳng mép trái. */
  justify-content: flex-start;
  gap: 10px;
  min-height: var(--item-h);
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--tx);
  font: inherit;
  font-size: var(--fs-md);
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
}

.item:hover:not(:disabled)[b-8nv0zbq89i] {
  background: var(--soft);
}

.item:disabled[b-8nv0zbq89i] {
  color: var(--tx3);
  cursor: default;
}

/* Đi bằng phím mũi tên: nền nhạt thôi gần như không thấy trên card trắng, nên thêm viền thương hiệu như tiêu điểm ở mọi chỗ. */
.item:focus-visible[b-8nv0zbq89i] {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
  background: var(--soft);
}

.item[b-8nv0zbq89i]  svg {
  flex: none;
  color: var(--tx3);
}

.label[b-8nv0zbq89i] {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.item.danger[b-8nv0zbq89i],
.item.danger[b-8nv0zbq89i]  svg {
  color: var(--dan);
}

.checked[b-8nv0zbq89i] {
  color: var(--brand);
  font-weight: 600;
}

.check[b-8nv0zbq89i] {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 18px;
  height: 18px;
}

.check[b-8nv0zbq89i]  svg {
  color: var(--brand);
}
/* /Shared/Ui/Alert.razor.rz.scp.css */
.alert[b-bl3niq1sbx] {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-left-width: 4px;
  border-radius: var(--radius);
  color: var(--tx);
  animation: settle-b-bl3niq1sbx var(--dur-2) var(--ease-out);
}

.alert[b-bl3niq1sbx]  .toneIcon {
  margin-top: 1px;
}

.content[b-bl3niq1sbx] {
  min-width: 0;
}

.title[b-bl3niq1sbx] {
  margin: 0;
  font-weight: 600;
}

.body[b-bl3niq1sbx] {
  color: var(--tx);
  font-size: var(--fs-sm);
}

.title + .body[b-bl3niq1sbx] {
  margin-top: 4px;
}

.ok[b-bl3niq1sbx] {
  background: var(--ok-bg);
  border-color: var(--ok);
}

.ok .title[b-bl3niq1sbx],
.ok[b-bl3niq1sbx]  .toneIcon {
  color: var(--ok);
}

.info[b-bl3niq1sbx] {
  background: var(--info-bg);
  border-color: var(--info);
}

.info .title[b-bl3niq1sbx],
.info[b-bl3niq1sbx]  .toneIcon {
  color: var(--info);
}

.warn[b-bl3niq1sbx] {
  background: var(--warn-bg);
  border-color: var(--warn);
}

.warn .title[b-bl3niq1sbx],
.warn[b-bl3niq1sbx]  .toneIcon {
  color: var(--warn);
}

.dan[b-bl3niq1sbx] {
  background: var(--dan-bg);
  border-color: var(--dan);
}

.dan .title[b-bl3niq1sbx],
.dan[b-bl3niq1sbx]  .toneIcon {
  color: var(--dan);
}

@keyframes settle-b-bl3niq1sbx {
  from {
    opacity: 0;
    transform: translateY(calc(-4px * var(--travel)));
  }
}
/* /Shared/Ui/Badge.razor.rz.scp.css */
.badge[b-w2lc2m878z] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.withDot[b-w2lc2m878z] {
  padding-left: 7px;
  border-radius: var(--radius-pill);
}

.dot[b-w2lc2m878z] {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentcolor;
}

/* Nền trong suốt theo màu chữ thay vì --soft: --soft cũng là nền dòng bảng đang rê chuột và nút cây tổ chức, nhãn xám nằm trên đó
   mất hẳn nền. Trộn 7% màu chữ thì nhãn luôn đậm hơn nền bên dưới một bậc, ở cả sáng lẫn tối. */
.neutral[b-w2lc2m878z] {
  background: color-mix(in srgb, var(--tx) 7%, transparent);
  color: var(--tx2);
}

.brand[b-w2lc2m878z] {
  background: var(--brand-lt);
  color: var(--brand);
}

.ok[b-w2lc2m878z] {
  background: var(--ok-bg);
  color: var(--ok);
}

.info[b-w2lc2m878z] {
  background: var(--info-bg);
  color: var(--info);
}

.warn[b-w2lc2m878z] {
  background: var(--warn-bg);
  color: var(--warn);
}

.dan[b-w2lc2m878z] {
  background: var(--dan-bg);
  color: var(--dan);
}
/* /Shared/Ui/BadgeList.razor.rz.scp.css */
.badgeList[b-yu60xm0zw3] {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}
/* /Shared/Ui/Button.razor.rz.scp.css */
.button[b-45w8tunkx9] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease),
    box-shadow var(--dur-1) var(--ease),
    translate var(--dur-1) var(--ease);
}

.button:hover[b-45w8tunkx9] {
  text-decoration: none;
}

.button:disabled[b-45w8tunkx9] {
  opacity: 0.6;
  cursor: not-allowed;
}

.button:active:not(:disabled)[b-45w8tunkx9] {
  translate: none;
}

.sm[b-45w8tunkx9] {
  height: 32px;
  padding: 0 12px;
  gap: 6px;
  font-size: var(--fs-sm);
}

/* Cao bằng ô nhập (40px) để nút đứng cạnh ô trên cùng một đường. */
.md[b-45w8tunkx9] {
  height: 40px;
  padding: 0 16px;
  font-size: var(--fs-md);
}

.lg[b-45w8tunkx9] {
  height: 44px;
  padding: 0 22px;
  font-size: var(--fs-lg);
}

.block[b-45w8tunkx9] {
  width: 100%;
}

/* Nút đăng nhập đặt giọng điệu chung: nền màu thương hiệu, nổi lên khi di chuột trên quầng xanh nhạt. Nhích bằng translate,
   không bằng transform, như mọi phản hồi rê chuột (TL3 §5.2 Chuyển động); vài px nên giữ cả khi giảm chuyển động. */
.primary[b-45w8tunkx9] {
  background: var(--brand);
  color: var(--on-brand);
  box-shadow: var(--shadow-brand);
}

.primary:hover:not(:disabled)[b-45w8tunkx9] {
  background: var(--brand-dk);
  box-shadow: var(--shadow-brand-hi);
  translate: 0 -1px;
}

.primary:active:not(:disabled)[b-45w8tunkx9] {
  box-shadow: var(--shadow-brand);
}

.secondary[b-45w8tunkx9] {
  background: var(--card);
  border-color: var(--bd2);
  color: var(--tx);
}

.secondary:hover:not(:disabled)[b-45w8tunkx9] {
  border-color: var(--brand);
  color: var(--brand);
}

.danger[b-45w8tunkx9] {
  background: var(--dan-bg);
  border-color: var(--dan);
  color: var(--dan);
}

.danger:hover:not(:disabled)[b-45w8tunkx9] {
  background: var(--dan);
  color: var(--card);
}

.ghost[b-45w8tunkx9] {
  background: transparent;
  color: var(--tx2);
}

.ghost:hover:not(:disabled)[b-45w8tunkx9] {
  background: var(--soft);
  color: var(--tx);
}

.spinner[b-45w8tunkx9] {
  width: 14px;
  height: 14px;
  border: 2px solid currentcolor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin-b-45w8tunkx9 0.7s linear infinite;
}

@keyframes spin-b-45w8tunkx9 {
  to {
    transform: rotate(360deg);
  }
}
/* /Shared/Ui/Card.razor.rz.scp.css */
/* Card kiểu Metronic (TL3 §5.2): viền mảnh, bóng nhẹ, bo .42rem. */
.card[b-7i9bss98vn] {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--bd);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}

.header[b-7i9bss98vn] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--bd);
}

.heading[b-7i9bss98vn] {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.iconPlate[b-7i9bss98vn] {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius);
  background: var(--brand-lt);
  color: var(--brand);
}

.title[b-7i9bss98vn] {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 600;
}

.description[b-7i9bss98vn] {
  margin: 2px 0 0;
  color: var(--tx3);
  font-size: var(--fs-sm);
}

.actions[b-7i9bss98vn] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.body[b-7i9bss98vn] {
  padding: 20px;
}

.flush[b-7i9bss98vn] {
  padding: 0;
}

.footer[b-7i9bss98vn] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--bd);
  background: var(--soft);
}
/* /Shared/Ui/CheckField.razor.rz.scp.css */
.checkField[b-2kk3b1ejtk] {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.checkField input[b-2kk3b1ejtk] {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--brand);
  cursor: inherit;
}

.checkField input:focus-visible[b-2kk3b1ejtk] {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.text[b-2kk3b1ejtk] {
  display: flex;
  flex-direction: column;
}

/* Tên và nhãn ngắn (Tag) cách nhau như tên tài khoản kèm nhãn "Bạn" trong bảng; chỗ hẹp thì nhãn xuống dòng. */
.label[b-2kk3b1ejtk] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  color: var(--tx);
  font-weight: 500;
}

.hint[b-2kk3b1ejtk] {
  color: var(--tx3);
  font-size: var(--fs-sm);
}

.disabled[b-2kk3b1ejtk] {
  cursor: default;
}

.disabled .label[b-2kk3b1ejtk] {
  color: var(--tx3);
}
/* /Shared/Ui/ColumnPicker.razor.rz.scp.css */
/* Nút mở đứng cạnh các ô lọc: cao bằng ô nhập, dáng nút phụ có chữ. */
.picker[b-0ld2octwtk] {
  display: inline-flex;
}

.picker[b-0ld2octwtk]  .trigger {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--bd2);
  background: var(--card);
  color: var(--tx2);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
}

.picker[b-0ld2octwtk]  .trigger:hover,
.picker[b-0ld2octwtk]  .trigger[aria-expanded='true'] {
  background: var(--soft);
  color: var(--tx);
}
/* /Shared/Ui/ComboBox.razor.rz.scp.css */
.combo[b-16oy6ojyfg] {
  position: relative;
}

.comboText[b-16oy6ojyfg] {
  padding-right: 40px;
  text-overflow: ellipsis;
}

/* Nhãn đang chọn hiện thành chữ mờ khi mở ra để gõ tìm — vẫn đọc được, nên đậm hơn gợi ý thường. */
.open .comboText[b-16oy6ojyfg]::placeholder {
  color: var(--tx2);
}

.chevron[b-16oy6ojyfg] {
  position: absolute;
  top: 50%;
  right: 10px;
  display: grid;
  color: var(--tx2);
  pointer-events: none;
  transform: translateY(-50%);
  transition: transform var(--dur-1) var(--ease);
}

.open .chevron[b-16oy6ojyfg] {
  transform: translateY(-50%) rotate(180deg);
}

/* Vị trí, bề rộng và chiều cao do kkhrns.placeDropdown đặt theo ô nhập — xem interop.js. Mở bằng dropIn chung (base.css). */
.list[b-16oy6ojyfg] {
  position: fixed;
  z-index: 60;
  max-height: 280px;
  margin: 0;
  padding: 4px;
  overflow-y: auto;
  border: 1px solid var(--bd2);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-lg);
  list-style: none;
  overscroll-behavior: contain;
  animation: dropIn var(--dur-2) var(--ease-out);
}

.option[b-16oy6ojyfg] {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--item-h);
  padding: 6px 10px;
  border-radius: calc(var(--radius) - 2px);
  color: var(--tx);
  cursor: pointer;
}

.optionLabel[b-16oy6ojyfg] {
  flex: 1;
  min-width: 0;
}

.option.active[b-16oy6ojyfg] {
  background: var(--brand-lt);
}

.option.selected[b-16oy6ojyfg] {
  color: var(--brand);
  font-weight: 600;
}

.option[aria-disabled='true'][b-16oy6ojyfg] {
  color: var(--tx3);
  cursor: default;
}

.option[b-16oy6ojyfg]  .tick {
  flex: none;
  color: var(--brand);
}

.empty[b-16oy6ojyfg],
.more[b-16oy6ojyfg] {
  padding: 8px 10px;
  color: var(--tx3);
  font-size: var(--fs-sm);
}

.more[b-16oy6ojyfg] {
  border-top: 1px solid var(--bd);
  margin-top: 4px;
}
/* /Shared/Ui/ConfirmDialog.razor.rz.scp.css */
.message[b-ojv81u9q3x] {
  margin: 0;
  color: var(--tx2);
}
/* /Shared/Ui/DateInput.razor.rz.scp.css */
.dateBox[b-l4hglt9mhe] {
  position: relative;
}

/* Chừa chỗ cho nút lịch nằm trong ô. */
.dateBox[b-l4hglt9mhe]  .dateText,
.dateText[b-l4hglt9mhe] {
  padding-right: 44px;
  font-variant-numeric: tabular-nums;
}

.calendar[b-l4hglt9mhe] {
  position: absolute;
  top: 50%;
  right: 4px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: var(--tx2);
  cursor: pointer;
  transform: translateY(-50%);
  transition:
    background var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease);
}

.calendar:hover:not(:disabled)[b-l4hglt9mhe] {
  background: var(--brand-lt);
  color: var(--brand);
}

.calendar:focus-visible[b-l4hglt9mhe] {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

.calendar:disabled[b-l4hglt9mhe] {
  color: var(--tx3);
  cursor: default;
}

/* Ô date gốc chỉ để mở bảng chọn: nằm dưới nút lịch để bảng hiện đúng chỗ, không nhận chuột, không thấy. */
.picker[b-l4hglt9mhe] {
  position: absolute;
  right: 4px;
  bottom: 0;
  width: 32px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
/* /Shared/Ui/EmptyState.razor.rz.scp.css */
.empty[b-4qiiw9qmhu] {
  display: grid;
  justify-items: center;
  padding: 48px 24px;
  text-align: center;
}

.compact[b-4qiiw9qmhu] {
  padding: 28px 16px;
}

.iconRing[b-4qiiw9qmhu] {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--brand-lt);
  color: var(--brand);
  box-shadow: 0 0 0 8px var(--soft);
}

.compact .iconRing[b-4qiiw9qmhu] {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  box-shadow: 0 0 0 6px var(--soft);
}

.title[b-4qiiw9qmhu] {
  margin: 0;
  color: var(--tx);
  font-size: var(--fs-lg);
  font-weight: 600;
}

.description[b-4qiiw9qmhu] {
  max-width: 46ch;
  margin: 6px 0 0;
  color: var(--tx3);
}

.actions[b-4qiiw9qmhu] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}
/* /Shared/Ui/Field.razor.rz.scp.css */
.field[b-pd1up8sgvb] {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.label[b-pd1up8sgvb] {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--tx2);
}

/* Biểu mẫu đứng một mình (đăng nhập, hộp thoại ngắn): nhãn đậm màu thương hiệu. Không in hoa, không giãn chữ — chữ
   tiếng Việt nhiều dấu in hoa cỡ nhỏ khó đọc. */
.emphasis[b-pd1up8sgvb] {
  color: var(--brand);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.required[b-pd1up8sgvb] {
  margin-left: 2px;
  color: var(--dan);
}

.hint[b-pd1up8sgvb],
.error[b-pd1up8sgvb] {
  margin: 0;
  font-size: var(--fs-xs);
}

.hint[b-pd1up8sgvb] {
  color: var(--tx3);
}

.error[b-pd1up8sgvb] {
  color: var(--dan);
  animation: slip-b-pd1up8sgvb var(--dur-2) var(--ease-out);
}

[b-pd1up8sgvb] .control {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--bd2);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--tx);
  font: inherit;
  transition:
    border-color var(--dur-1) var(--ease),
    box-shadow var(--dur-1) var(--ease);
}

[b-pd1up8sgvb] .control::placeholder {
  color: var(--tx3);
}

[b-pd1up8sgvb] .textarea {
  height: auto;
  min-height: 84px;
  padding: 10px 12px;
  line-height: var(--lh-base);
  resize: vertical;
}

[b-pd1up8sgvb] .control:hover:not(:disabled, :focus) {
  border-color: var(--tx3);
}

[b-pd1up8sgvb] .control:focus {
  border-color: var(--brand);
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-lt);
}

[b-pd1up8sgvb] .control:disabled {
  background: var(--soft);
  color: var(--tx3);
}

[b-pd1up8sgvb] .invalid {
  border-color: var(--dan);
}

[b-pd1up8sgvb] .invalid:focus {
  border-color: var(--dan);
  box-shadow: 0 0 0 3px var(--dan-bg);
}

@keyframes slip-b-pd1up8sgvb {
  from {
    opacity: 0;
    transform: translateY(calc(-3px * var(--travel)));
  }
}
/* /Shared/Ui/FilterBar.razor.rz.scp.css */
/*
 * Ô chính giãn gấp đôi các bộ lọc; nút đứng sát ô cuối theo bề rộng của chính nó, không chiếm một cột lưới nên không
 * để khoảng trống lệch bên phải. Hết chỗ thì nút xuống dòng, các ô phía trên vẫn giãn đầy hàng. Khối bộ lọc phụ không tạo
 * hộp riêng (display: contents) để các ô của nó cùng dòng flex với ô chính.
 */
.filters[b-taroe89ic2] {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
}

.filters[b-taroe89ic2] >  .field,
.extra[b-taroe89ic2] >  .field {
  flex: 1 1 140px;
  min-width: 0;
}

.filters[b-taroe89ic2] >  .field:first-child {
  flex: 2 1 200px;
}

.extra[b-taroe89ic2] {
  display: contents;
}

.moreFilters[b-taroe89ic2] {
  display: none;
}

.filterActions[b-taroe89ic2] {
  display: flex;
  flex: none;
  gap: 8px;
}

/* Điện thoại: ô chính cả hàng, bộ lọc phụ thu vào nút cho tới khi người dùng mở. */
@media (width <= 767px) {
  .filters[b-taroe89ic2] >  .field,
  .filters[b-taroe89ic2] >  .field:first-child,
  .extra[b-taroe89ic2] >  .field {
    flex-basis: 100%;
  }

  .moreFilters[b-taroe89ic2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--bd2);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--tx2);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
  }

  .count[b-taroe89ic2] {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    background: var(--brand);
    color: var(--on-brand);
    font-size: var(--fs-xs);
    font-weight: 700;
  }

  .moreFilters:focus-visible[b-taroe89ic2] {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
  }

  .filters:not(.expanded) .extra[b-taroe89ic2] {
    display: none;
  }

  /* Mở ra thì các ô hiện dần, trượt nhẹ xuống như pop-up (dropIn, base.css) thay vì bật phắt ra. */
  .expanded .extra[b-taroe89ic2] >  .field {
    animation: dropIn var(--dur-2) var(--ease-out);
  }
}
/* /Shared/Ui/FormRow.razor.rz.scp.css */
.formRow[b-62pt23e82a] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

@media (width <= 520px) {
  .formRow[b-62pt23e82a] {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* /Shared/Ui/FormStack.razor.rz.scp.css */
.formStack[b-i4ooxoj1x0] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* /Shared/Ui/GridWarmUp.razor.rz.scp.css */
/* Bảng làm nóng không bao giờ hiện: trình duyệt bỏ qua bố cục và vẽ, chỉ phần mã .NET của bảng chạy (GridWarmUp.razor). */
.warmUp[b-eyke5l7jvm] {
  display: none;
}
/* /Shared/Ui/Icon.razor.rz.scp.css */
.icon[b-jre7al81pe] {
  display: inline-block;
  flex: none;
  vertical-align: middle;
}
/* /Shared/Ui/LanguageFlag.razor.rz.scp.css */
/* Khung 3:2 bằng chiều cao chữ; viền mảnh để phần trắng của cờ (Hàn, Mỹ) không lẫn vào nền menu sáng. */
.flag[b-vjylsmg2tr] {
  display: block;
  flex: none;
  width: 21px;
  height: 14px;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 0 0 1px var(--bd2);
}
/* /Shared/Ui/LanguagePicker.razor.rz.scp.css */
.languages[b-d5e8g4sgjt] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}

.language[b-d5e8g4sgjt] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--tx2);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}

.language:hover:not(:disabled)[b-d5e8g4sgjt] {
  background: var(--soft);
  color: var(--tx);
}

.language:focus-visible[b-d5e8g4sgjt] {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

.language[aria-current='true'][b-d5e8g4sgjt] {
  color: var(--brand);
  font-weight: 600;
  cursor: default;
}

/* Điện thoại: hàng cờ và tên không đủ chỗ trong thẻ đăng nhập, xuống dòng thì lẻ một nút — thành các cột bằng nhau, cờ trên tên. */
@media (width <= 420px) {
  .languages[b-d5e8g4sgjt] {
    flex-wrap: nowrap;
  }

  .language[b-d5e8g4sgjt] {
    flex: 1 1 0;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 6px 4px;
  }
}
/* /Shared/Ui/ListPage.razor.rz.scp.css */
.listPage[b-noqmd5wnt4] {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.listPage[b-noqmd5wnt4]  .pageHeader {
  margin-bottom: 8px;
}

/* Báo lỗi tải đặt trong card không đệm (bảng) — cần khoảng cách như nội dung card. */
.listPage[b-noqmd5wnt4]  .loadError {
  padding: 16px 20px;
}
/* /Shared/Ui/Modal.razor.rz.scp.css */
.modal[b-6s57afupz0] {
  /* Reset `* { margin: 0 }` của MudBlazor xóa mặc định của trình duyệt vốn canh giữa <dialog> gốc
     mở bằng showModal() — trả lại để hộp nằm giữa khung nhìn. */
  margin: auto;
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--bd);
  /* Vạch màu thương hiệu phía trên, như thẻ đăng nhập: hộp thoại thuộc cùng một họ. */
  border-top: 3px solid var(--brand);
  border-radius: var(--radius-lg);
  background: var(--card);
  color: var(--tx);
  box-shadow: var(--shadow-xl);
}

.modal[open][b-6s57afupz0] {
  display: flex;
  flex-direction: column;
  /* Mở bằng một cú bấm nên nhanh hơn đổi màn: dịch chuyển xong trong 320ms, độ mờ xong trong 200ms. */
  animation:
    popMove-b-6s57afupz0 var(--dur-3) var(--ease-out),
    popFade-b-6s57afupz0 var(--dur-2) var(--ease);
}

/* Chỉ phủ tối, không làm mờ (backdrop-filter): đo 03/10/2026, lớp mờ 2px làm số khung hình lúc mở giảm còn một nửa mà mắt
   gần như không thấy khác (TL3 §5.2 Chuyển động). */
.modal[open][b-6s57afupz0]::backdrop {
  background: var(--backdrop);
  animation: fade-b-6s57afupz0 var(--dur-3) var(--ease);
}

/* Trình duyệt tự đóng hộp thoại đã sửa và interop.js mở lại ngay để hỏi bỏ thay đổi: hiện tại chỗ, không nháy. */
.modal[data-reopened][open][b-6s57afupz0],
.modal[data-reopened][open][b-6s57afupz0]::backdrop {
  animation: none;
}

.sm[b-6s57afupz0] {
  width: min(440px, calc(100vw - 32px));
}

.md[b-6s57afupz0] {
  width: min(560px, calc(100vw - 32px));
}

.lg[b-6s57afupz0] {
  width: min(760px, calc(100vw - 32px));
}

.danger[b-6s57afupz0] {
  border-top-color: var(--dan);
}

.header[b-6s57afupz0] {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--bd);
}

.iconPlate[b-6s57afupz0] {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-lt);
  color: var(--brand);
}

.danger .iconPlate[b-6s57afupz0] {
  background: var(--dan-bg);
  color: var(--dan);
}

.heading[b-6s57afupz0] {
  flex: 1;
  min-width: 0;
  align-self: center;
}

.title[b-6s57afupz0] {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 600;
}

.description[b-6s57afupz0] {
  margin: 2px 0 0;
  color: var(--tx3);
  font-size: var(--fs-sm);
}

.close[b-6s57afupz0] {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: -4px -6px 0 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--tx3);
  cursor: pointer;
  transition:
    background-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease);
}

.close:hover[b-6s57afupz0] {
  background: var(--soft);
  color: var(--tx);
}

.body[b-6s57afupz0] {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.footer[b-6s57afupz0] {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--bd);
  background: var(--soft);
}

/* Hỏi bỏ thay đổi ngay tại chân hộp thoại, không mở thêm hộp thoại chồng lên. */
.discard[b-6s57afupz0] {
  align-items: center;
  background: var(--warn-bg);
  animation: settle-b-6s57afupz0 var(--dur-2) var(--ease-out);
}

.discardText[b-6s57afupz0] {
  flex: 1 1 200px;
  margin: 0;
  color: var(--warn);
  font-weight: 600;
}

@keyframes popMove-b-6s57afupz0 {
  from {
    transform: translateY(calc(10px * var(--travel))) scale(calc(1 - 0.02 * var(--travel)));
  }
}

@keyframes popFade-b-6s57afupz0 {
  from {
    opacity: 0;
  }
}

@keyframes settle-b-6s57afupz0 {
  from {
    opacity: 0;
    transform: translateY(calc(4px * var(--travel)));
  }
}

@keyframes fade-b-6s57afupz0 {
  from {
    opacity: 0;
  }
}

@media (width <= 600px) {
  .footer[b-6s57afupz0] {
    flex-direction: column-reverse;
  }

  .footer[b-6s57afupz0] >  * {
    width: 100%;
  }

  /* Câu hỏi đứng trên, rồi tới hai nút. */
  .discard[b-6s57afupz0] {
    flex-direction: column;
  }
}

/* Biểu mẫu bao nội dung và chân hộp thoại nhưng không tạo khối riêng — bố cục giữ như hộp thoại không có biểu mẫu. */
.form[b-6s57afupz0] {
  display: contents;
}
/* /Shared/Ui/PageHeader.razor.rz.scp.css */
.pageHeader[b-6adqyjs17a] {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 24px;
}

.text[b-6adqyjs17a] {
  min-width: 0;
  max-width: 72ch;
}

/* Tên phân hệ phía trên tiêu đề: chữ thường đậm màu thương hiệu, cùng kiểu nhãn các ô của biểu mẫu đăng nhập. */
.eyebrow[b-6adqyjs17a] {
  margin: 0 0 6px;
  color: var(--brand);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.titleRow[b-6adqyjs17a] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.title[b-6adqyjs17a] {
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.description[b-6adqyjs17a] {
  margin: 6px 0 0;
  color: var(--tx3);
}

.actions[b-6adqyjs17a] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (width <= 600px) {
  .title[b-6adqyjs17a] {
    font-size: var(--fs-xl);
  }

  .actions[b-6adqyjs17a] {
    width: 100%;
  }
}
/* /Shared/Ui/PageLoader.razor.rz.scp.css */
.loader[b-48684lzgb4] {
  display: grid;
  gap: 14px;
  place-items: center;
  align-content: center;
  min-height: 240px;
  padding: 48px 24px;
  /* Lần tải xong nhanh không bao giờ được nháy chỉ báo chờ, nên chỉ hiện sau 250ms. */
  animation: appear-b-48684lzgb4 var(--dur-3) var(--ease) 250ms backwards;
}

.full[b-48684lzgb4] {
  min-height: 60vh;
}

.label[b-48684lzgb4] {
  margin: 0;
  color: var(--tx3);
  font-size: var(--fs-sm);
}

@keyframes appear-b-48684lzgb4 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
/* /Shared/Ui/ProblemAlert.razor.rz.scp.css */
/* Reset toàn cục `* { padding: 0 }` của MudBlazor xóa lề đầu dòng của danh sách — trả lại ở đây để
   danh sách lỗi trường không đè lên dấu đầu dòng của chính nó. */
ul[b-3c0sucej03] {
  margin: 4px 0 0;
  padding-left: 1.2em;
}

li + li[b-3c0sucej03] {
  margin-top: 2px;
}
/* /Shared/Ui/SectionTabs.razor.rz.scp.css */
/*
 * Đo bề rộng của chính khung chứ không theo màn: khung có thể nằm cạnh thanh bên hoặc trong vùng hẹp hơn màn. Mặc định là
 * bố cục hẹp (ô chọn ở trên, nội dung bên dưới); khung đủ rộng thì danh mục dọc bên trái.
 */
.sectionTabs[b-m8icq3iov3] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  container-type: inline-size;
}

.layout[b-m8icq3iov3] {
  display: grid;
  gap: 16px;
}

.nav[b-m8icq3iov3] {
  display: none;
}

@container (width >= 720px) {
  .picker[b-m8icq3iov3] {
    display: none;
  }

  .layout[b-m8icq3iov3] {
    grid-template-columns: 256px minmax(0, 1fr);
    align-items: start;
    gap: 24px;
  }

  /* Bám theo khi cuộn, ngay dưới thanh trên cùng; dài hơn khung nhìn thì cuộn riêng trong danh mục. */
  .nav[b-m8icq3iov3] {
    position: sticky;
    top: calc(var(--topbar-h) + 16px);
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: calc(100dvh - var(--topbar-h) - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}

/* Không co lại khi danh mục có giới hạn chiều cao: tên dài xuống dòng thì mục cao theo, không đè lên mục dưới. */
.tab[b-m8icq3iov3] {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: var(--item-h);
  padding: 7px 12px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--tx2);
  font: inherit;
  font-weight: 500;
  text-align: start;
  cursor: pointer;
  transition:
    background-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease);
}

.tab:hover:not(:disabled)[b-m8icq3iov3] {
  background: var(--soft);
  color: var(--tx);
}

.tab:focus-visible[b-m8icq3iov3] {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

.tab:disabled[b-m8icq3iov3] {
  color: var(--tx3);
  cursor: not-allowed;
}

.selected[b-m8icq3iov3],
.selected:hover:not(:disabled)[b-m8icq3iov3] {
  background: var(--brand-lt);
  color: var(--brand);
  font-weight: 600;
}

.label[b-m8icq3iov3] {
  min-width: 0;
}

.title[b-m8icq3iov3] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-size: var(--fs-lg);
  font-weight: 600;
}
/* /Shared/Ui/SectionToolbar.razor.rz.scp.css */
.sectionToolbar[b-5xjqsrm8er] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.note[b-5xjqsrm8er] {
  flex: 1 1 320px;
  margin: 0;
  color: var(--tx3);
  font-size: var(--fs-sm);
}

.actions[b-5xjqsrm8er] {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
/* /Shared/Ui/SelectInput.razor.rz.scp.css */
.select[b-w988cby2of] {
  position: relative;
  display: block;
}

/* Bỏ mũi tên riêng của từng trình duyệt, dùng mũi tên chung với ComboBox. */
.select select[b-w988cby2of] {
  padding-right: 40px;
  appearance: none;
  text-overflow: ellipsis;
  cursor: pointer;
}

.select select:disabled[b-w988cby2of] {
  cursor: default;
}

.chevron[b-w988cby2of] {
  position: absolute;
  top: 50%;
  right: 10px;
  display: grid;
  color: var(--tx2);
  pointer-events: none;
  transform: translateY(-50%);
  transition: transform var(--dur-1) var(--ease);
}

.select select:disabled + .chevron[b-w988cby2of] {
  color: var(--tx3);
}

/*
 * Danh sách thả xuống cùng họ với menu và ComboBox: viền, bóng, mục cao --item-h, mục đang chọn màu thương hiệu kèm dấu tích ở cuối,
 * mở bằng dropIn chung (base.css). Chỉ khi có chuột: màn cảm ứng giữ bảng chọn gốc của máy. Trình duyệt chưa hỗ trợ base-select
 * (Firefox, Safari) bỏ qua cả khối và dùng danh sách gốc — phím, chuột, trình đọc màn hình vẫn là của ô chọn gốc ở mọi trường hợp.
 */
@media (pointer: fine) {
  @supports (appearance: base-select) {
    .select select[b-w988cby2of],
    .select select[b-w988cby2of]::picker(select) {
      appearance: base-select;
    }

    /* Ô chọn base-select là một nút: canh chữ giữa chiều cao như ô nhập, không theo dòng đầu. Chữ dài giữ một dòng, cắt ở mép nội
       dung — trước chỗ của mũi tên — chứ không xuống dòng trong ô cao 40px (như "Theo thỏa thuận hoặc hợp đồng gốc", đo 06/10/2026);
       text-overflow không áp được lên nút này. Danh sách thả xuống vẫn xuống dòng bình thường, mở ra thấy đủ chữ. */
    .select select[b-w988cby2of] {
      display: flex;
      align-items: center;
      overflow: clip;
      overflow-clip-margin: content-box;
      white-space: nowrap;
    }

    .select select[b-w988cby2of]::picker-icon {
      display: none;
    }

    .select:has(select:open) .chevron[b-w988cby2of] {
      transform: translateY(-50%) rotate(180deg);
    }

    .select select[b-w988cby2of]::picker(select) {
      margin-block: 4px;
      padding: 4px;
      border: 1px solid var(--bd2);
      border-radius: var(--radius);
      background: var(--card);
      color: var(--tx);
      white-space: normal;
      box-shadow: var(--shadow-lg);
      animation: dropIn var(--dur-2) var(--ease-out);
    }

    option[b-w988cby2of] {
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: var(--item-h);
      padding: 6px 10px;
      border-radius: calc(var(--radius) - 2px);
      cursor: pointer;
    }

    option:hover[b-w988cby2of],
    option:focus-visible[b-w988cby2of] {
      background: var(--brand-lt);
      outline: none;
    }

    option:checked[b-w988cby2of] {
      color: var(--brand);
      font-weight: 600;
    }

    option[b-w988cby2of]::checkmark {
      order: 1;
      margin-left: auto;
      color: var(--brand);
    }

    option:disabled[b-w988cby2of] {
      color: var(--tx3);
      cursor: default;
    }
  }
}
/* /Shared/Ui/Skeleton.razor.rz.scp.css */
/*
 * Vệt sáng là một lớp riêng trượt ngang, thay vì animate background-position: dịch chuyển một lớp
 * do GPU làm, còn dịch nền thì vẽ lại mọi ô giữ chỗ ở mọi khung hình — thấy rõ khi bảng hiện hai
 * mươi dòng như vậy.
 */
.skeleton[b-48a2fhv3bm] {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--skeleton);
}

.skeleton[b-48a2fhv3bm]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--skeleton-hi), transparent);
  transform: translateX(-100%);
  animation: sweep-b-48a2fhv3bm 1.4s var(--ease) infinite;
}

/* Ô giữ chỗ cho chữ nằm trên lưới dòng chữ, không lấp kín cả hàng. */
.text[b-48a2fhv3bm] {
  height: 0.72em;
  margin: 0.24em 0;
  border-radius: var(--radius-sm);
}

.block[b-48a2fhv3bm] {
  border-radius: var(--radius);
}

.circle[b-48a2fhv3bm] {
  border-radius: 50%;
}

@keyframes sweep-b-48a2fhv3bm {
  to {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton[b-48a2fhv3bm]::after {
    animation: none;
    display: none;
  }
}
/* /Shared/Ui/StatusPage.razor.rz.scp.css */
.status[b-lvxikufquf] {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(460px, 100%);
  margin: 10vh auto 0;
  padding: 36px 30px 28px;
  border: 1px solid var(--bd);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow);
  text-align: center;
}

.iconRing[b-lvxikufquf] {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--brand-lt);
  color: var(--brand);
}

.title[b-lvxikufquf] {
  margin: 0 0 8px;
  color: var(--tx);
  font-size: var(--fs-xl);
  font-weight: 700;
}

.message[b-lvxikufquf] {
  margin: 0;
  color: var(--tx2);
}

.actions[b-lvxikufquf] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}

.code[b-lvxikufquf] {
  margin: 20px 0 0;
  color: var(--tx3);
  font-size: var(--fs-sm);
}
/* /Shared/Ui/Tabs.razor.rz.scp.css */
.tabs[b-7py9fk509p] {
  display: flex;
  flex-direction: column;
}

/*
 * Cuộn ngang khi màn hẹp không đủ chỗ (phím mũi tên cũng đưa tab vào tầm nhìn), không vẽ thanh cuộn. Đường kẻ đáy
 * dùng bóng đổ trong và vạch gạch chân đặt trong khung: thò ra ngoài dù 1px là trình duyệt vẽ thanh cuộn dọc.
 */
.list[b-7py9fk509p] {
  display: flex;
  gap: 2px;
  overflow: auto hidden;
  box-shadow: inset 0 -1px 0 var(--bd);
  scrollbar-width: none;
}

.list[b-7py9fk509p]::-webkit-scrollbar {
  display: none;
}

.tab[b-7py9fk509p] {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  background: transparent;
  color: var(--tx2);
  font: inherit;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease);
}

.tab[b-7py9fk509p]::after {
  content: '';
  position: absolute;
  right: 10px;
  bottom: 0;
  left: 10px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--brand);
  transform: scaleX(0);
  transition: transform var(--dur-2) var(--ease-out);
}

.tab:hover:not(:disabled)[b-7py9fk509p] {
  background: var(--soft);
  color: var(--tx);
}

.tab:disabled[b-7py9fk509p] {
  color: var(--tx3);
  cursor: not-allowed;
}

.selected[b-7py9fk509p],
.selected:hover:not(:disabled)[b-7py9fk509p] {
  color: var(--brand);
}

.selected[b-7py9fk509p]::after {
  transform: scaleX(1);
}

.panel[b-7py9fk509p] {
  padding-top: 20px;
  animation: settle-b-7py9fk509p var(--dur-2) var(--ease-out);
}

@keyframes settle-b-7py9fk509p {
  from {
    opacity: 0;
    transform: translateY(calc(4px * var(--travel)));
  }
}
/* /Shared/Ui/TextInput.razor.rz.scp.css */
/* Nút hiện/ẩn nằm trong ô mật khẩu, bên phải; chừa chỗ để chữ không chạy dưới nút. */
.reveal[b-7zo5rzakh7] {
  position: relative;
  display: block;
}

.reveal[b-7zo5rzakh7]  .control {
  padding-right: 44px;
}

.revealButton[b-7zo5rzakh7] {
  position: absolute;
  top: 50%;
  right: 4px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--tx3);
  cursor: pointer;
  transform: translateY(-50%);
}

.revealButton:hover[b-7zo5rzakh7] {
  color: var(--tx);
}

.revealButton:focus-visible[b-7zo5rzakh7] {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}
/* /Shared/Ui/ToastHost.razor.rz.scp.css */
/* Góc dưới bên phải, trên mọi nội dung trang nhưng dưới hộp thoại (hộp thoại nằm ở lớp trên cùng của trình duyệt). Khung không
   nhận chuột để không chắn nút bên dưới; chỉ từng thông báo nhận. */
.toasts[b-0cc70jcbyu] {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  display: grid;
  gap: 8px;
  width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}

.toast[b-0cc70jcbyu] {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 8px 10px 14px;
  border: 1px solid var(--bd2);
  border-left: 4px solid var(--ok);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--tx);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  /* Vào như đáp lại một cú bấm (--dur-2), chỉ dịch chuyển và độ mờ. */
  animation: toastIn-b-0cc70jcbyu var(--dur-2) var(--ease-out);
}

/* Tự ẩn thì mờ đi ngắn (Toaster.LeaveDuration); bấm đóng thì mất ngay. */
.leaving[b-0cc70jcbyu] {
  animation: toastOut-b-0cc70jcbyu 160ms var(--ease) forwards;
}

.toast[b-0cc70jcbyu]  .toneIcon {
  flex: none;
  margin-top: 2px;
  color: var(--ok);
}

.info[b-0cc70jcbyu] {
  border-left-color: var(--info);
}

.info[b-0cc70jcbyu]  .toneIcon {
  color: var(--info);
}

.warn[b-0cc70jcbyu] {
  border-left-color: var(--warn);
}

.warn[b-0cc70jcbyu]  .toneIcon {
  color: var(--warn);
}

.dan[b-0cc70jcbyu] {
  border-left-color: var(--dan);
}

.dan[b-0cc70jcbyu]  .toneIcon {
  color: var(--dan);
}

.message[b-0cc70jcbyu] {
  flex: 1;
  min-width: 0;
  margin: 2px 0 0;
  overflow-wrap: anywhere;
}

.close[b-0cc70jcbyu] {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--tx3);
  cursor: pointer;
  transition:
    background-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease);
}

.close:hover[b-0cc70jcbyu] {
  background: var(--soft);
  color: var(--tx);
}

@keyframes toastIn-b-0cc70jcbyu {
  from {
    opacity: 0;
    transform: translateY(calc(8px * var(--travel)));
  }
}

@keyframes toastOut-b-0cc70jcbyu {
  to {
    opacity: 0;
    transform: translateY(calc(4px * var(--travel)));
  }
}

/* Điện thoại: trải ngang màn, chừa vùng an toàn phía dưới. */
@media (width <= 600px) {
  .toasts[b-0cc70jcbyu] {
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    left: 16px;
    width: auto;
  }
}