/**
 * projects.css - style riêng cho module projects (ngoài các class dùng chung .post-detail,
 * .post-related, .smt-card... đã có sẵn trong posts.css/custom.css)
 */
.project-thumbnail {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 10px;
}

.project-meta {
    background: var(--smt-bg-soft, #f3f5f8);
    border-radius: 10px;
    padding: 18px 20px;
    margin-left: 0;
    margin-right: 0;
}
.project-meta-label {
    font-size: 0.7188rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--smt-text-mute, #5b6b80);
    margin-bottom: 2px;
}
.project-meta-value {
    font-weight: 700;
    color: var(--smt-navy, #1c2b3f);
    font-size: 0.9375rem;
}

/* ---- Hàng nút lọc danh mục (Tất cả/Nhà máy/Thương mại...) của khối "Dự án nổi bật" - luôn
   giữ 1 HÀNG DUY NHẤT, không cho wrap xuống dòng 2 nữa (trước đây dùng "flex-wrap" của Bootstrap
   nên ở màn hình hẹp các nút tự xuống dòng, lệch hàng không đẹp). Hết chỗ thì tự cuộn ngang,
   giống hệt cơ chế slider ảnh đối tác/dự án đã có. ---- */
.smt-filter-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px 2px;
}
.smt-filter-row::-webkit-scrollbar { display: none; }
.smt-filter-row .smt-filter-btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 767.98px) {
    /* Căn trái khi có thể bị cuộn - justify-content:center kết hợp overflow-x:auto dễ bị lỗi
       (Chrome) khuất mất mục đầu tiên lúc mới vào trang, không cuộn ngược lại được. */
    .smt-filter-row { justify-content: flex-start; }
}

/* ---- Khối "Dự án nổi bật" trang chủ - cố định 4 thẻ/màn hình, còn lại trượt ngang bằng
   nút mũi tên (dùng chung đúng cơ chế .smt-slider-arrow/.smt-partners-slider + initSliders()
   đã có cho khối Đối tác, không cần JS mới). ---- */
/* Không đặt align-items riêng - dùng đúng align-items:center có sẵn của .smt-partners-slider
   để 2 nút mũi tên (cao cố định 40px) luôn canh giữa chiều cao hàng thẻ, không bị dạt lên đỉnh. */
.projects-home-track {
    display: flex; gap: 20px; flex: 1 1 auto; min-width: 0;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    padding: 4px 2px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.projects-home-track::-webkit-scrollbar { display: none; }
.projects-home-card {
    flex: 0 0 calc((100% - 20px) / 2); max-width: calc((100% - 20px) / 2); scroll-snap-align: start;
}
@media (max-width: 575.98px) {
    /* Giữ nút mũi tên (user muốn vẫn thấy được, vuốt không đủ rõ ràng) nhưng thẻ dự án lấy ĐÚNG
       100% bề ngang track - trước đó để 88% nên 12% dư ra luôn dồn hẳn về bên phải (track mặc
       định canh trái, không tự canh giữa phần dư), nhìn bị lệch 1 bên. 100% thì mỗi lần vuốt/bấm
       mũi tên xem trọn đúng 1 thẻ, không còn khoảng trống thừa lệch nào nữa. */
    .projects-home-card { flex-basis: 100%; max-width: 100%; }
}
@media (min-width: 992px) {
    .projects-home-card { flex-basis: calc((100% - 3 * 20px) / 4); max-width: calc((100% - 3 * 20px) / 4); }
}

/* ---- Nút "Xem tất cả dự án" - outline theo đúng màu thương hiệu (navy), không dùng màu xanh
   dương mặc định của Bootstrap (.btn-outline-primary) vì lệch tông với cả site. Dùng chung được
   cho mọi nút "xem thêm" dạng outline khác sau này. ---- */
a.smt-btn-outline,
a.smt-btn-outline:link,
a.smt-btn-outline:visited {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 999px;
    border: 1.5px solid var(--smt-navy, #1c2b3f);
    color: var(--smt-navy, #1c2b3f);
    background: transparent;
    font-weight: 700;
    font-size: 0.8438rem;
    text-decoration: none;
    text-transform: uppercase;
    transition: background .2s ease, color .2s ease;
}
a.smt-btn-outline:hover {
    background: var(--smt-navy, #1c2b3f);
    color: #fff;
}

/* ---- Thanh chọn danh mục (trang /projects/ và /projects/{danh-muc}/) ---- */
.project-cats-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}
.project-cats-nav-item {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid var(--smt-border, #e3e8ef);
    color: var(--smt-text, #33465c);
    font-size: 0.8438rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.project-cats-nav-item:hover {
    border-color: var(--smt-orange, #f5921e);
    color: var(--smt-orange, #f5921e);
}
.project-cats-nav-item.active {
    background: var(--smt-navy, #1c2b3f);
    border-color: var(--smt-navy, #1c2b3f);
    color: #fff;
}