/* BƯỚC 71 - Giao diện Dự án (danh sách + chi tiết). Tiền tố "pj-" để không đụng class theme.
   Màu lấy từ biến CSS của site (--primary, --primary-second) có giá trị dự phòng - đổi theo theme khi deploy. */

/* ---------- Danh sách / lưới thẻ ---------- */
.pj-list { padding: 25px 0 10px; }
.pj-list-desc { color: #666; margin-bottom: 20px; }

/* Lưới: các cột cao bằng nhau. Bootstrap 3 chèn :before/:after vào .row -> trong flex chúng thành ô rỗng, phải tắt */
.pj-grid { display: flex; flex-wrap: wrap; }
.pj-grid:before, .pj-grid:after { display: none; }
.pj-grid > [class*="col-"] { display: flex; }

.pj-card { width: 100%; background: #fff; border: 1px solid #eee; border-radius: 4px; overflow: hidden; margin-bottom: 30px; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; }
.pj-card:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, .12); transform: translateY(-3px); }
.pj-card-thumb { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #f3f3f3; }
.pj-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.pj-card:hover .pj-card-thumb img { transform: scale(1.05); }
.pj-card-body { padding: 15px; display: flex; flex-direction: column; flex: 1; }
.pj-card-cat { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--primary-second, #e99417); margin-bottom: 4px; }
.pj-card-title { font-size: 18px; line-height: 1.35; margin: 0 0 10px; }
.pj-card-title a { color: var(--primary, #1d1f5c); }
.pj-card-title a:hover { color: var(--primary-second, #e99417); }
.pj-card-meta { list-style: none; margin: 0 0 10px; padding: 0; font-size: 13px; color: #555; }
.pj-card-meta li { padding: 2px 0; }
.pj-meta-label { color: #888; }
.pj-meta-value { font-weight: 600; }
.pj-card-summary { color: #666; font-size: 14px; margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pj-card-more { margin-top: auto; font-weight: 600; }

/* ---------- Chi tiết ---------- */
.pj-detail { padding: 25px 0 30px; }
.pj-gallery { margin-bottom: 20px; }
.pj-main { position: relative; background: #f5f5f5; border-radius: 4px; overflow: hidden; }
.pj-main-img { display: block; width: 100%; height: auto; max-height: 540px; object-fit: contain; cursor: zoom-in; margin: 0 auto; }
.pj-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.pj-nav:hover, .pj-nav:focus-visible { background: var(--primary-second, #e99417); }
.pj-prev { left: 10px; } .pj-next { right: 10px; }

.pj-thumbs { position: relative; display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 4px; }
.pj-thumb { flex: 0 0 auto; width: 88px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 3px; background: none; overflow: hidden; opacity: .7; cursor: pointer; transition: opacity .2s, border-color .2s; }
.pj-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pj-thumb:hover, .pj-thumb:focus-visible, .pj-thumb.active { opacity: 1; border-color: var(--primary-second, #e99417); }

.pj-title { font-size: 28px; line-height: 1.3; margin: 0 0 10px; color: var(--primary, #1d1f5c); }
.pj-meta-line { color: #777; font-size: 13px; margin-bottom: 15px; }
.pj-meta-line span { margin-right: 15px; }
.pj-summary { font-size: 15px; color: #444; margin-bottom: 20px; }
.pj-info-title { font-size: 16px; text-transform: uppercase; letter-spacing: .5px; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 2px solid var(--primary-second, #e99417); display: inline-block; }
.pj-facts { width: 100%; border-collapse: collapse; }
.pj-facts th, .pj-facts td { padding: 9px 6px; border-bottom: 1px solid #eee; vertical-align: top; }
.pj-facts th { width: 38%; color: #777; font-weight: 400; text-align: left; }
.pj-facts td { font-weight: 600; word-break: break-word; }
.pj-prewrap { white-space: pre-line; }

.pj-section-title { font-size: 22px; margin: 30px 0 15px; padding-bottom: 8px; border-bottom: 1px solid #eee; color: var(--primary, #1d1f5c); }
.pj-related { margin-top: 30px; }

@media (max-width: 767px) {
    .pj-title { font-size: 22px; }
    .pj-thumb { width: 72px; height: 54px; }
}