/* =========================================================================
 *  rbnd-featured.css — Nhãn "Tin nổi bật"
 * =========================================================================
 *
 *  Nạp ở layout công khai vì thẻ tin xuất hiện ở trang chủ, trang danh
 *  sách VÀ trang chi tiết — ba trang nạp ba tệp CSS khác nhau.
 *
 *  MÀU PHẢI KHÁC HẲN NHÃN VIP.
 *  VIP dùng bạc / vàng / đỏ theo cấp. Tin nổi bật là cờ của SÀN, không mua
 *  được — cho nó màu tím để không ai nhìn nhầm thành một cấp VIP nữa. Cùng
 *  một tin có thể mang cả hai nhãn, nên chúng phải phân biệt được ngay ở
 *  cái liếc đầu tiên.
 */

.badge-featured {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 20px;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    box-shadow: 0 2px 6px rgba(124, 58, 237, .35);
    white-space: nowrap;
}

.badge-featured i { font-size: 10px; }

/* Nhãn "Tin xác thực" cũng nằm góc trên trái ở một số giao diện. Khi có cả
   hai, đẩy nhãn nổi bật xuống dưới thay vì để chúng chồng lên nhau. */
.listing-card__media .badge-verified ~ .badge-featured { top: 38px; }

/* Viền tím mảnh quanh thẻ — đủ để nhận ra trong một lưới 8 thẻ, không đủ
   để át nội dung. */
.listing-card--featured {
    border-color: #ddd6fe;
    box-shadow: 0 0 0 1px #ddd6fe;
}

/* ------------------------- Khối trang chủ ---------------------------- */

.home-block--featured h2 { color: #6d28d9; }
.home-block--featured h2 i { margin-right: 4px; }

/* ------------------------- Quản trị ---------------------------------- */

.tag-feat {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 20px;
    background: #ede9fe;
    color: #5b21b6;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.feat-fields { display: inline-flex; gap: 6px; align-items: center; }
.feat-fields[hidden] { display: none !important; }
.feat-note[hidden]   { display: none !important; }

.feat-fields input {
    padding: 6px 8px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 13px;
}