/*
 * ==========================================================================================
 * PETPET UI - THÀNH PHẦN CHUNG
 * ==========================================================================================
 *
 * Nút, chip, ô nhập, ô chọn, hộp thoại, thông báo góc (kèm Hoàn tác), menu chuột phải, viền
 * chọn bằng phím, kính mờ. Mọi lớp mang tiền tố `.pp-`, mọi giá trị đi qua token của
 * `tokens.css` - tệp này KHÔNG có một mã màu, một cỡ chữ hay một thời lượng nào gõ tay.
 *
 * App dùng theo một trong hai cách, và cả hai cho ra cùng một cái nút:
 *   1. gắn lớp: `<button class="pp-btn pp-btn--chinh">Lưu</button>`
 *   2. họ nút riêng của app đọc cùng biến (`--pp-nut-*`, `--pp-chinh-*`...). Planogram làm
 *      cách này cho 160 chỗ đã có `.nut` / `.tool`, để không phải sửa hàng loạt JSX.
 *
 * Lớp trang trí riêng của app (AURA: pastel, neon, chữ bút lông) đặt ở CSS của app, SAU tệp
 * này, và không đụng vào hình khối / hiệu ứng của thành phần.
 */

/* ==========================================================================================
 * NÚT  .pp-btn  [+ --chinh | --nhe | --xoa (+ --dac)]  [+ --nho]  [+ --vuong]
 *
 * Trạng thái: rê, bấm (lún 2px, bệ tắt), khoá (`disabled` / `aria-disabled`), đang chạy
 * (`aria-busy="true"`: vòng xoay trước chữ, chữ vẫn đọc rõ), chọn (`aria-pressed="true"`: vàng).
 * ========================================================================================== */
.pp-btn {
  --pp-be-mau: var(--pp-nut-be);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pp-k-2);
  box-sizing: border-box;
  min-height: var(--pp-nut-cao);
  /* Chỗ của bệ: bệ là bóng (không chiếm chỗ), nên lề dưới giữ 2px cho nó. */
  margin: 0 0 var(--pp-be);
  padding: 0 var(--pp-nut-dem);
  font-family: inherit;
  font-size: var(--pp-nut-co);
  font-weight: var(--pp-nut-dam);
  line-height: var(--pp-dong-1);
  color: var(--pp-nut-chu);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  background: var(--pp-nut-nen);
  border: 1px solid var(--pp-nut-vien);
  border-radius: var(--pp-nut-bo);
  box-shadow:
    0 var(--pp-be) 0 var(--pp-be-mau),
    var(--pp-bong-1);
  transition:
    var(--pp-tr-bam),
    background-color var(--pp-nhip-1) var(--pp-em),
    border-color var(--pp-nhip-1) var(--pp-em),
    color var(--pp-nhip-1) var(--pp-em);
}
.pp-btn:hover:not(:disabled):not([aria-disabled='true']) {
  background: var(--pp-nut-re);
  border-color: var(--pp-nut-re-vien);
}
.pp-btn:active:not(:disabled):not([aria-disabled='true']) {
  background: var(--pp-nut-bam);
  transform: translateY(var(--pp-lun));
  /* `0 0 0 transparent` chứ không `none`: cùng cấu trúc bóng thì trượt được, bệ mờ dần đúng
     nhịp lún thay vì biến mất phựt. */
  box-shadow: 0 0 0 transparent;
}
.pp-btn:focus-visible {
  outline: var(--pp-vong-day) solid var(--pp-vong-phim);
  outline-offset: var(--pp-vong-cach);
}
.pp-btn:disabled,
.pp-btn[aria-disabled='true'] {
  cursor: default;
  opacity: var(--pp-mo-khoa);
  /* Bỏ bệ: nút khoá nằm bẹp xuống mặt giấy, không còn dáng bấm được. */
  box-shadow: none;
}
/* Đang chạy: khoá cú bấm nhưng KHÔNG mờ đi - chữ "Đang lưu..." phải đọc được. */
.pp-btn[aria-busy='true'] {
  cursor: progress;
  pointer-events: none;
}
.pp-btn[aria-busy='true']::before {
  content: '';
  flex: none;
  box-sizing: border-box;
  width: var(--pp-xoay-co);
  height: var(--pp-xoay-co);
  border: var(--pp-xoay-net) solid currentColor;
  border-right-color: transparent;
  border-radius: var(--pp-bo-tron);
  animation: pp-xoay var(--pp-xoay-nhip) linear infinite;
}
@keyframes pp-xoay {
  to {
    rotate: 1turn;
  }
}
/* Chọn (nút bật / tắt): vàng - vàng ở PETPET nghĩa là "đang chọn / đang làm". */
.pp-btn[aria-pressed='true'] {
  --pp-be-mau: var(--pp-chinh-be);
  color: var(--pp-chinh-chu);
  background: var(--pp-chinh-nen);
  border-color: var(--pp-chinh-vien);
}

/* ---- chính (vàng): MỘT cho mỗi vùng ---- */
.pp-btn--chinh {
  --pp-be-mau: var(--pp-chinh-be);
  color: var(--pp-chinh-chu);
  background: var(--pp-chinh-nen);
  border-color: var(--pp-chinh-vien);
}
.pp-btn--chinh:hover:not(:disabled):not([aria-disabled='true']),
.pp-btn[aria-pressed='true']:hover:not(:disabled):not([aria-disabled='true']) {
  background: var(--pp-chinh-re);
  border-color: var(--pp-chinh-be);
}
.pp-btn--chinh:active:not(:disabled):not([aria-disabled='true']),
.pp-btn[aria-pressed='true']:active:not(:disabled):not([aria-disabled='true']) {
  background: var(--pp-chinh-bam);
  border-color: var(--pp-chinh-bam);
}

/* ---- nhẹ: không nền, không viền, không bệ; rê / bấm tím nhạt, bấm thì CO chứ không lún ---- */
.pp-btn--nhe {
  margin-bottom: 0;
  color: var(--pp-nhe-chu);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.pp-btn--nhe:hover:not(:disabled):not([aria-disabled='true']) {
  color: var(--pp-nhe-chu-re);
  background: var(--pp-nhe-re);
  border-color: transparent;
}
.pp-btn--nhe:active:not(:disabled):not([aria-disabled='true']) {
  color: var(--pp-nhe-chu-re);
  background: var(--pp-nhe-bam);
  box-shadow: none;
  transform: none;
  scale: var(--pp-co-nhan);
}

/* ---- xoá: chữ đỏ trên mặt giấy (giữa thanh công cụ, xoá là việc hiếm, không tranh mắt) ---- */
.pp-btn--xoa {
  color: var(--pp-xoa-chu);
  border-color: var(--pp-xoa-vien);
}
.pp-btn--xoa:hover:not(:disabled):not([aria-disabled='true']) {
  color: var(--pp-xoa-chu);
  background: var(--pp-xoa-re);
  border-color: var(--pp-xoa-re-vien);
}
.pp-btn--xoa:active:not(:disabled):not([aria-disabled='true']) {
  background: var(--pp-xoa-bam);
}
/* Bản ĐẶC: chỉ trong hộp xác nhận ("Xoá hẳn"). */
.pp-btn--xoa.pp-btn--dac {
  --pp-be-mau: var(--pp-xoa-dac-be);
  color: var(--pp-tren-do);
  background: var(--pp-xoa-dac);
  border-color: var(--pp-xoa-dac);
}
.pp-btn--xoa.pp-btn--dac:hover:not(:disabled):not([aria-disabled='true']) {
  color: var(--pp-tren-do);
  background: var(--pp-xoa-dac-re);
  border-color: var(--pp-xoa-dac-re);
}
.pp-btn--xoa.pp-btn--dac:active:not(:disabled):not([aria-disabled='true']) {
  background: var(--pp-xoa-dac-bam);
  border-color: var(--pp-xoa-dac-bam);
}

/* ---- cỡ nhỏ (trong bảng, trong thông báo) + nút vuông chỉ icon ---- */
.pp-btn--nho {
  min-height: var(--pp-nut-cao-nho);
  padding: 0 var(--pp-nut-dem-nho);
  font-size: var(--pp-nut-co-nho);
}
.pp-btn--vuong {
  width: var(--pp-nut-vuong);
  padding: 0;
}
.pp-btn--vuong.pp-btn--nho {
  width: var(--pp-nut-vuong-nho);
}

/* ==========================================================================================
 * CHIP  .pp-chip  [button/a thì bấm được]  [aria-pressed="true" | .pp-chip--on = đang lọc]
 *       [aria-disabled="true"] = chip lọc có số 0: mờ, không bấm (vẽ bằng span, không link)
 *       5 nghĩa (27/10, mỗi màu MỘT nghĩa): --ok thành công · --canh-bao · --do lỗi · --tim chờ duyệt · không đuôi =
 *       trung tính. Badge trạng thái LUÔN có chữ. `--sapo` (xanh dương) thôi là nghĩa: còn tên, vẽ như trung tính.
 * ========================================================================================== */
.pp-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--pp-k-1);
  box-sizing: border-box;
  min-height: var(--pp-chip-cao);
  padding: 0 var(--pp-chip-dem);
  font-family: inherit;
  font-size: var(--pp-chip-co);
  font-weight: var(--pp-dam-2);
  line-height: var(--pp-dong-1);
  color: var(--pp-chip-chu);
  white-space: nowrap;
  text-decoration: none;
  background: var(--pp-chip-nen);
  border: 1px solid var(--pp-chip-vien);
  border-radius: var(--pp-bo-tron);
  transition:
    var(--pp-tr-bam),
    background-color var(--pp-nhip-1) var(--pp-em),
    border-color var(--pp-nhip-1) var(--pp-em),
    color var(--pp-nhip-1) var(--pp-em);
}
button.pp-chip,
a.pp-chip {
  cursor: pointer;
}
/* Rê / bấm chip = TÍM nhạt (luật anh 08/09 cho thứ bấm được không bệ: tím = "máy đang nghe
   con trỏ", tắt khi buông tay; vàng để dành cho chip ĐANG LỌC). */
button.pp-chip:hover:not(:disabled),
a.pp-chip:hover {
  color: var(--pp-muc);
  background: var(--pp-tim-re);
  border-color: var(--pp-ke-dam);
}
button.pp-chip:active:not(:disabled),
a.pp-chip:active {
  color: var(--pp-muc);
  background: var(--pp-tim-bam);
  scale: var(--pp-co-nhan);
}
button.pp-chip:focus-visible,
a.pp-chip:focus-visible {
  outline: var(--pp-vong-day) solid var(--pp-vong-phim);
  outline-offset: var(--pp-vong-cach);
}
button.pp-chip:disabled,
.pp-chip[aria-disabled='true'] {
  cursor: default;
  opacity: var(--pp-mo-khoa);
}
.pp-chip[aria-pressed='true'],
.pp-chip--on {
  font-weight: var(--pp-dam-3);
  color: var(--pp-tren-vang);
  background: var(--pp-vang);
  border-color: var(--pp-vang);
}
button.pp-chip[aria-pressed='true']:hover:not(:disabled),
a.pp-chip.pp-chip--on:hover,
button.pp-chip.pp-chip--on:hover:not(:disabled) {
  color: var(--pp-tren-vang);
  background: var(--pp-vang-re);
  border-color: var(--pp-vang-dam);
}
/* Số đếm trong chip ("Lệch Sapo 67"): lùi một nấc; chip đang lọc thì theo màu chip. */
.pp-chip-so {
  font-weight: var(--pp-dam-2);
  color: var(--pp-chu-mo);
}
.pp-chip[aria-pressed='true'] .pp-chip-so,
.pp-chip--on .pp-chip-so {
  color: inherit;
}
.pp-chip--tim {
  color: var(--pp-tim-chu);
  background: var(--pp-tim-nen);
  border-color: transparent;
}
/* .pp-chip--sapo (27/10): xanh dương Sapo thôi là màu nghĩa; lớp không còn luật nào, chip vẽ như trung tính. */
.pp-chip--ok {
  color: var(--pp-ok);
  background: var(--pp-ok-nen);
  border-color: var(--pp-ok-ke);
}
.pp-chip--canh-bao {
  color: var(--pp-canh-bao-chu);
  background: var(--pp-canh-bao-nen);
  border-color: var(--pp-canh-bao-ke);
}
.pp-chip--do {
  color: var(--pp-do-chu);
  background: var(--pp-do-nen);
  border-color: var(--pp-do-ke);
}

/* ==========================================================================================
 * Ô NHẬP  .pp-input (input, textarea)   Ô CHỌN  .pp-select   [+ --nho]
 *
 * Viền là bậc 8 của thang (>= 3:1, WCAG 1.4.11) chứ không phải kẻ mảnh: ô nhập phải tìm
 * thấy được bằng mắt. Rê thì viền đậm lên, đang gõ thì viền + vòng tím.
 * ========================================================================================== */
.pp-input,
.pp-select {
  box-sizing: border-box;
  min-height: var(--pp-o-cao);
  padding: 0 var(--pp-o-dem);
  font-family: inherit;
  font-size: var(--pp-co-3);
  line-height: var(--pp-dong-1);
  color: var(--pp-o-chu);
  background-color: var(--pp-o-nen);
  border: 1px solid var(--pp-o-vien);
  border-radius: var(--pp-o-bo);
  transition:
    border-color var(--pp-nhip-1) var(--pp-em),
    box-shadow var(--pp-nhip-1) var(--pp-em);
}
textarea.pp-input {
  min-height: calc(var(--pp-o-cao) * 2);
  padding: var(--pp-k-2) var(--pp-o-dem);
  line-height: var(--pp-dong-3);
  resize: vertical;
}
.pp-input::placeholder {
  color: var(--pp-o-goi);
  opacity: 1;
}
.pp-input:hover:not(:disabled):not(:focus),
.pp-select:hover:not(:disabled):not(:focus) {
  border-color: var(--pp-chu-phu);
}
.pp-input:focus-visible,
.pp-select:focus-visible {
  border-color: var(--pp-vong-phim);
  outline: var(--pp-vong-day) solid var(--pp-vong-phim);
  outline-offset: 0;
}
.pp-input:disabled,
.pp-select:disabled {
  cursor: default;
  opacity: var(--pp-mo-khoa);
}
.pp-input[aria-invalid='true'],
.pp-select[aria-invalid='true'] {
  border-color: var(--pp-do);
}
.pp-select {
  appearance: none;
  padding-right: var(--pp-o-mui-cho);
  cursor: pointer;
  background-image: var(--pp-o-mui);
  background-repeat: no-repeat;
  background-position: right var(--pp-o-dem) center;
  background-size: var(--pp-o-mui-co);
}
.pp-input--nho,
.pp-select--nho {
  min-height: var(--pp-o-cao-nho);
  font-size: var(--pp-co-2);
}

/* ==========================================================================================
 * HỘP THOẠI  .pp-dialog (trên <dialog> hoặc <div role="dialog"> trong .pp-man)
 *            > .pp-dialog-dau (> .pp-dialog-ten) + .pp-dialog-than + .pp-dialog-chan
 *
 * Vào: mờ + nhích lên 8px + co 3%, 200ms (`@starting-style`, không cần JS). Ra: app tháo.
 * ========================================================================================== */
.pp-dialog {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: min(var(--pp-hop-rong), 100%);
  max-height: var(--pp-hop-cao);
  margin: auto;
  padding: 0;
  overflow: hidden;
  color: var(--pp-muc);
  background: var(--pp-hop-nen);
  border: 1px solid var(--pp-ke);
  border-radius: var(--pp-hop-bo);
  box-shadow: var(--pp-hop-bong);
  opacity: 1;
  transform: none;
  transition:
    opacity var(--pp-nhip-2) var(--pp-em),
    transform var(--pp-nhip-2) var(--pp-em-di);
}
/* `display: flex` ở trên sẽ làm <dialog> ĐÓNG cũng hiện ra - trả lại `none` khi chưa mở. */
dialog.pp-dialog:not([open]) {
  display: none;
}
@starting-style {
  .pp-dialog {
    opacity: 0;
    transform: var(--pp-vao);
  }
}
.pp-dialog::backdrop {
  background: var(--pp-man);
}
/* Màn cho hộp thoại không dùng <dialog> (React portal): phủ cả trang, đặt hộp ở giữa. */
.pp-man {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  place-items: center;
  padding: var(--pp-k-4);
  background: var(--pp-man);
  opacity: 1;
  /* Màn tối trước (150ms), hộp đáp xuống sau (200ms): cùng nhịp thì hai lớp dính làm một mảng. */
  transition: opacity var(--pp-nhip-1) var(--pp-em);
}
@starting-style {
  .pp-man {
    opacity: 0;
  }
}
.pp-dialog-dau {
  display: flex;
  align-items: center;
  gap: var(--pp-k-3);
  padding: var(--pp-k-4) var(--pp-hop-dem);
  color: var(--pp-hop-dau-chu);
  background: var(--pp-hop-dau-nen);
}
.pp-dialog-ten {
  flex: 1;
  margin: 0;
  font-size: var(--pp-co-5);
  font-weight: var(--pp-dam-3);
  line-height: var(--pp-dong-2);
}
.pp-dialog-than {
  min-height: 0;
  padding: 0 var(--pp-hop-dem) var(--pp-k-4);
  overflow-y: auto;
  font-size: var(--pp-co-3);
  line-height: var(--pp-dong-3);
}
.pp-dialog-chan {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--pp-k-2);
  padding: var(--pp-k-3) var(--pp-hop-dem);
  background: var(--pp-hop-chan);
  border-top: 1px solid var(--pp-ke);
}

/* ==========================================================================================
 * THÔNG BÁO GÓC  .pp-toasts (khung dưới phải) > .pp-toast [+ --loi]
 *                > .pp-toast-chu + .pp-toast-nut ("Hoàn tác") + .pp-toast-tat (×)
 *
 * Mặt than ở cả hai theme: đọc được trên mọi nền bên dưới (bảng dày, ảnh, kính). Vào: trồi
 * 12px + hiện, 200ms. Ra: app gắn `.pp-toast--ra` (hạ + mờ 150ms) rồi tháo sau `--pp-nhip-1`.
 * ========================================================================================== */
.pp-toasts {
  position: fixed;
  right: var(--pp-k-5);
  bottom: var(--pp-k-5);
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--pp-k-2);
  pointer-events: none;
}
.pp-toast {
  display: flex;
  align-items: center;
  gap: var(--pp-k-3);
  box-sizing: border-box;
  max-width: min(var(--pp-bao-rong), calc(100vw - var(--pp-k-6)));
  padding: var(--pp-k-2) var(--pp-k-2) var(--pp-k-2) var(--pp-k-4);
  font-size: var(--pp-co-3);
  line-height: var(--pp-dong-2);
  color: var(--pp-bao-chu);
  background: var(--pp-bao-nen);
  border-radius: var(--pp-bao-bo);
  box-shadow: var(--pp-bong-3);
  pointer-events: auto;
  opacity: 1;
  transform: none;
  transition:
    opacity var(--pp-nhip-2) var(--pp-em),
    transform var(--pp-nhip-2) var(--pp-em);
}
@starting-style {
  .pp-toast {
    opacity: 0;
    transform: var(--pp-vao-bao);
  }
}
.pp-toast--ra {
  opacity: 0;
  transform: var(--pp-vao-bao);
  transition-duration: var(--pp-nhip-1);
}
.pp-toast--loi {
  background: var(--pp-bao-loi);
}
.pp-toast-chu {
  flex: 1;
  min-width: 0;
}
.pp-toast-nut {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: var(--pp-nut-cao-nho);
  padding: 0 var(--pp-nut-dem-nho);
  font-family: inherit;
  font-size: var(--pp-nut-co);
  font-weight: var(--pp-nut-dam);
  line-height: var(--pp-dong-1);
  color: var(--pp-bao-nut);
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--pp-tren-thanh-bam);
  border-radius: var(--pp-nut-bo);
  transition:
    var(--pp-tr-bam),
    background-color var(--pp-nhip-1) var(--pp-em),
    border-color var(--pp-nhip-1) var(--pp-em);
}
.pp-toast-nut:hover {
  background: var(--pp-tren-thanh-re);
  border-color: var(--pp-bao-nut);
}
.pp-toast-nut:active {
  background: var(--pp-tren-thanh-bam);
  scale: var(--pp-co-nhan);
}
/* Nút × đóng: chỉ icon, chữ trắng lùi một nấc. */
.pp-toast-tat {
  border-color: transparent;
  color: var(--pp-bao-chu);
}
/* Trên mặt than, vòng tím không thấy được (1,4:1): vòng vàng. */
.pp-toast-nut:focus-visible {
  outline: var(--pp-vong-day) solid var(--pp-vang);
  outline-offset: var(--pp-vong-cach);
}

/* ==========================================================================================
 * MENU (chuột phải, ⋯)  .pp-menu[role=menu] > .pp-menu-muc[role=menuitem] [+ --xoa]
 *                       + .pp-menu-ke (kẻ ngăn) + .pp-menu-nhom (nhãn nhóm)
 *                       trong mục: .pp-menu-ico + chữ + .pp-menu-phim (phím tắt)
 *
 * App đặt `left`/`top` (vị trí con trỏ). Mục rê / phím mũi tên = tím nhạt, bấm = tím đậm hơn.
 * ========================================================================================== */
.pp-menu {
  position: fixed;
  z-index: 140;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-width: var(--pp-menu-rong);
  padding: var(--pp-k-1);
  color: var(--pp-muc);
  background: var(--pp-menu-nen);
  border: 1px solid var(--pp-menu-vien);
  border-radius: var(--pp-menu-bo);
  box-shadow: var(--pp-bong-3);
  transform-origin: top left;
  opacity: 1;
  transform: none;
  transition:
    opacity var(--pp-nhip-1) var(--pp-em),
    transform var(--pp-nhip-1) var(--pp-em-di);
}
@starting-style {
  .pp-menu {
    opacity: 0;
    transform: var(--pp-vao-menu);
  }
}
/* Menu là popover gốc của trình duyệt (`popover` + `popovertarget`): bỏ lề / vị trí mặc định của popover,
   và ẩn hẳn khi đóng (display: flex ở trên thắng luật ẩn của trình duyệt). */
.pp-menu[popover] {
  inset: auto;
  margin: 0;
}
.pp-menu[popover]:not(:popover-open) {
  display: none;
}
/* Đầu menu: tên người + vai (chữ thường, khác .pp-menu-nhom viết hoa). */
.pp-menu-dau {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--pp-k-2) var(--pp-nut-dem-nho);
}
.pp-menu-dau b {
  font-size: var(--pp-co-4);
  font-weight: var(--pp-dam-4);
  color: var(--pp-muc);
}
.pp-menu-dau span {
  font-size: var(--pp-co-2);
  color: var(--pp-chu-mo);
}
.pp-menu-muc {
  display: flex;
  align-items: center;
  gap: var(--pp-k-2);
  box-sizing: border-box;
  width: 100%;
  min-height: var(--pp-menu-muc-cao);
  padding: 0 var(--pp-nut-dem-nho);
  font-family: inherit;
  font-size: var(--pp-co-3);
  font-weight: var(--pp-dam-2);
  line-height: var(--pp-dong-1);
  color: var(--pp-muc);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: var(--pp-nut-bo);
  transition:
    var(--pp-tr-bam),
    background-color var(--pp-nhip-1) var(--pp-em),
    color var(--pp-nhip-1) var(--pp-em);
}
.pp-menu-muc:hover:not(:disabled),
.pp-menu-muc:focus-visible {
  background: var(--pp-tim-re);
  outline: none;
}
.pp-menu-muc:focus-visible {
  box-shadow: inset 0 0 0 var(--pp-vong-day) var(--pp-vong-phim);
}
.pp-menu-muc:active:not(:disabled) {
  background: var(--pp-tim-bam);
}
.pp-menu-muc:disabled,
.pp-menu-muc[aria-disabled='true'] {
  cursor: default;
  opacity: var(--pp-mo-khoa);
}
.pp-menu-muc[aria-current='page'] {
  font-weight: var(--pp-dam-4);
  background: var(--pp-the-lot);
}
.pp-menu-muc--xoa {
  color: var(--pp-do-chu);
}
.pp-menu-muc--xoa:hover:not(:disabled),
.pp-menu-muc--xoa:focus-visible {
  color: var(--pp-do-chu);
  background: var(--pp-do-nen);
}
.pp-menu-ico {
  flex: none;
  color: var(--pp-chu-phu);
}
.pp-menu-muc--xoa .pp-menu-ico {
  color: inherit;
}
.pp-menu-phim {
  margin-left: auto;
  padding-left: var(--pp-k-4);
  font-size: var(--pp-co-2);
  color: var(--pp-chu-mo);
}
.pp-menu-ke {
  height: 1px;
  margin: var(--pp-k-1) var(--pp-k-2);
  background: var(--pp-ke);
  border: 0;
}
.pp-menu-nhom {
  padding: var(--pp-k-2) var(--pp-nut-dem-nho) var(--pp-k-1);
  font-size: var(--pp-co-2);
  font-weight: var(--pp-dam-3);
  letter-spacing: var(--pp-gian-hoa);
  color: var(--pp-chu-mo);
  text-transform: uppercase;
}

/* ==========================================================================================
 * VIỀN CHỌN BẰNG PHÍM (tím) cho thứ không phải thành phần ở trên  .pp-vong
 * KÍNH MỜ .5 trên thẻ  .pp-kinh  (không hỗ trợ backdrop-filter thì về mặt đặc)
 * SỐ thẳng cột  .pp-so
 * ========================================================================================== */
.pp-vong:focus-visible {
  outline: var(--pp-vong-day) solid var(--pp-vong-phim);
  outline-offset: var(--pp-vong-cach);
}
.pp-kinh {
  background: var(--pp-mat);
  border: 1px solid var(--pp-ke);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pp-kinh {
    background: var(--pp-kinh);
    border-color: var(--pp-kinh-vien);
    -webkit-backdrop-filter: blur(var(--pp-kinh-mo)) saturate(140%);
    backdrop-filter: blur(var(--pp-kinh-mo)) saturate(140%);
  }
}
.pp-so {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================================
 * ==========================================================================================
 * v2 (06/10/2026): KHUNG "VÀNG LÀM KHE" + THẺ + BẢNG + CHUYỂN ĐỘNG
 * ==========================================================================================
 * ==========================================================================================
 *
 * Một màn PETPET luôn có hai tầng:
 *   .pp-khung              khung vàng (tối: than), cao hết màn
 *     .pp-dau              thanh trên 60px: logo PETPET + tên app, các tab, góc phải
 *     .pp-san              màn TỔNG QUAN: lưới thẻ trắng, khe 10px, lề 12px
 *     hoặc .pp-to          màn LÀM VIỆC: một tờ trắng lớn, lề 12px
 * ========================================================================================== */
.pp-khung {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--pp-muc);
  background: var(--pp-khung);
}
/* Màn làm việc: khung đúng bằng màn, tờ trắng tự cuộn bên trong (lưới cuộn, thanh trên đứng yên). */
.pp-khung--man {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* ---- THANH TRÊN  .pp-dau > .pp-dau-ten (> .pp-dau-logo + .pp-dau-app) + nav.pp-dau-menu > a.pp-dau-tab[aria-current]
 *      + .pp-dau-phai ---- */
.pp-dau {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--pp-k-5);
  box-sizing: border-box;
  height: var(--pp-dau-cao);
  padding: 0 var(--pp-dau-dem);
  color: var(--pp-tab-chu);
  background: var(--pp-dau-nen);
  /* Đổi trang: thanh trên đứng yên, chỉ phần dưới mờ vào (xem CHUYỂN ĐỘNG cuối tệp). */
  view-transition-name: pp-dau;
}
.pp-dau-ten {
  display: inline-flex;
  flex: none;
  align-items: baseline;
  gap: var(--pp-k-2);
  font-size: var(--pp-co-logo);
  font-weight: var(--pp-dam-6);
  font-stretch: var(--pp-rong-hien);
  line-height: var(--pp-dong-1);
  letter-spacing: var(--pp-gian-logo);
  color: var(--pp-dau-ten);
  white-space: nowrap;
  text-decoration: none;
}
.pp-dau-app {
  font-weight: var(--pp-dam-3);
  font-stretch: 100%;
  color: var(--pp-dau-app-chu);
}

/* ---- LOGO (30/10/2026)  .pp-dau-logo (thanh trên) · .pp-logo (+ --ngang) ----
 * Hình là tệp SVG của Marketing nằm cạnh tệp này, dùng làm MẶT NẠ; màu lấy từ token. Đổi theme là logo tự đổi màu
 * đúng luật (than trên vàng / trắng, vàng trên nền tối), không cần hai thẻ <img>. Tỉ lệ khoá theo viewBox của tệp,
 * nên không bao giờ bị kéo giãn. Thanh trên:
 *   <a class="pp-dau-ten"><span class="pp-dau-logo" role="img" aria-label="PETPET"></span>
 *     <span class="pp-dau-app">Master Data</span></a>
 * Đáy logo nằm đúng đường chân chữ của tên app (.pp-dau-ten căn baseline). Tờ in thì dùng <img> của tệp: in không
 * phụ thuộc tuỳ chọn "in ảnh nền". */
.pp-dau-logo,
.pp-logo {
  display: inline-block;
  flex: none;
  block-size: var(--pp-logo-cao);
  aspect-ratio: 366 / 95.5;
  background-color: var(--pp-logo);
  -webkit-mask: url('petpet-chu.svg') center / contain no-repeat;
  mask: url('petpet-chu.svg') center / contain no-repeat;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
.pp-dau-logo {
  block-size: var(--pp-dau-logo-cao);
  background-color: var(--pp-dau-ten);
}
/* Bản ngang THÚ CƯNG PETPET cho chỗ rộng (trang đăng nhập). Đặt --pp-logo-cao >= 37px (rộng >= 100px). */
.pp-logo--ngang {
  aspect-ratio: 869.75 / 315.25;
  -webkit-mask-image: url('petpet-ngang.svg');
  mask-image: url('petpet-ngang.svg');
}
/* Chế độ tương phản cao của Windows ép nền về màu hệ thống: giữ logo bằng màu chữ của hệ thống. */
@media (forced-colors: active) {
  .pp-dau-logo,
  .pp-logo {
    forced-color-adjust: none;
    background-color: CanvasText;
  }
}
.pp-dau-menu {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--pp-k-1);
  min-width: 0;
  /* Màn hẹp: tab dư cuộn ngang (thanh cuộn ẩn) thay vì đè lên góc phải. Đệm dọc chừa chỗ vòng phím. */
  padding-block: var(--pp-k-1);
  overflow-x: auto;
  scrollbar-width: none;
}
.pp-dau-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--pp-k-1);
  box-sizing: border-box;
  height: var(--pp-tab-cao);
  padding: 0 var(--pp-tab-dem);
  font-family: inherit;
  font-size: var(--pp-co-4);
  font-weight: var(--pp-dam-3);
  line-height: var(--pp-dong-1);
  color: var(--pp-tab-chu);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: var(--pp-bo-tron);
  transition:
    var(--pp-tr-bam),
    background-color var(--pp-nhip-1) var(--pp-em),
    color var(--pp-nhip-1) var(--pp-em);
}
.pp-dau-tab:hover {
  color: var(--pp-tab-chu);
  background: var(--pp-tab-re);
}
.pp-dau-tab:active {
  background: var(--pp-tab-bam);
  scale: var(--pp-co-nhan);
}
.pp-dau-tab[aria-current='page'],
.pp-dau-tab[aria-selected='true'] {
  color: var(--pp-tren-tab-on);
  background: var(--pp-tab-on);
}
.pp-dau-tab:focus-visible,
.pp-dau-ten:focus-visible {
  outline: var(--pp-vong-day) solid var(--pp-vong-phim);
  outline-offset: var(--pp-vong-cach);
}
.pp-dau-phai {
  display: flex;
  align-items: center;
  gap: var(--pp-k-3);
  margin-left: auto;
}

/* Thanh trên DÍNH: màn cuộn cả trang (không phải tờ tự cuộn). */
.pp-dau--dinh {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--pp-dau-nen-dac);
}
/* Màn dưới 1440px: đệm, khe, tab gọn lại; tab KHÔNG co, cụm bên phải co và cắt chữ. */
@media (max-width: 1439px) {
  .pp-dau {
    --pp-dau-dem: var(--pp-k-4);
    --pp-tab-dem: 10px;
    gap: var(--pp-k-4);
  }
}
.pp-dau-tab {
  flex: none;
}
.pp-dau-phai {
  flex: 0 1 auto;
  min-width: 0;
}

/* ---- VIÊN ĐẾM  .pp-dem  (số việc trên tab, chuông). Đỏ = có việc đang chờ mình. ---- */
.pp-dem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: var(--pp-dem-cao);
  height: var(--pp-dem-cao);
  padding: 0 var(--pp-dem-dem);
  font-size: var(--pp-co-2);
  font-weight: var(--pp-dam-4);
  line-height: var(--pp-dong-1);
  font-variant-numeric: tabular-nums;
  color: var(--pp-tren-do);
  background: var(--pp-do-dac);
  border-radius: var(--pp-bo-tron);
}

/* Viên đếm đè góc một icon (chuông): cha đặt position: relative. Viền màu thanh trên để tách khỏi icon. */
.pp-dem--goc {
  position: absolute;
  top: calc(var(--pp-k-1) * -1);
  right: calc(var(--pp-k-2) * -1);
  box-shadow: 0 0 0 var(--pp-vong-cach) var(--pp-dau-nen-dac);
  pointer-events: none;
}

/* ---- ĐỒNG BỘ  .pp-dong-bo  (góc phải thanh trên: "Sapo 02:10 · đối chiếu 14:19" [+ nút ↻ .pp-dong-bo-nut])
 *      27/10 (anh Quang chốt): TRUNG TÍNH + icon hai mũi tên vòng, thôi viền đứt xanh Sapo (xanh dương không còn là
 *      màu nghĩa). Màu chỉ khi cần chú ý: [data-trang-thai] = xong (trung tính) | cu (hổ phách) | loi (đỏ) | dang
 *      (icon quay). Cụm có nút ↻ riêng thì không vẽ icon đầu. ---- */
.pp-dong-bo {
  display: inline-flex;
  align-items: center;
  gap: var(--pp-k-1);
  box-sizing: border-box;
  min-height: var(--pp-chip-cao);
  padding: 0 var(--pp-k-1) 0 var(--pp-k-2);
  font-size: var(--pp-co-3);
  font-weight: var(--pp-dam-3);
  line-height: var(--pp-dong-1);
  font-variant-numeric: tabular-nums;
  color: var(--pp-chu-phu);
  white-space: nowrap;
  text-decoration: none;
  background: var(--pp-mat);
  border: 1px solid var(--pp-ke-dam);
  border-radius: var(--pp-bo-tron);
}
.pp-dong-bo:not(:has(.pp-dong-bo-nut))::before {
  content: '';
  flex: none;
  width: var(--pp-ico-co);
  height: var(--pp-ico-co);
  background-color: currentColor;
  -webkit-mask: var(--pp-ico-dong-bo) center / contain no-repeat;
  mask: var(--pp-ico-dong-bo) center / contain no-repeat;
}
.pp-dong-bo[data-trang-thai='dang']::before {
  animation: pp-xoay var(--pp-xoay-nhip) linear infinite;
}
.pp-dong-bo {
  min-width: 0;
  max-width: 100%;
}
.pp-dong-bo[data-trang-thai='loi'] {
  color: var(--pp-do-chu);
  border-color: var(--pp-do);
}
/* Số liệu cũ (quá 1 ngày, chưa tới mức lỗi): hổ phách. */
.pp-dong-bo[data-trang-thai='cu'] {
  color: var(--pp-canh-bao-chu);
  border-color: var(--pp-canh-bao);
}
/* Chữ trong cụm: chật thì cắt "…". */
.pp-dong-bo-chu {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Cả cụm là một link (không nút ↻): rê sáng nền xám, phím có vòng. */
a.pp-dong-bo {
  padding-right: var(--pp-chip-dem);
  transition: background-color var(--pp-nhip-1) var(--pp-em);
}
a.pp-dong-bo:hover {
  color: var(--pp-muc);
  background: var(--pp-re);
}
a.pp-dong-bo[data-trang-thai='loi']:hover {
  background: var(--pp-do-nen);
}
a.pp-dong-bo[data-trang-thai='cu']:hover {
  background: var(--pp-canh-bao-nen);
}
a.pp-dong-bo:focus-visible {
  outline: var(--pp-vong-day) solid var(--pp-vong-phim);
  outline-offset: var(--pp-vong-cach);
}
.pp-dong-bo-nut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pp-nut-cao-nho);
  height: var(--pp-nut-cao-nho);
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: var(--pp-bo-tron);
  transition:
    var(--pp-tr-bam),
    background-color var(--pp-nhip-1) var(--pp-em);
}
.pp-dong-bo-nut:hover {
  background: var(--pp-re);
}
.pp-dong-bo-nut:active {
  scale: var(--pp-co-nhan);
}
.pp-dong-bo-nut:focus-visible {
  outline: var(--pp-vong-day) solid var(--pp-vong-phim);
  outline-offset: var(--pp-vong-cach);
}
.pp-dong-bo-nut[aria-busy='true'] {
  cursor: progress;
  animation: pp-xoay var(--pp-xoay-nhip) linear infinite;
}

/* ---- ẢNH ĐẠI DIỆN  .pp-avatar [+ --to]. Màu từng người do app đặt qua --pp-avatar-nen / -chu. ---- */
.pp-avatar {
  --pp-avatar-nen: var(--pp-qt-nen);
  --pp-avatar-chu: var(--pp-qt-chu);
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--pp-avatar);
  height: var(--pp-avatar);
  font-size: var(--pp-co-2);
  font-weight: var(--pp-dam-5);
  line-height: var(--pp-dong-0);
  color: var(--pp-avatar-chu);
  background: var(--pp-avatar-nen);
  border-radius: var(--pp-bo-tron);
}
.pp-dau .pp-avatar {
  --pp-avatar-nen: var(--pp-dau-avatar-nen);
  --pp-avatar-chu: var(--pp-dau-avatar-chu);
}
.pp-avatar-nut {
  display: inline-flex;
  flex: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: var(--pp-bo-tron);
  transition: var(--pp-tr-bam);
}
.pp-avatar-nut:hover .pp-avatar,
.pp-avatar-nut[aria-expanded='true'] .pp-avatar {
  box-shadow: 0 0 0 var(--pp-vong-cach) var(--pp-tab-bam);
}
.pp-avatar-nut:active {
  scale: var(--pp-co-nhan);
}
.pp-avatar-nut:focus-visible {
  outline: var(--pp-vong-day) solid var(--pp-vong-phim);
  outline-offset: var(--pp-vong-cach);
}
.pp-avatar--to {
  width: var(--pp-avatar-to);
  height: var(--pp-avatar-to);
  font-size: var(--pp-co-3);
}

/* ---- SÂN (màn tổng quan)  .pp-san  lưới thẻ; số cột = --pp-cot, app đổi theo màn ---- */
.pp-san {
  --pp-cot: 4;
  display: grid;
  flex: 1;
  grid-template-columns: repeat(var(--pp-cot), minmax(0, 1fr));
  align-content: start;
  gap: var(--pp-khe);
  box-sizing: border-box;
  min-height: 0;
  padding: 0 var(--pp-le) var(--pp-le);
}
/* Hai cột lệch: chính 1,6 phần + phụ 1 phần (Hôm nay). */
.pp-san--chinh {
  grid-template-columns: minmax(0, var(--pp-ti-chinh)) minmax(0, 1fr);
}
/* Một thẻ chiếm nhiều cột / nhiều hàng. */
.pp-rong-2 {
  grid-column: span 2;
}
.pp-rong-3 {
  grid-column: span 3;
}
.pp-rong-het {
  grid-column: 1 / -1;
}
.pp-cao-2 {
  grid-row: span 2;
}
/* Một cột dọc các thẻ nằm trong một ô của lưới, cách nhau đúng một khe. */
.pp-cot-the {
  display: flex;
  flex-direction: column;
  gap: var(--pp-khe);
  min-width: 0;
  min-height: 0;
}

/* ---- TỜ (màn làm việc)  .pp-to > .pp-to-dau (tên + công cụ) + .pp-to-than (cuộn) ---- */
.pp-to {
  display: flex;
  flex: 1;
  flex-direction: column;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  margin: 0 var(--pp-le) var(--pp-le);
  overflow: hidden;
  color: var(--pp-muc);
  background: var(--pp-the-nen);
  border-radius: var(--pp-the-bo);
}
/* Dưới 1440px: thanh tờ chật lại (đệm, khe nhỏ) để công cụ vẫn một hàng. */
@media (max-width: 1439px) {
  .pp-to-dau {
    gap: var(--pp-k-1) var(--pp-k-2);
    padding-inline: var(--pp-k-3);
  }
}
/* Tờ cuộn theo TRANG (đầu bảng dính theo trang, cùng .pp-dau--dinh): không tự cuộn, không cắt. */
.pp-to--trang {
  display: block;
  flex: none;
  overflow: visible;
}
.pp-to-dau {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  box-sizing: border-box;
  min-height: var(--pp-dau-cao);
  gap: var(--pp-k-2) var(--pp-k-3);
  padding: var(--pp-k-3) var(--pp-k-4);
  border-bottom: 1px solid var(--pp-ke);
}
.pp-to-ten {
  margin: 0 var(--pp-k-2) 0 0;
  font-size: var(--pp-co-6);
  font-weight: var(--pp-dam-4);
  line-height: var(--pp-dong-1);
}
.pp-to-than {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
/* Thân tờ nhận phím (tabindex="0" để cuộn bằng phím): vòng chọn vẽ VÀO trong, không bị mép tờ cắt. */
.pp-to-than:focus-visible {
  outline: var(--pp-vong-day) solid var(--pp-vong-phim);
  outline-offset: calc(var(--pp-vong-day) * -1);
}
/* Số đếm cạnh tên tờ: "Nhật ký (500/3.214)". Form nằm trong thanh tờ không tạo thêm một hàng. */
.pp-to-dem {
  font-weight: var(--pp-dam-3);
  color: var(--pp-chu-mo);
}
.pp-to-dau form {
  display: contents;
}

/* ==========================================================================================
 * THẺ  .pp-the > .pp-the-dau (.pp-the-ten + .pp-the-phu) + nội dung
 *      [+ --bam: cả thẻ là một link]  [+ --toi | --tim | --ngoai]
 * Thẻ nằm thẳng trên khung, KHÔNG bóng: khe vàng đã tách thẻ. Chỉ thẻ bấm được mới nổi khi rê.
 * ========================================================================================== */
.pp-the {
  display: flex;
  flex-direction: column;
  gap: var(--pp-k-3);
  box-sizing: border-box;
  min-width: 0;
  padding: var(--pp-the-dem-doc) var(--pp-the-dem-ngang);
  color: var(--pp-muc);
  background: var(--pp-the-nen);
  border-radius: var(--pp-the-bo);
}
.pp-the-dau {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pp-k-3);
}
.pp-the-ten {
  margin: 0;
  font-size: var(--pp-co-6);
  font-weight: var(--pp-dam-4);
  line-height: var(--pp-dong-2);
  text-wrap: balance;
}
.pp-the-phu {
  flex: none;
  font-size: var(--pp-co-3);
  font-weight: var(--pp-dam-3);
  color: var(--pp-chu-mo);
}
/* Nhãn nhỏ CHỮ HOA trên tiêu đề lớn: "THỨ 2 · 06/10/2026", "THU MUA PETPET · TUẦN 41". */
.pp-mat-tren {
  font-size: var(--pp-co-3);
  font-weight: var(--pp-dam-4);
  line-height: var(--pp-dong-1);
  letter-spacing: var(--pp-gian-mat);
  color: var(--pp-chu-mo);
  text-transform: uppercase;
}
/* Chữ HIỂN THỊ: tiêu đề màn tổng quan ("Hôm nay", "AURA"). Một chỗ mỗi màn. --nho (40px) cho thẻ tiêu đề MỘT hàng. */
.pp-hien {
  margin: 0;
  font-size: var(--pp-co-10);
  font-weight: var(--pp-dam-6);
  font-stretch: var(--pp-rong-hien);
  line-height: var(--pp-dong-0);
  letter-spacing: var(--pp-gian-hien);
  text-wrap: balance;
}
.pp-hien--nho {
  font-size: var(--pp-co-9);
}
.pp-the--bam {
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--pp-nhip-1) var(--pp-em-di),
    box-shadow var(--pp-nhip-1) var(--pp-em),
    background-color var(--pp-nhip-1) var(--pp-em);
}
.pp-the--bam:hover {
  box-shadow: var(--pp-bong-2);
  transform: translateY(var(--pp-noi));
}
.pp-the--bam:active {
  box-shadow: var(--pp-bong-1);
  transform: none;
  transition-duration: var(--pp-nhip-bam);
}
.pp-the--bam:focus-visible {
  outline: var(--pp-vong-day) solid var(--pp-vong-phim);
  outline-offset: var(--pp-vong-cach);
}
/* Thẻ tối: than, tiêu đề + số vàng. Mỗi màn tối đa MỘT (vd "Đêm qua máy đã làm"). */
.pp-the--toi {
  color: var(--pp-tren-the-toi);
  background: var(--pp-the-toi);
}
.pp-the--toi .pp-the-ten,
.pp-the--toi .pp-so-lon {
  color: var(--pp-vang);
}
.pp-the--toi .pp-the-phu,
.pp-the--toi .pp-mat-tren {
  color: var(--pp-tren-the-toi);
}
.pp-the--toi a {
  color: var(--pp-vang);
  text-underline-offset: 3px;
}
.pp-the--toi a:hover {
  color: var(--pp-vang-re);
}
/* Thẻ tím: lối đi chính sang chỗ khác ("Việc của bạn nằm ở AURA"). Mỗi màn tối đa MỘT. */
.pp-the--tim {
  color: var(--pp-tren-tim);
  background: var(--pp-tim);
}
.pp-the--tim .pp-the-phu,
.pp-the--tim .pp-mat-tren,
.pp-the--tim a {
  color: var(--pp-tren-tim);
}
/* Thẻ từ ngoài vào: viền đứt. */
.pp-the--ngoai {
  border: var(--pp-vien-dut) dashed var(--pp-ke-dam);
}
.pp-so-lon {
  font-size: var(--pp-co-9);
  font-weight: var(--pp-dam-6);
  font-stretch: var(--pp-rong-hien);
  line-height: var(--pp-dong-0);
  font-variant-numeric: tabular-nums;
}

/* ---- Ô SỐ  .pp-o-so > .pp-o-so-so + .pp-o-so-nhan [+ .pp-o-so-phu]  [+ --tim --vang --do]
 *      (`--sapo` thôi là màu nghĩa từ 27/10: còn tên, vẽ như ô thường)
 *      Nằm TRONG thẻ, trên nền lót. Là <a> thì bấm được: mở đúng danh sách đó. ---- */
.pp-o-so {
  display: flex;
  flex-direction: column;
  gap: var(--pp-k-1);
  box-sizing: border-box;
  min-width: 0;
  padding: var(--pp-k-3) var(--pp-k-4);
  color: var(--pp-muc);
  text-decoration: none;
  background: var(--pp-the-lot);
  border: var(--pp-vien-dut) solid transparent;
  border-radius: var(--pp-the-bo-trong);
}
.pp-o-so-so {
  font-size: var(--pp-co-8);
  font-weight: var(--pp-dam-6);
  font-stretch: var(--pp-rong-hien);
  line-height: var(--pp-dong-0);
  font-variant-numeric: tabular-nums;
}
.pp-o-so-nhan {
  font-size: var(--pp-co-3);
  font-weight: var(--pp-dam-3);
  line-height: var(--pp-dong-2);
  color: var(--pp-chu-phu);
}
.pp-o-so-phu {
  font-size: var(--pp-co-2);
  line-height: var(--pp-dong-2);
  color: var(--pp-chu-mo);
}
.pp-o-so--tim {
  color: var(--pp-tren-tim);
  background: var(--pp-tim);
}
.pp-o-so--vang {
  color: var(--pp-tren-vang);
  background: var(--pp-vang);
}
.pp-o-so--tim .pp-o-so-nhan,
.pp-o-so--tim .pp-o-so-phu,
.pp-o-so--vang .pp-o-so-nhan,
.pp-o-so--vang .pp-o-so-phu {
  color: inherit;
}
.pp-o-so--do {
  color: var(--pp-do-chu);
  background: var(--pp-do-nen);
}
.pp-o-so--do .pp-o-so-nhan {
  color: var(--pp-do-chu);
}
a.pp-o-so {
  cursor: pointer;
  transition:
    transform var(--pp-nhip-1) var(--pp-em-di),
    box-shadow var(--pp-nhip-1) var(--pp-em);
}
a.pp-o-so:hover {
  box-shadow: var(--pp-bong-1);
  transform: translateY(var(--pp-noi));
}
a.pp-o-so:active {
  box-shadow: none;
  transform: none;
  transition-duration: var(--pp-nhip-bam);
}
a.pp-o-so:focus-visible {
  outline: var(--pp-vong-day) solid var(--pp-vong-phim);
  outline-offset: var(--pp-vong-cach);
}

/* ==========================================================================================
 * THẺ VIỆC  .pp-the-viec > .pp-the-viec-nhan + .pp-the-viec-ten + .pp-the-viec-chan
 *           [+ --noi-bat (tím) | --quan-trong (than, chữ vàng) | --ngoai (viền đứt) | --xong]
 * Bốn kiểu, không thêm: thường · nổi bật · quan trọng · từ ngoài. Kéo: .pp-dang-keo. Vừa thả: .pp-vua-tha.
 * ========================================================================================== */
.pp-the-viec {
  display: flex;
  flex-direction: column;
  gap: var(--pp-k-2);
  box-sizing: border-box;
  min-width: 0;
  padding: var(--pp-k-3);
  color: var(--pp-muc);
  background: var(--pp-the-lot);
  border: var(--pp-vien-dut) solid transparent;
  border-radius: var(--pp-the-bo-trong);
  cursor: grab;
  transition:
    transform var(--pp-nhip-1) var(--pp-em-di),
    box-shadow var(--pp-nhip-1) var(--pp-em),
    rotate var(--pp-nhip-1) var(--pp-em-di),
    scale var(--pp-nhip-1) var(--pp-em-di);
}
.pp-the-viec:hover {
  box-shadow: var(--pp-bong-1);
  transform: translateY(var(--pp-noi));
}
.pp-the-viec:focus-visible {
  outline: var(--pp-vong-day) solid var(--pp-vong-phim);
  outline-offset: var(--pp-vong-cach);
}
.pp-the-viec-nhan {
  font-size: var(--pp-co-2);
  font-weight: var(--pp-dam-4);
  line-height: var(--pp-dong-1);
  color: var(--pp-chu-phu);
}
.pp-the-viec-ten {
  font-size: var(--pp-co-4);
  font-weight: var(--pp-dam-4);
  line-height: var(--pp-dong-2);
}
.pp-the-viec-chan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pp-k-2);
  font-size: var(--pp-co-2);
  font-weight: var(--pp-dam-3);
  color: var(--pp-chu-phu);
}
.pp-the-viec--noi-bat {
  color: var(--pp-tren-tim);
  background: var(--pp-tim);
}
.pp-the-viec--quan-trong {
  color: var(--pp-qt-chu);
  background: var(--pp-qt-nen);
}
.pp-the-viec--noi-bat .pp-the-viec-nhan,
.pp-the-viec--noi-bat .pp-the-viec-chan,
.pp-the-viec--quan-trong .pp-the-viec-nhan,
.pp-the-viec--quan-trong .pp-the-viec-chan {
  color: inherit;
}
.pp-the-viec--ngoai {
  background: var(--pp-the-nen);
  border: var(--pp-vien-dut) dashed var(--pp-muc);
}
.pp-the-viec--xong {
  color: var(--pp-chu-mo);
}
.pp-the-viec--xong .pp-the-viec-ten {
  font-weight: var(--pp-dam-3);
}
/* Đang kéo: nhấc lên khỏi bàn (nghiêng, to ra, bóng lớp trên cùng). */
.pp-dang-keo {
  z-index: 50;
  cursor: grabbing;
  box-shadow: var(--pp-bong-3);
  rotate: var(--pp-keo-xoay);
  scale: var(--pp-keo-co);
}
/* Vừa thả: đáp xuống một cú nảy nhẹ, MỘT lần. */
.pp-vua-tha {
  animation: pp-tha var(--pp-nhip-3) var(--pp-em-nay);
}
@keyframes pp-tha {
  from {
    scale: var(--pp-keo-co);
  }
  to {
    scale: 1;
  }
}

/* ---- CHIP v2: bốn kiểu giống thẻ việc ---- */
.pp-chip--dac {
  color: var(--pp-tren-tim);
  background: var(--pp-tim);
  border-color: var(--pp-tim);
}
.pp-chip--quan-trong {
  color: var(--pp-qt-chu);
  background: var(--pp-qt-nen);
  border-color: var(--pp-qt-nen);
}
.pp-chip--ngoai {
  background: var(--pp-mat);
  border: var(--pp-vien-dut) dashed currentColor;
}

/* ---- NHÓM PHÂN ĐOẠN  .pp-doan > button.pp-doan-muc[aria-pressed]  (Bảng / Squad / Danh sách / Lịch) ---- */
.pp-doan {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--pp-k-2);
}
.pp-doan-muc {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: var(--pp-doan-cao);
  padding: 0 var(--pp-tab-dem);
  font-family: inherit;
  font-size: var(--pp-co-4);
  font-weight: var(--pp-dam-3);
  line-height: var(--pp-dong-1);
  color: var(--pp-muc);
  white-space: nowrap;
  cursor: pointer;
  background: var(--pp-the-lot);
  border: 0;
  border-radius: var(--pp-bo-tron);
  transition:
    var(--pp-tr-bam),
    background-color var(--pp-nhip-1) var(--pp-em),
    color var(--pp-nhip-1) var(--pp-em);
}
.pp-doan-muc:hover {
  background: var(--pp-bam);
}
.pp-doan-muc:active {
  scale: var(--pp-co-nhan);
}
.pp-doan-muc[aria-pressed='true'],
.pp-doan-muc[aria-selected='true'] {
  color: var(--pp-qt-chu);
  background: var(--pp-qt-nen);
}
.pp-doan--nho .pp-doan-muc {
  height: var(--pp-nut-cao);
  font-size: var(--pp-co-3);
}
/* Số đếm trong mục: "Hàng đặc biệt (85)" viết thành mục + .pp-doan-so. */
.pp-doan-so {
  font-size: inherit;
  margin-left: var(--pp-k-1);
  font-weight: var(--pp-dam-2);
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}
.pp-doan-muc:focus-visible {
  outline: var(--pp-vong-day) solid var(--pp-vong-phim);
  outline-offset: var(--pp-vong-cach);
}

/* ==========================================================================================
 * BẢNG (màn làm việc)  table.pp-bang  > thead th + tbody td
 *   .pp-bang-so    cột số: căn phải, không xuống dòng      .pp-so--0  số 0: chữ mờ
 *   tr.pp-bang-nhom  dòng nhóm, tổng nằm đúng dưới cột của nó
 *   tr[aria-selected="true"] dòng đang chọn (vàng)          tr.pp-dong--tre  quá hạn (đỏ rất nhạt)
 *   .pp-han [--tre | --xong]  ô hạn: "3 ngày" đỏ / "còn 5 ngày" mờ / "-"
 * Ô trống ghi "-", không để trắng. Đầu bảng dính trên cùng khi cuộn.
 * ========================================================================================== */
.pp-bang {
  width: 100%;
  font-size: var(--pp-co-3);
  line-height: var(--pp-dong-1);
  border-spacing: 0;
  border-collapse: separate;
}
.pp-bang th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: var(--pp-bang-dong-cao);
  padding: 0 var(--pp-k-3);
  font-size: var(--pp-co-2);
  font-weight: var(--pp-dam-4);
  color: var(--pp-chu-phu);
  text-align: left;
  white-space: nowrap;
  background: var(--pp-bang-dau);
  border-bottom: 1px solid var(--pp-ke-dam);
}
.pp-bang td {
  box-sizing: border-box;
  height: var(--pp-bang-dong-cao);
  padding: var(--pp-k-1) var(--pp-k-3);
  border-bottom: 1px solid var(--pp-ke);
  transition: background-color var(--pp-nhip-1) var(--pp-em);
}
.pp-bang tbody tr:hover td {
  background: var(--pp-dong-re);
}
.pp-bang tr[aria-selected='true'] td {
  background: var(--pp-dong-chon);
}
.pp-bang tr.pp-dong--tre td {
  background: var(--pp-dong-tre);
}
.pp-bang .pp-bang-so {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
/* Cột dính bên trái: đầu cột giữ nền đầu bảng, ô giữ mặt giấy để chữ không chồng lên nhau khi cuộn ngang. */
.pp-bang .pp-bang-dinh {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--pp-the-nen);
}
.pp-bang th.pp-bang-dinh {
  z-index: 3;
  background: var(--pp-bang-dau);
}
/* Chữ chỉ cho trình đọc màn hình (đầu cột nút, nhãn icon). */
.pp-an {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.pp-so--0 {
  color: var(--pp-chu-mo);
}
.pp-bang tr.pp-bang-nhom td {
  font-weight: var(--pp-dam-4);
  background: var(--pp-the-lot);
  border-bottom-color: var(--pp-ke-dam);
}
.pp-han {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--pp-chu-mo);
}
.pp-han--tre {
  font-weight: var(--pp-dam-4);
  color: var(--pp-do-chu);
}

/* ---- TIN TRONG TRANG  .pp-tin [+ --tim | --canh-bao | --do]  (`--sapo` từ 27/10: còn tên, vẽ như tin thường)
 *      Tin đứng yên trên trang (khác thông báo góc tự tắt). Câu mẫu khi cắt bớt dòng:
 *      "Chỉ hiện 150 phiếu gần hạn nhất, còn 723 phiếu nữa. Lọc theo NCC để xem tiếp." ---- */
.pp-tin {
  display: flex;
  align-items: center;
  gap: var(--pp-k-3);
  box-sizing: border-box;
  padding: var(--pp-k-2) var(--pp-k-3);
  font-size: var(--pp-co-3);
  line-height: var(--pp-dong-2);
  color: var(--pp-muc);
  background: var(--pp-the-lot);
  border-radius: var(--pp-bo-3);
}
.pp-tin--tim {
  color: var(--pp-tim-chu);
  background: var(--pp-tim-nen);
}
.pp-tin--canh-bao {
  color: var(--pp-canh-bao-chu);
  background: var(--pp-canh-bao-nen);
}
.pp-tin--do {
  color: var(--pp-do-chu);
  background: var(--pp-do-nen);
}

/* ---- MỞ RỘNG  details.pp-mo-rong > summary.pp-mo-rong-dau + .pp-mo-rong-than
 *      Mở trong dòng, không hộp thoại. Nạp lười bằng htmx: hx-get + hx-trigger="toggle once".
 *      Trình duyệt có ::details-content thì mở / khép trượt 200ms; không có thì bật tắt ngay. ---- */
.pp-mo-rong {
  interpolate-size: allow-keywords;
}
.pp-mo-rong-dau {
  display: flex;
  align-items: center;
  gap: var(--pp-k-2);
  padding: var(--pp-k-2) 0;
  font-weight: var(--pp-dam-3);
  cursor: pointer;
  list-style: none;
  border-radius: var(--pp-bo-2);
}
.pp-mo-rong-dau::-webkit-details-marker {
  display: none;
}
.pp-mo-rong-dau::before {
  content: '';
  flex: none;
  width: var(--pp-k-2);
  height: var(--pp-k-2);
  border-right: var(--pp-xoay-net) solid currentColor;
  border-bottom: var(--pp-xoay-net) solid currentColor;
  rotate: -45deg;
  transition: rotate var(--pp-nhip-1) var(--pp-em-di);
}
.pp-mo-rong[open] > .pp-mo-rong-dau::before {
  rotate: 45deg;
}
.pp-mo-rong-dau:focus-visible {
  outline: var(--pp-vong-day) solid var(--pp-vong-phim);
  outline-offset: var(--pp-vong-cach);
}
.pp-mo-rong::details-content {
  height: 0;
  overflow: clip;
  transition:
    height var(--pp-nhip-2) var(--pp-em),
    content-visibility var(--pp-nhip-2) allow-discrete;
}
.pp-mo-rong[open]::details-content {
  height: auto;
}

/* ---- TIẾN TRÌNH  progress.pp-tien-trinh (không có value = chưa biết bao lâu: dải chạy)
 *      NHẬT KÝ VIỆC  .pp-nhat-ky[role=log][aria-live=polite] > .pp-nhat-ky-dong [+ --loi | --canh-bao] ---- */
.pp-tien-trinh {
  display: block;
  width: 100%;
  height: var(--pp-tien-trinh-cao);
  overflow: hidden;
  color: var(--pp-vang);
  appearance: none;
  background: var(--pp-tien-trinh-ray);
  border: 0;
  border-radius: var(--pp-bo-tron);
}
.pp-tien-trinh::-webkit-progress-bar {
  background: var(--pp-tien-trinh-ray);
  border-radius: var(--pp-bo-tron);
}
.pp-tien-trinh::-webkit-progress-value {
  background: var(--pp-vang);
  border-radius: var(--pp-bo-tron);
  transition: inline-size var(--pp-nhip-2) var(--pp-em);
}
.pp-tien-trinh::-moz-progress-bar {
  background: var(--pp-vang);
  border-radius: var(--pp-bo-tron);
}
.pp-tien-trinh:indeterminate {
  background: var(--pp-tien-trinh-ray);
  animation: pp-tho var(--pp-nhip-tho) var(--pp-em) infinite alternate;
}
.pp-nhat-ky {
  box-sizing: border-box;
  max-height: 240px;
  padding: var(--pp-k-3);
  overflow: auto;
  font-size: var(--pp-co-2);
  line-height: var(--pp-dong-3);
  font-variant-numeric: tabular-nums;
  color: var(--pp-tren-thanh);
  background: var(--pp-thanh);
  border-radius: var(--pp-bo-4);
}
.pp-nhat-ky-dong {
  padding: 0 var(--pp-k-1);
  white-space: pre-wrap;
  border-radius: var(--pp-bo-2);
}
.pp-nhat-ky-dong--canh-bao {
  color: var(--pp-vang);
}
.pp-nhat-ky-dong--loi {
  color: var(--pp-tren-do);
  background: var(--pp-do-dac);
}

/* ---- Ô TIỀN  .pp-tien > input.pp-input.pp-input--tien[data-pp-tien] + .pp-tien-don ("đ")
 *      pp-tien.js thêm dấu chấm hàng nghìn khi gõ, giữ đúng chỗ con trỏ. ---- */
.pp-tien {
  position: relative;
  display: inline-flex;
  align-items: center;
}
/* Ô tiền rộng hết chỗ (form hẹp, thẻ SKU). */
.pp-tien--rong {
  display: flex;
  width: 100%;
}
.pp-tien--rong .pp-input--tien {
  flex: 1;
  width: auto;
}
.pp-input--tien {
  padding-right: var(--pp-o-mui-cho);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.pp-tien-don {
  position: absolute;
  right: var(--pp-o-dem);
  font-size: var(--pp-co-3);
  color: var(--pp-chu-mo);
  pointer-events: none;
}

/* Chữ mờ "cần" trong ô bắt buộc chưa điền (dòng tạo, form). */
.pp-can {
  font-size: var(--pp-co-2);
  font-weight: var(--pp-dam-3);
  color: var(--pp-chu-mo);
}
/* Nút ẩn bằng thuộc tính hidden (display: inline-flex của .pp-btn không được thắng luật ẩn). */
.pp-btn[hidden] {
  display: none;
}
/* Tin có nút: chữ co giãn, nút sát phải. */
.pp-tin > .pp-btn {
  flex: none;
  margin-left: auto;
}

/* Lỗi nổi ngay dưới một ô đang gõ (lưới): chữ đỏ ngắn trên mặt giấy, có bóng nhẹ, không đẩy dòng. */
.pp-loi-o {
  position: absolute;
  z-index: 30;
  padding: 2px var(--pp-k-2);
  font-size: var(--pp-co-2);
  font-weight: var(--pp-dam-3);
  color: var(--pp-do-chu);
  white-space: nowrap;
  background: var(--pp-mat);
  border: 1px solid var(--pp-do-ke);
  border-radius: var(--pp-bo-2);
  box-shadow: var(--pp-bong-1);
}

/* ---- TRƯỜNG FORM  .pp-truong > .pp-truong-nhan + ô nhập + .pp-truong-loi (đỏ, chỉ khi sai) ---- */
.pp-truong {
  display: grid;
  gap: var(--pp-k-1);
  min-width: 0;
}
.pp-truong-nhan {
  font-size: var(--pp-co-2);
  font-weight: var(--pp-dam-3);
  color: var(--pp-chu-phu);
}
.pp-truong-loi {
  font-size: var(--pp-co-2);
  line-height: var(--pp-dong-2);
  color: var(--pp-do-chu);
}
/* ---- THẺ NỔI ĐÁY  .pp-the--day: dính đáy màn khi cuộn (Kệ tạm), cách đáy một lề. ---- */
.pp-the--day {
  position: sticky;
  bottom: var(--pp-le);
  z-index: 20;
  box-shadow: var(--pp-bong-2);
}

/* ---- TRỐNG  .pp-trong > .pp-trong-ten + .pp-trong-chu + (một nút)
 *      Hết việc là tin vui: nói rõ đã xong, không vẽ hình minh hoạ. ---- */
.pp-trong {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pp-k-2);
  padding: var(--pp-k-6) var(--pp-k-4);
  text-align: center;
}
.pp-trong-ten {
  margin: 0;
  font-size: var(--pp-co-5);
  font-weight: var(--pp-dam-4);
  line-height: var(--pp-dong-2);
}
.pp-trong-chu {
  max-width: 44ch;
  margin: 0;
  font-size: var(--pp-co-3);
  line-height: var(--pp-dong-3);
  color: var(--pp-chu-phu);
}

/* ---- CHẤM TRẠNG THÁI  .pp-cham [+ --ok | --canh-bao | --do | --tim | --rong]  (không đuôi = trung tính)
 *      Bản gọn của badge cho ô bảng hẹp (vd bộ cột Kênh): màu không bao giờ đứng một mình, nên chấm LUÔN mang chữ ở
 *      `title` (rê chuột) + `aria-label` với role="img" (trình đọc màn hình). ---- */
.pp-cham {
  display: inline-block;
  flex: none;
  box-sizing: border-box;
  width: var(--pp-cham-co);
  height: var(--pp-cham-co);
  vertical-align: middle;
  background: var(--pp-xam-8);
  border-radius: var(--pp-bo-tron);
}
.pp-cham--ok {
  background: var(--pp-ok);
}
.pp-cham--canh-bao {
  background: var(--pp-canh-bao);
}
.pp-cham--do {
  background: var(--pp-do);
}
/* Tím làm HÌNH dùng nấc chữ: tím gốc trên mặt tối chỉ 2,4:1. */
.pp-cham--tim {
  background: var(--pp-tim-chu);
}
/* Viền đứt, không tô: "không có đơn" ở bộ cột Kênh (anh Quang 27/10), chưa biết đã đăng bán hay chưa. */
.pp-cham--rong {
  background: transparent;
  border: 1.5px dashed var(--pp-xam-8);
}

/* ---- ĐANG TẢI  .pp-dang-tai[role=status][aria-busy=true] > .pp-an ("Đang tải…") + .pp-dang-tai-dong × n
 *      [+ --bang: khung xương của bảng: dải đầu bảng + mỗi .pp-dang-tai-dong là một dòng cao bằng dòng bảng]
 *      Khung xương có HÌNH của thứ sắp hiện (dòng chữ / dòng bảng), thở chậm như .pp-xuong; không vòng xoay giữa trang. ---- */
.pp-dang-tai {
  display: flex;
  flex-direction: column;
  gap: var(--pp-k-3);
  box-sizing: border-box;
  padding: var(--pp-k-4);
}
.pp-dang-tai-dong {
  display: block;
  flex: none;
  width: 84%;
  height: var(--pp-co-3);
  background: var(--pp-the-lot);
  border-radius: var(--pp-bo-2);
  animation: pp-tho var(--pp-nhip-tho) var(--pp-em) infinite alternate;
}
.pp-dang-tai-dong:nth-of-type(3n + 1) {
  width: 62%;
}
.pp-dang-tai-dong:nth-of-type(3n) {
  width: 46%;
}
.pp-dang-tai--bang {
  gap: 0;
  padding: 0;
}
.pp-dang-tai--bang::before {
  content: '';
  display: block;
  height: var(--pp-dong-cao);
  background: var(--pp-bang-dau);
  border-bottom: 1px solid var(--pp-ke-dam);
}
.pp-dang-tai--bang .pp-dang-tai-dong {
  display: flex;
  align-items: center;
  width: auto;
  height: var(--pp-dong-cao);
  padding: 0 var(--pp-k-4);
  background: none;
  border-bottom: 1px solid var(--pp-ke);
  border-radius: 0;
  animation: none;
}
.pp-dang-tai--bang .pp-dang-tai-dong::before {
  content: '';
  width: 84%;
  height: var(--pp-co-3);
  background: var(--pp-the-lot);
  border-radius: var(--pp-bo-2);
  animation: pp-tho var(--pp-nhip-tho) var(--pp-em) infinite alternate;
}
.pp-dang-tai--bang .pp-dang-tai-dong:nth-of-type(3n + 1)::before {
  width: 62%;
}
.pp-dang-tai--bang .pp-dang-tai-dong:nth-of-type(3n)::before {
  width: 46%;
}

/* ---- LỖI  .pp-loi[role=alert] > .pp-loi-ten + .pp-loi-chu + (nút "Thử lại")
 *      Cùng khuôn với .pp-trong, thêm icon tròn đỏ: câu dễ hiểu nói chuyện gì hỏng và dữ liệu có mất không, không mã
 *      lỗi, không chữ máy. Một nút "Thử lại" (nút phụ). ---- */
.pp-loi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pp-k-2);
  padding: var(--pp-k-6) var(--pp-k-4);
  text-align: center;
}
.pp-loi::before {
  content: '';
  width: var(--pp-ico-to);
  height: var(--pp-ico-to);
  background-color: var(--pp-do);
  -webkit-mask: var(--pp-ico-loi) center / contain no-repeat;
  mask: var(--pp-ico-loi) center / contain no-repeat;
}
.pp-loi-ten {
  margin: 0;
  font-size: var(--pp-co-5);
  font-weight: var(--pp-dam-4);
  line-height: var(--pp-dong-2);
  color: var(--pp-do-chu);
}
.pp-loi-chu {
  max-width: 44ch;
  margin: 0;
  font-size: var(--pp-co-3);
  line-height: var(--pp-dong-3);
  color: var(--pp-chu-phu);
}

/* ==========================================================================================
 * CHUYỂN ĐỘNG v2 - mỗi thứ MỘT cách động, cả hai app giống nhau
 *
 *   đổi trang      đổi THẲNG, không mờ chéo: trình duyệt giữ trang cũ tới khi trang mới vẽ xong
 *                  (mờ chéo làm lộ khung vàng 0,5 giây - anh Quang 06/10)
 *   vào màn        .pp-vao (một khối) / .pp-vao-loat (các con so le 30ms, tối đa 6 nấc), 280ms, CHỈ nhích
 *                  lên 6px, không mờ từ 0
 *                  CHỈ lần vẽ đầu. Nội dung htmx thay vào sau đó KHÔNG chạy lại.
 *   ngăn bên       .pp-ngan: trượt từ phải 16px + mờ vào 280ms; gắn .pp-ngan--ra để rút 150ms, chờ
 *                  `transitionend` rồi mới gắn `hidden` / tháo khỏi trang
 *   đã lưu         .pp-nhay-luu: ô / dòng loé xanh nhạt rồi mờ 900ms
 *   sai            .pp-lac: lắc ngang 3px, 200ms (ô nhập sai, mật khẩu sai)
 *   số đổi         .pp-so-nhay: viên đếm nảy 1 lần 280ms
 *   đang tải       .pp-xuong: khung xương xám thở chậm 1,2 giây (không vệt sáng chạy)
 * ========================================================================================== */
/* Đổi trang KHÔNG mờ chéo (06/10, anh Quang: "mỗi lần chuyển trang phải load 1 lớp màu vàng 0.5s"): trang mới
   mờ từ 0 lên nghĩa là khung vàng lộ ra trong lúc đó. Giờ đổi thẳng: trình duyệt giữ trang cũ tới khi trang mới vẽ
   xong (paint holding), không có khung vàng chen giữa. Bỏ `@view-transition` (sku.petpet); Planogram vẫn gọi
   startViewTransition thì cũng đổi thẳng, vì hai lớp dưới không chạy hiệu ứng. */
::view-transition-group(pp-dau) {
  z-index: 100;
  animation: none;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}
/* Vào màn: CHỈ nhích lên, không mờ từ 0 - nội dung thấy ngay từ khung hình đầu, không lộ nền vàng. */
@keyframes pp-vao {
  from {
    transform: var(--pp-vao-trang);
  }
}
.pp-vao,
.pp-vao-loat > * {
  animation: pp-vao var(--pp-nhip-3) var(--pp-em) both;
}
.pp-vao-loat > :nth-child(2) {
  animation-delay: var(--pp-so-le);
}
.pp-vao-loat > :nth-child(3) {
  animation-delay: calc(var(--pp-so-le) * 2);
}
.pp-vao-loat > :nth-child(4) {
  animation-delay: calc(var(--pp-so-le) * 3);
}
.pp-vao-loat > :nth-child(5) {
  animation-delay: calc(var(--pp-so-le) * 4);
}
.pp-vao-loat > :nth-child(6) {
  animation-delay: calc(var(--pp-so-le) * 5);
}
.pp-vao-loat > :nth-child(n + 7) {
  animation-delay: calc(var(--pp-so-le) * 6);
}
.pp-ngan {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--pp-nhip-2) var(--pp-em),
    transform var(--pp-nhip-3) var(--pp-em-di);
}
@starting-style {
  .pp-ngan {
    opacity: 0;
    transform: var(--pp-vao-ngan);
  }
}
.pp-ngan--ra {
  opacity: 0;
  transform: var(--pp-vao-ngan);
  transition-duration: var(--pp-nhip-1);
}
.pp-nhay-luu {
  animation: pp-nhay-luu var(--pp-nhip-dai) var(--pp-em);
}
@keyframes pp-nhay-luu {
  from {
    background-color: var(--pp-ok-nen);
    box-shadow: inset 0 0 0 1px var(--pp-ok-ke);
  }
}
.pp-lac {
  animation: pp-lac var(--pp-nhip-2) var(--pp-em-di);
}
@keyframes pp-lac {
  25% {
    translate: calc(var(--pp-lac) * -1) 0;
  }
  50% {
    translate: var(--pp-lac) 0;
  }
  75% {
    translate: calc(var(--pp-lac) * -1) 0;
  }
}
.pp-so-nhay {
  animation: pp-so-nhay var(--pp-nhip-3) var(--pp-em-nay);
}
@keyframes pp-so-nhay {
  40% {
    scale: var(--pp-nay-co);
  }
}
/* Khung xương dạng dòng chữ: cao bằng một dòng, xếp dọc. */
.pp-xuong--dong {
  display: block;
  height: var(--pp-co-4);
  margin-block: var(--pp-k-1);
}
.pp-xuong--dong:last-child {
  width: 60%;
}
.pp-xuong {
  color: transparent;
  background: var(--pp-the-lot);
  border-radius: var(--pp-bo-3);
  animation: pp-tho var(--pp-nhip-tho) var(--pp-em) infinite alternate;
}
/* Vỏ bọc nhiều khối xương: chỉ thở, không tô nền (đặt SAU .pp-xuong để thắng cùng độ ưu tiên). */
.pp-xuong.pp-xuong--vo,
.pp-xuong--vo {
  color: inherit;
  background: none;
}
@keyframes pp-tho {
  to {
    opacity: var(--pp-tho-mo);
  }
}

/* ==========================================================================================
 * GIẢM CHUYỂN ĐỘNG: bỏ DI CHUYỂN (lún, co, trồi, phóng), giữ ĐỔI MÀU và MỜ.
 * Người bật chế độ này xin đừng có thứ gì dịch chỗ - không xin một giao diện giật phựt.
 * ========================================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --pp-lun: 0px;
    --pp-co-nhan: 1;
    --pp-vao: none;
    --pp-vao-menu: none;
    --pp-vao-bao: none;
    --pp-vao-trang: none;
    --pp-vao-ngan: none;
    --pp-noi: 0px;
    --pp-keo-xoay: 0deg;
    --pp-keo-co: 1;
    --pp-nay-co: 1;
    --pp-lac: 0px;
  }
  .pp-btn[aria-busy='true']::before,
  .pp-dong-bo-nut[aria-busy='true'],
  .pp-dong-bo[data-trang-thai='dang']::before {
    animation: none;
  }
  /* Đổi trang: chỉ mờ chéo, không nhích. Mở rộng: bật tắt ngay. */
  .pp-mo-rong::details-content {
    transition: none;
  }
}