/* =========================================
   GLOBAL TOOLTIP - Áp dụng cho mọi đối tượng
   ========================================= */

/* 1. Thiết lập cho thẻ cha (phần tử chứa data-tooltip) */
[data-tooltip] {
    position: relative; /* Bắt buộc để tooltip con bám theo */
    cursor: pointer;
}

/* 2. Hộp thoại Tooltip (Màu nền #16a15d) */
[data-tooltip]::after {
    content: attr(data-tooltip); /* Tự động lấy chữ từ data-tooltip hiển thị ra */
    position: absolute;
    bottom: 130%; /* Cách mép trên của phần tử một chút */
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    
    /* Giao diện */
    background-color: var(--primary-color, #0c826f);
    color: #ffffff;
    font-size: 12px;
    font-family: inherit;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    
    /* Trạng thái ẩn ban đầu */
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease-in-out;
    pointer-events: none; /* Tránh lỗi kẹt chuột */
    z-index: 9999; /* Đảm bảo luôn đè lên các thành phần khác */
}

/* 3. Mũi tên chỉ xuống của Tooltip */
[data-tooltip]::before {
    content: "";
    position: absolute;
    bottom: 100%; 
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    
    /* Vẽ hình tam giác bằng viền (border) */
    border-width: 5px;
    border-style: solid;   
    border-color: var(--primary-color, #0c826f) transparent transparent transparent;
    
    /* Trạng thái ẩn ban đầu */
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease-in-out;
    pointer-events: none;
    z-index: 9999;
}

/* 4. Hiển thị mượt mà khi di chuột vào (Hover) */
[data-tooltip]:hover::after,
[data-tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0); /* Trượt nhẹ lên vị trí chuẩn */
}