/* Bảng giá kim loại quý CSS */
.precious-metals-wrapper {
  width: 100%;
  overflow: hidden;
}

.precious-metals-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.precious-metals-marquee {
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  --wd-marquee-direction: normal;
  --wd-marquee-speed: 10s;
  --wd-marquee-gap: 20px;
  font-size: 12px;
}

.__priceDataRequired {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  /* gap: var(--wd-marquee-gap); */
  /* min-width: 100%; */
  white-space: nowrap;
  /* animation: var(--wd-marquee-speed) linear infinite var(--wd-marquee-direction)
    running wd-MarqueeScrolling; */
}

.marquee-container {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  /* gap: var(--wd-marquee-gap); */
  width: 100%;
  white-space: nowrap;
  animation: var(--wd-marquee-speed) linear infinite var(--wd-marquee-direction)
    running wd-MarqueeScrolling;
}

/* Danh sách kim loại quý */
/* #precious-metals-list {
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  animation: scroll-left 60s linear infinite;
} */

/* Dừng animation khi người dùng hover chuột */
.precious-metals-marquee:hover .marquee-container {
  animation-play-state: paused;
}

/* Mc trong danh sách */
.__priceDataRequired li {
  display: inline-block;
  padding: 0 12px;
  margin: 0;
  text-align: center;
  list-style: none;
  /* min-width: 200px; */
}

.__priceDataRequired li:last-child {
  border-right: none;
}

/* Các phần t trong mỗi mục */
.metal-item {
  display: inline-block;
  vertical-align: middle;
}

.metal-name {
  font-weight: bold;
  color: #333;
}

.metal-price {
  font-size: 12px;
  color: #444;
}

.metal-change {
  margin-left: 10px;
  font-size: 12px;
}

/* Màu sắc thay đổi */
.to_up {
  color: #16a085;
  font-weight: bold;
}

.to_down {
  color: #e74c3c;
  font-weight: bold;
}

.no_change {
  color: #7f8c8d;
}

/* Icon mũi tên */
.icon-arrow-top {
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 4px;
  vertical-align: middle;
}

.to_up .icon-arrow-top {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 6px solid #16a085;
}

.to_down .icon-arrow-top {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid #e74c3c;
}

/* Thông báo lỗi */
.error-message {
  color: #e74c3c;
  padding: 15px;
  margin: 10px 0;
  border: 1px solid #e74c3c;
  border-radius: 4px;
  text-align: center;
}

/* Animation chạy ngang */
@keyframes scroll-left {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes wd-MarqueeScrolling {
  0% {
    transform: translat3d(0, 0, 0);
  }
  100% {
    transform: translate3d(calc(-100% - var(--wd-marquee-gap)), 0, 0);
  }
}