body.ng-reader-open {
    overflow: hidden;
}

.ng-reader[hidden] {
    display: none !important;
}

.ng-reader {
    --ng-reader-bg: #ffffff;
    --ng-reader-text: #111111;
    --ng-reader-font-size: 20px;
    --ng-reader-page-width: 100vw;
    position: fixed;
    inset: 0;
    z-index: 2500;
    background: #fff;
}

.ng-reader__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100dvh;
    min-height: 100vh;
    background: var(--ng-reader-bg);
    color: var(--ng-reader-text);
    overflow: hidden;
}

.ng-reader__story-head {
    flex: 0 0 auto;
    padding: 12px 16px 10px;
    background: var(--ng-reader-bg);
    color: var(--ng-reader-text);
    border-bottom: 1px solid rgba(127, 127, 127, 0.22);
}

.ng-reader__name {
    margin: 0;
    font-size: clamp(1.7rem, 8vw, 2.5rem);
    line-height: 1.02;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.ng-reader__title {
    margin: 6px 0 0;
    font-size: 1rem;
    line-height: 1.35;
    font-weight: 650;
}

.ng-reader__scroller {
    flex: 1 1 auto;
    min-height: 0;
    background: var(--ng-reader-bg);
    color: var(--ng-reader-text);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: auto;
}

.ng-reader__flow {
    width: min(100%, 760px);
    min-height: 100%;
    margin: 0 auto;
    padding: 18px 16px calc(34px + env(safe-area-inset-bottom, 0px));
    color: var(--ng-reader-text);
    background: var(--ng-reader-bg);
    font-size: var(--ng-reader-font-size);
    line-height: 1.78;
    overflow-wrap: anywhere;
}

.ng-reader__body,
.ng-reader__social {
    color: inherit;
    background: inherit;
}

.ng-reader__body p {
    margin: 0 0 1.25em;
}

.ng-reader__social {
    margin-top: 28px;
}

.ng-reader[data-reader-mode="horizontal"] .ng-reader__scroller {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: auto;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: none;
    touch-action: pan-x;
    scrollbar-width: none;
}

.ng-reader[data-reader-mode="horizontal"] .ng-reader__scroller::-webkit-scrollbar {
    display: none;
}

.ng-reader[data-reader-mode="horizontal"] .ng-reader__flow {
    box-sizing: border-box;
    width: calc(var(--ng-reader-page-width) - 32px);
    max-width: none;
    height: 100%;
    min-height: 0;
    margin: 0 0 0 16px;
    padding: 16px 0 calc(18px + env(safe-area-inset-bottom, 0px));
    column-width: calc(var(--ng-reader-page-width) - 32px);
    column-gap: 32px;
    column-fill: auto;
}

.ng-reader[data-reader-mode="horizontal"] .ng-reader__body {
    display: contents;
}

.ng-reader[data-reader-mode="horizontal"] .ng-reader__body p {
    break-inside: auto;
    margin: 0 0 1.15em;
}

/*
 * END PAGE RULE:
 * Byline -> Report -> Comments -> Viết bình luận -> I Love
 * live inside ONE horizontal page.
 *
 * If that block becomes taller (for example when textarea opens or many
 * comments exist), THIS page scrolls vertically internally instead of
 * generating another horizontal page.
 */
.ng-reader[data-reader-mode="horizontal"] .ng-reader__social {
    box-sizing: border-box;
    display: block;
    height: 100%;
    max-height: 100%;
    margin-top: 0;
    padding: 0 2px max(14px, env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    break-before: column;
    break-inside: avoid-column;
    contain: layout paint;
}

.ng-reader[data-reader-mode="horizontal"] .ng-reader__social > .ng-story-social {
    box-sizing: border-box;
    display: block;
    min-height: 0;
    margin: 0;
    padding: 0;
}

/*
 * IMPORTANT: Love follows the comment button in normal document flow.
 * Do NOT use margin-top:auto/flex here — that can fragment Love into a
 * second CSS column even when there is visible room on the end page.
 */
.ng-reader[data-reader-mode="horizontal"] .ng-story-social__love-wrap {
    margin-top: 18px;
    padding-top: 0;
}

.ng-reader[data-reader-mode="horizontal"] .ng-comment,
.ng-reader[data-reader-mode="horizontal"] .ng-comment-form,
.ng-reader[data-reader-mode="horizontal"] .ng-comment-form-toggle,
.ng-reader[data-reader-mode="horizontal"] .ng-story-social__love-wrap,
.ng-reader[data-reader-mode="horizontal"] .ng-story-social__byline,
.ng-reader[data-reader-mode="horizontal"] .ng-comments__heading-row {
    break-inside: avoid;
}

.ng-reader__loading,
.ng-reader__error {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 4;
    width: min(88vw, 440px);
    transform: translate(-50%, -50%);
    padding: 18px;
    border-radius: 14px;
    background: #fff;
    color: #111;
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.18);
    text-align: center;
}

.ng-reader__error {
    color: #9b003d;
}

@media (max-width: 359px) {
    .ng-reader__story-head {
        padding-inline: 12px;
    }

    .ng-reader__flow {
        padding-inline: 12px;
    }

    .ng-reader[data-reader-mode="horizontal"] .ng-reader__flow {
        width: calc(var(--ng-reader-page-width) - 24px);
        margin-left: 12px;
        column-width: calc(var(--ng-reader-page-width) - 24px);
        column-gap: 24px;
    }
}

@media (min-width: 768px) {
    .ng-reader__panel {
        width: min(100%, 900px);
        margin: 0 auto;
        border-inline: 1px solid rgba(127, 127, 127, 0.2);
    }

    .ng-reader__story-head {
        padding-inline: 28px;
    }
}


/* CP17 PATCH: story identity belongs to the reading flow, not a fixed header. */
.ng-reader__flow > .ng-reader__story-head {
    width: 100%;
    margin: 0 0 18px;
    padding: 0 0 14px;
    background: var(--ng-reader-bg);
    color: var(--ng-reader-text);
    border-bottom: 1px solid rgba(127, 127, 127, 0.22);
    break-inside: avoid-column;
}

.ng-reader[data-reader-mode="horizontal"] .ng-reader__flow > .ng-reader__story-head {
    break-inside: avoid-column;
}

@media (max-width: 359px) {
    .ng-reader__flow > .ng-reader__story-head {
        padding-inline: 0;
    }
}

@media (min-width: 768px) {
    .ng-reader__flow > .ng-reader__story-head {
        padding-inline: 0;
    }
}


.ng-story-chapter-nav{margin:28px 0 8px;padding:14px;border:1px solid rgba(201,155,80,.45);border-radius:14px;background:rgba(201,155,80,.08);break-inside:avoid}.ng-story-chapter-nav__status{text-align:center;font-weight:850;margin-bottom:10px}.ng-story-chapter-nav__actions{display:flex;justify-content:space-between;gap:10px}.ng-story-chapter-nav__actions a{display:inline-flex;align-items:center;min-height:42px;border:1px solid currentColor;border-radius:999px;padding:8px 13px;color:#9f2118;font-weight:850;text-decoration:none}.ng-reader .ng-story-chapter-nav__actions a{color:var(--ng-reader-text)}