/* 0 ============================================================
=pp bosky ★★★ */
.faq_ask_a_question .hidden {
    display: none;
}
.faq_list {
display: flex;
flex-direction: column;
gap: var(--gap);
align-items: flex-start;
}
.faq_question_li {
    border: 1px solid var(--color-B2);
    border-radius: var(--radius-2);
}
.faq_question_name {
    cursor: pointer;
    padding: .3em .9em;
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    font-size: calc(1.8rem * var(--glob-10));
    font-family: var(--font-2);
    font-weight: 500;
    color: var(--color-black3);
    gap: var(--gap-2);
    min-height: 2.84em;
    line-height: 1.1;
    justify-content: space-between;
}
.faq_question_name:after {
font-family: var(--font-ti);
content: "\e64b";
}
.faq_question_name.open:after {
content: "\e648";
}
.faq_question_name.open,
.faq_question_name:hover {
color:var(--color-blue);
}

.faq_answer {
height: 0;
max-height: 0;
transition: all 0.3s ease-in;
overflow: hidden;
opacity: 0;
color: var(--color-gray);
}
.faq_answer.open {
height: max-content;
max-height: max-content;
overflow: clip;
transition: all 0.6s ease-out;
opacity: 1;
}
.faq_answer>* {
padding: 0rem 1.8rem 1.2rem;
}
.faq_answer p {
font-size: 1.6rem;
}


/* 1 ============================================================
=pp form */
#form_ask_a_question {
display: flex;
flex-direction: column;
gap: var(--gap-2);
}
#form_ask_a_question .form-group {
gap: var(--gap--1_5);
}
#form_ask_a_question .form-group label {
display: flex;
align-items: center;
gap: var(--gap--2);
}


#form_ask_a_question .form-group:has(.faq_captcha_image) {
flex-direction: row;
align-items: center;
flex-wrap: wrap;
width: 100%;
}
#form_ask_a_question .form-group:has(.faq_captcha_image)>*:not(label):not(.form-group) {
width: auto;
}
#form_ask_a_question .faq_captcha_image {
display: flex;
gap: var(--gap--1_5);
align-items: center;
}
#faq_captcha {
    margin-left: auto;
}
#faq_captcha_refesh {
    cursor: pointer;
}
#form_ask_a_question .footer {
display: flex;
align-items: center;
flex-direction: column;
}

.faq_form .alert.alert-danger {
margin:0;
}


/* 1 ============================================================
=pp page faq */
#faq-page .faq-wrapper {
display: flex;
flex-wrap: wrap;
gap: var(--gap-5);
}
#faq-page .faq-wrapper>* {
flex:1;
}
#faq-page .faq_ask_a_question {
max-width: 60rem;
}

/* 2 =========================================
=pp left */
#faq-page .faq-wrapper>.faq_list {
gap:0
/*background-color: #fff;*/
/*border-radius: 0 0 var(--radius-3) var(--radius-3);*/

}


/* tabs */
#faq-page .faq_group_ul {
display: flex;
flex-wrap: wrap;
position: relative;
}
#faq-page .faq_group_ul li {

}


#faq-page .faq_group_ul li .faq_nav_link {
display: inline-flex;
padding: .3em 1em .2em;
align-items: center;
font-size: calc(2.4rem * var(--glob-20));
font-family: var(--font-2);
cursor: pointer;
line-height: 1.2;
gap: var(--gap--3);
font-weight: 500;
border:.3rem solid transparent;
color: var(--color-gray3);
border-radius: var(--radius-3) var(--radius-3) 0 0;
min-height: 3em;
overflow-wrap: break-word;
}
#faq-page .faq_group_ul li.open .faq_nav_link {
color: var(--color-blue);
background-color: #fff;
border-color: var(--color-blue);
border-bottom-color: #fff;
}
#faq-page .faq_group_ul li .faq_nav_link:hover {
color: var(--color-H);
}

/* faq_tab_content */
.faq_tab_content {
display: flex;
flex-direction: column;
gap: var(--gap);
background-color: #fff;
padding: var(--gap-2);
width: 100%;
flex:1;
margin-top: -.3rem;
border-radius: 0 var(--radius-3) var(--radius-3) var(--radius-3);
border-top:.3rem solid var(--color-blue);
}
.faq_tab_pane {
    display: none;
    width: 100%;
}
.faq_tab_pane.open {
    display: flex;
}

.ul_question_ul {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: var(--gap);
}


/* 1 ============================================================
=pp product */
/* button question */
.faq_on_product .faq_ask_a_question {
padding-top: var(--gap-2);
display: flex;
justify-content: center;
}

.faq_on_product .faq_question_li {
    width: 100%;
}

/* 912px */
@media (min-width: 57em) {
    .faq_on_product .faq_list  {
        flex-wrap: wrap;
        gap: var(--gap) var(--gap-2);
        flex-direction: row;
    }
    .faq_on_product .faq_question_li {
        width: calc(50% - var(--gap));
    }

}


/* 2 =========================================
=pp form pop up */
.faq_ask_a_question .faq_pop_up {
    background-color: #fff;
/*    left: 50%;*/
    position: relative;
/*    transform: translateX(-50%);*/
overflow: auto;
max-height: 100%;
    width: 100%;
    max-width: 60rem;
    z-index: 2;
/*    margin:var(--gap);*/
    box-shadow: var(--shadow-2);
    border: 1px solid var(--color-B);
    padding: var(--gap-2_5);
    border-radius: var(--radius-3);
}

.faq_close {
    width: 3rem;
    height: 3rem;
    font:0/0 Arial;
    position: absolute;
    z-index: 2;
    top: 2rem;
    right: 2rem;
    cursor: pointer;
}
.faq_close:hover {
color: var(--color-red);
}
.faq_close::after {
content: '\e646';
font-family: var(--font-ti);
font-size: 3rem;
line-height: 1;
width: inherit;
height: inherit;
display: flex;
justify-content: center;
align-items: center;
}
.loadJS .faq_on_product .faq_forms.faq_overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1111;
background-color: #ffffff77;
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
}
.loadJS .faq_on_product :is(.faq_forms.faq_overlay,.faq_ask_a_question .faq_pop_up) {
opacity: 1;
visibility: visible;
transition: all .3s ease-out;
}
.faq_on_product :is(.faq_forms.faq_overlay,.faq_ask_a_question .faq_pop_up).hidden {
opacity: 0;
visibility: hidden;
transition: all .6s ease-out;
}
body:has(.faq_on_product .faq_pop_up:not(.hidden)) {
    overflow: hidden;
}
#form_ask_a_question .title_block {
    font-size: 2.4rem;
    font-weight: 600;
    font-family: var(--font-2);
/*    text-transform: capitalize;*/
}

.ask_a_question_desc {
font-size: 1.5rem;
line-height: 1.3;
}
#form_ask_a_question label sub {
    border: 0 none;
    bottom: 0;
    color: red;
}
.faq_form textarea {
    min-height: 10rem;
    min-width: 100%;
}


.faq_list.faq_notshow_askform {
    width: 100%;
}


.faq_loading {
    width: 17px;
    animation: spin 2s linear infinite;
}

@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}