:root {
    --color-primary: #05386b;
    --color-second: #379683;
    --color-thrid: #5cdb95;
    --color-four: #8ee4af;
    --color-light: #edf5e1;
}

@keyframes textclip {
    100% {
        background-position: 200%;
    }
}

@keyframes zoom-in-zoom-out {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1);
    }
}

@-webkit-keyframes Rotate {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}
.wrapper {
    background: url("../images/giphy.gif") no-repeat;
    background-size: cover;
    background-attachment: fixed ;
}
.automatic {
    background: url("https://anhdepfree.com/wp-content/uploads/2018/11/hinh-nen-Galaxy-Wallpaper-1.jpg") no-repeat;
    background-size: cover;
    color: #fff;
    padding: 20px 0;
}

.automatic img {
    animation: Rotate 20s linear infinite;
}

.automatic .title {
    font-size: 26px;
    color: #fff;
    font-weight: 600;
    margin-bottom: 30px;
    text-align: left;
}

.automatic .animate-charcter {
    text-fill-color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-animation: textclip 2s linear infinite;
    animation: textclip 2s linear infinite;
    background-clip: border-box;
    -webkit-background-clip: text;
    background-image: linear-gradient(-225deg, #fff, #fe6941 29%, #16bb4d 67%, #fff800);
    background-size: 200% auto;
    color: #fff;
    display: inline-block;
    font-size: 18px;
    font-weight: 700;
}

.automatic .block-auto .items .item {
    display: flex;
    align-items: center;
    justify-content: start;
    margin-bottom: 15px;
}

.automatic .block-auto .items .item span {
    padding-left: 5px;
}

.zoom-in-out-box {
    -webkit-animation: zoom-in-zoom-out 1s ease infinite;
    animation: zoom-in-zoom-out 1s ease infinite;
    color: #16bb4d;
}

.tab-link {
    margin: 0 -10px;
}

.tab-link .item {
    width: calc(20% - 20px);
    padding: 10px 20px;
    margin: 10px;
    box-shadow: 0 13px 45px #24c28a30;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    /*flex-direction: column;*/
    transition: box-shadow .2s;
    border-radius: 10px;
    background: linear-gradient(45deg, #3cb72c, transparent);
}

/*.tab-link .item:nth-of-type(1) {*/
/*    background: rgb(241 20 20);*/
/*}*/

/*.tab-link .item:nth-of-type(2) {*/
/*    background:#ef67b5;*/
/*}*/

/*.tab-link .item:nth-of-type(3) {*/
/*    background:mediumspringgreen;*/
/*}*/

/*.tab-link .item:nth-of-type(4) {*/
/*    background:#daa4da;*/
/*}*/

/*.tab-link .item:nth-of-type(5) {*/
/*    background:#3378ff;*/
/*}*/

@media (max-width: 1201px) {
    .tab-link .item {
        width: calc(33% - 20px);
    }
}

.tab-link .item a img {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 4px #00000030, inset 0 -1px 4px #00000040;
    height: 45px;
    width: 45px;
    margin-right: 10px;
    padding: 5px;
}

.tab-link .item .text p {
    margin-bottom: 0;
    font-weight: bold;
}

.tab-link .item .text p.tile {
    font-size: 18px;
    font-weight: bold;
}

.tab-link .item .used {
    background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(240, 166, 30, 1) 54%, rgba(0, 0, 0, 1) 95%);
    border: 1px solid #fff;
    border-radius: 14px;
    box-shadow: 0 10px 20px #00000012;
    height: 0;
    padding: 0 10px;
    transition: visibility 0s, margin-top .2s;
    visibility: hidden;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto;
    align-items: center;
    display: flex;
    justify-content: center;
    font-weight: bold;
    color: #fff;
}

.tab-link .item:hover .used {
    height: 28px;
    margin-top: 10px;
    visibility: visible;
}

.extend-rating {
    margin-top: 10px;
}

.extend-rating i {
    color: #fae426;
    font-size: 14px;
}

.heading {
    background: #183b56;
    color: #fff;
    padding: 20px;
    border-radius: 10px;
}


/*//group zalo*/
.group-zalo {
    background-image: url("https://tongkhofb.com/public/datum/assets/images/account_bg.e8d83ae9dcb6ac7c.png");
    background-size: cover;
    background-repeat: no-repeat;
}

.group-zalo .main {
    background: #fff;
    padding: 2rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.group-zalo .main .main__qr-block {
    padding-top: 0;
    text-align: left;
    width: 200px;
}

.group-zalo .main .main__qr-block .main__qr {
    border-radius: 4px;
    box-shadow: 0 2px 6px #0000000f;
    height: 200px;
    margin: auto;
    position: relative;
    width: 200px;
}

.group-zalo .main .main__qr-block .main__qr img {
    width: 100%;
}

.group-zalo .main .main__qr-block .main__help-text {
    font-size: 12px;
    line-height: 16px;
    margin-top: 8px;
    text-align: center;
}

.group-zalo .main .main__info {
    padding-right: 40px;
}

.group-zalo .main .main__avatar > img {
    border-radius: 100%;
    height: 100%;
    width: 100%;
}

.group-zalo .main .main__avatar {
    display: inline-block;
    flex-shrink: 0;
    height: 80px;
    margin: 0 24px 0 0;
    width: 80px;
}

.group-zalo .main .main__profile-name {
    display: flex;
    margin-bottom: 40px;
    text-align: center;
    word-break: break-word;
    align-items: start;
    justify-content: start;
}

.group-zalo .main__profile-name .main__avatar {
    display: inline-block;
    flex-shrink: 0;
    height: 80px;
    width: 80px;
    margin: 0 24px 0 0;
}

.group-zalo .main__profile-name .main__name {
    color: #001a33;
    font-size: 24px;
    line-height: 1.25;
}

.group-zalo .main__profile-name .main__profile-type {
    font-size: 16px;
    line-height: 1.375;
    margin-bottom: 16px;
    color: #33485c;
    text-align: left;
}

.group-zalo .main__profile-name .button.medium {
    height: 48px;
    align-items: center;
    background-color: #0068ff;
    border: none;
    border-radius: 8px;
    color: #fff;
    display: inline-flex;
    font-weight: 500;
    justify-content: center;
    text-decoration: none;
    transition: all .3s ease;
}

.group-zalo .profile > h2 {
    margin-bottom: 16px;
    color: #001121;
    font-size: 20px;
    line-height: 1.3;
}

.group-zalo .profile__description.empty {
    color: #667685;
    line-height: 1.6;
    white-space: pre-wrap;
}


@keyframes borderAnimation {
    0% {
        background-position: 0 0, -20px 0, 100% -20px, 0 100%;
    }
    100% {
        background-position: 0 -20px, 0 0, 100% 0, -20px 100%;
    }
}

@keyframes flickerAnimation {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes bg-circle {
    0% {
        background-position: left 100% bottom 0;
        background-size: 350%;
    }
    50% {
        background-position: left -10% bottom 0;
        background-size: 350%;
    }
    100% {
        background-position: left 100% bottom 0;
        background-size: 350%;
    }
}

.language {
    display: flex;
    align-items: center;
    justify-content: start;
    padding-left: 0;
    margin-bottom: 0;
}

.language li {
    border: none;
    padding: 0 !important;
}

.header-top {
    padding-top: 35px;
    padding-bottom: 10px;
}

.header-top * {
    color: #fff !important;
}
@media (max-width: 992px) {
    .header-top {
        padding-top: 60px;
    }
}

.header-top .box_banner .box_dash {
    -webkit-animation: borderAnimation .9s linear infinite;
    animation: borderAnimation .9s linear infinite;
    background-image: repeating-linear-gradient(0deg, #16bb4d, #16bb4d 10px, transparent 0, transparent 20px, #16bb4d 0), repeating-linear-gradient(90deg, #16bb4d, #16bb4d 10px, transparent 0, transparent 20px, #16bb4d 0), repeating-linear-gradient(180deg, #16bb4d, #16bb4d 10px, transparent 0, transparent 20px, #16bb4d 0), repeating-linear-gradient(270deg, #16bb4d, #16bb4d 10px, transparent 0, transparent 20px, #16bb4d 0);
    background-position: 0 0, 0 0, 100% 0, 0 100%;
    background-repeat: no-repeat;
    background-size: 3px calc(100% + 20px), calc(100% + 20px) 3px, 3px calc(100% + 20px), calc(100% + 20px) 3px;
}

.header-top .box_banner .banner {
    max-width: 500px;
}

.header-top .box_banner a {
    padding: 0;
}

.header-top .box_share {
    display: flex;
    padding: 10px 12px;
    position: relative;
}

.box_share_info {
    display: grid;
}

.box_share_domain, .box_share_text, .text_flick {
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text !important;
}

.box_share_domain, .box_share_text {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: bg-circle;
    animation-name: bg-circle;
    background: #fff;
    background-color: #fff;
    background-image: radial-gradient(circle, #fe6941 0, #1eff00 26%, #fff 27%);
    background-position: 100% 100%;
    background-repeat: no-repeat;
    background-size: 150%;
}

.animate-flicker {
    -webkit-animation: flickerAnimation .5s infinite;
    animation: flickerAnimation .5s infinite;
}

.click_here {
    color: red;
    font-size: 15px;
    position: absolute;
    right: 6px;
    top: 2px;
    font-weight: bold;
}

.box_share_img img {
    margin-right: 10px;
    width: 55px;
}

.menu-right .menu-right-top {
    margin-bottom: 0;
    margin-top: 10px;
}

.menu-right .menu-right-top .item {
    border-radius: 5px;
    margin: 0 5px;
    padding: 2px 5px;
}

.item_menu_1, .item_menu_2 {
    background: #1f2937;
    box-shadow: 0 13px 45px #24c28a30;
}

.item_menu_1 a, .item_menu_2 a {
    color: #fff;
    font-weight: bold;
}

.menu-right .menu-right-bottom {
    margin-bottom: 10px;
    margin-top: 5px;
}

.menu-right .menu-right-bottom .item a {
    border-right: 1px solid #ccc;
    padding: 0 10px;
}

a {
    color: #000;
}

.main-menu {
    background-color: var(--color-thrid);
}

.main-menu ul li {
    list-style: none;
}

.main-menu ul li a, .main-menu ul li button {
    align-items: center;
    display: flex;
    font-weight: bold;
    justify-content: space-between;
    color: var(--color-primary);
    background: none;
    border: none;
}

.tab-btn button.active {
    background: #1f293794;
}

.tab-btn button {
    border-radius: 7px;
    color: #fff;
    padding: 15px;
    width: 100%;
    text-align: left;
    box-shadow: none;
    border: none;
    background: rgba(31, 41, 55, 0);
}

.tab-btn {
    background: #c7cbd3;
    padding: 20px;
    border-radius: 7px;
}

.tab-content > div {
    display: none;
}

.tab-content > div.active {
    display: block !important;
}

.top-menu-right {
    position: absolute;
    right: 0;
    width: fit-content;
    background: var(--color-primary);
    height: 100%;
    color: #fff;
}

.navbar-list a {
    color: #fff;
}

.recharge .tab-btn button img {
    width: 55px;
    height: auto;
    border-radius: 7px;
    margin-right: 5px;
}

.blogs .card-img {
    height: 100% !important;
}

@media screen and (max-width: 650px) {
    .blogs .card-img {
        height: 85% !important;
        width: 85%;
        object-fit: contain;
        text-align: center;
        margin: 0 auto;
        display: block;
    }
}
.iq-footer .author {
    text-align: right;
}

.iq-footer strong a {
    color: #fc081e;
}

.iq-footer strong {
    transition: all .3s;
}

.iq-footer strong:hover {
    transform: scale(1.2);
    display: inline-block;
}

@media screen and (max-width: 992px) {
    .iq-footer {
        margin-bottom: 45px;
    }
}

.menu-mobile {
    bottom: 0;
    display: block;
    position: fixed;
    width: 100%;
    z-index: 99999;
}

.menu-mobile .main-menu {
    align-items: center;
    background: #1f2937;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    width: 100%;
}

.menu-mobile .main-menu .item {
    align-items: center;
    display: flex;
    text-align: center;
}

.menu-mobile .main-menu .item a {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding-left: 5px;
    text-decoration: none;
}

#cat-product {
    margin: 20px 0;
    border: solid 1px;
    border-radius: 20px;
    padding: 15px;
    position: relative;
}

#cat-product .ico-dropdown {
    position: absolute;
    right: 10px;
    font-size: 28px;
}

@media (max-width: 992px) {
    .dropdown-list .nav-item .nav-link {
        width: 100%;
        margin: 0;
        box-shadow: none;
        min-height: auto;
    }
}

.iq-top-navbar .icon-sidebar {
    color: #fff;
    font-size: 16px;
    margin-right: 15px;
    cursor: pointer;
}
.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(47, 47, 47, 0.44);
    z-index: 9;
    display: none;
}

@keyframes push_menu {
    from {
        left: -100%;
        visibility: hidden;
    }
    to {
        left: 0;
        visibility: visible;
    }
}

.data-scrollbar {
    overflow-x: hidden;
    outline: none;
    position: fixed;
    z-index: 99;
    background: #fff;
    left: -100%;
    top: 0;
    overflow-y: scroll;
    color: #000;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    visibility: hidden;
}
.data-scrollbar.show-sidebar {
    animation-name:  push_menu;
    animation-duration: 0.5s;
    left: 0 !important;
    visibility: visible !important;
}
.data-scrollbar * {
    color: #000;
}

.box-product ul {
    position: sticky;
    top: 70px;
    max-height: calc(100vh - 70px);
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.box-product .tab-list-product {
    width: calc(100% - 220px - 35px);
}

.box-product ul::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

@media screen and (max-width: 1000px) {
    .box-product ul {
        position: relative;
        top: auto;
        max-height: max-content;
        overflow-y: initial;
    }
}