/* Template 8 - Kaiyun / Flatsome inspired */
body.tpl8-body {
  background-color: #f0f6ff;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  color: #515a75;
}

#header-8 {
  position: sticky;
  top: 0;
  z-index: 999;
  background: #fff;
  box-shadow: 0 2px 16px rgba(54, 66, 106, 0.08);
}

#header-8 .navbar-brand img {
  max-height: 70px;
  max-width: 160px;
}

#header-8 .nav-link {
  color: #446084 !important;
  font-weight: 500;
  padding: 0.5rem 1rem !important;
}

#header-8 .nav-link:hover,
#header-8 .nav-link.active {
  color: #3366ff !important;
}

#header-8 .btn-tpl8-app {
  background: linear-gradient(135deg, #d26e4b, #b20000);
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 0.55rem 1.25rem;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(178, 0, 0, 0.25);
}

#header-8 .btn-tpl8-app:hover {
  color: #fff;
  opacity: 0.92;
}

.tpl8-section-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: rgba(57, 101, 228, 0.9);
  text-align: center;
  margin-bottom: 1.5rem;
}

.tpl8-btn-primary {
  display: inline-block;
  text-align: center;
  line-height: 48px;
  border-radius: 64px;
  border: 1px solid #fff;
  color: #515a75;
  background: linear-gradient(180deg, #fff 5.67%, #e5edff 73.94%, #fff 101.97%);
  box-shadow: 5px 6px 10px #36426a12, -5px -6px 10px #ffffff4d;
  padding: 0 2rem;
  text-decoration: none;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s;
}

.tpl8-btn-primary:hover {
  color: #3366ff;
  transform: translateY(-2px);
}

.tpl8-card {
  border: 5px solid #fafcff;
  border-radius: 30px;
  box-shadow: 0 10px 20px 0 rgba(205, 210, 221, 0.6);
  background: rgba(255, 255, 255, 0.85);
  overflow: hidden;
  transition: box-shadow 0.3s;
}

.tpl8-card:hover {
  box-shadow: 0 14px 28px 0 rgba(205, 210, 221, 0.75);
}

.tpl8-card-inner {
  border-radius: 25px;
  padding: 1.5rem;
}

.tpl8-nav-pills {
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.tpl8-nav-pills .nav-link {
  border-radius: 30px;
  color: #446084;
  background: #fff;
  box-shadow: 8px 8px 30px 8px rgba(194, 211, 222, 0.5);
  padding: 0.65rem 1.5rem;
  font-weight: 500;
  border: none;
}

.tpl8-nav-pills .nav-link.active {
  background: linear-gradient(135deg, #3965e4, #3366ff);
  color: #fff;
  box-shadow: 8px 8px 24px rgba(51, 102, 255, 0.35);
}

.tpl8-tab-panel {
  display: none;
}

.tpl8-tab-panel.active {
  display: block;
}

.tpl8-hero-swiper {
  border-radius: 0 0 24px 24px;
  overflow: hidden;
}

.tpl8-hero-swiper .swiper-slide img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
}

.tpl8-news-card {
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  border: 3px solid #fafcff;
  box-shadow: 0 8px 24px rgba(205, 210, 221, 0.45);
  height: 100%;
}

.tpl8-news-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.tpl8-page-hero {
  background: linear-gradient(135deg, #e5edff 0%, #f0f6ff 50%, #fff 100%);
  padding: 2.5rem 0;
  border-bottom: 1px solid rgba(68, 96, 132, 0.1);
}

.tpl8-breadcrumb .breadcrumb-item a {
  color: #3366ff;
  text-decoration: none;
}

.tpl8-article-box {
  background: #fff;
  border: 5px solid #fafcff;
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(205, 210, 221, 0.5);
  padding: 2rem;
}

.tpl8-list-item {
  background: #fff;
  border: 3px solid #fafcff;
  border-radius: 20px;
  box-shadow: 0 6px 18px rgba(205, 210, 221, 0.4);
  transition: transform 0.2s, box-shadow 0.2s;
  overflow: hidden;
}

.tpl8-list-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(205, 210, 221, 0.55);
}

#footer-8 {
  background: #fff;
  border-top: 1px solid rgba(68, 96, 132, 0.12);
  color: rgba(94, 122, 173, 0.95);
}

#footer-8 h6 {
  color: #3366ff;
  font-weight: 700;
}

#footer-8 a {
  color: rgba(94, 122, 173, 0.95);
  text-decoration: none;
}

#footer-8 a:hover {
  color: #3366ff;
}

#footer-8 .footer-copy {
  border-top: 1px solid rgba(68, 96, 132, 0.1);
  color: #7a8cad;
  font-size: 0.875rem;
}

.service-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e5edff, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #3366ff;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  #header-8 .navbar-brand img {
    max-height: 50px;
  }
  .tpl8-section-title {
    font-size: 1.35rem;
  }
}

/* Override template-7 markup when using tpl8 skin */
body.tpl8-body #header-6 {
  background: #fff !important;
  box-shadow: 0 2px 16px rgba(54, 66, 106, 0.08);
}

body.tpl8-body #header-6 .navbar {
  background: #fff !important;
}

body.tpl8-body #header-6 .nav-link {
  color: #446084 !important;
}

body.tpl8-body #header-6 .nav-link.active,
body.tpl8-body #header-6 .nav-link:hover {
  color: #3366ff !important;
  text-decoration: none;
}

body.tpl8-body #header-6 .btn-outline-light {
  color: #fff !important;
  background: linear-gradient(135deg, #d26e4b, #b20000) !important;
  border: none !important;
  border-radius: 5px;
  box-shadow: 0 4px 12px rgba(178, 0, 0, 0.2);
}

body.tpl8-body #hero-6 {
  background: linear-gradient(180deg, #e8f0ff 0%, #f0f6ff 100%) !important;
  color: #446084 !important;
  min-height: auto;
  padding: 3rem 1rem;
}

body.tpl8-body #hero-6 h1,
body.tpl8-body #hero-6 p,
body.tpl8-body #hero-6 strong {
  color: #446084 !important;
}

body.tpl8-body .btn-hero6-primary,
body.tpl8-body .btn-hero6-secondary,
body.tpl8-body .btn-gradient {
  border-radius: 64px !important;
  background: linear-gradient(180deg, #fff 5.67%, #e5edff 73.94%, #fff 101.97%) !important;
  color: #515a75 !important;
  border: 1px solid #fff !important;
  box-shadow: 5px 6px 10px #36426a12, -5px -6px 10px #ffffff4d;
}

body.tpl8-body .whyus11-card,
body.tpl8-body .stats-card,
body.tpl8-body .news13-card,
body.tpl8-body .bg-white.rounded.shadow-sm,
body.tpl8-body .tpl8-list-item {
  border: 5px solid #fafcff !important;
  border-radius: 24px !important;
  box-shadow: 0 10px 20px rgba(205, 210, 221, 0.55) !important;
}

body.tpl8-body #departments-11 .tab-btn {
  border-radius: 30px;
  color: #446084;
  background: #fff;
  box-shadow: 8px 8px 24px rgba(194, 211, 222, 0.45);
  border: none;
}

body.tpl8-body #departments-11 .tab-btn.active {
  background: linear-gradient(135deg, #3965e4, #3366ff);
  color: #fff;
}

body.tpl8-body #departments-11 .tab-panel {
  background: #fff;
  border: 5px solid #fafcff;
  border-radius: 24px;
  box-shadow: 0 10px 24px rgba(205, 210, 221, 0.45);
}

body.tpl8-body #footer-10 {
  background: #fff !important;
  color: rgba(94, 122, 173, 0.95) !important;
  border-top: 1px solid rgba(68, 96, 132, 0.12);
}

body.tpl8-body #footer-10::before,
body.tpl8-body #footer-10 > div[style*="rgba(0,0,0"] {
  display: none !important;
}

body.tpl8-body #footer-10 h6,
body.tpl8-body #footer-10 .text-info,
body.tpl8-body #footer-10 .text-warning {
  color: #3366ff !important;
}

body.tpl8-body #footer-10 a,
body.tpl8-body #footer-10 .text-white-50,
body.tpl8-body #footer-10 .text-light {
  color: rgba(94, 122, 173, 0.95) !important;
}

body.tpl8-body #footer-10 a:hover {
  color: #3366ff !important;
}

body.tpl8-body #related-10,
body.tpl8-body #related-7 {
  background: #e8f0ff !important;
  color: #446084 !important;
}

body.tpl8-body #related-10 .text-white,
body.tpl8-body #related-10 h2 {
  color: #446084 !important;
}

body.tpl8-body .text-primary {
  color: #3366ff !important;
}

body.tpl8-body h2.fw-bold,
body.tpl8-body .section-title {
  color: rgba(57, 101, 228, 0.9);
}

/* Template 8 rich homepage & inner pages */
.tpl8-banner-swiper {
  border-radius: 0 0 24px 24px;
  overflow: hidden;
  max-height: 460px;
}

.tpl8-banner-swiper .swiper-slide img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}

.tpl8-banner-swiper .swiper-button-prev,
.tpl8-banner-swiper .swiper-button-next {
  color: #3366ff;
}

.tpl8-game-card {
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  border: 4px solid #fafcff;
  box-shadow: 0 8px 24px rgba(205, 210, 221, 0.45);
  transition: transform 0.25s, box-shadow 0.25s;
}

.tpl8-game-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(205, 210, 221, 0.6);
}

.tpl8-game-card > img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.tpl8-side-img {
  min-height: 130px;
  object-fit: cover;
}

.tpl8-stats-banner {
  position: relative;
  background-size: cover;
  background-position: center;
}

.tpl8-stats-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(57, 101, 228, 0.82), rgba(51, 102, 255, 0.65));
  z-index: 0;
}

.tpl8-stats-banner .container {
  position: relative;
  z-index: 1;
}

.tpl8-stat-num {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.2;
}

.tpl8-mosaic-item img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform 0.35s;
}

.tpl8-mosaic-item:hover img {
  transform: scale(1.05);
}

.tpl8-mosaic-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.72));
}

.tpl8-qr-thumb {
  width: 90px;
  height: 90px;
  object-fit: cover;
}

.tpl8-news-swiper .swiper-slide {
  height: auto;
}

.tpl8-page-hero-banner {
  min-height: 260px;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
}

.tpl8-page-hero-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(57, 101, 228, 0.75), rgba(240, 246, 255, 0.5));
}

.tpl8-page-hero-banner .container {
  position: relative;
  z-index: 1;
}

.tpl8-featured-card img {
  height: 240px;
  object-fit: cover;
  width: 100%;
}

.tpl8-article-hero {
  min-height: 320px;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: flex-end;
}

.tpl8-article-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 20%, rgba(0, 0, 0, 0.65));
}

.tpl8-article-hero .container {
  position: relative;
  z-index: 1;
  padding-bottom: 2.5rem;
}

body.tpl8-body .tpl8-list-item img {
  height: 200px;
  object-fit: cover;
  width: 100%;
}