/* ==========================================================================
   CSS VÒNG QUAY MAY MẮN NGUYỄN KIM - PHIÊN BẢN CHUẨN THIẾT KẾ GỐC (NỀN TRẮNG)
   ========================================================================== */

:root {
  --primary-red: #d30000;
  --dark-red: #a00000;
  --bright-red: #ff1a1a;
  --gold-accent: #ffd700;
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-family);
  background-color: #f0f2f5;
  color: #333333;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-x: hidden;
}

/* Khung hiển thị chuẩn mobile-first (max-width 480px, nền trắng hoàn toàn) */
.mobile-wrapper {
  width: 100%;
  max-width: 480px;
  background-color: #ffffff;
  min-height: 100vh;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
}

/* ==========================================================================
   THÔNG BÁO LINK KHÔNG HỢP LỆ
   ========================================================================== */
.warning-banner {
  display: none;
  background: linear-gradient(90deg, #b30000, #e60000);
  color: #ffffff;
  padding: 10px 14px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  border-bottom: 2px solid var(--gold-accent);
  z-index: 100;
}

/* ==========================================================================
   1. PHẦN A: THANH MENU ĐỎ 4 NÚT (Chuẩn 100% mẫu thiết kế)
   ========================================================================== */
.menu-bar {
  background: linear-gradient(180deg, #e60000 0%, #cc0000 50%, #aa0000 100%);
  padding: 6px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
  position: sticky;
  top: 0;
  z-index: 50;
}

.menu-item {
  flex: 1;
  text-align: center;
  padding: 6px 2px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2px;
  text-decoration: none;
  border-radius: 6px;
  color: #ffffff;
  background: linear-gradient(180deg, #ff1a1a 0%, #d60000 100%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 
    inset 0 1px 1px rgba(255, 255, 255, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.25);
  transition: all 0.15s ease;
  white-space: nowrap;
  user-select: none;
}

.menu-item:active {
  transform: translateY(1px);
}

/* Tab SỰ KIỆN đang kích hoạt (Nền trắng, chữ đỏ đậm như trong ảnh thiết kế mẫu) */
.menu-item.active {
  background: linear-gradient(180deg, #ffffff 0%, #f4f4f4 100%);
  color: #cc0000;
  border: 1px solid #ffffff;
  box-shadow: 
    inset 0 1px 2px rgba(255, 255, 255, 0.9),
    0 2px 5px rgba(0, 0, 0, 0.3);
  font-weight: 900;
}

/* ==========================================================================
   2 & 3. PHẦN B: BANNER NGUYỄN KIM & TIÊU ĐỀ VÒNG QUAY MAY MẮN
   ========================================================================== */
.banner-section {
  width: 100%;
  line-height: 0;
  background-color: transparent;
}

.banner-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* ==========================================================================
   4. PHẦN C: VÒNG QUAY MAY MẮN (PHONG CÁCH CON CƯNG: WHEEL TO, KIM CỐ ĐỊNH)
   ========================================================================== */
.wheel-section {
  width: 100%;
  background: transparent;
  padding: 16px 8px 10px 8px;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: visible;
}

/* Sân khấu vòng quay (Wheel Stage) - Khung vuông 1:1, đường kính chiếm 88-92% chiều rộng nội dung */
.wheel-stage {
  /* Chiều rộng kim chỉ (trước khi xoay) - dùng để tính vị trí đầu kim chạm viền */
  --pointer-w: clamp(32px, 9vw, 40px);
  position: relative;
  width: min(74vw, 340px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  overflow: visible;
}

/* Đĩa vòng quay chính - 100% diện tích stage, bảo toàn tỷ lệ 1:1, không có box-shadow/border-radius gây quầng trắng */
.wheel-disc-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Quầng sáng mềm quanh bánh xe giống mẫu */
  filter: drop-shadow(0 0 14px rgba(255, 150, 170, 0.45));
}

.wheel-disk {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  display: block;
  object-fit: contain;
  transform-origin: center center;
  will-change: transform;
  transform: rotate(0deg);
}

/* KIM CHỈ THƯỞNG: ĐỨNG YÊN TUYỆT ĐỐI, CỐ ĐỊNH Ở MÉP PHẢI 3H, ĐẦU NHỌN HƯỚNG VÀO TÂM */
.wheel-pointer {
  position: absolute;
  top: 50%;
  /* Sau khi xoay 90deg, đầu kim nằm cách mép phải phần tử 1.32 × width (0.5 + 0.82 do tỷ lệ 592/971)
     => đặt right sao cho đầu kim lấn vào viền bánh xe đúng 10px */
  right: calc(10px - 1.32 * var(--pointer-w));
  width: var(--pointer-w);
  aspect-ratio: 592 / 971;
  height: auto;
  object-fit: contain;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: center center;
  z-index: 25;
  pointer-events: none;
  user-select: none;
}

/* NÚT QUAY NGAY Ở TÂM TRỤC (SỬ DỤNG 100% ẢNH NÚT GỐC NỔI KHỐI 3D VÀNG ĐỎ, CHÍNH XÁC TẠI TÂM, KHÔNG XOAY) */
.spin-center-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24.5%;
  height: 24.5%;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 20;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  transition: transform 0.15s ease;
}

.spin-center-btn:hover:not(:disabled) {
  transform: translate(-50%, -50%) scale(1.03);
}

.spin-center-btn:active:not(:disabled) {
  transform: translate(-50%, -50%) scale(0.97);
}

.spin-center-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* Khi đã quay: giữ nguyên ảnh nút gốc, chỉ vô hiệu hóa click */
.spin-center-btn.already-spun,
.spin-center-btn.disabled,
.spin-center-btn:disabled {
  cursor: default;
  opacity: 1;
}

.spin-center-btn.spinning {
  cursor: not-allowed;
}

/* Nút BẬT/TẮT ÂM THANH */
.sound-toggle-btn {
  position: absolute;
  top: 6px;
  right: 12px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #e2e2e2;
  color: #b30006;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 30;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  transition: all 0.2s ease;
}

.sound-toggle-btn.muted {
  color: #999999;
  border-color: #cccccc;
}

.sound-icon-unmuted { display: block; }
.sound-icon-muted { display: none; }
.sound-toggle-btn.muted .sound-icon-unmuted { display: none; }
.sound-toggle-btn.muted .sound-icon-muted { display: block; }

/* Nút XEM LẠI KẾT QUẢ sau khi đã quay - Gọn gàng, tinh tế */
.review-btn-container {
  margin-top: 8px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.review-result-btn {
  display: none;
  background: linear-gradient(180deg, #ffd700 0%, #e6a817 100%);
  color: #8a0004;
  border: 1.5px solid #fff3a8;
  padding: 8px 22px;
  border-radius: 22px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
  transition: all 0.15s ease;
  align-items: center;
  gap: 6px;
}

.review-result-btn:active {
  transform: scale(0.97);
}

/* ==========================================================================
   5. PHẦN D: HÌNH CẢM ƠN KHÁCH HÀNG (Ảnh gốc tách nền sắc nét)
   ========================================================================== */
.thankyou-section {
  width: 100%;
  background-color: transparent;
  line-height: 0;
  padding: 6px 8px 0 8px;
  margin: 0;
  display: flex;
  justify-content: center;
}

.thankyou-img {
  width: 100%;
  max-width: 440px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ==========================================================================
   6, 7 & 8. PHẦN E: FOOTER THÔNG TIN & HỖ TRỢ NGUYỄN KIM
   ========================================================================== */
.footer-section {
  width: 100%;
  background-color: #ffffff;
  line-height: 0;
}

.footer-img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================================
   MODAL POPUP KẾT QUẢ TRÚNG THƯỞNG (DUY NHẤT ẢNH GỐC, KHÔNG CÓ THẺ HTML)
   ========================================================================== */
.result-dialog {
  margin: auto;
  padding: 0;
  border: none;
  background: transparent;
  max-width: 92vw;
  max-height: 90vh;
  overflow: visible;
  outline: none;
}

.result-dialog::backdrop {
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.result-dialog-content {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 0;
  transform: scale(0.9);
  opacity: 0;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.25s ease;
}

.result-dialog.modal-visible .result-dialog-content {
  transform: scale(1);
  opacity: 1;
}

/* Nút đóng (X) nhỏ ở góc trên bên phải, đặt ngoài vùng nội dung quan trọng */
.close-modal-btn {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e60000;
  color: #ffffff;
  border: 2px solid #ffffff;
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  z-index: 100;
  transition: transform 0.15s ease;
}

.close-modal-btn:hover {
  transform: scale(1.1);
}

/* Ảnh kết quả tự co giãn phù hợp điện thoại (tỷ lệ gốc, object-fit: contain) */
.result-popup-img {
  max-width: min(88vw, 420px);
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  display: block;
}

/* ==========================================================================
   CANVAS PHÁO HOA CHÚC MỪNG
   ========================================================================== */
#confettiCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
}

/* ==========================================================================
   RESPONSIVE CHO MỌI KÍCH THƯỚC ĐIỆN THOẠI
   ========================================================================== */
@media (max-width: 360px) {
  .menu-item {
    font-size: 10.5px;
    padding: 5px 1px;
  }
  .spin-center-btn {
    width: 62px;
    height: 62px;
  }
  .wheel-stage {
    --pointer-w: 30px;
  }
}