/* Thong bao + quang cao cua tac gia, tren trang chi tiet truyen.
 *
 * FILE RIENG chu khong nhet vao style.css / mstyle.css:
 * STATIC.MINIFY_CSS dang TAT tren may chu, nen sua hai file do la phai
 * bump `?v=` o moi template tham chieu chung - va quen bump la loi da
 * xay ra that o repo nay (Cloudflare giu ban cu 12 tieng).
 *
 * Mot file cho CA HAI ban: markup giong het nhau (author-pr/block.html),
 * chi kich thuoc khac. Cac luat rieng cho man hinh hep nam o cuoi.
 *
 * Bien mau lay tu he bien cua theme de khoi nay tu di theo giao dien
 * sang/toi ma khong phai viet hai bo luat. Co gia tri du phong cho
 * truong hop trang do chua nap theme.css. */

.apr {
    margin: 12px 0;
    border-radius: 8px;
    overflow: hidden;
}

/* ------------------------------------------------------------------
   THONG BAO
   ------------------------------------------------------------------ */
.apr-notice {
    border: 1px solid var(--apr-vien, #e6e0cf);
    background: var(--apr-nen, #fffdf5);
    padding: 12px 14px;
}

.apr-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.apr-i {
    width: 16px;
    height: 16px;
    flex: none;
    fill: var(--apr-nhan-nen, #c8912a);
}

.apr-nhan {
    font-size: 11px;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 3px;
    color: #fff;
    background: var(--apr-nhan-nen, #c8912a);
    white-space: nowrap;
}

.apr-title {
    /* min-width:0 la bat buoc trong flex: mac dinh min-width cua mot muc
       flex la `auto`, tuc no khong bao gio co lai duoi be rong noi dung
       va mot tieu de dai se day cai nhan ra khoi hang. */
    min-width: 0;
    flex: 1 1 200px;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--apr-chu, #4a3a12);
}

.apr-body {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--apr-chu, #4a3a12);
    word-break: break-word;
}

.apr-body a {
    color: var(--apr-link, #1e7fd4);
    text-decoration: underline;
}

.apr-body .apr-quote {
    margin: 6px 0;
    padding: 6px 10px;
    border-left: 3px solid var(--apr-nhan-nen, #c8912a);
    background: rgba(0, 0, 0, .035);
    border-radius: 0 4px 4px 0;
}

.apr-body .apr-list {
    margin: 6px 0 6px 18px;
    padding: 0;
    list-style: disc;
}

.apr-body .apr-list li {
    list-style: disc;
    margin: 2px 0;
}

/* ------------------------------------------------------------------
   QUANG CAO
   ------------------------------------------------------------------ */
.apr-ad {
    position: relative;
    display: block;
    line-height: 0;
}

.apr-ad-a {
    display: block;
}

/* Hai lop cung mot y: aspect-ratio giu o dung 20:9 ke ca truoc khi anh
   ve, object-fit chan anh lech ty le bi keo gian. May chu da chan ty le
   luc tai len, nhung mot ban ghi cu hoac mot lan sua thang trong DB van
   co the lot - va lot thi meo mat nguoi trong banner chu khong bao loi.

   Do uu tien 0,2,0 (hai lop) de thang luat `img` chung cua theme, giong
   cach .ad-unit .ad-img da phai lam. */
.apr-ad .apr-ad-a img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 20 / 9;
    object-fit: cover;
    border-radius: 8px;
}

/* Nhan "Quang cao" BAT BUOC co va bat buoc doc duoc.
   Nen toi mo + chu trang chay duoc tren moi anh, khong phu thuoc mau
   anh nguoi dung tai len. */
.apr-ad-nhan {
    position: absolute;
    right: 6px;
    bottom: 6px;
    font-size: 10px;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 3px;
    color: #fff;
    background: rgba(0, 0, 0, .55);
    pointer-events: none;
}

/* ------------------------------------------------------------------
   GIAO DIEN TOI
   ------------------------------------------------------------------ */
:root[data-theme="dark"] .apr-notice,
:root.dark .apr-notice {
    --apr-vien: #4a4230;
    --apr-nen: #241f14;
    --apr-chu: #e6dcc2;
    --apr-link: #7ec0ff;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .apr-notice {
        --apr-vien: #4a4230;
        --apr-nen: #241f14;
        --apr-chu: #e6dcc2;
        --apr-link: #7ec0ff;
    }
}

/* ------------------------------------------------------------------
   MAN HINH HEP
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
    .apr {
        margin: 10px 8px;
    }

    .apr-notice {
        padding: 10px 11px;
    }

    .apr-title {
        font-size: 14px;
        flex-basis: 100%;
    }

    .apr-body {
        font-size: 13px;
    }
}