/* ==========================================================================
   Mayy Truyện - style CHỈ CÓ Ở BẢN LARAVEL
   --------------------------------------------------------------------------
   app.css là bản chép nguyên từ demo, không được sửa tay. Nhưng bản Laravel có
   vài thứ demo không có (demo luôn coi như đã đăng nhập, không có form thật):
     - Nút Đăng nhập / Đăng ký cho khách
     - Khung báo lỗi validate và thông báo flash
   Những thứ đó khai báo ở đây. Nạp SAU app.css nên ghi đè được khi cần.
   Vẫn dùng đúng biến màu của demo để không lệch tông.
   ========================================================================== */

/* Ẩn trên máy nhỏ. Demo không cần class này vì topbar của demo không có nút
   Đăng ký. Mốc 520px lấy theo lúc topbar bắt đầu chật. */
@media (max-width: 520px) {
    .hide-sm {
        display: none;
    }
}

/* --------------------------------------------------------- Thông báo / lỗi
   Trước đây ba view (login, register, vip) mỗi chỗ tự viết một cục style
   inline giống nhau. Gom về một class để sau này đổi một lần là xong. */
.alert {
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.5;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
}

.alert + .alert {
    margin-top: 10px;
}

.alert-ok {
    background: color-mix(in srgb, var(--green) 12%, transparent);
    border-color: color-mix(in srgb, var(--green) 35%, transparent);
    color: var(--green);
}

.alert-bad {
    background: rgba(220, 38, 38, .12);
    border-color: rgba(220, 38, 38, .35);
    color: #f87171;
}

/* Nhiều dòng lỗi trong cùng một khung thì giãn nhẹ cho dễ đọc. */
.alert > div + div {
    margin-top: 4px;
}

/* O so lieu o trang chu tro sang tab tuong ung trong Tu truyen.
   app.css chi dinh kieu cho ".statrow div" nen ban dung the <a> phai khai lai. */
.statrow a {
    display: block;
    background: var(--raise);
    border-radius: 14px;
    padding: 12px 6px;
    color: inherit;
    text-decoration: none;
    transition: background .15s;
}

.statrow a:hover {
    background: var(--hover);
}

/* ------------------------------------------- Nut doi luoi / danh sach
   app.css chi cho .grid + .gitem doi kieu. Tu truyen dung .lrow, bang xep hang
   dung .rrow nen bam nut khong an gi. Hai khoi duoi cho hai cho do theo cung
   mot nut. Mac dinh cua site la luoi nen viet o :not(.view-list).
   Cot lay dung cong thuc cua .grid trong app.css: 172px, auto-fill. */

body:not(.view-list) .tlist,
body:not(.view-list) .ranklist.rankmain {
    display: grid;
    gap: clamp(12px, 1.6vw, 18px);
}

body:not(.view-list) .tlist .lrow,
body:not(.view-list) .ranklist.rankmain .rrow {
    display: block;
    padding: 10px;
    border-radius: 16px;
}

/* .lrow+.lrow co margin-top de xep doc; o luoi thi gap lo mat roi. */
body:not(.view-list) .tlist .lrow + .lrow {
    margin-top: 0;
}

body:not(.view-list) .tlist .lrow .cv,
body:not(.view-list) .ranklist.rankmain .rrow .cv {
    width: 100%;
    border-radius: 12px;
}

body:not(.view-list) .tlist .lrow .info {
    margin-top: 9px;
}

/* Nut hanh dong keo het the, khong con nam ben phai nua. */
body:not(.view-list) .tlist .lrow .btn {
    display: block;
    width: 100%;
    margin-top: 10px;
    text-align: center;
}

body:not(.view-list) .ranklist.rankmain .rrow {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
}

body:not(.view-list) .ranklist.rankmain .rrow:hover {
    background: var(--surface);
    border-color: var(--accent);
}

/* So thu hang la thu duy nhat khong duoc mat khi doi kieu, nen de len bia. */
body:not(.view-list) .ranklist.rankmain .rn {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 2;
    width: 24px;
    height: 24px;
    line-height: 24px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .62);
}

body:not(.view-list) .ranklist.rankmain .rrow > span:nth-child(3) {
    display: block;
    margin-top: 9px;
}

body:not(.view-list) .ranklist.rankmain .rrow .t,
body:not(.view-list) .ranklist.rankmain .rrow .s,
body:not(.view-list) .ranklist.rankmain .rrow .sc {
    display: block;
}

body:not(.view-list) .ranklist.rankmain .rrow .sc {
    margin: 4px 0 0;
}

/* --------------------------------------------------- Trang the loai
   Hai class nay demo khong co. .frow truoc day nam rai rac duoi dang style
   inline trong trang tim kiem, gom lai mot cho. */

/* Hang bo loc, tu xuong dong khi khung hep. */
.frow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
    gap: 12px;
}

/* Duong dan phan cap dau trang. */
.crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    font-size: 12.5px;
    color: var(--muted);
}

.crumb a {
    color: var(--muted);
    text-decoration: none;
}

.crumb a:hover {
    color: var(--accent);
}

/* Muc cuoi la trang dang xem, khong phai lien ket. */
.crumb > span:last-child {
    color: var(--text);
}

/* ============================================================ TRANG DOC
   Bo cuc moi: thanh ben trai, thanh duoi co dinh, kep sach treo mep phai.
   Tat ca viet o day, khong dung vao app.css.

   .readpage la phan tu cuon (app.css dat position:fixed;overflow-y:auto).
   Nen thanh ben, thanh duoi va kep sach deu dung position:fixed de dung yen
   khi noi dung cuon, con .readpage chi chua chua cho bang padding.
   ==================================================================== */

.rp2 {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
}

/* --------------------------------------------- Thanh ben trong trang doc
   Dung lai .side cua partials/sidebar.blade.php, khong dung ban rieng.
   O cac trang khac .side la mot cot trong luoi .app nen sticky la du. Trang doc
   la mot lop phu toan man hinh, khong co luoi do, nen phai tu neo lai.
   Duoi 980px thi app.css da bien no thanh ngan keo, khong can dung toi. */

@media (min-width: 981px) {
    .rp2 .side {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 236px;
        height: auto;
        z-index: 88;
    }

    /* Thanh ben da tach khoi luong nen noi dung phai tu chua cho cho no. */
    .rp2 { padding-left: 236px; }
}

/* ------------------------------------------------- Thanh duoi co dinh */
.rbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 86;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 16px calc(9px + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--line);
    backdrop-filter: blur(12px);
}

@media (min-width: 981px) {
    .rbar { left: 236px; }
}

.rbar .rbq {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    padding: 2px 8px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 10.5px;
    text-decoration: none;
    cursor: pointer;
}

.rbar .rbq:hover { color: var(--text); }

.rbar .rbmid {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}

/* Tien do doc trong chuong. Bam vao la nhay toi cho do. */
.rbar .rbtrack {
    position: relative;
    flex: 1;
    height: 4px;
    border-radius: 999px;
    background: var(--line);
    cursor: pointer;
}

.rbar .rbtrack i {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    border-radius: 999px;
    background: var(--accent);
}

/* Nut tron o dau vach, dat bang ::after de khong them the. */
.rbar .rbtrack i::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    border-radius: 50%;
    background: var(--accent);
}

.rbar .rbnum {
    flex-shrink: 0;
    font-size: 11.5px;
    color: var(--muted);
}

.rbar .rbside {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* Man hinh hep khong du cho hai nut chuyen chuong, da co cap nut cuoi bai. */
@media (max-width: 700px) {
    .rbar .rbside { display: none; }
}

@media (min-width: 701px) {
    .rnav-sm { display: none; }
}

/* ------------------------------------------------- Kep sach treo */
.rkep {
    position: fixed;
    right: 10px;
    /* Dat cao hon mep duoi thanh tren de phan day chui vao sau no, giong kep
       sach that luon qua mep trang giay roi thong xuong. */
    top: 62px;
    z-index: 84;
    padding: 0;
    border: 0;
    background: transparent;
    line-height: 0;
    cursor: pointer;
    /* Thap hon .rtop (z-index 10) de thanh tren de len phan day. */
    z-index: 5;
    transform-origin: top center;
    transition: transform .18s ease;
}

.rkep img {
    display: block;
    width: clamp(58px, 6vw, 84px);
    height: auto;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .45));
}

/* Keo xuong mot chut khi ro chuot, giong nhu vua rut day. */
.rkep:hover { transform: translateY(7px); }

.rkep:active { transform: translateY(12px); }

.rkep[disabled] { opacity: .55; }

/* Da ghim: chot vang nho o goc the, va kep tut xuong mot chut nhu bi cai lai. */
.rkep .chot {
    position: absolute;
    top: 34%;
    right: 6px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .35), 0 0 10px var(--gold);
    opacity: 0;
    transition: opacity .18s;
}

.rkep.ghim .chot { opacity: 1; }

.rkep.ghim { transform: translateY(10px); }

.rkep.ghim:hover { transform: translateY(14px); }

@media (max-width: 700px) {
    /* Anh nho hon nen phan day cung ngan hon: dat thap lai de thanh tren chi che
       mot doan day, khong nuot luon ca no. */
    .rkep { right: 2px; top: 90px; }
    .rkep img { width: 38px; }

    /* Kep sach dinh co dinh nen luon nam de len chu. Truoc day chi chua le
       phai, kho chu lech han sang trai nhin rat gan. Gio chua deu hai ben:
       kep nam gon trong mang le phai, chu van nam giua man hinh. */
    .rp2 .reader {
        max-width: none;
        padding-left: 42px;
        padding-right: 42px;
    }

}

/* Nut noi "Cach doc" o goc phai duoi trung cho voi thanh duoi va kep sach.
   Trong trang doc da co nut Aa tren thanh tren va nut Che do o thanh duoi,
   nen an no di; cac trang khac van giu. */
body.reading .sheetbtn {
    display: none;
}

/* ---------------------------------------------- Canh lai bo cuc trang doc
   Thanh tren va thanh duoi tach khoi mep man hinh thanh hai tam noi bo goc,
   giong ban mau. Kho chu van la trung tam, hai thanh chi vien quanh no. */

.rp2 .rtop {
    top: 10px;
    margin: 10px 16px 0;
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
}

/* Khong cho thanh tren tu an. No la diem treo cua kep sach: thanh truot len
   thi kep con lai mot minh giua khong khi, nhin nhu dan bay. */
.rp2 .rtop.hide {
    transform: none;
}

/* app.css bo hep .in con 900px cho bo cuc cu. Ban nay dung het be ngang de
   nut lui ve sat hai mep tam, khong troi lo lung o giua. */
.rp2 .rtop .in {
    max-width: none;
    padding: 9px 12px;
}

.rp2 .reader {
    padding-top: 30px;
}

/* Thanh duoi noi thanh vien thuoc, khong dinh mep man hinh. */
.rbar {
    left: 16px;
    right: 16px;
    bottom: 14px;
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
}

.rp2 {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

@media (min-width: 981px) {
    .rp2 .rtop { margin: 12px 24px 0; }

    /* Gioi han be ngang roi canh giua trong khoang con lai ben phai thanh ben,
       de vach tien do khong keo dai ca man hinh. */
    .rbar {
        left: 260px;
        right: 24px;
        /* Xap xi be ngang kho chu de hai khoi thang hang voi nhau. */
        max-width: 800px;
        margin: 0 auto;
    }
}

@media (max-width: 700px) {
    .rp2 .rtop { margin: 8px 10px 0; }
    .rbar { left: 10px; right: 10px; bottom: 10px; }
}


/* ======================================================= THE TRUYEN
   Ban cu cao thap khong deu: tieu de mot dong hay hai dong la the ngan dai
   khac nhau. Gio moi phan co chieu cao co dinh, nut luon nam day the.
   Viet o day, khong sua app.css.
   ==================================================================== */

/* Bon cot co dinh thay vi de trinh duyet tu chia theo be ngang.
   auto-fill thi so cot doi theo cho trong con lai: co cot phai thi ra 3, bo
   cot phai thi ra 5. Ghi cung 4 de moi trang deu giong nhau. */
body:not(.view-list) .grid,
body:not(.view-list) .tlist,
body:not(.view-list) .ranklist.rankmain {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Khung hep dan thi bot cot, khong de the bi bop qua nho.
   Khong can moc quanh 1000px: app.css da don cot phai xuong duoi o 1180px nen
   luoi lay lai duoc be ngang, 4 cot van vua. */
@media (max-width: 820px) {
    body:not(.view-list) .grid,
    body:not(.view-list) .tlist,
    body:not(.view-list) .ranklist.rankmain {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    body:not(.view-list) .grid,
    body:not(.view-list) .tlist,
    body:not(.view-list) .ranklist.rankmain {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

body:not(.view-list) .gitem {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 10px;
    border-radius: 20px;
    background: var(--surface);
    border: 1px solid var(--line);
}

body:not(.view-list) .gitem:hover {
    border-color: var(--accent);
}

/* Bia luon dung ti le, khong bi anh keo dai ngan. */
body:not(.view-list) .gitem .cv {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 14px;
}

/* Tieu de chot dung hai dong: mot dong cung chiem cho hai dong nen moi the
   cao bang nhau. Dai hon hai dong thi cat bang dau ba cham. */
body:not(.view-list) .gitem .tt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(2 * 1.35em);
    margin-top: 12px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: inherit;
    text-decoration: none;
}

/* Ca the bam duoc: lien ket o tieu de trai rong ra toan the. */
body:not(.view-list) .gitem .tt::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

body:not(.view-list) .gitem .au {
    margin-top: 4px;
    font-size: 12.5px;
}

body:not(.view-list) .gitem .mt {
    margin-top: 10px;
    font-size: 12px;
}

.gitem .mt .ch {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.gitem .mt .cham {
    opacity: .5;
}

/* Cham mau truoc nhan trang thai. */
.gitem .mt .tr::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 5px;
    border-radius: 50%;
    background: currentColor;
    vertical-align: 1px;
}

.gitem .mt .tr-ra { color: #4da3ff; }

.gitem .mt .tr-xong { color: var(--green); }

.gitem .mt .tr-ngung { color: #f2568f; }

/* margin-top:auto day nut xuong day, nen the nao cung thang hang nut. */
body:not(.view-list) .gitem .gbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: auto;
    padding: 11px 12px;
    border-radius: 14px;
    background: var(--raise);
    font-size: 13px;
    font-weight: 500;
}

body:not(.view-list) .gitem .gbtn i {
    font-style: normal;
    transition: transform .18s;
}

body:not(.view-list) .gitem:hover .gbtn {
    background: var(--accent);
    color: var(--on-accent, #fff);
}

body:not(.view-list) .gitem:hover .gbtn i {
    transform: translateX(3px);
}

/* Nut tim nam de len bia, phai cao hon lop phu cua lien ket. */
.glike {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
    backdrop-filter: blur(4px);
    color: #fff;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.glike svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
}

.glike:hover {
    background: rgba(0, 0, 0, .62);
}

.glike.on {
    color: #ff5c8a;
}

.glike.on svg {
    fill: currentColor;
    stroke: currentColor;
}

.glike[disabled] {
    opacity: .5;
    cursor: default;
}

/* --- Che do danh sach --- */
/* app.css xep .gitem thanh hang 58px + 3 dong chu. The moi co them nut va
   tim nen phai xep lai, khong thi vo hang. */
body.view-list .gitem {
    position: relative;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-items: center;
    column-gap: 12px;
}

body.view-list .gitem .cv {
    grid-row: span 3;
    aspect-ratio: 3 / 4;
}

body.view-list .gitem .tt {
    margin-top: 0;
    color: inherit;
    text-decoration: none;
}

body.view-list .gitem .tt::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Danh sach da chat, nut va tim khong con cho. */
body.view-list .gitem .gbtn,
body.view-list .glike {
    display: none;
}

/* Man hep: hai cot co gian thay vi mot cot 230px lech ve trai.
   app.css cung co quy tac nay nhung laravel.css nap sau nen phai khai lai. */
@media (max-width: 600px) {
    body:not(.view-list) .grid {
        grid-template-columns: repeat(2, 1fr);
    }

    body:not(.view-list) .gitem {
        padding: 8px;
        border-radius: 16px;
    }

    body:not(.view-list) .gitem .tt {
        margin-top: 9px;
        font-size: 13.5px;
    }

    body:not(.view-list) .gitem .gbtn {
        padding: 9px 8px;
        font-size: 12px;
    }

    .glike {
        top: 14px;
        right: 14px;
        width: 26px;
        height: 26px;
    }
}

/* Dong so chuong va trang thai phai nam gon mot dong. Khong chan thi may hep
   no ngat thanh "5 / chuong" va "Hoan / thanh", nhin nhu vo. */
.gitem .mt {
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
}

.gitem .mt .ch,
.gitem .mt .tr {
    flex-shrink: 0;
}

@media (max-width: 600px) {
    body:not(.view-list) .gitem .mt {
        gap: 4px;
        font-size: 11px;
    }

    /* Bo biu tuong quyen sach de du cho cho ca hai nhan. */
    body:not(.view-list) .gitem .mt .ch svg {
        display: none;
    }
}

/* Doi so chuong va nut cach nhau ro hon, khong dinh sat. */
body:not(.view-list) .gitem .mt {
    margin-bottom: 14px;
}

@media (max-width: 600px) {
    body:not(.view-list) .gitem .mt {
        margin-bottom: 10px;
    }
}

/* Thong bao trong trang doc tu tat: mo dan roi bien, khong bien cai roup. */
.rtoast {
    transition: opacity .24s ease, transform .24s ease;
}

.rtoast.di {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
}

/* ==================================================== TRANG CHU
   Bo cot phai, them hang chip the loai va o sap xep.
   ================================================================ */

/* .hcols cu la luoi hai cot. Bo cot phai roi thi khong can luoi nua. */
.homecols {
    margin-top: 26px;
}

.browse {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
}

.browse .chips {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.browse .chips::-webkit-scrollbar {
    display: none;
}

/* O sap xep dung <details> nen khong can JavaScript. */
.sortbox {
    position: relative;
    flex-shrink: 0;
}

.sortbox summary {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    font-size: 13px;
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}

.sortbox summary::-webkit-details-marker {
    display: none;
}

.sortbox summary i {
    font-style: normal;
    color: var(--muted);
}

.sortbox[open] summary i {
    transform: rotate(180deg);
}

.sortbox .menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 30;
    display: grid;
    min-width: 170px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-solid);
    box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .6);
}

.sortbox .menu a {
    padding: 9px 11px;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    font-size: 13px;
}

.sortbox .menu a:hover {
    background: var(--raise);
}

/* --------------------------------------------- The moi kham pha o thanh ben
   margin-top:auto day no xuong day. .side da la flex column san. */
.sidecta {
    position: relative;
    overflow: hidden;
    margin-top: auto;
    padding: 16px 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--accent) 22%, transparent),
        color-mix(in srgb, var(--accent) 6%, transparent));
    color: inherit;
    text-decoration: none;
}

.sidecta .moon {
    display: block;
    width: 24px;
    height: 24px;
    margin-bottom: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 32%, #fff,
        color-mix(in srgb, var(--accent) 55%, #fff) 45%, var(--accent));
    box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 45%, transparent);
}

.sidecta b {
    display: block;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
}

.sidecta .go {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 12.5px;
    color: var(--accent);
}

.sidecta .go i {
    font-style: normal;
    transition: transform .18s;
}

.sidecta:hover .go i {
    transform: translateX(3px);
}

@media (max-width: 700px) {
    .browse {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .sortbox summary {
        justify-content: center;
    }
}

/* ------------------------------------- Che do doc gon tren dien thoai
   Man hinh nho thi thanh tren va kep sach an di, cham vao vung doc moi hien.
   Chu duoc tron be ngang, khong con phai chua le cho kep sach.

   Thanh tren dung position:sticky nen an bang transform khong lam chu nhay
   cho: khi da cuon xuong, cho cua no da troi qua roi. */
@media (max-width: 700px) {
    .rp2 .reader {
        max-width: none;
        padding-left: 20px;
        padding-right: 20px;
    }

    .rp2 .rtop,
    .rp2 .rkep {
        transition: opacity .2s ease, transform .2s ease;
    }

    .rp2:not(.hien-ui) .rtop {
        opacity: 0;
        transform: translateY(-100%);
        pointer-events: none;
    }

    .rp2:not(.hien-ui) .rkep {
        opacity: 0;
        transform: translateY(-16px);
        pointer-events: none;
    }
}

/* Mac dinh trang doc: khong thut dau dong, canh trai. Nguoi doc van doi duoc
   canh le trong bang cai dat. */
.reader p.pr {
    text-indent: var(--ri, 0);
    text-align: var(--ra, left);
}

/* Hero trang chu: bia truyen phong to lam mo o nen, bia sac net ben phai */
.hero .ph.anh {
    background-position: center 30%;
    transform: scale(1.15);
    filter: blur(20px) saturate(1.15) brightness(.72);
    transition: filter .5s ease, background-image .3s ease;
}

.hero .hbia {
    position: absolute;
    right: 6%;
    bottom: 0;
    height: 86%;
    width: auto;
    max-width: 32%;
    object-fit: cover;
    object-position: top center;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 20px 55px rgba(0, 0, 0, .5);
    transition: filter .5s ease;
}

@media (max-width: 860px) {
    .hero .hbia { display: none; }
}

/* Hero: chieu cao co dinh, khong nhay theo do dai mo ta */
.hero {
    min-height: 380px;
}

.hero .mask { z-index: 1; }
.hero .body { z-index: 2; max-width: 560px; }
.hero .pgn { z-index: 4; }

.hero h1 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hero p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 66px;
}

/* Bia dat giua theo chieu doc, khong cham goc phai duoi nen khong de nut chuyen slide */
.hero .hbia {
    right: 5%;
    bottom: 50%;
    transform: translateY(50%);
    height: 78%;
    width: auto;
    max-width: 30%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    object-position: center top;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08);
    z-index: 3;
}

.hero .ph.anh {
    background-position: center 30%;
    transform: scale(1.2);
    filter: blur(26px) saturate(1.2) brightness(.6);
}

@media (max-width: 860px) {
    .hero .hbia { display: none; }
    .hero .body { max-width: none; }
}
.syn{margin-top:10px;max-width:none}
.syntxt{display:block;width:100%;max-width:none;font-size:15px;line-height:1.85;word-break:break-word}
.syntxt.gon{max-height:14.8em;overflow:hidden}
.syntxt.gon.mo{max-height:none;overflow:visible}
.synmo{margin-top:8px;background:none;border:0;padding:0;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;color:#c0392b}
.synmo:hover{text-decoration:underline}
.synwrap{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:26px;align-items:start}
@media (max-width:860px){.synwrap{grid-template-columns:1fr;gap:18px}}
.sinfo{border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.sinfo h3{margin:0 0 8px;font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.srow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13.5px;padding:7px 0;border-bottom:1px solid var(--line)}
.srow:last-child{border-bottom:0}
.srow span{color:var(--muted);white-space:nowrap}
.srow b{font-weight:600;text-align:right}
.dhero{overflow:visible}
.dhero .sky{border-radius:24px;overflow:hidden}
@media (max-width:620px){.dhero .sky{border-radius:20px}}
.dwrap details[open] > .card{z-index:60}
.dhero:has(details[open]){z-index:50}
.synwrap{position:relative;z-index:1}
body .grid.grid4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){body .grid.grid4{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){body .grid.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rankfil{display:flex;flex-wrap:wrap;gap:14px;align-items:end;margin-top:16px}
.rankfil label{display:grid;gap:6px}
.rankfil label > span{font-size:12px;letter-spacing:.04em;color:var(--muted)}
.rankfil select{min-width:180px}
@media (max-width:560px){.rankfil{gap:10px}.rankfil label{flex:1 1 100%}.rankfil select{min-width:0;width:100%}}
.starbox{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.starlb{display:block;font-size:12.5px;color:var(--muted);margin-bottom:6px}
.stars{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px}
.star{background:none;border:0;padding:0 1px;font-size:23px;line-height:1;cursor:pointer;color:var(--line);transition:color .12s}
.star.on{color:var(--gold)}
.stars:hover .star{color:var(--line)}
.star:hover,.star:hover ~ .star{color:var(--gold)}
.gitem .cv .hot{top:auto;right:auto;bottom:8px;left:8px}
body.view-list .gitem .cv .hot{top:auto;right:auto;bottom:4px;left:4px}
.bxhead{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.bxhead .rankfil{margin-top:0}
.buc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:end;margin-top:24px}
.bcot{display:grid;gap:5px;justify-items:center;text-align:center;padding:16px 14px;border-radius:20px;border:1px solid var(--line);background:var(--surface);transition:transform .18s}
.bcot:hover{transform:translateY(-3px)}
.bcot .cv{width:100%;aspect-ratio:3/4;border-radius:14px;margin-bottom:4px}
.b1{order:2;border-color:var(--gold);padding:24px 16px}
.b2{order:1}
.b3{order:3}
.bhuy{font-size:22px;line-height:1}
.b1 .bhuy{font-size:30px}
.bt{width:100%;font-size:14px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ba{font-size:11.5px;color:var(--muted)}
.bsc{font-size:12.5px;font-weight:600;color:var(--gold)}
@media (max-width:700px){.buc{grid-template-columns:1fr;gap:12px}.b1,.b2,.b3{order:0;padding:14px}.bcot{grid-template-columns:auto minmax(0,1fr);justify-items:start;text-align:left;align-items:center;gap:4px 12px}.bcot .cv{grid-row:span 4;width:64px;margin:0}}
.bxhcard{margin-top:20px;padding:8px}
.bxhlist{display:grid;gap:2px}
.bxrow{display:flex;align-items:center;gap:12px;padding:10px;border-radius:14px;transition:background .15s}
.bxrow:hover{background:var(--raise)}
.bxn{flex-shrink:0;width:26px;text-align:center;font-size:14px;font-weight:700;color:var(--muted)}
.bxrow .cv{flex-shrink:0;width:40px;border-radius:9px}
.bxmid{min-width:0;flex:1;display:grid;gap:3px}
.bxt{font-size:13.5px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bxa{font-size:11.5px;color:var(--muted)}
.bxbar{display:block;height:4px;margin-top:3px;border-radius:3px;background:var(--line);overflow:hidden}
.bxbar i{display:block;height:100%;border-radius:3px;background:var(--gold)}
.bxsc{flex-shrink:0;font-size:12.5px;font-weight:600;color:var(--gold);white-space:nowrap}
@media (max-width:560px){.bxrow{gap:9px;padding:9px 6px}.bxsc{font-size:11.5px}}
.buc{gap:14px;margin-top:20px}
.bcot{padding:14px 12px;gap:4px}
.bcot .cv{width:min(100%,104px);margin-bottom:2px}
.b1{padding:18px 14px}
.b1 .cv{width:min(100%,124px)}
.bhuy{font-size:18px}
.b1 .bhuy{font-size:24px}
.bt{font-size:13px}
.ba{font-size:11px}
.bsc{font-size:12px}
@media (max-width:700px){.bcot .cv,.b1 .cv{width:64px}}
.bxrow{gap:14px;padding:12px 10px}
.bxn{width:32px;font-size:16px}
.bxrow .cv{width:56px;border-radius:10px}
.bxmid{gap:4px}
.bxt{font-size:15px}
.bxa{font-size:12.5px}
.bxbar{height:5px;margin-top:4px}
.bxsc{font-size:13.5px}
@media (max-width:560px){.bxrow .cv{width:46px}.bxt{font-size:14px}.bxn{width:26px;font-size:14px}}
.bcot .cv{width:min(100%,150px)}
.b1 .cv{width:min(100%,180px)}
.bcot{padding:16px 14px}
.b1{padding:20px 16px}
.bt{font-size:13.5px}
@media (max-width:700px){.bcot .cv,.b1 .cv{width:72px}}
.bxrow{gap:16px;padding:14px 10px}
.bxrow .cv{width:80px;border-radius:12px}
@media (max-width:560px){.bxrow{gap:11px;padding:11px 6px}.bxrow .cv{width:58px}}
.tknav{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 18px}
.tkl{padding:8px 14px;border-radius:999px;border:1px solid var(--line);font-size:13px;font-weight:500;white-space:nowrap}
.tkl:hover{background:var(--raise)}
.tkl.on{background:var(--gold);border-color:var(--gold);color:#1a1204}
.tkok{margin-bottom:16px;padding:11px 14px;border-radius:12px;border:1px solid var(--green);font-size:13.5px}
.tkwrap{display:grid;gap:18px}
.tkhead{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--line)}
.tkten{font-size:18px;font-weight:600}
.tkbadge{padding:4px 10px;border-radius:999px;font-size:11px;font-weight:600;white-space:nowrap}
.tkbadge.ok{background:var(--green);color:#06140d}
.tkbadge.no{border:1px solid var(--line);color:var(--muted)}
.tkbox{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}
@media (max-width:620px){.tkbox{grid-template-columns:1fr}}
.tkcell{display:grid;gap:7px;justify-items:start;padding:14px;border-radius:16px;border:1px solid var(--line)}
.tkl2{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tkbig{font-size:22px;font-weight:700}
.tkh2{margin:0 0 14px;font-size:16px}
.tkh2row{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.tksd{font-size:13px;color:var(--muted)}
.tksd b{color:var(--gold)}
.tkstat{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
.tkstat div{display:grid;gap:3px;padding:12px;border-radius:14px;border:1px solid var(--line)}
.tkstat b{font-size:20px;font-weight:700}
.tkstat span{font-size:11.5px;color:var(--muted)}
.tkrow{display:flex;gap:12px;align-items:baseline;justify-content:space-between;padding:10px 2px;border-bottom:1px solid var(--line)}
.tkrow:last-of-type{border-bottom:0}
.tkrt{font-size:14px;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tkform{max-width:520px}
.tkf{display:grid;gap:6px;margin-bottom:16px}
.tkf > span{font-size:12.5px;color:var(--muted)}
.tkerr{font-size:12px;color:#ff6b6b;font-style:normal}
.tkhint{display:block;font-size:12px;color:var(--muted);font-style:normal;margin-bottom:14px}
.tkgd{display:flex;gap:14px;align-items:center;justify-content:space-between;padding:12px 2px;border-bottom:1px solid var(--line)}
.tkgd:last-of-type{border-bottom:0}
.tkgl{display:grid;gap:2px;min-width:0}
.tkgt{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tkgr{display:grid;gap:2px;justify-items:end;text-align:right;flex-shrink:0}
.tkplus{font-size:15px;font-weight:700;color:var(--green)}
.tkminus{font-size:15px;font-weight:700;color:#ff6b6b}
.tkpager{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:18px}
.avamenu{position:relative}
.avamenu > summary{list-style:none;cursor:pointer}
.avamenu > summary::-webkit-details-marker{display:none}
.avapop{position:absolute;z-index:80;top:calc(100% + 10px);right:0;min-width:210px;padding:8px;
  border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow)}
.avahead{display:grid;gap:2px;padding:8px 10px 10px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.avahead b{font-size:14px}
.avahead span{font-size:12px;color:var(--muted)}
.avapop a,.avaout{display:block;width:100%;padding:9px 10px;border:0;border-radius:10px;
  background:none;font:inherit;font-size:13.5px;text-align:left;color:inherit;cursor:pointer}
.avapop a:hover,.avaout:hover{background:var(--raise)}
.avaout{margin-top:6px;border-top:1px solid var(--line);border-radius:0 0 10px 10px;color:#ff6b6b;font-weight:600}