.elementor-1810 .elementor-element.elementor-element-3521263{--display:flex;}.elementor-1810 .elementor-element.elementor-element-4278f48{text-align:center;}.elementor-1810 .elementor-element.elementor-element-4278f48 .elementor-heading-title{font-size:24px;mix-blend-mode:multiply;}.elementor-1810 .elementor-element.elementor-element-21e33ee{--display:flex;}.elementor-1810 .elementor-element.elementor-element-21e33ee.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-1810 .elementor-element.elementor-element-2615404{--display:flex;}.elementor-1810 .elementor-element.elementor-element-89eb2ca > .elementor-widget-container{margin:30px 30px 30px 30px;}.elementor-1810 .elementor-element.elementor-element-89eb2ca{font-size:24px;font-weight:400;line-height:46px;text-shadow:0px 0px 0px rgba(0,0,0,0.3);}.elementor-1810 .elementor-element.elementor-element-89eb2ca p{margin-block-end:0px;}.elementor-1810 .elementor-element.elementor-element-f7c84aa{--display:flex;}.elementor-1810 .elementor-element.elementor-element-8acfe1e{--display:flex;--margin-top:20px;--margin-bottom:20px;--margin-left:20px;--margin-right:20px;}.elementor-1810 .elementor-element.elementor-element-d91d2bc > .elementor-widget-container{margin:50px 50px 50px 50px;}.elementor-1810 .elementor-element.elementor-element-d91d2bc.elementor-element{--align-self:center;}.elementor-1810 .elementor-element.elementor-element-ca06e86{--display:flex;}.elementor-1810 .elementor-element.elementor-element-a137930{font-size:24px;}.elementor-1810 .elementor-element.elementor-element-1e2dc06 > .elementor-widget-container{margin:50px 50px 50px 50px;}.elementor-1810 .elementor-element.elementor-element-1e2dc06.elementor-element{--align-self:center;}.elementor-1810 .elementor-element.elementor-element-75f4c5a{--display:flex;}.elementor-1810 .elementor-element.elementor-element-8dc1071{--display:flex;}.elementor-1810 .elementor-element.elementor-element-f67387a > .elementor-widget-container{margin:50px 50px 50px 50px;}.elementor-1810 .elementor-element.elementor-element-f67387a.elementor-element{--align-self:center;}.elementor-1810 .elementor-element.elementor-element-6d7976a{--display:flex;}.elementor-1810 .elementor-element.elementor-element-f5a16b1{font-family:"Arial", Sans-serif;font-weight:700;}.elementor-1810 .elementor-element.elementor-element-3e47c8d{--display:flex;--margin-top:20px;--margin-bottom:20px;--margin-left:20px;--margin-right:20px;}.elementor-1810 .elementor-element.elementor-element-40838a7{font-size:22px;}.elementor-1810 .elementor-element.elementor-element-40838a7 p{margin-block-end:0px;}.elementor-1810 .elementor-element.elementor-element-66d09cc{--display:flex;}.elementor-1810 .elementor-element.elementor-element-b2829d2{font-size:22px;}.elementor-1810 .elementor-element.elementor-element-3443327 > .elementor-widget-container{margin:20px 20px 20px 20px;}.elementor-1810 .elementor-element.elementor-element-4f8ec48c{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;box-shadow:2px 2px 10px 2px rgba(0,0,0,0.5);--margin-top:3%;--margin-bottom:3%;--margin-left:3%;--margin-right:3%;--padding-top:0%;--padding-bottom:0%;--padding-left:12%;--padding-right:12%;}.elementor-1810 .elementor-element.elementor-element-4f8ec48c:not(.elementor-motion-effects-element-type-background), .elementor-1810 .elementor-element.elementor-element-4f8ec48c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#DFF6FF;}.elementor-1810 .elementor-element.elementor-element-3dcb3e91{text-align:center;}.elementor-1810 .elementor-element.elementor-element-3dcb3e91 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:65px;font-weight:600;text-transform:none;font-style:normal;text-decoration:none;line-height:1.2em;letter-spacing:0px;color:#1C244B;}.elementor-1810 .elementor-element.elementor-element-2341d92b{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:stretch;--gap:15% 15%;--row-gap:15%;--column-gap:15%;--margin-top:4%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1810 .elementor-element.elementor-element-261ce0bf{width:var( --container-widget-width, 50% );max-width:50%;--container-widget-width:50%;--container-widget-flex-grow:0;}.elementor-1810 .elementor-element.elementor-element-261ce0bf > .elementor-widget-container{padding:30px 0px 0px 0px;border-style:solid;border-width:0.5px 0px 0px 0px;border-color:#C8D5DC;}.elementor-1810 .elementor-element.elementor-element-261ce0bf .elementor-tab-title{border-width:0.5px;border-color:#C8D5DC;padding:0px 0px 30px 0px;}.elementor-1810 .elementor-element.elementor-element-261ce0bf .elementor-tab-content{border-width:0.5px;border-block-end-color:#C8D5DC;color:#324A6D;font-family:"Poppins", Sans-serif;font-size:16px;font-weight:300;text-transform:none;font-style:normal;text-decoration:none;line-height:1.5em;letter-spacing:0px;padding:0px 50px 30px 0px;}.elementor-1810 .elementor-element.elementor-element-261ce0bf .elementor-toggle-item:not(:last-child){margin-block-end:30px;}.elementor-1810 .elementor-element.elementor-element-261ce0bf .elementor-toggle-title, .elementor-1810 .elementor-element.elementor-element-261ce0bf .elementor-toggle-icon{color:#1C244B;}.elementor-1810 .elementor-element.elementor-element-261ce0bf .elementor-toggle-icon svg{fill:#1C244B;}.elementor-1810 .elementor-element.elementor-element-261ce0bf .elementor-tab-title.elementor-active a, .elementor-1810 .elementor-element.elementor-element-261ce0bf .elementor-tab-title.elementor-active .elementor-toggle-icon{color:#467FF7;}.elementor-1810 .elementor-element.elementor-element-261ce0bf .elementor-toggle-title{font-family:"Poppins", Sans-serif;font-size:22px;font-weight:400;text-transform:capitalize;font-style:normal;text-decoration:none;line-height:1em;letter-spacing:0px;text-shadow:0px 0px 63px rgba(0,0,0,0.3);}.elementor-1810 .elementor-element.elementor-element-261ce0bf .elementor-tab-title .elementor-toggle-icon i:before{color:#1C244B;}.elementor-1810 .elementor-element.elementor-element-261ce0bf .elementor-tab-title .elementor-toggle-icon svg{fill:#1C244B;}.elementor-1810 .elementor-element.elementor-element-261ce0bf .elementor-tab-title.elementor-active .elementor-toggle-icon i:before{color:#1C244B;}.elementor-1810 .elementor-element.elementor-element-261ce0bf .elementor-tab-title.elementor-active .elementor-toggle-icon svg{fill:#1C244B;}.elementor-1810 .elementor-element.elementor-element-261ce0bf .elementor-toggle-icon{margin-inline-end:0px;}.elementor-1810 .elementor-element.elementor-element-77ff7181{width:var( --container-widget-width, 50% );max-width:50%;--container-widget-width:50%;--container-widget-flex-grow:0;}.elementor-1810 .elementor-element.elementor-element-77ff7181 > .elementor-widget-container{padding:30px 0px 0px 0px;border-style:solid;border-width:0.5px 0px 0px 0px;border-color:#C8D5DC;}.elementor-1810 .elementor-element.elementor-element-77ff7181 .elementor-tab-title{border-width:0.5px;border-color:#C8D5DC;padding:0px 0px 30px 0px;}.elementor-1810 .elementor-element.elementor-element-77ff7181 .elementor-tab-content{border-width:0.5px;border-block-end-color:#C8D5DC;color:#324A6D;font-family:"Poppins", Sans-serif;font-size:16px;font-weight:300;text-transform:none;font-style:normal;text-decoration:none;line-height:1.5em;letter-spacing:0px;padding:0px 50px 30px 0px;}.elementor-1810 .elementor-element.elementor-element-77ff7181 .elementor-toggle-item:not(:last-child){margin-block-end:30px;}.elementor-1810 .elementor-element.elementor-element-77ff7181 .elementor-toggle-title, .elementor-1810 .elementor-element.elementor-element-77ff7181 .elementor-toggle-icon{color:#1C244B;}.elementor-1810 .elementor-element.elementor-element-77ff7181 .elementor-toggle-icon svg{fill:#1C244B;}.elementor-1810 .elementor-element.elementor-element-77ff7181 .elementor-tab-title.elementor-active a, .elementor-1810 .elementor-element.elementor-element-77ff7181 .elementor-tab-title.elementor-active .elementor-toggle-icon{color:#467FF7;}.elementor-1810 .elementor-element.elementor-element-77ff7181 .elementor-toggle-title{font-family:"Poppins", Sans-serif;font-size:22px;font-weight:400;text-transform:capitalize;font-style:normal;text-decoration:none;line-height:1em;letter-spacing:0px;}.elementor-1810 .elementor-element.elementor-element-77ff7181 .elementor-tab-title .elementor-toggle-icon i:before{color:#1C244B;}.elementor-1810 .elementor-element.elementor-element-77ff7181 .elementor-tab-title .elementor-toggle-icon svg{fill:#1C244B;}.elementor-1810 .elementor-element.elementor-element-77ff7181 .elementor-tab-title.elementor-active .elementor-toggle-icon i:before{color:#1C244B;}.elementor-1810 .elementor-element.elementor-element-77ff7181 .elementor-tab-title.elementor-active .elementor-toggle-icon svg{fill:#1C244B;}.elementor-1810 .elementor-element.elementor-element-77ff7181 .elementor-toggle-icon{margin-inline-end:0px;}.elementor-1810 .elementor-element.elementor-element-33decf8{--display:flex;}@media(max-width:1024px){.elementor-1810 .elementor-element.elementor-element-4f8ec48c{--margin-top:25%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;--padding-top:0%;--padding-bottom:0%;--padding-left:8%;--padding-right:8%;}.elementor-1810 .elementor-element.elementor-element-3dcb3e91 .elementor-heading-title{font-size:45px;}.elementor-1810 .elementor-element.elementor-element-2341d92b{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:30px 30px;--row-gap:30px;--column-gap:30px;}.elementor-1810 .elementor-element.elementor-element-261ce0bf{width:100%;max-width:100%;}.elementor-1810 .elementor-element.elementor-element-261ce0bf .elementor-toggle-title{font-size:14px;}.elementor-1810 .elementor-element.elementor-element-261ce0bf .elementor-tab-content{font-size:14px;}.elementor-1810 .elementor-element.elementor-element-77ff7181{width:100%;max-width:100%;}.elementor-1810 .elementor-element.elementor-element-77ff7181 > .elementor-widget-container{padding:0px 0px 0px 0px;border-width:0px 0px 0px 0px;}.elementor-1810 .elementor-element.elementor-element-77ff7181 .elementor-toggle-title{font-size:14px;}.elementor-1810 .elementor-element.elementor-element-77ff7181 .elementor-tab-content{font-size:14px;}}@media(min-width:768px){.elementor-1810 .elementor-element.elementor-element-21e33ee{--width:98.393%;}.elementor-1810 .elementor-element.elementor-element-4f8ec48c{--content-width:1600px;}}@media(max-width:767px){.elementor-1810 .elementor-element.elementor-element-6d7976a{--content-width:501px;}.elementor-1810 .elementor-element.elementor-element-f5a16b1{font-size:2.4vw;}.elementor-1810 .elementor-element.elementor-element-f5a16b1 p{margin-block-end:12px;}.elementor-1810 .elementor-element.elementor-element-4f8ec48c{--margin-top:35%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;--padding-top:0%;--padding-bottom:0%;--padding-left:5%;--padding-right:5%;}.elementor-1810 .elementor-element.elementor-element-3dcb3e91 .elementor-heading-title{font-size:28px;line-height:1.1em;}.elementor-1810 .elementor-element.elementor-element-261ce0bf .elementor-tab-content{padding:0px 0px 30px 0px;}.elementor-1810 .elementor-element.elementor-element-77ff7181 .elementor-tab-content{padding:0px 0px 30px 0px;}}/* Start custom CSS for container, class: .elementor-element-21e33ee */<!-- ==== CRYPTO CONVERTER — EarnovaPro theme (English UI) ==== -->
<section class="cc-wrap enp">
  <h2 class="cc-title">Crypto Converter & Calculator</h2>
  <p class="cc-sub">Example: 1 <span id="cc-coin-now">BTC</span> = <span id="cc-example">—</span></p>

  <div class="cc-row">
    <div class="cc-input">
      <input id="cc-amount" type="number" min="0" step="any" value="1" placeholder="Enter amount" aria-label="Amount">
    </div>

    <div class="cc-select">
      <button class="cc-coin-btn" id="cc-coin-btn">
        <img id="cc-coin-icon" alt="" src="" />
        <span id="cc-coin-label">BTC</span>
        <svg viewBox="0 0 24 24" class="cc-caret"><path d="M7 10l5 5 5-5z"/></svg>
      </button>
      <div class="cc-dropdown" id="cc-coin-dd"></div>
    </div>

    <button class="cc-swap" id="cc-swap" aria-label="Swap">⇄</button>

    <div class="cc-input">
      <input id="cc-result" type="text" value="" readonly placeholder="Result" aria-label="Result">
    </div>

    <div class="cc-select">
      <button class="cc-fiat-btn" id="cc-fiat-btn">
        <span id="cc-fiat-symbol">$</span>
        <span id="cc-fiat-label">USD</span>
        <svg viewBox="0 0 24 24" class="cc-caret"><path d="M7 10l5 5 5-5z"/></svg>
      </button>
      <div class="cc-dropdown" id="cc-fiat-dd"></div>
    </div>
  </div>

  <button class="cc-cta" id="cc-cta">Convert Now</button>
</section>

<style>
/* ===== EarnovaPro palette ===== */
.enp{
  --enp-bg:#f5f6fa;
  --enp-bd:#e6e8ef;
  --enp-text:#0f172a;
  --enp-muted:#64748b;
  --enp-blue:#1d4ed8;
  --enp-blue-600:#1e40af;
  --enp-accent:#ffd54a;
  --enp-focus: rgba(29,78,216,.18);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--enp-text);
}

.cc-wrap{max-width:980px;margin:40px auto;padding:16px}
.cc-title{font-size:40px;line-height:1.15;margin:0 0 6px;font-weight:800}
.cc-sub{color:var(--enp-muted);margin:0 0 18px}
.cc-row{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:12px;align-items:center}

.cc-input input{
  width:100%;padding:20px 22px;border:1px solid var(--enp-bd);
  border-radius:999px;font-size:22px;outline:none;background:#fff
}
.cc-input input:focus{border-color:var(--enp-blue);box-shadow:0 0 0 4px var(--enp-focus)}

.cc-select{position:relative}
.cc-coin-btn,.cc-fiat-btn{
  display:flex;align-items:center;gap:10px;padding:14px 18px;
  border:1px solid var(--enp-bd);border-radius:999px;background:var(--enp-bg);
  font-size:18px;cursor:pointer;color:var(--enp-text)
}
.cc-coin-btn img{width:22px;height:22px}
.cc-caret{width:18px;height:18px;fill:var(--enp-muted)}

.cc-dropdown{
  position:absolute;top:110%;left:0;right:0;background:#fff;border:1px solid var(--enp-bd);
  border-radius:14px;box-shadow:0 10px 30px rgba(15,23,42,.08);display:none;max-height:320px;overflow:auto;z-index:5
}
.cc-dropdown button{
  width:100%;text-align:left;padding:12px 14px;border:0;background:#fff;cursor:pointer;
  display:flex;align-items:center;gap:10px
}
.cc-dropdown button:hover{background:#f1f5f9}
.cc-dropdown img{width:18px;height:18px}

.cc-swap{
  width:44px;height:44px;border-radius:999px;border:1px solid var(--enp-bd);
  background:#fff;cursor:pointer;font-size:18px
}

.cc-cta{
  margin-top:16px;padding:14px 22px;border-radius:999px;border:0;
  background:var(--enp-blue);color:#fff;font-weight:700;font-size:16px;cursor:pointer;
  box-shadow:0 6px 18px rgba(29,78,216,.18)
}
.cc-cta:hover{background:var(--enp-blue-600)}
.cc-cta::after{content:"";display:inline-block;width:8px;height:8px;border-radius:999px;background:var(--enp-accent);margin-left:10px}

@media (max-width:900px){
  .cc-row{grid-template-columns:1fr;gap:10px}
  .cc-title{font-size:32px}
}
</style>

<script>
(()=> {
  const COINS = [
    {id:"bitcoin",    sym:"BTC", icon:"https://assets.coingecko.com/coins/images/1/small/bitcoin.png"},
    {id:"ethereum",   sym:"ETH", icon:"https://assets.coingecko.com/coins/images/279/small/ethereum.png"},
    {id:"tether",     sym:"USDT",icon:"https://assets.coingecko.com/coins/images/325/small/Tether-logo.png"},
    {id:"binancecoin",sym:"BNB", icon:"https://assets.coingecko.com/coins/images/825/small/binance-coin-logo.png"},
    {id:"solana",     sym:"SOL", icon:"https://assets.coingecko.com/coins/images/4128/small/solana.png"}
  ];
  const FIATS = [
    {code:"USD", symbol:"$"},
    {code:"EUR", symbol:"€"},
    {code:"VND", symbol:"₫"},
    {code:"JPY", symbol:"¥"},
    {code:"AUD", symbol:"A$"}
  ];

  const amountEl = document.getElementById('cc-amount');
  const resultEl = document.getElementById('cc-result');
  const swapBtn  = document.getElementById('cc-swap');
  const cBtn     = document.getElementById('cc-coin-btn');
  const cDd      = document.getElementById('cc-coin-dd');
  const cIcon    = document.getElementById('cc-coin-icon');
  const cLabel   = document.getElementById('cc-coin-label');
  const fBtn     = document.getElementById('cc-fiat-btn');
  const fDd      = document.getElementById('cc-fiat-dd');
  const fSymbol  = document.getElementById('cc-fiat-symbol');
  const fLabel   = document.getElementById('cc-fiat-label');
  const ctaBtn   = document.getElementById('cc-cta');
  const example  = document.getElementById('cc-example');
  const coinNow  = document.getElementById('cc-coin-now');

  let coin = COINS[0], fiat = FIATS[0], reverse=false, prices={};

  const fmt = (n, code)=>{
    try{return new Intl.NumberFormat(undefined,{style:'currency',currency:code}).format(n)}
    catch{return new Intl.NumberFormat().format(n)+' '+code}
  };

  const fetchPrices = async ()=>{
    const ids = COINS.map(c=>c.id).join(',');
    const vs  = FIATS.map(f=>f.code.toLowerCase()).join(',');
    const url = `https://api.coingecko.com/api/v3/simple/price?ids=${ids}&vs_currencies=${vs}`;
    const res = await fetch(url,{headers:{'accept':'application/json'}});
    prices = await res.json();
  };

  const updateExample = ()=>{
    const p = prices[coin.id]?.[fiat.code.toLowerCase()];
    if(p){ example.textContent = fmt(p, fiat.code); }
    coinNow.textContent = coin.sym;
  };

  const calc = ()=>{
    const amt = parseFloat(amountEl.value||'0');
    const p = prices[coin.id]?.[fiat.code.toLowerCase()];
    if(!p || !amt){ resultEl.value=''; return; }
    resultEl.value = reverse ? (amt / p).toFixed(8) + ' ' + coin.sym : fmt(amt * p, fiat.code);
  };

  const renderDropdowns = ()=>{
    cDd.innerHTML = COINS.map(c=>`
      <button data-id="${c.id}">
        <img src="${c.icon}" alt="">
        <strong>${c.sym}</strong> <span style="color:#64748b">${c.id}</span>
      </button>`).join('');
    fDd.innerHTML = FIATS.map(f=>`
      <button data-code="${f.code}">
        <strong>${f.code}</strong> <span style="color:#64748b">${f.symbol}</span>
      </button>`).join('');
  };

  const setCoin = (c)=>{ coin=c; cIcon.src=c.icon; cLabel.textContent=c.sym; updateExample(); calc(); };
  const setFiat = (f)=>{ fiat=f; fSymbol.textContent=f.symbol; fLabel.textContent=f.code; updateExample(); calc(); };

  const toggle = el => el.style.display = (el.style.display==='block'?'none':'block');
  const closeAll = ()=>{ cDd.style.display='none'; fDd.style.display='none'; };

  cBtn.addEventListener('click', e=>{ e.stopPropagation(); toggle(cDd); fDd.style.display='none'; });
  fBtn.addEventListener('click', e=>{ e.stopPropagation(); toggle(fDd); cDd.style.display='none'; });
  document.addEventListener('click', closeAll);

  cDd.addEventListener('click', e=>{
    const id = e.target.closest('button')?.dataset?.id;
    if(!id) return;
    const c = COINS.find(x=>x.id===id); if(c) setCoin(c); closeAll();
  });
  fDd.addEventListener('click', e=>{
    const code = e.target.closest('button')?.dataset?.code;
    if(!code) return;
    const f = FIATS.find(x=>x.code===code); if(f) setFiat(f); closeAll();
  });

  swapBtn.addEventListener('click', ()=>{
    reverse=!reverse;
    resultEl.readOnly=!reverse; amountEl.readOnly=reverse;
    if(reverse){ resultEl.value=''; resultEl.placeholder='Enter fiat amount'; amountEl.placeholder=''; }
    else{ amountEl.placeholder='Enter coin amount'; resultEl.placeholder='Result'; }
    calc();
  });

  amountEl.addEventListener('input', calc);
  ctaBtn.addEventListener('click', calc);

  renderDropdowns(); setCoin(coin); setFiat(fiat);
  fetchPrices().then(()=>{ updateExample(); calc(); })
               .catch(()=>{ example.textContent='Failed to fetch prices'; });
})();
</script>/* End custom CSS */