/* ====================================================
   XC FAQ Plugin - Original VitaDairy Exact CSS (Pure)
   ==================================================== */

:root {
    --primary: #214392;
    --secondary: #3eb7e4;
}

.xc-faq-wrapper {
    font-family: inherit;
}

/* Section 1: Search Box */
.xc-faq-wrapper .section-search-faqs {
    background-color: #d8f1fa !important;
}

/* Active State for Filter Pills */
.xc-faq-wrapper .vfaq-filter-btn.active {
    background-color: #3eb7e4 !important;
    color: #ffffff !important;
    border-color: #3eb7e4 !important;
    box-shadow: 0 4px 12px rgba(62, 183, 228, 0.35) !important;
}

.xc-faq-wrapper .section-search-faqs .search-box input,
.xc-faq-wrapper .section-search-faqs .search-box select {
    background-color: #fff !important;
    color: #333 !important;
    border: 1px solid #ced4da !important;
}

/* Section 2: Main FAQs Section */
.xc-faq-wrapper .section-faqs {
    padding: 3rem 0 5rem;
}

/* 3 Sidebar Column List Groups */
.xc-faq-wrapper .section-faqs .btn-list-group {
    background-color: #3eb7e4 !important;
    border: 0 !important;
    font-size: 1.25rem !important;
    font-weight: bold !important;
    border-top-left-radius: 0.5rem !important;
    border-top-right-radius: 0.5rem !important;
    padding: 0.75rem 1.25rem !important;
    display: block !important;
    color: #fff !important;
    text-decoration: none !important;
}

.xc-faq-wrapper .section-faqs .btn-list-group:hover,
.xc-faq-wrapper .section-faqs .btn-list-group:visited {
    background-color: #3eb7e4 !important;
    color: #fff !important;
}

.xc-faq-wrapper .section-faqs .list-group .collapse {
    border: 1px solid #3eb7e4 !important;
    border-radius: 0.75rem !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    overflow: hidden;
}

.xc-faq-wrapper .section-faqs .list-group-item {
    position: relative;
    display: block;
    padding: 0.65rem 1.25rem !important;
    background-color: transparent !important;
    border: 0 !important;
    font-weight: bold !important;
    color: #495057 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease-in-out;
}

.xc-faq-wrapper .section-faqs .list-group-item:hover,
.xc-faq-wrapper .section-faqs .list-group-item.active {
    background-color: #d8f1fa !important;
    color: #214392 !important;
}

.xc-faq-wrapper .section-faqs .list-group-cont {
    overflow-y: auto !important;
    height: 168px !important;
}

/* Sub-topic Pills: Lọc theo chủ đề */
.xc-faq-wrapper .faqs-topic {
    margin: 30px 0 0;
}

.xc-faq-wrapper .faqs-topic h3 {
    color: #214392 !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    margin-bottom: 15px !important;
}

.xc-faq-wrapper .faqs-topic .list-group-custom {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.xc-faq-wrapper .faqs-topic .list-group-custom li,
.xc-faq-wrapper .faqs-topic .vfaq-filter-btn {
    border: 1px solid #3eb7e4 !important;
    border-radius: 5rem !important;
    margin-right: 0.5rem;
    margin-bottom: 0.75rem;
    width: -webkit-fit-content;
    font-size: 0.85rem !important;
    font-weight: bold !important;
    color: #3eb7e4 !important;
    padding: 0.75rem 1.25rem !important;
    list-style: none;
    display: inline-flex;
    cursor: pointer !important;
    background-color: transparent !important;
    text-transform: none !important;
    transition: all 0.2s ease !important;
}

.xc-faq-wrapper .faqs-topic .list-group-custom li:hover,
.xc-faq-wrapper .faqs-topic .list-group-custom li.active,
.xc-faq-wrapper .faqs-topic .vfaq-filter-btn:hover,
.xc-faq-wrapper .faqs-topic .vfaq-filter-btn.active {
    color: #fff !important;
    background-color: #3eb7e4 !important;
    border-color: #3eb7e4 !important;
}

/* Post Cards */
.xc-faq-wrapper .list-post {
    display: flex;
    flex-wrap: wrap;
}

.xc-faq-wrapper .list-post .card {
    box-shadow: 0 3px 40px rgba(131,131,131,.15) !important;
    border-radius: 1rem !important;
    overflow: hidden !important;
    border-color: rgba(0,0,0,0) !important;
    background-color: #fff !important;
    height: 100%;
}

.xc-faq-wrapper .list-post .card:hover img {
    transform: scale(1.1);
    transition: all .2s ease-in-out;
}

.xc-faq-wrapper .list-post .card:hover .title {
    color: #3eb7e4 !important;
}

.xc-faq-wrapper .list-post .card .image {
    overflow: hidden;
    border-radius: 0.5rem;
}

.xc-faq-wrapper .list-post .card .image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.xc-faq-wrapper .list-post .card .title {
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    color: #214392 !important;
    margin-bottom: 1rem;
}

/* Number Pagination (Clean text 1 2 3, NO background, NO border boxes) */
.xc-faq-wrapper ul.vfaq-pagination-list,
.xc-faq-wrapper ul.vfaq-pagination-list li,
.xc-faq-wrapper ul.vfaq-pagination-list a,
.xc-faq-wrapper ul.vfaq-pagination-list span {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    outline: none !important;
}

.xc-faq-wrapper ul.vfaq-pagination-list a.page-number,
.xc-faq-wrapper ul.vfaq-pagination-list span.page-number {
    font-size: 1.1rem !important;
    font-weight: 500 !important;
    color: #214392 !important;
    padding: 0 4px !important;
    text-decoration: none !important;
}

.xc-faq-wrapper ul.vfaq-pagination-list span.page-number.current {
    color: #3eb7e4 !important;
    font-weight: bold !important;
}

/* ====================================================
   Clean Outline Buttons (Hover fills background)
   ==================================================== */
.vfaq-btn-outline,
a.vfaq-btn-outline,
span.vfaq-btn-outline,
button.vfaq-btn-outline,
.button.vfaq-btn-outline,
.vfaq-btn-outline-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 1.5px solid #3eb7e4 !important;
    color: #3eb7e4 !important;
    border-radius: 30px !important;
    padding: 6px 20px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    text-transform: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: all 0.25s ease-in-out !important;
}

.vfaq-btn-outline:hover,
a.vfaq-btn-outline:hover,
span.vfaq-btn-outline:hover,
button.vfaq-btn-outline:hover,
.button.vfaq-btn-outline:hover,
.vfaq-btn-outline-primary:hover {
    background: #3eb7e4 !important;
    background-color: #3eb7e4 !important;
    color: #ffffff !important;
    border-color: #3eb7e4 !important;
    box-shadow: 0 4px 15px rgba(62, 183, 228, 0.35) !important;
}

.vfaq-btn-outline-dark {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    background-color: transparent !important;
    border: 1.5px solid #214392 !important;
    color: #214392 !important;
    border-radius: 30px !important;
    padding: 6px 22px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    text-transform: none !important;
    cursor: pointer !important;
    transition: all 0.25s ease-in-out !important;
}

.vfaq-btn-outline-dark:hover {
    background-color: #214392 !important;
    color: #ffffff !important;
    border-color: #214392 !important;
    box-shadow: 0 4px 15px rgba(33, 67, 146, 0.35) !important;
}

.vfaq-btn-sidebar {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    white-space: nowrap !important;
    background-color: transparent !important;
    border: 1.5px solid #3eb7e4 !important;
    color: #3eb7e4 !important;
    border-radius: 30px !important;
    padding: 10px 20px !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    text-decoration: none !important;
    transition: all 0.25s ease-in-out !important;
}

.vfaq-btn-sidebar:hover {
    background-color: #3eb7e4 !important;
    color: #ffffff !important;
    border-color: #3eb7e4 !important;
    box-shadow: 0 5px 18px rgba(62, 183, 228, 0.4) !important;
}

/* Share Button (Light Cyan #3eb7e4) */
.vfaq-btn-share {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    border: 1.5px solid #3eb7e4 !important;
    color: #3eb7e4 !important;
    border-radius: 30px !important;
    padding: 5px 18px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    background-color: transparent !important;
    transition: all 0.25s ease-in-out !important;
}

.vfaq-btn-share:hover {
    background-color: #3eb7e4 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(62, 183, 228, 0.3) !important;
}

.vfaq-share-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid #3eb7e4;
    color: #3eb7e4;
}

.vfaq-btn-share:hover .vfaq-share-icon {
    border-color: #ffffff;
    color: #ffffff;
}

/* Sidebar Plain Text Link (NO Outline, NO Box) */
.vfaq-link-detail {
    display: inline-block !important;
    white-space: nowrap !important;
    color: #214392 !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    text-transform: none !important;
    text-decoration: none !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    transition: color 0.2s ease !important;
}

.vfaq-link-detail:hover {
    color: #3eb7e4 !important;
    text-decoration: underline !important;
}