/* =============================================================================
   CƠ CHẾ CHỜ TẢI DÙNG CHUNG (ChoTai) — người dùng: «đảo tab chưa có hiệu ứng loading — chỗ nào phải chờ
   đều phải có waiting nhé». Hình thức cho wwwroot/js/cho-tai-chung.js. 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. Xem docs/kientruc/AJAX_CHUNG.md
   mục "Cơ chế CHỜ TẢI dùng chung".

   Bốn hình thức, đúng bốn ý người dùng yêu cầu:
     1. .ttt-chung        — thanh tiến trình mảnh trên đầu trang (điều hướng AJAX toàn trang).
     2. .cho-tai-phu      — lớp phủ + khung xương/vòng xoay TRÊN một vùng đang tải (không đụng DOM cũ,
                            nên không thể dịch bố cục — vùng giữ nguyên kích cỡ tới khi có nội dung mới).
     3. .cho-tai-nut      — vòng xoay nhỏ trong nút (dùng chung hình thức với .dang-gui của ajax-chung.css).
     4. .cho-tai-loi      — trạng thái hết hạn/lỗi bên trong lớp phủ, có nút «Thử lại».

   Hoạt hình bị tắt sạch khi prefers-reduced-motion (khối chung ở cuối wwwroot/css/hieu-ung.css: `*, *::before,
   *::after { transition: none !important; animation: none !important; }`) — tệp này không cần lặp lại.
   ========================================================================== */

/* ---- 1) Thanh tiến trình mảnh trên đầu trang (điều hướng AJAX toàn trang, luật «toàn trang») ------------- */
.ttt-chung {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--xanh);
  z-index: 2000;
  opacity: 0;
  transition: width 0.4s ease-out, opacity 0.2s linear;
  pointer-events: none;
}
.ttt-chung.dang-chay { opacity: 1; }
.ttt-chung.xong { width: 100% !important; transition: width 0.15s ease-out, opacity 0.3s linear 0.15s; }
.ttt-chung.an { opacity: 0; }
@media print { .ttt-chung { display: none; } }

/* ---- 2) Lớp phủ đang tải trên một vùng ------------------------------------------------------------------ */
/* Lớp phủ KHÔNG phải con của vùng và KHÔNG đụng `position`/DOM của vùng: gắn thẳng vào <body>, JS đặt
   position:fixed đúng khớp hình chữ nhật của vùng mỗi khung hình (cho-tai-chung.js#apViTri/hinhChuNhatVung).
   Vá 24/09 (n4b-chay-lai bắt được DICH_BO_CUC ở /ho-so «Xem định danh»): cách cũ đặt lớp phủ position:absolute
   LÀM CON của vùng và ép vùng position:relative — vỡ với vùng AJAX gom KHÔNG lớp (display:contents, xem
   ajax-chung.css) vì display:contents không có hộp riêng nên không nhận được `position`, lớp phủ mất khối chứa
   đúng, trồi lên lấy <main>/trang làm khối chứa → sai cỡ, sai chỗ, đo ra layout-shift. Cách mới không đụng gì tới
   vùng nên áp được cho MỌI kiểu vùng, kể cả display:contents (hinhChuNhatVung lấy hợp các con nếu vùng không có
   hộp riêng), và chắc chắn không tự gây dịch bố cục ở phía vùng vì vùng không hề bị sửa. */
.cho-tai-phu {
  position: fixed;
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--kc-3);
  padding: var(--kc-4);
  background: var(--the-nen);
  opacity: 0.92;
  overflow: hidden;
  text-align: center;
  cursor: progress;
}

/* Vòng xoay dùng chung một hình thức với nút đang gửi (ajax-chung.css .dang-gui::after) — cùng ngôn ngữ hình. */
.cho-tai-vong {
  width: 26px;
  height: 26px;
  border: 3px solid var(--vien);
  border-top-color: var(--xanh);
  border-radius: 50%;
  animation: cho-tai-quay 0.8s linear infinite;
  flex: none;
}
@keyframes cho-tai-quay { to { transform: rotate(360deg); } }

.cho-tai-nhan {
  color: var(--chu-mo);
  font-size: var(--cc-3);
}

/* Khung xương: vùng đủ lớn (bảng, thẻ dash, thân tab) hiện vài dải giữ chỗ thay vì chỉ một vòng xoay giữa
   khoảng trống lớn — gần với hình dạng thật của nội dung sắp tới hơn, đỡ trống trải. */
.cho-tai-xuong {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: var(--kc-2);
}
.cho-tai-xuong-dong {
  height: 14px;
  border-radius: var(--bo-1);
  background: var(--vien-nhat);
  animation: cho-tai-nhap-nhay 1.4s ease-in-out infinite;
}
.cho-tai-xuong-dong:nth-child(1) { width: 62%; height: 18px; }
.cho-tai-xuong-dong:nth-child(2) { width: 100%; }
.cho-tai-xuong-dong:nth-child(3) { width: 88%; }
.cho-tai-xuong-dong:nth-child(4) { width: 70%; }
@keyframes cho-tai-nhap-nhay { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* ---- 3) Nút riêng lẻ không đi qua ajax-chung.js (mã JS trang gọi ChoTai.nut) ------------------------------ */
.cho-tai-nut { position: relative; cursor: progress; }
.cho-tai-nut::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: cho-tai-quay 0.7s linear infinite;
}

/* ---- 4) Hết hạn chờ / lỗi trong lớp phủ ------------------------------------------------------------------- */
.cho-tai-loi { display: flex; flex-direction: column; align-items: center; gap: var(--kc-2); }
.cho-tai-loi-chu { color: var(--chu); font-size: var(--cc-4); max-width: 360px; }
.cho-tai-loi .nut {
  display: inline-flex;
  align-items: center;
  gap: var(--kc-2);
  border: 1px solid var(--vien-o-nhap);
  border-radius: var(--bo-2);
  background: var(--the-dinh);
  color: var(--chu);
  padding: var(--kc-2) var(--kc-4);
  font-size: var(--cc-4);
  cursor: pointer;
}
.cho-tai-loi .nut:hover { background: var(--xanh-nhat); }
.cho-tai-loi .nut:focus-visible { outline: 2px solid var(--xanh-chu); outline-offset: 2px; }

@media print { .cho-tai-phu { display: none; } }