/* ─────────────────────────────────────────────
   Cẩm nang page styles
   ───────────────────────────────────────────── */

.cn-hero {
    background: linear-gradient(135deg, #063d22 0%, #0d6e3f 55%, #155e39 100%);
    padding: 80px 0 60px;
    position: relative;
    overflow: hidden;
}
.cn-hero::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 70% 50%, rgba(255,255,255,.05) 0%, transparent 60%);
}
.cn-hero-badge {
    display: inline-flex; align-items: center; gap: .5rem;
    background: rgba(255,255,255,.12); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.2); border-radius: 100px;
    padding: .35rem 1rem; color: #fff; font-size: .82rem; margin-bottom: 1.2rem;
}
.cn-hero-title { font-weight: 800; font-size: 2.2rem; color: #fff; line-height: 1.25; margin-bottom: 1rem; }
.cn-hero-title span { color: #86efac; }
.cn-hero-desc { color: rgba(255,255,255,.8); font-size: 1rem; margin-bottom: 1.5rem; max-width: 600px; }

/* Table of contents */
.toc-card { background: #f0fdf4; border: 1px solid #86efac; border-radius: 16px; padding: 1.5rem; position: sticky; top: 80px; }
.toc-item { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid #d1fae5; color: #374151; font-size: .875rem; text-decoration: none; transition: color .2s; }
.toc-item:last-child { border-bottom: none; }
.toc-item:hover { color: #0d6e3f; text-decoration: none; }
.toc-num { width: 22px; height: 22px; border-radius: 50%; background: #0d6e3f; color: #fff; font-size: .7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* Section heading */
.cn-section-heading  { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 2px solid #dcfce7; }
.cn-section-icon     { width: 46px; height: 46px; border-radius: 12px; background: #0d6e3f; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.cn-section-title    { font-size: 1.35rem; font-weight: 800; margin-bottom: .15rem; }
.cn-section-subtitle { font-size: .85rem; color: #6b7280; margin: 0; }

/* Timeline */
.timeline { position: relative; padding-left: 2rem; }
.timeline::before { content: ''; position: absolute; left: .65rem; top: 0; bottom: 0; width: 2px; background: #dcfce7; }
.timeline-item { position: relative; margin-bottom: 1.5rem; }
.timeline-dot  { position: absolute; left: -1.5rem; top: .2rem; width: 14px; height: 14px; border-radius: 50%; background: #0d6e3f; border: 3px solid #f0fdf4; }
.timeline-item.new .timeline-dot { background: #f59e0b; border-color: #fff7ed; }
.timeline-card       { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1rem 1.2rem; }
.timeline-date       { font-size: .75rem; color: #0d6e3f; font-weight: 700; margin-bottom: .2rem; }
.timeline-card-title { font-weight: 700; margin-bottom: .3rem; font-size: .95rem; }
.timeline-card-desc  { font-size: .85rem; color: #6b7280; margin: 0; }

/* Comparison table */
.compare-table             { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 12px; overflow: hidden; border: 1px solid #e2e8f0; }
.compare-table th          { padding: 1rem; text-align: center; font-weight: 700; font-size: .9rem; }
.compare-table td          { padding: .85rem 1rem; font-size: .875rem; border-top: 1px solid #f3f4f6; }
.compare-table td:first-child { color: #374151; font-weight: 500; }
.compare-th-old            { background: #f8fafc; color: #6b7280; }
.compare-th-new            { background: linear-gradient(135deg,#0d6e3f,#1a8a50); color: #fff; }
.compare-td-old            { background: #fafafa; color: #9ca3af; }
.compare-td-new            { background: #f0fdf4; color: #166534; }
.compare-badge-new         { display: inline-block; background: #dcfce7; color: #166534; border-radius: 100px; padding: .1rem .6rem; font-size: .72rem; font-weight: 700; margin-left: .4rem; }
.compare-badge-change      { display: inline-block; background: #fef9c3; color: #92400e; border-radius: 100px; padding: .1rem .6rem; font-size: .72rem; font-weight: 700; margin-left: .4rem; }

/* Condition box */
.condition-box         { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1.2rem; border-left: 4px solid #0d6e3f; }
.condition-box.warning { border-left-color: #f59e0b; }
.condition-box.info    { border-left-color: #3b82f6; }

/* FAQ */
.faq-item            { border: 1px solid #e2e8f0; border-radius: 12px; margin-bottom: .75rem; overflow: hidden; }
.faq-question        { padding: 1rem 1.2rem; font-weight: 600; font-size: .9rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; background: #fff; user-select: none; }
.faq-question:hover  { background: #f8fafc; }
.faq-answer          { padding: 0 1.2rem 1rem; font-size: .875rem; color: #4b5563; display: none; }
.faq-item.open .faq-answer  { display: block; }
.faq-item.open .faq-toggle  { transform: rotate(45deg); }
.faq-toggle          { transition: transform .25s; color: #0d6e3f; font-size: 1.1rem; flex-shrink: 0; }

/* Loan card */
.loan-card { background: linear-gradient(135deg,#ecfdf5,#d1fae5); border: 1px solid #6ee7b7; border-radius: 16px; padding: 1.5rem; }
.loan-rate { font-size: 2.5rem; font-weight: 800; color: #0d6e3f; line-height: 1; }

/* Back link */
.back-link       { display: inline-flex; align-items: center; gap: .4rem; color: #0d6e3f; font-weight: 600; text-decoration: none; font-size: .9rem; padding: .5rem 1.25rem; border: 1.5px solid #0d6e3f; border-radius: 100px; transition: all .2s; }
.back-link:hover { background: #0d6e3f; color: #fff; }