@import "https://cdn-uicons.flaticon.com/2.1.0/uicons-bold-rounded/css/uicons-bold-rounded.css";
@import "https://cdn-uicons.flaticon.com/2.1.0/uicons-regular-rounded/css/uicons-regular-rounded.css";
@import "https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap";

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: all .2s
}

:root {
    --main_color: #f80757;
    --sec_color: #ff003f;
    --main_text_co: #000;
    --active_color: #f80757;
    --box_shadow: 0 0 60px #0e2a4740;
    --color_whit_bla: #fff;
    --light_main_color: #2800ff12;
    --backgund_color: #fff
}

body {
    font-family: poppins, sans-serif;
    background: var(--backgund_color)
}

::-webkit-scrollbar {
    display: none
}

li {
    list-style: none
}

a {
    text-decoration: none
}

i {
    color: var(--main_text_co)
}

.df_cl {
    display: flex
}

button {
    cursor: pointer;
    background: 0 0;
    border: none
}

h2,
h4,
h5,
p {
    line-height: 1.4
}

.man_text_co {
    width: -moz-fit-content;
    width: fit-content;
    display: flex;
    color: var(--active_color)
}

.mobile_menu {
    display: none
}

.center {
    display: flex;
    justify-content: center;
    align-items: center
}

.width66rem {
    width: 66rem
}

h1 {
    color: var(--main_text_co)
}

p {
    color: var(--main_text_co)
}

nav {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 12px;
    padding-right: 12px;
    height: 3rem
}

nav .logo_box {
    display: flex;
    height: 100%;
    align-items: center;
    gap: 6px
}

nav .logo_box .logo {
    border-radius: 6px;
    width: 33px;
}

nav .link_box {
    height: 100%;
    display: flex;
    align-items: center
}

nav .link_box ul {
    display: flex;
    gap: 16px
}

nav .link_box ul .active a {
    color: var(--active_color) !important
}

nav .link_box ul li {
    gap: 3px;
    cursor: pointer;
    position: relative;
    color: var(--main_text_co)
}

nav .link_box ul li:hover .pop_box {
    display: flex;
    opacity: 1
}

nav .link_box ul li:nth-child(5) .pop_box {
    width: 81px
}

nav .link_box ul li .pop_box {
    position: absolute;
    top: 33px;
    background: var(--color_whit_bla);
    width: 192px;
    padding: 11px;
    display: none;
    flex-direction: column;
    gap: 6px;
    box-shadow: var(--box_shadow);
    padding-left: 12px;
    border-radius: 6px;
    z-index: 5;
    opacity: 0
}

nav .link_box ul li .pop_box .top_up {
    position: absolute;
    top: -15px;
    left: 0;
    width: 107px;
    background: 0 0;
    height: 19px
}

nav .link_box ul li .pop_box .top_up::before {
    content: "";
    width: 12px;
    height: 12px;
    position: absolute;
    left: 16px;
    transform: rotate(45deg);
    border-bottom-right-radius: 16px;
    background: var(--color_whit_bla);
    top: 9px
}

nav .link_box ul li i {
    font-size: 16px;
    height: 16px
}

nav .link_box ul li a {
    color: var(--main_text_co)
}

nav .link_box ul li a:hover {
    color: var(--main_color)
}

nav .right_box_icon {
    gap: 16px;
    display: flex
}

nav .right_box_icon button i {
    font-size: 19px
}

.hide {
    display: none !important
}

.mobile_manu {
    position: fixed;
    top: 0;
    background: 0 0;
    left: 0;
    z-index: 8;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px)
}

.mobile_manu .active {
    color: var(--active_color)
}

.mobile_manu ul {
    background: var(--color_whit_bla);
    box-shadow: var(--box_shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    height: 90%;
    border-radius: 6px;
    text-align: center;
    overflow: scroll;
    padding: 12px;
    gap: 5px
}

.mobile_manu ul button {
    margin-top: 12px;
    margin-bottom: 21px
}

.mobile_manu ul li {
    color: var(--main_text_co)
}

.mobile_manu ul li:hover .pop_box {
    padding: 6px 13px;
    height: -moz-fit-content;
    height: fit-content
}

.mobile_manu ul li .pop_box {
    gap: 5px;
    display: flex;
    flex-direction: column;
    background-color: var(--backgund_color);
    margin-top: 7px;
    height: 0;
    overflow: hidden;
    text-align: left;
    border-radius: 6px
}

.mobile_manu ul li .pop_box a {
    color: var(--main_text_co)
}

.mobile_manu ul li .pop_box a:hover {
    color: var(--main_color)
}

.grad_back {
    background: linear-gradient(45deg, #ff005b, #0005ff) !important
}

.center_box{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 12px;
    flex-wrap: wrap;
    width: 32rem;
}

main .tag_box {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 24px
}

main .tag_box .active {
    background-color: var(--active_color);
    color: #fff
}

main .tag_box a {
    border-radius: 6px;
    padding: 5px 11px;
    color: #fff;
    background: #f80757;
}

main .tag_box a:hover {
    background-color: var(--active_color);
    color: #fff
}

main .search_area {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 21px
}

main .search_area form {
    display: flex;
    flex-direction: row
}

main .search_area form input {
    width: 26rem;
    border: none;
    background: var(--light_main_color);
    height: 2.3rem;
    padding-left: 12px;
    padding-right: 12px;
    border-radius: 6px 0 0 6px;
    outline: none
}

main .search_area form button {
    background: var(--main_color);
    padding: 10px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0 6px 6px 0
}

main .search_area form button i {
    font-size: 16px;
    height: 16px
}

main .notfi_box {
    margin-top: 22px;
    border-radius: 6px;
    padding: 9px 11px;
    color: #fff;
    border: 1px solid var(--color_whit_bla);
    gap: 12px;
    display: flex;
    flex-direction: row;
    align-items: center
}

main .notfi_box i {
    height: 16px
}

main .notfi_box a {
    color: #fff
}

main .post_area {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 22px
}

main .post_area .row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
    margin-top: 19px;
    justify-content: center;
    gap: 20px
}

main .post_area .row .mov_box {
    width: 211px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    padding: 7px;
    background: var(--color_whit_bla);
    box-shadow: var(--box_shadow);
    margin-bottom: 12px
}

main .post_area .row .mov_box a:hover .post_detal p {
    color: var(--active_color)
}

main .post_area .row .mov_box a img {
    width: 100%;
    height: 295.5px;
    min-height: 295.5px;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 6px
}

main .post_area .row .mov_box a .post_detal {
    margin-top: 6px
}

main .post_area .row .mov_box a .post_detal p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 3;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 9px !important;
    color: var(--main_text_co)
}

main .next_area_btn {
    display: flex;
    margin-top: 18px;
    gap: 9px;
    flex-direction: row;
    color: var(--main_text_co)
}

main .next_area_btn .active {
    background-color: var(--active_color);
    color: #fff
}

main .next_area_btn .next_box {
    padding: 7px 15px;
    border: 1px solid var(--main_text_co);
    border-radius: 6px;
    display: flex;
    align-items: center;
    color: var(--main_text_co)
}

main .next_area_btn .next_box:hover {
    background-color: var(--active_color);
    color: #fff
}

main .next_area_btn .next_box i {
    display: block;
    height: 23px;
    font-size: 23px
}

main .movie_box_dow {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 19px;
    gap: 14px;
    padding-left: 12px;
    padding-right: 12px
}

main .movie_box_dow img {
    border-radius: 6px
}

main .movie_box_dow .poster_img {
    width: 200px;
    height: 300px
}

main .movie_box_dow .screen_short_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px
}

main .movie_box_dow .screen_short_box img {
    width: 100%;
    max-width: 780px
}

main .movie_box_dow p span {
    font-weight: 700;
    color: var(--active_color)
}

main .movie_box_dow .download_box_link {
    display: flex;
    flex-direction: row;
    gap: 11px;
    flex-wrap: wrap;
    justify-content: center
}

main .movie_box_dow .download_box_link a {
    padding: 7px 8px;
    background: var(--main_color);
    border-radius: 6px;
    color: #fff
}

main .movie_box_dow .download_box_link a i {
    color: #fff;
    margin-right: 3px
}

main .movie_box_dow .download_box_link .Zip_color {
    background: var(--sec_color)
}

main .box_dow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--backgund_color);
    z-index: 9
}

main .box_dow span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

main .box_dow .download_box_pop {
    background: var(--color_whit_bla);
    padding: 12px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    max-height: 33rem;
    overflow: scroll;
    z-index: 1;
    box-shadow: var(--box_shadow)
}

main .box_dow .download_box_pop h4 {
    color: var(--main_text_co);
    display: flex
}

main .box_dow .download_box_pop .flex_btn {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    justify-content: center
}

main .box_dow .download_box_pop p {
    display: flex
}

main .box_dow .download_box_pop a {
    padding: 7px 8px;
    background: linear-gradient(45deg, #2c05ee, #00c1ff);
    border-radius: 6px;
    color: #fff;
    display: flex
}

main .notic {
    margin-top: 19px
}

main .notic a {
    display: flex;
    color: red
}

main .not_found {
    text-align: center;
    margin-top: 40px
}

main .not_found .row_box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 20px
}

main .not_found .row_box p {
    font-size: 186px
}

main .not_found h3 {
    color: var(--main_text_co)
}

main .not_found h5 {
    color: var(--sec_color)
}

footer {
    display: flex;
    justify-content: center;
    border-top: 1px solid var(--main_text_co);
    border-bottom: 1px solid var(--main_text_co);
    padding-top: 12px;
    padding-bottom: 12px;
    margin-top: 20px
}

footer p {
    color: var(--main_text_co)
}

@media(max-width:459px) {
    main .search_area form input {
        width: 100%
    }
}

@media(max-width:317px) {
    main .post_area .row .mov_box {
        width: 211px !important
    }

    main .post_area .row .mov_box a img {
        height: 295.5px !important;
        min-height: 295.5px !important
    }
}

@media(max-width:318px) {
    main .next_area_btn .next_box {
        padding: 3px 10px
    }
}

@media(max-width:504px) {
    main .tag_box {
        padding-left: 12px;
        padding-right: 12px
    }
}

@media(max-width:562px) {
    .link_box {
        display: none !important
    }

    .mobile_menu {
        display: block !important
    }
}

@media(max-width:368px) {
    main .notfi_box a {
        font-size: 4vw
    }

    footer p {
        font-size: 4vw
    }
}

@media(max-width:466px) {
    main .post_area .row .mov_box {
        width: 190px
    }

    main .post_area .row .mov_box a img {
        height: 263.5px;
        min-height: 263.5px
    }

    .row {
        gap: 10px !important
    }
}

@media(max-width:424px) {
    main .post_area .row .mov_box {
        width: 159px
    }

    main .post_area .row .mov_box a img {
        height: 216.5px;
        min-height: 216.5px
    }
}

@media(max-width:352px) {
    main .post_area .row .mov_box {
        width: 142px
    }

    main .post_area .row .mov_box a img {
        height: 191.5px;
        min-height: 191.5px
    }
}

@media(max-width:1023px) {
    .width66rem {
        width: 100%
    }

    .movie_box_dow h1 {
        font-size: 21px
    }
}

@media(max-width:805px) {
    .screen_short_box img {
        width: 100%
    }
}

@media(max-width:380px) {
    .row_box p {
        font-size: 30vw !important
    }
}

@media(prefers-color-scheme:dark) {
    :root {
        --main_color: #f80757;
        --sec_color: #ff003f;
        --main_text_co: #fff;
        --active_color: #f80757;
        --box_shadow: 0 0 60px #ffffff00;
        --color_whit_bla: #282828;
        --light_main_color: #ffffff;
        --backgund_color: #000
    }
}