.g-slider-container {
  background-color: #212121;
  padding: 20px;
}

.g-slider-wrapper {
  position: relative;
  height: 100%; /* Đảm bảo wrapper chiếm toàn bộ chiều cao của container cha */
  overflow: hidden;
}

.g-slider-wrapper canvas {
  position: absolute;
  top: 0;
  left: 0;
}

/* Base styles from original code */
[class^="mdw-curved-slider"],
[class*=" mdw-curved-slider"] {
  height: var(--min-height, 100vh);
}
[class^="mdw-curved-slider"] canvas,
[class*=" mdw-curved-slider"] canvas {
  position: absolute;
  top: 0;
  left: 0;
}
[class^="mdw-curved-slider"] a,
[class*=" mdw-curved-slider"] a {
  outline: none;
  cursor: pointer;
}

/* Styling for the new buttons */
.g-slider-prev-button,
.g-slider-next-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  width: 44px; /* Adjust size as needed */
  height: 44px; /* Adjust size as needed */
}

.g-slider-prev-button {
  left: 20px;
}

.g-slider-next-button {
  right: 20px;
}

/* Style for the SVG icon */
.g-slider-button-icon {
  width: 100%;
  height: 100%;
  fill: #fff; /* Color of the arrow */
  transition: fill 0.3s ease;
}

.g-slider-prev-button:hover .g-slider-button-icon,
.g-slider-next-button:hover .g-slider-button-icon {
  fill: #ddd; /* Hover color */
}