/*
Theme Name:   Thanh An 
Template:     hello-elementor
Version:      1.0.0
Text Domain:  thanhan
*/

.tag-title {
    position: relative;
}

.tag-title h3 {
    color: #2b4dff!important;
}

.tag-title::before {
    content: '';
    width: 50px;
    height: 1px;
    background-color: #2b4dff;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0%, -50%);
}

.tag-title::after {
    content: '';
    width: 10px;
    height: 10px;
    background-color: #2b4dff;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

.explore-badge{
    width:180px;
    height:180px;
    position:relative;
}

/* vòng chữ cố định */
.circle-text{
    width:100%;
    height:100%;
    position:absolute;
    inset:0;
    border-radius:50%;
}

/* mỗi chữ tự quay chậm */
.circle-text span{
    position:absolute;
    font-size:16px;
    font-weight:600;
    color:#111;
    transform-origin:0 100px;
    animation:letterSpin 12s linear infinite;
    color: #fff;
}

/* mũi tên luôn đúng tâm vòng chữ */
.center-arrow{
    position: absolute;
    top: 53%;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #ffffff;
    color: #182e4b;
    font-size: 30px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    z-index: 10;
}

/* chia đều 24 ký tự */
.circle-text span:nth-child(1){transform:rotate(0deg);}
.circle-text span:nth-child(2){transform:rotate(15deg);}
.circle-text span:nth-child(3){transform:rotate(30deg);}
.circle-text span:nth-child(4){transform:rotate(45deg);}
.circle-text span:nth-child(5){transform:rotate(60deg);}
.circle-text span:nth-child(6){transform:rotate(75deg);}
.circle-text span:nth-child(7){transform:rotate(90deg);}
.circle-text span:nth-child(8){transform:rotate(105deg);}
.circle-text span:nth-child(9){transform:rotate(120deg);}
.circle-text span:nth-child(10){transform:rotate(135deg);}
.circle-text span:nth-child(11){transform:rotate(150deg);}
.circle-text span:nth-child(12){transform:rotate(165deg);}
.circle-text span:nth-child(13){transform:rotate(180deg);}
.circle-text span:nth-child(14){transform:rotate(195deg);}
.circle-text span:nth-child(15){transform:rotate(210deg);}
.circle-text span:nth-child(16){transform:rotate(225deg);}
.circle-text span:nth-child(17){transform:rotate(240deg);}
.circle-text span:nth-child(18){transform:rotate(255deg);}
.circle-text span:nth-child(19){transform:rotate(270deg);}
.circle-text span:nth-child(20){transform:rotate(285deg);}
.circle-text span:nth-child(21){transform:rotate(300deg);}
.circle-text span:nth-child(22){transform:rotate(315deg);}
.circle-text span:nth-child(23){transform:rotate(330deg);}
.circle-text span:nth-child(24){transform:rotate(345deg);}

@keyframes letterSpin{
    from{ rotate:0deg; }
    to{ rotate:360deg; }
}

.icon-global {
    animation: spinGlobal 12s linear infinite;
    display: inline-block;
    transform-origin: center;
}

@keyframes spinGlobal {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}