/* Hộp ủng hộ. Dùng trên trang bài viết, trang công cụ, hồ sơ cộng tác viên. */

.dn-wrap { margin: 2.5rem 0; }

.dn-card {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg, 12px);
  background: var(--paper);
  overflow: hidden;
}

.dn-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 1.2rem;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-color);
  text-align: left;
}
.dn-trigger:hover { background: color-mix(in srgb, var(--primary-color) 8%, transparent); }
.dn-cup { font-size: 1.3rem; line-height: 1; }
.dn-trigger > span:nth-child(2) { flex: 1; }
.dn-trigger i { width: 18px; height: 18px; color: var(--text-muted); transition: transform .18s ease; }
.dn-trigger.is-open i { transform: rotate(180deg); }

.dn-panel { padding: 0 1.2rem 1.2rem; border-top: 1px solid var(--border-color); }
.dn-intro { margin: 1rem 0 .9rem; color: var(--text-light); line-height: 1.65; }

/* --- chọn số tiền --- */
.dn-amounts { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .8rem; }
.dn-chip {
  padding: .45rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: #fff;
  font-family: inherit;
  font-size: .92rem;
  cursor: pointer;
  color: var(--text-light);
  transition: all .15s ease;
}
.dn-chip:hover { border-color: var(--primary-color); color: var(--primary-color); }
.dn-chip.active {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
  font-weight: 600;
}
.dn-custom { display: flex; gap: .5rem; margin-bottom: .9rem; }
.dn-custom input {
  flex: 1; min-width: 0;
  padding: .55rem .8rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-family: inherit;
  font-size: .95rem;
}
.dn-custom input:focus { outline: none; border-color: var(--primary-color); }

/* --- điều khoản: thu gọn sẵn, nhưng dòng tóm tắt luôn hiện --- */
.dn-terms {
  background: #fff8ed;
  border: 1px solid #f0d9b5;
  border-left: 4px solid #d97706;
  border-radius: 8px;
  margin-bottom: 1rem;
}
.dn-terms-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem .9rem;
  cursor: pointer;
  list-style: none;
  color: #92400e;
  font-size: .87rem;
  line-height: 1.5;
}
.dn-terms-head::-webkit-details-marker { display: none; }
.dn-terms-head:hover { background: #fef3e2; border-radius: 4px; }
.dn-terms-head i { width: 17px; height: 17px; flex: 0 0 auto; }
.dn-terms-short { flex: 1; font-weight: 600; }
.dn-terms-toggle {
  flex: 0 0 auto;
  font-size: .8rem;
  font-weight: 600;
  text-decoration: underline;
  white-space: nowrap;
}
.dn-terms .dn-t-close { display: none; }
.dn-terms[open] .dn-t-open { display: none; }
.dn-terms[open] .dn-t-close { display: inline; }

.dn-terms-body { padding: 0 .9rem .85rem; animation: dn-unfold .22s ease; }
@keyframes dn-unfold { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.dn-terms ul { margin: 0; padding-left: 1.15rem; }
.dn-terms li {
  font-size: .87rem;
  line-height: 1.6;
  color: #7c3d0a;
  margin-bottom: .35rem;
}
.dn-terms li:last-child { margin-bottom: 0; }
.dn-terms strong { color: #92400e; }
.dn-terms-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  flex-wrap: wrap;
  margin-top: .7rem;
}
.dn-terms-foot a { font-size: .84rem; color: #92400e; text-decoration: underline; }
.dn-terms-ok {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .9rem;
  border: 1px solid #d97706;
  border-radius: 999px;
  background: #fff;
  color: #92400e;
  font-family: inherit;
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
}
.dn-terms-ok:hover { background: #d97706; color: #fff; }
.dn-terms-ok i { width: 14px; height: 14px; }

@media (prefers-reduced-motion: reduce) { .dn-terms-body { animation: none; } }

/* --- QR + thông tin --- */
.dn-body { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: flex-start; }

.dn-qr {
  flex: 0 0 auto;
  width: 210px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: .7rem;
}
.dn-qr img { width: 100%; height: auto; display: block; border-radius: 6px; }
.dn-qr.is-broken img { display: none; }
.dn-qr.is-broken::before {
  content: 'Không tải được mã QR. Chuyển khoản tay theo thông tin bên cạnh.';
  display: block; padding: 2rem .5rem; font-size: .85rem; color: var(--accent-color); line-height: 1.5;
}
.dn-qr-none { padding: 2.5rem .5rem; color: var(--text-muted); font-size: .88rem; }
.dn-qr-hint { margin: .5rem 0 0; font-size: .8rem; color: var(--text-muted); }

.dn-info { flex: 1; min-width: 240px; }
.dn-row {
  display: flex; justify-content: space-between; gap: .8rem;
  padding: .5rem 0;
  border-bottom: 1px dashed var(--border-color);
  font-size: .92rem;
}
.dn-row span { color: var(--text-muted); flex: 0 0 auto; }
.dn-row b { text-align: right; word-break: break-word; }
.dn-copy { cursor: pointer; color: var(--primary-color); display: inline-flex; align-items: center; gap: .3rem; }
.dn-copy:hover { text-decoration: underline; }
.dn-copy i { width: 13px; height: 13px; }
.dn-note { margin: .7rem 0 0; font-size: .82rem; color: var(--text-muted); line-height: 1.55; }
.dn-who { margin: 1rem 0 0; font-size: .88rem; color: var(--text-light); }
.dn-err { color: var(--accent-color); padding: 1rem 0; }

@media (max-width: 560px) {
  .dn-body { flex-direction: column; }
  .dn-qr { width: 100%; max-width: 260px; margin: 0 auto; }
}

/* --- Nút cà phê nhỏ cạnh @tên trong bình luận --- */
.dn-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  margin-left: .25rem;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  background: #fff;
  font-size: .78rem;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
  transition: border-color .15s ease, transform .15s ease;
}
.dn-mini:hover { border-color: var(--primary-color); transform: scale(1.12); }

/* Hộp QR mở ra ngay dưới dòng bình luận. Chiếm cả dòng để không bóp méo câu chữ. */
.dn-inline {
  display: block;
  margin: .6rem 0 .2rem;
}
.dn-inline .dn-wrap { margin: 0; }
.dn-inline .dn-card { background: #fff; }

/* Cảnh báo tiền không về tác giả bài. Phải nổi, không được lẫn vào chữ thường. */
.dn-who-note {
  background: #fff8ed;
  border-left: 3px solid #d97706;
  border-radius: 6px;
  padding: .7rem .9rem;
  color: #7c3d0a;
  line-height: 1.6;
}
.dn-who-note strong { color: #92400e; }

/* --- Ô tự nhập số tiền, có dấu ngăn ngàn --- */
.dn-money-wrap { position: relative; flex: 1; min-width: 0; }
.dn-money-wrap input { width: 100%; padding-right: 2rem; text-align: right; font-variant-numeric: tabular-nums; }
.dn-money-unit {
  position: absolute; right: .7rem; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); font-size: .9rem; pointer-events: none;
}

/* --- Mấy câu chọc ghẹo khi tự nhập --- */
.dn-react {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: -.4rem 0 .9rem;
  padding: .6rem .85rem;
  border-radius: 10px;
  font-size: .9rem;
  line-height: 1.55;
  opacity: 0;
  transform: translateY(-4px);
}
.dn-react.is-in { animation: dn-pop .32s cubic-bezier(.2, 1.3, .4, 1) forwards; }
@keyframes dn-pop { to { opacity: 1; transform: translateY(0); } }

.dn-react.is-small { background: #f2f7f4; color: #3d6b56; border: 1px solid #d6e7de; }
.dn-react.is-peek  { background: #f6f4ff; color: #4c3f86; border: 1px solid #e0daf7; }
.dn-react.is-big   { background: #fff8ed; color: #7c3d0a; border: 1px solid #f0d9b5; }
.dn-react.is-huge  { background: #fdf1f1; color: #7a2f2f; border: 1px solid #f0cccc; }

/* An lú đầu ra rồi thụt vô */
.dn-react.is-peek .dn-react-text { animation: dn-peek 2.2s ease-in-out infinite; display: inline-block; }
@keyframes dn-peek {
  0%, 100% { transform: translateY(0); }
  45%      { transform: translateY(-3px); }
  55%      { transform: translateY(-3px); }
}

/* Quỳ lạy: cúi xuống rồi ngẩng lên, chậm rãi cho ra vẻ thành tâm */
.dn-kneel { font-size: 1.5rem; line-height: 1; flex: 0 0 auto; transform-origin: 50% 90%; animation: dn-bow 1.9s ease-in-out infinite; }
@keyframes dn-bow {
  0%, 100% { transform: rotate(0) translateY(0); }
  35%      { transform: rotate(-14deg) translateY(2px); }
  60%      { transform: rotate(-14deg) translateY(2px); }
}

@media (prefers-reduced-motion: reduce) {
  .dn-react.is-in { animation: none; opacity: 1; transform: none; }
  .dn-react.is-peek .dn-react-text, .dn-kneel { animation: none; }
}

/* --- Chia sẻ / lưu mã QR --- */
.dn-qr-acts { display: flex; gap: .4rem; margin-top: .55rem; }
.dn-act {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  padding: .42rem .5rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #fff;
  color: var(--text-light);
  font-family: inherit;
  font-size: .82rem;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.dn-act:hover:not(:disabled) { border-color: var(--primary-color); color: var(--primary-color); }
.dn-act:disabled { opacity: .55; cursor: wait; }
.dn-act i { width: 14px; height: 14px; }