.home-menu {
    width: 100px;
    height: 100px;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 30%;
    right: 40px;
    z-index: 9999;
}

.btn-menu {
    position: absolute;
    width: 90px;
    height: 90px;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
    z-index: 9999;
    cursor: pointer;
}

.hidden {
    display: none;
}

.group-option-menu {
    position: absolute;
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.group-option-menu a {
    position: absolute;
    width: 70px;
    height: 70px;
    opacity: 0;
    transition: transform 0.5s ease-in-out, opacity 0.3s ease-in-out;
}

/* Các menu con sẽ nằm theo hình vòng cung */
.group-option-menu a:nth-child(1) {
    transform: rotate(0deg) translateY(0px) rotate(0deg);
}

.group-option-menu a:nth-child(2) {
    transform: rotate(-35deg) translateY(0px) rotate(35deg);
}

.group-option-menu a:nth-child(3) {
    transform: rotate(-70deg) translateY(0px) rotate(70deg);
}

.group-option-menu a:nth-child(4) {
    transform: rotate(-105deg) translateY(0px) rotate(105deg);
}

.group-option-menu a:nth-child(5) {
    transform: rotate(-140deg) translateY(0px) rotate(140deg);
}

.group-option-menu a:nth-child(6) {
    transform: rotate(-180deg) translateY(0px) rotate(180deg);
}

.home-menu .group-option-menu a {
    opacity: 1;
}

/* .home-menu:hover .group-option-menu a:nth-child(1), */
.home-menu.active .group-option-menu a:nth-child(1) {
    transform: rotate(0deg) translateY(-130px) rotate(0deg);
}

/* .home-menu:hover .group-option-menu a:nth-child(2), */
.home-menu.active .group-option-menu a:nth-child(2) {
    transform: rotate(-35deg) translateY(-130px) rotate(35deg);
}

/* .home-menu:hover .group-option-menu a:nth-child(3), */
.home-menu.active .group-option-menu a:nth-child(3) {
    transform: rotate(-70deg) translateY(-130px) rotate(70deg);
}

/* .home-menu:hover .group-option-menu a:nth-child(4), */
.home-menu.active .group-option-menu a:nth-child(4) {
    transform: rotate(-105deg) translateY(-130px) rotate(105deg);
}

/* .home-menu:hover .group-option-menu a:nth-child(5), */
.home-menu.active .group-option-menu a:nth-child(5) {
    transform: rotate(-140deg) translateY(-130px) rotate(140deg);
}

/* .home-menu:hover .group-option-menu a:nth-child(6), */
.home-menu.active .group-option-menu a:nth-child(6) {
    transform: rotate(-180deg) translateY(-130px) rotate(180deg);
}

@media screen and (max-width: 768px) {
    .group-option-menu a {
        width: 50px;
        height: 50px;
    }

    .home-menu {
        right: 3px;
    }

    .btn-menu {
        width: 60px;
        height: 60px;
    }

    .home-menu:hover .group-option-menu a:nth-child(1),
    .home-menu.active .group-option-menu a:nth-child(1) {
        transform: rotate(0deg) translateY(-90px) rotate(0deg);
    }

    .home-menu:hover .group-option-menu a:nth-child(2),
    .home-menu.active .group-option-menu a:nth-child(2) {
        transform: rotate(-35deg) translateY(-90px) rotate(35deg);
    }

    .home-menu:hover .group-option-menu a:nth-child(3),
    .home-menu.active .group-option-menu a:nth-child(3) {
        transform: rotate(-70deg) translateY(-90px) rotate(70deg);
    }

    .home-menu:hover .group-option-menu a:nth-child(4),
    .home-menu.active .group-option-menu a:nth-child(4) {
        transform: rotate(-105deg) translateY(-90px) rotate(105deg);
    }

    .home-menu:hover .group-option-menu a:nth-child(5),
    .home-menu.active .group-option-menu a:nth-child(5) {
        transform: rotate(-140deg) translateY(-90px) rotate(140deg);
    }

    .home-menu:hover .group-option-menu a:nth-child(6),
    .home-menu.active .group-option-menu a:nth-child(6) {
        transform: rotate(-180deg) translateY(-90px) rotate(180deg);
    }
}