@import 'animate.css';
.app-navbar .nav-menu .nav-item .dropdown .btn-link.active,
.app-navbar .nav-menu .nav-item .nav-link.active {
    color: #eec465 !important;
}

.btn-outline-gradient {
    font-size: 1.2rem;
    color: #259e80 !important;
    border-color: #259e80 !important;
    background-image: linear-gradient(180deg, #2e2e2e,#232323) !important;
}

.btn-gradient {
    background-image: linear-gradient(180deg, #259e80, #06785c) !important;
    font-size: 1.2rem;
}

.text-success {
    color: #e9c36b!important;
}

.about-us-wrapper:after {
    background-image: linear-gradient(90deg, #a07339 0, #dcb159 25%, #fcde86 50%, #fcd274 75%, #b18420) !important;
}

.card-promotion-landing {
    background-image: linear-gradient(90deg, #9f7239 0, #d6a850 25%, #fae0a3 50%, #eaca85 75%, #f3c86a) !important;
    max-width: 350px;
}

.card-promotion-landing .img {
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    padding-top: 100%;
    transition-delay: 0.3s ease-in-out;
}

.hide {
    display: none;
}

.card-promotion-landing:hover .img {
    animation-name: bounce;
    animation-duration: 1500ms;
}


.footer:before {
    background-image: linear-gradient(270deg, rgba(184, 146, 71, 0) 0, #d4a947 50%, #fcd87d 75%, rgba(62, 37, 29, 0)) !important;
}

.app-navbar .main-logo {
    height: 5.5rem !important;
}
@media (max-width: 500px){
    .app-navbar .main-logo {
        height: 4rem !important;
    }
}
@media (max-width: 376px){
    .app-navbar .main-logo {
        height: 3rem !important;
    }
}

.login-logo img {
    width: 50%;
    height: 30%;
}

.logogame-img {
    width: 40px;
}

.footer .copy-right {
    margin-top: 0;
}

.footer {
    padding-top: 1.7rem;
}

.imgbank {
    width: 25%;
}

.app-navbar .nav-menu .nav-item .dropdown .btn-link,
.app-navbar .nav-menu .nav-item .nav-link {
    color: #ffffff;
}

.app-navbar .nav-menu .nav-item .dropdown .btn-link.active,
.app-navbar .nav-menu .nav-item .nav-link.active {
    color: #e6be62 !important;
}

#app {
    overflow: auto !important;
}

body,
html {
    overflow-x: hidden;
}

@media (max-width: 991px) {
    .logogame-img {
        width: 11%;
    }
    .imgbank {
        width: 60%;
    }
}

hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    height: 1px;
    background-image: linear-gradient(270deg, rgba(184, 146, 71, 0) 0, #d4a947 50%, #fcd87d 75%, rgba(62, 37, 29, 0)) !important;
    /* border-top: 1px solid #259e80; */
}

#main_container {
    padding-bottom: 1.6rem;
}
@media (max-width: 414px){
    #main_container {
        margin-top: 3rem
    }
}

.text-overflow {
    background-image: linear-gradient(90deg, #976a36 0, #d4a54d 25%, #fcdf88 50%, #ffd577 75%, #eec465) !important;
    color: #1f1f1f;
    padding: 5px;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: all 0.3s ease;
}

.card-promotion-landing1 {
    border-radius: 5px;
    border: 1px solid #c3a256;
    background-image: linear-gradient(180deg, #e8b94d 0, #352c16 49%, #1c1817 80%, #1c1817 75%, #1c1817) !important;
}

.card-promotion-landing1:hover .text-overflow {
    background-image: linear-gradient(90deg, #1c1817 0, #1c1817 25%, #1c1817 50%, #1c1817 75%, #1c1817) !important;
    color: #fff;
}

.img-slot {
    width: 100%;
    min-height: 142px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: cover;
}

.img-slot1 {
    width: 100%;
    min-height: 195px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: cover;
}

.img-slot2 {
    width: 100%;
    min-height: 208px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: cover;
}

.img-slot3 {
    width: 100%;
    min-height: 135px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: cover;
}

.img-slot4 {
    width: 100%;
    min-height: 135px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: cover;
}

.gameslot {
    margin-top: 42px;
}

.item-logout {
    display: block;
}

.item-logout1 {
    display: none;
}

.item-login {
    display: block;
}

.item-register {
    display: block;
}

.item-register1 {
    display: none;
}

@media (max-width: 414px) {
    .gameslot {
        margin-top: 35px;
    }
    .img-slot {
        min-height: 88px;
    }
    .img-slot1 {
        min-height: 160px;
    }
    .img-slot2 {
        min-height: 145px;
    }
    .img-slot3 {
        min-height: 105px;
    }
    .img-slot4 {
        min-height: 95px;
    }
    .text-overflow {
        font-size: 12px;
    }
    .item-register1 {
        display: block;
    }
    .item-logout1 {
        display: none;
    }
    .app-navbar .xo44slot {
        height: 5.5rem !important;
        padding: 0px 0px;
    }
    .app-navbar .main-logo-mobile {
        height: 7rem !important;
        padding: 0px 0px;
    }
    .about-us-wrapper {
        margin: 7rem 0 2rem !important;
    }
}

@media (max-width: 375px) {
    .gameslot {
        margin-top: 35px;
    }
    .img-slot {
        min-height: 74px;
    }
    .img-slot1 {
        min-height: 145px;
    }
    .img-slot2 {
        min-height: 125px;
    }
    .img-slot3 {
        min-height: 85px;
    }
    .img-slot4 {
        min-height: 75px;
    }
    .text-overflow {
        font-size: 12px;
    }
    .item-register1 {
        display: block;
    }
    .app-navbar .xo44slot {
        height: 2.9rem !important;
        padding: 0px 10px;
    }
}

.fa-user-plus:before {
    content: "";
    /* padding-right: 5px; */
}

.fa-sign-in:before {
    content: "\F090";
    padding-right: 5px;
}

#nav-hamburger span {
    background: #ffac00;
}

.btn-gradient1 {
    background-image: -webkit-gradient(linear, left top, right top, from(#3e251d), color-stop(25%, #8e7757), color-stop(50%, #fae0a3), color-stop(75%, #eaca85), to(#b89247));
    background-image: linear-gradient(90deg, #976a36 0, #d4a54d 25%, #fcdf88 50%, #ffd577 75%, #eec465) !important;
    font-size: 1rem;
    width: 100px;
    padding: 7px 0px;
}

.btn-outline-gradient1 {
    font-size: 1.0rem;
    color: #259e80 !important;
    border-color: #259e80 !important;
    width: 100px;
    padding: 7px 0px;
}

.why-lucabet-wrapper {
    margin: 3rem 0 1.5rem;
}

.swiper-slide {
    text-align: center;
    display: block;
    width: 100%;
}

.swiper-slide:hover .btn-black {
    width: 100%;
    color: #000;
    background-color: #d8ab54;
    border-color: #ffec8d;
    position: relative;
    margin-top: 30px;
    left: 50%;
    right: 50%;
    transform: translate(-50%, -50%);
}

.btn-black {
    width: 100%;
    color: #fff;
    background-color: #000;
    border-color: #ffec8d;
    position: relative;
    margin-top: 30px;
    left: 50%;
    right: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
}


/* .btn-black:hover {
    width: 100%;
    color: #000;
    background-color: #d8ab54;
    border-color: #ffffff;
    position: relative;
    margin-top: 30px;
    left: 50%;
    right: 50%;
    transform: translate(-50%, -50%);
} */

.about-us-wrapper {
    margin: 8rem 0 2rem;
}

.slide img {
    width: 100%;
}

.about-us-wrapper {
    margin: 3rem 0 2rem;
}

.game-list{
    background: #3c3c3c;
    padding: 5px;
    border-radius: 5px;
    margin: 5px;
}
.main-gif-banner{
    border-radius: 15px;
    border:2px solid #e6be62;
}
.recom-pad{
    padding: 10px 5px;
}
.recom-img{
    border-radius: 10px;
    border:1px solid #e6be62;
}
.block-content{
    border-radius: 20px;
    background: #292929d1;
    padding: 10px;
}
.article-card{
    border-radius: 10px;
    border:2px solid #e6be62;
    background: #292929;
    padding: 5px;
}
.b-left {
        border-left: 5px solid #ffec72;
        margin-top: 10px;
        padding-left: 15px;
    }
    .h-top {
    background: -webkit-linear-gradient(top, #ffffeb 0%, #fffe54 31%, #fffe64 31%, #ffe875 56%, #ffad00 82%, #ab7e1e 82%, #f1d64a 100%);
    background: linear-gradient(top, #ffffeb 0%, #fffe54 31%, #fffe64 31%, #ffe875 56%, #ffad00 82%, #ab7e1e 82%, #f1d64a 100%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    text-align: center;
    margin-bottom: 10px;
}
.text-into{
    font-size: 18px;
    font-weight: 500;
    text-shadow: 0 0 5px black;
}
.slider{
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(/asset/new/web/img/slot1234-webp/1920x1080-17-webp.webp);
    border-bottom: 4px solid #006bff;
    padding-top: 110px;
}

.sec-1 img{
    width: 80%;
}
.sec-2 img{
    width: 35%;
}
@media (max-width: 500px){
    .sec-1 img{
        width: 90%;
    }
}
.slider-2{
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(/asset/new/web/img/slot1234-webp/1920x1080-9-webp.webp);
    border-bottom: 4px solid #006bff;
}
.recommend-img {
    background: #9995;
    font-size: 14px;
    font-weight: bold;
    height: 100%;
}
.recommend-img img{
    width: 90px;
}
.rotate-animation{
    animation-name: example;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse; 
}
@keyframes example {
  0%   {transform: rotate(-2deg);}
  50%  {transform: rotate(2deg);}
}

.zoomin-animation{
    animation-name: zoomin;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse; 
}
@keyframes zoomin {
  0%   {transform: scale(0.96);}
  50%  {transform: scale(1);}
}

.flash-blue-animation{
    animation-name: flash-blue;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-direction: normal; 
}
@keyframes flash-blue {
    0%   {
        -webkit-filter: drop-shadow(0px 0px 1px #ffc107);
        filter: drop-shadow(0px 0px 1px #ffc107);
    }
    40%  {
        -webkit-filter: drop-shadow(0px 0px 10px #ffc107);
        filter: drop-shadow(0px 0px 10px #ffc107);
    }
    80%   {
        -webkit-filter: drop-shadow(0px 0px 1px #ffc107);
        filter: drop-shadow(0px 0px 1px #ffc107);
    }
    85%  {
        -webkit-filter: drop-shadow(0px 0px 10px #ffc107);
        filter: drop-shadow(0px 0px 10px #ffc107);
    }
    90%   {
        -webkit-filter: drop-shadow(0px 0px 1px #ffc107);
        filter: drop-shadow(0px 0px 1px #ffc107);
    }
    95%  {
        -webkit-filter: drop-shadow(0px 0px 10px #ffc107);
        filter: drop-shadow(0px 0px 10px #ffc107);
    }
}
.blog-img img{
    width: 80%;
}
.login-phase{
    display: flex;
    justify-content: center;
}
.login-phase img{
    width: 100%;
    border-radius: 15px;
}
.slider-3{
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(/asset/new/web/img/slot1234-webp/1920x1080-10-webp.webp);
    border-bottom: 4px solid #006bff;
}
.title-article{
    text-shadow: 0 0 5px #000;
}
.box-article{
    border-radius: 15px;
    border: #006bff82;
    background: #0118289c;
    padding: 5px;
    height: 100%;
}
.box-article img{
    width: 100%;
    border-radius: 15px;
    padding: 0.25rem;
}
.box-article a{
    text-decoration: none;
}
div.menubarfooter {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: url(/asset/new/web/img/nav-bottom/com/menubar-com.webp) no-repeat center;
    background-size: 100% 100%;
    height: 80px;
    z-index: 99;
    box-shadow: none;
}
@media (max-width: 500px){
div.menubarfooter {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: url(/asset/new/web/img/nav-bottom/menubar-mobile.webp) no-repeat center;
    background-size: 100% 100%;
    height: 70px;
    z-index: 99;
}}
div.menubarfooter ul.menu {
    list-style: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0;
    padding: 0;
}
div.menubarfooter ul.menu li {
    text-align: center;
    width: 20%;
}
div.menubarfooter ul.menu li a {
    color: #fff;
    font-size: 15px;
}
div.menubarfooter ul.menu li a div {
    position: absolute;
    width: 20%;
    bottom: 0;
    font-size: 15px;
    font-weight: bold;
    text-shadow: 0 0 10px #000;
}
div.menubarfooter ul.menu li a div img {
    width: 50px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

div.menubarfooter ul.menu .main-li a div img {
    width: 80px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

    h1,h2,h3,h4,h5,h6{
        color: #ffc107!important;
    }
.block-content table {
    background-color: transparent !important;
    width: 100% !important;
}

.content-bottom img{
    width: 100%;
}
.login-img{
    width: 80%;
    max-width: 400px;
}
.contact-card {
    position: fixed;
    right: 20px;
    bottom: 80px;
    width: 90px;
    z-index: 9999;
}
@media (max-width: 500px){
    .contact-card {
        right: 10px;
        width: 80px;
    }
    }