/* Tăng khoảng cách giữa phần nhập mã và vòng quay */
.main-wheel {
    margin-top: 50px; /* Tăng khoảng cách phía trên của vòng quay */
}

/* Tùy chỉnh nút "Quay thưởng" */
.spin-btn {
    border-radius: 8px; /* Bo góc để tạo thành hình chữ nhật bo góc */
    height: auto; /* Cho phép chiều cao tự động điều chỉnh theo nội dung */
    padding: 12px 25px; /* Thêm padding để nút to hơn và chữ không bị sát viền */
    font-size: 1rem; /* Đảm bảo kích thước chữ phù hợp */
    white-space: nowrap; /* Ngăn chữ xuống dòng */
    position: static; /* Bỏ định vị tuyệt đối để nút nằm trong luồng bình thường */
    transform: none; /* Bỏ transform */
    color: white; /* Màu chữ */
    background-color: var(--tg-primary-color); /* Màu nền */
    border: none; /* Bỏ viền */
}

/* Vô hiệu hóa hiệu ứng hover mặc định của theme */
.spin-btn::before {
    display: none !important;
}

.spin-btn:active {
    transform: scale(0.98); /* Hiệu ứng khi nhấn nút */
}

/* Điều chỉnh lại layout của phần input và nút */
.d-flex.justify-content-center.gap-2.mb-3 {
    align-items: stretch; /* Căn đều chiều cao các item */
}

.wheel-input-container > * {
    flex: 1;
}


/* Media query for mobile devices */
@media (max-width: 767px) {
    .modal-content {
        width: 95%;
        margin: 5% auto;
    }

    .d-flex.justify-content-center.gap-2.mb-3 {
        flex-direction: column; /* Xếp chồng các item trên màn hình nhỏ */
    }

    /* Trên mobile, mỗi item chiếm 100% chiều rộng để căn đều */
    .d-flex.justify-content-center.gap-2.mb-3 > * {
       flex: none; /* Reset flex property */
       width: 100%; /* Make all items full width */
    }
}


/* ===================================
    POP UP
====================================== */

/* Modal overlay chỉ dành riêng cho pop-up này */
.popup-modal {
    display: none; /* Mặc định ẩn */
    position: fixed;
    z-index: 1000; /* Đảm bảo modal này ở trên các thành phần khác */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Nền mờ phía sau */
}
  
  /* Modal content chỉ dành riêng cho pop-up */
.popup-modal-content {
background-color: white;
margin: 10% auto;
padding: 0; /* Bỏ padding */
border-radius: 8px;
max-width: 500px; /* Giới hạn chiều rộng */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden; /* Đảm bảo nội dung không tràn ra ngoài */
}

/* Hình ảnh trong pop-up */
.popup-image {
width: 100%; /* Hình ảnh chiếm toàn bộ chiều rộng modal */
height: auto;
display: block;
margin: 0;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}

/* Tiêu đề */
.popup-modal-content h2 {
font-size: 1.5em;
margin: 20px 0 10px 0;
text-align: center;
}

/* Input field */
.popup-container input[type="text"] {
width: 90%;
padding: 10px;
margin: 10px auto;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1em;
display: block;
box-sizing: border-box;
}

/* Submit button */
.popup-container #btnSubmit {
background-color: #333;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1em;
width: 90%;
display: block;
margin: 10px auto;
}

.popup-container #btnSubmit:hover {
background-color: #555;
}

/* Close button dành riêng cho pop-up */
.popup-close {
color: #aaa;
font-size: 28px;
font-weight: bold;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}

.popup-close:hover,
.popup-close:focus {
color: black;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
.popup-modal-content {
    width: 90%;
}

h2 {
    font-size: 1.3em;
}
}