/* ============== FAQ Page Styles ============== */
.faq-page { padding: 30px 0 60px; }

.faq-search {
    background: #f5fbfd; border: 1px solid #e0f3f8;
    border-radius: 4px; padding: 24px 30px;
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px; gap: 20px;
}
.faq-search-left { display: flex; align-items: center; gap: 12px; min-width: 220px; }
.faq-search-left .fa-search { font-size: 26px; color: #48C7EC; }
.faq-search-left .tip { font-size: 14px; color: #868686; }
.faq-search-left .tip b { color: #48C7EC; font-size: 22px; margin: 0 4px; }
.faq-search-right { flex: 1; display: flex; height: 44px; border: 2px solid #48C7EC; border-radius: 4px; overflow: hidden; background: #fff; max-width: 600px; }
.faq-search-right input { flex: 1; border: 0; outline: none; padding: 0 16px; font-size: 14px; color: #5a5a5a; background: transparent; }
.faq-search-right button { width: 100px; background: #48C7EC; color: #fff; border: 0; cursor: pointer; font-size: 14px; letter-spacing: 2px; }
.faq-search-right button:hover { background: #2eb6dc; }

.faq-hot-tags { display: flex; gap: 10px; margin-bottom: 24px; padding: 0 4px; font-size: 13px; flex-wrap: wrap; }
.faq-hot-tags span { color: #999; }
.faq-hot-tags a { color: #6f6f6f; padding: 4px 12px; background: #fff; border: 1px solid #e8e8e8; border-radius: 14px; cursor: pointer; transition: all .2s; }
.faq-hot-tags a:hover { border-color: #48C7EC; color: #48C7EC; }

.cat-tabs { display: flex; border-bottom: 2px solid #eaeaea; margin-bottom: 24px; flex-wrap: wrap; }
.cat-tabs .tab { padding: 14px 24px; font-size: 15px; color: #434242; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: all .25s; }
.cat-tabs .tab:hover { color: #48C7EC; }
.cat-tabs .tab.active { color: #48C7EC; border-bottom-color: #48C7EC; font-weight: 700; }

.faq-layout { display: flex; gap: 30px; }
.faq-main { flex: 1; min-width: 0; }
.faq-side { width: 280px; flex-shrink: 0; }

.faq-list { }
.faq-item { background: #fff; border: 1px solid #eef2f4; border-radius: 4px; margin-bottom: 12px; overflow: hidden; transition: box-shadow .25s, border-color .25s; }
.faq-item:hover { box-shadow: 0 4px 14px rgba(72,199,236,.10); border-color: #d6eef6; }
.faq-item.open { border-color: #48C7EC; box-shadow: 0 6px 18px rgba(72,199,236,.12); }
.faq-item.empty { text-align: center; padding: 60px 0; color: #999; border: 0; }

.faq-q { display: flex; align-items: center; gap: 14px; padding: 18px 22px; cursor: pointer; background: #fff; }
.faq-q .tag { display: inline-block; padding: 3px 12px; background: #eaf7fc; color: #48C7EC; font-size: 12px; border-radius: 2px; flex-shrink: 0; }
.faq-q .tag.tag-product { background: #e8f5e9; color: #4caf50; }
.faq-q .tag.tag-service { background: #fff3e0; color: #e69333; }
.faq-q .tag.tag-cooperate { background: #f3e5f5; color: #8e24aa; }
.faq-q .tag.tag-aftersales { background: #fce4ec; color: #e91e63; }

.faq-q .q { flex: 1; font-size: 15px; color: #434242; font-weight: 500; line-height: 1.5; }
.faq-q .q::before { content: "Q"; color: #48C7EC; font-weight: 700; margin-right: 8px; font-family: Arial; }
.faq-q .arrow { width: 22px; height: 22px; border: 1px solid #cfd8dc; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #cfd8dc; font-size: 11px; transition: all .25s; flex-shrink: 0; }
.faq-item.open .faq-q .arrow { background: #48C7EC; color: #fff; border-color: #48C7EC; transform: rotate(180deg); }

.faq-a { display: none; padding: 18px 22px 22px 50px; font-size: 14px; color: #6f6f6f; line-height: 1.85; border-top: 1px dashed #f0f0f0; background: #fbfdfd; }
.faq-a::before { content: "A"; color: #e69333; font-weight: 700; margin-right: 8px; font-family: Arial; }
.faq-a ul, .faq-a ol { padding-left: 20px; margin: 8px 0; }
.faq-a li { margin-bottom: 4px; }
.faq-a b { color: #434242; }
.faq-item.open .faq-a { display: block; }

.pagination-lq { margin-top: 30px; text-align: center; }
.pagination-lq a { display: inline-block; min-width: 36px; height: 36px; line-height: 36px; padding: 0 12px; background: #fff; border: 1px solid #e8e8e8; color: #6f6f6f; font-size: 13px; margin: 0 3px; border-radius: 2px; cursor: pointer; transition: all .2s; }
.pagination-lq a:hover { border-color: #48C7EC; color: #48C7EC; }
.pagination-lq a.current { background: #48C7EC; border-color: #48C7EC; color: #fff; }

.side-card { background: #fff; border: 1px solid #eef2f4; border-radius: 4px; margin-bottom: 18px; overflow: hidden; }
.side-card .head { padding: 12px 18px; background: linear-gradient(135deg, #10252E, #1d3a48); color: #fff; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.side-card .head i { color: #48C7EC; }
.side-card ul li { padding: 11px 18px; border-bottom: 1px dashed #f0f0f0; font-size: 13px; color: #6f6f6f; line-height: 1.5; cursor: pointer; transition: color .2s; }
.side-card ul li:last-child { border-bottom: 0; }
.side-card ul li:hover { color: #48C7EC; }
.side-card ul li.loading { color: #b5b5b5; cursor: default; }
.side-card .body { padding: 14px 18px 18px; }
.side-card .body .lbl { font-size: 12px; color: #999; margin-bottom: 4px; }
.side-card .body .val { font-size: 18px; color: #48C7EC; font-weight: 700; margin-bottom: 14px; }

.contact-cta { background: linear-gradient(135deg, #48C7EC, #2eb6dc); color: #fff; padding: 28px 22px; border-radius: 4px; text-align: center; margin-bottom: 18px; border: 0; }
.contact-cta i.fa-headphones { font-size: 32px; margin-bottom: 8px; opacity: .9; }
.contact-cta h3 { font-size: 18px; margin-bottom: 8px; }
.contact-cta p { font-size: 12px; opacity: .9; margin-bottom: 14px; }
.contact-cta .tel { font-size: 22px; font-weight: 700; letter-spacing: 1px; margin-bottom: 14px; }
.contact-cta .btn-lq { display: inline-block; padding: 8px 24px; background: #fff; color: #48C7EC; border-radius: 22px; font-size: 13px; font-weight: 700; }
.contact-cta .btn-lq:hover { background: #10252E; color: #fff; }

@media (max-width: 768px) {
    .faq-layout { flex-direction: column; }
    .faq-side { width: 100%; }
    .faq-search { flex-direction: column; align-items: stretch; }
    .faq-search-right { max-width: 100%; }
}