/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

.footer-top ul li {
    margin-left: 0px;
}

.combo-course .title{font-size:28px;font-weight:700;margin-bottom:.5em;margin-top:30px}.combo-course .combo-item{border:1px solid #969bab;text-align:center;padding:15px;min-height:350px}.combo-course .combo-item .combo-gallery{display:flex;align-items:center;margin:auto;transition:all .5s;margin-left:20%}.combo-course .combo-item .combo-gallery .combo-image{max-height:180px}.combo-course .combo-item .combo-gallery .combo-image img{max-height:180px}.combo-course .combo-item .combo-gallery .combo-image:first-child{width:50%}.combo-course .combo-item .combo-gallery .combo-image:nth-child(2){width:50%;margin-left:-20%;transition:all .5s;max-height:175px}.combo-course .combo-item .combo-gallery:hover{margin-left:0}.combo-course .combo-item .combo-gallery:hover .combo-image:nth-child(2){margin-left:0}.combo-course .pure-u-1:nth-child(2) .combo-item{border-left:none;border-right:none}.combo-course .combo-item a:hover{text-decoration:none}.combo-course .combo-item .combo-title{font-size:16px;font-weight:700;color:#18191f;line-height:1.5em;min-height:50px}.combo-course .combo-item .sale-price{font-size:18px;color:#ef004a;font-weight:700;margin:0}.combo-course .combo-item .regular-price{font-size:14px;color:#969bab;margin-top:.5em}.combo-course .combo-item .combo-img{min-height:154px}
@media(max-width:768px){.combo-course .combo-item .combo-gallery{margin-left:0}.combo-course .combo-item .combo-gallery .combo-image:nth-child(2){margin-left:0;max-height:180px}}
@media(max-width:600px){.combo-course .title{font-size:20px}.combo-course .combo-item{margin-bottom:15px}.combo-course .pure-u-1:nth-child(2) .combo-item{border-left:1px solid #969bab;border-right:1px solid #969bab}}
.trials{margin:20px 0 50px}.trials .title{font-size:28px;font-weight:700;margin-bottom:.5em}.trials .trial .pure-u-1:first-child .trial-item{background-color:#6758b8}.trials .trial .pure-u-1:nth-child(2) .trial-item{background-color:#3f75c6}.trials .trial .pure-u-1:last-child .trial-item{background-color:#dbc164}.trials .trial .trial-item{text-align:center;padding:15px}.trials .trial .trial-item .trial-title{color:#f4f5f7;font-size:16px;line-height:1.3;font-weight:700}.trials .trial .trial-item .trial-img{margin:auto}.trials .trial .trial-item .trial-link{color:#fff;font-size:12px;padding:6px 12px;border-radius:6px;background-color:#ff5250;display:block;width:fit-content;margin:20px auto 10px;text-decoration:none;transition:all .5s}.trials .trial .trial-item .trial-link:hover{background-color:#c8003e}@media(max-width:600px){.trials .trial .trial-item{margin-bottom:15px}}
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}

<style>
.cosmic-banner {
  position: relative;
  height: 650px;
  overflow: hidden;
  background: radial-gradient(circle at 30% 30%, #0b0028, #060014 80%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  font-family: "Poppins", sans-serif;
  perspective: 1000px; /* tạo chiều sâu */
}

/* Nền nebula động */
.cosmic-banner::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 40% 40%, #9333ea33, transparent 70%),
              radial-gradient(circle at 70% 60%, #3b82f633, transparent 70%),
              radial-gradient(circle at 30% 80%, #f59e0b33, transparent 70%);
  animation: nebula 40s ease-in-out infinite alternate;
  filter: blur(60px);
  opacity: 0.7;
  z-index: 0;
}
@keyframes nebula {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-10%, 5%) scale(1.2); }
  100% { transform: translate(10%, -5%) scale(1.1); }
}

/* Viền phát sáng */
.cosmic-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid rgba(147, 51, 234, 0.4);
  border-radius: 40px;
  box-shadow: 0 0 60px rgba(147, 51, 234, 0.5),
              0 0 120px rgba(59, 130, 246, 0.3);
  animation: glow 10s linear infinite;
  z-index: 1;
}
@keyframes glow {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.03); }
}

/* Nội dung chính */
.cosmic-content {
  position: relative;
  z-index: 3;
  max-width: 800px;
  padding: 20px;
  animation: fadeIn 2s ease forwards;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

.cosmic-content h1 {
  font-size: 46px;
  font-weight: 700;
  margin-bottom: 15px;
  background: linear-gradient(90deg, #60a5fa, #a78bfa, #f472b6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 25px rgba(255, 255, 255, 0.3);
}

.cosmic-btn {
  display: inline-block;
  background: linear-gradient(90deg, #3b82f6, #9333ea);
  padding: 12px 30px;
  border-radius: 30px;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 0 15px rgba(147, 51, 234, 0.5);
}
.cosmic-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 25px rgba(147, 51, 234, 0.7);
}

/* ======= QUỸ ĐẠO NGHIÊNG ======= */
.orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px dashed rgba(147, 51, 234, 0.3);
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotateX(40deg) rotateY(10deg);
  animation: orbit-glow 6s ease-in-out infinite alternate;
  z-index: 1;
}
.orbit::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1px solid rgba(147, 51, 234, 0.15);
  box-shadow: 0 0 20px rgba(147, 51, 234, 0.2);
}
@keyframes orbit-glow {
  0%,100% { opacity: 0.5; filter: blur(0); }
  50% { opacity: 1; filter: blur(2px); }
}

/* Hành tinh */
.planet {
  position: absolute;
  border-radius: 50%;
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
  z-index: 2;
}

/* Hành tinh trên quỹ đạo nghiêng */
.planet1 {
  width: 100px;
  height: 100px;
  background: radial-gradient(circle at 30% 30%, #fb8500, #b45309);
  animation: move1 20s linear infinite;
}
.planet2 {
  width: 70px;
  height: 70px;
  background: radial-gradient(circle at 30% 30%, #3b82f6, #1e3a8a);
  animation: move2 30s linear infinite reverse;
}
.planet3 {
  width: 50px;
  height: 50px;
  background: radial-gradient(circle at 30% 30%, #84cc16, #14532d);
  animation: move3 36s linear infinite;
}

@keyframes move1 {
  from { transform: rotate(0deg) translateX(220px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(220px) rotate(-360deg); }
}
@keyframes move2 {
  from { transform: rotate(0deg) translateX(320px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(320px) rotate(-360deg); }
}
@keyframes move3 {
  from { transform: rotate(0deg) translateX(140px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(140px) rotate(-360deg); }
}

/* Responsive */
@media (max-width: 768px) {
  .cosmic-banner { height: 500px; border-radius: 0; }
  .cosmic-content h1 { font-size: 30px; }
  .orbit { transform: translate(-50%, -50%) rotateX(30deg); }
  .planet { opacity: 0.8; }
}
</style>