/* ============================
   SITE BACKGROUND = BY IMAGE
   ============================ */

/* Mặc định (chưa đăng nhập) */
:root{
  --bg-image: url('/public/bg/neutral.jpg'); /* bạn thay file của bạn */
  --bg-blur: 0px;                /* tắt blur nền */
  --bg-tint: transparent;        /* tắt lớp phủ */
  --ink-on-bg: #1a1a1a;          /* màu chữ mặc định trên background */
  --accent: #6b5cff;             /* màu nhấn mặc định (chưa login) */
}

/* Body với ảnh nền */
body{
  color: var(--ink-on-bg);
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  position: relative;
  min-height: 100vh;
}

/* Lớp phủ trước đây tạo mờ/ám màu → giờ tắt hẳn */
body::before{
  content:"";
  position: fixed; inset:0;
  backdrop-filter: none;              /* bỏ blur */
  -webkit-backdrop-filter: none;      /* bỏ blur (WebKit) */
  background: transparent;            /* bỏ tint */
  pointer-events: none;
  z-index: -1;
}

/* ============== CARD THEMED ============== */
/* Card trắng thường */
.card.plain{
  background:#fff;
  color:#222;
  border-radius:16px;
  border:1px solid #eef;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}

/* Card themed đậm (dùng khi muốn ăn theo màu tier) */
.theme-card{
  --theme-start: rgba(0,0,0,.66);
  --theme-end:   rgba(0,0,0,.35);
  --theme-border: rgba(255,255,255,.18);
  --theme-ink: #fff;

  background: linear-gradient(145deg, var(--theme-start), var(--theme-end));
  color: var(--theme-ink);
  border-radius: 16px;
  border: 1px solid var(--theme-border);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  backdrop-filter: blur(6px);
}

/* Biến thể soft (sáng hơn) */
.theme-card--soft{
  --theme-start: rgba(255,255,255,.58);
  --theme-end:   rgba(255,255,255,.30);
  --theme-border: rgba(255,255,255,.45);
  --theme-ink: #111;
}

/* Progress trên themed */
.theme-progress{
  height:10px; border-radius:999px; overflow:hidden;
  background: rgba(255,255,255,.28);
}
.theme-progress > span{
  display:block; height:100%;
  background: linear-gradient(90deg,#fff,#ffd966);
}

/* Chip / badge trên themed */
.chip, .badge{
  display:inline-block; padding:2px 8px; border-radius:999px;
  background: rgba(255,255,255,.2);
  color:inherit; font-size:12px;
}

/* Nút */
.btn{
  display:inline-block; padding:10px 14px; border-radius:12px; font-weight:700; color:#fff; border:1px solid transparent
}
.btn-outline{background:transparent; color:inherit; border-color:rgba(255,255,255,.45)}
.btn-primary{background:#fff; color:#111}

/* Bảng trong themed (không wrap cột ghi chú) */
.theme-card table{width:100%; border-collapse:collapse}
.theme-card th,.theme-card td{padding:10px 12px; text-align:left; white-space:nowrap}
.theme-card td:last-child{white-space:normal; word-break:break-word}
.theme-card tr:nth-child(even){background:rgba(255,255,255,.08)}
.theme-card tr:hover{background:rgba(255,255,255,.12)}

/* Footer / header tabs nền kính */
.header-tabs{
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(0,0,0,.05);
}

/* ============== TIER HOOKS (đổi màu accent / theme-card nhanh) ============== */
/* Khi login, trang sẽ set thêm class theo tier để đổi accent & tint nếu cần */

body.tier-Member, body.tier-member{
  --accent:#65790e;
}
body.tier-Gold, body.tier-gold{
  --accent:#675200;
}
body.tier-Diamond, body.tier-diamond{
  --accent:#06b6d4;
}
body.tier-Infinite, body.tier-infinite{
  --accent:#8b5cf6;
}

/* Có thể dùng --accent để vẽ border, icon, link… */
a, .link { color: var(--accent); }

/* === Tier background images (patched, no-blur, no-tint) === */
/* Default (not logged in / neutral) */
:root{
  --bg-image: url('/public/bg/neutral.jpg');
  --bg-blur: 0px;                 /* vẫn giữ 0 */
  --bg-tint: transparent;         /* vẫn giữ transparent */
}

/* Member */
body.tier-member{
  --bg-image: url('/public/bg/member.jpg');
  --bg-tint: transparent;
  --bg-blur: 0px;
}

/* Gold */
body.tier-gold{
  --bg-image: url('/public/bg/gold.jpg');
  --bg-tint: transparent;
  --bg-blur: 0px;
}

/* Diamond */
body.tier-diamond{
  --bg-image: url('/public/bg/diamond.jpg');
  --bg-tint: transparent;
  --bg-blur: 0px;
}

/* Infinite */
body.tier-infinite{
  --bg-image: url('/public/bg/infinite.jpg');
  --bg-tint: transparent;
  --bg-blur: 0px;
}
/* === End patch === */