/* Tooltip dùng chung (js/smart-tooltip.js): thay tooltip gốc của title / data-tip.
   Khung gắn vào body, position: fixed, z-index trên mọi popup; data-side = phía đặt so với phần tử (top / bottom / left / right). */
.smart-tip {
	--smart-tip-bg: rgb(31 41 55 / .96);
	position: fixed;
	left: 0;
	top: 0;
	z-index: 2147483600;
	box-sizing: border-box;
	max-width: min(320px, calc(100vw - 12px));
	padding: 6px 9px;
	border-radius: 6px;
	background: var(--smart-tip-bg);
	color: #fff;
	font: 500 13px/1.45 var(--app-font-family, Inter, "Segoe UI", Arial, system-ui, sans-serif);
	letter-spacing: .1px;
	text-align: left;
	text-transform: none;
	white-space: normal;
	box-shadow: 0 6px 18px rgb(16 24 40 / .22), 0 1px 3px rgb(16 24 40 / .16);
	pointer-events: none;
	user-select: none;
	opacity: 0;
	visibility: hidden;
	transform: translate(0, 0);
}

.smart-tip-text {
	white-space: pre-line;
	overflow-wrap: anywhere;
	word-break: normal;
}

.smart-tip.is-on {
	opacity: 1;
	visibility: visible;
	transition: opacity .12s ease-out, transform .12s ease-out;
}

/* trượt nhẹ từ phía phần tử ra khi hiện; ẩn thì biến ngay (không có transition ở trạng thái thường) */
.smart-tip[data-side="top"] { transform: translateY(3px); }
.smart-tip[data-side="bottom"] { transform: translateY(-3px); }
.smart-tip[data-side="left"] { transform: translateX(3px); }
.smart-tip[data-side="right"] { transform: translateX(-3px); }
.smart-tip.is-on[data-side] { transform: translate(0, 0); }

/* mũi tên: tam giác bằng viền, không chồng lên thân nên không đậm màu chỗ giao */
.smart-tip-arrow {
	position: absolute;
	width: 0;
	height: 0;
	border: 5px solid transparent;
	pointer-events: none;
}

.smart-tip[data-side="top"] .smart-tip-arrow {
	top: 100%;
	margin-left: -5px;
	border-top-color: var(--smart-tip-bg);
	border-bottom-width: 0;
}

.smart-tip[data-side="bottom"] .smart-tip-arrow {
	bottom: 100%;
	margin-left: -5px;
	border-bottom-color: var(--smart-tip-bg);
	border-top-width: 0;
}

.smart-tip[data-side="left"] .smart-tip-arrow {
	left: 100%;
	margin-top: -5px;
	border-left-color: var(--smart-tip-bg);
	border-right-width: 0;
}

.smart-tip[data-side="right"] .smart-tip-arrow {
	right: 100%;
	margin-top: -5px;
	border-right-color: var(--smart-tip-bg);
	border-left-width: 0;
}

@media (prefers-reduced-motion: reduce) {
	.smart-tip,
	.smart-tip[data-side] { transform: none; }
	.smart-tip.is-on { transition: none; }
}

@media print {
	.smart-tip { display: none !important; }
}