.exclusive-story {
    font-family: DBHelvethaicaMonX-65Med;
    font-size: 24px;
    color: var(--twl-sem-text-neutral-primary, #191919);
    border-radius: 100px 0px 0px 100px;
    padding: 4px 24px 4px 12px;
    width: fit-content;
}

    .exclusive-story.exclusive-at-tunwalai {
        background: linear-gradient(90deg, #FFECBD 0%, rgba(255, 236, 189, 0) 100%);
    }

    .exclusive-story.exclusive-with-leadtime {
        background: linear-gradient(90deg, #FFDDDD 0%, rgba(255, 221, 221, 0) 100%);
    }

    .exclusive-story img {
        width: 24px;
        height: 24px;
        margin-right: 8px;
    }

.errorMessage {
    font-family: 'MNPaethai-Med';
    font-size: 16px;
    color: var(--twl-sem-text-danger-default, var(--cherry-700));
    display: flex;
    margin-top: 4px;
}

.switch-off:before {
    color: var(--twl-sem-text-neutral-tertiary, #888);
    cursor: pointer;
    content: 'ปิดการแสดงความคิดเห็น';
}

.switch-on:before {
    color: var(--twl-sem-text-success-default, var(--mint-700));
    cursor: pointer;
    content: 'เปิดการแสดงความคิดเห็น';
}

.switch-label {
    font-size: 20px;
    line-height: 1;
    margin: auto;
    margin-left: 8px;
    font-family: DBHelvethaicaMonX-55;
}

.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--twl-sem-border-neutral-default, #ccc);
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 20px;
        width: 20px;
        left: 2px;
        bottom: 2px;
        background-color: var(--twl-sem-text-static-white, white);
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: var(--twl-sem-text-success-default, var(--mint-700));
}

input:focus + .slider {
    box-shadow: 0 0 1px var(--Border-Brand-focus);
}

input:checked + .slider:before {
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
}

.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }

.btn-tunwalai-outline {
    text-align: center;
}

.hide {
    display: none;
}

.align-center {
    text-align: center
}

.align-right {
    text-align: right
}

.align-left {
    text-align: justify;
    text-indent: 30px;
}

    .align-left.unindented {
        text-align: left;
        text-indent: 0px;
    }

.bold {
    font-weight: bold;
}

.italic {
    font-style: italic;
}

.indent {
    text-indent: 30px;
}

.header {
    font-weight: bold;
    font-size: 1.5em;
}

.subheader {
    font-weight: bold;
    font-size: 1.25em;
}

img.alpha {
    opacity: 0.5;
}


.modal-content {
    border-radius: 10px;
}

.modal-title-text {
    font-size: 22px;
    margin-top: 20px;
}

.MultiCarousel .leftLst, .MultiCarousel .rightLst {
    position: absolute;
    top: calc(50% - 20px) !important;
}

.btn-tunwalai-outline > i {
    line-height: 28px !important;
}

.submit-btn {
    display: inline-block;
    width: 162px;
    height: 34px;
    margin: 0 0 0 12px;
    padding: 5px 5px;
    border-radius: 17px;
    background-color: var(--twl-sem-bg-danger-default, #ff5d5d);
    color: var(--twl-sem-text-static-white, white);
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}

.rectangle-header-left {
    max-width: 368px;
    height: fit-content;
    padding: 32px 32px 24px;
    border-radius: 16px;
    box-shadow: 0 4px 20px 0 rgba(7, 7, 8, 0.05);
    background-color: var(--Base-bg-base, #fff);
}

.story-image {
    margin: 0;
    border-radius: 8px;
    display: block;
    height: 292px;
    min-width: 100%;
    width: 292px;
    z-index: -2;
}

.story-image-wrapper {
    height: 240px;
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: 0 -300px 150px -200px var(--Base-bg-base, #fff) inset;
}

.story-title {
    font-family: DBHelvethaicaMonX-75Bd;
    font-size: 48px;
    letter-spacing: normal;
    text-align: left;
    color: var(--twl-sem-text-neutral-primary, #191919);
}

.story-main-content {
    font-size: 24px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
}

.story-stat-text {
    font-size: 16px;
}

.story-stat {
    font-size: 28px !important;
}

.story-stat-icon {
    color: var(--twl-theme-accent-text, var(--tunwalai-700));
}

.story-stat-border {
    border-left: solid 1px var(--twl-sem-border-neutral-default, #ddd);
}

.collapse-story {
    font-size: 20px !important;
    font-family: 'DBHelvethaicaMonX-65Med';
}

.pill-tag {
    height: 32px;
    margin: 0 4px 12px;
    padding: 4px 12px 4px 8px;
    border-radius: 16px;
    border: solid 1px var(--twl-sem-border-neutral-subtle, #e1e1e1);
    background-color: var(--twl-ref-neutral-50, #fafafa);
    font-size: 20px;
    display: inline-block;
}

.pill-warning-word {
    margin: 0 8px 8px 0;
    padding: 4px 12px 4px 8px;
    border-radius: 8px;
    background-color: var(--tunwalai-100);
    font-family: DBHelvethaicaMonX-55;
    font-size: 20px;
    display: inline-block;
    word-break: break-all;
}

.warning-word {
    border-radius: 8px;
    border: dashed 1px var(--twl-theme-accent-border, var(--tunwalai-700));
}

    .warning-word .collapse.show {
        max-height: none;
        height: auto;
    }

.story-tag .collapse {
    max-height: 88px;
    position: relative;
    display: block;
    overflow: hidden;
}

    .story-tag .collapse.show {
        max-height: none;
        height: auto;
    }

.story-segment img {
    max-width: 90%;
    height: auto !important;
}

.story-segment.collapse {
    max-height: 196px;
    position: relative;
    display: block;
    overflow: hidden;
}

    .story-segment.collapse.show {
        max-height: none;
        height: auto;
    }


.story-tab {
    font-size: 32px;
    margin-top: 32px;
    border: transparent;
    line-height: 1.2;
}

    .story-tab .nav-link {
        color: var(--twl-sem-text-neutral-tertiary, #888888);
        font-family: 'DBHelvethaicaMonX-75Bd';
        font-size: 32px !important;
        margin-left: auto;
    }

        .story-tab .nav-link.active {
            color: var(--twl-sem-text-neutral-primary, #191919) !important;
            border-color: transparent !important;
            border-bottom: solid 3px var(--twl-theme-accent-border, var(--tunwalai-700)) !important;
            font-family: 'DBHelvethaicaMonX-75Bd';
        }

.story-status {
    height: 24px;
    width: fit-content;
    margin: 8px 62px 12px 0;
    padding: 0 8px;
    object-fit: contain;
    border-radius: 6px;
    font-family: DBHelvethaicaMonX-65Med;
    font-size: 20px;
    color: var(--twl-sem-text-static-white, #fff);
    line-height: 24px;
}

.story-status-publish {
    background-color: var(--twl-sem-bg-success-default, #03a786);
}

.story-status-hide {
    background-color: var(--twl-ref-neutral-400, #BFBEBD);
}

.story-status-ban {
    background-color: var(--twl-sem-bg-danger-default, var(--cherry-700));
}

.story-tab-detail {
    font-size: 24px;
    margin-top: 15px;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.disabled-div {
    pointer-events: none;
    opacity: 0.6;
}

.chapter-header {
    font-size: 32px;
    font-family: "DBHelvethaicaMonX-75Bd";
    margin-top: 48px;
}

.chapter-detail {
    font-size: 20px;
    font-family: 'DBHelvethaicaMonX-65Med';
    padding: 8px 0px 8px 0px;
    border-bottom: solid 1px var(--twl-sem-border-neutral-subtle, #eaeaea);
}

.chapter-detail-reader {
    font-size: 20px;
    font-family: 'DBHelvethaicaMonX-65Med';
    padding: 12px 0px 12px 0px;
    border-bottom: solid 1px var(--twl-sem-border-neutral-subtle, #eaeaea);
}

.chapter-stat {
    font-size: 16px;
    color: var(--twl-sem-text-neutral-tertiary, #888);
    font-family: 'DBHelvethaicaMonX-65Med';
}

    .chapter-stat span {
        line-height: 30px;
    }

.discount-percent {
    font-size: 16px;
    color: var(--twl-sem-text-static-white, #fff);
    font-family: 'DBHelvethaicaMonX-65Med';
    background-color: var(--twl-sem-bg-brand-default, #f77e65);
    position: absolute;
    top: 13px;
    left: 132px;
    border-radius: 8px;
}

.chapter-coin {
    width: 32px;
    height: 32px;
    margin: 0 0 16px 175px;
    padding: 14.5px 9px 3px;
}

.chapter-coin-icon {
    position: absolute;
    right: 0;
    top: 9px;
    color: var(--twl-sem-text-static-white, #fff);
    text-align: center;
    font-size: 13px;
    font-family: 'DBHelvethaicaMonX-75Bd';
    text-align-last: center;
}

body.comic-detail-page #tbChapter .puchase-option-second {
    align-items: flex-end;
}

body.comic-detail-page #tbChapter .story-chapter-coin-stack {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

body.comic-detail-page #tbChapter .story-chapter-original-price-stack {
    align-items: center;
    color: var(--Text-Neutral-disabled);
    display: inline-flex;
    font-family: var(--Body-font-family, var(--twl-font-body));
    font-size: var(--Body-font-size-xs, 10px);
    font-weight: var(--font-weight-bold, 700);
    gap: 0.4px;
    line-height: var(--Body-font-line-height-xs, 15px);
    white-space: nowrap;
}

body.comic-detail-page #tbChapter .story-chapter-original-price {
    color: inherit;
}

body.comic-detail-page #tbChapter .story-chapter-original-price-unit {
    opacity: 0.5;
}

body.comic-detail-page #tbChapter .story-chapter-coin-badge {
    height: 32px;
    position: relative;
    width: 32px;
}

body.comic-detail-page #tbChapter .story-chapter-promotion-deadline {
    display: block;
    flex: 0 0 100%;
    font-family: var(--Body-font-family, var(--twl-font-body));
    font-size: var(--Body-font-size-xs, 10px);
    font-weight: 500;
    line-height: var(--Body-font-line-height-xs, 15px);
    text-align: right;
    white-space: nowrap;
}

.chapterlist-number {
    width: 4.5%;
}

.chapterlist-stat {
    width: 6.5%;
}

.chapterlist-date {
    width: 53.8%;
}

.chapterlist-price {
    padding-right: 8px;
    padding-left: 8px;
}

.package-purchase {
    margin: 0;
    border-radius: 8px;
    border: solid 1px var(--twl-sem-border-brand-disabled, #FAE5D4);
    margin-top: 48px;
    background: var(--tunwalai-100);
}

.package-purchase-desc {
    font-size: 24px;
    font-family: DBHelvethaicaMonX-65Med;
    color: #5b2c17;
}

.package-purchase-price {
    justify-content: center;
    padding: 14px 0;
    align-self: center;
}

.package-purchase-buy {
    display: flex;
    align-items: center;
}

.manage-chapter {
    padding: 22px 18px;
    border-radius: 8px;
    border: solid 1px var(--twl-sem-border-brand-disabled, var(--tunwalai-200));
    background-color: var(--tunwalai-100);
    margin-top: 48px;
}

table.dataTable thead .sorting_disabled {
    border-bottom: none !important;
}

table.dataTable {
    border-bottom: none !important;
}

    table.dataTable .row {
        border-bottom: none !important;
    }

    table.dataTable td {
        border-bottom: solid 1px var(--twl-sem-border-neutral-subtle, #eaeaea) !important;
    }

.chapter-title {
    width: 46%;
}

    .chapter-title span {
        width: fit-content;
        line-height: 30px;
    }

.wbb-toolbar {
    font-size: 20px;
    line-height: 1.4;
}

.flashsale-countdown {
    position: absolute;
    top: auto;
    width: 100px;
    text-align: center;
    color: var(--twl-sem-text-static-white, white);
    background-color: var(--twl-sem-bg-danger-default, var(--cherry-700));
    height: 20px
}

.exclusive-countdown {
    font-family: DBHelvethaicaMonX-65Med;
    font-size: 16px;
}

.price-before-sale {
    font-family: DBHelvethaicaMonX-65Med;
    font-size: 20px;
    color: var(--twl-sem-text-neutral-tertiary, #888);
    margin-right: 8px;
}

.price-flashsale {
    font-family: DBHelvethaicaMonX-75Bd;
    font-size: 24px;
    color: var(--twl-sem-text-danger-default, var(--cherry-700));
}

.sale-price {
    font-family: DBHelvethaicaMonX-75Bd;
    font-size: 24px;
    color: var(--twl-theme-accent-text, var(--tunwalai-700))
}

.ebook-price {
    padding-bottom: 10px;
}

.dropdown-toggle::after {
    border: none;
}

.dropdown-menu {
    width: 117px;
}

.dropdown-menu-text {
    font-family: DBHelvethaicaMonX-65Med;
    font-size: 20px;
    color: var(--twl-sem-text-neutral-primary, #191919);
    padding: 10px 24px;
}

    .dropdown-menu-text:focus, .dropdown-menu-text:hover {
        background-color: var(--Background-Brand-subtle);
        cursor: pointer;
    }

        .dropdown-menu-text:hover .button-comment, .dropdown-menu-text:hover .sub-text {
            color: var(--twl-ref-brand-600) !important;
        }

.add-library-success {
    z-index: 1999;
    display: none;
    overflow: auto;
    position: fixed;
    width: 100%;
    top: 50px;
    left: 0px;
}

.add-library-popup-bar {
    background-color: #e4f2e4;
    margin: 0px auto;
    margin-top: 3%;
    padding: 10px;
    font-size: 20px;
    font-weight: 600;
    border-radius: 5px;
    box-shadow: 0px 3px 9px -5px rgb(41 0 0);
    border: var(--twl-sem-border-neutral-default, #cccccc);
    width: 90%;
}

.cursor-pointer {
    cursor: pointer;
}

.donate-writer {
    text-align: center;
    margin-top: 16px;
}

.donate-box {
    width: 193px;
    height: 48px;
    padding: 9px 25px 20px 27px;
    margin: 12px 10px 6px 0;
    border-radius: 8px;
    border: solid 1px var(--twl-sem-border-neutral-default, #ddd);
    background-color: var(--Base-bg-base, #fff);
    text-align: center;
    cursor: pointer;
}

.donate-radio > input[type=radio]:checked + label {
    border: solid 1px var(--Border-Brand-active);
    background-color: var(--Background-Brand-subtle-active);
}

.character-border {
    width: 139px;
    height: 128px;
    margin: 24px 24px 48px 0px;
    padding: 16px 37.5px;
    border-radius: 8px;
    background-color: var(--twl-ref-neutral-50, #fafafa);
}

.story-cover-background {
    height: 240px;
    position: absolute;
    top: var(--site-header-height, 96px);
    z-index: -1;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}

.story-tip-donation-all-free {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    min-height: 108px;
    padding: 24px;
    overflow: hidden;
    border-radius: var(--Radius-sm, 8px);
    background: var(--Background-Warning-subtle, #fef7e8);
}

.story-tip-donation-all-free__copy {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.story-tip-donation-all-free__title,
.story-tip-donation-all-free__description {
    margin: 0;
}

.story-tip-donation-all-free__title {
    color: var(--Text-Neutral-primary, #070708);
    font-family: var(--Title-Page-font-family, var(--twl-font-heading));
    font-size: var(--Title-Page-font-size-lg, 32px);
    font-weight: 700;
    line-height: 1;
}

.story-tip-donation-all-free__description {
    color: var(--Text-Neutral-secondary, #44464b);
    font-family: var(--Body-font-family, var(--twl-font-body));
    font-size: var(--Body-font-size-sm, 12px);
    font-weight: 500;
    line-height: var(--Body-font-line-height-sm, 18px);
}

.story-tip-donation-all-free__action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 185px;
    min-height: 44px;
    padding: 10px 24px;
    border: 0;
    border-radius: var(--Radius-full, 999px);
    background: var(--Background-Brand-default, #ff775f) !important;
    color: var(--Base-on-color, #fff) !important;
    font-family: var(--Action-font-family, var(--twl-font-heading));
    font-size: var(--Action-font-size-lg, 20px);
    font-weight: 700;
    line-height: normal;
    white-space: nowrap;
}

    .story-cover-background img {
        opacity: 0.1;
        flex-shrink: 0;
        min-width: 100%;
        min-height: 100%;
    }

.purchase-chapter-name {
    font-family: MNPaethai-Med;
    font-size: 16px;
    color: var(--twl-sem-text-neutral-primary, #191919);
}

.purchase-chapter-writer {
    font-family: MNPaethai-Med;
    font-size: 14px;
    color: var(--twl-sem-text-neutral-tertiary, #888);
}

.chapter-unlock-option {
    text-align: left;
    width: 16%;
    padding-left: 40px;
    min-width: unset;
    padding-bottom: 0;
}

    .chapter-unlock-option.reader {
        width: 13%;
        text-align: right;
        padding-left: 0px;
    }

        .chapter-unlock-option.reader .puchase-option-second {
            justify-content: flex-end;
        }

.med-24-grey {
    font-family: DBHelvethaicaMonX-65Med;
    font-size: 24px;
    text-align: left;
    color: var(--twl-sem-text-neutral-tertiary, #888);
}

.med-16-black {
    font-family: DBHelvethaicaMonX-65Med;
    font-size: 16px;
    color: var(--twl-sem-text-neutral-primary, #191919);
}

.bd-24-black {
    font-family: DBHelvethaicaMonX-75Bd;
    font-size: 24px;
    text-align: left;
    color: var(--twl-sem-text-neutral-primary, #191919);
}

.db55-20 {
    font-family: DBHelvethaicaMonX-55;
    font-size: 20px;
}

.bold-75bd {
    font-family: DBHelvethaicaMonX-75Bd;
    font-size: 24px;
    font-weight: 700;
    margin-top: 16px;
}

.create-character {
    width: 37px;
    height: 37px;
    border: solid 1px var(--twl-theme-accent-border, var(--tunwalai-700));
    border-radius: 20px;
    margin-left: 51px;
    color: var(--twl-theme-accent-text, var(--tunwalai-700));
}

.create-character-text {
    color: var(--twl-theme-accent-text, var(--tunwalai-700));
    font-family: DBHelvethaicaMonX-55;
    font-size: 20px;
}

.story-read-bar {
    background-color: var(--Base-bg-base, white);
    width: 100%;
    height: 70px;
    position: fixed;
    z-index: 15;
    justify-content: center;
    border: solid 1px var(--twl-sem-border-neutral-subtle, #eaeaea);
}

#storyNavbar {
    top: var(--site-header-height, 96px);
    align-items: center;
    height: auto;
    min-height: 50px;
    border: 0;
    border-bottom: 1px solid var(--Base-border-default, var(--Border-Neutral-subtle));
    box-shadow: var(--story-read-bar-shadow, 0 8px 18px rgba(7, 7, 8, 0.1));
}

#storyNavbar > .container-slider {
    align-items: center;
    gap: 18px;
    min-height: 50px;
    padding: 0 16px;
    width: 100%;
}

body.story-detail-page #storyNavbar > .container-slider {
    padding-block: 0;
}

#storyNavbar .story-read-bar-text {
    align-self: stretch;
    align-items: stretch;
    gap: 12px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

#storyNavbar .story-read-bar-text::-webkit-scrollbar {
    display: none;
}

#storyNavbar .story-read-bar-text .nav-link {
    align-items: center;
    display: flex;
    font-family: var(--Action-font-family, var(--twl-font-db-helvethaica));
    font-size: var(--Action-font-size-lg, 20px);
    font-weight: 500;
    height: 100%;
    line-height: 1;
    padding-inline: 8px;
    position: relative;
    white-space: nowrap;
}

#storyNavbar .story-read-bar-text .nav-link.active {
    border-bottom: 2px solid var(--twl-theme-accent-border, var(--tunwalai-700)) !important;
}

#storyNavbar .nav-story-action {
    align-items: center;
    gap: 10px;
    padding-top: 0;
}

#storyNavbar .story-read-bar-button {
    margin-left: 0;
}

body.comic-detail-page #storyNavbar .circle-quick-button {
    align-items: center;
    color: var(--Text-Brand-default, #e85d45) !important;
    flex: 0 0 32px;
    height: 32px;
    min-width: 32px;
    padding: 0 !important;
    width: 32px;
}

body.comic-detail-page #storyNavbar .circle-quick-button svg {
    color: inherit !important;
    flex: 0 0 20px;
    height: 20px;
    stroke: currentColor !important;
    width: 20px;
}

body.comic-detail-page #storyNavbar .circle-quick-button.btnUnBookmarkStory {
    color: var(--Base-on-color, #fff) !important;
}

#storyNavbar .story-detail-primary-action {
    font-family: var(--Action-font-family, var(--twl-font-db-helvethaica));
    font-size: var(--Action-font-size-lg, 20px);
    font-weight: 500;
    line-height: 1;
}

.story-read-bar-text .nav-link {
    font-family: DBHelvethaicaMonX-65Med;
    font-size: 20px;
    color: var(--twl-sem-text-neutral-tertiary, #888) !important;
    padding: 0px 25px 0px 25px;
}

    .story-read-bar-text .nav-link.active {
        color: var(--twl-sem-text-neutral-primary, #191919) !important;
        border-bottom: solid 2px var(--twl-theme-accent-border, var(--tunwalai-700)) !important;
    }

.story-read-bar-button {
    margin-left: 16px;
}

.story-cover-img {
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.story-cover-background.ai-cover-hidden-background img {
    filter: blur(20px);
    transform: none;
}

.story-cover-img.ai-cover-hidden .story-image {
    filter: none;
    transform: none;
}

.story-cover-img.ai-cover-hidden::after {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    border-radius: inherit;
    -webkit-backdrop-filter: blur(20px);
    content: "";
    inset: 0;
    position: absolute;
    z-index: 2;
}

.ai-cover-badge {
    height: auto;
    pointer-events: none;
    position: absolute;
    z-index: 4;
}

.ai-cover-badge--corner {
    bottom: 8px;
    right: 8px;
    width: clamp(22px, 10%, 32px);
}

.ai-cover-badge--above-flashsale {
    bottom: 40px;
}

.ai-cover-badge--center {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
}

.ai-cover-setting-layer {
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 5;
}

.ai-cover-setting-text-link {
    color: var(--gray-600-text, #888);
    display: block;
    font-family: 'DBHelvethaicaMonX-55';
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    position: absolute;
    left: 50%;
    bottom: 15px;
    transform: translateX(-50%);
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    z-index: 6;
}

#tbChapter a:visited {
    color: darkgrey;
}

.wysibb {
    resize: none !important;
    height: 180px !important;
}

.wysibb-text-editor {
    max-height: none !important;
    min-height: none !important;
    height: 140px;
    overflow: scroll;
}

.swiper-button-next,
.swiper-button-prev {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50%;
    color: var(--twl-sem-text-neutral-primary, #191919) !important;
    font-size: 24px;
    font-family: "DBHelvethaicaMonX-65Med";
    box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%);
}

    .swiper-button-next:hover,
    .swiper-button-prev:hover {
        color: var(--twl-sem-text-neutral-primary, #191919) !important;
        background-color: var(--Base-bg-base, #fff);
    }

    .swiper-button-next:focus,
    .swiper-button-prev:focus {
        color: var(--twl-sem-text-neutral-primary, #191919) !important;
        background-color: var(--Base-bg-base, #fff);
        box-shadow: none !important;
    }

.swiper-pagination-bullet {
    background-color: var(--twl-sem-text-static-white, #fff);
    opacity: 0.5;
}

.swiper-pagination-bullet-active {
    background-color: var(--twl-sem-text-static-white, #fff);
    opacity: 1;
}

.swiper-button-lock {
    display: flex;
}

.swiper {
    padding: 0 54px;
    margin-top: 16px;
}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after,
.swiper-button-next:after {
    display: none;
}

.container-inner {
    max-width: 991px;
}

.container-slider {
    max-width: 1100px;
}

table.dataTable tbody th,
table.dataTable tbody td {
    padding: 8px 0px;
}

.package-price-content {
    margin-left: auto;
}

.nav-story-action {
    padding-top: 16px;
    display: flex;
}

.nav-story-action-bottom {
    bottom: 0px;
    display: none !important;
}

[contenteditable=true]:empty:not(:focus):before {
    content: "แสดงความคิดเห็นเลย...";
    color: var(--twl-sem-text-neutral-tertiary, #888);
    font-family: 'MNPaethai';
    font-size: 20px;
    position: relative;
    top: 10px;
}

.wysibb .wysibb-text {
    padding-left: 24px;
}

.circle-quick-button {
    width: 33px;
    justify-content: center;
    padding: 4px 18px !important;
}

#commentMenu,
#reportMenu {
    position: relative;
    top: 6px;
}

.comment-nav {
    min-width: 172px;
    max-width: 172px
}

    .comment-nav.show {
        right: 0 !important;
        left: auto !important;
        transform: none !important;
        top: 35px !important;
    }

.rectangle-header-left .story-stat {
    font-size: 20px !important;
    font-family: 'DBHelvethaicaMonX-65Med';
}

.rectangle-header-left .story-image {
    margin-bottom: 0;
    object-fit: cover;
}

.wysibb {
    border-radius: 8px;
    font-family: 'MNPaethai';
}

.chapter-header--total {
    display: none;
}

.btn-tunwalai.btn:disabled {
    background-color: var(--tunwalai-400) !important;
    opacity: 1;
}

.item-overlay {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    z-index: 2;
}

.icon-cart-cross {
    width: 25px;
    height: 24px;
    display: block;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.95414 20.1349C9.70304 20.1349 10.3101 19.5277 10.3101 18.7789C10.3101 18.03 9.70304 17.4229 8.95414 17.4229C8.20525 17.4229 7.59814 18.03 7.59814 18.7789C7.59814 19.5277 8.20525 20.1349 8.95414 20.1349Z' fill='white'/%3E%3Cpath d='M15.2803 20.1349C16.0292 20.1349 16.6363 19.5277 16.6363 18.7789C16.6363 18.03 16.0292 17.4229 15.2803 17.4229C14.5314 17.4229 13.9243 18.03 13.9243 18.7789C13.9243 19.5277 14.5314 20.1349 15.2803 20.1349Z' fill='white'/%3E%3Cpath d='M19.5693 7.91395C19.097 7.46278 18.4653 7.21687 17.8123 7.22995H7.9123L7.7383 5.84295C7.67406 5.29795 7.41182 4.79555 7.00142 4.43125C6.59102 4.06694 6.06107 3.86612 5.5123 3.86695H5.1213C4.8537 3.86695 4.59706 3.97325 4.40783 4.16248C4.21861 4.3517 4.1123 4.60834 4.1123 4.87595V4.87595C4.1123 5.14355 4.21861 5.40019 4.40783 5.58942C4.59706 5.77864 4.8537 5.88495 5.1213 5.88495H5.5123C5.56698 5.88564 5.6195 5.90639 5.65987 5.94326C5.70025 5.98014 5.72567 6.03056 5.7313 6.08495L6.7403 13.9939C6.80403 14.5385 7.06554 15.0407 7.47517 15.4052C7.8848 15.7697 8.41401 15.971 8.9623 15.9709H15.7693C16.5789 15.9702 17.3659 15.704 18.0097 15.213C18.6535 14.7221 19.1184 14.0335 19.3333 13.2529L20.1713 10.2059C20.2831 9.80437 20.2859 9.38025 20.1794 8.97723C20.0729 8.57421 19.8609 8.20685 19.5653 7.91295L19.5693 7.91395ZM17.3943 12.7189C17.2957 13.0734 17.084 13.3859 16.7914 13.6089C16.4987 13.8318 16.1412 13.953 15.7733 13.9539H8.9663C8.9115 13.9537 8.85874 13.9331 8.81827 13.8961C8.7778 13.8592 8.75251 13.8085 8.7473 13.7539L8.1723 9.24695H17.9123C17.9643 9.24648 18.0156 9.25808 18.0624 9.28083C18.1091 9.30357 18.1499 9.33685 18.1816 9.37804C18.2133 9.41923 18.235 9.46721 18.245 9.51821C18.255 9.56921 18.2531 9.62183 18.2393 9.67195L17.3943 12.7189Z' fill='white'/%3E%3Cpath d='M5.11531 17.6569L17.8432 4.92899C18.0308 4.74145 18.2851 4.63609 18.5503 4.63609C18.8156 4.63609 19.0699 4.74145 19.2574 4.92899C19.445 5.11652 19.5503 5.37087 19.5503 5.63609C19.5503 5.90131 19.445 6.15566 19.2574 6.3432L6.52952 19.0711C6.34199 19.2587 6.08763 19.364 5.82242 19.364C5.5572 19.364 5.30285 19.2587 5.11531 19.0711C4.92777 18.8836 4.82242 18.6292 4.82242 18.364C4.82242 18.0988 4.92777 17.8444 5.11531 17.6569V17.6569Z' fill='white'/%3E%3C/svg%3E%0A");
}

#ddlHeadMenu:focus {
    outline: none;
}

.tunlist-body {
    max-height: 700px;
    overflow-y: scroll;
    overflow-x: hidden;
}

    .tunlist-body::-webkit-scrollbar {
        display: none;
    }

.img-square {
    background: #E84342;
    border-radius: 6px;
    height: 24px;
    width: 24px;
}

.lh-tun-base {
    line-height: 1.2;
}

.popover {
    background: transparent;
    border: none;
}

.popover-body {
    background: var(--Base-bg-base, #fff);
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(7, 7, 8, 0.10);
    color: var(--twl-sem-text-neutral-primary, #191919);
    font: 20px DBHelvethaicaMonX-55;
    padding: 16px;
}

.bs-popover-bottom>.popover-arrow::before {
    border-bottom-color: rgba(7,7,8,0.07);
}

.icon-left {
    left: -2px;
}

.ebook-cover {
    border-radius: 8px;
    height: 244px;
    width: 172px;
}

.modal.backdrop {
    z-index: 9;
}

.modal-info-message.modal-info-message-list {
    max-height: 690px;
    overflow-y: auto;
    overflow-x: hidden;
}

.top-4 {
    top: 4px;
}

.sale-panel {
    border: 1px solid var(--twl-sem-border-neutral-subtle, #EAEAEA);
}

.sale-title {
    font-size: 32px;
}

.promotion-chapter {
    border: solid 1px var(--Border-Danger-default, var(--twl-sem-border-danger-default));
    background: var(--Background-Danger-subtle, var(--twl-sem-bg-danger-subtle));
}

.promotion-detail tbody {
    display: block;
    max-height: 500px;
    overflow-y: auto;
}

.promotion-detail thead,
.promotion-detail tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.promotion-detail td,
.promotion-detail th {
    padding-bottom: 18px;
}

.promotion-detail td:first-child {
    width: 8%;
}

.col-price {
    width: 25%;
}

.text-tun-success {
    color: var(--twl-sem-text-success-default, var(--mint-700));
    min-width: 84px;
}

.h-32 {
    height: 32px;
}

.flashsale-countdown.h-32 {
    padding-top: 2px;
}

.promote-template-btn {
    border-radius: 50%;
    width: 39px !important;
    height: 39px;
}

@media (min-width: 576px) {
    .modal-dialog.modal-dialog-md {
        max-width: 650px;
    }

    .btn-pinto-form-md {
        max-width: 163px;
    }

    .sale-panel .btn {
        min-width: 128px;
    }

    .modal-dialog.promo-dialog {
        max-width: 650px;
    }
}

@media (max-width: 1028px) {
    .swiper-button-next,
    .swiper-button-prev {
        display: none;
    }

    .container-slider {
        max-width: unset;
    }

    .swiper {
        padding: 0;
    }
}

@media (min-width: 1141px) {
    .swiper::before,
    .swiper::after {
        position: absolute;
        left: 0;
        top: 0;
        width: 40px;
        height: 100%;
        content: "";
        z-index: 2;
        background: var(--Base-bg-base, #fff);
    }

    .swiper::after {
        right: 0;
        left: auto;
    }
}

.comic-writer-swiper-shell,
.pinto-ebook-swiper-shell {
    position: relative;
}

.comic-writer-swiper-shell .swiper-story-list,
.pinto-ebook-swiper-shell .swiper {
    margin-top: 0;
}

.comic-writer-swiper-shell .swiper-story-list::before,
.comic-writer-swiper-shell .swiper-story-list::after,
.pinto-ebook-swiper-shell .swiper::before,
.pinto-ebook-swiper-shell .swiper::after {
    display: none;
}

.comic-writer-swiper-shell > .swiper-button-next,
.comic-writer-swiper-shell > .swiper-button-prev,
.pinto-ebook-swiper-shell > .swiper-button-next,
.pinto-ebook-swiper-shell > .swiper-button-prev {
    background-color: var(--Base-bg-base, #fff);
    margin-top: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
}

.comic-writer-swiper-shell > .swiper-button-prev,
.pinto-ebook-swiper-shell > .swiper-button-prev {
    left: -18px;
}

.comic-writer-swiper-shell > .swiper-button-next,
.pinto-ebook-swiper-shell > .swiper-button-next {
    right: -18px;
}

.comic-writer-swiper-shell > .swiper-button-lock,
.pinto-ebook-swiper-shell > .swiper-button-lock {
    display: none;
}

@media (min-width: 768px) {
    .comic-writer-swiper-shell > .swiper-button-next:not(.swiper-button-lock),
    .comic-writer-swiper-shell > .swiper-button-prev:not(.swiper-button-lock),
    .pinto-ebook-swiper-shell > .swiper-button-next:not(.swiper-button-lock),
    .pinto-ebook-swiper-shell > .swiper-button-prev:not(.swiper-button-lock) {
        display: flex;
    }
}

@media (min-width: 992px) {
    .comic-writer-swiper-shell .swiper-story-list,
    .pinto-ebook-swiper-shell .swiper {
        padding: 0 !important;
    }
}

@media (min-width: 1200px) {
    .comic-writer-swiper-shell > .swiper-button-prev,
    .pinto-ebook-swiper-shell > .swiper-button-prev {
        left: -56px;
    }

    .comic-writer-swiper-shell > .swiper-button-next,
    .pinto-ebook-swiper-shell > .swiper-button-next {
        right: -56px;
    }
}

/* Equal section rhythm on comic/ebook detail */
body:is(.comic-detail-page, .ebook-detail-page) :is(
    .story-detail-v3-section,
    .story-detail-v3-writer-stories.container-inner,
    .story-detail-v3-related-stories.container-inner,
    .story-related-tunlist.container-inner
) {
    margin-top: var(--story-detail-v3-section-gap, 32px);
}

body:is(.comic-detail-page, .ebook-detail-page) :is(
    .story-detail-v3-writer-stories.container-slider,
    .story-detail-v3-related-stories.container-slider,
    .story-related-tunlist.container-tunlist-slider,
    #ebookSection > .container-slider
) {
    margin-top: 0;
}

@media (max-width: 767px) {
    .comic-writer-swiper-shell > .swiper-button-next,
    .comic-writer-swiper-shell > .swiper-button-prev {
        display: none;
    }
}

@media (max-width: 684px) and (min-width:576px) {
    .chapter-title.reader {
        width: 64% !important;
    }
}

@media (max-width: 767px) {
    .story-tip-donation-all-free {
        align-items: start;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
        row-gap: 8px;
        min-height: 104px;
        padding: 12px 16px;
        border-radius: 8px;
    }

    .story-tip-donation-all-free__copy {
        grid-column: 1;
        grid-row: 1;
        gap: 2px;
    }

    .story-tip-donation-all-free__title {
        font-family: var(--Heading-font-family, var(--twl-font-heading));
        font-size: var(--Heading-font-size-sm, 20px);
        font-weight: 500;
        line-height: normal;
    }

    .story-tip-donation-all-free__action {
        grid-column: 1;
        grid-row: 2;
        justify-self: end;
        width: 161px;
        min-height: 28px;
        padding: 2px 12px;
    }

    .sm-story-title {
        padding-left: 20px;
        width: 100% !important;
    }

    .story-tab .nav-link,
    .chapter-header {
        font-size: 28px !important;
    }
}

/* Exact Story v3 header, tags, and warning component contract. */
body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-meta .story-title {
    color: var(--Text-Neutral-primary);
    font-family: var(--Title-Page-font-family, var(--twl-font-db-helvethaica));
    font-size: var(--story-header-title-font-size-desktop, 64px) !important;
    font-weight: 700;
    line-height: normal;
    margin: 0;
    max-width: 524px;
    overflow-wrap: anywhere;
}

body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-meta .sm-story-title :is(h2, h3, .font-24.f-normal-65, .font-16.f-normal-65),
body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-mobile-header :is(.font-24.f-normal-65, .font-16.f-normal-65),
body.ebook-detail-page .story-detail-v3-mobile-header-meta :is(.font-24.f-normal-65, .font-16.f-normal-65) {
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree)) !important;
    font-size: var(--Body-font-size-md, 14px) !important;
    font-weight: 500;
    line-height: var(--Body-font-line-height-md, 21px);
}

body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-meta .sm-story-title h3 a {
    color: var(--Text-Neutral-tertiary) !important;
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree)) !important;
    font-size: var(--Body-font-size-sm, 12px) !important;
    font-weight: 500;
    line-height: var(--Body-font-line-height-sm, 18px);
}

body:is(.comic-detail-page, .ebook-detail-page) .v3-story-detail-writer-link,
body.comic-detail-page .sm-story-title a[href*="profile"] {
    color: var(--Text-Neutral-primary) !important;
    font-family: inherit;
    font-weight: 500;
    text-decoration: none;
}

body:is(.comic-detail-page, .ebook-detail-page) .v3-story-detail-writer-link:is(:hover, :focus-visible),
body.comic-detail-page .sm-story-title a[href*="profile"]:is(:hover, :focus-visible) {
    color: var(--Text-Brand-default) !important;
}

body:is(.comic-detail-page, .ebook-detail-page) :is(.detail-writer-label, .detail-illustrator-label) {
    font-weight: 700;
}

body:is(.comic-detail-page, .ebook-detail-page) .detail-illustrator {
    border-inline-start: 1px solid var(--Border-Neutral-default, #cacbce);
    margin-inline-start: 8px;
    padding-inline-start: 12px;
}

body:is(.comic-detail-page, .ebook-detail-page) :is(.review-rating-value, .heart-rating, .user-heart-rating, .my-heart-rating) {
    color: var(--Text-Danger-default, var(--cherry-700)) !important;
}

/* Header rating score (StoryHeader): 20px strong desktop */
body:is(.comic-detail-page, .ebook-detail-page) :is(.story-detail-v3-mobile-header, .story-detail-v3-meta, .story-detail-v3-mobile-header-meta) .review-rating-value {
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree));
    font-size: var(--Body-font-size-xlg, 20px) !important;
    font-weight: 700;
    line-height: var(--Body-font-line-height-xlg, 30px);
}

/* Individual review row score (ReviewCard): 20px bold, lh 1.2, DB Helvethaica */
body:is(.comic-detail-page, .ebook-detail-page) :is(.section-review, #userReview, #allReviewsModal, #tbReview, #tbReviews) .review-rating-value:not(.rating-total) {
    font-family: var(--Title-Page-font-family, var(--twl-font-db-helvethaica)) !important;
    font-size: 20px !important;
    font-weight: 700;
    line-height: 1.2 !important;
}

/* Rating hearts shared */
body:is(.comic-detail-page, .ebook-detail-page) .twl-rating-hearts {
    align-items: center;
    color: var(--Text-Danger-default, var(--cherry-700));
    display: inline-flex;
    flex: 0 0 auto;
    gap: 3px;
}

body:is(.comic-detail-page, .ebook-detail-page) .twl-rating-heart-icon,
body:is(.comic-detail-page, .ebook-detail-page) .twl-rating-heart-base,
body:is(.comic-detail-page, .ebook-detail-page) .twl-rating-heart-fill {
    color: inherit;
    display: block;
    flex: 0 0 auto;
}

body:is(.comic-detail-page, .ebook-detail-page) .twl-rating-heart-icon.is-filled,
body:is(.comic-detail-page, .ebook-detail-page) .twl-rating-heart-fill,
body:is(.comic-detail-page, .ebook-detail-page) .twl-rating-heart-icon[data-filled='true'] {
    fill: currentColor;
}

body:is(.comic-detail-page, .ebook-detail-page) .twl-rating-heart-icon[data-filled='false'] {
    fill: none;
}

/* Header fractional hearts: 18px box, gap 8px desktop */
body:is(.comic-detail-page, .ebook-detail-page) .twl-header-rating {
    align-items: center;
    gap: 8px;
}

body:is(.comic-detail-page, .ebook-detail-page) .twl-header-rating > li,
body:is(.comic-detail-page, .ebook-detail-page) :is(.section-review, #userReview, #allReviewsModal, #tbReviews) .nav.font-24.text-cherry > li {
    margin-right: 0 !important;
}

body:is(.comic-detail-page, .ebook-detail-page) :is(.story-detail-v3-mobile-header, .story-detail-v3-meta, .story-detail-v3-mobile-header-meta) .twl-rating-hearts--fractional {
    gap: 8px;
}

body:is(.comic-detail-page, .ebook-detail-page) .twl-rating-heart {
    block-size: 18px;
    color: currentColor;
    display: inline-block;
    flex: 0 0 18px;
    inline-size: 18px;
    position: relative;
}

body:is(.comic-detail-page, .ebook-detail-page) .twl-rating-heart-base,
body:is(.comic-detail-page, .ebook-detail-page) .twl-rating-heart-fill {
    block-size: 18px;
    inline-size: 18px;
    inset: 0;
    position: absolute;
    stroke-width: 2.2;
}

/* Review summary average: 16px, gap 8px desktop */
body:is(.comic-detail-page, .ebook-detail-page) .section-review .card-body-rating .twl-rating-hearts {
    gap: 8px;
}

/* Review summary histogram: 12px, gap 8px desktop */
body:is(.comic-detail-page, .ebook-detail-page) .section-review .rating-list .twl-rating-hearts {
    gap: 8px;
}

/* Review row hearts: 20px, gap 3px; row gap 12px score↔hearts */
body:is(.comic-detail-page, .ebook-detail-page) :is(.section-review, #userReview, #allReviewsModal, #tbReview, #tbReviews) :is(.my-heart-rating, .user-heart-rating, [id^="review-rating-"]) .twl-rating-hearts,
body:is(.comic-detail-page, .ebook-detail-page) #tbReview .comment-row .twl-rating-hearts {
    gap: 3px;
}

body:is(.comic-detail-page, .ebook-detail-page) :is(.section-review, #userReview, #allReviewsModal) .nav.font-24.text-cherry,
body:is(.comic-detail-page, .ebook-detail-page) #tbReviews .nav.font-24.text-cherry {
    column-gap: 12px;
}

body:is(.comic-detail-page, .ebook-detail-page) #tbReview .comment-row .text-cherry.d-flex {
    align-items: center;
    column-gap: 12px;
}

body:is(.comic-detail-page, .ebook-detail-page) .story-tags {
    margin-top: 24px !important;
}

body:is(.comic-detail-page, .ebook-detail-page) .story-tags__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 64px;
    overflow: hidden;
}

body:is(.comic-detail-page, .ebook-detail-page) .story-tags__list.show {
    max-height: none;
}

body:is(.comic-detail-page, .ebook-detail-page) .story-tags .pill-tag.tag {
    align-items: center;
    background: var(--Base-bg-raised, #fff);
    border: 1px solid var(--Border-Neutral-default, #ddd);
    border-radius: var(--Radius-lg, 16px);
    box-sizing: border-box;
    color: var(--Text-Neutral-secondary, #555);
    display: inline-flex;
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree));
    font-size: var(--Body-font-size-sm, 12px);
    font-weight: 500;
    gap: 4px;
    height: 28px;
    line-height: var(--Body-font-line-height-sm, 18px) !important;
    margin: 0;
    max-width: 100%;
    padding: 4px 12px;
    text-decoration: none;
    white-space: nowrap;
}

body:is(.comic-detail-page, .ebook-detail-page) .story-tags .tag__label {
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

body:is(.comic-detail-page, .ebook-detail-page) .story-tags .tag__icon {
    color: var(--Icon-Neutral-tertiary);
    flex: 0 0 16px;
    height: 16px;
    margin: 0 !important;
    width: 16px;
}

body:is(.comic-detail-page, .ebook-detail-page) .story-tags__toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--Text-Brand-default);
    display: inline-flex;
    font-family: var(--Action-font-family, var(--twl-font-db-helvethaica));
    font-size: var(--Action-font-size-lg, 20px) !important;
    font-weight: 500;
    gap: 4px;
    line-height: 1;
    margin-top: 8px;
    min-height: 24px;
    padding: 0;
}

body:is(.comic-detail-page, .ebook-detail-page) .story-warning-words.warning-word {
    background: transparent;
    border: 1px dashed var(--Border-Danger-default);
    border-radius: var(--Radius-sm, 8px);
    box-sizing: border-box;
    margin-top: 24px !important;
    padding: 16px !important;
}

body:is(.comic-detail-page, .ebook-detail-page) .story-warning-words__summary {
    align-items: center;
    display: grid !important;
    gap: 8px 19px;
    grid-template-columns: minmax(0, 1fr) auto;
    margin: 0 !important;
}

body:is(.comic-detail-page, .ebook-detail-page) .story-warning-words__heading {
    color: var(--Text-Neutral-primary);
    font-family: var(--Title-Page-font-family, var(--twl-font-db-helvethaica)) !important;
    font-size: var(--Title-Page-font-size-sm, 24px) !important;
    font-weight: 700;
    gap: 8px;
    line-height: 1;
    min-height: 27px;
}

body:is(.comic-detail-page, .ebook-detail-page) .story-warning-words__icon {
    color: var(--Icon-Danger-default);
    flex: 0 0 22px;
    height: 22px;
    margin: 0;
    width: 22px;
}

body:is(.comic-detail-page, .ebook-detail-page) .story-warning-words__icon circle {
    fill: var(--Icon-Danger-default);
    stroke: var(--Icon-Danger-default);
}

body:is(.comic-detail-page, .ebook-detail-page) .story-warning-words__icon line {
    stroke: var(--Base-bg-default, #fff);
}

body:is(.comic-detail-page, .ebook-detail-page) .story-warning-words__toggle {
    align-items: center;
    color: var(--Text-Brand-default);
    display: inline-flex;
    font-family: var(--Action-font-family, var(--twl-font-db-helvethaica));
    font-size: var(--Action-font-size-lg, 20px) !important;
    font-weight: 500;
    gap: 2px;
    line-height: 1;
    margin: 0;
    min-height: 27px;
    text-decoration: none;
}

body:is(.comic-detail-page, .ebook-detail-page) .story-warning-words__notice {
    color: var(--Text-Neutral-primary);
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree));
    font-size: var(--Body-font-size-md, 14px) !important;
    font-weight: 500;
    line-height: var(--Body-font-line-height-md, 21px);
    margin: 8px 0 0 !important;
}

body:is(.comic-detail-page, .ebook-detail-page) .story-warning-words__list {
    margin-top: 12px !important;
}

body:is(.comic-detail-page, .ebook-detail-page) .story-warning-words__pill {
    align-items: center;
    background: var(--Background-Brand-subtle);
    border: 0;
    border-radius: var(--Radius-xs, 4px);
    color: var(--Text-Neutral-primary);
    display: inline-flex;
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree));
    font-size: var(--Body-font-size-sm, 12px);
    font-weight: 700;
    height: 32px;
    line-height: var(--Body-font-line-height-sm, 18px) !important;
    margin: 0;
    padding: 4px 12px;
}

@media (hover: hover) and (pointer: fine) {
    body:is(.comic-detail-page, .ebook-detail-page) .story-tags .pill-tag.tag:hover {
        background: var(--Background-Brand-subtle);
        border-color: var(--Border-Brand-default);
        color: var(--Text-Neutral-secondary);
    }

    body:is(.comic-detail-page, .ebook-detail-page) .story-tags .pill-tag.tag:hover .tag__icon {
        color: var(--Icon-Brand-default);
    }
}

@media (max-width: 767px) {
    body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-mobile-header .story-title,
    body.ebook-detail-page .story-detail-v3-mobile-header .ebook-title {
        font-family: var(--Title-Page-font-family, var(--twl-font-db-helvethaica));
        font-size: var(--story-header-title-font-size-mobile, 28px) !important;
        font-weight: 700;
        line-height: 1;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .story-warning-words.warning-word {
        background: var(--Base-bg-default);
        border: 0;
        margin-top: 12px !important;
        padding: 0 !important;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .story-warning-words__heading {
        font-family: var(--Heading-font-family, var(--twl-font-db-helvethaica)) !important;
        font-size: var(--Heading-font-size-sm, 20px) !important;
        font-weight: 500;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .story-warning-words__icon {
        color: var(--Icon-Neutral-tertiary);
        flex-basis: 16px;
        height: 16px;
        width: 16px;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .story-warning-words__pill {
        background: var(--Background-Neutral-tertiary);
        color: var(--Text-Neutral-secondary);
        font-weight: 500;
        white-space: nowrap;
    }
}

@media (max-width: 768px) {
    .rectangle-header-left {
        align-self: center;
    }

    .story-title {
        font-size: 32px !important;
    }

    .story-stat-content {
        padding: 0px !important;
    }

    .story-stat-area {
        margin-top: 32px !important;
    }

    .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate {
        float: right !important;
    }

    .package-price-content {
        margin-left: unset !important;
        justify-content: space-between;
        border-top: solid 1px var(--twl-sem-border-brand-disabled, var(--tunwalai-400));
        margin-top: 12px;
    }

    .package-purchase-price {
        display: flex;
        justify-content: center !important;
        padding: 12px 0 !important;
    }

    .package-save {
        align-self: center !important;
        margin-left: 8px;
    }

    .package-purchase-buy {
        padding: 0px !important;
    }
}

@media (max-width: 818px) {
    .tunpackage-img {
        display: none !important;
    }

    .promotion-chapter {
        padding-bottom: 12px;
    }

    .promotion-chapter .row-btn {
        border-top: solid 1px #FFC9CF;
        justify-content: flex-end;
        margin-top: 12px;
        padding: 16px 0 4px;
        width: 100%;
    }

    .promotion-chapter .row-btn .btn {
        width: 100%;
    }
}

@media (max-width: 848px) {
    .nav-story-action {
        display: none !important;
    }

    .nav-story-action-bottom {
        display: flex !important;
    }

    .story-read-bar-text {
        width: 100% !important;
    }
}

@media (max-width: 711px) {
    .tunpackage-img {
        display: none !important;
    }
}

@media (max-width: 575px) {
    .story-stat {
        padding: 0px 8px 20px 10px !important;
        text-align: left !important;
        width: fit-content !important;
    }

    .story-stat, .story-stat-text {
        font-family: DBHelvethaicaMonX-65Med !important;
        font-size: 20px !important;
        line-height: 24px;
    }

    .story-stat-icon i {
        font-size: 22px !important;
    }

    .rectangle-header-left .story-stat {
        padding: 0 !important;
        text-align: center !important;
        width: 100% !important;
    }

    .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate {
        float: unset !important;
    }

    .pagination-button-order {
        margin-bottom: 12px;
    }

    .text-info br {
        display: none;
    }

    .ebook-cover {
        max-width: 100%;
        height: 223px;
    }

    .tun-package-text {
        width: 100%
    }

    .promotion-detail td:first-child {
        width: 13%;
    }

    .free-chapter {
        display: inline-block;
    }
}

@media (max-width: 432px) {
    .package-purchase {
        height: 202px !important;
    }

    .comment-message-xs {
        width: 50% !important;
    }

    .manage-chapter {
        flex-direction: column;
        padding: 16px;
    }

    .manage-chapter--title {
        align-self: start !important;
        margin-bottom: 12px;
    }

    .manage-chapter--buttons {
        margin-left: 0 !important;
        margin-right: auto;
    }

    #btnSortChapter {
        margin-right: 12px !important;
    }

    .manage-chapter--buttons {
        width: 100%;
    }

    #btnSortChapter,
    #btnCreateChapter {
        width: 47% !important;
    }

    #btnCreateChapter {
        margin-left: auto;
    }

    .chapterlist-price {
        padding-right: 4px;
        padding-left: 4px;
    }

    .exclusive-story {
        font-size: 21px;
        padding-right: 11px;
    }

    .sale-title {
        font-size: 22px;
    }
}

@media (max-width: 356px) {
    .rectangle-header-left {
        max-width: 100%;
    }

    .rectangle-header-left .story-image {
        width: 100%;
        height: initial;
        aspect-ratio: 1/1;
    }
}

@media (max-width: 320px) {
    .manage-chapter--buttons .btn {
        padding: 4px 14px;
    }

    .ebook-cover {
        height: 180px;
        max-width: 100%;
    }

    .exclusive-story {
        font-size: 16px;
    }

    .exclusive-story img {
        width: 20px;
        height: 20px;
        margin-right: 4px;
    }

    .text-title {
        font-size: 22px;
    }
}

@media (max-width: 290px) {
    .promotion-chapter {
        padding: 12px 10px !important;
    }
}

/* Story v3 visual contract shared by Comic and Ebook details. */
.v3-story-detail-bar {
    background-color: var(--Base-bg-base, var(--background-base));
    border-color: var(--Base-border-default, var(--border-default));
    box-shadow: var(--story-read-bar-shadow, var(--Elevation-xs));
    color: var(--Text-Neutral-primary, var(--text-primary));
    font-family: var(--Action-font-family, var(--twl-font-db-helvethaica));
}

.v3-story-detail-bar .nav-link {
    color: var(--Text-Neutral-secondary, var(--text-secondary));
    font-family: var(--Action-font-family, var(--twl-font-db-helvethaica));
    font-size: var(--Action-font-size-lg, 20px);
    font-weight: 500;
}

.v3-story-detail-bar .nav-link.active {
    color: var(--Text-Brand-default, var(--brand-default));
}

.story-cover-background.v3-story-detail-backdrop {
    align-items: center;
    display: flex;
    height: 220px;
    isolation: isolate;
    justify-content: center;
    left: 0;
    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 24px), transparent);
    mask-image: linear-gradient(to bottom, black calc(100% - 24px), transparent);
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    top: var(--site-header-height, 96px);
    width: 100%;
    z-index: 0;
}

.story-cover-background.v3-story-detail-backdrop > img {
    filter: blur(12px);
    height: 100%;
    max-width: none;
    min-height: 100%;
    min-width: 100%;
    object-fit: cover;
    opacity: 1;
    transform: scale(1.08);
    width: 100%;
}

.v3-story-detail-backdrop::before,
.v3-story-detail-backdrop::after {
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.v3-story-detail-backdrop::before {
    backdrop-filter: blur(5px);
    background: var(--Opacity-Base-60, rgba(255, 255, 255, 0.6));
    z-index: 1;
}

.v3-story-detail-backdrop::after {
    backdrop-filter: blur(5px);
    background: linear-gradient(
        0deg,
        var(--Base-bg-base, var(--background-base)) 0%,
        color-mix(in srgb, var(--Base-bg-base, var(--background-base)) 70%, transparent) 49.81%,
        var(--Opacity-Base-0, transparent) 100%
    );
    z-index: 2;
}

.v3-story-detail-backdrop + .story-image-wrapper {
    display: none;
}

.v3-story-detail {
    color: var(--Text-Neutral-primary, var(--text-primary));
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree));
    padding-top: 32px;
    position: relative;
}

.v3-story-detail .story-title,
.v3-story-detail .ebook-title {
    color: var(--Text-Neutral-primary, var(--text-primary));
    font-family: var(--Title-Page-font-family, var(--twl-font-db-helvethaica));
    font-size: var(--Title-Hero-font-size, 64px);
    font-weight: 700;
    line-height: normal;
}

.v3-story-detail .v3-story-detail-writer-link {
    color: var(--Text-Neutral-primary, var(--text-primary));
    font-weight: 500;
    text-decoration: none;
}

.v3-story-detail .sm-story-title > :is(h2, .font-24.f-normal-65),
.v3-story-detail .story-stat-content > .sm-story-title h2 {
    color: var(--Text-Neutral-secondary, var(--text-secondary));
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree));
    font-size: var(--Body-font-size-md, 14px);
    font-weight: 500;
    line-height: var(--Body-font-line-height-md, 21px);
}

.v3-story-detail :is(.f-normal-65, .med-24-grey, .bd-24-black) {
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree));
    font-size: var(--Body-font-size-md, 14px);
    font-weight: 500;
    line-height: var(--Body-font-line-height-md, 21px);
}

.v3-story-detail .med-24-grey {
    color: var(--Text-Neutral-secondary, var(--text-secondary));
}

.v3-story-detail .bd-24-black {
    color: var(--Text-Neutral-primary, var(--text-primary));
    font-weight: 700;
}

.v3-story-detail .rectangle-header-left {
    background-color: var(--Base-bg-raised, var(--background-raised));
    border-radius: var(--Radius-lg, var(--twl-radius-lg));
    box-shadow: var(--Elevation-sm, var(--twl-elevation-sm));
}

.v3-story-detail .story-stat {
    color: var(--Text-Neutral-primary, var(--text-primary));
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree));
    font-size: var(--Body-font-size-lg, 16px) !important;
    font-weight: 700;
    line-height: var(--Body-font-line-height-lg, 24px);
}

.v3-story-detail .story-stat-text {
    color: var(--Text-Neutral-secondary, var(--text-secondary));
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree));
    font-size: var(--Body-font-size-sm, 12px) !important;
    font-weight: 500;
    line-height: var(--Body-font-line-height-sm, 18px);
}

.v3-story-detail .story-stat-icon {
    color: var(--Icon-Brand-default, var(--twl-sem-icon-brand-default));
}

.v3-story-detail .story-stat-border {
    border-color: var(--Border-Neutral-subtle, var(--border-subtle));
}

.v3-story-detail .pill-tag {
    background-color: var(--Background-Neutral-tertiary, var(--twl-sem-bg-neutral-tertiary));
    border-color: var(--Border-Neutral-subtle, var(--border-subtle));
    border-radius: var(--Radius-full, var(--twl-radius-full));
    color: var(--Text-Neutral-primary, var(--text-primary));
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree));
    font-size: var(--Body-font-size-md, 14px);
    font-weight: 500;
    line-height: var(--Body-font-line-height-md, 21px);
    transition: background-color 160ms ease, color 160ms ease;
}

.v3-story-detail .warning-word {
    background-color: var(--Background-Danger-subtle, var(--twl-sem-bg-danger-subtle));
    border-color: var(--Border-Danger-default, var(--twl-sem-border-danger-default));
}

.v3-story-detail .warning-word-notice {
    color: var(--Text-Neutral-secondary, var(--text-secondary));
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree));
    font-size: var(--Body-font-size-sm, 12px);
    line-height: var(--Body-font-line-height-sm, 18px);
}

.v3-story-detail :is(.story-tab, .chapter-header, .sale-title, .section-main-title) {
    color: var(--Text-Neutral-primary, var(--text-primary));
    font-family: var(--Heading-font-family, var(--twl-font-db-helvethaica));
    font-weight: 700;
}

.v3-story-detail :is(.chapter-header, #sampleChapterSection .section-main-title) {
    font-size: var(--Title-Page-font-size-lg, 32px);
    line-height: 1;
}

.v3-story-detail :is(.chapter-detail, .chapter-detail-reader, .chapter-sample-detail) {
    color: var(--Text-Neutral-primary, var(--text-primary));
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree));
    font-size: var(--Body-font-size-md, 14px);
    font-weight: 500;
    line-height: var(--Body-font-line-height-md, 21px);
}

.v3-story-detail :is(.chapter-title, .chapter-title span, .chapter-sample-number, .chapter-sample-text) {
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree));
    font-size: var(--Body-font-size-md, 14px);
    font-weight: 500;
    line-height: var(--Body-font-line-height-md, 21px);
}

.v3-story-detail .chapter-stat {
    color: var(--Text-Neutral-tertiary, var(--text-tertiary));
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree));
    font-size: var(--Body-font-size-xs, 10px);
    font-weight: 500;
    line-height: var(--Body-font-line-height-xs, 15px);
}

.v3-story-detail .chapter-stat span {
    line-height: inherit;
}

.v3-story-detail :is(.story-segment, .ebook-synopsis) {
    color: var(--Text-Neutral-primary, var(--text-primary));
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree));
    font-size: var(--Body-font-size-lg, 16px);
    line-height: var(--Body-font-line-height-lg, 24px);
}

.v3-story-detail :is(.btn, .collapse-story, .dropdown-menu-text) {
    font-family: var(--Action-font-family, var(--twl-font-db-helvethaica));
}

.v3-story-detail :is(a, button, [role="button"]):focus-visible {
    outline: 2px solid var(--Border-Brand-focus, var(--brand-border));
    outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .v3-story-detail-bar .nav-link:hover {
        color: var(--Text-Brand-hover, var(--brand-hover));
    }

    .v3-story-detail .pill-tag:hover {
        background-color: var(--Background-Brand-subtle, var(--brand-subtle));
        color: var(--Text-Brand-default, var(--brand-default));
    }

    .v3-story-detail .v3-story-detail-writer-link:hover {
        color: var(--Text-Brand-default, var(--brand-default));
        text-decoration: underline;
    }
}

@media (max-width: 767px) {
    .v3-story-detail {
        padding-inline: 16px;
        padding-top: 24px;
    }

    .v3-story-detail .story-title,
    .v3-story-detail .ebook-title {
        font-size: var(--story-header-title-font-size-mobile, 28px) !important;
    }

    .v3-story-detail :is(.chapter-header, #sampleChapterSection .section-main-title) {
        font-size: var(--Title-Page-font-size-sm, 24px) !important;
    }

    .v3-story-detail .rectangle-header-left {
        padding: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .v3-story-detail-bar *,
    .v3-story-detail *,
    .v3-story-detail *::before,
    .v3-story-detail *::after {
        animation: none !important;
        scroll-behavior: auto !important;
        transition: none !important;
    }
}

/* Figma detail parity. Final scoped layer must stay after legacy rules. */
body:is(.comic-detail-page, .ebook-detail-page) {
    --detail-content-width: 956px;
}

body.comic-detail-page .second-navebar-bottom .circle-quick-button {
    flex: 0 0 32px;
    height: 32px;
    min-width: 32px;
    padding: 0 !important;
    width: 32px;
}

/* Story Cover */
body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-cover {
    background: var(--Base-bg-raised);
    border: 1px solid var(--Base-border-raised, var(--Border-Neutral-subtle));
    border-radius: var(--Radius-lg, 16px);
    box-shadow: 0 4px 10px var(--Static-Opacity-Black-10, rgba(0, 0, 0, 0.1));
    box-sizing: border-box;
    max-width: 368px;
    padding: 24px;
    width: 368px;
}

body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-cover .story-cover-img {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-inline: auto;
    max-width: 304px;
    position: relative;
    width: 100%;
}

body.comic-detail-page .story-detail-v3-cover :is(.story-cover-img, .story-image) {
    aspect-ratio: 1;
    height: auto;
    width: 100%;
}

body.ebook-detail-page .story-detail-v3-cover :is(.story-cover-img, .story-image) {
    aspect-ratio: 304 / 430;
    height: auto;
    width: 100%;
}

body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-cover .story-image {
    border-radius: var(--Radius-sm, 8px);
    display: block;
    margin: 0;
    min-width: 0;
    object-fit: cover;
    position: relative;
    z-index: auto;
}

body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-cover .badge-finish.badge-lg {
    align-items: center;
    background: var(--Background-Brand-secondary, #e85d45);
    border-radius: 8px 8px 8px 0;
    color: var(--Base-on-color, #fff);
    display: flex;
    font-family: var(--Title-Page-font-family, var(--twl-font-db-helvethaica));
    font-size: var(--Title-Page-font-size-sm, 24px);
    font-weight: 700;
    justify-content: center;
    left: 0;
    line-height: 1;
    padding-inline: 8px;
    top: 0;
    width: 37px;
    z-index: 4;
}

body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-cover .badge-img-icon {
    padding: 0 !important;
    right: 12px;
    top: 12px;
    width: auto !important;
    z-index: 4;
}

body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-cover .badge-icon {
    height: 32px;
    margin: 0 !important;
    width: 32px;
}

body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-cover :is(.btn, input[type="button"]) {
    align-items: center;
    border-radius: var(--Radius-full, 999px);
    box-sizing: border-box;
    display: inline-flex;
    font-family: var(--Action-font-family, var(--twl-font-db-helvethaica));
    font-size: var(--Action-font-size-lg, 20px) !important;
    font-weight: 700;
    justify-content: center;
    line-height: 1;
    height: 44px;
    min-height: 44px;
    padding: 0 24px;
    text-align: center;
}

body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-cover :is(.btn, input[type="button"]) :is(span, div) {
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-align: center;
}

/* Frame 79825: title header */
body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-meta :is(.story-title, .ebook-title) {
    color: var(--Text-Neutral-primary, #070708);
    font-family: var(--Title-Page-font-family, var(--twl-font-db-helvethaica));
    font-size: var(--Title-Page-font-size-xlg, 48px) !important;
    font-weight: 700;
    line-height: 1;
    margin: 0;
    max-width: 524px;
    overflow-wrap: anywhere;
}

body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-meta .sm-story-title :is(h2, h3, .font-24, .font-20, .font-16),
body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-mobile-header :is(.font-24, .font-20, .font-16),
body.ebook-detail-page .story-detail-v3-mobile-header-meta :is(.font-24, .font-20, .font-16) {
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree)) !important;
    font-size: var(--Body-font-size-md, 14px) !important;
    font-weight: 500;
    line-height: var(--Body-font-line-height-md, 21px);
}

body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-meta .sm-story-title h3 a {
    color: var(--Text-Neutral-tertiary, #6d7078) !important;
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree)) !important;
    font-size: var(--Body-font-size-sm, 12px) !important;
    font-weight: 500;
    line-height: var(--Body-font-line-height-sm, 18px);
}

/* Frame 79819: tagline and description */
body:is(.comic-detail-page, .ebook-detail-page) #storyTabContent .story-tab {
    border-bottom: 0;
}

body:is(.comic-detail-page, .ebook-detail-page) #storyTabContent .story-tab .nav-link {
    border: 0 !important;
    border-bottom: 4px solid transparent !important;
    border-radius: 0;
}

body:is(.comic-detail-page, .ebook-detail-page) #storyTabContent .story-tab .nav-link.active {
    border-bottom-color: var(--Border-Brand-default, #ff775f) !important;
}

body:is(.comic-detail-page, .ebook-detail-page) :is(#storyTabContent, #synopsisSection) .story-tab,
body:is(.comic-detail-page, .ebook-detail-page) :is(#storyTabContent, #synopsisSection) .section-main-title {
    color: var(--Text-Neutral-primary, #070708);
    font-family: var(--Title-Page-font-family, var(--twl-font-db-helvethaica));
    font-size: var(--Title-Page-font-size-lg, 32px) !important;
    font-weight: 700;
    line-height: 1;
}

body:is(.comic-detail-page, .ebook-detail-page) :is(#storyTabContent, #synopsisSection) :is(.story-tab-detail, .story-segment, .ebook-desc),
body:is(.comic-detail-page, .ebook-detail-page) :is(#storyTabContent, #synopsisSection) :where(p, div, span, li) {
    color: var(--Text-Neutral-primary, #070708);
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree)) !important;
    font-size: var(--Body-font-size-md, 14px) !important;
    font-weight: 500;
    line-height: var(--Body-font-line-height-md, 21px) !important;
}

/* Frame 1321316031: Dream Chat */
body:is(.comic-detail-page, .ebook-detail-page) .dreamchat-section {
    margin: 0;
    padding-top: 48px;
}

body:is(.comic-detail-page, .ebook-detail-page) .dreamchat-header {
    margin-bottom: 16px;
    min-height: 48px;
}

body:is(.comic-detail-page, .ebook-detail-page) .dreamchat-logo {
    height: 48px;
}

body:is(.comic-detail-page, .ebook-detail-page) .dreamchat-grid {
    gap: 24px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body:is(.comic-detail-page, .ebook-detail-page) .dreamchat-item {
    align-items: center;
    gap: 12px;
    min-height: 106px;
}

body:is(.comic-detail-page, .ebook-detail-page) .dreamchat-avatar {
    height: 92px;
    padding: 6px;
    width: 92px;
}

body:is(.comic-detail-page, .ebook-detail-page) .dreamchat-avatar-badge {
    left: 60px;
    top: 60px;
}

body:is(.comic-detail-page, .ebook-detail-page) .dreamchat-name {
    color: var(--Text-Neutral-primary, #070708) !important;
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree)) !important;
    font-size: var(--Body-font-size-lg, 16px) !important;
    font-weight: 500;
    line-height: var(--Body-font-line-height-lg, 24px);
    margin-bottom: 4px;
}

body:is(.comic-detail-page, .ebook-detail-page) .dreamchat-card {
    gap: 8px;
    height: 78px;
    min-height: 78px;
    padding: 16px;
}

body:is(.comic-detail-page, .ebook-detail-page) .dreamchat-message {
    color: var(--Text-Neutral-primary, #070708) !important;
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree)) !important;
    font-size: var(--Body-font-size-md, 14px) !important;
    font-weight: 500;
    line-height: var(--Body-font-line-height-md, 21px);
}

body:is(.comic-detail-page, .ebook-detail-page) .dreamchat-btn {
    border-radius: var(--Radius-full, 999px);
    font-family: var(--Action-font-family, var(--twl-font-db-helvethaica)) !important;
    font-size: var(--Heading-font-size-md, 24px) !important;
    font-weight: 400;
    height: 37px;
    line-height: 1;
    padding-inline: 20px;
    width: 92px;
}

/* Frame 79817 + Actions CTA: review summary */
body:is(.comic-detail-page, .ebook-detail-page) .section-review > :is(h2, h3) {
    color: var(--Text-Neutral-primary, #070708) !important;
    font-family: var(--Title-Page-font-family, var(--twl-font-db-helvethaica)) !important;
    font-size: var(--Title-Page-font-size-lg, 32px) !important;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 24px !important;
}

body:is(.comic-detail-page, .ebook-detail-page) .section-review .card.card-lg {
    background: var(--Base-bg-raised, #fff);
    border: 1px solid var(--Border-Neutral-default, #cacbce);
    border-radius: var(--Radius-sm, 8px);
    min-height: 178px;
}

body:is(.comic-detail-page, .ebook-detail-page) .section-review .rating-total {
    color: var(--Text-Danger-default) !important;
    font-family: var(--Title-Page-font-family, var(--twl-font-db-helvethaica)) !important;
    font-size: var(--Title-Hero-font-size, 64px) !important;
    font-weight: 700;
    line-height: 1;
}

body:is(.comic-detail-page, .ebook-detail-page) .section-review .rating-list::before {
    background: var(--Border-Neutral-subtle, #e4e5e7);
    height: 114px;
}

@media (min-width: 768px) {
    body.comic-detail-page .section-review .card-body-rating {
        flex: 0 0 32%;
        max-width: none !important;
        padding-right: 0;
    }

    body.comic-detail-page .section-review .card-body-percent {
        flex: 1 1 68%;
        max-width: none !important;
        padding-inline: 26px;
    }

    body.comic-detail-page .section-review :is(.rating-list, .rating-list .nav, .rating-list .nav > li) {
        width: 100%;
    }

    body.comic-detail-page .section-review .rating-list .rating-bar {
        flex: 1 1 auto;
        width: auto;
    }
}

body:is(.comic-detail-page, .ebook-detail-page) .section-review .progress {
    background: var(--Background-Danger-subtle);
    height: 6px;
}

body:is(.comic-detail-page, .ebook-detail-page) .section-review :is(.score-percent, .card-review-item, .card-review span) {
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree)) !important;
}

body:is(.comic-detail-page, .ebook-detail-page) .section-review .score-percent {
    color: var(--Text-Neutral-tertiary, #6d7078);
    font-size: var(--Body-font-size-sm, 12px) !important;
    font-weight: 500;
    line-height: var(--Body-font-line-height-sm, 18px);
}

body:is(.comic-detail-page, .ebook-detail-page) .section-review .card-review-item {
    color: var(--Text-Danger-default) !important;
    font-size: var(--Body-font-size-md, 14px) !important;
    font-weight: 700;
    line-height: var(--Body-font-line-height-md, 21px) !important;
}

body:is(.comic-detail-page, .ebook-detail-page) .section-review .card-review-item + span {
    color: var(--Text-Neutral-secondary, #44464b);
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree)) !important;
    font-size: var(--Body-font-size-sm, 12px) !important;
    font-weight: 500;
    line-height: var(--Body-font-line-height-sm, 18px);
}

body:is(.comic-detail-page, .ebook-detail-page) .review-summary-actions {
    display: flex !important;
    gap: 16px;
    justify-content: flex-end !important;
    margin-top: 24px;
    margin-bottom: 32px;
    text-align: right !important;
}

/* Keep space even when review has no action buttons */
body:is(.comic-detail-page, .ebook-detail-page) #story-detail-review {
    margin-bottom: 32px;
}

body:is(.comic-detail-page, .ebook-detail-page) #story-detail-review:has(.review-summary-actions) {
    margin-bottom: 0;
}

body:is(.comic-detail-page, .ebook-detail-page) .review-summary-actions .btn {
    align-items: center;
    border-radius: var(--Radius-full, 999px);
    display: inline-flex;
    font-family: var(--Action-font-family, var(--twl-font-db-helvethaica));
    font-size: var(--Action-font-size-lg, 20px) !important;
    font-weight: 700;
    justify-content: center;
    line-height: 1;
    margin: 0 !important;
    min-height: 44px;
    padding: 10px 24px !important;
    width: 142px !important;
}

/* Frame 1321316534: Pinto ebook and related section headers/cards */
body:is(.comic-detail-page, .ebook-detail-page) #ebookSection,
body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-writer-stories,
body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-related-stories {
    color: var(--Text-Neutral-primary, #070708);
}

body:is(.comic-detail-page, .ebook-detail-page) :is(#ebookSection, .story-detail-v3-writer-stories, .story-detail-v3-related-stories) .section-main-title,
body:is(.comic-detail-page, .ebook-detail-page) :is(#ebookSection, .story-detail-v3-writer-stories, .story-detail-v3-related-stories) .chapter-header {
    align-items: center;
    color: var(--Text-Neutral-primary, #070708);
    font-family: var(--Title-Page-font-family, var(--twl-font-db-helvethaica)) !important;
    font-size: var(--Title-Page-font-size-lg, 32px) !important;
    font-weight: 700;
    line-height: 1;
    margin: 0;
    min-height: 38px;
}

body:is(.comic-detail-page, .ebook-detail-page) :is(#ebookSection, .story-detail-v3-writer-stories, .story-detail-v3-related-stories) .section-see-all-link a {
    color: var(--Text-Brand-default);
    font-family: var(--Action-font-family, var(--twl-font-db-helvethaica));
    font-size: var(--Action-font-size-lg, 20px);
    font-weight: 700;
    line-height: 1;
}

body.comic-detail-page #ebookSection .container-pinto-ebook .section-main-title > h2 {
    color: inherit;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit;
    line-height: inherit;
}

body.comic-detail-page #ebookSection .container-pinto-ebook .section-main-title > .btn {
    font-family: var(--Action-font-family, var(--twl-font-db-helvethaica));
    font-size: var(--Action-font-size-lg, 20px) !important;
    font-weight: 500;
}

body.comic-detail-page #ebookSection .container-pinto-ebook .text-info {
    color: var(--Text-Neutral-secondary, #44464b) !important;
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree)) !important;
    font-size: var(--Body-font-size-md, 14px) !important;
    font-weight: 500;
    line-height: var(--Body-font-line-height-md, 21px);
    overflow-wrap: anywhere;
    word-break: normal;
}

/* Pinto modal: Bai Jamjuree body scale (font-20 was legacy DB size) */
body:is(.comic-detail-page, .ebook-detail-page, .story-detail-page) :is(#listPintoModal, #infoPintoModal, #addPintoModal, #deletePintoEbookModal, #closePintoEbookModal, #writerPintoEbookErrorModal) .modal-info-message,
body:is(.comic-detail-page, .ebook-detail-page, .story-detail-page) :is(#listPintoModal, #infoPintoModal, #addPintoModal, #deletePintoEbookModal, #closePintoEbookModal, #writerPintoEbookErrorModal) .modal-info-message :is(p, label, .col-form-label, .form-control) {
    color: var(--Text-Neutral-secondary, #44464b);
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree)) !important;
    font-size: var(--Body-font-size-md, 14px) !important;
    font-weight: 500;
    line-height: var(--Body-font-line-height-md, 21px);
    overflow-wrap: anywhere;
    word-break: normal;
}

body:is(.comic-detail-page, .ebook-detail-page, .story-detail-page) #listPintoModal #writer-pinto-ebook-list-modal h3 {
    color: var(--Text-Neutral-primary, #070708) !important;
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree)) !important;
    font-size: var(--Body-font-size-md, 14px) !important;
    font-weight: 700;
    line-height: var(--Body-font-line-height-md, 21px);
}

body:is(.comic-detail-page, .ebook-detail-page, .story-detail-page) #listPintoModal #writer-pinto-ebook-list-modal p {
    color: var(--Text-Neutral-secondary, #44464b) !important;
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree)) !important;
    font-size: var(--Body-font-size-sm, 12px) !important;
    font-weight: 500;
    line-height: var(--Body-font-line-height-sm, 18px);
}

body:is(.comic-detail-page, .ebook-detail-page, .story-detail-page) #listPintoModal #writer-pinto-ebook-list-modal :is(.content-fullprice-text, .content-saleprice-text) {
    color: var(--Text-Danger-default, #c72126) !important;
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree)) !important;
    font-size: var(--Body-font-size-md, 14px) !important;
    font-weight: 700;
    line-height: var(--Body-font-line-height-md, 21px);
}

body:is(.comic-detail-page, .ebook-detail-page, .story-detail-page) #listPintoModal #writer-pinto-ebook-list-modal .content-discount-text {
    color: var(--Text-Neutral-tertiary, #6d7078) !important;
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree)) !important;
    font-size: var(--Body-font-size-sm, 12px) !important;
    font-weight: 500;
}

body:is(.comic-detail-page, .ebook-detail-page) :is(#ebookSection, .story-detail-v3-writer-stories, .story-detail-v3-related-stories) :is(.content-main-text, .swiper-ebook-description > .pinto-ebook-title) {
    color: var(--Text-Neutral-primary, #070708) !important;
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree)) !important;
    font-size: var(--Body-font-size-md, 14px) !important;
    font-weight: 700;
    line-height: var(--Body-font-line-height-md, 21px);
}

body:is(.comic-detail-page, .ebook-detail-page) #ebookSection .swiper-ebook-description > .pinto-ebook-title,
body:is(.comic-detail-page, .ebook-detail-page) #ebookSection .swiper-ebook-description > a.pinto-ebook-title {
    color: var(--Text-Neutral-primary, #070708) !important;
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree)) !important;
    font-size: var(--Body-font-size-md, 14px) !important;
    font-weight: 700;
    line-height: var(--Body-font-line-height-md, 21px);
}

body.ebook-detail-page :is(.story-detail-v3-writer-stories, .story-detail-v3-related-stories) .swiper-ebook-description > :is(.pinto-ebook-author, .ebook-group) {
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree)) !important;
    font-size: var(--Body-font-size-sm, 12px) !important;
    font-weight: 500;
    line-height: var(--Body-font-line-height-sm, 18px);
}

body:is(.comic-detail-page, .ebook-detail-page) :is(#ebookSection, .story-detail-v3-writer-stories, .story-detail-v3-related-stories) :is(.content-sub-text, .content-sub-sub-text, .purchase-chapter-writer) {
    color: var(--Text-Neutral-tertiary, #6d7078) !important;
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree)) !important;
    font-size: var(--Body-font-size-sm, 12px) !important;
    font-weight: 500;
    line-height: var(--Body-font-line-height-sm, 18px);
}

body:is(.comic-detail-page, .ebook-detail-page) #ebookSection .swiper-ebook-image {
    position: relative;
}

body:is(.comic-detail-page, .ebook-detail-page) #ebookSection .swiper-ebook-description > a {
    font-size: var(--Body-font-size-md, 14px) !important;
    font-weight: 700;
    line-height: var(--Body-font-line-height-md, 21px);
}

body:is(.comic-detail-page, .ebook-detail-page) #ebookSection .swiper-ebook-description > :is(span, .pinto-ebook-author) {
    color: var(--Text-Brand-default, #e85d45) !important;
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree)) !important;
    font-size: var(--Body-font-size-sm, 12px) !important;
    font-weight: 500;
    line-height: var(--Body-font-line-height-sm, 18px);
}

body:is(.comic-detail-page, .ebook-detail-page) #ebookSection .swiper-ebook-description > :is(p.three-line-text, .pinto-ebook-desc) {
    color: var(--Text-Neutral-secondary, #44464b) !important;
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree)) !important;
    font-size: var(--Body-font-size-sm, 12px) !important;
    font-weight: 500;
    line-height: var(--Body-font-line-height-sm, 18px);
    overflow-wrap: anywhere;
    word-break: normal;
}

body:is(.comic-detail-page, .ebook-detail-page) #ebookSection .swiper-ebook-description > :is(p:last-child, .pinto-ebook-price-sale) {
    color: var(--Text-Danger-default, #c72126) !important;
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree)) !important;
    font-size: var(--Body-font-size-md, 14px) !important;
    font-weight: 700;
    line-height: var(--Body-font-line-height-md, 21px);
}

body:is(.comic-detail-page, .ebook-detail-page) #ebookSection .swiper-ebook-description .pinto-ebook-price-original {
    color: var(--Text-Neutral-tertiary, #6d7078) !important;
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree)) !important;
    font-size: var(--Body-font-size-sm, 12px) !important;
    font-weight: 500;
}

body:is(.comic-detail-page, .ebook-detail-page) #ebookSection .pinto-ebook-completed-badge,
body:is(.comic-detail-page, .ebook-detail-page) :is(.story-detail-v3-writer-stories, .story-detail-v3-related-stories) .badge-finish:not(.badge-img-icon) {
    align-items: center;
    background: var(--Background-Brand-secondary, #e85d45);
    border-radius: 4px 4px 4px 0;
    color: var(--Base-on-color, #fff);
    display: flex;
    font-family: var(--Action-font-family, var(--twl-font-db-helvethaica));
    font-weight: 700;
    justify-content: center;
    line-height: 1;
    padding-inline: 4px;
}

body:is(.comic-detail-page, .ebook-detail-page) #ebookSection .pinto-ebook-completed-badge,
body:is(.comic-detail-page, .ebook-detail-page) :is(.story-detail-v3-writer-stories, .story-detail-v3-related-stories) .badge-finish.badge-sm:not(.badge-img-icon) {
    font-size: var(--Action-font-size-sm, 14px);
    top: 0;
    width: 20px;
}

body:is(.comic-detail-page, .ebook-detail-page) :is(.story-detail-v3-writer-stories, .story-detail-v3-related-stories) .badge-finish.badge-md:not(.badge-img-icon) {
    font-size: var(--Action-font-size-md, 16px);
    top: 0;
    width: 22px;
}

body:is(.comic-detail-page, .ebook-detail-page) :is(#ebookSection, .story-detail-v3-writer-stories, .story-detail-v3-related-stories) .badge-icon {
    height: 24px !important;
    width: 24px !important;
}

/* Tun mao mao section */
body.comic-detail-page .story-package-paywall {
    background: var(--Background-Brand-subtle, #fff3f0);
    border: 0;
    border-radius: var(--Radius-sm, 8px);
    color: var(--Text-Neutral-primary, #070708);
    grid-template-columns: 96px minmax(0, 1fr) auto 142px;
    min-height: 120px;
    padding: 12px 24px 12px 8px;
}

body.comic-detail-page .story-package-paywall__title,
body.comic-detail-page .story-package-paywall__price-value {
    font-family: var(--Title-Page-font-family, var(--twl-font-db-helvethaica));
    font-size: var(--Title-Page-font-size-lg, 32px);
    font-weight: 700;
    line-height: 1;
}

body.comic-detail-page .story-package-paywall__title {
    color: var(--Text-Neutral-primary, #070708);
}

body.comic-detail-page .story-package-paywall__price-value {
    color: var(--Text-Danger-default);
}

body.comic-detail-page .story-package-paywall :is(.story-package-paywall__description, .story-package-paywall__saving) {
    color: var(--Text-Neutral-secondary);
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree));
    font-size: var(--Body-font-size-sm, 12px);
    font-weight: 500;
    line-height: var(--Body-font-line-height-sm, 18px);
}

body.comic-detail-page .story-package-paywall__button {
    font-family: var(--Action-font-family, var(--twl-font-db-helvethaica));
    font-size: var(--Action-font-size-lg, 20px);
    font-weight: 700;
    min-height: 44px;
    width: 142px;
}

/* Package purchase modal — V3 parity, scoped to Comic Detail. */
body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog .modal-dialog {
    align-items: center;
    display: flex;
    margin: 24px auto;
    max-width: calc(100vw - 32px);
    min-height: calc(100% - 48px);
    width: min(450px, calc(100vw - 32px));
}

body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog.fade .modal-dialog {
    transform: scale(0.97) translateY(8px);
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog.show .modal-dialog {
    transform: scale(1) translateY(0);
}

body.comic-detail-page:has(#confirmPurchaseChapterModal.comic-package-paywall-dialog.show) > .modal-backdrop.show {
    backdrop-filter: blur(4px);
    opacity: 0.7;
}

body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog .story-package-paywall-dialog__panel {
    background: var(--Base-bg-raised, #fff);
    border: 1px solid var(--Base-border-raised, #e4e5e7);
    border-radius: var(--Radius-xl, 16px);
    box-shadow: var(--Elevation-md, 0 8px 32px rgba(7, 7, 8, 0.16));
    color: var(--Text-Neutral-primary, #070708);
    display: flex;
    flex-direction: column;
    max-height: min(760px, calc(100dvh - 48px));
    min-width: 0;
    overflow: hidden;
    padding: 24px;
    position: relative;
}

body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog .story-package-paywall-dialog__header {
    display: block;
    flex: 0 0 auto;
    min-height: 24px;
}

body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog .story-package-paywall-dialog__title {
    color: var(--Text-Neutral-primary, #070708);
    font-family: var(--Title-Page-font-family, var(--twl-font-db-helvethaica));
    font-size: var(--Title-Page-font-size-sm, 24px);
    font-weight: 700;
    line-height: 1;
    margin: 0;
    text-align: center;
}

body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog .story-package-paywall-dialog__close {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--Radius-full, 999px);
    color: var(--Icon-Neutral-primary, #070708);
    cursor: pointer;
    display: inline-flex;
    height: 32px;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: 20px;
    top: 20px;
    width: 32px;
}

body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog .story-package-paywall-dialog__close:hover {
    background: var(--Background-Neutral-subtle, #f4f4f5);
}

body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog .story-package-paywall-dialog__close:focus-visible {
    outline: 2px solid var(--Border-Brand-default, #ff775f);
    outline-offset: 2px;
}

body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog :is(.story-package-paywall-dialog__content, .story-package-paywall-dialog__purchase-result) {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0;
}

body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog [hidden] {
    display: none !important;
}

body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog .story-package-paywall-dialog__summary {
    min-width: 0;
}

body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog .story-package-paywall-dialog__story {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    min-width: 0;
}

body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog .story-package-paywall-dialog__cover {
    border-radius: var(--Radius-sm, 8px);
    flex: 0 0 100px;
    height: 100px;
    object-fit: cover;
    width: 100px;
}

body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog .story-package-paywall-dialog__story-text {
    flex: 1 1 auto;
    min-width: 0;
}

body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog .story-package-paywall-dialog__story-title {
    color: var(--Text-Neutral-primary, #070708);
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree));
    font-size: var(--Body-font-size-md, 14px);
    font-weight: 500;
    line-height: var(--Body-font-line-height-md, 21px);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog .story-package-paywall-dialog__writer {
    color: var(--Text-Brand-default, #e85d45);
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree));
    font-size: var(--Body-font-size-sm, 12px);
    font-weight: 500;
    line-height: var(--Body-font-line-height-sm, 18px);
    margin: 2px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog .story-package-paywall-dialog__wallet {
    align-items: flex-start;
    display: flex;
}

body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog .story-package-paywall-dialog__balance {
    align-items: center;
    background: var(--Base-bg-base, #fff);
    border: 1px solid var(--Border-Neutral-default, #cacbce);
    border-radius: var(--Radius-full, 999px);
    color: var(--Text-Neutral-primary, #070708);
    display: inline-flex;
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree));
    font-size: var(--Body-font-size-sm, 12px);
    font-weight: 700;
    gap: 4px;
    justify-content: center;
    min-height: 28px;
    padding: 4px 8px;
    text-decoration: none;
    white-space: nowrap;
}

body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog .story-package-paywall-dialog__balance:hover {
    background: var(--Background-Brand-subtle, #fff3f0);
    border-color: var(--Border-Brand-default, #ff775f);
    color: var(--Text-Brand-hover, #c94f3c);
}

body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog :is(.story-package-paywall-dialog__balance-coin, .story-package-paywall-dialog__balance-plus) {
    flex: 0 0 auto;
}

body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog .story-package-paywall-dialog__balance-plus {
    color: var(--Icon-Brand-default, #e85d45);
}

body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog .story-package-paywall-dialog__chapters {
    display: grid;
    gap: 16px;
}

body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog .story-package-paywall-dialog__section-title {
    color: var(--Text-Neutral-primary, #070708);
    font-family: var(--Heading-font-family, var(--twl-font-db-helvethaica));
    font-size: var(--Heading-font-size-sm, 20px);
    font-weight: 500;
    line-height: 1;
    margin: 0;
}

body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog .story-package-paywall-dialog__breakdown {
    display: grid;
    gap: 8px;
    margin: 0;
}

body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog .story-package-paywall-dialog__breakdown > div {
    align-items: center;
    color: var(--Text-Neutral-primary, #070708);
    display: grid;
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree));
    font-size: var(--Body-font-size-md, 14px);
    font-weight: 500;
    grid-template-columns: minmax(0, 1fr) max-content;
    line-height: var(--Body-font-line-height-md, 21px);
}

body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog .story-package-paywall-dialog__breakdown :is(dt, dd) {
    margin: 0;
}

body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog .story-package-paywall-dialog__breakdown dd,
body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog .story-package-paywall-dialog__total-price {
    align-items: center;
    display: inline-flex;
    gap: 4px;
    justify-content: flex-end;
}

body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog .story-package-paywall-dialog__discount,
body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog .story-package-paywall-dialog__discount :is(dt, dd) {
    color: var(--Text-Danger-default, #c72126);
}

body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog .story-package-paywall-dialog__discount dt {
    align-items: center;
    display: flex;
    gap: 8px;
    min-width: 0;
}

body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog .story-package-paywall-dialog__discount-percent {
    align-items: center;
    background: var(--Background-Brand-default, #ff775f);
    border-radius: var(--Radius-xs, 4px);
    color: var(--Base-on-color, #fff);
    display: inline-flex;
    flex: 0 0 auto;
    font-family: var(--Action-font-family, var(--twl-font-db-helvethaica));
    font-size: var(--Action-font-size-sm, 14px);
    font-weight: 700;
    justify-content: center;
    line-height: 1;
    min-height: 20px;
    padding-inline: 8px;
    white-space: nowrap;
}

body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog .story-package-paywall-dialog__footer {
    display: grid;
    gap: 16px;
}

body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog .story-package-paywall-dialog__total {
    align-items: center;
    background: var(--Background-Brand-subtle, #fff3f0);
    border: 1px solid var(--Border-Brand-subtle, #ffc8bd);
    border-radius: var(--Radius-sm, 8px);
    color: var(--Text-Neutral-primary, #070708);
    display: grid;
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree));
    font-size: var(--Body-font-size-md, 14px);
    font-weight: 700;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) max-content;
    line-height: var(--Body-font-line-height-md, 21px);
    padding: 12px 16px;
}

body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog .story-package-paywall-dialog__total-label {
    min-width: 0;
    white-space: nowrap;
}

body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog #purchaseform {
    margin: 0;
    width: 100%;
}

body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog .story-package-paywall-dialog__purchase-button {
    align-items: center;
    background: var(--Background-Brand-default, #ff775f);
    border: 0;
    border-radius: var(--Radius-full, 999px);
    color: var(--Base-on-color, #fff);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--Action-font-family, var(--twl-font-db-helvethaica));
    font-size: var(--Action-font-size-lg, 20px);
    font-weight: 700;
    gap: 6px;
    justify-content: center;
    line-height: 1;
    min-height: 44px;
    padding-inline: 24px;
    width: 100%;
}

body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog .story-package-paywall-dialog__purchase-button:hover:not(:disabled) {
    background: var(--Background-Brand-hover, #e85d45);
}

body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog .story-package-paywall-dialog__purchase-button:disabled {
    background: var(--Background-Brand-disabled, #ffc8bd);
    color: var(--Text-Static-white, #fff);
    cursor: not-allowed;
}

body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog .story-package-paywall-dialog__purchase-button:focus-visible {
    outline: 2px solid var(--Border-Brand-default, #ff775f);
    outline-offset: 2px;
}

body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog .story-package-paywall-dialog__error {
    color: var(--Text-Danger-default, #c72126);
    display: block;
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree));
    font-size: var(--Body-font-size-sm, 12px);
    line-height: var(--Body-font-line-height-sm, 18px);
    text-align: center;
}

body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog .story-package-paywall-dialog__purchase-result {
    align-items: center;
    justify-content: center;
    padding-block: 32px;
    text-align: center;
}

body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog .story-package-paywall-dialog__purchase-result-icon {
    color: var(--Text-Success-default, #12805c);
}

body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog .story-package-paywall-dialog__purchase-result-title {
    color: var(--Text-Neutral-primary, #070708);
    font-family: var(--Title-Page-font-family, var(--twl-font-db-helvethaica));
    font-size: var(--Title-Page-font-size-sm, 24px);
    font-weight: 700;
    line-height: 1;
}

body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog .story-package-paywall-dialog__purchase-result-message {
    color: var(--Text-Neutral-secondary, #44464b);
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree));
    font-size: var(--Body-font-size-md, 14px);
    font-weight: 500;
    line-height: var(--Body-font-line-height-md, 21px);
}

body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog .story-package-paywall-dialog__spinner {
    animation: comic-package-paywall-spin 0.8s linear infinite;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    height: 18px;
    width: 18px;
}

@keyframes comic-package-paywall-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 767px) {
    body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog .modal-dialog {
        align-items: flex-end;
        height: 100%;
        margin: 0;
        max-width: none;
        min-height: 100%;
        width: 100vw;
    }

    body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog.fade .modal-dialog {
        transform: translateY(100%);
    }

    body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog.show .modal-dialog {
        transform: translateY(0);
    }

    body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog .story-package-paywall-dialog__panel {
        border-bottom: 0;
        border-left: 0;
        border-radius: 20px 20px 0 0;
        border-right: 0;
        max-height: 85dvh;
        padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
        width: 100%;
    }

    body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog .story-package-paywall-dialog__close {
        right: 12px;
        top: 12px;
    }

    body.comic-detail-page #confirmPurchaseChapterModal.comic-package-paywall-dialog .story-package-paywall-dialog__story {
        align-items: center;
    }
}

/* Novel Chapter List */
body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-chapters {
    color: var(--Text-Neutral-primary, #070708);
    max-width: calc(var(--detail-content-width) + 48px);
}

body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-chapters :is(.chapter-header, .section-main-title) {
    color: var(--Text-Neutral-primary, #070708);
    font-family: var(--Title-Page-font-family, var(--twl-font-db-helvethaica)) !important;
    font-size: var(--Title-Page-font-size-lg, 32px) !important;
    font-weight: 700;
    line-height: 1;
}

body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-chapters :is(.chapter-detail, .chapter-detail-reader, .chapter-sample-detail) {
    border-bottom: 1px solid var(--Border-Neutral-subtle, #e4e5e7);
    color: var(--Text-Neutral-primary, #070708);
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree)) !important;
    font-size: var(--Body-font-size-md, 14px) !important;
    font-weight: 500;
    line-height: var(--Body-font-line-height-md, 21px);
    min-height: 72px;
}

body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-chapters :is(.chapter-stat, .chapterlist-date-reader, .chapterlist-price) {
    color: var(--Text-Neutral-tertiary, #6d7078);
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree)) !important;
    font-size: var(--Body-font-size-xs, 10px) !important;
    font-weight: 500;
    line-height: var(--Body-font-line-height-xs, 15px);
}

body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-chapters :is(.chapter-stat, .story-chapter-schedule, .story-chapter-schedule-badge) svg {
    color: var(--Icon-Neutral-tertiary, #6d7078);
    flex: 0 0 12px;
    height: 12px !important;
    margin-right: 2px;
    width: 12px !important;
}

body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-chapters .chapterlist-stat,
body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-chapters .chapterlist-stat > span {
    align-items: center;
}

body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-chapters .chapterlist-stat > span {
    display: inline-flex !important;
    line-height: var(--Body-font-line-height-xs, 15px);
}

/* Writer Bio / Story Details */
body:is(.comic-detail-page, .ebook-detail-page) .writer-info-box {
    background: var(--Base-bg-base, #fff);
    border: 1px solid var(--Border-Neutral-subtle, #e4e5e7);
    border-radius: var(--Radius-sm, 8px);
    color: var(--Text-Neutral-primary, #070708);
    padding: 24px;
}

body:is(.comic-detail-page, .ebook-detail-page) .writer-info-name {
    color: var(--Text-Neutral-primary, #070708);
    font-family: var(--Title-Page-font-family, var(--twl-font-db-helvethaica));
    font-size: var(--Title-Page-font-size-md, 28px);
    font-weight: 700;
    line-height: 1;
}

body:is(.comic-detail-page, .ebook-detail-page) .writer-info-social-cell {
    align-items: center;
    display: flex;
    gap: 8px;
}

body:is(.comic-detail-page, .ebook-detail-page) .writer-info-social-cell img {
    height: 24px !important;
    width: 24px !important;
}

body:is(.comic-detail-page, .ebook-detail-page) .writer-support-message,
body:is(.comic-detail-page, .ebook-detail-page) .writer-support-message :where(p, div, span, li) {
    color: var(--Text-Neutral-primary, #070708) !important;
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree)) !important;
    font-size: var(--Body-font-size-lg, 16px) !important;
    font-weight: 500;
    line-height: var(--Body-font-line-height-lg, 24px) !important;
}

body:is(.comic-detail-page, .ebook-detail-page) .writer-info-collapse-text {
    color: var(--Text-Brand-default);
    font-family: var(--Action-font-family, var(--twl-font-db-helvethaica));
    font-size: var(--Action-font-size-lg, 20px) !important;
    font-weight: 500;
    line-height: 1;
}

/* Figma 85:9027 Novel Comment */
body.ebook-detail-page .story-detail-v3-comments {
    display: grid;
    gap: 48px;
    max-width: calc(var(--detail-content-width) + 48px);
}

body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-comments :is(.chapter-header, .comments > h2, .pin-comment > h2) {
    color: var(--Text-Neutral-primary, #070708);
    font-family: var(--Title-Page-font-family, var(--twl-font-db-helvethaica)) !important;
    font-size: var(--Title-Page-font-size-lg, 32px) !important;
    font-weight: 700;
    line-height: 1;
}

body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-comments .comment-row {
    border-bottom: 1px solid var(--Border-Neutral-subtle, #e4e5e7);
    gap: 12px;
    min-height: 105px;
    padding-block: 16px;
}

body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-comments .commenter-img {
    flex: 0 0 32px;
    margin-right: 0;
    width: 32px;
}

body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-comments .comment-message-xs {
    flex: 1 1 0;
    max-width: none;
    min-width: 0;
    width: auto;
}

body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-comments .comment-date-reply {
    align-items: flex-end;
    display: flex;
    flex: 0 0 93px;
    flex-direction: column;
    gap: 31px;
    width: 93px;
}

body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-comments .comment-date-row {
    align-items: flex-start;
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-comments .comment-commenter {
    color: var(--Text-Neutral-primary, #070708);
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree));
    font-size: var(--Body-font-size-md, 14px);
    font-weight: 700;
    line-height: var(--Body-font-line-height-md, 21px);
}

body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-comments .comment-number {
    color: var(--Text-Neutral-tertiary, #6d7078);
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree));
    font-size: var(--Body-font-size-md, 14px);
    font-weight: 500;
    line-height: var(--Body-font-line-height-md, 21px);
}

body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-comments .comment-message {
    color: var(--Text-Neutral-primary, #070708);
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree)) !important;
    font-size: var(--Body-font-size-md, 14px) !important;
    font-weight: 500;
    line-height: var(--Body-font-line-height-md, 21px) !important;
}

body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-comments :is(.comment-chapter, .comment-date) {
    color: var(--Text-Neutral-disabled, #9a9da2);
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree));
    font-size: var(--Body-font-size-sm, 12px);
    font-weight: 500;
    line-height: var(--Body-font-line-height-sm, 18px);
}

body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-comments .comment-reply-button {
    align-self: stretch;
    align-items: center;
    color: var(--Text-Brand-default, #e85d45);
    display: inline-flex;
    font-family: var(--Action-font-family, var(--twl-font-db-helvethaica));
    font-size: var(--Action-font-size-lg, 20px);
    font-weight: 500;
    gap: 2px;
    justify-content: flex-start;
    line-height: 1;
    white-space: nowrap;
}

body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-comments .comment-reply-button__icon {
    display: block;
    flex: 0 0 20px;
    height: 20px;
    width: 20px;
}

body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-comments .editor {
    margin-top: 4px;
}

body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-comments .ql-toolbar.ql-snow {
    align-items: center;
    border: 1px solid var(--Border-Neutral-default, #cacbce);
    border-radius: var(--Radius-sm, 8px) var(--Radius-sm, 8px) 0 0;
    display: flex;
    gap: 16px;
    height: 36px;
    padding: 8px 16px !important;
}

body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-comments .ql-toolbar.ql-snow .ql-formats {
    align-items: center;
    display: inline-flex;
    gap: 16px;
    margin-right: 0;
}

body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-comments .ql-toolbar.ql-snow button {
    align-items: center;
    display: inline-flex;
    height: 16px;
    justify-content: center;
    padding: 0 !important;
    width: 16px;
}

body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-comments .ql-toolbar.ql-snow button svg {
    height: 16px;
    width: 16px;
}

body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-comments #commentEditor {
    border: 1px solid var(--Border-Neutral-default, #cacbce);
    border-radius: 0 0 var(--Radius-sm, 8px) var(--Radius-sm, 8px);
    border-top: 0;
    border-color: var(--Border-Neutral-default, #cacbce);
    color: var(--Text-Neutral-primary, #070708);
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree));
    font-size: var(--Body-font-size-md, 14px);
    font-weight: 500;
    line-height: var(--Body-font-line-height-md, 21px);
}

body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-comments #commentEditor .ql-editor {
    min-height: 124px;
    padding: 16px;
}

body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-comments #commentEditor .ql-editor.ql-blank::before {
    color: var(--Text-Neutral-placeholder, #6d7078);
    font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree));
    font-size: var(--Body-font-size-md, 14px);
    font-style: normal;
    left: 16px;
    line-height: var(--Body-font-line-height-md, 21px);
    right: 16px;
}

@media (max-width: 767px) {
    body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-cover {
        display: none;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-mobile-header :is(.story-title, .ebook-title) {
        font-size: var(--story-header-title-font-size-mobile, 28px) !important;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .dreamchat-section {
        margin-block: 12px 24px;
        padding: 0 16px;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .dreamchat-logo {
        height: 32px;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .dreamchat-grid {
        gap: 12px;
        grid-template-columns: 1fr;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .dreamchat-item {
        min-height: 81px;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .dreamchat-avatar {
        height: 76px;
        width: 76px;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .dreamchat-avatar-image {
        height: 64px;
        width: 64px;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .dreamchat-avatar-badge {
        height: 22px;
        left: 54px;
        top: 54px;
        width: 22px;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .dreamchat-avatar-badge-icon {
        height: 16px;
        width: 16px;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .dreamchat-name {
        font-size: var(--Body-font-size-sm, 12px) !important;
        line-height: var(--Body-font-line-height-sm, 18px);
    }

    body:is(.comic-detail-page, .ebook-detail-page) .dreamchat-card {
        height: 58px;
        min-height: 58px;
        padding: 8px 16px;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .dreamchat-message {
        text-align: left;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .dreamchat-btn {
        font-size: var(--Action-font-size-lg, 20px) !important;
        height: 28px;
        padding-inline: 16px;
        width: 83px;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .section-review > :is(h2, h3),
    body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-chapters :is(.chapter-header, .section-main-title),
    body:is(.comic-detail-page, .ebook-detail-page) :is(#ebookSection, .story-detail-v3-writer-stories, .story-detail-v3-related-stories) :is(.section-main-title, .chapter-header) {
        font-size: var(--Title-Page-font-size-sm, 24px) !important;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-comments .comments > h2 {
        margin: 0 0 16px !important;
        position: static !important;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .section-review .rating-total {
        font-size: var(--Title-Page-font-size-lg, 32px) !important;
    }

    /* Header mobile: heart 16px, gap 2px; score DB Helvethaica 24px / 400 / lh 1 */
    body:is(.comic-detail-page, .ebook-detail-page) :is(.story-detail-v3-mobile-header, .story-detail-v3-mobile-header-meta) .review-rating-value {
        font-family: var(--Title-Page-font-family, var(--twl-font-db-helvethaica)) !important;
        font-size: var(--Title-Page-font-size-sm, 24px) !important;
        font-weight: 400 !important;
        line-height: 1 !important;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .twl-header-rating,
    body:is(.comic-detail-page, .ebook-detail-page) :is(.story-detail-v3-mobile-header, .story-detail-v3-mobile-header-meta) .twl-rating-hearts--fractional {
        gap: 2px;
    }

    body:is(.comic-detail-page, .ebook-detail-page) :is(.story-detail-v3-mobile-header, .story-detail-v3-mobile-header-meta) .twl-rating-heart {
        block-size: 16px;
        flex: 0 0 16px;
        inline-size: 16px;
    }

    body:is(.comic-detail-page, .ebook-detail-page) :is(.story-detail-v3-mobile-header, .story-detail-v3-mobile-header-meta) :is(.twl-rating-heart-base, .twl-rating-heart-fill) {
        block-size: 16px;
        inline-size: 16px;
        stroke-width: 2;
    }

    /* Review summary mobile heart gaps */
    body:is(.comic-detail-page, .ebook-detail-page) .section-review .card-body-rating .twl-rating-hearts,
    body:is(.comic-detail-page, .ebook-detail-page) .section-review .rating-list .twl-rating-hearts {
        gap: 4px;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .review-summary-actions {
        gap: 8px;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .review-summary-actions .btn {
        min-height: 28px;
        padding: 2px 16px !important;
        width: auto !important;
    }

    body.comic-detail-page .story-package-paywall {
        grid-template-columns: 84px minmax(0, 1fr);
    }

    body:is(.comic-detail-page, .ebook-detail-page) .writer-info-box {
        padding: 16px;
    }
}

/* Comic/Ebook reuse Story v3 shell. Ebook keeps original portrait cover contract. */
body:is(.comic-detail-page, .ebook-detail-page) .v3-story-detail {
    padding-top: 0;
}

body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-main {
    position: relative;
    z-index: 1;
}

/* Review modals appendTo(body) in _ReviewRating. Keep shell under site chrome only. */
body.comic-detail-page.modal-open :is(.story-detail-v3-shell, .story-detail-v3-main) {
    z-index: auto;
}

@media (min-width: 1024px) {
    body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-lead {
        display: grid !important;
        gap: 32px;
        grid-template-columns: 368px minmax(0, 556px);
        justify-content: center !important;
        margin-inline: auto;
        max-width: var(--detail-content-width);
    }
}

body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-meta {
    max-width: none;
    min-width: 0;
    padding: 0 !important;
    width: 100% !important;
}

body.comic-detail-page .story-detail-v3-meta .story-stat-area {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

body.ebook-detail-page .story-detail-v3-meta .story-stat-area {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (min-width: 768px) {
    body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-meta .story-stat-area {
        column-gap: 24px;
        margin-top: 16px !important;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-meta .story-stat-border:not(:last-child)::after {
        right: -12px;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-meta .story-stat-icon :is(svg, i) {
        height: 20px;
        stroke-width: 1.667;
        width: 20px;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-meta .story-stat-icon {
        color: var(--Text-Brand-default, #e85d45) !important;
        margin-bottom: 4px;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-meta .story-stat {
        color: var(--Text-Neutral-primary, #070708) !important;
        font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree));
        font-size: var(--Body-font-size-xlg, 20px) !important;
        font-weight: 500 !important;
        line-height: var(--Body-font-line-height-xlg, 30px) !important;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-meta .story-stat-text {
        color: var(--Text-Neutral-tertiary, #6d7078) !important;
        font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree));
        font-size: var(--Body-font-size-sm, 12px) !important;
        font-weight: 500;
        line-height: var(--Body-font-line-height-sm, 18px);
    }
}

body.ebook-detail-page .story-detail-v3-cover-column {
    max-width: 368px;
    padding: 0;
    width: 368px;
}

body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-main > #story-detail-review {
    max-width: calc(var(--story-detail-v3-content-width) + 48px);
}

body.comic-detail-page .story-detail-v3-main > #story-detail-review {
    padding-inline: 12px;
}

@media (min-width: 768px) and (max-width: 1023px) {
    body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-cover,
    body.ebook-detail-page .story-detail-v3-cover-column {
        max-width: 320px;
        width: 100%;
    }
}

body.ebook-detail-page .story-detail-v3-cover .story-cover-img,
body.ebook-detail-page .story-detail-v3-cover .story-image {
    aspect-ratio: 304 / 430;
    height: auto;
    max-width: 304px;
    width: 100%;
}

body.ebook-detail-page .story-detail-v3-cover .story-image {
    min-width: 0;
    object-fit: cover;
    position: relative;
    z-index: auto;
}

body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-section :is(.section-main-title, .chapter-header) {
    color: var(--Text-Neutral-primary);
    font-family: var(--Title-Page-font-family, var(--twl-font-heading));
    font-size: var(--Title-Page-font-size-lg, 32px);
    font-weight: 700;
    line-height: 1;
}

body.ebook-detail-page .story-detail-v3-section .section-main-title > h2 {
    color: inherit;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit;
    line-height: inherit;
}

body.ebook-detail-page :is(.ebook-desc, .no-sample-chapter, .chapter-sample-detail, #tbReview) {
    color: var(--Text-Neutral-secondary);
    font-family: var(--Body-font-family, var(--twl-font-body));
}

body.ebook-detail-page #userReview:empty {
    display: none;
}

body.ebook-detail-page :is(.chapter-sample-number, .chapter-sample-text) {
    color: var(--Text-Neutral-primary);
    font-family: var(--Body-font-family, var(--twl-font-body));
    font-size: var(--Body-font-size-md, 14px);
    font-weight: 500;
    line-height: var(--Body-font-line-height-md, 21px);
}

.detail-mobile-hero-nav {
    display: none;
}

@media (max-width: 767px) {
    body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-background::before {
        background: linear-gradient(
            180deg,
            var(--story-mobile-hero-bg-80) 0%,
            var(--story-mobile-hero-bg-0) 100%
        );
        bottom: auto;
        height: 112px;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-background::after {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: linear-gradient(
            180deg,
            var(--story-mobile-hero-bg-0) 0%,
            var(--story-mobile-hero-bg) 22.917%,
            var(--story-mobile-hero-bg) 100%
        );
        bottom: auto;
        height: 407px;
        top: 315px;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-lead {
        background: linear-gradient(
            180deg,
            transparent 0,
            transparent 315px,
            var(--story-mobile-hero-bg) 408px,
            var(--story-mobile-hero-bg) 100%
        );
        display: flex !important;
        padding: 347px 16px 0;
    }

    body.ebook-detail-page .story-detail-v3-lead {
        margin-top: 0 !important;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .detail-mobile-hero-nav {
        align-items: center;
        color: var(--Text-Static-white, #fff);
        display: flex;
        inset-inline: 17px 15px;
        justify-content: space-between;
        pointer-events: auto;
        position: absolute;
        top: calc(env(safe-area-inset-top, 0px) + 56px);
        z-index: 2;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .detail-mobile-hero-actions {
        align-items: center;
        display: flex;
        gap: 16px;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .detail-mobile-hero-action {
        align-items: center;
        background: transparent;
        border: 0;
        color: inherit;
        cursor: pointer;
        display: inline-flex;
        height: 24px;
        justify-content: center;
        padding: 0;
        text-decoration: none;
        width: 24px;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .detail-mobile-hero-action.dropdown-toggle::after {
        display: none;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .detail-mobile-hero-action[data-active="true"] {
        color: var(--story-mobile-hero-brand-default);
    }

    body:is(.comic-detail-page, .ebook-detail-page) .detail-mobile-hero-action[data-active="true"] svg {
        fill: currentColor;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .detail-mobile-hero-action.btnUnBookmarkStory {
        background: transparent !important;
        border-color: transparent !important;
        color: var(--story-mobile-hero-brand-default) !important;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .detail-mobile-hero-action.btnUnBookmarkStory :is(i, svg) {
        color: inherit !important;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .detail-mobile-hero-action:disabled {
        cursor: default;
        opacity: 0.72;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .detail-mobile-hero-action:focus-visible {
        outline: 3px solid var(--Border-Brand-default);
        outline-offset: 4px;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .detail-mobile-hero-card {
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
        background: var(--Static-Opacity-White-5, rgba(255, 255, 255, 0.05));
        border: 1px solid var(--Static-Opacity-White-10, rgba(255, 255, 255, 0.1));
        border-radius: var(--Radius-lg, 16px);
        box-sizing: border-box;
        color: var(--story-mobile-hero-text-primary);
        order: 1;
        padding: 12px 16px 16px;
        width: 100%;
    }

    body.comic-detail-page .story-detail-v3-mobile-header.detail-mobile-hero-card {
        background: var(--Static-Opacity-White-5, rgba(255, 255, 255, 0.05));
        padding: 12px 16px 16px;
    }

    body.ebook-detail-page .detail-mobile-hero-card > :is(.story-detail-v3-mobile-header, .story-detail-v3-mobile-header-meta) {
        background: transparent;
        border: 0;
        border-radius: 0;
        color: inherit;
        margin: 0 !important;
        padding: 0;
    }

    body.ebook-detail-page .detail-mobile-hero-card > .story-detail-v3-mobile-header-meta {
        color: var(--story-mobile-hero-text-secondary);
        margin-top: 8px !important;
    }

    body.ebook-detail-page .detail-mobile-hero-card .ebook-title {
        color: var(--story-mobile-hero-text-primary) !important;
    }

    body.comic-detail-page .story-detail-v3-mobile-header.detail-mobile-hero-card .v3-story-detail-writer-link,
    body.ebook-detail-page .detail-mobile-hero-card .v3-story-detail-writer-link {
        color: var(--story-mobile-hero-brand-text) !important;
        flex: 0 1 auto;
        font-size: inherit !important;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .detail-mobile-hero-card :is(.font-24.f-normal-65, .delete-account) {
        align-items: center;
        color: var(--story-mobile-hero-text-primary) !important;
        display: flex;
        flex-wrap: nowrap;
        font-size: var(--Body-font-size-md, 14px) !important;
        gap: 4px;
        line-height: var(--Body-font-line-height-md, 21px) !important;
        overflow: hidden;
        white-space: nowrap;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .detail-mobile-hero-card :is(.detail-writer-label, .detail-illustrator) {
        flex: 0 0 auto;
    }

    body.comic-detail-page .story-detail-v3-mobile-header.detail-mobile-hero-card :is(.med-24-grey, .text-gray) {
        color: var(--story-mobile-hero-text-secondary) !important;
    }

    body.comic-detail-page .story-detail-v3-mobile-header.detail-mobile-hero-card .bd-24-black {
        color: var(--story-mobile-hero-text-primary) !important;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .detail-mobile-hero-card .detail-illustrator {
        border-inline-start-color: var(--Static-Opacity-White-10, rgba(255, 255, 255, 0.1));
        display: inline-flex;
        min-width: 0;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .detail-mobile-hero-categories {
        display: inline-flex;
        flex-wrap: wrap;
        gap: 8px;
        max-width: 100%;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .detail-mobile-hero-category {
        align-items: center;
        border: 1px solid var(--story-mobile-hero-category-border);
        border-radius: var(--Radius-lg, 16px);
        box-sizing: border-box;
        color: var(--story-mobile-hero-text-primary) !important;
        display: inline-flex;
        font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree)) !important;
        font-size: var(--Body-font-size-sm, 12px) !important;
        font-weight: 500;
        gap: 4px;
        height: 28px;
        line-height: var(--Body-font-line-height-sm, 18px);
        max-width: 100%;
        min-height: 28px;
        padding: 4px 12px;
        text-decoration: none;
        white-space: nowrap;
    }

    body.ebook-detail-page .detail-mobile-hero-card .review-rating-value {
        color: var(--story-mobile-hero-danger-text) !important;
    }

    body.ebook-detail-page .story-detail-v3-cover-column {
        display: none;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-meta {
        order: 2;
    }

    body.ebook-detail-page .story-detail-v3-meta {
        margin-top: 0 !important;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-meta .story-stat-area {
        background: transparent;
        border: 0;
        border-radius: 0;
        column-gap: 32px;
        grid-auto-flow: column;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(3, 20px);
        min-height: 78px;
        padding: 0 16px;
        position: relative;
        row-gap: 9px;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-meta .story-stat-border {
        align-items: center;
        column-gap: 6px;
        min-height: 20px;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-meta .story-stat-border > :is(.story-stat-icon, .story-stat, .story-stat-text) {
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-meta .story-stat-icon {
        align-items: center;
        color: var(--story-mobile-hero-brand-text) !important;
        display: flex;
        height: 20px;
        line-height: 0;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-meta .story-stat-icon svg {
        height: 20px;
        stroke-width: 1.667;
        width: 20px;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-meta :is(.story-stat, .story-stat-text) {
        color: var(--story-mobile-hero-text-primary) !important;
        font-family: var(--Body-font-family, var(--twl-font-bai-jamjuree)) !important;
        font-size: var(--Body-font-size-sm, 12px) !important;
        font-weight: 500 !important;
        line-height: var(--Body-font-line-height-sm, 18px) !important;
        text-align: left !important;
        white-space: nowrap;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-meta .story-stat-text {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-meta .story-stat-area::before {
        background: var(--Static-Opacity-White-10, rgba(255, 255, 255, 0.1));
        content: "";
        inset-block: 0;
        left: 50%;
        position: absolute;
        width: 1px;
    }

    body.ebook-detail-page .story-detail-v3-meta .story-stat-area {
        grid-template-rows: repeat(2, 20px);
        min-height: 49px;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-meta .story-tags,
    body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-meta .story-warning-words.warning-word {
        background: var(--Base-bg-base, #fff);
        border: 0;
        border-radius: 0;
        color: var(--Text-Neutral-primary);
        margin: 0 -16px !important;
        margin-top: 0 !important;
        padding: 12px 16px !important;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-meta .story-warning-words.warning-word {
        border-bottom: 1px solid var(--Border-Neutral-subtle);
        padding-bottom: 12px !important;
    }

    body:is(.comic-detail-page, .ebook-detail-page) :is(.story-detail-v3-main > #story-detail-review, .story-detail-v3-section),
    body:is(.comic-detail-page, .ebook-detail-page) :is(.story-detail-v3-writer-stories, .story-detail-v3-related-stories) + .container-slider {
        border-bottom: 0;
    }

    body:is(.comic-detail-page, .ebook-detail-page) .story-detail-v3-section :is(.section-main-title, .chapter-header) {
        font-size: var(--Title-Page-font-size-md, 28px) !important;
    }

    body.ebook-detail-page .story-detail-v3-section :is(.section-main-title, .chapter-header) {
        font-size: var(--Title-Page-font-size-sm, 24px) !important;
    }
}