/* ==========================================================
   Trang thương hiệu "Romar" (romar.html)
   Figma node 65:394 (file dt5I7wF6S9aoBL4810OvMM). Tái dùng gần như toàn bộ biến
   CSS/class đã có (--romar-teal-dark, .romar-catalog-hero/-title/-toolbar/-count/
   -filters, .romar-product-grid, .romar-catalog-card/.romar-product-* card) - file
   này chỉ chứa phần thật sự RIÊNG của trang: hình trang trí + khoảng cách lưới→footer.
   ========================================================== */

/* Rà soát điều hướng toàn site (2026-09-16): tab "Romar" trong brandbar giờ là
   <span> (active-item, khớp sairo.html) vì đang đứng ở chính trang này - không
   thể tự link về chính nó. Chỉ đổi cursor, style giữ nguyên đồng nhất 3 tab. */
.romar-brandbar-link--current{
  cursor:default;
}

/* Hình cung tròn trang trí (node 68:650 "Subtract", #9FC57B opacity .7, xoay
   61.15° - đã bake sẵn trong SVG export, không tự xoay lại bằng CSS transform).
   Vị trí đo từ .romar-catalog-hero (bắt đầu ngay sau brandbar, không có subbar ở
   trang này): top 20px, right 199px (renderBounds Figma, đổi sang toạ độ tương đối
   mép phải khung 1440 để không lệch theo kỹ thuật canh giữa scrollbar-gutter). */
.romar-brand-decor{
  display:none;
  position:absolute;
  pointer-events:none;
  z-index:0;
}
@media (min-width:1440px){
  .romar-brand-decor{
    display:block;
    top:20px;
    right:199px;
    width:156px;
    height:138px;
  }
}

/* Khoảng cách lưới 8 sản phẩm: divider toolbar -> grid = 46px (đo node 68:714 Line1
   -> Group 14 190:1996); grid -> footer = 72px (đo Group 15 190:2040 cuối -> footer
   106:2718) - 2 giá trị RIÊNG của trang này, không trùng 40px/54px đã dùng ở 2 trang
   kia nên không sửa .romar-catalog-list gốc, dùng class scoped --brand. */
.romar-catalog-list--brand{
  padding-top:17px; /* 46px đo được - 29px padding-bottom sẵn có trong .romar-catalog-toolbar */
  padding-bottom:72px;
}

/* ==========================================================
   Mobile - node 462:1731 (đã export ảnh xem thật, không suy theo tên layer)
   ========================================================== */

/* Không có brandbar ở mobile (giống pattern đã sửa cho san-pham-ua-chuong.html) */
@media (max-width:1439.98px){
  .romar-page-brand .romar-brandbar{
    display:none;
  }

  /* Tiêu đề + đếm CĂN GIỮA ở mobile (khác desktop căn trái), tiêu đề đậm hơn hẳn
     desktop: Anuphan Bold 700/40px (không phải SemiBold 600 như bản 64px desktop -
     đọc trực tiếp style node 462:1733, không suy theo pattern chung các trang khác). */
  .romar-page-brand .romar-catalog-hero .container-xl{
    text-align:center;
  }
  .romar-page-brand .romar-catalog-title{
    font-weight:700;
  }
  .romar-page-brand .romar-catalog-toolbar{
    flex-direction:column;
    align-items:center;
    gap:12px;
  }
  .romar-page-brand .romar-catalog-filters{
    justify-content:center;
  }
}

/* Icon lọc hình phễu tròn (node 462:1767/1768/1769): nền #005C6F, icon trắng
   28x28px - chỉ hiện ở mobile/tablet <1440px, ẩn hẳn ở desktop (đổi lại dùng 2
   trigger "Danh mục sản phẩm"/"Loại sản phẩm" riêng như mọi trang khác). */
.romar-mobile-filter-icon{
  display:none;
}
@media (max-width:1439.98px){
  .romar-mobile-filter-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    border-radius:50%;
    background:#005C6F;
    border:none;
    padding:0;
    flex:0 0 auto;
  }
  .romar-mobile-filter-icon img{
    width:16px;
    height:auto;
  }
}

/* Đường kẻ dưới toolbar ở mobile (node 462:1765: 1px #005C6F, rộng ~345px, canh
   giữa) - trang này KHÔNG dùng đường kẻ 3px/1040px full như tat-ca-san-pham.html
   desktop, chỉ có ở mobile, mảnh và ngắn hơn hẳn. */
@media (max-width:1439.98px){
  .romar-page-brand .romar-catalog-toolbar{
    border-bottom:none;
    position:relative;
  }
  .romar-page-brand .romar-catalog-toolbar::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-16px;
    transform:translateX(-50%);
    width:86%;
    max-width:345px;
    height:1px;
    background:#005C6F;
  }
}