/* ==========================================================================
   Luoi truyen phang, tu chia cot theo be ngang man hinh (ban mobile).

   Thay cho kieu cu: mot hang duy nhat nam trong swiper, muon xem tiep phai
   vuot ngang. Kieu do giau noi dung sau mot cu cham ma khong co dau hieu gi
   bao rang con truyen o ben phai.

   VI SAO auto-fill CHU KHONG PHAI MEDIA QUERY
   So cot khong bam theo mot danh sach be ngang doan truoc (360/414/768...) ma
   suy ra tu chinh cho con trong: repeat(auto-fill, minmax(108px, 1fr)) xep
   them mot cot moi khi con du 108px. Nho vay man hinh gap, cua so chia doi hay
   co chu phong to deu ra so cot dung ma khong phai them mot diem ngat nao.

   108px la con so nho nhat cho ra dung bo cuc mong muon (do thuc te tren
   Chrome, khoang cach cot 8px + padding 10px moi ben):

       may nho   320px -> 2 cot, anh ~146px
       may vua   360px -> 3 cot, anh ~108px
                 390px -> 3 cot, anh ~118px
                 412px -> 3 cot, anh ~125px
                 430px -> 3 cot, anh ~131px
       bang      768px -> 6 cot, anh ~118px

   12 the (so luong controller lay) chia HET cho 2, 3 va 6 - dung ba so cot o
   tren - nen hang cuoi khong bao gio con mot the dung le. Doi con so 108 nay
   thi phai kiem lai dieu do: vi du 5 cot se lam 12 the thanh 2 hang le 2.

   File RIENG chu khong nhet vao mstyle.css: mstyle.css di qua Cloudflare voi
   max-age 12 tieng nen moi lan sua la mot lan phai tang ?v= o tat ca cho tham
   chieu. File moi chua tung co ban cache nao.

   Cac lop BEN TRONG the (.manga-list-2-cover / -title / -tip) duoc GIU
   NGUYEN ten cu, co chu dinh: theme.css da co san luat cho chung o giao dien
   toi. Doi ten thi phai chep lai toan bo phan mau do, va theme.css lai la file
   SINH RA tu tools/gen-dark-theme.py nen sua tay se bi ghi de.
   ========================================================================== */

.manga-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
    gap: 16px 8px;
    margin: 0;
    padding: 10px;
    list-style: none;
}

/* Grid item mac dinh co min-width:auto - no KHONG cho phan tu co lai nho hon
   noi dung ben trong, nen text-overflow:ellipsis cua ten truyen khong bao gio
   an ra. Dat ve 0 thi ten dai moi bi cat bang dau ba cham dung y. */
.manga-grid > li {
    min-width: 0;
}

/* Ban swiper day tung the ra bang padding ngang; o luoi thi khoang cach da do
   gap lo, giu them padding se lam anh hep lai khong deu. */
.manga-grid .manga-list-2-cover {
    padding: 0;
}

.manga-grid .manga-list-2-title,
.manga-grid .manga-list-2-tip {
    padding-left: 0;
}

.manga-grid .manga-list-2-tip {
    padding-bottom: 0;
}

/* mstyle.css dat cung 105x140 cho anh bia. O luoi thi be rong mot cot thay
   doi theo man hinh nen kich thuoc cung se pha vo hang; doi sang 100% be rong
   cot va giu dung ty le 3:4 cua 105x140.

   aspect-ratio dat cho san TRUOC khi anh tai xong - anh o day tai theo kieu
   lazy (src la loading.gif roi moi doi sang anh that), nen khong co no thi ca
   luoi nhay mot nhip khi anh ve. */
.manga-grid .manga-list-2-cover-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 6px;
    background-color: rgba(127, 127, 127, .12);
}

/* Trinh duyet cu chua ho tro aspect-ratio: dung lai meo padding-top de van
   giu cho, khong de luoi nhay. 133.33% = 4/3. */
@supports not (aspect-ratio: 3 / 4) {
    .manga-grid .manga-list-2-cover a {
        display: block;
        position: relative;
        padding-top: 133.33%;
    }

    .manga-grid .manga-list-2-cover-img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
    }
}

/* theme.css cho nen toi cho .manga-list / .manga-list-2 / .book-list bang
   danh sach class go cung. .manga-grid la lop moi nen khong nam trong do -
   khai bao o day, neu khong khoi luoi se la mot mang trang giua trang toi. */
html[data-theme="dark"] .manga-grid {
    background-color: var(--dk-surface);
}