/* ============================================================
   ĐÁ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: #12836a;
    --dd-mau-dam: #0d6553;
}

/* ---- 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);
}