/* ============================================================ 
   TP AI Suggest — Premium Serif Gold (Upgraded v5.8 SINGLE COLUMN)
   - FIX TRIỆT ĐỂ lỗi Meta (do chuyển sang Layout 1 Cột Full Width).
   - FIX TRIỆT ĐỂ lỗi Che Ảnh (kỹ thuật cưỡng chế kép & chống Lazy Load).
   ============================================================ */

/* ------------------------------------------------------------
   RESET NHẸ
   ------------------------------------------------------------ */
#tp-ai-suggest-root *,
.tp-ai-inline-box * {
  box-sizing: border-box;
}

/* ------------------------------------------------------------
   INLINE BOX (Container chính) - TĂNG MAX WIDTH ĐỂ CHỨA NỘI DUNG DÀI
   ------------------------------------------------------------ */
.tp-ai-inline-box {
  float: right !important; 
  width: 95% !important; /* Giữ 95% để tự co giãn theo sidebar */
  max-width: 450px !important; /* Tăng giới hạn tối đa cho nội dung dài */
  margin: 14px !important;
  padding: 14px;
  background: #fffdf8;
  border: 1px solid rgba(212,168,87,0.45);
  border-radius: 14px;
  position: relative;
  z-index: 999;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.06),
    0 10px 22px rgba(212,168,87,0.16),
    inset 0 0 0 1px rgba(212,168,87,0.22);
  overflow: hidden;
  transition: all .28s ease;
}

/* Hover effects */
.tp-ai-inline-box:hover {
  box-shadow:
    0 4px 10px rgba(0,0,0,0.07),
    0 14px 24px rgba(212,168,87,0.18),
    inset 0 0 0 1px rgba(212,168,87,0.24);
}

/* ------------------------------------------------------------
   HEADER (Tiêu đề chính)
   ------------------------------------------------------------ */
.tp-ai-suggest-header {
  font-weight: 700;
  font-size: 17px !important; 
  line-height: 1.3 !important;
  margin-bottom: 12px;
  color: #7a4f22;
  padding-left: 12px;
  position: relative;
  letter-spacing: 0.3px;
  text-transform: none;
  font-variant: small-caps;
  
  /* Kỹ thuật giới hạn 2 dòng */
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;

  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
}
/* Thanh line vàng bên trái header */
.tp-ai-suggest-header::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(212,168,87,0.98), rgba(184,134,11,0.98));
}

/* Expanded mode header tweak */
.tp-ai-inline-box.expanded .tp-ai-suggest-header {
  font-size: 18px !important;
}

/* Ẩn message không dùng */
.tp-ai-suggest-msg { display: none; }

/* ------------------------------------------------------------
   TOGGLE BUTTON
   ------------------------------------------------------------ */
.tp-ai-suggest-toggle {
  background: linear-gradient(135deg, #D4A857 0%, #B8860B 100%);
  color: #fff;
  border: none;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
  width: 100%;
  font-size: 13px;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.12), 0 4px 12px rgba(180,120,20,0.30);
  transition: all .22s ease;
}
.tp-ai-suggest-toggle:hover { transform: translateY(-2px); }

/* ------------------------------------------------------------
   GRID & CARD CONTAINER
   ------------------------------------------------------------ */
.tp-ai-suggest-grid { margin-top: 14px; }
.tp-ai-suggest-grid.active { display: block; }

.tp-ai-grid-v2 {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important; /* Dùng gap 10px cho 1 cột */
  justify-content: center;
  align-items: stretch;
}

/* ------------------------------------------------------------
   CARD ITEM - CHUYỂN SANG 1 CỘT (SINGLE COLUMN LAYOUT)
   ------------------------------------------------------------ */
.tp-ai-card {
  background: #ffffff;
  border-radius: 10px; 
  border: 1px solid rgba(212,168,87,0.25);
  position: relative;
  z-index: 10;
  overflow: hidden;
  display: flex;
  
  /* === KEY CHANGE: 1 CỘT FULL WIDTH === */
  flex: 0 1 100% !important; 
  max-width: 100% !important; 
  min-width: 100% !important;
  
  transition: all .22s ease;
}
.tp-ai-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(212,168,87,0.20), 0 2px 6px rgba(0,0,0,0.05);
}
.tp-ai-card > a {
  display: flex;
  text-decoration: none !important;
  color: inherit !important;
  height: 100%; 
  /* THAY ĐỔI: Chuyển sang bố cục Ngang (row) cho card, để ảnh nằm bên trái */
  flex-direction: row; 
  align-items: flex-start;
}

/* ============================================================
   [ULTIMATE FIX 2.0] KHẮC PHỤC TRIỆT ĐỂ LỖI CHE ẢNH VÀ TỶ LỆ 16:9
   (Dùng lại fix cũ, nhưng ảnh chỉ chiếm 1/3 chiều ngang)
   ============================================================ */
.tp-ai-thumb {
  width: 33% !important; /* Ảnh chỉ chiếm 1/3 chiều ngang (Layout 1 cột) */
  min-width: 120px !important;
  max-width: 180px !important;
  
  position: relative !important;
  padding-top: 0 !important; /* BỎ padding-top vì không cần tỷ lệ 16:9 nữa */
  height: 90px !important; /* DÙNG HEIGHT CỐ ĐỊNH để ảnh không bị quá lớn */
  overflow: hidden !important;
  background: #f0f0f0 !important;
  z-index: 1 !important;
  flex-shrink: 0; 
  border-radius: 10px 0 0 10px; /* Bo góc trái */
}

.tp-ai-thumb img,
.tp-ai-thumb picture img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important; 
  min-height: 100% !important;
  object-fit: cover !important; 
  z-index: 2 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  
  /* CƯỠNG CHẾ CHỐNG LAZY LOAD */
  opacity: 1 !important;
  visibility: visible !important;
  min-width: 1px !important;
  min-height: 1px !important;
  max-width: none !important;
  max-height: none !important;
  filter: none !important;
  transform: none !important;
}
/* Cưỡng chế thêm một cấp độ nữa cho thẻ bao quanh ảnh */
.tp-ai-thumb > * {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important; 
    min-height: 100% !important;
    object-fit: cover !important;
    z-index: 2 !important;
}

/* ------------------------------------------------------------
   CARD CONTENT (Title & Meta)
   ------------------------------------------------------------ */
.tp-ai-content {
    flex-grow: 1;
    padding: 8px 8px 8px 10px; /* Thêm padding bên trái để cách ảnh */
}

/* Tiêu đề BĐS */
.tp-ai-title {
  font-size: 14px !important; /* Tăng font lên 1 chút cho dễ đọc */
  font-weight: 700;
  color: #7a4f22;
  margin: 0 0 4px !important; 
  line-height: 1.3;
  /* Giới hạn tiêu đề 2 dòng (nếu cần) */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   [META ULTIMATE FIX] - Meta 1 Hàng Tự Do (FULL WIDTH)
   ============================================================ */
.tp-ai-meta-row {
  display: flex !important;
  flex-wrap: wrap !important; /* CHO PHÉP WRAP TRỞ LẠI nếu quá dài, vì giờ có full width */
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important; /* Tăng gap 1 chút */
  margin: 4px 0 0 !important; /* Lề gọn gàng */
  overflow: visible !important; /* Cho phép nội dung hiển thị đầy đủ */
  width: 100% !important; 
}

/* Style chung cho các item meta (Giá, Hướng, Khu vực) */
.tp-ai-price, 
.tp-ai-meta {
  display: inline-flex !important; 
  flex-shrink: 0 !important; /* KHÔNG CO NỮA để hiển thị đầy đủ */
  
  font-size: 12px !important; /* Tăng font lên 1 chút */
  padding: 3px 6px !important; 
  margin: 0 !important;
  white-space: nowrap !important; 
  border-radius: 4px;
  line-height: 1.2 !important;
  max-width: 100% !important; /* Loại bỏ giới hạn 45% */
  
  overflow: hidden !important;
  text-overflow: ellipsis !important; 
}

/* Reset các thuộc tính block của thẻ con (icon, text) */
.tp-ai-price > *, 
.tp-ai-meta > * {
    display: inline-block !important;
    width: auto !important;
}

/* Style riêng cho Giá */
.tp-ai-price {
  color: #B8860B !important;
  font-weight: 700 !important;
  background: rgba(184,134,11,0.08);
}

/* Style riêng cho Hướng/Khu vực (đã được fix) */
.tp-ai-meta {
  color: #666 !important;
  font-weight: 600 !important;
  background: #f5f5f5;
}

/* ------------------------------------------------------------
   LOAD MORE BUTTON
   ------------------------------------------------------------ */
.tp-ai-loadmore-wrap {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}
.tp-ai-load-more {
  background: linear-gradient(135deg, #F5DEB3 0%, #D4A857 100%);
  border: 1px solid rgba(212,168,87,0.55);
  color: #6b5533;
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  transition: all .18s ease;
}
.tp-ai-load-more:hover:not([disabled]) { transform: translateY(-2px); }
.tp-ai-load-more[disabled] { opacity: 0.6; cursor: default; }


/* ------------------------------------------------------------
   EXPANDED MODE (Chế độ mở rộng)
   ------------------------------------------------------------ */
.tp-ai-inline-box.expanded {
  width: 94% !important;
  max-width: 1200px !important;
  float: none !important;
  margin: 20px auto !important;
  box-shadow: 0 14px 36px rgba(0,0,0,0.12), inset 0 0 0 1px rgba(212,168,87,0.28);
  clear: both;
}
.tp-ai-inline-box.expanded .tp-ai-grid-v2 {
  max-width: 100%;
  padding: 0 10px;
  gap: 12px;
}
/* Khi mở rộng, cho phép card lớn hơn xíu (4 cột) */
.tp-ai-inline-box.expanded .tp-ai-card {
  flex: 0 1 calc(25% - 10px) !important;
  min-width: 160px;
}
.tp-ai-inline-box.expanded .tp-ai-card > a {
    flex-direction: column; /* Expanded: Trả lại layout Dọc */
}
.tp-ai-inline-box.expanded .tp-ai-thumb {
    width: 100% !important;
    height: 0 !important;
    padding-top: 56.25% !important;
    max-width: 100% !important;
    border-radius: 10px 10px 0 0;
}
.tp-ai-inline-box.expanded .tp-ai-content {
    padding: 8px 8px 8px 8px;
}


/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 1100px) {
  .tp-ai-inline-box.expanded { width: 96% !important; }
}

@media (max-width: 900px) {
  /* Tablet: sidebar vẫn 1 cột */
  .tp-ai-inline-box { width: 48% !important; max-width: 380px !important; float: right !important; }
  .tp-ai-card { flex: 0 1 100% !important; } 
  /* Expanded tablet: 3 cột */
  .tp-ai-inline-box.expanded .tp-ai-card { flex: 0 1 calc(33.333% - 8px) !important; min-width: 140px; }
}

@media (max-width: 600px) {
  /* Mobile: full width */
  .tp-ai-inline-box { width: 100% !important; max-width: 100% !important; float: none !important; margin: 15px 0 !important; }
  .tp-ai-card { flex: 0 1 100% !important; }
  
  /* Mobile: Trả lại layout Dọc cho card (Ảnh trên, Nội dung dưới) */
  .tp-ai-card > a { flex-direction: column; } 
  .tp-ai-thumb {
    width: 100% !important;
    height: 0 !important;
    padding-top: 56.25% !important; /* Mobile: Dùng lại 16:9 */
    max-width: 100% !important;
    border-radius: 10px 10px 0 0;
  }
  .tp-ai-content { padding: 8px; }

  /* Expanded mobile: 2 cột */
  .tp-ai-inline-box.expanded .tp-ai-card { flex: 0 1 calc(50% - 6px) !important; }
}

@media (max-width: 400px) {
  /* Mobile nhỏ: 1 cột cho Expanded */
  .tp-ai-inline-box.expanded .tp-ai-card { flex: 0 1 100% !important; }
}