/* ---main--- */
.main_wr {display: flex; flex-direction: column; height: 100vh; max-width: 1250px; margin: 0 auto; padding: 0 10px; position: relative;}
.main {flex: 1 1 0; margin: 15px 0;}
.main_grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); grid-gap: 20px;
    grid-auto-flow: row dense; margin-bottom: 25px;}
.main_grid > *:not(.short_story) {grid-column: 1 / -1;}
.main_sect {display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;}
.main_sect h2 {font-size: 21px;}
.main_sect_link {padding: 4px 10px; border-radius: 10px; font-size: 14px; background: #367aff; color: #fff;}
.main_sect_link:hover {background: #306bdd;}

.main_seo {padding: 15px; margin-bottom: 15px; border-radius: 27px; border: 1px solid #2f3a4f;
    background: linear-gradient(44deg, #2e384d 30%, #22c57a54 100%); position: relative; overflow: hidden;}
.main_seo h1 {font-size: 18px;}
.main_seo_text {margin-top: 5px; font-size: 15px; color: #a0acbf;}
.main_seo_logo {position: absolute; right: 23px; bottom: 10px; width: 100px; height: 100px; opacity: 0.1;}

.main_cats {display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 15px;}
.main_cat_item {display: flex; align-items: center; gap: 10px; flex: 1 1 0; padding: 15px; white-space: nowrap; border-radius: 20px;}
.main_cat_item i {font-size: 20px;}
.main_cat_item img {width: 25px; height: 25px;}
.main_cat_item:hover {background: #29344d;}
.ycat {background: linear-gradient(44deg, #2e384d 30%, #c5b12254 100%);}
.ycat_text {color: #f1bd2b; font-weight: 500; line-height: 1;}
.gcat {background: linear-gradient(44deg, #2e384d 30%, #22c57a54 100%);}
.gcat_text {color: #62d755; font-weight: 500; line-height: 1;}
.bcat {background: linear-gradient(44deg, #2e384d 30%, #2281c554 100%);}
.bcat_text {color: #367aff; font-weight: 500; line-height: 1;}
.rcat {background: linear-gradient(44deg, #2e384d 30%, #c5225e54 100%);}
.rcat_text {color: #d7556c; font-weight: 500; line-height: 1;}

.speedbar {margin-bottom: 15px; font-size: 14px; color: #a0acbf; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.speedbar a {color: #a0acbf;}

.catmenu {display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; margin-bottom: 20px;}
.catmenu_item {display: block; padding: 7px 10px; font-size: 14px; background: #161f30; color: #a0acbf; border-radius: 13px; border: 1px solid #2f3a4f;}
.catmenu_item:hover {color: #62d755; background: #252f45;}
.cat_active {color: #62d755; background: #252f45;}

.nav_number {display: flex; flex-wrap: wrap; justify-content: center; gap: 7px;}
.nav_number a, .nav_number span {display: inline-block; min-width: 30px; height: 30px; line-height: 30px; text-align: center;
    background: #161f30; color: #a0acbf; border: 1px solid #2f3a4f; border-radius: 13px;}
.nav_number span {background: #62d755; color: #1c4318;}
.nav_number a:hover {background: #252f45;}

.footer {padding: 10px 0; border-top: 1px solid #2f3a4f70;}
.footer_logo {color: #62d755;}
.footer_links {display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 10px;}
.footer_links a {font-size: 15px; color: #a0acbf;}

/* ---header--- */
.header {display: flex; justify-content: space-between; align-items: center; padding: 10px 0;}
.logo {display: flex; gap: 6px; align-items: center; color: #fff;}
.logo img {width: 25px; height: 25px; -webkit-filter: drop-shadow(0px 0 10px #62d755); filter: drop-shadow(0px 0 10px #62d755);}
.head_btn {width: 37px; height: 30px; display: inline-flex; justify-content: center; align-items: center; font-size: 14px; background: #62d755;
    color: #1c4318; border-radius: 13px; cursor: pointer; position: relative;}
.head_btn:hover {background: #5bbb50;}

.search {display: flex; gap: 5px;}
.search input[type="text"], .search input[type="password"], .search input[type="email"] {border-radius: 14px;}
.search button {border-radius: 14px;}

.menu {position: absolute; top: calc(100% - -20px); right: 0; width: 280px; padding: 10px; background: #252f45; border-radius: 23px;
   border: 1px solid #2f3a4f; z-index: 10; display: none;}
.menu_nav {display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px;}
.menu_nav_item {display: flex; flex-direction: column; align-items: center; flex: 1 1 0; gap: 3px; padding: 12px 15px; color: #fff;
   border: 1px solid #2f3a4f; background: #2e384d; border-radius: 20px;}
.menu_nav_item:hover {background: #354057;}
.menu_nav_icong {font-size: 20px; color: #62d755;}
.menu_nav_iconb {font-size: 20px; color: #367aff;}
.menu_nav_icony {font-size: 20px; color: #f1bd2b;}

.user_menu_header {display: flex; gap: 15px; padding: 8px; background: #2e384d; border-radius: 23px;}
.user_menu_header:hover {background: #354057;}
.user_menu_photo {width: 40px; height: 40px; border-radius: 17px;}
.user_menu_login {color: #fff;}
.user_menu_t {font-size: 14px; color: #a0acbf;}
.user_menu_info {display: flex; flex-direction: column; justify-content: center; gap: 3px;}
.user_nav {display: flex; flex-direction: column; margin: 10px 0;}
.user_nav_item {display: flex; align-items: center; padding: 10px; gap: 10px; color: #fff; border-radius: 16px; font-size: 15px;}
.user_nav_item i {font-size: 20px;}
.user_nav_item:hover {background: #2e384d;}
.user_menu_footer {margin-top: 10px; text-align: center;}
.user_menu_footer a {font-size: 14px; color: #a0acbf;}
.user_menu_footer a:hover {color: #62d755;}

.menu_login {margin-bottom: 8px; margin-top: 15px;}
.menu_login button {width: 100%; justify-content: center;}
.menu_login_footer {display: flex; justify-content: space-between; margin-top: 10px;}
.menu_login_footer a {font-size: 14px; color: #a0acbf;}
.menu_login_footer a:hover {color: #62d755;}
	
/* ---short--- */
.short_story {display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px; position: relative; background: #252f45;
    border-radius: 24px; border: 1px solid #2f3a4f; overflow: hidden; transition: background 0.2s;}
.short_story:hover {background: #29344d;}
.short_poster {display: flex;}
.short_img {display: block; width: 100px; height: 100px; border-radius: 20px; z-index: 2;}
.short_img_back {position: absolute; left: 50%; top: 18px; width: 115px; height: 90px; transform: translateX(-50%); filter: blur(12px);
    opacity: 0.7; border-radius: 40px; z-index: 1;}
.short_meta {display: flex; flex-direction: column; justify-content: center; gap: 3px;}
.short_title {text-align: center; font-size: 15px; font-weight: 500; color: #fff; line-height: 1.1; display: -webkit-box; -webkit-box-orient: vertical;
    overflow: hidden; -webkit-line-clamp: 2;}
.mod_icon {position: absolute; right: 16px; top: 10px; padding: 4px 9px; font-size: 10px; font-weight: 600; background: #62d755; color: #1c4318;
    border-radius: 13px; box-shadow: 0 0 60px 20px rgb(34 197 94 / 33%);z-index: 3;}
.vers_app {text-align: center; font-size: 14px; color: #f1bd2b;}
.vers_android {text-align: center; font-size: 14px; color: #62d755;}

/* ---full--- */
.full_grid {display: grid; grid-template-columns: 450px minmax(0, 1fr); gap: 10px 30px;}
.poster_area {display: flex; gap: 10px; margin-bottom: 20px;}
.poster {width: 200px; height: 200px; aspect-ratio: 1 / 1;}
.poster img {display: block; border-radius: 36px;}
.dwn_link {display: flex; padding: 12px; gap: 8px; align-items: center; border-radius: 20px; background: #62d755; color: #101c33; line-height: 1;}
.dwn_link i {font-size: 20px;}
.dwn_link:hover {background: #5bbb50;}
.rating {display: flex; flex-direction: column; gap: 7px;}
.rating_item {display: flex; gap: 8px; padding: 10px 12px; align-items: center; border-radius: 20px; background: #2e384d; border: 1px solid #2f3a4f70;}
.rating_item:hover {background: #354057;}
.rating_item span {color: #fff;}
.rating_item_title {font-size: 14px; color: #a0acbf;}
.like {font-size: 20px; color: #62d755; -webkit-filter: drop-shadow(0px 0 10px #62d755); filter: drop-shadow(0px 0 10px #62d755);}
.dislike {font-size: 20px; color: #d7556c; -webkit-filter: drop-shadow(0px 0 10px #d7556c); filter: drop-shadow(0px 0 10px #d7556c);}
.fav {display: flex; gap: 5px;}
.fav_item i, .full_edit i {width: 38px; height: 38px; display: flex; justify-content: center; align-items: center; border-radius: 15px;
   background: #2e384d; color: #fff; border: 1px solid #2f3a4f70;}
.fav_item i:hover, .full_edit i:hover {background: #354057;}

.full_meta {display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px;}
.full_meta_line {display: flex; gap: 15px;}
.full_meta_item {display: flex; flex: 1 1 0; flex-direction: column;}
.full_meta_title {font-size: 15px; color: #a0acbf;}
.full_meta_gvalue {color: #62d755;}
.full_meta_bvalue {color: #367aff;}
.full_meta_yvalue {color: #f1bd2b;}
.full_meta_rvalue {color: #d7556c;}

.full_title {margin-bottom: 20px; font-size: 26px;}
.full_desc p {margin-bottom: 20px;}
.full_desc ol {padding: 0 24px; list-style: decimal outside; margin-bottom: 20px;}
.full_desc ul {padding: 0 24px; list-style: outside; margin-bottom: 20px;}
.full_desc a {color: #62d755;}

.download_btn {display: flex; align-items: center; gap: 15px; padding: 10px 15px; margin-bottom: 20px; border-radius: 20px; background: #2e384d;
   position: relative; overflow: hidden; border: 1px solid #2f3a4f70;}
.download_btn:hover {background: #354057;}
.download_btn_icon {font-size: 26px;}
.download_title {font-size: 19px; font-weight: 600; color: #fff;}
.download_info {font-size: 14px; color: #62d755;}
.download_icon {position: absolute; right: -8px; bottom: -7px; font-size: 54px; background: #22c55e36; color: #fdfdfd1a; border-radius: 100%;
    box-shadow: 0 0 60px 20px rgb(34 197 94 / 33%); transform: rotate(-21deg);}

.mod_info {margin-bottom: 20px; margin-top: 25px; padding: 15px; background: linear-gradient(44deg, #252f45 30%, #22c57a54 100%);
   border: 1px solid #2f3a4f; border-radius: 23px; position: relative;}
.mod_info_label {position: absolute; top: -15px; right: 6%; padding: 6px 10px; background: #62d755; color: #1c4318;
    border-radius: 13px; font-size: 14px;}
.mod_info ol {padding-left: 20px; list-style: decimal outside;}
.mod_info ul {padding-left: 20px; list-style: outside;}
    
.faq {padding: 15px; margin-top: 25px; background: linear-gradient(44deg, #252f45 30%, #2281c554 100%); border-radius: 23px;
   border: 1px solid #2f3a4f; position: relative;}
.faq_label {position: absolute; top: -15px; right: 6%; padding: 6px 10px; background: #367aff; color: #101c33; border-radius: 13px; font-size: 14px;}
.faq_area {display: flex; flex-direction: column; gap: 8px;}
.faq_icon {position: absolute; right: 23px; bottom: 10px; font-size: 100px; color: #fdfdfd0f; transform: rotate(-21deg);}
.faq_line {display: flex; gap: 6px;}
.faq_num {width: 20px; height: 20px; display: flex; flex-shrink: 0; justify-content: center; align-items: center;
   background: #367aff; border-radius: 100%; font-size: 14px;}
   
.xfieldimagegallery {max-width: 100%; display: flex; flex-wrap: nowrap; white-space: nowrap; overflow: hidden;
   overflow-x: auto; gap: 10px; padding-bottom: 5px;}
.xfieldimagegallery img {width: 260px; border-radius: 20px; display: block;}
.xfieldimagegallery::-webkit-scrollbar {height: 5px; border-radius: 15px; background-color: #252f45;}
.xfieldimagegallery::-webkit-scrollbar-thumb {border-radius: 15px; background-color: #354057;}
.xfieldimagegallery::-webkit-scrollbar-track {border-radius: 15px; background-color: #252f45;}

.comments_grid {display: grid; grid-template-columns: 450px minmax(0, 1fr);gap: 30px;}

/* ---comment--- */
.comment_item {background: #252f45; padding: 10px; margin-bottom: 10px; border-radius: 23px; border: 1px solid #2f3a4f;}
.comment_header {display: flex; gap: 10px; margin-bottom: 8px;}
.comment_header_right {margin-left: auto;}
.comment_header_right a {margin-left: 3px; color: #a0acbf;}
.comment_login a {color: #fff;}
.comment_date {font-size: 14px; color: #a0acbf;}
.comment_avatar {width: 37px; height: 37px; border-radius: 13px;}
.comment_footer {display: flex; flex-wrap: wrap; gap: 3px 15px; font-size: 15px; margin-bottom: 20px; margin-left: 8px;}
.comment_footer a {color: #fff;}
.comment_footer a i {margin-right: 3px;}
.comment_reply a {color: #62d755;}
.lastcomments_title {margin-top: 8px;}
.lastcomments_title a {display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1;}
.mass_comments_action {display:none;}

/* ---user--- */
.userinfo {display: flex; flex-direction: column; align-items: center; max-width: 600px; margin-left: auto; margin-right: auto;}
.userinfo_img {width: 200px; aspect-ratio: 1 / 1; display: block; border-radius: 36px;}
.userinfo_title {margin: 10px 0; font-size: 26px; text-align: center;}

.userinfo_meta {width: 100%; display: flex; flex-wrap: wrap; gap: 10px; padding: 10px; border-radius: 23px; background: #252f45;
   border: 1px solid #2f3a4f;}
.userinfo_meta_item {display: flex; flex: 1 1 0; flex-direction: column; align-items: center; padding: 10px; background: #2e384d;
   white-space: nowrap; border-radius: 16px;}
.pm_btn {margin-top: 15px; width: 100%; padding: 10px; font-size: 15px; text-align: center; background: #62d755; color: #101c33;
    border-radius: 15px; font-weight: 400;}
.userinfo_set {width: 100%; display: flex; flex-direction: column; margin-top: 25px; gap: 15px; padding: 15px; border-radius: 23px;
    background: #252f45; border: 1px solid #2f3a4f; position: relative;}
.userinfo_set_label {position: absolute; top: -15px; right: 6%; padding: 6px 10px; background: #62d755; color: #1c4318;
    border-radius: 13px; font-size: 14px;}
.userinfo_set button {justify-content: center;}

/* ---pm--- */
.pm_area {display: flex; flex-direction: column; max-width: 800px; width: 100%; margin-left: auto; margin-right: auto;}
.pm_box {padding: 15px; margin-bottom: 20px; border-radius: 23px; background: #252f45; border: 1px solid #2f3a4f70;}
.pm_buttons {display: flex; gap: 8px;}
.pm_buttons a {flex: 1 1 0; padding: 10px; text-align: center; background: #2e384d; color: #fff; border-radius: 16px;}
.pm_buttons a:hover {background: #354057;}
.pm_stats {margin-top: 15px;}
.pm_progress_bar {background: #2e384d; margin-bottom: 10px; border-radius: 8px;}
.pm_progress_bar span {background: #367aff; font-size: 0; height: 10px; border-radius: 8px; display: block; overflow: hidden;}
.pm th {text-align: left; font-weight: 500; white-space: nowrap;}
.pm th.pm_checkbox {text-align: center;}
.pm_last_message, .pm_last_date {font-size: 14px; color: #a0acbf;}
.pm td.pm_list, .pm th.pm_head {border-bottom: 1px solid #2f3a4f70; padding: 12px 8px;}
.pm td.pm_list.pm_icon, .userstop td, th.pm_head.pm_icon {border-bottom: none;}
table {border-collapse: collapse; border-spacing: 0;}
.pm_navigation {margin-top: 15px;}
.pm_reply {color: #62d755;}

/* ---other--- */
.dropdown {position: relative;}
.open .dropdown-menu, .open .dropdown-form {display: block;}
.mb_8 {margin-bottom: 8px;}
.mb_10 {margin-bottom: 10px;}
.mt_5 {margin-top: 5px;}
.form_submit {margin-top: 20px;}
.form_group {display: flex; gap: 10px;}
.addnews_btns {padding: 15px; border-radius: 23px; background: #252f45; border: 1px solid #2f3a4f;}
.admintag {display: grid; grid-gap: 5px 20px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); align-items: start; margin-bottom: 10px;}
.info_area {padding: 10px 15px; margin-bottom: 12px; background: #252f45; border-radius: 23px; border: 1px solid #2f3a4f;}
.info_area b {color: #62d755;}
.info_area a {color: #62d755;}
.searchtable {display: flex; gap: 7px; margin-bottom: 10px;}

.stats_row {display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; white-space: nowrap;}
.stats_item {flex: 1; padding: 15px; background: #252f45; border-radius: 23px;}
.stats_title {font-size: 15px;}
.stats_value {font-size: 18px;}
.stats_item span, .stats_item a {display: block; font-size: 13px; color: #a0acbf;}

/* ---adaptive--- */
@media screen and (max-width: 1040px) {
    .full_main {grid-template-columns: minmax(0, 1fr); grid-template-areas:"info" "downl" "faq" "related";}
}
@media screen and (max-width: 940px) {
  .comments_grid {grid-template-columns: minmax(0, 1fr);}
}
@media screen and (max-width: 880px) {
  .full_grid {grid-template-columns: minmax(0, 1fr);}
}
@media screen and (max-width: 650px) {
  .full_title {font-size: 20px;}
}