/* =====================================================================
   Decor Wood — custom frontend styles (consolidated, manage here)
   Loaded on every public page via layouts/app.blade.php
   ===================================================================== */

/* ---------- Brand hover polish (Primary -> Dark Wood) ---------- */
.elementor-button:hover,
.elementor-button:focus {
    background-color: #7B4A27 !important;
    background-image: linear-gradient(90deg, #7B4A27 0%, #7B4A27 100%) !important;
    border-color: #7B4A27 !important;
    color: #fff !important;
}
.elementor-button,
.fw-cta { transition: background-color .25s ease, color .25s ease; }

/* ---------- Dynamic listing / search ---------- */
.fw-dyn { max-width: 1200px; margin: 0 auto; padding: 48px 20px; }
.fw-dyn h1 { font-size: 2rem; margin: 0 0 8px; font-family: Poppins, system-ui, sans-serif; }
.fw-dyn .lead { color: #666; margin: 0 0 32px; }
.fw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.fw-card { display: flex; flex-direction: column; border: 1px solid #eee; border-radius: 12px; overflow: hidden; background: #fff; text-decoration: none; color: inherit; transition: box-shadow .2s, transform .2s; }
.fw-card:hover { box-shadow: 0 12px 30px rgba(0,0,0,.08); transform: translateY(-3px); }
.fw-card:hover h3 { color: #7B4A27; }
.fw-card img { width: 100%; height: 200px; object-fit: cover; background: #f4f1ec; }
.fw-card .b { padding: 16px 18px; }
.fw-card h3 { font-size: 1.05rem; margin: 0 0 6px; font-family: Poppins, system-ui, sans-serif; }
.fw-card p { font-size: .9rem; color: #777; margin: 0; line-height: 1.5; }
.fw-pag { margin-top: 36px; display: flex; justify-content: center; }
.fw-pag .pagination { display: flex; gap: 6px; list-style: none; padding: 0; }
.fw-pag a, .fw-pag span { display: block; padding: 8px 14px; border: 1px solid #e3ddd2; border-radius: 8px; text-decoration: none; color: #7B4A27; }
.fw-pag .active span { background: #7B4A27; color: #fff; border-color: #7B4A27; }

/* ---------- Dynamic detail page ---------- */
.fw-detail { max-width: 1100px; margin: 0 auto; padding: 40px 20px; }
.fw-detail .crumb { color: #999; font-size: .85rem; margin-bottom: 18px; }
.fw-detail .crumb a { color: #7B4A27; text-decoration: none; }
.fw-detail .crumb span { color: #999; }
.fw-meta { color: #8a8a8a; font-size: .9rem; margin: 0 0 16px; }
.fw-cover { width: 100%; border-radius: 12px; margin: 8px 0 24px; }
.fw-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 16px 0 28px; }
.fw-gimg { display: block; border-radius: 10px; overflow: hidden; border: 1px solid #eee; }
.fw-gimg img { width: 100%; height: 200px; object-fit: cover; display: block; transition: transform .3s; }
.fw-gimg:hover img { transform: scale(1.05); }
.fw-body { line-height: 1.7; color: #333; }
.fw-body img { max-width: 100%; height: auto; border-radius: 8px; }
.fw-h2 { font-family: Poppins, system-ui, sans-serif; font-size: 1.3rem; margin: 32px 0 14px; color: #2b2b2b; }
.fw-specs { width: 100%; border-collapse: collapse; }
.fw-specs th, .fw-specs td { text-align: left; padding: 10px 14px; border-bottom: 1px solid #eee; font-size: .95rem; }
.fw-specs th { width: 40%; color: #777; font-weight: 600; }
.fw-woods { display: flex; flex-wrap: wrap; gap: 14px; }
.fw-wood { display: flex; align-items: center; gap: 8px; border: 1px solid #eee; border-radius: 30px; padding: 6px 14px 6px 6px; font-size: .9rem; }
.fw-wood img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.fw-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; }
.fw-cta { display: inline-block; background: #A66A3A; color: #fff; padding: 12px 28px; border-radius: 10px; text-decoration: none; }
.fw-cta:hover { background: #7B4A27; border-color: #7B4A27; color: #fff; }
.fw-cta-outline { background: transparent; color: #A66A3A; border: 1px solid #A66A3A; }
.fw-cta-outline:hover { background: #7B4A27; color: #fff; }

/* Đánh giá khách hàng (testimonials): chỉ cho các thẻ CAO BẰNG NHAU + cắt review quá dài.
   KHÔNG dùng flex (giữ nguyên vị trí dấu kép/nội dung/tên như thiết kế gốc). */
.elementor-widget-testimonial-carousel .swiper-slide { height: auto; }
.elementor-widget-testimonial-carousel .swiper-slide > .elementor-testimonial { height: 100%; }
.elementor-widget-testimonial-carousel .elementor-testimonial__text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
    line-clamp: 7;
    overflow: hidden;
}

/* Khu "NƠI BẠN CÓ THỂ DÙNG TẤM ỐP GỖ" (case-study carousel): thẻ cao bằng nhau,
   ảnh đồng kích thước, tiêu đề/mô tả cắt gọn, nút "XEM DỰ ÁN" canh đáy cho đều. */
.case-study-loop-grid .swiper-slide { height: auto; }
.case-study-loop-grid .swiper-slide > .elementor-element { height: 100%; }
.case-study-loop-grid .swiper-slide .e-con-inner { display: flex; flex-direction: column; height: 100%; }
.case-study-loop-grid .elementor-widget-image img { width: 100%; height: 260px; object-fit: cover; display: block; }
.case-study-loop-grid .elementor-element-b8b7bef .elementor-heading-title {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
    overflow: hidden; min-height: 2.5em;
}
.case-study-loop-grid .elementor-element-217325d .elementor-heading-title {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
    overflow: hidden;
}
.case-study-loop-grid .elementor-widget-button { margin-top: auto; }

/* Khu "TỪ BLOG CỦA CHÚNG TÔI" (loop-carousel b9fe14f): cho đều bằng cách đồng kích thước
   ảnh + cắt tiêu đề/tóm tắt về số dòng cố định (KHÔNG ép height:100% để tránh sập carousel). */
.elementor-element-b9fe14f .elementor-widget-theme-post-featured-image img { width: 100%; height: 240px; object-fit: cover; display: block; }
.elementor-element-b9fe14f .elementor-element-951d124 .elementor-heading-title,
.elementor-element-b9fe14f .elementor-widget-theme-post-title .elementor-heading-title {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
    overflow: hidden; min-height: 2.6em;
}
.elementor-element-b9fe14f .elementor-widget-theme-post-excerpt .elementor-widget-container,
.elementor-element-b9fe14f .elementor-element-041d365 .elementor-widget-container {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
    overflow: hidden; min-height: 4.6em;
}

/* Watermark thương hiệu: thay logo CŨ (FORM AT WOOD) bằng logo Decor Wood. */
/* Trang chủ (822e39f): watermark là nền của chính element hero.
   Dùng bản logo MỜ (~22% đục) để chìm xuống nền, không nổi gắt. */
.elementor-197 .elementor-element.elementor-element-822e39f:not(.elementor-motion-effects-element-type-background),
.elementor-197 .elementor-element.elementor-element-822e39f > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-image: url('/assests/images/decor-wood-logo-watermark.png?v=2') !important;
    background-size: 300px auto !important;
    background-position: center left !important;
    background-repeat: no-repeat !important;
}
/* Dự án (case-study) + Hợp tác/Nhà thiết kế nội thất: watermark là file
   LOGO_FORM-AT-WOOD...webp — đã thay nội dung file đó bằng logo Decor Wood (xem .orig backup). */

/* ============================================================
   Khối "TÌM THÊM CẢM HỨNG CHO DỰ ÁN CỦA BẠN" trong chi tiết blog.
   Là gallery của plugin WordPress (.wplg-*) — bản export tĩnh không
   có JS plugin nên ảnh bị opacity:0 + box rộng 100px => trắng.
   Override để render thành lưới ảnh tĩnh đều, không cần JS.
   ============================================================ */
.wplg-wrap .wplg-gallery-loader{display:none!important}
/* nút "Hiện thêm/Thu gọn" của plugin không có JS => ẩn cho gọn */
.wplg_gallery_loadmore,.inspiration-gallery-load-more-btn{display:none!important}
.wplg-wrap .wplg-gallery{display:flex!important;flex-wrap:wrap!important;align-items:flex-start!important;justify-content:flex-start!important}
.wplg-wrap .wplg-gallery-item{opacity:1!important;display:block!important;position:relative!important;float:none!important;width:25%!important;height:auto!important;padding:10px!important;box-sizing:border-box!important}
/* chỉ hiện 8 ảnh (2 hàng x 4) cho gọn, ẩn phần còn lại */
.wplg-wrap .wplg-gallery-item:nth-child(n+9){display:none!important}
.wplg-wrap .wplg-gallery-box{position:relative!important;width:100%!important;height:auto!important;min-height:0!important;display:block!important;float:none!important;border-radius:8px;overflow:hidden}
.wplg-wrap .wplg-gallery-box:before{display:none!important}
/* ảnh: bỏ kẹp max-height:100% (box masonry cao 0 => ảnh bị về 0) */
.wplg-wrap .wplg-gallery-thumbnail,.wplg-wrap img.wplg-default-thumbnail{position:relative!important;left:auto!important;top:auto!important;width:100%!important;height:auto!important;max-height:none!important;max-width:100%!important;transform:none!important;display:block!important;object-fit:cover;aspect-ratio:1/1}
.wplg-wrap .wplg-gallery-item:hover .wplg-gallery-thumbnail{transform:scale(1.06)!important}
@media(max-width:1024px){.wplg-wrap .wplg-gallery-item{width:33.333%!important}.wplg-wrap .wplg-gallery-item:nth-child(n+7){display:none!important}}
@media(max-width:600px){.wplg-wrap .wplg-gallery-item{width:50%!important}.wplg-wrap .wplg-gallery-item:nth-child(n+7){display:none!important}}