/*
 * Advanced style layer for donate.php.
 * Chỉ được nạp khi donate_theme_enabled = 1 và luôn nằm sau donate-themes.css.
 * Tất cả selector đều scope trong donate-theme-root để chế độ nguyên bản không đổi.
 */

/* ===== BỀ MẶT / CARD ===== */

html.donate-theme-root[data-surface-style="solid"] body.donate-page .left-col > form,
html.donate-theme-root[data-surface-style="solid"] body.donate-page .leaderboard-sticky,
html.donate-theme-root[data-surface-style="solid"] body.donate-page .right-col {
  padding: clamp(16px, 2vw, 24px);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-corner-radius);
  background: var(--dt-panel);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .18);
}

html.donate-theme-root[data-surface-style="solid"] body.donate-page .leaderboard-sticky {
  margin-top: 18px;
}

html.donate-theme-root[data-surface-style="glass"] body.donate-page .container,
html.donate-theme-root[data-surface-style="glass"] body.donate-page .left-col > form,
html.donate-theme-root[data-surface-style="glass"] body.donate-page .leaderboard-sticky,
html.donate-theme-root[data-surface-style="glass"] body.donate-page .right-col,
html.donate-theme-root[data-surface-style="glass"] body.donate-page .cn-box,
html.donate-theme-root[data-surface-style="glass"] body.donate-page .vip-modal-box {
  border: 1px solid rgba(255, 255, 255, .12);
  background: color-mix(in srgb, var(--dt-surface) 74%, transparent);
  box-shadow: 0 22px 55px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .06);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}

html.donate-theme-root[data-surface-style="glass"] body.donate-page .left-col > form,
html.donate-theme-root[data-surface-style="glass"] body.donate-page .leaderboard-sticky {
  padding: clamp(16px, 2vw, 24px);
  border-radius: var(--dt-corner-radius);
}

html.donate-theme-root[data-surface-style="glass"] body.donate-page .leaderboard-sticky {
  margin-top: 18px;
}

html.donate-theme-root[data-surface-style="outline"] body.donate-page .left-col > form,
html.donate-theme-root[data-surface-style="outline"] body.donate-page .leaderboard-sticky,
html.donate-theme-root[data-surface-style="outline"] body.donate-page .right-col {
  padding: clamp(16px, 2vw, 24px);
  border: 1px solid color-mix(in srgb, var(--dt-accent-primary) 52%, transparent);
  border-radius: var(--dt-corner-radius);
  background: color-mix(in srgb, var(--dt-input) 68%, transparent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035), 0 0 28px color-mix(in srgb, var(--dt-accent-primary) 10%, transparent);
}

html.donate-theme-root[data-surface-style="outline"] body.donate-page .leaderboard-sticky {
  margin-top: 18px;
}

/* ===== KHUNG DONATE RIÊNG ===== */

html.donate-theme-root:not([data-donate-frame-style="original"]) body.donate-page #donateForm {
  box-sizing: border-box;
  isolation: isolate;
  padding: var(--dt-donate-frame-padding);
  border-width: var(--dt-donate-frame-border-width);
  border-style: solid;
  border-color: var(--dt-donate-frame-border-color);
  border-radius: var(--dt-donate-frame-radius);
  box-shadow:
    0 calc(var(--dt-donate-frame-shadow) * .42)
    calc(var(--dt-donate-frame-shadow) * 1.45)
    rgba(0, 0, 0, .42);
  transition: border-color .22s ease, box-shadow .22s ease, background-color .22s ease;
}

html.donate-theme-root:not([data-donate-frame-style="original"])[data-donate-frame-background="solid"] body.donate-page #donateForm {
  background: rgba(var(--dt-donate-frame-bg-rgb), var(--dt-donate-frame-opacity));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html.donate-theme-root:not([data-donate-frame-style="original"])[data-donate-frame-background="glass"] body.donate-page #donateForm {
  background: rgba(var(--dt-donate-frame-bg-rgb), var(--dt-donate-frame-opacity));
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}

html.donate-theme-root:not([data-donate-frame-style="original"])[data-donate-frame-background="gradient"] body.donate-page #donateForm {
  background: rgba(var(--dt-donate-frame-bg-rgb), var(--dt-donate-frame-opacity));
}

html.donate-theme-root:not([data-donate-frame-style="original"])[data-donate-frame-background="transparent"] body.donate-page #donateForm {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html.donate-theme-root:not([data-donate-frame-style="original"])[data-donate-frame-border="none"] body.donate-page #donateForm {
  border-width: 0;
  border-color: transparent;
}

html.donate-theme-root:not([data-donate-frame-style="original"])[data-donate-frame-border="top"] body.donate-page #donateForm {
  border-color: transparent;
  border-top-color: var(--dt-donate-frame-border-color);
}

html.donate-theme-root:not([data-donate-frame-style="original"])[data-donate-frame-border="left"] body.donate-page #donateForm {
  border-color: transparent;
  border-left-color: var(--dt-donate-frame-border-color);
}

html.donate-theme-root:not([data-donate-frame-style="original"])[data-donate-frame-border="gradient"] body.donate-page #donateForm {
  border-color: var(--dt-donate-frame-border-color);
}

html.donate-theme-root:not([data-donate-frame-style="original"])[data-donate-frame-style="glass"] body.donate-page #donateForm {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 calc(var(--dt-donate-frame-shadow) * .42)
    calc(var(--dt-donate-frame-shadow) * 1.45)
    rgba(0, 0, 0, .42);
}

@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  html.donate-theme-root:not([data-donate-frame-style="original"])[data-donate-frame-border="gradient"] body.donate-page #donateForm {
    border-color: transparent;
  }

  html.donate-theme-root:not([data-donate-frame-style="original"])[data-donate-frame-border="gradient"] body.donate-page #donateForm::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    padding: var(--dt-donate-frame-border-width);
    border-radius: inherit;
    background: linear-gradient(135deg, var(--dt-donate-frame-border-color), var(--dt-accent-secondary), var(--dt-donate-frame-border-color));
    pointer-events: none;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }
}

@supports (color: color-mix(in srgb, #fff 50%, #000)) {
  html.donate-theme-root:not([data-donate-frame-style="original"]) body.donate-page #donateForm {
    box-shadow:
      0 calc(var(--dt-donate-frame-shadow) * .42)
      calc(var(--dt-donate-frame-shadow) * 1.45)
      rgba(0, 0, 0, .42),
      0 0 var(--dt-donate-frame-glow)
      color-mix(in srgb, var(--dt-donate-frame-border-color) 58%, transparent);
  }

  html.donate-theme-root:not([data-donate-frame-style="original"])[data-donate-frame-background="gradient"] body.donate-page #donateForm {
    background: linear-gradient(
      145deg,
      rgba(var(--dt-donate-frame-bg-rgb), var(--dt-donate-frame-opacity)),
      color-mix(in srgb, var(--dt-accent-secondary) 18%, rgba(var(--dt-donate-frame-bg-rgb), var(--dt-donate-frame-opacity)))
    );
  }

  html.donate-theme-root:not([data-donate-frame-style="original"])[data-donate-frame-style="neon"] body.donate-page #donateForm {
    box-shadow:
      0 calc(var(--dt-donate-frame-shadow) * .36)
      calc(var(--dt-donate-frame-shadow) * 1.2)
      rgba(0, 0, 0, .42),
      0 0 var(--dt-donate-frame-glow)
      color-mix(in srgb, var(--dt-donate-frame-border-color) 76%, transparent),
      inset 0 0 calc(var(--dt-donate-frame-glow) * .45)
      color-mix(in srgb, var(--dt-donate-frame-border-color) 12%, transparent);
  }
}

/* ===== BẢNG XẾP HẠNG VÀ LỊCH SỬ DONATE RIÊNG ===== */

html.donate-theme-root:not([data-leaderboard-style="original"]) body.donate-page .leaderboard-sticky,
html.donate-theme-root:not([data-history-panel-style="original"]) body.donate-page .right-col {
  box-sizing: border-box;
  isolation: isolate;
  border-style: solid;
  transition: border-color .22s ease, box-shadow .22s ease, background-color .22s ease;
}

html.donate-theme-root:not([data-leaderboard-style="original"]) body.donate-page .leaderboard-sticky {
  padding: var(--dt-leaderboard-padding);
  border-width: var(--dt-leaderboard-border-width);
  border-color: var(--dt-leaderboard-accent);
  border-radius: var(--dt-leaderboard-radius);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .26);
}

html.donate-theme-root:not([data-history-panel-style="original"]) body.donate-page .right-col {
  padding: var(--dt-history-panel-padding);
  border-width: var(--dt-history-panel-border-width);
  border-color: var(--dt-history-panel-accent);
  border-radius: var(--dt-history-panel-radius);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .26);
}

html.donate-theme-root:not([data-leaderboard-style="original"])[data-leaderboard-background="solid"] body.donate-page .leaderboard-sticky,
html.donate-theme-root:not([data-leaderboard-style="original"])[data-leaderboard-background="glass"] body.donate-page .leaderboard-sticky {
  background: rgba(var(--dt-leaderboard-bg-rgb), .88);
}

html.donate-theme-root:not([data-history-panel-style="original"])[data-history-panel-background="solid"] body.donate-page .right-col,
html.donate-theme-root:not([data-history-panel-style="original"])[data-history-panel-background="glass"] body.donate-page .right-col {
  background: rgba(var(--dt-history-panel-bg-rgb), .88);
}

html.donate-theme-root:not([data-leaderboard-style="original"])[data-leaderboard-background="glass"] body.donate-page .leaderboard-sticky,
html.donate-theme-root:not([data-history-panel-style="original"])[data-history-panel-background="glass"] body.donate-page .right-col {
  backdrop-filter: blur(16px) saturate(125%);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
}

html.donate-theme-root:not([data-leaderboard-style="original"])[data-leaderboard-background="gradient"] body.donate-page .leaderboard-sticky {
  background: rgba(var(--dt-leaderboard-bg-rgb), .92);
}

html.donate-theme-root:not([data-history-panel-style="original"])[data-history-panel-background="gradient"] body.donate-page .right-col {
  background: rgba(var(--dt-history-panel-bg-rgb), .92);
}

html.donate-theme-root:not([data-leaderboard-style="original"])[data-leaderboard-background="transparent"] body.donate-page .leaderboard-sticky,
html.donate-theme-root:not([data-history-panel-style="original"])[data-history-panel-background="transparent"] body.donate-page .right-col {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html.donate-theme-root:not([data-leaderboard-style="original"])[data-leaderboard-border="none"] body.donate-page .leaderboard-sticky,
html.donate-theme-root:not([data-history-panel-style="original"])[data-history-panel-border="none"] body.donate-page .right-col {
  border-width: 0;
  border-color: transparent;
}

html.donate-theme-root:not([data-leaderboard-style="original"])[data-leaderboard-border="top"] body.donate-page .leaderboard-sticky {
  border-color: transparent;
  border-top-color: var(--dt-leaderboard-accent);
}

html.donate-theme-root:not([data-history-panel-style="original"])[data-history-panel-border="top"] body.donate-page .right-col {
  border-color: transparent;
  border-top-color: var(--dt-history-panel-accent);
}

html.donate-theme-root:not([data-leaderboard-style="original"])[data-leaderboard-border="left"] body.donate-page .leaderboard-sticky {
  border-color: transparent;
  border-left-color: var(--dt-leaderboard-accent);
}

html.donate-theme-root:not([data-history-panel-style="original"])[data-history-panel-border="left"] body.donate-page .right-col {
  border-color: transparent;
  border-left-color: var(--dt-history-panel-accent);
}

html.donate-theme-root:not([data-leaderboard-style="original"])[data-leaderboard-border="gradient"] body.donate-page .leaderboard-sticky {
  border-color: var(--dt-leaderboard-accent);
  outline: 1px solid var(--dt-accent-secondary);
  outline-offset: -3px;
}

html.donate-theme-root:not([data-history-panel-style="original"])[data-history-panel-border="gradient"] body.donate-page .right-col {
  border-color: var(--dt-history-panel-accent);
  outline: 1px solid var(--dt-accent-primary);
  outline-offset: -3px;
}

html.donate-theme-root[data-leaderboard-row-style="cards"] body.donate-page #leaderboard .lb-row {
  margin-top: 7px;
  padding: 10px;
  border: 1px solid rgba(var(--dt-leaderboard-bg-rgb), .9);
  border-radius: 12px;
  background: rgba(var(--dt-leaderboard-bg-rgb), .72);
}

html.donate-theme-root[data-leaderboard-row-style="separated"] body.donate-page #leaderboard .lb-row {
  margin-top: 5px;
  padding: 9px 10px;
  border-bottom: 0;
  border-left: 2px solid var(--dt-leaderboard-accent);
  border-radius: 0 9px 9px 0;
  background: rgba(var(--dt-leaderboard-bg-rgb), .28);
}

html.donate-theme-root[data-leaderboard-row-style="compact"] body.donate-page #leaderboard .lb-row {
  padding: 6px 0;
  font-size: 13px;
}

html.donate-theme-root[data-leaderboard-row-style="podium"] body.donate-page #leaderboard .lb-row:nth-child(-n+3) {
  margin-top: 7px;
  padding: 10px;
  border-radius: 12px;
}

html.donate-theme-root[data-leaderboard-row-style="podium"] body.donate-page #leaderboard .lb-row:nth-child(1) {
  border: 1px solid rgba(250, 204, 21, .34);
  background: linear-gradient(90deg, rgba(250, 204, 21, .17), rgba(var(--dt-leaderboard-bg-rgb), .48));
}

html.donate-theme-root[data-leaderboard-row-style="podium"] body.donate-page #leaderboard .lb-row:nth-child(2) {
  border: 1px solid rgba(203, 213, 225, .25);
  background: linear-gradient(90deg, rgba(203, 213, 225, .13), rgba(var(--dt-leaderboard-bg-rgb), .42));
}

html.donate-theme-root[data-leaderboard-row-style="podium"] body.donate-page #leaderboard .lb-row:nth-child(3) {
  border: 1px solid rgba(251, 146, 60, .28);
  background: linear-gradient(90deg, rgba(251, 146, 60, .13), rgba(var(--dt-leaderboard-bg-rgb), .38));
}

html.donate-theme-root[data-history-panel-row-style="cards"] body.donate-page #history > .donate-card {
  margin-bottom: 11px;
  padding: 11px;
  border: 1px solid rgba(var(--dt-history-panel-bg-rgb), .9);
  border-radius: 14px;
  background: rgba(var(--dt-history-panel-bg-rgb), .68);
}

html.donate-theme-root[data-history-panel-row-style="separated"] body.donate-page #history > .donate-card {
  margin-bottom: 12px;
  padding: 7px 8px 7px 11px;
  border-left: 2px solid var(--dt-history-panel-accent);
  border-radius: 0 10px 10px 0;
  background: rgba(var(--dt-history-panel-bg-rgb), .25);
}

html.donate-theme-root[data-history-panel-row-style="compact"] body.donate-page #history > .donate-card {
  gap: 9px;
  margin-bottom: 10px;
  padding: 2px;
}

html.donate-theme-root[data-history-panel-row-style="compact"] body.donate-page #history > .donate-card .donate-bubble {
  padding: 8px 10px;
  border-radius: 10px !important;
  font-size: 13px;
}

html.donate-theme-root[data-history-panel-row-style="accent"] body.donate-page #history > .donate-card {
  margin-bottom: 12px;
  padding: 9px;
  border: 1px solid rgba(var(--dt-history-panel-bg-rgb), .72);
  border-left: 3px solid var(--dt-history-panel-accent);
  border-radius: 12px;
  background: rgba(var(--dt-history-panel-bg-rgb), .42);
}

/* Khoảng cách và kích thước chỉ áp dụng khi admin bật riêng cho từng khu vực. */
html.donate-theme-root[data-leaderboard-sizing="custom"] body.donate-page #leaderboard .lb-row {
  margin-bottom: var(--dt-leaderboard-row-gap);
  padding: var(--dt-leaderboard-item-padding-y) var(--dt-leaderboard-item-padding-x);
  font-size: var(--dt-leaderboard-font-size);
}

html.donate-theme-root[data-leaderboard-sizing="custom"] body.donate-page #leaderboard .lb-left {
  gap: var(--dt-leaderboard-content-gap);
}

html.donate-theme-root[data-leaderboard-sizing="custom"] body.donate-page #leaderboard .donate-avatar {
  width: var(--dt-leaderboard-avatar-size);
  height: var(--dt-leaderboard-avatar-size);
  flex: 0 0 var(--dt-leaderboard-avatar-size);
}

html.donate-theme-root[data-leaderboard-sizing="custom"] body.donate-page #leaderboard .donate-avatar > .avatar-frame {
  top: -6px;
  left: -6px;
  width: calc(var(--dt-leaderboard-avatar-size) + 12px);
  height: calc(var(--dt-leaderboard-avatar-size) + 12px);
}

html.donate-theme-root[data-history-panel-sizing="custom"] body.donate-page #history > .donate-card {
  gap: var(--dt-history-panel-content-gap);
  margin-bottom: var(--dt-history-panel-row-gap);
  padding: var(--dt-history-panel-item-padding-y) var(--dt-history-panel-item-padding-x);
  font-size: var(--dt-history-panel-font-size);
}

html.donate-theme-root[data-history-panel-sizing="custom"] body.donate-page #history > .donate-card > .donate-avatar {
  width: var(--dt-history-panel-avatar-size);
  height: var(--dt-history-panel-avatar-size);
  flex: 0 0 var(--dt-history-panel-avatar-size);
}

html.donate-theme-root[data-history-panel-sizing="custom"] body.donate-page #history > .donate-card > .donate-avatar > .avatar-frame {
  top: -6px;
  left: -6px;
  width: calc(var(--dt-history-panel-avatar-size) + 12px);
  height: calc(var(--dt-history-panel-avatar-size) + 12px);
}

html.donate-theme-root[data-history-panel-sizing="custom"] body.donate-page #history > .donate-card .donate-header,
html.donate-theme-root[data-history-panel-sizing="custom"] body.donate-page #history > .donate-card .donate-bubble {
  font-size: var(--dt-history-panel-font-size);
}

html.donate-theme-root[data-history-panel-sizing="custom"] body.donate-page #history > .donate-card .donate-sub {
  font-size: max(11px, calc(var(--dt-history-panel-font-size) - 1px));
}

html.donate-theme-root[data-history-panel-sizing="custom"] body.donate-page #history > .donate-card .donate-time {
  font-size: max(10px, calc(var(--dt-history-panel-font-size) - 2px));
}

@supports (color: color-mix(in srgb, #fff 50%, #000)) {
  html.donate-theme-root:not([data-leaderboard-style="original"]) body.donate-page .leaderboard-sticky {
    box-shadow: 0 16px 36px rgba(0, 0, 0, .26), 0 0 var(--dt-leaderboard-glow) color-mix(in srgb, var(--dt-leaderboard-accent) 58%, transparent);
  }

  html.donate-theme-root:not([data-history-panel-style="original"]) body.donate-page .right-col {
    box-shadow: 0 16px 36px rgba(0, 0, 0, .26), 0 0 var(--dt-history-panel-glow) color-mix(in srgb, var(--dt-history-panel-accent) 58%, transparent);
  }

  html.donate-theme-root:not([data-leaderboard-style="original"])[data-leaderboard-background="gradient"] body.donate-page .leaderboard-sticky {
    background: linear-gradient(145deg, rgba(var(--dt-leaderboard-bg-rgb), .94), color-mix(in srgb, var(--dt-leaderboard-accent) 18%, rgba(var(--dt-leaderboard-bg-rgb), .9)));
  }

  html.donate-theme-root:not([data-history-panel-style="original"])[data-history-panel-background="gradient"] body.donate-page .right-col {
    background: linear-gradient(145deg, rgba(var(--dt-history-panel-bg-rgb), .94), color-mix(in srgb, var(--dt-history-panel-accent) 18%, rgba(var(--dt-history-panel-bg-rgb), .9)));
  }

  html.donate-theme-root[data-leaderboard-row-style="cards"] body.donate-page #leaderboard .lb-row {
    border-color: color-mix(in srgb, var(--dt-leaderboard-accent) 26%, transparent);
  }

  html.donate-theme-root[data-history-panel-row-style="cards"] body.donate-page #history > .donate-card,
  html.donate-theme-root[data-history-panel-row-style="accent"] body.donate-page #history > .donate-card {
    border-color: color-mix(in srgb, var(--dt-history-panel-accent) 25%, transparent);
    border-left-color: var(--dt-history-panel-accent);
  }
}

/* ===== NÚT DONATE ===== */

html.donate-theme-root[data-button-style="gradient"] body.donate-page button.main-btn {
  border: 1px solid rgba(255, 255, 255, .16);
  background: linear-gradient(110deg, var(--dt-accent-primary), var(--dt-accent-secondary));
  box-shadow: 0 14px 30px color-mix(in srgb, var(--dt-accent-secondary) 24%, transparent);
}

html.donate-theme-root[data-button-style="glow"] body.donate-page button.main-btn {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--dt-accent-primary) 75%, #ffffff);
  background: linear-gradient(100deg, var(--dt-accent-primary), var(--dt-accent-secondary));
  box-shadow:
    0 0 18px color-mix(in srgb, var(--dt-accent-primary) 44%, transparent),
    0 0 36px color-mix(in srgb, var(--dt-accent-secondary) 24%, transparent);
  letter-spacing: .02em;
}

html.donate-theme-root[data-button-style="glow"] body.donate-page button.main-btn::after {
  content: "";
  position: absolute;
  inset: -2px auto -2px -35%;
  width: 24%;
  transform: skewX(-18deg);
  background: rgba(255, 255, 255, .38);
  filter: blur(7px);
  transition: left .55s ease;
}

html.donate-theme-root[data-button-style="glow"] body.donate-page button.main-btn:hover::after {
  left: 115%;
}

html.donate-theme-root[data-button-style="outline"] body.donate-page button.main-btn {
  border: 1px solid var(--dt-accent-primary);
  background: transparent;
  color: var(--dt-accent-primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dt-accent-secondary) 25%, transparent);
}

html.donate-theme-root[data-button-style="outline"] body.donate-page button.main-btn:hover {
  background: color-mix(in srgb, var(--dt-accent-primary) 10%, transparent);
}

html.donate-theme-root[data-button-style="solid"] body.donate-page button.main-btn {
  border: 1px solid color-mix(in srgb, var(--dt-accent-primary) 78%, #ffffff);
  background: var(--dt-accent-primary);
  color: var(--dt-accent-contrast);
  box-shadow: none;
}

/* ===== KIỂU TAB ===== */

html.donate-theme-root[data-tab-style="pill"] body.donate-page .message-tabs {
  padding: 5px;
  border: 1px solid var(--dt-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--dt-input) 82%, transparent);
}

html.donate-theme-root[data-tab-style="pill"] body.donate-page .msg-tab {
  border-radius: 999px;
}

html.donate-theme-root[data-tab-style="underline"] body.donate-page .message-tabs {
  gap: 16px;
  padding: 0;
  border-bottom: 1px solid var(--dt-border);
  border-radius: 0;
  background: transparent;
}

html.donate-theme-root[data-tab-style="underline"] body.donate-page .msg-tab {
  padding: 10px 2px 11px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html.donate-theme-root[data-tab-style="underline"] body.donate-page .msg-tab.active {
  background: transparent;
  color: var(--dt-accent-primary);
  box-shadow: inset 0 -2px 0 var(--dt-accent-primary);
}

html.donate-theme-root[data-tab-style="segmented"] body.donate-page .message-tabs {
  display: flex;
  width: 100%;
  padding: 4px;
  gap: 4px;
  border: 1px solid var(--dt-border);
  border-radius: 12px;
  background: var(--dt-input);
}

html.donate-theme-root[data-tab-style="segmented"] body.donate-page .msg-tab {
  flex: 1 1 0;
  justify-content: center;
  border-radius: 8px;
}

/* ===== LỊCH SỬ DONATE ===== */

html.donate-theme-root[data-history-style="bubble"] body.donate-page .donate-bubble {
  border-left: 3px solid var(--dt-accent-primary);
  border-radius: 6px 18px 18px 18px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .16);
}

html.donate-theme-root[data-history-style="bubble"] body.donate-page .donate-bubble::after {
  left: 18px;
}

html.donate-theme-root[data-history-style="cards"] body.donate-page .donate-card {
  padding: 14px;
  border: 1px solid var(--dt-border);
  border-radius: calc(var(--dt-corner-radius) * .75);
  background: color-mix(in srgb, var(--dt-elevated) 58%, transparent);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
}

html.donate-theme-root[data-history-style="cards"] body.donate-page .donate-bubble {
  padding: 9px 0 0;
  border: 0;
  background: transparent;
}

html.donate-theme-root[data-history-style="cards"] body.donate-page .donate-bubble::after {
  display: none;
}

html.donate-theme-root[data-history-style="compact"] body.donate-page .donate-card {
  gap: 9px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--dt-border);
}

html.donate-theme-root[data-history-style="compact"] body.donate-page .donate-bubble {
  margin-top: 2px;
  padding: 7px 10px;
  border-radius: 9px;
  font-size: 13px;
}

/* ===== NAVBAR ===== */

html.donate-theme-root[data-nav-style="glass"] body.donate-page .top-navbar {
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  background: color-mix(in srgb, var(--dt-nav-bg) 72%, transparent);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}

html.donate-theme-root[data-nav-style="solid"] body.donate-page .top-navbar,
html.donate-theme-root[data-nav-style="solid"] body.donate-page .top-navbar.scrolled {
  background: var(--dt-surface);
  border-bottom-color: var(--dt-border);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

@media (min-width: 769px) {
  html.donate-theme-root[data-nav-style="floating"] body.donate-page .top-navbar {
    top: 10px;
    left: 2.5%;
    right: 2.5%;
    width: 95%;
    border: 1px solid var(--dt-border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--dt-nav-bg) 80%, transparent);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .28);
  }
}

/* ===== NỀN ===== */

html.donate-theme-root[data-background-style="aurora"],
html.donate-theme-root[data-background-style="aurora"] body.donate-page {
  background-image:
    radial-gradient(circle at 12% 15%, color-mix(in srgb, var(--dt-accent-primary) 24%, transparent), transparent 34%),
    radial-gradient(circle at 86% 22%, color-mix(in srgb, var(--dt-accent-secondary) 24%, transparent), transparent 38%),
    radial-gradient(circle at 50% 88%, color-mix(in srgb, var(--dt-accent-primary) 12%, transparent), transparent 42%),
    var(--dt-page-bg);
  background-repeat: no-repeat;
  background-size: cover;
}

html.donate-theme-root[data-background-style="grid"],
html.donate-theme-root[data-background-style="grid"] body.donate-page {
  background-image:
    linear-gradient(color-mix(in srgb, var(--dt-accent-primary) 8%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--dt-accent-primary) 8%, transparent) 1px, transparent 1px),
    var(--dt-page-bg);
  background-size: 34px 34px, 34px 34px, cover;
}

html.donate-theme-root[data-background-style="dots"],
html.donate-theme-root[data-background-style="dots"] body.donate-page {
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--dt-accent-primary) 18%, transparent) 1.25px, transparent 1.5px),
    var(--dt-page-bg);
  background-size: 24px 24px, cover;
}

html.donate-theme-root[data-background-style="clean"],
html.donate-theme-root[data-background-style="clean"] body.donate-page {
  background: var(--dt-input);
}

/* ===== MẬT ĐỘ ===== */

html.donate-theme-root[data-density="compact"] body.donate-page .label {
  margin-top: 12px;
  margin-bottom: 6px;
}

html.donate-theme-root[data-density="compact"] body.donate-page input,
html.donate-theme-root[data-density="compact"] body.donate-page select {
  padding-top: 9px;
  padding-bottom: 9px;
}

html.donate-theme-root[data-density="compact"] body.donate-page textarea {
  height: 118px;
}

html.donate-theme-root[data-density="compact"] body.donate-page button.main-btn {
  margin-top: 14px;
  margin-bottom: 20px;
  padding: 11px;
}

html.donate-theme-root[data-density="comfortable"] body.donate-page .label {
  margin-top: 17px;
}

html.donate-theme-root[data-density="spacious"] body.donate-page .label {
  margin-top: 22px;
  margin-bottom: 10px;
}

html.donate-theme-root[data-density="spacious"] body.donate-page input,
html.donate-theme-root[data-density="spacious"] body.donate-page select {
  padding-top: 14px;
  padding-bottom: 14px;
}

html.donate-theme-root[data-density="spacious"] body.donate-page textarea {
  height: 178px;
}

html.donate-theme-root[data-density="spacious"] body.donate-page button.main-btn {
  padding: 16px;
}

/* ===== FONT ===== */

html.donate-theme-root[data-font-style="modern"] body.donate-page {
  font-family: "Poppins", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -.005em;
}

html.donate-theme-root[data-font-style="system"] body.donate-page {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

html.donate-theme-root[data-font-style="rounded"] body.donate-page {
  font-family: ui-rounded, "Arial Rounded MT Bold", "Poppins", system-ui, sans-serif;
  letter-spacing: .005em;
}

/* ===== AVATAR KÊNH ===== */

html.donate-theme-root[data-avatar-style="circle"] body.donate-page .avatar-big,
html.donate-theme-root[data-avatar-style="circle"] body.donate-page .avatar-big img {
  border-radius: 50%;
}

html.donate-theme-root[data-avatar-style="rounded"] body.donate-page .avatar-big {
  border-radius: 25px;
}

html.donate-theme-root[data-avatar-style="rounded"] body.donate-page .avatar-big img {
  border-radius: 20px;
}

html.donate-theme-root[data-avatar-style="square"] body.donate-page .avatar-big {
  border-radius: 10px;
}

html.donate-theme-root[data-avatar-style="square"] body.donate-page .avatar-big img {
  border-radius: 6px;
}

/* ===== BANNER ===== */

html.donate-theme-root[data-banner-style="cinematic"] body.donate-page .banner {
  box-shadow: 0 20px 45px rgba(0, 0, 0, .34);
}

html.donate-theme-root[data-banner-style="cinematic"] body.donate-page .banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 38%, color-mix(in srgb, var(--dt-surface) 72%, transparent));
}

html.donate-theme-root[data-banner-style="framed"] body.donate-page .banner {
  border: 2px solid color-mix(in srgb, var(--dt-accent-primary) 48%, transparent);
  outline: 1px solid color-mix(in srgb, var(--dt-accent-secondary) 20%, transparent);
  outline-offset: 4px;
  box-shadow: 0 0 26px color-mix(in srgb, var(--dt-accent-primary) 14%, transparent);
}

html.donate-theme-root[data-banner-style="minimal"] body.donate-page .banner {
  box-shadow: none;
}

html.donate-theme-root[data-banner-style="minimal"] body.donate-page .banner::before {
  filter: saturate(.82) contrast(.96);
}

html.donate-theme-root[data-banner-style="minimal"] body.donate-page .banner:hover::before {
  transform: none;
}

/* ===== CHUYỂN ĐỘNG ===== */

html.donate-theme-root[data-motion="off"] body.donate-page *,
html.donate-theme-root[data-motion="off"] body.donate-page *::before,
html.donate-theme-root[data-motion="off"] body.donate-page *::after {
  animation: none !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}

html.donate-theme-root[data-motion="off"] body.donate-page .lb-row {
  opacity: 1;
  transform: none;
}

html.donate-theme-root[data-motion="subtle"] body.donate-page .donate-card,
html.donate-theme-root[data-motion="subtle"] body.donate-page button,
html.donate-theme-root[data-motion="subtle"] body.donate-page input,
html.donate-theme-root[data-motion="subtle"] body.donate-page textarea,
html.donate-theme-root[data-motion="subtle"] body.donate-page select {
  transition-duration: .22s;
}

html.donate-theme-root[data-motion="lively"] body.donate-page .navbar-logo {
  animation-duration: 70s;
}

html.donate-theme-root[data-motion="lively"] body.donate-page .donate-card,
html.donate-theme-root[data-motion="lively"] body.donate-page button.main-btn {
  transition: transform .24s ease, box-shadow .24s ease, filter .24s ease;
}

html.donate-theme-root[data-motion="lively"] body.donate-page .donate-card:hover {
  transform: translateY(-2px);
}

html.donate-theme-root[data-motion="lively"] body.donate-page button.main-btn:hover {
  transform: translateY(-2px) scale(1.008);
}

@media (prefers-reduced-motion: reduce) {
  html.donate-theme-root body.donate-page *,
  html.donate-theme-root body.donate-page *::before,
  html.donate-theme-root body.donate-page *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  html.donate-theme-root body.donate-page .lb-row {
    opacity: 1;
    transform: none;
  }
}

/* ===== FALLBACK CHO TRÌNH DUYỆT KHÔNG CÓ COLOR-MIX ===== */

@supports not (color: color-mix(in srgb, #fff 50%, #000)) {
  html.donate-theme-root[data-surface-style="glass"] body.donate-page .container,
  html.donate-theme-root[data-surface-style="glass"] body.donate-page .left-col > form,
  html.donate-theme-root[data-surface-style="glass"] body.donate-page .leaderboard-sticky,
  html.donate-theme-root[data-surface-style="glass"] body.donate-page .right-col {
    background: rgba(15, 23, 42, .82);
  }

  html.donate-theme-root[data-background-style="aurora"],
  html.donate-theme-root[data-background-style="aurora"] body.donate-page,
  html.donate-theme-root[data-background-style="grid"],
  html.donate-theme-root[data-background-style="grid"] body.donate-page,
  html.donate-theme-root[data-background-style="dots"],
  html.donate-theme-root[data-background-style="dots"] body.donate-page {
    background: var(--dt-page-bg);
  }
}

/* ===== MOBILE: KHÔNG CHO STYLE PHÁ BỐ CỤC MỘT CỘT ===== */

@media (max-width: 768px) {
  html.donate-theme-root[data-surface-style] body.donate-page .left-col > form,
  html.donate-theme-root[data-surface-style] body.donate-page .leaderboard-sticky,
  html.donate-theme-root[data-surface-style] body.donate-page .right-col {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  html.donate-theme-root body.donate-page .right-col {
    min-width: 0;
  }

  html.donate-theme-root:not([data-donate-frame-style="original"]) body.donate-page #donateForm {
    padding: min(var(--dt-donate-frame-padding), 20px) 0;
  }

  html.donate-theme-root:not([data-leaderboard-style="original"]) body.donate-page .leaderboard-sticky {
    min-width: 0;
    padding: min(var(--dt-leaderboard-padding), 18px) 0;
  }

  html.donate-theme-root:not([data-history-panel-style="original"]) body.donate-page .right-col {
    min-width: 0;
    padding: min(var(--dt-history-panel-padding), 18px) 0;
  }

  html.donate-theme-root:not([data-leaderboard-row-style="original"]) body.donate-page #leaderboard .lb-row,
  html.donate-theme-root:not([data-history-panel-row-style="original"]) body.donate-page #history > .donate-card {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  html.donate-theme-root[data-leaderboard-sizing="custom"] body.donate-page #leaderboard .donate-avatar {
    width: min(var(--dt-leaderboard-avatar-size), 50px);
    height: min(var(--dt-leaderboard-avatar-size), 50px);
    flex-basis: min(var(--dt-leaderboard-avatar-size), 50px);
  }

  html.donate-theme-root[data-history-panel-sizing="custom"] body.donate-page #history > .donate-card > .donate-avatar {
    width: min(var(--dt-history-panel-avatar-size), 50px);
    height: min(var(--dt-history-panel-avatar-size), 50px);
    flex-basis: min(var(--dt-history-panel-avatar-size), 50px);
  }

  html.donate-theme-root[data-leaderboard-sizing="custom"] body.donate-page #leaderboard .donate-avatar > .avatar-frame {
    width: min(calc(var(--dt-leaderboard-avatar-size) + 12px), 62px);
    height: min(calc(var(--dt-leaderboard-avatar-size) + 12px), 62px);
  }

  html.donate-theme-root[data-history-panel-sizing="custom"] body.donate-page #history > .donate-card > .donate-avatar > .avatar-frame {
    width: min(calc(var(--dt-history-panel-avatar-size) + 12px), 62px);
    height: min(calc(var(--dt-history-panel-avatar-size) + 12px), 62px);
  }

  html.donate-theme-root[data-nav-style="floating"] body.donate-page .top-navbar {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }

  html.donate-theme-root[data-tab-style="segmented"] body.donate-page .message-tabs {
    overflow-x: auto;
  }

  html.donate-theme-root[data-tab-style="segmented"] body.donate-page .msg-tab {
    min-width: max-content;
  }
}