/* ============================================================================
   TECHCOMIN UI V5 — HARMONY DESIGN SYSTEM  (local, load LAST on every page)
   Mục tiêu: một hệ thống duy nhất cho toàn site — nhịp thị giác đều, card/chip
   đồng bộ, chữ dễ đọc, bảng như catalog cao cấp.
   KHÔNG đụng: slug, canonical, robots, sitemap, schema, giá, mapping ảnh,
   accounting 709, và KHÔNG đổi object-fit của ảnh (image-fit.css giữ quyền
   quyết định contain/cover để không cắt chữ trên ảnh).
   ========================================================================== */

:root{
  /* --- brand --- */
  --v5-green:#0E5B43;          /* xanh thương hiệu (anchor theo brief) */
  --v5-green-deep:#124336;     /* xanh đậm cho footer / band tối */
  --v5-green-ink:#17261F;
  --v5-green-soft:#E9F1EC;
  --v5-gold:#B88B4A;           /* vàng đồng trầm — chỉ dùng làm điểm nhấn */
  --v5-gold-soft:#F1E6D3;
  /* --- surfaces --- */
  --v5-bg:#FAF8F4;             /* nền trang ấm */
  --v5-surface:#FFFFFF;        /* card trắng */
  --v5-ivory:#F6F1E8;          /* card ngà ấm */
  --v5-line:#E8E3D9;           /* viền mảnh */
  --v5-line-strong:#D8D2C6;
  /* --- text --- */
  --v5-ink:#1A2A24;            /* tiêu đề */
  --v5-text:#3B4A43;           /* nội dung */
  --v5-muted:#6C7A73;          /* phụ */
  /* --- shape --- */
  --v5-r-card:20px;
  --v5-r-img:18px;
  --v5-r-sm:12px;
  --v5-r-pill:999px;
  --v5-sh:0 1px 2px rgba(15,42,33,.04), 0 10px 26px rgba(15,42,33,.055);
  --v5-sh-hover:0 2px 6px rgba(15,42,33,.07), 0 18px 44px rgba(15,42,33,.10);
  --v5-sh-band:0 24px 60px rgba(15,42,33,.10);
  /* --- CTA trên nền xanh đậm: token ngữ nghĩa (V5.1) --- */
  --cta-dark-bg:linear-gradient(135deg,#0E5B43 0%,#124336 100%);
  --cta-dark-bg-flat:#124336;
  --cta-dark-title:#FFFFFF;
  --cta-dark-body:rgba(255,255,255,.90);
  --cta-dark-link:#F1E6D3;
  --cta-dark-muted:rgba(255,255,255,.74);
  /* --- spacing scale 8/12/16/20/24/32/40/56/72 --- */
  --v5-1:8px; --v5-2:12px; --v5-3:16px; --v5-4:20px; --v5-5:24px;
  --v5-6:32px; --v5-7:40px; --v5-8:56px; --v5-9:72px;
  /* --- layout --- */
  --v5-container:1320px;
  --v5-gutter:clamp(16px,2.6vw,34px);
  --v5-sec:clamp(48px,5.4vw,84px);
  --v5-sec-tight:clamp(32px,3.6vw,56px);
  /* --- harmonise token cũ (mọi file legacy đọc các biến này) --- */
  --ui-primary:var(--v5-green);
  --ui-primary-deep:var(--v5-green-deep);
  --ui-primary-soft:var(--v5-green-soft);
  --ui-gold:var(--v5-gold);
  --ui-gold-soft:var(--v5-gold-soft);
  --ui-bg:var(--v5-bg);
  --ui-surface:var(--v5-surface);
  --ui-warm:var(--v5-ivory);
  --ui-heading:var(--v5-ink);
  --ui-text:var(--v5-text);
  --ui-muted:var(--v5-muted);
  --ui-border:var(--v5-line);
  --ui-container:var(--v5-container);
  --ui-radius:var(--v5-r-card);
  --ui-radius-img:var(--v5-r-img);
  --cat-container:var(--v5-container);
  --cat-gap:var(--v5-5);
  --cat-radius:var(--v5-r-card);
}

/* ============================ BASE ======================================= */
body.ui2,body.ui2.ui2{background:var(--v5-bg);color:var(--v5-text)}
body.ui2 h1,body.ui2 h2,body.ui2 h3,body.ui2 h4{
  color:var(--v5-ink);letter-spacing:-.012em}
body.ui2 h1{font-size:clamp(34px,4.1vw,52px);line-height:1.08}
body.ui2 h2{font-size:clamp(26px,3vw,38px);line-height:1.14}
body.ui2 h3{font-size:clamp(18px,1.5vw,22px);line-height:1.28}
body.ui2 h4{font-size:clamp(15px,1.2vw,17px);line-height:1.35}
body.ui2 p,body.ui2 li{color:var(--v5-text)}
body.ui2 p{line-height:1.68}
/* chữ nhỏ: nâng sàn đọc được (nhiều chỗ đang ~11px) */
body.ui2 .p,body.ui2 .pc-meta,body.ui2 .cp3-meta,body.ui2 .sc-meta,
body.ui2 .meta,body.ui2 .sub,body.ui2 .lead,body.ui2 .desc,body.ui2 .note,
body.ui2 small{font-size:clamp(12.5px,1.05vw,13.6px);line-height:1.6}
body.ui2 .lead,body.ui2 .sub{font-size:clamp(14.5px,1.2vw,16.5px);line-height:1.7}
body.ui2 .eyebrow{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--v5-gold);margin:0 0 var(--v5-2)}
body.ui2 a{color:var(--v5-green)}
body.ui2 a:hover{color:var(--v5-green-deep)}
body.ui2 ::selection{background:var(--v5-green-soft)}
body.ui2 :focus-visible{outline:2px solid var(--v5-green);outline-offset:2px;border-radius:6px}

/* ==================== CONTAINER & SECTION RHYTHM ========================= */
body.ui2 main,body.ui2 main.wrap,body.ui2 #main{
  max-width:var(--v5-container);margin-inline:auto;padding-inline:var(--v5-gutter)}
body.ui2 main>section,body.ui2 .sec,body.ui2 section[class*="sec"]{
  padding-block:var(--v5-sec)}
body.ui2 main>section:first-child{padding-top:clamp(24px,3vw,40px)}
body.ui2 .sec-tight,body.ui2 .cat-panel+.cat-panel{margin-top:var(--v5-7)}
body.ui2 .cat-panel{padding-block:var(--v5-sec-tight)}
body.ui2 .sec-head,body.ui2 .cat-sec-head{
  display:block;margin:0 0 var(--v5-6);max-width:76ch}
body.ui2 .cat-sec-head .eyebrow,body.ui2 .sec-head .eyebrow{margin-bottom:var(--v5-2)}
body.ui2 .cat-sec-head h2,body.ui2 .sec-head h2{margin:0 0 var(--v5-3)}
body.ui2 .cat-sec-head p,body.ui2 .sec-head p{
  margin:0;color:var(--v5-muted);max-width:70ch;font-size:clamp(13.5px,1.1vw,15px)}

/* ============================ BUTTONS =================================== */
body.ui2 .ui2-btn,body.ui2 .btn,body.ui2 .button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:0 22px;border-radius:var(--v5-r-pill);
  font:600 14px/1 var(--ui-sans);letter-spacing:.02em;text-decoration:none;
  border:1px solid transparent;transition:transform .15s ease,background .18s ease,color .18s ease,border-color .18s ease}
body.ui2 .ui2-btn.primary,body.ui2 .btn.primary,body.ui2 .ui2-btn.primary.small{
  background:var(--v5-green);color:#fff}
body.ui2 .ui2-btn.primary:hover,body.ui2 .btn.primary:hover{
  background:var(--v5-green-deep);transform:translateY(-1px)}
body.ui2 .ui2-btn.ghost,body.ui2 .btn.ghost{
  background:var(--v5-surface);color:var(--v5-green);border-color:var(--v5-line-strong)}
body.ui2 .ui2-btn.ghost:hover,body.ui2 .btn.ghost:hover{
  border-color:var(--v5-green);background:var(--v5-green-soft)}
body.ui2 .ui2-btn.small,body.ui2 .btn.small{min-height:38px;padding:0 16px;font-size:12.8px}
body.ui2 .ui2-btn.ghost.small{min-height:36px;padding:0 14px}
/* một bộ nhãn nút thống nhất (cop y do owner duyệt) */
body.ui2 .btn-text{font-weight:600}

/* ============================== CHIPS =================================== */
body.ui2 .cat-chip,body.ui2 .chip,body.ui2 .tag{
  display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 14px;
  border-radius:var(--v5-r-pill);border:1px solid var(--v5-line);
  background:var(--v5-surface);color:var(--v5-green);font:600 12.8px/1 var(--ui-sans);
  text-decoration:none;white-space:nowrap;transition:all .15s ease;cursor:pointer}
body.ui2 .cat-chip:hover,body.ui2 .chip:hover{border-color:var(--v5-green);background:var(--v5-green-soft)}
body.ui2 .cat-chip[aria-pressed="true"],body.ui2 .chip.is-active,body.ui2 .cat-chip.is-active{
  background:var(--v5-green);border-color:var(--v5-green);color:#fff}
body.ui2 .cat-chip.is-info,body.ui2 .chip.is-info{
  background:var(--v5-ivory);border-color:var(--v5-line);color:var(--v5-muted);font-weight:500}
body.ui2 .cat-chips{display:flex;flex-wrap:wrap;gap:var(--v5-1)}

/* ============================== CARDS =================================== */
body.ui2 .ui2-card,body.ui2 .product-card,body.ui2 .cp3-card,body.ui2 .project-card,
body.ui2 .article-card,body.ui2 .document-card,body.ui2 .info-card,body.ui2 .stack-card,
body.ui2 .v5-card{
  background:var(--v5-surface);border:1px solid var(--v5-line);border-radius:var(--v5-r-card);
  box-shadow:var(--v5-sh);overflow:hidden;transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease}
body.ui2 .ui2-card:hover,body.ui2 .product-card:hover,body.ui2 .cp3-card:hover,
body.ui2 .project-card:hover,body.ui2 .article-card:hover,body.ui2 .document-card:hover,
body.ui2 .v5-card:hover{box-shadow:var(--v5-sh-hover);transform:translateY(-2px);border-color:var(--v5-line-strong)}
/* card nội dung: mật độ đều nhau */
body.ui2 .pc-body,body.ui2 .cp3-body,body.ui2 .sc-body,body.ui2 .pc-body-inner{
  padding:var(--v5-4)}
body.ui2 .pc-code,body.ui2 .c-code,body.ui2 .sc-code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;
  color:var(--v5-green-deep);letter-spacing:.01em}
body.ui2 .pc-name,body.ui2 .cp3-name{color:var(--v5-ink);font-weight:600}
body.ui2 .pc-price,body.ui2 .sc-price{color:var(--v5-green-deep);font-weight:700}
body.ui2 .pc-price s,body.ui2 .pc-price del{color:var(--v5-muted)}
body.ui2 .pc-acts,body.ui2 .cp3-acts,body.ui2 .sc-acts{
  display:flex;gap:var(--v5-1);flex-wrap:wrap;align-items:center;margin-top:var(--v5-3)}
body.ui2 .pc-badge,body.ui2 .badge,body.ui2 .pill{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--v5-r-pill);
  background:var(--v5-green-soft);color:var(--v5-green);font:600 11.5px/1.4 var(--ui-sans)}
body.ui2 .pc-badge.is-gold,body.ui2 .badge.is-gold{background:var(--v5-gold-soft);color:#7C5A22}
body.ui2 .pc-badge.is-muted{background:var(--v5-ivory);color:var(--v5-muted)}

/* ======================== IMAGE FRAMES (KHÔNG đổi object-fit) ============
   Chỉ chỉnh khung (bo góc/viền/nền). Tỉ lệ ảnh giữ nguyên theo card system
   đã audit (product 4:5 · project/article 16:10 · cp3 1:1) để không phá
   quy tắc "không cắt chữ trên ảnh" của image-fit.css. */
body.ui2 .pc-thumb,body.ui2 .cp3-thumb,body.ui2 .sc-thumb,body.ui2 .thumb,
body.ui2 .ui2-card .thumb,body.ui2 .op-fig,body.ui2 .cat-thumb-real,body.ui2 .v5-frame{
  display:block;border-radius:var(--v5-r-img);overflow:hidden;
  background:linear-gradient(180deg,#FCFAF6,#F1EDE4);border:1px solid var(--v5-line)}
/* khung mới của V5 (chỉ dùng cho section mới) */
body.ui2 .v5-frame img{width:100%;height:100%;display:block}
body.ui2 .v5-frame.is-4x3{aspect-ratio:4/3}
body.ui2 .v5-frame.is-1x1{aspect-ratio:1/1}
body.ui2 .v5-frame.is-3x4{aspect-ratio:3/4}
body.ui2 .v5-frame.is-16x9{aspect-ratio:16/9}

/* ---- VÁ CHÍNH SÁCH ẢNH (V5): ảnh THẬT của chủ sở hữu /assets/real/*
   là ảnh chụp tấm mẫu CÓ IN MÃ HÀNG + "1220 x 2800 x 7.8" trên tấm.
   Trước đây policy chưa phủ nhóm này nên card 4:5 đang cắt chữ trên ảnh.
   Từ V5: luôn contain + nền trung tính, không zoom. ------------------------ */
body.ui2 img[src*="/assets/real/"]{
  object-fit:contain!important;object-position:center;background:var(--if-bg,#FAF8F3);
  transform:none!important}
body.ui2 .hero-thumb img[src*="/assets/real/"]{object-fit:contain!important}

/* ============================= TABLES =================================== */
body.ui2 .cat-table-wrap{border:1px solid var(--v5-line);border-radius:var(--v5-r-card);
  background:var(--v5-surface);box-shadow:var(--v5-sh);overflow:auto;max-height:78vh}
body.ui2 table.cat-table,body.ui2 table.table,body.ui2 .cat-panel table{
  width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
body.ui2 .cat-table thead th{
  position:sticky;top:0;z-index:3;background:var(--v5-ivory);color:var(--v5-green-ink);
  font:600 12.4px/1.3 var(--ui-sans);letter-spacing:.04em;text-transform:uppercase;
  padding:14px 14px;border-bottom:1px solid var(--v5-line-strong);text-align:left;white-space:nowrap}
body.ui2 .cat-table tbody td{padding:12px 14px;border-bottom:1px solid var(--v5-line);vertical-align:middle}
body.ui2 .cat-table tbody tr:nth-child(even){background:rgba(250,248,244,.55)}
body.ui2 .cat-table tbody tr:hover{background:var(--v5-green-soft)}
body.ui2 .cat-table tbody tr:last-child td{border-bottom:0}
body.ui2 .cat-table td.c-code{font-family:ui-monospace,Menlo,monospace;font-weight:700;color:var(--v5-green-deep)}
body.ui2 .cat-table td.c-{width:78px}
body.ui2 .cat-table .cat-thumb-real,body.ui2 .cat-table td picture img{
  width:62px;height:62px;border-radius:12px;overflow:hidden}

/* ============================ HEADER ==================================== */
/* hàng lọc có nhãn (module lọc 1 khối, không còn chip rời rạc) */
body.ui2 .cat-filter{background:var(--v5-surface);border:1px solid var(--v5-line);
  border-radius:var(--v5-r-card);box-shadow:var(--v5-sh);padding:var(--v5-5);position:sticky;top:92px}
body.ui2 .cat-filter-head{display:flex;align-items:center;justify-content:space-between;
  gap:var(--v5-2);margin-bottom:var(--v5-4);padding-bottom:var(--v5-3);
  border-bottom:1px solid var(--v5-line)}
body.ui2 .cat-filter-head>span{font:600 12px/1.3 var(--ui-sans);letter-spacing:.12em;
  text-transform:uppercase;color:var(--v5-muted)}
body.ui2 .cat-filter-toggle{display:none}
body.ui2 .v5-frow{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:var(--v5-4)}
body.ui2 .v5-flabel{font:600 11.5px/1.3 var(--ui-sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--v5-muted)}
body.ui2 .v5-fctl{min-width:0}
body.ui2 .v5-fctl .cat-search{display:flex;align-items:center;gap:8px;border:1px solid var(--v5-line);
  border-radius:var(--v5-r-pill);padding:0 12px;background:var(--v5-bg);min-height:42px}
body.ui2 .v5-fctl .cat-search input{border:0;background:none;width:100%;min-height:40px;outline:none}
body.ui2 .v5-fctl .cat-select{width:100%;min-height:42px;border-radius:var(--v5-r-pill);
  border:1px solid var(--v5-line);background:var(--v5-bg);padding:0 12px;font:500 13px var(--ui-sans);
  color:var(--v5-text)}
body.ui2 .cat-filter-foot{margin-top:var(--v5-3);padding-top:var(--v5-3);
  border-top:1px solid var(--v5-line);font-size:12.6px;color:var(--v5-muted)}
body.ui2 .cat-filter-foot b{color:var(--v5-green-deep)}
/* thanh điều hướng nhóm (Bề mặt / Màu sắc / Không gian) thành 3 hàng chip có nhãn */
body.ui2 .cat-hubnav-wrap,body.ui2 .cat-hubgroup{display:block}
body.ui2 .cat-hubnav-wrap{background:var(--v5-surface);border:1px solid var(--v5-line);
  border-radius:var(--v5-r-card);box-shadow:var(--v5-sh);padding:var(--v5-5);margin:var(--v5-6) 0;
  display:grid;gap:var(--v5-3)}
body.ui2 .cat-hubgroup{display:grid;grid-template-columns:132px minmax(0,1fr);gap:var(--v5-3);
  align-items:center}
body.ui2 .cat-hublabel{font:600 11.5px/1.3 var(--ui-sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--v5-muted)}
body.ui2 ul.cat-hubnav{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
body.ui2 ul.cat-hubnav li{margin:0}
body.ui2 ul.cat-hubnav a{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;
  border-radius:var(--v5-r-pill);border:1px solid var(--v5-line);background:var(--v5-bg);
  color:var(--v5-green);font:600 12.8px/1 var(--ui-sans);text-decoration:none;transition:all .15s ease}
body.ui2 ul.cat-hubnav a:hover{border-color:var(--v5-green);background:var(--v5-green-soft);
  color:var(--v5-green-deep)}
/* hero trang danh mục: cân lại 2 cột, ảnh phải không bị bí */
body.ui2 .cat-hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
  gap:clamp(20px,3vw,44px);align-items:center}
body.ui2 .cat-hero-media{border-radius:var(--v5-r-img);overflow:hidden;border:1px solid var(--v5-line);
  background:var(--if-bg,#FAF8F3);box-shadow:var(--v5-sh)}
body.ui2 .cat-hero-media img{width:100%;height:auto;display:block;max-height:420px;object-fit:contain}
body.ui2 .cat-hero-cap{display:block;padding:8px 12px;font-size:11.5px;color:var(--v5-muted);
  background:var(--v5-surface);border-top:1px solid var(--v5-line)}
/* lưới card sản phẩm: cao đều, CTA thẳng hàng */
body.ui2 .cat-grid.products,body.ui2 .cat-grid.articles,body.ui2 .cat-grid{
  display:grid;gap:var(--v5-4);grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}
body.ui2 .product-card,body.ui2 .article-card,body.ui2 .project-card,body.ui2 .stack-card{height:100%}
body.ui2 .product-card .pc-body,body.ui2 .article-card .pc-body{display:flex;flex-direction:column;
  gap:6px;flex:1}
body.ui2 .product-card .pc-acts,body.ui2 .article-card .pc-acts,body.ui2 .project-card .pc-acts{
  margin-top:auto;padding-top:var(--v5-3)}
body.ui2 .pc-price{font-size:14.6px}
body.ui2 .pc-price small{color:var(--v5-muted);font-weight:500}
/* card "chưa có ảnh" trong bảng: giữ vị trí Zalo CTA rõ ràng */
body.ui2 .sc-ph{color:var(--v5-muted);font-size:12px;text-align:center;padding:10px}
body.ui2 .ui2-btn.zalo-btn{background:#0068FF;color:#fff}
body.ui2 .ui2-btn.zalo-btn:hover{background:#0053CC}

body.ui2 header.ui2-head{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.1) blur(10px);border-bottom:1px solid var(--v5-line);
  min-height:74px;display:flex;align-items:center}
body.ui2 header.ui2-head .ui2-head-in{
  width:100%;max-width:var(--v5-container);margin-inline:auto;padding:0 var(--v5-gutter);
  display:flex;align-items:center;gap:var(--v5-5)}
body.ui2 .ui2-brand{display:flex;flex-direction:column;line-height:1.1;text-decoration:none}
body.ui2 .ui2-brand b{font:700 17px/1.1 var(--ui-sans);color:var(--v5-green-deep);letter-spacing:.02em}
body.ui2 .ui2-brand small{font-size:11px;color:var(--v5-muted);letter-spacing:.04em}
body.ui2 .ui2-nav{display:flex;align-items:center;gap:4px;margin-inline:auto}
body.ui2 .ui2-nav a{
  padding:9px 13px;border-radius:var(--v5-r-pill);font:600 13px/1 var(--ui-sans);
  color:var(--v5-text);text-decoration:none;transition:all .16s ease}
body.ui2 .ui2-nav a:hover{background:var(--v5-green-soft);color:var(--v5-green-deep)}
body.ui2 .ui2-nav a.on,body.ui2 .ui2-nav a[aria-current="page"]{
  background:var(--v5-green);color:#fff}
body.ui2 .ui2-tools{display:flex;align-items:center;gap:var(--v5-2)}
body.ui2 .ui2-search input{min-height:40px;border-radius:var(--v5-r-pill);border:1px solid var(--v5-line);
  padding:0 14px;background:var(--v5-bg)}
body.ui2 .ui2-tools .ui2-btn.primary{min-height:42px;padding:0 18px}

/* ============================ FOOTER ==================================== */
body.ui2 footer.ui2-foot{background:var(--v5-green-deep);color:rgba(255,255,255,.86);
  margin-top:var(--v5-9);padding:var(--v5-9) 0 0}
body.ui2 .ui2-foot-in{
  max-width:var(--v5-container);margin-inline:auto;padding:0 var(--v5-gutter) var(--v5-8);
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:var(--v5-6)}
body.ui2 .ui2-foot h4,body.ui2 .ui2-foot h5{
  color:#fff;font:600 13px/1.3 var(--ui-sans);letter-spacing:.1em;text-transform:uppercase;
  margin:0 0 var(--v5-4)}
body.ui2 .ui2-foot h4{font-size:15px;letter-spacing:.04em}
body.ui2 .ui2-foot p{color:rgba(255,255,255,.84);font-size:13.5px;line-height:1.75;margin:0 0 var(--v5-3)}
body.ui2 .ui2-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
body.ui2 .ui2-foot li a{color:rgba(255,255,255,.88);text-decoration:none;font-size:13.5px;line-height:1.5}
body.ui2 .ui2-foot li a:hover{color:var(--v5-gold-soft);text-decoration:underline}
body.ui2 .ui2-foot a{color:rgba(255,255,255,.9)}
body.ui2 .ui2-foot-end{
  border-top:1px solid rgba(255,255,255,.18);padding:var(--v5-5) var(--v5-gutter);
  max-width:var(--v5-container);margin-inline:auto;color:rgba(255,255,255,.7);
  font-size:12.6px;line-height:1.7}

/* ====================== V5 SECTION PATTERNS ============================= */
/* ---- V5.1: CTA trên nền xanh đậm — chống mất chữ (owner note 3/7/10) ----
   Trước V5.1, .cat-cta-band lấy nền xanh đậm nhưng chữ vẫn theo màu xanh
   (kế thừa) nên tương phản chỉ 1.19–1.38 → chữ gần như biến mất. */
body.ui2 .cat-cta-band,body.ui2 .ui2-dark,body.ui2 .cta-band,body.ui2 .band-dark{
  background:var(--cta-dark-bg)!important;color:var(--cta-dark-body)!important}
body.ui2 .cat-cta-band h1,body.ui2 .cat-cta-band h2,body.ui2 .cat-cta-band h3,
body.ui2 .cat-cta-band h4,body.ui2 .ui2-dark h1,body.ui2 .ui2-dark h2,
body.ui2 .ui2-dark h3,body.ui2 .ui2-dark h4{color:var(--cta-dark-title)!important}
body.ui2 .cat-cta-band p,body.ui2 .cat-cta-band li,body.ui2 .cat-cta-band span,
body.ui2 .cat-cta-band div,body.ui2 .ui2-dark p,body.ui2 .ui2-dark span{
  color:var(--cta-dark-body)!important}
body.ui2 .cat-cta-band a:not(.ui2-btn):not(.btn),body.ui2 .ui2-dark a:not(.ui2-btn):not(.btn){
  color:var(--cta-dark-link)!important}
body.ui2 .cat-cta-band .ui2-btn.primary,body.ui2 .ui2-dark .ui2-btn.primary{
  background:var(--v5-gold)!important;color:#241A08!important;border-color:transparent!important}
body.ui2 .cat-cta-band .ui2-btn.primary:hover{background:#C99A56!important}
body.ui2 .cat-cta-band .ui2-btn.ghost,body.ui2 .ui2-dark .ui2-btn.ghost{
  background:rgba(255,255,255,.06)!important;color:#FFFFFF!important;
  border-color:rgba(255,255,255,.55)!important}
body.ui2 .cat-cta-band .ui2-btn.ghost:hover,body.ui2 .ui2-dark .ui2-btn.ghost:hover{
  background:rgba(255,255,255,.16)!important;border-color:#fff!important}
/* nút không có modifier (.ui2-btn trần) trong band tối: vẫn phải sáng */
body.ui2 .cat-cta-band .ui2-btn:not(.primary):not(.ghost),
body.ui2 .ui2-dark .ui2-btn:not(.primary):not(.ghost){
  color:#FFFFFF!important;background:rgba(255,255,255,.10)!important;
  border-color:rgba(255,255,255,.55)!important}
/* dải CTA gọn, không tạo khung trắng rỗng lớn (owner note 10) */
body.ui2 .cat-cta-band{padding:clamp(32px,3.4vw,56px)!important;border-radius:calc(var(--v5-r-card) + 4px);
  max-width:var(--v5-container);margin-inline:auto}
body.ui2 main>section:has(.cat-cta-band){padding-block:clamp(32px,3.6vw,56px)!important}
/* ---- V5.1: nhịp section không cộng dồn padding (owner note 8) ---- */
body.ui2 main>section,body.ui2 main>.sec,body.ui2 main>.v5-cta-wrap{margin-block:0!important}
body.ui2 main>section+section,body.ui2 main>section+.sec,body.ui2 .sec+section,
body.ui2 .sec+.sec{padding-block-start:clamp(28px,2.8vw,48px)}
body.ui2 main>section:has(+ section),body.ui2 .sec:has(+ section),
body.ui2 .sec:has(+ .sec),body.ui2 main>section:has(+ .sec){
  padding-block-end:clamp(24px,2.4vw,40px)}
body.ui2 main>section:has(+ .v5-cta-wrap),body.ui2 main>section:has(+ .cat-cta-band){
  padding-block-end:clamp(20px,2.2vw,36px)}
/* ---- V5.1: sidebar lọc không tràn (owner note 6) ---- */
body.ui2 .cat-layout{grid-template-columns:272px minmax(0,1fr);gap:var(--v5-6);align-items:start}
body.ui2 .cat-side,body.ui2 aside.sidebar{width:auto;min-width:0}
body.ui2 .cat-filter,body.ui2 .cat-filter-body,body.ui2 .v5-frow,body.ui2 .v5-fctl,
body.ui2 .cat-chips,body.ui2 .cat-filter-foot{min-width:0;max-width:100%;box-sizing:border-box}
body.ui2 .cat-chip{white-space:normal;text-align:left;line-height:1.35;padding:7px 13px}
body.ui2 .cat-chip.is-info{white-space:normal;padding:9px 12px;border-radius:14px;
  display:block;width:100%;background:var(--v5-ivory);color:var(--v5-muted)}
body.ui2 .v5-fctl .cat-search,body.ui2 .v5-fctl .cat-select,
body.ui2 .cat-search,body.ui2 .cat-select{width:100%;min-width:0;box-sizing:border-box;max-width:100%}
body.ui2 .cat-search input{min-width:0}
body.ui2 .cat-filter-head{flex-wrap:wrap}
/* ---- V5.1: ô tìm kiếm header (owner note 1) ---- */
/* ---- V5.1: lưới bài kiến thức 3 cột + khung 16:10 (owner note 4/11) ---- */
body.ui2 .cat-grid.articles{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--v5-5)}
@media (min-width:1280px){body.ui2 .cat-grid.articles{grid-template-columns:repeat(3,minmax(0,1fr))}}
body.ui2 .article-card .pc-thumb{aspect-ratio:16/10}
body.ui2 .article-card .pc-thumb img.media-cover{width:100%;height:100%;object-fit:cover;aspect-ratio:auto}
body.ui2 .cat-feature .cf-media{aspect-ratio:16/10}
body.ui2 .cat-feature .cf-media img.media-cover{width:100%;height:100%;object-fit:cover}
body.ui2 .article-card .pc-name{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden}
body.ui2 .article-card .pc-meta:not(.pc-code){display:-webkit-box;-webkit-line-clamp:3;
  -webkit-box-orient:vertical;overflow:hidden}
body.ui2 header.ui2-head .ui2-search{flex:0 0 auto;width:clamp(232px,20vw,320px);min-height:44px;
  position:relative;
  display:flex;align-items:center;gap:8px;padding:0 8px 0 14px;border-radius:var(--v5-r-pill);
  background:var(--v5-bg);border:1px solid var(--v5-line);transition:border-color .16s ease,box-shadow .16s ease}
body.ui2 header.ui2-head .ui2-search:focus-within{
  border-color:var(--v5-green);box-shadow:0 0 0 3px rgba(14,91,67,.14);background:#fff}
body.ui2 header.ui2-head .ui2-search input{flex:1 1 auto;min-width:0;border:0;background:none;
  font:500 14px/1.4 var(--ui-sans);color:var(--v5-ink);padding:0}
body.ui2 header.ui2-head .ui2-search input::placeholder{color:#8A968F;font-weight:400}
body.ui2 header.ui2-head .ui2-search button{flex:0 0 auto;width:32px;height:32px;border:0;border-radius:50%;
  background:var(--v5-green);color:#fff;cursor:pointer;font-size:15px;line-height:1}
body.ui2 header.ui2-head .ui2-search button:hover{background:var(--v5-green-deep)}
/* dropdown gợi ý của site (không phụ thuộc autocomplete trình duyệt) */
body.ui2 .v5-suggest{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:80;
  background:#fff;border:1px solid var(--v5-line);border-radius:16px;box-shadow:var(--v5-sh-hover);
  padding:6px;max-height:60vh;overflow:auto;display:none}
body.ui2 .v5-suggest.open{display:block}
body.ui2 .v5-sug{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;
  padding:9px 10px;border-radius:12px;text-decoration:none;color:var(--v5-ink)}
body.ui2 .v5-sug:hover,body.ui2 .v5-sug.active{background:var(--v5-green-soft)}
body.ui2 .v5-sug .k{font:600 10.5px/1.5 var(--ui-sans);letter-spacing:.08em;text-transform:uppercase;
  color:var(--v5-green);background:var(--v5-green-soft);padding:3px 8px;border-radius:999px;white-space:nowrap}
body.ui2 .v5-sug .t{font-size:13.6px;font-weight:600}
body.ui2 .v5-sug .n{display:block;font-size:11.8px;color:var(--v5-muted);font-weight:400;margin-top:2px}
body.ui2 .v5-suggest .none{padding:10px;font-size:13px;color:var(--v5-muted)}
body.ui2 .ui2-tools{position:relative}
/* V5.1 — header tự cân theo bề ngang: không để nav/search/CTA tràn ra ngoài (note 1/12) */
body.ui2 .ui2-head-in>*{min-width:0}
body.ui2 .ui2-tools{min-width:0;flex:0 1 auto}
body.ui2 header.ui2-head .ui2-search{flex:0 1 auto;min-width:176px;max-width:320px}
body.ui2 .ui2-nav{flex:0 0 auto;gap:2px}
@media (min-width:1500px){
  body.ui2 header.ui2-head .ui2-search{flex:0 0 auto;width:clamp(240px,16vw,264px)}
  body.ui2 .ui2-nav a{padding:8px 9px}
}
@media (max-width:1500px){
  body.ui2 header.ui2-head .ui2-search{width:clamp(196px,15vw,268px)}
  body.ui2 .ui2-nav a{padding:8px 9px;font-size:12.7px}
}
@media (max-width:1320px){
  body.ui2 header.ui2-head .ui2-search{width:clamp(184px,14vw,236px)}
  body.ui2 .ui2-nav a{padding:8px 8px;font-size:12.4px}
  body.ui2 .ui2-brand small{display:none}
}
@media (max-width:1120px){
  body.ui2 header.ui2-head .ui2-search{width:clamp(170px,13vw,210px)}
  body.ui2 .ui2-nav a{padding:8px 8px}
}
body.ui2 .v5-band{background:var(--v5-ivory);border-block:1px solid var(--v5-line)}
body.ui2 .v5-band-in{max-width:var(--v5-container);margin-inline:auto;padding:var(--v5-8) var(--v5-gutter)}
body.ui2 .v5-grid{display:grid;gap:var(--v5-4)}
body.ui2 .v5-grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
body.ui2 .v5-grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
body.ui2 .v5-grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
body.ui2 .v5-grid.c5{grid-template-columns:repeat(5,minmax(0,1fr))}
body.ui2 .v5-card{display:flex;flex-direction:column}
body.ui2 .v5-card .v5-card-body{padding:var(--v5-4);display:flex;flex-direction:column;gap:var(--v5-2);flex:1}
body.ui2 .v5-card h3{margin:0}
body.ui2 .v5-card p{margin:0;color:var(--v5-muted);font-size:13.6px}
body.ui2 .v5-card .v5-card-cta{margin-top:auto;display:flex;gap:var(--v5-2);flex-wrap:wrap}
/* dải fact 4 ô */
body.ui2 .v5-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--v5-3)}
/* dải fact có sẵn của trang chủ (.ui2-facts) → 4 card đều nhau */
body.ui2 .ui2-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--v5-3);border:0;background:none}
body.ui2 .ui2-facts>div{background:var(--v5-surface);border:1px solid var(--v5-line);
  border-radius:var(--v5-r-card);padding:var(--v5-5);box-shadow:var(--v5-sh);min-width:0}
body.ui2 .ui2-facts>div span{display:block;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--v5-muted);font-weight:600;margin-bottom:6px}
body.ui2 .ui2-facts>div b{display:block;font:600 clamp(17px,1.6vw,21px)/1.3 var(--ui-serif);
  color:var(--v5-ink)}
/* khối bọc dải CTA */
body.ui2 .v5-cta-wrap{padding-block:var(--v5-8);border:0;background:none}
body.ui2 .v5-cta-wrap .v5-cta-band{margin:0}
body.ui2 .v5-fact{background:var(--v5-surface);border:1px solid var(--v5-line);border-radius:var(--v5-r-card);
  padding:var(--v5-5);box-shadow:var(--v5-sh)}
body.ui2 .v5-fact span{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--v5-muted);font-weight:600;margin-bottom:6px}
body.ui2 .v5-fact b{font:600 clamp(17px,1.6vw,21px)/1.3 var(--ui-serif);color:var(--v5-ink);display:block}
body.ui2 .v5-fact small{display:block;margin-top:6px;color:var(--v5-muted);font-size:12.6px}
/* dải CTA cuối trang */
body.ui2 .v5-cta-band{
  background:linear-gradient(135deg,var(--v5-green) 0%,var(--v5-green-deep) 100%);
  border-radius:calc(var(--v5-r-card) + 6px);color:#fff;padding:clamp(28px,3.6vw,48px);
  box-shadow:var(--v5-sh-band);display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:var(--v5-5)}
body.ui2 .v5-cta-band h2{color:#fff;margin:0 0 8px;font-size:clamp(22px,2.4vw,30px)}
body.ui2 .v5-cta-band p{color:rgba(255,255,255,.86);margin:0}
body.ui2 .v5-cta-band .v5-cta-acts{display:flex;gap:var(--v5-2);flex-wrap:wrap}
body.ui2 .v5-cta-band .ui2-btn.primary{background:var(--v5-gold);color:#241a08}
body.ui2 .v5-cta-band .ui2-btn.primary:hover{background:#C99A56}
body.ui2 .v5-cta-band .ui2-btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
body.ui2 .v5-cta-band .ui2-btn.ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
/* tone swatch card (trang màu) */
body.ui2 .v5-tone{background:var(--v5-surface);border:1px solid var(--v5-line);
  border-radius:var(--v5-r-card);overflow:hidden;box-shadow:var(--v5-sh);text-decoration:none;display:block}
body.ui2 .v5-tone .v5-tone-chip{height:74px;display:block}
body.ui2 .v5-tone .v5-tone-body{padding:var(--v5-3) var(--v5-4) var(--v5-4)}
body.ui2 .v5-tone b{display:block;color:var(--v5-ink);font-size:14.5px;margin-bottom:4px}
body.ui2 .v5-tone small{color:var(--v5-muted);font-size:12.4px}
/* dải tông tham khảo trong card mẫu màu */
body.ui2 .v5-tone-swatch{display:flex;height:14px;margin:0 var(--v5-4) var(--v5-3)}
body.ui2 .v5-tone-swatch i{flex:1;display:block}
body.ui2 .v5-tone-swatch i:first-child{border-radius:var(--v5-r-pill) 0 0 var(--v5-r-pill)}
body.ui2 .v5-tone-swatch i:last-child{border-radius:0 var(--v5-r-pill) var(--v5-r-pill) 0}

/* ---------------- /mau/ — hero cảm hứng + collage ảnh thật -------------- */
body.ui2 .v5-mau-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(20px,3vw,44px);align-items:center;padding-block:clamp(20px,3vw,36px) 0}
body.ui2 .v5-mau-hero .page-h1{margin:0 0 var(--v5-3)}
body.ui2 .v5-mau-hero .lead{margin:0 0 var(--v5-5);color:var(--v5-text)}
body.ui2 .v5-hero-acts{display:flex;gap:var(--v5-2);flex-wrap:wrap;margin-bottom:var(--v5-4)}
body.ui2 .v5-hero-note{margin:0;font-size:12.8px;color:var(--v5-muted);max-width:52ch}
body.ui2 .v5-hero-collage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--v5-2)}
body.ui2 .v5-hero-collage .v5-tile{margin:0;border-radius:var(--v5-r-img);overflow:hidden;
  border:1px solid var(--v5-line);background:var(--if-bg,#FAF8F3);box-shadow:var(--v5-sh)}
body.ui2 .v5-hero-collage .v5-tile:nth-child(2){transform:translateY(14px)}
body.ui2 .v5-hero-collage img{width:100%;height:auto;display:block;aspect-ratio:3/4;object-fit:contain}
body.ui2 .v5-hero-collage figcaption{font-size:11.5px;color:var(--v5-muted);padding:8px 10px;
  border-top:1px solid var(--v5-line);background:var(--v5-surface)}
/* card không gian (text-only, gọn) */
body.ui2 .v5-card.v5-space{text-decoration:none;color:inherit;background:var(--v5-surface)}
body.ui2 .v5-card.v5-space .v5-card-body{gap:var(--v5-2)}
body.ui2 .v5-space .v5-card-cta .ui2-btn{pointer-events:none}
body.ui2 .v5-more{margin:var(--v5-6) 0 0}
@media (max-width:900px){
  body.ui2 .v5-mau-hero{grid-template-columns:1fr}
  body.ui2 .v5-hero-collage .v5-tile:nth-child(2){transform:none}
}

/* =========================== RESPONSIVE ================================= */
/* ===================== V6 — FIX THEO NOTE OWNER (2026-10-13) ============= */
/* [3a] /lien-he/: ảnh poster hiển thị ĐỦ, không còn dải trống hai bên */
body.ui2 .cat-hero-media{aspect-ratio:1/1;height:auto;max-height:none}
body.ui2 .cat-hero-media img{width:100%;height:auto;max-height:none;aspect-ratio:auto;
  object-fit:contain!important;display:block}
body.ui2 .contact-hero .cat-hero-media,body.ui2 #mau-bao-gia .cat-hero-media,
body.ui2 .cat-hero .cat-hero-media:has(img){border-radius:var(--v5-r-img)}
body.ui2 .cat-hero .cat-hero-media img,body.ui2 .info-card img.media-poster{
  aspect-ratio:1/1;width:100%;height:auto;object-fit:contain!important;background:var(--if-bg,#FAF8F3)}
body.ui2 .info-card .thumb,body.ui2 .info-card picture{aspect-ratio:1/1;width:100%}
body.ui2 .info-card img{width:100%;height:auto;object-fit:contain!important;background:var(--if-bg,#FAF8F3)}
/* [3b] header desktop: brand 1 dòng, không wrap logo/CTA */
body.ui2 .ui2-brand{white-space:nowrap}
@media (max-width:1500px){body.ui2 .ui2-brand small{display:none}}
body.ui2 .ui2-tools .ui2-btn{white-space:nowrap}
/* [4] menu mobile: panel gọn, item đủ lớn, không che nội dung vô lý */
@media (max-width:860px){
  body.ui2 .ui2-nav.open{position:absolute;inset:64px 12px auto 12px;border-radius:16px;
    box-shadow:0 24px 60px rgba(15,42,33,.18);padding:10px;gap:0;max-height:72vh;overflow:auto;
    background:#fff;border:1px solid var(--v5-line)}
  body.ui2 .ui2-nav.open a{display:flex;align-items:center;min-height:46px;padding:10px 14px;
    border-radius:12px;font-size:14px;border-bottom:1px solid rgba(232,227,217,.7)}
  body.ui2 .ui2-nav.open a:last-child{border-bottom:0}
  body.ui2 .ui2-nav.open a.on{background:var(--v5-green-soft);color:var(--v5-green-deep)}
  body.ui2 .ui2-burger{width:44px;height:44px;border-radius:12px;border:1px solid var(--v5-line);
    background:#fff;line-height:1;font-size:18px}
  body.ui2 .ui2-tools .ui2-btn.primary{min-height:40px;padding:0 14px;font-size:12.6px}
  body.ui2 .ui2-brand b{font-size:16px}
}
/* [5] product card mobile: tiêu đề 2 dòng, meta rõ ràng, giá & CTA gọn */
body.ui2 .product-card .pc-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.32}
body.ui2 .pc-fit,body.ui2 .v6-fit{font-size:12.8px;color:var(--v5-muted);margin:2px 0 6px;line-height:1.5}
@media (max-width:720px){
  body.ui2 .product-card .pc-body{padding:12px 12px 14px;gap:5px}
  body.ui2 .product-card .pc-code{font-size:11.4px;letter-spacing:.06em}
  body.ui2 .product-card .pc-name{font-size:15px}
  body.ui2 .product-card .pc-meta{font-size:12.4px;line-height:1.45}
  body.ui2 .product-card .pc-price{font-size:13.6px;white-space:nowrap}
  body.ui2 .product-card .pc-acts{margin-top:10px}
  body.ui2 .product-card .pc-acts .ui2-btn{flex:1 1 auto}
  body.ui2 .cat-grid.products{grid-template-columns:1fr;gap:14px}
  /* [6] facts mobile: 2×2, không bóp chữ dọc */
  body.ui2 .ui2-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.ui2 .ui2-facts>div{padding:14px 14px 16px}
  body.ui2 .ui2-facts>div b{font-size:17px;line-height:1.3;writing-mode:horizontal-tb;
    word-break:normal;overflow-wrap:anywhere}
  body.ui2 .ui2-facts>div span{font-size:10.6px}
  /* [7] touch target & không tràn */
  body.ui2 .cat-chip{min-height:38px}
  body.ui2 .ui2-btn{white-space:nowrap}
}
@media (max-width:400px){
  body.ui2 .ui2-facts>div b{font-size:16px}
  body.ui2 .ui2-tools .ui2-search{min-width:132px}
}
@media (max-width:1180px){
  body.ui2 .ui2-foot-in{grid-template-columns:repeat(3,minmax(0,1fr))}
  body.ui2 .v5-grid.c5{grid-template-columns:repeat(3,minmax(0,1fr))}
  body.ui2 .v5-grid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1023px){
  body.ui2 .v5-grid.c3{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.ui2 .v5-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.ui2 .cat-table-wrap{max-height:none}
}
@media (max-width:860px){
  body.ui2 header.ui2-head{min-height:64px}
  body.ui2 .ui2-nav{display:none}
  body.ui2 .ui2-nav.open{display:flex;flex-direction:column;position:absolute;inset:64px 0 auto 0;
    background:#fff;padding:var(--v5-4);gap:2px;box-shadow:var(--v5-sh);border-bottom:1px solid var(--v5-line)}
  body.ui2 .v5-cta-band{border-radius:var(--v5-r-card)}
}
@media (max-width:720px){
  body.ui2 .v5-grid.c2,body.ui2 .v5-grid.c3,body.ui2 .v5-grid.c4,body.ui2 .v5-grid.c5,
  body.ui2 .v5-facts{grid-template-columns:1fr}
  body.ui2 .ui2-foot-in{grid-template-columns:1fr;gap:var(--v5-5)}
  body.ui2 main>section,body.ui2 .sec{padding-block:var(--v5-sec-tight)}
  /* V5.1 — mobile: hero và khối kế tiếp sát nhau, không để khoảng trắng lớn (note 5) */
  body.ui2 .cat-hero,body.ui2 .ui2-hero,body.ui2 .v5-mau-hero{padding-block-start:16px!important;
    padding-block-end:16px!important;margin-bottom:0!important}
  body.ui2 main>section+section,body.ui2 main>section+.sec,body.ui2 .sec+section,
  body.ui2 .sec+.sec{padding-block-start:20px}
  body.ui2 main>section:has(+ section),body.ui2 .sec:has(+ section),
  body.ui2 .sec:has(+ .sec){padding-block-end:16px}
  body.ui2 .cat-cta-band{padding:24px 18px!important;border-radius:var(--v5-r-card)}
  body.ui2 main>section:has(.cat-cta-band){padding-block:24px!important}
  /* bảng: cho phép cuộn ngang gọn gàng thay vì vỡ cột */
  body.ui2 .cat-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  body.ui2 table.cat-table{min-width:560px}
}
@media (prefers-reduced-motion:reduce){
  body.ui2 *{transition:none!important;animation:none!important}
  body.ui2 .ui2-card:hover,body.ui2 .product-card:hover,body.ui2 .v5-card:hover{transform:none}
}

/* ================= in ấn / tiện ích nhỏ ================================ */
body.ui2 .v5-nowrap{white-space:nowrap}
body.ui2 .v5-equal-acts .ui2-btn,body.ui2 .v5-equal-acts .btn{flex:1 1 auto}