/* ==========================================================
   THUAN PHAT - FAQ MODULE
   Version : 1.0
========================================================== */

/* ===== Root ===== */

.tp-faq{
    padding:90px 0;
    background:#ffffff;
}

.tp-container{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:0 15px;
}

/* ===== Header ===== */

.tp-faq-header{
    text-align:center;
    margin-bottom:60px;
}

.tp-faq-subtitle{
    display:inline-block;
    margin-bottom:15px;
    color:#006838;
    font-size:14px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
}

.tp-faq-title{
    margin:0 0 20px;
    font-size:40px;
    line-height:1.3;
    color:#222;
    font-weight:700;
}

.tp-faq-description{
    max-width:760px;
    margin:0 auto;
    color:#666;
    font-size:17px;
    line-height:1.8;
}

/* ===== Layout ===== */

.tp-faq-list{

    display:flex;

    flex-direction:column;

    gap:18px;

}

/* ===== Card ===== */

.tp-faq-item{

    background:#ffffff;

    border:1px solid #e6e6e6;

    border-radius:14px;

    overflow:hidden;

    transition:.3s;

}

.tp-faq-item:hover{

    border-color:#006838;

}

/* ===== Question ===== */

.tp-faq-question{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:24px 30px;

    cursor:pointer;

    user-select:none;

}

.tp-faq-question-title{

    margin:0;

    font-size:20px;

    font-weight:600;

    line-height:1.5;

    color:#222;

    flex:1;

}

/* ===== Icon ===== */

.tp-faq-icon{

    width:40px;

    height:40px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-left:20px;

    border-radius:50%;

    background:#006838;

    color:#ffffff;

    font-size:24px;

    font-weight:300;

    transition:.3s;

    flex-shrink:0;

}

/* ===== Answer ===== */

.tp-faq-answer{

    padding:0 30px 30px;

}

.tp-faq-answer p{

    margin:0;

    color:#666;

    line-height:1.8;

    font-size:16px;

}

/* ===== Internal Link ===== */

.tp-faq-links{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:22px;

}

.tp-faq-links a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 18px;

    border-radius:30px;

    background:#f5f5f5;

    color:#006838;

    font-size:14px;

    font-weight:600;

    text-decoration:none;

    transition:.3s;

}

.tp-faq-links a:hover{

    background:#006838;

    color:#ffffff;

}

/* ===== Responsive ===== */

@media(max-width:991px){

    .tp-faq{

        padding:70px 0;

    }

    .tp-faq-header{

        margin-bottom:45px;

    }

    .tp-faq-title{

        font-size:34px;

    }

}

@media(max-width:767px){

    .tp-faq{

        padding:60px 0;

    }

    .tp-faq-title{

        font-size:28px;

    }

    .tp-faq-description{

        font-size:16px;

    }

    .tp-faq-question{

        padding:18px 20px;

    }

    .tp-faq-question-title{

        font-size:18px;

    }

    .tp-faq-answer{

        padding:0 20px 20px;

    }

    .tp-faq-icon{

        width:34px;

        height:34px;

        font-size:20px;

    }

/* ==========================================================
FAQ ACCORDION
========================================================== */

    .tp-faq-answer{
        display:none;
    }

    .tp-faq-item.active .tp-faq-answer{
        display:block;
    }

    .tp-faq-item.active .tp-faq-icon{
        transform:rotate(180deg);
    }

}