.if-main { display: grid; grid-template-columns: 65% 35%; grid-column-gap: 19px; } .if-left-top { display: grid; grid-template-columns: 50% 50%; grid-column-gap: 15px; } .if-thumbnail-img{ position: relative; border-radius: 15px; overflow: hidden; } .if-thumbnail__btn{ position: absolute; width: 100%; bottom: 0; left: 0; display: grid; grid-template-columns: 50% 50%; grid-column-gap: 0; } .if-thumbnail__btn a{ display: inline-block; padding: 8px 0 10px; text-align: center; font-size: 33px; font-family: "UTM HelvetIns", sans-serif; color: white; background: rgba(80, 80, 80, 0.9); } .if-thumbnail__btn a:hover{ color: white; text-decoration: none; background: rgba(244, 120, 32, 0.9)!important; } .btn-read-story{ background: rgba(244, 120, 32, 0.9)!important; } .if-desc__title, .if-desc__title h1{ font-family: "UTM HelvetIns", sans-serif; color: #f47820; font-size: 29px; text-transform: uppercase; } .if-desc__interact{ display: grid; grid-template-columns: 50% 50%; grid-column-gap: 15px; grid-row-gap: 15px; } .if-desc__interact a{ font-family: "Montserrat", sans-serif; color: #626262; font-size: 21px; } .if-desc__interact a:hover{ text-decoration: none; } .if-desc-title{ font-family: "Montserrat", sans-serif; color: #505050; font-size: 21px; font-weight: bold; } .if-desc-info{ font-family: "Montserrat", sans-serif; color: #505050; font-size: 17px; } .bxh-item{ display: grid; grid-template-columns: 25% auto; grid-column-gap: 8px; margin-top: 10px; padding: 3px; border: 1px solid #dedede; border-radius: 5px; } .bxh-item__thumb img{ aspect-ratio: 1/1; object-fit: cover; border-radius: 5px; } .bxh-item__info{ padding-right: 5px; } .bi__info-title{ font-size: 16px; font-weight: bold; } .bi__info-title a{ color: black; } .bi__info-title a:hover{ color: black; text-decoration: none; } .bi__info-cate{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; font-size: 14px; } .bi__info-bottom a{ background: #f47820; color: white; font-family: "UTM HelvetIns", sans-serif; font-size: 16px; padding: 0px 10px 3px; border-radius: 20px; } .bi__info-bottom a:hover{ color: white; text-decoration: none; } .if-left__desc{ font-family: "Montserrat", sans-serif; color: #505050; font-size: 17px; } .story-chapter__item{ display: grid; grid-template-columns: 75% 25%; grid-column-gap: 15px; } .story-chapter__link{ font-family: "Montserrat", sans-serif; color: #505050; font-size: 17px; } .story-chapter__link:hover{ color: #f47820; text-decoration: none; } .content-cmt{ border: 2px solid #fac097; border-radius: 15px; } .btn-success{ background: #f47820; color: white; font-family: "Montserrat", sans-serif; font-size: 19px; border-radius: 10px; border: none; text-transform: uppercase; } .btn-success:hover{ background: #f47820; color: white; } .chapter-list{ margin-top: 20px; } .chapter-list-select{ height: 50px; min-width: 50%; padding: 5px 15px; border-radius: 5px; font-family: "Montserrat", sans-serif; font-size: 17px; color: #2b2b2b; background: #ffe8d7; cursor: pointer; border: none; } .btn-next-chapter{ background: #f47820; color: white; height: 50px; font-family: "Montserrat", sans-serif; font-size: 21px; padding: 5px 15px; font-weight: bold; border-radius: 5px; } .btn-next-chapter:hover{ background: #f47820; color: white; text-decoration: none; } .game-top{ display: grid; grid-template-columns: 25% 75%; grid-column-gap: 15px; } .game-cat-item{ background: #f47820; color: white; padding: 3px 15px 5px; border-radius: 10px; display: inline-block; margin-top: 10px; } .game-cat-item:hover{ color: white; text-decoration: none; } .game-img-slider .slick-slide { margin: 0 5px; } .game-news-item{ grid-template-columns: 50% 50%; } .game-news-item .news-item__thumb img{ aspect-ratio: 2/1; } .game-news{ height: 670px; overflow-y: scroll; padding-right: 15px; } .game-news::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #cfcfcf; } .game-news::-webkit-scrollbar { width: 6px; background-color: #cfcfcf; } .game-news::-webkit-scrollbar-thumb { background-color: #f47820; cursor: pointer; } .social-like,.social-follow{ filter: grayscale(1); } .social-like.have-interacted,.social-follow.have-interacted{ filter: grayscale(0); } .mode-night .if-desc__interact a,.mode-night .if-desc__rating div,.mode-night .if-desc__tag div, .mode-night .if-left__desc,.mode-night .story-chapter__link,.mode-night .not_login,.mode-night .bxh-item__info div, .mode-night .if-desc__desc, .mode-night .bi__info-title a { color: white!important; } .wrapper{ min-height: 100vh; } .menu-bottom{ position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 500px; background: #1a1b1b; padding: 10px 0; text-align: center; border-radius: 5px; } .menu-bottom a{ padding: 0 10px; color: white; font-weight: bold; min-width: 20%; } .menu-bottom a+a{ border-left: 1px solid gray; } .menu-bottom a:hover{ text-decoration: none; color: #f47820; } .menu-chapter-container{ width: 100%; transition: all ease-in 0.1s; } .menu-chapter-content{ position: relative; width: 100%; background: #212121; padding: 15px; border-radius: 5px; } .menu-chapter{ display: inline-block; padding: 10px 5px 10px 10px; border-radius: 50% 0 0 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.5); opacity: 0.7; } .menu-chapter img{ height: 25px; } .menu-chapter-container.open .ar-left{ display: none!important; } .menu-chapter-container.open .ar-right{ display: inline-block!important; } .menu-chapter-container.open .menu-chapter{ opacity: 1; } .menu-chapter:hover{ opacity: 1; } .btn-next-back{ display: flex; justify-content: space-between; padding-top: 10px; } .btn-next-back a{ width: 48%; padding: 5px; border: 1px solid #424242; border-radius: 5px; font-family: Montserrat, sans-serif; font-size: 16px; text-align: center; color: white; font-weight: 500; } .btn-next-back a:hover{ text-decoration: none; background: #64b5f63d; } #modalChapterList .modal-content{ background: transparent; border: none; } #modalChapterList .close{ position: absolute; top: 20px; right: 20px; background: white; padding: 1px 6px; z-index: 1; opacity: 1; border-radius: 50%; } #modalChapterList .title-h3{ font-family: Montserrat, sans-serif; font-weight: 600; font-size: 18px; color: white; } .menu-chapter-list{ padding-bottom: 15px; padding-right: 5px; border-bottom: 1px solid #424242; height: 395px; overflow-y: auto; color: white; } .menu-chapter-list .story-chapter__item img{ width: 20px; margin-right: 3px; } .menu-chapter-list .story-chapter__item span{ color: white; font-size: 14px; } .menu-chapter-list .story-chapter__item:hover{ text-decoration: none; } .chapter-current .chapter-icon{ display: none!important; } .chapter-current .chapter-icon-current{ display: inline-block!important; } .story-main .btn-next-back a{ background: white; color: black; } .story-main .btn-next-back a:hover{ text-decoration: none; background: #64b5f63d; } .menu-chapter-list::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #000000; } .menu-chapter-list::-webkit-scrollbar { width: 6px; background-color: #000000; } .menu-chapter-list::-webkit-scrollbar-thumb { background-color: white; cursor: pointer; } @media only screen and (max-width: 1100px) { .if-desc__interact img{ width: 35px; } .if-desc__interact a{ font-size: 16px; } } @media only screen and (max-width: 992px) { .if-main{ display: block; } } @media only screen and (max-width: 768px) { .if-left-top{ display: block; } .if-desc{ margin-top: 30px; } .game-top{ display: block; } } @media only screen and (max-width: 500px) { .chapter-list{ display: block!important; } .chapter-list-select{ display: block; width: 100%; height: 30px; font-size: 14px; } .btn-next-chapter{ display: inline-block; margin-top: 10px; } .h3-title{ font-size: 18px; } .menu-bottom{ bottom: 0; border-radius: 5px 5px 0 0; } .mb-item{ font-size: 12px; } .btn-next-chapter{ height: 30px; font-size: 14px; } } @media only screen and (max-width: 414px) { }