/* =============================================================================
   Hình thức của cơ chế AJAX chung (wwwroot/js/ajax-chung.js, QD-086).
   Chỉ dùng biến màu/khoảng cách đã có của site (luật 15: không mã màu viết cứng) — chế độ tối tự đổi theo biến.
   Ba thứ: nút đang gửi, lỗi cạnh từng trường, thông báo nổi. Không thứ nào chiếm chỗ trong luồng bố cục ngoài
   dòng lỗi cạnh ô (thông báo lỗi của chính thao tác vừa làm — ngoại lệ của luật 11).
   ========================================================================== */

/* ---- Vùng vẽ lại chỉ để GOM (thẻ <div data-vung-ajax> không lớp): không sinh hộp riêng. <main> là cột flex có gap
   giữa các khối (site.css) — một <div> bọc thêm sẽ thành khối thứ ba chen giữa (thêm một nhịp gap khi rỗng) và làm các
   thẻ bên trong mất nhịp gap giữa chúng. display: contents giữ bố cục y như chưa bọc. */
div[data-vung-ajax]:not([class]) { display: contents; }
/* Con của vùng gom là KHỐI CỦA <main> về mặt bố cục (display: contents) nhưng không còn là con trực tiếp trong cây, nên
   các luật «main.noi-dung > …» của site.css/vua-khung.css không tới được. Nhắc lại đúng các luật đó ở đây (giữ đồng bộ
   khi sửa site.css — test AjaxChungTests.CssVungGom_NhacLaiLuatConCuaMain canh việc này). */
main.noi-dung:not(.noi-dung-giua) > div[data-vung-ajax]:not([class]) > * { flex-shrink: 0; margin-top: 0; margin-bottom: 0; }
main.noi-dung > div[data-vung-ajax]:not([class]) > .thanh-cong-cu { border: 1px solid var(--vien); border-radius: var(--bo-2); box-shadow: var(--bong-1); padding: var(--kc-3) var(--kc-5); }
main.noi-dung > div[data-vung-ajax]:not([class]) > .thanh-cong-cu .thanh-loc-hang > .hang-nut { margin-top: var(--o-tang-nhan); max-width: 100%; }
@media (min-width: 1024px) and (min-height: 700px) {
  body.vua-khung .noi-dung > div[data-vung-ajax]:not([class]) > * { flex: none; }
}

/* ---- Nút đang gửi: giữ nguyên kích cỡ nút (không nhảy chữ), thêm vòng quay bằng màu chữ của chính nút. */
.dang-gui {
  position: relative;
  cursor: progress;
}
.dang-gui::after {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-left: var(--kc-2);
  vertical-align: -0.12em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ajax-quay 0.7s linear infinite;
}
form[aria-busy="true"] { cursor: progress; }
@keyframes ajax-quay { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .dang-gui::after { animation-duration: 2s; }
}

/* ---- Lỗi cạnh từng trường. */
.loi-truong {
  display: block;
  margin-top: var(--kc-1);
  color: var(--do-chu);
  font-size: var(--cc-3);
  line-height: 1.35;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
[aria-invalid="true"] {
  border-color: var(--do) !important;
  box-shadow: 0 0 0 1px var(--do) !important;
}
.loi-bieu-mau { margin-bottom: var(--kc-3); }

/* ---- Thông báo nổi: cố định góc dưới phải vùng nội dung, không đẩy bố cục, không che đầu trang. */
.ajax-thong-bao {
  position: fixed;
  right: var(--kc-5);
  bottom: calc(var(--cao-chan, 32px) + var(--kc-4));
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: var(--kc-2);
  max-width: min(440px, calc(100vw - 2 * var(--kc-4)));
  pointer-events: none;
}
.ajax-thong-bao .ajax-tb {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--kc-3);
  margin: 0;
  box-shadow: var(--bong-3);
  /* Hiệu ứng vào/ra: cơ chế chung hieu-ung.css (ADR-0051). */
}
.ajax-tb-chu { flex: 1 1 auto; white-space: pre-line; overflow-wrap: anywhere; }
.ajax-tb-dong {
  flex: none;
  min-width: 24px;
  min-height: 24px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: var(--cc-6);
  line-height: 1;
  cursor: pointer;
  border-radius: var(--bo-1);
}
.ajax-tb-dong:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
@media (max-width: 640px) {
  .ajax-thong-bao { left: var(--kc-4); right: var(--kc-4); max-width: none; }
}
@media print { .ajax-thong-bao { display: none; } }