@charset "utf-8";

.site_body {
    display: flex;
    align-items: start;
    justify-content: space-between;
    height: 100vh;
    overflow: hidden;
}

.side {
    display: flex;
    flex-direction: column;
    width: 250px;
    height: 100vh;
    overflow: hidden;
    position: relative;
    border-left: 1px solid var(--secondary_border);
}

.side_active {
    width: 96px;
}

.side .side_header {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 96px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
}

.side .side_header .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 30px;
    margin-left: 35px;
    color: var(--primary_text);
}

.side_active .side_header .logo {
    display: none;
}

.side .side_header .logo h1 {
    font-weight: 600;
    font-size: 12pt;
    color: var(--primary_text);
}

.side .side_header .logo img {
    max-width: 110px;
    height: 100%;
    object-fit: contain;
}

.side .side_header .menu_bars {
    font-size: 36px;
    cursor: pointer;
}

.side .side_scroll {
    width: 100%;
    height: calc(100% - 150px);
    overflow: auto;
    padding: 0 20px 35px;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}

.side .side_capt {
    margin-bottom: 15px;
    padding-right: 20px;
    font-size: 12px;
    font-weight: 500;
    color: var(--secondary_text);
    -webkit-transition: padding .25s;
    -o-transition: padding .25s;
    transition: padding .25s;
}

.side .menu .item {
    display: block;
    height: 56px;
    padding-left: 20px;
    border-radius: 12px;
    font-size: 12pt;
    color: var(--secondary_text);
    background: transparent;
    white-space: nowrap;
    transition: all .25s;
    position: relative;
}

.side .menu .item span {
    display: inline-block;
    vertical-align: middle;
    visibility: visible;
    overflow: unset;
    opacity: 1;
}

.side_active .menu .item {
    padding-left: 0;
}

.side_active .menu .item span {
    visibility: hidden;
    overflow: hidden;
    opacity: 0;
    display: none;
}

.notif {

    position: absolute;
    top: 0;
    left: 0;
    border-radius: var(--radius_25);
    color: var(--white);
    background: var(--secondary);
    font-size: 12px;
    flex-shrink: 0;
    min-width: 24px;
    margin-left: 10px;
    padding: 0 3px;
    box-sizing: border-box;
    background: #FF754C;
    text-align: center;
    line-height: 24px;
    font-weight: 500;
    margin-right: auto;
}

.side .menu .item:hover {
    color: var(--primary);
}

.side .menu .current {
    color: var(--white) !important;
    background: var(--primary);
}

.side .menu .item i {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    padding-top: 17px;
    box-sizing: border-box;
    font-size: 21px;
    width: 60px;
    height: 100%;
}

.side .menu .item .action {
    position: absolute;
    left: 0;
}

.side_active .menu .item .action {
    width: 0;
    overflow: hidden;
    display: none;
}

.side_active .menu .item i {
    width: 56px;
}

.side .user_list {
    display: flex;
    flex-direction: column;
}

.side .user_list .item {
    display: block;
    height: 56px;
    padding-left: 20px;
    border-radius: 12px;
    font-size: 12pt;
    color: var(--secondary_text);
    position: relative;
}

.side .user_list .item .user_img {
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    margin: 0 16px 0 20px;
    object-fit: cover;
    border-radius: 50%;
}

.side .user_list .item .user_title {
    display: inline-block;
    vertical-align: middle;
    visibility: visible;
    overflow: hidden;
    opacity: 1;
    width: calc(100% - 65px);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.side_active .user_list .item .user_title {
    visibility: hidden;
    opacity: 0;
    display: none;
}

.side .user_list .item .user_status {
    position: absolute;
    font-size: 10px;
    left: 0;
    top: 5px;
}

.side_active .user_list .item .user_status {
    position: absolute;
    left: 10px;
}

.side .side_banner {
    position: relative;
    width: 100%;
    height: 350px;
}

.side_active .side_banner {
    display: none;
}

.side .side_banner:before {
    top: 8px;
    right: 8px;
    left: 8px;
    bottom: -8px;
    content: "";
    position: absolute;
    background: rgba(27, 29, 33, 0.7);
    border-radius: 20px;
    z-index: -1;
}

.side .side_banner:after {
    top: 16px;
    left: 16px;
    right: 16px;
    bottom: -16px;
    content: "";
    position: absolute;
    background: rgba(27, 29, 33, 0.7);
    border-radius: 20px;
    z-index: -1;
}

.side .side_banner .banner_img {
    position: relative;
    width: 100%;
    height: 350px;
    border-radius: var(--radius_20);
    overflow: hidden;
}

.side .side_banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius_20);
}

.side .side_banner .banner_img:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(58, 62, 69, 0)), color-stop(45%, rgba(30, 32, 36, 0.55)), color-stop(67%, rgba(27, 29, 33, 0.9)));
    background-image: -webkit-linear-gradient(top, rgba(58, 62, 69, 0) 0%, rgba(30, 32, 36, 0.55) 45%, rgba(27, 29, 33, 0.9) 67%);
    background-image: -o-linear-gradient(top, rgba(58, 62, 69, 0) 0%, rgba(30, 32, 36, 0.55) 45%, rgba(27, 29, 33, 0.9) 67%);
    background-image: linear-gradient(180deg, rgba(58, 62, 69, 0) 0%, rgba(30, 32, 36, 0.55) 45%, rgba(27, 29, 33, 0.9) 67%);
}

.side .side_banner .action_card {
    display: grid;
    place-items: center;
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 4;
    width: 24px;
    height: 24px;
    background: var(--white);
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
}

.side .side_banner .action_card:hover {
    transform: rotate(180deg);
}

.side .side_banner .banner_detail {
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    padding: var(--margin_x);
    box-sizing: border-box;
}

.side .side_banner .banner_detail .title {
    font-size: var(--font_xl);
    color: var(--white);
    font-weight: 600;
    margin-bottom: 12px;
}

.side_active .side_banner .banner_detail .title {
    visibility: hidden;
    opacity: 0;
    width: 0;
}

.side .side_banner .banner_detail .text {
    font-size: 12px;
    font-weight: 300;
    color: var(--white);
    margin-bottom: 24px;
}

.side .side_footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 72px;
    display: flex;
    align-items: center;
    border-top: 1px solid var(--secondary_border);
}

.side .side_footer .theme_color {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.side .side_footer .theme_color .fa-sun-bright {
    font-size: 24px;
    color: var(--secondary_text);
}

.main {
    display: flex;
    flex-direction: column;
    width: calc(100% - 250px);
}

.main_active {
    width: calc(100% - 100px);
}

.main .top_main {
    display: flex;
    align-items: center;
    height: 96px;
    padding: 0 64px;
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: inset 0 -1px 0 0 #E4E4E4;
    transition: left .25s;
}

.main .top_main .menu_bars {
    display: none;
    font-size: 36px;
    cursor: pointer;
    margin-left: 24px;
}

.main .top_main .dropdown {
    position: relative;
    padding-left: 24px;
    cursor: pointer;
    margin-left: 40px;
}

.main .top_main .dropdown .dropdown_head {
    position: relative;
    display: flex;
    align-items: center;
    width: fit-content;
    height: 24px;
    cursor: pointer;
    color: var(--secondary_text);
    transition: color .25s;
    font-size: var(--font_l);
    gap: 10px;
}

.main .top_main .dropdown i {
    font-size: 20px;
}

.main .top_main .dropdown .chev {
    margin-right: auto;
    margin-left: -22px;
    font-size: 12px;
}

.header_body {
    right: 0;
    width: 256px;
    left: 57px;
    top: calc(100% + 36px);
    padding: 6px 22px;
    box-sizing: border-box;
    background: var(--blue);
    border-radius: var(--radius_16);
    display: flex;
    position: absolute;
    flex-direction: column;
    visibility: hidden;
    opacity: 0;
    transition: all .25s;
    z-index: 12;
}

.dropdown_open {
    visibility: visible;
    opacity: 1;
}

.header_body:after {
    content: "";
    bottom: 100%;
    width: 16px;
    height: 16px;
    background: var(--blue);
    rotate: 45deg;
    position: absolute;
    top: -6px;
    border-radius: 6px;
}

.header_body .header_body_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
    padding: 0 24px;
}

.header_body .header_body_title .title {
    font-size: 18px;
    color: var(--primary_text);
    font-weight: 500;
}

.header_body .header_body_title .count {
    font-size: 18px;
    color: var(--green_700);
}

.header_body .item {
    display: flex;
    align-items: center;
    height: 56px;
    border-radius: 12px;
    font-size: 12pt;
    color: var(--white);
    gap: 10px;
}

.header_body .item .action {
    margin-right: auto;
    font-size: 14px;
}

.header_body .error_holder {
    margin-bottom: 0;
}

.header_body .error_holder .btn_primary {
    margin-top: 20px;
    width: 100%;
}

.top_main_search {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    flex-shrink: 0;
    width: fit-content;
    margin-left: auto;
}

.top_main_search input {
    width: 100%;
    height: 24px;
    background: none;
    border: none;
    font-size: 14px;
    box-shadow: unset;
    color: var(--primary_text);
    margin-bottom: 0;
}

.top_main_search i {
    font-size: 22px;
    color: var(--secondary_text);
}

.top_main_action {
    display: flex;
    margin-left: 64px;
}

.top_main_action .add_item {
    position: relative;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-left: 40px;
}

.top_main_action .add_item .header_body {
    left: -128px;
    right: auto;
}

.top_main_action .add_item .header_body:after {
    left: 0;
    right: 0;
    margin: auto;
    top: 2px;
}

.top_main_action .add_item .dropdown_head {
    color: var(--secondary_text);
    font-size: 16px;
    cursor: pointer;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 2px solid var(--secondary_text);
}

.top_main_action .add_item .dropdown_open_btn {
    color: var(--white);
    background: var(--primary_text);
    border: 2px solid transparent;
}

.top_main_action .notification {
    color: var(--secondary_text);
    font-size: 24px;
    cursor: pointer;
    display: grid;
    place-items: center;
    position: relative;
    width: 48px;
    height: 48px;
}

.top_main_action .notification .cart_counter {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 16px;
    height: 16px;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    font-size: 8pt;
    color: #ffffff;
    background-color: var(--secondary);
    border-radius: 10px;
}

.top_main_action .notification .header_body {
    top: calc(100% + 24px);
    left: -112px;
    right: auto;
    width: 360px;
    padding: 32px 8px;
    box-shadow: 0 10px 36px rgba(227, 230, 236, 0.6);
    background: #ffffff;
    border-radius: 24px;
}

.top_main_action .notification .header_body:after {
    display: none;
}

.top_main_action .notification .user_list {
    max-height: 250px;
    overflow: auto;
    margin-bottom: 10px;
}

.top_main_action .notification .user_list .item {
    display: flex;
    align-items: center;
    padding: 16px 28px 16px 20px;
    box-sizing: border-box;
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
    transition: background .25s;
    height: fit-content;
    font-size: 12pt;
    gap: 20px !important;
    color: var(--secondary_text);
}

.top_main_action .notification .user_list .item:hover {
    background: rgba(228, 228, 228, 0.25);
}

.top_main_action .notification .user_list .item .user_img {
    position: relative;
    width: 48px;
    height: 48px;
}

.top_main_action .notification .user_list .item .user_img img {
    width: 48px;
    height: 48px;
    margin: 0;
    object-fit: cover;
    border-radius: 50%;
}

.notifications_status {
    position: absolute;
    top: 0;
    left: -10px;
    display: grid;
    place-items: center;
    width: 21px;
    color: #fff;
    height: 21px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    font-size: 10px;
}

.top_main_action .notification .user_list .item .detail {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 5px;
}

.top_main_action .notification .user_list .item .user_title {
    width: 100%;
    display: flex;
    color: var(--primary_text);
    justify-content: space-between;
}

.top_main_action .notification .user_list .item .user_title .title {
    margin-left: auto;
    font-size: 13px;
}

.top_main_action .notification .user_list .item .user_title .date {
    color: var(--secondary_text);
    font-size: 12px;
    font-weight: 300;
}

.top_main_action .notification .user_list .item .description {
    width: 100%;
    display: flex;
    font-size: 12px;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    gap: 10px;
}

.top_main_action .notification .user_list .item .description .text {
    font-weight: 300;
}

.top_main_action .notification .user_list .item .description a {
    padding-left: 5px;
    font-weight: 500;
    color: #3F8CFF;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.top_main_action .notification .user_list .item .description .cost_off {
    font-size: var(--font_l);
    font-weight: 500;
}

.top_main_action .notification .user_list .item .user_status {
    float: left;
    font-size: 10px;
}

.top_main_profile {
    position: relative;
    width: 48px;
    height: 48px;
}

.top_main_profile .profile_img {
    width: 100%;
    min-height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--gray_200);
    padding: 2px;
    box-sizing: border-box;
    cursor: pointer;
}

.sorting .header_body,
.top_main_profile .header_body {
    top: calc(100% + 20px);
    left: -32px;
    width: 256px;
    padding: 20px;
    border-radius: 20px;
    background: #ffffff;
    right: unset;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

.sorting .header_body .item,
.top_main_profile .header_body .item {
    color: var(--secondary_text);
}

.sorting .header_body:after,
.top_main_profile .header_body:after {
    background: #ffffff;
    left: 47px;
}

.middle_main {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100vh - 96px);
    overflow: auto;
}

.footer_copyright {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 10px 35px;
    box-sizing: border-box;
}

.slider {
    margin-bottom: 35px;
    display: inline-block;
    width: 100%;
    min-height: 480px;
    vertical-align: top;
    position: relative;
}

.profile .slider {
    min-height: 580px;
}

.slider:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(31%, rgba(58, 62, 69, 0)), color-stop(82%, rgba(27, 29, 33, 0.9)));
    background-image: -webkit-linear-gradient(top, rgba(58, 62, 69, 0) 31%, rgba(27, 29, 33, 0.9) 82%);
    background-image: -o-linear-gradient(top, rgba(58, 62, 69, 0) 31%, rgba(27, 29, 33, 0.9) 82%);
    background-image: linear-gradient(180deg, rgba(58, 62, 69, 0) 31%, rgba(27, 29, 33, 0.9) 82%);
}

.profile .slider:before {
    background: linear-gradient(180deg, rgba(58, 62, 69, 0.0001) -65.29%, rgba(27, 29, 33, 0.900787) 100%);

}

.slider .slider_img {
    display: block;
    width: 100%;
    height: 100%;
}

.slider img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slider .slider_detail {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    display: flex;
    align-items: end;
    top: 0;
    padding: 50px 100px;
    box-sizing: border-box;
}

.profile .slider .slider_detail {
    padding-bottom: 180px;
}

.slider .slider_detail .detail {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: start;
    position: relative;
    z-index: 2;
    max-width: 515px;
}

.status_orange {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--light);
    gap: 10px;
    box-sizing: border-box;
    padding: var(--margin_s) var(--margin_l);
    margin: var(--margin_s);
    border-radius: var(--radius_5);
    background: var(--secondary);
}

.status_purple {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--light);
    gap: 10px;
    box-sizing: border-box;
    padding: var(--margin_s) var(--margin_l);
    margin: var(--margin_s);
    border-radius: var(--radius_5);
    background: var(--purple_700);
}

.slider .slider_detail .detail .slider_title {
    font-size: 32px;
    line-height: 1.5;
    letter-spacing: -.5px;
    color: var(--white);
}

.slider .slider_detail .detail .slider_text {
    color: var(--white);
}

.slider .slider_detail .detail .slider_text .item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.slider .slider_detail .detail .slider_text .item img {
    width: 24px;
    height: 24px;
    border-radius: var(--radius_25);
    object-fit: contain;
}

.slider .slider_control {
    color: #ffffff;
    display: flex;
    align-items: center;
    position: absolute;
    left: 58px;
    bottom: 70px;
}

.slider .slider_control .slider_dot_img {
    display: flex;
    align-items: center;
    gap: 5px;
}

.slider .slider_control img {
    width: 100px;
    height: 56px;
    border-radius: 12px;
    font-size: 0;
    cursor: pointer;
}

.slider .slider_control .current {
    box-shadow: 0 0 6px 2px #ffffff;
}

.slider .slider_control i {
    z-index: 2;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--blue);
    display: grid;
    place-items: center;
    cursor: pointer;
}

.slider .slider_control .fa-chevron-right {
    margin-left: -12px;
}

.slider .slider_control .fa-chevron-left {
    margin-right: -12px;
}

.slider .slider_control_res {
    top: 90px;
    left: 120px;
    position: absolute;
    display: flex;
    gap: 10px;
    align-content: center;
}

.slider .slider_control_res i {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #ffffff;
    transition: background .25s;
}

.section {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
}

.section .section_head {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
}

.section .holder {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.section .section_head .title {
    font-size: 24px;
}

.section .section_head .btn_gray {
    padding: 10px 20px;
}

.blog_archive .section_head .title {
    font-size: 18px;
}

.player_holder .inner_post_text {
    position: relative;
    z-index: 0;
    width: 100%;
}

.product_main {
    margin-bottom: 48px;
}

.product_main .product_card,
.inner_post_text .product_card {
    width: calc(25% - 15px);
    margin: 40px 15px 0 0;
    position: relative;
    display: block;
    border-radius: 24px;
    background: var(--white);
    color: var(--primary_text);
    cursor: pointer;
    height: 460px;
}

.inner_post_text .product_card {
    width: calc(100% - 50px);
    height: auto;
    margin: 35px auto;
}

.product_main .product_card::before,
.inner_post_text .product_card::before {
    content: "";
    position: absolute;
    top: 15px;
    left: 7px;
    right: 7px;
    bottom: -15px;
    z-index: -1;
    background: #F0F3F6;
    -webkit-filter: blur(43px);
    filter: blur(43px);
    border-radius: 24px;
    transition: background .25s;
}

.inner_post_text .product_card::before,
.product_card:hover::before {
    background: #c0cdd9;
}

.product_card .card_img {
    width: 100%;
    height: 250px;
    position: relative;
}

.inner_post_text .product_card .card_img {
    width: 200px;
    display: inline-block;
}

.product_card .card_img .discount {
    position: absolute;
    left: 0;
    top: 0;
    background: var(--secondary);
    color: var(--white);
    font-size: 18px;
    border-radius: 24px;
    padding: 2px 7px;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.24);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.24);
}

.product_card .card_img .video_time {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 0 10px;
    border-radius: 6px;
    background: rgba(27, 29, 33, 0.7);
    font-size: 13px;
    line-height: 24px;
    color: #ffffff;
}

.product_card .card_img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 24px 24px 0 0;
}

.product_card .card_middle {
    display: flex;
    flex-direction: column;
    padding: 24px;
    box-sizing: border-box;
}

.inner_post_text .product_card .card_middle {
    display: inline-block;
    width: calc(100% - 255px);
    vertical-align: top;
}

.product_card .card_title {
    display: block;
    font-size: 18px !important;
    margin-bottom: 16px;
    color: var(--primary_text);
}

.product_card .cost_off {
    font-size: 16px;
    margin-bottom: 8px;
}

.product_card .cost {
    color: var(--secondary_text);
}

.user_list .card_user,
.blog_card .card_user,
.product_card .card_user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.blog_card .card_user img,
.product_card .card_user img {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin-right: 8px;
    object-fit: cover;
    border-radius: var(--radius_oval);
}

.user_list .card_user img {
    width: 56px;
    height: 56px;
    margin-right: 16px;
    object-fit: cover;
    border-radius: var(--radius_oval);
}

.blog_card .card_user .user_title,
.product_card .card_user .user_title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 500;
}

.user_list .card_user .user_title {
    display: flex;
    gap: 5px;
    margin-bottom: 2px;
    font-size: 13px;
}

.user_list .card_user .user_title i,
.blog_card .card_user .user_title i,
.product_card .card_user .user_title i {
    font-size: 16px;
}

.blog_card .card_user .user_title .text,
.product_card .card_user .user_text {
    font-size: 12px;
    color: #808191;
}

.user_list .card_user .user_text {
    margin-bottom: 2px;
    font-size: 12px;
    color: #808191;
}

.user_list .card_user .card_status {
    margin-bottom: 0;
}

.user_list .card_user .card_status .item {
    padding-right: 0;
}

.product_card .card_footer {
    display: flex;
    align-items: center;
    padding: 24px;
    box-sizing: border-box;
    border-top: 1px solid #f0f3f6;
}

.product_card .card_footer .category_title {
    font-weight: 500;
}

.product_card .card_footer .btn_secondary {
    padding: 0 12px;
    box-sizing: border-box;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    line-height: 24px;
}

.product_card .card_footer .user_status {
    padding-right: 16px;
    font-size: 12px;
    font-weight: 500;
    color: #808191;
}

.user_main {
    position: relative;
    padding: 32px;
    background: #ffffff;
    border-radius: 24px;
    margin-bottom: 55px;
}

.user_main::before {
    content: "";
    position: absolute;
    top: 14px;
    left: 32px;
    right: 32px;
    bottom: -14px;
    z-index: -1;
    background: #F0F3F6;
    opacity: .91;
    -webkit-filter: blur(86px);
    filter: blur(86px);
    border-radius: 24px;
}

.user_main .holder {
    overflow: hidden;
}

.user_main .holder .scroller {
    display: flex;
    align-items: start;
    gap: 20px;
    padding: 5px 0;
    overflow: auto;
}

.user_main .user_card {
    padding: 0 15px;
    text-align: center;
    font-weight: 500;
    color: #11142D;
    transition: color .25s;
}

.user_main .user_card_plus i {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin: -2px auto 15px;
    background: #6C5DD3;
    color: #ffffff;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
}

.user_main .user_card_plus i:hover {
    rotate: 180deg;
}

.user_main .user_card .user_title {
    font-size: 13px;
    font-weight: 500;
}

.user_main .user_card .user_text {
    margin-top: 8px;
    font-size: 12px;
    color: #808191;
}

.user_main .user_card .card_img {
    width: 62px;
    height: 62px;
    position: relative;
}

.user_main .user_card .card_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #ffffff;
    box-shadow: 0 0 0 2px #0049C6;
}

.no_icon {
    background: white;
    width: 16px;
    height: 16px;
}

.category .category_list {
    display: flex;
    align-items: start;
}

.category_card {
    margin: 32px 16px 0;
    border-radius: 24px;
    box-sizing: border-box;
    background: #ffffff;
    cursor: pointer;
    position: relative;
}

.category_card:before {
    content: "";
    position: absolute;
    top: 14px;
    left: 7px;
    right: 7px;
    bottom: 0;
    z-index: -1;
    background: #F0F3F6;
    -webkit-filter: blur(43px);
    filter: blur(43px);
    border-radius: 24px;
}

.category_card_big {
    width: calc(50% - 32px);
    position: relative;
    z-index: 5;
    height: 676px;
    transition: opacity 700ms;
}

.category_card .btn_slide {
    position: absolute;
    right: 40px;
    top: 40px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.category_card .btn_slide i {
    display: grid;
    place-items: center;
    z-index: 3;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--primary_text);
    transition: background .25s;
    font-size: 18px;
}

.category_card .category_img {
    width: 100%;
    height: 100%;
    border-radius: 24px;
    object-fit: cover;
}

.category_detail {
    display: flex;
    flex-direction: column;
    align-items: start;
    padding: 40px;
}

.category_card_big .category_detail {
    display: flex;
    flex-direction: column;
    align-items: start;
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 40px;
}

.category_detail .btn_secondary_blue {
    margin: 4px 0 0 4px;
    padding: 0 20px;
    border-radius: 8px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    line-height: 24px;
}

.category_card .category_detail .tags {
    color: var(--blue);
    background: rgba(228, 228, 228, 0.5);
    margin: -4px 0 8px -4px;
}

.category_card_big .category_detail .tags {
    margin: 4px 0 0 4px;
    padding: 0 20px;
    border-radius: 8px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    line-height: 24px;

    color: var(--white);
    background: rgba(108, 93, 211, 0.5);
}

.category_detail .title {
    font-size: 24px;
    margin-bottom: 8px;
    color: #fff;
}

.category_card_big .category_detail .title {
    text-shadow: 0 0 30px rgba(50, 50, 50, 0.9);
}

.category_detail .text {
    margin-bottom: 16px;
}

.category_detail .text .status {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--white);
}

.category_item_sm .category_detail .text .status {
    color: var(--secondary_text);
}

.category_detail .text .status i {
    font-size: 8px;
}

.category_list .list {
    width: calc(50% - 12px);
    display: flex;
    flex-direction: column;
}

.category_item_sm {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 8px;
    position: relative;
}

.category_item_sm::before {
    content: "";
    position: absolute;
    top: 14px;
    left: 7px;
    right: 7px;
    bottom: 0;
    z-index: -1;
    background: #F0F3F6;
    -webkit-filter: blur(43px);
    filter: blur(43px);
    border-radius: 24px;
}

.category_item_sm .category_img {
    height: 188px;
    margin-left: 12px;
    border-radius: 24px;
    width: calc(50% - 12px) !important;
    object-fit: cover;
}

.category_item_sm .category_detail {
    padding: 0;
    width: calc(50% - 12px);
}

.category_item_sm .category_detail .title {
    color: var(--primary_text);
    font-size: 18px;
}

.main_container {
    padding: 64px;
    max-width: 1340px;
    margin: auto;
    width: 100%;
    box-sizing: border-box;
}

.section_slider .holder {
    position: relative;
    overflow: auto;
    display: block;
    margin: 0;
    padding: 0;
}

.scroller {
    overflow: hidden;
}

.section_slider .holder .scroller {
    position: relative;
    left: 0;
    top: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
    transform: translate3d(0, 0, 0);
}

.section_slider .section_head {
    display: flex;
    flex-direction: column;
    align-items: start;
}

.section_slider .section_head .title {
    font-size: 24px;
}

.section_slider .section_head .big_title {
    font-size: 48px;
    line-height: 1.39583;
    margin-bottom: 32px;
    font-weight: 500;
    letter-spacing: -1px;
}

.section_head .big_title {
    font-size: 48px;
    line-height: 1.39583;
    margin-bottom: 32px;
    font-weight: 500;
    letter-spacing: -1px;
}

.slider_card {
    width: 785px;
    height: 560px;
    margin: 0 16px;
    border-radius: 32px;
    overflow: hidden;
    position: relative;
    display: inline-block;
    vertical-align: top;
}

.section_slider .slider_card {
    display: block;
    float: right;
    height: 600px;
}

.slider_card:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(31%, rgba(58, 62, 69, 0)), color-stop(82%, rgba(27, 29, 33, 0.9)));
    background-image: -webkit-linear-gradient(top, rgba(58, 62, 69, 0) 31%, rgba(27, 29, 33, 0.9) 82%);
    background-image: -o-linear-gradient(top, rgba(58, 62, 69, 0) 31%, rgba(27, 29, 33, 0.9) 82%);
    background-image: linear-gradient(180deg, rgba(58, 62, 69, 0) 31%, rgba(27, 29, 33, 0.9) 82%);
}

.slider_card .card_img {
    width: 100%;
    height: 100%;
}

.slider_card .detail {
    position: absolute;
    bottom: 50px;
    right: 50px;
    display: flex;
    flex-direction: column;
    align-items: start;
}

.slider_card .detail .slider_title {
    font-size: 32px;
    line-height: 1.5;
    letter-spacing: -.5px;
    color: var(--white);
    margin-bottom: 8px;
}

.slider_card .detail .slider_text {
    color: var(--white);
}

.slider_card .detail .slider_text .item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.slider_card .detail .slider_text .item img {
    width: 24px;
    height: 24px;
    border-radius: var(--radius_25);
    object-fit: contain;
}

.section_slider .slider_dots {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    justify-content: space-between;
    max-width: 100%;
    margin-top: 40px;
    font-size: 13px;
    font-weight: 500;
    color: #808191;
}

.section_slider .slider_dots .dots_list {
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(100% - 100px);
}

.section_slider .slider_dots .dots_list span {
    margin-right: 24px;
    position: relative;
    width: 10px;
    height: 10px;
    font-size: 0;
    z-index: 2;
    background: #E4E4E4;
    border-radius: 50%;
    cursor: pointer;
}

.section_slider .slider_dots .dots_list span:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    transition: all .25s;
}

.section_slider .slider_dots .dots_list span:after {
    background: transparent;
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transition: all .25s;
}

.section_slider .slider_dots .dots_list .current:before {
    background: #ffffff;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.24);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.24);
    z-index: 2;
    width: 10px;
    height: 10px;
}

.section_slider .slider_dots .dots_list .current:after {
    transform: translate(-50%, -50%) scale(2);
    background: #3F8CFF;
}

.section_slider .slider_dots .counter_status,
.section_slider .slider_dots .counter {
    font-size: 13px;
    font-weight: 500;
    color: #808191;
}

.section_slider .slider_dots .counter_status {
    display: flex;
    align-items: center;
    gap: 5px;
}

.blog_archive {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
    max-width: 1344px;
    box-sizing: border-box;
}

.blog_archive .col_8 {
    width: calc(100% - 240px);
    padding-left: 32px;
    box-sizing: border-box;
}

.sorting {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 32px;
    position: relative;
}

.sort_btn {
    margin-right: auto;
}


.sort_holder {
    display: flex;
    align-items: center;
    width: calc(100% - 230px);
}

.sorting .list_sort {
    display: flex;
    align-items: center;
    gap: 5px;
}

.sorting .sort_current,
.sorting .list_selected .list_sort {
    display: none;
}

.sorting .list_sort .btn_gray {
    color: var(--blue);
}

.sorting .list_selected {
    margin-right: auto;
}

.filter_btn .header_body {
    right: 32px;
    left: unset;
}

.filter_btn .header_body::after {
    right: 47px;
    left: unset;
}

.filter {
    display: flex;
    padding: var(--margin_s) 0;
    position: relative;
    width: calc(100% - 200px);
}

.filter .filter_holder {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    position: relative;
    width: 100%;
}

.filter .filter_holder .item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: var(--primary_text);
    box-sizing: border-box;
    padding: var(--margin_l) var(--margin_x2);
    border-radius: var(--radius_16);
    background: rgba(228, 228, 228, 0.5);
    cursor: pointer;
    font-weight: 500;
    font-size: var(--font_l);
}

.filter .filter_holder .select {
    background: var(--secondary_border);
    color: var(--secondary);
}

.filter .filter_holder .item i {
    display: inline-block;
    vertical-align: middle;
    margin-right: var(--margin_m);
}

.filter .filter_holder .select:hover {
    background: var(--orange--500);
    color: var(--gray_200);
}

.filter .filter_holder .select:hover i {
    color: var(--gray_200);
}

.filter .sort {
    background: var(--gray);
    border-radius: var(--radius_5);
}

.filter .filter_clear {
    float: left;
    color: var(--primary);
    font-size: var(--font_s);
    padding: 3px var(--margin_m) 0 3px;
    cursor: pointer;
}

.filter_hidden_holder {
    width: 500px;
    position: absolute;
    background: var(--white);
    border: 1px solid var(--gray);
    overflow-y: auto;
    overflow-x: hidden;
    top: calc(100% + 20px);
    right: -32px;
    padding: 20px;
    border-radius: 20px;
    background: #ffffff;
    left: unset;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    visibility: hidden;
    opacity: 0;
    transition: all .25s;
    z-index: 12;
}


.holder_scale {
    transform: scale(0.0);
}

.holder_scale_open {
    visibility: visible;
    opacity: 1;

}

.filter_open {
    display: block;
    width: 100%;
    padding: var(--margin_x) var(--margin_l);
    box-sizing: border-box;
}

.filter_open .head {
    padding: 0 var(--margin_s) var(--margin_l) var(--margin_s);
    display: block;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid var(--gray);
}

.filter_open .head i {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    padding: 5px;
}

.filter_open .head span {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 50px);
    font-weight: normal;
    text-align: center;
}

.filter_open .filter_list {
    display: block;
    width: 100%;
    overflow: auto;
    max-height: 300px;
}

.sorting .filter_open .filter_list {
    max-height: calc(100% - 50px);
}

.filter_list .slide_container {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    margin-top: 16px;
}

.filter_list input {
    margin: var(--margin_s) 0 0 0;
    border: 1px solid var(--secondary_border);
}

.filter_list .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #2d8ac7;
    cursor: pointer;
}

.filter_list .slider::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #2d8ac7;
    cursor: pointer;
}

.filter_list .range_cost {
    display: block;
    text-align: center;
}

.filter_list .range_cost .span {
    padding: 3px 15px;
    margin: 15px 0;
}

.filter_open .holder_side_list {
    padding: var(--margin_s) var(--margin_m);
    margin-bottom: var(--margin_s);
}

.filter_open .holder_side_list {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
    border-radius: 12px;
    font-size: 12pt;
    color: var(--secondary_text);
    gap: 10px;
}

.filter_open .holder_side_list .list {
    display: block;
    width: 100%;
}

.filter_open .holder_side_list .list i {
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
}

.filter_open .filter_item {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    border-radius: 12px;
    font-size: 12pt;
    color: var(--secondary_text);
    gap: 10px;
}

.filter_open .list_open {
    display: flex;
    flex-direction: column;
    margin: 0 25px 0 0;
}

.filter_open .list_open .pointer {
    padding: 15px 0;
}

.filter_open .current .right,
.filter_open .holder_side_list .list .current,
.filter_open .holder_side_list .list_open .current {
    color: #2d8ac7;
}

.filter_open .current {
    font-weight: 400;
    margin-bottom: 5px;
}

.filter_open .filter_item .left {
    font-weight: 300;
    color: var(--dark-500);
}

.filter_open .btn_holder {
    border-top: 1px solid var(--gray);
    margin-top: var(--margin_s);
}

.filter_open .btn_primary {
    display: block;
    margin: var(--margin_s) var(--margin_m);
}

.toggle {
    display: grid;
    place-items: center;
    width: 64px;
    height: 24px;
    border-radius: var(--radius_10);
    background: var(--secondary_border);
    position: relative;
    cursor: pointer;
}

.toggle_select {
    background: var(--primary_text);
}

.toggle .circle {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 2px;
    border-radius: 20px;
    background: var(--blue_500);
    border: 1px solid var(--gray);
    box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.35);

}

.toggle_select .circle {
    left: 40px !important;

}

.radio {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: var(--radius_20);
    border: 1px solid var(--dark-500);
    cursor: pointer;
    padding: 1px;
    box-sizing: border-box;
    text-align: center;
}

.radio_select .circle {
    display: block;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    border-radius: var(--radius_20);
    border: 1px solid var(--secondary_hover);
    background: var(--primary);

}

.filter_open .filter_item .left i {
    display: inline-block;
    vertical-align: middle;
    margin-right: var(--margin_s);
}

.filter_open .filter_item .right i {
    display: inline-block;
    vertical-align: middle;
    margin-left: var(--margin_s);
}

.filter_open_result {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--white);

}

.checkbox_holder {
    display: inline-block;
    vertical-align: middle;
    margin: 0 15px 0 0;
}

.checkbox {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    text-align: center;
    background: #aaadcf33;;
    border-radius: var(--radius_5);
    border: 1px solid var(--gray);
    margin-right: 5px;
    padding: 0 !important;
    cursor: pointer;
    position: relative;
}

.checkbox_text_current {
    color: var(--primary);
}

.checkbox_current, .checked {
    background: var(--primary);
    border: 1px solid #ffffff80;
}

.checkbox_text, .label {
    display: inline-block !important;
    vertical-align: middle !important;
    position: unset !important;
    margin: 0;
    background: transparent !important;
}

.checkbox .circle {
    display: block;
    width: 15px;
    height: 15px;
    background: var(--primary);
    border-radius: var(--primary);
    position: absolute;
    left: 3px;
    top: 0;
    bottom: 0;
    margin: auto;
}

.checkbox i {
    display: inline-block;
    vertical-align: middle;
    font-size: 12px;
    color: var(--white);
    margin: auto !important;
}

.blog_holder {
    width: 100%;
    display: flex;
    flex-direction: column;

}

.blog_archive .blog_card {
    height: 220px;
    margin-bottom: 24px;
}

.blog_card {
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 24px;
    background: #ffffff;
    color: #11142D;
    cursor: pointer;
    box-sizing: border-box;
}

.blog_card:before {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
    position: absolute;
    z-index: -1;
    background: #F0F3F6;
    filter: blur(43px);
    border-radius: 24px;
    transition: background .25s;
}

.blog_card:hover::before {
    background: #c0cdd9;
}

.blog_card .card_inner {
    padding: 8px;
    display: flex;
    align-items: center;
    width: calc(100% - 85px);
}

.blog_card .card_img {
    position: relative;
    flex-shrink: 0;
    width: 290px;
    height: 204px;
    border-radius: 24px;
}

.blog_card .card_img .icon {
    position: absolute;
    top: 4px;
    right: 4px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #ffffff;
    font-size: 18px;
    font-weight: 500;
    color: #5F75EE;
}

.blog_card .card_img img {
    width: 100%;
    height: 100%;
    border-radius: 24px;
    object-fit: cover;
}

.blog_card .card_detail {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: start;
    padding: 0 24px;
    width: calc(100% - 295px);
    box-sizing: border-box;
}

.blog_card .card_detail .head {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    gap: 5px;
}

.blog_card .card_detail .title {
    margin-bottom: 8px;
    font-size: 18px;
    line-height: 1.33333;
    font-weight: 400;
    color: #11142D;
}

.blog_card .card_detail .text {
    color: var(--secondary_text);
    line-height: 1.8;
    text-align: justify;
}

.card_status {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.card_status .item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #808191;
}

.card_status .item i {
    font-size: 8px;
}

.blog_card .card_detail .btn_secondary {
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    line-height: 24px;
    padding: 0 20px;
}

.blog_card .card_detail .btn_secondary_blue {
    padding: 0 20px;
    background: rgba(108, 93, 211, 0.1);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    line-height: 24px;
    color: #5F75EE;
}

.blog_card .card_action {
    display: flex;
    flex-direction: column;
    width: 80px;
    height: calc(100% - 16px);
    padding: 8px;
    background: #6C5DD3;
    margin: 8px;
    border-radius: 24px;
    visibility: hidden;
    opacity: 0;
    transition: all .25s;
    box-sizing: border-box;
}

.blog_card:hover .card_action {
    visibility: visible;
    opacity: 1;
}

.card_action .action_btn {
    display: grid;
    place-items: center;
    flex-grow: 1;
    border-radius: 24px;
    font-size: 20px;
    color: var(--white);
}

.card_action .action_btn:hover {
    background: rgba(207, 200, 255, 0.5);
}

.blog_archive .col_2 {
    width: 235px;
    padding-top: 88px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 24px;
}

.blog_archive .col_2 .section_head {
    margin-bottom: 0;
    margin-top: 20px;
}

.blog_archive .col_2 .card_side {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.card_list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 32px 0;
    gap: 32px;
}

.card_list .product_card {
    width: calc(25% - 35px);
    display: flex;
    align-items: center;
    color: #11142D;
    cursor: pointer;
    transition: color .25s;
    border-radius: 16px;
    background: rgba(228, 228, 228, 0.25);
    font-weight: 500;
}

.chat_result .game .card_list .product_card {
    width: calc(50% - 35px);
}

.card_side .product_card {
    width: 100%;
}

.card_list .product_card:hover {
    background: rgba(228, 228, 228, 0.15);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.card_list .product_card .card_img {
    width: 56px;
    height: 100px;
    margin-left: 16px;
    border-radius: 12px;
    object-fit: contain;
    background: var(--white);
}

.card_list .product_card .card_detail {
    width: calc(100% - 66px);
    display: flex;
    flex-direction: column;
}

.card_list .product_card .card_detail .card_title {
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--white);
}

.card_list .product_card .card_detail .card_text {
    font-size: 12px;
    color: #808191;
}

.users .card_list {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-bottom: 55px;
}

.users .card_list .product_card {
    border-radius: 16px;
    background: rgba(228, 228, 228, 0.25);
    color: #1B1D21;
}

.users .card_list .product_card .product_icon {
    display: grid;
    place-items: center;
    font-size: 32px;
    width: 56px;
    height: 100px;
    margin-left: 16px;
    border-radius: 12px;
    background-image: linear-gradient(230deg, rgba(207, 200, 255, 0.8) 0%, rgba(108, 93, 211, 0.9) 67%);
    color: var(--white);
}

.users .card_list .product_card:hover {
    background: rgba(228, 228, 228, 0.15);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.player_holder {
    margin-bottom: 55px;
}

.player_holder .holder {
    display: flex;
    align-items: start;
    border-radius: 32px;
    background: #F0F3F6;
}

.product_page .player_holder .holder {
    display: flex;
    background: #FFFFFF;
}

.player_holder .player_big {
    position: relative;
    width: calc(100% - 275px);
    background: var(--white);
    border-radius: 32px;
}

.chat_result .player_holder .player_big {
    width: 100%;
}

.player_big:before {
    content: "";
    position: absolute;
    top: 90px;
    left: 24px;
    right: 24px;
    bottom: -32px;
    z-index: -1;
    background: #F0F3F6;
    opacity: .91;
    -webkit-filter: blur(86px);
    filter: blur(86px);
    border-radius: 24px;
}

.player_big .player_image {
    position: relative;
    width: 100%;
    height: 492px;
    border-radius: 32px;
    overflow: hidden;
}

.player_big .player_image .main_img {
    width: 100%;
    border-radius: 32px;
    overflow: hidden;
    object-fit: cover;
}

.player_big .player_image audio {
    width: calc(100% - 20px);
    margin: auto 10px;
    border-radius: 50px;
    position: absolute;
    bottom: 10px;
    right: 0;
    left: 0;
}

.chat_result .player_big .player_image {
    height: 280px;
}

.player_big .player_image .player_icon {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: grid;
    place-items: center;
    z-index: 2;
    width: 96px;
    height: 96px;
    border-radius: 16px;
    background: rgba(27, 29, 33, 0.85);
    font-size: 26px;
    margin: auto;
    color: var(--secondary);
    transition: background .25s;
    cursor: pointer;
}

.player_big .player_image .player_icon:hover {
    background: rgba(27, 29, 33, 0.75);
}

.player_big .player_image .player_count {
    position: absolute;
    top: 32px;
    left: 32px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    border-radius: 8px;
    background: rgba(27, 29, 33, 0.71);
    font-size: 13px;
    font-weight: 700;
    line-height: 32px;
    color: #ffffff;
}

.player_big .player_image img,
.player_big .player_image video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.player_big .player_detail {
    display: flex;
    flex-direction: column;
    align-items: start;
    padding: 32px;
}

.player_big .player_detail .detail_header {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 8px;
    gap: 5px;
}

.player_big .player_detail .detail_header .item {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--gray_500);
    box-sizing: border-box;
    padding: var(--margin_s) var(--margin_l);
    border-radius: var(--radius_5);
    background: #F0F3F6;
}

.player_big .player_detail .detail_header .item a:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 10px;
    height: 2px;
    margin-right: 5px;
    background: var(--gray_500);
}

.player_big .player_detail .detail_header .item a:last-child:after {
    display: none;
}

.player_big .player_detail .card_title {
    font-size: 32px;
    line-height: 1.5;
    letter-spacing: -.5px;
}

.player_big .player_detail .card_parameter {
    display: flex;
    align-items: center;
}

.player_big .player_detail .detail_header .item_user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.player_big .player_detail .detail_header .item_user span {
    color: var(--secondary_text);
}

.player_big .player_detail .detail_header .item_user img {
    width: 24px;
    height: 24px;
    border-radius: var(--radius_oval);
    object-fit: cover;
}

.specifications {
    width: 100%;
    margin: 35px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 10px;
    box-sizing: border-box;
}

.specifications .specifications_title {
    display: block;
    margin-top: var(--margin_x);
    margin-bottom: var(--margin_s);
    font-size: var(--font_x);
    color: var(--primary_text);
    font-weight: 500;
}

.specifications .specifications_table .specifications_row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 0;
    padding: 4px 0;
    border-bottom: 1px solid var(--gray);
}

.specifications .specifications_table .specifications_row:hover {
    background-image: linear-gradient(-45deg, #211a6c10, #211a6c30, #211a6c10);
}

.specifications .specifications_table .specifications_row .row_title {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-width: 150px;
    color: var(--primary_text);
}

.specifications .specifications_table .specifications_row .row_title .btn_blue,
.specifications .specifications_table .specifications_row .row_title .btn_secondary {
    box-sizing: border-box;
    padding: var(--margin_s) var(--margin_l);
    border-radius: var(--radius_5);
}

.specifications .specifications_table .specifications_row .row_title i {
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
}

.specifications .specifications_table .specifications_row .row_detail {
    display: flex;
    flex-wrap: wrap;
    color: var(--gray_500);
    gap: 5px;

}

.player_holder .player_list {
    overflow: auto;
    height: 670px;
}

.player_holder .player_list .scroller {
    width: 270px;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: start;
    padding: 32px 0;
    gap: 32px;
    overflow: hidden;
}

.player_holder .player_list .item {
    width: 216px;
    height: 145px;
    position: relative;
}

.player_holder .player_list .item .status,
.player_holder .player_list .item .notifications_status {
    position: absolute;
    top: 8px;
    right: 8px;
}

.player_holder .player_list .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}

.upload_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding: 52px;
    overflow: hidden;
    background-color: rgba(228, 228, 228, 0.5);
    border: 2px dashed rgba(228, 228, 228, 0.5);
    border-radius: 16px;
    text-align: center;
}

.blog_archive .upload_box {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.upload_box .box_title {
    font-size: 18px;
    line-height: 1.33333;
    margin-bottom: 24px;
}

.sorting .left {
    display: flex;
    align-items: center;
}

.sorting .check_box {
    position: relative;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 2px solid #E4E4E4;
    transition: all .25s;
    cursor: pointer;
    margin-left: 20px;
    display: grid;
    place-items: center;
    color: white;
}

.sorting .checked {
    background: var(--primary);
    border: 2px solid transparent;
}

.sorting .check_box .fa-check {
    display: none;
}

.sorting .checked .fa-check {
    display: block;
}

.check_box:hover {
    border: 2px solid var(--primary);
}

.product_card .icon_btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 24px;
}

.icon_btn .btn_icon {
    font-size: 18px;
    color: var(--secondary_text);
    padding: 5px;
}

.icon_btn .btn_icon:hover {
    font-size: 18px;
    color: var(--primary);
}

.player_list_head {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}

.player_list_head .right {
    display: flex;
    align-items: start;
}

.player_list_head .right .avatar {
    position: relative;
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    margin-left: 30px;
    border-radius: 50%;
    border: 3px solid #ffffff;
    -webkit-box-shadow: 0 0 0 2px #6C5DD3;
    box-shadow: 0 0 0 2px #6C5DD3;
}

.player_list_head .detail {
    display: flex;
    flex-direction: column;
}

.player_list_head .detail .head {
    display: flex;
    align-items: center;
    position: relative;
}

.player_list_head .detail .head .btn_icon {
    font-size: 32px;
    margin-right: 100px;
    cursor: pointer;
}

.player_list_head .title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 24px;
}

.player_list_head .title i {
    color: var(--primary);
}

.player_list_head .big_title {
    font-size: 32px;
    line-height: 1.39583;
    font-weight: 500;
    margin: 8px 0;
    letter-spacing: -1px;
}

.address,
.player_list_head .text {
    line-height: 1.71429;
    color: #B2B3BD;
}

.address a,
.player_list_head .text a {
    color: #B2B3BD;
}

.player_list_head .drop_menu {
    position: absolute;
    top: -32px;
    right: -24px;
    width: 420px;
    padding-bottom: 16px;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 25px 40px rgba(27, 29, 33, 0.3);
    visibility: hidden;
    opacity: 0;
    transition: all .25s;
    z-index: 9;
}

.player_list_head .drop_menu_open {
    visibility: visible;
    opacity: 1;
}

.player_list_head .drop_menu .head {
    display: flex;
    align-items: center;
    height: 92px;
    padding: 0 52px 0 30px;
}

.player_list_head .drop_menu .head .btn_icon {
    margin-right: auto;
}

.player_list_head .drop_menu .group {
    display: flex;
    flex-direction: column;
    max-height: 336px;
    padding: 0 16px;
    overflow: auto;
    box-sizing: border-box;
}

.player_list_head .drop_menu .group .item {
    display: flex;
    align-items: center;
    height: 112px;
    padding: 0 18px;
    border-radius: 16px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.33333;
    color: var(--primary_text);
    transition: all .25s;
    cursor: pointer;
}

.player_list_head .drop_menu .group .active {
    color: var(--white);
    background: var(--primary);
}

.player_list_head .drop_menu .group .item .title {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.33333;
}

.player_list_head .drop_menu .group .item .avatar {
    width: 60px;
    height: 60px;
    margin-left: 20px;
    border: 2px solid #ffffff;
    border-top-color: rgb(255, 255, 255);
    border-right-color: rgb(255, 255, 255);
    border-bottom-color: rgb(255, 255, 255);
    border-left-color: rgb(255, 255, 255);
    box-shadow: 0 0 0 2px #6C5DD3;
    transition: all .25s;
    position: relative;
}

.player_list_head .drop_menu .group .item .avatar img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--radius_oval);
}

.player_list_head .drop_menu .group .item .online:before {
    content: "";
    position: absolute;
    top: -3px;
    left: -3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #7FBA7A;
}

.author_big {
    align-items: center;
    position: relative;
    padding: 48px;
    background: #ffffff;
    border-radius: 24px;
    margin-top: -200px;
    justify-content: space-between;
    margin-bottom: 50px;
}

.author_big:before {
    content: "";
    position: absolute;
    top: 16px;
    left: 16px;
    right: 16px;
    bottom: -16px;
    z-index: -1;
    background: #F0F3F6;
    opacity: .91;
    -webkit-filter: blur(86px);
    filter: blur(86px);
    border-radius: 24px;
}

.author_big .author_detail {
    align-items: center;
}

.author_big .author_detail .avatar {
    flex-shrink: 0;
    width: 124px;
    height: 124px;
    margin-left: 32px;
    border-width: 7px;
    box-shadow: 0 0 0 4px #0049C6;
    position: relative;
    border-radius: 50%;
    padding: 5px;
    box-sizing: border-box;
}

.author_big .author_detail .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.author_big .author_detail .status:before {
    content: "";
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    top: -6px;
    left: -6px;
    width: 32px;
    height: 32px;
    background: #7FBA7A;
    border: 2px solid #ffffff;
}

.author_big .author_detail .detail .title {
    font-size: 48px;
    line-height: 1.39583;
    font-weight: 600;
    letter-spacing: -1px;
}

.author_big .author_detail .detail .title i {
    font-size: 32px;
    margin-right: 16px;
}

.author_big .author_detail .detail .sub_title {
    align-items: center;
    gap: 30px;
    margin-left: 24px;
    font-size: 18px;
    line-height: 1.33333;
}

.author_big .author_action .btn_gray {
    width: 56px;
    height: 56px;
    padding: 0;
    display: grid;
    place-items: center;
}

.tab_menu {
    display: flex;
    margin-bottom: 42px;
    gap: 24px;
}

.tab_menu .item {
    position: relative;
    padding: 12px 24px;
    font-size: 18px;
    line-height: 1.33333;
    font-weight: 500;
    color: #11142D;
    transition: color .25s;
    cursor: pointer;
}

.tab_menu .item:hover {
    color: var(--secondary_text);
}

.tab_menu .item:first-child {
    padding-right: 0;
}

.tab_menu .active:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: #3F8CFF;
    -webkit-transition: width .25s;
    -o-transition: width .25s;
    transition: width .25s;
}

.chat {
    flex-direction: row;
}

.chat .chat_side {
    width: 375px;
    border-left: 1px solid #E4E4E4;
    overflow: auto;
    padding: 32px 0;
    box-sizing: border-box;
}

.chat .chat_side .side_list {
    padding: 20px;
    margin-bottom: 32px;
    border-bottom: 1px solid #E4E4E4;
}

.chat .chat_side .side_list:last-child {
    margin-bottom: 0;
    border-bottom: 1px solid transparent;
}

.chat .chat_side .side_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 32px;
    padding: 0 45px 0 20px;
    position: unset;
    font-size: 12px;
    font-weight: 500;
    color: #808191;
    cursor: pointer;
    transition: color .25s;
}

.chat .chat_side .side_list .item {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    height: 80px;
    padding: 0 20px 0 22px;
    border-radius: 16px;
    border: 1px solid #F0F3F6;
    color: #11142D;
    transition: all .25s;
    cursor: pointer;
}

.chat .chat_side .side_list .item:hover {
    background: rgba(228, 228, 228, 0.5);
    border-color: transparent;
}

.chat .chat_side .side_list .item .avatar {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-width: 3px;
    box-shadow: 0 0 0 2px #0049C6;
    transition: border-color .25s;
    position: relative;
    border-radius: 50%;
    padding: 2px;
    margin-left: 10px;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.chat .chat_side .side_list {
    padding-top: 12px;
}

.chat .chat_side .side_list .item .online:before {
    content: "";
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    left: -5px;
    width: 16px;
    height: 16px;
    background: #7FBA7A;
    border: 2px solid #ffffff;
}

.chat .chat_side .side_list .item .detail {
    display: flex;
    flex-direction: column;
}

.chat .chat_side .side_list .item .detail .title {
    font-weight: 500;
}

.chat .chat_side .side_list .item .detail .sub_title {
    font-size: 13px;
    font-weight: 500;
    color: #808191;
    transition: color .25s;
}

.chat .chat_side .side_list .item .status {
    display: flex;
    align-items: center;
    margin-right: auto;
}

.chat .chat_side .side_list .item .status .avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    box-sizing: border-box;
}

.chat .chat_side .side_list .item .status .avatar:before {
    content: unset;
}

.chat .chat_side .side_list .item .status .counter {
    background: #FF754C;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 12px;
    color: #ffffff;
}

.chat .chat_main {
    width: calc(100% - 380px);
    max-height: 100%;
    padding: 32px 64px;
    overflow: auto;
    box-sizing: border-box;
}

.chat .chat_main .chat_top {
    display: flex;
    align-items: center;
    margin-bottom: 32px;
}

.chat_main .chat_top .chat_info {
    font-size: 40px;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: -1px;
}

.chat_main .chat_top .chat_action {
    margin-right: auto;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 25px;
}

.chat_main .chat_top .chat_action .btn_icon {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    transition: opacity .25s;
    font-size: 20px;
    margin-left: 40px;
}

.chat_main .chat_top .chat_action .btn_icon:last-child {
    margin-left: 0;
}

.chat_main .chat_holder .chat_list {
    margin-bottom: 32px;
    display: flex;
    flex-direction: column;
}

.chat_main .chat_holder .chat_list .chat_item {
    margin-bottom: 24px;
    display: flex;
}

.chat_main .chat_holder .chat_list .chat_item .avatar {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    margin-left: 20px;
}

.chat_item .chat_head {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 500;
}

.chat_item .chat_head .chat_date {
    margin-right: 16px;
    color: #808191;
}

.chat_item .chat_result {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: -8px;
}

.chat_item .chat_result .chat_text {
    position: relative;
    min-width: 180px;
    margin-top: 8px;
    padding: 16px 24px;
    border-radius: 20px;
    border-bottom-left-radius: 20px;
    background: rgba(228, 228, 228, 0.5);
    line-height: 1.71429;
    color: #808191;
    cursor: pointer;
    transition: all .25s;
}

.chat_item .chat_result .chat_text:not(:last-child) {
    border-bottom-right-radius: 4px;
}

.chat_item .chat_result .player_holder {
    max-width: 490px;
    margin-top: 8px;
}

.chat_item .chat_result .player_holder .player_image {
    height: 220px;
}

.chat_item .chat_result .chat_text:hover {
    background: #3F8CFF;
    color: #ffffff;
}

.register_body {
    width: 100%;
    height: 100vh;
    display: grid;
    place-items: center;
    position: relative;
    padding: 30px;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}

.register_body:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(148.37deg, rgba(58, 62, 69, 0.0001) 29.5%, rgba(27, 29, 33, 0.707195) 74.66%);
    background: -o-linear-gradient(148.37deg, rgba(58, 62, 69, 0.0001) 29.5%, rgba(27, 29, 33, 0.707195) 74.66%);
    background: linear-gradient(301.63deg, rgba(58, 62, 69, 0.0001) 29.5%, rgba(27, 29, 33, 0.707195) 74.66%);
}

.register_container {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 960px;
}

.register_container .form {
    position: relative;
    flex-shrink: 0;
    width: 464px;
    padding: 48px 48px 64px;
    box-sizing: border-box;
    border-radius: 40px;
    background: #ffffff;
}

.register_container .form:before {
    content: "";
    position: absolute;
    top: 30px;
    left: 14px;
    right: 14px;
    bottom: -30px;
    z-index: -1;
    background: #1B1D21;
    opacity: .8;
    -webkit-filter: blur(32.6194px);
    filter: blur(32.6194px);
    border-radius: 40px;
}

.register_container .form .header_btn {
    position: absolute;
    top: 24px;
    left: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    -webkit-box-shadow: 0 2px 7px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.1);
    transition: all .25s;
    font-size: 18px;
    color: var(--dark-500);
}

.register_container .form .register_title {
    font-size: 40px;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: -1px;
    margin-bottom: 20px;
}

.cart_holder .register_text,
.register_container .form .register_text {
    display: flex;
    align-items: center;
    margin-bottom: 42px;
    font-size: 12px;
    font-weight: 500;
}

.cart_holder .register_text a,
.register_container .form .register_text a {
    margin-right: 16px;
    color: #3F8CFF;
    transition: color .25s;
    cursor: pointer;
}

.register_container .form .btn_primary {
    min-height: 56px;
}

.register_left .logo {
    margin-bottom: 27px;
}

.register_left {
    width: 240px;
    margin-right: auto;
}

.register_left .logo img {
    max-width: 200px;
    height: 60px;
    object-fit: contain;
}

.register_left .register_info {
    margin-bottom: 32px;
    margin-left: -20px;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    text-shadow: 0 0 2px rgba(50, 50, 50, 0.5);
}

.register_body .card_list {
    display: flex;
    flex-direction: column;
    margin-bottom: 22px;
    gap: 0;
}

.register_body .card_list .product_card {
    background: rgba(27, 29, 33, 0.5);
    color: #ffffff;
    width: 100%;
}

.register_body .card_list .product_card .card_img {
    width: 72px;
}

.register_body .card_list .product_card .card_detail {
    width: calc(100% - 75px);
}

.register_body .card_list .product_card:not(:last-child) {
    margin-bottom: 16px;
}

.chat_form .chat_form_holder {
    background: rgba(228, 228, 228, 0.25);
    border-radius: 12px;
}

.chat_form .form_head {
    display: flex;
    padding: 24px 16px;
    border-bottom: 1px solid #F0F3F6;
}

.chat_form .form_head {
    display: flex;
    padding: 24px 16px;
    border-bottom: 1px solid #F0F3F6;
}

.chat_form .form_head .form_control {
    display: flex;
    flex-wrap: wrap;
    margin: -16px -16px 0 auto;
}

.chat_form .form_head .form_control i {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin: 16px 16px 0 0;
    border-radius: 4px;
    cursor: pointer;
    background: #F0F3F6;
    transition: all .25s;
    font-size: 12px;
    color: #808191;
}

.chat_form .form_head .form_control i:hover {
    color: #1B1D21;
}

.chat_form .form_head .form_control .active {
    background: #1B1D21;
    color: #ffffff;
}

.chat_form .form_head .chat_add {
    position: relative;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-right: 30px;
    border-radius: 50%;
    background: #1B1D21;
    color: #ffffff;
    cursor: pointer;
    transition: all .25s;
}

.chat_form .form_middle {
    padding: 16px;
}

.chat_form .form_middle textarea {
    width: 100%;
    height: 110px;
    border: none;
    background: none;
    resize: none;
    font-size: 14px;
    overflow: auto;
    font-weight: 400;
    font-family: var(--font_primary);
}

.form_btn_holder {
    display: flex;
    margin: 16px 0;
}

.faq_holder {
    margin: 80px auto;
}

.grid_2 .faq_grid,
.faq_holder .faq_grid {
    align-items: center;
    gap: 10px;
}

.faq_grid .card {
    width: 700px;
    border: 1px solid var(--secondary_back);
    border-radius: var(--radius_10);
    align-items: baseline;
    padding: 10px;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
    background: #ffffff;
}

.faq_grid .card:before {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
    position: absolute;
    z-index: -1;
    background: #F0F3F6;
    filter: blur(43px);
    border-radius: 24px;
    transition: background .25s;
}

.faq_grid .select:before {
    background: #c0cdd9;
}

.faq_grid .card .card_img {
    width: 70px;
    display: grid;
    place-items: center;
}

.faq_grid .card .card_img .num {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    font-size: var(--font_l);
    background: var(--secondary_back);
    border-radius: var(--radius_10);
}

.faq_grid .select .card_img .num {
    background: var(--primary_text);
    color: var(--white);
}

.faq_grid .card .card_detail {
    width: calc(100% - 75px);
}

.faq_grid .card .card_detail .card_head {
    align-items: center;
    justify-content: space-between;
}

.faq_grid .card .card_detail .card_head .btn_text {
    margin: 0;
    padding: 5px;
    color: var(--secondary_text);
}

.faq_grid .card .card_detail .card_head .title {
    width: calc(100% - 40px);
    color: var(--primary_text);
    margin-bottom: 8px;
    font-size: 18px;
    line-height: 1.33333;
    font-weight: 400;
}

.faq_grid .card .card_detail .text {
    transform: scale(0);
    overflow: hidden;
    height: 0;
    align-items: flex-start;
    text-align: justify;
    line-height: 1.8;
    color: var(--secondary_text);
    word-spacing: 4px;
}

.faq_grid .card .card_detail .text p {
    text-align: justify;
}

.score {
    display: block;
    background: #fff;
    border-radius: 10px;
    margin: 20px 0;
    padding: 15px;
}

.score .title {
    font-weight: bold;
    cursor: context-menu;
}

.score span {
    font-weight: 200;
    font-size: 10pt;
    cursor: pointer;
}

.score i {
    margin: 5px;
    font-size: 18px;
}

/************ COMMENT ************/

.comment {
    display: flex;
    background: #fff;
    align-items: start;
    justify-content: space-between;
    width: 100%;
    padding: 20px;
    margin: 20px 0;
    box-sizing: border-box;
    border-radius: 10px;
}

.comment .label {
    display: block;
    font-size: 14pt;
    font-weight: 600;
    margin-bottom: 15px;
    width: fit-content;
}

.comment .comment_side {
    width: 270px;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 5px;
}

.comment .comment_main {
    display: flex;
    flex-direction: column;
    width: calc(100% - 270px);
}

.comment .comment_item {
    display: block;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    margin-top: 15px;
    border-top: 1px solid #D9D9D9;
}

.comment .comment_item_sub {
    width: calc(100% - 35px);
    margin-right: 35px;
}

.comment .comment_item:first-child {
    border-top: none;
}

.comment .comment_item .comment_item {
    padding: 5px 30px;
    background: #ecf0f1;
}

.comment .comment_item .comment_head {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
}

.comment .comment_item .comment_head .fa-square {
    font-size: 6px;
}

.comment .comment_item .comment_head .comment_name {
    font-weight: 500;
    color: #807272;
}

.comment .comment_item .comment_middle {
    display: flex;
    align-items: baseline;
    margin-top: 10px;
}

.comment .comment_item .comment_head .date {
    font-size: 8pt;
    color: #a6a6a6;
}

.comment .comment_item .comment_head .is_buy {
    background-color: var(--secondary_back);
    padding: 2px 6px;
    font-size: 9pt;
    border-radius: 15px;
    margin: 0 8px;
}

.comment .comment_item .comment_head .not_is_buy {
    background-color: var(--secondary_border);
    color: var(--secondary_text);
    padding: 2px 6px;
    font-size: 9pt;
    border-radius: 15px;
    margin: 0 8px;
}

.comment .comment_item .replay {
    border-bottom: 2px solid var(--primary);
}

.comment .comment_item .comment_text {
    line-height: 1.7;
    display: block;
    width: 100%;
    text-align: justify;
    font-size: 11pt;
    padding: 8px 0;
    box-sizing: border-box;
}

.comment .comment_item .comment_footer {
    display: flex;
    margin-top: 3px;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    box-sizing: border-box;
}

.form_btn_holder {
    width: 100%;
}

.comment_form {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    position: fixed;
    bottom: 0;
    top: 0;
    margin: auto;
    left: 0;
    right: 0;
    scale: 0;
    max-width: 500px;
    width: 100%;
    height: fit-content;
    max-height: calc(100% - 20px);
    z-index: 10;
    flex-shrink: 0;
    padding: 48px 48px 64px;
    border-radius: 40px;
    background: #ffffff !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

.comment_form:before {
    content: "";
    position: absolute;
    top: 30px;
    left: 14px;
    right: 14px;
    bottom: -30px;
    z-index: -1;
    background: #ffffff !important;
    opacity: .8;
    -webkit-filter: blur(32.6194px);
    filter: blur(32.6194px);
    border-radius: 40px;
}

.comment_form .form_head {
    font-size: 40px;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: -1px;
    margin-bottom: 20px;
}

.comment_form .close {
    position: absolute;
    top: 24px;
    left: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    -webkit-box-shadow: 0 2px 7px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.1);
    transition: all .25s;
    font-size: 18px;
    color: var(--dark-500);
    cursor: pointer;
}

.comment_form .comment_score {
    margin: 8px 0;
    padding: 5px 15px;
}

.comment_form .comment_score i {
    cursor: pointer;
    color: #f39c12;
}

.comment_form .text_area {
    display: block;
    margin: 8px auto;
    padding: 8px 16px;
    width: calc(100% - 15px);
    min-width: calc(100% - 15px);
    max-width: calc(100% - 15px);
    min-height: 150px;
    box-sizing: border-box;
}

.comment_form .btn_red_light {
    background-color: var(--red--300);
}

.comment_form_product {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    gap: 20px;
    border-bottom: 1px solid #e1e1e1;
}

.comment_form_product img {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    object-fit: contain;
}

.comment_form_product .title {
    width: calc(100% - 80px);
    color: #2C3E50;
    font-weight: 500;
    line-height: 150%;
}

.product_page .player_big {
    width: calc(100% - 405px);
}

.product_page .player_list {
    width: 400px;
    height: auto !important;
    border-right: 1px solid var(--secondary_border);
}

.item_cost_off {
    display: block;
    margin-left: 15px;
    color: #999999;
    font-weight: 600;
}

.discount {
    display: flex;
    align-items: center;
    color: var(--secondary_text);
    border-radius: var(--radius_10);
    box-sizing: border-box;
    font-size: 16pt !important;
}

.item_cost {
    display: block;
    margin-left: 15px;
    color: var(--secondary);
    font-weight: 600;
}

.item_cost .cost {
    text-align: center;
    display: inline-block;
    width: calc(50% - 5px);
    text-decoration: line-through;
    font-size: 12pt;
    color: #BDBDBD;
    font-weight: 200;
}

.item_cost span {
    margin-left: 5px;
    font-size: 18pt;
}

.discount .user_status span {
    color: var(--secondary_text);
    font-size: 12pt !important;
}

.buy_body {
    width: 100%;
    padding: 24px;
    box-sizing: border-box;
    gap: 10px;
}

.buy_body .service {
    background: var(--secondary_border);
    border-radius: var(--radius_16);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    -webkit-box-shadow: 0 5px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 2px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--secondary_back);

}

.buy_body .service .item {
    height: auto;
    display: flex;
    gap: 10px;
}

.buy_body .service .item i {
    text-align: center;
    width: 20px;
}

.buy_body .service .item a {
    color: var(--primary_text);
}

.buy_body .options {
    gap: 10px;
}

.buy_body .options .color_holder {
    margin-right: 20px;
}

.buy_body .options .color_holder div {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
    cursor: pointer;
}

.buy_body .options .color_holder div i {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border-radius: 10px;
    border: 3px solid #dedede;
    color: var(--secondary);
    text-shadow: 0 0 2px #000000;
}

.buy_body .options .color_holder .selected i {
    border-color: var(--secondary);
}

.buy_body .options .item_cost {
    margin-right: 24px;
}

.buy_body .options .item_cost .cost_off {
    display: block;
    font-size: 14pt;
    font-weight: 500;
    color: var(--dark-700);
    margin-bottom: 5px;
}

.buy_body .options .item_cost .cost {
    display: block;
    color: var(--secondary);
    text-decoration: line-through;
}

.buy_body .btn_primary,
.buy_body .btn_secondary {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 20px;
    padding: 25px 0;
    font-size: 13pt;
}

.buy_body .options .item_title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: var(--margin_x);
    margin-bottom: var(--margin_s);
    font-size: var(--font_x);
    color: var(--primary_text);
    font-weight: 500;
}

.number_part {
    margin-right: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.number_part span {
    display: inline-block;
    min-width: 50px;
    vertical-align: middle;
    padding: 5px;
    text-align: center;
    font-size: 14pt;
    font-weight: bold;
}

.item_middle .address_select,
.number_part .minus,
.number_part .plus {
    display: inline-block !important;
    vertical-align: middle !important;
    width: 30px !important;
    height: 30px !important;
    padding: 5px !important;
    margin: 0 !important;
    font-size: 15pt;
    box-sizing: border-box;
    text-align: center;
}

.scroll_small_img {
    display: flex;
    align-items: center;
    position: absolute;
    right: 10px;
    bottom: 10px;
}

.scroll_small_video {
    bottom: 50px;
}

.scroll_small_img .small_img_holder {
    display: block;
    width: 350px;
    overflow-x: hidden;
}

.scroll_small_img .small_img_scroller {
    display: flex;
    align-items: center;
    gap: 5px;
}

.scroll_small_img .small_img_scroller .main_img {
    width: 100px !important;
    height: 75px;
    border-radius: 12px !important;
    cursor: pointer;
    background: var(--white);
    box-shadow: 0 0 6px 2px #E4E4E455;
    display: grid;
    place-items: center;
}

.scroll_small_img .small_img_scroller .main_img {
    font-size: 22px;
    color: var(--primary);
}

.scroll_small_img .small_img_scroller .selected {
    box-shadow: 0 0 6px 2px #E4E4E4;
}

.scroll_small_img .arrow {
    z-index: 2;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--blue);
    display: grid;
    place-items: center;
    cursor: pointer;
}

.scroll_small_img .fa-chevron-right {
    margin-left: -12px;
}

.scroll_small_img .fa-chevron-left {
    margin-right: -12px;
}

/************ CART ************/

.cart_holder {
    display: flex;
    align-items: flex-start;
    width: 100%;
    justify-content: space-between;
    gap: 10px;
    margin: 20px 0;
}

.cart_holder .cart_list_holder {
    width: calc(100% - 360px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}

.cart_holder .cart_product_list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 10px;
    background: #fff;
}

.cart_holder .cart_holder_title {
    font-size: 12pt;
    color: #000000;
    font-weight: 600;
    width: 100%;
    box-shadow: inset 0 -1px 0 0 #E4E4E4;
    padding: 10px 0;
    margin-bottom: 8px;
}

.cart_holder .cart_product_list .item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    background: #fff;
    border-radius: 10px;
    border-bottom: 1px solid #ecf0f1;
    padding: 10px;
    gap: 10px;
    box-sizing: border-box;
}

.cart_holder .cart_product_list .item:last-child {
    border-bottom: 1px solid transparent;
}

.cart_holder .item .item_img {
    width: 80px;
    height: 80px;
    border-radius: 10px;
}

.cart_holder .item .item_img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cart_holder .item .item_middle {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.cart_holder .item .item_detail {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: calc(100% - 80px);
}

.cart_holder .item .item_detail .title {
    font-size: 12pt;
    margin: 5px 0;
    color: #000000;
    line-height: 180%;
}

.cart_holder .item .item_detail .detail {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cart_holder .item .item_detail .detail span {
    font-size: 12pt;
    color: #807272;
}

.cart_holder .item .item_footer {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cart_holder .item .item_footer .fa-circle {
    font-size: 8px;
    color: #a6a6a6;
    margin-left: 15px;
    margin-right: 5px;
}

.cart_holder .item .item_footer .count .number_part {
    margin-right: 0;
}

.cart_holder .item .item_footer .count .number_part span {
    width: 30px;
}

.cart_holder .item .item_footer .cost {
    width: auto;
}

.cart_holder .item .item_message {
    padding: 5px 8px;
    border-radius: 10px;
    font-size: 8pt;
    color: #2c3e50;
    border: 1px solid;
    background: #2c3e5022;
}

.cart_holder .item .item_message_red {
    color: var(--orange--500);
    background: var(--orange--100);
}

.cart_holder .item .item_message_green {
    color: var(--green_700);
    background: var(--green_100);
}

.cart_holder .cart_payment {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 350px;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 10px;
    background: #fff;
}

.cart_holder .cart_payment .payment_item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 10px;
    margin: 20px 0;

}

.cart_holder .cart_payment .payment_item .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 0;
    box-sizing: border-box;
}

.cart_holder .cart_payment .item strong {
    font-weight: 600;
    font-size: 12pt;
}

.cart_holder .cart_payment .payment_action {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px;
}

/****************************************************************************/

@media screen and (max-width: 1366px) {
    .blog_archive {
        flex-direction: column;
        padding: 20px;
    }

    .blog_archive .col_8 {
        width: 100%;
        padding-left: 0;
    }

    .blog_archive .col_2 {
        width: 100%;
        padding-top: 20px;
    }

    .blog_archive .col_2 .holder {
        overflow: auto;
    }

    .blog_archive .col_2 .card_side {
        flex-direction: row;
        overflow: hidden;
        min-width: calc(8 * 200px);
    }

    .blog_archive .col_2 .card_side .product_card,
    .blog_archive .col_2 .card_side .card_user {
        width: 200px;
    }

    .blog_archive .col_2 .card_side .btn_gray {
        display: none;
    }
}

@media screen and (max-width: 1280px) {
    .category .category_list {
        flex-direction: column;
    }

    .category .category_list .category_card {
        width: 100%;
        margin: 0;
        margin-bottom: 32px;
    }

    .category_card .category_img {
        height: 350px;
    }

    .category_card .btn_slide {
        left: 40px;
        right: unset;
    }

    .category_list .list {
        width: 100%;
    }

    .category_item_sm .category_img {
        height: 200px;
    }

    .player_holder .holder {
        flex-direction: column;
    }

    .player_holder .player_big {
        width: 100%;
    }

    .player_holder .player_big .player_image {
        height: 400px;
    }

    .player_holder .player_list {
        height: auto;
        width: 100%;
    }

    .player_holder .player_list .scroller {
        width: calc(245px * 8);
        flex-direction: row;
        flex-wrap: wrap;
    }

    .card_list .product_card {
        width: calc(50% - 24px);
    }

    .author_big {
        flex-direction: column;
        align-items: start;
    }

    .author_action {
        margin-right: 152px;
        gap: 5px;
    }
}

@media screen and (max-width: 1024px) {
    .side {
        position: fixed;
        right: -350px;
        top: 0;
        bottom: 0;
        margin: auto;
        background: #ffffff;
        z-index: 11;
        box-shadow: -10px 0 40px rgba(27, 29, 33, 0.3);
    }

    .side_active {
        width: 250px;
        right: 0;
    }

    .side_active .side_header .logo {
        display: flex;
    }

    .side_active .user_list .item .user_title,
    .side_active .menu .item span {
        visibility: visible;
        overflow: unset;
        opacity: 1;
        display: inline-block;
    }

    .main {
        width: 100%;
    }

    .main .top_main {
        padding: 0 40px;
    }

    .main .top_main .menu_bars {
        display: flex;
    }

    .side .side_banner {
        display: flex;
    }

    .main_container {
        padding: 40px;
    }

    .product_main .product_card {
        flex: 0 0 calc(50% - 24px);
        width: calc(50% - 24);
        margin-top: 12px;
    }

    .user_main {
        padding: 0;
    }

    .user_main .holder,
    .user_main .section_head {
        padding: 32px;
        box-sizing: border-box;
    }

    .user_main .section_head {
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .register_container .register_left {
        display: none;
    }

    .register_container .form {
        width: 400px;
        padding: 32px;
    }

    .section_slider .slider_card {
        max-width: calc(100vw - 160px);
    }

    .section_slider .slider_card {
        height: 450px;
    }

    .cart_holder .cart_list_holder {
        width: calc(100% - 260px);
    }

    .cart_holder .cart_payment {
        width: 250px;
    }
}

@media screen and (max-width: 850px) {
    .comment {
        flex-direction: column;
    }

    .comment .comment_side {
        align-items: start;
    }

    .comment .comment_side,
    .comment .comment_main {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .main_container {
        padding: 32px 24px 40px;
    }

    .product_main .product_card {
        flex: 0 0 100%;
        width: 100%;
        margin: 0;
        margin-bottom: 24px;
    }

    .main .top_main .dropdown {
        display: none;
    }

    .top_main_search input {
        display: none;
    }

    .top_main_search {
        width: auto;
        margin-left: 24px;
        margin-right: auto;
    }

    .top_main_action {
        margin-left: 24px;
    }

    .top_main_action .add_item {
        display: none;
    }

    .player_list_head .title {
        margin-left: auto;
        font-size: 13px;
        font-weight: 500;
        color: #808191;
    }

    .player_list_head .big_title {
        font-size: 18px;
    }

    .card_list .product_card {
        width: 100%;
    }

    .chat {
        flex-direction: column;
    }

    .chat .chat_main,
    .chat .chat_side {
        width: 100%;
        overflow: unset;
    }

    .chat .chat_main {
        padding: 20px;
    }

    .player_big .player_detail {
        padding: 32px 5px;
    }

    .player_big .player_detail .card_title {
        font-size: 18px;
    }

    .chat_form .form_btn_holder .btn_primary {
        width: 100%;
    }

    .chat_result .game .card_list .product_card {
        width: 100%;
    }

    .chat_main .chat_holder .chat_list .chat_item .avatar {
        width: 32px;
        height: 32px;
        margin-left: 12px;
    }

    .slider .slider_control {
        display: none;
    }

    .slider .slider_control_res {
        left: 24px;
        top: unset;
        bottom: 195px;
    }

    .slider .slider_control_res i {
        width: 32px;
        height: 32px;
    }

    .slider .slider_detail {
        padding: 40px 24px 160px;
    }

    .author_big .author_detail .detail .title {
        font-size: 24px;
    }

    .author_big .author_detail .detail .title i {
        font-size: 20px;
    }

    .author_big .author_detail .detail .sub_title {
        font-size: 13px;
    }

    .blog_archive .sorting,
    .profile .sorting {
        flex-direction: column;
        align-items: start;
        gap: 10px;
    }

    .blog_archive .sorting .sort_holder,
    .profile .sorting .sort_holder {
        position: relative;
    }

    .blog_archive .sorting .sort_holder .sort_current,
    .profile .sorting .sort_holder .sort_current {
        display: flex;
        width: 100%;
    }

    .blog_archive .sorting .sort_current,
    .profile .sorting .sort_current {
        width: 100%;
    }

    .blog_archive .sorting .list_selected,
    .profile .sorting .list_selected {
        width: 100%;
        position: relative;
    }

    .blog_archive .sorting .list_sort,
    .profile .sorting .list_sort {
        display: flex;
        visibility: hidden;
        opacity: 0;
        position: absolute;
        background: var(--primary);
        border-radius: 12px;
        padding: 10px;
        width: 100%;
        z-index: 5;
        top: 58px;
        box-sizing: border-box;
        left: 0;
        right: 0;
        margin: auto;
        flex-direction: column;
    }

    .profile .list_selected .list_sort {
        background: var(--gray_100);
    }

    .blog_archive .sorting .list_sort .btn_gray,
    .blog_archive .sorting .list_sort .btn_primary,
    .profile .sorting .list_sort .btn_gray,
    .profile .sorting .list_sort .btn_primary {
        color: var(--white);
        width: 100%;
    }

    .profile .list_selected .list_sort .btn_gray {
        background: rgba(228, 228, 228, 0.9);
        color: var(--gray_900);
    }

    .blog_archive .sorting .list_sort_open,
    .profile .sorting .list_sort_open {
        visibility: visible;
        opacity: 1;
    }


    .register_container .register_left {
        display: none;
    }

    .register_body {
        padding: 0;
    }

    .register_container {
        height: 100vh;
        overflow: hidden;
    }

    .register_container .form {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }

    .blog_archive .col_8 .blog_card {
        flex-direction: column;
        height: auto;
    }

    .blog_archive .col_8 .blog_card .card_inner {
        flex-direction: column;
        padding: 0;
        width: 100%;
    }

    .blog_archive .col_8 .blog_card .card_detail {
        width: 100%;
        padding: 10px;
    }

    .blog_archive .col_8 .blog_card .card_inner .card_img img,
    .blog_archive .col_8 .blog_card .card_inner .card_img {
        width: 100%;
        border-radius: 24px 24px 0 0;
    }

    .blog_archive .col_8 .blog_card .card_action {
        display: none;
    }

    .slider_card .detail .slider_title {
        font-size: 24px;
    }

    .blog_archive .upload_box {
        flex-direction: column;
        padding: 20px;
    }

    .cart_holder {
        flex-direction: column;
    }

    .cart_holder .cart_list_holder {
        width: 100%;
    }

    .cart_holder .cart_payment {
        width: 100%;
    }

    .inner_post_text .product_card .card_img {
        width: 100%;
        display: block;
    }

    .inner_post_text .product_card .card_middle {
        display: flex;
        width: 100%;
    }

    .footer_copyright {
        display: block;
    }

    .footer_copyright span {
        display: block;
        width: 100%;
        padding-bottom: 15px;
    }
}

@media screen and (max-width: 500px) {

    .cart_holder .item .item_footer {
        flex-direction: column-reverse;
        gap: 25px;
    }

    .cart_holder .item .item_footer .fa-circle {
        display: none;
    }
}