@charset "utf-8";
/* =========================================================================
   锦辉国际搬家 · 报价专题页（文章详情内的旧表格内容重写）
   仅作用于 .pj-* 类名，不影响其它文章
   容器宽度：PC 801px（.yn-article-body 内容区） → 375px 移动端无横向滚动
   ========================================================================= */

.pj, .pj *, .pj *::before, .pj *::after { box-sizing: border-box; }
.pj { color: #333; font-size: 14px; line-height: 1.75; }
.pj p { margin: 0; }
.pj a { color: #ff4f00; text-decoration: none; }
.pj a:hover { color: #d20202; text-decoration: underline; }
.pj ul, .pj ol { margin: 0; padding: 0; list-style: none; }

/* ---------- 1. 报价概要卡 ---------- */
.pj-hero {
    border: 1px solid #f3e2d8;
    border-radius: 10px;
    background: linear-gradient(180deg, #fff9f5 0%, #fff 62%);
    overflow: hidden;
}
.pj-hero-hd {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 13px 18px;
    border-bottom: 1px solid #f7e7dd;
    background: linear-gradient(90deg, #fff1e8 0%, #fff9f5 100%);
}
.pj-hero-hd h2 {
    position: relative;
    padding-left: 13px;
    color: #d20202; font-size: 17px; font-weight: 700; line-height: 1.5;
}
.pj-hero-hd h2::before {
    content: ""; position: absolute; left: 0; top: 50%;
    width: 4px; height: 16px; margin-top: -8px;
    border-radius: 2px; background: #ff4f00;
}
.pj-tag {
    flex: none;
    padding: 2px 9px;
    border: 1px solid #ffcbb3;
    border-radius: 11px;
    background: #fff;
    color: #ff4f00; font-size: 12px; line-height: 18px;
    white-space: nowrap;
}

.pj-facts { display: grid; grid-template-columns: 1fr 1fr; padding: 4px 18px 8px; }
.pj-facts li {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 9px 0;
    border-bottom: 1px dashed #f4ece7;
    font-size: 14px; line-height: 1.8;
}
.pj-facts li.pj-wide { grid-column: 1 / -1; }
.pj-facts li:last-child { border-bottom: 0; }
.pj-facts .lb { flex: none; width: 4.6em; color: #9b9b9b; }
.pj-facts .vl { flex: 1; min-width: 0; color: #555; }
.pj-facts .vl strong { color: #333; font-weight: 600; }
.pj-facts .vl em { font-style: normal; color: #ff4f00; font-weight: 600; }
.pj-facts .vl a { border-bottom: 1px dashed #ffb894; }
.pj-facts .vl a:hover { text-decoration: none; border-bottom-color: #ff4f00; }

/* ---------- 2. 时效节点 ---------- */
.pj-track {
    display: flex;
    margin: 0 18px;
    padding: 16px 0 18px;
    border-top: 1px dashed #f3e2d8;
}
.pj-track li { position: relative; flex: 1 1 0; min-width: 0; padding: 0 2px; text-align: center; }
.pj-track li::before {
    content: ""; position: absolute; left: 0; right: 0; top: 6px;
    height: 2px; background: #ffe4d6;
}
.pj-track li:first-child::before { left: 50%; }
.pj-track li:last-child::before { right: 50%; }
.pj-track li::after {
    content: ""; position: absolute; left: 50%; top: 1px;
    width: 12px; height: 12px; margin-left: -6px;
    border: 3px solid #ff4f00; border-radius: 50%;
    background: #fff;
}
.pj-track li:last-child::after { border-color: #d20202; }
.pj-track b {
    display: block; margin-top: 20px;
    color: #ff4f00; font-size: 15px; font-weight: 700; line-height: 1.4;
}
.pj-track li:last-child b { color: #d20202; }
.pj-track span { display: block; margin-top: 2px; color: #777; font-size: 12px; line-height: 1.5; }
.pj-track .pj-sum {
    display: block; margin: 12px 0 0; padding-top: 10px;
    border-top: 1px dashed #f4ece7;
    color: #9b9b9b; font-size: 12px; line-height: 1.6; text-align: left;
}

/* ---------- 3. 报价卡 ---------- */
.pj-price { margin-top: 16px; }
.pj-price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pj-card {
    padding: 16px 10px 13px;
    border: 1px solid #efefef;
    border-radius: 9px;
    background: #fafafa;
    text-align: center;
    transition: box-shadow .2s;
}
.pj-card:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .06); }
.pj-card .amt {
    color: #333; font-size: 25px; font-weight: 700; line-height: 1.25;
    letter-spacing: -.5px;
}
.pj-card .amt i { margin-right: 2px; font-style: normal; font-size: 15px; font-weight: 600; }
.pj-card .lb {
    margin-top: 8px; padding-top: 8px;
    border-top: 1px dashed #dfdfdf;
    color: #8a8a8a; font-size: 12px; line-height: 1.5;
}
.pj-card-hot {
    position: relative;
    border-color: #e8402a;
    background: linear-gradient(160deg, #ff7433 0%, #e8402a 100%);
    box-shadow: 0 6px 16px rgba(232, 64, 42, .22);
}
.pj-card-hot .amt { color: #fff; }
.pj-card-hot .amt i { color: #fff; }
.pj-card-hot .lb { border-top-color: rgba(255, 255, 255, .4); color: #ffe3d8; }
/* 标记行：三张卡片都占位，保证金额严格同一水平线 */
.pj-flag {
    display: block;
    height: 17px;
    margin-bottom: 3px;
    color: #fff; font-size: 11px; font-weight: 600; line-height: 17px; letter-spacing: .5px;
}
.pj-card-hot .pj-flag {
    border-radius: 9px;
    background: rgba(255, 255, 255, .2);
}

/* ---------- 4. 注意 ---------- */
.pj-note {
    display: flex; gap: 10px;
    margin-top: 12px; padding: 11px 14px;
    border: 1px solid #ffe2d1;
    border-radius: 8px;
    background: #fff8f4;
}
.pj-note .tt { flex: none; color: #e8402a; font-size: 13px; font-weight: 700; }
.pj-note ul { flex: 1; min-width: 0; }
.pj-note li {
    position: relative;
    padding-left: 12px;
    color: #8d7064; font-size: 13px; line-height: 1.9;
}
.pj-note li::before {
    content: ""; position: absolute; left: 0; top: .85em;
    width: 3px; height: 3px; border-radius: 50%; background: #f5b79b;
}

/* ---------- 5. 通用小节标题 ---------- */
.pj-sec { margin-top: 26px; }
.pj-sec-hd {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 14px; padding-bottom: 9px;
    border-bottom: 1px solid #eee;
    color: #d20202; font-size: 17px; font-weight: 700; line-height: 1.5;
}
.pj-sec-hd::before {
    content: ""; flex: none;
    width: 4px; height: 16px;
    border-radius: 2px; background: #ff4f00;
}
.pj-sec-hd .sub { margin-left: auto; color: #aaa; font-size: 12px; font-weight: 400; }

/* ---------- 6. 服务流程 ---------- */
.pj-flow { display: flex; gap: 9px; }
.pj-flow li {
    flex: 1 1 0; min-width: 0;
    padding: 12px 6px 11px;
    border: 1px solid #f1f1f1;
    border-radius: 8px;
    background: #fafafa;
    text-align: center;
}
.pj-flow i {
    display: block;
    margin-bottom: 5px;
    color: #ff4f00; font-size: 15px; font-style: normal; font-weight: 700; line-height: 1.3;
}
.pj-flow b { display: block; color: #333; font-size: 13px; font-weight: 600; line-height: 1.5; }

/* ---------- 7. 服务项目（2 列） ---------- */
.pj-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pj-item {
    padding: 13px 15px 14px;
    border: 1px solid #f1f1f1;
    border-radius: 8px;
    background: #fafafa;
}
.pj-item h3 {
    position: relative;
    padding-left: 13px;
    margin: 0 0 6px;
    color: #333; font-size: 15px; font-weight: 600; line-height: 1.6;
}
.pj-item h3::before {
    content: ""; position: absolute; left: 0; top: .52em;
    width: 6px; height: 6px;
    border-radius: 1px; background: #ff4f00;
}
.pj-item p { color: #7a7a7a; font-size: 13px; line-height: 1.85; }

/* ---------- 8. 免费增值服务（4 列 ×2） ---------- */
.pj-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pj-va {
    padding: 13px 10px 14px;
    border: 1px solid #f1f1f1;
    border-radius: 8px;
    background: #fcfcfc;
    text-align: center;
}
.pj-va::before {
    content: "✓";
    display: block;
    width: 22px; height: 22px;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: #fff0e8;
    color: #ff4f00;
    font-size: 12px; font-weight: 700; line-height: 22px;
}
.pj-va h3 { margin: 0; color: #333; font-size: 13px; font-weight: 600; line-height: 1.55; }
.pj-va p { margin-top: 6px; color: #8a8a8a; font-size: 12px; line-height: 1.7; }

/* ---------- 9. 底部 CTA ---------- */
.pj-cta {
    display: flex; align-items: center; gap: 16px;
    margin-top: 26px; padding: 16px 18px;
    border: 1px solid #ffdccb;
    border-radius: 10px;
    background: linear-gradient(100deg, #fff4ee 0%, #ffe8db 100%);
}
.pj-cta-txt { flex: 1; min-width: 0; color: #4a3a33; font-size: 14px; line-height: 1.8; }
.pj-cta-txt strong { color: #e8402a; font-weight: 700; }
.pj-cta-btns { flex: none; display: flex; align-items: center; gap: 10px; }
.pj-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 40px; padding: 0 18px;
    border-radius: 20px;
    background: #ff4f00;
    color: #fff !important;
    font-size: 14px; font-weight: 600; line-height: 40px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(255, 79, 0, .28);
}
.pj-btn:hover { background: #e8402a; text-decoration: none !important; }
.pj-btn svg { flex: none; }
.pj-btn-ghost {
    background: #fff; color: #e8402a !important;
    border: 1px solid #ffc7ae; box-shadow: none;
}
.pj-btn-ghost:hover { background: #fff6f1; color: #e8402a !important; }

/* ---------- 10. 移动端 ---------- */
@media screen and (max-width: 1024px) {
    .pj-cta { flex-direction: column; align-items: stretch; gap: 12px; }
    .pj-cta-btns { justify-content: flex-start; }
}

@media screen and (max-width: 768px) {
    .pj { font-size: 14px; line-height: 1.8; }
    .pj-hero-hd { padding: 11px 13px; }
    .pj-hero-hd h2 { font-size: 16px; }
    .pj-facts { grid-template-columns: 1fr; padding: 2px 13px 6px; }
    .pj-facts li { padding: 8px 0; font-size: 13px; }
    .pj-track { margin: 0 13px; padding: 14px 0 14px; }
    .pj-track b { font-size: 13px; }
    .pj-track span { font-size: 11px; }
    .pj-card .amt { font-size: 20px; }
    .pj-card .amt i { font-size: 13px; }
    .pj-sec { margin-top: 22px; }
    .pj-sec-hd { font-size: 16px; margin-bottom: 12px; }
    .pj-flow { gap: 6px; }
    .pj-flow li { padding: 10px 3px 9px; }
    .pj-flow i { font-size: 13px; }
    .pj-flow b { font-size: 12px; }
    .pj-grid2 { grid-template-columns: 1fr; gap: 10px; }
    .pj-grid4 { grid-template-columns: repeat(2, 1fr); gap: 9px; }
    .pj-cta { padding: 14px; }
    .pj-cta-txt { font-size: 13px; }
}

@media screen and (max-width: 480px) {
    .pj-hero-hd { flex-wrap: wrap; }
    .pj-facts .lb { width: 4.2em; }
    /* 报价卡改为整行列表，避免三列挤压 */
    .pj-price-grid { grid-template-columns: 1fr; gap: 8px; }
    .pj-card {
        display: flex; flex-direction: row; align-items: center; justify-content: space-between;
        gap: 10px;
        padding: 11px 14px;
        text-align: left;
    }
    .pj-card .amt { font-size: 21px; }
    .pj-card .lb {
        margin: 0; padding: 0; border-top: 0;
        color: #8a8a8a; font-size: 12px; text-align: right;
    }
    /* 移动端横向排列，标记行隐藏（不占位、不影响对齐） */
    .pj-flag { display: none; }
    .pj-card-hot .lb { color: #fff1ea; }
    /* 流程改为竖向紧凑列表 */
    .pj-flow { flex-direction: column; gap: 6px; }
    .pj-flow li {
        display: flex; align-items: center; gap: 8px;
        padding: 8px 12px;
        text-align: left;
    }
    .pj-flow i { margin: 0; width: 24px; }
    .pj-flow b { font-size: 13px; }
    .pj-note { flex-direction: column; gap: 4px; }
    .pj-cta-btns { flex-direction: column; align-items: stretch; }
    .pj-btn { justify-content: center; }
}