/* custom.css */

/* =====================
   GLOBAL VARIABLES
===================== */
:root {
  --color-primary: #3b82f6;
  --color-secondary: #10b981;

  --radius-none: 0;
  --radius-sm: 4px;
  --radius-default: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-full: 9999px;
  --radius-button: 8px;
}

/* =====================
   CUSTOM UTILITIES
===================== */

/* Colors */
.bg-primary {
  background-color: var(--color-primary);
}
.bg-secondary {
  background-color: var(--color-secondary);
}
.text-primary {
  color: var(--color-primary);
}
.text-secondary {
  color: var(--color-secondary);
}
.bg-primary\/20 {
    background-color: rgb(59 130 246 / 0.2);
}

/* Border radius */
.rounded-button {
  border-radius: var(--radius-button);
}
.rounded-default {
  border-radius: var(--radius-default);
}

/* Buttons */
.btn-primary {
  background-color: var(--color-primary);
  color: #fff;
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-button);
  font-weight: 500;
  transition: background-color 0.2s ease;
}
.btn-primary:hover {
  background-color: #2563eb;
}

/* =====================
   EFFECTS (từ code cũ)
===================== */
.product-card {
  transition: all 0.3s ease;
}
.product-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 20px 25px -5px rgba(0,0,0,.1),
    0 10px 10px -5px rgba(0,0,0,.04);
}

.team-overlay {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.team-card:hover .team-overlay {
  opacity: 1;
}

/* =====================
   LOGO CAROUSEL
===================== */
.logo-carousel {
  display: flex;
  animation: scroll 30s linear infinite;
}
@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* =====================
   BASE
===================== */
body {
  font-family: 'Roboto', sans-serif;
}