html,
body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ===== Mobile header/hamburger ===== */

.rtt-mobile-menu-item {
  display: none;
}

@media (max-width: 768px) {
  .site-header .rtt-header-ai,
  .site-header .login-signup-icon {
    display: none !important;
  }

  .site-header .rtt-header-bell,
  .site-header .search-icon,
  .site-header .rtt-theme-toggle,
  .site-header .mobile-menu-toggle {
    display: inline-flex !important;
  }

  .site-header .header-bar .rtt-mobile-menu-item {
    display: flex !important;
  }

  .site-header .header-bar .rtt-mobile-theme-btn {
    width: 100%;
    min-height: 56px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-family: inherit;
    font-size: 18px;
    font-weight: 800;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    text-align: left;
  }

  .site-header .header-bar .rtt-mobile-theme-btn i {
    width: 24px;
    text-align: center;
  }

  .site-header .header-bar .rtt-mobile-theme-btn:hover {
    background: rgba(255, 255, 255, 0.28);
  }

  .site-header .header-bar .rtt-mobile-ai-link,
  .site-header .header-bar .rtt-mobile-account-link {
    width: 100%;
  }

  .site-header .header-bar .rtt-mobile-ai-link > div,
  .site-header .header-bar .rtt-mobile-account-link > div {
    width: 100%;
  }
}

img,
video,
canvas,
svg,
iframe {
  max-width: 100%;
}

#header,
#swiper-container,
.product,
.product-page,
.storyChap,
.footer,
.user-page,
.signup,
.schedule-page {
  width: 100% !important;
  max-width: 100vw !important;
}

/* FontAwesome fallback.
   Your project has font-awesome.min.css, but the actual webfont files are often missing.
   These rules keep the common icons visible without needing extra font files. */
.fa {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 1em;
  min-width: 1em;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  font-family:
    "Segoe UI Symbol", "Segoe UI Emoji", Arial, sans-serif !important;
  text-rendering: auto;
}
.fa-eye::before {
  content: "👁" !important;
}
.fa-heart::before {
  content: "♥" !important;
}
.fa-star::before {
  content: "★" !important;
}
.fa-user::before {
  content: "👤" !important;
}
.fa-search::before {
  content: "⌕" !important;
}
.fa-comment::before {
  content: "💬" !important;
}
.fa-calendar::before {
  content: "▣" !important;
}
.fa-lock::before {
  content: "🔒" !important;
}
.fa-unlock::before {
  content: "🔓" !important;
}
.fa-trash::before,
.fa-trash-o::before {
  content: "🗑" !important;
}
.fa-edit::before,
.fa-pencil::before,
.fa-pencil-square-o::before {
  content: "✎" !important;
}
.fa-plus::before {
  content: "+" !important;
}
.fa-minus::before {
  content: "−" !important;
}
.fa-times::before,
.fa-close::before {
  content: "×" !important;
}
.fa-check::before {
  content: "✓" !important;
}

/* Prevent Bootstrap row negative margins from producing horizontal scroll on phones. */
@media (max-width: 768px) {
  .container,
  .container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .row {
    margin-left: -6px !important;
    margin-right: -6px !important;
  }

  .row > [class*="col-"] {
    padding-left: 6px !important;
    padding-right: 6px !important;
    min-width: 0;
  }

  body header.site-header {
    width: 100% !important;
    max-width: 100vw !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body header.site-header .header-container {
    width: 100% !important;
    max-width: 100% !important;
  }

  body header.site-header .web-logo {
    width: 116px !important;
    max-width: 32vw !important;
  }

  body header.site-header .login-signup {
    gap: 8px !important;
  }

  body header.site-header .login-signup .search-icon,
  body header.site-header .login-signup .login-signup-icon,
  .mobile-menu-toggle {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px;
  }

  body header.site-header .header-bar {
    width: min(86vw, 320px) !important;
    max-width: 86vw !important;
  }

  .swiper-body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    padding: 10px 0 22px !important;
  }

  .swiper-body .swiper-section,
  .swiper-body .swiper,
  .swiper-body .swiper-wrapper {
    width: 100% !important;
    max-width: 100vw !important;
  }

  .swiper-body .swiper-section {
    height: 300px !important;
  }

  .swiper-body .swiper-slide {
    width: min(156px, 72vw) !important;
    height: 220px !important;
  }

  .swiper-body .swiper-button-next,
  .swiper-body .swiper-button-prev {
    display: none !important;
  }

  .product__container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 18px 12px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  .product__container > .row,
  .trending__product > .row,
  .popular__product > .row,
  .recent__product > .row {
    width: auto !important;
    max-width: none !important;
  }

  .product__container .row > .col-lg-2,
  .product__container .row > .col-md-4,
  .product__container .row > .col-sm-6,
  .product__container .row > .col-6,
  .product__container .row > .col-lg-3,
  .product__container .row > .col-md-6 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  .product__item {
    width: 100% !important;
  }

  .product__item__pic {
    height: clamp(180px, 58vw, 245px) !important;
    border-radius: 14px !important;
  }

  .product__item__text h5 a {
    font-size: 14px !important;
    line-height: 1.35 !important;
    word-break: break-word;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .product__item__text ul li,
  .rtt-card-tags {
    font-size: 11px !important;
  }

  .storyChap.container,
  .storyChap.container .storyChap.product__container,
  .storyChap.container .storyChap.row,
  .Chap-img {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .storyChap.container .storyChap.product__container {
    padding: 16px 12px !important;
  }

  .storyChap-select-chapter,
  .storyChap-select-chapter select,
  .storyChap .pagination,
  .storyChap .pagination button {
    max-width: 100% !important;
  }

  .Chap-img img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}

@media (max-width: 420px) {
  .container,
  .container-fluid {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .row {
    margin-left: -5px !important;
    margin-right: -5px !important;
  }

  .row > [class*="col-"] {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  .product__container {
    padding: 16px 10px !important;
  }

  .product__item__pic {
    height: clamp(170px, 55vw, 220px) !important;
  }

  .swiper-body .swiper-slide {
    width: min(148px, 74vw) !important;
    height: 210px !important;
  }
}

/* ======================================================
   RTT fix pack v2: stable font, more icon fallbacks,
   mobile overflow tightening, AI chat floating button.
   ====================================================== */
:root {
  --rtt-ui-font:
    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

html,
body,
button,
input,
select,
textarea,
p,
a,
span,
li,
div,
h1,
h2,
h3,
h4,
h5,
h6,
.section-title h4,
.section-title h5,
.product__item__text h5 a,
.primary-btn,
.anime__details__btn a,
.anime__details__btn button {
  font-family: var(--rtt-ui-font) !important;
}

/* Wider FontAwesome fallback set. */
.fa-eye-slash::before {
  content: "◉" !important;
}
.fa-heart-o::before {
  content: "♡" !important;
}
.fa-angle-right::before {
  content: "›" !important;
}
.fa-arrow-left::before {
  content: "←" !important;
}
.fa-arrow-right::before {
  content: "→" !important;
}
.fa-align-justify::before {
  content: "☰" !important;
}
.fa-book::before {
  content: "▤" !important;
}
.fa-camera::before {
  content: "▣" !important;
}
.fa-download::before {
  content: "↓" !important;
}
.fa-upload::before {
  content: "↑" !important;
}
.fa-facebook::before {
  content: "f" !important;
}
.fa-google::before {
  content: "G" !important;
}
.fa-files-o::before {
  content: "▥" !important;
}
.fa-flag::before {
  content: "⚑" !important;
}
.fa-image::before {
  content: "▧" !important;
}
.fa-line-chart::before {
  content: "↗" !important;
}
.fa-location-arrow::before {
  content: "➤" !important;
}
.fa-plus-square::before {
  content: "⊞" !important;
}
.fa-save::before {
  content: "💾" !important;
}
.fa-sign-out::before {
  content: "↪" !important;
}
.fa-users::before {
  content: "👥" !important;
}

/* Elegant Icons fallback: prevents square boxes in buttons. */
[class^="arrow_"],
[class*=" arrow_"],
[class^="icon_"],
[class*=" icon_"] {
  font-family: var(--rtt-ui-font) !important;
  font-style: normal !important;
  line-height: 1 !important;
}
.arrow_right::before,
.arrow_carrot-right::before {
  content: "›" !important;
}
.arrow_left::before,
.arrow_carrot-left::before {
  content: "‹" !important;
}
.arrow_up::before,
.arrow_carrot-up::before {
  content: "⌃" !important;
}
.arrow_down::before,
.arrow_carrot-down::before {
  content: "⌄" !important;
}
.icon_search::before {
  content: "⌕" !important;
}
.icon_profile::before {
  content: "👤" !important;
}
.icon_chat_alt::before,
.icon_comment_alt::before {
  content: "💬" !important;
}
.icon_calendar::before,
.icon_clock_alt::before {
  content: "▣" !important;
}
.icon_close::before,
.icon_close_alt2::before {
  content: "×" !important;
}
.icon_plus::before,
.icon_plus_alt2::before {
  content: "+" !important;
}
.icon_minus-06::before,
.icon_minus_alt2::before {
  content: "−" !important;
}
.icon_check::before,
.icon_check_alt2::before {
  content: "✓" !important;
}

/* Prevent long tag/description/button text from forcing horizontal scroll. */
.product__item__text,
.product__item__text h5,
.product__item__text ul,
.anime__details__text,
.anime__details__tags,
.anime__details__btn,
.chapter-list li,
.rtt-card-tags,
.product__chapter__info {
  min-width: 0 !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.rtt-card-tags {
  white-space: normal !important;
  display: block !important;
  color: #9d80cc !important;
  line-height: 1.35 !important;
}

.product__chapter__info {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}
.product__chapter,
.product__date {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product__date {
  flex: 0 0 auto;
  opacity: 0.85;
}

/* Homepage top-view swiper from API. */
.swiper-slide.rtt-hero-slide {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #d9c8ef;
  box-shadow: 0 14px 34px rgba(68, 33, 117, 0.2);
}
.swiper-slide.rtt-hero-slide a {
  display: block;
  width: 100%;
  height: 100%;
  color: #fff;
}
.swiper-slide.rtt-hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rtt-hero-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 44px 12px 12px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));
  color: #fff;
}
.rtt-hero-caption strong {
  display: block;
  font-size: 15px;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rtt-hero-caption span {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.95;
}

/* Story info chapter list with time label. */
.chapter-list li {
  cursor: pointer;
}
.chapter-list .chapter-num small {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: #9d80cc;
  font-weight: 600;
}
.chapter-status time {
  display: block;
  font-size: 12px;
  margin-top: 3px;
  color: inherit;
  opacity: 0.85;
}
.chapter-status.new time {
  color: #fff;
}

/* Floating AI recommendation/chat button. */
.rtt-ai-chat-fab {
  position: fixed;
  right: 22px;
  bottom: 24px;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  background: #442175;
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(68, 33, 117, 0.32);
  text-decoration: none !important;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}
.rtt-ai-chat-fab:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 34px rgba(68, 33, 117, 0.38);
}
.rtt-ai-chat-fab::before {
  content: "AI";
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.5px;
}
.rtt-ai-chat-fab::after {
  content: "Đề cử AI";
  position: absolute;
  right: 68px;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  color: #442175;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  padding: 7px 10px;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(68, 33, 117, 0.12);
}

.rtt-ai-placeholder {
  max-width: 880px;
  margin: 48px auto;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 14px 32px rgba(68, 33, 117, 0.08);
}
.rtt-ai-placeholder h1 {
  color: #442175;
  font-size: 30px;
  font-weight: 800;
  margin-bottom: 12px;
}
.rtt-ai-placeholder p {
  color: #442175;
}

@media (max-width: 768px) {
  .anime__details__btn {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .anime__details__btn a,
  .anime__details__btn button {
    justify-content: center !important;
    text-align: center !important;
    margin: 0 !important;
  }

  .anime__details__tags {
    display: flex !important;
    flex-wrap: wrap !important;
  }
  .anime__details__tags a {
    max-width: 100% !important;
    white-space: normal !important;
  }
  .rtt-ai-chat-fab {
    right: 14px;
    bottom: 16px;
    width: 52px;
    height: 52px;
  }
  .rtt-ai-chat-fab::after {
    display: none;
  }
}

/* ======================================================
   RTT fix pack v3: new chapter badge, ellipsis, auth UI
   ====================================================== */
.product__item__text h5,
.product__item__text h5 a,
.favorite-mini-grid a span,
.user-list-item strong,
.rtt-search-item strong,
.rtt-hero-caption strong {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}
.product__item__text h5 a {
  -webkit-line-clamp: 2 !important;
  min-height: 2.7em;
}
.favorite-mini-grid a span {
  -webkit-line-clamp: 3 !important;
}
.user-list-item strong,
.rtt-search-item strong {
  -webkit-line-clamp: 2 !important;
}

.product__chapter__info .product__date {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.82);
  color: #9d80cc;
  font-size: 12px;
  font-weight: 800;
}
.product__chapter__info .product__date.is-today {
  min-width: 56px;
  background: #ff1717 !important;
  color: #fff !important;
  animation: rttNewBlink 1s ease-in-out infinite;
  box-shadow: 0 6px 14px rgba(255, 23, 23, 0.22);
}
@keyframes rttNewBlink {
  0%,
  100% {
    opacity: 1;
    transform: translateY(0);
  }
  50% {
    opacity: 0.52;
    transform: translateY(-1px);
  }
}
.chapter-status.today-new {
  padding: 0 25px;
  background: #ff1717 !important;
  color: #fff !important;
  animation: rttNewBlink 1s ease-in-out infinite;
}
.chapter-status.today-new time {
  display: none !important;
}

.rtt-auth-page .auth-shell {
  max-width: 1040px;
  margin: 0 auto;
}
.auth-card {
  background: rgba(255, 255, 255, 0.88);
  border-radius: 26px;
  padding: 28px;
  box-shadow: 0 18px 42px rgba(68, 33, 117, 0.12);
  height: 100%;
}
.auth-card h3 {
  color: #442175;
  font-weight: 900;
  margin-bottom: 16px;
}
.auth-card .input__item {
  margin-bottom: 16px;
}
.auth-card .input__item input {
  width: 100%;
  height: 52px;
  border: 0;
  border-radius: 14px;
  background: #f4ecff;
  color: #442175;
  font-weight: 700;
  padding: 0 16px 0 44px;
}
.auth-card .input__item span:first-child {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #9d80cc;
}
.auth-social-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.auth-social-list button,
.auth-alt-btn,
.logout-btn {
  border: 0;
  border-radius: 999px;
  padding: 13px 18px;
  font-weight: 900;
  color: #fff;
  width: 100%;
}
.auth-social-list .facebook {
  background: #1877f2;
}
.auth-social-list .google {
  background: #fff;
  color: #442175;
  border: 2px solid #eadfff;
}
.auth-alt-btn {
  background: #b49add;
  color: #fff;
  margin-top: 10px;
}
.logout-btn {
  background: #ff4d4d;
  max-width: 220px;
}
.auth-status {
  margin-top: 12px;
  color: #442175;
  font-weight: 800;
  min-height: 24px;
}
.auth-status.error {
  color: #ff1717;
}
.auth-current-user {
  background: #f4ecff;
  color: #442175;
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 18px;
  font-weight: 800;
}

.user-comments-list {
  display: grid;
  gap: 12px;
}
.user-comment-item {
  background: rgba(255, 255, 255, 0.78);
  border-radius: 16px;
  padding: 12px 14px;
  color: #442175;
}
.user-comment-item strong {
  display: block;
  font-weight: 900;
  margin-bottom: 4px;
}
.user-comment-item span {
  display: block;
  font-size: 12px;
  color: #9d80cc;
  margin-bottom: 4px;
}

@media (max-width: 768px) {
  .product__chapter__info .product__date {
    min-width: 70px;
    font-size: 11px;
    padding: 0 7px;
  }
  .product__chapter__info .product__date.is-today {
    min-width: 48px;
  }
  .auth-card {
    padding: 20px 16px;
    margin-bottom: 18px;
  }
}

/* ===== RTT patch v4: auth/profile/schedule/comments/rating/notifications ===== */
.rtt-section-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 24px 0 6px;
  color: #442175;
  font-weight: 900;
}
.rtt-section-pager button,
.load-more-comments {
  border: 0;
  border-radius: 999px;
  background: var(--rtt-gradient-main) !important;
  color: #fff;
  padding: 10px 20px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(68, 33, 117, 0.13);
}
.rtt-section-pager button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}
.product__item__text h5 a,
.favorite-mini-grid a span,
.user-list-item strong,
.rtt-search-item strong,
.schedule-item .item-name {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  overflow-wrap: anywhere !important;
}
.product__item__text h5 a {
  -webkit-line-clamp: 2 !important;
}
.favorite-mini-grid a span {
  -webkit-line-clamp: 3 !important;
}
.schedule-item .item-name {
  -webkit-line-clamp: 2 !important;
}
.product__date,
.chapter-status {
  white-space: nowrap !important;
}
.rtt-report-modal .rtt-modal-close {
  display: none !important;
}
.profile-status.error,
.auth-status.error {
  color: #ff1717 !important;
}
.preference-tags button.active {
  background: #af93d5 !important;
  color: #fff !important;
}
.preference-tags button small {
  opacity: 0.8;
  margin-left: 4px;
}
.rtt-rating-box {
  margin-top: 16px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
  color: #442175;
  font-weight: 900;
}
.rtt-rating-stars {
  display: inline-flex;
  gap: 5px;
}
.rtt-rating-stars button {
  border: 0;
  background: #fff;
  color: #ffb703;
  width: 38px;
  border-radius: 12px;
  font-size: 24px;
  box-shadow: 0 8px 18px rgba(68, 33, 117, 0.12);
  cursor: pointer;
}
.rtt-rating-stars button:hover {
  transform: translateY(-1px);
}
.load-more-comments {
  margin: 12px 0 22px;
  display: inline-flex;
}
.schedule-page .container {
  max-width: 1180px;
}
.schedule__week__block {
  display: grid;
  gap: 28px;
}
.schedule-block {
  border: 4px dotted #b49add;
  border-radius: 28px;
  padding: 24px;
  background: rgba(244, 236, 255, 0.72);
  overflow: hidden;
}
.schedule-title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.schedule-title span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  height: 38px;
  border-radius: 999px;
  background: #effffb;
  color: #442175;
  font-weight: 900;
}
.schedule-title img {
  width: 82px;
  height: 82px;
  object-fit: contain;
}
.schedule-item {
  display: block;
  color: #442175;
  text-decoration: none !important;
}
.schedule-item img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(68, 33, 117, 0.14);
}
.schedule-item .item-name {
  margin-top: 10px;
  font-weight: 900;
  line-height: 1.35;
  min-height: 2.7em;
}
.schedule-item small {
  color: #9d80cc;
  font-weight: 800;
}
.schedule-empty {
  min-height: 180px;
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: 16px;
  color: #9d80cc;
  font-weight: 900;
}
.rtt-notification-widget {
  position: fixed;
  right: 92px;
  bottom: 28px;
  z-index: 10000;
}
.rtt-notification-toggle {
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #442175;
  box-shadow: 0 12px 30px rgba(68, 33, 117, 0.18);
  font-size: 20px;
  position: relative;
}
.rtt-notification-count {
  display: none;
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #ff1717;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}
.rtt-notification-panel {
  display: none;
  position: absolute;
  right: 0;
  bottom: 68px;
  width: min(340px, calc(100vw - 28px));
  max-height: 420px;
  overflow: auto;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 18px 42px rgba(68, 33, 117, 0.18);
  color: #442175;
}
.rtt-notification-widget.open .rtt-notification-panel {
  display: block;
}
.rtt-notification-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}
.rtt-notification-list a {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 10px;
  color: #442175;
  text-decoration: none;
  background: #f4ecff;
  border-radius: 14px;
  padding: 8px;
}
.rtt-notification-list img {
  width: 48px;
  height: 62px;
  object-fit: cover;
  border-radius: 10px;
}
.rtt-notification-list b {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rtt-notification-list small {
  color: #9d80cc;
  font-weight: 800;
}
@media (max-width: 768px) {
  .schedule-block {
    padding: 16px 12px;
    border-radius: 22px;
  }
  .schedule-title img {
    width: 58px;
    height: 58px;
  }
  .schedule-title span {
    min-width: 94px;
    height: 32px;
    font-size: 13px;
  }
  .rtt-notification-widget {
    right: 84px;
    bottom: 20px;
  }
  .rtt-notification-toggle {
    width: 48px;
    height: 48px;
  }
}

/* ===== RTT v17 direct fixes in existing rtt-fixes.css ===== */
.site-header .header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.site-header .header-bar {
  display: flex;
  align-items: center;
  gap: 28px;
}
.site-header .header-bar a,
.site-header .header-bar div {
  color: #fff;
  font-weight: 900;
  text-decoration: none;
}
.site-header .header-bar i {
  margin-right: 7px;
  font-size: 15px;
  opacity: 0.95;
}
.site-header .login-signup {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rtt-header-ai,
.rtt-theme-toggle,
.rtt-header-bell {
  min-width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-weight: 900;
  padding: 0 14px;
  text-decoration: none !important;
  cursor: pointer;
  position: relative;
}
.rtt-header-ai {
  min-width: 64px;
}
.rtt-header-bell .rtt-bell-count {
  display: none;
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #ff1717;
  color: #fff;
  font-size: 10px;
  line-height: 1;
  padding: 0 4px;
}
.rtt-bell-dropdown {
  display: none;
  position: absolute;
  z-index: 10010;
  right: 70px;
  top: 74px;
  width: min(360px, calc(100vw - 24px));
}
.rtt-bell-dropdown.show {
  display: block;
}
.rtt-bell-panel {
  background: rgba(255, 255, 255, 0.98);
  color: #442175;
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 18px 44px rgba(68, 33, 117, 0.22);
}
.rtt-bell-panel h6 {
  color: #442175;
  font-weight: 900;
  margin: 0 0 12px;
  font-size: 16px;
}
.rtt-bell-list {
  display: grid;
  gap: 10px;
  max-height: 360px;
  overflow: auto;
}
.rtt-bell-list a {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 10px;
  background: #f4ecff;
  color: #442175;
  border-radius: 14px;
  padding: 8px;
  text-decoration: none !important;
}
.rtt-bell-list img {
  width: 52px;
  height: 68px;
  object-fit: cover;
  border-radius: 10px;
}
.rtt-bell-list b {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 900;
}
.rtt-bell-list small {
  display: block;
  color: #9d80cc;
  font-weight: 800;
  margin-top: 4px;
}
.rtt-top-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 16px;
}
.rtt-top-tabs button {
  border: 0;
  border-radius: 999px;
  padding: 9px 14px;
  background: #efe4ff;
  color: #442175;
  font-weight: 900;
  cursor: pointer;
}
.rtt-top-tabs button.active {
  background: #442175;
  color: #fff;
  box-shadow: 0 10px 22px rgba(68, 33, 117, 0.18);
}
.rtt-most-followed-section {
  margin-top: 38px;
}
.rtt-follow-strip {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 2px 18px;
  scroll-snap-type: x mandatory;
}
.rtt-follow-card {
  flex: 0 0 150px;
  scroll-snap-align: start;
  color: #442175;
  text-decoration: none !important;
  background: rgba(255, 255, 255, 0.78);
  border-radius: 18px;
  padding: 10px;
  box-shadow: 0 10px 24px rgba(68, 33, 117, 0.12);
}
.rtt-follow-card img {
  width: 100%;
  height: 198px;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}
.rtt-follow-card strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.65em;
  margin-top: 10px;
  line-height: 1.32;
  font-weight: 900;
}
.rtt-follow-card span {
  display: block;
  color: #9d80cc;
  font-weight: 800;
  font-size: 12px;
  margin-top: 4px;
}
.anime__review__item {
  display: grid !important;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  clear: both;
}
.anime__review__item__pic {
  width: 58px !important;
  height: 58px !important;
  float: none !important;
}
.anime__review__item__pic img {
  width: 58px !important;
  height: 58px !important;
  object-fit: cover;
  border-radius: 50%;
}
.anime__review__item__text {
  width: 100% !important;
  min-width: 0;
  margin-left: 0 !important;
  float: none !important;
  word-break: break-word;
}
.storyChap .anime__details__review {
  display: grid;
  gap: 14px;
  margin-bottom: 24px;
}
.storyChap .product__container {
  overflow: visible !important;
}
.storyChap .pagination.comment-pagination {
  position: static !important;
  margin: 18px 0 0;
}
.chapter-note-box {
  background: rgba(255, 255, 255, 0.84);
  border-radius: 18px;
  padding: 18px 20px;
  margin: 24px auto;
  color: #442175;
  font-weight: 700;
  line-height: 1.7;
  max-width: 920px;
}
.chapter-note-box h5 {
  color: #442175;
  font-weight: 900;
  margin-bottom: 8px;
}
.product__date.is-today,
.chapter-status.today-new {
  background: #ff1717 !important;
  color: #fff !important;
  animation: rttBlink 1.05s infinite;
}
@keyframes rttBlink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}
[data-theme="dark"] body,
body.rtt-dark {
  background: #171125 !important;
  color: #e9ddff !important;
}
[data-theme="dark"] .product__container,
body.rtt-dark .product__container,
[data-theme="dark"] .user-panel,
body.rtt-dark .user-panel,
[data-theme="dark"] .user-hero,
body.rtt-dark .user-hero {
  background: rgba(38, 26, 61, 0.88) !important;
  color: #e9ddff !important;
}
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
body.rtt-dark h1,
body.rtt-dark h2,
body.rtt-dark h3,
body.rtt-dark h4,
body.rtt-dark h5,
body.rtt-dark h6 {
  color: #f4ecff !important;
}
[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] span,
[data-theme="dark"] label,
body.rtt-dark p,
body.rtt-dark li,
body.rtt-dark span,
body.rtt-dark label {
  color: #e9ddff;
}
[data-theme="dark"] .anime__details__text p,
body.rtt-dark .anime__details__text p {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #f4ecff !important;
}
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select,
body.rtt-dark input,
body.rtt-dark textarea,
body.rtt-dark select {
  background: #2b2042 !important;
  color: #f4ecff !important;
  border-color: #5f4788 !important;
}
[data-theme="dark"] .rtt-bell-panel,
body.rtt-dark .rtt-bell-panel {
  background: #241a39;
  color: #f4ecff;
}
[data-theme="dark"] .rtt-bell-list a,
body.rtt-dark .rtt-bell-list a {
  background: #33264e;
  color: #f4ecff;
}
.fa-home::before {
  content: "⌂" !important;
}
.fa-th::before {
  content: "▦" !important;
}
.fa-clock-o::before {
  content: "◷" !important;
}
.fa-facebook::before {
  content: "f" !important;
  font-weight: 900;
}
.fa-moon-o::before {
  content: "☾" !important;
}
.fa-sun-o::before {
  content: "☀" !important;
}
.fa-bell::before {
  content: "🔔" !important;
}
.fa-camera::before {
  content: "▣" !important;
}
.fa-location-arrow::before {
  content: "➤" !important;
}
@media (max-width: 768px) {
  .site-header .header-bar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    transform: translateX(-100%);
    width: min(82vw, 320px) !important;
    background: #b49add;
    z-index: 10020;
    flex-direction: column;
    align-items: flex-start;
    padding: 88px 22px 20px;
    transition: 0.25s;
  }
  body.mobile-menu-open .site-header .header-bar {
    transform: translateX(0);
  }
  .mobile-menu-toggle {
    display: inline-flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    border: 0;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 12px;
  }
  .mobile-menu-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    background: #fff;
    border-radius: 4px;
  }
  .site-header .login-signup {
    margin-left: auto;
  }
  .rtt-header-ai {
    min-width: 52px;
    padding: 0 10px;
    font-size: 13px;
  }
  .rtt-theme-toggle,
  .rtt-header-bell,
  .site-header .search-icon,
  .site-header .login-signup-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px;
    padding: 0;
  }
  .rtt-bell-dropdown {
    top: 66px;
    right: 10px;
  }
  .rtt-follow-card {
    flex-basis: 128px;
  }
  .rtt-follow-card img {
    height: 170px;
  }
  .anime__review__item {
    grid-template-columns: 48px minmax(0, 1fr);
  }
  .anime__review__item__pic,
  .anime__review__item__pic img {
    width: 44px !important;
    height: 44px !important;
  }
}
.auth-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: stretch;
}
.auth-card,
.auth-social-card {
  padding: 30px !important;
}
.auth-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
}
.auth-tab {
  border: 0;
  border-radius: 999px;
  padding: 11px 22px;
  background: #efe4ff;
  color: #442175;
  font-weight: 900;
  cursor: pointer;
}
.auth-tab.active {
  background: var(--rtt-gradient-main) !important;
  color: #fff;
}
.auth-panel {
  display: none;
}
.auth-panel.active {
  display: block;
}
.rtt-form-row {
  margin-bottom: 18px;
}
.rtt-form-row label {
  display: block;
  color: #442175;
  font-weight: 900;
  margin-bottom: 8px;
}
.rtt-input-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f4ecff;
  border-radius: 16px;
  padding: 0 16px;
  min-height: 58px;
}
.rtt-input-wrap input {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  width: 100%;
  color: #442175;
  font-weight: 800;
}
.rtt-password-toggle {
  cursor: pointer;
  color: #442175;
}
.auth-btn,
.social-btn {
  border: 0;
  border-radius: 999px;
  min-height: 48px;
  padding: 0 24px;
  font-weight: 900;
}
.auth-btn {
  background: var(--rtt-gradient-main) !important;
  color: #fff;
}
.auth-mini-link {
  border: 0;
  background: transparent;
  font-weight: 900;
  margin-left: 10px;
}
.auth-note,
.social-help {
  color: #6b4b96;
  font-weight: 700;
  margin-top: 18px;
}
.social-login-stack {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}
.social-btn.facebook {
  background: #1877f2;
  color: #fff;
}
.social-btn.google {
  background: #fff;
  color: #442175;
  border: 2px solid #eadfff;
}
.auth-alert {
  background: rgba(235, 226, 247, 0.8);
  border: 1px solid #dfcdfa;
  border-radius: 18px;
  padding: 18px 22px;
  color: #442175;
  font-weight: 900;
  margin-bottom: 22px;
}
.auth-alert span {
  display: block;
  margin-top: 6px;
}
@media (max-width: 992px) {
  .auth-layout {
    grid-template-columns: 1fr;
  }
}
.schedule-shell {
  max-width: 1180px;
}
.schedule-board {
  padding: 32px !important;
}
.schedule-hero {
  background: rgba(255, 255, 255, 0.86);
  border-radius: 22px;
  padding: 24px;
  text-align: center;
  margin-bottom: 28px;
}
.schedule-hero h1 {
  color: #222;
  font-weight: 900;
  margin-bottom: 8px;
}
.schedule-hero p {
  color: #666;
  font-style: italic;
}
.schedule-list {
  display: grid;
  gap: 24px;
}
.schedule-day {
  border: 3px dotted #b49add;
  border-radius: 24px;
  background: rgba(244, 236, 255, 0.65);
  padding: 22px;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}
.schedule-day__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.schedule-day__label span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 110px;
  height: 38px;
  border-radius: 999px;
  background: #effffb;
  color: #442175;
  font-weight: 900;
}
.schedule-day__label img {
  width: 80px;
  height: 80px;
  object-fit: contain;
}
.schedule-track {
  min-width: 0;
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 0 12px;
}
.schedule-card {
  flex: 0 0 190px;
  color: #442175;
  text-decoration: none !important;
  background: rgba(255, 255, 255, 0.78);
  border-radius: 16px;
  padding: 10px;
  scroll-snap-align: start;
}
.schedule-card__cover img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.schedule-card__title {
  font-weight: 800;
  line-height: 1.32;
  margin-top: 9px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.65em;
}
.schedule-card__meta {
  font-size: 12px;
  color: #9d80cc;
  font-weight: 800;
  margin-top: 4px;
}
.schedule-empty,
.schedule-loading,
.schedule-error {
  background: #fff;
  color: #9d80cc;
  font-weight: 900;
  border-radius: 16px;
  padding: 26px;
  min-width: 150px;
}
@media (max-width: 768px) {
  .schedule-board {
    padding: 18px 12px !important;
  }
  .schedule-day {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px 12px;
  }
  .schedule-day__label {
    flex-direction: row;
    justify-content: center;
  }
  .schedule-day__label img {
    width: 54px;
    height: 54px;
  }
  .schedule-card {
    flex-basis: 128px;
  }
  .schedule-card__cover img {
    height: 168px;
  }
}
/* AI đã đưa lên header nên ẩn nút nổi để tránh trùng chức năng */
.rtt-ai-chat-fab {
  display: none !important;
}

/* User profile: deletable preference tags */
.preference-tags .preference-tag-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 8px 7px 12px !important;
  border-radius: 999px !important;
  background: #af93d5 !important;
  color: #fff !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}
.preference-tags .preference-tag-name small {
  opacity: 0.82 !important;
  margin-left: 4px !important;
  font-weight: 800 !important;
}
.preference-tags .preference-tag-delete {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.28) !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}
.preference-tags .preference-tag-delete:hover {
  background: #ef3f5f !important;
  color: #fff !important;
  transform: scale(1.06) !important;
}
.preference-tags .preference-tag-delete:disabled {
  opacity: 0.55 !important;
  cursor: wait !important;
}

/* =========================================================
   RTT dark mode repair v10.1
   - Tăng tương phản chữ/nút/card khi bật nút mặt trăng.
   - Giảm độ lộ của background logo để panel không bị xám bẩn.
   - Đồng bộ cả body.rtt-dark, body.dark-mode và html[data-theme="dark"].
   ========================================================= */
html[data-theme="dark"] {
  color-scheme: dark;
  --rtt-primary: #f7efff;
  --rtt-primary-2: #dfcff8;
  --rtt-accent: #c9a7ff;
  --rtt-accent-2: #8f61d8;
  --rtt-bg-card: rgba(26, 17, 43, 0.94);
  --rtt-white: #f9f3ff;
  --rtt-muted: #c8b5e8;
  --rtt-danger: #ff5470;
  --rtt-success: #4ee08c;
  --rtt-shadow: 0 22px 60px rgba(0, 0, 0, 0.36);
  --rtt-dark-bg: #11091d;
  --rtt-dark-panel: rgba(31, 21, 50, 0.94);
  --rtt-dark-panel-2: rgba(44, 31, 69, 0.92);
  --rtt-dark-soft: rgba(255, 255, 255, 0.075);
  --rtt-dark-border: rgba(216, 191, 255, 0.2);
  --rtt-dark-text: #f7efff;
  --rtt-dark-subtext: #d8c5f2;
}

html[data-theme="dark"] body,
body.rtt-dark,
body.dark-mode {
  background:
    radial-gradient(
      circle at top left,
      rgba(120, 76, 185, 0.22),
      transparent 36rem
    ),
    linear-gradient(135deg, #10081c 0%, #170d29 48%, #0d0717 100%) !important;
  color: var(--rtt-dark-text, #f7efff) !important;
}

html[data-theme="dark"] body::before,
body.rtt-dark::before,
body.dark-mode::before {
  opacity: 0.1 !important;
  filter: grayscale(0.2) brightness(0.48) contrast(1.18) saturate(0.9) !important;
}

html[data-theme="dark"] .product,
html[data-theme="dark"] .product-page,
html[data-theme="dark"] .user-page,
html[data-theme="dark"] .schedule-page,
body.rtt-dark .product,
body.rtt-dark .product-page,
body.rtt-dark .user-page,
body.rtt-dark .schedule-page,
body.dark-mode .product,
body.dark-mode .product-page,
body.dark-mode .user-page,
body.dark-mode .schedule-page {
  background: transparent !important;
}

/* Main panels */
html[data-theme="dark"] .product__container,
html[data-theme="dark"] .filter-container.product__container,
html[data-theme="dark"] .user-hero,
html[data-theme="dark"] .user-panel,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .auth-social-card,
html[data-theme="dark"] .schedule-board,
html[data-theme="dark"] .storyChap.product__container,
body.rtt-dark .product__container,
body.rtt-dark .filter-container.product__container,
body.rtt-dark .user-hero,
body.rtt-dark .user-panel,
body.rtt-dark .auth-card,
body.rtt-dark .auth-social-card,
body.rtt-dark .schedule-board,
body.rtt-dark .storyChap.product__container,
body.dark-mode .product__container,
body.dark-mode .filter-container.product__container,
body.dark-mode .user-hero,
body.dark-mode .user-panel,
body.dark-mode .auth-card,
body.dark-mode .auth-social-card,
body.dark-mode .schedule-board,
body.dark-mode .storyChap.product__container {
  background: var(--rtt-dark-panel, rgba(31, 21, 50, 0.94)) !important;
  color: var(--rtt-dark-text, #f7efff) !important;
  border: 1px solid var(--rtt-dark-border, rgba(216, 191, 255, 0.2)) !important;
  box-shadow: var(--rtt-shadow, 0 22px 60px rgba(0, 0, 0, 0.36)) !important;
  backdrop-filter: blur(10px) saturate(120%);
}

/* Headings/text contrast */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .section-title h4,
html[data-theme="dark"] .section-title h5,
html[data-theme="dark"] .user-hero h2,
html[data-theme="dark"] .auth-card h2,
html[data-theme="dark"] .auth-social-card h2,
body.rtt-dark h1,
body.rtt-dark h2,
body.rtt-dark h3,
body.rtt-dark h4,
body.rtt-dark h5,
body.rtt-dark h6,
body.rtt-dark .section-title h4,
body.rtt-dark .section-title h5,
body.rtt-dark .user-hero h2,
body.rtt-dark .auth-card h2,
body.rtt-dark .auth-social-card h2,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .section-title h4,
body.dark-mode .section-title h5,
body.dark-mode .user-hero h2,
body.dark-mode .auth-card h2,
body.dark-mode .auth-social-card h2 {
  color: var(--rtt-dark-text, #f7efff) !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] label,
html[data-theme="dark"] .user-hero p,
html[data-theme="dark"] .user-kicker,
html[data-theme="dark"] .user-note,
html[data-theme="dark"] .auth-note,
body.rtt-dark p,
body.rtt-dark li,
body.rtt-dark label,
body.rtt-dark .user-hero p,
body.rtt-dark .user-kicker,
body.rtt-dark .user-note,
body.rtt-dark .auth-note,
body.dark-mode p,
body.dark-mode li,
body.dark-mode label,
body.dark-mode .user-hero p,
body.dark-mode .user-kicker,
body.dark-mode .user-note,
body.dark-mode .auth-note {
  color: var(--rtt-dark-subtext, #d8c5f2) !important;
}

/* Comic cards */
html[data-theme="dark"] .product__item__text h5 a,
html[data-theme="dark"] .rtt-api-card .product__item__text h5 a,
body.rtt-dark .product__item__text h5 a,
body.rtt-dark .rtt-api-card .product__item__text h5 a,
body.dark-mode .product__item__text h5 a,
body.dark-mode .rtt-api-card .product__item__text h5 a {
  color: #f3eaff !important;
}

html[data-theme="dark"] .rtt-card-tags,
html[data-theme="dark"] .product__item__text ul li,
body.rtt-dark .rtt-card-tags,
body.rtt-dark .product__item__text ul li,
body.dark-mode .rtt-card-tags,
body.dark-mode .product__item__text ul li {
  color: #cdb7ef !important;
}

html[data-theme="dark"] .product__chapter__info .product__chapter,
html[data-theme="dark"] .product__chapter,
body.rtt-dark .product__chapter__info .product__chapter,
body.rtt-dark .product__chapter,
body.dark-mode .product__chapter__info .product__chapter,
body.dark-mode .product__chapter {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #f7efff !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
}

html[data-theme="dark"] .product__chapter__info .product__date,
body.rtt-dark .product__chapter__info .product__date,
body.dark-mode .product__chapter__info .product__date {
  color: #e2d3fa !important;
}

html[data-theme="dark"] .product__item__pic,
body.rtt-dark .product__item__pic,
body.dark-mode .product__item__pic {
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.34) !important;
}

html[data-theme="dark"] .product__item__pic .view,
html[data-theme="dark"] .product__item__pic .comment,
body.rtt-dark .product__item__pic .view,
body.rtt-dark .product__item__pic .comment,
body.dark-mode .product__item__pic .view,
body.dark-mode .product__item__pic .comment {
  background: rgba(16, 8, 28, 0.82) !important;
  color: #fff !important;
}

/* Category filter */
html[data-theme="dark"] .filter-block,
body.rtt-dark .filter-block,
body.dark-mode .filter-block {
  border-bottom-color: rgba(216, 191, 255, 0.22) !important;
}

html[data-theme="dark"] .filter-block .filter-title,
body.rtt-dark .filter-block .filter-title,
body.dark-mode .filter-block .filter-title {
  color: #f5eeff !important;
}

html[data-theme="dark"] .filter-block .swiper .swiper-slide,
html[data-theme="dark"] .filter-item,
body.rtt-dark .filter-block .swiper .swiper-slide,
body.rtt-dark .filter-item,
body.dark-mode .filter-block .swiper .swiper-slide,
body.dark-mode .filter-item {
  background: rgba(255, 255, 255, 0.1);
  color: #eadfff !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
}

html[data-theme="dark"] .filter-item.active,
body.rtt-dark .filter-item.active,
body.dark-mode .filter-item.active {
  background: #ed0000 !important;
  color: #210f36 !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22) !important;
}

html[data-theme="dark"] .filter-item span,
body.rtt-dark .filter-item span,
body.dark-mode .filter-item span {
  color: inherit !important;
  opacity: 0.82;
}

html[data-theme="dark"] .rtt-category-search input,
body.rtt-dark .rtt-category-search input,
body.dark-mode .rtt-category-search input {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #f7efff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Top follow / schedule cards / user mini lists */
html[data-theme="dark"] .rtt-follow-card,
html[data-theme="dark"] .schedule-card,
html[data-theme="dark"] .schedule-item,
html[data-theme="dark"] .user-list-item,
html[data-theme="dark"] .favorite-mini-grid a,
body.rtt-dark .rtt-follow-card,
body.rtt-dark .schedule-card,
body.rtt-dark .schedule-item,
body.rtt-dark .user-list-item,
body.rtt-dark .favorite-mini-grid a,
body.dark-mode .rtt-follow-card,
body.dark-mode .schedule-card,
body.dark-mode .schedule-item,
body.dark-mode .user-list-item,
body.dark-mode .favorite-mini-grid a {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #f6efff !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28) !important;
}

html[data-theme="dark"] .rtt-follow-card strong,
html[data-theme="dark"] .rtt-follow-card span,
html[data-theme="dark"] .schedule-card__title,
html[data-theme="dark"] .schedule-card__meta,
html[data-theme="dark"] .schedule-item .item-name,
html[data-theme="dark"] .schedule-item small,
html[data-theme="dark"] .user-list-item strong,
html[data-theme="dark"] .user-list-item span,
html[data-theme="dark"] .favorite-mini-grid span,
body.rtt-dark .rtt-follow-card strong,
body.rtt-dark .rtt-follow-card span,
body.rtt-dark .schedule-card__title,
body.rtt-dark .schedule-card__meta,
body.rtt-dark .schedule-item .item-name,
body.rtt-dark .schedule-item small,
body.rtt-dark .user-list-item strong,
body.rtt-dark .user-list-item span,
body.rtt-dark .favorite-mini-grid span,
body.dark-mode .rtt-follow-card strong,
body.dark-mode .rtt-follow-card span,
body.dark-mode .schedule-card__title,
body.dark-mode .schedule-card__meta,
body.dark-mode .schedule-item .item-name,
body.dark-mode .schedule-item small,
body.dark-mode .user-list-item strong,
body.dark-mode .user-list-item span,
body.dark-mode .favorite-mini-grid span {
  color: #f5edff !important;
}

html[data-theme="dark"] .schedule-hero,
html[data-theme="dark"] .schedule-day,
html[data-theme="dark"] .schedule-block,
body.rtt-dark .schedule-hero,
body.rtt-dark .schedule-day,
body.rtt-dark .schedule-block,
body.dark-mode .schedule-hero,
body.dark-mode .schedule-day,
body.dark-mode .schedule-block {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(201, 167, 255, 0.46) !important;
}

html[data-theme="dark"] .schedule-day__label span,
html[data-theme="dark"] .schedule-title span,
body.rtt-dark .schedule-day__label span,
body.rtt-dark .schedule-title span,
body.dark-mode .schedule-day__label span,
body.dark-mode .schedule-title span {
  background: rgba(201, 167, 255, 0.2) !important;
  color: #f7efff !important;
}

html[data-theme="dark"] .schedule-empty,
html[data-theme="dark"] .schedule-loading,
html[data-theme="dark"] .schedule-error,
body.rtt-dark .schedule-empty,
body.rtt-dark .schedule-loading,
body.rtt-dark .schedule-error,
body.dark-mode .schedule-empty,
body.dark-mode .schedule-loading,
body.dark-mode .schedule-error {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #e1d0fa !important;
}

/* User/profile form */
html[data-theme="dark"] .user-stat-card,
body.rtt-dark .user-stat-card,
body.dark-mode .user-stat-card {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

html[data-theme="dark"] .user-stat-card strong,
html[data-theme="dark"] .user-stat-card span,
body.rtt-dark .user-stat-card strong,
body.rtt-dark .user-stat-card span,
body.dark-mode .user-stat-card strong,
body.dark-mode .user-stat-card span {
  color: #f7efff !important;
}

html[data-theme="dark"] .user-note,
body.rtt-dark .user-note,
body.dark-mode .user-note {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #e5d6fa !important;
}

html[data-theme="dark"] .user-badges span,
html[data-theme="dark"] .preference-tags button,
html[data-theme="dark"] .preference-tags .preference-tag-chip,
body.rtt-dark .user-badges span,
body.rtt-dark .preference-tags button,
body.rtt-dark .preference-tags .preference-tag-chip,
body.dark-mode .user-badges span,
body.dark-mode .preference-tags button,
body.dark-mode .preference-tags .preference-tag-chip {
  background: rgba(201, 167, 255, 0.18) !important;
  color: #f5edff !important;
  border: 1px solid rgba(201, 167, 255, 0.22) !important;
}

html[data-theme="dark"] .preference-tags button.active,
body.rtt-dark .preference-tags button.active,
body.dark-mode .preference-tags button.active {
  background: #c9a7ff !important;
  color: #210f36 !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .form-row-custom input,
html[data-theme="dark"] .form-row-custom textarea,
html[data-theme="dark"] .form-row-custom select,
html[data-theme="dark"] .rtt-input-wrap,
body.rtt-dark input,
body.rtt-dark textarea,
body.rtt-dark select,
body.rtt-dark .form-row-custom input,
body.rtt-dark .form-row-custom textarea,
body.rtt-dark .form-row-custom select,
body.rtt-dark .rtt-input-wrap,
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select,
body.dark-mode .form-row-custom input,
body.dark-mode .form-row-custom textarea,
body.dark-mode .form-row-custom select,
body.dark-mode .rtt-input-wrap {
  background: rgba(16, 8, 28, 0.72) !important;
  color: #f8f1ff !important;
  border-color: rgba(201, 167, 255, 0.34) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
body.rtt-dark input::placeholder,
body.rtt-dark textarea::placeholder,
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: rgba(238, 225, 255, 0.56) !important;
}

/* Search/report modal */
html[data-theme="dark"] .rtt-search-modal,
body.rtt-dark .rtt-search-modal,
body.dark-mode .rtt-search-modal {
  background: rgba(8, 4, 15, 0.72) !important;
}

html[data-theme="dark"] .rtt-search-card,
body.rtt-dark .rtt-search-card,
body.dark-mode .rtt-search-card {
  background: rgba(34, 22, 55, 0.98) !important;
  color: #f7efff !important;
  border: 1px solid rgba(216, 191, 255, 0.18) !important;
}

html[data-theme="dark"] .rtt-search-item,
body.rtt-dark .rtt-search-item,
body.dark-mode .rtt-search-item {
  background: rgba(255, 255, 255, 0.09) !important;
  color: #f7efff !important;
}

html[data-theme="dark"] .rtt-search-item:hover,
body.rtt-dark .rtt-search-item:hover,
body.dark-mode .rtt-search-item:hover {
  background: rgba(255, 255, 255, 0.15) !important;
}

html[data-theme="dark"] .rtt-search-item strong,
html[data-theme="dark"] .rtt-search-item span,
body.rtt-dark .rtt-search-item strong,
body.rtt-dark .rtt-search-item span,
body.dark-mode .rtt-search-item strong,
body.dark-mode .rtt-search-item span {
  color: #f7efff !important;
}

/* AI recommendation page */
html[data-theme="dark"] .rtt-ai-hero,
html[data-theme="dark"] .rtt-ai-results-panel,
html[data-theme="dark"] .rtt-ai-empty,
body.rtt-dark .rtt-ai-hero,
body.rtt-dark .rtt-ai-results-panel,
body.rtt-dark .rtt-ai-empty,
body.dark-mode .rtt-ai-hero,
body.dark-mode .rtt-ai-results-panel,
body.dark-mode .rtt-ai-empty {
  background: var(--rtt-dark-panel, rgba(31, 21, 50, 0.94)) !important;
  color: #f7efff !important;
  border: 1px solid rgba(216, 191, 255, 0.18) !important;
}

html[data-theme="dark"] .rtt-ai-title,
html[data-theme="dark"] .rtt-ai-title a,
html[data-theme="dark"] .rtt-ai-chap,
html[data-theme="dark"] .rtt-ai-tags,
html[data-theme="dark"] .rtt-ai-stats,
html[data-theme="dark"] .rtt-ai-reason,
body.rtt-dark .rtt-ai-title,
body.rtt-dark .rtt-ai-title a,
body.rtt-dark .rtt-ai-chap,
body.rtt-dark .rtt-ai-tags,
body.rtt-dark .rtt-ai-stats,
body.rtt-dark .rtt-ai-reason,
body.dark-mode .rtt-ai-title,
body.dark-mode .rtt-ai-title a,
body.dark-mode .rtt-ai-chap,
body.dark-mode .rtt-ai-tags,
body.dark-mode .rtt-ai-stats,
body.dark-mode .rtt-ai-reason {
  color: #f7efff !important;
}

html[data-theme="dark"] .rtt-ai-reason,
body.rtt-dark .rtt-ai-reason,
body.dark-mode .rtt-ai-reason {
  background: rgba(255, 255, 255, 0.09) !important;
}

/* Header/dropdowns */
html[data-theme="dark"] .site-header,
body.rtt-dark .site-header,
body.dark-mode .site-header {
  background: rgba(164, 130, 213, 0.92) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22) !important;
}

html[data-theme="dark"] .rtt-bell-panel,
body.rtt-dark .rtt-bell-panel,
body.dark-mode .rtt-bell-panel {
  background: rgba(31, 21, 50, 0.98) !important;
  color: #f7efff !important;
  border: 1px solid rgba(216, 191, 255, 0.18) !important;
}

html[data-theme="dark"] .rtt-bell-list a,
body.rtt-dark .rtt-bell-list a,
body.dark-mode .rtt-bell-list a {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #f7efff !important;
}

html[data-theme="dark"] .rtt-bell-list small,
body.rtt-dark .rtt-bell-list small,
body.dark-mode .rtt-bell-list small {
  color: #d7c1f5 !important;
}

/* Legacy sidebar/top view */
html[data-theme="dark"] .product__sidebar .section-title h5,
html[data-theme="dark"] .product__sidebar__comment__item__text h5 a,
html[data-theme="dark"] .product__sidebar__comment__item__text ul li,
html[data-theme="dark"] .product__sidebar__comment__item__text span,
body.rtt-dark .product__sidebar .section-title h5,
body.rtt-dark .product__sidebar__comment__item__text h5 a,
body.rtt-dark .product__sidebar__comment__item__text ul li,
body.rtt-dark .product__sidebar__comment__item__text span,
body.dark-mode .product__sidebar .section-title h5,
body.dark-mode .product__sidebar__comment__item__text h5 a,
body.dark-mode .product__sidebar__comment__item__text ul li,
body.dark-mode .product__sidebar__comment__item__text span {
  color: #f7efff !important;
}

/* Scrollbar polish */
html[data-theme="dark"] *::-webkit-scrollbar,
body.rtt-dark *::-webkit-scrollbar,
body.dark-mode *::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
html[data-theme="dark"] *::-webkit-scrollbar-track,
body.rtt-dark *::-webkit-scrollbar-track,
body.dark-mode *::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
}
html[data-theme="dark"] *::-webkit-scrollbar-thumb,
body.rtt-dark *::-webkit-scrollbar-thumb,
body.dark-mode *::-webkit-scrollbar-thumb {
  background: rgba(201, 167, 255, 0.58);
  border-radius: 999px;
}

html[data-theme="dark"] .auth-alert {
  color: white !important;
  background: rgba(235, 226, 247, 0.28) !important;
}
/* =========================================================
   RTT safe footer/about patch - gradient light mode + stable dark mode
   Main color: #8f61d8
   ========================================================= */
:root {
  --rtt-brand-purple: #8f61d8;
  --rtt-brand-purple-2: #b58af0;
  --rtt-brand-purple-3: #6b37b6;
  --rtt-brand-pink: #f486d4;
  --rtt-brand-blue: #7aa8ff;
  --rtt-gradient-main: linear-gradient(
    135deg,
    #8f61d8 0%,
    #b58af0 48%,
    #f486d4 100%
  );
  --rtt-gradient-deep: linear-gradient(
    135deg,
    #6b37b6 0%,
    #8f61d8 48%,
    #b58af0 100%
  );
  --rtt-gradient-soft: linear-gradient(
    135deg,
    rgba(143, 97, 216, 0.14),
    rgba(244, 134, 212, 0.12)
  );
  --rtt-light-panel: rgba(255, 255, 255, 0.86);
  --rtt-light-text: #3d2364;
  --rtt-light-muted: #7c659c;
}

/* Extra FontAwesome fallback for footer/header icons when webfont is missing */
.fa-github::before {
  content: "GH" !important;
  font-size: 0.72em;
  letter-spacing: -0.04em;
}
.fa-envelope::before {
  content: "✉" !important;
}
.fa-facebook::before {
  content: "f" !important;
  font-family: Arial, sans-serif !important;
}
.fa-youtube-play::before {
  content: "▶" !important;
}
.fa-music::before {
  content: "♪" !important;
}
.fa-home::before {
  content: "⌂" !important;
}
.fa-th::before {
  content: "▦" !important;
}
.fa-clock-o::before {
  content: "◴" !important;
}
.fa-bell::before {
  content: "🔔" !important;
  font-size: 0.86em;
}
.fa-moon-o::before {
  content: "☾" !important;
}
.fa-sun-o::before {
  content: "☀" !important;
}

/* Light mode: prettier gradient header and action buttons */
body header.site-header,
body:not(.rtt-dark):not(.dark-mode) header.site-header,
html:not([data-theme="dark"]) body header.site-header {
  background: var(--rtt-gradient-main) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.32) !important;
  box-shadow: 0 16px 38px rgba(143, 97, 216, 0.28) !important;
}

body header.site-header .web-logo {
  width: 176px !important;
  height: 54px !important;
  background-image: url("../img/ico/LOGO RO.png") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center left !important;
  filter: drop-shadow(0 8px 18px rgba(67, 28, 110, 0.2));
}

body header.site-header .header-bar a > div,
body header.site-header .rtt-header-ai,
body header.site-header .rtt-theme-toggle,
body header.site-header .rtt-header-bell,
body header.site-header .search-icon,
body header.site-header .login-signup-icon,
.mobile-menu-toggle {
  background-color: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 10px 24px rgba(70, 27, 118, 0.12);
}

body header.site-header .header-bar a:hover > div,
body header.site-header .rtt-header-ai:hover,
body header.site-header .rtt-theme-toggle:hover,
body header.site-header .rtt-header-bell:hover,
body header.site-header .search-icon:hover,
body header.site-header .login-signup-icon:hover,
.mobile-menu-toggle:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-1px);
}

.primary-btn,
.site-btn,
.about-btn,
.rtt-ai-action,
.rtt-ai-tab,
.rtt-ai-rerank-btn,
.rtt-category-search button,
.auth-submit,
.profile-save-btn,
button.site-btn,
button.primary-btn,
button[type="submit"].site-btn,
button[type="submit"].primary-btn {
  background: var(--rtt-gradient-deep) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 14px 30px rgba(143, 97, 216, 0.25) !important;
}

.primary-btn:hover,
.site-btn:hover,
.about-btn:hover,
.rtt-ai-action:hover,
.rtt-ai-tab:hover,
.rtt-ai-rerank-btn:hover,
.auth-submit:hover,
.profile-save-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

/* Footer */
.footer.rtt-footer {
  position: relative;
  margin-top: 48px !important;
  padding: 46px 16px 28px !important;
  line-height: normal !important;
  text-align: left !important;
  color: #ffffff !important;
  background:
    radial-gradient(
      circle at 18% 0%,
      rgba(255, 255, 255, 0.22),
      transparent 30%
    ),
    radial-gradient(
      circle at 92% 12%,
      rgba(244, 134, 212, 0.22),
      transparent 34%
    ),
    var(--rtt-gradient-main) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.32) !important;
  box-shadow: 0 -18px 44px rgba(143, 97, 216, 0.24) !important;
  overflow: hidden;
}

.footer.rtt-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0)
  );
}

.rtt-footer__inner {
  position: relative;
  z-index: 1;
  max-width: 1180px !important;
  margin: 0 auto !important;
}

.rtt-footer__top,
.footer .rtt-footer__top {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 28px !important;
  margin-bottom: 24px;
}

.rtt-footer__brand-block {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.rtt-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #ffffff !important;
  text-decoration: none !important;
  cursor: pointer;
}

.rtt-footer__logo-mark {
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92) url("../img/ico/LOGO RO.png")
    center/contain no-repeat;
  box-shadow: 0 18px 36px rgba(56, 16, 97, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.55);
}

.rtt-footer__brand-text strong {
  display: block;
  font-family: "Oswald", sans-serif;
  font-size: 34px;
  line-height: 1;
  letter-spacing: 3px;
  color: #fff !important;
  text-shadow: 0 3px 12px rgba(55, 18, 96, 0.28);
}

.rtt-footer__brand-text small {
  display: block;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.9) !important;
  letter-spacing: 1.4px;
  font-weight: 800;
}

.rtt-footer__socials {
  display: flex;
  gap: 12px;
  align-items: center;
}

.rtt-footer__socials a {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff !important;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.24);
  text-decoration: none !important;
  box-shadow: 0 10px 24px rgba(75, 32, 123, 0.16);
  transition:
    transform 0.18s ease,
    background 0.18s ease;
}

.rtt-footer__socials a:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.3);
}

.rtt-footer__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, auto));
  gap: 14px 22px;
  align-items: center;
}

.rtt-footer__nav a {
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: 900;
  cursor: pointer;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition:
    transform 0.18s ease,
    background 0.18s ease;
}

.rtt-footer__nav a:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.27);
}

.rtt-footer__notice {
  max-width: 1080px;
  padding: 22px 24px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.17);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
}

.rtt-footer__notice p,
.rtt-footer__bottom p {
  margin: 0;
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 16px;
  line-height: 1.7;
}

.rtt-footer__notice p + p {
  margin-top: 10px;
}

.rtt-footer__notice strong,
.rtt-footer__bottom strong {
  color: #fff !important;
}

.rtt-footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.rtt-footer__bottom p {
  font-weight: 800;
}

/* About page */
.about-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 44px 16px 20px;
  color: var(--rtt-light-text);
}

.about-hero,
.about-section {
  position: relative;
  background: var(--rtt-light-panel);
  border: 1px solid rgba(143, 97, 216, 0.18);
  border-radius: 34px;
  box-shadow: 0 22px 60px rgba(93, 52, 148, 0.14);
  backdrop-filter: blur(10px);
}

.about-hero {
  padding: 48px 48px 42px;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 82% 10%,
      rgba(244, 134, 212, 0.22),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.92),
      rgba(247, 240, 255, 0.86)
    );
}

.about-hero::before {
  content: "";
  position: absolute;
  right: -90px;
  top: -120px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: var(--rtt-gradient-main);
  opacity: 0.18;
}

.about-hero__badge {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 8px 14px;
  border-radius: 999px;
  color: #fff;
  font-weight: 900;
  background: var(--rtt-gradient-deep);
  box-shadow: 0 12px 28px rgba(143, 97, 216, 0.22);
}

.about-hero h1 {
  max-width: 900px;
  margin: 0 0 18px;
  color: #3e2268 !important;
  font-family: "Oswald", sans-serif;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.08;
  letter-spacing: 0.3px;
}

.about-hero p,
.about-section__lead,
.about-card p,
.case-card p,
.about-policy p,
.case-card li {
  color: var(--rtt-light-muted) !important;
  font-size: 16px;
  line-height: 1.78;
}

.about-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
}

.about-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  text-decoration: none !important;
  font-weight: 900;
  cursor: pointer;
}

.about-btn:not(.about-btn--primary) {
  color: #6d3db0 !important;
  background: rgba(143, 97, 216, 0.12) !important;
  border: 1px solid rgba(143, 97, 216, 0.22) !important;
  box-shadow: none !important;
}

.about-section {
  margin-top: 34px;
  padding: 36px;
}

.about-grid {
  display: grid;
  gap: 22px;
}

.about-grid--two,
.case-study-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.about-grid--two {
  display: grid;
}

.case-study-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.about-card,
.case-card {
  padding: 24px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(143, 97, 216, 0.16);
  box-shadow: 0 14px 34px rgba(93, 52, 148, 0.1);
}

.about-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border-radius: 15px;
  color: #fff !important;
  font-weight: 900;
  background: var(--rtt-gradient-deep);
}

.about-card h3,
.case-card h3 {
  color: #482575 !important;
  margin-bottom: 10px;
  font-size: 22px;
  font-weight: 900;
}

.case-card__cover {
  min-height: 142px;
  border-radius: 22px;
  display: flex;
  align-items: flex-end;
  padding: 20px;
  color: #fff;
  font-size: 28px;
  font-family: "Oswald", sans-serif;
  font-weight: 900;
  letter-spacing: 0.8px;
  margin-bottom: 18px;
  overflow: hidden;
  background: var(--rtt-gradient-main);
}

.case-card__cover--manga {
  background: linear-gradient(135deg, #8f61d8, #7aa8ff);
}
.case-card__cover--recommend {
  background: linear-gradient(135deg, #8f61d8, #f486d4);
}
.case-card__cover--ui {
  background: linear-gradient(135deg, #5d338f, #8f61d8 50%, #b58af0);
}

.case-card ul {
  margin: 14px 0 0;
  padding-left: 20px;
}

.about-policy {
  background: linear-gradient(
    135deg,
    rgba(143, 97, 216, 0.12),
    rgba(255, 255, 255, 0.82)
  );
}

/* Dark mode overrides: keep footer/about readable, not milky/washed-out */
html[data-theme="dark"] body header.site-header,
body.rtt-dark header.site-header,
body.dark-mode header.site-header {
  background: linear-gradient(
    135deg,
    rgba(26, 13, 45, 0.96),
    rgba(64, 34, 101, 0.94) 54%,
    rgba(143, 97, 216, 0.86)
  ) !important;
  border-bottom: 1px solid rgba(201, 167, 255, 0.22) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38) !important;
}

html[data-theme="dark"] .footer.rtt-footer,
body.rtt-dark .footer.rtt-footer,
body.dark-mode .footer.rtt-footer {
  background:
    radial-gradient(circle at 14% 0%, rgba(143, 97, 216, 0.3), transparent 32%),
    radial-gradient(
      circle at 88% 10%,
      rgba(244, 134, 212, 0.12),
      transparent 34%
    ),
    linear-gradient(135deg, #0f091a 0%, #1b102d 46%, #26153e 100%) !important;
  border-top: 1px solid rgba(201, 167, 255, 0.22) !important;
  box-shadow: 0 -18px 52px rgba(0, 0, 0, 0.42) !important;
}

html[data-theme="dark"] .rtt-footer__notice,
body.rtt-dark .rtt-footer__notice,
body.dark-mode .rtt-footer__notice {
  background: rgba(255, 255, 255, 0.075) !important;
  border-color: rgba(201, 167, 255, 0.18) !important;
}

html[data-theme="dark"] .rtt-footer__nav a,
html[data-theme="dark"] .rtt-footer__socials a,
body.rtt-dark .rtt-footer__nav a,
body.rtt-dark .rtt-footer__socials a,
body.dark-mode .rtt-footer__nav a,
body.dark-mode .rtt-footer__socials a {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(201, 167, 255, 0.16) !important;
  color: #f9f3ff !important;
}

html[data-theme="dark"] .rtt-footer__nav a:hover,
html[data-theme="dark"] .rtt-footer__socials a:hover,
body.rtt-dark .rtt-footer__nav a:hover,
body.rtt-dark .rtt-footer__socials a:hover,
body.dark-mode .rtt-footer__nav a:hover,
body.dark-mode .rtt-footer__socials a:hover {
  background: rgba(201, 167, 255, 0.18) !important;
}

html[data-theme="dark"] .about-page,
body.rtt-dark .about-page,
body.dark-mode .about-page {
  color: #f7efff !important;
}

html[data-theme="dark"] .about-hero,
html[data-theme="dark"] .about-section,
body.rtt-dark .about-hero,
body.rtt-dark .about-section,
body.dark-mode .about-hero,
body.dark-mode .about-section {
  background:
    radial-gradient(
      circle at 84% 0%,
      rgba(143, 97, 216, 0.18),
      transparent 34%
    ),
    rgba(31, 21, 50, 0.94) !important;
  border-color: rgba(201, 167, 255, 0.2) !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.36) !important;
}

html[data-theme="dark"] .about-card,
html[data-theme="dark"] .case-card,
body.rtt-dark .about-card,
body.rtt-dark .case-card,
body.dark-mode .about-card,
body.dark-mode .case-card {
  background: rgba(255, 255, 255, 0.075) !important;
  border-color: rgba(201, 167, 255, 0.17) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24) !important;
}

html[data-theme="dark"] .about-hero h1,
html[data-theme="dark"] .about-card h3,
html[data-theme="dark"] .case-card h3,
body.rtt-dark .about-hero h1,
body.rtt-dark .about-card h3,
body.rtt-dark .case-card h3,
body.dark-mode .about-hero h1,
body.dark-mode .about-card h3,
body.dark-mode .case-card h3 {
  color: #fff7ff !important;
}

html[data-theme="dark"] .about-hero p,
html[data-theme="dark"] .about-section__lead,
html[data-theme="dark"] .about-card p,
html[data-theme="dark"] .case-card p,
html[data-theme="dark"] .about-policy p,
html[data-theme="dark"] .case-card li,
body.rtt-dark .about-hero p,
body.rtt-dark .about-section__lead,
body.rtt-dark .about-card p,
body.rtt-dark .case-card p,
body.rtt-dark .about-policy p,
body.rtt-dark .case-card li,
body.dark-mode .about-hero p,
body.dark-mode .about-section__lead,
body.dark-mode .about-card p,
body.dark-mode .case-card p,
body.dark-mode .about-policy p,
body.dark-mode .case-card li {
  color: #d9c8f2 !important;
}

html[data-theme="dark"] .about-btn:not(.about-btn--primary),
body.rtt-dark .about-btn:not(.about-btn--primary),
body.dark-mode .about-btn:not(.about-btn--primary) {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(201, 167, 255, 0.18) !important;
  color: #f7efff !important;
}

@media (max-width: 992px) {
  .rtt-footer__top,
  .footer .rtt-footer__top {
    flex-direction: column;
  }
  .rtt-footer__nav,
  .case-study-grid,
  .about-grid--two {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 576px) {
  .footer.rtt-footer {
    padding: 34px 12px 24px !important;
  }
  .rtt-footer__brand-block {
    align-items: flex-start;
    gap: 16px;
  }
  .rtt-footer__logo-mark {
    width: 64px;
    height: 64px;
    flex-basis: 64px;
  }
  .rtt-footer__brand-text strong {
    font-size: 28px;
  }
  .rtt-footer__socials {
    width: 100%;
  }
  .rtt-footer__nav {
    width: 100%;
  }
  .rtt-footer__nav a {
    width: 100%;
  }
  .rtt-footer__notice {
    padding: 18px;
    border-radius: 20px;
  }
  .rtt-footer__bottom {
    display: block;
  }
  .rtt-footer__bottom p + p {
    margin-top: 8px;
  }
  .about-page {
    padding: 28px 12px 12px;
  }
  .about-hero,
  .about-section {
    padding: 26px 20px;
    border-radius: 26px;
  }
  .about-hero h1 {
    font-size: 34px;
  }
}

/* =========================================================
   RTT profile/user compact patch FINAL
   - User/Profile: lịch sử đọc + yêu thích/theo dõi dạng hàng ngang
   - Profile comments: compact activity cards
   - Scoped vào .user-page/.public-profile-page, giữ dark mode hiện có
   ========================================================= */

.user-page .user-library-stack {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 28px !important;
  width: 100% !important;
}

.user-page .profile-row-panel {
  width: 100% !important;
  overflow: hidden !important;
}

.user-page .profile-section-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 18px !important;
}

.user-page .profile-section-title h4 { margin: 0 !important; }

.user-page .profile-row-subtitle {
  flex: 0 0 auto;
  color: #8f61d8 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

.user-page .profile-scroll-row {
  display: flex !important;
  flex-flow: row nowrap !important;
  gap: 22px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 6px 4px 18px !important;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.user-page .profile-scroll-row > .user-note {
  flex: 1 0 100% !important;
  margin: 0 !important;
}

.user-page .profile-scroll-row::-webkit-scrollbar { height: 7px; }
.user-page .profile-scroll-row::-webkit-scrollbar-track {
  background: rgba(143, 97, 216, 0.12);
  border-radius: 999px;
}
.user-page .profile-scroll-row::-webkit-scrollbar-thumb {
  background: rgba(143, 97, 216, 0.52);
  border-radius: 999px;
}

/* History poster cards */
.user-page .account-history-row > .user-list-item,
.user-page .public-history-row > .user-list-item,
.user-page #publicHistoryList > a,
.user-page #publicHistoryList > div:not(.user-note),
.user-page #readingHistoryList > a,
.user-page #recentReadingList > a {
  flex: 0 0 176px !important;
  min-width: 176px !important;
  max-width: 176px !important;
  display: block !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #442175 !important;
  text-decoration: none !important;
  scroll-snap-align: start;
}

.user-page .account-history-row img,
.user-page .public-history-row img,
.user-page #publicHistoryList img,
.user-page #readingHistoryList img,
.user-page #recentReadingList img {
  width: 176px !important;
  height: 238px !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 14px !important;
  margin: 0 0 12px !important;
  box-shadow: 0 14px 30px rgba(68, 33, 117, 0.18) !important;
}

.user-page .account-history-row strong,
.user-page .public-history-row strong,
.user-page #publicHistoryList strong,
.user-page #publicHistoryList b,
.user-page #publicHistoryList h5,
.user-page #publicHistoryList h6,
.user-page #readingHistoryList strong,
.user-page #recentReadingList strong,
.user-page .account-favorite-row span,
.user-page .account-favorite-row strong,
.user-page .public-favorite-row span,
.user-page .public-favorite-row strong,
.user-page #publicFavoriteList span,
.user-page #publicFavoriteList strong,
.user-page #publicFavoriteList b,
.user-page #publicFavoriteList h5,
.user-page #publicFavoriteList h6,
.user-page #favoriteComicsList span,
.user-page #favoriteList span {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 2.7em !important;
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 900 !important;
  text-align: left !important;
}

.user-page .account-history-row span,
.user-page .account-history-row small,
.user-page .public-history-row span,
.user-page .public-history-row small,
.user-page #publicHistoryList span,
.user-page #publicHistoryList small,
.user-page #publicHistoryList p,
.user-page #readingHistoryList span,
.user-page #recentReadingList span {
  display: block !important;
  margin: 5px 0 0 !important;
  color: #8f61d8 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
}

.user-page .account-history-row .fa-angle-right,
.user-page .public-history-row .fa-angle-right,
.user-page #publicHistoryList .fa-angle-right,
.user-page #publicHistoryList .arrow_right,
.user-page #readingHistoryList .fa-angle-right,
.user-page #recentReadingList .fa-angle-right {
  display: none !important;
}

/* Favorite/following poster cards */
.user-page .account-favorite-row > a,
.user-page .public-favorite-row > a,
.user-page #publicFavoriteList > a,
.user-page #publicFavoriteList > .favorite-item,
.user-page #publicFavoriteList > div:not(.user-note),
.user-page #favoriteComicsList > a,
.user-page #favoriteList > a {
  flex: 0 0 154px !important;
  min-width: 154px !important;
  max-width: 154px !important;
  display: block !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #442175 !important;
  text-decoration: none !important;
  scroll-snap-align: start;
}

.user-page .account-favorite-row img,
.user-page .public-favorite-row img,
.user-page #publicFavoriteList img,
.user-page #favoriteComicsList img,
.user-page #favoriteList img {
  width: 154px !important;
  height: 210px !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 14px !important;
  margin: 0 0 12px !important;
  box-shadow: 0 14px 30px rgba(68, 33, 117, 0.18) !important;
}

.user-page .account-history-row > .user-list-item:hover,
.user-page .public-history-row > .user-list-item:hover,
.user-page #publicHistoryList > a:hover,
.user-page #readingHistoryList > a:hover,
.user-page #recentReadingList > a:hover,
.user-page .account-favorite-row > a:hover,
.user-page .public-favorite-row > a:hover,
.user-page #publicFavoriteList > a:hover,
.user-page #favoriteComicsList > a:hover,
.user-page #favoriteList > a:hover {
  transform: translateY(-2px);
}

/* Public profile comments: compact cards */
.public-profile-page #publicCommentList,
.public-profile-page .profile-comments-panel .user-comments-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.public-profile-page #publicCommentList .user-comment-item,
.public-profile-page #publicCommentList > div:not(.user-note),
.public-profile-page #publicCommentList > a:not(.user-note) {
  position: relative !important;
  min-height: 92px !important;
  padding: 14px 16px 14px 18px !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.78) !important;
  border: 1px solid rgba(143, 97, 216, 0.12) !important;
  border-left: 4px solid rgba(143, 97, 216, 0.55) !important;
  box-shadow: 0 10px 24px rgba(68, 33, 117, 0.07) !important;
  color: #442175 !important;
  overflow: hidden !important;
  text-decoration: none !important;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.public-profile-page #publicCommentList .user-comment-item::before,
.public-profile-page #publicCommentList .user-comment-item::after,
.public-profile-page #publicCommentList > div:not(.user-note)::before,
.public-profile-page #publicCommentList > div:not(.user-note)::after,
.public-profile-page #publicCommentList > a:not(.user-note)::before,
.public-profile-page #publicCommentList > a:not(.user-note)::after {
  content: none !important;
  display: none !important;
}

.public-profile-page #publicCommentList .user-comment-item strong,
.public-profile-page #publicCommentList .user-comment-item strong a,
.public-profile-page #publicCommentList > div:not(.user-note) strong,
.public-profile-page #publicCommentList > div:not(.user-note) strong a,
.public-profile-page #publicCommentList > a:not(.user-note) strong {
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin: 0 86px 4px 0 !important;
  color: #442175 !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}

.public-profile-page #publicCommentList .user-comment-item span,
.public-profile-page #publicCommentList .user-comment-item small,
.public-profile-page #publicCommentList > div:not(.user-note) span,
.public-profile-page #publicCommentList > div:not(.user-note) small,
.public-profile-page #publicCommentList > a:not(.user-note) span,
.public-profile-page #publicCommentList > a:not(.user-note) small {
  position: absolute !important;
  top: 14px !important;
  right: 16px !important;
  max-width: 82px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: #9d80cc !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  text-align: right !important;
}

.public-profile-page #publicCommentList .user-comment-item p,
.public-profile-page #publicCommentList > div:not(.user-note) p,
.public-profile-page #publicCommentList > a:not(.user-note) p {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin: 8px 0 0 !important;
  color: #5e5270 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  font-weight: 600 !important;
}

.public-profile-page #publicCommentList .user-comment-item p::before,
.public-profile-page #publicCommentList > div:not(.user-note) p::before {
  content: "Comment";
  display: inline-flex;
  margin-right: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(143, 97, 216, 0.12);
  color: #8f61d8;
  font-size: 11px;
  font-weight: 900;
}

.public-profile-page #publicCommentList .user-comment-item:hover,
.public-profile-page #publicCommentList > div:not(.user-note):hover,
.public-profile-page #publicCommentList > a:not(.user-note):hover {
  transform: translateY(-2px) !important;
  border-color: rgba(143, 97, 216, 0.28) !important;
  box-shadow: 0 14px 28px rgba(68, 33, 117, 0.11) !important;
}

.public-profile-page #publicCommentList .user-note {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
}

/* Dark mode for new profile/user blocks */
html[data-theme="dark"] .user-page .profile-row-subtitle,
body.rtt-dark .user-page .profile-row-subtitle,
body.dark-mode .user-page .profile-row-subtitle {
  color: #d8c5f2 !important;
}

html[data-theme="dark"] .user-page .profile-scroll-row::-webkit-scrollbar-track,
body.rtt-dark .user-page .profile-scroll-row::-webkit-scrollbar-track,
body.dark-mode .user-page .profile-scroll-row::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .user-page .profile-scroll-row::-webkit-scrollbar-thumb,
body.rtt-dark .user-page .profile-scroll-row::-webkit-scrollbar-thumb,
body.dark-mode .user-page .profile-scroll-row::-webkit-scrollbar-thumb {
  background: rgba(201, 167, 255, 0.56);
}

html[data-theme="dark"] .user-page .profile-scroll-row strong,
html[data-theme="dark"] .user-page .profile-scroll-row span,
body.rtt-dark .user-page .profile-scroll-row strong,
body.rtt-dark .user-page .profile-scroll-row span,
body.dark-mode .user-page .profile-scroll-row strong,
body.dark-mode .user-page .profile-scroll-row span {
  color: #f7efff !important;
}

html[data-theme="dark"] .public-profile-page #publicCommentList .user-comment-item,
html[data-theme="dark"] .public-profile-page #publicCommentList > div:not(.user-note),
html[data-theme="dark"] .public-profile-page #publicCommentList > a:not(.user-note),
body.rtt-dark .public-profile-page #publicCommentList .user-comment-item,
body.rtt-dark .public-profile-page #publicCommentList > div:not(.user-note),
body.rtt-dark .public-profile-page #publicCommentList > a:not(.user-note),
body.dark-mode .public-profile-page #publicCommentList .user-comment-item,
body.dark-mode .public-profile-page #publicCommentList > div:not(.user-note),
body.dark-mode .public-profile-page #publicCommentList > a:not(.user-note) {
  background: rgba(255, 255, 255, 0.075) !important;
  border-color: rgba(216, 191, 255, 0.13) !important;
  border-left-color: rgba(201, 167, 255, 0.7) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22) !important;
}

html[data-theme="dark"] .public-profile-page #publicCommentList strong,
html[data-theme="dark"] .public-profile-page #publicCommentList strong a,
body.rtt-dark .public-profile-page #publicCommentList strong,
body.rtt-dark .public-profile-page #publicCommentList strong a,
body.dark-mode .public-profile-page #publicCommentList strong,
body.dark-mode .public-profile-page #publicCommentList strong a {
  color: #f7efff !important;
}

html[data-theme="dark"] .public-profile-page #publicCommentList span,
html[data-theme="dark"] .public-profile-page #publicCommentList small,
body.rtt-dark .public-profile-page #publicCommentList span,
body.rtt-dark .public-profile-page #publicCommentList small,
body.dark-mode .public-profile-page #publicCommentList span,
body.dark-mode .public-profile-page #publicCommentList small {
  color: #c9a7ff !important;
}

html[data-theme="dark"] .public-profile-page #publicCommentList p,
body.rtt-dark .public-profile-page #publicCommentList p,
body.dark-mode .public-profile-page #publicCommentList p {
  color: #d8c5f2 !important;
}

html[data-theme="dark"] .public-profile-page #publicCommentList p::before,
body.rtt-dark .public-profile-page #publicCommentList p::before,
body.dark-mode .public-profile-page #publicCommentList p::before {
  background: rgba(201, 167, 255, 0.14) !important;
  color: #e7d7ff !important;
}

@media (min-width: 1200px) {
  .public-profile-page #publicCommentList,
  .public-profile-page .profile-comments-panel .user-comments-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 992px) {
  .public-profile-page #publicCommentList,
  .public-profile-page .profile-comments-panel .user-comments-list {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  .user-page .profile-section-title {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  .user-page .profile-scroll-row { gap: 16px !important; }

  .user-page .account-history-row > .user-list-item,
  .user-page .public-history-row > .user-list-item,
  .user-page #publicHistoryList > a,
  .user-page #publicHistoryList > div:not(.user-note),
  .user-page #readingHistoryList > a,
  .user-page #recentReadingList > a {
    flex-basis: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
  }

  .user-page .account-history-row img,
  .user-page .public-history-row img,
  .user-page #publicHistoryList img,
  .user-page #readingHistoryList img,
  .user-page #recentReadingList img {
    width: 132px !important;
    height: 180px !important;
  }

  .user-page .account-favorite-row > a,
  .user-page .public-favorite-row > a,
  .user-page #publicFavoriteList > a,
  .user-page #publicFavoriteList > .favorite-item,
  .user-page #publicFavoriteList > div:not(.user-note),
  .user-page #favoriteComicsList > a,
  .user-page #favoriteList > a {
    flex-basis: 124px !important;
    min-width: 124px !important;
    max-width: 124px !important;
  }

  .user-page .account-favorite-row img,
  .user-page .public-favorite-row img,
  .user-page #publicFavoriteList img,
  .user-page #favoriteComicsList img,
  .user-page #favoriteList img {
    width: 124px !important;
    height: 170px !important;
  }
}


/* =========================================================
   RTT Login/Register page polish - purple template
   Main color: #8f61d8
   Safe with existing auth.js: keeps IDs and data-* hooks intact.
   ========================================================= */
:root {
  --rtt-login-purple: #8f61d8;
  --rtt-login-purple-dark: #5a2fa1;
  --rtt-login-purple-soft: #b58af0;
  --rtt-login-pink: #f486d4;
  --rtt-login-ink: #351a5d;
  --rtt-login-muted: #80659f;
  --rtt-login-gradient: linear-gradient(135deg, #6b37b6 0%, #8f61d8 45%, #b58af0 72%, #f486d4 100%);
  --rtt-login-gradient-soft: linear-gradient(135deg, rgba(143, 97, 216, 0.16), rgba(244, 134, 212, 0.13));
}

.rtt-auth-v2 {
  position: relative;
  min-height: calc(100vh - 80px);
  padding: 72px 0 78px !important;
  overflow: hidden;
}

.rtt-auth-v2::before,
.rtt-auth-v2::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(2px);
  z-index: 0;
}

.rtt-auth-v2::before {
  width: 420px;
  height: 420px;
  top: 4%;
  left: -120px;
  background: radial-gradient(circle, rgba(143, 97, 216, 0.24), transparent 68%);
}

.rtt-auth-v2::after {
  width: 460px;
  height: 460px;
  right: -150px;
  bottom: 0;
  background: radial-gradient(circle, rgba(244, 134, 212, 0.18), transparent 68%);
}

.auth-shell-v2 {
  position: relative;
  z-index: 1;
  max-width: 1160px !important;
}

.auth-layout-v2 {
  display: grid !important;
  grid-template-columns: minmax(0, 1.04fr) minmax(390px, 0.86fr) !important;
  gap: 28px !important;
  align-items: stretch !important;
}

.auth-intro-panel,
.auth-card-v2 {
  border-radius: 34px !important;
  min-height: 650px;
}

.auth-intro-panel {
  position: relative;
  overflow: hidden;
  padding: 42px !important;
  background:
    radial-gradient(circle at 80% 8%, rgba(255, 255, 255, 0.28), transparent 28%),
    radial-gradient(circle at 18% 92%, rgba(255, 255, 255, 0.22), transparent 26%),
    var(--rtt-login-gradient) !important;
  color: #fff !important;
  box-shadow: 0 28px 70px rgba(84, 38, 142, 0.26);
}

.auth-intro-panel::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 28px;
  pointer-events: none;
}

.auth-intro-panel::after {
  content: "RTT";
  position: absolute;
  right: -28px;
  bottom: -52px;
  font-family: 'Oswald', sans-serif;
  font-size: clamp(110px, 17vw, 220px);
  line-height: 0.82;
  font-weight: 900;
  letter-spacing: -0.06em;
  color: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.auth-intro-panel__glow {
  position: absolute;
  width: 210px;
  height: 210px;
  right: 26px;
  top: 120px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  filter: blur(26px);
  pointer-events: none;
}

.auth-brand {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #fff !important;
  text-decoration: none !important;
  margin-bottom: 74px;
}

.auth-brand__logo {
  width: 74px;
  height: 74px;
  border-radius: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 18px 34px rgba(48, 18, 92, 0.2);
  overflow: hidden;
}

.auth-brand__logo img {
  width: 86%;
  height: 86%;
  object-fit: contain;
  display: block;
}

.auth-brand__text strong {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: 32px;
  line-height: 1;
  letter-spacing: 0.08em;
}

.auth-brand__text small {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  letter-spacing: 0.12em;
  opacity: 0.82;
}

.auth-kicker {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 12px;
  margin-bottom: 18px;
}

.auth-intro-panel h1 {
  position: relative;
  z-index: 1;
  color: #fff !important;
  font-family: 'Oswald', sans-serif;
  font-size: clamp(42px, 5vw, 68px);
  line-height: 0.98;
  letter-spacing: 0.015em;
  max-width: 650px;
  margin: 0 0 18px !important;
  text-shadow: 0 12px 28px rgba(49, 19, 89, 0.24);
}

.auth-intro-panel p {
  position: relative;
  z-index: 1;
  max-width: 580px;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 17px;
  line-height: 1.75;
  font-weight: 700;
  margin-bottom: 34px !important;
}

.auth-feature-list {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 38px;
}

.auth-feature-item {
  min-height: 150px;
  padding: 18px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 38px rgba(51, 19, 93, 0.14);
}

.auth-feature-item > span {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.24);
  color: #fff;
  margin-bottom: 14px;
}

.auth-feature-item strong,
.auth-feature-item small {
  display: block;
  color: #fff !important;
}

.auth-feature-item strong {
  font-size: 15px;
  line-height: 1.25;
  margin-bottom: 6px;
}

.auth-feature-item small {
  opacity: 0.78;
  line-height: 1.45;
  font-weight: 700;
}

.auth-card-v2.product__container,
.auth-card-v2 {
  padding: 34px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(143, 97, 216, 0.18) !important;
  box-shadow: 0 28px 70px rgba(83, 42, 128, 0.16) !important;
  backdrop-filter: blur(18px) saturate(135%);
}

.auth-card-v2__head {
  margin-bottom: 20px;
}

.auth-card-v2__badge {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(143, 97, 216, 0.11);
  color: var(--rtt-login-purple-dark);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
  margin-bottom: 12px;
}

.auth-card-v2__head h2,
.auth-card-v2 .auth-panel h2 {
  color: var(--rtt-login-ink) !important;
  font-family: 'Oswald', sans-serif;
  font-weight: 900 !important;
  letter-spacing: 0.02em;
}

.auth-card-v2__head h2 {
  font-size: 34px;
  margin: 0 0 8px !important;
}

.auth-card-v2__head p {
  color: var(--rtt-login-muted) !important;
  font-weight: 800;
  line-height: 1.55;
  margin: 0;
}

.auth-card-v2 .auth-tabs {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 10px !important;
  padding: 7px;
  margin: 20px 0 24px !important;
  border-radius: 999px;
  background: rgba(143, 97, 216, 0.1);
}

.auth-card-v2 .auth-tab {
  min-height: 46px;
  border-radius: 999px !important;
  padding: 0 18px !important;
  background: transparent !important;
  color: var(--rtt-login-purple-dark) !important;
  font-weight: 1000 !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.auth-card-v2 .auth-tab.active {
  background: var(--rtt-login-gradient) !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(143, 97, 216, 0.32);
}

.auth-card-v2 .auth-panel h2 {
  font-size: 26px;
  margin-bottom: 18px !important;
}

.auth-card-v2 .rtt-form-row {
  margin-bottom: 16px !important;
}

.auth-card-v2 .rtt-form-row label {
  color: var(--rtt-login-ink) !important;
  font-weight: 1000 !important;
  margin-bottom: 8px !important;
}

.auth-card-v2 .rtt-input-wrap {
  min-height: 58px !important;
  border-radius: 18px !important;
  padding: 0 16px !important;
  gap: 12px !important;
  background: #fbf8ff !important;
  border: 2px solid rgba(143, 97, 216, 0.16) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.auth-card-v2 .rtt-input-wrap:focus-within {
  border-color: rgba(143, 97, 216, 0.64) !important;
  box-shadow: 0 0 0 5px rgba(143, 97, 216, 0.12), inset 0 1px 0 #fff;
  transform: translateY(-1px);
}

.auth-card-v2 .rtt-input-wrap i,
.auth-card-v2 .rtt-password-toggle {
  color: var(--rtt-login-purple) !important;
}

.auth-card-v2 .rtt-input-wrap input {
  color: var(--rtt-login-ink) !important;
  font-weight: 900 !important;
  font-size: 15px;
}

.auth-card-v2 .rtt-input-wrap input::placeholder {
  color: rgba(86, 54, 128, 0.48) !important;
}

.auth-card-v2 .auth-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.auth-card-v2 .auth-btn,
.auth-card-v2 .social-btn {
  min-height: 50px !important;
  border-radius: 999px !important;
  font-weight: 1000 !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.auth-card-v2 .auth-btn {
  flex: 1 1 170px;
  background: var(--rtt-login-gradient) !important;
  color: #fff !important;
  box-shadow: 0 16px 30px rgba(143, 97, 216, 0.28) !important;
}

.auth-card-v2 .auth-btn:hover,
.auth-card-v2 .social-btn:hover,
.auth-card-v2 .auth-tab:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.auth-card-v2 .auth-mini-link {
  margin-left: 0 !important;
  color: var(--rtt-login-purple-dark) !important;
  border: 1px solid rgba(143, 97, 216, 0.18) !important;
  background: rgba(143, 97, 216, 0.08) !important;
  border-radius: 999px;
  min-height: 42px;
  padding: 0 16px;
}

.auth-card-v2 .auth-note {
  border-radius: 18px;
  padding: 14px 16px;
  margin: 0 0 18px !important;
  color: #6f5196 !important;
  background: rgba(143, 97, 216, 0.1);
  border: 1px solid rgba(143, 97, 216, 0.14);
}

.auth-card-v2 .forgot-reset-form {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed rgba(143, 97, 216, 0.24);
}

.auth-card-v2 .auth-status {
  margin-top: 18px !important;
  border-radius: 16px !important;
}

.auth-social-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 26px 0 14px;
  color: rgba(73, 39, 116, 0.66);
  font-weight: 1000;
  font-size: 13px;
}

.auth-social-divider::before,
.auth-social-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: rgba(143, 97, 216, 0.18);
}

.auth-social-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.auth-card-v2 .social-btn.google,
.auth-card-v2 .social-btn.facebook {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0 !important;
}

.auth-card-v2 .social-btn.google {
  background: #fff !important;
  color: var(--rtt-login-ink) !important;
  border: 2px solid rgba(143, 97, 216, 0.16) !important;
  box-shadow: 0 12px 24px rgba(84, 43, 130, 0.08);
}

.auth-card-v2 .social-btn.facebook {
  background: linear-gradient(135deg, #4267b2, #6b8ee8) !important;
  color: #fff !important;
  box-shadow: 0 12px 24px rgba(66, 103, 178, 0.2);
}

/* Login dark mode: keep the page purple, but reduce glare and improve contrast. */
html[data-theme="dark"] .rtt-auth-v2,
body.rtt-dark .rtt-auth-v2,
body.dark-mode .rtt-auth-v2 {
  background:
    radial-gradient(circle at 12% 8%, rgba(143, 97, 216, 0.24), transparent 30%),
    radial-gradient(circle at 88% 80%, rgba(244, 134, 212, 0.14), transparent 30%),
    linear-gradient(180deg, #100820 0%, #160c2a 48%, #0d0718 100%) !important;
}

html[data-theme="dark"] .auth-intro-panel,
body.rtt-dark .auth-intro-panel,
body.dark-mode .auth-intro-panel {
  background:
    radial-gradient(circle at 72% 8%, rgba(255, 255, 255, 0.1), transparent 28%),
    linear-gradient(135deg, rgba(69, 32, 119, 0.96) 0%, rgba(94, 50, 154, 0.96) 50%, rgba(33, 17, 55, 0.98) 100%) !important;
  border: 1px solid rgba(226, 204, 255, 0.18) !important;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.38) !important;
}

html[data-theme="dark"] .auth-card-v2.product__container,
html[data-theme="dark"] .auth-card-v2,
body.rtt-dark .auth-card-v2.product__container,
body.rtt-dark .auth-card-v2,
body.dark-mode .auth-card-v2.product__container,
body.dark-mode .auth-card-v2 {
  background: rgba(31, 20, 50, 0.9) !important;
  border: 1px solid rgba(224, 199, 255, 0.18) !important;
  box-shadow: 0 28px 76px rgba(0, 0, 0, 0.48) !important;
}

html[data-theme="dark"] .auth-card-v2__badge,
body.rtt-dark .auth-card-v2__badge,
body.dark-mode .auth-card-v2__badge {
  background: rgba(181, 138, 240, 0.18) !important;
  color: #eadcff !important;
}

html[data-theme="dark"] .auth-card-v2__head h2,
html[data-theme="dark"] .auth-card-v2 .auth-panel h2,
body.rtt-dark .auth-card-v2__head h2,
body.rtt-dark .auth-card-v2 .auth-panel h2,
body.dark-mode .auth-card-v2__head h2,
body.dark-mode .auth-card-v2 .auth-panel h2 {
  color: #fff6ff !important;
}

html[data-theme="dark"] .auth-card-v2__head p,
body.rtt-dark .auth-card-v2__head p,
body.dark-mode .auth-card-v2__head p {
  color: #d8c5f2 !important;
}

html[data-theme="dark"] .auth-card-v2 .auth-tabs,
body.rtt-dark .auth-card-v2 .auth-tabs,
body.dark-mode .auth-card-v2 .auth-tabs {
  background: rgba(255, 255, 255, 0.07) !important;
}

html[data-theme="dark"] .auth-card-v2 .auth-tab,
body.rtt-dark .auth-card-v2 .auth-tab,
body.dark-mode .auth-card-v2 .auth-tab {
  color: #dcc9ff !important;
}

html[data-theme="dark"] .auth-card-v2 .rtt-form-row label,
body.rtt-dark .auth-card-v2 .rtt-form-row label,
body.dark-mode .auth-card-v2 .rtt-form-row label {
  color: #f5ecff !important;
}

html[data-theme="dark"] .auth-card-v2 .rtt-input-wrap,
body.rtt-dark .auth-card-v2 .rtt-input-wrap,
body.dark-mode .auth-card-v2 .rtt-input-wrap {
  background: rgba(18, 11, 31, 0.82) !important;
  border-color: rgba(225, 204, 255, 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

html[data-theme="dark"] .auth-card-v2 .rtt-input-wrap:focus-within,
body.rtt-dark .auth-card-v2 .rtt-input-wrap:focus-within,
body.dark-mode .auth-card-v2 .rtt-input-wrap:focus-within {
  border-color: rgba(181, 138, 240, 0.72) !important;
  box-shadow: 0 0 0 5px rgba(143, 97, 216, 0.14) !important;
}

html[data-theme="dark"] .auth-card-v2 .rtt-input-wrap input,
body.rtt-dark .auth-card-v2 .rtt-input-wrap input,
body.dark-mode .auth-card-v2 .rtt-input-wrap input {
  color: #fff !important;
}

html[data-theme="dark"] .auth-card-v2 .rtt-input-wrap input::placeholder,
body.rtt-dark .auth-card-v2 .rtt-input-wrap input::placeholder,
body.dark-mode .auth-card-v2 .rtt-input-wrap input::placeholder {
  color: rgba(222, 204, 247, 0.55) !important;
}

html[data-theme="dark"] .auth-card-v2 .rtt-input-wrap i,
html[data-theme="dark"] .auth-card-v2 .rtt-password-toggle,
body.rtt-dark .auth-card-v2 .rtt-input-wrap i,
body.rtt-dark .auth-card-v2 .rtt-password-toggle,
body.dark-mode .auth-card-v2 .rtt-input-wrap i,
body.dark-mode .auth-card-v2 .rtt-password-toggle {
  color: #c9a7ff !important;
}

html[data-theme="dark"] .auth-card-v2 .auth-mini-link,
body.rtt-dark .auth-card-v2 .auth-mini-link,
body.dark-mode .auth-card-v2 .auth-mini-link {
  color: #f0e4ff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

html[data-theme="dark"] .auth-card-v2 .auth-note,
body.rtt-dark .auth-card-v2 .auth-note,
body.dark-mode .auth-card-v2 .auth-note {
  color: #dfccff !important;
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

html[data-theme="dark"] .auth-social-divider,
body.rtt-dark .auth-social-divider,
body.dark-mode .auth-social-divider {
  color: #d8c5f2 !important;
}

html[data-theme="dark"] .auth-card-v2 .social-btn.google,
body.rtt-dark .auth-card-v2 .social-btn.google,
body.dark-mode .auth-card-v2 .social-btn.google {
  color: #f7efff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

@media (max-width: 1100px) {
  .auth-layout-v2 {
    grid-template-columns: 1fr !important;
  }

  .auth-intro-panel,
  .auth-card-v2 {
    min-height: unset;
  }

  .auth-intro-panel {
    padding: 34px !important;
  }

  .auth-brand {
    margin-bottom: 38px;
  }

  .auth-feature-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .rtt-auth-v2 {
    padding: 34px 0 54px !important;
  }

  .auth-layout-v2 {
    gap: 18px !important;
  }

  .auth-intro-panel,
  .auth-card-v2.product__container,
  .auth-card-v2 {
    border-radius: 26px !important;
  }

  .auth-intro-panel,
  .auth-card-v2.product__container,
  .auth-card-v2 {
    padding: 24px !important;
  }

  .auth-brand__logo {
    width: 58px;
    height: 58px;
    border-radius: 18px;
  }

  .auth-brand__text strong {
    font-size: 26px;
  }

  .auth-intro-panel h1 {
    font-size: 38px;
  }

  .auth-intro-panel p {
    font-size: 15px;
  }

  .auth-feature-list {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 24px;
  }

  .auth-feature-item {
    min-height: unset;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 14px;
  }

  .auth-feature-item > span {
    margin-bottom: 0;
  }

  .auth-card-v2__head h2 {
    font-size: 30px;
  }

  .auth-social-row {
    grid-template-columns: 1fr;
  }

  .auth-card-v2 .auth-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .auth-card-v2 .auth-btn,
  .auth-card-v2 .auth-mini-link {
    width: 100%;
  }
}

/* =========================================================
   RTT LOGIN FULLSCREEN PATCH
   Purpose: make signInUp.html a clean one-screen login page,
   with no shared header/footer and no long page scroll.
   ========================================================= */
html:has(body.rtt-auth-fixed-body),
body.rtt-auth-fixed-body {
  width: 100%;
  min-height: 100%;
  height: 100%;
  overflow: hidden !important;
  background: #0d0718 !important;
}

body.rtt-auth-fixed-body #header,
body.rtt-auth-fixed-body #footer,
body.rtt-auth-fixed-body .header,
body.rtt-auth-fixed-body .footer {
  display: none !important;
}

.rtt-auth-fullscreen.auth-page,
.rtt-auth-fullscreen.rtt-auth-v2 {
  position: relative !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #0d0718 !important;
}

.rtt-auth-fullscreen::before,
.rtt-auth-fullscreen::after {
  display: none !important;
}

.rtt-auth-bg-grid {
  position: fixed;
  inset: -8vh -8vw;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(160px, 1fr));
  grid-auto-rows: 33vh;
  gap: 20px;
  transform: rotate(-5deg) scale(1.12);
  transform-origin: center;
  opacity: 0.92;
  pointer-events: none;
}

.rtt-auth-bg-grid img {
  width: 100%;
  height: 100%;
  min-height: 230px;
  object-fit: cover;
  border-radius: 18px;
  filter: saturate(1.04) contrast(1.02);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
}

.rtt-auth-bg-grid img:nth-child(1),
.rtt-auth-bg-grid img:nth-child(7) {
  grid-row: span 2;
}

.rtt-auth-bg-grid img:nth-child(3),
.rtt-auth-bg-grid img:nth-child(9) {
  transform: translateY(-34px);
}

.rtt-auth-bg-grid img:nth-child(5),
.rtt-auth-bg-grid img:nth-child(11) {
  transform: translateY(28px);
}

.rtt-auth-bg-shade {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 56% 42%, rgba(143, 97, 216, 0.18), transparent 28%),
    radial-gradient(circle at 80% 10%, rgba(244, 134, 212, 0.18), transparent 24%),
    linear-gradient(90deg, rgba(11, 8, 24, 0.92) 0%, rgba(16, 10, 34, 0.66) 44%, rgba(13, 7, 24, 0.92) 100%),
    rgba(8, 6, 18, 0.18);
  backdrop-filter: blur(1.5px);
}

.rtt-auth-floating-logo,
.rtt-auth-close,
.rtt-auth-modal-card {
  position: relative;
  z-index: 2;
}

.rtt-auth-floating-logo {
  position: fixed !important;
  top: 32px;
  left: 36px;
  display: inline-flex;
  align-items: center;
  gap: 13px;
  color: #fff !important;
  text-decoration: none !important;
  z-index: 4;
}

.rtt-auth-floating-logo__mark {
  width: 70px;
  height: 70px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.26);
}

.rtt-auth-floating-logo__mark img {
  width: 84%;
  height: 84%;
  object-fit: contain;
  display: block;
}

.rtt-auth-floating-logo__text strong {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: 34px;
  line-height: 0.95;
  letter-spacing: 0.09em;
  color: #fff !important;
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
}

.rtt-auth-floating-logo__text small {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: #d8c2ff !important;
}

.rtt-auth-close {
  position: fixed !important;
  top: 38px;
  right: 44px;
  z-index: 4;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #fff !important;
  font-size: 48px;
  line-height: 1;
  font-family: Arial, sans-serif;
  text-decoration: none !important;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.rtt-auth-close:hover {
  opacity: 0.86;
  transform: scale(1.05);
}

.rtt-auth-modal-card.product__container,
.rtt-auth-modal-card.auth-card-v2,
.rtt-auth-modal-card {
  width: min(520px, calc(100vw - 42px)) !important;
  max-height: min(760px, 86vh) !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 34px !important;
  border-radius: 28px !important;
  background:
    linear-gradient(180deg, rgba(50, 44, 82, 0.82), rgba(32, 44, 76, 0.82)) !important;
  border: 1px solid rgba(225, 211, 255, 0.18) !important;
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.46) !important;
  backdrop-filter: blur(22px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(130%) !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(197, 164, 255, 0.45) transparent;
}

.rtt-auth-modal-card::-webkit-scrollbar {
  width: 6px;
}

.rtt-auth-modal-card::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(197, 164, 255, 0.45);
}

.rtt-auth-modal-head {
  margin-bottom: 20px !important;
}

.rtt-auth-modal-card .auth-card-v2__badge {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #eadcff !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.rtt-auth-modal-card .auth-card-v2__head h2,
.rtt-auth-modal-card .auth-panel h2 {
  color: #fff !important;
  font-size: 30px !important;
  letter-spacing: 0.02em;
}

.rtt-auth-modal-card .auth-card-v2__head p {
  color: rgba(232, 220, 255, 0.78) !important;
  font-size: 14px;
  line-height: 1.55;
}

.rtt-auth-modal-card .auth-tabs {
  margin: 18px 0 24px !important;
  padding: 6px !important;
  background: rgba(255, 255, 255, 0.09) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.rtt-auth-modal-card .auth-tab {
  min-height: 44px !important;
  color: #eadcff !important;
}

.rtt-auth-modal-card .auth-tab.active,
.rtt-auth-modal-card .auth-btn {
  background: linear-gradient(135deg, #6230b1 0%, #8f61d8 52%, #e178d0 100%) !important;
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(143, 97, 216, 0.36) !important;
}

.rtt-auth-modal-card .rtt-form-row {
  margin-bottom: 15px !important;
}

.rtt-auth-modal-card .rtt-form-row label {
  color: #f7efff !important;
  font-weight: 900 !important;
  margin-bottom: 8px !important;
}

.rtt-auth-modal-card .rtt-input-wrap {
  min-height: 56px !important;
  border-radius: 12px !important;
  padding: 0 16px !important;
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.rtt-auth-modal-card .rtt-input-wrap:focus-within {
  border-color: rgba(214, 180, 255, 0.78) !important;
  box-shadow: 0 0 0 4px rgba(143, 97, 216, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  transform: none !important;
}

.rtt-auth-modal-card .rtt-input-wrap i,
.rtt-auth-modal-card .rtt-password-toggle {
  color: #caa8ff !important;
}

.rtt-auth-modal-card .rtt-input-wrap input {
  color: #fff !important;
  font-weight: 800 !important;
}

.rtt-auth-modal-card .rtt-input-wrap input::placeholder {
  color: rgba(231, 220, 250, 0.55) !important;
}

.rtt-auth-modal-card .auth-actions {
  margin-top: 20px !important;
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 12px !important;
}

.rtt-auth-modal-card .auth-btn,
.rtt-auth-modal-card .social-btn {
  min-height: 52px !important;
  border-radius: 12px !important;
  width: 100% !important;
}

.rtt-auth-modal-card .auth-mini-link {
  width: max-content !important;
  justify-self: center;
  min-height: 30px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #fff !important;
  opacity: 0.9;
  font-weight: 900 !important;
}

.rtt-auth-modal-card .auth-mini-link:hover {
  opacity: 1;
  color: #f4d7ff !important;
}

.rtt-auth-modal-card .auth-note {
  color: #decaff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.rtt-auth-modal-card .forgot-reset-form {
  border-top-color: rgba(255, 255, 255, 0.16) !important;
}

.rtt-auth-modal-card .auth-status {
  margin-top: 14px !important;
  min-height: 22px;
  font-weight: 900;
}

.rtt-auth-modal-card .auth-social-divider {
  margin: 20px 0 13px !important;
  color: rgba(231, 220, 250, 0.72) !important;
}

.rtt-auth-modal-card .auth-social-divider::before,
.rtt-auth-modal-card .auth-social-divider::after {
  background: rgba(255, 255, 255, 0.14) !important;
}

.rtt-auth-modal-card .auth-social-row {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.rtt-auth-modal-card .social-btn.google {
  background: #fff !important;
  color: #39215f !important;
  border: 0 !important;
}

.rtt-auth-modal-card .social-btn.facebook {
  background: rgba(255, 255, 255, 0.13) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

body.rtt-auth-fixed-body.rtt-dark .rtt-auth-bg-shade,
html[data-theme="dark"] body.rtt-auth-fixed-body .rtt-auth-bg-shade,
body.rtt-auth-fixed-body.dark-mode .rtt-auth-bg-shade {
  background:
    radial-gradient(circle at 56% 42%, rgba(143, 97, 216, 0.2), transparent 28%),
    radial-gradient(circle at 80% 10%, rgba(244, 134, 212, 0.16), transparent 24%),
    linear-gradient(90deg, rgba(6, 4, 14, 0.94) 0%, rgba(15, 9, 33, 0.72) 44%, rgba(6, 4, 14, 0.94) 100%) !important;
}

@media (max-width: 820px) {
  html:has(body.rtt-auth-fixed-body),
  body.rtt-auth-fixed-body {
    overflow-y: auto !important;
    height: auto;
  }

  .rtt-auth-fullscreen.auth-page,
  .rtt-auth-fullscreen.rtt-auth-v2 {
    min-height: 100svh !important;
    height: auto !important;
    padding: 118px 14px 34px !important;
    align-items: flex-start !important;
  }

  .rtt-auth-bg-grid {
    inset: -5vh -48vw;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    grid-auto-rows: 28vh;
    gap: 14px;
    transform: rotate(-5deg) scale(1.08);
  }

  .rtt-auth-floating-logo {
    top: 24px;
    left: 22px;
  }

  .rtt-auth-floating-logo__mark {
    width: 58px;
    height: 58px;
    border-radius: 16px;
  }

  .rtt-auth-floating-logo__text strong {
    font-size: 27px;
  }

  .rtt-auth-floating-logo__text small {
    font-size: 10px;
  }

  .rtt-auth-close {
    top: 27px;
    right: 24px;
    font-size: 42px;
  }

  .rtt-auth-modal-card.product__container,
  .rtt-auth-modal-card.auth-card-v2,
  .rtt-auth-modal-card {
    width: min(100%, 470px) !important;
    max-height: none !important;
    padding: 28px !important;
    border-radius: 24px !important;
  }

  .rtt-auth-modal-card .auth-social-row {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   RTT login mobile compact fix
   - Mobile logo/close no longer fixed, so they do not cover
     the form while scrolling.
   - Smaller paddings and controls for phone screens.
   ========================================================= */
@media (max-width: 576px) {
  html:has(body.rtt-auth-fixed-body),
  body.rtt-auth-fixed-body {
    min-height: 100%;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .rtt-auth-fullscreen.auth-page,
  .rtt-auth-fullscreen.rtt-auth-v2 {
    width: 100% !important;
    min-height: 100svh !important;
    height: auto !important;
    padding: 88px 12px 22px !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    overflow: visible !important;
  }

  .rtt-auth-floating-logo {
    position: absolute !important;
    top: 16px !important;
    left: 14px !important;
    gap: 10px !important;
    z-index: 5 !important;
  }

  .rtt-auth-floating-logo__mark {
    width: 54px !important;
    height: 54px !important;
    border-radius: 14px !important;
  }

  .rtt-auth-floating-logo__text strong {
    font-size: 25px !important;
    letter-spacing: 0.08em !important;
  }

  .rtt-auth-floating-logo__text small {
    display: none !important;
  }

  .rtt-auth-close {
    position: absolute !important;
    top: 22px !important;
    right: 14px !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 39px !important;
    z-index: 5 !important;
  }

  .rtt-auth-modal-card.product__container,
  .rtt-auth-modal-card.auth-card-v2,
  .rtt-auth-modal-card {
    width: 100% !important;
    max-width: 420px !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    margin: 0 auto !important;
    padding: 22px 18px !important;
    border-radius: 22px !important;
  }

  .rtt-auth-modal-card .auth-card-v2__head,
  .rtt-auth-modal-head {
    display: none !important;
  }

  .rtt-auth-modal-card .auth-tabs {
    margin: 0 0 20px !important;
    padding: 5px !important;
    border-radius: 999px !important;
  }

  .rtt-auth-modal-card .auth-tab {
    min-height: 40px !important;
    font-size: 15px !important;
    border-radius: 999px !important;
  }

  .rtt-auth-modal-card .auth-panel h2 {
    font-size: 30px !important;
    line-height: 1.08 !important;
    margin: 0 0 18px !important;
  }

  .rtt-auth-modal-card .rtt-form-row {
    margin-bottom: 13px !important;
  }

  .rtt-auth-modal-card .rtt-form-row label {
    font-size: 13px !important;
    margin-bottom: 7px !important;
  }

  .rtt-auth-modal-card .rtt-input-wrap {
    min-height: 50px !important;
    padding: 0 14px !important;
    border-radius: 12px !important;
  }

  .rtt-auth-modal-card .rtt-input-wrap input {
    font-size: 14px !important;
    min-width: 0 !important;
  }

  .rtt-auth-modal-card .auth-actions {
    margin-top: 17px !important;
    gap: 10px !important;
  }

  .rtt-auth-modal-card .auth-btn,
  .rtt-auth-modal-card .social-btn {
    min-height: 50px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
  }

  .rtt-auth-modal-card .auth-social-divider {
    margin: 18px 0 12px !important;
    font-size: 13px !important;
  }

  .rtt-auth-modal-card .auth-social-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .rtt-auth-bg-grid {
    inset: -4vh -70vw !important;
    grid-template-columns: repeat(4, minmax(130px, 1fr)) !important;
    grid-auto-rows: 24vh !important;
    gap: 12px !important;
    transform: rotate(-5deg) scale(1.04) !important;
  }

  .rtt-auth-bg-grid img {
    min-height: 180px !important;
    border-radius: 14px !important;
  }
}

@media (max-width: 390px) {
  .rtt-auth-fullscreen.auth-page,
  .rtt-auth-fullscreen.rtt-auth-v2 {
    padding: 82px 10px 16px !important;
  }

  .rtt-auth-floating-logo__mark {
    width: 50px !important;
    height: 50px !important;
  }

  .rtt-auth-floating-logo__text strong {
    font-size: 23px !important;
  }

  .rtt-auth-close {
    top: 19px !important;
    right: 12px !important;
    font-size: 36px !important;
  }

  .rtt-auth-modal-card.product__container,
  .rtt-auth-modal-card.auth-card-v2,
  .rtt-auth-modal-card {
    padding: 18px 14px !important;
    border-radius: 20px !important;
  }

  .rtt-auth-modal-card .auth-panel h2 {
    font-size: 28px !important;
  }

  .rtt-auth-modal-card .rtt-input-wrap {
    min-height: 48px !important;
  }

  .rtt-auth-modal-card .auth-btn,
  .rtt-auth-modal-card .social-btn {
    min-height: 48px !important;
  }
}

@media (max-width: 576px) and (max-height: 720px) {
  .rtt-auth-fullscreen.auth-page,
  .rtt-auth-fullscreen.rtt-auth-v2 {
    padding-top: 76px !important;
  }

  .rtt-auth-floating-logo {
    top: 11px !important;
  }

  .rtt-auth-floating-logo__mark {
    width: 48px !important;
    height: 48px !important;
  }

  .rtt-auth-floating-logo__text strong {
    font-size: 22px !important;
  }

  .rtt-auth-close {
    top: 13px !important;
  }

  .rtt-auth-modal-card.product__container,
  .rtt-auth-modal-card.auth-card-v2,
  .rtt-auth-modal-card {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  .rtt-auth-modal-card .auth-tabs {
    margin-bottom: 15px !important;
  }

  .rtt-auth-modal-card .auth-panel h2 {
    font-size: 26px !important;
    margin-bottom: 14px !important;
  }
}

/* =========================================================
   RTT storyInfo patch - scoped only to .story-info
   Purpose: keep login fullscreen/mobile CSS intact while adding
   chapter sort + comment dark-mode fixes for storyInfo.
   ========================================================= */
.story-info .chapter-list ul li {
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.story-info .chapter-list ul li:hover { transform: translateY(-1px); }
.story-info .chapter-list .chapter-num { font-weight: 900; }
.story-info .chapter-list .chapter-status { white-space: nowrap; }
.story-info .anime__details__review {
  display: grid;
  gap: 18px;
  margin-bottom: 24px;
}
.story-info .anime__review__item {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(143, 97, 216, 0.16);
  border-radius: 22px;
  padding: 16px 18px;
  margin-bottom: 0 !important;
  box-shadow: 0 14px 32px rgba(68, 33, 117, 0.08);
}
.story-info .anime__review__item__pic:before { border-left-color: #ffffff !important; }
.story-info .anime__review__item__text {
  border: 1px solid rgba(143, 97, 216, 0.14);
  box-shadow: 0 10px 24px rgba(68, 33, 117, 0.08);
}
.story-info .anime__review__item__text h6 a {
  color: #442175;
  font-weight: 900;
}
.story-info .anime__details__form textarea {
  border: 1px solid rgba(143, 97, 216, 0.20) !important;
  background: rgba(255, 255, 255, 0.92);
  color: #442175 !important;
  box-shadow: 0 10px 24px rgba(68, 33, 117, 0.08);
}
.story-info .anime__details__form textarea::placeholder { color: rgba(68, 33, 117, 0.55) !important; }
.story-info .anime__details__form form button,
.story-info .load-more-comments {
  background: linear-gradient(135deg, #8f61d8 0%, #bd81ec 55%, #e678d1 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 14px 28px rgba(143, 97, 216, 0.22);
}
.story-info .user-note,
.story-info .rtt-api-error {
  color: #442175;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(143, 97, 216, 0.18);
  border-radius: 16px;
  padding: 14px 16px;
}

html[data-theme="dark"] .story-info .product__container,
body.rtt-dark .story-info .product__container,
body.dark-mode .story-info .product__container {
  background: rgba(31, 22, 50, 0.88) !important;
  border: 1px solid rgba(216, 191, 255, 0.16) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.25) !important;
}
html[data-theme="dark"] .story-info .section-title h4,
html[data-theme="dark"] .story-info .section-title h5,
body.rtt-dark .story-info .section-title h4,
body.rtt-dark .story-info .section-title h5,
body.dark-mode .story-info .section-title h4,
body.dark-mode .story-info .section-title h5 { color: #fff7ff !important; }
html[data-theme="dark"] .story-info .anime__details__form .section-title h6,
body.rtt-dark .story-info .anime__details__form .section-title h6,
body.dark-mode .story-info .anime__details__form .section-title h6 { color: rgba(245, 237, 255, 0.78) !important; }
html[data-theme="dark"] .story-info .chapter-list ul li,
body.rtt-dark .story-info .chapter-list ul li,
body.dark-mode .story-info .chapter-list ul li {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(216, 191, 255, 0.18) !important;
  color: #fff7ff !important;
}
html[data-theme="dark"] .story-info .chapter-list ul li:hover,
body.rtt-dark .story-info .chapter-list ul li:hover,
body.dark-mode .story-info .chapter-list ul li:hover {
  background: rgba(143, 97, 216, 0.26) !important;
  border-color: rgba(230, 120, 209, 0.36) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22) !important;
}
html[data-theme="dark"] .story-info .chapter-list .chapter-num,
html[data-theme="dark"] .story-info .chapter-list .chapter-status,
body.rtt-dark .story-info .chapter-list .chapter-num,
body.rtt-dark .story-info .chapter-list .chapter-status,
body.dark-mode .story-info .chapter-list .chapter-num,
body.dark-mode .story-info .chapter-list .chapter-status { color: #fff7ff !important; }
html[data-theme="dark"] .story-info .chapter-list .chapter-status,
body.rtt-dark .story-info .chapter-list .chapter-status,
body.dark-mode .story-info .chapter-list .chapter-status {
  background: rgba(255, 255, 255, 0.10) !important;
  border-radius: 999px;
  padding: 8px 14px;
}
html[data-theme="dark"] .story-info .cross-line,
body.rtt-dark .story-info .cross-line,
body.dark-mode .story-info .cross-line { border-bottom-color: rgba(216, 191, 255, 0.22) !important; }
html[data-theme="dark"] .story-info .anime__details__form textarea,
body.rtt-dark .story-info .anime__details__form textarea,
body.dark-mode .story-info .anime__details__form textarea {
  background: rgba(16, 8, 28, 0.78) !important;
  color: #fff7ff !important;
  border: 1px solid rgba(216, 191, 255, 0.24) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 26px rgba(0, 0, 0, 0.18) !important;
}
html[data-theme="dark"] .story-info .anime__details__form textarea::placeholder,
body.rtt-dark .story-info .anime__details__form textarea::placeholder,
body.dark-mode .story-info .anime__details__form textarea::placeholder { color: rgba(245, 237, 255, 0.56) !important; }
html[data-theme="dark"] .story-info .anime__review__item,
body.rtt-dark .story-info .anime__review__item,
body.dark-mode .story-info .anime__review__item {
  background: rgba(255, 255, 255, 0.055) !important;
  border: 1px solid rgba(216, 191, 255, 0.16) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24) !important;
}
html[data-theme="dark"] .story-info .anime__review__item__pic:before,
body.rtt-dark .story-info .anime__review__item__pic:before,
body.dark-mode .story-info .anime__review__item__pic:before { border-left-color: rgba(42, 30, 65, 0.96) !important; }
html[data-theme="dark"] .story-info .anime__review__item__text,
body.rtt-dark .story-info .anime__review__item__text,
body.dark-mode .story-info .anime__review__item__text {
  background: linear-gradient(135deg, rgba(50, 36, 76, 0.96), rgba(36, 27, 58, 0.96)) !important;
  border: 1px solid rgba(216, 191, 255, 0.18) !important;
  color: #f8f1ff !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .story-info .anime__review__item__text h6,
html[data-theme="dark"] .story-info .anime__review__item__text h6 a,
html[data-theme="dark"] .story-info .anime__review__item__text p,
body.rtt-dark .story-info .anime__review__item__text h6,
body.rtt-dark .story-info .anime__review__item__text h6 a,
body.rtt-dark .story-info .anime__review__item__text p,
body.dark-mode .story-info .anime__review__item__text h6,
body.dark-mode .story-info .anime__review__item__text h6 a,
body.dark-mode .story-info .anime__review__item__text p { color: #f8f1ff !important; }
html[data-theme="dark"] .story-info .anime__review__item__text h6 span,
body.rtt-dark .story-info .anime__review__item__text h6 span,
body.dark-mode .story-info .anime__review__item__text h6 span { color: #d9bfff !important; }
html[data-theme="dark"] .story-info .user-note,
html[data-theme="dark"] .story-info .rtt-api-error,
body.rtt-dark .story-info .user-note,
body.rtt-dark .story-info .rtt-api-error,
body.dark-mode .story-info .user-note,
body.dark-mode .story-info .rtt-api-error {
  color: #f8f1ff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(216, 191, 255, 0.18) !important;
}

.story-info .chapter-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.story-info .chapter-sort-control {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.story-info .chapter-sort-label {
  color: rgba(68, 33, 117, 0.68);
  font-weight: 900;
  font-size: 14px;
}
.story-info .chapter-sort-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #8f61d8 0%, #bd81ec 55%, #e678d1 100%);
  color: #fff;
  font-weight: 900;
  letter-spacing: .2px;
  box-shadow: 0 12px 24px rgba(143, 97, 216, 0.24);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.story-info .chapter-sort-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 16px 28px rgba(143, 97, 216, 0.30);
}
.story-info .chapter-sort-btn i { font-size: 14px; }
.story-info .chapter-list ul { transition: opacity .18s ease; }
html[data-theme="dark"] .story-info .chapter-sort-label,
body.rtt-dark .story-info .chapter-sort-label,
body.dark-mode .story-info .chapter-sort-label { color: rgba(245, 237, 255, 0.74) !important; }
html[data-theme="dark"] .story-info .chapter-sort-btn,
body.rtt-dark .story-info .chapter-sort-btn,
body.dark-mode .story-info .chapter-sort-btn {
  background: linear-gradient(135deg, #7a45c5 0%, #a06ce5 52%, #d66bc4 100%) !important;
  color: #fff7ff !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(216, 191, 255, 0.08) inset !important;
}

@media (max-width: 767px) {
  .story-info .chapter-list ul li { width: 100% !important; }
  .story-info .anime__review__item {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 10px;
    padding: 12px !important;
  }
  .story-info .anime__review__item__text { padding: 14px 16px !important; }
  .story-info .chapter-section-title { align-items: flex-start; }
  .story-info .chapter-sort-control {
    width: 100%;
    justify-content: space-between;
    margin-left: 0;
  }
  .story-info .chapter-sort-btn {
    min-height: 38px;
    padding: 0 14px;
    font-size: 13px;
  }
}

/* =========================================================
   RTT topView kiểu Top BXH user chọn - scope riêng, không đụng login
   ========================================================= */
#topView .rtt-bxh-sidebar,
.product__sidebar.rtt-bxh-sidebar {
  width: 100%;
}

#topView .rtt-bxh-panel,
.product__sidebar.rtt-bxh-sidebar .rtt-bxh-panel {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  padding: 28px 24px;
  border: 1px solid rgba(143, 97, 216, 0.18);
  background: linear-gradient(145deg, rgba(255,255,255,0.86), rgba(248,241,255,0.76));
  box-shadow: 0 22px 50px rgba(62, 29, 111, 0.12);
  backdrop-filter: blur(14px);
}

#topView .rtt-bxh-panel::before,
.product__sidebar.rtt-bxh-sidebar .rtt-bxh-panel::before {
  content: "";
  position: absolute;
  inset: -30% auto auto -30%;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(143,97,216,.22), transparent 68%);
  pointer-events: none;
}

#topView .rtt-bxh-kicker,
.product__sidebar.rtt-bxh-sidebar .rtt-bxh-kicker {
  display: block;
  color: #5a338f;
  font-size: 15px;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 7px;
}

#topView .rtt-bxh-head h5,
.product__sidebar.rtt-bxh-sidebar .rtt-bxh-head h5 {
  margin: 0 0 12px;
  color: #27124d;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -.02em;
}

#topView .rtt-bxh-head p,
.product__sidebar.rtt-bxh-sidebar .rtt-bxh-head p {
  margin: 0 0 24px;
  color: rgba(39,18,77,.72);
  font-size: 17px;
  line-height: 1.65;
}

#topView .rtt-bxh-legacy-section,
.product__sidebar.rtt-bxh-sidebar .rtt-bxh-legacy-section {
  position: relative;
  z-index: 1;
  margin-top: 18px;
}

#topView .rtt-bxh-legacy-section h6,
.product__sidebar.rtt-bxh-sidebar .rtt-bxh-legacy-section h6 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  color: #211039;
  font-size: 19px;
  font-weight: 900;
}

#topView .rtt-bxh-tab__icon,
.product__sidebar.rtt-bxh-sidebar .rtt-bxh-tab__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #8f61d8, #e176d2);
  box-shadow: 0 10px 22px rgba(143, 97, 216, .22);
  font-size: 14px;
}

#topView .rtt-bxh-list,
.product__sidebar.rtt-bxh-sidebar .rtt-bxh-list {
  display: grid;
  gap: 10px;
}

#topView .rtt-bxh-item,
.product__sidebar.rtt-bxh-sidebar .rtt-bxh-item {
  display: grid;
  grid-template-columns: 34px 56px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  min-height: 74px;
  padding: 10px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(143, 97, 216, .14);
  color: #2c174d;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

#topView .rtt-bxh-item:hover,
.product__sidebar.rtt-bxh-sidebar .rtt-bxh-item:hover {
  transform: translateY(-2px);
  border-color: rgba(143,97,216,.34);
  box-shadow: 0 14px 28px rgba(62,29,111,.16);
}

#topView .rtt-bxh-rank,
.product__sidebar.rtt-bxh-sidebar .rtt-bxh-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, #512390, #8f61d8 55%, #e176d2);
  font-size: 13px;
  font-weight: 900;
}

#topView .rtt-bxh-thumb,
.product__sidebar.rtt-bxh-sidebar .rtt-bxh-thumb {
  width: 56px;
  height: 68px;
  border-radius: 15px;
  background-size: cover;
  background-position: center;
  background-color: rgba(143,97,216,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
}

#topView .rtt-bxh-info,
.product__sidebar.rtt-bxh-sidebar .rtt-bxh-info {
  min-width: 0;
}

#topView .rtt-bxh-info strong,
.product__sidebar.rtt-bxh-sidebar .rtt-bxh-info strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #2c174d;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 900;
}

#topView .rtt-bxh-metric,
.product__sidebar.rtt-bxh-sidebar .rtt-bxh-metric {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  color: #8f61d8;
  font-size: 12px;
  font-weight: 800;
}

#topView .rtt-bxh-state,
.product__sidebar.rtt-bxh-sidebar .rtt-bxh-state {
  margin: 4px 0 18px 36px;
  color: rgba(44,23,77,.42);
  font-size: 15px;
  font-weight: 700;
}

body.rtt-dark #topView .rtt-bxh-panel,
body.dark-mode #topView .rtt-bxh-panel,
body.rtt-dark .product__sidebar.rtt-bxh-sidebar .rtt-bxh-panel,
body.dark-mode .product__sidebar.rtt-bxh-sidebar .rtt-bxh-panel {
  background: linear-gradient(145deg, rgba(32,18,52,.95), rgba(50,36,74,.9));
  border-color: rgba(190, 158, 255, .24);
  box-shadow: 0 22px 50px rgba(0,0,0,.3);
}

body.rtt-dark #topView .rtt-bxh-kicker,
body.dark-mode #topView .rtt-bxh-kicker,
body.rtt-dark #topView .rtt-bxh-head h5,
body.dark-mode #topView .rtt-bxh-head h5,
body.rtt-dark #topView .rtt-bxh-legacy-section h6,
body.dark-mode #topView .rtt-bxh-legacy-section h6,
body.rtt-dark .product__sidebar.rtt-bxh-sidebar .rtt-bxh-kicker,
body.dark-mode .product__sidebar.rtt-bxh-sidebar .rtt-bxh-kicker,
body.rtt-dark .product__sidebar.rtt-bxh-sidebar .rtt-bxh-head h5,
body.dark-mode .product__sidebar.rtt-bxh-sidebar .rtt-bxh-head h5,
body.rtt-dark .product__sidebar.rtt-bxh-sidebar .rtt-bxh-legacy-section h6,
body.dark-mode .product__sidebar.rtt-bxh-sidebar .rtt-bxh-legacy-section h6 {
  color: #fff !important;
}

body.rtt-dark #topView .rtt-bxh-head p,
body.dark-mode #topView .rtt-bxh-head p,
body.rtt-dark .product__sidebar.rtt-bxh-sidebar .rtt-bxh-head p,
body.dark-mode .product__sidebar.rtt-bxh-sidebar .rtt-bxh-head p {
  color: rgba(255,255,255,.72) !important;
}

body.rtt-dark #topView .rtt-bxh-item,
body.dark-mode #topView .rtt-bxh-item,
body.rtt-dark .product__sidebar.rtt-bxh-sidebar .rtt-bxh-item,
body.dark-mode .product__sidebar.rtt-bxh-sidebar .rtt-bxh-item {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
  color: #fff;
}

body.rtt-dark #topView .rtt-bxh-info strong,
body.dark-mode #topView .rtt-bxh-info strong,
body.rtt-dark .product__sidebar.rtt-bxh-sidebar .rtt-bxh-info strong,
body.dark-mode .product__sidebar.rtt-bxh-sidebar .rtt-bxh-info strong {
  color: #fff !important;
}

body.rtt-dark #topView .rtt-bxh-state,
body.dark-mode #topView .rtt-bxh-state,
body.rtt-dark .product__sidebar.rtt-bxh-sidebar .rtt-bxh-state,
body.dark-mode .product__sidebar.rtt-bxh-sidebar .rtt-bxh-state {
  color: rgba(255,255,255,.45) !important;
}

@media (max-width: 991px) {
  #topView .rtt-bxh-panel,
  .product__sidebar.rtt-bxh-sidebar .rtt-bxh-panel {
    padding: 24px 18px;
  }
  #topView .rtt-bxh-head h5,
  .product__sidebar.rtt-bxh-sidebar .rtt-bxh-head h5 {
    font-size: 26px;
  }
}