/* Icon — hình lấy từ file SVG (Lucide, xuất từ Figma), màu lấy từ `color` của
   chỗ dùng (currentColor). Vẽ bằng CSS mask nên một file dùng được cho mọi màu:
   màu ghi trong file không có tác dụng gì.
     <span class="icon icon--x" aria-hidden="true"></span>
   Cỡ mặc định 16; đổi bằng .icon--20 · --24 · --40.
   Thêm icon mới: thả file vào img/, thêm một dòng .icon--<tên> bên dưới. */
.icon{
  display:inline-block; flex:0 0 auto;
  width:var(--icon-size,16px); height:var(--icon-size,16px);
  background:currentColor;
  -webkit-mask:var(--icon) center/100% 100% no-repeat;
          mask:var(--icon) center/100% 100% no-repeat;
}
.icon--20{--icon-size:20px}
.icon--24{--icon-size:24px}
.icon--40{--icon-size:40px}

.icon--arrow-up{--icon:url("../img/icon-arrow-up.svg")}
.icon--badge-dollar-sign{--icon:url("../img/icon-badge-dollar-sign.svg")}
.icon--bell-ring{--icon:url("../img/icon-bell-ring.svg")}
.icon--calculator{--icon:url("../img/icon-calculator.svg")}
.icon--chart-pie{--icon:url("../img/icon-chart-pie.svg")}
.icon--check{--icon:url("../img/icon-check.svg")}
.icon--check-large{--icon:url("../img/icon-check-large.svg")}
.icon--chevron-left{--icon:url("../img/icon-chevron-left.svg")}
.icon--chevron-right{--icon:url("../img/icon-chevron-right.svg")}
.icon--chevrons-up-down{--icon:url("../img/icon-chevrons-up-down.svg")}
.icon--clear{--icon:url("../img/icon-clear.svg")}
.icon--component{--icon:url("../img/icon-component.svg")}
.icon--copy{--icon:url("../img/icon-copy.svg")}
.icon--languages{--icon:url("../img/icon-languages.svg")}
.icon--loader-circle{--icon:url("../img/icon-loader-circle.svg")}
.icon--log-out{--icon:url("../img/icon-log-out.svg")}
.icon--pen-line{--icon:url("../img/icon-pen-line.svg")}
.icon--plus{--icon:url("../img/icon-plus.svg")}
.icon--repeat{--icon:url("../img/icon-repeat.svg")}
.icon--settings{--icon:url("../img/icon-settings.svg")}
.icon--sliders-horizontal{--icon:url("../img/icon-sliders-horizontal.svg")}
.icon--trash-2{--icon:url("../img/icon-trash-2.svg")}
.icon--user-round-plus{--icon:url("../img/icon-user-round-plus.svg")}
.icon--users-round{--icon:url("../img/icon-users-round.svg")}
.icon--x{--icon:url("../img/icon-x.svg")}