.hero{
    padding-bottom: 64px;
}

.hero-title{
    line-height: 56px;
    font-size: 44px;
    font-weight: 700;
}
.hero-description{
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
}
.btn-handles-photo{
    border: unset;
    background-color: unset;
}

li.social-item {
    margin-left: 3rem;
    margin-right: 3rem;
}
li.social-item img{
    height: 48px;
}
.helping-creators{
    color: rgb(92 93 107);
    line-height: 32px;
    font-weight: 600;
    font-size: 24px;
    margin-bottom: 3.5rem;
}

.marquee-wrapper{
    width: 100%; /* hoặc chiều rộng hiển thị mong muốn */
    overflow: hidden;
}
.marquee-container {
    width: 400%;
    display: flex;
    flex-wrap: nowrap;
}
.card-list{
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-left: 15px;
}
.card-item {
    flex: 0 0 calc((100% - 3 * 1.5rem) / 3);
}
.card-image{
    flex-basis: 60%;
}
.card-image>div{
    border-radius: 1rem;
    overflow: hidden;
}
.card-image img{
    width: 100%;
    height: 240px;
    transition: all 1s;
}
.card-image:hover img{
    transform: scale(1.2);
}

.card-description{
    font-size: .875rem;
    min-height: 80px;
}
.photo-editor{
    padding-top: 120px;
    margin-bottom: 72px;
}
.photo-editor h2{
    font-size: 44px;
    font-weight: 700;
    line-height: 56px;
}
.photo-editor p{
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    color: #5c5d6b;
}

.card-icon{
    width: 60px;
    color:#252638;
}
.card-icon svg path{
    stroke: currentColor;
}
.card-icon>div{
    width: 60px;
    height: 60px;
    background: linear-gradient(180deg,#e2eaf4,#ece2f4);
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.card-icon svg{
    width: 24px;
    height: 24px;
    color: inherit;
}
.card-icon-menu{
    width: 35px;
}
.card-icon-menu>div{
    background-color: #f4f4f4;
    width: 35px;
    height: 35px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.card-icon-menu svg {
    width: 18px;
    height: 18px;
    color: inherit;
}
.dropdown-item{
    padding: .25rem 1rem .25rem .25rem;
    font-weight: 600;
    font-size: .875rem;
}
 .dropdown-item:hover .card-icon-menu svg path{
    stroke: #007bff;
}
.dropdown-item:hover .card-icon-menu>div{
    background-color: #faf9f9;
}
.dropdown-item:hover{
    color: #007bff;
}


.journey{
    padding-top: 64px;
    padding-bottom: 64px;
    background-color: rgb(31 41 55);
    color: #ffffff;
}
.journey-description{
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
}
.journey-info{
    display: flex;
}
.journey-info .item{
    flex:1;
}
.journey-info .item .image{
    width: 72px;
    height: 72px;
    border-radius: 22px;
    background-color: rgba(255, 255, 255, 0.2) ;
}
.journey-text{
    margin-bottom: 56px;
}

.btn-editing{
    transition: all .5s;
}
.preview-box {
    position: absolute;
    width: 80px;
    height: 80px;
    overflow: hidden;
    border: 2px solid #333;
    pointer-events: none;
    display: none;
    z-index: 9999;
}

.preview-box img {
    position: absolute;
    top: 0;
    left: 0;
}
#main-image {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
}

.handles-photo-title{
    font-weight: 700;
    color: #1F2937;
    font-size: 40px;
    line-height: 48px;
    text-align: center;
}
.group-btn{
    background-color: #E5E7EB;
    padding: 6px;
    border-radius: 20px;
}
.btn-editing{
    padding: 10px 16px;
    border-radius: 20px;
    border: none;
    background: transparent;
    transition: all 1s;
}

.line-mobile{
    width: 75%;
    height: .125rem;
    margin: 1.5rem auto;
    background-color: #E2E8F0;
}

.check-list {
    list-style: none; /* Bỏ bullet mặc định */
    padding-left: 0;
}

.check-list li {
    color: #252638;
    position: relative;
    padding-left: 30px; /* Chừa chỗ cho ảnh */
}

.check-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 1.25rem;
    height: 1.25rem;
    background-image: url('/images/ai_image/icon_checked.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
}
.sub-compare{
    gap: 3.5rem;
}
.sub-compare-item-title{
    color: #212B39;
    line-height: 44px;
    font-size: 32px;
    font-weight: 600;
}
.sub-compare-item-description{
    color: #5C5D6B;
    line-height: 28px;
    font-size: 18px;
    align-self: stretch;
    font-weight: 400;
}
.check-list{
    margin-left: 24px;
}
.check-list li{
    line-height: 28px;
    font-size: 18px;
    align-self: stretch;
    font-weight: 400;
}

.customer-comment h2{
    font-weight: 700;
    font-size: 44px;
    line-height: 56px;
}
.customer-comment p{
    font-size: 16px;
    line-height: 24px;
    color: #5C5D6B;
    max-width: 80%;
    font-weight: 400;
}
.app-info{
    margin-bottom: 96px;
}
.app-info>div{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    margin: auto;
}
.app-info .content{
    padding: 1.5rem 2rem;
}

.bg-center {
    background-position: 50%;
}
.bg-smart-banner-bg-gradient {
    background-image: url(/images/ai_image/smart_banner_bg.webp);

}
.app-info .left .title{
    font-size: 32px;
    line-height: 44px;
    font-weight: 600;

}
.app-info .left .description{
    opacity: 0.9;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
}
.frequently-asked{
    padding-top: 3.5rem;
    padding-bottom: 80px;
}
.frequently-asked .title{
    margin-bottom: 1.5rem;
}
.frequently-asked .title h2{
    color: #212B39;
    line-height: 44px;
    font-size: 32px;
    font-weight: 600;
}

svg.animation-rotate {
    animation: circle 10s linear 0s infinite;
    top: 42%;
    left: 40%;
    width: 90px;
    height: 90px;
    position: absolute;
    z-index: 10;
}
@keyframes circle {
    0% {
        transform: rotate(0);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(1turn);
    }
}

@media (min-width: 851px){
    .hero{
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

@media (min-width: 1024px) {
    .hero{
        padding-top: 120px;
    }
    svg.animation-rotate {
        top: 50%;
        left: 44%;
        width: 112px;
        height: 112px;
    }

    .lg-zinc-300{
        -webkit-mask-image: linear-gradient(
                90deg,
                transparent 0,
                #000 300px,
                #000 calc(100% - 300px),
                transparent
        );
        mask-image: linear-gradient(
                90deg,
                transparent 0,
                #000 300px,
                #000 calc(100% - 300px),
                transparent
        );
    }

    .hero-title{
        line-height: 80px;
        font-size: 64px;
    }

    .hero-description{
        font-size: 20px;
        font-weight: 400;
        line-height: 30px;
    }
    .hero .info{
        padding-right: 96px;
    }
    .photo-editor p{
        max-width: 720px;
    }

    .journey{
        padding-top: 120px;
        padding-bottom: 120px;
    }
    .journey-text{
        margin-bottom: 80px;
        gap: 1.5rem;
    }
    .journey-description{
        max-width: 720px;
        font-size: 20px;
        line-height: 30px;
    }
    .journey-info{
        gap: 3.5rem;
    }

    .handles-photo-title{
        font-size: 56px;
        line-height: 72px;
    }

    .sub-compare{
        padding-top: 144px;
        padding-bottom: 72px;
    }
    .sub-compare-item{
        gap: 120px;
    }
    .sub-compare-item-title{
        line-height: 56px;
        font-size: 44px;
        font-weight: 700;
    }

    .app-info>div{
        padding-left: 0;
        padding-right: 0;
    }
    .app-info .content{
        padding: 1.5rem;
    }
    .app-info .left{
       flex-basis: 44rem;
        padding: 3rem;
    }
    .app-info .right{
       max-width: 33rem;
        position: absolute;
        right: 0;
        display: block!important;
        bottom: -.25rem;
    }
    .app-info .left .title{
        font-size: 44px;
        line-height: 56px;
    }
    .app-info .left .description{
        line-height: 2;
        font-size: 20px;
    }
    .frequently-asked{
        padding-top: 5rem;
        padding-bottom: 120px;
    }
    .frequently-asked .title{
        margin-bottom: 3rem;
    }
    .frequently-asked .title h2{
        line-height: 72px;
        font-weight: 700;
        font-size: 56px;
    }
    svg.animation-rotate.lg {
        top: 50%;
    }
}
@media (max-width: 1024px){
    .card-item {
        flex: 0 0 calc((100% - 2 * 1.5rem) / 2);
    }

}
@media (min-width: 851px) and (max-width: 1024px){
    svg.animation-rotate.lg {
        top: 30%;
    }
}
@media (max-width: 768px){
    .marquee-container {
        width: 800%;
    }

    .card-item {
        flex: 0 0 100%;
    }
    .hero{
        padding-top: unset;
    }
}