﻿
/*desktop*/
@media (min-width: 1131px){
    .TieuDeKetQua
    {
        text-align: right;border: 1px solid #ffffff73;padding: 5px 8px;background: #c8ba453d;width:30%;padding-right: 10px;
    }
    body{
        width: 100vw;
        height: 100vh;
        background-size: cover;
    }
    .conKetQua
    {
        margin-top: 35px;
        padding: 0px 65px;
    }
    .conKetQua1
    {
        margin-top: 35px;
        padding: 0px 27%;
    }
    .dvGiaiThuong{
        margin-top: 0px;
    /*height: 280px;*/
    }
    .DSLuotQuay
    {
        color:white; padding:0% 5%; margin-top:3.5%;margin-bottom:50px;
    }
    .ThongTinKhachHang{
        margin-top: 20px;background: #eee170f2;padding: 10px;border-radius: 3px;
    }
    .ThongTinKhachHang1{
        margin-top: 20px;background: #eee170f2;padding: 10px;border-radius: 10px;
    }
    .ContentGT{
            padding: 0px 10px!important;
    margin-top: 100px;
        font-weight: bold;
        color: #4caf50;
        font-size: 30px;
            line-height: 40px;
                /*width: 550px;*/
    }
    .TieuDe{
        color: #5dba47;font-size: 30px;font-weight: bold;
    }
    .menuDesktop{
        display:block;
        padding:0% 5%;
    }
    .topnav {
      display:none;
    }
    .dvGiaiThuongMobile
    {
        display:none;
    }
    .dvGiaiThuongDesktop
    {
        color:white;text-align:center;
        margin-top:30px;
    }
    .iconTrungTam{
        z-index: 100;
        position: absolute;
        top: 39%;
        width:100%;
        text-align:center;
    }
    .iconTrungTam > img{
        width: 20%!important;
    }

    .conHoTen{
        float:left; width:50%;padding: 3px 0px;
    }
    .conSoDienThoai{
        float:left; width:50%;padding: 3px 0px;padding-left:5px
    }
    .conChungLoaiQuanTam{
        float:left; width:33.33%;padding: 3px 0px;padding-left:5px
    }
    .con2{
        float:left; width:50%;padding: 3px 2px;height:55px;
    }
    .con3{
        float:left; width:33.33%;padding: 3px 2px;
    }
    .con4{
        float:left; width:25%;padding: 3px 2px;
    }

    .login {
        margin-top: 14%!important;
    }
    .img-login-slogan
    {
        height:200px;
    }
    .form-container {
        width: 40%;
        margin-top: 11%;
    }
    #main-logo {
        width: 22vw;
        left: 5vw;
        top: 3vh;
    }

    .menuleft{
        float:left; width:0%;
    }
    .menuright{
        float:left; width:90%; text-align:right; color:white;padding: 5px;
    }
    #main-logo{
        width: 22vw;
    left: 5vw;
    top: 1vh;
    }
    #vqContainer{
        width: 100vw !important;
        max-width: none !important;
        }
    #vqLeft{
        width: 55vw !important;
        /*padding: 20vh 5vw;*/
        padding: 5vh 5vw;
        padding-right: 1vw;
        height: 35vw;
    }
    

    /*Kim quay ở trung tâm*/
    /*
    #vqRight > #canvasCt > #quayBtn {
        top: 35% !important;
    }*/
    /*Kim quay ở trên đầu*/
    #vqRight > #canvasCt > #quayBtn {
        width: 50px;
        height: 50px;
    }
    #vqRight > #canvasCt > #quayBtn {
       top: -16% !important;
    }

    #vqRight{
        width: 35vw!important;
        height: 35vw!important;
        margin-top: 80px;
    }
    #vqRight > #canvasCt{
            margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0px;
    position: absolute;
    right: 0;
    bottom: 0;
    margin: auto;
    margin-top: 0vh !important;
    background-repeat: no-repeat;
    }
}

/*ipad pro*/
@media(max-width: 1130px) and (min-width: 769px){
    .TieuDeKetQua
    {
        text-align: right;border: 1px solid #ffffff73;padding: 5px 8px;background: #c8ba453d;width:30%;padding-right: 10px;
    }
    body{
        width: 100vw;
        height: 100vh;
        background-size: cover;
    }
    .conKetQua1
    {
        margin-top: 35px;
        padding: 0px 27%;
    }
    .dvGiaiThuong{
           margin-top: 0px;
    height: 33vh;
    }
    .DSLuotQuay
    {
        color:white; padding:0% 5%; margin-top:3.5%;margin-bottom:50px;
    }
    .ThongTinKhachHang{
        margin-top: 0px;background: #eee170f2;padding: 10px;border-radius: 3px;
    }
    .ThongTinKhachHang1{
        margin-top: 0px;background: #eee170f2;padding: 10px;border-radius: 10px;
    }
    .ContentGT{
            padding: 0px 10px!important;
        margin-top: 100px;
        font-weight: bold;
        color: #4caf50;
        font-size: 30px;
            line-height: 40px;
                /*width: 500px;*/
    }
    .TieuDe{
        color: #5dba47;font-size: 30px;font-weight: bold;
    }
    .menuDesktop{
        display:none;
    }
    .topnav {
      overflow: hidden;
      position: relative;
      min-height:40px;
    }

    .dvGiaiThuongMobile
    {
        color:white;text-align:left; margin-top:70px;
    }
    .dvGiaiThuongDesktop
    {
        display:none;
    }
    .iconTrungTam{
        z-index: 100;
        position: absolute;
        top: 39%;
        width:100%;
        text-align:center;
    }
    .iconTrungTam > img{
        width: 20%!important;
    }

    .conHoTen{
        float:left; width:50%;padding: 3px 0px;
    }
    .conSoDienThoai{
        float:left; width:50%;padding: 3px 0px;padding-left:5px
    }
    .conChungLoaiQuanTam{
        float:left; width:33.33%;padding: 3px 0px;padding-left:5px
    }
    .con2{
        float:left; width:33.33%;padding: 3px 2px;height:55px;
    }
    .con3{
        float:left; width:33.33%;padding: 3px 2px;
    }
    .con4{
        float:left; width:25%;padding: 3px 2px;
    }

    .login {
        margin-top: 36%!important;
        width: 90%! important;
    }
    .img-login-slogan
    {
        height:200px;
    }
    .form-container {
        width: 40%;
        margin-top: 35%;
    }
    #main-logo {
        width: 30vw;
        left: 3vw;
        top: 6vh;
    }

    .menuleft{
        float:left; width:4%;
    }
    .menuright{
        float:left; width:96%; text-align:right; color:white;padding: 10px;
    }
     #main-logo{
        width: 30vw;
    left: 3vw;
    top: 1vh;
    }
     #vqContainer{
        width: 100vw !important;
        max-width: none !important;
        }
    #vqLeft{
                /* width: 100%; */
    clear: both;
    /* margin-left: 5vw; */
    padding: 20px;
    /*height: 250px;*/
    margin-top:50px;
    }
    #vqRight > #canvasCt {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        height: 100%;
        top: 0;
    left: 0px;
    position: absolute;
    right: 0;
    }
    #vqRight {
    float: none;
    width: auto;
    margin-left: auto;
    margin-right: auto;
    width: 740px !important;
    height: 740px !important;
    }

    /*Kim quay ở trung tâm*/
    /*
    #vqRight > #canvasCt > #quayBtn {
            width: 150px;
            height: 150px;
    }
    #vqRight > #canvasCt > #quayBtn {
       top: 37% !important;
    }
    */    
    /*Kim quay ở trên đầu*/
    #vqRight > #canvasCt > #quayBtn {
            width: 50px;
            height: 50px;
        }
    #vqRight > #canvasCt > #quayBtn {
       top: -7% !important;
    }
    
}
/*ipad*/
@media(max-width: 768px) and (min-width: 767px){
    .TieuDeKetQua
    {
        text-align: right;border: 1px solid #ffffff73;padding: 5px 8px;background: #c8ba453d;width:35%;padding-right: 10px;
    }
    body{
        width: 100vw;
        height: 100vh;
        background-size: cover;
    }
    .conKetQua1
    {
        margin-top: 35px;
        padding: 0px 0px;
    }
    .dvGiaiThuong{
        margin-top: 0px;
    height: 33vh;
    }
    .DSLuotQuay
    {
        color:white; padding:0% 5%; margin-top:10%;margin-bottom:50px;
    }
    .ThongTinKhachHang{
        margin-top:20px;background: #eee170f2;padding: 10px;border-radius: 3px;
    }
    .ThongTinKhachHang1{
        margin-top: 20px;background: #eee170f2;padding: 10px;border-radius: 10px;
    }
    .ContentGT{
            padding: 0px 10px!important;
    margin-top: 100px;
        font-weight: bold;
        color: #4caf50;
        font-size: 30px;
            line-height: 40px;
                /*width: 500px;*/
    }
    .TieuDe{
        color: #5dba47;font-size: 30px;font-weight: bold;
    }
    .menuDesktop{
        display:none;
    }
    .topnav {
      overflow: hidden;
      position: relative;
      min-height:40px;
    }

    .dvGiaiThuongMobile
    {
        color:white;text-align:left; margin-top:75px;
    }
    .dvGiaiThuongDesktop
    {
        display:none;
    }
    .iconTrungTam{
        z-index: 100;
        position: absolute;
        top: 39%;
        width:100%;
        text-align:center;
    }
    .iconTrungTam > img{
        width: 20%!important;
    }

    .conHoTen{
        float:left; width:50%;padding: 3px 0px;
    }
    .conSoDienThoai{
        float:left; width:50%;padding: 3px 0px;padding-left:5px
    }
    .conChungLoaiQuanTam{
        float:left; width:33.33%;padding: 3px 0px;padding-left:5px
    }
    .con2{
        float:left; width:33.33%;padding: 3px 2px;height:55px;
    }
    .con3{
        float:left; width:33.33%;padding: 3px 2px;
    }
    .con4{
        float:left; width:25%;padding: 3px 2px;
    }
    .login {
        margin-top: 36%!important;
        width: 90%! important;
    }
    .img-login-slogan
    {
        height:200px;
    }
    .form-container {
        width: 60%;
        margin-top: 35%;
    }
    #main-logo {
        width: 30vw;
        left: 3vw;
        top: 6vh;
    }

    .menuleft{
        float:left; width:4%;
    }
    .menuright{
        float:left; width:96%; text-align:right; color:white;padding: 10px;
    }
     #main-logo{
        width: 30vw;
    left: 3vw;
    top: 1vh;
    }
     #vqContainer{
        width: 100vw !important;
        max-width: none !important;
        }
    #vqLeft{
                /* width: 100%; */
    clear: both;
    /* margin-left: 5vw; */
    padding: 20px;
    /*height: 200px;*/
    margin-top:50px;
    }
    #vqRight > #canvasCt {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        height: 100%;
        top: 0;
    left: 0px;
    position: absolute;
    right: 0;
    }
    #vqRight {
        float: none;
        width: auto;
        margin-left: auto;
        margin-right: auto;
        width: 740px !important;
        height: 740px !important;
    }
    /*Kim quay ở trung tâm*/
    /*
    #vqRight > #canvasCt > #quayBtn {
            width: 150px;
            height: 150px;
    }
    #vqRight > #canvasCt > #quayBtn {
       top: 37% !important;
    }*/
    /*Kim quay trên đầu*/
    #vqRight > #canvasCt > #quayBtn {
            width: 50px;
            height: 50px;
    }
    #vqRight > #canvasCt > #quayBtn {
       top: -7% !important;
    }
}

/*iPhone XR*/
@media(max-width: 766px){
    .TieuDeKetQua
    {
        text-align: right;border: 1px solid #ffffff73;padding: 5px 8px;background: #c8ba453d;width:40%;padding-right: 10px;
    }
    body{
        width: 100vw;
        height: 100vh;
        /*background-size: contain;*/
        background-size: 100% 100%;
    }
    .conKetQua1
    {
        margin-top: 35px;
        padding: 0px 0px;
    }
    .dvGiaiThuong{
        margin-top: 0px;
    height: 25vh;
    }
    .DSLuotQuay
    {
        color:white; padding:0% 5%; margin-top:17%;margin-bottom:50px;
    }
    .ThongTinKhachHang{
        margin-top: 20px;background: #eee170f2;padding: 10px;border-radius: 3px;
    }
    .ThongTinKhachHang1{
        margin-top: 20px;background: #eee170f2;padding: 10px;border-radius: 10px;
    }
    .ContentGT{
            padding: 0px 10px!important;
    margin-top: 100px;
        font-weight: bold;
        color: #4caf50;
        font-size: 30px;
            line-height: 40px;
            /*width:350px;*/
    }
    .TieuDe{
        color: #5dba47;font-size: 25px;font-weight: bold;
    }
    .menuDesktop{
        display:none;
    }
    .topnav {
      overflow: hidden;
      position: relative;
      min-height:40px;
    }

    .dvGiaiThuongMobile
    {
        color:white;text-align:left; margin-top:75px;
    }
    .dvGiaiThuongDesktop
    {
        display:none;
    }
    .iconTrungTam{
        z-index: 100;
        position: absolute;
        top: 39%;
        width:100%;
        text-align:center;
    }
    .iconTrungTam > img{
        width: 20%!important;
    }

    .conHoTen{
        float:left; width:100%;padding: 3px 0px;
    }
    .conSoDienThoai{
        float:left; width:100%;padding: 3px 0px;padding-left:0px
    }
    .conChungLoaiQuanTam{
        float:left; width:100%;padding: 3px 0px;padding-left:0px
    }
    .con2{
        float:left; width:100%;padding: 3px 0px;height:55px;
    }
    .con3{
        float:left; width:100%;padding: 3px 0px;
    }
    .con4{
        float:left; width:50%;padding: 3px 0px;
    }
    .login {
        margin-top: 36%!important;
        width: 90%! important;
    }
    .img-login-slogan
    {
        width:80%;
    }
    .form-container {
        width: 90%;
        margin-top: 50%;
    }
    #main-logo {
        width: 33vw;
        left: 3vw;
        position: relative !important;
        top: 2vh;
    }

    .menuleft{
        float:left; width:18%;
    }
    .menuright{
        float:left; width:82%; text-align:right; color:white;padding: 10px;
    }

         #main-logo{
        width: 93vw;
        left: 3vw;
        position: relative !important;
        top: 1vh;
    }
    #vqLeft {
    float: none;
    /*height: 245px;*/
    margin-top: 50px;
    padding: 0 2vw;
}

    /*Kim ở trung tâm*/
    /*
   #vqRight > #canvasCt > #quayBtn {
        top: -10% !important;
        left: 0;
        right: 0;
           width: 25%;
        height: 25%;
        margin: auto;
        bottom: 0;
    }*/
    /*Kim quay trên đầu*/
    #vqRight > #canvasCt > #quayBtn {
            width: 40px;
            height: 40px;
    }
    #vqRight > #canvasCt > #quayBtn {
       top: -15% !important;
    }
}

/*iPhone SE*/
@media(max-width: 376px){
    body{
        width: 100vw;
        height: 100vh;
        /*background-size: cover;*/
        background-size: 100% 100%;
    }
    .conKetQua1
    {
        margin-top: 35px;
        padding: 0px 0px;
    }
    .dvGiaiThuong{
        margin-top: 0px;
    height: 24vh;
    }
    .DSLuotQuay
    {
        color:white; padding:0% 5%; margin-top:17%;margin-bottom:50px;
    }
    .ThongTinKhachHang{
        margin-top: 20px;background: #eee170f2;padding: 10px;border-radius: 3px;
    }
    .ThongTinKhachHang1{
        margin-top: 20px;background: #eee170f2;padding: 10px;border-radius: 10px;
    }
    .ContentGT{
            padding: 0px 10px!important;
    margin-top: 100px;
        font-weight: bold;
        color: #4caf50;
        font-size: 30px;
            line-height: 40px;
            /*width:350px;*/
    }
    .TieuDe{
        color: #5dba47;font-size: 25px;font-weight: bold;
    }
    .menuDesktop{
        display:none;
    }
    .topnav {
      overflow: hidden;
      position: relative;
      min-height:40px;
    }

    .dvGiaiThuongMobile
    {
        color:white;text-align:left; margin-top:75px;
    }
    .dvGiaiThuongDesktop
    {
        display:none;
    }
    .iconTrungTam{
        z-index: 100;
        position: absolute;
        top: 39%;
        width:100%;
        text-align:center;
    }
    .iconTrungTam > img{
        width: 20%!important;
    }

    .conHoTen{
        float:left; width:100%;padding: 3px 0px;
    }
    .conSoDienThoai{
        float:left; width:100%;padding: 3px 0px;padding-left:0px
    }
    .conChungLoaiQuanTam{
        float:left; width:100%;padding: 3px 0px;padding-left:0px
    }
    .con2{
        float:left; width:100%;padding: 3px 0px;height:55px;
    }
    .con3{
        float:left; width:100%;padding: 3px 0px;
    }
    .con4{
        float:left; width:50%;padding: 3px 0px;
    }
    .login {
        margin-top: 36%!important;
        width: 90%! important;
    }
    .img-login-slogan
    {
        width:80%;
    }
    .form-container {
        width: 90%;
        margin-top: 50%;
    }
    #main-logo {
        width: 33vw;
        left: 3vw;
        position: relative !important;
        top: 2vh;
    }

    .menuleft{
        float:left; width:18%;
    }
    .menuright{
        float:left; width:82%; text-align:right; color:white;padding: 10px;
    }

         #main-logo{
        width: 93vw;
        left: 3vw;
        position: relative !important;
        top: 1vh;
    }
    #vqLeft {
    float: none;
    /*height: 245px;*/
    margin-top: 50px;
    padding: 0 2vw;
}

    /*Kim ở trung tâm*/
    /*
   #vqRight > #canvasCt > #quayBtn {
        top: -10% !important;
        left: 0;
        right: 0;
           width: 25%;
        height: 25%;
        margin: auto;
        bottom: 0;
    }*/
    /*Kim quay trên đầu*/
    #vqRight > #canvasCt > #quayBtn {
            width: 40px;
            height: 40px;
    }
    #vqRight > #canvasCt > #quayBtn {
       top: -15% !important;
    }
}

