/* ==========================================================
   Romar - Trang chủ
   Màu & font lấy từ Figma (file IWJv8bahLtY1t333ygDgiW, node 1:566)
   ========================================================== */

/* ---------- Font tự host (2026-09-17) ----------
   Thay cho <link> gọi Google Fonts CDN (đã bỏ khỏi header.php) - 8 file .woff2
   lấy từ chính nguồn gốc font variable trên GitHub google/fonts (KHÔNG lấy qua
   Google Fonts CDN rồi tải lại từng subset - CDN css2 API chia nhỏ mỗi weight
   thành 4 file theo script (thai/vietnamese/latin-ext/latin), không cho ra 1
   file/weight như yêu cầu). Đã tách static instance đúng từng weight bằng
   `fonttools varLib.instancer` từ file variable gốc rồi convert sang .woff2,
   giữ ĐẦY ĐỦ bộ glyph gốc (kể cả dấu tiếng Việt - đã verify ệ/ữ/đ có mặt trong
   cmap, không bị thiếu do subset).
   Danh sách weight khớp đúng docs/design-rules.md mục Typography (import gốc:
   "Anuphan:wght@400;500;600;700&Arimo:ital,wght@0,400;0,500;0,700;1,700") -
   không tải thiếu/thừa.
   Arimo 700 italic: lấy từ file variable RIÊNG `Arimo-Italic[wght].ttf` (Google
   Fonts tách file Upright/Italic thành 2 file variable riêng cho Arimo) - đã
   verify qua fontTools: OS/2.fsSelection ITALIC bit = true, post.italicAngle =
   -12° (nghiêng thật do nhà thiết kế vẽ tay từng glyph, KHÔNG phải trình duyệt
   tự nghiêng font Regular bằng CSS synthetic oblique). Dùng đúng cho heading
   "Destello" (.romar-destello-panel h2) - xem docs/design-rules.md. */
/* Anuphan 300 (Light) - thêm 2026-09-30: Figma dùng nét 300 cho placeholder/ô
   nhập (vd trang Thanh toán 462:2023, "Email"/"Họ"/"Nhập mã giảm giá"...). Thiếu
   file này trình duyệt hiển thị thành nét 400. Tạo cùng cách (fontTools
   instancer wght=300 từ Anuphan[wght].ttf của google/fonts -> woff2). */
@font-face{
  font-family:'Anuphan';
  src:url('../fonts/Anuphan-300.woff2') format('woff2');
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Anuphan';
  src:url('../fonts/Anuphan-400.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Anuphan';
  src:url('../fonts/Anuphan-500.woff2') format('woff2');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Anuphan';
  src:url('../fonts/Anuphan-600.woff2') format('woff2');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Anuphan';
  src:url('../fonts/Anuphan-700.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Arimo';
  src:url('../fonts/Arimo-400.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Arimo';
  src:url('../fonts/Arimo-500.woff2') format('woff2');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Arimo';
  src:url('../fonts/Arimo-700.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Arimo';
  src:url('../fonts/Arimo-700italic.woff2') format('woff2');
  font-weight:700;
  font-style:italic; /* khớp đúng file in nghiêng thật Arimo-Italic[wght].ttf, không dùng trên file Regular */
  font-display:swap;
}

:root{
  --romar-teal-dark:#0E6678;   /* heading màu chính */
  --romar-teal:#005C6F;        /* nút / text đậm */
  --romar-teal-light:#1D7080;  /* text phụ */
  --romar-amber:#EBAC01;       /* màu nhấn (nút CTA vàng) */
  --romar-bg-soft:#EAF1F1;     /* nền section giới thiệu */
  --romar-teal-pale:#72A7B0;   /* nền cột phải trang giỏ hàng/thanh toán (node 159:4889) */
  --romar-max-width:1440px;
}

/* Chừa gutter đều 2 bên cho scrollbar dọc, để nội dung canh giữa (vd logo header)
   trùng đúng tâm hình học của khung thiết kế Figma (1440px), thay vì bị lệch trái
   theo bề rộng thanh scrollbar. scrollbar-gutter không có tác dụng trên scrollbar
   gốc của <html> ở Chromium (giới hạn đã biết của engine) nên chuyển scroll sang
   <body> để CSS áp dụng được. */
html{
  height:100%;
  overflow:hidden;
}
body{
  height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-gutter: stable; /* SỬA (2026-09-30, khớp Figma 106:2014): bỏ both-edges - gutter trái 15px làm header/thanh brand/banner/footer không tràn viền như Figma */
  font-family:"Anuphan", sans-serif;
  color:#1a1a1a;
}

.container-xl{
  max-width:var(--romar-max-width);
}

h1,h2,h3,h4,h5,h6{
  font-family:"Anuphan", sans-serif;
}

a{ text-decoration:none; }

img{ max-width:100%; }

.romar-heading{
  color:var(--romar-teal-dark);
  font-weight:700;
  font-size:clamp(1.8rem, 4vw, 3rem);
  margin-bottom:.75rem;
}
@media (min-width:1440px){
  .romar-heading{ font-size:64px; line-height:72px; }
}

.romar-subheading{
  color:var(--romar-teal);
  font-weight:500;
  max-width:680px;
  margin-bottom:2.5rem;
}

/* Chọn theo nhu cầu: khoảng cách đo từ Figma (node 20:487/20:488) */
.romar-section-needs{ padding-top:65px; padding-bottom:121px; }
.romar-section-needs .container-xl{ position:relative; }
.romar-section-needs .romar-heading,
.romar-section-needs .romar-subheading{ position:relative; z-index:1; }
/* Hình trang trí lưỡi liềm teal, xuất SVG từ Figma node 20:498 (absoluteRenderBounds),
   vị trí đo từ mép trái/trên của .container-xl trong khối "Chọn theo nhu cầu" */
.romar-needs-accent{
  display:none;
  position:absolute;
  pointer-events:none;
  z-index:0;
}
@media (min-width:1440px){
  .romar-needs-accent{
    display:block;
    top:-55px;
    left:185px;
    width:186px;
    height:164px;
  }
}

/* Sản phẩm được ưa chuộng: khoảng cách đo từ Figma (node 44:108/44:110) */
.romar-section-products{ padding-top:132px; padding-bottom:61px; }
.romar-section-products .container-xl{ position:relative; }
.romar-section-products .romar-heading,
.romar-section-products .romar-subheading{ position:relative; z-index:1; }
.romar-section-products .romar-heading{ margin-bottom:10px; }
.romar-section-products .romar-subheading{ margin-bottom:93px; }
/* Hình trang trí xuất SVG từ Figma node 44:42 (absoluteRenderBounds),
   màu #9FC57B (xanh lá/olive, khác màu teal của "Chọn theo nhu cầu") */
.romar-products-accent{
  display:none;
  position:absolute;
  pointer-events:none;
  z-index:0;
}
@media (min-width:1440px){
  .romar-products-accent{
    display:block;
    top:-134px;
    left:186px;
    width:211px;
    height:100px;
  }
}
.romar-needs-combo{ margin-top:48px; }
.romar-btn-combo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:361px;
  height:50px;
  background:var(--romar-teal);
  color:#fff;
  border-radius:25px;
  font-size:24px;
  font-weight:500;
  padding:0 24px;
  border:none;
}
@media (max-width:420px){
  .romar-btn-combo{ font-size:18px; }
}
.romar-btn-combo:hover{ background:var(--romar-teal-dark); color:#fff; }
.romar-section-needs .romar-heading{ margin-bottom:0; }
.romar-section-needs .romar-subheading{ margin-bottom:30px; }

/* ---------- Buttons ---------- */
.romar-btn-primary{
  background:var(--romar-teal);
  color:#fff;
  border-radius:10px;
  padding:.65rem 1.75rem;
  font-weight:600;
  border:none;
}
.romar-btn-primary:hover{ background:var(--romar-teal-dark); color:#fff; }

.romar-btn-amber{
  background:var(--romar-amber);
  color:#1a1a1a;
  border-radius:10px;
  padding:.65rem 1.75rem;
  font-weight:600;
  border:none;
}
.romar-btn-amber:hover{ filter:brightness(0.95); color:#1a1a1a; }

.romar-btn-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:236px;
  height:50px;
  border:1px solid var(--romar-teal);
  color:var(--romar-teal);
  border-radius:25px;
  font-size:24px;
  font-weight:500;
  padding:0 24px;
}
.romar-btn-outline:hover{ background:var(--romar-teal); color:#fff; }
.romar-btn-cta{ max-width:274px; padding-left:18px; padding-right:18px; white-space:nowrap; }
@media (max-width:420px){
  .romar-btn-outline{ font-size:18px; }
}

/* ---------- Header ---------- */
/* Chiều cao 108px = logo 88px + padding 10px trên/dưới, khớp Figma node 20:224 */
.romar-navbar{
  padding:10px 0;
  background:#fff;
}
.romar-navbar-inner{ position:relative; }

@media (min-width:992px){
  #mainNav.navbar-collapse{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;
    width:100%;
  }
  .romar-menu-left{ justify-self:start; }
  .romar-nav-right{
    justify-self:end;
    display:flex;
    align-items:center;
    gap:40px;
  }
  .romar-menu-left, .romar-menu-right{ flex-wrap:nowrap; }
}

.romar-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  justify-self:center;
  margin-inline:auto;
  padding:0;
}
.romar-logo img{ height:88px; width:auto; display:block; }
.romar-logo-mobile img{ height:40px; width:auto; border-radius:6px; }

.romar-menu .nav-link{
  color:#005C6F;
  font-weight:600;
  padding:.5rem 1rem;
}
.romar-menu .nav-link:hover{ color:var(--romar-teal-dark); }
/* Mũi tên xuống sau "Sản phẩm"/"Combo" (Figma 1:1070/1:1079): nét 8x4 nét 2px,
   cách chữ 8px, tâm thấp hơn tâm chữ 2.5px (svg 10x6 đã gồm 1px viền nét). */
.romar-menu-chevron{
  display:inline-block;
  width:10px;
  height:6px;
  margin-left:7px;
  vertical-align:middle;
  position:relative;
  top:1px;
}

/* Active-item mega menu (mục trùng trang hiện tại, <span> không phải link) - quy
   tắc đã thống nhất, dùng chung ở đây từ rà soát điều hướng toàn site (2026-09-16)
   vì tat-ca-san-pham.html không có CSS riêng để khai lại như các trang khác. Các
   trang có CSS riêng (tin-tuc.css/cam-nang.css/rgc-vietnam.css) vẫn khai lại 1 bản
   giống hệt - không xung đột, chỉ trùng lặp vô hại. */
.romar-menu .nav-link--current{ cursor:default; }
.romar-menu .nav-link--current:hover{ color:#005C6F; }

.romar-icons{ gap:30px; }
.romar-icons a{ display:flex; }
.romar-icons img{ width:40px; height:40px; }

/* Icon Tìm kiếm/Giỏ hàng cố định ở mobile/tablet (<992px) - khớp Figma mobile,
   xem giải thích đầy đủ trong header.php (romar-icons-mobile). Chỉ hiện ở
   <992px, desktop vẫn dùng đúng .romar-icons gốc trong #mainNav. */
.romar-icons-mobile{ gap:16px; order:2; }
.romar-icons-mobile a{ display:flex; }
.romar-icons-mobile img{ width:24px; height:24px; }
@media (min-width:992px){
  .romar-icons-mobile{ display:none !important; }
}
/* SỬA (2026-09-28, theo ảnh Chị Thảo gửi): thứ tự top-bar mobile đổi thành
   hamburger (trái) - logo (canh giữa thật, không lệch theo bề rộng 2 bên
   khác nhau) - icon Tìm kiếm/Giỏ hàng (phải). TRƯỚC ĐÂY dùng flex + `order`
   (logo trái, icon+hamburger phải) - đổi sang CSS Grid 3 cột (auto/1fr/auto)
   để logo LUÔN canh đúng tâm ngang bất kể hamburger (~24px) và cụm 2 icon
   (~64px, có badge số lượng) rộng khác nhau - flex+order không tự làm được
   việc này, phải dùng grid (cùng kỹ thuật `#mainNav.navbar-collapse` desktop
   đã dùng ở dưới, xem dòng grid-template-columns tương tự).
   `!important` cần thiết - Bootstrap tự set `.navbar>.container-xl{display:flex}`
   (specificity cao hơn 1 class `.romar-navbar-inner`), giống lý do đã ghi ở
   rule `#mainNav.navbar-collapse{display:grid !important}` phía trên. */
@media (max-width:991.98px){
  .romar-navbar-inner{
    display:grid !important;
    grid-template-columns:auto 1fr auto;
    /* `dense` BẮT BUỘC - thứ tự DOM thật trong header.php là logo(cột 2) rồi
       icon(cột 3) rồi hamburger(cột 1); thuật toán auto-placement mặc định
       ("sparse") không lùi lại lấp ô trống cột 1 hàng 1 sau khi con trỏ đã đi
       qua cột 2/3, khiến hamburger bị đẩy xuống HÀNG 2 dù đã gán đúng
       grid-column:1 - lỗi thật đã thấy qua Playwright (hamburger rơi xuống
       dòng riêng bên dưới). `dense` cho phép lấp ngược ô trống. */
    grid-auto-flow:dense;
    align-items:center;
  }
  .navbar-toggler{ grid-column:1; justify-self:start; order:initial; }
  .romar-logo-mobile{ grid-column:2; justify-self:center; order:initial; }
  .romar-icons-mobile{ grid-column:3; justify-self:end; order:initial; }
}

/* ---------- Sidebar menu mobile - trượt từ trái sang (2026-09-28) ----------
   TRƯỚC ĐÂY: #mainNav dùng nguyên `.collapse` của Bootstrap, xổ THẲNG XUỐNG
   dưới header khi bấm hamburger - sai so với Figma mobile (menu phải là
   sidebar/off-canvas trượt từ mép trái, có lớp phủ tối phía sau). Đồng thời
   phát hiện thêm 1 lỗi thứ tự: `#mainNav` không có `order` riêng nên mặc định
   order:0 - THẤP HƠN order:1/2/3 của logo/icons-mobile/toggler ở trên -> mỗi
   lần mở, nội dung menu bị chèn LÊN TRÊN cả logo/icon/hamburger (đã xác nhận
   qua Playwright). Chuyển #mainNav sang `position:fixed` giải quyết dứt điểm
   cả 2 vấn đề cùng lúc: fixed tự động thoát khỏi flex flow của
   `.romar-navbar-inner` nên `order` không còn ý nghĩa/không còn gây lệch nữa.

   SỐ ĐO width/padding/màu bên dưới dùng tạm theo token màu/khoảng cách đã
   chuẩn hoá toàn site (chưa đối chiếu được Figma node 462:2222 - Figma MCP
   mất kết nối lúc làm, xem ghi chú cuối file mobile-nav.js) - CẦN đối chiếu lại
   khi có Figma, KHÔNG coi là số liệu chốt cuối cùng như các phần khác đã làm
   trong theme này. */
@media (max-width:991.98px){
  #mainNav.navbar-collapse{
    display:block !important;   /* đè `.collapse{display:none}` mặc định của Bootstrap - sidebar luôn có mặt trong DOM, ẩn/hiện bằng transform để có animation trượt */
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:300px;
    max-width:85vw;
    background:#fff;
    z-index:1050;
    padding:24px 20px 32px;
    overflow-y:auto;
    box-shadow:4px 0 24px rgba(0,0,0,.18);
    transform:translateX(-100%);
    transition:transform .3s ease;
  }
  #mainNav.navbar-collapse.is-open{ transform:translateX(0); }
  .romar-mobile-nav-backdrop{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    z-index:1049;
    opacity:0;
    pointer-events:none;
    transition:opacity .3s ease;
  }
  .romar-mobile-nav-backdrop.is-open{ opacity:1; pointer-events:auto; }
  .romar-mobile-nav-backdrop[hidden]{ display:none; }
  .romar-mobile-nav-close{
    display:flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    margin:0 0 16px auto;
    border:none;
    background:var(--romar-bg-soft);
    color:var(--romar-teal-dark);
    font-size:22px;
    line-height:1;
    border-radius:50%;
  }
  .romar-mobile-nav-close:hover{ background:var(--romar-teal-dark); color:#fff; }
  /* Menu/icon bên trong sidebar xếp dọc (khác layout hàng ngang desktop) - dùng
     lại đúng .romar-menu/.romar-icons đã có, chỉ đổi hướng flex. */
  #mainNav .romar-menu{ flex-direction:column; gap:4px; }
  #mainNav .romar-nav-right{ flex-direction:column; align-items:flex-start; gap:20px; margin-top:20px; }
  #mainNav .romar-logo{ display:none; }   /* logo desktop (giữa header) không cần lặp lại trong sidebar - đã có logo riêng ở top bar mobile */
}
body.romar-nav-open{ overflow:hidden; }   /* khoá cuộn nền khi sidebar đang mở, chỉ cuộn được bên trong sidebar */

/* LỖI THẬT PHÁT HIỆN QUA PLAYWRIGHT (2026-09-28): sidebar/backdrop đặt top:0
   bị thanh admin bar WordPress (#wpadminbar, position:fixed, z-index 99999 -
   CAO HƠN z-index:1050 của sidebar) đè lên, chặn click vào nút đóng (đã xác
   nhận: Playwright báo "wpadminbar intercepts pointer events"). Chỉ ảnh hưởng
   khi ĐÃ ĐĂNG NHẬP wp-admin (Chị Thảo/nhân viên) - khách thường không có admin
   bar nên không gặp lỗi này, nhưng vẫn cần sửa vì Chị Thảo test bằng tài khoản
   admin. Bù `top` đúng 2 breakpoint chiều cao admin bar chuẩn của WP core
   (32px desktop, 46px <783px) thay vì đấu z-index (đấu z-index sẽ khiến
   sidebar đè LÊN admin bar - không nên, admin bar phải luôn ở trên cùng). */
@media (max-width:991.98px){
  body.admin-bar #mainNav.navbar-collapse,
  body.admin-bar .romar-mobile-nav-backdrop{ top:32px; }
}
@media (max-width:782px){
  body.admin-bar #mainNav.navbar-collapse,
  body.admin-bar .romar-mobile-nav-backdrop{ top:46px; }
}

.romar-subbar{
  background:#0E6678;
  min-height:59px;
  display:flex;
  align-items:center;
  padding-block:6px;
}
@media (min-width:1440px){
  .romar-subbar{ height:59px; padding-block:0; }
}
.romar-subnav{
  flex-wrap:wrap;
  justify-content:center;
  width:100%;
  row-gap:4px;
}
.romar-subnav .nav-link{
  color:#fff;
  font-size:14px;
  padding:2px 12px;
  font-weight:500;
}
@media (min-width:1440px){
  /* padding:0 57px chỉ đúng ở khung 1440px (Figma) - ở mobile 4 mục không đủ chỗ
     nên gây vỡ dòng chồng chữ lên băng "Destello/Romar/Sairo" phía trên. */
  .romar-subnav .nav-link{ font-size:18px; padding:0 57px; }
}
.romar-subnav .nav-link:hover{ text-decoration:underline; }

/* ---------- Hero ---------- */
.romar-hero{
  position:relative;
  min-height:460px;
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  color:#fff;
}
.romar-hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.05) 100%);
}
.romar-hero .container-xl{ position:relative; z-index:1; }
.romar-hero-content h1{
  font-weight:700;
  font-size:clamp(2rem, 5vw, 3.6rem);
  line-height:1.1;
  margin-bottom:1rem;
}
@media (min-width:1440px){
  .romar-hero-content h1{
    font-size:64px;
    line-height:72px;
  }
}
.romar-hero-content p{
  font-size:1.05rem;
  font-weight:500;
  margin-bottom:1.5rem;
}
.romar-hero-badges{
  display:flex;
  gap:1rem;
  margin-top:2rem;
  flex-wrap:wrap;
}
.romar-hero-badges img{ height:56px; width:auto; }

/* ---------- Chọn theo nhu cầu / Sản phẩm (carousel-style row) ---------- */
/* Khoảng cách mũi tên → khối thẻ = 42px theo Figma (452:1200/1202 và 452:1299/1300),
   tính từ cạnh mũi tên đến cột nội dung thật (không phải ảnh trang trí lệch size) —
   áp dụng chung cho cả 2 section vì cùng component Arrow, cùng khoảng cách trong Figma. */
.romar-needs-row{
  display:flex;
  align-items:center;
  gap:42px;
}
.romar-arrow{
  flex:0 0 auto;
  background:transparent;
  border:none;
  padding:0;
  width:44px;
  height:44px;
  display:none;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  opacity:.85;
}
.romar-arrow:hover{ opacity:1; }
.romar-arrow img{ width:100%; height:100%; object-fit:contain; }

@media (min-width: 768px){
  .romar-arrow{ display:flex; }
}

.romar-need-card{
  text-align:center;
  height:100%;
}
/* Khung ảnh cao cố định để tiêu đề 4 thẻ luôn ngang hàng nhau,
   bất kể ảnh gốc mỗi danh mục có tỉ lệ khác nhau (dọc/ngang). */
.romar-need-card-imgwrap{
  height:150px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:1rem;
}
@media (min-width:1440px){
  .romar-need-card-imgwrap{ height:280px; }
}
.romar-need-card img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  display:block;
  object-fit:contain;
  border-radius:16px;
}
.romar-need-card h3{
  font-size:21px;
  font-weight:700;
  color:var(--romar-teal-dark);
  margin-bottom:.35rem;
}
.romar-need-card p{
  font-size:16px;
  font-weight:400;
  line-height:27px;
  color:var(--romar-teal);
  margin-bottom:0;
}

/* ---------- Banner Trắng bừng trong nắng ---------- */
.romar-banner{
  min-height:280px;
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  position:relative;
}
.romar-banner-content{
  text-align:center;
  margin:0 auto;
}
/* Vị trí/kích thước chính xác theo Figma (node 40:528/40:529) ở desktop.
   padding-left = 196px (offset thật trong Figma) trừ đi ~16px bị
   background-size:cover cắt mất mỗi bên do khung banner (tỉ lệ 2.7866 ở
   viewport 1440px) hẹp hơn ảnh gốc (tỉ lệ 2.8501) -> 196-16=180px. */
@media (min-width:1440px){
  .romar-banner{
    min-height:506px;
    align-items:flex-start;
    padding-top:183px;
    padding-left:180px;
  }
  .romar-banner .container-xl{ margin:0; max-width:none; padding:0; }
  .romar-banner-content{ text-align:left; margin:0; }
}
.romar-banner-content h2{
  color:var(--romar-teal-dark);
  font-weight:700;
  font-size:clamp(1.6rem, 3.5vw, 2.5rem);
  margin-bottom:1.25rem;
}
/* Khớp chính xác node Figma 40:529: fontSize 40 / lineHeight 72 (không phải trùng
   khớp ngẫu nhiên qua clamp() như trước — pin cứng ở desktop, line-height cũ đang
   sai 48px do không set, giữ clamp() cho màn nhỏ hơn). */
@media (min-width:1440px){
  .romar-banner-content h2{
    font-size:40px;
    line-height:72px;
  }
}

/* ---------- Sản phẩm được ưa chuộng ---------- */
/* Card giờ dùng chung .romar-catalog-card/.romar-product-* (spec đúng Figma
   105:1759, xem docs/figma-san-pham-ua-chuong.md mục 4) - style định nghĩa ở
   khối "Trang Tất cả sản phẩm" phía dưới file này, không định nghĩa lại ở đây. */

/* ---------- Giới thiệu công ty ---------- */
/* Khoảng cách 61px trước section này đã tính vào padding-bottom của
   "Sản phẩm được ưa chuộng" -> padding-top ở đây phải là 0 để không cộng dồn.
   padding-bottom = khoảng cách đo tới heading "Tìm theo thương hiệu" kế tiếp. */
.romar-section-about{
  background:var(--romar-bg-soft);
  padding-top:0;
  padding-bottom:27px;
  position:relative;
}
.romar-section-about .container-xl{ position:relative; }
/* Icon 3 cột (about-asset6/7/8-icon.png) đã được tách khỏi phần số/nhãn baked sẵn
   trong ảnh gốc (about-asset6/7/8.png) - số/nhãn nay là text HTML thật (.romar-about-number)
   để canh khoảng cách chính xác bằng CSS, không phụ thuộc vị trí chữ vẽ sẵn trong ảnh.
   Khung icon cao cố định, neo đáy (align-items:flex-end) để đáy icon luôn ngang hàng
   dù 3 ảnh icon có tỉ lệ khác nhau (169×151 / 160×173 / 166×117). */
.romar-about-imgwrap{
  height:90px;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
}
@media (min-width:1440px){
  .romar-about-imgwrap{ height:130px; }
}
.romar-about-img,
.romar-about-imgwrap img{
  max-width:100%;
  width:auto;
  height:100%;
  object-fit:contain;
  object-position:left bottom;
}
.romar-about-number{
  color:#1D4F90;
  font-weight:700;
  font-size:24px;
  line-height:1.2;
  margin-top:.5rem;
  margin-bottom:12px;
}
.romar-section-about p{
  color:var(--romar-teal-light);
  font-size:16px;
  font-weight:500;
  line-height:23px;
  margin:0;
}
/* Hình trang trí hình tròn cam-san hô, xuất SVG từ Figma node 44:234,
   tràn nửa ra ngoài mép trái trang (bleed) */
/* Dựng lại bằng CSS (không qua ảnh xuất từ Figma vì API đang hết quota):
   node 44:234 = vòng tròn lớn Ø135 trừ đi vòng tròn nhỏ Ø46.73 đồng tâm
   -> tương đương 1 hình nhẫn (ring) với border dày = (135-46.73)/2 = 44.135px.
   Tâm hình đặt đúng mép trái section (frame-relative x=-68px so với section),
   nửa trái tràn ra ngoài được body{overflow-x:hidden} cắt tự nhiên — đúng cơ chế
   Figma dùng khung trang để clip, không phải ảnh cắt sẵn. */
.romar-about-accent{
  display:none;
  position:absolute;
  pointer-events:none;
  z-index:0;
  box-sizing:border-box;
  border-radius:50%;
  background:transparent;
}
@media (min-width:1440px){
  .romar-about-accent{
    display:block;
    top:-37px;
    left:-68px;
    width:135px;
    height:135px;
    border:44.135px solid #FE8170;
  }
}

/* Mobile (<768px, 3 cột xếp dọc) - theo Figma node 462:1647 (frame 402×1100):
   mỗi mục canh giữa, icon hiển thị đúng kích thước gốc, số 32px, mô tả 12/16px
   rộng ~202px, vòng tròn trang trí thu nhỏ 0.7 lần so với desktop. */
@media (max-width:767.98px){
  .romar-section-about{
    padding-top:63px;
    padding-bottom:76px;
  }
  .romar-section-about .row{ --bs-gutter-y:36px; }
  .romar-section-about .col-md-4{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  .romar-about-imgwrap{
    height:auto;
    justify-content:center;
  }
  .romar-about-img,
  .romar-about-imgwrap img{
    height:auto;
    object-position:center bottom;
  }
  .romar-about-number{
    font-size:32px;
    margin-top:8px;
    margin-bottom:8px;
  }
  .romar-section-about p{
    font-size:12px;
    line-height:16px;
    max-width:202px !important;
  }
  .romar-about-accent{
    display:block;
    top:-26px;
    left:-47px;
    width:94px;
    height:94px;
    border:31px solid #FE8170;
  }

  /* Ảnh gốc Figma có sẵn chữ số (462:1649/1656/1651): rộng 167 / 201 / 201px;
     ảnh cách đỉnh nền 62px; ảnh -> chữ 16 / 22 / 23px; chữ -> ảnh kế 35 / 53px;
     chữ cuối -> đáy nền 75px. Đoạn 3 Figma lệch trái 8px so với giữa. */
  .romar-section-about{ padding-top:62px; padding-bottom:75px; }
  .romar-section-about .row{ --bs-gutter-y:0; }
  .romar-section-about .romar-about-imgwrap img{ max-width:201px; }
  .romar-section-about .col-md-4:nth-child(1) .romar-about-imgwrap img{ width:167px; }
  .romar-section-about .col-md-4:nth-child(1) p{ margin-top:16px; }
  .romar-section-about .col-md-4:nth-child(2){ margin-top:35px; }
  .romar-section-about .col-md-4:nth-child(2) p{ margin-top:22px; }
  .romar-section-about .col-md-4:nth-child(3){ margin-top:53px; }
  .romar-section-about .col-md-4:nth-child(3) p{ margin-top:23px; position:relative; left:-8px; }
}

/* ---------- Tìm theo thương hiệu ---------- */
/* padding-top 63px = khoảng trắng (không màu) giữa nền xanh nhạt "Giới thiệu công ty"
   (đã kết thúc ở padding-bottom:27px của .romar-section-about) và tiêu đề này -
   xác nhận qua Figma: rect nền kết thúc y=3806, heading top y=3869 (chênh 63px).
   padding-bottom = khoảng cách đo tới ảnh showcase Destello kế tiếp. */
.romar-section-brands{
  padding-top:63px;
  padding-bottom:98px;
}
.romar-brand-card{
  display:flex;
  flex-direction:column;
  text-align:left;
}
/* Khối trên: nền teal nhạt, ảnh sản phẩm tràn rộng hơn khung (đúng tỉ lệ Figma 331/282) */
.romar-brand-top{
  position:relative;
  background:rgba(14, 102, 120, .2);
  aspect-ratio:282/262;
}
/* Ảnh sản phẩm neo từ mép TRÊN của khung teal, kích thước/vị trí đo riêng từng
   brand qua Figma (không dùng chung 1 tỉ lệ) — đặt bằng inline style trên <img>.
   Không cắt bằng overflow:hidden: phần ảnh tràn xuống được .romar-brand-bottom
   (nền trắng đặc, vẽ sau) tự nhiên che phủ theo thứ tự layer. */
.romar-brand-product{
  position:absolute;
  left:0;
  top:0;
  max-width:none;
  object-fit:cover;
}
/* Khối dưới: nền trắng, viền teal nhạt, chứa logo thương hiệu (kích thước khác nhau mỗi brand) */
.romar-brand-bottom{
  /* position:relative để cùng lớp stacking với ảnh absolute trong .romar-brand-top
     (đứng sau trong DOM -> vẽ đè lên phần ảnh tràn xuống, không cần overflow/mask) */
  position:relative;
  background:#fff;
  border:1px solid rgba(14, 102, 120, .2);
  aspect-ratio:282/198;
  margin-top:-1px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 1rem;
}
.romar-brand-logo{
  max-width:78%;
  max-height:60%;
  width:auto;
  height:auto;
  object-fit:contain;
}
.romar-brand-card p{
  margin:1rem 0 0;
  font-size:16px;
  font-weight:400;
  line-height:23px;
  color:var(--romar-teal-dark);
  text-align:center;
}

/* ---------- Destello ---------- */
.romar-destello{
  position:relative;
  overflow:hidden;
}
.romar-destello-track{
  position:relative;
}
.romar-destello-slide{
  position:relative;
}
.romar-destello-bg{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
}
.romar-destello-panel{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:min(90%, 420px);
  background:rgba(255,255,255,.92);
  border-radius:50%;
  aspect-ratio:1/1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:2rem;
}
.romar-destello-panel h2{
  color:var(--romar-teal-dark);
  font-family:"Arimo", sans-serif;
  font-weight:700;
  font-style:italic;
  font-size:2rem;
  margin-bottom:1rem;
}
.romar-destello-panel p{
  color:var(--romar-teal-dark);
  font-size:.85rem;
  margin:0;
}
.romar-arrow-poly{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:56px;
  height:56px;
  z-index:2;
  display:flex;
}
.romar-arrow-poly-left{ left:2%; }
.romar-arrow-poly-right{ right:2%; }

@media (max-width: 767px){
  .romar-destello-panel{ width:80%; padding:1rem; }
  .romar-destello-panel h2{ font-size:1.4rem; }
  .romar-destello-panel p{ font-size:.75rem; }
  .romar-arrow-poly{ width:36px; height:36px; }
}

/* Khớp chính xác Figma (node 44:268/270/274, 221:2698/2699) ở desktop:
   panel lệch tâm (không phải canh giữa), nền #EAF1F1, text trái, kích thước
   thật 328x328, mũi tên 44x44 cách mép ảnh theo px cố định. top/left/width
   TUYỆT ĐỐI không đổi (đã khớp Figma, không phải nguyên nhân lỗi). */
@media (min-width:1440px){
  .romar-destello-panel{
    top:45.4%;
    left:60.7%;
    width:328px;
    background:#EAF1F1;
    align-items:flex-start;
    text-align:left;
    /* padding-bottom giảm 49px -> 24px (2026-09-27) - xem ghi chú font-size/
       line-height bên dưới, cùng 1 nguyên nhân: nội dung "desc" thật (197 ký
       tự) dài hơn nhiều so với placeholder Figma dùng để đo panel, tràn khỏi
       viền tròn 328px ở cỡ chữ gốc dù đã xác nhận dữ liệu ACF sạch (không có
       HTML lỗi TinyMCE). */
    padding:28px 24px 24px;
  }
  /* font-size/line-height 2 dòng dưới đã ĐỔI khỏi số liệu Figma gốc (h2 64/72,
     p 16/26) - CHỦ Ý, không phải sai sót: nội dung "desc" thật dài hơn hẳn
     placeholder Figma, giữ nguyên cỡ chữ gốc sẽ luôn tràn khỏi viền tròn bất kể
     sửa dữ liệu gì (đã xác nhận qua Playwright trước/sau khi đổi). Vị trí/kích
     thước panel (top/left/width) giữ NGUYÊN 100% theo Figma. */
  .romar-destello-panel h2{ font-size:44px; line-height:48px; margin-bottom:.6rem; }
  .romar-destello-panel p{ font-size:14px; line-height:21px; }
  .romar-arrow-poly{ width:44px; height:44px; }
  .romar-arrow-poly-left{ left:151px; }
  .romar-arrow-poly-right{ right:153px; }
}

/* ---------- Chất lượng là trên hết ---------- */
.romar-section-quality{ text-align:center; padding-top:64px; padding-bottom:64px; }
/* SỬA (2026-09-19, rà lại front-page.php theo phản hồi Chị Thảo) - BUG THẬT:
   `.romar-subheading` dùng chung `max-width:680px` (đúng cho "Chọn theo nhu
   cầu"/"Sản phẩm được ưa chuộng") nhưng khối NÀY Figma đo được width=838px
   (node `44:293`, get_design_context xác nhận font-size 16px/color #1d7080/
   text-align:center ĐÃ ĐÚNG - chỉ riêng max-width sai). 680px hẹp hơn khiến
   dòng "...trong suốt quá trình sản xuất..." bị ngắt giữa cụm từ "quá trình
   sản|xuất" (đã verify qua ảnh chụp) - không xảy ra ở Figma vì đủ rộng. */
.romar-section-quality .romar-subheading{ color:var(--romar-teal-light); margin-bottom:12px; line-height:23px; max-width:838px; }
.romar-section-quality .container-xl{ position:relative; }
/* Hình lưỡi liềm trang trí (node 106:3100, #8BAACD opacity .7) lệch trái-trên tiêu
   đề "Chất lượng là trên hết" - nằm phía sau nội dung, không chặn tương tác. */
.romar-quality-decor{
  display:none;
  position:absolute;
  pointer-events:none;
  z-index:0;
}
@media (min-width:1440px){
  .romar-quality-decor{
    display:block;
    top:-60px;
    left:120px;
    width:139px;
    height:103px;
  }
}
.romar-section-quality h2,
.romar-section-quality p,
.romar-section-quality .romar-quality-badge,
.romar-section-quality .row{
  position:relative;
  z-index:1;
}
/* 61px = 37px khoảng cách thật + 24px bù trừ margin-top âm của .row.g-4 (gutter-y) */
/* SỬA (2026-09-18, Phase 8 đối chiếu mobile): thiếu `width:100%` khiến ảnh giữ
   nguyên kích thước gốc >400px, tràn ngang ~10-20px ở viewport <400px (thanh
   cuộn ngang thừa) - `max-width` không tự thu nhỏ ảnh nếu không có `width`. */
/* SỬA TIẾP (2026-09-19, rà lại front-page.php theo phản hồi Chị Thảo) - giá trị
   `max-width:400px` ở trên là TỰ ĐOÁN từ phiên trước, không lấy từ Figma - ảnh
   thật (`quality-badge-text.png`, đã verify qua `naturalWidth`/`naturalHeight`)
   có kích thước gốc CHÍNH XÁC 516x60px, khớp node Figma `44:297`/`106:3108`
   ("Asset 20 1", width=516). Đổi `max-width` từ 400px lên đúng 516px. */
.romar-quality-badge{ width:100%; max-width:516px; margin:0 auto 61px; display:block; }
/* BUG THẬT PHÁT HIỆN THÊM (2026-09-19) khi rà lại: trên các trang WooCommerce
   (archive-product.php/is_shop()...), rule `.woocommerce img, .woocommerce-page
   img{height:auto;max-width:100%}` (specificity 1 class+1 thẻ = 0,1,1) THẮNG
   rule 1 class ở trên (0,1,0) - y hệt bug đã gặp ở badge free-ship - khiến ảnh
   này phồng to bằng 100% bề ngang container (~1371px, gấp 2.6 lần đúng kích
   thước 516px) trên `archive-product.php` (front-page.php không bị vì không
   nằm trong ngữ cảnh `.woocommerce`/`.woocommerce-page`). Thêm tiền tố class
   cha `.romar-section-quality` + thẻ `img` (specificity 0,2,1) để chắc chắn
   thắng, không phụ thuộc thứ tự nạp CSS. */
.romar-section-quality img.romar-quality-badge{ width:100%; max-width:516px; }
.romar-quality-img{
  border-radius:0;
  object-fit:cover;
  aspect-ratio:320/280;
}
/* Huy hiệu chứng nhận BREEAM (node Figma 452:1304, ảnh raster IMAGE fill - không
   phải shape, giữ nguyên PNG) đè lên góc trên-trái ảnh sản phẩm 1: đo trực tiếp
   trên node 320x281 thật -> lệch trái 26.875% (86/320), lệch trên 8.897% (25/281),
   rộng 46.25% (148/320) khung ảnh. Dùng % thay vì px cố định để tự khớp theo mọi
   breakpoint vì .romar-quality-img responsive (img-fluid, không có kích thước px cứng). */
.romar-quality-imgwrap{ position:relative; }
.romar-quality-badge-breeam{
  position:absolute;
  left:26.875%;
  top:8.897%;
  width:46.25%;
  height:auto;
  pointer-events:none;
}

/* ---------- Bắt đầu hành trình ---------- */
.romar-section-cta{ padding-top:0; padding-bottom:46px; }
.romar-section-cta .btn{ margin-top:0; }

/* ---------- Footer ---------- */
.romar-footer{
  background:#0E6678;
  color:#fff;
}
.romar-footer h5, .romar-footer h6{
  color:#fff;
  font-weight:700;
  margin-bottom:1rem;
  font-size:16px;
  text-transform:uppercase;
}
/* Đường kẻ dưới heading: trắng đặc (đã xác nhận qua Figma, không phải trắng mờ),
   cách heading 8px, rộng theo đúng cột (281px cột 1-2 chữ, 205px cột "Kết nối") */
.romar-footer-heading-lg, .romar-footer-heading-sm{
  position:relative;
  padding-bottom:8px;
}
.romar-footer-heading-lg::after, .romar-footer-heading-sm::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  height:1px;
  background:#fff;
}
.romar-footer-heading-lg::after{ width:281px; }
.romar-footer-heading-sm::after{ width:205px; }
/* Logo/badge nhô cao hơn khối 3 cột heading, tràn lên gần mép trên cùng footer
   (cao hơn mép trên heading ~84px theo Figma) */
.romar-footer-badge{ max-width:150px; margin-top:-84px; }
.romar-footer-links li{ margin-bottom:0; }
.romar-footer-links a{
  color:#fff;
  font-size:16px;
  font-weight:500;
  line-height:40px;
}
.romar-footer-links a:hover{ text-decoration:underline; }
.romar-newsletter-title{
  color:#fff;
  font-size:24px;
  font-weight:600;
  line-height:27px;
}
.romar-newsletter-note{
  color:#fff;
  font-size:12px;
  font-weight:400;
  line-height:14.3px;
}
.romar-newsletter{
  position:relative;
  display:flex;
  align-items:center;
}
/* Ô email theo component Figma "nhập email" (98:1522, dùng chung desktop +
   mobile I462:1679;11:825): viên thuốc trắng cao 32px, chữ gợi ý Light 12px
   #005c6f lề trái 6.7%; nút là viên thuốc riêng (bo cả 2 đầu) rộng 21.2%, đè
   lên đuôi ô nhập, nền #72A7B0, icon dấu tích trắng. */
.romar-newsletter .form-control{
  height:32px;
  border-radius:25px;
  padding:0 calc(21.2% + 8px) 0 6.7%;
  border:none;
  font-size:12px;
  font-weight:300;
  color:#005C6F;
}
.romar-newsletter .form-control::placeholder{ color:#005C6F; opacity:1; }
.romar-newsletter-btn{
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  width:21.2%;
  border:none;
  border-radius:25px 16px 16px 0 / 25px 16px 16px 0;   /* Figma Rectangle 20: TL 25, phải bo tròn, BL vuông */
  background:#72A7B0;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background-color .15s ease;
}
.romar-newsletter-btn:hover{ background:#5f97a1; }
.romar-newsletter-btn:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.romar-newsletter-btn:disabled{ opacity:.6; cursor:wait; }
.romar-newsletter-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
/* Thông báo sau khi bấm đăng ký (assets/js/newsletter.js) */
.romar-newsletter-msg{ margin:0 0 6px; color:#fff; font-size:12px; line-height:16px; }
.romar-newsletter-msg.is-error{ color:#FFD1CB; }
.romar-social img{ width:32px; height:32px; }
.romar-footer-bottom{
  background:#004958;
  padding:16px 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.romar-footer-bottom img{ height:37px; width:auto; }
.romar-footer-bottom span{
  color:#fff;
  font-size:16px;
  font-weight:600;
}

/* ============ CAROUSEL THẬT CHO CÁC HÀNG SẢN PHẨM/DANH MỤC ============ */
.romar-needs-row{ align-items:center; }
.romar-needs-row .row{
  flex-wrap:nowrap;
  overflow-x:auto;
  scroll-behavior:smooth;
  scroll-snap-type:x proximity;
  -ms-overflow-style:none;
  scrollbar-width:none;
}
.romar-needs-row .row::-webkit-scrollbar{ display:none; }
.romar-needs-row .row > [class*="col-"]{ scroll-snap-align:start; }
.romar-arrow{
  background:#fff;
  border:1px solid #E2E8E8;
  border-radius:50%;
  width:44px;
  height:44px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  transition:opacity .2s, box-shadow .2s;
}
.romar-arrow:hover{ box-shadow:0 2px 8px rgba(0,0,0,.12); }
.romar-arrow:disabled{ opacity:.35; cursor:default; box-shadow:none; }
.romar-arrow img{ width:30px; height:30px; }

/* Destello: chỉ có 1 slide nội dung thật từ Figma, vô hiệu hoá mũi tên thay vì bịa nội dung */
.romar-arrow-poly:disabled{ opacity:.35; cursor:not-allowed; }

/* ==========================================================
   Trang "Tất cả sản phẩm" (tat-ca-san-pham.html)
   Figma node 106:2014 - dải tab thương hiệu (106:2117) + tiêu đề trang
   ========================================================== */
.romar-brandbar{
  background:var(--romar-teal-dark);
  padding:12px 0;
}
@media (min-width:1440px){
  .romar-brandbar{ padding:0; height:59px; display:flex; align-items:center; }
}
/* Đo tâm chữ 3 tab trên khung 1440px: Destello ~284px, Romar đúng giữa 720px,
   Sairo ~1156px - không dùng toạ độ tuyệt đối này trực tiếp (sẽ vỡ khi responsive)
   mà suy ra max-width container cần thiết để flex:1 chia đều 3 phần tự nhiên cho
   ra đúng các tâm này: center = 720 ± max-width/3, giải ra max-width ≈ 1308px.
   Cách này tự co giãn đúng tỉ lệ ở mọi độ rộng màn hình thay vì đông cứng theo 1
   khung 1440px cố định. */
.romar-brandbar-inner{
  max-width:1308px;
  width:100%;
  margin:0 auto;
  display:flex;
  align-items:center;
  padding:0 1rem;
}
.romar-brandbar-link{
  flex:1;
  color:#fff;
  font-weight:500;
  font-size:1.25rem;
  text-align:center;
}
@media (min-width:1440px){
  .romar-brandbar-link{ font-size:32px; }
}
.romar-brandbar-link:hover{ color:#fff; opacity:.85; }

/* SỬA (2026-09-19, rà lại đối chiếu Figma mobile, node `462:1819`) - dải tab
   thương hiệu này CHỈ có trong Figma DESKTOP của trang "Tất cả sản phẩm" -
   khung mobile (462:1819, đã kiểm cả metadata lẫn ảnh chụp) không có dải này,
   header nhảy thẳng vào tiêu đề. Chỉ ẩn RIÊNG cho trang Shop (`body.woocommerce-
   shop`, tức archive-product.php/is_shop()) - KHÔNG ẩn ở `taxonomy-
   product_brand.php` (3 trang thương hiệu vẫn cần hiện đúng dải này ở mobile,
   đã xác nhận khớp Figma riêng của 3 trang đó ở lượt đối chiếu trước) hay
   `page-my-account.php`/`page-san-pham-ua-chuong.php` (dùng cơ chế ẩn riêng
   khác, không đụng ở đây). */
@media (max-width:991.98px){
  body.woocommerce-shop .romar-brandbar{ display:none; }
}

/* Khoảng cách đo từ Figma: dải tab -> tiêu đề = 70px; tiêu đề -> dòng đếm = 32px */
/* z-index:2 bắt buộc - nếu không, dropdown/sheet lọc (position:absolute bên trong,
   z-index:20 cục bộ) bị card sản phẩm ở section liền kề bên dưới đè lên, vì
   .romar-product-imgwrap cũng position:relative nên tạo stacking context riêng
   cùng cấp body - phát hiện khi test icon lọc mobile ở romar.html, áp dụng chung
   vì lỗi tiềm ẩn như nhau ở mọi trang dùng .romar-catalog-hero. */
.romar-catalog-hero{ padding-top:32px; position:relative; z-index:2; }
@media (min-width:1440px){
  .romar-catalog-hero{ padding-top:70px; }
}
/* SỬA (2026-09-19, rà lại đối chiếu Figma - xem docs/ke-hoach-chuyen-wordpress.md
   mục "Rà lại đối chiếu Figma archive-product.php"): `.container-xl` chỉ có
   padding Bootstrap mặc định 12px, khiến toàn bộ nội dung trang (tiêu đề/filter/
   danh mục/lưới sản phẩm) chỉ cách mép 34.5px thay vì ~120px như Figma (node
   `106:2014`: tiêu đề x=119, card đầu tiên x=120) - đây là nguyên nhân chính
   khiến trang trông "lệch nhiều" khi so trực tiếp. Thêm padding riêng cho 2
   khối chứa nội dung chính của trang này (không đụng `.container-xl` gốc dùng
   chung toàn site, tránh ảnh hưởng trang khác). */
/* Lề 120px nhưng không để vùng nội dung hụt dưới 1200px (4 card 282 + 3 khe 24
   như Figma): trình duyệt có thanh cuộn chiếm chỗ (Windows, scrollbar-gutter của
   body) chỉ còn ~1425px -> lề tự thu còn ~112.5px thay vì bóp card xuống 278px.
   % padding tính theo bề rộng khối cha (section) nên màn rộng hơn vẫn là 120px. */
@media (min-width:1440px){
  .romar-catalog-hero > .container-xl,
  .romar-catalog-list > .container-xl{
    padding-left:min(120px, calc((100% - 1200px) / 2));
    padding-right:min(120px, calc((100% - 1200px) / 2));
  }
}
/* Vòng nhẫn trang trí (node 106:2228, renderBounds 86.3x112.2px, mép phải lệch
   đúng ra mép khung 1440px - #0E6678 opacity .7). File SVG export tự crop theo
   khung 128x113, canh flush right:0 vào đúng mép phải .romar-catalog-hero (đại
   diện cho mép frame Figma) thay vì tự suy đoán khoảng bù trái/phải trong ảnh. */
.romar-catalog-hero > .container-xl{ position:relative; z-index:1; }
.romar-catalog-decor-ring{
  display:none;
  position:absolute;
  pointer-events:none;
  z-index:0;
}
@media (min-width:1440px){
  .romar-catalog-decor-ring{
    display:block;
    top:44px;
    right:0;
    width:128px;
    height:113px;
  }
}
.romar-catalog-title{
  color:var(--romar-teal-dark);
  font-weight:600;
  font-size:clamp(2.2rem, 4vw, 3rem); /* mobile Figma (462:1840): 40px */
  margin-bottom:.75rem;
}
@media (min-width:1440px){
  .romar-catalog-title{ font-size:64px; line-height:72px; }
}
.romar-catalog-count{
  color:var(--romar-teal-dark);
  font-weight:400;
  font-size:1rem;
  line-height:1.2;
  margin:0;
}
@media (min-width:1440px){
  .romar-catalog-count{ font-size:24px; }
}
/* SỬA (2026-09-19, rà lại đối chiếu Figma mobile, node `462:1819`/`462:1837`/
   `462:1840`) - tiêu đề + dòng đếm sản phẩm đang canh trái, Figma mobile đo
   được CANH GIỮA thật (tiêu đề x=51/w=300 trong khung 402px, (402-300)/2=51;
   dòng đếm x=153/w=94, (402-94)/2=154 - khớp phép tính canh giữa). Cỡ chữ tiêu
   đề đo được 35.2px (do `clamp()` chạm mức sàn 2.2rem) thay vì đúng 40px ghi
   trong Figma - ép cứng 40px ở mobile thay vì để `clamp()` tự tính. Chỉ áp
   dụng <576px (đã xác nhận qua khung Figma mobile 402px) - không đụng khoảng
   tablet 576-1439px (chưa có frame Figma tablet để đối chiếu). */
@media (max-width:575.98px){
  .romar-catalog-title{ font-size:40px; text-align:center; }
  .romar-catalog-count{ text-align:center; }
}

/* Toolbar: dòng đếm sản phẩm (trái) + cụm bộ lọc (phải) - cùng hàng theo Figma (y=820) */
.romar-catalog-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-top:1.5rem;
  padding-bottom:1.5rem;
  border-bottom:1px solid rgba(14,102,120,.15);
}
@media (min-width:1440px){
  /* Figma (node 106:2019): đường kẻ dày 3px #005C6F, rộng 1040px canh giữa -
     không phải viền mảnh full-width như trước. */
  .romar-catalog-toolbar{
    margin-top:32px;
    padding-bottom:29px;
    border-bottom:none;
    position:relative;
  }
  .romar-catalog-toolbar::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    width:1040px;
    height:3px;
    background:#005C6F;
  }
}
.romar-catalog-filters{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:24px;
  position:relative;
}
@media (min-width:1440px){
  /* Figma: khoảng cách giữa 3 mục lọc không đều - 66px (Danh mục->Loại) và
     76px (Loại->Chức năng), không phải gap đồng nhất. */
  .romar-catalog-filters{ gap:0; }
  .romar-catalog-filters .romar-filter-dropdown:nth-child(2){ margin-left:50px; }
  .romar-catalog-filters .romar-sort-trigger{ margin-left:66px; }
  /* THÊM (2026-09-30, khớp Figma 106:2014 - Line 3/Line 4): 2 vạch dọc ngăn
     "Danh mục sản phẩm" | "Loại sản phẩm" | ô sắp xếp. Vị trí đo theo Figma:
     vạch 1 ở x=810 (trước "Loại" 29px), vạch 2 ở x=1038.5 (trước ô sắp xếp 38.5px). */
  .romar-mobile-filter-sheet > .romar-filter-dropdown:nth-child(2)::before,
  .romar-catalog-filters > .romar-filter-dropdown::before{
    content:"";
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:1px;
    height:46px;
    background:#005C6F;
    pointer-events:none;
  }
  .romar-mobile-filter-sheet > .romar-filter-dropdown:nth-child(2)::before{ left:-29px; }
  .romar-catalog-filters > .romar-filter-dropdown::before{ left:27px; }
}

/* ---- Nút "Bộ lọc" gộp cho mobile/tablet (component Figma 462:3168) ---- */
.romar-mobile-filter-trigger{
  display:none;
}
@media (max-width:1439.98px){
  .romar-mobile-filter-trigger{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:transparent;
    border:1px solid var(--romar-teal);
    border-radius:10px;
    color:var(--romar-teal);
    font-family:"Anuphan", sans-serif;
    font-size:12px;
    padding:10px 16px;
  }
  .romar-mobile-filter-trigger .romar-filter-chevron{ transition:transform .15s ease; }
  .romar-mobile-filter-trigger[aria-expanded="true"] .romar-filter-chevron{ transform:rotate(-135deg); }

  /* Sheet chứa cả 2 checklist (Danh mục sản phẩm + Loại sản phẩm) - node 462:3179,
     nền xanh nhạt #E7FBFF, chỉ hiện khi bấm nút "Bộ lọc". Ẩn 2 trigger con + bỏ
     position:absolute của từng panel riêng vì giờ xếp thẳng theo luồng trong sheet. */
  .romar-mobile-filter-sheet{
    display:none;
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    z-index:20;
    width:238px;
    max-width:calc(100vw - 32px);
    background:#E7FBFF;
    border-radius:5px;
    padding:16px;
    flex-direction:column;
    gap:16px;
  }
  .romar-mobile-filter-sheet.is-open{ display:flex; }
  .romar-mobile-filter-sheet .romar-filter-dropdown{ position:static; }
  .romar-mobile-filter-sheet .romar-filter-trigger{ display:none; }
  .romar-mobile-filter-sheet .romar-filter-panel{
    position:static;
    display:block;
    border:none;
    padding:0;
    min-width:0;
  }
}
@media (min-width:1440px){
  .romar-mobile-filter-sheet{ display:contents; }
}

/* Trigger button dùng chung cho 2 dropdown checkbox + ô "Chức năng" */
.romar-filter-trigger,
.romar-sort-trigger{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:none;
  border:none;
  padding:0;
  color:var(--romar-teal-dark);
  font-family:"Anuphan", sans-serif;
  font-weight:400;
  font-size:1rem;
}
@media (min-width:1440px){
  .romar-filter-trigger{ font-size:24px; }
}
.romar-sort-trigger{
  color:var(--romar-teal);
  font-size:.9rem;
  border:1px solid var(--romar-teal);
  border-radius:10px;
  padding:10px 18px;
}
@media (min-width:1440px){
  .romar-sort-trigger{ font-size:16px; width:242px; height:45px; justify-content:space-between; }
}
.romar-filter-chevron{
  width:8px;
  height:8px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);
  transition:transform .15s ease;
  flex:0 0 auto;
}
.romar-filter-dropdown.is-open .romar-filter-chevron,
.romar-sort-trigger.is-open .romar-filter-chevron{
  transform:rotate(-135deg);
}

.romar-filter-dropdown{ position:relative; }
.romar-filter-panel{
  display:none;
  position:absolute;
  top:calc(100% + 11px);
  left:0;
  z-index:20;
  min-width:235px; /* node 106:2021: khung nền panel 235x170px (border-box, đo qua Bootstrap reset) */
  background:#fff;
  border:1px solid var(--romar-teal-dark);
  border-radius:10px;
  padding:12px 16px;
}
.romar-filter-dropdown.is-open .romar-filter-panel{ display:block; }

.romar-filter-check{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--romar-teal-dark);
  font-family:"Anuphan", sans-serif;
  font-weight:400;
  font-size:16px;
  padding:6px 0;
  cursor:pointer;
  white-space:nowrap;
}
.romar-filter-check input{
  position:absolute;
  opacity:0;
  width:16px;
  height:16px;
  margin:0;
  cursor:pointer;
}
.romar-filter-box{
  width:16px;
  height:16px;
  flex:0 0 auto;
  border:1px solid var(--romar-teal-dark);
  border-radius:5px;
  background:#fff;
  position:relative;
}
.romar-filter-check input:checked + .romar-filter-box::after{
  content:"";
  position:absolute;
  left:4px;
  top:1px;
  width:5px;
  height:9px;
  border-right:2px solid var(--romar-teal-dark);
  border-bottom:2px solid var(--romar-teal-dark);
  transform:rotate(45deg);
}
/* Ô "Chức năng" dùng radio (chỉ chọn 1 kiểu sắp xếp) thay vì checkbox - tròn thay vì vuông */
.romar-filter-box--radio{ border-radius:50%; }
.romar-filter-check input:checked + .romar-filter-box--radio::after{
  left:3px; top:3px; width:8px; height:8px;
  border:none;
  border-radius:50%;
  background:var(--romar-teal-dark);
  transform:none;
}
.romar-sort-panel{ min-width:200px; }
.romar-sort-trigger .romar-filter-chevron{ margin-left:auto; }

.romar-catalog-empty{
  color:var(--romar-teal-dark);
  font-size:1.1rem;
  padding:40px 0;
}

/* ==========================================================
   Trang "Tất cả sản phẩm" - lưới sản phẩm theo danh mục
   Figma node 106:2014, khối mẫu "Combo chăm sóc vải" (106:2198 trở đi)
   ========================================================== */
.romar-catalog-list{ padding-bottom:40px; }

.romar-catalog-category{ padding-top:32px; position:relative; }
/* Hình tròn trang trí hổ phách (node 106:2233, #EBAC01) - chỉ ở khối "Combo vệ sinh
   nhà cửa", lệch ra ngoài mép trái ~119px (chỉ lộ phần bên phải), nằm phía sau nội
   dung, không chặn tương tác/không đẩy layout. Base (mobile): ẩn hẳn vì không có
   đủ khoảng trắng bên trái để hình "ló ra" mà không đè lên nội dung. */
.romar-catalog-decor-ellipse{
  display:none;
  position:absolute;
  pointer-events:none;
  z-index:0;
}
@media (min-width:1440px){
  .romar-catalog-decor-ellipse{
    display:block;
    top:16px;
    left:-119px;
    width:218px;
    height:218px;
    border-radius:50%;
    background:#EBAC01;
  }
}
.romar-catalog-category-head,
.romar-product-grid,
.romar-catalog-seemore-wrap{
  position:relative;
  z-index:1;
}
/* Figma: "Xem thêm" KHÔNG nằm cạnh tiêu đề danh mục - nó canh giữa BÊN DƯỚI lưới
   sản phẩm, ngay trước đường kẻ chia (node 106:2436, y=1504, giữa cards và divider). */
/* Badge "FREE SHIPPING" cạnh tiêu đề mỗi danh mục - node vd 106:3008 (raster image
   fill, tên layer "Screenshot..." nhưng nội dung thật là logo free shipping, đã
   export/verify trực tiếp qua Figma image API trước khi dùng). Khoảng cách tiêu đề
   -> badge lệch nhẹ 0-31px tuỳ khối trong Figma, không cần khớp tuyệt đối từng khối. */
.romar-catalog-category-head{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:24px;
}
@media (min-width:1440px){
  .romar-catalog-category-head{ margin-bottom:40px; }
}
/* SỬA (2026-09-19, rà lại đối chiếu Figma) - BUG CSS SPECIFICITY THẬT: rule gốc
   `.romar-catalog-badge-freeship{height:35px}` (1 class, specificity 0,1,0) bị
   rule WooCommerce core `.woocommerce img, .woocommerce-page img{height:auto}`
   (1 class + 1 thẻ, specificity 0,1,1 - CAO HƠN) đè mất, khiến ảnh render theo
   kích thước gốc file PNG thật (273x105px) thay vì 35px cao như Figma - to gấp
   đúng 3 lần. Đã verify qua `naturalWidth`/`naturalHeight`. Thêm tiền tố class
   cha `.romar-catalog-category-head` + thẻ `img` (specificity 0,2,1) để CHẮC
   CHẮN thắng độ đặc hiệu rule WooCommerce (0,1,1), không phụ thuộc thứ tự nạp
   CSS - cùng loại bug đã gặp ở checkout mobile, xem docs/ke-hoach-chuyen-wordpress.md. */
.romar-catalog-category-head img.romar-catalog-badge-freeship{
  /* Figma mobile (462:1839, 462:1885...) dùng cùng kích thước tuyệt đối 91x35px
     như desktop, không scale nhỏ theo khung mobile - giữ nguyên 35px mọi breakpoint. */
  height:35px;
  width:auto;
  flex:0 0 auto;
}
.romar-catalog-category-title{
  color:var(--romar-teal-dark);
  font-weight:600;
  font-size:16px; /* mobile Figma (462:1838) */
  line-height:1.2;
  margin:0;
}
@media (min-width:1440px){
  .romar-catalog-category-title{ font-size:24px; }
}
.romar-catalog-seemore-wrap{
  display:flex;
  justify-content:center;
  margin-top:16px;
}
@media (min-width:1440px){
  .romar-catalog-seemore-wrap{ margin-top:26px; }
}
/* Mobile (462:1870): pill nhỏ hơn hẳn bản desktop - 315x32px, font ~15px */
.romar-seemore{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:transparent;
  border:1px solid var(--romar-teal);
  border-radius:25px;
  color:var(--romar-teal);
  font-weight:500;
  font-size:14px;
  padding:6px 20px;
}
@media (min-width:1440px){
  .romar-seemore{ font-size:24px; min-width:166px; height:50px; padding:10px 24px; justify-content:center; white-space:nowrap; }
}
/* Component "Xem thêm" luôn hiện diện trong Figma (mỗi danh mục đều có), nhưng khi
   danh mục chỉ có đúng 4 sản phẩm (chưa có dữ liệu cho sp thứ 5+) thì không có gì
   để xổ ra - hiển thị bất hoạt thay vì ẩn hẳn hoặc giả vờ hoạt động được. */
.romar-seemore.is-disabled{
  opacity:.4;
  cursor:not-allowed;
  pointer-events:none;
}

/* Card sản phẩm thứ 5+ (đúng theo Figma node 106:2403, variant "xổ ra" của mỗi
   danh mục) - ẩn mặc định, chỉ hiện khi bấm "Xem thêm" (.is-expanded). */
.romar-catalog-card--extra{ display:none; }
.romar-catalog-category.is-expanded .romar-catalog-card--extra{ display:block; }

/* Figma mobile (node 462:1819): lưới sản phẩm xếp 1 cột, mỗi card gần full-width
   (355/402px khung), không phải 2 cột như trước - xác nhận qua Group 42-45. */
.romar-product-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:57px; /* Figma mobile 462:1819: khoảng cách dọc giữa 2 card = 57px */
}
@media (min-width:576px){
  .romar-product-grid{ grid-template-columns:repeat(2, 1fr); gap:16px; }
}
/* SỬA (2026-09-18, Phase 8 đối chiếu tablet): mốc cũ `min-width:768px` nhảy
   thẳng lên 4 cột NGAY TẠI 768px - không đủ chỗ (mỗi card cần ~180px + gap),
   khiến card thứ 4 mỗi hàng tràn/bị cắt ở đúng viewport tablet 768px (không có
   thiết kế Figma tablet nào để đối chiếu, xem docs/ke-hoach-chuyen-wordpress.md
   Phase 8 - tự chọn mốc an toàn hơn). Đẩy mốc 4 cột lên 992px (khớp mốc
   `min-width:992px` header đã dùng sẵn trong file này), giữ 2 cột suốt tablet. */
@media (min-width:992px){
  .romar-product-grid{ grid-template-columns:repeat(4, 1fr); }
}
@media (min-width:1440px){
  .romar-product-grid{ gap:22px; }
}

.romar-catalog-divider{
  height:1px;
  background:var(--romar-teal);
  margin-top:32px;
}
@media (min-width:1440px){
  /* Figma: đường kẻ rộng cố định 1040px, thu hẹp vào trong so với mép card/tiêu đề
     (~80px mỗi bên) - không full-bleed theo .container-xl. */
  .romar-catalog-divider{ margin-top:57px; max-width:1040px; margin-left:auto; margin-right:auto; }
}

/* ---- Thẻ sản phẩm ---- */
.romar-catalog-card{ display:block; }
.romar-product-imgwrap{
  position:relative;
  aspect-ratio:1/1;
  border-radius:5px;
  background:#E8E8E8;
  overflow:hidden;
  margin-bottom:12px;
  transition:box-shadow .2s ease;
}
/* Tỉ lệ đo trực tiếp từ node 106:2198 (khung 282x282, ảnh mẫu Figma 238x279 tại
   offset 27,23): rộng 84.4%, cao 98.9% - ảnh mẫu còn tràn quá đáy khung ~7.1%, bị
   .romar-product-imgwrap (overflow:hidden) cắt mất phần dư. Đệm trái 9.6% / phải
   6.0% (không đối xứng).
   Dùng height:98.9% (không phải auto) + object-fit:contain: vì 20 ảnh thật của
   từng sản phẩm có tỉ lệ khung hình khác nhau (khác hẳn ảnh mẫu Figma dùng chung
   cho mọi card trong mockup) - height:auto từng làm ảnh bị cắt cụt/tràn khác nhau
   tuỳ ảnh, object-fit:contain đảm bảo ảnh luôn vừa khít trong khung 84.4%x98.9%
   dù tỉ lệ gốc là gì. */
.romar-product-img{
  display:block;
  width:84.4%;
  height:98.9%;
  object-fit:contain;
  object-position:center top;
  margin:8.2% 6% 0 9.6%;
  transition:transform .25s ease;
}

/* ---- Animation thẻ sản phẩm (đã chốt với Chị Thảo, phương án "kết hợp cả 2",
   2026-09-27): fade-in + dịch nhẹ khi cuộn tới (JS gắn class `romar-anim-armed`
   qua IntersectionObserver, xem assets/js/card-animate.js) + hover phóng nhẹ
   ảnh sản phẩm (CSS thuần, không cần JS). Áp dụng chung cho cả 4 nơi dùng
   `.romar-catalog-card` (trang chủ "Sản phẩm nổi bật", "Tất cả sản phẩm", "Sản
   phẩm ưa chuộng", 3 trang thương hiệu) vì đều dùng chung class này.

   Trạng thái ẩn (opacity/translateY) CHỈ áp dụng khi JS đã gắn được class
   `romar-anim-armed` - nếu JS lỗi/chưa chạy kịp, card mặc định hiển thị bình
   thường (không bao giờ bị kẹt ẩn vĩnh viễn do phụ thuộc JS). */
.romar-catalog-card.romar-anim-armed{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .5s ease, transform .5s ease;
}
.romar-catalog-card.romar-anim-armed.romar-anim-visible{
  opacity:1;
  transform:translateY(0);
}
.romar-catalog-card:hover .romar-product-img{ transform:scale(1.045); }
/* Link ảnh/tên sản phẩm (bật ở section "Sản phẩm được ưa chuộng" + trang danh
   sách Sản phẩm - xem romar_product_card_html( $product, true )): ảnh dùng lớp phủ trong suốt phủ
   kín khung ảnh, tên giữ nguyên màu/font của .romar-product-name. */
.romar-product-imglink{
  position:absolute;
  inset:0;
  z-index:3;
}
.romar-product-name a{
  color:inherit;
  text-decoration:none;
}
.romar-product-name a:hover{ text-decoration:underline; text-underline-offset:3px; }
.romar-catalog-card:hover .romar-product-imgwrap{ box-shadow:0 6px 18px rgba(0,0,0,.14); }
/* Lớp phủ link cả card (.romar-card-link, cuối mỗi card): bấm bất kỳ đâu trên
   card -> trang chi tiết. Tên sản phẩm + "Chi tiết" là link thật nằm TRÊN lớp phủ. */
.romar-catalog-card, .pdp-fbt-item{ position:relative; }
.romar-card-link{ position:absolute; inset:0; z-index:2; }
.romar-product-name a, .romar-product-detail, .pdp-fbt-link{ position:relative; z-index:4; }

@media (prefers-reduced-motion: reduce){
  .romar-catalog-card.romar-anim-armed{ opacity:1; transform:none; transition:none; }
  .romar-product-img{ transition:none; }
  .romar-catalog-card:hover .romar-product-img{ transform:none; }
}

/* ---- Animation icon trang trí (đã chốt với Chị Thảo, phương án "fade + scale
   khi vào viewport", 2026-09-27, demo https://claude.ai/artifact/9sshr5yK8fwL8eZXcgDLAk):
   dùng chung `.romar-decor-shape` cho cả 7 vị trí đang dùng icon dạng "accent
   shape" - `.romar-needs-accent` (Chọn theo nhu cầu), `.romar-products-accent`
   (Sản phẩm được ưa chuộng), `.romar-quality-decor` (Chất lượng là trên hết),
   `.romar-catalog-decor-ring` (toolbar Tất cả sản phẩm), `.romar-brand-decor`/
   `.destello-decor`/`.sairo-decor` (3 trang thương hiệu). JS gắn class
   `romar-anim-armed` qua CÙNG IntersectionObserver đã dùng cho thẻ sản phẩm
   (xem assets/js/card-animate.js, không tạo file JS riêng).

   Chỉ animate opacity/transform (scale) - KHÔNG đụng màu/fill-opacity gốc của
   từng SVG (mỗi vị trí 1 màu riêng, một số đã có fill-opacity .7 ngay trong
   file SVG - animate opacity ngoài không nhân đè, chỉ ẩn/hiện toàn bộ hình).
   Cùng lý do "không bao giờ kẹt ẩn vĩnh viễn nếu JS lỗi" như thẻ sản phẩm ở
   trên - trạng thái ẩn chỉ áp dụng khi có class `romar-anim-armed`. */
.romar-decor-shape.romar-anim-armed{
  opacity:0;
  transform:scale(.6);
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.romar-decor-shape.romar-anim-armed.romar-anim-visible{
  opacity:1;
  transform:scale(1);
}
@media (prefers-reduced-motion: reduce){
  .romar-decor-shape.romar-anim-armed{ opacity:1; transform:none; transition:none; }
}

.romar-product-badges{
  position:absolute;
  top:9px;
  left:8px;
  right:14px; /* SỬA (2026-09-30, khớp Figma): "Save x%" căn phải góc trên ảnh */
  justify-content:space-between;
  display:flex;
  align-items:center;
  gap:12px;
  z-index:2;
}
.romar-badge-pill{
  background:var(--romar-teal-dark);
  color:#fff;
  font-weight:600;
  font-size:13px;
  line-height:1;
  padding:8px 10px;
  border-radius:5px;
  white-space:nowrap;
}
@media (min-width:1440px){
  /* Figma (Rectangle 36): pill 88x29px */
  .romar-badge-pill{ font-size:16px; padding:7px 5px; }
}
.romar-badge-pill--right{
  position:absolute;
  top:9px;
  right:9px;
  z-index:2;
}
.romar-badge-save{
  margin-left:auto;             /* Figma: "Save x%" luôn ở góc phải, kể cả khi không có "Best seller" */
  color:var(--romar-teal-dark);
  font-weight:600;
  font-size:13px;
  white-space:nowrap;
}
@media (min-width:1440px){
  .romar-badge-save{ font-size:16px; }
}

.romar-product-name{
  color:var(--romar-teal-dark);
  font-weight:600;
  font-size:18px;
  line-height:1.3;
  margin:0 0 4px;
}
@media (min-width:1440px){
  .romar-product-name{ font-size:24px; line-height:31px; }
}
.romar-product-variant{
  color:var(--romar-teal-dark);
  font-weight:400;
  font-size:14px;
  line-height:1.5;
  margin:0 0 8px;
}
@media (min-width:1440px){
  .romar-product-variant{ font-size:16px; line-height:24px; }
}
.romar-product-price{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:0 0 12px;
}
.romar-product-price-line{
  display:inline-flex;
  align-items:baseline;
  gap:4px;
  color:var(--romar-teal-dark);
  font-weight:400;
  font-size:14px;
}
@media (min-width:1440px){
  .romar-product-price-line{ font-size:16px; }
}
.romar-product-price-group{
  display:flex;
  align-items:baseline;
  gap:8px;
}
@media (min-width:1440px){
  .romar-product-price{ margin-bottom:21px; }
}
/* Giá gốc (bị gạch) - style đúng theo Figma character override 39 của node 106:2260:
   16px Regular, màu #72A7B0 (teal nhạt, KHÔNG phải xám #999 đoán chung chung).
   Gạch ngang (text-decoration) là bổ sung chủ động ngoài Figma cho chuẩn UX phân
   biệt giá cũ/mới - Figma không có thuộc tính gạch ngang, chỉ phân biệt bằng màu+độ đậm.
   Xem ghi chú docs/design-rules.md. */
.romar-product-price-old{
  color:#72A7B0;
  font-weight:400;
  font-size:14px;
  text-decoration:line-through;
}
@media (min-width:1440px){
  .romar-product-price-old{ font-size:16px; line-height:21px; }
}
.romar-product-price-value{
  color:var(--romar-teal-dark);
  font-weight:600;
  font-size:14px;
}
@media (min-width:1440px){
  .romar-product-price-value{ font-size:16px; line-height:21px; }
}
.romar-product-volume{
  color:var(--romar-teal-dark);
  font-weight:700;
  font-size:14px;
  white-space:nowrap;
}
@media (min-width:1440px){
  .romar-product-volume{ font-size:16px; }
}
.romar-product-detail{
  display:inline-block;
  color:#FE8170;
  font-weight:600;
  font-size:18px;
  border-bottom:2px solid #FE8170;
  padding-bottom:2px;
}
@media (min-width:1440px){
  .romar-product-detail{ font-size:24px; }
}

/* ==========================================================
   Giới thiệu thương hiệu Romar (cuối trang "Tất cả sản phẩm")
   Figma node 119:3134 - ảnh nền 1440x702, panel phủ màu tím
   rgba(172,114,180,.44) kích thước 384x288, neo lệch phải/dưới
   ========================================================== */
.romar-brandshowcase{
  position:relative;
  background-size:cover;
  background-position:center;
  aspect-ratio:402/407; /* Figma mobile 462:1872 - gần vuông, khác hẳn tỉ lệ desktop */
}
@media (min-width:1440px){
  .romar-brandshowcase{ aspect-ratio:1440/702; }
}
/* Vị trí mobile lấy từ Figma node 462:1877 (panel 169x138 trong khung 402x407,
   left:52%/top:50.4%) - không dùng lại tỉ lệ desktop vì layout mobile neo khác
   hẳn (giữa-dưới thay vì sát góc phải).
   SỬA (2026-09-19, theo yêu cầu Chị Thảo xem trực tiếp thấy khung đè lên mặt/
   tóc mẫu ảnh ở mobile/tablet): toạ độ 52%/50.4% lấy đúng từ Figma nhưng khi
   áp vào ẢNH NỀN THẬT (`romar-brand-banner-bg.png`, 1440x702, cover-crop theo
   khung gần vuông 402:407) lại đè lên đúng vùng tóc xoăn - đã xác minh bằng
   cách lấy mẫu pixel thật (Python/PIL, không đoán bằng mắt): vùng 52%-94%/
   50.4%-98.9% có 3.93% pixel tối (tóc), trong khi vùng 58%-98%/50.4%-98.9% đo
   được ĐÚNG 0% pixel tối (hoàn toàn sạch). Chọn 60%/38% (thay vì sát mốc an
   toàn 58%) để có thêm biên độ dự phòng, tránh viền khung nằm sát mép tóc gây
   cảm giác "gần chạm" khi nhìn trực tiếp dù không thật sự đè lên pixel tóc nào.
   Dịch phải 52%→60% + xuống dưới 50.4%→52% + thu hẹp 42%→38% (vẫn đủ chỗ chữ,
   60+38=98% không tràn mép phải). Layout desktop (>=1440px) giữ nguyên - đã
   verify riêng vùng đó vốn đã 0% pixel tối, không đè lên mặt/tóc, không cần sửa. */
.romar-brandshowcase-panel{
  position:absolute;
  left:60%;
  top:52%;
  width:38%;
  height:auto;
  bottom:8px;
  background:rgba(172,114,180,.44);
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  overflow:hidden;
}
@media (min-width:1440px){
  .romar-brandshowcase-panel{
    left:936px;
    top:374px;
    width:384px;
    height:288px;
    bottom:auto;
    padding:24px 40px 24px 59px;
  }
}
.romar-brandshowcase-title{
  color:#fff;
  font-weight:700;
  font-size:1rem;
  margin:0;
}
@media (min-width:1440px){
  .romar-brandshowcase-title{ font-size:40px; line-height:1.2; }
}
.romar-brandshowcase-text{
  color:#fff;
  font-weight:400;
  font-size:.68rem;
  line-height:1.3;
  margin:0;
}
@media (min-width:1440px){
  .romar-brandshowcase-text{ font-size:16px; line-height:26px; }
}

/* ==========================================================
   Trang "Sản phẩm ưa chuộng" (san-pham-ua-chuong.html)
   Figma node 105:1759 - frame riêng: header + brandbar + hero ảnh nền +
   lưới 10 sản phẩm featured + footer (KHÔNG có banner Romar / Chất lượng
   là trên hết, khác trang "Tất cả sản phẩm"). Thẻ sản phẩm dùng lại nguyên
   .romar-catalog-card/.romar-product-* vì đã khớp đúng spec 105:1759
   (khung 282x282 #E8E8E8 bo 5px, badge, tên/mô tả/giá/Chi tiết).
   ========================================================== */
/* Khoảng cách lưới -> footer riêng của trang này (54px, đo node 196:2228 -> 106:2654)
   - KHÔNG sửa .romar-catalog-list{padding-bottom} gốc vì class đó dùng chung với
   tat-ca-san-pham.html (ở đó grid nối tiếp banner Romar, không phải footer, khoảng
   cách khác hẳn, không có căn cứ để gộp chung 1 giá trị). */
.romar-catalog-list--featured{ padding-bottom:54px; }
/* Khung ảnh card đúng Figma: desktop 105:1759 card cách nhau 306px (khung 282 +
   khe 24), mobile 462:1686 khung 352px - lề 24px như trang Tất cả sản phẩm (lề
   Bootstrap 12px làm khung phình lên 378px). */
@media (min-width:1440px){
  .romar-catalog-list--featured .romar-product-grid{ gap:24px; }
}
@media (max-width:575.98px){
  .romar-catalog-list--featured > .container-xl{ padding-left:24px; padding-right:24px; }
}

/* node 105:1759 (desktop LẪN mobile 462:1686) KHÔNG có dải subbar "Combo chăm sóc
   vải/..." ở BẤT KỲ breakpoint nào - trước đó chỉ ẩn ở mobile, sót phần desktop.
   Ẩn hẳn không cần media query, scoped riêng trang này. */
.romar-page-featured .romar-subbar{
  display:none;
}

/* Mobile (node 462:1686, xác nhận qua ảnh export - KHÔNG suy theo toạ độ thô):
   header mobile chỉ có 1 thanh trắng (hamburger+logo+icon), KHÔNG có brandbar
   "Destello/Romar/Sairo" như bản desktop (brandbar VẪN hiện đúng ở desktop, node
   106:2157 có thật) - ẩn scoped riêng trang này bằng .romar-page-featured, không
   đụng index.html/tat-ca-san-pham.html (2 trang đó vẫn hiện đúng theo thiết kế của
   chúng). Card mobile cũng KHÔNG có text "Chi tiết" (grep 0 kết quả) - cả card
   giờ là 1 thẻ <a> (xem featured-render.js), ẩn nốt span "Chi tiết" hiển thị. */
@media (max-width:1439.98px){
  .romar-page-featured .romar-brandbar{
    display:none;
  }
  .romar-page-featured .romar-product-detail{
    display:none;
  }
}

.romar-featured-hero{
  position:relative;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  padding:56px 0;
  text-align:center;
}
@media (min-width:1440px){
  /* Figma: ảnh nền 1440x443, tiêu đề+mô tả canh giữa theo chiều dọc trong khung */
  .romar-featured-hero{
    height:443px;
    display:flex;
    align-items:center;
    padding:0;
  }
}
/* Lớp phủ tối (node 190:2181 "Rectangle 58"): #181818 opacity 70%, phủ toàn bộ
   vùng ảnh hero để chữ trắng đủ tương phản trên nền ảnh sáng. */
.romar-featured-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(24,24,24,.7);
  z-index:0;
}
.romar-featured-hero > .container-xl{
  position:relative;
  z-index:1;
}
.romar-featured-title{
  color:#fff;
  font-weight:600;
  font-size:clamp(1.8rem, 4vw, 3rem);
  margin:0 0 16px;
}
@media (min-width:1440px){
  /* Anuphan 600/64px - node 105:1760, dòng tiêu đề (style gốc, không phải override).
     line-height 45px TUYỆT ĐỐI (không theo %/font-size) - Figma dùng chung 1 giá trị
     lineHeightPx=45 cho cả dòng 64px này lẫn dòng mô tả 32px bên dưới. */
  .romar-featured-title{ font-size:64px; line-height:45px; }
}
.romar-featured-desc{
  color:#fff;
  font-weight:500;
  max-width:760px;
  margin:0 auto;
}
@media (min-width:1440px){
  /* Anuphan 500/32px - node 105:1760, override ký tự 42 (dòng mô tả). line-height
     45px tuyệt đối - cùng giá trị lineHeightPx với tiêu đề 64px phía trên. */
  .romar-featured-desc{ font-size:32px; line-height:45px; }
}

/* ==========================================================================
   Popup tìm kiếm sản phẩm full trang (2026-09-29) - mở khi bấm icon Tìm kiếm
   header (`.romar-search-trigger`, xem header.php). KHÔNG có thiết kế Figma
   riêng cho popup này - Figma MCP mất kết nối nhiều lần lúc làm (đã thử lại
   nhiều lượt, xem lịch sử trao đổi) - tự dựng bằng token màu/font/bo góc đã
   chuẩn hoá toàn site (--romar-teal-dark/--romar-teal/--romar-bg-soft, font
   Anuphan), CẦN đối chiếu lại khi Figma MCP kết nối được, giống cách đã ghi
   chú ở popup mini-cart/sidebar mobile trước đó.
   ========================================================================== */
.romar-search-overlay{
  position:fixed;
  inset:0;
  z-index:1070;   /* cao hơn sidebar mobile (1050) + mini-cart (1050) - tìm kiếm phải nổi trên cùng */
  background:#fff;
  overflow-y:auto;
}
.romar-search-overlay[hidden]{ display:none; }
.romar-search-overlay-inner{
  max-width:720px;
  margin:0 auto;
  padding:80px 24px 64px;
}
@media (max-width:575.98px){
  .romar-search-overlay-inner{ padding:72px 16px 48px; }
}
.romar-search-close{
  position:fixed;
  top:20px;
  right:20px;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  border-radius:50%;
  background:var(--romar-bg-soft);
  color:var(--romar-teal-dark);
  font-size:26px;
  line-height:1;
  z-index:1;
}
.romar-search-close:hover{ background:var(--romar-teal-dark); color:#fff; }
body.admin-bar .romar-search-close{ top:52px; }
@media (max-width:782px){
  body.admin-bar .romar-search-close{ top:66px; }
}
.romar-search-form{
  display:flex;
  align-items:center;
  gap:12px;
  position:relative;
  border:2px solid var(--romar-teal-dark);
  border-radius:32px;
  padding:8px 8px 8px 24px;
}
.romar-search-form-icon{ flex:0 0 auto; color:var(--romar-teal-dark); }
.romar-search-input{
  flex:1 1 auto;
  min-width:0;
  border:none;
  outline:none;
  background:transparent;
  font-family:'Anuphan', sans-serif;
  font-size:18px;
  color:#1a1a1a;
}
.romar-search-input::placeholder{ color:#8a938f; }
.romar-search-submit{
  flex:0 0 auto;
  height:44px;
  padding:0 24px;
  border:none;
  border-radius:22px;
  background:var(--romar-teal-dark);
  color:#fff;
  font-family:'Anuphan', sans-serif;
  font-weight:600;
  font-size:15px;
  cursor:pointer;
}
.romar-search-submit:hover{ background:var(--romar-teal); }
@media (max-width:575.98px){
  .romar-search-submit{ padding:0 16px; font-size:13px; }
}
.romar-search-results{
  margin-top:40px;
}
.romar-search-empty{
  margin:40px 0 0;
  text-align:center;
  color:#5b645d;
  font-size:15px;
}

/* ==========================================================================
   TRANG CHỦ MOBILE (<768px) - đối chiếu Figma node 462:1596 (khung 402px)
   (2026-09-29). Số đo lấy từ JSON Figma REST API; toạ độ Figma trừ 70px
   thanh trạng thái điện thoại ở đầu khung. Lề ngang chung 24px (x=24..378).
   Chỉ gắn vào class của header/footer/các khối page-builder trang chủ -
   không đổi .container-xl toàn cục để không ảnh hưởng các trang khác.
   ========================================================================== */

/* Nền tảng dùng mọi kích thước: <br> chỉ xuống dòng ở mobile, khối giá gọn của
   card chỉ hiện ở mobile, nút accordion footer trông như tiêu đề tĩnh ở desktop. */
.romar-br-mobile{ display:none; }
.romar-product-compact{ display:none; }
.romar-footer-toggle{
  all:unset;
  display:inline;
}
/* 2 class - thắng `[type=button]:not(:disabled){cursor:pointer}` của Bootstrap */
.romar-footer .romar-footer-toggle{ cursor:default; }

@media (max-width:767.98px){
  .romar-br-mobile{ display:inline; }

  .romar-header .container-xl,
  .romar-hero .container-xl,
  .romar-section-needs .container-xl,
  .romar-section-products .container-xl,
  .romar-section-about .container-xl,
  .romar-section-brands .container-xl,
  .romar-section-quality .container-xl,
  .romar-section-cta .container-xl,
  .romar-footer .container-xl{ padding-left:24px; padding-right:24px; }

  .romar-heading{ font-size:40px; line-height:44px; }

  /* ---- Header: cao 71px, hamburger 28 trái - logo 98x48 giữa - tìm kiếm/giỏ 28 phải ---- */
  .romar-navbar{ padding:0; min-height:71px; }
  .romar-navbar-inner{ min-height:71px; }
  .navbar-toggler{ border:0; padding:0; box-shadow:none !important; }
  .navbar-toggler-icon{
    width:28px;
    height:28px;
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath stroke='%23005c6f' stroke-linecap='round' stroke-width='2' d='M5 7h14M5 12h14M5 17h14'/%3e%3c/svg%3e");
  }
  .romar-logo-mobile{ margin:0; padding:0; }
  .romar-logo-mobile img{ height:48px; border-radius:0; }
  .romar-icons-mobile{ gap:20px; }
  .romar-icons-mobile img{ width:28px; height:28px; }

  /* ---- Hero (462:1597-1605): cao 313, ảnh neo phải, phủ #042b33 51% ---- */
  .romar-hero{
    min-height:313px;
    align-items:flex-start;
    background-size:auto 100%;
    background-position:right center;
  }
  .romar-hero-overlay{ background:rgba(4, 43, 51, .51); }
  .romar-hero .row > [class*="col-"]{ width:100%; }
  .romar-hero-content{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    padding-top:63px;
    padding-bottom:16px;
  }
  .romar-hero-content h1{
    grid-column:1 / -1;
    font-size:40px;
    line-height:40px;
    margin:0 0 17px 7px;
  }
  .romar-hero-content p{
    grid-column:1 / -1;
    max-width:250px;
    font-size:16px;
    line-height:21px;
    margin:0 0 0 8px;
  }
  .romar-hero-badges{
    grid-column:1;
    grid-row:3;
    margin:0 0 0 -11px;
    gap:0;
    flex-wrap:nowrap;
    align-items:center;
  }
  .romar-hero-badges img{ height:auto; }
  .romar-hero-badges img:first-child{ width:104px; }
  .romar-hero-badges img:nth-child(2){ width:70px; }
  .romar-hero-content .btn{
    grid-column:2;
    grid-row:3;
    background:var(--romar-teal);
    color:#fff;
    border-radius:10px;
    padding:0 6px;
    width:92px;
    height:31px;
    line-height:31px;
    font-size:16px;
    font-weight:500;
  }
  .romar-hero-content .btn:hover{ background:var(--romar-teal-dark); color:#fff; filter:none; }

  /* ---- Carousel 1 thẻ/lần (Chọn theo nhu cầu, Sản phẩm được ưa chuộng):
     Figma mobile KHÔNG có mũi tên - vuốt ngang, bắt dính từng thẻ. ---- */
  .romar-section-needs .romar-arrow,
  .romar-section-products .romar-arrow{ display:none; }
  .romar-section-needs .romar-needs-row,
  .romar-section-products .romar-needs-row{ gap:0; }
  .romar-section-needs .romar-needs-row .row,
  .romar-section-products .romar-needs-row .row{
    scroll-snap-type:x mandatory;
    --bs-gutter-x:0 !important;
    margin:0;
  }
  .romar-section-needs .romar-needs-row .row > [class*="col-"],
  .romar-section-products .romar-needs-row .row > [class*="col-"]{
    flex:0 0 100%;
    width:100%;
    scroll-snap-align:center;
  }

  /* ---- Chọn theo nhu cầu (462:1606-1616) ---- */
  .romar-section-needs{ padding-top:93px; padding-bottom:61px; position:relative; }
  .romar-needs-accent{
    display:block;
    top:-81px;
    left:24px;
    width:91px;
    height:auto;
  }
  .romar-section-needs .romar-heading{ font-size:40px; line-height:48px; }
  .romar-section-needs .romar-subheading{
    max-width:307px;
    font-size:12px;
    line-height:18px;
    margin:13px auto 3px;
  }
  .romar-need-card-imgwrap{ height:245px; margin-bottom:0; align-items:flex-start; }
  .romar-need-card img{ border-radius:0; max-width:228px; max-height:284px; width:auto; height:284px; }
  .romar-need-card h3{ position:relative; font-size:20px; line-height:26px; margin:0; }
  .romar-need-card p{ font-size:12px; line-height:18px; max-width:260px; margin:0 auto; }
  .romar-needs-combo{ margin-top:32px; }
  .romar-btn-combo{ max-width:263px; height:36px; font-size:16px; padding:0 12px; }
  /* Chấm tròn vàng 81px (462:1615) nằm DƯỚI banner kế tiếp - chỉ lộ nửa trên */
  .romar-section-needs::after{
    content:"";
    position:absolute;
    right:19px;
    bottom:-48px;
    width:81px;
    height:81px;
    border-radius:50%;
    background:#EBAC01;
    z-index:0;
  }

  /* ---- Banner "Trắng bừng trong nắng" (462:1622): cao 142, 2 đường kẻ
     354x2 THUÔN 2 đầu (462:1625/1626) - cùng hình với bản desktop 840x5 (đầu
     thuôn đều 5% chiều dài) nên dùng lại assets/images/banner-line.svg, kéo
     giãn về 354x2. Tâm đường kẻ nằm đúng mép trên/dưới banner như Figma. ---- */
  .romar-banner{ min-height:142px; z-index:1; }
  .romar-banner::before,
  .romar-banner::after{
    content:"";
    position:absolute;
    left:24px;
    right:24px;
    height:2px;
    background:url("../images/banner-line.svg") center / 100% 100% no-repeat;
  }
  .romar-banner::before{ top:-1px; }
  .romar-banner::after{ bottom:-1px; }
  .romar-banner .container-xl{ padding-left:24px; padding-right:24px; }
  .romar-banner-content{ text-align:left; margin:0; }
  .romar-banner-content h2{ font-size:14px; line-height:20px; margin:0; }

  /* ---- Sản phẩm được ưa chuộng (462:1627-1646) ---- */
  .romar-section-products{ padding-top:73px; padding-bottom:46px; }
  /* Vòng tròn xanh lá 103px (lỗ 63px, 462:1617) - SVG desktop là hình khác, dựng
     lại bằng CSS; banner phía trên (z-index:1) che nửa trên đúng như Figma. */
  .romar-products-accent{ display:none; }
  .romar-section-products .container-xl::before{
    content:"";
    position:absolute;
    left:11px;
    top:-129px;
    width:103px;
    height:103px;
    border-radius:50%;
    border:20px solid rgba(159, 197, 123, .7);
  }
  .romar-section-products .romar-heading{ line-height:43px; margin-bottom:4px; }
  .romar-section-products .romar-subheading{ font-size:12px; line-height:18px; margin-bottom:34px; }
  .romar-catalog-card--compact{ max-width:199px; margin:0 auto; text-align:center; }
  .romar-catalog-card--compact .romar-product-imgwrap{ margin-bottom:6px; border-radius:0; }
  .romar-catalog-card--compact .romar-product-badges,
  .romar-catalog-card--compact .romar-badge-pill--right,
  .romar-catalog-card--compact .romar-product-price,
  .romar-catalog-card--compact .romar-product-detail{ display:none; }
  .romar-catalog-card--compact .romar-product-name,
  .romar-catalog-card--compact .romar-product-variant{
    font-size:12px;
    line-height:14px;
    font-weight:600;
    color:var(--romar-teal-dark);
    margin:0;
  }
  .romar-catalog-card--compact .romar-product-compact{ display:block; }
  .romar-product-rating{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:3px;
    margin:0;
    font-size:8px;
    line-height:12px;
    font-weight:600;
    color:var(--romar-teal-dark);
  }
  .romar-product-stars{ color:#EBAC01; font-size:10px; letter-spacing:1px; }
  .romar-product-price-compact{
    margin:0;
    font-size:12px;
    line-height:14px;
    font-weight:600;
    color:var(--romar-teal-dark);
  }
  .romar-section-products .text-center.mt-4{ margin-top:14px !important; }
  .romar-section-products .romar-btn-outline{ max-width:144px; height:30px; font-size:16px; }

  /* ---- Tìm theo thương hiệu (462:1658-1664): 1 thẻ/lần, vuốt ngang ---- */
  .romar-section-brands{ padding-top:43px; padding-bottom:68px; }
  .romar-section-brands .romar-heading{ margin-bottom:38px; }
  .romar-section-brands .row{
    flex-wrap:nowrap;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    --bs-gutter-x:0;
    --bs-gutter-y:0;
    margin:0 -24px;
    justify-content:flex-start !important;
  }
  .romar-section-brands .row::-webkit-scrollbar{ display:none; }
  .romar-section-brands .row > [class*="col-"]{
    flex:0 0 100%;
    width:100%;
    scroll-snap-align:center;
    display:flex;
    justify-content:center;
  }
  .romar-brand-card{ width:202px; position:relative; }
  .romar-brand-top{ aspect-ratio:auto; height:188px; }
  .romar-brand-bottom{
    aspect-ratio:auto;
    height:142px;
    flex-direction:column;
    justify-content:flex-start;
    padding:10px 16px 0;
    margin-top:-3px;
  }
  .romar-brand-logo{ max-width:100%; height:85px; max-height:none; width:auto; }
  .romar-brand-card p{
    position:absolute;
    left:16px;
    right:16px;
    top:274px;
    margin:0;
    font-size:12px;
    line-height:16px;
  }

  /* ---- Destello (462:1641-1645): ảnh cao 463, ô vuông #EAF1F1 185px giữa ảnh ---- */
  .romar-destello-bg{ height:463px; object-fit:cover; }
  .romar-destello-panel{
    width:185px;
    aspect-ratio:1/1;
    border-radius:0;
    background:#EAF1F1;
    justify-content:flex-start;
    padding:9px 18px 0;
    top:calc(50% - 7px);
  }
  .romar-destello-panel h2{ font-size:40px; line-height:47px; margin:0 0 3px; }
  .romar-destello-panel p{ font-size:12px; line-height:15px; }
  .romar-arrow-poly{ display:none; }

  /* ---- Chất lượng là trên hết (462:1666-1676) ---- */
  .romar-section-quality{ padding-top:101px; padding-bottom:20px; }
  .romar-quality-decor{
    display:block;
    top:-117px;
    left:8px;
    width:115px;
    height:auto;
  }
  .romar-section-quality .romar-heading{ line-height:52px; margin:0 auto 18px; max-width:240px; }
  .romar-section-quality .romar-subheading{ font-size:12px; line-height:15px; margin-bottom:20px; }
  .romar-section-quality img.romar-quality-badge{ max-width:262px; margin-bottom:31px; }
  .romar-section-quality .row{ --bs-gutter-y:15px; }
  .romar-section-quality .row > [class*="col-"]{ flex:0 0 201px; width:201px; padding-left:0; padding-right:0; }
  .romar-quality-img{ aspect-ratio:201/176; width:100%; }

  /* ---- Bắt đầu hành trình (462:1677-1678) ---- */
  .romar-section-cta{ padding-bottom:30px; }
  .romar-section-cta .romar-heading{ font-size:min(40px, 9.9vw); line-height:48px; margin-bottom:24px; }
  .romar-btn-cta{ max-width:201px; height:36px; font-size:16px; padding:0 12px; }

  /* ---- Footer (462:1679) ---- */
  .romar-footer .container-xl{ padding-top:0 !important; padding-bottom:7px !important; }
  .romar-footer .row{ --bs-gutter-y:0; flex-direction:column; }
  .romar-footer .row > [class*="col-"]{ order:3; }
  .romar-footer .row > [class*="col-"]:first-child{ order:1; }
  .romar-footer-badge{ display:block; width:243px; max-width:none; margin:-46px 0 0 -24px !important; }
  .romar-newsletter-title{ max-width:280px; margin-bottom:1px !important; }
  .romar-newsletter{ margin:10px 0 5px !important; }
  /* Cột "Kết nối": tách icon MXH lên ngay dưới form email, phần liên hệ xuống cuối */
  .romar-footer-connect{ display:contents; }
  .romar-footer-connect .romar-footer-heading-sm{ display:none; }
  .romar-footer-connect .romar-social{ order:2; gap:26px !important; margin:34px 0 24px !important; }
  .romar-social img{ width:51px; height:51px; }
  .romar-footer-connect .romar-footer-contact-label{
    order:4;
    font-size:12px;
    line-height:23px;
    font-weight:700;
    text-transform:uppercase;
    margin:0 !important;
    padding-bottom:8px;
    width:281px;
    border-bottom:1px solid #fff;
  }
  .romar-footer-connect .romar-footer-contact{
    order:5;
    font-size:12px;
    line-height:24px;
    text-transform:uppercase;
    max-width:260px;
    margin:12px 0 0;
  }
  .romar-footer h5, .romar-footer h6{ margin-bottom:1px; }
  .romar-footer-heading-lg{ padding-bottom:0; }
  .romar-footer-heading-lg::after{ display:none; }
  .romar-footer-toggle{
    display:inline-flex;
    align-items:center;
    gap:8px;
    line-height:23px;           /* Figma 16/23, mỗi hàng cao 31px */
    padding:4px 0;
  }
  .romar-footer .romar-footer-toggle{ cursor:pointer; }
  .romar-footer-toggle::after{
    content:"";
    width:7px;
    height:7px;
    border-right:2px solid #fff;
    border-bottom:2px solid #fff;
    transform:translateY(-2px) rotate(45deg);
    transition:transform .2s ease;
  }
  .romar-footer-toggle[aria-expanded="true"]::after{ transform:translateY(1px) rotate(-135deg); }
  .romar-footer-toggle:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
  .romar-footer-links{ display:none; margin:0 0 8px; }
  .romar-footer-links.is-open{ display:block; }
  .romar-footer-links a{ line-height:34px; }
  .romar-footer-bottom{ height:71px; padding:0; }
  /* Các phần tách khỏi cột "Kết nối" (display:contents) mất padding cột 12px ->
     bù lại để thẳng lề 24px như các khối khác (Figma x=24) */
  .romar-footer-connect .romar-social,
  .romar-footer-connect .romar-footer-contact-label,
  .romar-footer-connect .romar-footer-contact{ margin-left:12px !important; margin-right:12px !important; }
  .romar-footer-connect .romar-footer-contact{ max-width:234px; }
  .romar-footer-bottom-desktop{ display:none !important; }
  .romar-footer-bottom img.romar-footer-bottom-mobile{ display:block !important; width:217px; height:auto; }
}
.romar-footer-bottom-mobile{ display:none; }
.romar-footer-contact strong{ font-weight:600; }
/* Figma footer (106:2489-2511 / I462:1910): chữ #FEFEFE (trừ khối newsletter #FFFFFF) */
.romar-footer .romar-footer-links a,
.romar-footer h5, .romar-footer h6,
.romar-footer .romar-footer-toggle,
.romar-footer-contact-label, .romar-footer-contact{ color:#FEFEFE; }

/* ==========================================================================
   TRANG CHỦ DESKTOP - đối chiếu Figma node 1:566 (khung 1440px) (2026-09-30).
   Nội dung Figma nằm trong khung x=120..1320 (1200px): header/footer/các khối
   trang chủ dùng container 1224px (1200 + 2x12 gutter) thay vì 1440px - CHỈ
   gắn vào class header/footer/khối page-builder, không đổi .container-xl của
   các trang catalog/tin tức... đã dựng riêng theo khung 1440.
   ========================================================================== */
@media (min-width:768px){
  .romar-header .container-xl,
  .romar-subbar--home .container-xl,
  .romar-hero .container-xl,
  .romar-section-needs .container-xl,
  .romar-section-products .container-xl,
  .romar-section-about .container-xl,
  .romar-section-brands .container-xl,
  .romar-section-quality .container-xl,
  .romar-section-cta .container-xl,
  .romar-footer .container-xl{ max-width:1224px; }

  /* ---- Thanh danh mục phụ trang chủ (169:1477): 4 mục chia đều khung 1200 ---- */
  .romar-subbar--home .container-xl{ width:100%; }
  .romar-subbar--home .romar-subnav{ justify-content:space-between; flex-wrap:nowrap; }
  .romar-subbar--home .romar-subnav .nav-link{ padding:0; font-size:16px; }

  /* ---- Hero (20:79-20:88): phủ đen 30% đều, nút teal 124x42 cạnh 2 logo ---- */
  .romar-hero-overlay{ background:rgba(0,0,0,.3); }
  .romar-hero-content{
    display:grid;
    grid-template-columns:auto auto 1fr;
    align-items:start;
  }
  .romar-hero-content h1,
  .romar-hero-content p{ grid-column:1 / -1; }
  .romar-hero-content p{ margin-bottom:0; }
  .romar-hero-badges{ grid-column:1; grid-row:3; margin:17px 0 0 -14px; gap:0; flex-wrap:nowrap; align-items:center; }
  .romar-hero-badges img{ height:auto; }
  .romar-hero-badges img:first-child{ width:134px; }
  .romar-hero-badges img:nth-child(2){ width:90px; margin-left:-3px; }
  .romar-hero-content .btn{
    grid-column:2;
    grid-row:3;
    margin:24px 0 0 21px;
    width:124px;
    height:42px;
    padding:0;
    line-height:42px;
    border-radius:10px;
    background:var(--romar-teal);
    color:#fff;
    font-size:24px;
    font-weight:500;
  }
  .romar-hero-content .btn:hover{ background:var(--romar-teal-dark); color:#fff; filter:none; }

  /* ---- Carousel "Chọn theo nhu cầu"/"Sản phẩm": mũi tên chevron 30px trơn,
     cách mép khung 30px, cách hàng thẻ 42px -> thẻ bắt đầu x=222 (Figma) ---- */
  .romar-section-needs .romar-needs-row,
  .romar-section-products .romar-needs-row{ padding:0 30px; gap:42px; }
  .romar-section-needs .romar-arrow,
  .romar-section-products .romar-arrow{
    width:30px;
    height:30px;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }
  .romar-section-needs .romar-arrow img,
  .romar-section-products .romar-arrow img{ width:30px; height:30px; }

  /* ---- Chọn theo nhu cầu (40:499-40:506): ảnh kích thước gốc, neo đáy vùng
     284px, tràn nhẹ xuống nhãn; nhãn canh trái ---- */
  .romar-need-card{ text-align:left; }
  .romar-need-card-imgwrap{
    height:284px;
    align-items:flex-end;
    margin-bottom:-32px;
    overflow:visible;
  }
  .romar-section-needs .romar-subheading{ margin-bottom:44px; }
  .romar-need-card img{ border-radius:0; }
  .romar-need-card h3,
  .romar-need-card p{ position:relative; }
  .romar-needs-combo{ margin-top:61px; }
  /* Chấm tròn vàng 132px (44:41) nằm dưới banner kế tiếp, cách mép phải khung 120px */
  .romar-section-needs{ position:relative; }
  .romar-section-needs::after{
    content:"";
    position:absolute;
    right:max(12px, calc(50% - 600px));
    bottom:-67px;
    width:132px;
    height:132px;
    border-radius:50%;
    background:#EBAC01;
    z-index:0;
  }

  /* ---- Banner (44:105/44:107): 2 đường kẻ 840x5 THUÔN 2 đầu (dày 5px ở
     giữa, mỏng dần ra mép) - dùng đúng SVG xuất từ Figma (Line 1/Line 2 giống
     hệt nhau -> 1 file assets/images/banner-line.svg dùng cho cả 2), tâm đường
     kẻ nằm đúng mép trên/dưới banner như Figma (y=1520 / y=2026). ---- */
  .romar-banner{ z-index:1; }
  .romar-banner::before,
  .romar-banner::after{
    content:"";
    position:absolute;
    left:50%;
    width:min(840px, calc(100% - 48px));
    height:5px;
    transform:translateX(-50%);
    background:url("../images/banner-line.svg") center / 100% 100% no-repeat;
  }
  .romar-banner::before{ top:-2px; }
  .romar-banner::after{ bottom:-3px; }

  /* ---- Sản phẩm được ưa chuộng: vòng tròn xanh lá (44:42) dựng bằng CSS,
     banner (z-index:1) che nửa trên ---- */
  .romar-products-accent{ display:none !important; }
  .romar-section-products .container-xl::before{
    content:"";
    position:absolute;
    left:56px;
    top:-279px;
    width:279px;
    height:279px;
    border-radius:50%;
    border:54px solid rgba(159, 197, 123, .7);
  }

  /* Card gọn (44:167-44:202): ảnh 229 bo 5 -> hàng sao/giá -> tên + loại */
  .romar-catalog-card--compact .romar-product-badges,
  .romar-catalog-card--compact .romar-badge-pill--right,
  .romar-catalog-card--compact .romar-product-price,
  .romar-catalog-card--compact .romar-product-detail{ display:none; }
  .romar-catalog-card--compact .romar-product-imgwrap{ border-radius:5px; margin-bottom:25px; }
  .romar-catalog-card--compact .romar-product-info{ display:flex; flex-direction:column; }
  .romar-catalog-card--compact .romar-product-compact{
    order:-1;
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:6px;
  }
  .romar-section-products .romar-subheading{ margin-bottom:84px; }
  .romar-catalog-card--compact .romar-product-name,
  .romar-catalog-card--compact .romar-product-variant{
    font-size:16px;
    line-height:23px;
    font-weight:600;
    color:var(--romar-teal-dark);
    margin:0;
  }
  .romar-product-rating{
    display:flex;
    align-items:center;
    gap:3px;
    margin:0;
    font-size:8px;
    line-height:12px;
    font-weight:600;
    color:var(--romar-teal-dark);
  }
  .romar-product-stars{ color:#EBAC01; font-size:12px; letter-spacing:.5px; }
  .romar-product-price-compact{
    margin:0;
    font-size:16px;
    line-height:18px;
    font-weight:600;
    color:var(--romar-teal-dark);
  }

  /* ---- Giới thiệu (44:220-44:228): nền 473px, 3 cột chữ rộng 280 tại
     x=197/591/968 (giãn đều 197..1248), chữ bắt đầu cách mép trên nền 260px ---- */
  .romar-section-about{ min-height:473px; padding-top:51px; }
  .romar-about-imgwrap{ height:150px; }
  .romar-about-number{ margin-bottom:0; }
  .romar-about-imgwrap{ height:149px; }

  /* ---- Tìm theo thương hiệu (44:250-44:264): 3 thẻ 282px giãn đều khung
     222..1218, mô tả nằm TRONG khung trắng dưới logo ---- */
  .romar-brand-card{ position:relative; }
  .romar-brand-card p{
    position:absolute;
    left:15px;
    right:15px;
    top:382px;
    margin:0;
  }
  /* Logo canh giữa vùng TRÊN mô tả (10..124px của khung trắng 198px), không
     phải giữa cả khung - tránh đè lên dòng mô tả. */
  .romar-brand-bottom{ padding:10px 1rem 74px; }
  .romar-brand-logo{ max-height:80px; }
  .romar-section-brands{ padding-bottom:56px; }

  /* ---- Chất lượng (44:294-44:296): 3 ảnh 320x281 cách nhau 42px ---- */
  .romar-section-quality .row{ --bs-gutter-y:24px; }
  .romar-section-quality img.romar-quality-badge{ margin-bottom:48px; }
  /* Nút CTA -> nền teal footer 67px (Figma: khung footer có 21px trong suốt phía trên nền để logo nhô lên) */
  .romar-section-cta{ padding-bottom:67px; }

  /* ---- Footer (106:2524): link + phần liên hệ viết hoa, nhãn nhà phân phối
     đậm có kẻ dưới ---- */
  .romar-footer .container-xl{ padding-top:63px !important; padding-bottom:99px !important; }
  .romar-footer-bottom{ height:71px; padding:0; }
  .romar-footer-badge{ width:243px; max-width:none; margin:-84px 0 0 -24px !important; display:block; }
  .romar-footer-heading-lg, .romar-footer-heading-sm{ padding-bottom:16px; line-height:23px; margin-bottom:9px !important; }
  .romar-footer .romar-social{ margin-top:19px; margin-bottom:29px !important; }
  .romar-footer-links a{ text-transform:uppercase; }
  .romar-footer-contact-label{
    font-size:12px;
    line-height:23px;
    font-weight:700;
    text-transform:uppercase;
    padding-bottom:10px;
    margin:0 0 12px !important;
    max-width:281px;
    border-bottom:1px solid #fff;
  }
  .romar-footer-contact{
    font-size:12px;
    line-height:24px;
    text-transform:uppercase;
    max-width:234px;
  }
}

/* Bố cục cột kích thước cố định theo khung 1200px (giới thiệu 3x280, thương
   hiệu 3x282, chất lượng 3x320) - chỉ khi đủ chỗ; 768-1199px giữ lưới Bootstrap
   co giãn để không tràn ngang (đã phát hiện tràn 96px ở 1024px). */
@media (min-width:1200px){
  /* Ảnh "Chọn theo nhu cầu" kích thước gốc (334x284...) + nhãn rộng 260 (> cột 239)
     giống Figma - chỉ khi đủ chỗ, tablet để ảnh/nhãn co theo cột (tránh đè nhau). */
  .romar-need-card img{ max-width:none; max-height:none; }
  .romar-need-card p{ width:260px; max-width:none; }
  .romar-section-about .row{ justify-content:space-between; margin:0 72px 0 77px; --bs-gutter-x:0; }
  .romar-section-about .row > .col-md-4{ flex:0 0 280px; width:280px; }
  /* Ảnh gốc Figma (44:222/221/223) đã có sẵn chữ "1968" / "800 SKU'S" / "70
     COUNTRIES": hiện đúng kích thước gốc, neo TRÊN (cả 3 ảnh cùng đỉnh y=2902),
     lệch trái so với cột chữ đúng Figma 25 / 2 / 47px. Chữ mô tả bắt đầu cách
     đỉnh ảnh 209px (cột giữa 213px, lệch phải 9px, rộng 258px). */
  .romar-section-about .row > .col-md-4{ margin-top:0; } /* bỏ gutter-y 24px của .g-4 (hàng đã margin:0) - ảnh cách đỉnh nền đúng 51px */
  .romar-section-about .romar-about-imgwrap{ height:194px; align-items:flex-start; justify-content:flex-start; max-width:none !important; }
  .romar-section-about .romar-about-imgwrap img{ width:auto; height:auto; max-width:none; }
  .romar-section-about .col-md-4:nth-child(1) .romar-about-imgwrap{ padding-left:25px; }
  .romar-section-about .col-md-4:nth-child(2) .romar-about-imgwrap{ padding-left:11px; }
  .romar-section-about .col-md-4:nth-child(3) .romar-about-imgwrap{ padding-left:47px; }
  .romar-section-about p{ margin-top:15px; }
  .romar-section-about .col-md-4:nth-child(2) p{ margin-top:19px; margin-left:9px; max-width:258px !important; }
  .romar-section-brands .row{ justify-content:space-between !important; margin:0 102px; --bs-gutter-x:0; }
  .romar-section-brands .row > [class*="col-"]{ flex:0 0 282px; width:282px; }
  .romar-section-quality .row{ --bs-gutter-x:42px; }
  .romar-section-quality .row > [class*="col-"]{ flex:0 0 auto; width:362px; max-width:100%; }
}

@media (min-width:1440px){
  /* Hero: Figma ảnh 1440x665 từ y=108, thanh danh mục 59px phủ phần đầu ->
     phần hero thấy được cao 606px, ảnh neo đáy (cắt đúng 59px phía trên). */
  .romar-subbar--home ~ .romar-hero{
    min-height:606px;
    align-items:flex-start;
    background-position:center bottom;
  }
  .romar-subbar--home ~ .romar-hero .romar-hero-content{ padding-top:222px; }
  .romar-hero-content h1{ margin:0 0 -2px -3px; max-width:600px; }

  /* Destello (44:267-44:274, 221:2698/2699): ảnh 1604x1070 neo phải (cắt 164px
     trái), ô VUÔNG #EAF1F1 328px tại x=810,y=486, chữ đúng cỡ Figma (vừa ô vuông). */
  .romar-destello-bg{ height:1070px; object-position:right center; }
  .romar-destello-panel{
    top:486px;
    left:56.25%;                /* 810/1440 - co giãn theo bề ngang ở màn >1440px */
    transform:none;
    border-radius:0;
    justify-content:flex-start;
    padding:28px 24px 0;
  }
  .romar-destello-panel h2{ font-size:64px; line-height:72px; margin:0 0 11px; }
  .romar-destello-panel p{ font-size:16px; line-height:26px; }
  .romar-arrow-poly{ top:579px; transform:none; }
  .romar-arrow-poly-left{ left:10.49%; }             /* 151/1440 */
  .romar-arrow-poly-right{ left:86.32%; right:auto; }  /* 1243/1440 */
}

/* ==========================================================================
   TRANG "TẤT CẢ SẢN PHẨM" (archive-product.php) - đối chiếu Figma desktop
   106:2014 + mobile 462:1819 (2026-09-30). Gắn qua class riêng của trang
   (.romar-catalog-hero--all / .romar-catalog-list--all / .romar-section-quality--shop)
   để không ảnh hưởng trang "Sản phẩm ưa chuộng"/tìm kiếm dùng chung card.
   Khung ảnh card là VUÔNG 282x282 (Rectangle 31) - 284x295 trước đây là khung
   bao cả component (gồm phần chữ badge nhô lên trên ảnh), không phải khung ảnh.
   ========================================================================== */
.romar-catalog-list--all .romar-product-imgwrap{ aspect-ratio:1/1; }
.romar-catalog-list--all .romar-seemore.is-disabled{ opacity:1; }   /* Figma: nút "Xem thêm" luôn nét */
.romar-catalog-list--all .romar-product-price-old{
  color:#72A7B0;
  text-decoration-color:var(--romar-teal-dark);   /* gạch ngang = Vector #0E6678 dày 2px trong Figma */
  text-decoration-thickness:2px;
}
.romar-catalog-decor-mobile{ display:none; }

/* Đường kẻ ngăn thuôn 2 đầu (Line 1/5-9: 1040x3 desktop, 345x1 mobile) - cùng
   hình với đường kẻ banner trang chủ -> dùng lại banner-line.svg. */
.romar-catalog-hero--all .romar-catalog-toolbar::after,
.romar-catalog-list--all .romar-catalog-divider,
.romar-catalog-list--all + .romar-brandshowcase::before{
  background:url("../images/banner-line.svg") center / 100% 100% no-repeat;
}
.romar-catalog-list--all + .romar-brandshowcase::before{
  content:"";
  position:absolute;
  left:50%;
  top:-1px;
  width:min(1040px, calc(100% - 48px));
  height:3px;
  transform:translateX(-50%);
  z-index:1;
}

/* ---------- Desktop (khung 1440) ---------- */
@media (min-width:1440px){
  /* Vạch ngăn trước ô "Chức năng" (Line 3) - ô này giờ nằm trong sheet lọc */
  .romar-catalog-hero--all .romar-mobile-filter-sheet > .romar-filter-dropdown:nth-child(3)::before{
    content:"";
    position:absolute;
    top:50%;
    left:27px;
    transform:translateY(-50%);
    width:1px;
    height:46px;
    background:#005C6F;
    pointer-events:none;
  }
  .romar-catalog-hero--all .romar-catalog-toolbar{ padding-bottom:61px; }   /* kẻ Line 1 tại y=447 */
  .romar-catalog-hero--all .romar-catalog-toolbar::after{ height:3px; bottom:-1px; }

  /* Nhịp dọc mỗi danh mục: kẻ -> tiêu đề (hộp 72px) 34px -> ảnh 110px từ đầu hộp
     tiêu đề -> tên 12px -> "Chi tiết" 87px từ đầu tên -> "Xem thêm" 52px từ đầu
     "Chi tiết" -> kẻ 57px dưới "Xem thêm" */
  .romar-catalog-list--all .romar-catalog-category{ padding-top:34px; }
  .romar-catalog-list--all .romar-catalog-category:first-child{ padding-top:32px; }
  .romar-catalog-list--all .romar-catalog-category-title{ line-height:72px; }
  .romar-catalog-list--all .romar-catalog-category-head{ margin-bottom:38px; }
  .romar-catalog-list--all .romar-product-grid{ gap:24px; }
  .romar-catalog-list--all .romar-product-price{ margin-bottom:11px; }
  .romar-catalog-list--all .romar-catalog-card{ display:flex; flex-direction:column; }
  .romar-catalog-list--all .romar-product-info{ flex:1; display:flex; flex-direction:column; }
  .romar-catalog-list--all .romar-product-detail{
    display:block;
    width:fit-content;
    margin:auto 0 0 auto;
    line-height:24px;
    padding-bottom:0;
  }
  .romar-catalog-list--all .romar-catalog-divider{ height:3px; }
  /* Chấm vàng 218px (106:2233) ở x=-119 so với MÉP TRANG (khối danh mục bắt đầu x=120) */
  .romar-catalog-list--all .romar-catalog-decor-ellipse{ top:17px; left:calc(-119px - (100vw - 1200px) / 2); }
  .romar-catalog-list--all{ padding-bottom:57px; }   /* nút "Xem thêm" cuối -> kẻ đầu banner Romar = 57px như các nút khác */

  /* Khối Romar (106:3094-3097): chữ bắt đầu sát mép trên ô tím */
  .romar-brandshowcase-panel{ justify-content:flex-start; gap:0; padding-top:1px; left:65%; top:53.28%; }
  .romar-brandshowcase-title{ line-height:72px; }
  .romar-brandshowcase-text{ margin-top:-11px; }

  /* Chất lượng (106:3098-3108): tiêu đề cách khối Romar 134px, lưỡi liềm 166px
     sát mép dưới khối Romar, ảnh -> nền footer 61px */
  .romar-section-quality--shop{ padding-top:134px; padding-bottom:61px; }
  .romar-section-quality--shop .romar-quality-decor{ top:-97px; left:12px; width:139px; height:103px; }
  .romar-section-quality--shop img.romar-quality-badge{ margin-bottom:48px; }
}

/* ---------- Nút lọc mobile/tablet: tròn 28px, chỉ icon phễu (462:1912) ---------- */
@media (max-width:1439.98px){
  .romar-catalog-hero--all .romar-mobile-filter-trigger{
    width:28px;
    height:28px;
    padding:0;
    gap:0;
    border:1px solid #005C6F;
    border-radius:50%;
    justify-content:center;
  }
  /* Tiêu đề 3 nhóm trong sheet lọc là nhãn tĩnh (không bấm), ô "Chức năng" gộp vào */
  .romar-catalog-hero--all .romar-mobile-filter-sheet .romar-filter-trigger{
    display:inline-flex;
    pointer-events:none;
    width:auto;
    height:auto;
    padding:0;
    border:0;
    border-radius:0;
    font-size:16px;
    font-weight:500;
    line-height:43px;
    color:var(--romar-teal-dark);
  }
  .romar-catalog-hero--all .romar-mobile-filter-sheet .romar-sort-label{ display:none; }
  .romar-catalog-hero--all .romar-mobile-filter-sheet .romar-sort-trigger::before{ content:"Chức năng"; }
  .romar-catalog-hero--all .romar-mobile-filter-sheet [data-filter="danh-muc"] .romar-filter-chevron{ display:none; }
  .romar-catalog-hero--all .romar-mobile-filter-sheet .romar-filter-chevron{ width:5px; height:5px; margin-left:4px; }
  .romar-catalog-hero--all .romar-mobile-filter-sheet .romar-filter-dropdown + .romar-filter-dropdown{
    border-top:1px solid var(--romar-teal-dark);
    padding-top:9px;
    margin-top:14px;
    width:278px;
    max-width:100%;
  }
  .romar-catalog-hero--all .romar-mobile-filter-sheet .romar-filter-panel{ margin-top:6px; background:transparent; }
  .romar-catalog-hero--all .romar-mobile-filter-sheet .romar-filter-check{ font-size:12px; padding:8px 0; }
  /* Nhóm "Chức năng": 5 dòng cách nhau 28px (Figma 462:1921), checkbox 2 nhóm trên 32px */
  .romar-catalog-hero--all .romar-mobile-filter-sheet [data-filter="sort"] .romar-filter-check{ padding:6px 0; }
}

/* ---------- Mobile (khung Figma 402px) ---------- */
@media (max-width:575.98px){
  .romar-catalog-hero--all > .container-xl,
  .romar-catalog-list--all > .container-xl{ padding-left:24px; padding-right:24px; }

  /* Tiêu đề + dòng đếm canh giữa (462:1840/1837), lưỡi liềm teal bên trái */
  .romar-catalog-hero--all{ padding-top:35px; }
  .romar-catalog-hero--all .romar-catalog-title{ line-height:48px; margin:0; }
  .romar-catalog-decor-mobile{
    display:block;
    position:absolute;
    left:11px;
    top:66px;
    width:89px;
    height:auto;
    pointer-events:none;
    z-index:0;
  }
  .romar-catalog-hero--all .romar-catalog-toolbar{
    display:block;
    position:static;
    min-height:81px;
    margin-top:5px;
    padding:0;
    border-bottom:0;
  }
  .romar-catalog-hero--all .romar-catalog-toolbar{ position:relative; }
  .romar-catalog-hero--all .romar-catalog-toolbar::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    width:345px;
    max-width:100%;
    height:1px;
    transform:translateX(-50%);
  }
  .romar-catalog-hero--all .romar-catalog-count{ font-size:16px; line-height:24px; }
  .romar-catalog-hero--all .romar-catalog-filters{ position:static; display:block; }
  .romar-catalog-hero--all .romar-mobile-filter-trigger{
    position:absolute;
    right:13px;
    top:20px;
    z-index:3;
  }
  /* Sheet lọc = ngăn kéo 331px nền #E7FBFF phủ từ ngay dưới header (Group 97) */
  .romar-catalog-hero--all .romar-mobile-filter-sheet{
    position:absolute;
    top:-88px;                  /* bám mép dưới header: 35 (padding) + 48 (tiêu đề) + 5 */
    left:-24px;                 /* về sát mép trái màn hình (bù lề container 24px) */
    width:331px;
    max-width:calc(100vw - 32px);
    min-height:655px;
    border-radius:0;
    padding:50px 29px 24px 23px;
    gap:0;
    z-index:30;
    box-shadow:0 0 0 100vmax rgba(0,0,0,.28);   /* phần trang phía sau tối đi như Figma (Group 97) */
  }
  /* Header giữ sáng phía trên lớp tối (Figma: chỉ nội dung trang tối đi) */
  body:has(.romar-catalog-hero--all) .romar-header{ position:relative; z-index:40; }

  /* Card mobile (Group 42-46): chữ canh trái, tên 30/39, loại 20/30, giá 20/26,
     badge 20px, không có "Chi tiết" */
  .romar-catalog-list--all .romar-catalog-category{ padding-top:27px; }
  .romar-catalog-list--all .romar-catalog-category:first-child{ padding-top:2px; }
  .romar-catalog-list--all .romar-catalog-category-title{ line-height:72px; }
  .romar-catalog-list--all .romar-catalog-category-head{ margin-bottom:13px; gap:19px; }
  .romar-catalog-list--all .romar-product-imgwrap{ border-radius:6px; margin-bottom:15px; }
  .romar-catalog-list--all .romar-product-badges{ top:12px; left:10px; right:8px; }
  .romar-catalog-list--all .romar-badge-pill{ font-size:20px; padding:8px 6px; border-radius:6px; }
  .romar-catalog-list--all .romar-badge-pill--right{ top:12px; right:10px; }
  .romar-catalog-list--all .romar-badge-save{ font-size:20px; }
  .romar-catalog-list--all .romar-product-info{ text-align:left; }
  .romar-catalog-list--all .romar-product-name{ font-size:30px; line-height:39px; margin:0; }
  .romar-catalog-list--all .romar-product-variant{ font-size:20px; line-height:30px; margin:0; }
  .romar-catalog-list--all .romar-product-price{ justify-content:space-between; flex-wrap:wrap; gap:4px 12px; margin:0; }
  .romar-catalog-list--all .romar-product-price-line,
  .romar-catalog-list--all .romar-product-price-old,
  .romar-catalog-list--all .romar-product-price-value,
  .romar-catalog-list--all .romar-product-volume{ font-size:20px; line-height:26px; }
  .romar-catalog-list--all .romar-product-price-old{ text-decoration-thickness:2.5px; }
  .romar-catalog-list--all .romar-product-detail{ display:none; }
  .romar-catalog-list--all .romar-catalog-seemore-wrap{ margin-top:38px; }
  .romar-catalog-list--all .romar-seemore{
    width:106px;
    height:32px;
    padding:0;
    justify-content:center;
    border-radius:16px;
    font-size:15px;
  }
  .romar-catalog-list--all .romar-catalog-divider{
    height:1px;
    max-width:345px;
    margin:27px auto 0;
  }
  /* Chấm vàng 81px (462:1881) giữa card 2-3 danh mục đầu, lộ nửa ở mép trái;
     vòng tròn cam 120px (462:1864) ở mép phải dưới card đầu danh mục 2 */
  .romar-catalog-list--all .romar-catalog-card{ position:relative; }
  .romar-catalog-list--all .romar-catalog-category:first-child .romar-catalog-card:nth-child(2)::after,
  .romar-catalog-list--all .romar-catalog-category:nth-child(2) .romar-catalog-card:first-child::after{
    content:"";
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    z-index:-1;
  }
  .romar-catalog-list--all .romar-catalog-category:first-child .romar-catalog-card:nth-child(2)::after{
    left:-66px;
    top:465px;
    width:81px;
    height:81px;
    background:#EBAC01;
  }
  .romar-catalog-list--all .romar-catalog-category:nth-child(2) .romar-catalog-card:first-child::after{
    left:328px;
    top:412px;
    width:120px;
    height:120px;
    border:39px solid #FE8170;
  }
  .romar-catalog-list--all{ padding-bottom:27px; overflow-x:clip; }   /* nút "Xem thêm" cuối -> banner 27px như các nút khác */   /* chấm vàng/vòng cam cắt ở mép màn hình, không tạo cuộn ngang */
  /* Khoảng 57px trong Figma tính từ đáy chữ tới ĐẦU component card (gồm 16px chữ
     badge nhô trên ảnh) -> giữa đáy chữ và mép ảnh card sau là 73px */
  .romar-catalog-list--all .romar-product-grid{ gap:73px; }

  /* Khối Romar mobile (462:1872-1880): ô tím 169x138 tại 52%/50.4%, chữ 16/29 + 8/11 */
  .romar-catalog-list--all + .romar-brandshowcase{ background-position:56.7% center; }
  .romar-catalog-list--all + .romar-brandshowcase::before{ width:345px; height:1px; top:0; }
  .romar-brandshowcase-panel{
    left:52%;
    top:50.4%;
    width:42%;
    height:33.9%;
    bottom:auto;
    padding:2px 8px 0 17px;
    justify-content:flex-start;
    gap:0;
  }
  .romar-brandshowcase-title{ font-size:16px; line-height:29px; }
  .romar-brandshowcase-text{ font-size:8px; line-height:11px; max-width:134px; margin-top:-2px; }

  /* Chất lượng (462:1896-1909): tiêu đề 40/51 rộng 322, ảnh 200x175 xếp dọc cách
     27px theo thứ tự Figma mobile: 50 năm -> EcoVadis -> BREEAM */
  .romar-section-quality--shop{ padding-top:75px; padding-bottom:52px; }
  .romar-section-quality--shop .romar-quality-decor{ top:-57px; left:27px; width:76px; height:auto; }   /* giữ cách banner 18px sau khi padding-top 75 */
  .romar-section-quality--shop .romar-heading{ max-width:322px; line-height:51px; margin:0 auto -3px; }
  .romar-section-quality--shop .romar-subheading{ max-width:322px; margin-bottom:29px; }
  .romar-section-quality--shop img.romar-quality-badge{ max-width:298px; margin-bottom:18px; }
  .romar-section-quality--shop .row{
    display:flex;
    flex-direction:column-reverse;
    align-items:center;
    gap:27px;
    margin:0;
  }
  .romar-section-quality--shop .row > [class*="col-"]{ width:200px; flex:0 0 auto; padding:0; margin:0; }
  .romar-section-quality--shop .romar-quality-img{ aspect-ratio:200/175; width:100%; }
  .romar-section-quality--shop .romar-quality-badge-breeam{ left:29.4%; top:11.4%; width:41.3%; }
}

/* ==========================================================================
   Card sản phẩm trang Tất cả sản phẩm + 3 trang thương hiệu (2026-09-30)
   ========================================================================== */
/* Figma (106:2014 / 65:394): tên sản phẩm tự giãn rộng hơn card 282px (vd "Nước
   giặt hương Marseille" rộng 287px, lấn sang khe 24px giữa 2 card) -> 1 dòng,
   không đẩy "Chi tiết" xuống. Cho tên dùng thêm khe bên phải. */
@media (min-width:1440px){
  .romar-catalog-list--all .romar-product-name,
  .romar-catalog-list--brand .romar-product-name{ margin-right:-24px; }
  /* Trang thương hiệu (65:394): "Chi tiết" sát phải đáy card như trang Tất cả sản phẩm */
  .romar-catalog-list--brand .romar-catalog-card{ display:flex; flex-direction:column; }
  .romar-catalog-list--brand .romar-product-info{ flex:1; display:flex; flex-direction:column; }
  .romar-catalog-list--brand .romar-product-price{ margin-bottom:11px; }
  /* Figma: tên 31 + loại 24 + giá 21 xếp sát, "Chi tiết" ngay 11px sau (tổng 87px từ đầu tên) */
  .romar-catalog-list--all .romar-product-name,
  .romar-catalog-list--brand .romar-product-name,
  .romar-catalog-list--all .romar-product-variant,
  .romar-catalog-list--brand .romar-product-variant{ margin-bottom:0; }
  .romar-catalog-list--all .romar-product-price,
  .romar-catalog-list--brand .romar-product-price{ line-height:21px; }
  .romar-catalog-list--all .romar-product-imgwrap,
  .romar-catalog-list--brand .romar-product-imgwrap{ margin-bottom:12px; }   /* tên cách đáy ảnh 12px */
  .romar-catalog-list--all .romar-product-price-line,
  .romar-catalog-list--brand .romar-product-price-line,
  .romar-catalog-list--all .romar-product-volume,
  .romar-catalog-list--brand .romar-product-volume{ line-height:21px; }
  .romar-catalog-list--brand .romar-product-detail{ display:block; width:fit-content; margin:auto 0 0 auto; line-height:24px; padding-bottom:0; }
}
/* Trang thương hiệu desktop (65:394): kẻ dưới thanh lọc thuôn 1040x3 tại y=447,
   lưới card cách kẻ 59px, card 282 cách nhau 24px, hàng sau cách "Chi tiết" 47px */
.tax-product_brand .romar-catalog-toolbar::after{
  background:url("../images/banner-line.svg") center / 100% 100% no-repeat;
}
@media (min-width:1440px){
  .tax-product_brand .romar-catalog-toolbar{ padding-bottom:61px; }
  .tax-product_brand .romar-catalog-toolbar::after{ bottom:-1px; }
  .romar-catalog-list.romar-catalog-list--brand{ padding-top:59px; }   /* thắng rule 17px cũ trong romar-brand.css (Figma cũ 68:714) */
  .romar-catalog-list--brand .romar-product-grid{ column-gap:24px; row-gap:47px; }
}
/* Khung ảnh card thương hiệu vuông 282x282 (Rectangle 31) */
.romar-catalog-list--brand .romar-product-imgwrap{ aspect-ratio:1/1; }
.romar-product-variant-volume{ display:none; }
.romar-brand-decor-mobile{
  display:none;
  position:absolute;
  width:75px;
  height:66px;
  pointer-events:none;
  z-index:0;
}

/* Trang thương hiệu mobile (Figma Romar 462:1731): chữ canh giữa, tên 30/39,
   loại 20/30 + "/3L" đậm, giá 20/26, badge 20px, không có "Chi tiết" */
@media (max-width:575.98px){
  .romar-catalog-list--brand > .container-xl{ padding-left:24px; padding-right:24px; }
  .romar-catalog-list--brand .romar-product-grid{ gap:72px; }
  .romar-catalog-list--brand .romar-product-imgwrap{ aspect-ratio:1/1; border-radius:6px; margin-bottom:15px; }
  .romar-catalog-list--brand .romar-product-badges{ top:12px; left:10px; right:8px; }
  .romar-catalog-list--brand .romar-badge-pill{ font-size:20px; padding:8px 6px; border-radius:6px; }
  .romar-catalog-list--brand .romar-badge-save{ font-size:20px; }
  .romar-catalog-list--brand .romar-product-info{ text-align:center; }
  /* Figma: tên tự giãn rộng hơn card (Marseille 360px > 354px) -> nới 12px mỗi bên để 1 dòng */
  .romar-catalog-list--brand .romar-product-name{ font-size:30px; line-height:39px; margin:0 -12px; }
  .romar-catalog-list--brand .romar-product-variant{ font-size:20px; line-height:30px; margin:0; }
  .romar-catalog-list--brand .romar-product-variant-volume{ display:inline; font-weight:600; }
  .romar-catalog-list--brand .romar-product-volume{ display:none; }
  .romar-catalog-list--brand .romar-product-price{ justify-content:center; margin:0; }
  .romar-catalog-list--brand .romar-product-price-line,
  .romar-catalog-list--brand .romar-product-price-old,
  .romar-catalog-list--brand .romar-product-price-value{ font-size:20px; line-height:26px; }
  .romar-catalog-list--brand .romar-product-price-old{ text-decoration-color:var(--romar-teal-dark); text-decoration-thickness:2.5px; }
  .romar-catalog-list--brand .romar-product-detail{ display:none; }
}

/* ==========================================================================
   Trang thương hiệu - đầu trang (Figma Romar mobile 462:1731, desktop 65:394)
   Ô "Chức năng" giờ nằm trong sheet lọc (taxonomy-product_brand.php).
   ========================================================================== */
@media (min-width:1440px){
  /* Vạch ngăn trước ô "Chức năng" (Line 3) khi ô này nằm trong sheet */
  body.tax-product_brand .romar-mobile-filter-sheet > .romar-filter-dropdown:nth-child(3)::before{
    content:"";
    position:absolute;
    top:50%;
    left:27px;
    transform:translateY(-50%);
    width:1px;
    height:46px;
    background:#005C6F;
    pointer-events:none;
  }
  body.tax-product_brand .romar-mobile-filter-sheet > [data-filter="sort"] .romar-sort-trigger{ margin-left:66px; }
}

@media (max-width:1439.98px){
  /* Tiêu đề 3 nhóm trong ngăn kéo lọc là nhãn tĩnh, ô "Chức năng" gộp vào */
  body.tax-product_brand .romar-mobile-filter-sheet .romar-filter-trigger{
    display:inline-flex;
    pointer-events:none;
    width:auto;
    height:auto;
    padding:0;
    border:0;
    border-radius:0;
    font-size:16px;
    font-weight:500;
    line-height:43px;
    color:var(--romar-teal-dark);
  }
  body.tax-product_brand .romar-mobile-filter-sheet .romar-sort-label{ display:none; }
  body.tax-product_brand .romar-mobile-filter-sheet .romar-sort-trigger::before{ content:"Chức năng"; }
  body.tax-product_brand .romar-mobile-filter-sheet [data-filter="danh-muc"] .romar-filter-chevron{ display:none; }
  body.tax-product_brand .romar-mobile-filter-sheet .romar-filter-chevron{ width:5px; height:5px; margin-left:4px; }
  body.tax-product_brand .romar-mobile-filter-sheet .romar-filter-dropdown + .romar-filter-dropdown{
    border-top:1px solid var(--romar-teal-dark);
    padding-top:9px;
    margin-top:14px;
    width:278px;
    max-width:100%;
  }
  body.tax-product_brand .romar-mobile-filter-sheet .romar-filter-panel{ margin-top:6px; background:transparent; text-align:left; }
  body.tax-product_brand .romar-mobile-filter-sheet .romar-filter-check{ font-size:12px; padding:8px 0; }
  body.tax-product_brand .romar-mobile-filter-sheet [data-filter="sort"] .romar-filter-check{ padding:6px 0; }
}

@media (max-width:575.98px){
  /* Tiêu đề 40px/700 tâm y=197 (cách header 56px), "8 sản phẩm" ngay dưới (tâm 227) */
  body.tax-product_brand .romar-catalog-hero{ padding-top:36px; }
  body.tax-product_brand .romar-catalog-hero .container-xl{ padding-left:24px; padding-right:24px; }
  body.tax-product_brand .romar-catalog-title{ font-size:40px; line-height:40px; margin:0; }
  /* Thanh đếm + nút lọc: nút tròn 28px đặc #005C6F ở mép phải (x=326..354),
     kẻ thuôn 345x1 ở đáy (y=295), cách card đầu 44px */
  body.tax-product_brand .romar-catalog-toolbar{
    display:block;
    position:relative;
    min-height:80px;
    margin:-2px 0 0;
    padding:0;
    border-bottom:0;
  }
  body.tax-product_brand .romar-catalog-toolbar::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    width:345px;
    max-width:100%;
    height:1px;
    transform:translateX(-50%);
    background:url("../images/banner-line.svg") center / 100% 100% no-repeat;
  }
  body.tax-product_brand .romar-catalog-count{ font-size:16px; line-height:24px; text-align:center; }
  body.tax-product_brand .romar-catalog-filters{ position:static; display:block; }
  body.tax-product_brand #romarMobileFilterBtn{
    position:absolute;
    top:27px;
    right:24px;
    z-index:3;
  }
  /* Ngăn kéo lọc 331px nền #E7FBFF bám mép dưới header (giống trang Tất cả sản phẩm) */
  body.tax-product_brand .romar-mobile-filter-sheet{
    text-align:left;            /* không kế thừa canh giữa của khối tiêu đề */
    position:absolute;
    top:-74px;                  /* lên mép dưới header: 36 padding + 40 tiêu đề - 2 */
    left:-24px;
    width:331px;
    max-width:calc(100vw - 32px);
    min-height:655px;
    border-radius:0;
    padding:50px 29px 24px 23px;
    gap:0;
    z-index:30;
    box-shadow:0 0 0 100vmax rgba(0,0,0,.28);
  }
  body.tax-product_brand .romar-header{ position:relative; z-index:40; }
  /* Bán nguyệt xanh lá (Figma 462:1991): 75x66, cách header 22px, cách mép phải 28px */
  body.tax-product_brand .romar-brand-decor-mobile{ display:block; top:22px; right:28px; }
  body.tax-product_brand .romar-catalog-list.romar-catalog-list--brand{ padding-top:44px; }   /* kẻ (y=295) -> ảnh card đầu (y=339) 44px */
}

/* ---------- Trang thương hiệu: chung mobile + riêng Destello (Figma 79:777 / 462:1770) ---------- */
@media (max-width:1439.98px){
  /* Figma mobile 3 trang thương hiệu không có thanh Destello/Romar/Sairo */
  body.tax-product_brand .romar-brandbar{ display:none; }
}
@media (max-width:575.98px){
  body.tax-product_brand .romar-catalog-title{ font-weight:700; }   /* 462:1733 / 462:1770: Bold 40 */
  body.term-destello .romar-catalog-list.romar-catalog-list--brand{ padding-top:48px; }   /* kẻ y=295 -> ảnh đầu y=343 */
}
@media (min-width:1440px){
  /* Destello desktop: ảnh cách kẻ 44px (y=491), "Chi tiết" canh GIỮA card, hàng sau cách "Chi tiết" 62px */
  body.term-destello .romar-catalog-list.romar-catalog-list--brand{ padding-top:44px; }
  body.term-destello .romar-catalog-list--brand .romar-product-grid{ row-gap:62px; }
  body.term-destello .romar-catalog-list--brand .romar-product-detail{ margin:auto auto 0; }
}

/* ==========================================================================
   Trang chủ mobile - đợt rà soát theo Figma 462:1596 (bản mới 2026-09-30)
   ========================================================================== */
@media (max-width:767.98px){
  /* "Chọn theo nhu cầu" (462:1613): ảnh hiển thị đúng kích thước gốc (Figma không
     phóng/co - phần hình 185x252 trùng ảnh gốc), canh giữa, viền trong suốt tràn
     ra ngoài khung 228px. Trước đây bị co cho vừa 228px nên chai nhỏ đi. */
  .romar-section-needs .romar-need-card-imgwrap{ justify-content:center; overflow:visible; }
  .romar-section-needs .romar-need-card img{
    max-width:none;
    max-height:none;
    width:auto;
    height:auto;
  }

  /* Khối giới thiệu (462:1650/1657/1652): độ rộng từng đoạn đúng Figma để ngắt
     dòng y hệt - 201 / 212 / 185px */
  .romar-section-about .col-md-4:nth-child(1) p{ max-width:201px !important; width:201px; }
  .romar-section-about .col-md-4:nth-child(2) p{ max-width:212px !important; width:212px; }
  .romar-section-about .col-md-4:nth-child(3) p{ max-width:185px !important; width:185px; }

  /* Banner Destello (462:1641): ảnh 694x463 lệch phải - cắt từ điểm 187px (không
     canh giữa) như Figma */
  .romar-destello-bg{ object-position:64% center; }

  /* "Chất lượng là trên hết" (462:1666): bán nguyệt phần nhìn thấy 95x71 tại
     x=25, cách mép dưới banner 10px (trước đây chờm lên banner) */
  body.home .romar-section-quality .romar-quality-decor{ top:-91px; left:25px; width:95px; height:auto; }

  /* Footer (I462:1679;11:824): "Bạn có thể huỷ..." cách ô email ~9px */
  .romar-footer .romar-newsletter + .romar-newsletter-note{ margin-top:9px; }
}

/* Card riêng trang chủ (repeater home_cards, Figma 267:2818-2826 / 462:1630):
   ảnh bối cảnh vuông phủ kín khung (FILL), không căn lề như ảnh sản phẩm. */
.romar-catalog-card--home .romar-product-imgwrap{ aspect-ratio:1 / 1; overflow:hidden; }
.romar-catalog-card--home .romar-product-img{
  width:100%;
  height:100%;
  margin:0;
  object-fit:cover;
  object-position:center;
}
@media (max-width:767.98px){
  /* Figma 462:1631: khung tên cao 36px (2 dòng 14px) -> hàng sao cách thêm 8px */
  .romar-catalog-card--home .romar-product-compact{ margin-top:8px; }
}

/* Trang thương hiệu mobile (Figma 462:1756 / 462:1760): dung tích góc phải trên
   ảnh - chữ 20px đậm #0E6678, cách mép phải 24px, mép trên 26px. */
.romar-badge-volume{ display:none; }
@media (max-width:767.98px){
  .romar-catalog-card .romar-badge-volume{
    display:block;
    position:absolute;
    top:26px;
    right:24px;
    z-index:2;
    font-size:20px;
    line-height:20px;
    font-weight:700;
    color:#0E6678;
  }
}

/* Mobile/tablet: cuộn bằng trang (html) như bình thường, KHÔNG cuộn trong <body>.
   Body cao 100% + tự cuộn làm phần cuối trang (dòng "© Romar Global Care" của
   footer) nằm dưới thanh công cụ Safari/Chrome trên điện thoại, không cuộn tới
   được. scrollbar-gutter (lý do chuyển scroll sang body) chỉ cần cho desktop. */
@media (max-width:991.98px){
  html{ height:auto; overflow:visible; }
  body{ height:auto; overflow-y:visible; overflow-x:clip; }
}

/* Neo khối danh mục (menu "Combo" -> /shop/#combo-cham-soc-vai): chừa chỗ header dính */
.romar-catalog-category{ scroll-margin-top:90px; }
@media (min-width:768px){ .romar-catalog-category{ scroll-margin-top:125px; } }

/* Bóng đổ dưới thanh header - Figma mọi trang ("thanh bar trên cùng" 1:896:
   0 6 8.4 -1 #000 25%; mobile "Rectangle 41" 462:1681: 0 4 4 #000 25%).
   Vẽ bằng ::after cắt chỉ lấy phần dưới header (clip-path), KHÔNG đặt z-index cho
   <header> để không tạo stacking context làm menu trượt mobile bị nội dung đè. */
.romar-header{ position:relative; }
.romar-header::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
  box-shadow:0 4px 4px rgba(0,0,0,.25);
  clip-path:inset(100% 0 -24px 0);
}
@media (min-width:992px){
  .romar-header::after{ box-shadow:0 6px 8.4px -1px rgba(0,0,0,.25); }
}

/* ==========================================================================
   "Chọn theo nhu cầu" (Figma 40:499-506 desktop / 462:1613-1614 mobile) - ảnh
   danh mục đã cắt bỏ nền trong suốt (assets/images/needs/, migration
   2026-09-30-needs-trimmed-icons): chân chai đặt sát đáy khung ảnh, tên danh
   mục cách chân chai 14px (trước đây tên đè lên chân chai 5-18px).
   Desktop: mép trái chai thẳng hàng tên danh mục (canh trái như Figma).
   Mobile: chai + chữ cùng canh giữa.
   ========================================================================== */
.romar-section-needs .romar-need-card-imgwrap{
  height:262px;
  margin-bottom:0;
  display:flex;
  align-items:flex-end;
  overflow:visible;
}
.romar-section-needs .romar-need-card img{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:262px;
  border-radius:0;
}
.romar-section-needs .romar-need-card h3{ margin-top:14px; }
@media (min-width:768px){
  .romar-section-needs .romar-need-card-imgwrap{ justify-content:flex-start; }
}
@media (max-width:767.98px){
  .romar-section-needs .romar-need-card-imgwrap{ height:252px; justify-content:center; }
  .romar-section-needs .romar-need-card img{ max-height:252px; }
}

/* Trang "Sản phẩm ưa chuộng": khoảng trắng banner -> khung ảnh card đầu
   (Figma desktop 105:1759: 551 -> 642 = 91px; mobile 462:1686: 454 -> 519 = 65px);
   mobile: tên/mô tả/giá canh giữa (Figma 462:1698 CENTER), desktop giữ canh trái. */
.romar-catalog-list--featured{ padding-top:91px; }
@media (max-width:767.98px){
  .romar-catalog-list--featured{ padding-top:65px; }
  .romar-catalog-list--featured .romar-product-info{ text-align:center; }
  .romar-catalog-list--featured .romar-product-price{ justify-content:center; flex-wrap:wrap; }
  .romar-catalog-list--featured .romar-product-price-line,
  .romar-catalog-list--featured .romar-product-price-group{ justify-content:center; flex-wrap:wrap; }
}

/* ==========================================================================
   "Chọn theo nhu cầu" desktop - khớp Figma 1:566 (20:487/20:488/20:498,
   40:499-506) theo đo pixel bản render (2026-10-02). Toạ độ = toạ độ trang
   1440px. Chỉ từ 1260px (khung 1224 đủ rộng cho 4 cột 273px).
   ========================================================================== */
@media (min-width:1260px){
  /* Tiêu đề: dòng 72px bắt đầu y 844.5 (trước 838) */
  .romar-section-needs{ padding-top:71.5px; }
  /* Mô tả: dòng 28px, tâm y 934 (trước 922) - nằm sát dưới tiêu đề như Figma */
  .romar-section-needs .romar-subheading{ line-height:28px; margin-top:3.5px; margin-bottom:19.5px; }
  /* Vòng cung teal (20:498): nét vẽ x 198-383, y 803-965 */
  .romar-needs-accent{ left:90px; top:-41.5px; }

  /* 4 cột cách nhau 273px (chữ tại x 222 / 495 / 768 / 1041); cột 4 co lại
     phần còn lại để hàng không bị cuộn ngang khi chỉ có 4 thẻ */
  .romar-section-needs .romar-needs-row .row > [class*="col-"]{ flex:0 0 273px; width:273px; }
  .romar-section-needs .romar-needs-row .row > [class*="col-"]:nth-child(4):last-child{ flex:1 1 0; width:auto; min-width:0; }
  .romar-section-needs .romar-needs-row .row > [class*="col-"]:nth-child(4):last-child p{ width:auto; }
  /* Figma: nhãn cột 4 (x 1041-1218) lấn vào khoảng trống cạnh mũi tên phải -
     kéo hàng thẻ rộng thêm 30px (mũi tên giữ nguyên chỗ) để "Chăm sóc cá nhân"
     không xuống dòng */
  .romar-section-needs .romar-arrow-right{ margin-left:-30px; }

  /* Nhãn: tên 21/38 (dòng y 1229.5-1267.5), mô tả 16/27 liền ngay dưới, không
     thêm khoảng cách - khung ảnh 262px kết thúc đúng đỉnh dòng tên */
  .romar-section-needs .romar-need-card h3{ margin:0; line-height:38px; }
  .romar-section-needs .romar-need-card p{ margin:0; line-height:27px; }

  /* Chai từng cột cao/thấp riêng như Figma (đáy chai y 1235 / 1215 / 1214 / 1224) */
  .romar-section-needs .romar-needs-row .row > :nth-child(1) .romar-need-card img{ transform:translate(3px, 11.5px); }
  .romar-section-needs .romar-needs-row .row > :nth-child(2) .romar-need-card img{ transform:translateY(-11.5px); }
  /* Cột 3-4 "Nước giặt chuyên sâu" (đổi 02/10/2026, chưa có trong Figma): cùng chai
     Romar với cột 1 -> nắp + đáy chai thẳng hàng chai Active ở "Giặt giũ" */
  .romar-section-needs .romar-needs-row .row > :nth-child(3) .romar-need-card img,
  .romar-section-needs .romar-needs-row .row > :nth-child(4) .romar-need-card img{ transform:translateY(11.5px); }

  /* Mũi tên: nét tại y 1125-1144; nút "Combo giá Hời" đỉnh y 1349 */
  .romar-section-needs .romar-arrow{ position:relative; top:4px; }
  .romar-section-needs .romar-needs-combo{ margin-top:54.5px; }
}

/* ==========================================================================
   Header desktop - vị trí menu/icon theo Figma mega menu 106:2046 (đo pixel
   bản render, 2026-10-02): chữ menu trái x 120 / 258 / 380, phải x 913 / 1017,
   icon tìm kiếm/tài khoản/giỏ x 1140 / 1210 / 1280; chữ y 51 (trước 46), icon
   y 40 (trước 37). Chỉ từ 1260px (khung header 1224 cố định).
   ========================================================================== */
@media (min-width:1260px){
  .romar-navbar .romar-menu .nav-link{ padding-left:0; padding-right:0; position:relative; top:5px; }
  .romar-navbar .romar-menu-left > .nav-item:nth-child(1){ width:138px; }   /* Sản phẩm -> Combo */
  .romar-navbar .romar-menu-left > .nav-item:nth-child(2){ width:122px; }   /* Combo -> Cẩm nang */
  .romar-navbar .romar-menu-left > .nav-item:nth-child(n+4){ margin-left:40px; }
  .romar-navbar .romar-menu-right > .nav-item:not(:last-child){ width:104px; }   /* Tin tức -> RGC Vietnam */
  .romar-navbar .romar-nav-right{ gap:28px; }
  .romar-navbar .romar-icons{ position:relative; top:3px; }
  .romar-menu-chevron{ top:0; }
}

/* ==========================================================================
   "Chi tiết" thẳng hàng trong mỗi hàng card (2026-10-02)
   - Sản phẩm ưa chuộng desktop (Figma 105:1759): giống Tất cả sản phẩm - tên 31
     + loại 24 + giá 21 sát nhau, "Chi tiết" 11px sau giá, SÁT PHẢI và cùng đáy
     cho cả hàng (hàng 1 y 1040, hàng 2 y 1501) dù mô tả 1 hay 2 dòng.
   - Tablet 576-1439px (không có frame Figma): Tất cả sản phẩm / thương hiệu
     theo cùng quy tắc desktop thay vì căn trái lệch cao thấp từng card.
   ========================================================================== */
@media (min-width:1440px){
  .romar-catalog-list--featured .romar-catalog-card{ display:flex; flex-direction:column; }
  .romar-catalog-list--featured .romar-product-imgwrap{ margin-bottom:12px; }
  .romar-catalog-list--featured .romar-product-info{ flex:1; display:flex; flex-direction:column; }
  .romar-catalog-list--featured .romar-product-name,
  .romar-catalog-list--featured .romar-product-variant{ margin-bottom:0; }
  .romar-catalog-list--featured .romar-product-price,
  .romar-catalog-list--featured .romar-product-price-line,
  .romar-catalog-list--featured .romar-product-volume{ line-height:21px; }
  .romar-catalog-list--featured .romar-product-price{ margin-bottom:11px; }
  .romar-catalog-list--featured .romar-product-detail{ display:block; width:fit-content; margin:auto 0 0 auto; line-height:24px; padding-bottom:0; }
}
@media (min-width:576px) and (max-width:1439.98px){
  .romar-catalog-list--all .romar-catalog-card,
  .romar-catalog-list--brand .romar-catalog-card{ display:flex; flex-direction:column; }
  .romar-catalog-list--all .romar-product-info,
  .romar-catalog-list--brand .romar-product-info{ flex:1; display:flex; flex-direction:column; }
  .romar-catalog-list--all .romar-product-detail,
  .romar-catalog-list--brand .romar-product-detail{ display:block; width:fit-content; margin:auto 0 0 auto; }
  body.term-destello .romar-catalog-list--brand .romar-product-detail{ margin:auto auto 0; }   /* Destello: canh giữa như desktop */
}
/* Figma (106:2014 / 105:1759 / 65:394): "Chi tiết" cách đầu tên đúng 87px khi mô
   tả 1 dòng (31+24+21 + 11), còn mô tả 2 dòng thì chỉ cách giá 4px (đầu tên ->
   "Chi tiết" 104px) - tức khoảng tối thiểu 87px, không phải khe cố định 11px.
   Tên dài (vd "Nước giặt hương Marseille") lấn sang khe 24px để giữ 1 dòng. */
@media (min-width:1440px){
  .romar-catalog-list--all .romar-product-info,
  .romar-catalog-list--brand .romar-product-info,
  .romar-catalog-list--featured .romar-product-info{ min-height:113px; }   /* 87 + "Chi tiết" cao 26 (chữ 24 + gạch chân 2) */
  .romar-catalog-list--all .romar-product-price,
  .romar-catalog-list--brand .romar-product-price,
  .romar-catalog-list--featured .romar-product-price{ margin-bottom:4px; }
  .romar-catalog-list--featured .romar-product-name{ margin-right:-24px; }
}
/* Tên danh mục "Chọn theo nhu cầu" luôn 1 dòng ở desktop (vd "Nước giặt chuyên sâu"
   cột 4 chỉ còn 207px, chữ lấn sang khoảng trống cạnh mũi tên phải như Figma) */
@media (min-width:1260px){
  .romar-section-needs .romar-need-card h3{ white-space:nowrap; }
}

/* SỬA (2026-10-15): banner trang chủ (layout "banner" của page_builder) - khi
   template in sẵn aspect-ratio theo kích thước ảnh (class .romar-banner--fit),
   bỏ chiều cao cố định 280/506/142px để khung khít đúng ảnh, không cắt trên/dưới. */
.romar-banner.romar-banner--fit{
  min-height:0;
  height:auto;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* Trang nội dung văn bản (page.php): chính sách, điều khoản... */
.romar-page{ padding:40px 0 64px; }
.romar-page-article{ max-width:880px; margin:0 auto; }
.romar-page-title{
  font-size:32px;
  font-weight:700;
  line-height:1.3;
  color:var(--romar-teal-dark);
  text-transform:uppercase;
  margin-bottom:12px;
}
.romar-page-content{ font-size:16px; line-height:1.7; color:#222; }
.romar-page-content h2{
  font-size:22px;
  font-weight:700;
  line-height:1.4;
  color:var(--romar-teal-dark);
  margin:32px 0 12px;
}
.romar-page-content p,
.romar-page-content ul,
.romar-page-content ol{ margin-bottom:16px; }
.romar-page-content ul,
.romar-page-content ol{ padding-left:24px; }
.romar-page-content li{ margin-bottom:8px; }
.romar-page-content strong{ color:var(--romar-teal); }
.romar-page-content a{ color:var(--romar-teal); text-decoration:underline; }
.romar-page-content .romar-page-meta{ color:var(--romar-teal-light); font-size:15px; }
@media (max-width:767.98px){
  .romar-page{ padding:24px 0 40px; }
  .romar-page-title{ font-size:24px; }
  .romar-page-content{ font-size:15px; }
  .romar-page-content h2{ font-size:19px; margin-top:24px; }
}