/* ═══════════════════════════════════════════════════════════
   Màn Cấp quyền tích hợp — cap-quyen.css
   Dùng token từ style.css; không khai báo lại token.
   ═══════════════════════════════════════════════════════════ */

/* ─── Đảm bảo [hidden] hoạt động (style.css không khai báo) ── */
[hidden] { display: none !important; }

/* ─── Skip link ─────────────────────────────────────────────── */
.bo-qua-dieu-huong {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.bo-qua-dieu-huong:focus {
  position: fixed;
  top: var(--kc);
  left: var(--kc);
  width: auto;
  height: auto;
  overflow: visible;
  z-index: 9999;
  padding: calc(var(--kc) * .75) calc(var(--kc) * 1.5);
  background: var(--nhan);
  color: var(--tren-nhan);
  border-radius: var(--bo-nho);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

/* ─── Vùng trang — căn giữa thẻ ────────────────────────────── */
.trang-cap-quyen {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--kc) * 3);
  overflow-y: auto;
}

/* ─── Thẻ chính — ghi đè .the padding mặc định ─────────────── */
.the-cap-quyen {
  width: 100%;
  max-width: min(520px, 100%);
  box-sizing: border-box;
  padding: calc(var(--kc) * 5);
}

/* ─── Phần tiêu đề ──────────────────────────────────────────── */
.cap-quyen-tieu-de-vung {
  text-align: center;
  margin-bottom: calc(var(--kc) * 4);
}

.cap-quyen-bieu-tuong {
  width: 56px;
  height: 56px;
  margin: 0 auto calc(var(--kc) * 2.5);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--nhan-nhat);
  border: 1px solid rgba(0, 201, 177, 0.25);
  border-radius: 50%;
  color: var(--nhan);
}
.cap-quyen-bieu-tuong svg {
  width: 26px;
  height: 26px;
}

.cap-quyen-bieu-tuong--thanh-cong {
  background: rgba(63, 185, 80, 0.1);
  border-color: rgba(63, 185, 80, 0.3);
  color: var(--dat);
}

.cap-quyen-tieu-de {
  font-size: 28px;
  text-wrap: balance;
  margin-bottom: calc(var(--kc) * 1.25);
}

.cap-quyen-mo-ta {
  font-size: 14px;
  color: var(--chu-phu);
  max-width: 380px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ─── Khối lỗi ──────────────────────────────────────────────── */
.cap-quyen-loi {
  margin-bottom: calc(var(--kc) * 2.5);
  gap: var(--kc);
}

/* ─── Danh sách nguồn tích hợp ──────────────────────────────── */
.cap-quyen-nguon-ds {
  display: flex;
  flex-direction: column;
  gap: var(--kc);
  margin-bottom: calc(var(--kc) * 4);
  list-style: none;
}

.cap-quyen-nguon-muc {
  display: flex;
  align-items: center;
  gap: calc(var(--kc) * 2);
  background: var(--mat-2);
  border: 1px solid var(--vien);
  border-radius: var(--bo-vua);
  padding: calc(var(--kc) * 2);
}

.cap-quyen-nguon-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--nen);
  border-radius: var(--bo-nho);
  color: var(--chu-phu);
}
.cap-quyen-nguon-icon svg {
  width: 20px;
  height: 20px;
}

.cap-quyen-nguon-noi-dung {
  flex: 1;
  min-width: 0;
}

.cap-quyen-nguon-ten {
  font-family: var(--font-tieu-de);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
  line-height: 1.2;
}

.cap-quyen-nguon-mo-ta {
  font-size: 13px;
  color: var(--chu-phu);
  line-height: 1.5;
}

/* ─── Chấm trạng thái nguồn ─────────────────────────────────── */
.cap-quyen-nguon-dot {
  display: block;
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--vien);
  transition: background-color 0.2s;
}
.cap-quyen-nguon-dot[data-trang-thai="dang-tai"] {
  background: var(--nhan);
  animation: nhip-tim 1.2s ease-in-out infinite;
}
.cap-quyen-nguon-dot[data-trang-thai="thanh-cong"] {
  background: var(--dat);
}
.cap-quyen-nguon-dot[data-trang-thai="loi"] {
  background: var(--loi);
}

@keyframes nhip-tim {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* ─── Nút hành động ─────────────────────────────────────────── */
.cap-quyen-hanh-dong {
  display: flex;
  flex-direction: column;
  gap: var(--kc);
}

/* ─── Spinner bên trong nút ─────────────────────────────────── */
.cap-quyen-vong-quay {
  display: inline-block;
  width: 16px;
  height: 16px;
}

/* ─── Responsive ≤480px ─────────────────────────────────────── */
@media (max-width: 480px) {
  .trang-cap-quyen {
    padding-block: calc(var(--kc) * 3) calc(var(--kc) * 1.5);
    padding-inline: 16px;
    align-items: flex-start;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .the-cap-quyen {
    padding: calc(var(--kc) * 3);
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
  }

  .cap-quyen-tieu-de {
    font-size: 24px;
  }

  .cap-quyen-bieu-tuong {
    width: 48px;
    height: 48px;
  }
  .cap-quyen-bieu-tuong svg {
    width: 22px;
    height: 22px;
  }

  .cap-quyen-nguon-muc {
    gap: calc(var(--kc) * 1.5);
    padding: calc(var(--kc) * 1.5);
  }

  /* Nút ôm trọn chiều rộng thẻ ở màn hẹp */
  .cap-quyen-hanh-dong .nut.nut-day {
    width: 100%;
    min-width: 0;
    padding-left: calc(var(--kc) * 1.5);
    padding-right: calc(var(--kc) * 1.5);
  }
}