/* =================================================================
   VTCore.loading — cặp với js/vt-core/vt-loading.js. Không phụ thuộc CSS DevExtreme.

   Số đo lấy từ dxLoadPanel (theme Fluent, đo trên app thật 14/10/2026): hộp giữa bo 8px, đệm 12×24, chữ 12px/16px,
   vòng xoay 32px cách chữ 4px, bóng 0 8px 16px/.14. Từng theme ĐÈ bằng khối html[data-vt-theme="…"] trong vt-tokens.css
   (sinh từ số đo thật). Màu MÀN PHỦ do VTUI tính (lấy từ lớp chuyển trang của theme) và gắn inline.
   ================================================================= */
:root {
    --vt-loading-shade: rgba(255, 255, 255, .6);
    --vt-loading-pane-bg: #fff;
    --vt-loading-pane-fg: #242424;
    --vt-loading-pane-radius: 8px;
    --vt-loading-pane-shadow: 0 8px 16px rgba(0, 0, 0, .14);
    --vt-loading-pane-border: 0 none;
    --vt-loading-pane-pad: 12px 24px;
    --vt-loading-pane-minw: 0px;
    --vt-loading-msg-size: 12px;
    --vt-loading-msg-weight: 400;
    --vt-loading-spinner-size: 32px;
    --vt-loading-msg-color: inherit;
    --vt-loading-spinner-color: currentColor;
    --vt-loading-gap: 4px;
}

.vt-loading {
    position: absolute;
    inset: 0;
    z-index: 1000;                 /* trong khung: trên lưới/thanh cuộn của khung, dưới modal tự dựng (9999) */
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--vt-loading-shade);
    pointer-events: auto;          /* nuốt chuột: bấm xuyên xuống khung bị chặn */
    cursor: progress;
}
.vt-loading--page { position: fixed; }   /* z-index của chế độ cả trang do JS đặt (Z_PAGE) */

.vt-loading__pane {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--vt-loading-gap);
    box-sizing: border-box;
    min-width: var(--vt-loading-pane-minw);
    max-width: calc(100% - 32px);
    padding: var(--vt-loading-pane-pad);
    background: var(--vt-loading-pane-bg);
    color: var(--vt-loading-pane-fg);
    border: var(--vt-loading-pane-border);
    border-radius: var(--vt-loading-pane-radius);
    box-shadow: var(--vt-loading-pane-shadow);
    text-align: center;
    transform: translateY(var(--vt-loading-pane-dy, 0px));
}
.vt-loading__spinner {
    flex: none;
    box-sizing: border-box;
    width: var(--vt-loading-spinner-size);
    height: var(--vt-loading-spinner-size);
    border: 3px solid color-mix(in srgb, currentColor 22%, transparent);
    border-top-color: currentColor;        /* màu CHỮ của hộp, như dxLoadIndicator — không dùng màu chính của theme */
    border-radius: 50%;
    color: var(--vt-loading-spinner-color);
    animation: vt-loading-spin .8s linear infinite;
}
@keyframes vt-loading-spin { to { transform: rotate(360deg); } }
.vt-loading__msg {
    font-size: var(--vt-loading-msg-size);
    font-weight: var(--vt-loading-msg-weight);
    color: var(--vt-loading-msg-color);
    line-height: 16px;
    word-break: break-word;
}

@media (prefers-reduced-motion: reduce) {
    .vt-loading__spinner { animation-duration: 2.4s; }   /* quay chậm, không dừng — xem .vtui-spinner */
}