/* ========================================
   印度药代购网站样式表
   作者：FastAdmin模板
   版本：1.0
   ======================================== */

/* ========================================
   基础样式
   ======================================== */

:root {
    /* 主色调 - 经典蓝 */
    --primary-color: #2B5797;
    --primary-dark: #1a365d;
    --primary-light: #3d6bb0;
    
    /* 辅助色 */
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
    
    /* 中性色 */
    --light-color: #f8f9fa;
    --dark-color: #343a40;
    --white-color: #ffffff;
    
    /* 字体 */
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-size-base: 1rem;
    --line-height-base: 1.5;
    
    /* 间距 */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;
    
    /* 阴影 */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 20px rgba(0,0,0,0.15);
    
    /* 圆角 */
    --border-radius-sm: 0.25rem;
    --border-radius-md: 0.5rem;
    --border-radius-lg: 1rem;
    
    /* 过渡 */
    --transition-base: all 0.3s ease;
    --transition-slow: all 0.5s ease;
}

/* ========================================
   全局样式重置
   ======================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--dark-color);
    background-color: var(--white-color);
    overflow-x: hidden;
}

/* ========================================
   标题样式
   ======================================== */

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
    color: var(--primary-color);
}

.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* ========================================
   链接样式
   ======================================== */

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition-base);
}

a:hover {
    color: var(--primary-dark);
    text-decoration: none;
}

.hover-primary {
    transition: var(--transition-base);
}

.hover-primary:hover {
    color: var(--primary-color) !important;
}

/* ========================================
   按钮样式
   ======================================== */

.btn {
    font-weight: 500;
    border-radius: var(--border-radius-md);
    transition: var(--transition-base);
    padding: 0.5rem 1.25rem;
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}

.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-outline-primary:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-warning {
    background-color: var(--warning-color);
    border-color: var(--warning-color);
    color: var(--dark-color);
}

.btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1.125rem;
}

/* ========================================
   导航栏样式
   ======================================== */

.navbar {
    box-shadow: var(--shadow-sm);
    transition: var(--transition-base);
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.25rem;
}

.navbar-nav .nav-link {
    font-weight: 500;
    transition: var(--transition-base);
    position: relative;
}

.navbar-nav .nav-link:hover {
    color: var(--primary-color) !important;
}

.navbar-nav .nav-link.active {
    color: var(--primary-color) !important;
}

.navbar-nav .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0.5rem;
    right: 0.5rem;
    height: 2px;
    background-color: var(--primary-color);
}

.dropdown-menu {
    border: none;
    box-shadow: var(--shadow-lg);
    border-radius: var(--border-radius-md);
}

.dropdown-item {
    padding: 0.5rem 1rem;
    transition: var(--transition-base);
}

.dropdown-item:hover {
    background-color: var(--light-color);
    color: var(--primary-color);
}

/* ========================================
   轮播图样式
   ======================================== */

.carousel-item {
    height: 500px;
    position: relative;
}

.carousel-item img {
    height: 100%;
    object-fit: cover;
}

.carousel-caption {
    background: rgba(0,0,0,0.5);
    border-radius: var(--border-radius-lg);
    padding: 2rem;
}

.carousel-indicators button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 0 4px;
}

.carousel-control-prev,
.carousel-control-next {
    width: 50px;
    height: 50px;
    background: rgba(0,0,0,0.5);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
}

/* ========================================
   卡片样式
   ======================================== */

.card {
    border: none;
    box-shadow: var(--shadow-sm);
    border-radius: var(--border-radius-lg);
    transition: var(--transition-base);
}

.card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.service-card,
.product-card,
.news-card {
    transition: var(--transition-base);
}

.service-card:hover,
.product-card:hover,
.news-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

/* ========================================
   产品样式
   ======================================== */

.product-image {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
}

.product-overlay {
    background: rgba(43, 87, 151, 0.9);
    opacity: 0;
    transition: var(--transition-base);
}

.product-image:hover .product-overlay {
    opacity: 1;
}

.badge {
    font-weight: 500;
    padding: 0.5rem 0.75rem;
}

/* ========================================
   新闻样式
   ======================================== */

.news-image {
    position: relative;
    overflow: hidden;
}

.news-date {
    border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
}

.article-header,
.article-content,
.article-navigation {
    background: var(--white-color);
    border-radius: var(--border-radius-lg);
}

.content {
    font-size: 1.1rem;
    line-height: 1.8;
}

.content p {
    margin-bottom: 1.5rem;
}

.content h2,
.content h3,
.content h4 {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-md);
    margin: 1.5rem 0;
}

/* ========================================
   时间线样式
   ======================================== */

.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--primary-color);
    transform: translateX(-50%);
}

.timeline-dot {
    width: 20px;
    height: 20px;
    background: var(--primary-color);
    border: 4px solid var(--white-color);
    box-shadow: var(--shadow-md);
}

.timeline-content {
    position: relative;
}

.timeline-content::before {
    content: '';
    position: absolute;
    top: 20px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
}

.timeline-item:nth-child(odd) .timeline-content::before {
    right: -20px;
    border-left-color: var(--white-color);
}

.timeline-item:nth-child(even) .timeline-content::before {
    left: -20px;
    border-right-color: var(--white-color);
}

/* ========================================
   表单样式
   ======================================== */

.form-control,
.form-select {
    border: 1px solid #e0e0e0;
    border-radius: var(--border-radius-md);
    padding: 0.75rem 1rem;
    transition: var(--transition-base);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(43, 87, 151, 0.25);
}

.form-label {
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* ========================================
   页脚样式
   ======================================== */

footer {
    background: linear-gradient(135deg, var(--dark-color) 0%, #1a1a1a 100%);
}

footer h5,
footer h6 {
    color: var(--white-color);
    margin-bottom: 1rem;
}

footer a {
    color: #b0b0b0;
    transition: var(--transition-base);
}

footer a:hover {
    color: var(--primary-color);
}

footer .contact-info p {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
}

footer .contact-info i {
    margin-right: 0.5rem;
    width: 20px;
}

/* ========================================
   响应式设计
   ======================================== */

/* 大屏幕 */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

/* 中等屏幕 */
@media (min-width: 992px) and (max-width: 1199px) {
    .display-5 {
        font-size: 2.5rem;
    }
}

/* 小屏幕 */
@media (max-width: 991px) {
    .display-5 {
        font-size: 2rem;
    }
    
    .carousel-item {
        height: 400px;
    }
    
    .timeline::before {
        left: 30px;
    }
    
    .timeline-item .row {
        flex-direction: column;
    }
    
    .timeline-content::before {
        left: -20px !important;
        border-right-color: var(--white-color) !important;
        border-left-color: transparent !important;
    }
}

/* 超小屏幕 */
@media (max-width: 575px) {
    .display-5 {
        font-size: 1.75rem;
    }
    
    .carousel-item {
        height: 300px;
    }
    
    .btn-lg {
        padding: 0.5rem 1rem;
        font-size: 1rem;
    }
    
    .section-padding {
        padding: 3rem 0;
    }
}

/* ========================================
   动画效果
   ======================================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

.fade-in-down {
    animation: fadeInDown 0.6s ease-out;
}

.pulse {
    animation: pulse 2s infinite;
}

/* ========================================
   实用工具类
   ======================================== */

.text-primary {
    color: var(--primary-color) !important;
}

.bg-primary {
    background-color: var(--primary-color) !important;
}

.border-primary {
    border-color: var(--primary-color) !important;
}

.shadow-sm {
    box-shadow: var(--shadow-sm) !important;
}

.shadow-md {
    box-shadow: var(--shadow-md) !important;
}

.shadow-lg {
    box-shadow: var(--shadow-lg) !important;
}

.rounded-lg {
    border-radius: var(--border-radius-lg) !important;
}

.transition-base {
    transition: var(--transition-base);
}

.position-relative {
    position: relative !important;
}

.overflow-hidden {
    overflow: hidden !important;
}

/* ========================================
   自定义滚动条
   ======================================== */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark);
}

/* ========================================
   加载动画
   ======================================== */

.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.3s ease;
}

.loader-hidden {
    opacity: 0;
    pointer-events: none;
}

.loader-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* ========================================
   返回顶部按钮
   ======================================== */

#backToTop {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-base);
}

#backToTop:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
}

/* ========================================
   城市网格布局
   ======================================== */

.city-grid {
    max-height: 300px;
    overflow-y: auto;
}

.city-item {
    transition: var(--transition-base);
    font-size: 0.875rem;
}

.city-item:hover {
    background-color: var(--primary-color) !important;
    color: var(--white-color) !important;
}

/* ========================================
   标签云
   ======================================== */

.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag-cloud a {
    font-size: 0.875rem;
    transition: var(--transition-base);
}

.tag-cloud a:hover {
    background-color: var(--primary-color) !important;
    color: var(--white-color) !important;
}

/* ========================================
   响应式字体大小
   ======================================== */

html {
    font-size: 16px;
}

@media (max-width: 768px) {
    html {
        font-size: 14px;
    }
}

@media (max-width: 576px) {
    html {
        font-size: 13px;
    }
}

/* ========================================
   打印样式
   ======================================== */

@media print {
    .navbar,
    footer,
    #backToTop,
    .social-links,
    .share-buttons {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.5;
    }
    
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }
    
    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }
}
<!-- ========================================
     常见问题模块 - 医院专业风格
     ======================================== -->
<section class="faq-medical py-5 bg-light">
  <div class="container">
    <!-- 模块标题 -->
    <div class="text-center mb-5" data-aos="fade-up">
      <h2 class="display-5 fw-bold text-primary">用药常见问题</h2>
      <p class="lead text-muted">专业药师在线解答，安全用药指南</p>
    </div>

    <div class="row">
      <!-- 左侧：快速导航 -->
      <div class="col-lg-3 mb-4 mb-lg-0" data-aos="fade-up" data-aos-delay="100">
        <div class="faq-nav bg-white rounded shadow-sm p-3 sticky-top" style="top: 100px;">
          <h6 class="fw-bold text-primary mb-3">问题分类</h6>
          <div class="nav nav-pills flex-column" id="faq-pills-tab" role="tablist">
            <button class="nav-link active text-start" data-bs-toggle="pill" data-bs-target="#faq-purchase" type="button">
              <i class="bi bi-cart-check me-2"></i>购买流程
            </button>
            <button class="nav-link text-start" data-bs-toggle="pill" data-bs-target="#faq-authenticity" type="button">
              <i class="bi bi-shield-check me-2"></i>正品保障
            </button>
            <button class="nav-link text-start" data-bs-toggle="pill" data-bs-target="#faq-delivery" type="button">
              <i class="bi bi-truck me-2"></i>物流清关
            </button>
            <button class="nav-link text-start" data-bs-toggle="pill" data-bs-target="#faq-usage" type="button">
              <i class="bi bi-capsule me-2"></i>用法用量
            </button>
            <button class="nav-link text-start" data-bs-toggle="pill" data-bs-target="#faq-payment" type="button">
              <i class="bi bi-credit-card me-2"></i>支付售后
            </button>
          </div>
        </div>
      </div>

      <!-- 右侧：问题内容 -->
      <div class="col-lg-9" data-aos="fade-up" data-aos-delay="200">
        <div class="tab-content" id="faq-pills-content">

          <!-- 购买流程 -->
          <div class="tab-pane fade show active" id="faq-purchase" role="tabpanel">
            <div class="accordion medical-accordion" id="accordionPurchase">
              <div class="accordion-item">
                <h3 class="accordion-header" id="purchase-1">
                  <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapsePurchase1">
                    <i class="bi bi-question-circle text-primary me-2"></i>
                    第一次购买印度药品，需要提供哪些材料？
                  </button>
                </h3>
                <div id="collapsePurchase1" class="accordion-collapse collapse show" data-bs-parent="#accordionPurchase">
                  <div class="accordion-body">
                    <div class="alert alert-info d-flex align-items-center mb-3">
                      <i class="bi bi-info-circle-fill me-2"></i>
                      <span class="fw-bold">专业提示：</span>根据《药品管理法》，个人自用可凭处方购买。
                    </div>
                    <ul class="list-unstyled">
                      <li class="mb-2"><i class="bi bi-check2-circle text-success me-2"></i>有效处方（电子/纸质，需包含患者姓名、药品名称、剂量、医生签名）</li>
                      <li class="mb-2"><i class="bi bi-check2-circle text-success me-2"></i>身份证正反面照片（海关申报用，加密存储）</li>
                      <li class="mb-2"><i class="bi bi-check2-circle text-success me-2"></i>收货地址需与处方患者姓名一致</li>
                      <li><i class="bi bi-check2-circle text-success me-2"></i>特殊药品需额外提供病历首页（如抗癌、丙肝药）</li>
                    </ul>
                    <div class="mt-3 p-2 bg-light rounded">
                      <small class="text-muted">
                        <i class="bi bi-shield-lock me-1"></i>所有资料仅用于海关清关，24小时内系统自动销毁。
                      </small>
                    </div>
                  </div>
                </div>
              </div>

              <div class="accordion-item">
                <h3 class="accordion-header" id="purchase-2">
                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapsePurchase2">
                    <i class="bi bi-question-circle text-primary me-2"></i>
                    下单后多久能收到药品？
                  </button>
                </h3>
                <div id="collapsePurchase2" class="accordion-collapse collapse" data-bs-parent="#accordionPurchase">
                  <div class="accordion-body">
                    <div class="row g-3">
                      <div class="col-md-4">
                        <div class="border rounded p-3 text-center h-100">
                          <i class="bi bi-airplane text-primary fs-1"></i>
                          <h6 class="fw-bold mt-2">空运直邮</h6>
                          <p class="small text-muted">孟买→中国<br>7-12个工作日</p>
                        </div>
                      </div>
                      <div class="col-md-4">
                        <div class="border rounded p-3 text-center h-100">
                          <i class="bi bi-postage text-primary fs-1"></i>
                          <h6 class="fw-bold mt-2">邮政小包</h6>
                          <p class="small text-muted">15-20个工作日<br>包邮包税</p>
                        </div>
                      </div>
                      <div class="col-md-4">
                        <div class="border rounded p-3 text-center h-100">
                          <i class="bi bi-lightning text-primary fs-1"></i>
                          <h6 class="fw-bold mt-2">加急通道</h6>
                          <p class="small text-muted">3-7个工作日<br>+200元优先费</p>
                        </div>
                      </div>
                    </div>
                    <div class="alert alert-warning mt-3 mb-0">
                      <i class="bi bi-exclamation-triangle me-2"></i>
                      以上时效为正常清关情况，遇节假日/政策调整可能延长3-5天。
                    </div>
                  </div>
                </div>
              </div>

              <div class="accordion-item">
                <h3 class="accordion-header" id="purchase-3">
                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapsePurchase3">
                    <i class="bi bi-question-circle text-primary me-2"></i>
                    可以购买哪些印度药品？有限制吗？
                  </button>
                </h3>
                <div id="collapsePurchase3" class="accordion-collapse collapse" data-bs-parent="#accordionPurchase">
                  <div class="accordion-body">
                    <div class="table-responsive">
                      <table class="table table-sm table-bordered align-middle">
                        <thead class="table-primary">
                          <tr>
                            <th>药品类别</th>
                            <th>常见品种</th>
                            <th>购买条件</th>
                            <th>限购数量</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td><span class="badge bg-success">常规药</span></td>
                            <td>伟哥、希爱力、降糖/降压药</td>
                            <td>处方+身份证</td>
                            <td>≤3盒/次</td>
                          </tr>
                          <tr>
                            <td><span class="badge bg-warning">抗癌药</span></td>
                            <td>奥希替尼、仑伐替尼</td>
                            <td>处方+病历+身份证</td>
                            <td>≤2盒/次</td>
                          </tr>
                          <tr>
                            <td><span class="badge bg-info">丙肝药</span></td>
                            <td>吉三代、丙通沙</td>
                            <td>处方+基因分型报告</td>
                            <td>≤1疗程</td>
                          </tr>
                          <tr>
                            <td><span class="badge bg-danger">管制类</span></td>
                            <td>芬太尼、吗啡类</td>
                            <td><strong>禁止销售</strong></td>
                            <td>-</td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                    <div class="alert alert-success mb-0">
                      <i class="bi bi-check-circle me-2"></i>
                      所有可售药品均在印度FDA及中国海关《准予进口清单》内，合法合规。
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 正品保障 -->
          <div class="tab-pane fade" id="faq-authenticity" role="tabpanel">
            <div class="accordion medical-accordion" id="accordionAuthenticity">
              <div class="accordion-item">
                <h3 class="accordion-header" id="authenticity-1">
                  <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAuth1">
                    <i class="bi bi-question-circle text-primary me-2"></i>
                    如何确认收到的药品是正品？
                  </button>
                </h3>
                <div id="collapseAuth1" class="accordion-collapse collapse show" data-bs-parent="#accordionAuthenticity">
                  <div class="accordion-body">
                    <div class="row g-3 mb-3">
                      <div class="col-lg-6">
                        <h6 class="fw-bold text-primary mb-2"><i class="bi bi-qr-code-scan me-1"></i>电子验证</h6>
                        <ol class="small">
                          <li>扫描药盒二维码→跳转印度FDA官网</li>
                          <li>输入20位防伪码→显示生产批次、有效期</li>
                          <li>对比收货批次→完全一致为正品</li>
                        </ol>
                      </div>
                      <div class="col-lg-6">
                        <h6 class="fw-bold text-primary mb-2"><i class="bi bi-microscope me-1"></i>外观鉴别</h6>
                        <ul class="small">
                          <li>铝箔板：激光压印“India”字样，无毛刺</li>
                          <li>药片：刻字清晰，断面无杂质，色泽均匀</li>
                          <li>包装盒：印度卢比符号水印，荧光防伪线</li>
                        </ul>
                      </div>
                    </div>
                    <div class="border-start border-primary border-4 ps-3">
                      <p class="mb-1"><strong>正品承诺：</strong></p>
                      <p class="small mb-0">若验证为假货，10倍退款并承担检测费用（官方检测报告为准）。</p>
                    </div>
                  </div>
                </div>
              </div>

              <div class="accordion-item">
                <h3 class="accordion-header" id="authenticity-2">
                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAuth2">
                    <i class="bi bi-question-circle text-primary me-2"></i>
                    为什么印度药品价格这么便宜？质量可靠吗？
                  </button>
                </h3>
                <div id="collapseAuth2" class="accordion-collapse collapse" data-bs-parent="#accordionAuthenticity">
                  <div class="accordion-body">
                    <div class="row g-3">
                      <div class="col-md-4 text-center">
                        <div class="p-3 bg-light rounded">
                          <i class="bi bi-currency-rupee text-success fs-1"></i>
                          <h6>成本优势</h6>
                          <small class="text-muted">印度人力/原料成本仅为欧美30%</small>
                        </div>
                      </div>
                      <div class="col-md-4 text-center">
                        <div class="p-3 bg-light rounded">
                          <i class="bi bi-patch-check text-primary fs-1"></i>
                          <h6>专利豁免</h6>
                          <small class="text-muted">WTO允许生产专利药仿制药</small>
                        </div>
                      </div>
                      <div class="col-md-4 text-center">
                        <div class="p-3 bg-light rounded">
                          <i class="bi bi-award text-warning fs-1"></i>
                          <h6>FDA认证</h6>
                          <small class="text-muted">出口欧美，质量与原厂一致</small>
                        </div>
                      </div>
                    </div>
                    <div class="mt-3">
                      <p class="small mb-2"><strong>质量等同性：</strong>印度仿制药必须通过“一致性评价”，生物利用度与原研药差异&lt;5%。</p>
                      <p class="small mb-0"><strong>数据来源：</strong>印度药品总局（DCGI）2023年质量年报，出口药品合格率99.7%。</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 物流清关 -->
          <div class="tab-pane fade" id="faq-delivery" role="tabpanel">
            <div class="accordion medical-accordion" id="accordionDelivery">
              <div class="accordion-item">
                <h3 class="accordion-header" id="delivery-1">
                  <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDelivery1">
                    <i class="bi bi-question-circle text-primary me-2"></i>
                    海关会扣货吗？需要交税吗？
                  </button>
                </h3>
                <div id="collapseDelivery1" class="accordion-collapse collapse show" data-bs-parent="#accordionDelivery">
                  <div class="accordion-body">
                    <div class="alert alert-success d-flex align-items-center">
                      <i class="bi bi-check-circle-fill me-2"></i>
                      <span>个人自用合理数量，海关予以免税放行。</span>
                    </div>
                    <h6 class="fw-bold text-primary">免税条件（需同时满足）：</h6>
                    <ul class="list-unstyled">
                      <li class="mb-2"><i class="bi bi-check text-success me-2"></i>药品在《准予进口清单》内</li>
                      <li class="mb-2"><i class="bi bi-check text-success me-2"></i>提供真实有效处方</li>
                      <li class="mb-2"><i class="bi bi-check text-success me-2"></i>数量≤3盒（单盒价值≤500元）</li>
                      <li><i class="bi bi-check text-success me-2"></i>同一收件人年度≤6次</li>
                    </ul>
                    <div class="table-responsive mt-3">
                      <table class="table table-sm">
                        <thead>
                          <tr class="table-light">
                            <th>情况</th>
                            <th>处理方式</th>
                            <th>费用</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td><span class="badge bg-success">合规</span></td>
                            <td>直接放行</td>
                            <td>0元</td>
                          </tr>
                          <tr>
                            <td><span class="badge bg-warning">超量</span></td>
                            <td>补缴税款</td>
                            <td>货值13%（增值税）</td>
                          </tr>
                          <tr>
                            <td><span class="badge bg-danger">违规</span></td>
                            <td>退运/销毁</td>
                            <td>运费自理</td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>

              <div class="accordion-item">
                <h3 class="accordion-header" id="delivery-2">
                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDelivery2">
                    <i class="bi bi-question-circle text-primary me-2"></i>
                    物流显示“已发往中国”后多久能收到？
                  </button>
                </h3>
                <div id="collapseDelivery2" class="accordion-collapse collapse" data-bs-parent="#accordionDelivery">
                  <div class="accordion-body">
                    <div class="timeline-medical">
                      <div class="timeline-item">
                        <div class="timeline-marker bg-primary"></div>
                        <div class="timeline-content">
                          <h6 class="fw-bold">印度发货</h6>
                          <small class="text-muted">1-2天</small>
                          <p class="small mb-0">新德里/孟买机场仓→航空运输</p>
                        </div>
                      </div>
                      <div class="timeline-item">
                        <div class="timeline-marker bg-warning"></div>
                        <div class="timeline-content">
                          <h6 class="fw-bold">中国口岸</h6>
                          <small class="text-muted">3-5天</small>
                          <p class="small mb-0">北京/上海/广州机场海关→清关</p>
                        </div>
                      </div>
                      <div class="timeline-item">
                        <div class="timeline-marker bg-info"></div>
                        <div class="timeline-content">
                          <h6 class="fw-bold">国内派送</h6>
                          <small class="text-muted">2-3天</small>
                          <p class="small mb-0">EMS/顺丰→隐私包装→签收</p>
                        </div>
                      </div>
                    </div>
                    <div class="mt-3 p-3 bg-light rounded">
                      <p class="small mb-0"><i class="bi bi-clock-history me-1"></i>实际案例：95%包裹在“已发往中国”后7天内签收，5%因海关抽检延长3-5天。</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 用法用量 -->
          <div class="tab-pane fade" id="faq-usage" role="tabpanel">
            <div class="accordion medical-accordion" id="accordionUsage">
              <div class="accordion-item">
                <h3 class="accordion-header" id="usage-1">
                  <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseUsage1">
                    <i class="bi bi-question-circle text-primary me-2"></i>
                    印度伟哥/希爱力怎么服用？剂量多少？
                  </button>
                </h3>
                <div id="collapseUsage1" class="accordion-collapse collapse show" data-bs-parent="#accordionUsage">
                  <div class="accordion-body">
                    <div class="row g-3">
                      <div class="col-md-6">
                        <div class="card border-primary">
                          <div class="card-header bg-primary text-white">
                            <h6 class="mb-0"><i class="bi bi-capsule me-1"></i>万艾可（西地那非）</h6>
                          </div>
                          <div class="card-body">
                            <ul class="list-unstyled small">
                              <li><strong>初始剂量：</strong>50mg（1片）</li>
                              <li><strong>服用时间：</strong>性活动前30-60分钟</li>
                              <li><strong>最大剂量：</strong>100mg/24h</li>
                              <li><strong>禁忌：</strong>硝酸酯类药物、严重心脏病</li>
                            </ul>
                            <div class="alert alert-warning py-1 mb-0">
                              <small><i class="bi bi-exclamation-triangle me-1"></i>空腹服用效果佳，高脂饮食降低药效</small>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="col-md-6">
                        <div class="card border-info">
                          <div class="card-header bg-info text-white">
                            <h6 class="mb-0"><i class="bi bi-capsule me-1"></i>希爱力（他达拉非）</h6>
                          </div>
                          <div class="card-body">
                            <ul class="list-unstyled small">
                              <li><strong>初始剂量：</strong>10mg（1片）</li>
                              <li><strong>服用时间：</strong>性活动前30分钟</li>
                              <li><strong>持续作用：</strong>36小时内有效</li>
                              <li><strong>每日小剂量：</strong>5mg/日，固定时间</li>
                            </ul>
                            <div class="alert alert-info py-1 mb-0">
                              <small><i class="bi bi-info-circle me-1"></i>可随餐服用，适量饮酒不影响</small>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="mt-3 text-center">
                      <a href="{$hrefNull}" class="btn btn-outline-primary btn-sm">
                        <i class="bi bi-download me-1"></i>下载详细用药手册
                      </a>
                    </div>
                  </div>
                </div>
              </div>

              <div class="accordion-item">
                <h3 class="accordion-header" id="usage-2">
                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseUsage2">
                    <i class="bi bi-question-circle text-primary me-2"></i>
                    印度吉三代治疗丙肝，疗程多久？如何确认治愈？
                  </button>
                </h3>
                <div id="collapseUsage2" class="accordion-collapse collapse" data-bs-parent="#accordionUsage">
                  <div class="accordion-body">
                    <div class="treatment-timeline">
                      <div class="step completed">
                        <div class="step-marker">1</div>
                        <div class="step-content">
                          <h6>治疗前检查</h6>
                          <p class="small mb-0">HCV-RNA定量、基因分型、肝功能、B超</p>
                        </div>
                      </div>
                      <div class="step active">
                        <div class="step-marker">2</div>
                        <div class="step-content">
                          <h6>标准疗程</h6>
                          <p class="small mb-0">每日1片，连续12周（84天）</p>
                        </div>
                      </div>
                      <div class="step">
                        <div class="step-marker">3</div>
                        <div class="step-content">
                          <h6>随访检测</h6>
                          <p class="small mb-0">停药12周查HCV-RNA，阴性=治愈</p>
                        </div>
                      </div>
                    </div>
                    <div class="mt-3">
                      <h6 class="text-primary">治愈标准：</h6>
                      <p class="small mb-2">停药后12周（SVR12）HCV-RNA &lt; 15 IU/mL，且肝功能正常。</p>
                      <div class="alert alert-success py-2 mb-0">
                        <small><i class="bi bi-check-circle me-1"></i>临床治愈率98%以上，复发率&lt;1%</small>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 支付售后 -->
          <div class="tab-pane fade" id="faq-payment" role="tabpanel">
            <div class="accordion medical-accordion" id="accordionPayment">
              <div class="accordion-item">
                <h3 class="accordion-header" id="payment-1">
                  <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapsePayment1">
                    <i class="bi bi-question-circle text-primary me-2"></i>
                    支持哪些付款方式？安全吗？
                  </button>
                </h3>
                <div id="collapsePayment1" class="accordion-collapse collapse show" data-bs-parent="#accordionPayment">
                  <div class="accordion-body">
                    <div class="row g-3">
                      <div class="col-md-6">
                        <div class="payment-card p-3 border rounded h-100">
                          <div class="d-flex align-items-center mb-2">
                            <i class="bi bi-wechat text-success fs-4 me-2"></i>
                            <h6 class="mb-0">微信支付</h6>
                          </div>
                          <small class="text-muted">实时到账，支持信用卡</small>
                          <div class="form-check mt-2">
                            <input class="form-check-input" type="radio" name="payment" id="wechat" checked>
                            <label class="form-check-label small" for="wechat">推荐，随机立减最高88元</label>
                          </div>
                        </div>
                      </div>
                      <div class="col-md-6">
                        <div class="payment-card p-3 border rounded h-100">
                          <div class="d-flex align-items-center mb-2">
                            <i class="bi bi-bank text-primary fs-4 me-2"></i>
                            <h6 class="mb-0">银行转账</h6>
                          </div>
                          <small class="text-muted">对公账户，支持网银/手机银行</small>
                          <div class="form-check mt-2">
                            <input class="form-check-input" type="radio" name="payment" id="bank">
                            <label class="form-check-label small" for="bank">大额推荐，需上传凭证</label>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="mt-3 p-3 bg-light rounded">
                      <h6 class="fw-bold text-primary mb-2">安全保障：</h6>
                      <ul class="list-unstyled small mb-0">
                        <li class="mb-1"><i class="bi bi-shield-check text-success me-2"></i>SSL加密传输，支付信息不落地</li>
                        <li class="mb-1"><i class="bi bi-shield-check text-success me-2"></i>央行支付牌照，资金受监管</li>
                        <li><i class="bi bi-shield-check text-success me-2"></i>支持7天无理由退款（未发货）</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>

              <div class="accordion-item">
                <h3 class="accordion-header" id="payment-2">
                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapsePayment2">
                    <i class="bi bi-question-circle text-primary me-2"></i>
                    药品收到后不满意，可以退换吗？
                  </button>
                </h3>
                <div id="collapsePayment2" class="accordion-collapse collapse" data-bs-parent="#accordionPayment">
                  <div class="accordion-body">
                    <div class="row g-3">
                      <div class="col-md-6">
                        <h6 class="fw-bold text-success mb-2">可退换情况</h6>
                        <ul class="list-unstyled small">
                          <li class="mb-1"><i class="bi bi-check text-success me-1"></i>运输破损/漏液</li>
                          <li class="mb-1"><i class="bi bi-check text-success me-1"></i>发错药品/剂量</li>
                          <li class="mb-1"><i class="bi bi-check text-success me-1"></i>近效期（≤6个月）</li>
                          <li><i class="bi bi-check text-success me-1"></i>包装严重变形</li>
                        </ul>
                      </div>
                      <div class="col-md-6">
                        <h6 class="fw-bold text-danger mb-2">不可退换</h6>
                        <ul class="list-unstyled small">
                          <li class="mb-1"><i class="bi bi-x text-danger me-1"></i>个人原因（如不想吃）</li>
                          <li class="mb-1"><i class="bi bi-x text-danger me-1"></i>已拆封/使用</li>
                          <li class="mb-1"><i class="bi bi-x text-danger me-1"></i>超过7天未申请</li>
                          <li><i class="bi bi-x text-danger me-1"></i>特殊储存药品（如需冷藏）</li>
                        </ul>
                      </div>
                    </div>
                    <div class="mt-3">
                      <h6 class="fw-bold text-primary">退换流程：</h6>
                      <div class="steps vertical mt-2">
                        <div class="step">
                          <div class="step-circle">1</div>
                          <div class="step-content">
                            <p class="small mb-0">收货7天内联系客服（微信/电话）</p>
                          </div>
                        </div>
                        <div class="step">
                          <div class="step-circle">2</div>
                          <div class="step-content">
                            <p class="small mb-0">拍照上传问题药品+快递面单</p>
                          </div>
                        </div>
                        <div class="step">
                          <div class="step-circle">3</div>
                          <div class="step-content">
                            <p class="small mb-0">审核通过后，48小时内退款/补发</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 未解决问题提示 -->
        <div class="mt-5 text-center" data-aos="fade-up">
          <div class="bg-primary text-white rounded p-4 d-inline-block">
            <h5 class="mb-2">还有其他疑问？</h5>
            <p class="mb-3">专业药师24小时在线，1对1解答您的用药问题</p>
            <div class="row g-2 justify-content-center">
              <div class="col-auto">
                <a href="/contact" class="btn btn-warning">
                  <i class="bi bi-telephone"></i> 立即咨询
                </a>
              </div>
              <div class="col-auto">
                <button class="btn btn-outline-light" onclick="alert('已复制官方微信：{$site_config.weixin}，快去添加吧！')">
                  <i class="bi bi-wechat"></i> 加微信
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ========================================
     医疗风格自定义CSS（放入style.css末尾）
     ======================================== -->
/* 医疗FAQ专用样式 */
.medical-accordion .accordion-item {
  border: 1px solid #e0e0e0;
  margin-bottom: 1rem;
  border-radius: 0.5rem;
  overflow: hidden;
}

.medical-accordion .accordion-button {
  background-color: #f8f9fa;
  color: #2B5797;
  font-weight: 600;
  border: none;
  box-shadow: none;
}

.medical-accordion .accordion-button:not(.collapsed) {
  background-color: #e3f2fd;
  color: #1a365d;
}

.medical-accordion .accordion-button:focus {
  box-shadow: 0 0 0 0.2rem rgba(43, 87, 151, 0.25);
}

.timeline-medical {
  position: relative;
  padding-left: 30px;
}

.timeline-medical::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e0e0e0;
}

.timeline-item {
  position: relative;
  margin-bottom: 1.5rem;
}

.timeline-marker {
  position: absolute;
  left: -22px;
  top: 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #2B5797;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px #e0e0e0;
}

.treatment-timeline {
  display: flex;
  justify-content: space-between;
  position: relative;
  padding-top: 20px;
}

.treatment-timeline::before {
  content: '';
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  height: 2px;
  background: #e0e0e0;
  z-index: 1;
}

.step {
  position: relative;
  z-index: 2;
  text-align: center;
  flex: 1;
}

.step-marker {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e0e0e0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  font-weight: bold;
}

.step.completed .step-marker {
  background: #28a745;
}

.step.active .step-marker {
  background: #2B5797;
}

.steps.vertical .step {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.steps.vertical .step-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #2B5797;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
  font-weight: bold;
  font-size: 14px;
}

.payment-card {
  transition: all 0.3s ease;
  cursor: pointer;
}

.payment-card:hover {
  border-color: #2B5797 !important;
  box-shadow: 0 0 0 0.2rem rgba(43, 87, 151, 0.25);
}

.faq-nav .nav-link {
  color: #6c757d;
  border-radius: 0.25rem;
  margin-bottom: 0.25rem;
}

.faq-nav .nav-link:hover {
  color: #2B5797;
  background-color: #e3f2fd;
}

.faq-nav .nav-link.active {
  color: #fff;
  background-color: #2B5797;
}

@media (max-width: 991px) {
  .faq-nav {
    position: static !important;
  }
}