/* =========================================================
   SITE EXTRA — style MỚI cho tính năng động (không phải reset):
   - Card sản phẩm/tin clickable toàn thẻ (issue #2)
   - Filter chips (ẩn/hiện card theo phân loại)
   - Trang chi tiết sản phẩm / bài viết render động (CPT + Posts)
   Load SAU flatsome-native.css.
   ========================================================= */

/* ---- #2: cả thẻ card click được (ảnh, tên, nút) ----
   Overlay vô hình phủ toàn card, kế thừa href của .card__link.
   Text "Xem chi tiết" vẫn đổi màu hover nhờ :has trên card. */
.page .card{position:relative;}
.page .card .card__link::after{content:"";position:absolute;inset:0;z-index:1;}
.page .card:hover .card__link{color:var(--brand);}

/* ---- Filter chips: card bị lọc ----
   !important: class trạng thái phải thắng mọi rule display của layout
   (vd .grid-news .card{display:flex} cùng specificity đứng sau sẽ đè mất) */
.page .card.is-hidden{display:none!important;}

/* ---- Số liệu count-up: giữ bề rộng chữ số ổn định khi đếm ---- */
.page .stat{font-variant-numeric:tabular-nums;}

/* ---- Grid sản phẩm/tin render động: card là con trực tiếp của
        .grid-products (flex) / .grid-news (grid) — đúng cấu trúc design,
        không qua wrapper col Flatsome ---- */
.page .grid-news .card{display:flex;flex-direction:column;}
/* flatsome-native đặt .grid-products .card{height:100%} cho markup col cũ —
   với card là flex item trực tiếp, height khác auto sẽ TẮT stretch của flex
   → card cao lệch nhau theo nội dung. Trả về auto để mọi card đều cao
   bằng nhau theo hàng (card__foot đã ghim đáy nhờ margin-top:auto). */
.page .grid-products > .card{height:auto;}

/* ---- Trang con render động (single-san_pham.php / single.php):
        markup native design — trả lại scrim ::after mà flatsome-native
        đã tắt cho section builder ---- */
.page section.cta-band.tt-nativebg::after{
  content:"";position:absolute;inset:0;z-index:-1;background:rgba(104,59,20,.88);
}

/* ---- Nội dung bài viết từ trình soạn thảo (the_content) ---- */
.page .article__body h2{font-size:28px;font-weight:700;line-height:1.24;margin-top:8px;}
.page .article__body h3{font-size:24px;font-weight:600;line-height:1.33;margin-top:8px;}
.page .article__body ul{list-style:disc;padding-left:22px;display:flex;flex-direction:column;gap:8px;color:var(--ink-soft);}
.page .article__body ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px;color:var(--ink-soft);}
.page .article__body li{margin:0;}
.page .article__body a{color:var(--brand);text-decoration:underline;}
.page .article__body .tags a{color:var(--ink-soft);text-decoration:none;}
.page .article__body .tags a:hover{color:var(--brand);}
.page .article__body img{border-radius:var(--r-lg);height:auto;}
.page .article__body blockquote{
  background:var(--accent-soft);border-radius:12px;padding:28px;margin:0;
  color:var(--brand);font-size:18px;font-weight:600;line-height:1.6;
}
.page .article__body blockquote p{color:var(--brand);}

/* ---- Mô tả sản phẩm (the_content trong .pd-info) ---- */
.page .pd-info .desc p{color:var(--ink-soft);}
.page .pd-info .desc p + p{margin-top:12px;}


/* ===== Language switcher (WPML) — thẻ <a> ăn style .lang button của design ===== */
.lang a{color:var(--muted);letter-spacing:inherit;font-weight:inherit;text-decoration:none}
.lang a:hover{color:var(--brand)}
.lang a.is-active{color:var(--brand)}
/* bản mobile: nằm cuối menu burger, chỉ hiện khi menu mở (<=900px) */
.lang--mobile{display:none}
@media (max-width:900px){
  .nav.is-open .nav__links .lang--mobile{display:flex;padding:12px 0 2px;border-top:1px solid var(--line);margin-top:8px;width:100%}
}


/* ===== Tags danh mục sản phẩm (card + trang chi tiết) — sản phẩm có thể
   thuộc nhiều phân loại, hiển thị đủ pill thay vì chỉ cái đầu tiên ===== */
.card__tags{display:flex;flex-wrap:wrap;gap:8px}
.pd-tags{display:flex;flex-wrap:wrap;gap:8px}

/* ===== Hero slider (trang chủ): mỗi Section «Hero» trong [ux_slider] là 1 slide.
   Admin nhân bản Section trong slider → thêm slide trượt, không đẻ section mới ===== */
.tt-hero-slider .slider>section.section{width:100%}
.tt-hero-slider .flickity-slider>section.section{width:100%}
/* trước khi flickity init: chỉ hiện slide đầu, tránh nháy xếp chồng */
.tt-hero-slider .slider:not(.flickity-enabled){overflow:hidden}
.tt-hero-slider .slider:not(.flickity-enabled)>section.section:not(:first-child){display:none!important}
/* dots nằm trong vùng hero (hero có padding-bottom 96px) */
.tt-hero-slider .flickity-page-dots{bottom:36px;z-index:5}
.tt-hero-slider .flickity-page-dots .dot{background:#fff;opacity:.45}
.tt-hero-slider .flickity-page-dots .dot.is-selected{opacity:1}