.ghostkit-accordion{--gkt-accordion--heading__margin:0;--gkt-accordion--heading__padding-v:0.75em;--gkt-accordion--heading__padding-h:0;--gkt-accordion--heading__font-weight:500;--gkt-accordion--heading__font-size:1em;--gkt-accordion--heading__line-height:1.6;--gkt-accordion--heading__gap:1em;--gkt-accordion--heading-collapse-icon__font-size:1em;--gkt-accordion--heading-collapse-icon-active__transform:rotate(90deg);--gkt-accordion--content__padding-v:0.75em;--gkt-accordion--content__padding-h:0;--gkt-accordion__transition-duration:var(--gkt-transition-duration);--gkt-accordion__transition-easing:var(--gkt-transition-easing)}.ghostkit-accordion-item .ghostkit-accordion-item-heading{border-bottom:none;box-shadow:none;font-size:var(--gkt-accordion--heading__font-size);font-weight:var(--gkt-accordion--heading__font-weight);line-height:var(--gkt-accordion--heading__line-height);margin:var(--gkt-accordion--heading__margin)}.ghostkit-accordion-item .ghostkit-accordion-item-heading>a,.ghostkit-accordion-item .ghostkit-accordion-item-heading>button,.ghostkit-accordion-item a.ghostkit-accordion-item-heading{align-items:center;background-color:transparent;border:none;color:inherit;cursor:pointer;display:flex;font:inherit;gap:var(--gkt-accordion--heading__gap);line-height:inherit;padding:var(--gkt-accordion--heading__padding-v) var(--gkt-accordion--heading__padding-h);position:relative;text-align:left;text-decoration:none;width:100%}.ghostkit-accordion-item-collapse{align-items:center;color:inherit;display:flex;font-size:var(--gkt-accordion--heading-collapse-icon__font-size);justify-content:center;margin-left:auto;transition:var(--gkt-accordion__transition-duration) transform var(--gkt-accordion__transition-easing)}.ghostkit-accordion-item-content{display:none;padding:var(--gkt-accordion--content__padding-v) var(--gkt-accordion--content__padding-h)}.ghostkit-accordion-item-active .ghostkit-accordion-item-collapse{transform:var(--gkt-accordion--heading-collapse-icon-active__transform)}.ghostkit-accordion-item-active .ghostkit-accordion-item-content{display:block}
/* --- CSS Chung (áp dụng cho cả chế độ sáng và tối) --- */



/* Các item riêng lẻ, loại bỏ viền riêng của mỗi item */
.ghostkit-accordion-item {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

/* Áp dụng đường viền trên cho các item không phải là item đầu tiên */
.ghostkit-accordion-item:not(:first-child) {
  border-top: 1px solid #ddd; /* Đường phân cách mặc định (sáng) */
}

/* Định dạng cho phần tiêu đề */
.ghostkit-accordion-item-header {
  background-color: #f9f9f9; /* Màu nền cho tiêu đề (sáng) */
  padding: 10px 15px;
  cursor: pointer;
}

/* Đảm bảo phần nội dung không có màu nền cụ thể */
/* BỎ background-color ở đây để nội dung giữ nguyên màu nền cũ của theme */
.ghostkit-accordion-item-content {
  padding: 15px;
  /* background-color: #f0f4f9;  --> Dòng này sẽ được loại bỏ */
}

/* --- CSS Dành riêng cho Chế độ Tối (Dark Mode) --- */
/* (Giả sử theme của bạn thêm class 'dark-mode' vào body hoặc html) */

@media (prefers-color-scheme: dark) {
  /* Nếu theme của bạn sử dụng @media (prefers-color-scheme: dark) */
  /* Hoặc nếu theme của bạn thêm class 'dark-mode' vào body: */
  /* body.dark-mode .ghostkit-accordion, */
  /* body.dark-mode .ghostkit-accordion-item:not(:first-child), */
  /* body.dark-mode .ghostkit-accordion-item-header { ... } */

  .ghostkit-accordion,
  .ghostkit-accordion-item:not(:first-child) {
    border-color: #ccc; /* Đường viền và ngăn cách có màu #ccc trong dark mode */
  }

  .ghostkit-accordion-item-header {
    background-color: #333; /* Ví dụ: Màu nền tiêu đề tối hơn trong dark mode */
    color: #eee; /* Ví dụ: Màu chữ tiêu đề sáng hơn trong dark mode */
  }

  .ghostkit-accordion-item-content {
    /* Đảm bảo không có background-color ở đây */
    /* Và có thể điều chỉnh màu chữ nếu cần trong dark mode */
    color: #ddd; /* Ví dụ: Màu chữ nội dung trong dark mode */
  }
}

/* HOẶC nếu theme của bạn thêm class 'dark' vào thẻ html hoặc body, bạn sẽ dùng: */
/* html.dark .ghostkit-accordion, */
/* html.dark .ghostkit-accordion-item:not(:first-child) { */
/* border-color: #ccc; */
/* } */

/* html.dark .ghostkit-accordion-item-header { */
/* background-color: #333; */
/* color: #eee; */
/* } */

/* html.dark .ghostkit-accordion-item-content { */
/* color: #ddd; */
/* } */