/* Truyện Hay Hay homepage template */
:root {
    --thh-bg: #070d1a;
    --thh-bg-2: #0d1426;
    --thh-panel: rgba(18, 26, 45, 0.82);
    --thh-panel-strong: rgba(23, 31, 54, 0.94);
    --thh-line: rgba(255, 255, 255, 0.095);
    --thh-line-strong: rgba(255, 255, 255, 0.16);
    --thh-text: #f6f2ef;
    --thh-muted: #aab0c1;
    --thh-soft: #ccd1dc;
    --thh-pink: #e65382;
    --thh-coral: #ff7a6b;
    --thh-purple: #9b63f4;
    --thh-gold: #f4ca77;
    --thh-cyan: #6ad7f5;
    --thh-green: #7ce0ba;
    --thh-radius-xl: 28px;
    --thh-radius-lg: 20px;
    --thh-radius-md: 14px;
    --thh-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
    --thh-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --thh-display: Georgia, "Times New Roman", serif;
}

html:has(.thh-story-home-template),
body.thh-story-home-template {
    margin: 0;
    min-height: 100%;
    background: #070d1a;
}

body.thh-story-home-template .wp-site-blocks,
body.thh-story-home-template header.wp-block-template-part,
body.thh-story-home-template footer.wp-block-template-part {
    display: none !important;
}

.thh-full-bleed {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow-x: clip;
    background:
        radial-gradient(circle at 18% 8%, rgba(230, 83, 130, 0.18), transparent 25rem),
        radial-gradient(circle at 88% 2%, rgba(244, 202, 119, 0.12), transparent 24rem),
        linear-gradient(135deg, #f8e8f1 0%, #f2dbe7 16%, #0b1121 16%, #0b1121 100%);
    padding: clamp(12px, 2vw, 30px);
    box-sizing: border-box;
}

.thh-app,
.thh-app * {
    box-sizing: border-box;
}

.thh-app {
    position: relative;
    isolation: isolate;
    width: min(1760px, 100%);
    min-height: 920px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    color: var(--thh-text);
    font-family: var(--thh-font);
    background:
        radial-gradient(circle at 66% 6%, rgba(121, 87, 255, 0.14), transparent 29rem),
        radial-gradient(circle at 18% 70%, rgba(230, 83, 130, 0.11), transparent 34rem),
        linear-gradient(180deg, rgba(10, 17, 32, 0.98), rgba(7, 13, 26, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--thh-radius-xl);
    overflow: hidden;
    box-shadow: var(--thh-shadow);
}

.thh-app a {
    color: inherit;
    text-decoration: none;
}

.thh-app button,
.thh-app input {
    font-family: inherit;
}

.thh-bg-orb {
    position: absolute;
    z-index: -1;
    pointer-events: none;
    filter: blur(40px);
    opacity: .55;
}

.thh-bg-orb-one {
    width: 360px;
    height: 360px;
    left: 310px;
    top: 70px;
    background: rgba(230, 83, 130, 0.22);
}

.thh-bg-orb-two {
    width: 420px;
    height: 420px;
    right: 120px;
    bottom: 120px;
    background: rgba(244, 202, 119, 0.13);
}

.thh-sidebar {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 32px 18px 26px;
    background: linear-gradient(180deg, rgba(15, 22, 38, .96), rgba(9, 15, 29, .94));
    border-right: 1px solid var(--thh-line);
}

.thh-brand {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 0 18px 18px;
    font-size: 24px;
    font-weight: 760;
    letter-spacing: -.02em;
}

.thh-brand strong {
    color: var(--thh-coral);
    font-weight: 760;
}

.thh-brand-mark {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    color: var(--thh-pink);
    background: linear-gradient(135deg, rgba(230, 83, 130, .20), rgba(244, 202, 119, .12));
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: inset 0 0 24px rgba(230, 83, 130, .18);
}

.thh-side-nav {
    display: grid;
    gap: 7px;
}

.thh-side-link {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 18px;
    color: var(--thh-soft);
    border-radius: 11px;
    transition: transform .18s ease, background .18s ease, color .18s ease;
}

.thh-side-link span {
    width: 22px;
    display: inline-grid;
    place-items: center;
    color: #d9dfef;
    opacity: .9;
}

.thh-side-link strong {
    font-size: 15px;
    font-weight: 700;
}

.thh-side-link:hover,
.thh-side-link.is-active {
    color: #fff;
    background: linear-gradient(135deg, rgba(255, 122, 107, .52), rgba(230, 83, 130, .58), rgba(112, 76, 198, .42));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 12px 28px rgba(230,83,130,.18);
    transform: translateX(2px);
}

.thh-card,
.thh-panel {
    background: linear-gradient(180deg, rgba(24, 32, 54, .88), rgba(12, 20, 37, .78));
    border: 1px solid var(--thh-line);
    border-radius: var(--thh-radius-lg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.thh-card {
    padding: 18px;
}

.thh-card-head,
.thh-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.thh-card h3,
.thh-section h2,
.thh-section-head h2,
.thh-rank h2,
.thh-vip-card h2 {
    margin: 0;
    color: #fff;
}

.thh-card h3 {
    font-size: 15px;
}

.thh-card p {
    margin: 6px 0 13px;
    color: var(--thh-muted);
    font-size: 13px;
    line-height: 1.55;
}

.thh-card-head a,
.thh-section-head a {
    color: #cfd3df;
    font-size: 13px;
    opacity: .86;
}

.thh-day-list {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 7px;
    margin: 12px 0 16px;
}

.thh-day-list span {
    display: grid;
    place-items: center;
    min-height: 30px;
    color: #aeb5c6;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.thh-day-list span.done {
    color: #fff;
    background: linear-gradient(135deg, var(--thh-pink), #7c6dea);
    border-color: transparent;
}

.thh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 20px;
    border: 0;
    border-radius: 12px;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.thh-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.thh-btn-primary {
    background: linear-gradient(135deg, var(--thh-coral), var(--thh-pink));
    box-shadow: 0 14px 30px rgba(230, 83, 130, .28);
}

.thh-btn-gold {
    color: #3c260a;
    background: linear-gradient(135deg, #fff0ba, var(--thh-gold), #d79743);
    box-shadow: 0 18px 40px rgba(244, 202, 119, .25);
}

.thh-btn-ghost {
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.12);
}

.thh-btn-block {
    width: 100%;
}

.thh-wallet-mini {
    margin-top: 0;
}

.thh-wallet-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 34px;
    color: var(--thh-muted);
    font-size: 13px;
}

.thh-wallet-row strong {
    color: #fff;
    font-size: 15px;
}

.thh-wallet-row:last-child strong {
    color: var(--thh-gold);
    font-size: 13px;
}

.thh-invite-card {
    margin-top: auto;
    position: relative;
    min-height: 128px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 20px;
    border-radius: var(--thh-radius-lg);
    border: 1px solid rgba(255,255,255,.10);
    background:
        radial-gradient(circle at 78% 50%, rgba(244,202,119,.28), transparent 6rem),
        radial-gradient(circle at 100% 0%, rgba(230,83,130,.35), transparent 7rem),
        linear-gradient(135deg, rgba(64,31,70,.95), rgba(23,31,55,.85));
}

.thh-invite-card h3 {
    margin: 0 0 6px;
    color: var(--thh-gold);
    font-size: 18px;
}

.thh-invite-card p {
    margin: 0 0 14px;
    color: #f1d6bd;
    font-size: 13px;
}

.thh-gift {
    position: absolute;
    right: 12px;
    bottom: -4px;
    width: 88px;
    height: 88px;
    display: grid;
    place-items: center;
    color: var(--thh-gold);
    font-size: 54px;
    filter: drop-shadow(0 16px 20px rgba(0,0,0,.35));
}

.thh-main {
    min-width: 0;
    padding: 24px 30px 30px;
}

.thh-topbar {
    min-height: 58px;
    display: grid;
    grid-template-columns: minmax(240px, 390px) 1fr auto;
    gap: 20px;
    align-items: center;
    margin-bottom: 20px;
}

.thh-search {
    height: 46px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px 0 20px;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.085);
    border-radius: 999px;
}

.thh-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    color: #fff;
    background: transparent;
    font-size: 14px;
}

.thh-search input::placeholder {
    color: #858fa5;
}

.thh-search button {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    color: #dfe6f2;
    background: rgba(255,255,255,.035);
    cursor: pointer;
}

.thh-topnav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 1.4vw, 28px);
    white-space: nowrap;
}

.thh-topnav a {
    color: #d5dae7;
    font-size: 14px;
    font-weight: 800;
}

.thh-topnav a.is-gold {
    color: var(--thh-gold);
}

.thh-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.thh-icon-btn {
    position: relative;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    color: #dce2ef;
    background: transparent;
    cursor: pointer;
}

.thh-icon-btn span {
    position: absolute;
    top: 2px;
    right: 3px;
    min-width: 19px;
    height: 19px;
    display: grid;
    place-items: center;
    padding: 0 4px;
    color: #fff;
    border-radius: 999px;
    background: var(--thh-pink);
    font-size: 10px;
    font-weight: 900;
}

.thh-layout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 430px;
    gap: 18px;
}

.thh-hero {
    position: relative;
    min-height: 360px;
    overflow: hidden;
    grid-column: 1 / 2;
    padding: clamp(28px, 3vw, 40px);
    background:
        linear-gradient(90deg, rgba(12, 16, 31, .98) 0%, rgba(20, 23, 44, .86) 45%, rgba(12, 15, 29, .34) 100%),
        radial-gradient(circle at 80% 38%, rgba(255,255,255,.20), transparent 8rem),
        linear-gradient(140deg, #1e172d, #26344b 55%, #121a31);
}

.thh-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 0 67%, rgba(7,13,26,.88) 100%),
        radial-gradient(circle at 66% 30%, rgba(229, 193, 255, .25), transparent 20rem),
        repeating-linear-gradient(90deg, transparent 0 44px, rgba(255,255,255,.018) 45px 46px);
    pointer-events: none;
}

.thh-hero-content {
    position: relative;
    z-index: 2;
    width: min(440px, 58%);
}

.thh-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 13px;
    margin-bottom: 18px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, rgba(230,83,130,.88), rgba(117,70,158,.72));
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.thh-hero h1 {
    margin: 0;
    font-family: var(--thh-display);
    color: var(--thh-gold);
    font-size: clamp(54px, 5.2vw, 88px);
    line-height: .86;
    letter-spacing: -.055em;
    text-shadow: 0 10px 40px rgba(244, 202, 119, .24);
}

.thh-hero h1 span {
    color: #ffd88a;
}

.thh-hero p {
    max-width: 440px;
    margin: 22px 0 24px;
    color: #f0eff4;
    font-size: 16px;
    line-height: 1.65;
}

.thh-hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.thh-hero-art {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}

.thh-moon {
    position: absolute;
    right: 130px;
    top: 52px;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 24%, #fff, #d8ccff 44%, rgba(214, 157, 255, .18) 72%);
    box-shadow: 0 0 70px rgba(223, 193, 255, .45);
    opacity: .72;
}

.thh-mountains {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 74%;
    height: 64%;
    background:
        linear-gradient(135deg, transparent 0 42%, rgba(7,10,21,.65) 42% 58%, transparent 58%),
        linear-gradient(155deg, transparent 0 50%, rgba(11,16,33,.84) 50% 67%, transparent 67%),
        linear-gradient(180deg, transparent, rgba(6,9,18,.82));
    clip-path: polygon(0 68%, 14% 45%, 24% 60%, 40% 28%, 55% 57%, 72% 34%, 100% 64%, 100% 100%, 0 100%);
    filter: blur(.2px);
    opacity: .74;
}

.thh-character {
    position: absolute;
    right: 108px;
    bottom: 18px;
    width: 232px;
    height: 330px;
    background:
        radial-gradient(ellipse at 52% 10%, rgba(255,255,255,.62), transparent 8%),
        linear-gradient(105deg, transparent 0 33%, rgba(10,12,24,.96) 34% 53%, rgba(36,33,55,.96) 56% 69%, transparent 70%),
        linear-gradient(20deg, transparent 0 35%, rgba(7,10,20,.96) 35% 69%, transparent 70%);
    clip-path: polygon(44% 0, 58% 8%, 67% 22%, 60% 39%, 73% 50%, 81% 100%, 22% 100%, 34% 49%, 27% 36%, 34% 17%);
    filter: drop-shadow(-28px 18px 35px rgba(0,0,0,.45));
    opacity: .88;
}

.thh-character::before,
.thh-character::after {
    content: "";
    position: absolute;
    background: linear-gradient(180deg, rgba(12,14,28,.96), rgba(4,6,14,.3));
    transform-origin: top center;
}

.thh-character::before {
    width: 110px;
    height: 270px;
    right: -48px;
    top: 8px;
    border-radius: 80% 10% 70% 20%;
    transform: rotate(-24deg);
}

.thh-character::after {
    width: 86px;
    height: 250px;
    left: 2px;
    top: 0;
    border-radius: 80% 20% 70% 30%;
    transform: rotate(20deg);
}

.thh-slider-dots {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 20px;
    display: flex;
    gap: 10px;
    transform: translateX(-50%);
}

.thh-slider-dots span {
    width: 10px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255,255,255,.34);
}

.thh-slider-dots span.active {
    width: 32px;
    background: #fff;
}

.thh-promo-stack {
    display: grid;
    gap: 18px;
}

.thh-promo {
    position: relative;
    min-height: 171px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 26px;
    border: 1px solid rgba(255,255,255,.095);
    border-radius: var(--thh-radius-lg);
    background: linear-gradient(135deg, rgba(24, 18, 36, .96), rgba(19, 28, 49, .88));
}

.thh-promo span {
    display: inline-flex;
    margin-bottom: 10px;
    padding: 5px 10px;
    color: var(--thh-gold);
    background: rgba(244, 202, 119, .10);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.thh-promo h2 {
    margin: 0 0 8px;
    font-size: 19px;
}

.thh-promo p {
    margin: 0 0 18px;
    color: #fff0ca;
}

.thh-promo-vip strong {
    position: absolute;
    right: 34px;
    top: 34px;
    width: 126px;
    height: 112px;
    display: grid;
    place-items: center;
    color: var(--thh-gold);
    border: 2px solid rgba(244,202,119,.48);
    border-radius: 28px;
    background: radial-gradient(circle, rgba(244,202,119,.18), rgba(42,28,19,.84));
    font-family: var(--thh-display);
    font-size: 38px;
    box-shadow: 0 0 50px rgba(244,202,119,.22), inset 0 0 20px rgba(244,202,119,.16);
    transform: rotate(6deg);
}

.thh-promo-vip::after,
.thh-promo-spin::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 78% 33%, rgba(244,202,119,.28), transparent 11rem);
    pointer-events: none;
}

.thh-promo-spin i {
    position: absolute;
    right: 36px;
    top: 28px;
    width: 124px;
    height: 124px;
    border-radius: 50%;
    background:
        conic-gradient(from 10deg, #9e243c, #f4ca77, #9e243c, #6b335e, #e65382, #f4ca77, #9e243c),
        radial-gradient(circle, #f8e0a8 0 14%, transparent 15%);
    border: 8px solid rgba(244,202,119,.28);
    box-shadow: inset 0 0 25px rgba(0,0,0,.55), 0 0 45px rgba(244,202,119,.18);
}

.thh-genre-strip {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 12px;
    padding: 16px 18px;
}

.thh-genre {
    min-height: 84px;
    display: grid;
    place-items: center;
    gap: 9px;
    color: #f9f9fb;
    text-align: center;
    border-radius: 16px;
    transition: transform .18s ease, background .18s ease;
}

.thh-genre:hover {
    transform: translateY(-3px);
    background: rgba(255,255,255,.04);
}

.thh-genre span {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.16);
    font-size: 25px;
    box-shadow: inset 0 0 28px rgba(255,255,255,.06), 0 14px 24px rgba(0,0,0,.24);
}

.thh-genre strong {
    font-size: 13px;
}

.thh-genre-love span { background: linear-gradient(135deg, rgba(230,83,130,.72), rgba(85,28,75,.82)); }
.thh-genre-blue span { background: linear-gradient(135deg, rgba(106,215,245,.68), rgba(38,58,117,.82)); }
.thh-genre-violet span { background: linear-gradient(135deg, rgba(155,99,244,.74), rgba(56,35,93,.86)); }
.thh-genre-cyan span { background: linear-gradient(135deg, rgba(106,215,245,.70), rgba(23,84,104,.78)); }
.thh-genre-amber span { background: linear-gradient(135deg, rgba(244,202,119,.72), rgba(80,50,29,.78)); }
.thh-genre-red span { background: linear-gradient(135deg, rgba(255,80,92,.70), rgba(70,23,35,.82)); }
.thh-genre-gold span { background: linear-gradient(135deg, rgba(244,202,119,.82), rgba(92,65,34,.86)); }
.thh-genre-mint span { background: linear-gradient(135deg, rgba(124,224,186,.72), rgba(28,87,84,.80)); }
.thh-genre-yellow span { background: linear-gradient(135deg, rgba(255,218,101,.76), rgba(96,74,31,.82)); }
.thh-genre-neutral span { background: linear-gradient(135deg, rgba(214,219,235,.42), rgba(56,62,84,.72)); }

.thh-section {
    min-width: 0;
}

.thh-section-head {
    margin: 0 0 16px;
}

.thh-section-head h2 {
    font-size: 21px;
    letter-spacing: -.02em;
}

.thh-story-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 15px;
}

.thh-story-card,
.thh-mini-card {
    min-width: 0;
}

.thh-cover,
.thh-mini-cover,
.thh-rank-thumb {
    position: relative;
    overflow: hidden;
    display: block;
    background-size: cover;
    background-position: center;
}

.thh-cover {
    aspect-ratio: 3/4;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 14px 30px rgba(0,0,0,.24);
}

.thh-cover::after,
.thh-mini-cover::after,
.thh-rank-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255,255,255,.15), transparent 34%),
        linear-gradient(0deg, rgba(3,7,15,.90), transparent 58%);
}

.thh-rank-badge {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border-radius: 11px 0 11px 0;
    color: #fff;
    background: linear-gradient(135deg, #ff9a55, var(--thh-pink));
    font-size: 11px;
    font-weight: 900;
}

.thh-cover-title {
    position: absolute;
    z-index: 2;
    left: 12px;
    right: 12px;
    bottom: 12px;
    color: #fff;
    font-family: var(--thh-display);
    font-size: 18px;
    line-height: 1.02;
    font-weight: 800;
    text-shadow: 0 2px 12px rgba(0,0,0,.65);
}

.thh-story-card h3,
.thh-mini-card h3 {
    margin: 10px 0 4px;
    color: #fff;
    font-size: 15px;
    line-height: 1.25;
}

.thh-story-card h3 a:hover,
.thh-mini-card h3 a:hover {
    color: var(--thh-gold);
}

.thh-story-card p,
.thh-mini-card p {
    margin: 0 0 8px;
    color: var(--thh-muted);
    font-size: 12px;
}

.thh-fire {
    color: #ff8b75;
    font-size: 12px;
    font-weight: 800;
}

.cover-love { background: radial-gradient(circle at 40% 18%, #ffd3ce, transparent 25%), linear-gradient(135deg, #7e2b51, #1b2035 64%, #34111d); }
.cover-blue { background: radial-gradient(circle at 50% 20%, #72e0ff, transparent 26%), linear-gradient(135deg, #103058, #20264a 57%, #0c1223); }
.cover-purple { background: radial-gradient(circle at 42% 25%, #efccff, transparent 26%), linear-gradient(135deg, #362052, #151a32 58%, #0b0d18); }
.cover-rose { background: radial-gradient(circle at 48% 24%, #ffd7b5, transparent 27%), linear-gradient(135deg, #5f2842, #2c253a 59%, #21101e); }
.cover-mystery { background: radial-gradient(circle at 45% 20%, #ffc979, transparent 24%), linear-gradient(135deg, #312312, #131829 55%, #080d18); }
.cover-dark { background: radial-gradient(circle at 48% 24%, #cad1e8, transparent 18%), linear-gradient(135deg, #0a0a13, #1d2237 58%, #280c18); }
.cover-ink { background: radial-gradient(circle at 50% 18%, #e8d8c1, transparent 24%), linear-gradient(135deg, #101116, #26313e 62%, #0b0f1d); }
.cover-gold { background: radial-gradient(circle at 52% 20%, #ffd56f, transparent 25%), linear-gradient(135deg, #44301c, #202641 62%, #0a0e1a); }

.thh-rank {
    padding: 24px;
}

.thh-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 16px;
    padding: 5px;
    border-radius: 13px;
    background: rgba(255,255,255,.045);
}

.thh-tabs button {
    height: 34px;
    border: 0;
    border-radius: 9px;
    color: #d5dce9;
    background: transparent;
    cursor: pointer;
    font-weight: 800;
}

.thh-tabs button.active {
    color: #fff;
    background: linear-gradient(135deg, rgba(255,122,107,.60), rgba(230,83,130,.60));
}

.thh-rank-list {
    display: grid;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.thh-rank-list li {
    display: grid;
    grid-template-columns: 26px 46px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 58px;
}

.thh-rank-no {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    color: #fff;
    border-radius: 8px;
    background: rgba(255,255,255,.10);
    font-size: 12px;
    font-weight: 900;
}

.thh-rank-list li:nth-child(1) .thh-rank-no { background: linear-gradient(135deg, #ff477d, #ff9a55); }
.thh-rank-list li:nth-child(2) .thh-rank-no { background: linear-gradient(135deg, #8791ab, #d0d6e6); color: #121622; }
.thh-rank-list li:nth-child(3) .thh-rank-no { background: linear-gradient(135deg, #d28b52, #ffc586); color: #281506; }

.thh-rank-thumb {
    width: 44px;
    height: 54px;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,.10);
}

.thh-rank-list strong {
    display: block;
    overflow: hidden;
    color: #fff;
    font-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.thh-rank-list em {
    display: block;
    margin-top: 3px;
    color: var(--thh-muted);
    font-size: 12px;
    font-style: normal;
}

.thh-rank-list b {
    color: #ff8d79;
    font-size: 12px;
    white-space: nowrap;
}

.thh-recommend-section {
    min-width: 0;
}

.thh-carousel-controls {
    display: flex;
    gap: 8px;
}

.thh-carousel-controls button {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.06);
    cursor: pointer;
}

.thh-recommend-track {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 15px;
}

.thh-mini-cover {
    aspect-ratio: 4/3;
    border-radius: 13px;
    border: 1px solid rgba(255,255,255,.10);
}

.thh-mini-cover span {
    position: absolute;
    z-index: 3;
    right: 8px;
    top: 8px;
    min-height: 22px;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    color: #4a290a;
    border-radius: 999px;
    background: var(--thh-gold);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.thh-vip-card {
    position: relative;
    overflow: hidden;
    padding: 24px;
    background:
        radial-gradient(circle at 86% 12%, rgba(244,202,119,.35), transparent 8rem),
        linear-gradient(135deg, rgba(54,30,53,.94), rgba(34,25,31,.86));
}

.thh-vip-card::after {
    content: "VIP";
    position: absolute;
    right: 34px;
    top: 22px;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    color: var(--thh-gold);
    border: 2px solid rgba(244,202,119,.42);
    border-radius: 24px;
    font-family: var(--thh-display);
    font-size: 22px;
    font-weight: 900;
    transform: rotate(8deg);
    opacity: .9;
}

.thh-vip-card p {
    margin: 7px 0 18px;
    color: #eadfc9;
}

.thh-vip-benefits {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
    margin-bottom: 18px;
}

.thh-vip-benefits span {
    min-height: 38px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    color: #f8e5be;
    background: rgba(255,255,255,.06);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
}

.thh-feature-bar {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    padding: 18px;
}

.thh-feature-bar div {
    display: grid;
    gap: 4px;
}

.thh-feature-bar strong {
    color: var(--thh-gold);
    font-size: 14px;
}

.thh-feature-bar span {
    color: var(--thh-muted);
    font-size: 12px;
}

@media (max-width: 1440px) {
    .thh-app { grid-template-columns: 260px minmax(0, 1fr); }
    .thh-layout-grid { grid-template-columns: minmax(0, 1fr) 360px; }
    .thh-story-grid,
    .thh-recommend-track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .thh-genre-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .thh-topbar { grid-template-columns: minmax(200px, 320px) 1fr; }
    .thh-actions { grid-column: 1 / -1; justify-content: flex-end; }
}

@media (max-width: 1180px) {
    .thh-full-bleed { padding: 10px; }
    .thh-app { grid-template-columns: 1fr; border-radius: 20px; }
    .thh-sidebar {
        position: relative;
        display: block;
        padding: 18px;
        border-right: 0;
        border-bottom: 1px solid var(--thh-line);
    }
    .thh-brand { padding: 0 0 14px; }
    .thh-side-nav {
        display: flex;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 8px;
        scrollbar-width: thin;
    }
    .thh-side-link { flex: 0 0 auto; min-height: 42px; padding: 0 14px; }
    .thh-checkin,
    .thh-wallet-mini,
    .thh-invite-card { display: none; }
    .thh-main { padding: 18px; }
    .thh-layout-grid { grid-template-columns: 1fr; }
    .thh-hero,
    .thh-promo-stack,
    .thh-rank,
    .thh-vip-card { grid-column: 1; }
    .thh-promo-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .thh-feature-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
    .thh-topbar { grid-template-columns: 1fr; gap: 12px; }
    .thh-topnav { justify-content: flex-start; overflow-x: auto; padding-bottom: 4px; }
    .thh-actions { grid-column: auto; justify-content: flex-start; overflow-x: auto; padding-bottom: 4px; }
    .thh-hero { min-height: 420px; }
    .thh-hero-content { width: 100%; max-width: 460px; }
    .thh-hero-art { opacity: .65; }
    .thh-character { right: -18px; transform: scale(.78); transform-origin: bottom right; }
    .thh-promo-stack { grid-template-columns: 1fr; }
    .thh-genre-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .thh-story-grid,
    .thh-recommend-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .thh-feature-bar { grid-template-columns: 1fr; }
    .thh-rank-list li { grid-template-columns: 24px 42px minmax(0, 1fr); }
    .thh-rank-list b { grid-column: 3; justify-self: start; }
}

@media (max-width: 520px) {
    .thh-full-bleed { padding: 0; }
    .thh-app { border-radius: 0; border-left: 0; border-right: 0; }
    .thh-main { padding: 14px; }
    .thh-hero { padding: 22px; }
    .thh-hero h1 { font-size: 52px; }
    .thh-story-grid,
    .thh-recommend-track { grid-template-columns: 1fr 1fr; gap: 12px; }
    .thh-cover-title { font-size: 15px; }
    .thh-vip-benefits { grid-template-columns: 1fr; }
    .thh-promo-vip strong,
    .thh-promo-spin i { opacity: .28; right: 10px; }
    .thh-btn { min-height: 40px; padding-inline: 14px; font-size: 13px; }
}

/* v3 layout safety patch: keep desktop/tablet sections in designed grid instead of stacking vertically. */
#thh-story-home.thh-app {
    display: grid !important;
}

#thh-story-home .thh-layout-grid,
#thh-story-home .thh-story-grid,
#thh-story-home .thh-recommend-track,
#thh-story-home .thh-genre-strip,
#thh-story-home .thh-feature-bar {
    display: grid !important;
}

@media (min-width: 861px) {
    #thh-story-home .thh-layout-grid {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 430px) !important;
        align-items: start;
    }

    #thh-story-home .thh-hero {
        grid-column: 1 / 2 !important;
    }

    #thh-story-home .thh-promo-stack {
        grid-column: 2 / 3 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-self: stretch;
    }

    #thh-story-home .thh-genre-strip,
    #thh-story-home .thh-feature-bar {
        grid-column: 1 / -1 !important;
    }

    #thh-story-home .thh-hot-section,
    #thh-story-home .thh-recommend-section {
        grid-column: 1 / 2 !important;
        min-width: 0;
    }

    #thh-story-home .thh-rank,
    #thh-story-home .thh-vip-card {
        grid-column: 2 / 3 !important;
    }
}

@media (min-width: 1181px) and (max-width: 1540px) {
    #thh-story-home.thh-app {
        grid-template-columns: 260px minmax(0, 1fr) !important;
    }

    #thh-story-home .thh-layout-grid {
        grid-template-columns: minmax(0, 1fr) minmax(330px, 360px) !important;
    }

    #thh-story-home .thh-story-grid,
    #thh-story-home .thh-recommend-track {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 861px) and (max-width: 1180px) {
    #thh-story-home.thh-app {
        grid-template-columns: 1fr !important;
    }

    #thh-story-home .thh-layout-grid {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 34%) !important;
    }

    #thh-story-home .thh-story-grid,
    #thh-story-home .thh-recommend-track {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    #thh-story-home .thh-promo,
    #thh-story-home .thh-rank,
    #thh-story-home .thh-vip-card {
        padding: 20px !important;
    }

    #thh-story-home .thh-promo-vip strong,
    #thh-story-home .thh-promo-spin i {
        right: 14px;
        opacity: .42;
        transform: scale(.82);
        transform-origin: top right;
    }
}

@media (max-width: 860px) {
    #thh-story-home .thh-layout-grid {
        grid-template-columns: 1fr !important;
    }

    #thh-story-home .thh-hero,
    #thh-story-home .thh-promo-stack,
    #thh-story-home .thh-genre-strip,
    #thh-story-home .thh-hot-section,
    #thh-story-home .thh-rank,
    #thh-story-home .thh-recommend-section,
    #thh-story-home .thh-vip-card,
    #thh-story-home .thh-feature-bar {
        grid-column: 1 / -1 !important;
    }
}

/* ===== Truyen Hay Hay v5 - inner page templates ===== */
.thh-full-bleed-inner {
    background:
        radial-gradient(circle at 16% 3%, rgba(230, 83, 130, 0.18), transparent 25rem),
        radial-gradient(circle at 86% 8%, rgba(244, 202, 119, 0.10), transparent 28rem),
        linear-gradient(135deg, #f8e8f1 0%, #f2dbe7 16%, #070d1a 16%, #070d1a 100%);
}
.thh-app-inner {
    min-height: 920px;
    grid-template-columns: 280px minmax(0, 1fr) !important;
}
.thh-main-inner {
    padding: 0 0 34px;
    min-width: 0;
}
.thh-main-inner > .thh-topbar {
    padding: 20px 34px 18px;
    border-bottom: 1px solid var(--thh-line);
}
.thh-breadcrumb {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 14px 34px 0;
    color: var(--thh-soft);
    font-size: 14px;
}
.thh-breadcrumb span { color: var(--thh-gold); }
.thh-sidebar-vip {
    min-height: 150px;
    overflow: hidden;
    padding: 18px;
    border-radius: var(--thh-radius-lg);
}
.thh-sidebar-vip strong { font-size: 38px !important; }
.thh-sidebar-vip h2 { font-size: 18px !important; margin: 6px 0 !important; }
.thh-sidebar-vip p { margin-bottom: 12px !important; }
.thh-subtitle { color: var(--thh-muted); margin-top: -8px; }
.thh-avatar,
.thh-rank-thumb,
.thh-mini-cover {
    display: inline-block;
    flex: 0 0 auto;
    background-size: cover;
    background-position: center;
}
.thh-avatar { width: 42px; height: 42px; border-radius: 13px; }
.thh-rank-thumb { width: 42px; height: 54px; border-radius: 9px; }
.thh-cover-ink,
.thh-detail-cover.thh-cover-ink { background: linear-gradient(135deg, #141927, #292e4d 42%, #060910), radial-gradient(circle at 35% 18%, rgba(244,202,119,.35), transparent 28%); }
.thh-cover-love { background: linear-gradient(135deg, #3b1b2c, #ae6170 52%, #21101a); }
.thh-cover-blue { background: linear-gradient(135deg, #0c1933, #215986 50%, #18204a); }
.thh-cover-purple { background: linear-gradient(135deg, #171327, #6e56b8 55%, #101322); }
.thh-cover-rose { background: linear-gradient(135deg, #352034, #cc7c71 58%, #221422); }
.thh-cover-mystery { background: linear-gradient(135deg, #101113, #52605a 50%, #060709); }
.thh-cover-dark { background: linear-gradient(135deg, #07070b, #362346 50%, #09090d); }
.thh-cover-gold { background: linear-gradient(135deg, #2d2110, #a46a2d 55%, #1a1207); }

/* Story detail */
.thh-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px 320px;
    gap: 20px;
    padding: 20px 34px 0;
    align-items: start;
}
.thh-detail-main,
.thh-profile-main,
.thh-wallet-content { min-width: 0; }
.thh-detail-hero {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 28px;
    padding: 20px;
    margin-bottom: 18px;
}
.thh-detail-cover {
    position: relative;
    min-height: 350px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 20px 45px rgba(0,0,0,.25);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 26px;
}
.thh-detail-cover:before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 18%, rgba(255,255,255,.20), transparent 21%),
        linear-gradient(180deg, transparent 20%, rgba(0,0,0,.65) 100%);
}
.thh-detail-cover strong,
.thh-detail-cover em,
.thh-detail-cover .thh-rank-badge { position: relative; z-index: 1; }
.thh-detail-cover strong { font: 800 42px/1.05 var(--thh-display); letter-spacing: .05em; color: #fff; text-shadow: 0 8px 24px rgba(0,0,0,.45); }
.thh-detail-cover em { margin-top: 16px; color: var(--thh-coral); font-style: normal; }
.thh-detail-info h1,
.thh-wallet-content h1 { margin: 10px 0 10px; font-size: clamp(34px, 3.4vw, 48px); letter-spacing: -.03em; }
.thh-tagline,
.thh-chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.thh-tagline span,
.thh-chip-row span { border-radius: 999px; padding: 6px 12px; background: rgba(255,255,255,.075); border: 1px solid var(--thh-line); color: var(--thh-soft); font-size: 13px; }
.thh-author { display: flex; align-items: center; gap: 12px; margin: 18px 0; }
.thh-author p { display: grid; gap: 2px; margin: 0; }
.thh-author small { color: var(--thh-muted); }
.thh-author .thh-btn { margin-left: auto; }
.thh-story-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.thh-story-stats span { padding: 12px 14px; border-left: 1px solid var(--thh-line); }
.thh-story-stats b { display: block; color: var(--thh-gold); font-size: 19px; }
.thh-story-stats small { color: var(--thh-muted); }
.thh-detail-actions { display: grid; grid-template-columns: 135px repeat(4, minmax(82px, 1fr)); gap: 12px; margin: 18px 0; }
.thh-detail-actions button { border: 1px solid var(--thh-line); background: rgba(255,255,255,.055); color: var(--thh-text); border-radius: 14px; min-height: 70px; font-weight: 800; }
.thh-detail-actions small { display: block; color: var(--thh-muted); font-size: 12px; margin-top: 4px; font-weight: 600; }
.thh-story-intro,
.thh-chapter-box,
.thh-comments,
.thh-rating,
.thh-buy-card,
.thh-donate-card,
.thh-progress-card { padding: 20px; }
.thh-story-intro h2,
.thh-chapter-box h2,
.thh-comments h2,
.thh-rating h2,
.thh-buy-card h2,
.thh-donate-card h2 { margin: 0 0 12px; font-size: 20px; }
.thh-story-intro p { margin: 0; color: var(--thh-soft); line-height: 1.75; }
.thh-story-intro a { color: var(--thh-coral); display: inline-block; margin-top: 10px; }
.thh-chapter-box .thh-section-head { margin-bottom: 14px; }
.thh-chapter-box .thh-section-head > div { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.thh-chapter-box button,
.thh-comments button { border: 1px solid var(--thh-line); background: rgba(255,255,255,.06); color: var(--thh-soft); border-radius: 10px; padding: 8px 12px; }
.thh-chapter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.thh-chapter-grid a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--thh-line); background: rgba(255,255,255,.04); }
.thh-chapter-grid b { font-size: 14px; }
.thh-chapter-grid small { color: var(--thh-muted); }
.thh-chapter-grid em { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: #78e4a4; font-style: normal; font-size: 13px; }
.thh-chapter-grid .is-new { border-color: rgba(230,83,130,.52); box-shadow: inset 0 0 0 1px rgba(230,83,130,.16); }
.thh-chapter-grid .is-new:after { content: 'Mới'; color: var(--thh-coral); font-size: 12px; }
.thh-chapter-grid .is-locked em { color: var(--thh-gold); }
.thh-comment-rating { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; margin-top: 18px; }
.thh-comments article { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--thh-line); }
.thh-comments h3 { margin: 0 0 6px; font-size: 15px; }
.thh-comments h3 small { color: var(--thh-gold); font-weight: 600; }
.thh-comments p { margin: 0 0 6px; color: var(--thh-soft); }
.thh-comments small { color: var(--thh-muted); }
.thh-rating strong { font-size: 46px; color: var(--thh-gold); }
.thh-rating p { color: var(--thh-gold); margin: 0; }
.thh-bars { display: grid; gap: 7px; margin: 14px 0; }
.thh-bars span { display: grid; grid-template-columns: 36px 1fr; gap: 8px; color: var(--thh-muted); font-size: 12px; }
.thh-bars span:after { content: ''; height: 5px; border-radius: 999px; align-self: center; background: linear-gradient(90deg, var(--thh-gold) var(--v), rgba(255,255,255,.08) 0); }
.thh-buy-balance { display: flex; justify-content: space-between; color: var(--thh-muted); margin-bottom: 14px; }
.thh-buy-balance b { color: var(--thh-gold); }
.thh-package-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.thh-package-grid button { min-height: 86px; display: grid; gap: 4px; padding: 12px; color: var(--thh-text); background: rgba(255,255,255,.045); border: 1px solid var(--thh-line); border-radius: 13px; }
.thh-package-grid button.active { border-color: rgba(230,83,130,.70); background: linear-gradient(180deg, rgba(230,83,130,.18), rgba(255,255,255,.04)); }
.thh-package-grid b { color: var(--thh-gold); }
.thh-package-grid em { color: var(--thh-coral); font-style: normal; font-size: 12px; }
.thh-donate-card > div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.thh-donate-card > div button { border: 1px solid var(--thh-line); border-radius: 12px; min-height: 66px; background: rgba(255,255,255,.05); color: var(--thh-text); font-size: 22px; }
.thh-donate-card button small { display: block; font-size: 12px; color: var(--thh-muted); }
.thh-donate-card form { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 12px; }
.thh-donate-card input,
.thh-coupon-box input,
.thh-auth-card input { width: 100%; border: 1px solid var(--thh-line); border-radius: 12px; background: rgba(7,13,26,.65); color: var(--thh-text); padding: 12px; }
.thh-detail-sticky { display: grid; gap: 18px; }
.thh-rank-compact li { display: grid !important; grid-template-columns: 28px minmax(0,1fr) auto !important; padding: 10px 0 !important; }
.thh-rank-compact li span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: rgba(230,83,130,.75); }
.thh-rank-compact li em { color: var(--thh-coral); font-style: normal; font-size: 12px; }
.thh-progress-card div { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 12px 0; border-top: 1px solid var(--thh-line); }
.thh-progress-card p { margin: 0; display: grid; }
.thh-progress-card small { color: var(--thh-muted); }
.thh-progress-card strong { color: var(--thh-gold); }

/* Profile */
.thh-profile-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; padding: 20px 34px 0; }
.thh-profile-hero { display: grid; grid-template-columns: 150px minmax(0, 1fr) 290px; gap: 24px; align-items: center; padding: 22px; margin-bottom: 18px; }
.thh-profile-avatar { width: 132px; height: 132px; border-radius: 50%; border: 3px solid rgba(244,202,119,.55); position: relative; box-shadow: 0 12px 35px rgba(0,0,0,.35); }
.thh-profile-avatar button { position: absolute; right: 4px; bottom: 8px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--thh-line); background: rgba(230,83,130,.9); color: #fff; }
.thh-profile-hero h1 { margin: 0 0 8px; font-size: 30px; }
.thh-profile-hero p { color: var(--thh-soft); }
.thh-profile-hero p span { display: inline-block; padding: 5px 10px; border-radius: 999px; background: rgba(244,202,119,.14); color: var(--thh-gold); margin-right: 6px; }
.thh-exp { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin: 14px 0; }
.thh-exp i,
.thh-vip-mini i { height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.thh-exp span,
.thh-vip-mini em { display: block; height: 100%; background: linear-gradient(90deg, var(--thh-gold), var(--thh-coral)); }
.thh-exp small { color: var(--thh-muted); }
.thh-profile-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.thh-profile-stats span { display: grid; text-align: center; color: var(--thh-muted); border-left: 1px solid var(--thh-line); }
.thh-profile-stats b { color: var(--thh-text); font-size: 20px; }
.thh-profile-hero article { border: 1px solid var(--thh-line); border-radius: 16px; padding: 18px; background: rgba(255,255,255,.035); }
.thh-profile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.thh-profile-grid > .thh-panel { padding: 18px; min-height: 190px; }
.thh-community,
.thh-personal-rec { grid-column: span 2; }
.thh-book-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.thh-book-row article { display: grid; gap: 7px; }
.thh-book-row .thh-mini-cover { width: 100%; height: 120px; border-radius: 12px; }
.thh-book-row b,
.thh-mini-card h3 { font-size: 13px; margin: 0; }
.thh-book-row small { color: var(--thh-muted); }
.thh-clean-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.thh-clean-list li { display: grid; grid-template-columns: 42px 1fr; gap: 10px; align-items: center; padding: 8px; border-radius: 12px; background: rgba(255,255,255,.035); }
.thh-clean-list b { display: block; }
.thh-clean-list small { color: var(--thh-muted); }
.thh-fav-genre p { display: flex; justify-content: space-between; border-bottom: 1px solid var(--thh-line); padding: 8px 0; margin: 0; }
.thh-fav-genre b { color: var(--thh-gold); }
.thh-achievements > div { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.thh-achievements article { text-align: center; display: grid; gap: 5px; font-size: 30px; }
.thh-achievements b { font-size: 13px; }
.thh-achievements small { color: var(--thh-muted); }
.thh-daily-task p,
.thh-reward-mission p { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; margin: 0; padding: 10px 0; border-bottom: 1px solid var(--thh-line); }
.thh-daily-task button,
.thh-reward-mission span { border: 0; border-radius: 8px; background: rgba(230,83,130,.85); color: #fff; padding: 7px 10px; font-size: 12px; }
.thh-daily-task button.done { background: rgba(81,173,110,.7); }
.thh-friends { display: grid; gap: 10px; }
.thh-friends p { display: grid; grid-template-columns: 42px 1fr; gap: 8px; margin: 0; }
.thh-friends small,
.thh-discussions small { display: block; color: var(--thh-muted); }
.thh-discussions { padding: 12px; border-radius: 14px; background: rgba(255,255,255,.035); display: grid; gap: 8px; }
.thh-profile-side { display: grid; gap: 18px; align-content: start; }
.thh-wallet-side,
.thh-coupons,
.thh-activity { padding: 18px; }
.thh-wallet-side p { display: flex; justify-content: space-between; border-bottom: 1px solid var(--thh-line); padding-bottom: 10px; }
.thh-wallet-side b { font-size: 22px; color: var(--thh-gold); }
.thh-wallet-side > div:last-child { display: flex; gap: 10px; }
.thh-profile-vip { min-height: 190px; padding: 20px; overflow: hidden; }
.thh-coupons p { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; padding: 12px; border-radius: 12px; background: rgba(230,83,130,.16); }
.thh-coupons b { font-size: 22px; color: var(--thh-coral); }
.thh-coupons button { border: 0; border-radius: 9px; padding: 8px 10px; color: #fff; background: rgba(230,83,130,.82); }
.thh-activity p { display: flex; justify-content: space-between; gap: 10px; color: var(--thh-soft); border-bottom: 1px solid var(--thh-line); padding: 9px 0; }
.thh-activity small { color: var(--thh-muted); }

/* Wallet */
.thh-wallet-layout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 20px; padding: 20px 34px 0; }
.thh-balance-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; margin: 18px 0; }
.thh-balance-grid article { padding: 22px; min-height: 140px; }
.thh-balance-grid span { color: var(--thh-gold); }
.thh-balance-grid b { display: block; font-size: 34px; margin: 8px 0 14px; letter-spacing: .04em; color: #f1d19a; }
.thh-balance-grid a { display: block; text-align: center; border-radius: 10px; padding: 10px; background: rgba(230,83,130,.22); color: #ffd8e3; }
.thh-vip-mini { position: relative; }
.thh-vip-mini i { display: block; margin: 6px 0; }
.thh-recharge { padding: 20px; }
.thh-recharge-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.thh-recharge-grid article { position: relative; min-height: 154px; border-radius: 15px; padding: 17px; background: linear-gradient(180deg, rgba(244,202,119,.13), rgba(255,255,255,.04)); border: 1px solid var(--thh-line); display: grid; align-content: end; overflow: hidden; }
.thh-recharge-grid article:before { content: '●'; position: absolute; top: 22px; right: 24px; color: var(--thh-gold); font-size: 48px; filter: drop-shadow(0 12px 22px rgba(244,202,119,.25)); }
.thh-recharge-grid em { position: absolute; left: 0; top: 0; padding: 7px 12px; background: rgba(230,83,130,.85); color: #fff; font-style: normal; font-size: 12px; }
.thh-recharge-grid strong { font-size: 24px; color: #f6d18a; }
.thh-recharge-grid small { color: var(--thh-muted); }
.thh-recharge-grid b { display: block; text-align: center; margin-top: 10px; padding: 8px; border-radius: 9px; background: linear-gradient(135deg, var(--thh-coral), var(--thh-pink)); }
.thh-wallet-mid,
.thh-wallet-bottom { display: grid; grid-template-columns: 1fr 1.35fr; gap: 18px; margin-top: 18px; }
.thh-first-bonus,
.thh-month-cards,
.thh-coupon-box,
.thh-transaction { padding: 20px; }
.thh-first-bonus { background: radial-gradient(circle at 74% 0, rgba(230,83,130,.25), transparent 48%), linear-gradient(180deg, rgba(35,27,46,.9), rgba(16,22,39,.82)); }
.thh-first-bonus h3 { color: var(--thh-gold); }
.thh-first-bonus div { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 14px 0; }
.thh-first-bonus span { display: grid; place-items: center; min-height: 70px; border-radius: 12px; background: rgba(255,255,255,.05); }
.thh-month-cards > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.thh-month-cards article { padding: 15px; border-radius: 14px; border: 1px solid var(--thh-line); background: rgba(255,255,255,.04); display: grid; gap: 8px; }
.thh-month-cards b { color: var(--thh-coral); font-size: 18px; }
.thh-coupon-box form { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.thh-coupon-box button { border: 0; border-radius: 10px; background: rgba(230,83,130,.8); color: #fff; padding: 0 16px; }
.thh-coupon-box p { display: grid; grid-template-columns: 110px 1fr auto; gap: 10px; padding: 12px; border-radius: 12px; background: rgba(244,202,119,.10); }
.thh-coupon-box b { color: var(--thh-gold); }
.thh-coupon-box em { color: var(--thh-muted); font-style: normal; }
.thh-transaction table { width: 100%; border-collapse: collapse; font-size: 13px; }
.thh-transaction th,
.thh-transaction td { padding: 11px 8px; border-bottom: 1px solid var(--thh-line); color: var(--thh-soft); text-align: left; }
.thh-transaction td:last-child { color: #70dd9b; }
.thh-wallet-sidepage { display: grid; gap: 18px; align-content: start; }
.thh-wallet-vip-banner { min-height: 172px; padding: 22px; overflow: hidden; }
.thh-vip-benefit-list,
.thh-payment-method,
.thh-events,
.thh-reward-mission { padding: 20px; }
.thh-vip-benefit-list p { display: grid; gap: 4px; padding: 11px; border-radius: 11px; background: rgba(255,255,255,.04); }
.thh-vip-benefit-list small { color: var(--thh-muted); }
.thh-payment-method { display: grid; gap: 10px; }
.thh-payment-method button { text-align: left; border: 1px solid var(--thh-line); background: rgba(255,255,255,.04); color: var(--thh-text); border-radius: 12px; padding: 13px; }
.thh-payment-method button.active { border-color: rgba(244,202,119,.62); background: rgba(244,202,119,.1); }
.thh-payment-method small { display: block; color: var(--thh-muted); margin-top: 2px; }
.thh-events article { border: 1px solid var(--thh-line); border-radius: 14px; padding: 14px; margin-top: 10px; background: linear-gradient(135deg, rgba(230,83,130,.17), rgba(244,202,119,.06)); }
.thh-events small { display: block; color: var(--thh-muted); margin: 6px 0; }
.thh-events a,
.thh-reward-mission a { color: var(--thh-gold); }
.thh-reward-mission b { color: var(--thh-gold); }

/* Auth */
.thh-auth-full {
    min-height: 100vh;
    background:
        radial-gradient(circle at 22% 6%, rgba(230,83,130,.20), transparent 25rem),
        radial-gradient(circle at 77% 18%, rgba(155,99,244,.13), transparent 24rem),
        linear-gradient(135deg, #f8e8f1 0%, #f2dbe7 15%, #07101d 15%, #07101d 100%);
    padding: clamp(12px, 2vw, 30px);
    box-sizing: border-box;
}
.thh-auth-wrap,
.thh-auth-wrap * { box-sizing: border-box; }
.thh-auth-wrap {
    position: relative;
    width: min(1760px, 100%);
    margin: 0 auto;
    min-height: 900px;
    border-radius: var(--thh-radius-xl);
    overflow: hidden;
    color: var(--thh-text);
    font-family: var(--thh-font);
    background: linear-gradient(180deg, rgba(12,18,34,.98), rgba(7,13,26,.98));
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: var(--thh-shadow);
}
.thh-auth-wrap a { color: inherit; text-decoration: none; }
.thh-auth-brand { position: absolute; z-index: 5; left: 32px; top: 26px; }
.thh-auth-login-link { position: absolute; z-index: 5; right: 32px; top: 30px; display: flex; gap: 14px; align-items: center; color: var(--thh-muted); }
.thh-auth-visual { position: absolute; inset: 0 auto 270px 0; width: 43%; padding: 142px 52px 52px; overflow: hidden; }
.thh-auth-visual:after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 56% 31%, rgba(230,83,130,.32), transparent 18rem), linear-gradient(90deg, rgba(7,13,26,.35), rgba(7,13,26,.70)); z-index: 0; }
.thh-auth-visual > div { position: relative; z-index: 2; }
.thh-auth-visual h1 { font: italic 700 clamp(34px, 3.6vw, 54px)/1.18 var(--thh-display); margin: 0 0 22px; }
.thh-auth-visual h1 span { color: var(--thh-coral); }
.thh-auth-visual p,
.thh-auth-visual small { color: var(--thh-soft); line-height: 1.7; }
.thh-auth-visual ul { list-style: none; padding: 26px 0 10px; margin: 0; display: grid; gap: 22px; }
.thh-auth-visual li { display: grid; gap: 3px; }
.thh-auth-visual blockquote { margin: 38px 0 0; padding: 22px 26px; border: 1px solid var(--thh-line); border-radius: 14px; background: rgba(255,255,255,.05); color: #f6dfd6; font-style: italic; }
.thh-auth-art { position: absolute; inset: 0; background: radial-gradient(circle at 64% 42%, rgba(244,202,119,.24), transparent 13rem), radial-gradient(circle at 70% 48%, rgba(230,83,130,.18), transparent 17rem), linear-gradient(135deg, #1b203a, #301b3b 48%, #111a2f); opacity: .92; }
.thh-auth-panels { margin-left: 43%; padding: 98px 34px 28px; display: grid; grid-template-columns: 1fr 1.08fr; gap: 22px; }
.thh-auth-card { position: relative; padding: 46px 34px 28px; border: 1px solid var(--thh-line-strong); border-radius: 18px; background: rgba(13,20,38,.78); display: grid; gap: 14px; }
.thh-register-card { border-color: rgba(230,83,130,.42); background: linear-gradient(180deg, rgba(63,33,61,.62), rgba(13,20,38,.78)); }
.thh-auth-icon { position: absolute; left: 50%; top: -28px; transform: translateX(-50%); width: 64px; height: 64px; display: grid; place-items: center; border-radius: 16px; background: linear-gradient(135deg, rgba(230,83,130,.45), rgba(255,122,107,.15)); border: 1px solid rgba(230,83,130,.5); box-shadow: 0 12px 35px rgba(230,83,130,.25); }
.thh-auth-card h2 { text-align: center; font: 800 30px/1.1 var(--thh-display); margin: 0; }
.thh-auth-card > p { text-align: center; color: var(--thh-muted); margin: 0 0 6px; }
.thh-auth-tabs { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--thh-line); border-radius: 12px; overflow: hidden; }
.thh-auth-tabs button { background: transparent; border: 0; color: var(--thh-muted); padding: 12px; }
.thh-auth-tabs .active { color: var(--thh-coral); box-shadow: inset 0 -2px 0 var(--thh-pink); }
.thh-auth-card label { position: relative; display: flex; gap: 8px; align-items: center; color: var(--thh-muted); border: 1px solid var(--thh-line); border-radius: 12px; padding-left: 12px; background: rgba(255,255,255,.025); }
.thh-auth-card label input { border: 0; background: transparent; padding-left: 6px; }
.thh-auth-card label button { border: 0; background: transparent; color: var(--thh-muted); padding: 0 12px; }
.thh-auth-options { display: flex; justify-content: space-between; color: var(--thh-muted); font-size: 14px; }
.thh-auth-options label,
.thh-check-line { border: 0 !important; background: transparent !important; padding: 0 !important; }
.thh-auth-options a { color: var(--thh-coral); }
.thh-auth-card em { text-align: center; color: var(--thh-muted); font-style: normal; }
.thh-social { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.thh-social button { border: 1px solid var(--thh-line); border-radius: 10px; background: rgba(255,255,255,.05); color: var(--thh-text); padding: 12px; }
.thh-auth-card small { text-align: center; color: var(--thh-muted); }
.thh-form-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.thh-form-split > div { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.thh-form-split b,
.thh-genre-choice b { width: 100%; color: var(--thh-soft); }
.thh-form-split span,
.thh-genre-choice span { padding: 8px 10px; border: 1px solid var(--thh-line); border-radius: 10px; color: var(--thh-muted); }
.thh-genre-choice { display: flex; flex-wrap: wrap; gap: 9px; }
.thh-genre-choice a { margin-left: auto; color: var(--thh-coral); }
.thh-auth-benefits { margin: 0 26px 22px; padding: 24px 28px; border: 1px solid var(--thh-line); border-radius: 18px; background: rgba(255,255,255,.035); }
.thh-auth-benefits h2 { font: italic 700 28px var(--thh-display); color: #f5dccf; margin: 0 0 18px; }
.thh-auth-benefits > div { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.thh-auth-benefits article { padding: 18px; border-radius: 16px; border: 1px solid rgba(230,83,130,.28); background: linear-gradient(135deg, rgba(230,83,130,.10), rgba(255,255,255,.035)); }
.thh-auth-benefits p { color: var(--thh-muted); line-height: 1.6; margin-bottom: 0; }
.thh-auth-footer { margin: 0 26px 22px; display: flex; justify-content: space-between; gap: 20px; color: var(--thh-muted); border: 1px solid var(--thh-line); border-radius: 14px; padding: 18px 26px; background: rgba(255,255,255,.03); }

@media (max-width: 1500px) {
    .thh-detail-layout { grid-template-columns: minmax(0, 1fr) 300px; }
    .thh-detail-sticky { grid-column: 1 / -1; grid-template-columns: repeat(3,1fr); }
    .thh-wallet-layout { grid-template-columns: minmax(0,1fr) 360px; }
    .thh-balance-grid { grid-template-columns: repeat(2,1fr); }
    .thh-recharge-grid { grid-template-columns: repeat(3,1fr); }
    .thh-profile-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 1180px) {
    .thh-app-inner { grid-template-columns: 1fr !important; }
    .thh-detail-layout,
    .thh-profile-layout,
    .thh-wallet-layout { grid-template-columns: 1fr; }
    .thh-detail-sticky { grid-template-columns: 1fr; }
    .thh-profile-side,
    .thh-wallet-sidepage { grid-template-columns: repeat(2,1fr); }
    .thh-profile-hero { grid-template-columns: 120px 1fr; }
    .thh-profile-hero article { grid-column: 1 / -1; }
    .thh-auth-visual { position: relative; width: auto; inset: auto; min-height: 480px; }
    .thh-auth-panels { margin-left: 0; padding-top: 40px; }
}
@media (max-width: 860px) {
    .thh-main-inner > .thh-topbar,
    .thh-breadcrumb,
    .thh-detail-layout,
    .thh-profile-layout,
    .thh-wallet-layout { padding-left: 16px; padding-right: 16px; }
    .thh-detail-hero,
    .thh-comment-rating,
    .thh-wallet-mid,
    .thh-wallet-bottom,
    .thh-auth-panels,
    .thh-auth-benefits > div,
    .thh-auth-footer { grid-template-columns: 1fr; }
    .thh-detail-actions { grid-template-columns: repeat(2,1fr); }
    .thh-chapter-grid,
    .thh-profile-side,
    .thh-wallet-sidepage,
    .thh-balance-grid,
    .thh-recharge-grid,
    .thh-month-cards > div,
    .thh-profile-grid { grid-template-columns: 1fr; }
    .thh-profile-hero { grid-template-columns: 1fr; text-align: center; justify-items: center; }
    .thh-profile-stats { grid-template-columns: repeat(2,1fr); }
    .thh-community,
    .thh-personal-rec { grid-column: auto; }
    .thh-auth-brand,
    .thh-auth-login-link { position: relative; left: auto; right: auto; top: auto; margin: 18px; }
    .thh-auth-login-link { justify-content: space-between; }
    .thh-auth-visual { padding: 32px 24px; }
    .thh-auth-panels { padding: 24px 18px; }
    .thh-auth-benefits,
    .thh-auth-footer { margin-left: 18px; margin-right: 18px; }
}

/* ===== Truyen Hay Hay v6 - genre/category page ===== */
.thh-category-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 20px;
    padding: 20px 34px 0;
    align-items: start;
}
.thh-category-main,
.thh-category-side { min-width: 0; }
.thh-category-side { display: grid; gap: 18px; align-content: start; }
.thh-category-hero {
    position: relative;
    min-height: 280px;
    padding: 34px 34px 28px;
    display: grid;
    grid-template-columns: 92px minmax(0, .9fr) auto;
    gap: 24px;
    align-items: center;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(12,18,34,.94), rgba(12,18,34,.65) 48%, rgba(12,18,34,.18)),
        radial-gradient(circle at 78% 38%, rgba(157,95,255,.48), transparent 18rem),
        linear-gradient(135deg, rgba(24,20,52,.96), rgba(52,31,81,.74));
}
.thh-category-symbol {
    position: relative;
    z-index: 2;
    width: 82px;
    height: 82px;
    display: grid;
    place-items: center;
    border-radius: 30px;
    color: #eacbff;
    font-size: 40px;
    background: radial-gradient(circle at 50% 30%, rgba(155,99,244,.55), rgba(230,83,130,.12));
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 18px 40px rgba(155,99,244,.24), inset 0 0 30px rgba(255,255,255,.05);
}
.thh-category-intro { position: relative; z-index: 2; }
.thh-category-intro h1 {
    margin: 0 0 10px;
    color: var(--thh-gold);
    font-size: clamp(38px, 4vw, 58px);
    line-height: .98;
    letter-spacing: -.04em;
    text-shadow: 0 15px 35px rgba(244,202,119,.18);
}
.thh-category-intro p {
    max-width: 640px;
    margin: 0;
    color: #e6dfea;
    line-height: 1.75;
}
.thh-category-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin-top: 24px;
}
.thh-category-stats span {
    min-width: 128px;
    padding-right: 22px;
    border-right: 1px solid rgba(255,255,255,.12);
    color: var(--thh-muted);
}
.thh-category-stats b { display: block; color: #fff; font-size: 22px; margin-bottom: 4px; }
.thh-category-stats small { color: var(--thh-muted); }
.thh-follow-genre { position: relative; z-index: 2; align-self: end; white-space: nowrap; background: rgba(255,255,255,.07); }
.thh-category-art { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.thh-category-art:before {
    content: '';
    position: absolute;
    right: 2%;
    top: -18%;
    width: 560px;
    height: 420px;
    background:
        radial-gradient(circle at 58% 38%, rgba(255,255,255,.44), transparent 3.8rem),
        radial-gradient(circle at 60% 42%, rgba(155,99,244,.62), transparent 13rem),
        radial-gradient(circle at 64% 58%, rgba(230,83,130,.18), transparent 21rem);
    filter: blur(.2px);
}
.thh-category-art span {
    position: absolute;
    right: 20%;
    bottom: 18%;
    width: 42px;
    height: 120px;
    border-radius: 44% 44% 12px 12px;
    background: linear-gradient(180deg, rgba(22,24,42,.9), rgba(5,8,16,.96));
    box-shadow: 0 38px 40px rgba(0,0,0,.55);
    transform: skewX(-8deg);
}
.thh-category-art span:before {
    content: '';
    position: absolute;
    left: -48px;
    top: 36px;
    width: 140px;
    height: 54px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(14,17,32,.88), rgba(62,49,110,.52));
    transform: rotate(-26deg);
}
.thh-category-art i,
.thh-category-art em {
    position: absolute;
    display: block;
    left: 43%;
    right: 0;
    bottom: 0;
    height: 120px;
    background: linear-gradient(135deg, rgba(21,27,45,.72), rgba(47,36,72,.56));
    clip-path: polygon(0 100%, 15% 42%, 29% 82%, 45% 30%, 63% 80%, 83% 36%, 100% 100%);
}
.thh-category-art em { left: 50%; height: 170px; opacity: .42; filter: blur(2px); }
.thh-category-filter {
    padding: 18px;
    margin-top: 18px;
    display: grid;
    gap: 13px;
}
.thh-filter-row {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 15px;
    align-items: start;
}
.thh-filter-row strong { color: var(--thh-gold); padding-top: 9px; }
.thh-filter-row > div { display: flex; flex-wrap: wrap; gap: 9px; }
.thh-filter-row a,
.thh-filter-row select,
.thh-tag-cloud a,
.thh-pagination a,
.thh-pagination span {
    border: 1px solid var(--thh-line);
    border-radius: 11px;
    background: rgba(255,255,255,.035);
    color: var(--thh-soft);
    min-height: 34px;
    padding: 8px 13px;
    line-height: 1.2;
}
.thh-filter-row a.is-active,
.thh-filter-row a:hover,
.thh-pagination .is-current {
    color: #fff;
    border-color: rgba(230,83,130,.46);
    background: linear-gradient(135deg, rgba(255,122,107,.66), rgba(230,83,130,.72));
    box-shadow: 0 12px 26px rgba(230,83,130,.16);
}
.thh-filter-sort { grid-template-columns: 120px minmax(0, 1fr) auto; align-items: center; }
.thh-filter-sort label { color: var(--thh-gold); display: inline-flex; gap: 10px; align-items: center; white-space: nowrap; }
.thh-filter-sort select { color: var(--thh-text); outline: none; padding-right: 32px; }
.thh-category-section { margin-top: 22px; }
.thh-category-section > .thh-section-head { margin-bottom: 14px; }
.thh-category-section h2 { font-size: 24px; }
.thh-category-section .thh-section-head a,
.thh-cat-rank .thh-section-head a,
.thh-week-trend .thh-section-head a { color: var(--thh-soft); font-size: 13px; }
.thh-category-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.thh-category-card {
    padding: 10px;
    overflow: hidden;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.thh-category-card:hover { transform: translateY(-3px); border-color: rgba(230,83,130,.34); box-shadow: 0 18px 44px rgba(0,0,0,.23); }
.thh-category-cover {
    position: relative;
    height: 130px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
}
.thh-category-cover:after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 64% 22%, rgba(255,255,255,.22), transparent 2.2rem),
        linear-gradient(180deg, transparent 32%, rgba(2,6,15,.78));
}
.thh-category-cover:before {
    content: '';
    position: absolute;
    left: 55%;
    bottom: 18px;
    width: 44px;
    height: 86px;
    border-radius: 40% 40% 10px 10px;
    background: rgba(3,6,13,.75);
    transform: translateX(-50%) skewX(-7deg);
    z-index: 1;
    box-shadow: -30px 36px 30px rgba(0,0,0,.32);
}
.thh-category-cover .thh-rank-badge { left: 0; top: 0; z-index: 2; }
.thh-category-cover button {
    position: absolute;
    right: 8px;
    top: 8px;
    z-index: 3;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 9px;
    color: #fff;
    background: rgba(5,8,16,.48);
}
.thh-category-card h3 { margin: 12px 2px 8px; color: #fff; font-size: 17px; line-height: 1.25; }
.thh-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.thh-card-tags span {
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 12px;
    color: #dce1ee;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.07);
}
.thh-category-card p { margin: 9px 2px 8px; color: #81d9a2; font-size: 13px; }
.thh-card-metrics { display: flex; justify-content: space-between; gap: 10px; color: var(--thh-muted); }
.thh-card-metrics small:last-child { color: var(--thh-coral); }
.thh-pagination { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.thh-pagination a,
.thh-pagination span { min-width: 38px; text-align: center; }
.thh-cat-rank,
.thh-week-trend,
.thh-tag-cloud,
.thh-category-vip { padding: 20px; }
.thh-cat-rank .thh-tabs { margin: 14px 0 10px; }
.thh-cat-rank .thh-rank-compact { margin: 0; padding: 0; list-style: none; }
.thh-cat-rank .thh-rank-compact li { grid-template-columns: 25px 42px minmax(0, 1fr) auto !important; gap: 10px !important; }
.thh-cat-rank .thh-rank-compact p { margin: 0; min-width: 0; }
.thh-cat-rank .thh-rank-compact b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thh-cat-rank .thh-rank-compact small { color: var(--thh-muted); }
.thh-week-trend p {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 11px 0;
    border-bottom: 1px solid var(--thh-line);
    color: var(--thh-soft);
}
.thh-week-trend b { color: var(--thh-muted); font-weight: 600; }
.thh-tag-cloud h2 { margin-top: 0; }
.thh-tag-cloud div { display: flex; flex-wrap: wrap; gap: 9px; }
.thh-tag-cloud a { min-height: 32px; font-size: 13px; }
.thh-tag-cloud a:hover { color: #fff; border-color: rgba(244,202,119,.42); background: rgba(244,202,119,.10); }
.thh-tag-cloud .thh-see-more { display: table; margin: 14px auto 0; border: 0; background: transparent; color: var(--thh-gold); }
.thh-category-vip { overflow: hidden; }
.thh-category-feature-bar { margin: 20px 34px 0; }

@media (max-width: 1500px) {
    .thh-category-layout { grid-template-columns: minmax(0,1fr) 320px; }
    .thh-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .thh-category-hero { grid-template-columns: 82px minmax(0,1fr); }
    .thh-follow-genre { grid-column: 2; justify-self: start; align-self: start; }
}
@media (max-width: 1180px) {
    .thh-category-layout { grid-template-columns: 1fr; }
    .thh-category-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .thh-category-vip { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
    .thh-category-layout,
    .thh-category-feature-bar { padding-left: 16px; padding-right: 16px; margin-left: 16px; margin-right: 16px; }
    .thh-category-layout { padding-top: 16px; }
    .thh-category-hero,
    .thh-filter-row,
    .thh-filter-sort,
    .thh-category-side { grid-template-columns: 1fr; }
    .thh-category-hero { padding: 24px; }
    .thh-category-symbol { width: 70px; height: 70px; }
    .thh-category-stats { gap: 12px; }
    .thh-category-stats span { min-width: 105px; padding-right: 12px; }
    .thh-filter-sort label { flex-wrap: wrap; white-space: normal; }
    .thh-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .thh-category-grid { grid-template-columns: 1fr; }
    .thh-category-cover { height: 160px; }
}

/* ===== Truyen Hay Hay v7 - ranking / leaderboard page ===== */
.thh-ranking-page .thh-topnav a:nth-child(3) {
    color: #fff;
    border-color: rgba(230,83,130,.46);
    background: linear-gradient(135deg, rgba(230,83,130,.72), rgba(155,99,244,.42));
    box-shadow: 0 10px 24px rgba(230,83,130,.16);
}
.thh-ranking-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 20px;
    padding: 20px 34px 0;
    align-items: start;
}
.thh-ranking-main,
.thh-ranking-side { min-width: 0; }
.thh-ranking-side {
    display: grid;
    gap: 18px;
    align-content: start;
}
.thh-ranking-hero {
    position: relative;
    min-height: 228px;
    padding: 30px 30px 26px;
    display: grid;
    grid-template-columns: 88px minmax(0, .9fr) auto;
    gap: 22px;
    align-items: center;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(12,18,34,.96), rgba(12,18,34,.68) 49%, rgba(20,16,34,.22)),
        radial-gradient(circle at 76% 32%, rgba(230,83,130,.44), transparent 16rem),
        radial-gradient(circle at 85% 36%, rgba(155,99,244,.58), transparent 22rem),
        linear-gradient(135deg, rgba(24,20,52,.98), rgba(77,35,69,.74));
}
.thh-ranking-symbol {
    position: relative;
    z-index: 2;
    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
    border-radius: 28px;
    color: #e7caff;
    font-size: 40px;
    background: radial-gradient(circle at 50% 26%, rgba(155,99,244,.58), rgba(230,83,130,.13));
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 18px 42px rgba(155,99,244,.22), inset 0 0 30px rgba(255,255,255,.05);
}
.thh-ranking-intro { position: relative; z-index: 2; }
.thh-ranking-intro h1 {
    margin: 0 0 8px;
    color: var(--thh-gold);
    font-size: clamp(38px, 4vw, 58px);
    line-height: .96;
    letter-spacing: -.04em;
    text-shadow: 0 16px 34px rgba(244,202,119,.18);
}
.thh-ranking-intro p {
    max-width: 560px;
    margin: 0;
    color: #efe5ed;
    line-height: 1.65;
}
.thh-ranking-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 22px;
}
.thh-ranking-stats span {
    min-width: 128px;
    padding: 10px 18px 10px 0;
    border-right: 1px solid rgba(255,255,255,.12);
    color: var(--thh-muted);
}
.thh-ranking-stats b {
    display: block;
    color: #fff;
    font-size: 21px;
    margin-bottom: 3px;
}
.thh-ranking-stats small { color: var(--thh-muted); }
.thh-ranking-cta { position: relative; z-index: 3; white-space: nowrap; align-self: end; }
.thh-ranking-art { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.thh-ranking-art:before {
    content: '';
    position: absolute;
    right: 6%;
    top: -30%;
    width: 520px;
    height: 390px;
    background:
        radial-gradient(circle at 60% 42%, rgba(255,255,255,.50), transparent 3.5rem),
        radial-gradient(circle at 60% 42%, rgba(155,99,244,.70), transparent 11rem),
        radial-gradient(circle at 62% 50%, rgba(230,83,130,.26), transparent 20rem);
}
.thh-ranking-art span {
    position: absolute;
    right: 22%;
    bottom: 21%;
    width: 38px;
    height: 114px;
    border-radius: 45% 45% 12px 12px;
    background: linear-gradient(180deg, rgba(24,26,46,.92), rgba(5,7,15,.98));
    box-shadow: 0 40px 46px rgba(0,0,0,.55);
    transform: skewX(-8deg);
}
.thh-ranking-art span:before {
    content: '';
    position: absolute;
    left: -52px;
    top: 35px;
    width: 142px;
    height: 54px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(12,14,28,.85), rgba(82,53,106,.44));
    transform: rotate(-26deg);
}
.thh-ranking-art i,
.thh-ranking-art em {
    position: absolute;
    display: block;
    left: 44%;
    right: 0;
    bottom: 0;
    height: 106px;
    background: linear-gradient(135deg, rgba(20,25,43,.78), rgba(66,38,74,.52));
    clip-path: polygon(0 100%, 13% 46%, 28% 78%, 45% 26%, 64% 82%, 84% 38%, 100% 100%);
}
.thh-ranking-art em { left: 52%; height: 155px; opacity: .38; filter: blur(2px); }
.thh-ranking-tabs {
    margin-top: 16px;
    padding: 14px;
    display: grid;
    gap: 12px;
}
.thh-rank-periods,
.thh-rank-cats,
.thh-rank-modes,
.thh-quick-filter div {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}
.thh-rank-periods a,
.thh-rank-cats a,
.thh-rank-modes a,
.thh-quick-filter a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 15px;
    border-radius: 12px;
    color: var(--thh-soft);
    background: rgba(255,255,255,.035);
    border: 1px solid var(--thh-line);
    line-height: 1.1;
}
.thh-rank-periods a { min-width: 92px; }
.thh-rank-periods a.is-active,
.thh-rank-cats a.is-active,
.thh-rank-modes a.is-active,
.thh-quick-filter a.is-active,
.thh-rank-periods a:hover,
.thh-rank-cats a:hover,
.thh-rank-modes a:hover,
.thh-quick-filter a:hover {
    color: #fff;
    border-color: rgba(230,83,130,.45);
    background: linear-gradient(135deg, rgba(255,122,107,.62), rgba(230,83,130,.72));
    box-shadow: 0 12px 26px rgba(230,83,130,.16);
}
.thh-top-podium { margin-top: 18px; }
.thh-top-podium .thh-section-head,
.thh-rank-list-section .thh-section-head { margin-bottom: 12px; }
.thh-top-podium h2,
.thh-rank-list-section h2 { font-size: 24px; }
.thh-podium-grid {
    display: grid;
    grid-template-columns: 1fr 1.42fr 1fr;
    gap: 14px;
    align-items: stretch;
}
.thh-podium-card {
    position: relative;
    min-height: 150px;
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    padding: 16px;
    overflow: hidden;
}
.thh-podium-card:after {
    content: '';
    position: absolute;
    inset: auto -20% -58% 20%;
    height: 125px;
    background: radial-gradient(circle, rgba(255,255,255,.12), transparent 62%);
    pointer-events: none;
}
.thh-podium-gold {
    min-height: 174px;
    border-color: rgba(244,202,119,.55);
    background:
        radial-gradient(circle at 64% 10%, rgba(244,202,119,.21), transparent 15rem),
        linear-gradient(180deg, rgba(45,37,27,.92), rgba(20,24,43,.82));
    box-shadow: 0 20px 54px rgba(244,202,119,.14), inset 0 1px 0 rgba(255,255,255,.05);
}
.thh-podium-silver { border-color: rgba(220,226,239,.20); }
.thh-podium-bronze { border-color: rgba(255,122,107,.35); }
.thh-podium-cover {
    position: relative;
    width: 100%;
    height: 118px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}
.thh-podium-gold .thh-podium-cover { height: 138px; }
.thh-podium-cover:after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 62% 22%, rgba(255,255,255,.22), transparent 2.5rem),
        linear-gradient(180deg, transparent 32%, rgba(2,6,15,.78));
}
.thh-podium-cover span {
    position: absolute;
    z-index: 2;
    right: 8px;
    top: 8px;
    min-width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #101522;
    font-weight: 900;
    border-radius: 16px;
    background: linear-gradient(135deg, #ffdf8a, #d68f35);
    box-shadow: 0 10px 28px rgba(244,202,119,.25);
}
.thh-podium-silver .thh-podium-cover span { background: linear-gradient(135deg, #f3f6ff, #99a2bd); }
.thh-podium-bronze .thh-podium-cover span { background: linear-gradient(135deg, #ffbd8a, #b86b45); }
.thh-podium-card h3 {
    margin: 0 0 7px;
    color: #fff;
    font-size: clamp(18px, 1.6vw, 26px);
    line-height: 1.1;
}
.thh-podium-card p { margin: 0 0 13px; color: var(--thh-muted); }
.thh-podium-metrics { display: flex; flex-wrap: wrap; gap: 12px; color: var(--thh-soft); }
.thh-podium-metrics small:nth-child(2) { color: var(--thh-coral); }
.thh-podium-metrics small:nth-child(3) { color: var(--thh-gold); }
.thh-rank-list-section { margin-top: 20px; }
.thh-rank-list-section .thh-section-head a { color: var(--thh-muted); font-size: 13px; }
.thh-rank-list-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.thh-rank-entry {
    min-height: 76px;
    display: grid;
    grid-template-columns: 44px 62px minmax(0, 1fr) 86px;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
}
.thh-rank-number {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: var(--thh-soft);
    background: rgba(255,255,255,.06);
    border: 1px solid var(--thh-line);
    font-weight: 900;
}
.thh-rank-number-1,
.thh-rank-number-2,
.thh-rank-number-3 {
    color: #131722;
    background: linear-gradient(135deg, #ffdf8a, #d68f35);
    border-color: rgba(244,202,119,.45);
}
.thh-rank-number-2 { background: linear-gradient(135deg, #f6f8ff, #9ca7bd); }
.thh-rank-number-3 { background: linear-gradient(135deg, #ffbd8a, #b86b45); }
.thh-rank-entry-cover {
    width: 62px;
    height: 56px;
    display: block;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.12);
    overflow: hidden;
    background-size: cover;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.thh-rank-entry-info { min-width: 0; }
.thh-rank-entry h3 {
    margin: 0 0 4px;
    color: #fff;
    font-size: 15px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.thh-rank-entry p { margin: 0 0 5px; color: var(--thh-muted); font-size: 12px; }
.thh-rank-entry-info div { display: flex; gap: 10px; color: var(--thh-soft); font-size: 12px; }
.thh-rank-entry-info small:nth-child(2) { color: var(--thh-coral); }
.thh-rank-entry-info small:nth-child(3) { color: var(--thh-gold); }
.thh-change {
    justify-self: end;
    font-style: normal;
    font-size: 12px;
    font-weight: 800;
    text-align: right;
}
.thh-change-hold { color: var(--thh-muted); }
.thh-change-up,
.thh-change-new { color: #81d9a2; }
.thh-change-down { color: #ff6b72; }
.thh-ranking-pagination { margin-top: 16px; }
.thh-quick-filter,
.thh-rank-trends,
.thh-featured-authors,
.thh-ranking-vip { padding: 20px; }
.thh-quick-filter h2 { margin: 0 0 14px; font-size: 18px; }
.thh-quick-filter div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.thh-quick-filter a { min-height: 44px; }
.thh-rank-trends p {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    margin: 0;
    padding: 11px 0;
    border-bottom: 1px solid var(--thh-line);
}
.thh-rank-trends p:last-child { border-bottom: 0; }
.thh-rank-trends p > span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    font-weight: 900;
    background: linear-gradient(135deg, rgba(230,83,130,.88), rgba(244,202,119,.52));
}
.thh-rank-trends b { color: var(--thh-soft); font-size: 14px; }
.thh-rank-trends em { color: var(--thh-muted); font-size: 13px; font-style: normal; }
.thh-featured-authors article {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--thh-line);
}
.thh-featured-authors article:last-child { border-bottom: 0; }
.thh-featured-authors article i {
    width: 46px;
    height: 46px;
    display: block;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.14);
    background-size: cover;
}
.thh-featured-authors article p { margin: 0; min-width: 0; }
.thh-featured-authors article b {
    display: block;
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.thh-featured-authors article small { color: var(--thh-muted); }
.thh-ranking-vip { overflow: hidden; }
.thh-ranking-feature-bar { margin: 20px 34px 0; }

@media (max-width: 1500px) {
    .thh-ranking-layout { grid-template-columns: minmax(0,1fr) 320px; }
    .thh-podium-grid { grid-template-columns: 1fr; }
    .thh-podium-card,
    .thh-podium-gold { min-height: 146px; }
}
@media (max-width: 1180px) {
    .thh-ranking-layout { grid-template-columns: 1fr; }
    .thh-ranking-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .thh-ranking-vip { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
    .thh-ranking-layout,
    .thh-ranking-feature-bar { padding-left: 16px; padding-right: 16px; margin-left: 16px; margin-right: 16px; }
    .thh-ranking-layout { padding-top: 16px; }
    .thh-ranking-hero,
    .thh-ranking-side { grid-template-columns: 1fr; }
    .thh-ranking-hero { padding: 24px; }
    .thh-ranking-symbol { width: 70px; height: 70px; }
    .thh-ranking-stats { gap: 12px; }
    .thh-ranking-stats span { min-width: 105px; padding-right: 12px; }
    .thh-rank-list-grid { grid-template-columns: 1fr; }
    .thh-ranking-cta { justify-self: start; align-self: start; }
}
@media (max-width: 560px) {
    .thh-podium-card,
    .thh-rank-entry { grid-template-columns: 1fr; }
    .thh-podium-cover,
    .thh-podium-gold .thh-podium-cover { height: 150px; }
    .thh-change { justify-self: start; }
    .thh-quick-filter div { grid-template-columns: 1fr; }
}