/* Vùng thu gọn */
.collapse-the-content{
  --ctc-bg:#fff;
  position:relative;
  width:100%;
}

/* Wrapper nội dung (tự tạo bằng JS nếu chưa có) */
.collapse-the-content .ctc-inner{
  overflow:hidden;
  position:relative;
  transition:max-height .35s ease;
  will-change:max-height;
}

/* Overlay mờ đáy khi thu gọn */
.collapse-the-content:not(.ctc-expanded) .ctc-inner::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:150px;
  background:linear-gradient(to bottom, transparent 10%, var(--ctc-bg) 100%);
  pointer-events:none;
  opacity:1;
  transition:opacity .25s ease;
}
.collapse-the-content.ctc-expanded .ctc-inner::after{ opacity:0; }

/* Khi nội dung không tràn: ẩn overlay + nút */
.collapse-the-content.ctc-not-overflow .ctc-inner::after{ display:none; }
.collapse-the-content.ctc-not-overflow + .ctc-toggle-wrap,
.collapse-the-content.ctc-not-overflow .ctc-toggle-wrap{ display:none; }

.ctc-toggle-wrap{
  width:100%;
  display:flex; justify-content:center; align-items:center;
  margin: 10px auto 0;
  gap:6px;
  will-change: transform, opacity;
  transform: translateZ(0);
    animation: 
    ctc-in 1.4s ease-out both, 
    ctc-float 1.4s ease-in-out .35s infinite;
}

/* Nút */
.ctc-toggle{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  height:34px;
  min-width:44px;
  padding:0 10px;
  border:0;
  border-radius:10px;
  background:#fff;
  color:#000;
  box-shadow:rgba(50,50,93,.25) 0 2px 5px -1px, rgba(0,0,0,.3) 0 1px 3px -1px;
  cursor:pointer;
  font:inherit;
  transition:transform .18s ease, box-shadow .18s ease;
  backface-visibility:hidden;
}
button.ctc-toggle svg {
    margin-top: 2px;
}
.ctc-toggle:active{ transform:scale(.98); }
.ctc-toggle.ctc-full{ width:100%; }

@keyframes ctc-in{
  from{ opacity:0; transform:translateY(-8px) translateZ(0); }
  to  { opacity:1; transform:translateY(0)    translateZ(0); }
}

@keyframes ctc-pulse{
  0%{   transform:translateY(0)      translateZ(0); }
  50%{  transform:translateY(-3px)   translateZ(0); }
  100%{ transform:translateY(0)      translateZ(0); }
}

@keyframes ctc-float{
  0%  { transform:translateY(-2px) translateZ(0); }
  50% { transform:translateY( 2px) translateZ(0); }
  100%{ transform:translateY(-2px) translateZ(0); }
}
.collapse-the-content.ctc-animate + .ctc-toggle-wrap .ctc-toggle,
.collapse-the-content.ctc-animate .ctc-toggle-wrap .ctc-toggle{
  animation:ctc-pulse 1.6s ease .45s 2;
}

/* iOS: giảm chu kỳ animation (mượt hơn) */
@supports (-webkit-touch-callout:none){
  .collapse-the-content.ctc-animate + .ctc-toggle-wrap .ctc-toggle,
  .collapse-the-content.ctc-animate .ctc-toggle-wrap .ctc-toggle{
    animation-iteration-count:1;
  }
}

@media (prefers-reduced-motion: reduce){
  .ctc-toggle-wrap{ animation:none; }
}