/* ============================================================================
   AVA — anh dai dien, MOT BO cho ca site.
   [2026-08-21] Truoc do moi noi tu ve lay: the trang chu dung <span> to 24px
   voi background-image, the tap chi dung <span><img> 22px, card thanh vien
   88px, binh luan 30px, o nhap binh luan 44px. Cung mot vat the ma bon kich
   thuoc, ba cach dat anh, bon cho khai bao -> nhin la thay lech nhau.
   Nay: MOT markup (span.cq-ava > img), MOT cho khai bao hinh dang, kich thuoc
   goi bang ten. Chi doi so o day, khong sua o trang nao khac.
   ========================================================================= */

.cq-ava {
    display: block;
    width: var(--cq-ava-size, var(--cq-ava-sm));
    height: var(--cq-ava-size, var(--cq-ava-sm));
    flex: 0 0 var(--cq-ava-size, var(--cq-ava-sm));
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--cq-light);
    /* Anh nen: dung cho noi chi co URL, khong chen duoc the <img> */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* [2026-08-21] KHONG con !important. Loi ghi chu cu — "Site.css co img{height:
   auto !important}" — la mot truyen thuyet: do lai tren trang dang chay thi
   Site.css ghi `img{height:auto}` KHONG he co !important, va Reponsive.css
   cung vay. Mot bo chon co lop da thang `img` roi. Da thu bo !important tren
   the tap chi: avatar van 24x24, khong xe dich.
   (Cau nay con duoc chep sang Comment.css, Magazine.css, MediaView.css,
   cq-plant.css — nhung file do de lai cho luot don cua chinh chung.) */
.cq-ava > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* Kich thuoc goi bang ten — so that nam o Theme.css */
.cq-ava--xs { --cq-ava-size: var(--cq-ava-xs); }
.cq-ava--sm { --cq-ava-size: var(--cq-ava-sm); }
.cq-ava--md { --cq-ava-size: var(--cq-ava-md); }
.cq-ava--lg { --cq-ava-size: var(--cq-ava-lg); }
.cq-ava--xl { --cq-ava-size: var(--cq-ava-xl); }

/* Tren nen anh / nen mau (the hoi-dap): vien sang cho tach khoi nen */
.cq-ava--tren-anh { background-color: rgba(255, 255, 255, .35); }

@media (max-width: 640px) {
    .cq-ava--sm { --cq-ava-size: var(--cq-ava-xs); }
    .cq-ava--xl { --cq-ava-size: 64px; }
}
