#pg-loancalc .calc-hero { background:linear-gradient(135deg,var(--navy),var(--navy-mid)); border-radius:var(--radius-lg); padding:24px 28px; margin-bottom:20px; color:#fff; position:relative; overflow:hidden; }
            #pg-loancalc .calc-hero h2 { margin:0 0 4px; font-size:20px; font-weight:700; display:flex; align-items:center; gap:10px; }
            #pg-loancalc .calc-hero h2 i { color:var(--gold); }
            #pg-loancalc .calc-hero p { margin:0 0 14px; color:var(--gray-300); font-size:13px; }
            #pg-loancalc .calc-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:20px 24px; margin-bottom:16px; }
            #pg-loancalc .calc-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
            #pg-loancalc .calc-field label { display:block; font-size:12px; font-weight:600; color:var(--gray-500); margin-bottom:4px; }
            #pg-loancalc .calc-field input { width:100%; padding:9px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:13px; font-family:inherit; outline:none; color:var(--gray-700); }
            @media (max-width:768px) { #pg-loancalc .calc-grid { grid-template-columns:1fr; } }

            /* ── lc- component CSS ── */
            #pg-loancalc .lc-hero { display:flex; align-items:center; gap:16px; padding:22px 24px; background:linear-gradient(135deg,var(--navy),var(--navy-mid,#0a3a6e)); border-radius:var(--radius-lg,12px); margin-bottom:20px; color:#fff; }
            #pg-loancalc .lc-hero-icon { font-size:32px; color:var(--brand-gold); flex-shrink:0; }
            #pg-loancalc .lc-hero-text h1 { margin:0 0 4px; font-size:20px; font-weight:800; }
            #pg-loancalc .lc-hero-text p { margin:0; font-size:13px; color:rgba(255,255,255,.6); }
            #pg-loancalc .lc-grid { display:grid; grid-template-columns:360px 1fr; gap:20px; align-items:flex-start; }
            #pg-loancalc .lc-panel { background:var(--surface,#fff); border:1px solid var(--border,#e2e8f0); border-radius:var(--radius-md,10px); padding:20px 22px; }
            #pg-loancalc .lc-panel-title { font-size:14px; font-weight:700; color:var(--gray-700,#374151); margin-bottom:16px; display:flex; align-items:center; gap:8px; }
            #pg-loancalc .lc-results { min-height:200px; }
            #pg-loancalc .lc-field { margin-bottom:18px; }
            #pg-loancalc .lc-field-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
            #pg-loancalc .lc-field-label { font-size:12px; font-weight:700; color:var(--gray-600,#4b5563); display:flex; align-items:center; gap:6px; }
            #pg-loancalc .lc-field-value-sm { font-size:13px; font-weight:700; color:var(--gray-700,#374151); }
            #pg-loancalc .lc-input-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
            #pg-loancalc .lc-input { flex:1; padding:9px 12px; border:1px solid var(--border,#e2e8f0); border-radius:var(--radius-sm,6px); font-size:14px; font-family:inherit; outline:none; min-width:0; }
            #pg-loancalc .lc-input:focus { border-color:var(--navy,var(--brand-navy)); }
            #pg-loancalc .lc-select { padding:9px 10px; border:1px solid var(--border,#e2e8f0); border-radius:var(--radius-sm,6px); font-family:inherit; font-size:13px; background:var(--surface,#fff); }
            #pg-loancalc .lc-slider { width:100%; margin-bottom:6px; accent-color:var(--navy,var(--brand-navy)); }
            #pg-loancalc .lc-presets { display:flex; flex-wrap:wrap; gap:4px; margin-top:2px; }
            #pg-loancalc .lc-preset { padding:3px 10px; border:1px solid var(--border,#e2e8f0); border-radius:20px; font-size:11px; cursor:pointer; background:var(--surface,#fff); color:var(--gray-600,#4b5563); transition:all .15s; font-family:inherit; }
            #pg-loancalc .lc-preset:hover { background:var(--navy,var(--brand-navy)); color:#fff; border-color:var(--navy,var(--brand-navy)); }
            #pg-loancalc .lc-segmented { display:flex; border:1px solid var(--border,#e2e8f0); border-radius:var(--radius-sm,6px); overflow:hidden; }
            #pg-loancalc .lc-seg-btn { flex:1; padding:9px; border:none; background:var(--surface2,#f4f5f7); font-family:inherit; font-size:13px; cursor:pointer; }
            #pg-loancalc .lc-seg-btn.on { background:var(--navy,var(--brand-navy)); color:#fff; }
            #pg-loancalc .lc-payment-hero { background:linear-gradient(135deg,var(--navy,var(--brand-navy)),var(--navy-mid,#0a3a6e)); border-radius:var(--radius-md,10px); padding:20px 22px; color:#fff; display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:10px; }
            #pg-loancalc .lc-payment-label { font-size:12px; color:rgba(255,255,255,.6); font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
            #pg-loancalc .lc-payment-amount { font-size:32px; font-weight:900; color:#fff; line-height:1; }
            #pg-loancalc .lc-currency { font-size:18px; margin-right:4px; }
            #pg-loancalc .lc-payment-sub { font-size:12px; color:rgba(255,255,255,.5); margin-top:4px; }
            #pg-loancalc .lc-payment-method-badge { background:rgba(200,169,106,.2); color:var(--brand-gold); border:1px solid rgba(200,169,106,.4); border-radius:20px; padding:4px 12px; font-size:12px; font-weight:700; }
            #pg-loancalc .lc-kpi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px; }
            #pg-loancalc .lc-kpi { background:var(--surface,#fff); border:1px solid var(--border,#e2e8f0); border-radius:var(--radius-sm,6px); padding:12px 14px; }
            #pg-loancalc .lc-kpi-label { font-size:11px; font-weight:600; color:var(--muted,#6b7280); margin-bottom:4px; display:flex; align-items:center; gap:5px; }
            #pg-loancalc .lc-kpi-value { font-size:18px; font-weight:800; color:var(--text,#1f2a44); }
            #pg-loancalc .lc-unit { font-size:12px; font-weight:600; color:var(--muted,#6b7280); margin-left:2px; }
            #pg-loancalc .lc-charts { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
            #pg-loancalc .lc-chart-card { background:var(--surface,#fff); border:1px solid var(--border,#e2e8f0); border-radius:var(--radius-md,10px); padding:16px; }
            #pg-loancalc .lc-chart-card h3 { margin:0 0 12px; font-size:13px; font-weight:700; color:var(--gray-700,#374151); display:flex; align-items:center; gap:6px; }
            #pg-loancalc .lc-donut-wrap { position:relative; width:160px; height:160px; margin:0 auto 12px; }
            #pg-loancalc .lc-donut-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
            #pg-loancalc .lc-donut-pct { font-size:22px; font-weight:800; }
            #pg-loancalc .lc-donut-lbl { font-size:11px; color:var(--muted,#6b7280); }
            #pg-loancalc .lc-donut-legend { display:flex; gap:12px; justify-content:center; font-size:12px; }
            #pg-loancalc .lc-dot { width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:4px; }
            #pg-loancalc .lc-line-wrap { height:160px; }
            #pg-loancalc .lc-table-card { background:var(--surface,#fff); border:1px solid var(--border,#e2e8f0); border-radius:var(--radius-md,10px); overflow:hidden; }
            #pg-loancalc .lc-table-head { padding:14px 18px; border-bottom:1px solid var(--border,#e2e8f0); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
            #pg-loancalc .lc-table-head h3 { margin:0; font-size:14px; font-weight:700; }
            #pg-loancalc .lc-table-actions { display:flex; gap:6px; }
            #pg-loancalc .lc-btn { padding:6px 14px; border:1px solid var(--border,#e2e8f0); background:var(--surface,#fff); border-radius:6px; font-size:12px; font-weight:600; cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; gap:5px; }
            #pg-loancalc .lc-btn-primary { background:var(--navy,var(--brand-navy)); color:#fff; border-color:var(--navy,var(--brand-navy)); }
            #pg-loancalc .lc-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
            #pg-loancalc .lc-empty { text-align:center; padding:60px 20px; color:var(--muted,#6b7280); }
            #pg-loancalc .lc-empty i { font-size:40px; display:block; margin-bottom:12px; opacity:.4; }
            #pg-loancalc .lc-empty h3 { margin:0 0 6px; font-size:16px; font-weight:700; }
            #pg-loancalc .lc-empty p { margin:0; font-size:13px; }

            /* lc- responsive */
            @media (max-width:900px) {
              #pg-loancalc .lc-grid { grid-template-columns:1fr; }
              #pg-loancalc .lc-kpi-grid { grid-template-columns:repeat(2,1fr); }
              #pg-loancalc .lc-charts { grid-template-columns:1fr; }
              #pg-loancalc .lc-payment-amount { font-size:26px; }
            }
            @media (max-width:480px) {
              #pg-loancalc .lc-kpi-grid { grid-template-columns:1fr 1fr; }
              #pg-loancalc .lc-hero { padding:16px; gap:12px; }
              #pg-loancalc .lc-hero-icon { font-size:24px; }
              #pg-loancalc .lc-hero-text h1 { font-size:16px; }
              #pg-loancalc .lc-panel { padding:16px; }
            }

            /* ════ ลื่น 120fps + กระชับ (2026-06-21) ════
               tabular-nums = เลขไม่ขยับ/กระตุกตอนค่าเปลี่ยนระหว่างลากสไลเดอร์;
               contain = จำกัด repaint ตอนกราฟ/ตัวเลขอัปเดต; เผยผล transform/opacity ล้วน */
            #pg-loancalc .lc-payment-amount,
            #pg-loancalc .lc-kpi-value,
            #pg-loancalc .lc-field-value-sm,
            #pg-loancalc #lc-tbody td.right,
            #pg-loancalc #lc-tfoot td.right,
            #pg-loancalc #lc-compare-body td.right { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
            #pg-loancalc .lc-kpi, #pg-loancalc .lc-donut-wrap { contain: layout paint; }
            #pg-loancalc #lc-output { will-change: transform, opacity; }
            #pg-loancalc #lc-output.lc-anim-in { animation: lcIn .22s cubic-bezier(.16,1,.3,1); }
            @keyframes lcIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
            #pg-loancalc .lc-preset { transition: background-color .15s, color .15s, border-color .15s, transform .12s; }
            #pg-loancalc .lc-preset:active { transform: scale(.95); }
            #pg-loancalc .lc-seg-btn { transition: background-color .18s ease, color .18s ease; }
            /* กระชับ: ลด padding/margin (โครงเดิม) */
            #pg-loancalc .lc-field { margin-bottom: 13px; }
            #pg-loancalc .lc-kpi { padding: 10px 13px; }
            #pg-loancalc .lc-payment-hero { padding: 16px 20px; margin-bottom: 14px; }
            #pg-loancalc .lc-kpi-grid, #pg-loancalc .lc-charts { margin-bottom: 14px; }
            @media (prefers-reduced-motion: reduce) {
              #pg-loancalc #lc-output.lc-anim-in { animation: none; }
              #pg-loancalc .lc-preset, #pg-loancalc .lc-seg-btn { transition: none; }
            }