.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;
}

.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));
}

.cq-pin,
.cq-more { font-size: 15px; }
.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;
           width: auto; gap: 2px; pointer-events: none; cursor: default; font-size: 13px; }

.cq-pin:hover { color: #E60023; }
.cq-more:hover { opacity: .75; }

.cq-eye,
.cq-pin,
.cq-more {
    opacity: 0;
    transform: translateY(-3px);
    transition: opacity .16s ease, transform .16s ease;
    pointer-events: none;
}

.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;
}

.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;
}

.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;
}

.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;
}

.cq-menu {
    position: absolute;
    right: var(--cq-ctool-dem);
    top: calc(var(--cq-ctool-dem) + var(--cq-ctool-buoc) * 3);    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); }

.cq-menu-mo .cq-more { opacity: 1; transform: none; pointer-events: auto; }