/*! * Loan Calculator Widget — เครื่องคำนวณสินเชื่อ * วางไฟล์นี้ไว้ใน ของเว็บไซต์ * ตัวอย่าง: * * หมายเหตุเรื่อง CSS isolation: * ทุก selector ในไฟล์นี้ถูก scope ด้วย #lc-root (id) เพื่อให้มี specificity สูงกว่า * class/element selector ทั่วไปของธีมหลัก (เช่น "button", ".btn") ป้องกันปัญหา * ปุ่มกลมกลายเป็นวงรี หรือสีถูกทับ นอกจากนี้ปุ่ม/ช่องกรอกที่เสี่ยงโดนสไตล์กลาง * ของเว็บมากที่สุด (button, input) มีการ reset ค่าพื้นฐาน (all: unset ก่อน แล้วค่อย * กำหนดใหม่) และคุณสมบัติที่อ่อนไหวที่สุด (border-radius, width, height, box-sizing, * font-family, line-height, background) ใช้ !important เฉพาะจุดเพื่อกันการชนกับ * theme ของเว็บหลักเท่านั้น */ :root{ --lc-ink:#0F2E4C; --lc-ink-soft:#1B3F63; --lc-accent:#2F6FED; /* สีคราม/น้ำเงินหลัก แทนที่สีเขียวเดิมทั้งหมด */ --lc-accent-deep:#1E52C4; --lc-accent-bg:#EAF0FE; --lc-gold:#C89B3C; /* คงไว้ใช้เป็น accent รอง (แถบสไลเดอร์/แท็บ) */ --lc-gold-deep:#A87F2C; --lc-paper:#F7F5F0; --lc-card:#FFFFFF; --lc-slate:#5B6B7A; --lc-slate-light:#8B98A5; --lc-hairline:#E2DFD6; --lc-danger:#B8433A; --lc-shadow-lg: 0 24px 60px -12px rgba(15,46,76,0.35), 0 8px 24px -8px rgba(15,46,76,0.18); --lc-shadow-sm: 0 2px 8px rgba(15,46,76,0.08); --lc-radius-lg: 20px; --lc-radius-md: 14px; --lc-radius-sm: 10px; --lc-font-display: "Noto Serif Thai", "Sarabun", "Segoe UI", Georgia, serif; --lc-font-body: "Noto Sans Thai", "Sarabun", "Segoe UI", Tahoma, sans-serif; } /* ============================================================ RESET / ISOLATION LAYER #lc-root ยกระดับ specificity ของทุก selector ในไฟล์นี้ให้ชนะ สไตล์ generic ของธีมหลัก (button, input, .btn ฯลฯ) โดยไม่ต้อง พึ่ง !important ทั้งไฟล์ ============================================================ */ #lc-root, #lc-root *, #lc-root *::before, #lc-root *::after{ box-sizing:border-box !important; } #lc-root{ font-family:var(--lc-font-body); -webkit-font-smoothing:antialiased; line-height:1.5; } /* รีเซ็ตปุ่มทั้งหมดในวิดเจ็ตก่อน แล้วให้แต่ละ component กำหนดหน้าตาของตัวเองทับอีกที กันกรณีธีมหลักตั้ง button{border-radius:6px;padding:...;width:...} แบบ global */ #lc-root button{ all:unset; box-sizing:border-box !important; cursor:pointer; font-family:var(--lc-font-body); } #lc-root input{ all:unset; box-sizing:border-box !important; font-family:var(--lc-font-body); display:block; } #lc-root input[type="range"]{ display:block; -webkit-appearance:none; appearance:none; } #lc-root svg{ display:block; } #lc-root p, #lc-root h1, #lc-root h2, #lc-root h3{ margin:0; padding:0; } #lc-root ::selection{ background:var(--lc-accent-bg); color:var(--lc-ink); } /* ============ Floating Action Button ============ */ #lc-root .lc-fab{ position:fixed !important; left:22px !important; bottom:22px !important; z-index:2147483000; width:64px !important; height:64px !important; min-width:64px !important; min-height:64px !important; max-width:64px !important; max-height:64px !important; aspect-ratio:1 / 1; border-radius:50% !important; background:linear-gradient(155deg, var(--lc-ink) 0%, var(--lc-ink-soft) 55%, #123252 100%) !important; border:none !important; padding:0 !important; margin:0 !important; cursor:pointer; display:flex !important; align-items:center !important; justify-content:center !important; box-shadow:var(--lc-shadow-lg); transition:transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s ease; flex-shrink:0; } #lc-root .lc-fab::before{ content:""; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid rgba(47,111,237,0.45); opacity:0; transform:scale(.85); transition:opacity .3s ease, transform .3s ease; } #lc-root .lc-fab:hover{ transform:translateY(-3px) scale(1.04); box-shadow:0 28px 70px -10px rgba(15,46,76,0.45), 0 10px 26px -6px rgba(15,46,76,0.25); } #lc-root .lc-fab:hover::before{ opacity:1; transform:scale(1); } #lc-root .lc-fab:active{ transform:translateY(-1px) scale(0.98); } #lc-root .lc-fab svg{ width:26px !important; height:26px !important; position:relative; z-index:1; } #lc-root .lc-fab .lc-fab-icon-calc{ color:#F7F5F0; transition:opacity .22s ease, transform .22s ease; } #lc-root .lc-fab .lc-fab-icon-close{ color:#F7F5F0; position:absolute; opacity:0; transform:rotate(-45deg) scale(.6); transition:opacity .22s ease, transform .22s ease; } #lc-root .lc-fab.lc-fab--open .lc-fab-icon-calc{ opacity:0; transform:rotate(45deg) scale(.6); } #lc-root .lc-fab.lc-fab--open .lc-fab-icon-close{ opacity:1; transform:rotate(0) scale(1); } #lc-root .lc-fab-badge{ position:fixed !important; left:78px !important; bottom:38px !important; z-index:2147483000; background:var(--lc-accent); color:#fff; font-family:var(--lc-font-body); font-weight:700; font-size:12px; line-height:1.2 !important; padding:7px 12px !important; border-radius:999px !important; letter-spacing:.01em; white-space:nowrap; box-shadow:0 4px 14px rgba(15,46,76,0.25); animation:lc-badge-in .5s cubic-bezier(.34,1.56,.64,1) .6s both; pointer-events:none; } @keyframes lc-badge-in{ from{ opacity:0; transform:scale(.4) translateY(4px); } to{ opacity:1; transform:scale(1) translateY(0); } } #lc-root .lc-fab.lc-fab--open ~ .lc-fab-badge, #lc-root .lc-fab-badge.lc-fab-badge--hide{ display:none !important; } @media (max-width:640px){ #lc-root .lc-fab{ left:16px !important; bottom:16px !important; width:58px !important; height:58px !important; min-width:58px !important; min-height:58px !important; max-width:58px !important; max-height:58px !important; } #lc-root .lc-fab svg{ width:23px !important; height:23px !important; } #lc-root .lc-fab-badge{ left:70px !important; bottom:34px !important; font-size:11px !important; } } /* ============ Overlay ============ */ #lc-root .lc-overlay{ position:fixed !important; inset:0 !important; background:rgba(13,28,44,0.55); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); z-index:2147482999; opacity:0; visibility:hidden; transition:opacity .3s ease, visibility 0s linear .3s; display:flex !important; align-items:center; justify-content:center; padding:24px; } #lc-root .lc-overlay.lc-overlay--show{ opacity:1; visibility:visible; transition:opacity .3s ease; } /* ============ Modal ============ */ #lc-root .lc-modal{ width:100%; max-width:880px; max-height:min(760px, 92vh); background:var(--lc-paper) !important; border-radius:var(--lc-radius-lg) !important; box-shadow:var(--lc-shadow-lg); display:flex !important; flex-direction:column; overflow:hidden; transform:translateY(24px) scale(.97); opacity:0; transition:transform .32s cubic-bezier(.22,1,.36,1), opacity .32s ease; } #lc-root .lc-overlay--show .lc-modal{ transform:translateY(0) scale(1); opacity:1; } /* Header */ #lc-root .lc-modal-header{ background:linear-gradient(120deg, var(--lc-ink) 0%, var(--lc-ink-soft) 100%) !important; padding:22px 26px; position:relative; flex-shrink:0; overflow:hidden; } #lc-root .lc-modal-header::after{ content:""; position:absolute; top:-40%; right:-8%; width:220px; height:220px; background:radial-gradient(circle, rgba(47,111,237,0.28) 0%, transparent 70%); pointer-events:none; } #lc-root .lc-modal-header-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; position:relative; z-index:1; } #lc-root .lc-modal-title{ font-family:var(--lc-font-display) !important; color:#fff !important; font-size:22px !important; font-weight:600; margin:0 0 4px; letter-spacing:.01em; line-height:1.3 !important; } #lc-root .lc-modal-subtitle{ color:rgba(255,255,255,0.62) !important; font-size:13px !important; margin:0; line-height:1.5 !important; } #lc-root .lc-modal-close{ background:rgba(255,255,255,0.12) !important; width:34px !important; height:34px !important; min-width:34px !important; min-height:34px !important; border-radius:50% !important; color:#fff; display:flex !important; align-items:center !important; justify-content:center !important; flex-shrink:0; transition:background .2s ease, transform .2s ease; } #lc-root .lc-modal-close:hover{ background:rgba(255,255,255,0.22) !important; transform:rotate(90deg); } #lc-root .lc-modal-close svg{ width:16px !important; height:16px !important; } /* กลุ่มปุ่มมุมขวาบน: สลับภาษา + ปิด */ #lc-root .lc-modal-header-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; } /* แถบสลับภาษา TH / EN */ #lc-root .lc-lang-switch{ display:flex; background:rgba(255,255,255,0.12) !important; border-radius:999px !important; padding:3px !important; gap:2px; } #lc-root .lc-lang-btn{ font-family:var(--lc-font-body) !important; font-size:11.5px !important; font-weight:700; letter-spacing:.03em; color:rgba(255,255,255,0.65) !important; padding:6px 10px !important; border-radius:999px !important; line-height:1.2 !important; transition:background .2s ease, color .2s ease; white-space:nowrap; } #lc-root .lc-lang-btn:hover{ color:#fff !important; } #lc-root .lc-lang-btn.lc-lang-btn--active{ background:var(--lc-accent) !important; color:#fff !important; } /* Tabs */ #lc-root .lc-tabs{ display:flex; gap:6px; margin-top:18px; position:relative; z-index:1; background:rgba(0,0,0,0.18) !important; padding:5px; border-radius:999px !important; } #lc-root .lc-tab{ flex:1; background:transparent !important; color:rgba(255,255,255,0.7) !important; font-family:var(--lc-font-body) !important; font-size:14px !important; font-weight:600; padding:10px 14px !important; border-radius:999px !important; text-align:center; transition:all .25s ease; position:relative; white-space:nowrap; line-height:1.4 !important; } #lc-root .lc-tab.lc-tab--active{ background:var(--lc-accent) !important; color:#fff !important; box-shadow:0 4px 14px rgba(0,0,0,0.2); } #lc-root .lc-tab:not(.lc-tab--active):hover{ color:#fff !important; } /* Body (scrollable) */ #lc-root .lc-modal-body{ padding:26px; overflow-y:auto; flex:1; } #lc-root .lc-modal-body::-webkit-scrollbar{ width:8px; } #lc-root .lc-modal-body::-webkit-scrollbar-track{ background:transparent; } #lc-root .lc-modal-body::-webkit-scrollbar-thumb{ background:var(--lc-hairline); border-radius:8px; } #lc-root .lc-panel{ display:none; animation:lc-fade-in .3s ease; } #lc-root .lc-panel.lc-panel--active{ display:block; } @keyframes lc-fade-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } } #lc-root .lc-grid{ display:grid; grid-template-columns:1fr; gap:14px; } @media (min-width:560px){ #lc-root .lc-grid{ grid-template-columns:1fr 1fr; } #lc-root .lc-grid .lc-field--full{ grid-column:1 / -1; } } /* Fields */ #lc-root .lc-field{ display:flex; flex-direction:column; gap:7px; } #lc-root .lc-field-label{ font-size:13px !important; font-weight:600; color:var(--lc-ink) !important; display:flex; align-items:center; gap:4px; line-height:1.4 !important; } #lc-root .lc-field-label .lc-req{ color:var(--lc-accent); font-size:14px; } #lc-root .lc-field-hint{ font-size:11.5px !important; color:var(--lc-slate-light) !important; margin-top:-2px; line-height:1.4 !important; } #lc-root .lc-input-wrap{ position:relative; } #lc-root .lc-input{ width:100% !important; font-family:var(--lc-font-body) !important; font-variant-numeric:tabular-nums; font-size:16px !important; font-weight:600; color:var(--lc-ink) !important; background:var(--lc-card) !important; border:1.5px solid var(--lc-hairline) !important; border-radius:var(--lc-radius-sm) !important; padding:12px 52px 12px 14px !important; line-height:1.4 !important; transition:border-color .2s ease, box-shadow .2s ease; -moz-appearance:textfield; } #lc-root .lc-input::-webkit-outer-spin-button, #lc-root .lc-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; } #lc-root .lc-input:focus{ outline:none; border-color:var(--lc-accent) !important; box-shadow:0 0 0 4px rgba(47,111,237,0.15); } #lc-root .lc-input.lc-input--error{ border-color:var(--lc-danger) !important; } #lc-root .lc-input.lc-input--error:focus{ box-shadow:0 0 0 4px rgba(184,67,58,0.13); } #lc-root .lc-input-unit{ position:absolute; right:14px; top:50%; transform:translateY(-50%); font-size:12.5px !important; font-weight:600; color:var(--lc-slate-light) !important; pointer-events:none; background:var(--lc-card); padding-left:4px; line-height:1 !important; } #lc-root .lc-error-msg{ font-size:11.5px !important; color:var(--lc-danger) !important; min-height:14px; display:none; line-height:1.4 !important; } #lc-root .lc-error-msg.lc-error-msg--show{ display:block; } /* Range slider (interest rate) */ #lc-root .lc-slider-row{ display:flex; align-items:center; gap:12px; margin-top:2px; } #lc-root .lc-slider{ width:100%; flex:1; height:5px !important; border-radius:4px !important; background:var(--lc-hairline) !important; outline:none; cursor:pointer; margin:0 !important; padding:0 !important; border:none !important; } #lc-root .lc-slider::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:18px !important; height:18px !important; border-radius:50% !important; background:var(--lc-accent) !important; border:3px solid #fff !important; box-shadow:0 2px 6px rgba(15,46,76,0.3); cursor:pointer; transition:transform .15s ease; } #lc-root .lc-slider::-webkit-slider-thumb:hover{ transform:scale(1.15); } #lc-root .lc-slider::-moz-range-thumb{ width:18px !important; height:18px !important; border-radius:50% !important; background:var(--lc-accent) !important; border:3px solid #fff !important; box-shadow:0 2px 6px rgba(15,46,76,0.3); cursor:pointer; } #lc-root .lc-slider::-moz-range-track{ height:5px !important; border-radius:4px !important; background:var(--lc-hairline) !important; } /* Divider */ #lc-root .lc-divider{ border:none; border-top:1px dashed var(--lc-hairline); margin:22px 0; } /* Result panel — the "receipt" signature element (คราม/น้ำเงิน แทนเขียว) */ #lc-root .lc-result{ background:linear-gradient(165deg, #FFFDF7 0%, var(--lc-accent-bg) 130%) !important; border:1.5px solid #D6E1FA !important; border-radius:var(--lc-radius-md) !important; padding:20px 22px; position:relative; overflow:hidden; } #lc-root .lc-result::before{ content:""; position:absolute; top:0; left:0; width:5px; height:100%; background:linear-gradient(180deg, var(--lc-gold) 0%, var(--lc-accent) 100%); } #lc-root .lc-result-eyebrow{ font-size:11px !important; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--lc-accent-deep) !important; margin:0 0 14px; display:flex; align-items:center; gap:6px; line-height:1.4 !important; } #lc-root .lc-result-eyebrow svg{ width:13px !important; height:13px !important; } #lc-root .lc-result-row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:11px 0; } #lc-root .lc-result-row + .lc-result-row{ border-top:1px dashed rgba(91,107,122,0.25); } #lc-root .lc-result-label{ font-size:13.5px !important; color:var(--lc-slate) !important; font-weight:500; line-height:1.4 !important; } #lc-root .lc-result-value{ font-family:var(--lc-font-display) !important; font-variant-numeric:tabular-nums; font-size:15px !important; font-weight:600; color:var(--lc-slate) !important; white-space:nowrap; line-height:1.4 !important; } #lc-root .lc-result-row--primary .lc-result-label{ font-size:14.5px !important; font-weight:700; color:var(--lc-ink) !important; } #lc-root .lc-result-row--primary .lc-result-value{ font-size:26px !important; font-weight:700; color:var(--lc-accent-deep) !important; transition:transform .18s ease; } #lc-root .lc-result-value.lc-result-value--pulse{ animation:lc-pulse .32s ease; } @keyframes lc-pulse{ 0%{ transform:scale(1); } 40%{ transform:scale(1.05); } 100%{ transform:scale(1); } } #lc-root .lc-result-value .lc-unit{ font-size:13px !important; font-weight:600; color:var(--lc-slate-light) !important; margin-left:3px; } /* สถานะเตือน: ภาระหนี้เดิมเกินเพดานที่กำหนด ไม่มีวงเงินเหลือ */ #lc-root .lc-result--warn{ background:linear-gradient(165deg, #FFFDF7 0%, #FBEDEA 130%) !important; border-color:#F0D3CE !important; } #lc-root .lc-result--warn::before{ background:linear-gradient(180deg, var(--lc-gold) 0%, var(--lc-danger) 100%); } #lc-root .lc-result--warn .lc-result-row--primary .lc-result-value{ color:var(--lc-danger) !important; } #lc-root .lc-result--warn .lc-result-eyebrow{ color:var(--lc-danger) !important; } #lc-root .lc-disclaimer{ display:flex; align-items:flex-start; gap:7px; margin-top:16px; font-size:11.5px !important; color:var(--lc-slate-light) !important; line-height:1.5 !important; } #lc-root .lc-disclaimer svg{ width:14px !important; height:14px !important; flex-shrink:0; margin-top:1px; color:var(--lc-slate-light); } /* Footer CTA */ #lc-root .lc-modal-footer{ padding:16px 26px 22px; flex-shrink:0; display:flex; gap:10px; } #lc-root .lc-btn{ font-family:var(--lc-font-body) !important; font-size:14.5px !important; font-weight:700; padding:13px 20px !important; border-radius:var(--lc-radius-sm) !important; text-align:center; line-height:1.4 !important; transition:transform .15s ease, box-shadow .15s ease, background .2s ease; } #lc-root .lc-btn--primary{ flex:1; background:var(--lc-ink) !important; color:#fff !important; box-shadow:var(--lc-shadow-sm); } #lc-root .lc-btn--primary:hover{ background:var(--lc-ink-soft) !important; transform:translateY(-1px); } #lc-root .lc-btn--ghost{ background:transparent !important; color:var(--lc-slate) !important; border:1.5px solid var(--lc-hairline) !important; } #lc-root .lc-btn--ghost:hover{ background:#fff !important; border-color:var(--lc-slate-light) !important; } /* เอฟเฟกต์เขย่าเบาๆ ตอนคลิกพื้นหลังนอก modal เพื่อบอกว่าต้องกดปุ่มออกก่อน */ #lc-root .lc-modal.lc-modal--shake{ animation:lc-shake .35s ease; } @keyframes lc-shake{ 0%, 100%{ transform:translateY(0) scale(1) translateX(0); } 25%{ transform:translateY(0) scale(1) translateX(-6px); } 75%{ transform:translateY(0) scale(1) translateX(6px); } } /* ============ Mobile ============ */ @media (max-width:640px){ #lc-root .lc-overlay{ padding:0; align-items:flex-end; } #lc-root .lc-modal{ max-width:100%; max-height:94vh; border-radius:22px 22px 0 0 !important; transform:translateY(100%); } #lc-root .lc-overlay--show .lc-modal{ transform:translateY(0); } #lc-root .lc-modal-header{ padding:20px 20px 18px; } #lc-root .lc-modal-title{ font-size:19px !important; } #lc-root .lc-modal-subtitle{ font-size:12px !important; } #lc-root .lc-modal-header-actions{ gap:6px; } #lc-root .lc-lang-btn{ font-size:10.5px !important; padding:5px 8px !important; } #lc-root .lc-modal-close{ width:30px !important; height:30px !important; min-width:30px !important; min-height:30px !important; } #lc-root .lc-modal-close svg{ width:14px !important; height:14px !important; } #lc-root .lc-modal-body{ padding:20px; } #lc-root .lc-modal-footer{ padding:14px 20px 20px; flex-direction:column-reverse; } #lc-root .lc-result-row--primary .lc-result-value{ font-size:22px !important; } } /* Drag handle for mobile sheet feel */ #lc-root .lc-drag-handle{ display:none; width:40px; height:4px !important; background:rgba(255,255,255,0.35) !important; border-radius:4px !important; margin:0 auto 12px; } @media (max-width:640px){ #lc-root .lc-drag-handle{ display:block; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ #lc-root .lc-fab, #lc-root .lc-modal, #lc-root .lc-overlay, #lc-root .lc-panel, #lc-root .lc-result-value, #lc-root .lc-fab-badge{ animation:none !important; transition:none !important; } } /* Body scroll lock helper class (applied by JS) */ body.lc-no-scroll{ overflow:hidden !important; }