/* Liquid Glass – hệ thống giao diện dùng chung (lấy cảm hứng visionOS) */
:root {
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
  --tx: #ffffff; --tx2: rgba(255, 255, 255, 0.72); --tx3: rgba(255, 255, 255, 0.5);
  --g-fill: linear-gradient(135deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.06) 55%, rgba(255, 255, 255, 0.11)), rgba(30, 30, 36, 0.30);
  --g-fill-strong: linear-gradient(135deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.12));
  --g-dark: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03)), rgba(22, 22, 28, 0.55);
  --g-blur: blur(30px) saturate(190%) brightness(1.04);
  --g-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset, 0 -1px 0 rgba(255, 255, 255, 0.10) inset, 0 0 0 0.5px rgba(255, 255, 255, 0.28) inset, 0 18px 50px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.16);
  --a1: #8fd3ff; --a2: #6ff0e0; --a3: #ffd27a;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
.glass {
  position: relative; color: var(--tx);
  background: var(--g-fill);
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  box-shadow: var(--g-shadow);
  border-radius: 28px;
  isolation: isolate;
}
/* viền phản quang (specular rim) */
.glass::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: -1;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.05) 30%, rgba(255, 255, 255, 0.0) 60%, rgba(255, 255, 255, 0.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
/* ánh sáng khuếch tán bên trong */
.glass::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(120% 80% at 20% 0%, rgba(255, 255, 255, 0.16), transparent 55%);
}
.glass.dark { background: var(--g-dark); }
.pill { border-radius: 999px; }
.gbtn {
  appearance: none; border: 0; color: var(--tx); font: 500 14px/1 var(--font); letter-spacing: -0.01em;
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, 0.10); box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 0.3) inset;
  transition: background .25s var(--ease), transform .2s var(--ease), box-shadow .25s;
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
}
.gbtn:hover { background: rgba(255, 255, 255, 0.22); }
.gbtn:active { transform: scale(0.97); }
.gbtn.on { background: rgba(255, 255, 255, 0.92); color: #111; box-shadow: 0 6px 20px rgba(255, 255, 255, 0.25); }
.gbtn.icon { width: 44px; height: 44px; padding: 0; justify-content: center; }
.gbtn svg { width: 18px; height: 18px; flex: none; }
.gbtn:disabled { opacity: .4; cursor: not-allowed; }
.seg { display: inline-flex; gap: 2px; padding: 5px; border-radius: 999px; }
.seg button { text-shadow: 0 1px 8px rgba(0,0,0,.35); appearance: none; border: 0; background: transparent; color: var(--tx); font: 500 14px var(--font); padding: 9px 18px; border-radius: 999px; cursor: pointer; transition: .3s var(--ease); display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.seg button small { font-size: 11px; color: var(--tx3); font-weight: 400; transition: color .3s; }
.seg button:hover { background: rgba(255, 255, 255, 0.1); }
.seg button.on { text-shadow: none; background: rgba(255, 255, 255, 0.9); color: #111; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); }
.seg button.on small { color: rgba(0, 0, 0, 0.55); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font: 600 11px var(--font); letter-spacing: .02em; background: rgba(0, 0, 0, 0.32); box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.3) inset; }
.chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.c1 { color: var(--a1); } .c2 { color: var(--a2); } .c3 { color: var(--a3); }