/* Box "Ủng hộ website" – dùng biến --pg-* của child theme (tpv-site.css) nên tự đổi theo tông tím–vàng,
   đỏ–vàng (body.tpv-dong) và nền sáng (html.tpv-light). Không backdrop-filter (máy yếu, html.tpv-lite). */
.tpv-uh {
  --uh-gold: var(--pg-gold, #e8c77d);
  --uh-gold-2: var(--pg-gold-2, #f8e6b4);
  --uh-text: var(--pg-text, #ece6fb);
  --uh-muted: var(--pg-muted, #b3a7d6);
  --uh-card: var(--pg-card-2, rgba(255,255,255,.07));
  --uh-line: var(--pg-line, rgba(232,199,125,.28));
  --uh-line-soft: var(--pg-line-soft, rgba(255,255,255,.11));
  position: relative; box-sizing: border-box; margin: 32px 0 16px; padding: 22px 22px 18px;
  border: 1px solid var(--uh-line); border-radius: 16px; background: var(--uh-card);
  color: var(--uh-text); font-family: inherit; line-height: 1.55; clear: both;
}
.tpv-uh::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(120deg, rgba(232,199,125,.55), transparent 35%, transparent 65%, rgba(232,199,125,.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px;
}
.tpv-uh *, .tpv-uh *::before, .tpv-uh *::after { box-sizing: border-box; }
.tpv-uh__head { display: flex; align-items: flex-start; gap: 14px; }
.tpv-uh__icon { flex: 0 0 auto; width: 30px; height: 30px; margin-top: 2px; color: var(--uh-gold); filter: drop-shadow(0 0 8px rgba(232,199,125,.35)); }
.tpv-uh__head-text { flex: 1 1 0; min-width: 0; }
.tpv-uh__title { display: block; font-size: 1.25rem; text-transform: none; font-weight: 600; letter-spacing: .01em; color: var(--uh-gold-2); line-height: 1.3; }
.tpv-uh__lead { display: block; margin-top: 6px; color: var(--uh-muted); font-size: .97rem; }
.tpv-uh__lead strong { color: var(--uh-gold); font-weight: 600; }
.tpv-uh__lead a { color: var(--uh-gold); text-decoration: underline; }

.tpv-uh__body { display: flex; flex-direction: column; gap: 18px; margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--uh-line-soft); }
.tpv-uh__acc { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px 26px; }
.tpv-uh__body--nhieu .tpv-uh__acc { padding-bottom: 18px; border-bottom: 1px dashed var(--uh-line-soft); }
.tpv-uh__body--nhieu .tpv-uh__acc:last-child { padding-bottom: 0; border-bottom: 0; }

.tpv-uh__qr { flex: 0 0 auto; margin: 0; text-align: center; max-width: 200px; }
.tpv-uh__qr-box { display: block; padding: 8px; border-radius: 12px; background: #fff; box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.tpv-uh__qr-img { display: block; width: 168px; height: 168px; max-width: 100%; object-fit: contain; border-radius: 6px; }
.tpv-uh__qr figcaption { margin-top: 8px; font-size: .82rem; color: var(--uh-muted); line-height: 1.4; }
.tpv-uh__qr figcaption a { color: var(--uh-gold); text-decoration: underline; }

.tpv-uh__info { flex: 1 1 240px; margin: 0; display: grid; gap: 10px; align-content: start; }
.tpv-uh__info > div { display: grid; grid-template-columns: 122px 1fr; gap: 6px 12px; align-items: center; margin: 0; }
.tpv-uh__info dt { margin: 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--uh-muted); font-weight: 500; }
.tpv-uh__info dd { margin: 0; font-size: 1.02rem; color: var(--uh-text); text-transform: none; letter-spacing: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.tpv-uh__info code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .98rem; letter-spacing: .03em; text-transform: none;
  padding: 3px 9px; border-radius: 8px; background: rgba(0,0,0,.22); border: 1px solid var(--uh-line-soft); color: var(--uh-gold-2); }
.tpv-uh__so { font-size: 1.12rem !important; font-weight: 600; }
html.tpv-light .tpv-uh__info code { background: rgba(60,40,10,.06); }

.tpv-uh__copy { appearance: none; -webkit-appearance: none; margin: 0; padding: 4px 11px; border-radius: 999px; font: inherit; font-size: .8rem; font-weight: 600;
  line-height: 1.4; cursor: pointer; color: #1d1400; border: 0; background: var(--pg-gold-btn, linear-gradient(135deg, #f8e6b4, #e8c77d 45%, #b8932f)); box-shadow: 0 3px 10px rgba(232,199,125,.25); transition: transform .15s, box-shadow .15s; }
.tpv-uh__copy:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(232,199,125,.35); color: #1d1400; }
.tpv-uh__copy:focus-visible { outline: 2px solid var(--uh-gold); outline-offset: 2px; }
.tpv-uh__copy.is-done { background: var(--pg-violet, #b48cff); color: #fff; }
.tpv-uh__thanks { margin: 16px 0 0; padding-top: 14px; border-top: 1px dashed var(--uh-line-soft); font-style: italic; color: var(--uh-muted); font-size: .95rem; }

/* Thanh thu gọn (chân trang / kieu="gon") */
.tpv-uh--gon { padding: 0; margin: 24px 0; }
.tpv-uh--gon > .tpv-uh__head { padding: 14px 20px; cursor: pointer; list-style: none; align-items: center; }
.tpv-uh--gon > .tpv-uh__head::-webkit-details-marker { display: none; }
.tpv-uh--gon > .tpv-uh__head .tpv-uh__title { font-size: 1.05rem; }
.tpv-uh--gon > .tpv-uh__head .tpv-uh__lead { font-size: .88rem; margin-top: 2px; }
.tpv-uh__more { flex: 0 0 auto; align-self: center; padding: 6px 14px; border-radius: 999px; font-size: .82rem; font-weight: 600; color: #1d1400;
  background: var(--pg-gold-btn, linear-gradient(135deg, #f8e6b4, #e8c77d 45%, #b8932f)); white-space: nowrap; }
.tpv-uh--gon[open] .tpv-uh__more { background: transparent; color: var(--uh-gold); border: 1px solid var(--uh-line); }
.tpv-uh--gon[open] .tpv-uh__more::after { content: " ▴"; }
.tpv-uh--gon > .tpv-uh__body { margin: 0 20px; padding-bottom: 20px; }
.tpv-uh--gon > .tpv-uh__thanks { margin: 0 20px 18px; }
.tpv-uh-footer { padding-top: 8px; }
.tpv-uh-footer .tpv-uh--gon { margin: 0 0 20px; }

@media (max-width: 640px) {
  .tpv-uh { padding: 18px 16px 16px; border-radius: 14px; }
  .tpv-uh__acc { flex-direction: column; align-items: center; }
  .tpv-uh__qr { max-width: 100%; }
  .tpv-uh__qr-img { width: 200px; height: 200px; }
  .tpv-uh__info { width: 100%; }
  .tpv-uh__info > div { grid-template-columns: 1fr; gap: 2px; }
  .tpv-uh--gon > .tpv-uh__head { flex-wrap: wrap; padding: 12px 14px; }
  .tpv-uh--gon > .tpv-uh__head .tpv-uh__head-text { flex: 1 1 calc(100% - 44px); }
  .tpv-uh__more { flex-basis: auto; margin-left: 44px; margin-top: 2px; }
  .tpv-uh--gon > .tpv-uh__body, .tpv-uh--gon > .tpv-uh__thanks { margin-left: 14px; margin-right: 14px; }
}
@media print { .tpv-uh { display: none !important; } }