.room-set-right {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
  padding: 0 5px;
  box-sizing: border-box;
  min-height: 100vh;
  /* Ensure minimum height */
  overflow-y: auto;
  /* Allow scrolling if needed */
}

.room-set-right .element-item .element-text {
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  margin-top: 4px;
  width: 100%;
  transition: all 0.3s ease;
}

/* Trạng thái fullscreen */
.room-set-right.fullscreen-panel {
  position: fixed;
  top: 0;
  /* left: 0; */
  /* width: 500px !important; */
  max-width: 500px !important;
  right: 0;
  left: auto;
  height: 100vh;
  flex: none !important;
  z-index: 10003;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.35s ease, visibility 0.35s ease;
  will-change: transform;
}

.room-set-right.fullscreen-panel>.popup-header {
  display: block !important;
  text-align: center;
  padding: 14px 16px 10px !important;
  width: 100%;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 100003;
  font-weight: 700;
  border-bottom: 1px solid #eee;
}

.room-set-right.fullscreen-panel #widget-factory-container {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 10px 16px 24px;
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  top: 65px;
  position: absolute;
  height: calc(100% - 65px);
}

/* Tắt layout Bootstrap col khi fullscreen */
.room-set-right.fullscreen-panel.col-sm-12,
.room-set-right.fullscreen-panel.col-xl-4 {
  width: 100% !important;
}

#app-fullscreen .room-set-right.fullscreen-panel.col-sm-12,
#app-fullscreen .room-set-right.fullscreen-panel.col-xl-4 {
  /* width: 500px !important; */
  max-width: 500px !important;
  right: 0;
  left: auto;
}

/* Hide the right panel when fullscreen but the overlay is closed */
:fullscreen .room-set-right:not(.fullscreen-panel),
:-webkit-full-screen .room-set-right:not(.fullscreen-panel) {
  display: none !important;
  width: 0 !important;
  max-width: 0 !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* Default styles for larger screens */
@media screen and (min-width: 901px) {
  .room-set-right .element-item {
    width: calc((100% - 40px) / 6);
    /* 40px = 8px gap * 5 spaces between 6 items */
    flex: 0 0 auto;
    min-width: 90px;
    margin-bottom: 8px;
  }
}

/* Tablet layout */
@media screen and (min-width: 601px) and (max-width: 900px) {
  .room-set-right {
    gap: 10px;
  }

  .room-set-right .element-item {
    width: calc((100% - 30px) / 4);
    /* 4 items per row */
    min-width: unset;
  }
}

/* Mobile layout */
@media screen and (max-width: 600px) {
  .room-set-right {
    gap: 12px;
    padding: 0 8px;
  }

  .room-set-right .element-item {
    width: calc(50% - 6px);
    /* 2 items per row, 12px gap */
    min-width: unset;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .room-set-right .element-item .element-image-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 6px;
  }

  .room-set-right .element-item .element-image {
    width: 100%;
    height: auto;
    /* aspect-ratio: 1; */
    max-width: 120px;
    max-height: 140px;
  }

  .room-set-right .element-item .element-text {
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
    margin-top: 4px;
    width: 100%;
  }

  .room-set-right .element-item .element-supplier {
    font-size: 16px;
    margin-top: 2px;
  }
}

/* Ensure mobile styles are applied for small screens */
@media screen and (max-width: 480px) {
  .room-set-right .element-item {
    width: calc(50% - 6px) !important;
    /* Force 2 items per row */
  }

  .room-set-right {
    min-height: 100vh;
    /* Ensure full height on mobile */
    padding-bottom: 20px;
    /* Add bottom padding */
  }
}

/* Laptop and desktop styles to prevent cutting */
@media screen and (min-width: 481px) and (max-width: 1440px) {
  .room-set-right {
    min-height: 100vh;
    /* Ensure full height on laptop */
    padding-bottom: 30px;
    /* Add bottom padding */
    overflow-y: auto;
    /* Allow scrolling if needed */
  }
}

@media screen and (max-width: 767px) {

  .element-item:has(input[category='doorStyle']) .element-image-container img,
  .element-item input[category='doorStyle']+label .element-image-container img,
  .element-item[data-category='doorStyle'] .element-image-container img {
    width: 90px !important;
    height: 147px !important;
    max-width: 90px !important;
    max-height: 147px !important;
    min-width: 90px !important;
    min-height: 147px !important;
    object-fit: cover;
  }
}

.room-set-right .elements {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0 !important;
}

.room-set-right .element-supplier.long-supplier {
  height: 3em;
  line-height: 1.5em;
}

/* Đã xoá các rule áp dụng cho .room-set-right .element-item để tránh xung đột với style chung */

.room-set-right .element-item label {
  text-align: center;
}

.room-set-right .element-item .element-image-container:hover {
  transform: translateY(-2px);
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
}

.element-item .element-image {
  height: 65px;
  width: 65px;
}

.element-item .element-image-box-style {
  width: 75px;
  height: auto;
}

/* Style riêng cho doorStyle images - không dùng class element-image */
.element-item:has(input[category='doorStyle']) .element-image-container img,
.element-item input[category='doorStyle']+label .element-image-container img,
.element-item[data-category='doorStyle'] .element-image-container img {
  width: 90px !important;
  height: 147px !important;
  max-width: 90px !important;
  max-height: 147px !important;
  min-width: 90px !important;
  min-height: 147px !important;
  object-fit: cover;
}

/* Đảm bảo text ở dưới đủ rộng */
.room-set-right .element-item .element-name {
  font-size: 12px;
  line-height: 1.3;
  /* Reduce line height slightly */
  width: 100%;
  text-align: center;
  margin-top: 3px;
  /* Reduce top margin */
  white-space: normal;
  word-break: break-word;
}

/* Thêm style cho element-item.active */
.room-set-right .element-item.active {
  position: relative;
}

.room-set-right .element-item.active img {
  border: 3px solid #1d89d1;
}

/* Thêm dấu tick xanh cho element-item.active */
.room-set-right .element-item .element-image-container {
  display: inline-block;
}

.room-set-right .element-item.active .element-image-container {
  position: relative;
}

.room-set-right .element-item.active .element-image-container .element-active-icon {
  pointer-events: none;
  position: absolute;
  bottom: -5px;
  right: -5px;
  transform: none;
  transition: opacity 0.3s ease-out;
  content: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20 40C22.6264 40 25.2272 39.4827 27.6537 38.4776C30.0802 37.4725 32.285 35.9993 34.1421 34.1421C35.9993 32.285 37.4725 30.0802 38.4776 27.6537C39.4827 25.2272 40 22.6264 40 20C40 17.3736 39.4827 14.7728 38.4776 12.3463C37.4725 9.91982 35.9993 7.71504 34.1421 5.85786C32.285 4.00069 30.0802 2.5275 27.6537 1.52241C25.2272 0.517315 22.6264 -3.9137e-08 20 0C14.6957 7.90407e-08 9.60859 2.10714 5.85786 5.85786C2.10714 9.60859 0 14.6957 0 20C0 25.3043 2.10714 30.3914 5.85786 34.1421C9.60859 37.8929 14.6957 40 20 40ZM19.4844 28.0889L30.5956 14.7556L27.1822 11.9111L17.6267 23.3756L12.6822 18.4289L9.54 21.5711L16.2067 28.2378L17.9267 29.9578L19.4844 28.0889Z' fill='%23006699'/%3E%3C/svg%3E");
  background: #fff;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(13, 150, 192, 0.2);
  z-index: 1;
}

.color-samples {
  padding: 5px;
}

.color-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.color-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.color {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid #ddd;
  transition: transform 0.2s ease;
}

.color:hover {
  transform: scale(1.1);
}

.color.active {
  border: 2px solid #007bff;
}

.color.disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

/* @media (max-width: 600px) {
    .room-set-right .element-item {
      width: 60px;
    }
  } */

/* @media (max-width: 1199px) {
  .room-set-right {
    margin-top: 25px;
  }
} */

/* Fullscreen Popup Overlay - Disable body interaction when popup is shown */
#fullscreen-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.35);
  z-index: 10002;
  /* Lower than room-set-right panel (10003) and popup (99999) */
  pointer-events: auto;
  display: none;
}

/* Merged Widget Styles - Gộp Island, CounterTop, Handle items */
.merged-elements {
  /* Items từ nhiều categories sẽ hiển thị cùng nhau */
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}