.bg-white {
    background-color: #fff;
}
.text-333 {
    color: #333;
}
.text-999 {
    color: #999;
}
.text-red {
    color: #f00;
}
.text-bold {
    font-weight: bold;
}
.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}
.border-bottom-2 {
    border-bottom: 2px solid #e5e5e5;
}
.border-bottom-2-red {
    border-bottom: 2px solid #f00;
}
.border-bottom-4 {
    border-bottom: 4px solid #e5e5e5;
}
.border-bottom-dashed {
    border-bottom: 1px dashed #e5e5e5;
}
.text-8px { font-size: 8px !important; }
.text-10px { font-size: 10px !important; }
.text-12px { font-size: 12px !important; }
.text-14px { font-size: 14px !important; }
.text-16px { font-size: 16px !important; }
.text-18px { font-size: 18px !important; }
.text-20px { font-size: 20px !important; }

/* 1. 定义 Flex 容器 */
.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

/* 2. 定义 Flex 方向（主轴） */
.flex-row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
}
.flex-row-reverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}
.flex-column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
.flex-column-reverse {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
}

/* 3. 主轴对齐方式 */
.justify-content-start {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}
.justify-content-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.justify-content-end {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}
.justify-content-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.justify-content-around {
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

/* 4. 交叉轴对齐方式（单行） */
.align-items-start {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}
.align-items-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; /* 常用：上下居中 */
}
.align-items-end {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}
.align-items-stretch {
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}
.align-items-baseline {
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
}

/* 5. 子元素自身对齐方式 */
.align-self-start {
    -ms-flex-item-align: start;
    align-self: flex-start;
}
.align-self-center {
    -ms-flex-item-align: center;
    align-self: center;
}
.align-self-end {
    -ms-flex-item-align: end;
    align-self: flex-end;
}
.align-self-stretch {
    -ms-flex-item-align: stretch;
    align-self: stretch;
}

/* 6. 换行控制 */
.flex-wrap {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.flex-nowrap {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}
.flex-wrap-reverse {
    -ms-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;
}

/* 7. 子元素伸缩比例 */
.flex-1 {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
.flex-2 {
    -webkit-box-flex: 2;
    -ms-flex: 2;
    flex: 2;
}

/* 给 a 标签添加类名，如 .text-truncate */
.text-truncate {
    display: inline-block; /* 或 block，根据布局需要 */
    white-space: nowrap;   /* 禁止文本换行 */
    overflow: hidden;      /* 隐藏超出容器的部分 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
    max-width: 100%;       /* 限制最大宽度（可选，根据父容器调整） */
}
.article-text-bz h3 {
    padding-left: 10px;
    margin-bottom: 10px;
    border-left: 4px solid #C33;
    height: 22px;
    line-height: 20px;
}
.read-content h3 {
    padding-left: 15px;
    line-height: 30px;
    border-left: 5px solid #d50505;
    font-size: 18px;
    background: #F5F5F5;
    margin: 8px 0;
}
.bazipaipan td.active{
    background:orange;
    color: #fff;
}
.bazipaipan table tr {
    background-color: #fff;
    border-top: 1px solid #c6cbd1;
}
.bazipaipan table td {
    padding: 6px 13px;
    border: 1px solid #dfe2e5;
}

.bazipaipan table tr:nth-child(2n) {
    background-color: #f6f8fa;
}
.animal-card {
    display: block;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 0.75rem;
    background: #fff;
    padding: 10px;
    text-decoration: none;
    color: #333;
    transition: all 0.25s ease;
}
.animal-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.animal-img {
    width: 100%;
    height: 60px;
    border-radius: 0.5rem;
    background-size: contain; /* 改这里 */
    background-position: center;
    background-repeat: no-repeat; /* 防止平铺 */
}
.animal-name {
    font-weight: bold;
    margin-top: 8px;
    font-size: 1rem;
}

.paipan-1 {
    background-color: #fdeee3;
    border: 1px solid #f3cdd0; /* 粉框 */
    border-radius: 0px;
    padding: 10px;
    box-shadow: none;
    /* 可选：防止背景图被内容覆盖，确保图片显示在底层 */
    background-clip: padding-box;
}
.paipan-1 .form-label {
    font-weight: 700;
    font-size: 16px;
    color: #4a4a4a;
    padding-top: 0px;
}
.paipan-1 .form-control {
    border: 1px solid #caa893;
    border-radius: 0;
    height: 30px;
    box-shadow: none;
    background: #fff;
}
.paipan-1  .small-select {
    display:inline-block;
    width: 90px;
    margin-right: 8px;
    vertical-align: middle;
}
.paipan-1 .small-select .form-control {
    height: 30px;
    padding: 6px 10px;
    text-align: center;
}