:root {
      --primary-color: #ffffff;
      --text-color: #003366;
      --card-border: #ffa500;
      --shadow-card: #ffe0b3;
    }

    @keyframes rainbow {
  0% { background-position: 0% 50%; } /* Bắt đầu từ vị trí 0% */
  100% { background-position: 200% 50%; } /* Di chuyển đến vị trí 200% để tạo vòng lặp mượt mà */
}

    body {
      margin: 0;
      font-family: 'Segoe UI', sans-serif;
      background: url('https://i.pinimg.com/736x/0c/a3/51/0ca351d3116d63d1009e88cb52cd5413.jpg') no-repeat center center fixed;
      background-size: cover;s
      color: var(--text-color);
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    header {
      text-align: center;
      margin: 2rem 0 1rem;
      font-size: 2rem;
      font-weight: bold;
        font-family: "Mitr", sans-serif;
  font-weight: 600;
  font-style: normal;
      background: linear-gradient(270deg, red, rgb(237, 205, 147), yellow, green, blue, rgb(1, 213, 255), rgb(10, 245, 170), red);
      background-size: 200% 200%;
      animation: rainbow 5s linear infinite;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      color: transparent;
    }

    .socials {
      margin-top: 0.5rem;
      display: flex;
      gap: 1rem;
      justify-content: center;
    }

    .socials a img {
      width: 30px;
      height: 30px;
    }

    .card-wrapper {
      position: relative;
      margin: 3rem 1rem;
      max-width: 720px;
      width: 95%;
      overflow: visible;
    }

    .card-shadow {
      position: absolute;
      top: 10px;
      left: 10px;
      width: calc(100% - 20px);
      height: calc(100% - 10px);
      background-color: var(--shadow-card);
      border-radius: 10px;
      z-index: 0;
      opacity: 0.6;
      filter: blur(2px);
    }
@keyframes rainbow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.social-container {
  display: inline-block;
  padding: 2px;
  border-radius: 10px;
  background: linear-gradient(270deg, red, orange, yellow, rgb(107, 107, 255), rgb(241, 248, 46), violet, red);
  background-size: 400% 400%;
  animation: rainbow 5s linear infinite;
}

.social-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: white; /* Nền trắng */
  padding: 0.5rem 1rem;
  border-radius: 8px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  border: 1.5px solid white; /* Viền trắng ban đầu để cách biệt */
}

.social-container:hover .social-link {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(255, 140, 0, 0.3); /* bóng phía dưới */
}

.social-link img {
  width: 30px;
  height: 30px;
}

.social-title {
  font-family: "Varela Round", sans-serif;
  font-style: normal;
  font-weight: bold;
  color: #ff6600; /* Màu chữ cam */
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  text-shadow:
    0 1px 1px rgba(255, 140, 0, 0.4),  /* bóng nhạt gần */
    0 2px 3px rgba(255, 102, 0, 0.8); /* bóng đậm xa hơn */
}

.rainbow-arrow {
  background: linear-gradient(270deg, red, orange, yellow, green, blue, indigo, violet, red);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  animation: rainbow 3s linear infinite;
  font-weight: bolder;
}


    .card {
      position: relative;
      background-color: var(--primary-color);
      border: 1.2px solid #ffa500b3;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 0 0 1px #ff8c00, 0 4px 12px rgba(0,0,0,0.3);
      display: flex;
      flex-direction: column;
      transition: transform 0.2s ease;
      cursor: pointer;
      z-index: 1;
    }

    .card:hover {
      transform: translateY(-6px);
    }

    .card img {
      width: 100%;
      height: auto;
      object-fit: cover;
    }

    .card-content {
      padding: 1.5rem 1rem 2rem;
      text-align: center;
      font-weight: 500;
      font-size: 1.1rem;
    }
    .separator {
      font-family: "Varela Round", sans-serif;
      font-weight: 400;
      font-style: normal;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 1rem 0;
      width: 100%;
      font-size: 1.5rem;
      color: white;
      text-shadow: 0 0 8px #fff, 0 0 15px #ffd700, 0 0 20px #ffec8b;
    }

    .separator::before,
    .separator::after {
      content: '';
      flex: 1;
      border-top: 2px solid #fff;
      margin: 0 10px;
    }
    .card {
    font-family: "Rowdies", sans-serif;
    font-weight: 400;
    font-style: normal;
    }
    footer {
  font-family: "Varela Round", sans-serif;
  font-weight: 400;
  font-style: normal;
    font-size: 30px;
      margin: 2rem 0;
      color: #ffffff;
      font-weight: bold;
      text-shadow: 1px 1px 2px rgb(253, 169, 0);
    }
    /* RESPONSIVE CHO CARD NỘI DUNG */
.card-content {
  font-family: "Rowdies", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.1rem;
  text-align: center;
  padding: 1.5rem 1rem 2rem;
}
a {
  text-decoration: none;
  color: #000000; /* Hoặc màu bạn muốn */
}

/* Responsive: Tablet và Mobile vừa */
@media (max-width: 768px) {
  .card-content {
  font-family: "Rowdies", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.1rem;
  text-align: center;
  padding: 1.5rem 1rem 2rem;
}
a {
  text-decoration: none;
  color: #000000; /* Hoặc màu bạn muốn */
}
@keyframes rainbow-run {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.card-content{
  font-weight: bold;
  background: linear-gradient(90deg, rgb(178, 150, 150), rgb(223, 99, 22));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
.card:hover .card-content{
background: linear-gradient(270deg, rgb(43, 200, 224), rgb(206, 85, 137), rgb(213, 213, 53), rgb(154, 221, 154), rgb(229, 155, 155));
  background-size: 200% 200%;
  animation: rainbow-run 3s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
  .social-title {
    font-family: "Varela Round", sans-serif;
  font-style: normal;
    font-size: 0.9rem;
  }
    footer {
    font-family: "Genos", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 30px;
      margin: 2rem 0;
      color: #ffffff;
      font-weight: bold;
      text-shadow: 1px 1px 2px rgb(253, 169, 0);
    }
  header {
      text-align: center;
      margin: 2rem 0 1rem;
      font-size: 2rem;
      font-weight: bold;
      font-family: "Calistoga", serif;
      font-weight: 400;
      font-style: normal;
      background: linear-gradient(270deg, red, rgb(237, 205, 147), yellow, green, blue, rgb(1, 213, 255), rgb(10, 245, 170), red);
      background-size: 200% 200%;
      animation: rainbow 5s linear infinite;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      color: transparent;
    font-size: 1.5rem;
  }
}

/* Responsive: Điện thoại nhỏ */
@media (max-width: 480px) {
  .card-content {
  font-family: "Rowdies", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.1rem;
  text-align: center;
  padding: 1.5rem 1rem 2rem;
}
a {
  text-decoration: none;
  color: #000000; /* Hoặc màu bạn muốn */
}
    footer {
    font-family: "Genos", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 30px;
      margin: 2rem 0;
      color: #ffffff;
      font-weight: bold;
      text-shadow: 1px 1px 2px rgb(253, 169, 0);
    }
  .social-title {
    font-family: "Varela Round", sans-serif;
  font-style: normal;
    font-size: 0.8rem;
  }
  @keyframes rainbow-run {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.card-content{
  font-weight: bold;
  background: linear-gradient(90deg, rgb(178, 150, 150), rgb(223, 99, 22));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
.card:hover .card-content{
background: linear-gradient(270deg, rgb(43, 200, 224), rgb(206, 85, 137), rgb(213, 213, 53), rgb(154, 221, 154), rgb(229, 155, 155));
  background-size: 200% 200%;
  animation: rainbow-run 3s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
  header {
      text-align: center;
      margin: 2rem 0 1rem;
      font-size: 2rem;
      font-weight: bold;
      font-family: "Calistoga", serif;
      font-weight: 400;
      font-style: normal;
      background: linear-gradient(270deg, red, rgb(237, 205, 147), yellow, green, blue, rgb(1, 213, 255), rgb(10, 245, 170), red);
      background-size: 200% 200%;
      animation: rainbow 5s linear infinite;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      color: transparent;
    font-size: 1.2rem;
  }
}
@keyframes rainbow-run {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.card-content{
  font-weight: bold;
  background: linear-gradient(90deg, rgb(178, 150, 150), rgb(223, 99, 22));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
.card:hover .card-content{
background: linear-gradient(270deg, rgb(43, 200, 224), rgb(206, 85, 137), rgb(213, 213, 53), rgb(154, 221, 154), rgb(229, 155, 155));
  background-size: 200% 200%;
  animation: rainbow-run 3s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}