/* =====================================================================
 * Quang cao - giao dien dung chung cho ban PC va ban mobile.
 *
 * MOI url() PHAI LA DUONG DAN TUYET DOI bat dau bang /static/
 * Ban minify nam sau hon mot cap (css/ -> css/dist/) nen moi duong dan
 * tuong doi kieu url(../images/x.png) se tro sang cho khong ton tai.
 * tools/build-css.js co kiem lai va se BO HAN file neu con sot, nhung
 * dung de no phai lam viec do.
 *
 * Khong dung mau viet cung cho nen: quang cao nam tren ca giao dien sang
 * lan toi. Chi dung mau trung tinh cho nut dong, va nut do tu co vien
 * sang/toi rieng qua prefers-color-scheme + data-theme.
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * KHOI CHUA - mot vi tri, nhieu quang cao xep chong
 * ------------------------------------------------------------------- */
.ad-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.ad-unit {
    position: relative;
    display: block;
    max-width: 100%;
    line-height: 0; /* bo khe trang duoi the img inline */
}

/* =====================================================================
 * QUANG CAO DANG MA PHAI CHIEM HET BE NGANG
 * =====================================================================
 * .ad-stack la flex container voi align-items: center, nen theo mac dinh
 * MOI phan tu con CO LAI bang be rong noi dung cua no. Voi quang cao dang
 * ANH thi do dung la cai ta muon: anh giu kich thuoc that, nam giua, va
 * nut dong bam sat mep anh.
 *
 * Voi quang cao dang HTML/script thi do la hong. Ma cua nha quang cao
 * thuong la mot khoi khong dat be rong (no tuong minh se duoc rong bang
 * khung chua), nen co lai theo noi dung cho ra mot dai chi rong bang doan
 * chu ben trong - va nut dong de len chinh doan chu do.
 *
 * Da nhin thay tren trang that: dai "HOME TOP" do duoc 80x44 thay vi
 * 1200x44, nut dong nam de len giua chu.
 * ===================================================================== */
.ad-stack > .ad-unit--html,
.ad-stack > .ad-unit--script {
    width: 100%;
}

/* Quang cao dang cho JS mo khoa (co han muc) - giu cho nhung chua hien.
 * Dung [hidden] cua HTML chu khong phai mot class rieng: trinh duyet nao
 * cung hieu, va neu ads.js khong chay duoc thi quang cao co han muc don
 * gian la khong hien - dung huong an toan. */
.ad-unit[hidden] {
    display: none !important;
}

/* Bo chon la `.ad-unit .ad-img` (do uu tien 0,2,0) chu khong phai `.ad-img`
 * (0,1,0). Khong phai lam dang:
 *
 *     mstyle.css:626    .view-main-1 img -mo- width: 100%     (0,1,1)
 *     pc_read.css       .comicpage img   -mo- max-width: 100% (0,1,1)
 *
 * Hai luat do nham thang vao danh sach anh cua chuong, va quang cao chen
 * GIUA danh sach do thi dinh luon. `width: 100%` ma khong co `height: auto`
 * keo mot banner 320x100 ra het be ngang man hinh trong khi chieu cao giu
 * nguyen - anh meo hoan toan. Mot bo chon 0,1,0 se thua va khong sua duoc gi. */
.ad-unit .ad-img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.ad-link {
    display: block;
    line-height: 0;
}

.ad-html {
    line-height: normal;
}

/* Khoi trong dong chay: chua khoang cach voi noi dung xung quanh, va tu
 * gioi han chieu rong.
 *
 * max-width o DAY chu khong boc them mot the div.container o tung trang:
 * boc bang the thi cai the do van in ra ca khi khong co quang cao nao, va
 * moi trang lai phai nho boc. Mot quy tac CSS lo het, va bien mat cung luc
 * voi khoi quang cao khi khong co gi de hien.
 *
 * 1200px la be rong noi dung cua ban PC (khung hinh co the rong 1440px).
 * Tren dien thoai gia tri nay khong bao gio cham toi vi width:100% nho hon. */
.ad-stack--home_top,
.ad-stack--list_top,
.ad-stack--book_top,
.ad-stack--reader_top,
.ad-stack--reader_bottom,
.ad-stack--reader_inline {
    max-width: 1200px;
    margin: 10px auto;
}

/* ---------------------------------------------------------------------
 * NUT DONG
 *
 * Vung bam 28x28 chu khong phai bang dung kich thuoc bieu tuong: mot muc
 * tieu 12px la thu rat kho trung tren dien thoai, va nut dong kho bam
 * chinh la thu bien mot quang cao thanh mot phien phuc.
 * ------------------------------------------------------------------- */
.ad-close {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 999px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.ad-close:hover {
    background: rgba(0, 0, 0, .78);
}

.ad-close img {
    display: block;
    width: 20px;
    height: 20px;
}

.ad-close--text {
    font-size: 12px;
}

/* Chua toi luc cho dong (close_delay) - van chiem cho de khong nhay layout. */
.ad-close[data-ad-chuadong] {
    visibility: hidden;
}

/* ---------------------------------------------------------------------
 * CATFISH - dinh tren dau / duoi day man hinh
 *
 * =====================================================================
 * TUYET DOI KHONG DAT `body { padding-top: ... }` O FILE NAY
 * =====================================================================
 * body.padding DA CO CHU - hai chu, va deu ghi vao no:
 *
 *   1. CSS tinh:  style.css:4929  body -mo- padding-top: 74px (thanh dau PC)
 *                 pc_read.css     body -mo- padding-top: 56px (trang doc)
 *   2. JS luc chay: m/index/index.html co bo nghe su kien cuon ghi thang
 *      $('body').css('padding-top', ...) de lam hieu ung thanh dau.
 *
 * ads.css nap SAU CUNG trong khoi head, nen mot quy tac `body` o day se
 * ghi de nhom (1) ve 0 va lam thanh dau position:fixed CHE MAT dong dau
 * tien cua noi dung tren MOI trang PC. Con nhom (2) thi khong quy tac CSS
 * nao thang duoc mot cach sach se - do la inline style ghi lai lien tuc.
 *
 * Vi vay khoang trong cho catfish KHONG nam o body.padding chut nao:
 * ads.js chen hai the dem cua rieng no vao dau/cuoi body va chi doi
 * chieu cao cua hai the do. Khong tranh chap quyen so huu voi ai.
 * Xem ghi chu day du o ham doCatfish() trong ads.js.
 *
 * ads.js khong chay duoc (bi chan, tai hong) thi catfish van hien va van
 * noi tren noi dung - dung nhu ban chat cua no - chi la trang khong duoc
 * chua them cho. Do la huong hong an toan.
 * ------------------------------------------------------------------- */
.ad-stack--catfish_top,
.ad-stack--catfish_bottom {
    position: fixed;
    left: 0;
    right: 0;
    /* Cao hon moi thanh co dinh cua site, ke ca thanh cong cu cua trang
     * doc (z-index 2147483647 viet cung trong m/chapters). Thap hon la
     * catfish nam KHUAT ben duoi va khong ai thay no ca. */
    z-index: 2147483647;
    gap: 0;
    background: transparent;
    pointer-events: none; /* phan trong cua dai khong chan cu bam cua trang */
}

.ad-stack--catfish_top {
    top: 0;
}

.ad-stack--catfish_bottom {
    bottom: 0;
}

.ad-stack--catfish_top .ad-unit,
.ad-stack--catfish_bottom .ad-unit {
    width: 100%;
    pointer-events: auto;
    text-align: center;
    background: rgba(0, 0, 0, .04);
}

/* ---------------------------------------------------------------------
 * POPUP
 * ------------------------------------------------------------------- */
.ad-popup {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.ad-popup[hidden] {
    display: none !important;
}

.ad-popup-nen {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .62);
}

.ad-popup-hop {
    position: relative;
    max-width: 100%;
    max-height: 92vh;
    overflow: auto;
}

.ad-popup-hop .ad-close {
    top: -6px;
    right: -6px;
    min-width: 32px;
    height: 32px;
    font-size: 16px;
}

/* Dau trang doc: thanh cong cu cua ban mobile la position:fixed nen mot
 * khoi dat ngay dau body se nam KHUAT ben duoi no. Khoi quang cao cu o day
 * mang margin-top:70px viet thang trong template - chuyen vao day de no di
 * cung voi vi tri chu khong di cung mot the div cu the. */
.ad-stack--reader_top {
    margin-top: 70px;
}

/* ---------------------------------------------------------------------
 * CHEN GIUA DANH SACH ANH CHUONG
 *
 * Trang doc co nen toi rieng, khong theo theme cua site, nen khoi chen
 * vao giua khong duoc mang nen sang.
 * ------------------------------------------------------------------- */
.ad-stack--reader_inline {
    background: transparent;
    padding: 6px 0;
}

.ad-stack--reader_inline .ad-unit {
    max-width: 760px;
}

/* ---------------------------------------------------------------------
 * GIAO DIEN TOI
 * ------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    .ad-stack--catfish_top .ad-unit,
    .ad-stack--catfish_bottom .ad-unit {
        background: rgba(255, 255, 255, .06);
    }
}

:root[data-theme="dark"] .ad-stack--catfish_top .ad-unit,
:root[data-theme="dark"] .ad-stack--catfish_bottom .ad-unit {
    background: rgba(255, 255, 255, .06);
}

:root[data-theme="light"] .ad-stack--catfish_top .ad-unit,
:root[data-theme="light"] .ad-stack--catfish_bottom .ad-unit {
    background: rgba(0, 0, 0, .04);
}

/* ---------------------------------------------------------------------
 * MAN HINH HEP
 * ------------------------------------------------------------------- */
@media (max-width: 640px) {
    .ad-stack--reader_inline .ad-unit {
        max-width: 100%;
    }

    .ad-popup {
        padding: 10px;
    }
}