/* =====================================================================
   Trang The loai (/comics) - ban PC

   Chi nap o trang nay (block "css" cua pc/booklist/index.html), khong nhet
   them vao style.css: file do da 5.700 dong va duoc MOI trang nap.

   Giao dien toi: dung bien cuc bo giong message.css, KHONG dua vao ban do
   mau tu sinh trong theme.css - ban do do doc tu style.css nen khong biet
   gi ve cac lop o day.
   ===================================================================== */

.bl-filter {
    --bl-bg:      #fff;
    --bl-soft:    #f6f7f9;
    --bl-hover:   #eef0f3;
    --bl-border:  #e3e5e9;
    --bl-text:    #252525;
    --bl-dim:     #6b7078;
    --bl-accent:  #fd113a;
    --bl-on-bg:   #fd113a;
    --bl-on-text: #fff;
}

/* ------------------------------------------------------------ TIEU DE */

.bl-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    padding: 18px 2px 0;
}

.bl-h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: #252525;
}

.bl-count { margin: 0; font-size: 13px; color: #6b7078; }
.bl-count b { color: #fd113a; font-weight: 600; }

/* ------------------------------------------------------------- BO LOC */

.bl-filter { padding: 4px 20px 16px; }

.bl-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--bl-border);
}
.bl-row:last-of-type { border-bottom: 0; }

.bl-label {
    flex: 0 0 74px;
    padding-top: 5px;
    font-size: 13px;
    font-weight: 600;
    color: var(--bl-dim);
}

.bl-tags,
.bl-opts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}

/* Thu gon: JS do chieu cao that roi quyet dinh co can nut "Xem them" khong.
   Dat o CSS chu khong cat bang so luong the: cac the rong khac nhau nen
   "30 the" co the la 2 hang hoac 5 hang tuy man hinh. */
.bl-tags.is-collapsed {
    max-height: 104px;
    overflow: hidden;
}

.bl-chip {
    display: inline-block;
    padding: 5px 11px;
    border: 1px solid var(--bl-border);
    border-radius: 999px;
    background: var(--bl-soft);
    color: var(--bl-text);
    font-size: 13px;
    line-height: 1.35;
    text-decoration: none;
    white-space: nowrap;
    transition: background .12s, border-color .12s, color .12s;
}
.bl-chip:hover  { background: var(--bl-hover); border-color: #c9ccd2; color: var(--bl-accent); }
.bl-chip:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 2px; }

/* Muc dang chon: NEN dac chu khong chi doi mau chu.
   Ban cu chi doi mau chu sang do - tren mot bien 182 muc thi gan nhu khong
   the nhan ra minh dang o dau. */
.bl-chip.is-on {
    background: var(--bl-on-bg);
    border-color: var(--bl-on-bg);
    color: var(--bl-on-text);
    font-weight: 600;
}
.bl-chip.is-on:hover { color: var(--bl-on-text); }

/* ------------------------------------------------- TIM + XEM THEM */

.bl-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 0 0 12px 84px;
    border-bottom: 1px solid var(--bl-border);
}

.bl-search {
    width: 210px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--bl-border);
    border-radius: 999px;
    background: var(--bl-bg);
    color: var(--bl-text);
    font-size: 13px;
}
.bl-search::placeholder { color: var(--bl-dim); }
.bl-search:focus { outline: none; border-color: var(--bl-accent); }

.bl-more {
    height: 32px;
    padding: 0 14px;
    border: 1px solid var(--bl-border);
    border-radius: 999px;
    background: var(--bl-bg);
    color: var(--bl-dim);
    font-size: 13px;
    cursor: pointer;
}
.bl-more:hover { color: var(--bl-accent); border-color: var(--bl-accent); }

.bl-empty { font-size: 13px; color: var(--bl-dim); }

/* --------------------------------------------------- BO LOC DANG AP */

.bl-active {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 0 2px;
}

.bl-tag-on {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(253, 17, 58, .1);
    color: var(--bl-accent);
    font-size: 13px;
    font-weight: 600;
}

.bl-clear {
    font-size: 13px;
    color: var(--bl-dim);
    text-decoration: underline;
}
.bl-clear:hover { color: var(--bl-accent); }

/* ------------------------------------------------------- THE TRUYEN */

/* Nhan trang thai nam tren anh bia. position:relative dat o the <a> bao
   ngoai anh - the do von tinh, khong co moc dinh vi nao. */
.mh-item > a { position: relative; display: block; }

.bl-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .62);
    color: #fff;
    font-size: 11px;
    line-height: 1.6;
    font-weight: 600;
    pointer-events: none;
}
.bl-badge.is-done { background: rgba(22, 133, 72, .88); }

/* Chuong moi nhat - thay cho hang "Xep hang: 5 sao" von giong het nhau o
   moi dong. Mot dong, cat bang ellipsis, co title de xem day du. */
.bl-last {
    margin: 2px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #6b7078;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bl-last-none { color: #9aa0a6; font-style: italic; }

/* Ten truyen: giu mot dong nhu cu nhung bo style noi tuyen o template. */
.mh-list .mh-item-detali .title a {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bl-none {
    padding: 48px 12px;
    text-align: center;
    font-size: 14px;
    color: #6b7078;
}
.bl-none a { color: #fd113a; text-decoration: underline; }

/* ---------------------------------------------------- GIAO DIEN TOI */

html[data-theme="dark"] .bl-filter {
    --bl-bg:      #17181c;
    --bl-soft:    #1e2026;
    --bl-hover:   #262931;
    --bl-border:  #2c2f38;
    --bl-text:    #e6e7ea;
    --bl-dim:     #9aa0a6;
    --bl-accent:  #ff5f8f;
    --bl-on-bg:   #ff3f60;
    --bl-on-text: #fff;
}

html[data-theme="dark"] .bl-h1        { color: #e6e7ea; }
html[data-theme="dark"] .bl-count     { color: #9aa0a6; }
html[data-theme="dark"] .bl-count b   { color: #ff5f8f; }
html[data-theme="dark"] .bl-chip:hover{ border-color: #3a3e48; }
html[data-theme="dark"] .bl-tag-on    { background: rgba(255, 95, 143, .14); color: #ff8aab; }
html[data-theme="dark"] .bl-last      { color: #9aa0a6; }
html[data-theme="dark"] .bl-last-none { color: #6b7078; }
html[data-theme="dark"] .bl-none      { color: #9aa0a6; }
html[data-theme="dark"] .bl-none a    { color: #ff5f8f; }