/* Icon (i) giải thích — dùng chung UliWork và UliPOS */
.tip { position: relative; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 5px; border-radius: 50%;
  border: 1.5px solid #cbbfb7; color: #9a8e86; font: italic 700 10px/1 Georgia, serif; cursor: help; vertical-align: 1px; flex: none; user-select: none; }
.tip:hover, .tip:focus { border-color: var(--orange, #f08a3c); color: var(--orange-600, #e0782a); outline: none; }
.tip::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  width: max-content; max-width: 260px; padding: 8px 11px; border-radius: 9px; background: #2b2420; color: #fff;
  font: 400 12.5px/1.5 'Be Vietnam Pro', system-ui, sans-serif; text-align: left; white-space: normal; letter-spacing: 0; text-transform: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18); opacity: 0; visibility: hidden; transition: opacity .12s; z-index: 80; pointer-events: none; }
.tip:hover::after, .tip:focus::after { opacity: 1; visibility: visible; }
.tip.l::after { left: -6px; transform: none; }
.tip.r::after { left: auto; right: -6px; transform: none; }
.tip.b::after { bottom: auto; top: calc(100% + 8px); }