/* Featured Projects - Magnificent Style */
.fp-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; max-width: 1200px; margin: 0 auto; }
.fp-card { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.05); transition: all 0.4s ease; border: 1px solid #eee; }
.fp-card:hover { transform: translateY(-10px); box-shadow: 0 20px 50px rgba(233,178,17,0.15); border-color: #E9B211; }
.fp-card a { text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; }

.fp-card-img { position: relative; height: 260px; overflow: hidden; }
.fp-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.fp-card:hover .fp-card-img img { transform: scale(1.15); }
.fp-card-img::after { content:''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.4) 100%); }

.fp-badge { position: absolute; top: 20px; left: 20px; padding: 6px 15px; border-radius: 8px; font-size: 11px; font-weight: 800; color: #fff; z-index: 2; letter-spacing: 1px; text-transform: uppercase; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }

.fp-card-body { padding: 25px; flex: 1; display: flex; flex-direction: column; }
.fp-card-title { color: #1a365d; font-size: 20px; font-weight: 800; margin: 0 0 8px; line-height: 1.3; transition: color 0.3s; }
.fp-card:hover .fp-card-title { color: #E9B211; }

.fp-card-loc { color: #888; font-size: 14px; margin-bottom: 15px; display: flex; align-items: center; gap: 6px; }
.fp-card-loc svg { width: 16px; height: 16px; fill: #E9B211; }

.fp-card-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #f5f5f5; padding-top: 18px; margin-top: auto; }
.fp-card-price { color: #000; font-weight: 800; font-size: 17px; }
.fp-card-area { color: #E9B211; font-size: 13px; font-weight: 600; background: #fdf8e9; padding: 4px 10px; border-radius: 6px; }

@media(max-width:849px){ 
    .fp-grid { 
        grid-template-columns: repeat(2,1fr); 
        gap: 20px; 
        padding: 0 20px; /* Thêm padding cho tablet */
    } 
}
@media(max-width:549px){ 
    .fp-grid { 
        grid-template-columns: 1fr; 
        gap: 25px; 
        padding: 0 20px; /* Thêm padding cho mobile */
    } 
    .fp-card-img { height: 220px; } 
}