/* ==========================================================================
   PREMIUM COMING SOON PAGE (CREATIVE STUDIO STYLE)
   ========================================================================== */

.cs-premium-wrapper {
  --mouse-x: 50%;
  --mouse-y: 50%;

  position: relative;
  width: 100%;
  min-height: 90vh;
  background: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    #ffffff 0%,
    #e0f2fe 45%,
    #dbeafe 100%
  );
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  font-family: inherit;
  z-index: 1;
  transition: background 0.2s ease-out;
}
.cs-floating-item {
  transition: transform 0.1s ease-out;
  will-change: transform;
}

.cs-float-animated {
  animation: floatSmooth 6s ease-in-out infinite alternate;
}

.cs-float-animated-y {
  animation: floatVertical 4s ease-in-out infinite alternate;
}

.cs-main-graphic {
  position: relative !important;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px auto 40px;
  width: 100%;
}

.cs-main-img {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 450px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.1));
}

.cs-bg-grid {
  position: absolute;
  bottom: -15%;
  left: -50%;
  width: 200%;
  height: 80%;
  background-image:
    linear-gradient(rgba(37, 99, 235, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.2) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: perspective(600px) rotateX(75deg);
  z-index: -1;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 70%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 70%);
  animation: gridMove 2.5s linear infinite;
}

@keyframes gridMove {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -60px;
  }
}

/* ==========================================================================
   NỘI DUNG TRUNG TÂM
   ========================================================================== */
.cs-center-content {
  text-align: center;
  max-width: 800px;
  padding: 0 20px;
  z-index: 10;
  position: relative;
}

.cs-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.8);
  color: var(--gray-600);
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 1.3rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 25px;
  border: 1px solid rgba(33, 103, 221, 0.2);
}

.cs-main-title {
  font-size: 5rem;
  font-weight: 900;
  color: #1e293b;
  margin-bottom: 20px;
  line-height: 1.2;
}

.cs-main-title .text-highlight {
  color: var(--brand-color-1, #2167dd);
}

.cs-subtitle {
  font-size: 1.8rem;
  color: #475569;
  line-height: 1.6;
  margin-bottom: 40px;
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
}

/* Nút bấm */
.cs-action-group {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.btn-cs {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 50px;
  font-size: 1.6rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-cs .js-svg-inject {
  width: 20px;
  height: 20px;
}

.btn-cs-primary {
  background: var(--brand-color-1, #2167dd);
  color: #ffffff;
  box-shadow: 0 10px 25px rgba(33, 103, 221, 0.3);
}

.btn-cs-primary:hover {
  background: #004ecc;
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(33, 103, 221, 0.4);
  color: #ffffff;
}

.btn-cs-secondary {
  background: #ffffff;
  color: #1e293b;
  border: 2px solid #e2e8f0;
}

.btn-cs-secondary:hover {
  border-color: var(--brand-color-1);
  color: var(--brand-color-1);
  transform: translateY(-3px);
}

/* ==========================================================================
   CÁC PHẦN TỬ BAY LƠ LỬNG (ĐỒ HỌA TRANG TRÍ)
   ========================================================================== */
.cs-floating-item {
  position: absolute;
  z-index: 5;
  animation: floatSmooth 6s ease-in-out infinite alternate;
}

@keyframes floatSmooth {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  100% {
    transform: translateY(-20px) rotate(3deg);
  }
}

@keyframes floatVertical {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-15px);
  }
}

/* --- TRÁI: Khung thiết kế (Transform Box) --- */
.cs-float-left {
  top: 25%;
  left: 8%;
  animation-delay: 0s;
}
.cs-pos-box {
  position: absolute;
  left: 0;
  top: 150px;
}

.cs-transform-box {
  width: 220px;
  height: 220px;
  border: 2px dashed rgba(37, 99, 235, 0.6);
  border-radius: 8px;
  position: relative;
  background-color: rgba(255, 255, 255, 0.65);
  background-image: radial-gradient(
    rgba(37, 99, 235, 0.15) 1.5px,
    transparent 1.5px
  );
  background-size: 15px 15px;
  backdrop-filter: blur(8px);

  transform: rotate(-5deg);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cs-transform-box:hover {
  transform: rotate(-2deg) scale(1.02);
}

.cs-box-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.cs-box-content::before {
  content: "";
  position: absolute;
  width: 60px;
  height: 60px;
  background: radial-gradient(
    circle,
    rgba(37, 99, 235, 0.15) 0%,
    transparent 70%
  );
  border-radius: 50%;
  animation: iconPulse 2s infinite alternate;
}

@keyframes iconPulse {
  0% {
    transform: scale(0.9);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.6);
    opacity: 1;
  }
}

.cs-box-content svg {
  width: 55px;
  height: 55px;
  color: #2563eb; /* Màu icon đậm và rõ hơn */
  filter: drop-shadow(0 4px 6px rgba(37, 99, 235, 0.3));
  z-index: 2;
  transition: transform 0.3s ease;
}

.cs-transform-box:hover .cs-box-content svg {
  transform: scale(1.1);
}

.handle {
  width: 14px;
  height: 14px;
  background: #ffffff;
  border: 2.5px solid #2563eb;
  border-radius: 50%;
  position: absolute;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.4);
  transition:
    transform 0.2s ease,
    background 0.2s ease;
}

.cs-transform-box:hover .handle {
  transform: scale(1.3);
  background: #eff6ff;
}
.h-tl {
  top: -7px;
  left: -7px;
  cursor: nwse-resize;
}
.h-tr {
  top: -7px;
  right: -7px;
  cursor: nesw-resize;
}
.h-bl {
  bottom: -7px;
  left: -7px;
  cursor: nesw-resize;
}
.h-br {
  bottom: -7px;
  right: -7px;
  cursor: nwse-resize;
}
.h-mt {
  top: -7px;
  left: calc(50% - 7px);
  cursor: ns-resize;
}
.h-mb {
  bottom: -7px;
  left: calc(50% - 7px);
  cursor: ns-resize;
}
.h-ml {
  left: -7px;
  top: calc(50% - 7px);
  cursor: ew-resize;
}
.h-mr {
  right: -7px;
  top: calc(50% - 7px);
  cursor: ew-resize;
}

/* --- PHẢI: Các thẻ thiết kế xếp chồng --- */
.cs-float-right {
  top: 15%;
  right: 8%;
  animation-delay: -2s;
}

.cs-card-stack {
  position: relative;
  width: 180px;
  height: 250px;
  perspective: 1000px; /* Thêm perspective để xoay 3D mượt hơn */
}

.cs-card {
  position: absolute;
  width: 150px;
  height: 210px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Hiệu ứng nảy cao cấp */
  border: 1px solid rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}
.cs-card svg {
  width: 45px;
  height: 45px;
  transition: transform 0.3s ease;
}

.card-back {
  top: -10px;
  right: -30px;
  transform: rotate(20deg) scale(0.85);
  background: linear-gradient(
    135deg,
    rgba(179, 201, 227, 0.85) 0%,
    rgba(35, 135, 211, 0.85) 100%
  );
  z-index: 1;
  box-shadow: 0 15px 35px rgba(28, 130, 214, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
}
.card-back svg {
  color: rgba(255, 255, 255, 0.9);
}

.card-middle {
  top: 10px;
  right: -10px;
  transform: rotate(10deg) scale(0.9);
  background: linear-gradient(
    135deg,
    rgba(126, 195, 224, 0.9) 0%,
    rgba(68, 113, 209, 0.9) 100%
  );
  z-index: 2;
  box-shadow: 0 15px 35px rgba(66, 106, 193, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
}
.card-middle svg {
  color: rgba(255, 255, 255, 0.9);
}
.card-front {
  top: 30px;
  right: 15px;
  transform: rotate(-5deg);
  z-index: 3;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid #ffffff;
  box-shadow: -5px 15px 40px rgba(15, 23, 42, 0.1);
}
.card-front svg {
  color: #2563eb;
  filter: drop-shadow(
    0 4px 8px rgba(37, 99, 235, 0.3)
  ); /* Phát sáng nhẹ cho icon */
}
.card-front span {
  font-weight: 800;
  color: #1e293b;
  font-size: 1.6rem;
  letter-spacing: -0.5px;
}
.card-front::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    rgba(37, 99, 235, 0.1) 1.5px,
    transparent 1.5px
  );
  background-size: 12px 12px;
  z-index: -1;
}
/* ==========================================================================
   HIỆU ỨNG TƯƠNG TÁC (XÒE BÀI)
   ========================================================================== */
.cs-card-stack:hover .card-back {
  transform: rotate(30deg) translate(30px, -20px) scale(0.9);
  box-shadow: 0 20px 40px rgba(219, 39, 119, 0.3);
}

.cs-card-stack:hover .card-middle {
  transform: rotate(15deg) translate(25px, -10px) scale(0.95);
  box-shadow: 0 20px 40px rgba(37, 99, 235, 0.3);
}

.cs-card-stack:hover .card-front {
  transform: rotate(0deg) translate(-10px, -10px) scale(1.05);
  box-shadow: -10px 25px 50px rgba(15, 23, 42, 0.15);
}

/* Nhấn nhá thêm icon khi hover */
.cs-card-stack:hover .card-front svg {
  transform: scale(1.15) rotate(-5deg);
}

/* --- DƯỚI: Group Icon sáng tạo --- */
.cs-float-bottom {
  position: relative !important;
  margin-top: 60px;
  width: 100%;
  display: flex;
  justify-content: center;
  animation: none;
}

.cs-icon-group {
  display: flex;
  gap: 30px;
}

.cs-icon {
  width: 60px;
  height: 60px;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  color: var(--brand-color-1);
  animation: bounceIcon 3s infinite alternate;
}

.cs-icon svg {
  width: 28px;
  height: 28px;
}

.icon-1 {
  animation-delay: 0s;
}
.icon-2 {
  animation-delay: -1s;
}
.icon-3 {
  animation-delay: -2s;
}

@keyframes bounceIcon {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-15px);
  }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .cs-float-left,
  .cs-float-right {
    display: none;
  }
  .cs-main-title {
    font-size: 4rem;
  }
}

@media (max-width: 768px) {
  .cs-main-title {
    font-size: 3.2rem;
  }
  .cs-subtitle {
    font-size: 1.5rem;
  }
  .cs-action-group {
    flex-direction: column;
  }
  .btn-cs {
    width: 100%;
    justify-content: center;
  }
  .cs-icon-group {
    gap: 15px;
  }
  .cs-icon {
    width: 50px;
    height: 50px;
  }
}

/* ==========================================================================
   HIỆU ỨNG CÁC BÉ TIỂU ĐỒNG BẤT ĐỒNG BỘ
   ========================================================================== */

/* Khung chứa các bé - Dùng Flexbox để xếp hàng ngang tự nhiên */
.kids-group-container {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 18px;
  width: 100%;
  max-width: 800px;
  margin: 10px auto 35px;
  position: relative;
}

/* Kiểu dáng chung cho từng bé */
.kid-item {
  width: auto;
  max-height: 110px;
  object-fit: contain;
  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.05));
  animation-name: kidFloat;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

/* KHÓA MẬT MÃ BẤT ĐỒNG BỘ: Chỉnh Delay và Duration khác nhau */
.kid-1 {
  animation-duration: 3.5s;
  animation-delay: 0s;
}

.kid-2 {
  animation-duration: 4.2s;
  animation-delay: -1.5s;
}

.kid-3 {
  animation-duration: 3.8s;
  animation-delay: -3s;
}

.kid-4 {
  animation-duration: 4.5s;
  animation-delay: -0.8s;
}

.kid-5 {
  animation-duration: 4s;
  animation-delay: -2.2s;
}

/* Hoạt ảnh nhấp nhô riêng cho các bé (Nảy nhẹ nhàng hơn) */
@keyframes kidFloat {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-12px);
  }
}

/* --- Tinh chỉnh cho điện thoại --- */
@media (max-width: 768px) {
  .kids-group-container {
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 25px;
  }
  .kid-item {
    max-height: 75px;
  }
}
/* END PREMIUM COMING SOON PAGE */