@media (min-width: 768px) {
    html {
        font-size: 80%;
    }

    .model-box img {
        width: 16rem;
    }

    .wrapper {
        padding: 1.5rem;
    }

    .form {
        width: calc(100% - 3rem);
    }

    .content {
        padding: 0 .75rem;
    }
}

@media (min-width: 992px) {
    html {
        font-size: 90%;
    }

    .model-box img {
        width: 20rem;
    }

    .content {
        padding: 1rem;
    }
}

@media (min-width: 1024px) {
    body {
        background-size: 100% auto;
    }
}

@media (min-width: 1025px) {
    #wheel-img {
        max-width: 33vw;
    }

    .gifts-card {
        padding: 2.25rem 2rem 2rem;
    }

    .gifts-title {
        font-size: 1.5rem;
    }

    .gifts-counter, .exchange-label, .btn-exchange, .quality-name {
        font-size: .8rem;
    }

    .btn-exchange {
        padding: 0.65rem 1rem;
    }

    .quality-item {
        min-height: 5rem;
        gap: 0.25rem;
        padding: 0.6rem 0.4rem;
    }

    .quality-count {
        font-size: 0.75rem;
    }

    .gifts-spinner {
        width: 2rem;
        height: 2rem;
    }

    .gifts-loading {
        padding: 2.5rem 0;
    }
}

@media (min-width: 1280px) {
    /* html {
        font-size: 100%;
    } */

    body {
        background-image: url('../images/background-3.webp');
        background-size: cover;
    }

    .wrapper {
        font-size: .8rem;
        padding: 1rem;
    }

    .bg-overlay {
        background-image: none;
    }

    .model-box, .ruby-img, .form {
        display: none;
    }

    .banner-desktop {
        display: flex !important;
        align-items: center;
        width: 100%;
        max-width: 100%;
        padding: 1.5rem 4rem 0;
        gap: 2rem;
    }

    .banner-desktop .logo-link {
        width: 12%;
        align-self: flex-start; /* Nằm sát góc trên */
    }

    .banner-desktop .logo {
        width: 100%;
        height: auto;
    }

    .banner-desktop .banner-center {
        width: 25%;
        height: auto;
    }

    .banner-desktop .banner-title {
        width: 30%;
        height: auto;
    }

    .banner-mobile {
        display: none;
    }

    .bg-overlay {
        padding: 0;
    }

    .content {
        margin-top: 1rem;
        display: grid;
        grid-template-columns: 2.8fr 4fr 3.2fr;
        align-items: center;
        width: 100%;
        gap: 4rem;
        padding: 0 4rem;
    }

    .form-desktop {
        display: block;
    }

    .banner {
        padding: 0;
        width: 100%;
    }

    .form-desktop {
        background-image: url('../images/background-form.webp');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        padding: 1.5rem 1rem;
        border-radius: 1.5rem;
        border: 1px solid rgba(255, 255, 255, 0.35); /* Thêm viền trắng mảnh */
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 15px rgba(255, 255, 255, 0.1); /* Tăng độ sâu và ánh hào quang */
    }

    .form-desktop h3 {
        font-family: 'Be Vietnam Pro', sans-serif;
        font-size: 1.5rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 1rem;
        text-align: center;
        color: #fff;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    }

    .input-group input {
        padding: .5rem .75rem;
        font-size: 1rem;
    }

    .checkbox-group label {
        font-size: 1rem;
    }
    
    .form-note {
        font-size: .8rem;
        margin-bottom: 1rem;
    }

    .btn-submit {
        width: 100%;
        padding: .7rem 3rem;
        font-size: 1rem;
    }

    /* Desktop: vòng quay 33vw thay vì 55vw mobile */
    .spin-wheel-wrapper,
    #spin-wheel-container {
        width: 33vw;
        height: 33vw;
    }

    .view-gifts {
        margin-top: 1rem;
    }

    .view-gifts .text {
        font-size: 1rem;
    }
    
    .agree-policy {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .gifts-card {
        max-width: 50%;
    }

    /* Đồng bộ font-size spin result modal với form desktop */
    .spin-result-btn {
        font-size: 1rem; /* = .btn-submit tại ≥1280px */
    }

    .spin-result-name {
        font-size: 1.5rem; /* = .form-desktop h3 tại ≥1280px */
    }

    .spin-result-label {
        font-size: 1rem; /* = .spin-result-btn tại ≥1280px */
    }
}

@media (min-width: 1366px) {
    html {
        font-size: 90%;
    }

    .content {
        padding: 0 2rem;
        gap: 1rem;
    }

    .spin-wheel-wrapper, #spin-wheel-container {
        width: 35vw;
        height: 35vw;
    }
}

@media (min-width: 1440px) {
    .content {
        margin-top: 1rem;
        display: grid;
        grid-template-columns: 2.5fr 4.5fr 3fr;
        align-items: center;
        width: 100%;
        gap: 2rem;
        padding: 0 2rem;
    }

    .form-desktop {
        max-width: 90%;
        justify-self: right;
    }
}

@media (min-width: 1920px) {
    .content {
        margin-top: 0;
        display: grid;
        grid-template-columns: 2.5fr 4.5fr 3fr;
        align-items: center;
        width: 100%;
        gap: 3rem;
        padding: 0 3rem;
    }

    .spin-wheel-wrapper, #spin-wheel-container {
        width: 33vw;
        height: 33vw;
    }

    .form-desktop {
        max-width: 75%;
        justify-self: right;
    }
    
    .banner-desktop {
        padding-top: 2.5rem;
    }
}

@media (min-width: 2048px) {
    html {
        font-size: 100%;
    }

    .content {
        margin-top: 0;
        display: grid;
        grid-template-columns: 2.7fr 4fr 3.3fr;
        align-items: center;
        width: 100%;
        gap: 4rem;
        padding: 0 5rem;
    }

    .form-desktop {
        max-width: 80%;
        justify-self: right;
    }
}

/* Màn hình rất nhỏ: grid 2 cột */
@media (max-width: 400px) {
    html {
        font-size: 55%;
    }

    .quality-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .form-note, .checkbox-group label, .view-gifts .text {
        font-size: 1rem;
    }

    .view-gifts .icon-gift {
        width: 15px;
        height: auto;
    }
}

@media (min-width: 1280px) {
    .alert-card {
        padding: 3rem 2.5rem 2.5rem;
    }
}