@keyframes glowing-border {
    0% {
        box-shadow: 0 0 10px 0px #8A2BE2, 0 0 20px 10px transparent;
    }
    50% {
        box-shadow: 0 0 15px 5px #8A2BE2, 0 0 25px 15px #9400D3;
    }
    100% {
        box-shadow: 0 0 10px 0px #8A2BE2, 0 0 20px 10px transparent;
    }
}

.glow-effect {
    animation: glowing-border 2s infinite ease-in-out;
    border: 4px solid #8A2BE2; /* สีกรอบ */
    border-radius: 10px; /* มุมโค้งมน */
}

@keyframes universal-glow {
    0% {
        box-shadow: 0 0 10px #fff, 0 0 20px #fff;
    }
    50% {
        box-shadow: 0 0 15px #ddd, 0 0 25px #ccc;
    }
    100% {
        box-shadow: 0 0 10px #fff, 0 0 20px #fff;
    }
}

.universal-glow {
    animation: universal-glow 2s infinite ease-in-out;
    border: 4px solid #ddd; /* สีกรอบกลาง */
    border-radius: 10px;
}

@keyframes dynamic-glow {
    0% {
        box-shadow: 0 0 10px var(--dynamic-color), 0 0 20px var(--dynamic-color);
    }
    50% {
        box-shadow: 0 0 15px var(--dynamic-color), 0 0 25px var(--dynamic-color-light);
    }
    100% {
        box-shadow: 0 0 10px var(--dynamic-color), 0 0 20px var(--dynamic-color);
    }
}

.dynamic-glow {
    --dynamic-color: #8A2BE2; /* Default สีหลัก */
    --dynamic-color-light: #DDA0DD; /* Default สีอ่อน */
    animation: dynamic-glow 2s infinite ease-in-out;
    border: 4px solid var(--dynamic-color);
    border-radius: 10px;
}


@keyframes gradient-border {
    0% {
        border-image-source: linear-gradient(45deg, var(--dynamic-color), var(--dynamic-color-light));
    }
    50% {
        border-image-source: linear-gradient(135deg, var(--dynamic-color-light), var(--dynamic-color));
    }
    100% {
        border-image-source: linear-gradient(45deg, var(--dynamic-color), var(--dynamic-color-light));
    }
}

.gradient-border {
    border-width: 4px;
    border-style: solid;
    border-image-slice: 1;
    animation: gradient-border 3s infinite linear;
}

@keyframes pulsating-glow {
    0% {
        box-shadow: 0 0 10px var(--dynamic-color);
    }
    50% {
        box-shadow: 0 0 20px var(--dynamic-color-light), 0 0 40px var(--dynamic-color);
    }
    100% {
        box-shadow: 0 0 10px var(--dynamic-color);
    }
}

.pulsating-glow {
    animation: pulsating-glow 2s infinite ease-in-out;
    border: 4px solid var(--dynamic-color);
    border-radius: 10px;
}

@keyframes moving-border {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

.moving-border {
    position: relative;
    border: 4px solid transparent;
    border-radius: 10px;
    background: linear-gradient(90deg, var(--dynamic-color), var(--dynamic-color-light));
    background-size: 200% 200%;
    animation: moving-border 4s linear infinite;
}

















/*----------------genealogy-tree----------*/
.genealogy-body {
    white-space: nowrap;
    overflow-y: hidden;
    padding: 40px;
    min-height: 400px;
    padding-top: 8px;
    text-align: center;
    background-color: #dbdbdb; /* สีพื้นหลังของแผนผัง */
}

.genealogy-tree {
    display: inline-block;
    transform: scale(0.8);
    transform-origin: top center;
}

.genealogy-tree ul {
    padding-top: 16px;
    position: relative;
    padding-left: 0px;
    display: flex;
    justify-content: center;
}

.genealogy-tree li {
    float: left;
    text-align: center;
    list-style-type: none;
    position: relative;
    padding: 16px 4px 0 4px;
}

/* Adjusted connector lines for scaled view */
.genealogy-tree li::before,
.genealogy-tree li::after {
    content: "";
    position: absolute;
    top: 0;
    right: 50%;
    border-top: 3px solid #ffffff; /* เพิ่มความหนาเส้นเชื่อม */
    width: 50%;
    height: 16px;
}

.genealogy-tree li::after {
    right: auto;
    left: 50%;
    border-left: 3px solid #ffffff; /* เพิ่มความหนาเส้นขอบ */
}

.genealogy-tree li:only-child::after,
.genealogy-tree li:only-child::before {
    display: none;
}

.genealogy-tree li:only-child {
    padding-top: 0;
}

.genealogy-tree li:first-child::before,
.genealogy-tree li:last-child::after {
    border: 0 none;
}

.genealogy-tree li:last-child::before {
    border-right: 3px solid #ffffff;
    border-radius: 0 4px 0 0;
}

.genealogy-tree li:first-child::after {
    border-radius: 4px 0 0 0;
}

/* Vertical line from parent to children */
.genealogy-tree ul ul::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    border-left: 3px solid #ffffff; /* เพิ่มความหนาของเส้นแนวตั้ง */
    width: 0;
    height: 20px;
}

.genealogy-tree li a {
    text-decoration: none;
    color: #666;
    font-size: 9px;
    display: inline-block;
    border-radius: 4px;
}

/*--------------member-card-design----------*/
.member-view-box {
    padding: 0px 10px;
    text-align: center;
    border-radius: 4px;
    position: relative;
    background-color: #ffffff; /* พื้นหลังสีขาวภายในกล่อง */
    border: 3px solid transparent; /* เพิ่มความหนาของเส้นขอบ */
}

/* กำหนดสีของ border ตามระดับตำแหน่ง */
.member-view-box[data-level="platinum"] {
    border-color: #45bca9;
}

.member-view-box[data-level="gold"] {
    border-color: #f2b200;
}

.member-view-box[data-level="silver"] {
    border-color: #629087;
}

.member-view-box[data-level="bronze"] {
    border-color: #b8691c;
}

.member-view-box[data-level="star"] {
    border-color: #5c1ac3;
}

.member-view-box[data-level="member"] {
    border-color: #84bb3c;
}

.member-image {
    width: 120px;
    text-align: center;
    margin-bottom: 12px;
    position: relative;
}

.member-image img {
    width: 60px;
    height: 60px;
    margin: 8px auto;
    border-radius: 4px;
    margin-top: 12px;
    background-color: #1f2b38;
    z-index: 1;
}

.person-name {
    font-size: 12px;
    color: #1e1e1e;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100px;
}

.person-level {
    font-size: 11px;
    font-weight: 500;
    line-height: 20px;
}

.person-level[data-level="platinum"] {
    color: #45bca9;
}

.person-level[data-level="gold"] {
    color: #f2b200;
}

.person-level[data-level="silver"] {
    color: #629087;
}

.person-level[data-level="bronze"] {
    color: #b8691c;
}

.person-level[data-level="star"] {
    color: #5c1ac3;
}

.person-level[data-level="member"] {
    color: #84bb3c;
}

.person-pv {
    color: #969696;
    font-size: 11px;
    line-height: 20px;
}
.genealogy-body.active {
    cursor: grabbing;
    cursor: -webkit-grabbing;
}