/* ==== Config nhanh ==== */
.accordion {
  --acc-items: 6;              /* số item */
  --acc-height: 500px;         /* chiều cao */
  --acc-collapsed: 120px;      /* độ rộng panel khi ẩn */
}

/* ==== Khung chính ==== */
.accordion {
  display: flex;
  width: 100%;
  height: var(--acc-height);
  overflow: hidden;
}

.accordion-item {
  position: relative;
  flex: 0 0 var(--acc-collapsed);
  transition: flex-basis .6s ease;
  cursor: pointer;
  overflow: hidden;
}

/* Ảnh: mặc định tối nhẹ */
.accordion-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(55%);
  transition: filter .6s ease;
}

/* Ảnh sáng rõ khi active */
.accordion-item.active img {
  filter: brightness(100%);
}

/* lớp phủ gradient ở dưới */
.accordion-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%;  /* khoảng 40% dưới cùng */
  background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0));
  pointer-events: none;
  transition: opacity .6s ease;
  opacity: 1;
}

/* ====== Content block (gom cả title + desc) ====== */
.accordion-item .accordion-content {
  position: absolute;
  bottom: 20px;
  left: 22px;
  right: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;                /* 👈 khoảng cách giữa title và desc */
  max-width: 550px;
  z-index: 2;
  color: #fff;
}

/* Title (item ẩn: xoay dọc) */
/* Text item ẩn (xoay dọc, giữ 1 dòng) */
.accordion-item .accordion-text {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;   /* 👈 chỉ hiển thị 1 dòng dọc */
  z-index: 2;
  opacity: 1;
  transition: all 0.6s ease;
}

/* Khi active (nằm ngang, cho phép xuống dòng) */
.accordion-item.active .accordion-text {
  writing-mode: horizontal-tb;
  left: 0px;
  /* bottom: 50px; */
  font-size: 22px;
  max-width: 90%;           /* 👈 giới hạn chiều ngang */
  line-height: 1.4;
  white-space: normal;      /* 👈 cho phép xuống dòng */
  word-break: break-word;
  overflow-wrap: break-word;
  opacity: 0;
  animation: fadeInUp 0.6s forwards;
}

/* Desc (ẩn đi mặc định) */
.accordion-item .accordion-desc {
  font-size: 14px;
  line-height: 1.5;
  color: #ddd;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease 0.2s;
}



.accordion-item.active .accordion-desc {
  opacity: 1;
  transform: translateY(0);
}

/* Hiệu ứng fade-in */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Số thứ tự */
.accordion-item .accordion-index {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* Panel active chiếm phần còn lại */
.accordion-item.active {
  flex-basis: calc(100% - (var(--acc-collapsed) * (var(--acc-items) - 1)));
}