.wpshare247-newsfeed-ai-box .loading {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px; /* Khoảng cách giữa các vòng tròn */
    height: 50px; /* Chiều cao vùng loading */
}

.wpshare247-newsfeed-ai-box .loading div {
    width: 12px;
    height: 12px;
    background-color: #3498db; /* Màu vòng tròn */
    border-radius: 50%;
    animation: bounce 1.2s infinite ease-in-out;
}

.wpshare247-newsfeed-ai-box .loading div:nth-child(1) {
    animation-delay: 0s;
}

.wpshare247-newsfeed-ai-box .loading div:nth-child(2) {
    animation-delay: 0.2s;
}

.wpshare247-newsfeed-ai-box .loading div:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes bounce {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1);
    }
}


/* --- BOX 1: Quote cổ điển với thanh dọc --- */
.newsfeed-box-1 {
  border-left: 4px solid #ff6b00;
  padding: 1rem 1.5rem;
  background: #fff9f3;
  font-style: italic;
  position: relative;
}

.newsfeed-box-1::before {
  content: "❝";
  font-size: 3rem;
  color: #ff6b00;
  position: absolute;
  top: -10px;
  left: 10px;
  opacity: 0.2;
}

/* --- BOX 2: Viền trên dày + góc bo tròn --- */
.newsfeed-box-2 {
  border-top: 6px solid #0078ff;
  background: #f6faff;
  border-radius: 12px;
  padding: 1rem 1.5rem;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

/* --- BOX 3: Viền dưới neon + hiệu ứng đổ sáng --- */
.newsfeed-box-3 {
  background: #ffffff;
  padding: 1.5rem;
  position: relative;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.newsfeed-box-3::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #ff00cc, #3333ff);
  border-radius: 2px;
  animation: glow 3s linear infinite;
}

@keyframes glow {
  0% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.5;
  }
}

/* --- BOX 4: Quote viền tròn + dấu nháy góc phải --- */
.newsfeed-box-4 {
  position: relative;
  background: #fdfdfd;
  border: 2px solid #ffc400;
  border-radius: 50px;
  padding: 1.2rem 2rem;
  font-weight: 500;
}

.newsfeed-box-4::after {
  content: "”";
  position: absolute;
  bottom: -10px;
  right: 25px;
  font-size: 4rem;
  color: #ffc400;
  opacity: 0.3;
}

/* --- BOX 5: Viền hai bên trái-phải, phong cách báo chí --- */
.newsfeed-box-5 {
  border-left: 4px double #00b894;
  border-right: 4px double #00b894;
  background: #f9fffc;
  padding: 1.5rem;
  font-family: "Georgia", serif;
  line-height: 1.7;
}

/* --- BOX 6: Thẻ nổi có thanh màu phía trên, bóng mềm --- */
.newsfeed-box-6 {
  border-top: 5px solid #e84393;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  padding: 1.5rem 2rem;
  position: relative;
  overflow: hidden;
}

.newsfeed-box-6::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 5px;
  width: 100%;
  background: linear-gradient(90deg, #e84393, #6c5ce7);
}

.newsfeed-box-7 {
  position: relative;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 1.5rem 2rem;
  border-radius: 16px;
  font-weight: 400;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

.newsfeed-box-7::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(135deg, #00ffe0, #007bff);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.newsfeed-box-8 {
  background: #fffaf5;
  border: 1px solid #f5d0a9;
  border-radius: 8px;
  padding: 1.5rem 2rem 2.5rem;
  position: relative;
  font-family: "Merriweather", serif;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.newsfeed-box-8::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 20px;
  background: radial-gradient(circle at 10% 10%, transparent 15%, #fffaf5 16%) repeat-x;
  background-size: 25px 20px;
}

.newsfeed-box-9 {
  position: relative;
  background: #0e0e10;
  color: #e9f1ff;
  border-radius: 12px;
  padding: 1.5rem 2rem;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.newsfeed-box-9::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, #00f5ff, #ff00f7, #00f5ff);
  background-size: 300% 300%;
  animation: glowBorder 6s ease infinite;
  border-radius: 14px;
  z-index: 0;
}

.newsfeed-box-9 * {
  position: relative;
  z-index: 1;
}

@keyframes glowBorder {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.newsfeed-box-10 {
  background: #ffffff;
  border-radius: 8px;
  padding: 1.5rem 2rem;
  position: relative;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
  border-left: 10px solid transparent;
}

.newsfeed-box-10::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 100%;
  background: linear-gradient(180deg, #ff8800, #ff0080);
  box-shadow: 2px 0 12px rgba(255, 0, 128, 0.3);
}

/* --- BOX 11: Dải băng chéo (Ribbon) góc trên --- */
.newsfeed-box-11 {
  position: relative;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 1.8rem 2rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.newsfeed-box-11::before {
  content: "HOT";
  position: absolute;
  top: 15px;
  left: -35px;
  transform: rotate(-45deg);
  background: linear-gradient(90deg, #ff6b00, #ff9800);
  color: #fff;
  font-weight: bold;
  padding: 4px 40px;
  font-size: 0.8rem;
  letter-spacing: 1px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* --- BOX 12: Nền giấy gấp (Folded paper effect) --- */
.newsfeed-box-12 {
  background: #fff;
  border: 1px solid #e0e0e0;
  padding: 2rem;
  border-radius: 12px;
  position: relative;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}

.newsfeed-box-12::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #f5f5f5 0%, #ddd 100%);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  box-shadow: inset -1px -1px 3px rgba(0, 0, 0, 0.1);
}

/* --- BOX 13: Bo cong dưới + bóng trượt mềm --- */
.newsfeed-box-13 {
  background: #ffffff;
  border-radius: 0 0 30px 30px;
  padding: 1.8rem 2rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.newsfeed-box-13::before {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 20px;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.15) 0%, transparent 70%);
  border-radius: 50%;
}

/* --- BOX 14: Border gradient chạy quanh (animated) --- */
.newsfeed-box-14 {
  position: relative;
  background: #fff;
  border-radius: 14px;
  padding: 2rem;
  z-index: 1;
  overflow: hidden;
}

.newsfeed-box-14::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  background: linear-gradient(135deg, #ff0080, #00bfff, #ffcc00, #ff0080);
  background-size: 400% 400%;
  border-radius: 16px;
  animation: borderFlow 6s linear infinite;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

@keyframes borderFlow {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* --- BOX 15: Card nổi có bóng đổ động --- */
.newsfeed-box-15 {
  background: #ffffff;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  position: relative;
  transition: all 0.3s ease;
}

.newsfeed-box-15:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
}

.newsfeed-box-15::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  border: 2px dashed rgba(255, 136, 0, 0.3);
  pointer-events: none;
  animation: pulseBorder 3s ease-in-out infinite;
}

@keyframes pulseBorder {

  0%,
  100% {
    opacity: 0.4;
  }

  50% {
    opacity: 1;
  }
}

/* --- FIXED: BOX 16: Glassmorphism (sửa, không dùng mask phức tạp) --- */
.newsfeed-box-16 {
  position: relative;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 1.8rem;
  color: inherit;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

/* subtle glossy overlay */
.newsfeed-box-16::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  z-index: 0;
}

/* small glowing strip */
.newsfeed-box-16::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, rgba(0, 255, 200, 0.8), rgba(0, 120, 255, 0.8));
  filter: blur(6px);
  transform-origin: left center;
  pointer-events: none;
  z-index: 0;
}

/* ensure text above pseudo layers */
.newsfeed-box-16>* {
  position: relative;
  z-index: 1;
}

/* --- FIXED: BOX 17: Angled-cut card + animated top bar (clip-path safe) --- */
.newsfeed-box-17 {
  position: relative;
  background: #fff;
  border-radius: 12px;
  padding: 1.6rem 1.8rem;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  /* fallback shape: slight slanted bottom using transform for visual cut */
}

.newsfeed-box-17::before {
  content: "";
  position: absolute;
  top: -8%;
  left: -20%;
  width: 140%;
  height: 28%;
  transform: rotate(-4deg);
  background: linear-gradient(90deg, rgba(0, 198, 255, 0.95), rgba(0, 114, 255, 0.95));
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}

.newsfeed-box-17::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, #00c6ff, #0072ff);
  background-size: 200% 100%;
  animation: slideBar17 3s linear infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes slideBar17 {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* ensure content visible */
.newsfeed-box-17>* {
  position: relative;
  z-index: 1;
}

/* --- FIXED: BOX 18: Dotted animated border (non-blocking) --- */
.newsfeed-box-18 {
  position: relative;
  background: #fffafc;
  border-radius: 12px;
  padding: 1.6rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  overflow: visible;
}

.newsfeed-box-18::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 10px;
  pointer-events: none;
  z-index: 0;
  box-shadow: 0 0 0 2px rgba(255, 79, 129, 0.06) inset;
}

/* dotted outline layer sits above subtle inset but below text */
.newsfeed-box-18::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  pointer-events: none;
  z-index: 0;
  border: 2px dotted rgba(255, 79, 129, 0.55);
  animation: dottedPulse18 2.5s ease-in-out infinite;
}

@keyframes dottedPulse18 {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.6;
  }

  50% {
    transform: scale(1.01);
    opacity: 1;
  }
}

/* keep real content above pseudo elements */
.newsfeed-box-18>* {
  position: relative;
  z-index: 1;
}

/* --- FIXED: BOX 19: Multi-layer shadow card (no overlap issues) --- */
.newsfeed-box-19 {
  position: relative;
  background: #fff;
  border-radius: 14px;
  padding: 1.8rem;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.06),
    0 8px 20px rgba(0, 0, 0, 0.06),
    0 18px 40px rgba(0, 0, 0, 0.06);
  overflow: visible;
}

.newsfeed-box-19:hover {
  transform: translateY(-10px);
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.08),
    0 18px 36px rgba(0, 0, 0, 0.12),
    0 30px 60px rgba(0, 0, 0, 0.14);
}

/* subtle decorative stripe at bottom-right (non-blocking) */
.newsfeed-box-19::after {
  content: "";
  position: absolute;
  right: -10px;
  bottom: -10px;
  width: 120px;
  height: 12px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.02));
  transform: rotate(14deg);
  pointer-events: none;
  z-index: 0;
}

/* ensure content above pseudo elements */
.newsfeed-box-19>* {
  position: relative;
  z-index: 1;
}

/* --- BOX 20: Highlight AI-style với glow động quanh mép --- */
.newsfeed-box-20 {
  position: relative;
  background: #0e0e10;
  color: #e8f0ff;
  border-radius: 14px;
  padding: 2rem;
  overflow: hidden;
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.1);
}

.newsfeed-box-20::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 16px;
  background: linear-gradient(135deg, #00eaff, #ff00c8, #00eaff);
  background-size: 400% 400%;
  filter: blur(6px);
  animation: glowFlow 6s linear infinite;
  z-index: 0;
}

.newsfeed-box-20 * {
  position: relative;
  z-index: 1;
}

@keyframes glowFlow {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}