/* Chép từ jc_nutrition_connector (public/widgets/src/shared/ring.css), NUT-34.
   Vòng kcal: --c là màu chuỗi, --p là tỉ lệ đã đầy 0-1 (đặt bằng JS qua style.setProperty). --ring-w là độ dày vành. */
.ring {
  position: relative;
  width: 92px;
  height: 92px;
  --ring-w: 10px;
}
.ring-track,
.ring-arc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring-w)), #000 calc(100% - var(--ring-w)));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring-w)), #000 calc(100% - var(--ring-w)));
}
.ring-track {
  background: var(--track);
}
.ring-arc {
  background: conic-gradient(from 0deg, var(--track) 0deg, var(--c) calc(var(--p) * 360deg), transparent calc(var(--p) * 360deg));
}
/* Nắp tròn ở đầu cung màu: lớp phủ cả vòng, xoay tới góc cuối, chấm tròn nằm ở 12 giờ giữa vành. */
.ring-cap {
  position: absolute;
  inset: 0;
  transform: rotate(calc(var(--p) * 360deg));
}
.ring-cap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--ring-w);
  height: var(--ring-w);
  margin-left: calc(var(--ring-w) / -2);
  border-radius: 50%;
  background: var(--c);
}
.ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.05;
}
.ring-center .rv {
  font-size: 19px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.ring-center .ru {
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--text-dim);
  margin-top: 1px;
}
.ring-center .rp {
  font-size: var(--fs-label);
  font-weight: 700;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}