/* ============================================================
   Soccasio landing — custom styles (bổ sung cho Bootstrap 5)
   ============================================================ */
:root {
  --soc-primary: #3949ab;        /* lấy từ skin mặc định của app cũ */
  --soc-primary-dark: #283593;
  --soc-primary-light: #5c6bc0;
  --soc-accent: #ffca28;
  --soc-dark: #1a1f44;
  --soc-text: #2b2f42;
  --soc-muted: #6b7280;
  --soc-bg-alt: #f5f6fb;
}

* { scroll-behavior: smooth; }

body {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--soc-text);
  padding-top: 64px; /* chừa chỗ cho navbar fixed */
}

.py-6 { padding-top: 5rem; padding-bottom: 5rem; }

/* ---- Brand / Bootstrap overrides ---- */
.btn-primary {
  --bs-btn-bg: var(--soc-primary);
  --bs-btn-border-color: var(--soc-primary);
  --bs-btn-hover-bg: var(--soc-primary-dark);
  --bs-btn-hover-border-color: var(--soc-primary-dark);
  --bs-btn-active-bg: var(--soc-primary-dark);
}
.btn-outline-primary {
  --bs-btn-color: var(--soc-primary);
  --bs-btn-border-color: var(--soc-primary);
  --bs-btn-hover-bg: var(--soc-primary);
  --bs-btn-hover-border-color: var(--soc-primary);
}
.soc-accent { color: var(--soc-accent); }
.soc-tagline { color: var(--soc-primary-light); font-weight: 600; letter-spacing: .3px; }

/* ---- Navbar ---- */
.soc-navbar {
  background: rgba(26, 31, 68, .92);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 16px rgba(0, 0, 0, .15);
}
.soc-logo-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(135deg, var(--soc-primary-light), var(--soc-accent));
  color: #fff; font-size: 1.05rem;
}
.soc-logo-img {
  width: 36px; height: 36px; border-radius: 9px; object-fit: contain;
  background: #fff;
}
.soc-logo-img-lg { width: 42px; height: 42px; border-radius: 11px; }
.soc-navbar .nav-link { font-weight: 500; }
.soc-lang .btn.active { background: #fff; color: var(--soc-dark); }

/* ---- Hero ---- */
.soc-hero {
  background: radial-gradient(1200px 500px at 80% -10%, rgba(92,107,192,.55), transparent 60%),
              linear-gradient(135deg, var(--soc-dark) 0%, var(--soc-primary) 100%);
  color: #fff;
  padding: 5.5rem 0 6rem;
  overflow: hidden;
}
.soc-badge {
  background: rgba(255, 255, 255, .14);
  color: #fff; font-weight: 500;
  padding: .5rem .9rem; border-radius: 999px;
}
.soc-hero-sub { color: rgba(255, 255, 255, .85); font-size: 1.05rem; max-width: 540px; }
.soc-hero .btn-outline-light { border-width: 2px; }

/* Hero illustration */
.soc-hero-card {
  position: relative; height: 340px;
  display: flex; align-items: center; justify-content: center;
}
.soc-hero-core {
  width: 150px; height: 150px; border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  border: 2px solid rgba(255, 255, 255, .35);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; gap: .25rem; z-index: 2;
  box-shadow: 0 0 60px rgba(92, 107, 192, .6);
}
.soc-hero-core i { font-size: 2.4rem; }
.soc-hero-logo { width: 76px; height: 76px; border-radius: 18px; object-fit: contain; background: #fff; }
.soc-hero-core span { font-weight: 600; margin-top: .15rem; }
.soc-hero-bubbles { position: absolute; inset: 0; }
.soc-hero-bubbles .bubble {
  position: absolute;
  width: 60px; height: 60px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--soc-primary); font-size: 1.5rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
  animation: soc-float 5s ease-in-out infinite;
}
.bubble.b1 { top: 6%;  left: 14%; animation-delay: 0s; }
.bubble.b2 { top: 2%;  right: 18%; animation-delay: .6s; color: var(--soc-accent); }
.bubble.b3 { top: 42%; left: 2%;  animation-delay: 1.2s; }
.bubble.b4 { bottom: 8%; left: 20%; animation-delay: 1.8s; }
.bubble.b5 { bottom: 4%; right: 16%; animation-delay: 2.4s; color: var(--soc-accent); }
.bubble.b6 { top: 40%; right: 2%;  animation-delay: 3s; }
@keyframes soc-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

/* ---- Sections ---- */
.soc-section-sub { max-width: 620px; }
.soc-section-alt { background: var(--soc-bg-alt); }

/* ---- Feature cards ---- */
.soc-feature {
  background: #fff; border: 1px solid #eef0f7; border-radius: 16px;
  padding: 1.75rem; transition: transform .2s ease, box-shadow .2s ease;
}
.soc-feature:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(57, 73, 171, .14); }
.soc-feature-icon {
  width: 56px; height: 56px; border-radius: 14px; margin-bottom: 1rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; color: #fff;
  background: linear-gradient(135deg, var(--soc-primary), var(--soc-primary-light));
}
.soc-feature p { color: var(--soc-muted); margin-bottom: 0; }

/* ---- About ---- */
.soc-check li { margin-bottom: .6rem; }
.soc-check i { color: var(--soc-primary); margin-right: .5rem; }
.soc-stat {
  background: #fff; border-radius: 16px; padding: 1.5rem; text-align: center;
  box-shadow: 0 10px 30px rgba(57, 73, 171, .08); height: 100%;
  display: flex; flex-direction: column; gap: .25rem;
}
.soc-stat-num { font-size: 2rem; font-weight: 800; color: var(--soc-primary); }
.soc-stat span:last-child { color: var(--soc-muted); font-size: .9rem; }

/* ---- Why ---- */
.soc-why {
  text-align: center; padding: 2rem 1.5rem; border-radius: 16px;
  background: #fff; border: 1px solid #eef0f7;
}
.soc-why i {
  font-size: 2.2rem; color: var(--soc-primary);
  display: inline-flex; margin-bottom: .75rem;
}
.soc-why p { color: var(--soc-muted); margin-bottom: 0; }

/* ---- Technology (nền tối) ---- */
.soc-tech {
  background: radial-gradient(900px 400px at 15% 0%, rgba(92,107,192,.45), transparent 60%),
              linear-gradient(135deg, var(--soc-dark) 0%, var(--soc-primary-dark) 100%);
  color: #fff;
}
.soc-tech-sub { color: rgba(255, 255, 255, .82); }
.soc-tech-card {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px; padding: 1.75rem;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.soc-tech-card:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 202, 40, .5);
}
.soc-tech-card h3 { color: #fff; }
.soc-tech-card p { color: rgba(255, 255, 255, .78); margin-bottom: 0; }
.soc-tech-icon {
  width: 56px; height: 56px; border-radius: 14px; margin-bottom: 1rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; color: var(--soc-dark);
  background: linear-gradient(135deg, #fff, var(--soc-accent));
}

/* ---- Services ---- */
.soc-service {
  text-align: center; padding: 2rem 1.5rem; border-radius: 16px;
  background: #fff; border: 1px solid #eef0f7;
  transition: transform .2s ease, box-shadow .2s ease;
}
.soc-service:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(57, 73, 171, .14); }
.soc-service-icon {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 1rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; color: var(--soc-primary);
  background: #eef1fb;
}
.soc-service:hover .soc-service-icon {
  background: linear-gradient(135deg, var(--soc-primary), var(--soc-primary-light));
  color: #fff;
}
.soc-service p { color: var(--soc-muted); margin-bottom: 0; }

/* ---- Contact / OTP card ---- */
.soc-card {
  background: #fff; border-radius: 20px;
  box-shadow: 0 20px 60px rgba(26, 31, 68, .12);
}
.soc-cc { max-width: 110px; flex: 0 0 auto; }
.soc-error { font-size: .875rem; color: #dc3545; min-height: 1.1rem; }
.soc-phone-display { color: var(--soc-primary); }
.soc-link { color: var(--soc-primary); text-decoration: none; }
.soc-link:hover { text-decoration: underline; }

/* OTP boxes */
.soc-otp-box {
  font-size: 1.6rem; font-weight: 700; height: 64px;
  border-radius: 12px; border: 2px solid #d8dbe9;
}
.soc-otp-box:focus {
  border-color: var(--soc-primary);
  box-shadow: 0 0 0 .2rem rgba(57, 73, 171, .2);
}
.soc-otp-box.filled { border-color: var(--soc-primary); background: #f3f5fd; }

/* Success */
.soc-success-icon {
  width: 80px; height: 80px; border-radius: 50%; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: #e7f7ed; color: #16a34a; font-size: 2.6rem;
}

/* ---- Footer ---- */
.soc-footer {
  background: var(--soc-dark); color: rgba(255, 255, 255, .8);
  padding: 3.5rem 0 1.75rem;
}
.soc-footer-title { color: #fff; margin-bottom: 1rem; letter-spacing: .5px; }
.soc-footer-links a, .soc-footer-contact a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.soc-footer-links a:hover, .soc-footer-contact a:hover { color: #fff; }
.soc-footer-links li, .soc-footer-contact li { margin-bottom: .55rem; }
.soc-footer-contact i { color: var(--soc-primary-light); margin-right: .4rem; }
.soc-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px; font-size: 1.1rem;
  background: rgba(255, 255, 255, .1); color: #fff; text-decoration: none;
  transition: background .2s ease;
}
.soc-social a:hover { background: var(--soc-primary); }
.soc-footer-divider { border-color: rgba(255, 255, 255, .15); margin: 2rem 0 1.25rem; }
.soc-copyright { color: rgba(255, 255, 255, .6); }

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
  .soc-hero { padding: 3.5rem 0 4rem; }
  .soc-hero-card { height: 280px; margin-top: 2rem; }
  .soc-lang { margin-top: .5rem; }
}
@media (max-width: 575.98px) {
  .soc-otp-box { height: 52px; font-size: 1.3rem; }
  .py-6 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
}