.elementor-20240 .elementor-element.elementor-element-1135158 > .elementor-widget-container{margin:11px 11px 11px 11px;padding:-8px -8px -8px -8px;}.elementor-20240 .elementor-element.elementor-element-d9d6b4a > .elementor-widget-container{margin:4px 0px 0px 0px;}.elementor-20240 .elementor-element.elementor-element-c100a7d > .elementor-widget-container{margin:-8px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-20240 .elementor-element.elementor-element-5477782 > .elementor-widget-container{margin:-35px -145px 0px -145px;padding:0px 0px 0px 0px;}.elementor-20240 .elementor-element.elementor-element-8993ed9 > .elementor-container{max-width:927px;}.elementor-20240 .elementor-element.elementor-element-39271e9 > .elementor-widget-container{margin:-176px -63px -105px -63px;padding:181px 17px 92px 17px;}.elementor-20240 .elementor-element.elementor-element-39271e9{width:100%;max-width:100%;align-self:center;}.elementor-20240 .elementor-element.elementor-element-5635c59 > .elementor-widget-container{margin:-17px -120px 0px -120px;}.elementor-20240 .elementor-element.elementor-element-fa57c06 > .elementor-widget-container{margin:-19px -94px 1px -90px;padding:0px 0px 0px 0px;}.elementor-20240 .elementor-element.elementor-element-a1d9ab5 > .elementor-widget-container{margin:69px 0px 90px 0px;padding:0px 0px 0px 0px;}.elementor-20240 .elementor-element.elementor-element-987dd3d > .elementor-widget-container{margin:-82px 0px 0px 137px;}.elementor-20240 .elementor-element.elementor-element-183fbf4 .xts-iimage-content-wrapper{padding:0px 0px 0px 0px;}.elementor-20240 .elementor-element.elementor-element-183fbf4 .xts-iimage{border-radius:0px 0px 0px 0px;}.elementor-20240 .elementor-element.elementor-element-183fbf4 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}body:not(.rtl) .elementor-20240 .elementor-element.elementor-element-c83f6ab .elementor-drop-cap{margin-right:10px;}body.rtl .elementor-20240 .elementor-element.elementor-element-c83f6ab .elementor-drop-cap{margin-left:10px;}/* Start custom CSS *//* Ẩn sidebar chỉ trong trang "Tựu Trường Giảm Sốc" */
.page-id-20240 .sidebar,
.page-id-20240 .widget-area,
.page-id-20240 aside {
  display: none !important;
}

/* Cho nội dung chiếm full chiều ngang */
.page-id-20240 .content-area {
  width: 100% !important;
}
 
<div style="display: flex; flex-direction: column; align-items: center; justify-content: center;">
  <style>
    .wheel-container {
      position: relative;
      width: 400px;
      height: 400px;
      margin: 0 auto;
    }

    #wheelCanvas {
      width: 100%;
      height: auto;
      border-radius: 50%;
    }

    .pointer {
      position: absolute;
      top: 50%;
      left: -20px;
      transform: translateY(-50%) rotate(90deg);
      width: 0;
      height: 0;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      border-bottom: 40px solid red;
      z-index: 10;
    }

    #spinBtn {
      margin-top: 30px;
      padding: 12px 30px;
      font-size: 18px;
      background-color: #28a745;
      color: white;
      border: none;
      border-radius: 8px;
      cursor: pointer;
    }

    #spinBtn:hover {
      background-color: #1e7e34;
    }
  </style>

  <div class="wheel-container">
    <canvas id="wheelCanvas" width="400" height="400"></canvas>
    <div class="pointer"></div>
  </div>
  <button id="spinBtn">🎯 Quay</button>

  <script>
    document.addEventListener("DOMContentLoaded", function () {
      const canvas = document.getElementById("wheelCanvas");
      const ctx = canvas.getContext("2d");

      const prizes = ["Giải 1", "Giải 2", "Giải 3", "Giải 4", "Giải 5", "Giải 6"];
      const colors = ["#FF5733", "#FFC300", "#DAF7A6", "#33FFBD", "#3380FF", "#D633FF"];
      const segAngle = 360 / prizes.length;

      function drawWheel() {
        for (let i = 0; i < prizes.length; i++) {
          const start = (i * segAngle) * Math.PI / 180;
          const end = ((i + 1) * segAngle) * Math.PI / 180;

          ctx.beginPath();
          ctx.moveTo(200, 200);
          ctx.arc(200, 200, 190, start, end);
          ctx.fillStyle = colors[i];
          ctx.fill();
          ctx.strokeStyle = "#ffffff";
          ctx.lineWidth = 2;
          ctx.stroke();
          ctx.closePath();

          ctx.save();
          ctx.translate(200, 200);
          ctx.rotate(start + (end - start) / 2);
          ctx.textAlign = "right";
          ctx.fillStyle = "#000";
          ctx.font = "bold 16px sans-serif";
          ctx.fillText(prizes[i], 160, 10);
          ctx.restore();
        }
      }

      drawWheel();

      const spinBtn = document.getElementById("spinBtn");
      let spinning = false;
      let angle = 0;

      spinBtn.addEventListener("click", () => {
        if (spinning) return;
        spinning = true;
        spinBtn.disabled = true;

        const extra = Math.floor(Math.random() * 360);
        const total = 360 * 5 + extra;
        angle += total;

        canvas.style.transition = "transform 5s ease-out";
        canvas.style.transform = `rotate(${angle}deg)`;

        setTimeout(() => {
          const actual = angle % 360;
          const corrected = (360 - (actual + 180) % 360) % 360;
          const index = Math.floor(corrected / segAngle);/* End custom CSS */