<style>
/* --- CSS IMAGE COMPARE --- */
.image-comparison {
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  position: relative;
  overflow: hidden;
}
.image-comparison__slider-wrapper {
  position: relative;
  z-index: 1;
}
.image-comparison__label {
  font-size: 0; line-height: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 20; opacity: 0; cursor: ew-resize;
}
.image-comparison__range {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; background-color: transparent; border: none;
  appearance: none; -webkit-appearance: none; outline: none; cursor: ew-resize; z-index: 30; opacity: 0;
}
/* Logic hiển thị ảnh */
.image-comparison__image-wrapper--overlay {
  position: absolute; top: 0; left: 0; width: 50%; height: 100%; overflow: hidden; z-index: 2; border-right: 1px solid rgba(255,255,255,0.5);
}
.image-comparison__figure { margin: 0; position: relative; line-height: 0; }
.image-comparison__image-wrapper:not(.image-comparison__image-wrapper--overlay) .image-comparison__image {
    position: relative; width: 100%; height: auto; display: block;
}
/* Ảnh Overlay */
.image-comparison__figure--overlay { height: 100%; }
.image-comparison__figure--overlay .image-comparison__image {
    position: absolute; top: 0; left: 0; width: auto; max-width: none; height: 100%; object-fit: cover; object-position: left center;
}
/* Labels */
.image-comparison__caption {
  position: absolute; bottom: 12px; min-width: max-content; display: flex; flex-direction: column; flex-wrap: nowrap;
  color: #fff; font-weight: bold; text-transform: uppercase; font-size: 12px; pointer-events: none;
}
.image-comparison__caption--before { left: 12px; z-index: 3; }
.image-comparison__caption--after { right: 12px; text-align: right; z-index: 1; }
.image-comparison__caption-body { padding: 6px 12px; background-color: rgba(0, 0, 0, 0.55); border-radius: 4px; }
/* Slider Handle */
.image-comparison__slider {
  position: absolute; top: 0; left: 50%; width: 2px; height: 100%; background-color: #fff; transition: background-color 0.3s ease-in-out; z-index: 10; pointer-events: none;
}
.image-comparison__thumb {
  position: absolute; top: calc(50% - 20px); left: calc(50% - 20px); width: 40px; height: 40px; display: flex; flex-direction: column;
  justify-content: center; align-items: center; background-color: #0091df; color: #fff; border-radius: 50%; box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5);
  transform-origin: center; transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
/* Hover effect */
.image-comparison__range:hover ~ .image-comparison__slider .image-comparison__thumb { transform: scale(1.2); }
.image-comparison__range:active ~ .image-comparison__slider .image-comparison__thumb,
.image-comparison__range:focus ~ .image-comparison__slider .image-comparison__thumb { transform: scale(0.8); background-color: rgba(0, 97, 127, 0.5); }
</style>