/* ============================================================
   ĐÁNH DẤU - kiểu nút. [2026-07-24]

   Yêu cầu: nổi bật nhưng tinh tế.
   Cách làm: KHÔNG tô đặc màu khi chưa bấm - nút viền, chữ màu thương
   hiệu, nền trắng. Nó nổi lên nhờ TƯƠNG PHẢN VIỀN trên nền trang,
   chứ không nhờ một mảng màu to. Đã đánh dấu rồi mới tô đặc - lúc đó
   màu là phần thưởng, không phải tiếng ồn.

   Lưu ý chỗ đặt: nút thật của bài viết là SPAN.like nằm trong
   .inner-item (hàng thao tác dưới bài). Cái A.like-post nhỏ trong
   .box-title-name là link góc trên thanh tiêu đề nền tối - để nguyên,
   chỉ đổi biểu tượng, không phóng to.

   Selector viết lặp class (.like.like) để thắng luật cũ trong Site.css
   mà không phải dùng !important.
   ============================================================ */

:root {
    --dd-mau: var(--cq-green);
    --dd-mau-dam: var(--cq-green);
}

/* ---- NÚT CHÍNH: hàng thao tác dưới bài viết ----
   Phải kèm #toolBarIdea vì Site.css có luật theo ID (#toolBarIdea span,
   #toolBarIdea .like) đè cả display lẫn cỡ chữ. */
#toolBarIdea .like.like,
.inner-item .like.like,
.detail-content .like.like {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    border: 1.5px solid var(--dd-mau);
    border-radius: 999px;
    /* !important chỉ cho 2 dòng này: Site.css cũ có luật nền/màu chữ cho
       thanh công cụ mà chọn thường không thắng nổi. */
    background: #fff !important;
    color: var(--dd-mau) !important;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease;
}

#toolBarIdea .like.like .fa-bookmark,
.inner-item .like.like .fa-bookmark,
.detail-content .like.like .fa-bookmark {
    font-size: 15px;
    color: inherit;
    transition: transform .22s cubic-bezier(.3, 1.6, .5, 1);
}

#toolBarIdea .like.like:hover,
.inner-item .like.like:hover,
.detail-content .like.like:hover {
    background: rgba(18, 131, 106, .07);
    color: var(--dd-mau-dam);
    border-color: var(--dd-mau-dam);
    box-shadow: 0 2px 10px rgba(18, 131, 106, .14);
}

#toolBarIdea .like.like:hover .fa-bookmark,
.inner-item .like.like:hover .fa-bookmark,
.detail-content .like.like:hover .fa-bookmark {
    transform: translateY(-2px);
}

#toolBarIdea .like.like:active,
.inner-item .like.like:active,
.detail-content .like.like:active {
    transform: translateY(1px);
}

/* Đã đánh dấu rồi -> tô đặc. Site gắn class True vào chính nút. */
#toolBarIdea .like.like.True,
.inner-item .like.like.True,
.detail-content .like.like.True {
    background: var(--dd-mau);
    border-color: var(--dd-mau);
    color: #fff;
}

#toolBarIdea .like.like.True:hover,
.inner-item .like.like.True:hover,
.detail-content .like.like.True:hover {
    background: var(--dd-mau-dam);
    border-color: var(--dd-mau-dam);
}

/* ---- Đếm lượt đánh dấu trên thẻ danh sách: chỉ đổi màu dấu trang ---- */
.desc-line .like .fa-bookmark {
    color: var(--dd-mau);
}

/* ---- Nút đánh dấu ở trang cá nhân (trước là Theo dõi) ---- */
.cq-member-follow.cq-member-follow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 22px;
    border: 1.5px solid var(--dd-mau);
    border-radius: 999px;
    background: #fff;
    color: var(--dd-mau);
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

.cq-member-follow.cq-member-follow::before {
    content: "\f02e";           /* dấu trang - Font Awesome */
    font-family: "Font Awesome 5 Free", FontAwesome;
    font-weight: 900;
    font-size: 14px;
}

.cq-member-follow.cq-member-follow:hover {
    background: rgba(18, 131, 106, .07);
    color: var(--dd-mau-dam);
    border-color: var(--dd-mau-dam);
    box-shadow: 0 2px 10px rgba(18, 131, 106, .14);
}

/* ============================================================
   NUT PIN DANH DAU DUNG CHUNG [2026-07-31]
   Boc tu GuestPostIdeaQuestion (cq-qmark) -> dung chung: the hoi-dap
   + bo xem anh (MediaView). ĐA BO cq-needle (mui nhon cay kim) theo yeu cau.
   ============================================================ */
.cq-qmark { position: relative; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cq-qmark svg { width: 22px; height: 22px; overflow: visible; display: block; }
/* [2026-08-14] SO luot o GIUA vong tron (khong nen dac — chi so). Mau theo currentColor:
   tren card mau (chu trang) -> so trang; tren card trang -> so dam. */
.cq-qmark { position: relative; gap: 4px; }   /* .cq-qmark = inline-flex (khai bao o tren) -> so nam CANH vong */
.cq-qmark .cq-count { font-size: 11px; font-weight: 800; line-height: 1; color: currentColor; white-space: nowrap; }
.cq-qmark.cq-count--left { flex-direction: row-reverse; }   /* vong o phai -> so ben trai (phia trong) */
.popup-idea #toolBarIdea .cq-qmark .cq-count { font-size: 12px; }
.cq-qmark .cq-needle { display: none !important; }        /* BO MUI NHON */
.cq-qmark .cq-ring-outline { fill: none; stroke: #fff; stroke-width: 4; opacity: 0; transition: opacity .3s; }
.cq-qmark .cq-ring-base { fill: none; stroke: #fff; stroke-width: 2.5; transition: opacity .2s; }
.cq-qmark .cq-ring-fill { fill: none; stroke: #EF2F3C; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 53.4; stroke-dashoffset: 53.4; transform: rotate(-90deg); transform-box: fill-box; transform-origin: center; transition: stroke-dashoffset .55s cubic-bezier(.45,.05,.2,1); }
.cq-qmark:hover:not(.True) .cq-ring-base { opacity: 0; }
.cq-qmark:hover:not(.True) .cq-ring-fill { stroke-dashoffset: 13.35; }
.cq-qmark.True .cq-ring-outline { opacity: 1; }
.cq-qmark.True .cq-ring-base { opacity: 0; }
.cq-qmark.True .cq-ring-fill { stroke-dashoffset: 0; }
.cq-qmark .cq-spark { position: absolute; left: 50%; top: 6px; width: 2.5px; height: 10px; border-radius: 2px; background: #EF2F3C; transform-origin: bottom center; pointer-events: none; animation: cqFly .4s ease-out forwards; }
@keyframes cqFly { 0% { opacity: 1; transform: translate(0,0) rotate(var(--rot)) scaleY(.2); } 30% { opacity: 1; transform: translate(calc(var(--dx)*.4),calc(var(--dy)*.4)) rotate(var(--rot)) scaleY(1); } 100% { opacity: 0; transform: translate(var(--dx),var(--dy)) rotate(var(--rot)) scaleY(1); } }

/* Trong bo xem anh: to hon chut cho de bam */
.popup-idea #toolBarIdea .cq-qmark { width: 34px; height: 34px; }
.popup-idea #toolBarIdea .cq-qmark svg { width: 26px; height: 26px; }

/* Pin trong viewer: bo nen/vien pill (chi con icon) */
.popup-idea #toolBarIdea .like.cq-qmark { background: none !important; border: 0 !important; padding: 0; box-shadow: none !important; }
/* [2026-08-14] Moi nut .like da chuyen thanh vong tron do -> bo kieu pill (giong viewer), chi con vong tron. */
.like.cq-qmark { background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; gap: 0 !important; }
.like.cq-qmark svg { width: 30px; height: 30px; }
/* [2026-08-18] Thanh cong cu bai viet (nen TRANG): #toolBarIdea .like.like cua
   Site.css van ep pill trang vien xanh (ID thang class) -> giet bang ID + do
   net ring: mac dinh ring ke TRANG (cho nen anh/viewer toi), tren nen trang
   thi tang hinh -> doi sang xam; trong .popup-idea giu trang nhu cu. */
#toolBarIdea .like.cq-qmark { background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; }
#toolBarIdea .like.cq-qmark .cq-ring-base { stroke: #aebac4; }
#toolBarIdea .like.cq-qmark .cq-ring-outline { stroke: #aebac4; }
.popup-idea #toolBarIdea .like.cq-qmark .cq-ring-base { stroke: #fff; }
.popup-idea #toolBarIdea .like.cq-qmark .cq-ring-outline { stroke: #fff; }

/* Bo co che danh gia sao: an sao tren binh luan (toan site) */
.comment-item .rating { display: none !important; }

/* ============================================================
   [2026-08-15] Nut DANH DAU tren THE CARD (home-standard-card) — nen SANG.
   Gom "yeu thich" cu -> vong tron do dung chung. Ring base trang (thiet ke
   cho card toi) se tang hinh tren nen trang -> doi sang currentColor.
   ============================================================ */
.home-standard-card__icon.cq-qmark { gap: 5px; cursor: pointer; }
/* [2026-08-15] Bằng cỡ icon bình luận (đã bung 1.2em = 19.2px) cho đều hàng. */
.home-standard-card__icon.cq-qmark svg { width: 19px; height: 19px; overflow: visible; }
.home-standard-card__icon.cq-qmark .cq-ring-base { stroke: currentColor; opacity: .5; }
.home-standard-card__icon.cq-qmark .cq-ring-outline { stroke: transparent; }
.home-standard-card__icon.cq-qmark:hover:not(.True) { color: #EF2F3C; }
.home-standard-card__icon.cq-qmark.True { color: #EF2F3C; }
.home-standard-card__icon.cq-qmark .cq-count { font-size: 12px; font-weight: 600; }

/* [2026-08-15] Nut DANH DAU overlay tren card CONG DONG (kieu Pinterest, chi anh)
   [2026-08-17] Lam lai theo 3 y:
   1. DONG TAM: tam nut trung TAM CUNG BO GOC card — cung bo ban kinh --cq-r-card co tam
      o (r, r) tinh tu goc; dat top/right = r roi translate(50%,-50%) -> nut nam dung tam,
      tu dong theo token (24 desktop / 16 mobile).
   2. KHONG NEN: bo vong nen trang; vong + so mau trang, do bong de doc tren anh.
      So dat TUYET DOI ben TRAI ngoai hop 36px -> tam vong khong bi lech vi chieu dai so.
   3. Re CA CARD la vong "chay moi" (xem khoi :hover ben duoi). */
.cq-community-v2__card .wrap-img, .guest-item-idea .wrap-img { position: relative; }
/* [2026-08-17] CHUAN HOA vi tri: MOT chuan cung cho MOI card — hop 32px, neo goc 8px
   (voi bo 24px desktop thi tam nut = tam cung bo luon; mobile bo 16px khong bi hut len mep).
   Bo translate theo token vi lam nut lech khac nhau giua cac loai card. */
.cq-cc-mark.cq-cc-mark { position: absolute;
    top: 8px; right: 8px;
    transform: none;
    z-index: 4; width: 32px; height: 32px; border-radius: 50%;
    background: none; box-shadow: none; color: #fff; padding: 0; }
.cq-cc-mark svg { width: 20px; height: 20px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .45)); }
.cq-cc-mark .cq-ring-base { stroke: currentColor; opacity: .6; }
.cq-cc-mark .cq-ring-outline { stroke: transparent; }
.cq-cc-mark:hover:not(.True), .cq-cc-mark.True { color: #EF2F3C; }
.cq-cc-mark .cq-count { position: absolute; right: calc(100% + 2px); top: 50%;
    transform: translateY(-50%); font-size: 11px; font-weight: 800; color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }

/* [2026-08-17] BIEN THE NEN TRANG (.cq-cc-dark): card nen sang (tuyen dung, ca nhan,
   to chuc) -> vong + so mau DAM, khong bong. Vi tri van dong tam cung bo goc. */
.cq-cc-mark.cq-cc-dark { color: #3a4652; }
.cq-cc-mark.cq-cc-dark svg { filter: none; }
.cq-cc-mark.cq-cc-dark .cq-count { color: inherit; text-shadow: none; }
.cq-cc-mark.cq-cc-dark:hover:not(.True), .cq-cc-mark.cq-cc-dark.True { color: #EF2F3C; }

/* Card TUYEN DUNG (.cq-rcard): doi vong tu footer len GOC DONG TAM cung bo goc. */
.cq-rcard { position: relative; }
/* !important vi luat pill cu ".inner-item .like.like" ep mau xanh + nen bang !important.
   [2026-08-17] Ve cung chuan 8px goc / hop 32px nhu moi card khac. */
.cq-rcard .like.cq-qmark {
    position: absolute;
    top: 8px;
    right: 8px;
    transform: none;
    z-index: 4;
    width: 32px;
    height: 32px;
    padding: 0 !important;
    margin: 0 !important;   /* margin cu cua .like lam vi tri absolute lech 8px */
    background: none !important;   /* luat pill cu ".inner-item .like.like" ep nen trang !important */
    border: 0 !important;
    box-shadow: none !important;
    justify-content: center;
    color: #3a4652 !important;
}
.cq-rcard .like.cq-qmark svg { width: 22px; height: 22px; }
.cq-rcard .like.cq-qmark .cq-count { position: absolute; right: calc(100% + 4px); top: 50%;
    transform: translateY(-50%); color: inherit; }
.cq-rcard .like.cq-qmark.True, .cq-rcard .like.cq-qmark:hover:not(.True) { color: #EF2F3C !important; }

/* Card THANH VIEN (.cq-mem-card): co vong goc (gan trong renderer trang Ca nhan). */
.cq-mem-card { position: relative; }

/* Card TO CHUC (danh thiep): mo neo cho vong goc dong tam. */
.group-item { position: relative; }

/* [2026-08-17] KHONG NEN sau nut danh dau — chot cung theo chu web (moi card deu vay).
   Card anh (y tuong / nang luc): vong TRANG + bong net mong. Card trang (tuyen dung...): vong XAM. */

/* Re BAT KY dau tren card -> vong chay moi (25%), khong cho phai re trung nut. */
.guest-item-idea:hover .cq-cc-mark:not(.True) .cq-ring-base,
.cq-community-v2__card:hover .cq-cc-mark:not(.True) .cq-ring-base { opacity: 0; }
.guest-item-idea:hover .cq-cc-mark:not(.True) .cq-ring-fill,
.cq-community-v2__card:hover .cq-cc-mark:not(.True) .cq-ring-fill { stroke-dashoffset: 13.35; }
/* Card trang chu + tuyen dung + thanh vien + to chuc: cung co che "re ca card la moi chay" */
.home-standard-card:hover .cq-qmark:not(.True) .cq-ring-base,
.cq-rcard:hover .cq-qmark:not(.True) .cq-ring-base,
.cq-mem-card:hover .cq-qmark:not(.True) .cq-ring-base,
.group-item:hover .cq-qmark:not(.True) .cq-ring-base { opacity: 0; }
.home-standard-card:hover .cq-qmark:not(.True) .cq-ring-fill,
.cq-rcard:hover .cq-qmark:not(.True) .cq-ring-fill,
.cq-mem-card:hover .cq-qmark:not(.True) .cq-ring-fill,
.group-item:hover .cq-qmark:not(.True) .cq-ring-fill { stroke-dashoffset: 13.35; }

/* ===================================================================
   [2026-08-19] NUT DANH DAU O TRANG CHI TIET (.cq-dd-mount)
   Dung chung cho: ho so thanh vien (/thanh-vien/{ma}) va trang wiki
   (/wiki/{slug}). Trang chi khai DU LIEU vao the mount, kich thuoc va
   hinh dang CHOT O DAY — 1 cho duy nhat, trang khong tu dat so.
   =================================================================== */
.cq-dd-mount { display: inline-flex; align-items: center; }
.cq-dd-nut { display: inline-flex; align-items: center; gap: 6px;
    height: 38px; padding: 0 14px; border: 1.5px solid var(--cq-border, #e6ecf2);
    border-radius: 999px; background: #fff; color: var(--cq-green, #12836a);
    font-size: 13px; font-weight: 700; cursor: pointer; }
.cq-dd-nut svg { width: 22px; height: 22px; }
.cq-dd-nut .cq-ring-base, .cq-dd-nut .cq-ring-outline { stroke: currentColor; }
.cq-dd-nut:hover { border-color: var(--cq-green, #12836a); }
.cq-dd-nut .cq-count { font-size: 13px; font-weight: 800; color: currentColor; }
/* Tren nen anh bia toi cua trang wiki: vien + chu trang */
.nv-hero__dd .cq-dd-nut { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.45); color: #fff; }
.nv-hero__dd .cq-dd-nut:hover { background: rgba(255,255,255,.2); border-color: #fff; }
/* Hang thao tac cua wiki: nut AI + nut danh dau nam ngang hang */
.nv-hero__act { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }