/* ===== Featured – giữ style card như bản đang dùng ===== */

.section-title:before{ background: var(--_color, var(--brand)); }

.fcard{
    display:block; position:relative; background:#fff;
    border:1px solid var(--border); border-radius:12px; overflow:hidden;
    box-shadow:0 4px 14px rgba(0,0,0,.05);
    transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.fcard:hover{
    transform:translateY(-2px);
    border-color:#dbe1ea;
    box-shadow:0 10px 24px rgba(0,0,0,.12);
    text-decoration:none; color:inherit;
}

/* Ảnh ở trên, tỉ lệ 140% giống card cũ */
.fcard .thumb{ position:relative; width:100%; padding-top:140%; background:#eef2ff; overflow:hidden; }
.fcard .thumb img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}

/* Vùng text dưới */
.fcard .meta{ padding:10px 12px 12px; }
.fcard .meta .title{ margin:0 0 4px; font-size:14px; font-weight:700; color:#0f172a; }
.fcard .meta .meta-row{ display:flex; align-items:center; gap:8px; color:#6b7280; font-size:12px; }
.fcard .meta .meta-row i{ margin-right:4px; }
.fcard .meta .meta-row .dot{
    width:4px; height:4px; border-radius:50%; background:#cbd5e1; display:inline-block;
}

/* Owl nav/dots – 2 nút tròn trắng có bóng đúng style */
.featured-owl .owl-stage{ padding:4px 0 }
.featured-owl .owl-nav{
    position:absolute; top:38%; left:-10px; right:-10px;
    display:flex; justify-content:space-between; pointer-events:none;
}
.featured-owl .owl-nav button.owl-prev,
.featured-owl .owl-nav button.owl-next{
    pointer-events:auto; width:36px; height:36px; border-radius:50%;
    background:#fff !important; color:#111827 !important;
    border:1px solid var(--border);
    box-shadow:0 8px 18px rgba(0,0,0,.18);
    display:flex; align-items:center; justify-content:center;
    transition:box-shadow .2s ease, transform .08s ease;
}
.featured-owl .owl-nav button:hover{ transform:scale(.98) }
.featured-owl .owl-nav button span{ font-size:18px; line-height:1 }

/* Dots nhỏ – không phá layout */
.featured-owl .owl-dots{ margin-top:8px; text-align:center }
.featured-owl .owl-dot span{
    width:7px; height:7px; margin:4px; background:#cfd8e3; display:inline-block; border-radius:999px; transition:all .2s ease;
}
.featured-owl .owl-dot.active span{ background:#2563eb; width:18px }

@media (max-width:480px){
    .featured-owl .owl-nav{ display:none }
}