/* ==========================================================================
   BA NUT PHU TREN THE — KHUON CHUNG
   .cq-eye (mat xem) · .cq-pin (Pinterest) · .cq-more (ba cham).
   Bot gac module bat dung: truoc do ba cai nay chep y het mot bo dien mao
   (nen, vien, mau, co chu, chieu cao, dong) o ba cho khac nhau — ban sao
   "nhin giong". Nay khuon chung viet MOT LAN o day; ben duoi moi cai chi con
   khai phan KHAC nhau: no dung o goc nao.
   Neo: khong cai nao chep con so cua cai kia. Tat ca deu tinh tu dem cua nut
   danh dau (--cq-mark-inset-auto), nen doi bo goc the hay doi co vong thi ca
   cot cung dich theo.
   ========================================================================== */
.cq-eye,
.cq-pin,
.cq-more {
    position: absolute;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--cq-mark-r) * 2);
    height: calc(var(--cq-mark-r) * 2);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    color: #fff;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Dem goc — MOT cong thuc, ca nam thanh phan tren the dung chung.
   The vuong (khong bo goc, vd the tap chi) khai --cq-mark-inset tai file cua
   no; day la ngoai le duy nhat, xem bookmark.css. */
.cq-eye,
.cq-pin,
.cq-more,
.cq-cmt,
.cq-menu {
    --cq-ctool-dem: var(--cq-mark-inset, calc(var(--cq-mark-inset-auto) - var(--cq-card-bw, 0px)));
    --cq-ctool-buoc: calc(var(--cq-mark-r) * 2 + var(--cq-mark-gap));
}

/* --- Khac nhau: cho dung --- */
.cq-pin,
.cq-more { font-size: 15px; }        /* hai nut bieu tuong */

.cq-pin  { right: var(--cq-ctool-dem); top: calc(var(--cq-ctool-dem) + var(--cq-ctool-buoc)); }
.cq-more { right: var(--cq-ctool-dem); top: calc(var(--cq-ctool-dem) + var(--cq-ctool-buoc) * 2); bottom: auto; left: auto; }
.cq-eye  { left: var(--cq-ctool-dem);  top: var(--cq-ctool-dem); right: auto;
           /* .cq-eye la mot NHAN, khong phai nut: khong bat chuot, chu nho hon,
              o rong noi theo con so ben canh bieu tuong. */
           width: auto; gap: 2px; pointer-events: none; cursor: default; font-size: 13px; }

/* Re chuot vao nut Pinterest -> chuyen mau do cua Pinterest. */
.cq-pin:hover { color: #E60023; }
.cq-more:hover { opacity: .75; }

/* ==========================================================================
   BINH THUONG CHI HIEN NUT DANH DAU
   Hai nut phu nam im cho toi khi re chuot vao the (hoac menu dang mo). Nut
   danh dau thi KHONG an — no con phai cho thay trang thai da danh dau.
   Danh sach the viet o MOT cho nay; them loai the moi thi them vao day.
   ========================================================================== */
.cq-eye,
.cq-pin,
.cq-more {
    opacity: 0;
    transform: translateY(-3px);
    transition: opacity .16s ease, transform .16s ease;
    pointer-events: none;
}

/* [2026-08-21] MOT DIEU KIEN HIEN, khong phai danh sach cheo.
   Truoc do cho nay liet ke 5 loai the x 3 nut = 14 dong bo chon; them mot loai
   the la phai nho sua o day. Nay card-tools.js gan lop .cq-the len moi the no
   trang tri — danh sach the chi con nam o MOT cho, trong JS.

   Man cam ung khong co "re chuot": cham vao the = re vao. card-tools.js gan
   .cq-ctool-mo len the vua cham va go khoi cac the khac, nen dien thoai chay
   dung co che nhu tren web: binh thuong chi thay nut danh dau va so binh luan,
   dung vao the moi hien ba nut kia. */
.cq-the:hover .cq-eye,
.cq-the:hover .cq-pin,
.cq-the:hover .cq-more,
.cq-the.cq-ctool-mo .cq-eye,
.cq-the.cq-ctool-mo .cq-pin,
.cq-the.cq-ctool-mo .cq-more,
.cq-the.cq-menu-mo .cq-more {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

/* Bieu tuong con mat chiem dung mot o rong bang duong kinh vong danh dau ->
   TAM cua no roi dung vao tam cung bo goc, giong het nut ben phai. Con so nam
   ngoai o do, keo dai sang phai. */
.cq-eye i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--cq-mark-r) * 2);
    height: calc(var(--cq-mark-r) * 2);
}

.cq-eye__so {
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   SO BINH LUAN (.cq-cmt) — GOC PHAI DUOI
   Icon dung cuoi hang nen MEP PHAI cua icon = dem goc -> tam icon roi dung
   vao tam cung bo goc duoi phai. So chay sang TRAI, ra ngoai o icon.
   ========================================================================== */
.cq-cmt {
    position: absolute;
    right: var(--cq-ctool-dem);
    bottom: var(--cq-ctool-dem);
    top: auto;
    left: auto;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: calc(var(--cq-mark-r) * 2);
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

/* [2026-08-21] Hai mau theo thu nam duoi icon (card-tools.js do va gan lop):
     · tren ANH  -> net trang
     · tren NEN TRANG -> net xam, cung thang xam chu cua site
   Icon nay LUON HIEN, khong nam trong nhom cho re chuot: no la loi moi binh
   luan, an di thi khong ai biet la bam duoc. */
.cq-cmt--anh { color: #fff; }
.cq-cmt--nen { color: var(--cq-text-2); }

.cq-cmt:hover { color: var(--cq-green); }

.cq-cmt svg {
    width: calc(var(--cq-mark-r) * 2);
    height: calc(var(--cq-mark-r) * 2);
}

.cq-cmt__so {
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   BANG MENU CUA NUT BA CHAM (.cq-menu) — MOT BO CHO MOI LOAI THE
   [2026-08-21] Truoc do chi the trang chu co bang menu (khai trong HomeCard.css),
   the tap chi co bang rieng, cac the khac khong co. Nay mot bang duy nhat, bung
   ra tu ngay duoi nut ba cham.
   ========================================================================== */
.cq-menu {
    position: absolute;
    right: var(--cq-ctool-dem);
    top: calc(var(--cq-ctool-dem) + var(--cq-ctool-buoc) * 3);   /* ngay duoi nut ba cham */
    z-index: 30;
    min-width: 196px;
    padding: 5px 0;
    border-radius: var(--cq-r-btn);
    background: var(--cq-surface);
    box-shadow: var(--cq-shadow-pop);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

.cq-menu-mo .cq-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.cq-menu__nhan {
    padding: 6px 14px var(--cq-1);
    color: var(--cq-text-3);
    font-size: var(--cq-fs-1);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.cq-menu__muc {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    color: var(--cq-text);
    font-size: var(--cq-fs-2);
    text-decoration: none;
    cursor: pointer;
}

.cq-menu__muc:hover { background: var(--cq-surface-2); color: var(--cq-green); }
.cq-menu__muc i { width: 16px; text-align: center; }
.cq-menu__muc--canh:hover { color: #b03a2e; }
.cq-menu__vach { height: 1px; margin: 5px 0; background: var(--cq-hairline); }

/* Nut ba cham dang mo menu thi hien luon, khong doi re chuot */
.cq-menu-mo .cq-more { opacity: 1; transform: none; pointer-events: auto; }