<style><!--
.rastreamento-container {
  text-align: center;
  font-family: Arial, sans-serif;
  max-width: 500px;
  margin: 0 auto;
background: #fff;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  border-radius: 8px;
}

.rastreamento-title {
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.rastreamento-input {
  width: 80%;
  padding: 12px 20px;
  margin-bottom: 10px;
  box-sizing: border-box;
  border-radius: 4px;
  border: 1px solid #ddd;
  transition: border-color 0.3s;
}

.rastreamento-input:focus {
  border-color: #335eea;
  outline: none;
}

.rastreamento-button {
  color: #fff;
  background-color: #335eea;
  border-color: #335eea;
  padding: 12px 20px;
  margin: 10px 0;
  box-sizing: border-box;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

.rastreamento-button:hover {
  background-color: #2948cc;
}
--></style>
<div class="rastreamento-container">
<p class="rastreamento-title">Insira seu número de rastreamento abaixo:</p>
<input type="text" id="YQNum" maxlength="50" placeholder="Ex: LO235569205CN" class="rastreamento-input"> <input type="button" value="Buscar" class="rastreamento-button" onclick="doTrack()">
<div id="YQContainer"></div>
</div>
<script type="text/javascript" src="//www.17track.net/externalcall.js"></script> <script type="text/javascript">
function doTrack() {
  var num = document.getElementById("YQNum").value;
  if(num === ""){
    alert("Digite o seu código de rastreio.");
    return;
  }
  YQV5.trackSingle({
    YQ_ContainerId: "YQContainer",
    YQ_Height: 800,
    YQ_Fc: "0",
    YQ_Lang: "pt-br",
    YQ_Num: num
  });
}
</script>