.cfe-room-types {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/*
 * Grid 2 cột: cột ảnh không set height gì cả -> chiều cao "auto" của nó
 * (= chiều cao ảnh thật, nhờ Swiper autoHeight) chính là chiều cao hàng
 * grid. max-height của cột nội dung KHÔNG dùng % ở đây — containing block
 * của hàng auto-size chưa có chiều cao xác định lúc trình duyệt tính %, nên
 * max-height:100% bị bỏ qua (nội dung tràn tự do, không cuộn). Thay vào đó
 * JS (room-types.js) đo đúng chiều cao ảnh thật rồi set max-height bằng px
 * cụ thể cho .cfe-room-content — xem hàm syncContentHeight().
 */
.cfe-room-item {
  display: grid;
  /* "1fr" trơn = minmax(auto, 1fr) — track có thể tự nới theo kích thước NỘI
     DUNG bên trong nếu nội dung muốn to hơn. Nội dung ở đây là slide do
     Swiper tự set width bằng JS -> tạo vòng lặp: Swiper set width theo
     container, track "auto" lại nới theo width slide vừa set, slide lại to
     hơn nữa... phình lên hàng triệu px (đúng bug đã quan sát). minmax(0,1fr)
     là cách sửa chuẩn của CSS Grid cho lỗi này — ép track chỉ theo không
     gian THỰC CÓ, không bị nội dung bên trong kéo giãn ngược lại. */
  grid-template-columns: var(--cfe-rt-slide-w, 420px) minmax(0, 1fr);
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(20, 30, 70, 0.07);
}

.cfe-room-slide {
  position: relative;
  min-width: 0;
}

/* Style nền tảng mà class "swiper" gốc của thư viện cung cấp — copy thủ công
   sang đây vì widget cố tình không gắn class "swiper" (xem ghi chú trong
   class-widget-room-types.php) để tránh bị script auto-init khác trên site
   khởi tạo chồng lên. */
.cfe-room-swiper {
  width: 100%;
  position: relative;
  overflow: hidden;
  z-index: 1;
  display: block;
}

.cfe-room-swiper .swiper-slide img {
  width: 100%;
  height: auto;
  display: block;
}

.cfe-room-content {
  min-height: 0;
  /* max-height thật do JS set bằng px sau khi đo chiều cao ảnh (xem ghi chú
     ở .cfe-room-item) — giá trị "none" ở đây chỉ là fallback lúc JS chưa
     kịp chạy, tránh cuộn nhầm theo 1 khung 0px. */
  max-height: none;
  overflow-y: auto;
  padding: 16px;
}

.cfe-room-field {
  margin: 0 0 12px;
}

.cfe-room-field:last-child {
  margin-bottom: 0;
}

.cfe-room-field--wysiwyg :first-child {
  margin-top: 0;
}

.cfe-room-field--wysiwyg :last-child {
  margin-bottom: 0;
}

.cfe-room-field--wysiwyg p {
  margin: 0 0 12px;
}

.cfe-room-field--wysiwyg ul,
.cfe-room-field--wysiwyg ol {
  margin: 0 0 12px;
  padding-left: 20px;
}

/* Pagination (chấm tròn) */
.cfe-room-pagination {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.cfe-room-pagination .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.6);
  opacity: 1;
  transition:
    width 0.2s ease,
    background 0.2s ease;
  margin: 0 !important;
}

.cfe-room-pagination .swiper-pagination-bullet-active {
  width: 18px;
  background: #ffffff;
}

/* Mũi tên điều hướng */
.cfe-room-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(20, 25, 40, 0.4);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.cfe-room-nav:hover,
.cfe-room-nav:focus-visible {
  background: var(--cfe-rt-accent, #3a4b98);
}

.cfe-room-prev {
  left: 12px;
}

.cfe-room-next {
  right: 12px;
}

@media (max-width: 760px) {
  .cfe-room-item {
    /* minmax(0,1fr), không phải "1fr" trơn — lý do xem ghi chú ở rule gốc
       phía trên (tránh track tự nới theo width Swiper tự set trên slide). */
    grid-template-columns: minmax(0, 1fr);
  }

  /* Ở layout xếp chồng (mobile), ảnh và nội dung không còn chung 1 hàng grid
     nữa -> bỏ ép chiều cao/scroll, để nội dung chảy tự nhiên full-length. */
  .cfe-room-content {
    max-height: none;
    overflow-y: visible;
  }
}