/* =====================================
   NHANLINK V3
===================================== */

:root{

    --primary:#ee4d2d;
    --primary-hover:#d73211;

    --success:#16a34a;

    --bg:#f5f7fb;

    --white:#fff;

    --text:#202124;

    --gray:#666;

    --border:#e8e8e8;

    --radius:22px;

    --shadow:0 15px 35px rgba(0,0,0,.08);

}

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Be Vietnam Pro',sans-serif;

    background:var(--bg);

    color:var(--text);

    overflow-x:hidden;

}

/* Background */

.bg-gradient{

    position:fixed;

    inset:0;

    z-index:-1;

    background:

    radial-gradient(circle at top left,#ffe8dc 0%,transparent 40%),

    radial-gradient(circle at bottom right,#fff1d5 0%,transparent 40%),

    #f5f7fb;

}

/* Container */

.container{

    max-width:1050px;

}

/* Logo */

.logo-circle{
    width:90px;
    height:90px;
    margin:0 auto;

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

    border-radius:50%;
    background:linear-gradient(135deg,#ff6b3d,#ee4d2d);

    overflow:hidden;

    box-shadow:0 15px 35px rgba(238,77,45,.35);
}

.logo-img{
    display:block;

    width:58px;
    height:58px;

    object-fit:contain;
}
@media (max-width:576px){

    .logo-circle{
        width:70px;
        height:70px;
    }

    .logo-img{
        width:42px;
        height:42px;
    }

}

/* Card */

.card{

    border:none!important;

    border-radius:24px!important;

    box-shadow:var(--shadow)!important;

    overflow:hidden;

    transition:.35s;

}

.card:hover{

    transform:translateY(-5px);

}

.card-body{

    padding:40px;

}

/* Form */

.form-label{

    font-weight:600;

}

.input-group{

    border-radius:16px;

    overflow:hidden;

}

.input-group-text{

    background:#fff;

    border-right:none;

    color:var(--primary);

}

.form-control{

    border-color:var(--border);

    padding:13px 15px;

    font-size:14px;

    box-shadow:none!important;

    transition:.3s;

}
.form-control:hover{

    border-color:#ff9b84;

}

.form-control:focus{

    border-color:var(--primary);

}

textarea{

    resize:none;

    min-height:70px;

}

/* Buttons */

.btn{

    border-radius:15px;

    transition:.3s;

    font-weight:600;

}

.btn:hover{

    transform:translateY(-3px);

}

.btn-shopee{

    background:var(--primary);

    color:#fff;

}

.btn-shopee:hover{

    background:var(--primary-hover);

    color:#fff;

}
/* =====================================
   RESULT
===================================== */

#result{

    background:#fafafa;

    border:1px solid var(--border);

    border-radius:16px;

    padding:18px;

    font-size:15px;

    line-height:1.7;

}

/* ===========================
   Guide
=========================== */

.guide-list{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.guide-item{

    display:flex;

    align-items:center;

    gap:12px;

    padding:12px 16px;

    border:1px solid #ececec;

    border-radius:12px;

    background:#fafafa;

    transition:.25s;

}

.guide-item:hover{

    border-color:var(--primary);

    background:#fff7f5;

}

.guide-number{

    width:30px;

    height:30px;

    min-width:30px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:14px;

    font-weight:700;

}

.guide-item span:last-child{

    font-size:15px;

    color:#555;

}

/* =====================================
   FAQ
===================================== */

.accordion{

    border-radius:18px;

    overflow:hidden;

}

.accordion-item{

    border:none;

    border-bottom:1px solid #eee;

}

.accordion-item:last-child{

    border-bottom:none;

}

.accordion-button{

    padding:20px;

    font-weight:600;

    box-shadow:none!important;

}

.accordion-button:not(.collapsed){

    background:#fff4f1;

    color:var(--primary);

}

.accordion-body{

    padding:18px 20px;

    color:#666;

    line-height:1.7;

}

/* =====================================
   FOOTER
===================================== */

footer{

    margin-top:60px;

    padding-bottom:30px;

}

footer h5{

    font-weight:700;

}

footer p{

    color:#777;

}

footer small{

    color:#999;

}

/* =====================================
   TOAST
===================================== */

#toast{

    position:fixed;

    bottom:25px;

    right:25px;

    background:#222;

    color:#fff;

    padding:14px 22px;

    border-radius:12px;

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:.35s;

    z-index:9999;

}

#toast.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

/* =====================================
   LOADING
===================================== */

#loading{

    display:none;

}

.spinner-border{

    width:3rem;

    height:3rem;

}

/* =====================================
   FADE
===================================== */

.card{

    animation:fadeUp .5s ease;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(25px);

}

to{

opacity:1;

transform:translateY(0);

}

}
/* =====================================
   RESPONSIVE TABLET
===================================== */

@media (max-width:991px){

    .container{
        max-width:760px;
    }

    .card-body{
        padding:30px;
    }

    h1{
        font-size:34px;
    }

    .logo-circle{
        width:75px;
        height:75px;
        font-size:34px;
    }

    .btn-lg{
        padding:14px;
    }

    .step-box{
        padding:18px 12px;
    }

    .step-icon{
        font-size:30px;
    }

    .step-box h5{
        font-size:17px;
    }

    .step-box p{
        font-size:13px;
    }

}

/* =====================================
   RESPONSIVE MOBILE
===================================== */

@media (max-width:576px){

    .container{

        padding-left:16px;

        padding-right:16px;

    }

    h1{

        font-size:28px;

    }

    .text-secondary{

        font-size:15px;

    }

    .card-body{

        padding:22px;

    }

    .logo-circle{

        width:65px;

        height:65px;

        font-size:28px;

    }

    .input-group-text{

        padding:12px;

    }

    .form-control{

        padding:12px;

        font-size:15px;

    }

    textarea{

        min-height:120px;

    }

    .btn-lg{

        padding:13px;

        font-size:15px;

    }

    /* Guide */

    .step-box{

        padding:14px 8px;

    }

    .step-number{

        width:32px;

        height:32px;

        font-size:14px;

        margin-bottom:10px;

    }

    .step-icon{

        font-size:22px;

        margin-bottom:8px;

    }

    .step-box h5{

        font-size:14px;

        margin-bottom:0;

    }

    .step-box p{

        display:none;

    }

    footer{

        margin-top:40px;

    }

    #toast{

        left:15px;

        right:15px;

        bottom:20px;

        text-align:center;

    }

}

/* =====================================
   LARGE DESKTOP
===================================== */

@media (min-width:1400px){

    .container{

        max-width:1180px;

    }

}

/* =====================================
   SCROLLBAR
===================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#f2f2f2;

}

::-webkit-scrollbar-thumb{

    background:#d5d5d5;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#bdbdbd;

}

/* =====================================
   TEXT SELECTION
===================================== */

::selection{

    background:var(--primary);

    color:#fff;

}

/* =====================================
   SMOOTH
===================================== */

html{

    scroll-behavior:smooth;

}

img{

    max-width:100%;

    height:auto;

}

button{

    outline:none;

}

textarea:focus,

input:focus{

    outline:none;

}
/* =====================================
   DARK MODE (Future)
===================================== */

body.dark{

    background:#121212;

    color:#f5f5f5;

}

body.dark .bg-gradient{

    background:#121212;

}

body.dark .card{

    background:#1f1f1f;

    color:#fff;

}

body.dark .form-control{

    background:#2b2b2b;

    color:#fff;

    border-color:#3d3d3d;

}

body.dark .input-group-text{

    background:#2b2b2b;

    color:var(--primary);

    border-color:#3d3d3d;

}

body.dark #result{

    background:#2b2b2b;

    color:#fff;

}

body.dark .step-box{

    background:#242424;

    border-color:#333;

}

body.dark .accordion-item{

    background:#1f1f1f;

}

body.dark .accordion-button{

    background:#1f1f1f;

    color:#fff;

}

body.dark .accordion-button:not(.collapsed){

    background:#2a2a2a;

}

body.dark .accordion-body{

    background:#1f1f1f;

    color:#d7d7d7;

}

body.dark footer p,

body.dark footer small{

    color:#bdbdbd;

}

/* =====================================
   EFFECT
===================================== */

.shadow-hover{

    transition:.3s;

}

.shadow-hover:hover{

    box-shadow:0 20px 45px rgba(0,0,0,.12);

}

.scale{

    transition:.3s;

}

.scale:hover{

    transform:scale(1.03);

}

/* =====================================
   UTILITIES
===================================== */

.text-primary{

    color:var(--primary)!important;

}

.bg-primary{

    background:var(--primary)!important;

}

.rounded-xl{

    border-radius:24px!important;

}

.cursor-pointer{

    cursor:pointer;

}

.fw-600{

    font-weight:600;

}

.fw-700{

    font-weight:700;

}

/* =====================================
   PRINT
===================================== */

@media print{

    .btn,

    footer,

    #toast,

    #loading{

        display:none!important;

    }

    body{

        background:#fff;

    }

    .card{

        box-shadow:none!important;

        border:1px solid #ddd!important;

    }

}

/* =====================================
   FINISH
===================================== */

a{

    text-decoration:none;

}

img{

    user-select:none;

    -webkit-user-drag:none;

}

button{

    outline:none;

}

input,

textarea{

    outline:none;

}

*{

    -webkit-tap-highlight-color:transparent;

}
.input-link{

    font-size:13px;

    padding:12px 15px;

}

.input-link::placeholder{

    font-size:12px;

    color:#999;

}
/* ===== Live Notification ===== */

.live-notify{

    position:fixed;

    left:16px;

    bottom:16px;

    width:280px;

    background:#fff;

    border:1px solid #ffe3dc;

    border-radius:14px;

    padding:10px 12px;

    display:flex;

    align-items:center;

    gap:10px;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

    z-index:9999;

    opacity:0;

    transform:translateY(30px);

    transition:.4s ease;

}

.live-notify.show{

    opacity:1;

    transform:translateY(0);

}

.notify-icon{

    width:38px;

    height:38px;

    border-radius:50%;

    background:#fff2ee;

    color:#ee4d2d;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

    flex-shrink:0;

}

.notify-content{

    flex:1;

}

.notify-title{

    font-size:13px;

    font-weight:600;

    color:#333;

    line-height:1.4;

}

.notify-title span{

    color:#ee4d2d;

}

.notify-content small{

    display:block;

    margin-top:2px;

    font-size:11px;

    color:#999;

}

@media (max-width:576px){

    .live-notify{

        width:240px;

        left:10px;

        bottom:10px;

        padding:8px 10px;

    }

    .notify-icon{

        width:34px;

        height:34px;

        font-size:16px;

    }

    .notify-title{

        font-size:12px;

    }

    .notify-content small{

        font-size:10px;

    }

}