/*
Theme Name: Thức Tỉnh Cực Hạn
Theme URI: https://thuctinhcuchan.vn/
Author: Pelion
Description: Responsive homepage built from the supplied desktop and mobile designs.
Version: 1.5.23
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: thuctinh
*/

@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter/Inter-variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #080a12; color: #fff; font-family: 'Inter', Arial, sans-serif; }
button, a { -webkit-tap-highlight-color: transparent; }
button, input, textarea, select { font: inherit; }
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
  clip: auto !important; width: auto; height: auto; margin: 0; padding: 12px;
  top: 8px; left: 8px; z-index: 1000; background: #fff; color: #000;
}
.ttch-site-header { position: relative; z-index: 30; background: #000; }
body.home .ttch-site-header { height: 0; background: transparent; }
.ttch-site-header-layout { position: relative; width: 100%; margin: 0 auto; background: #000; }
.ttch-site-header--pc { max-width: 1920px; aspect-ratio: 1920 / 116; }
.ttch-site-header--mobile { display: none; max-width: 768px; aspect-ratio: 640 / 101; }
.ttch-header-logo, .ttch-header-nav, .ttch-header-mobile-home { position: absolute; display: block; }
.ttch-header-logo { left: 5.9375%; top: 0; width: 12.5%; }
.ttch-header-nav { top: 21.5517%; width: 14.0104%; }
.ttch-header-nav--home { left: 29.1146%; }
.ttch-header-nav--support { left: 53.9583%; }
.ttch-header-nav--community { left: 77.7083%; }
.ttch-header-logo img, .ttch-header-nav img, .ttch-header-mobile-art { display: block; width: 100%; height: auto; }
.ttch-header-logo:hover, a.ttch-header-nav:hover { filter: brightness(1.08); }
.ttch-header-logo:focus-visible, .ttch-header-nav:focus-visible,
.ttch-header-mobile-home:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.ttch-header-mobile-home { left: 3%; top: 0; width: 70%; height: 100%; }
.ttch-home { width: 100%; overflow: hidden; }
.ttch-canvas { position: relative; width: 100%; margin: 0 auto; background: #fff; isolation: isolate; }
.ttch-canvas--pc { --ttch-sidebar-scale: .82; max-width: 1920px; aspect-ratio: 1920 / 3256; }
.ttch-canvas--mobile { display: none; max-width: 768px; aspect-ratio: 640 / 3037; }
.ttch-layer { position: absolute; display: block; max-width: none; height: auto; }
.ttch-layer img { display: block; width: 100%; height: auto; }
a.ttch-layer, button.ttch-layer { text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; }
.ttch-bg { z-index: 0; }
.ttch-decor { z-index: 2; pointer-events: none; }
.ttch-art { z-index: 3; }
.ttch-foreground { z-index: 4; }
.ttch-control { z-index: 6; }
.ttch-hitbox { z-index: 7; cursor: pointer; }
.ttch-sidebar-actions {
  position: absolute; inset: 0; z-index: 10; pointer-events: none;
  transform-origin: 100% 13.083538%;
  transform: translate(calc(var(--ttch-sidebar-collapse-shift, 0px) + .9375%), var(--ttch-sidebar-shift, 0px)) scale(var(--ttch-sidebar-scale));
  transition: transform .32s ease;
}
.ttch-sidebar-collapsed { --ttch-sidebar-collapse-shift: var(--ttch-sidebar-collapse-distance, 0px); }
.ttch-sidebar-background { z-index: 0; pointer-events: none; }
.ttch-sidebar-button { z-index: 1; pointer-events: auto; }
.ttch-sidebar-toggle {
  z-index: 11; display: flex; align-items: center; justify-content: center;
  min-height: 32px; border: 2px solid #ffde51 !important;
  border-radius: 8px 0 0 8px; background: linear-gradient(#c52b16, #750b12) !important;
  box-shadow: 0 3px 12px #0009; color: #fff; font-size: clamp(22px, 2.2vw, 38px);
  line-height: 1; cursor: pointer;
  transform: translate(var(--ttch-sidebar-collapse-shift, 0px), var(--ttch-sidebar-shift, 0px));
  transition: transform .32s ease, filter .2s ease;
}
.ttch-sidebar-toggle:hover { filter: brightness(1.2); }
.ttch-sidebar-toggle[aria-expanded="false"] span { transform: rotate(180deg); }
.ttch-sidebar-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
a.ttch-control:hover, button.ttch-control:hover { filter: brightness(1.1); }
a.ttch-control:focus-visible, button.ttch-control:focus-visible,
.ttch-menu-toggle:focus-visible, .ttch-news-tab:focus-visible, .ttch-hitbox:focus-visible {
  outline: 3px solid #ffeb33; outline-offset: 3px;
}
.ttch-news-tab { z-index: 7; }
.ttch-news-tab[aria-selected="true"] { filter: drop-shadow(0 0 5px rgba(255,255,255,.8)); }
.ttch-news-preview { z-index: 4; display: block; overflow: hidden; background: radial-gradient(circle, #1b6aaa, #07132c 72%); }
.ttch-news-preview[hidden] { display: none; }
.ttch-news-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ttch-news-preview:focus-visible { outline: 3px solid #ffeb33; outline-offset: 3px; }
.ttch-news-rows { position: absolute; z-index: 6; color: #111; }
.ttch-news-panel { display: flex; flex-direction: column; width: 100%; height: 100%; margin: 0; padding: 0; list-style: none; }
.ttch-news-panel[hidden] { display: none; }
.ttch-news-panel li { display: flex; align-items: center; justify-content: space-between; flex: 1 1 20%; min-width: 0; }
.ttch-news-panel a { display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; text-decoration: none; }
.ttch-news-panel a:hover { color: #d31c0e; }
.ttch-news-panel .ttch-empty { justify-content: center; color: #343434; }
.ttch-feature-slider { z-index: 4; overflow: hidden; background: #07162c; }
.ttch-feature-slide {
  position: absolute; inset: 0; overflow: hidden; isolation: isolate;
  background: radial-gradient(circle at 75% 47%, #ff6d31 0, #9c231e 28%, transparent 60%),
              linear-gradient(125deg, #11152f 4%, #271b3d 58%, #6b1a22 100%);
  animation: ttch-feature-enter .42s ease-out both;
}
.ttch-feature-slide[hidden] { display: none; }
.ttch-feature-slide--xenci {
  background: radial-gradient(circle at 74% 48%, #1ed5c1 0, #096e8e 28%, transparent 60%),
              linear-gradient(125deg, #081d37 4%, #13295c 58%, #104958 100%);
}
.ttch-feature-slide--ma-bumbi {
  background: radial-gradient(circle at 74% 48%, #e84180 0, #792a6e 28%, transparent 60%),
              linear-gradient(125deg, #190e30 4%, #391744 58%, #6c234c 100%);
}
.ttch-feature-slide::before {
  content: ''; position: absolute; z-index: -1; width: 55%; aspect-ratio: 1;
  top: -16%; right: 1%; border: max(2px, .55vw) solid #ffffff35;
  border-radius: 50%; box-shadow: 0 0 0 16px #ffffff0a, inset 0 0 36px #ffffff27;
}
.ttch-feature-slide::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(115deg, transparent 0 35px, #ffffff08 36px 38px, transparent 39px 75px);
}
.ttch-feature-copy {
  position: absolute; z-index: 2; top: 16%; left: 6%; width: 60%;
  text-shadow: 0 3px 8px #0008;
}
.ttch-feature-kicker {
  display: inline-block; padding: .35em .65em; border: 1px solid #ffd255;
  background: #111b42bf; color: #ffdb63; font-size: clamp(10px, .85vw, 16px);
  font-weight: 900; letter-spacing: .13em;
}
.ttch-feature-copy h3 {
  margin: .22em 0 .04em; color: #ffe457; font-weight: 900;
  font-size: clamp(30px, 3.2vw, 62px); font-style: italic; letter-spacing: .035em;
  line-height: 1.06; -webkit-text-stroke: 1px #6c210f;
}
.ttch-feature-copy strong { display: block; color: #fff; font-size: clamp(14px, 1.6vw, 30px); line-height: 1.2; }
.ttch-feature-copy p { max-width: 90%; margin: 1.2em 0 0; color: #e7edf7; font-size: clamp(11px, 1.12vw, 21px); line-height: 1.45; }
.ttch-feature-slide .ttch-feature-character {
  position: absolute; z-index: 1; right: 6%; bottom: -1%; width: 42%; height: 98%;
  object-fit: contain; object-position: bottom;
  filter: drop-shadow(0 12px 12px #0009);
}
.ttch-feature-dots {
  position: absolute; z-index: 3; bottom: 5%; left: 6%; display: flex; gap: 9px;
}
.ttch-feature-dot {
  width: clamp(10px, .9vw, 17px); height: clamp(10px, .9vw, 17px);
  padding: 0; border: 2px solid #fff; border-radius: 50%; background: #ffffff70;
  cursor: pointer;
}
.ttch-feature-dot[aria-current="true"] { background: #ffce36; box-shadow: 0 0 9px #ffe67f; }
.ttch-feature-arrow { z-index: 6; padding: 0; border: 0; background: transparent; cursor: pointer; }
.ttch-feature-arrow--pc { display: flex; align-items: center; justify-content: center; }
.ttch-feature-arrow--pc img { width: 68%; max-height: 82%; object-fit: contain; }
.ttch-feature-arrow:hover { filter: brightness(1.25) drop-shadow(0 0 8px #ffd447); }
.ttch-feature-arrow:focus-visible, .ttch-feature-dot:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.ttch-feature-arrow--mobile { display: none; }
@keyframes ttch-feature-enter {
  from { opacity: .4; transform: scale(1.035); }
  to { opacity: 1; transform: scale(1); }
}
.ttch-canvas--mobile .ttch-feature-copy { top: 13%; left: 8%; width: 62%; }
.ttch-canvas--mobile .ttch-feature-kicker { font-size: clamp(8px, 1.7vw, 12px); letter-spacing: .08em; }
.ttch-canvas--mobile .ttch-feature-copy h3 { font-size: clamp(18px, 5.3vw, 36px); }
.ttch-canvas--mobile .ttch-feature-copy strong { font-size: clamp(10px, 2.65vw, 17px); }
.ttch-canvas--mobile .ttch-feature-copy p { margin-top: .9em; font-size: clamp(9px, 2.05vw, 13px); }
.ttch-canvas--mobile .ttch-feature-slide .ttch-feature-character { right: 4%; width: 43%; height: 96%; }
.ttch-canvas--mobile .ttch-feature-dots { bottom: 5%; left: 50%; transform: translateX(-50%); }
.ttch-canvas--mobile .ttch-feature-dot { width: clamp(9px, 2vw, 13px); height: clamp(9px, 2vw, 13px); }
.ttch-feature-arrow--mobile {
  position: absolute; top: 43%; display: flex; align-items: center; justify-content: center;
  width: clamp(25px, 6vw, 38px); height: clamp(38px, 9vw, 56px);
  border: 1px solid #ffe17e; background: #111b40b8; color: #ffdb56;
  font-size: clamp(24px, 6vw, 38px); line-height: 1;
}
.ttch-feature-arrow--prev { left: 0; border-radius: 0 6px 6px 0; }
.ttch-feature-arrow--next { right: 0; border-radius: 6px 0 0 6px; }
.ttch-canvas--pc .ttch-news-rows {
  font-size: min(1.12vw, 21px); font-weight: 700; line-height: 1.25;
}
.ttch-canvas--mobile .ttch-news-rows {
  font-size: clamp(11px, 2.8vw, 22px); font-weight: 700; line-height: 1.25;
}
.ttch-menu-toggle {
  position: absolute; z-index: 8; left: 84.375%; top: 19.8%; width: 13.28%; height: 64.4%;
  background: transparent; border: 0; cursor: pointer;
}
.ttch-mobile-action-panel-bg img { filter: hue-rotate(165deg) saturate(1.4); }
.ttch-mobile-download-trigger {
  z-index: 7; background: transparent !important;
}
.ttch-mobile-download-trigger img { display: block; width: 100%; height: auto; }
.ttch-mobile-download-trigger:hover { filter: brightness(1.1); }
.ttch-mobile-download-trigger:focus-visible { outline: 3px solid #ffeb33; outline-offset: 3px; }
.ttch-mobile-download-dialog {
  width: min(310px, calc(100vw - 32px)); max-width: none; padding: 36px 20px 20px;
  border: 0; border-radius: 12px;
  background: linear-gradient(150deg, #173b72, #091b3b 76%);
  box-shadow: 0 20px 70px #000b;
}
.ttch-mobile-download-dialog::backdrop { background: #050a1bd9; }
.ttch-mobile-download-close {
  position: absolute; top: 4px; right: 6px; display: grid; place-items: center;
  width: 30px; height: 30px; padding: 0; border: 0; background: transparent;
  color: #fff; font-size: 28px; line-height: 1; cursor: pointer;
}
.ttch-mobile-download-close:hover { color: #ffdb5d; }
.ttch-mobile-download-close:focus-visible { outline: 2px solid #ffdb5d; outline-offset: 2px; }
.ttch-mobile-download-options { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ttch-store-button { display: block; width: min(240px, 100%); height: auto; text-decoration: none; }
.ttch-store-button img { display: block; width: 100%; height: auto; }
.ttch-store-button:not([href]) { opacity: .55; }
.ttch-store-apk { display: none; }
html[data-ttch-os="android"] .ttch-store-apk { display: flex; }
html[data-ttch-os="android"] .ttch-store-ios { display: none; }
html[data-ttch-os="ios"] .ttch-store-button[data-ttch-platform="android"] { display: none; }
.ttch-store-button[href]:hover { filter: brightness(1.1); }
.ttch-store-button[href]:focus-visible { outline: 3px solid #ffeb33; outline-offset: 3px; }
.ttch-coming-soon {
  width: min(420px, calc(100vw - 36px)); padding: 36px 30px;
  border: 3px solid #ffd02a; border-radius: 12px;
  background: linear-gradient(150deg, #172e70, #07112d 72%); color: #fff;
  box-shadow: 0 20px 70px #000a; text-align: center; cursor: pointer;
}
.ttch-coming-soon::backdrop { background: rgba(2, 5, 18, .75); }
.ttch-coming-soon-close { position: absolute; top: 5px; right: 7px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; background: transparent; color: #fff; font-size: 27px; line-height: 1; cursor: pointer; }
.ttch-coming-soon-close:hover { color: #ffdc3f; }
.ttch-coming-soon-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ttch-coming-soon h2 { margin: 0; color: #ffdc3f; font-weight: 900; font-size: clamp(30px, 8vw, 40px); letter-spacing: .05em; }
.ttch-video-dialog {
  width: min(960px, calc(100vw - 24px)); max-width: none; padding: 0; overflow: hidden;
  border: 2px solid #ffd02a; border-radius: 12px; background: #070d23;
  color: #fff; box-shadow: 0 20px 70px #000c;
}
.ttch-video-dialog::backdrop { background: rgba(2, 5, 18, .86); }
.ttch-video-close-form { position: absolute; z-index: 10; top: 8px; right: 8px; margin: 0; }
.ttch-video-close {
  display: grid; place-items: center; width: 38px; height: 38px; padding: 0;
  border: 0; border-radius: 50%; background: #050a1be0; color: #fff;
  font-size: 30px; line-height: 1; cursor: pointer; touch-action: manipulation;
}
.ttch-video-close:focus-visible { outline: 3px solid #ffeb33; outline-offset: -3px; }
.ttch-video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.ttch-video-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.ttch-character-card { z-index: 4; pointer-events: none; }
.ttch-character-card[hidden] { display: none; }
.ttch-character-button { z-index: 7; padding: 0; border: 0; background: none; cursor: pointer; transition: filter .25s ease, scale .25s ease; }
.ttch-character-button img { display: block; width: 100%; height: auto; }
.ttch-character-button:hover, .ttch-character-button:focus-visible { filter: brightness(1.18) drop-shadow(0 0 9px #ffe68b); scale: 1.06; }
.ttch-character-button[aria-pressed="true"] { filter: drop-shadow(0 0 11px #ffcb39); }
.ttch-character-button:focus-visible { outline: 3px solid #ffeb33; outline-offset: 2px; }
.ttch-character-card:not([hidden]) img { animation: ttch-character-in .42s ease-out both; }
.ttch-hero-characters { animation: ttch-hero-float 5s ease-in-out infinite; }
.ttch-hero-play { transform-origin: center; animation: ttch-play-pulse 2.2s ease-in-out infinite; }
.ttch-clouds { animation: ttch-cloud-drift 8s ease-in-out infinite alternate; }
@keyframes ttch-character-in {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ttch-hero-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@keyframes ttch-play-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255, 225, 120, 0)); }
  50% { transform: scale(1.12); filter: drop-shadow(0 0 13px rgba(255, 225, 120, .65)); }
}
@keyframes ttch-cloud-drift {
  from { transform: translateX(-4px); }
  to { transform: translateX(4px); }
}
.ttch-mobile-menu {
  position: absolute; z-index: 20; top: 98%; right: 3.5%; width: 50%; padding: 1.5% 2%;
  background: #070707; border: 2px solid #ffc414; box-shadow: 0 8px 20px #0009;
}
.ttch-mobile-menu[hidden] { display: none; }
.ttch-mobile-menu a { display: block; padding: 8px 10px; color: #fff; text-decoration: none; font-size: min(3.5vw, 20px); font-weight: 800; }
.ttch-mobile-menu a + a { border-top: 1px solid #ffffff40; }
.ttch-mobile-menu a:hover { color: #ffd421; }
.ttch-site-footer {
  position: relative; padding: 48px 24px 18px;
  border-top: 4px solid #e9a820;
  background: radial-gradient(circle at 50% -35%, #253b69 0, #0b1937 46%, #070d20 100%);
  color: #d8e0f0;
}
.ttch-footer-inner {
  display: grid; grid-template-columns: minmax(260px, 2fr) repeat(2, minmax(150px, 1fr));
  gap: 48px; max-width: 1200px; margin: 0 auto 38px;
}
.ttch-footer-brand img { display: block; width: 200px; max-width: 100%; height: auto; }
.ttch-footer-brand p { max-width: 350px; margin: 12px 0 0; line-height: 1.6; }
.ttch-footer-nav { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.ttch-footer-nav h2 { margin: 8px 0 6px; color: #ffd044; font-size: 18px; text-transform: uppercase; letter-spacing: .04em; }
.ttch-footer-nav a { color: #d8e0f0; text-decoration: none; }
.ttch-footer-nav a:hover, .ttch-footer-nav a:focus-visible { color: #ffd044; text-decoration: underline; }
.ttch-footer-bottom {
  display: flex; justify-content: space-between; gap: 12px;
  max-width: 1200px; margin: 0 auto; padding-top: 16px;
  border-top: 1px solid #ffffff2b; color: #aeb9cd; font-size: 13px;
}
.ttch-article-page {
  min-height: 70vh; padding-bottom: 80px;
  background: radial-gradient(circle at 50% 350px, #203a69 0, #0b1b39 44%, #070e22 100%);
}
.ttch-article-hero {
  position: relative; overflow: hidden; border-top: 1px solid #edaa3c8c;
  border-bottom: 4px solid #edaa3c;
  background: linear-gradient(90deg, #071329f0 0%, #0b2147d9 70%, #0b2147c2 100%),
    url('assets/pc/backgrounds/features.png') center 33% / cover;
}
.ttch-article-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 82% 30%, #eea52736, transparent 24%),
    radial-gradient(circle, #ffffff26 1px, transparent 1.5px) 0 0 / 18px 18px;
  mask-image: linear-gradient(90deg, transparent 25%, #000 100%);
}
.ttch-article-hero-inner { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 42px 24px 64px; }
.ttch-article-breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 36px; color: #d2dcf0; font-size: 14px; }
.ttch-article-breadcrumb a { color: inherit; text-decoration: none; }
.ttch-article-breadcrumb a:hover { color: #ffd753; }
.ttch-article-kicker {
  display: inline-block; padding: 7px 16px; border-left: 4px solid #fce26c;
  background: linear-gradient(90deg, #ef8d0c, #e94416); color: #fff;
  font-size: 13px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
}
.ttch-article-hero h1 { max-width: 940px; margin: 22px 0 20px; color: #fff; font-size: clamp(32px, 4vw, 58px); line-height: 1.18; text-wrap: balance; }
.ttch-article-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: 28px;
  max-width: 1240px; margin: -28px auto 0; padding: 0 24px; position: relative; z-index: 2;
}
.ttch-article-card {
  min-width: 0; overflow: hidden; border: 1px solid #f2c04e; border-radius: 10px;
  background: #fff; color: #1c2637; box-shadow: 0 18px 50px #0006;
}
.ttch-article-cover { margin: 0; aspect-ratio: 16 / 8.5; overflow: hidden; background: #142446; }
.ttch-article-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ttch-article-content { padding: 38px 44px 26px; font-size: 17px; line-height: 1.8; overflow-wrap: anywhere; }
.ttch-article-content > :first-child { margin-top: 0; }
.ttch-article-content > :last-child { margin-bottom: 0; }
.ttch-article-content h2, .ttch-article-content h3, .ttch-article-content h4 { color: #102c59; line-height: 1.3; }
.ttch-article-content h2 { margin-top: 1.7em; padding-bottom: 9px; border-bottom: 2px solid #f0bd45; font-size: 28px; }
.ttch-article-content h3 { margin-top: 1.5em; font-size: 22px; }
.ttch-article-content a { color: #bd3e16; text-decoration-color: #e9ad48; text-underline-offset: 3px; }
.ttch-article-content img, .ttch-article-content video, .ttch-article-content iframe { max-width: 100%; height: auto; }
.ttch-article-content figure { max-width: 100%; margin: 1.5em auto; }
.ttch-article-content figcaption { color: #66758c; font-size: 13px; text-align: center; }
.ttch-article-content blockquote { margin: 1.5em 0; padding: 12px 22px; border-left: 4px solid #f1b538; background: #fff8e7; }
.ttch-article-content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.ttch-article-content th, .ttch-article-content td { padding: 8px 12px; border: 1px solid #c9d1dc; vertical-align: top; }
.ttch-article-pages { margin-top: 30px; }
.ttch-article-actions { padding: 22px 44px 32px; border-top: 1px solid #e6ebf0; }
.ttch-article-actions a { color: #b73c13; font-weight: 800; text-decoration: none; }
.ttch-article-actions a:hover { text-decoration: underline; }
.ttch-article-related { padding: 22px; border: 1px solid #eeb53d; border-radius: 10px; background: #0d1c3c; box-shadow: 0 15px 35px #0004; }
.ttch-article-related-heading span { color: #ffca4c; font-size: 11px; font-weight: 900; letter-spacing: .18em; }
.ttch-article-related-heading h2 { margin: 6px 0 22px; color: #fff; font-size: 22px; line-height: 1.25; }
.ttch-related-item { display: block; padding: 16px 0; border-top: 1px solid #ffffff2a; color: #fff; text-decoration: none; }
.ttch-related-item img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 10px; border-radius: 4px; }
.ttch-related-text { display: flex; flex-direction: column; gap: 6px; }
.ttch-related-text strong { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 15px; line-height: 1.45; }
.ttch-related-item:hover strong, .ttch-related-item:focus-visible strong { color: #ffce57; }
.ttch-related-more { display: inline-block; margin-top: 16px; color: #ffce57; font-size: 14px; font-weight: 800; text-decoration: none; }
.ttch-related-more:hover { text-decoration: underline; }
.ttch-category-hero .ttch-article-hero-inner { padding-bottom: 86px; }
.ttch-category-hero h1 { margin-bottom: 12px; }
.ttch-category-description { max-width: 720px; margin: 0; color: #d9e3f3; font-size: 17px; line-height: 1.6; }
.ttch-category-description p { margin: 0; }
.ttch-category-main { position: relative; z-index: 2; max-width: 1240px; margin: -31px auto 0; padding: 0 24px; }
.ttch-category-tabs {
  display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; padding: 12px;
  border: 1px solid #ebb63f; border-radius: 8px; background: #0d1c3c;
  box-shadow: 0 12px 30px #0004;
}
.ttch-category-tabs a {
  display: inline-block; padding: 10px 19px; border: 1px solid #ffffff2d; border-radius: 4px;
  color: #e8edfa; font-size: 14px; font-weight: 800; text-decoration: none;
}
.ttch-category-tabs a:hover, .ttch-category-tabs a:focus-visible,
.ttch-category-tabs a[aria-current="page"] { border-color: #ffd45c; background: linear-gradient(125deg, #ffcc3b, #ee7d16); color: #151b2a; }
.ttch-category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ttch-category-card {
  min-width: 0; overflow: hidden; border: 1px solid #e4af43; border-radius: 8px;
  background: #fff; color: #18243b; box-shadow: 0 12px 30px #0003;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ttch-category-card:hover { transform: translateY(-4px); box-shadow: 0 18px 34px #0006; }
.ttch-category-card-image { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(145deg, #183c77, #0c1837); color: #ffcf4d; text-decoration: none; }
.ttch-category-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ttch-category-card-image span { padding: 20px; font-size: 22px; font-weight: 900; text-align: center; }
.ttch-category-card-body { display: flex; flex-direction: column; min-height: 225px; padding: 22px; }
.ttch-category-card-body h2 { margin: 10px 0; font-size: 21px; line-height: 1.35; }
.ttch-category-card-body h2 a { color: #102448; text-decoration: none; }
.ttch-category-card-body h2 a:hover { color: #bd4316; }
.ttch-category-card-body p { margin: 0 0 18px; color: #546176; font-size: 14px; line-height: 1.55; }
.ttch-category-card-more { margin-top: auto; color: #bc4515; font-size: 14px; font-weight: 900; text-decoration: none; }
.ttch-category-card-more:hover { text-decoration: underline; }
.ttch-category-page .navigation.pagination { margin: 38px 0 0; }
.ttch-category-page .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ttch-category-page .page-numbers {
  display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px;
  padding: 0 10px; border: 1px solid #e9b549; border-radius: 4px;
  color: #ffdb71; font-weight: 800; text-decoration: none;
}
.ttch-category-page .page-numbers.current, .ttch-category-page a.page-numbers:hover { background: #f2b83d; color: #102448; }
.ttch-category-empty { padding: 44px; border: 1px solid #e9b549; border-radius: 8px; background: #fff; color: #18243b; text-align: center; }
.ttch-category-empty a { color: #b73c13; font-weight: 800; }
.ttch-generic-page { max-width: 980px; min-height: 70vh; margin: 0 auto; padding: 40px 20px; background: #fff; color: #111; }
.ttch-generic-page a { color: #b42016; }
.ttch-not-found { overflow: hidden; background: #09152e; }
.ttch-not-found-scene {
  position: relative; min-height: min(780px, 78vw); overflow: hidden;
  background: linear-gradient(90deg, #07142cf2 0%, #0a1c39e8 39%, #0919328c 72%, #07142cb5 100%),
    url('assets/pc/backgrounds/hero-scene.png') center 48% / cover no-repeat;
}
.ttch-not-found-scene::after {
  content: ''; position: absolute; inset: auto 0 0; height: 28%; pointer-events: none;
  background: linear-gradient(transparent, #09152e);
}
.ttch-not-found-inner { position: relative; z-index: 1; max-width: 1240px; min-height: inherit; margin: 0 auto; padding: 32px 24px 105px; }
.ttch-not-found-breadcrumb { display: flex; gap: 10px; align-items: center; color: #d8e3f5; font-size: 14px; }
.ttch-not-found-breadcrumb a { color: inherit; text-decoration: none; }
.ttch-not-found-breadcrumb a:hover { color: #ffd451; }
.ttch-not-found-content { position: relative; z-index: 2; max-width: 620px; padding-top: clamp(55px, 7vw, 115px); }
.ttch-not-found-eyebrow { color: #ffcf48; font-size: 15px; font-weight: 900; letter-spacing: .22em; }
.ttch-not-found-code {
  margin: -9px 0 -20px; color: #ffd44b; font-weight: 900;
  font-size: clamp(150px, 18vw, 290px); line-height: 1.05; letter-spacing: .015em;
  text-shadow: 0 5px 0 #bd4b19, 0 10px 0 #752a24, 0 19px 38px #000a;
}
.ttch-not-found-content h1 { margin: 0 0 16px; color: #fff; font-size: clamp(30px, 3.8vw, 54px); line-height: 1.2; text-wrap: balance; }
.ttch-not-found-description { max-width: 480px; margin: 0; color: #d7e2f4; font-size: 18px; line-height: 1.65; }
.ttch-not-found-home {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 58px; margin-top: 32px; padding: 0 30px; border: 2px solid #ffe37b;
  border-radius: 6px; background: linear-gradient(135deg, #ffe568, #f6a421 60%, #e5681d);
  box-shadow: 0 5px 0 #9a3d1b, 0 13px 30px #0008; color: #1b2031;
  font-size: 17px; font-weight: 900; text-decoration: none; transition: transform .2s ease, filter .2s ease;
}
.ttch-not-found-home:hover { transform: translateY(-3px); filter: brightness(1.08); }
.ttch-not-found-home:focus-visible, .ttch-not-found-links a:focus-visible,
.ttch-not-found-breadcrumb a:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.ttch-not-found-characters {
  position: absolute; z-index: 1; right: -5%; bottom: 1%; width: min(65%, 770px); height: auto;
  filter: drop-shadow(0 20px 24px #0009); pointer-events: none;
}
.ttch-not-found-links { position: relative; z-index: 2; padding: 20px 24px 54px; }
.ttch-not-found-links-inner { display: flex; align-items: center; gap: 40px; max-width: 1192px; margin: 0 auto; padding-top: 20px; border-top: 1px solid #ffffff38; }
.ttch-not-found-links p { margin: 0; color: #ffc94e; font-size: 13px; font-weight: 900; letter-spacing: .16em; white-space: nowrap; }
.ttch-not-found-links-inner > div { display: flex; flex-wrap: wrap; gap: 12px; }
.ttch-not-found-links a { display: inline-flex; align-items: center; gap: 18px; padding: 12px 17px; border: 1px solid #e9ad43; border-radius: 5px; color: #f5f7fc; font-size: 15px; font-weight: 800; text-decoration: none; }
.ttch-not-found-links a span { color: #ffc94e; }
.ttch-not-found-links a:hover { background: #f4b83b; color: #17223c; }
.ttch-not-found-links a:hover span { color: inherit; }
@media (max-width: 1023px) {
  .ttch-not-found-characters { opacity: .58; }
  .ttch-canvas--pc { display: none; }
  .ttch-canvas--mobile { display: block; }
  .ttch-site-header--pc { display: none; }
  .ttch-site-header--mobile { display: block; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .ttch-article-layout { grid-template-columns: 1fr; }
  .ttch-article-related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; }
  .ttch-article-related-heading, .ttch-related-more { grid-column: 1 / -1; }
  .ttch-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ttch-video-close { width: 32px; height: 32px; font-size: 26px; }
  .ttch-not-found-scene {
    min-height: 760px;
    background-image: linear-gradient(180deg, #07142cf0 0%, #091932df 52%, #091932a6 100%),
      url('assets/mobile/backgrounds/hero-scene.png');
    background-position: center, center;
  }
  .ttch-not-found-inner { padding: 24px 20px 240px; }
  .ttch-not-found-breadcrumb { font-size: 12px; }
  .ttch-not-found-content { padding-top: 76px; }
  .ttch-not-found-eyebrow { font-size: 12px; }
  .ttch-not-found-code { margin: 0 0 -7px; font-size: clamp(140px, 38vw, 220px); }
  .ttch-not-found-content h1 { margin-bottom: 12px; font-size: clamp(29px, 8vw, 40px); }
  .ttch-not-found-description { max-width: 420px; font-size: 15px; }
  .ttch-not-found-home { min-height: 52px; margin-top: 24px; padding: 0 22px; font-size: 15px; }
  .ttch-not-found-characters { right: -9%; bottom: 0; width: min(112%, 520px); opacity: 1; }
  .ttch-not-found-links { padding: 16px 20px 40px; }
  .ttch-not-found-links-inner { display: block; }
  .ttch-not-found-links p { margin-bottom: 16px; font-size: 11px; }
  .ttch-not-found-links-inner > div { gap: 9px; }
  .ttch-not-found-links a { gap: 10px; padding: 10px 12px; font-size: 13px; }
  .ttch-site-footer { padding: 34px 22px 20px; }
  .ttch-footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; margin-bottom: 28px; }
  .ttch-footer-brand { grid-column: 1 / -1; }
  .ttch-footer-brand img { width: 160px; }
  .ttch-footer-brand p { margin-top: 6px; font-size: 14px; }
  .ttch-footer-nav h2 { font-size: 15px; }
  .ttch-footer-nav a { font-size: 14px; }
  .ttch-footer-bottom { flex-direction: column; font-size: 12px; }
  .ttch-article-page { padding-bottom: 45px; }
  .ttch-article-hero-inner { padding: 25px 20px 52px; }
  .ttch-article-breadcrumb { margin-bottom: 26px; font-size: 12px; }
  .ttch-article-kicker { font-size: 11px; }
  .ttch-article-hero h1 { margin: 16px 0; font-size: clamp(28px, 8vw, 38px); }
  .ttch-article-layout { grid-template-columns: 1fr; gap: 20px; margin-top: -24px; padding: 0 14px; }
  .ttch-article-content { padding: 24px 22px; font-size: 16px; line-height: 1.7; }
  .ttch-article-content h2 { font-size: 23px; }
  .ttch-article-content table { width: 100% !important; }
  .ttch-article-content table th, .ttch-article-content table td { min-width: 145px; overflow-wrap: normal; word-break: normal; }
  .ttch-article-content table th:first-child, .ttch-article-content table td:first-child { min-width: 74px; }
  .ttch-article-actions { padding: 18px 22px 26px; }
  .ttch-article-related { padding: 20px; }
  .ttch-related-item { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px; align-items: center; }
  .ttch-related-item img { margin: 0; }
  .ttch-category-hero .ttch-article-hero-inner { padding-bottom: 60px; }
  .ttch-category-description { font-size: 14px; }
  .ttch-category-main { margin-top: -22px; padding: 0 14px; }
  .ttch-category-tabs { gap: 6px; margin-bottom: 18px; padding: 8px; }
  .ttch-category-tabs a { flex: 1 1 calc(50% - 6px); padding: 9px 6px; font-size: 12px; text-align: center; }
  .ttch-category-grid { grid-template-columns: 1fr; gap: 18px; }
  .ttch-category-card-body { min-height: 0; padding: 18px; }
  .ttch-category-card-body h2 { font-size: 19px; }
  .ttch-category-card-body p { margin-bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .ttch-hero-characters, .ttch-hero-play, .ttch-clouds,
  .ttch-character-card:not([hidden]) img, .ttch-feature-slide { animation: none; }
  .ttch-character-button, .ttch-sidebar-actions, .ttch-sidebar-toggle, .ttch-not-found-home { transition: none; }
}