/* ==========================================================================
   CASA - BỘ ĐỊNH KIỂU TOÀN DIỆN CHO TẤT CẢ DANH MỤC SẢN PHẨM & CỬA HÀNG
   Tệp tin duy nhất: /assets/casa-product-category.css
   Thương hiệu: CASA - Thiết kế, sản xuất & thi công nội thất TP.HCM
   Đồng bộ nhận diện chung cho TOÀN BỘ danh mục sản phẩm (Giường Tầng, Tủ Áo, Bàn Học, Tủ Bếp, v.v.)
   Tương thích: WooCommerce Archive, Theme Astra, Astra Pro Site Builder & Gutenberg Blocks
   Áp dụng: is_product_category(), is_shop(), is_product_taxonomy()
   ========================================================================== */

/* --------------------------------------------------------------------------
   PHẦN 1: HỆ THỐNG BIẾN TOÀN CỤC & TỐI ƯU HÓA THEME ASTRA / WOOCOMMERCE
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   PHẦN 1: HỆ THỐNG BIẾN TOÀN CỤC & TỐI ƯU HÓA THEME ASTRA / WOOCOMMERCE
   -------------------------------------------------------------------------- */
:root {
  --casa-orange: #FF9E22;
  --casa-orange-hover: #e58711;
  --casa-orange-light: #fff9f0;
  --casa-red: #d9381e;
  --casa-ink: #1f1c18;
  --casa-stone: #e8e3dc;
  --casa-muted: #787268;
  --casa-bg-warm: #fbf9f6;
  --casa-container: 1280px;
  --casa-radius: 12px;
  --casa-action: 6px;
  --casa-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --casa-head-font: "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --casa-body-font: "Arimo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --casa-head: var(--casa-head-font);
  --casa-body: var(--casa-body-font);
  --casa-cat-hero-bg: url('https://noithat.lucasnguyen.me/wp-content/uploads/2026/09/GT146-6.jpg');
}

/* ==========================================================================
   LOẠI BỎ TOÀN BỘ KHOẢNG TRẮNG GIỮA HEADER VÀ HERO SECTION TRÊN ASTRA THEME
   ========================================================================== */
html, body {
  overflow-x: clip !important;
}

.tax-product_cat #content.site-content,
.tax-product_cat .site-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.tax-product_cat .site-content > .ast-container,
.tax-product_cat #primary.content-area,
.tax-product_cat #main.site-main,
.tax-product_cat .site-main,
.tax-product_cat .ast-woocommerce-container,
.tax-product_cat [class*="astra-advanced-hook-"],
.tax-product_cat .woocommerce-products-header {
  padding-top: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border: none !important;
}

.tax-product_cat .woocommerce-products-header:empty,
.tax-product_cat .woocommerce-products-header {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}

.tax-product_cat .woocommerce-breadcrumb:not(.cat-breadcrumb) {
  display: none !important;
}

/* Đảm bảo container Astra cho phép các block con bung tràn viền 100% full-width */
.tax-product_cat .site-content > .ast-container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 2. LƯỚI SẢN PHẨM CHUẨN ASTRA (PRODUCTS GRID) */
.woocommerce ul.products,
.woocommerce-page ul.products,
.ast-woocommerce-container ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 24px !important;
  max-width: var(--casa-container, 1280px) !important;
  margin: 28px auto 48px !important;
  padding: 0 clamp(16px, 3vw, 24px) !important;
  list-style: none !important;
  box-sizing: border-box !important;
}

/* Clear float cũ của WooCommerce / Astra */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
  display: none !important;
}

@media (max-width: 1024px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  .ast-woocommerce-container ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }
}

@media (max-width: 768px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  .ast-woocommerce-container ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}

@media (max-width: 480px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  .ast-woocommerce-container ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

/* 3. THẺ CARD SẢN PHẨM (PRODUCT CARD) - BORDER BAO QUANH ĐỂ DỄ PHÂN BIỆT */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products li.ast-article-post,
.woocommerce-page ul.products li.ast-article-post,
ul.products li.product {
  background: #ffffff !important;
  border: 1.5px solid var(--casa-stone, #e8e3dc) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  box-shadow: 0 2px 8px rgba(31, 28, 24, 0.04) !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.28s ease !important;
  box-sizing: border-box !important;
}

/* Hiệu ứng Hover card: Viền cam thương hiệu CASA, nâng nhẹ và bóng đổ sang trọng */
.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover,
ul.products li.product:hover,
ul.products li.product.is-hovered {
  border-color: var(--casa-orange, #FF9E22) !important;
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 28px rgba(255, 158, 34, 0.16), 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

/* 4. KHUNG HÌNH ẢNH (THUMBNAIL WRAP) */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap,
.woocommerce-page ul.products li.product .astra-shop-thumbnail-wrap {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  background-color: #f6f6f6 !important;
  overflow: hidden !important;
  border-bottom: 1px solid #f0ede8 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.woocommerce ul.products li.product .astra-shop-thumbnail-wrap a.woocommerce-LoopProduct-link,
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap a.woocommerce-loop-product__link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  text-decoration: none !important;
  background: transparent !important;
}

.woocommerce ul.products li.product .astra-shop-thumbnail-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  margin: 0 !important;
  background-color: transparent !important;
}

/* Ảnh placeholder khi chưa có ảnh */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap img.woocommerce-placeholder {
  object-fit: contain !important;
  padding: 24px !important;
  opacity: 0.75 !important;
}

/* Phóng to nhẹ ảnh khi hover */
.woocommerce ul.products li.product:hover .astra-shop-thumbnail-wrap img:not(.woocommerce-placeholder) {
  transform: scale(1.05) !important;
}

/* Nút Quick Action / Giỏ hàng trên thẻ card của Astra */
.woocommerce ul.products li.product .ast-on-card-button {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
  transition: all 0.25s ease !important;
  color: var(--casa-ink, #1f1c18) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--casa-stone, #e8e3dc) !important;
  opacity: 0.9 !important;
}

.woocommerce ul.products li.product:hover .ast-on-card-button {
  opacity: 1 !important;
}

.woocommerce ul.products li.product .ast-on-card-button:hover {
  background: var(--casa-orange, #FF9E22) !important;
  border-color: var(--casa-orange, #FF9E22) !important;
  color: #ffffff !important;
  transform: scale(1.08) !important;
}

.woocommerce ul.products li.product .ast-on-card-button svg {
  width: 16px !important;
  height: 16px !important;
  fill: currentColor !important;
}

/* Huy hiệu Sale / Giảm giá */
.woocommerce ul.products li.product span.onsale {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  right: auto !important;
  margin: 0 !important;
  padding: 4px 10px !important;
  min-height: auto !important;
  min-width: auto !important;
  line-height: 1.2 !important;
  font-family: var(--casa-head-font, "Quicksand", sans-serif) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  border-radius: 6px !important;
  background-color: var(--casa-orange, #FF9E22) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(255, 158, 34, 0.3) !important;
  z-index: 2 !important;
}

/* 5. KHỐI NỘI DUNG THÔNG TIN (SUMMARY WRAP: KHOẢNG CÁCH DỄ NHÌN) */
.woocommerce ul.products li.product .astra-shop-summary-wrap,
.woocommerce-page ul.products li.product .astra-shop-summary-wrap {
  padding: 16px 16px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

@media (max-width: 480px) {
  .woocommerce ul.products li.product .astra-shop-summary-wrap {
    padding: 12px 12px 16px !important;
  }
}

/* 5.1. DANH MỤC SẢN PHẨM (CATEGORY KICKER) - TOÀN BỘ FONT THEO CUSTOMIZE ASTRA THEME */
.woocommerce ul.products li.product .ast-woo-product-category,
.woocommerce-page ul.products li.product .ast-woo-product-category {
  display: block !important;
  margin: 0 0 6px 0 !important;
  transition: color 0.2s ease !important;
}

.woocommerce ul.products li.product .ast-woo-product-category:hover {
  color: var(--casa-orange-hover, #e58711) !important;
}

/* 5.2. TIÊU ĐỀ SẢN PHẨM (PRODUCT TITLE) - TOÀN BỘ FONT THEO CUSTOMIZE ASTRA THEME */
.woocommerce ul.products li.product .ast-loop-product__link,
.woocommerce-page ul.products li.product .ast-loop-product__link {
  text-decoration: none !important;
  display: block !important;
  margin: 0 0 8px 0 !important; /* Khoảng cách từ Tiêu đề xuống Sao: 8px */
  padding: 0 !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
  /* Toàn bộ font (font-family, font-size, font-weight, line-height, text-transform) kế thừa trực tiếp từ Customize Astra Theme */
  margin: 0 !important;
  padding: 0 !important;
  min-height: auto !important; /* Xóa khoảng trống giả khi tiêu đề ngắn 1 dòng */
  transition: color 0.2s ease !important;

  /* Giới hạn tối đa 2 dòng khi tên quá dài */
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.woocommerce ul.products li.product:hover .woocommerce-loop-product__title,
.woocommerce ul.products li.product .ast-loop-product__link:hover .woocommerce-loop-product__title {
  color: var(--casa-orange, #FF9E22) !important;
}

/* 5.3. ĐÁNH GIÁ SAO (RATING STARS) - TOÀN BỘ FONT & SIZE THEO CUSTOMIZE ASTRA THEME */
.woocommerce ul.products li.product .review-rating,
.woocommerce-page ul.products li.product .review-rating,
.woocommerce ul.products li.product .ast-rating-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 0 10px 0 !important;
  min-height: auto !important;
  order: unset !important;
  padding: 0 !important;
}

.woocommerce ul.products li.product .star-rating,
.woocommerce-page ul.products li.product .star-rating {
  /* Toàn bộ font và kích thước sao kế thừa trực tiếp từ Customize Astra Theme */
  display: inline-block !important;
  position: relative !important;
  overflow: hidden !important;
  margin: 0 !important;
  float: none !important;
  color: #f59e0b !important;
}

.woocommerce ul.products li.product .star-rating::before {
  color: #ded9d0 !important; /* Màu sao rỗng */
}

.woocommerce ul.products li.product .star-rating span {
  color: #f59e0b !important; /* Màu sao vàng cam */
}

.woocommerce ul.products li.product .star-rating span::before {
  color: #f59e0b !important;
}

/* Số nhận xét bên cạnh sao (nếu có) */
.woocommerce ul.products li.product .ast-rating-text,
.woocommerce ul.products li.product .review-rating .rating-count,
.woocommerce ul.products li.product .review-rating span:not(.star-rating):not(.star-rating span) {
  color: var(--casa-muted, #787268) !important;
  line-height: 1 !important;
}

/* 5.4. GIÁ TIỀN & ĐƯỜNG KẺ CẮT NGANG - TOÀN BỘ FONT THEO CUSTOMIZE ASTRA THEME */
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
  /* Toàn bộ font (font-family, font-size, font-weight, line-height) kế thừa trực tiếp từ Customize Astra Theme */
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 6px !important;
  width: 100% !important;

  /* Đường line nhỏ cắt ngang giữa sao và giá (1px dashed #e8e3dc) */
  border-top: 1px dashed var(--casa-stone, #e8e3dc) !important;
  padding-top: 10px !important;
  margin-top: auto !important;
  margin-bottom: 0 !important;
}

.woocommerce ul.products li.product .price del,
.woocommerce-page ul.products li.product .price del {
  color: #9e978e !important;
  font-size: 0.85em !important;
  text-decoration: line-through !important;
  opacity: 0.85 !important;
}

.woocommerce ul.products li.product .price ins,
.woocommerce-page ul.products li.product .price ins {
  color: var(--casa-red, #d9381e) !important;
  text-decoration: none !important;
}

.woocommerce ul.products li.product .price ins .woocommerce-Price-amount {
  color: var(--casa-red, #d9381e) !important;
}

.woocommerce ul.products li.product .price .woocommerce-Price-currencySymbol {
  font-size: 0.88em !important;
  margin-left: 2px !important;
}

/* 6. TOOLBAR, SẮP XẾP & ĐIỀU HƯỚNG TRANG DANH MỤC */
.woocommerce .woocommerce-ordering,
.woocommerce-page .woocommerce-ordering {
  margin-bottom: 24px !important;
}

.woocommerce .woocommerce-ordering select.orderby,
.woocommerce-page .woocommerce-ordering select.orderby {
  border: 1.5px solid var(--casa-stone, #e8e3dc) !important;
  border-radius: 8px !important;
  padding: 9px 32px 9px 14px !important;
  font-family: var(--casa-body-font, "Arimo", sans-serif) !important;
  color: var(--casa-ink, #1f1c18) !important;
  background-color: #ffffff !important;
  outline: none !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.woocommerce .woocommerce-ordering select.orderby:focus {
  border-color: var(--casa-orange, #FF9E22) !important;
  box-shadow: 0 0 0 3px rgba(255, 158, 34, 0.15) !important;
}

.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count {
  font-family: var(--casa-body-font, "Arimo", sans-serif) !important;
  color: var(--casa-muted, #787268) !important;
  margin-bottom: 24px !important;
  padding-top: 10px !important;
}

/* 7. PHÂN TRANG (PAGINATION) */
.woocommerce nav.woocommerce-pagination,
.woocommerce-page nav.woocommerce-pagination {
  margin: 40px 0 !important;
  text-align: center !important;
}

.woocommerce nav.woocommerce-pagination ul,
.woocommerce-page nav.woocommerce-pagination ul {
  border: none !important;
  display: inline-flex !important;
  gap: 8px !important;
}

.woocommerce nav.woocommerce-pagination ul li,
.woocommerce-page nav.woocommerce-pagination ul li {
  border: none !important;
  float: none !important;
  display: inline-block !important;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 42px !important;
  height: 42px !important;
  padding: 0 14px !important;
  border: 1.5px solid var(--casa-stone, #e8e3dc) !important;
  border-radius: 8px !important;
  font-family: var(--casa-head-font, "Quicksand", sans-serif) !important;
  font-weight: 600 !important;
  color: var(--casa-ink, #1f1c18) !important;
  background: #ffffff !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--casa-orange, #FF9E22) !important;
  border-color: var(--casa-orange, #FF9E22) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(255, 158, 34, 0.25) !important;
}



/* ==========================================================================
   PHẦN 8: CÁC PHÂN KHU GIAO DIỆN CHUYÊN SÂU TRANG DANH MỤC (CASA SECTIONS)
   (Hero Banner, Pills lọc nhanh, Bảng so sánh, Quy trình 4 bước, Cam kết KAYA, FAQ, CTA)
   Dùng chung cho tất cả các danh mục sản phẩm hiện tại và tương lai của CASA.
   ========================================================================== */

/* 1. TOÀN CỤC DANH MỤC & BREADCRUMB */
.casa-category-page {
  background-color: #ffffff;
  color: var(--casa-ink);
  font-family: var(--casa-body);
  line-height: 1.65;
  overflow-x: hidden;
}

/* Breadcrumb NẰM GIỮA trong Hero Section có icon ngôi nhà & kết nối [»] */
.cat-breadcrumb-hero {
  position: relative;
  z-index: 3;
  margin: 0 auto 30px auto !important;
  padding-top: 4px;
  text-align: center !important;
  width: 100%;
}

.cat-breadcrumb-hero .cat-breadcrumb {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  list-style: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}

.cat-breadcrumb-hero .cat-breadcrumb li {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: #aba7a0 !important;
}

.cat-breadcrumb-hero .cat-breadcrumb a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #c9c5bd !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.cat-breadcrumb-hero .cat-breadcrumb a:hover {
  color: var(--casa-orange, #FF9E22) !important;
}

.cat-breadcrumb-hero .cat-breadcrumb .casa-home-icon {
  width: 15px !important;
  height: 15px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
}

.cat-breadcrumb-hero .cat-breadcrumb a:hover .casa-home-icon {
  stroke: var(--casa-orange, #FF9E22) !important;
}

.cat-breadcrumb-hero .cat-breadcrumb .sep {
  color: var(--casa-orange, #FF9E22) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  user-select: none !important;
}

.cat-breadcrumb-hero .cat-breadcrumb .current {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* Ẩn triệt để thanh breadcrumb bên ngoài cũ nếu còn sót lại */
.cat-breadcrumb-wrap {
  display: none !important;
}

.cat-container {
  max-width: var(--casa-container);
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 36px);
  box-sizing: border-box;
}

/* 2. HERO BANNER DANH MỤC: FULL-WIDTH 100VW & PARALLAX BACKGROUND */
.cat-hero {
  position: relative !important;
  width: 100vw !important;
  max-width: 100vw !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  box-sizing: border-box !important;
  background-color: #171714 !important;
  background-image: 
    linear-gradient(135deg, rgba(20, 18, 15, 0.88) 0%, rgba(28, 25, 21, 0.82) 100%),
    var(--casa-cat-hero-bg, url('https://noithat.lucasnguyen.me/wp-content/uploads/2026/09/GT146-6.jpg')) !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important; /* Parallax khi cuộn chuột */
  color: #ffffff !important;
  padding: clamp(28px, 4vw, 44px) 0 clamp(48px, 6vw, 76px) !important;
  overflow: hidden !important;
}

@media (max-width: 768px) {
  .cat-hero {
    background-attachment: scroll !important; /* Tránh lỗi fixed trên Safari mobile */
    background-position: center top !important;
  }
}

.cat-hero-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.08;
  background-image: radial-gradient(#ffffff 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}

.cat-hero-glow {
  position: absolute;
  top: -20%;
  right: 10%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 158, 34, 0.25) 0%, transparent 70%);
  filter: blur(50px);
  pointer-events: none;
}

.cat-hero-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.cat-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--casa-orange);
  color: #ffffff;
  font-family: var(--casa-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--casa-action);
  margin-bottom: 18px;
}

.cat-hero-title {
  font-family: var(--casa-head);
  font-size: clamp(32px, 4.2vw, 54px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.04em;
  margin: 0 0 16px;
  color: #ffffff;
}

.cat-hero-title em {
  font-style: normal;
  color: var(--casa-orange);
}

.cat-hero-desc {
  font-size: clamp(15px, 1.4vw, 17px);
  color: #dedbd6;
  line-height: 1.7;
  max-width: 680px;
  margin: 0 0 24px;
}

.cat-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.cat-stat-item strong {
  display: block;
  font-family: var(--casa-head);
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 700;
  color: var(--casa-orange);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.cat-stat-item span {
  display: block;
  font-size: 12px;
  color: #aba69e;
  margin-top: 4px;
  line-height: 1.4;
}

/* Card tư vấn nhanh bên phải hero */
.cat-hero-aside {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 26px 24px;
}

.cat-aside-title {
  font-family: var(--casa-head);
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 10px;
}

.cat-aside-desc {
  font-size: 13.5px;
  color: #c7c3bd;
  margin: 0 0 18px;
  line-height: 1.6;
}

.cat-aside-features {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.cat-aside-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #e5e2dc;
}

.cat-aside-features svg {
  color: var(--casa-orange);
  flex-shrink: 0;
}

.cat-hero-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn-hero-consult {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--casa-orange);
  color: #ffffff;
  font-family: var(--casa-head);
  font-weight: 700;
  font-size: 14px;
  padding: 12px 18px;
  border-radius: var(--casa-action);
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.btn-hero-consult:hover {
  background-color: #e88c15;
  transform: translateY(-2px);
}

.btn-hero-call {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  font-family: var(--casa-head);
  font-weight: 600;
  font-size: 13px;
  padding: 10px 16px;
  border-radius: var(--casa-action);
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-hero-call:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #ffffff;
}

/* 3. THANH LỌC NHANH SUB-CATEGORIES (PILLS) - ĐÃ BỎ HOÀN TOÀN THEO YÊU CẦU */
.cat-subtypes-bar,
.cat-subtypes-scroll,
.cat-pill {
  display: none !important;
}

/* 4. THANH ĐIỀU HƯỚNG TOOLBAR & BỘ LỌC CHÍNH */
.cat-toolbar-section {
  padding: 20px 0;
  border-bottom: 1px solid var(--casa-stone);
  background: #ffffff;
  position: sticky;
  top: 0;
  z-index: 20;
  transition: box-shadow 0.2s ease;
}

.cat-toolbar-section.is-scrolled {
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
}

.cat-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.cat-results-count {
  font-size: 14px;
  color: var(--casa-muted);
}

.cat-results-count strong {
  color: var(--casa-ink);
  font-weight: 700;
}

.cat-filters-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.cat-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.cat-select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  background: #ffffff;
  border: 1px solid var(--casa-stone);
  border-radius: var(--casa-action);
  padding: 9px 34px 9px 14px;
  font-family: var(--casa-body);
  font-size: 13.5px;
  color: var(--casa-ink);
  font-weight: 500;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
}

.cat-select-wrap select:focus {
  border-color: var(--casa-orange);
}

.cat-select-wrap svg {
  position: absolute;
  right: 12px;
  pointer-events: none;
  color: var(--casa-muted);
}

.cat-view-toggles {
  display: inline-flex;
  border: 1px solid var(--casa-stone);
  border-radius: var(--casa-action);
  overflow: hidden;
}

.btn-view-toggle {
  background: #ffffff;
  border: none;
  padding: 8px 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--casa-muted);
  cursor: pointer;
  transition: all 0.2s;
}

.btn-view-toggle.active {
  background: var(--casa-ink);
  color: #ffffff;
}

/* 5. LƯỚI SẢN PHẨM GIƯỜNG TẦNG */
.cat-products-section {
  padding: 42px 0 72px;
}

.bunk-grid-4cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 20px;
}

/* Card giường tầng kế thừa và nâng cấp */
.bunk-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid var(--casa-stone);
  overflow: hidden;
  transition: transform 0.3s var(--casa-ease), box-shadow 0.3s ease, border-color 0.3s;
}

.bunk-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(23, 23, 20, 0.08);
  border-color: #d6d0c5;
}

.bunk-top {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: #f6f6f6;
  overflow: hidden;
}

.bunk-link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

.bunk-thumb,
.bunk-thumb-hover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.45s ease, transform 0.6s var(--casa-ease);
}

.bunk-thumb {
  opacity: 1;
  z-index: 1;
}

.bunk-thumb-hover {
  opacity: 0;
  z-index: 2;
}

.bunk-card:hover .bunk-thumb-hover {
  opacity: 1;
  transform: scale(1.05);
}

.bunk-card:hover .bunk-thumb {
  transform: scale(1.05);
}

.bunk-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bunk-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  font-family: var(--casa-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  border-radius: 4px;
}

.bunk-badge-hot {
  background-color: var(--casa-orange);
  color: #ffffff;
}

.bunk-badge-new {
  background-color: var(--casa-ink);
  color: #ffffff;
}

.bunk-badge-safe {
  background-color: #1e7e34;
  color: #ffffff;
}

.bunk-top-actions {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px;
  z-index: 5;
  display: flex;
  gap: 6px;
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.3s var(--casa-ease);
}

.bunk-card:hover .bunk-top-actions {
  opacity: 1;
  transform: translateY(0);
}

.btn-quick-spec {
  flex: 1;
  background: var(--casa-ink);
  color: #ffffff;
  border: none;
  padding: 9px 12px;
  border-radius: 4px;
  font-family: var(--casa-head);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: background 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-quick-spec:hover {
  background: var(--casa-orange);
}

.btn-quick-zalo {
  background: #0068ff;
  color: #ffffff;
  border: none;
  padding: 9px 12px;
  border-radius: 4px;
  font-family: var(--casa-head);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.btn-quick-zalo:hover {
  background: #0054d1;
}

/* Phần thông tin card */
.bunk-info {
  padding: 18px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.bunk-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 11px;
  color: var(--casa-muted);
}

.bunk-category-tag {
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--casa-orange);
}

.bunk-warranty-pill {
  background: #f4f1eb;
  color: #59554d;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
}

.bunk-title {
  margin: 0 0 10px;
  font-family: var(--casa-head);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.35;
}

.bunk-title a {
  color: var(--casa-ink);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s ease;
}

.bunk-title a:hover {
  color: var(--casa-orange);
}

/* Thông số nổi bật của mẫu giường */
.bunk-specs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.bunk-chip {
  background: #f7f6f3;
  color: #4b4844;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid #e7e4dc;
}

.bunk-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 12px;
  font-size: 12px;
}

.bunk-stars {
  display: flex;
  gap: 1.5px;
  color: #f59e0b;
}

.bunk-stars svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

.bunk-rating-count {
  color: var(--casa-muted);
  font-size: 11.5px;
}

.bunk-price-row {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px dashed var(--casa-stone);
}

.bunk-price-main {
  font-family: var(--casa-head);
  font-size: 17px;
  font-weight: 700;
  color: var(--casa-ink);
}

.bunk-price-sub {
  font-size: 11px;
  color: var(--casa-muted);
}

/* Chế độ xem danh sách (List View) */
.bunk-grid-4cols.is-list-view {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.bunk-grid-4cols.is-list-view .bunk-card {
  flex-direction: row;
  min-height: 200px;
}

.bunk-grid-4cols.is-list-view .bunk-top {
  width: 260px;
  aspect-ratio: auto;
  flex-shrink: 0;
}

/* 6. PHÂN TRANG & THÔNG BÁO */
.cat-pagination-wrap {
  margin-top: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 0;
  border-top: 1px solid var(--casa-stone);
  flex-wrap: wrap;
  gap: 16px;
}

.cat-custom-note {
  font-size: 13.5px;
  color: var(--casa-muted);
}

.cat-custom-note strong {
  color: var(--casa-ink);
}

.cat-custom-note a {
  color: var(--casa-orange);
  text-decoration: none;
  font-weight: 700;
}

.cat-pagination {
  display: flex;
  gap: 6px;
}

.cat-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--casa-action);
  border: 1px solid var(--casa-stone);
  background: #ffffff;
  color: var(--casa-ink);
  font-family: var(--casa-head);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}

.cat-page-btn:hover {
  border-color: var(--casa-orange);
  color: var(--casa-orange);
}

.cat-page-btn.active {
  background: var(--casa-ink);
  color: #ffffff;
  border-color: var(--casa-ink);
}

/* 7. SECTION: TIÊU CHUẨN KỸ THUẬT & AN TOÀN CASA */
.cat-safety-section {
  background-color: var(--casa-warm);
  padding: clamp(64px, 7vw, 92px) 0;
  border-top: 1px solid #ebdfcd;
  border-bottom: 1px solid #ebdfcd;
}

.cat-section-header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto clamp(36px, 4vw, 56px);
}

.cat-section-badge {
  display: inline-block;
  background-color: var(--casa-orange);
  color: #ffffff;
  font-family: var(--casa-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--casa-action);
  margin-bottom: 14px;
}

.cat-section-title {
  font-family: var(--casa-head);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.035em;
  color: var(--casa-ink);
  margin: 0 0 14px;
}

.cat-section-title em {
  font-style: normal;
  color: var(--casa-orange);
}

.cat-section-subtitle {
  font-size: 15.5px;
  color: var(--casa-muted);
  line-height: 1.65;
  margin: 0;
}

.safety-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.safety-card {
  background: #ffffff;
  border: 1px solid #e7dfd4;
  border-radius: 12px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.safety-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
}

.safety-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: #fff4e5;
  color: var(--casa-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.safety-card h3 {
  font-family: var(--casa-head);
  font-size: 18px;
  font-weight: 700;
  color: var(--casa-ink);
  margin: 0 0 10px;
  line-height: 1.3;
}

.safety-card p {
  font-size: 13.5px;
  color: var(--casa-muted);
  line-height: 1.65;
  margin: 0;
}

/* 8. SECTION: BẢNG SO SÁNH CÁC DÒNG GIƯỜNG TẦNG */
.cat-comparison-section {
  padding: clamp(64px, 7vw, 92px) 0;
  background: #ffffff;
}

.cat-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--casa-stone);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}

.cat-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 720px;
}

.cat-compare-table th,
.cat-compare-table td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid var(--casa-stone);
}

.cat-compare-table th {
  background-color: #f7f5f1;
  font-family: var(--casa-head);
  font-weight: 700;
  color: var(--casa-ink);
  font-size: 15px;
}

.cat-compare-table th.col-highlight {
  background-color: #fef0dd;
  color: #b05a00;
}

.cat-compare-table tr:hover td {
  background-color: #fdfbf7;
}

.cat-compare-table td:first-child {
  font-weight: 600;
  color: var(--casa-ink);
  background-color: #faf9f6;
  width: 22%;
}

/* 9. SECTION: QUY TRÌNH MAY ĐO 4 BƯỚC */
.cat-process-section {
  background-color: #fcfbfa;
  padding: clamp(64px, 7vw, 92px) 0;
  border-top: 1px solid var(--casa-stone);
}

.cat-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.process-step-card {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--casa-stone);
  border-radius: 12px;
  padding: 30px 24px;
}

.step-num {
  font-family: var(--casa-head);
  font-size: 32px;
  font-weight: 800;
  color: #edd9c2;
  margin-bottom: 14px;
  line-height: 1;
}

.process-step-card h3 {
  font-family: var(--casa-head);
  font-size: 17px;
  font-weight: 700;
  color: var(--casa-ink);
  margin: 0 0 10px;
}

.process-step-card p {
  font-size: 13.5px;
  color: var(--casa-muted);
  line-height: 1.65;
  margin: 0;
}

/* 10. SECTION: CAM KẾT CHÍNH SÁCH KAYA / CASA */
.cat-policy-strip {
  background-color: var(--casa-ink);
  color: #ffffff;
  padding: 42px 0;
}

.cat-policy-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.policy-strip-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.policy-icon-circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 158, 34, 0.15);
  color: var(--casa-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.policy-strip-item h4 {
  font-family: var(--casa-head);
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 4px;
}

.policy-strip-item p {
  font-size: 12.5px;
  color: #aaa59e;
  margin: 0;
  line-height: 1.5;
}

/* 11. SECTION: FAQ ACCORDION (SEO CÂU HỎI THƯỜNG GẶP) */
.cat-faq-section {
  padding: clamp(64px, 7vw, 92px) 0;
  background: #ffffff;
}

.cat-faq-list {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.faq-item {
  border: 1px solid var(--casa-stone);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s;
}

.faq-item.is-open {
  border-color: var(--casa-orange);
}

.faq-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  background: #ffffff;
  border: none;
  font-family: var(--casa-head);
  font-size: 16px;
  font-weight: 700;
  color: var(--casa-ink);
  text-align: left;
  cursor: pointer;
  transition: background 0.2s;
}

.faq-item.is-open .faq-header {
  background: #fffaf2;
  color: var(--casa-orange);
}

.faq-icon-cross {
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.25s ease;
  color: var(--casa-muted);
}

.faq-item.is-open .faq-icon-cross {
  transform: rotate(45deg);
  color: var(--casa-orange);
}

.faq-body {
  padding: 0 22px 18px;
  background: #fffaf2;
  display: none;
  font-size: 14.5px;
  color: #4f4c47;
  line-height: 1.7;
}

.faq-item.is-open .faq-body {
  display: block;
}

/* 12. SECTION: FINAL CTA BANNER */
.cat-final-cta {
  background: linear-gradient(135deg, var(--casa-orange) 0%, #eb8409 100%);
  color: #ffffff;
  padding: clamp(60px, 8vw, 88px) 0;
  text-align: center;
}

.cat-final-content {
  max-width: 760px;
  margin: 0 auto;
}

.cat-final-content h2 {
  font-family: var(--casa-head);
  font-size: clamp(30px, 3.8vw, 46px);
  font-weight: 700;
  margin: 0 0 16px;
  line-height: 1.2;
}

.cat-final-content p {
  font-size: 16px;
  color: #452402;
  margin: 0 0 32px;
  line-height: 1.65;
}

.cat-final-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.btn-final-zalo {
  background: var(--casa-ink);
  color: #ffffff;
  font-family: var(--casa-head);
  font-weight: 700;
  font-size: 14.5px;
  padding: 13px 26px;
  border-radius: var(--casa-action);
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-final-zalo:hover {
  background: #000000;
  transform: translateY(-2px);
}

.btn-final-quote {
  background: #ffffff;
  color: var(--casa-ink);
  font-family: var(--casa-head);
  font-weight: 700;
  font-size: 14.5px;
  padding: 13px 24px;
  border-radius: var(--casa-action);
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}

.btn-final-quote:hover {
  background: #f7f5f0;
  transform: translateY(-2px);
}

/* 13. MODAL XEM NHANH THÔNG SỐ (QUICK SPEC MODAL) */
.cat-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(18, 17, 15, 0.7);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.cat-modal-overlay.is-active {
  display: flex;
}

.cat-modal-dialog {
  background: #ffffff;
  border-radius: 14px;
  max-width: 680px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
  animation: modalFadeUp 0.28s var(--casa-ease);
}

@keyframes modalFadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cat-modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--casa-stone);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cat-modal-header h3 {
  font-family: var(--casa-head);
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: var(--casa-ink);
}

.btn-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--casa-muted);
  cursor: pointer;
  line-height: 1;
  padding: 4px;
}

.cat-modal-body {
  padding: 24px;
}

.modal-spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.modal-spec-cell {
  background: #fbf9f6;
  padding: 10px 14px;
  border-radius: 6px;
  border: 1px solid #eee8df;
}

.modal-spec-cell span {
  display: block;
  font-size: 11px;
  color: var(--casa-muted);
  text-transform: uppercase;
  margin-bottom: 2px;
}

.modal-spec-cell strong {
  display: block;
  font-size: 13.5px;
  color: var(--casa-ink);
}

.modal-note-box {
  background: #fff8ef;
  border-left: 3px solid var(--casa-orange);
  padding: 12px 14px;
  border-radius: 0 6px 6px 0;
  font-size: 13px;
  color: #634317;
  margin-bottom: 22px;
}

.cat-modal-footer {
  display: flex;
  gap: 12px;
}

.cat-modal-footer a,
.cat-modal-footer button {
  flex: 1;
  text-align: center;
}

/* 14. RESPONSIVE BREAKPOINTS */
@media (max-width: 1080px) {
  .bunk-grid-4cols {
    grid-template-columns: repeat(3, 1fr);
  }
  .safety-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .cat-process-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .cat-policy-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .cat-hero-content {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .bunk-grid-4cols {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 12px;
  }
  .cat-hero-stats {
    grid-template-columns: repeat(3, 1fr);
  }
  .cat-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .cat-filters-group {
    justify-content: space-between;
  }
  .cat-select-wrap select {
    width: 100%;
  }
  .cat-view-toggles {
    display: none;
  }
  .modal-spec-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .bunk-grid-4cols {
    grid-template-columns: 1fr;
  }
  .safety-cards-grid {
    grid-template-columns: 1fr;
  }
  .cat-process-grid {
    grid-template-columns: 1fr;
  }
  .cat-policy-grid {
    grid-template-columns: 1fr;
  }
  .cat-hero-stats {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .cat-pagination-wrap {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .cat-modal-footer {
    flex-direction: column;
  }
}


/* Full-Width cho các Section lớn có background */
.cat-safety-section,
.cat-compare-section,
.cat-process-section,
.cat-warranty-section,
.cat-faq-section,
.cat-cta-section {
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  box-sizing: border-box !important;
}