/* =====================================================================
   BANG BINH LUAN MOI - tren trang chu (PC va mobile)

   VI SAO LA FILE RIENG, KHONG NHET VAO cmt.css

   cmt.css nang ~50 KB va trang chu khong nap no. Bat trang chu tai ca file
   do chi de ve mot khoi la tra gia sai cho: trang chu la trang nguoi dung
   den DAU TIEN, va la trang duoc do Core Web Vitals nhieu nhat.

   File nay TU CHUA: no khai bao bang mau cua rieng minh thay vi dua vao
   bien cua .cmt-wrap trong cmt.css. Bien --cmt-* chi ton tai ben trong
   .cmt-wrap, ma o day khong nap cmt.css nen chung se rong - dung loi da
   lam bang chon icon trong suot tren mobile (xem ghi chu trong cmt.css).

   KICH THUOC ON DINH LA YEU CAU BAT BUOC. Khoi nay render san o may chu
   nen no nam trong lan ve dau tien; anh dai dien tai sau ma khong co cho
   danh san thi ca trang giat - do la CLS, thu Google do that.
   ===================================================================== */

.cmt-newest-wrap {
  /* Bang mau toi, khop giao dien hien tai cua site. Ban sang o cuoi file. */
  --cn-bg:        #17181c;
  --cn-bg-soft:   #1e2026;
  --cn-bg-hover:  #24262e;
  --cn-border:    #2c2f38;
  --cn-text:      #e6e7ea;
  --cn-text-dim:  #9aa0a6;
  --cn-text-mute: #6b7078;
  --cn-accent:    #ff5f8f;
  --cn-radius:    10px;
}

/* KHONG dat `color` tren the ngoai: the <header> cua tieu de nam trong do,
   va mau chu se de len mau ma style.css/mstyle.css dat cho tieu de cac
   khoi khac - lam khoi nay lech mau so voi phan con lai cua trang chu.
   Dat mau o danh sach ben duoi thi tieu de van theo trang. */

/* Tieu de KHONG dat kieu o day.
   - Ban PC dung <header class="box-header"> trong <section class="box">,
     style den tu ".box .box-header" cua style.css - giong het cac khoi
     khac tren trang chu.
   - Ban mobile dung class "manga-list-title index" cua mstyle.css, keo
     theo ca vach do ben trai (.manga-list-title.index:after).
   Dat font-size/padding rieng o day la danh nhau voi hai bo do va lam
   khoi nay lech khoi phan con lai cua trang - dung van de can sua. */

.cmt-newest {
  color: var(--cn-text);
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--cn-bg);
  border: 1px solid var(--cn-border);
  border-radius: var(--cn-radius);
  overflow: hidden;
}

.cmt-newest-item {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--cn-border);
  /* Bo qua viec ve nhung dong chua cuon toi. contain-intrinsic-size cho
     trinh duyet biet truoc cho trong - thieu no thi thanh cuon nhay khi
     cuon qua, tuc la doi mot van de nay lay mot van de khac. */
  content-visibility: auto;
  contain-intrinsic-size: auto 118px;
}
.cmt-newest-item:last-child { border-bottom: 0; }

.cmt-newest-ava { flex: 0 0 auto; line-height: 0; }

/* Kich thuoc o avatar nam tren .cmt-ava-wrap chu khong tren anh: khung deo
   them la mot anh THU HAI trong cung the boc, va no phai duoc phep tran ra
   ngoai (147% - xem .cmt-ava-frame trong cmt-decor-inline.css).

   Vi vay luat duoi day nham vao .cmt-ava chu khong nham vao `img`. Viet
   ".cmt-newest-ava img" la bat luon ca anh khung roi ep no ve 36px bo tron -
   khung se bien thanh mot cai dia de len avatar. */
.cmt-newest-ava .cmt-ava-wrap {
  /* display:block la BAT BUOC. The boc o day la <span> (ban render o may chu
     dung the inline cho gon); span mac dinh la display:inline nen width va
     height bi bo qua hoan toan. Khi do o avatar cao 0, con khung - von la
     147% cua o do va dat tuyet doi - lay kich thuoc tu anh goc va phinh len
     gap may lan, de len ca chu. cmt.js khong dinh loi nay vi ben do the boc
     duoc tao bang createElement('div'). */
  display: block;
  position: relative;
  width: 36px;
  height: 36px;
}
.cmt-newest-ava .cmt-ava {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.cmt-newest-ava-sm {
  display: flex;
  /* .cmt-newest-ava dat line-height:0 (de the <a> khong chua khoang trang
     thua quanh anh) va gia tri do DUOC KE THUA xuong day. Chu cai thay anh
     dai dien khi do nam tren mep tren cua vong tron chu khong o giua no.
     Dat lai line-height ngay tai day. */
  line-height: 1;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: var(--cn-bg-hover);
  color: var(--cn-text-dim);
  font-size: 15px;
  text-transform: uppercase;
}

.cmt-newest-main { flex: 1 1 auto; min-width: 0; }

/* Dong ten la mot DONG RIENG, khong ghep vao cau "... binh luan o ...".
   Mot nguoi co the deo cung luc: kieu ten, huy hieu cap, danh hieu, the
   quyen, VIP va ba huy chuong. Nhet tat ca vao giua mot cau thi cau do vo
   vun tren mobile va khong con doc duoc.

   Cac lop .cmt-lv / .cmt-rank / .cmt-role / .cmt-badges / .cmt-np-* /
   .cmt-ava-frame KHONG dinh nghia trong file nay - chung den tu
   cmt-decor-inline.css, file SINH RA tu cmt.css. Sua mau/kich thuoc cua
   chung thi sua ben cmt.css roi chay:
       node tools/gen-cmt-decor-inline.js */
.cmt-newest-who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin: 0 0 2px;
  line-height: 1.5;
}

.cmt-newest-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  margin: 0 0 3px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--cn-text-dim);
}
.cmt-newest-user { color: var(--cn-text); font-weight: 600; }
.cmt-newest-at   { margin: 0 4px; }
.cmt-newest-book { color: var(--cn-accent); }
.cmt-newest-chap { color: var(--cn-text-mute); }

.cmt-newest-body {
  color: var(--cn-text);
  font-size: 14px;
  line-height: 1.55;
  word-break: break-word;
  /* Cat con 2 dong: mot binh luan dai khong duoc phep day cac dong khac
     xuong duoi man hinh dau tien. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Icon do IconService::render() sinh ra. Chi lay dung phan can thiet o day
   thay vi keo ca cmt.css sang. */
.cmt-newest-body .cmt-ico,
.cmt-newest-wrap .cmt-sticker {
  vertical-align: -3px;
  display: inline-block;
}
.cmt-newest-body .cmt-ico { height: 20px; width: auto; }
.cmt-newest-wrap .cmt-stickers { display: flex; gap: 6px; margin-top: 5px; }
.cmt-newest-wrap .cmt-sticker { height: 56px; width: auto; border-radius: 6px; }
.cmt-newest-wrap .cmt-emo { font-size: 16px; }
.cmt-newest-wrap .cmt-emo-text { font-size: 12px; color: var(--cn-text-mute); }
.cmt-newest-wrap .cmt-at { color: var(--cn-accent); }

.cmt-newest-meta {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--cn-text-mute);
}
.cmt-newest-meta span,
.cmt-newest-meta time { margin-right: 12px; }

.cmt-newest-more {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 9px 0;
  border: 1px solid var(--cn-border);
  border-radius: var(--cn-radius);
  background: var(--cn-bg-soft);
  color: var(--cn-text-dim);
  font-size: 13px;
  cursor: pointer;
}
.cmt-newest-more:hover { background: var(--cn-bg-hover); }
.cmt-newest-more[disabled] { opacity: .6; cursor: default; }

@media (max-width: 640px) {
  .cmt-newest-wrap { margin-bottom: 16px; }
  .cmt-newest { border-left: 0; border-right: 0; border-radius: 0; }
  .cmt-newest-item { padding: 10px 12px; contain-intrinsic-size: auto 110px; }
  .cmt-newest-ava .cmt-ava-wrap { width: 32px; height: 32px; }
  .cmt-newest-ava-sm { font-size: 13px; }
  .cmt-newest-body { font-size: 13.5px; }
}

/* ---------------------------------------------------------------- SANG

   Bam theo theme cua SITE truoc, roi moi den he dieu hanh - cung thu tu
   voi theme.css. Dat cai cua site sau de no thang khi ca hai cung ap. */

@media (prefers-color-scheme: light) {
  .cmt-newest-wrap:not([data-theme="dark"]) {
    --cn-bg:        #ffffff;
    --cn-bg-soft:   #f5f6f8;
    --cn-bg-hover:  #eceef2;
    --cn-border:    #e2e5ea;
    --cn-text:      #1c1e21;
    --cn-text-dim:  #606770;
    --cn-text-mute: #8a8d91;
  }
}

html[data-theme="light"] .cmt-newest-wrap {
  --cn-bg:        #ffffff;
  --cn-bg-soft:   #f5f6f8;
  --cn-bg-hover:  #eceef2;
  --cn-border:    #e2e5ea;
  --cn-text:      #1c1e21;
  --cn-text-dim:  #606770;
  --cn-text-mute: #8a8d91;
}

html[data-theme="dark"] .cmt-newest-wrap {
  --cn-bg:        #17181c;
  --cn-bg-soft:   #1e2026;
  --cn-bg-hover:  #24262e;
  --cn-border:    #2c2f38;
  --cn-text:      #e6e7ea;
  --cn-text-dim:  #9aa0a6;
  --cn-text-mute: #6b7078;
}