/* Catppuccin Mocha Palette (như bạn đã cung cấp) */
:root {
    /* Mocha Palette */
    --color-rosewater: #F5E0DC;
    --color-flamingo: #F2CDCD;
    --color-pink: #F5C2E7;
    --color-mauve: #CBA6F7;
    --color-red: #F38BA8;
    --color-maroon: #EBA0AC;
    --color-peach: #FAB387;
    --color-yellow: #F9E2AF;
    --color-green: #A6E3A1;
    --color-teal: #94E2D5;
    --color-sky: #89DCEB;
    --color-sapphire: #74C7EC;
    --color-blue: #89B4FA;
    --color-lavender: #B4BEFE;

    /* Base Colors */
    --color-base: #1E1E2E;
    --color-mantle: #181825;
    --color-surface: #313244;
    --color-overlay: #414559;
    --color-subtext: #6E6C7E;
    --color-text: #CDD6F4;
}


/* Font Awesome (nếu bạn dùng) */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');

body {
    font-family: sans-serif; /* Chọn font chữ */
    background-color: var(--color-base); /* Sử dụng biến màu nền */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

.container {
    position: relative;
    width: 500px;  /* Điều chỉnh theo ảnh */
    height: 500px; /* Điều chỉnh theo ảnh */
    display: flex;
    justify-content: center;
    align-items: center;
}

.profile-image {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid var(--color-rosewater); /* Viền ảnh */
    z-index: 1;
    position: relative;
    animation: rainbow-border 5s linear infinite; /* Thêm animation */
}

@keyframes rainbow-border {
    0% {
        border-color: var(--color-rosewater);
    }
    14% {
        border-color: var(--color-flamingo);
    }
    28% {
        border-color: var(--color-pink);
    }
    42% {
        border-color: var(--color-mauve);
    }
    57% {
        border-color: var(--color-red);
    }
    71% {
        border-color: var(--color-maroon);
    }
    85% {
        border-color: var(--color-peach);
    }
    100% {
        border-color: var(--color-rosewater);
    }
}

.profile-image {
    /* ... các thuộc tính khác ... */
    transition: transform 0.3s ease; /* Thêm transition */
}

.profile-image:hover {
    transform: scale(1.1); /* Phóng to 110% */
}

.bubbles {
    position: absolute;
    width: 100%;
    height: 100%;
}

.bubble {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    /* Gradient cho bong bóng */
    background: linear-gradient(135deg, var(--color-lavender), var(--color-blue));
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: var(--color-base); /* Màu icon */
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; /* Thêm transition cho background */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);

    /* Tooltip styles */
    &::before {
      content: attr(data-text);
      position: absolute;
      bottom: -35px; /* Điều chỉnh vị trí */
      left: 50%;
      transform: translateX(-50%);
      background-color: var(--color-overlay);
      color: var(--color-text);
      padding: 5px 10px;
      border-radius: 5px;
      opacity: 0;
      transition: opacity 0.3s ease;
      white-space: nowrap;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      z-index: 2; /* Đảm bảo tooltip nằm trên */
    }

     &:hover::before {
        opacity: 1;
    }
}

.bubble:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    /* Đổi màu gradient khi hover */
    background: linear-gradient(135deg, var(--color-blue), var(--color-mauve));
}

.bubbles ul {
    list-style: none;  /* Loại bỏ dấu chấm của danh sách */
    padding: 0;        /* Loại bỏ padding mặc định */
    margin: 0;         /* Loại bỏ margin mặc định */
    position: absolute;
    width: 100%;
    height: 100%;
}
.bubbles li {
    display: inline-block;
}