/*
 * Custom overrides on top of the vendor theme.
 * Story cover images: constrain to a consistent portrait ratio (matches
 * ImageService::storeStoryCover's 600x900 output) instead of the container
 * growing to whatever height the source image happens to be.
 *
 * !important is used deliberately here: this file exists specifically to
 * win over the vendor theme's own aspect-ratio rules (e.g. .card-product
 * .card-product-wrapper already sets 1/1.33 with higher specificity).
 */

.wg-blog .image {
    aspect-ratio: 2 / 3 !important;
}

.tf-product-media-wrap .item {
    aspect-ratio: 2 / 3 !important;
    overflow: hidden;
    border-radius: 12px;
}
.tf-product-media-wrap .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-product-wrapper {
    aspect-ratio: 2 / 3 !important;
    overflow: hidden;
    border-radius: 12px;
    display: block;
}
.card-product-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
 * Toast thông báo (flash message).
 *
 * Dùng chung markup với trang quản trị (resources/views/partials/toasts.blade.php),
 * nhưng lấy màu, bo góc và đổ bóng từ bộ biến của template người dùng để trông
 * liền mạch với phần còn lại của trang.
 *
 * Icon vẽ bằng CSS chứ không dùng font icon: bộ icomoon của template này chỉ có
 * checkCircle, không có icon cảnh báo hay thông tin.
 */

.app-toast-stack {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 380px;
    max-width: calc(100vw - 32px);
    /* Để khoảng trống quanh toast không chắn thao tác trên trang. */
    pointer-events: none;
}

.app-toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--secondary-2);
    border-radius: 12px;
    background-color: var(--white);
    box-shadow: var(--shadow1);
    pointer-events: auto;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.app-toast.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.app-toast.is-leaving {
    opacity: 0;
    transform: translateX(20px);
}

.app-toast__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 50%;
    background-color: var(--secondary-2);
    color: var(--white);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.app-toast__body {
    flex: 1;
    margin: 0;
    color: var(--main);
    font-size: 14px;
    line-height: 22px;
}

.app-toast__close {
    flex-shrink: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--secondary-2);
    font-size: 20px;
    line-height: 20px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.app-toast__close:hover {
    color: var(--main);
}

/* Trạng thái ----------------------------------------------------------- */

.app-toast--success {
    border-left-color: var(--success);
}

.app-toast--success .app-toast__icon {
    background-color: var(--success);
}

/* Dấu tick vẽ bằng hai cạnh viền xoay 45 độ. */
.app-toast--success .app-toast__icon::before {
    content: "";
    width: 5px;
    height: 9px;
    margin-top: -2px;
    border: solid var(--white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.app-toast--error {
    border-left-color: var(--critical);
}

.app-toast--error .app-toast__icon {
    background-color: var(--critical);
}

.app-toast--error .app-toast__icon::before {
    content: "!";
}

.app-toast--warning {
    border-left-color: var(--yellow);
}

.app-toast--warning .app-toast__icon {
    background-color: var(--yellow);
}

.app-toast--warning .app-toast__icon::before {
    content: "!";
}

.app-toast--info {
    border-left-color: var(--blue);
}

.app-toast--info .app-toast__icon {
    background-color: var(--blue);
}

.app-toast--info .app-toast__icon::before {
    content: "i";
}

@media (max-width: 767px) {
    .app-toast-stack {
        top: 16px;
        right: 16px;
        left: 16px;
        width: auto;
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-toast {
        transition: opacity 0.25s ease;
        transform: none;
    }

    .app-toast.is-leaving,
    .app-toast.is-visible {
        transform: none;
    }
}

/*
 * Thông báo trên trang người dùng.
 *
 * Gồm hai chỗ dùng chung một bộ màu: dropdown cạnh icon yêu thích trên header,
 * và danh sách ở trang /thong-bao. Mỗi thông báo có huy hiệu biểu tượng theo
 * nhóm (nạp xu, đăng ký dịch giả, truyện, chương, thanh toán) và một nhãn màu
 * theo trạng thái, khớp với cách hiển thị bên trang quản trị.
 *
 * Màu lấy từ biến của theme: chờ xử lý (--yellow), đã duyệt (--success),
 * bị từ chối (--critical), thông tin (--blue), còn lại (--secondary-2).
 */

/* ----- Huy hiệu biểu tượng + nhãn nhóm (dùng chung cả header và trang) ----- */

.noti-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 18px;
}

.noti-category {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    line-height: 18px;
}

.noti-icon.tone-success,
.noti-category.tone-success { background: rgba(61, 171, 37, 0.12); color: var(--success); }
.noti-icon.tone-warning,
.noti-category.tone-warning { background: rgba(240, 167, 80, 0.16); color: #c97f2c; }
.noti-icon.tone-danger,
.noti-category.tone-danger { background: rgba(240, 62, 62, 0.12); color: var(--critical); }
.noti-icon.tone-info,
.noti-category.tone-info { background: rgba(12, 116, 214, 0.12); color: var(--blue); }
.noti-icon.tone-muted,
.noti-category.tone-muted { background: rgba(160, 160, 160, 0.16); color: var(--secondary); }

/* ----- Dropdown trên header ----- */

.nav-notification {
    position: relative;
}

.nav-notification .dropdown-notification {
    pointer-events: none;
    position: absolute;
    top: calc(100% + 28px);
    right: -10px;
    z-index: 999;
    width: 340px;
    padding: 8px;
    background-color: var(--white);
    border-radius: 8px;
    box-shadow: var(--shadow1);
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.3s ease;
    /* Nhiều thông báo thì cuộn trong menu, không kéo dài quá màn hình. */
    max-height: 420px;
    overflow-y: auto;
}

.nav-notification:hover .dropdown-notification {
    pointer-events: all;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-notification .noti-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px 12px;
    border-bottom: 1px solid var(--line);
}

.nav-notification .noti-heading {
    font-size: 15px;
    font-weight: 600;
}

.nav-notification .noti-unread {
    padding: 2px 8px;
    border-radius: 999px;
    background-color: var(--rgba-primary);
    color: var(--primary);
    font-size: 11px;
    font-weight: 500;
}

.nav-notification .noti-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 8px;
    background: none;
    text-align: left;
    transition: background-color 0.3s ease;
}

.nav-notification .noti-item:hover {
    background-color: var(--surface);
}

/* min-width:0 để tiêu đề dài cắt được bằng dấu ba chấm thay vì đẩy rộng menu. */
.nav-notification .noti-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 2px;
}

.nav-notification .noti-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
    font-weight: 600;
    color: var(--main);
}

.nav-notification .noti-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    line-height: 19px;
    color: var(--secondary);
}

.nav-notification .noti-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
}

.nav-notification .noti-time {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--secondary-2);
}

.nav-notification .noti-empty {
    padding: 16px 10px;
    text-align: center;
    font-size: 13px;
    color: var(--secondary-2);
}

.nav-notification .noti-all {
    display: block;
    padding: 10px;
    border-top: 1px solid var(--line);
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
}

/* ----- Nút "đánh dấu tất cả đã đọc" ----- */

.noti-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
}

/*
 * Nút nhỏ hơn hẳn .tf-btn (15px/32px) — đây là thao tác phụ, không nên to bằng
 * nút hành động chính. Viền mảnh, khi rê chuột mới tô đặc.
 */
.btn-mark-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: none;
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    color: var(--secondary);
    transition: all 0.3s ease;
}

.btn-mark-all i {
    font-size: 15px;
}

.btn-mark-all:hover {
    border-color: var(--primary);
    background-color: var(--primary);
    color: var(--white);
}

/* ----- Danh sách ở trang thông báo ----- */

.noti-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.noti-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    transition: box-shadow 0.3s ease;
}

.noti-row:hover {
    box-shadow: var(--shadow1);
}

/* Chưa đọc: nền nhạt và vạch màu bên trái cho dễ quét mắt. */
.noti-row.is-unread {
    border-left: 3px solid var(--primary);
    background-color: var(--surface);
}

.noti-row .noti-body {
    flex: 1;
    min-width: 0;
}

.noti-row .noti-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}

.noti-row .noti-new {
    padding: 2px 8px;
    border-radius: 999px;
    background-color: var(--primary);
    color: var(--white);
    font-size: 11px;
    font-weight: 500;
    line-height: 18px;
}

.noti-row .noti-time {
    margin-left: auto;
    font-size: 12px;
    color: var(--secondary-2);
}

.noti-row .noti-title {
    margin-bottom: 4px;
    font-size: 15px;
    font-weight: 600;
}

.noti-row .noti-text {
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 21px;
    color: var(--secondary);
}

.noti-row .noti-link {
    padding: 0;
    border: none;
    background: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    text-decoration: underline;
}

/*
 * Trang đọc chương: khối mở khóa chương VIP.
 *
 * Trước đây chỉ là một dòng chữ kèm nút .btn-style-2 nhỏ nằm giữa nội dung nên
 * dễ bị bỏ qua. Gom lại thành một thẻ riêng: nhãn VIP, giá, nút hành động chính
 * đủ lớn để bấm trên điện thoại, rồi mới đến số dư và lối quay lại.
 */

.chapter-locked {
    max-width: 480px;
    margin: 40px auto;
    padding: 40px 24px 32px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background-color: var(--surface);
    text-align: center;
}

.chapter-locked-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    padding: 6px 14px;
    border-radius: 999px;
    background-color: var(--rgba-primary);
    color: var(--primary);
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.chapter-locked-desc {
    margin-bottom: 20px;
    color: var(--secondary);
    font-size: 15px;
    line-height: 23px;
}

.chapter-locked-price {
    margin-bottom: 24px;
    color: var(--main);
    font-size: 40px;
    font-weight: 700;
    line-height: 48px;
}

.chapter-locked-price span {
    font-size: 18px;
    font-weight: 500;
    color: var(--secondary);
}

.chapter-locked-error {
    margin-bottom: 16px;
    color: var(--critical);
    font-size: 14px;
    line-height: 21px;
}

/* Nút hành động chính: cao 54px để ngón tay bấm không trượt. */
.chapter-buy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 54px;
    padding: 14px 24px;
    border: 0;
    border-radius: 999px;
    background-color: var(--primary);
    color: var(--white);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.chapter-buy-btn:hover {
    background-color: var(--main);
    color: var(--white);
}

.chapter-locked-balance {
    margin-top: 16px;
    color: var(--secondary);
    font-size: 14px;
    line-height: 22px;
}

.chapter-locked-back {
    display: inline-block;
    margin-top: 24px;
    color: var(--secondary-2);
    font-size: 14px;
    line-height: 22px;
    text-decoration: underline;
}

.chapter-locked-back:hover {
    color: var(--main);
}

/*
 * Trang đọc chương: thanh điều hướng cố định dưới màn hình.
 *
 * Thay cho hai liên kết "Trước"/"Sau" cũ nằm cuối bài — người đọc phải cuộn hết
 * chương (và qua cả phần bình luận) mới bấm được. Ở giữa là ô chọn chương dùng
 * <select> gốc của trình duyệt, vì trên điện thoại nó mở bộ chọn của hệ điều
 * hành, thao tác nhanh hơn mọi dropdown tự vẽ.
 */

.chapter-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90;
    border-top: 1px solid var(--line);
    background-color: var(--white);
    box-shadow: 0px -4px 16px 0px rgba(43, 52, 74, 0.08);
}

.chapter-nav-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 1130px;
    margin: 0 auto;
    padding: 10px 15px;
    /* Chừa thêm cho vạch home của iPhone. */
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}

.chapter-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
    min-height: 48px;
    padding: 0 18px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background-color: var(--white);
    color: var(--main);
    font-size: 15px;
    font-weight: 600;
    line-height: 23px;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.chapter-nav-btn i {
    font-size: 12px;
}

.chapter-nav-btn:hover {
    border-color: var(--main);
    background-color: var(--main);
    color: var(--white);
}

/* Không còn chương trước/sau: vẫn giữ chỗ để thanh không nhảy khi đổi chương. */
.chapter-nav-btn.is-disabled {
    opacity: 0.35;
    pointer-events: none;
}

/* min-width:0 để ô chọn co lại được thay vì đẩy hai nút ra ngoài màn hình. */
.chapter-nav-jump {
    position: relative;
    flex: 1;
    min-width: 0;
}

.chapter-nav-jump i {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    font-size: 10px;
    color: var(--secondary);
    pointer-events: none;
}

.chapter-nav-select {
    width: 100%;
    height: 48px;
    padding: 0 38px 0 18px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background-color: var(--surface);
    color: var(--main);
    font-size: 15px;
    font-weight: 500;
    line-height: 23px;
    text-overflow: ellipsis;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.chapter-nav-select:focus {
    outline: none;
    border-color: var(--main);
}

.chapter-nav-spacer {
    height: 90px;
}

@media (max-width: 767px) {
    .chapter-nav-btn {
        padding: 0 14px;
        font-size: 14px;
    }

    .chapter-nav-select {
        padding: 0 34px 0 14px;
        font-size: 14px;
    }
}

/*
 * Menu tài khoản trên điện thoại.
 *
 * Bản gốc của template ẩn hẳn cột menu dưới 992px và thay bằng một nút vuông
 * nổi ở mép trái màn hình, bấm vào mới mở offcanvas chứa danh sách mục — muốn
 * sang "Nạp xu" hay "Thông báo" phải qua hai lần chạm và nút đó không nói lên
 * điều gì. Bỏ nút nổi, cho cột menu hiện lại ngay trên nội dung dưới dạng dải
 * chip cuộn ngang: thấy được toàn bộ mục và chạm một lần là xong.
 */

@media (max-width: 991px) {
    .my-account-wrap {
        flex-direction: column;
        gap: 24px;
    }

    .my-account-wrap .wrap-sidebar-account {
        display: block;
        width: 100%;
    }

    .sidebar-account {
        padding: 0;
        background-color: transparent;
        border-radius: 0;
    }

    /* Đầu trang: ảnh đại diện nhỏ nằm cạnh tên, không chiếm nguyên một khối. */
    .sidebar-account .account-avatar {
        flex-direction: row;
        align-items: center;
        gap: 14px;
        margin-bottom: 20px;
        text-align: left;
    }

    .sidebar-account .account-avatar .image {
        width: 56px;
        height: 56px;
        flex-shrink: 0;
        margin: 0;
    }

    .sidebar-account .account-avatar h6 {
        margin-bottom: 2px;
    }

    .sidebar-account .account-avatar .body-text-1 {
        font-size: 14px;
        line-height: 21px;
        color: var(--secondary);
    }

    /* Dải chip cuộn ngang, tràn ra sát mép container cho đỡ cụt. */
    .sidebar-account .my-account-nav {
        flex-direction: row;
        gap: 8px;
        margin: 0 -15px;
        padding: 4px 15px 12px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .sidebar-account .my-account-nav::-webkit-scrollbar {
        display: none;
    }

    .sidebar-account .my-account-nav .my-account-nav-item {
        flex-shrink: 0;
        min-height: 44px;
        padding: 10px 18px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background-color: var(--white);
        font-size: 15px;
        line-height: 24px;
        white-space: nowrap;
    }

    /* Icon nhỏ lại cho vừa chip; nét vẽ theo currentColor nên chip đang chọn tự đổi sang trắng. */
    .sidebar-account .my-account-nav .my-account-nav-item {
        gap: 8px;
    }

    .sidebar-account .my-account-nav .my-account-nav-item svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }

    .sidebar-account .my-account-nav .my-account-nav-item:hover {
        background-color: var(--white);
    }

    .sidebar-account .my-account-nav .my-account-nav-item.active {
        border-color: var(--main);
        background-color: var(--main);
        color: var(--white);
    }
}

/*
 * Trang tài khoản: khối đổi ảnh đại diện.
 *
 * Template không có sẵn kiểu cho .account-avatar-edit nên trước đó ảnh, nhãn và
 * ô chọn tệp mặc định của trình duyệt xếp chồng lên nhau. Giấu ô chọn tệp, biến
 * nhãn thành nút, và ảnh xem trước bo tròn cùng cỡ với ảnh ở cột menu.
 */

.account-avatar-edit {
    display: flex;
    align-items: center;
    gap: 20px;
}

.account-avatar-edit .image {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--surface);
}

.account-avatar-edit .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
 * Ô chọn tệp gốc bị ẩn nhưng vẫn nằm trong luồng bàn phím: dùng clip thay cho
 * display:none để trình duyệt còn báo lỗi validate và focus được vào nó.
 */
.account-avatar-edit input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.account-avatar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 22px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background-color: var(--white);
    font-size: 15px;
    font-weight: 500;
    line-height: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.account-avatar-btn:hover {
    border-color: var(--main);
    background-color: var(--main);
    color: var(--white);
}

/* Ô input bị ẩn nên khi nó nhận focus phải tự vẽ viền lên cái nhãn. */
.account-avatar-edit input[type="file"]:focus-visible + .account-avatar-btn {
    outline: 2px solid var(--main);
    outline-offset: 2px;
}

.account-avatar-hint {
    margin-top: 8px;
    color: var(--secondary-2);
    font-size: 13px;
    line-height: 20px;
}

@media (max-width: 575px) {
    .account-avatar-edit {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}

/*
 * Phân trang dựng từ view dùng chung user/partials/pagination.blade.php.
 *
 * .wg-pagination của template không có lề trên và không cho xuống dòng, mà chỗ
 * nào dùng partial này nó cũng nằm ngay dưới một khối nội dung (bảng giao dịch,
 * danh sách chương) nên cần tách ra; nhiều trang thì dãy nút phải xuống được
 * dòng trên màn hình hẹp.
 */

.wg-pagination-block {
    flex-wrap: wrap;
    row-gap: 8px;
    margin-top: 32px;
}

/*
 * Trang lỗi (404).
 *
 * Căn giữa theo chiều dọc với chiều cao tối thiểu để trang không bị dồn sát
 * header khi nội dung ngắn — trang lỗi chỉ có vài dòng chữ, không có gì đẩy
 * footer xuống.
 */

.error-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 80px 0;
    text-align: center;
}

.error-code {
    margin-bottom: 8px;
    color: var(--primary);
    font-size: 120px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.error-title {
    margin-bottom: 12px;
}

.error-desc {
    max-width: 520px;
    margin: 0 auto 32px;
    color: var(--secondary);
    font-size: 16px;
    line-height: 25px;
}

.error-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

@media (max-width: 767px) {
    .error-page {
        min-height: 50vh;
        padding: 56px 0;
    }

    .error-code {
        font-size: 84px;
    }
}

/*
 * Nút "Đăng nhập bằng Google" bên dưới form đăng nhập.
 */
.login-google {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 24px;
}

/* Logo Google phải nằm trên lớp phủ hover (.tf-btn::after, z-index 1) như .text. */
.login-google .tf-btn svg {
    position: relative;
    z-index: 2;
}

/*
 * Trang nạp xu: mã VietQR bên trái, thông tin tài khoản nhận tiền bên phải;
 * màn hẹp thì xếp chồng.
 */
.recharge-qr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 12px;
}

.recharge-qr-image {
    flex-shrink: 0;
    width: 240px;
    height: 240px;
    border-radius: 8px;
    background: var(--white);
}

.recharge-qr-info {
    flex: 1 1 260px;
}

.recharge-bank {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 16px;
    margin: 0 0 12px;
}

.recharge-bank dt {
    font-weight: 400;
    color: var(--secondary);
}

.recharge-bank dd {
    margin: 0;
    font-weight: 600;
    word-break: break-word;
}

/*
 * Trang truyện: nhãn tiến độ (Đang ra / Hoàn thành) và khối mua combo trọn bộ.
 */
.story-progress {
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(240, 167, 80, 0.16);
    color: #c97f2c;
    font-size: 13px;
    font-weight: 500;
    line-height: 22px;
}

.story-progress.is-completed {
    background: rgba(61, 171, 37, 0.12);
    color: var(--success);
}

.combo-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
    margin-top: 32px;
    padding: 20px 24px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--white);
}

.combo-box-info {
    flex: 1 1 240px;
}

.combo-box-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
}

.combo-box-desc {
    margin: 4px 0 0;
    color: var(--secondary);
    font-size: 14px;
}

.combo-box-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

.combo-box-price del {
    color: var(--secondary-2);
    font-size: 14px;
}

.combo-box-price strong {
    font-size: 22px;
    line-height: 30px;
}

.combo-box-discount {
    padding: 0 8px;
    border-radius: 999px;
    background: var(--critical);
    color: var(--white);
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
}

/*
 * .btn-style-3 của template viết cho thẻ <a>; đặt lên <button> thì dính luật
 * button chung: hiện viền mặc định của trình duyệt, và khi hover chữ đổi sang
 * màu --main trùng màu nền nên mất chữ.
 */
button.btn-style-3 {
    border: 0;
}

button.btn-style-3:hover {
    color: var(--white);
}

.combo-box .btn-style-3 {
    flex-shrink: 0;
    min-height: 48px;
    padding: 14px 32px;
}

.combo-modal .btn-style-2,
.combo-modal .btn-style-3 {
    min-height: 48px;
    padding: 14px 28px;
}

@media (max-width: 575px) {
    .combo-box .btn-style-3 {
        width: 100%;
    }
}

.combo-hint {
    margin-top: 24px;
    color: var(--secondary);
    font-size: 14px;
    text-align: center;
}

.combo-modal {
    padding: 28px;
    border: 0;
    border-radius: 16px;
}

.combo-modal-summary {
    display: grid;
    grid-template-columns: 1fr max-content;
    gap: 10px 16px;
    margin: 0 0 24px;
}

.combo-modal-summary dt {
    font-weight: 400;
    color: var(--secondary);
}

.combo-modal-summary dd {
    margin: 0;
    text-align: right;
}

.combo-modal-error {
    margin-bottom: 20px;
    color: var(--critical);
}

/* Trang chương đang khóa: gợi ý combo nằm dưới nút mở khóa chương. */
.chapter-locked-combo {
    display: block;
    margin-top: 16px;
    color: var(--main);
    font-size: 14px;
    line-height: 22px;
    text-decoration: underline;
}

/* Nhãn điểm đánh giá trên thẻ truyện (trang chủ, danh sách truyện). */
.rating-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--main);
}

.rating-badge-star {
    color: #f5a623;
}

.rating-badge-count {
    color: var(--secondary);
    font-weight: 400;
}