/* ==========================================================================
   [2026-08-20] 6 luat chuyen ve tu Content/Styles/Reponsive.css.

   ⚠ DIEU KIEN @media GIU NGUYEN. Lan dau toi boc bang mot phep tim "luat bat
   dau o dau dong", ma luat NAM TRONG @media cung bat dau o dau dong (chi thut
   le) — nen chung bi keo ra ngoai va mat dieu kien man hinh: mot luat von chi
   danh cho man <=820px bong ap cho MOI man. Da hoan tac va lam lai bang cach
   duyet tuan tu, luon biet dang o trong khoi media nao.
   ========================================================================== */

@media screen and (max-width: 820px) {
    .news-item .name {
            font-size: 12px;
        }
}

@media screen and (max-width: 680px) {
    .news-item.guest-item .desc-line {
            font-size: 12px;
            padding-left: 5px;
            padding-right: 5px;
        }

    .news-item.guest-item .desc-line .share-icon > i {
                margin: 0px;
            }

    .news-item.guest-item .desc-line span {
                margin-right: 5px;
            }

    .wrap-link-cus .news-item.guest-item .view i {
            font-size: 11px;
        }
}

@media screen and (max-width: 560px) {
    .guest-item.fix-height .desc, .guest-item-idea {
            height: auto;
        }
}


/* ==========================================================================
   The bai/tin doi cu (.guest-item · .news-item) — MODULE DUNG CHUNG

   [2026-08-20] Boc khoi Content/Styles/Site.css.

   VI SAO NAP TOAN SITE chu khong nhet vao mot module san co: lop nay song o
   BAY trang, chia hai nhom khong giao nhau — tap chi (Magazine.css) va cong
   dong (community-cards.css). Khong module nao duoc nap o ca hai, nen day vao
   ben nao cung lam ben kia mat kieu. No la TU VUNG DUNG CHUNG, va thu dung
   chung thi phai co file cua rieng no.

   THU TU NAP: ngay sau Site.css trong Template/Site.master — dung cho no von
   dung, de moi cuoc tranh chap cung do manh van ra ket qua cu.

   Day la buoc DOI CHO. Khong xoa gi ca, ke ca nhung luat trong nhu da chet:
   xoa va doi cho cung luc thi khong con biet cai nao lam vo cai gi.
   ========================================================================== */

.news-item .name {
    display: block;
    padding: 10px 0;
    font-weight: bold;
    font-size: 14px;
}

.news-item .img, .news-item .img img {
    display: block;
    margin: auto;
}

.guest-item {
    box-shadow: 1px 1px 3px var(--cq-border);
    margin-bottom: 20px;
    position: relative;
}

.guest-item .desc {
        padding: 0 10px 10px 10px;
    }

.guest-item .name {
        padding: 5px 10px;
        text-transform: capitalize;
        height: 60px;
    }

.guest-item .name .cus-img {
            float: left;
            margin-right: 10px;
            border-radius: 100px;
        }

.guest-item .desc-line {
        padding: 5px 10px;
        border-top: solid 1px var(--cq-border);
        border-bottom: solid 1px var(--cq-border);
        line-height: 22px;
        font-weight: bold;
        margin-bottom: 10px;
    }

.guest-item .desc-line i {
            display: inline-block;
            vertical-align: top;
            margin-right: 5px;
            line-height: 22px;
            color: var(--cq-text);
        }

.guest-item .desc-line span {
            display: inline-block;
            vertical-align: top;
            margin-right: 10px;
            color: var(--cq-text);
        }

.guest-item .desc-line span i {
                font-style: normal;
            }

.guest-item .desc-line .cus-name {
            float: right;
            color: var(--cq-muted);
        }

.guest-item .desc-line .cus-name a {
                color: var(--cq-muted);
            }

.guest-item .link-cate {
        padding: 10px;
        display: block;
        font-weight: bold;
    }


.guest-item .like {
    cursor: pointer;
}

.guest-item .like.False:hover, .guest-item .like.True {
        color: #009aff;
    }

.guest-item .like.False:hover *, .guest-item .like.True * {
            color: red;
        }

.guest-item .like.True:hover, .guest-item .like.True:hover * {
            color: red;
        }

.guest-item .like span {
        color: inherit;
    }

.guest-item .time {
    padding: 0 10px;
    font-size: 12px;
    color: var(--cq-text);
    position: absolute;
    top: 5px;
    right: 0px;
}


.guest-item .desc-line .like {
    float: right;
}

.guest-item .desc-line .comments {
    float: right;
}

.guest-item.fix-height .desc {
    height: 155px;
    -webkit-line-clamp: 7;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: left;
}


.guest-item div.name .name-cus img {
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-left: 5px;
}

.guest-item .control {
    position: absolute;
    top: 10px;
    right: 10px;
    display: none;
}

.my-customer .guest-item .control {
    display: block;
}

.guest-item .control .Button {
    background: var(--cq-surface);
    border: 0px;
    color: black;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    padding: 0px;
    text-align: center;
}


.wrap-link-cus .guest-item .view {
    font-size: 0px;
}

.wrap-link-cus .guest-item .view i {
        font-size: 13px;
    }

.wrap-link-cus .guest-item .view i:before {
            display: inline-block;
            font-family: 'Font Awesome 5 Free';
            font-size: inherit;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            content: "\f06e";
            margin-right: 5px;
        }