:root{
    --nl-primary:#dc3545;
    --nl-primary-hover:#c82333;
    --nl-secondary:#ffc107;
    --nl-text-main:#333;
    --nl-text-gray:#6c757d;
    --nl-bg-light:#f8f9fa;
    --nl-border:#ececec;
}

body{
    background:#f3f5f7;
}

/* CARD */
.nl-card{
    background:#fff;
    border-radius:28px;
    padding:32px;
    box-shadow:
        0 10px 40px rgba(0,0,0,.06);
}

/* SIM */
.sim-badge{
    background:#fff3cd;
    color:#856404;
    border-radius:999px;
    padding:8px 18px;
    font-size:14px;
    font-weight:700;
    display:inline-block;
}

.sim-number{
    font-size:48px;
    font-weight:800;
    letter-spacing:2px;
    color:#172b4d;
}

.sim-price{
    font-size:36px;
    font-weight:800;
    color:var(--nl-primary);
}

/* BUTTON */
.btn-phongthuy{
    height:60px;
    border:none;
    border-radius:18px;
    background:
        linear-gradient(
            135deg,
            var(--nl-primary),
            #ff5e6d
        );

    color:#fff;
    font-size:18px;
    font-weight:700;
    transition:.3s;
}

.btn-phongthuy:hover{
    transform:translateY(-2px);
    box-shadow:
        0 12px 30px rgba(220,53,69,.25);
}

/* SCORE */
.score-wrap{
    text-align:center;
}

.score-circle{
    width:240px;
    height:240px;
    border-radius:50%;
    margin:auto;
    position:relative;

    background:
    conic-gradient(
        var(--nl-secondary) 0deg,
        var(--nl-primary) 180deg,
        #ff7a7a 360deg
    );

    display:flex;
    align-items:center;
    justify-content:center;

    animation:
        scaleIn .5s ease;
}

.score-inner{
    width:190px;
    height:190px;
    border-radius:50%;
    background:#fff;

    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
}

.score-value{
    font-size:56px;
    font-weight:800;
    color:var(--nl-primary);
}

.score-label{
    color:#666;
    font-size:15px;
}

@keyframes scaleIn{
    from{
        transform:scale(.8);
        opacity:0;
    }
    to{
        transform:scale(1);
        opacity:1;
    }
}

/* PROGRESS */
.nl-progress{
    height:14px;
    border-radius:999px;
    overflow:hidden;
    background:#ececec;
}

.nl-progress-bar{
    height:100%;
    background:
    linear-gradient(
        90deg,
        var(--nl-secondary),
        var(--nl-primary)
    );

    transition:1s;
}

/* RESULT CARD */
.result-card{
    background:#fff;
    border-radius:24px;
    padding:24px;
    height:100%;
    box-shadow:
        0 6px 25px rgba(0,0,0,.05);
}

.result-title{
    font-size:18px;
    font-weight:700;
    margin-bottom:12px;
}

.result-value{
    font-size:20px;
    font-weight:700;
    color:var(--nl-primary);
}

.result-desc{
    color:#6c757d;
}

/* SCORE ALERT */
.score-alert{
    border:none;
    border-radius:20px;
    padding:20px;
    background:
        linear-gradient(
            135deg,
            rgba(220,53,69,.08),
            rgba(255,193,7,.12)
        );
}

/* MOBILE */
@media(max-width:768px){

    .sim-number{
        font-size:34px;
    }

    .score-circle{
        width:180px;
        height:180px;
    }

    .score-inner{
        width:140px;
        height:140px;
    }

    .score-value{
        font-size:40px;
    }
}