/* Vibary UI — nut_ai.css
   Nút AI 3D, chip điểm, chip KPI, ngăn kéo AI phải, nền mờ, spinner.
   Dùng design tokens trong tokens.css (không khai báo lại :root).
   Luật: chỉ .chu-thich được < 14px; --chu-mo không dùng làm chữ. */

/* ===== Nút AI chính (3D) ===== */
.nut-ai {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--k2);
  min-height: var(--cham);
  padding: 0 var(--k16);
  font-family: var(--font);
  font-size: var(--cc-than);
  font-weight: var(--dam);
  line-height: 1;
  color: #FFFFFF;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  background: linear-gradient(180deg, #6D28D9 0%, var(--xanh) 100%);
  border: 0;
  border-bottom: 3px solid #4C1D95;
  border-radius: var(--bo-m);
  box-shadow: var(--bong-1);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: transform var(--t-nhanh) var(--ease),
              box-shadow var(--t-nhanh) var(--ease),
              filter var(--t-nhanh) var(--ease);
}

.nut-ai:hover {
  transform: translateY(-1px);
  box-shadow: var(--bong-noi);
  filter: brightness(1.04);
}

.nut-ai:active {
  transform: translateY(2px);
  box-shadow: 0 1px 2px rgba(11, 27, 51, 0.10);
  filter: brightness(0.98);
}

.nut-ai:focus {
  outline: none;
}

.nut-ai:focus-visible {
  outline: 3px solid var(--xanh-mo);
  outline-offset: 2px;
}

.nut-ai:disabled,
.nut-ai[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: var(--bong-1);
  filter: none;
}

/* Biến thể nhỏ gọn (vẫn giữ quy tắc chữ 14px) */
.nut-ai.nut-ai-nho {
  min-height: 36px;
  padding: 0 var(--k3);
  border-bottom-width: 2px;
  border-radius: var(--bo-s);
}

/* ===== Chip điểm (màn đánh giá) ===== */
.diem-man {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: var(--cc-than);
  font-weight: var(--dam);
  line-height: 1.2;
  padding: 2px var(--k12);
  border-radius: 14px;
  color: var(--chu-3);
  background: var(--vien-mo);
  white-space: nowrap;
  vertical-align: middle;
}

.diem-man.diem-tot {
  color: var(--la-chu);
  background: var(--la-nen);
}

.diem-man.diem-kha {
  color: var(--xanh);
  background: var(--xanh-nhat);
}

.diem-man.diem-tb {
  color: var(--vang-chu);
  background: var(--vang-nen);
}

.diem-man.diem-yeu {
  color: var(--do-chu);
  background: var(--do-nen);
}

/* ===== Chip điểm cạnh số KPI ===== */
.kpi-diem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: var(--cc-than);
  font-weight: var(--dam);
  line-height: 1;
  padding: 2px var(--k2);
  border-radius: var(--bo-s);
  color: var(--chu-3);
  background: var(--vien-mo);
  white-space: nowrap;
  vertical-align: middle;
  margin-left: var(--k2);
}

.kpi-diem.kpi-diem-tot {
  color: var(--la-chu);
  background: var(--la-nen);
}

.kpi-diem.kpi-diem-kha {
  color: var(--xanh);
  background: var(--xanh-nhat);
}

.kpi-diem.kpi-diem-tb {
  color: var(--vang-chu);
  background: var(--vang-nen);
}

.kpi-diem.kpi-diem-yeu {
  color: var(--do-chu);
  background: var(--do-nen);
}

/* ===== Nền mờ ===== */
.ai-nen {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 50;
  background: rgba(11, 27, 51, 0.38);
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms var(--ease),
              visibility 0s linear 220ms;
}

.ai-nen.mo {
  opacity: 1;
  visibility: visible;
  transition: opacity 220ms var(--ease),
              visibility 0s linear 0s;
}

/* ===== Ngăn kéo AI (bên phải) ===== */
.ai-ngan {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  width: 440px;
  max-width: 100vw;
  height: 100vh;
  font-family: var(--font);
  font-size: var(--cc-than);
  line-height: 1.5;
  color: var(--chu);
  background: var(--be-mat);
  box-shadow: -8px 0 32px rgba(11, 27, 51, 0.18);
  transform: translateX(100%);
  transition: transform 220ms var(--ease);
  will-change: transform;
  overflow: hidden;
}

.ai-ngan.mo {
  transform: translateX(0);
}

/* Đầu — thân — chân ngăn kéo */
.ai-ngan-dau {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--k2);
  padding: var(--k16);
  border-bottom: 1px solid var(--vien);
  background: var(--be-mat);
}

.ai-ngan-than {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--k16);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.ai-ngan-chan {
  flex: 0 0 auto;
  padding: var(--k16);
  padding-bottom: calc(var(--k16) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--vien);
  background: var(--be-mat);
}

/* Khối & nhịp khoảng cách 8/12/16 bên trong ngăn kéo */
.ai-ngan .khoi {
  margin: 0 0 var(--k16) 0;
}

.ai-ngan .khoi:last-child {
  margin-bottom: 0;
}

.ai-ngan .khoi-tieu-de {
  margin: 0 0 var(--k3) 0;
  font-size: var(--cc-tieu-de);
  font-weight: var(--dam);
  line-height: 1.3;
  color: var(--chu);
}

.ai-ngan .nhom {
  margin: 0 0 var(--k3) 0;
}

.ai-ngan .dong {
  margin: 0 0 var(--k2) 0;
}

.ai-ngan .dong:last-child {
  margin-bottom: 0;
}

.ai-ngan .dong-hang {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--k2);
}

/* Chú thích: 12px nghiêng — lớp duy nhất được < 14px */
.ai-ngan .chu-thich,
.ai-ngan .chu-thich-nghieng {
  display: block;
  margin: var(--k1) 0 0 0;
  font-size: var(--cc-chu-thich);
  font-style: italic;
  font-weight: var(--thuong);
  line-height: 1.45;
  color: var(--chu-3);
}

/* ===== Spinner ===== */
.ai-quay {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--xanh-mo);
  border-top-color: var(--xanh);
  border-radius: var(--bo-tron);
  animation: ai-quay 700ms linear infinite;
  vertical-align: middle;
}

.ai-quay-nho {
  width: 14px;
  height: 14px;
  border-width: 2px;
}

.nut-ai .ai-quay {
  border-color: rgba(255, 255, 255, 0.4);
  border-top-color: #FFFFFF;
}

/* ===== Mobile ===== */
@media (max-width: 640px) {
  .ai-ngan {
    width: 100%;
    max-width: 100%;
  }

  .ai-ngan-dau,
  .ai-ngan-than,
  .ai-ngan-chan {
    padding-left: var(--k3);
    padding-right: var(--k3);
  }
}

/* ===== Tôn trọng giảm chuyển động ===== */
@media (prefers-reduced-motion: reduce) {
  .nut-ai,
  .ai-ngan,
  .ai-nen {
    transition: none;
  }

  .nut-ai:hover,
  .nut-ai:active {
    transform: none;
  }

  .ai-quay {
    animation: none;
  }
}

@keyframes ai-quay {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Ghép 25/10: đầu trang gọn — nút AI chỉ chữ "AI", điểm màn 1 dòng, tiêu đề màn không bị đè */
#dau-trang .nut-ai { padding: 0 12px; min-width: 0; white-space: nowrap; flex: none; }
#dau-trang .diem-man { white-space: nowrap; flex: none; }
@media (max-width: 1599px) { #dau-trang .diem-man { font-size: 14px; padding: 4px 8px; } }
@media (max-width: 1279px) { #dau-trang .tim-kiem { display: none; } }
@media (max-width: 640px) { #dau-trang .diem-man { display: none; } }
/* tiêu đề màn luôn đọc được: giữ đủ chữ, ô tìm co lại trước */
#dau-trang h1#tieu-de { flex: 0 0 auto; min-width: max-content; max-width: 260px; }
#dau-trang .tim-kiem { flex: 0 1 220px; min-width: 44px; }
@media (max-width: 1599px) { #dau-trang #nhan-ky, #dau-trang .cap-nhat { display: none; } }
/* bảng 10 chỉ số trong ngăn AI */
.ai-ngan .bang-10 td.so { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ai-ngan .bang-10 td, .ai-ngan .bang-10 th { padding: 4px 8px; font-size: 14px; vertical-align: top; }
.kpi-diem-chua { background: var(--vien-mo, #EEF2F7); color: var(--chu-3, #5B6A80); }
@media (min-width: 1024px) { .ai-ngan { width: 640px; } }