@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@400;600;700;800&display=swap');

:root {
  /* 🎨 Bảng màu Claymorphism — pastel tím chủ đạo + 4 accent xoay vòng */
  --clay-bg: #EDE4FB;
  --clay-bg-2: #F6F1FD;

  --clay-primary: #9B87F5;
  --clay-primary-dark: #7C67D9;
  --clay-primary-light: #C9BEFA;

  --clay-pink: #FF9FC7;
  --clay-pink-dark: #E877A8;
  --clay-yellow: #FFD976;
  --clay-yellow-dark: #F2BE4A;
  --clay-blue: #8FD3FE;
  --clay-blue-dark: #5EB8ED;
  --clay-green: #A8E6B8;
  --clay-green-dark: #6FCE8A;

  --clay-card: #FBF9FF;
  --clay-text: #3D3358;
  --clay-text-muted: #9089A8;
  --clay-border: #E4D9F7;

  /* 🎯 Bí danh tương thích ngược — mọi trang cũ dùng biến này sẽ tự động đổi giao diện */
  --navy: var(--clay-primary);
  --navy-dark: var(--clay-primary-dark);
  --teal: var(--clay-blue);
  --card-bg: var(--clay-card);
  --page-bg: var(--clay-bg);
  --text-main: var(--clay-text);
  --text-muted: var(--clay-text-muted);
  --success: var(--clay-green-dark);
  --danger: var(--clay-pink-dark);
  --border: var(--clay-border);

  --font-main: "Nunito", sans-serif;
  --font-display: "Baloo 2", sans-serif;
  --radius: 24px;

  /* 🧵 Đổ bóng Claymorphism — kết hợp bóng sáng (trên-trái) + bóng màu mềm (dưới-phải) */
  --clay-shadow-raised: 8px 8px 18px rgba(124, 103, 217, 0.18), -8px -8px 18px rgba(255, 255, 255, 0.85);
  --clay-shadow-pressed: inset 4px 4px 10px rgba(124, 103, 217, 0.20), inset -4px -4px 10px rgba(255, 255, 255, 0.7);
  --clay-shadow-soft: 6px 6px 14px rgba(124, 103, 217, 0.14), -6px -6px 14px rgba(255, 255, 255, 0.8);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-main);
  background: linear-gradient(160deg, var(--clay-bg) 0%, var(--clay-bg-2) 100%);
  color: var(--clay-text);
}

h1, h2, h3, .font-display {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--clay-text);
}

/* =========================================================================
   BUTTON — Nổi khối clay, ấn xuống khi bấm
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 16px;
  padding: 12px 24px;
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--clay-shadow-raised);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active {
  transform: translateY(1px);
  box-shadow: var(--clay-shadow-pressed);
}

.btn-primary { background: linear-gradient(145deg, var(--clay-primary-light), var(--clay-primary)); color: #fff; }
.btn-success { background: linear-gradient(145deg, #C3F2CE, var(--clay-green-dark)); color: #1E4B2A; }
.btn-danger  { background: linear-gradient(145deg, #FFC2DE, var(--clay-pink-dark)); color: #6B1039; }
.btn-teal    { background: linear-gradient(145deg, #C6EBFF, var(--clay-blue-dark)); color: #0D3A54; }

/* =========================================================================
   CARD — Khối clay nổi mềm mại, bo góc lớn
   ========================================================================= */
.card {
  background: var(--clay-card);
  border-radius: var(--radius);
  border: none;
  box-shadow: var(--clay-shadow-raised);
}

/* =========================================================================
   INPUT — Lõm nhẹ kiểu clay (pressed-in)
   ========================================================================= */
.input {
  width: 100%;
  padding: 13px 16px;
  border-radius: 14px;
  border: none;
  background: var(--clay-bg-2);
  box-shadow: var(--clay-shadow-pressed);
  font-size: 14px;
  font-family: var(--font-main);
  color: var(--clay-text);
}
.input::placeholder { color: var(--clay-text-muted); }
.input:focus {
  outline: none;
  box-shadow: var(--clay-shadow-pressed), 0 0 0 3px var(--clay-primary-light);
}

.text-muted { color: var(--clay-text-muted); }
.text-danger { color: var(--clay-pink-dark); }
.text-success { color: var(--clay-green-dark); }

/* =========================================================================
   Badge tròn icon màu — dùng cho thẻ số liệu (stat card)
   ========================================================================= */
.clay-icon-badge {
  width: 44px; height: 44px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  box-shadow: var(--clay-shadow-soft);
  flex-shrink: 0;
}
.badge-purple { background: linear-gradient(145deg, var(--clay-primary-light), var(--clay-primary)); }
.badge-pink   { background: linear-gradient(145deg, #FFCFE3, var(--clay-pink)); }
.badge-yellow { background: linear-gradient(145deg, #FFF0C2, var(--clay-yellow)); }
.badge-blue   { background: linear-gradient(145deg, #D5F0FF, var(--clay-blue)); }
.badge-green  { background: linear-gradient(145deg, #D6F5DD, var(--clay-green)); }