/* =========================================================================
   TKT PUMPS · CATALOG PATTERNS · v2.1
   Pattern B2B rút ra từ trang Hàng kho · Bơm thùng phuy (DS 2.0 mục 18).
   Load sau tokens.css → base.css → components.css.
   Đặt tên theo luật repo: tránh -card/-pill/-chip/-badge → dùng -tile/-panel/-frame/-block.
   Chỉ dùng var(--*) từ tokens.css.
   ========================================================================= */

/* ---------- Hero chiến dịch (nền xanh gradient + ô tìm mã kính tối) ---------- */
.hero-campaign { position: relative; overflow: hidden; color: var(--fg-on-dark-1);
  background: linear-gradient(160deg, var(--tkt-blue-600) 0%, var(--tkt-blue-800) 55%, var(--tkt-blue-900) 100%); }
.hero-campaign::after { content: ""; position: absolute; right: -160px; top: -220px; width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle, rgba(239,125,0,.28), rgba(239,125,0,0) 70%); pointer-events: none; }
.hero-campaign__inner { position: relative; z-index: 1; max-width: var(--content-max); margin: 0 auto;
  padding: var(--s-6) var(--s-6) var(--s-7); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: var(--s-7); align-items: center; }
.hero-campaign__title { margin: 0; font: var(--w-bold) clamp(36px, 5vw, 64px)/1.06 var(--font-display); letter-spacing: var(--ls-display); text-wrap: balance; }
.hero-campaign__title em { font-style: normal; color: var(--tkt-orange-300); }
.hero-campaign__lede { margin: 0; max-width: 500px; font-size: 17px; line-height: 1.6; color: var(--fg-on-dark-2); }
.hero-search { display: flex; align-items: center; gap: var(--s-2); max-width: 540px; padding: 6px 6px 6px var(--s-5);
  border-radius: var(--r-pill); background: var(--glass-dark-fill); border: 1px solid var(--glass-dark-stroke);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); }
.hero-search input { flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; color: var(--fg-on-dark-1); font-size: 15px; outline: none; }
.hero-search button { flex: none; height: 46px; padding: 0 var(--s-6); border: 0; border-radius: var(--r-pill);
  background: var(--tkt-orange-500); color: var(--fg-1); font-weight: var(--w-bold); transition: background var(--dur-2) var(--ease-out); }
.hero-search button:hover { background: var(--tkt-orange-300); }
.hero-note-block { display: flex; align-items: flex-start; gap: var(--s-3); max-width: 540px; padding: 14px var(--s-4);
  border-radius: var(--r-16); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); font-size: 13px; line-height: 1.55; color: var(--fg-on-dark-2); }
.hero-note-block__tag { flex: none; padding: 4px 10px; border-radius: var(--r-pill); background: var(--tkt-orange-500); color: var(--fg-1);
  font-size: 11px; font-weight: var(--w-bold); letter-spacing: .08em; }
/* Thẻ trưng bày ảnh sản phẩm — JS set --rx/--ry (≤ var(--tilt-max)) theo con trỏ */
.showcase-frame { position: relative; width: min(460px, 92%); aspect-ratio: 1; perspective: 1000px; }
.showcase-frame__plate { position: absolute; inset: 4% 4% 8%; border-radius: var(--r-40); overflow: hidden;
  background: linear-gradient(170deg, var(--bg-pure) 0%, var(--bg-canvas) 70%, var(--tkt-blue-100) 100%);
  box-shadow: var(--elev-showcase); transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); transition: transform var(--dur-4) var(--ease-out); }
.showcase-frame__plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 7%; mix-blend-mode: multiply; }
@media (prefers-reduced-motion: reduce) { .showcase-frame__plate { transform: none !important; } }

/* ---------- Thanh lệnh danh mục (1 khối: tab + tìm + sắp xếp + view + CSV) ---------- */
.cat-command { display: flex; flex-direction: column; background: var(--bg-pure); border-radius: var(--r-20); box-shadow: var(--elev-1), var(--elev-3); }
.cat-command__tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; padding: 6px; }
.cat-command__tab { flex: none; display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border: 0; border-radius: var(--r-12);
  background: transparent; color: var(--fg-2); font-size: 13px; font-weight: var(--w-bold); }
.cat-command__tab[aria-selected="true"] { background: var(--tkt-blue-600); color: var(--fg-on-dark-1); }
.cat-command__tab span { font-size: 11px; font-weight: var(--w-book); opacity: .7; }
.cat-command__tools { display: flex; align-items: center; gap: var(--s-1); padding: var(--s-1) 6px 6px; border-top: 1px solid var(--line-soft); }
.cat-command__tools input[type="search"] { flex: 1; min-width: 0; height: 42px; padding: 0 var(--s-3); border: 0; background: transparent; font-size: 14px; outline: none; }
.cat-command__tool { flex: none; height: 36px; padding: 0 10px; border: 0; border-radius: 10px; background: var(--bg-canvas); font-size: 12px; font-weight: var(--w-bold); color: var(--tkt-blue-600); }
.filter-tag { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 0; border-radius: var(--r-pill);
  background: var(--tkt-blue-050); color: var(--tkt-blue-600); font-size: 12px; font-weight: var(--w-bold); }

/* ---------- Panel "Tìm đúng bơm" (bộ lọc dẫn dắt) ---------- */
.guide-panel { display: flex; flex-direction: column; background: var(--bg-pure); border: 1px solid var(--line); border-radius: var(--r-20); }
.guide-panel__mode { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin: 0 var(--s-4); padding: 3px; border-radius: var(--r-12); background: var(--line-soft); }
.guide-panel__mode button { min-height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--fg-caption); font-size: 12px; font-weight: var(--w-bold); }
.guide-panel__mode button[aria-selected="true"] { background: var(--bg-pure); color: var(--tkt-blue-600); box-shadow: var(--elev-2); }
.guide-step { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: var(--s-3) 0; border-bottom: 1px solid var(--line-soft); }
.guide-step__n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: var(--w-bold); background: var(--line-soft); color: var(--fg-caption); }
.guide-step.is-done .guide-step__n { background: var(--tkt-blue-600); color: var(--fg-on-dark-1); }
.option-tile { min-height: 32px; padding: 0 10px; border-radius: var(--r-pill); border: 1.5px solid var(--line-input); background: var(--bg-pure); color: var(--fg-2); font-size: 12px; font-weight: var(--w-bold); }
.option-tile[aria-pressed="true"] { background: var(--tkt-blue-600); border-color: var(--tkt-blue-600); color: var(--fg-on-dark-1); }
.option-tile:disabled { opacity: .4; cursor: not-allowed; }
.pick-tile { display: flex; flex-direction: column; gap: 3px; padding: var(--s-3); border-radius: 14px; border: 1.5px solid var(--tkt-orange-500); background: var(--tkt-orange-050); text-align: left; }

/* ---------- Tile sản phẩm B2B ---------- */
.sku-tile { display: flex; flex-direction: column; gap: 10px; padding: var(--s-3); background: var(--bg-pure); border-radius: var(--r-16); box-shadow: var(--elev-1); min-width: 0;
  transition: box-shadow var(--dur-2) var(--ease-out); }
.sku-tile:hover { box-shadow: 0 0 0 1.5px var(--tkt-blue-600), var(--elev-3); }
.sku-tile.is-in-quote { box-shadow: 0 0 0 2px var(--semantic-success-dot); }
.sku-tile__head { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: var(--s-3); }
.sku-tile__media { height: 76px; border-radius: var(--r-12); overflow: hidden; background: var(--bg-media); }
.sku-tile__brand { font-size: 10px; font-weight: var(--w-bold); letter-spacing: .12em; color: var(--tkt-blue-600); }
.sku-tile__name { font-size: 15px; line-height: 1.3; font-weight: var(--w-bold); color: var(--fg-1); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sku-tile__code { font: 11px/1.3 var(--font-mono); color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sku-tile__spec { font-size: 12px; line-height: 1.45; color: var(--fg-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.stock-dot { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: var(--w-bold); color: var(--semantic-success); }
.stock-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--semantic-success-dot); }
.stock-dot.is-last { color: var(--tkt-orange-700); } .stock-dot.is-last::before { background: var(--tkt-orange-700); }
.sku-tile__foot { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-2); padding-top: 10px; border-top: 1px solid var(--line-soft); }
.sku-tile__price { font-size: 18px; font-weight: var(--w-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sku-tile__vat { font-size: 10px; color: var(--fg-caption); }
.compare-toggle { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--line-input); background: var(--bg-pure); color: var(--fg-2); font-weight: var(--w-bold); }
.compare-toggle[aria-pressed="true"] { border-color: var(--tkt-blue-600); background: var(--tkt-blue-050); color: var(--tkt-blue-600); }
.quote-add { height: 38px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: var(--tkt-orange-500); color: var(--fg-1); font-size: 12px; font-weight: var(--w-bold); }
.quote-add.is-added { background: var(--semantic-success-bg); color: var(--semantic-success); }

/* ---------- Tooltip ⓘ (thay khối chữ giải thích) ---------- */
.info-tip { position: relative; display: inline-flex; }
.info-tip__btn { width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 1.5px solid var(--fg-4); background: var(--bg-pure); color: var(--fg-caption);
  font: italic var(--w-bold) 11px/1 Georgia, serif; display: grid; place-items: center; }
.info-tip__body { position: absolute; z-index: var(--z-tooltip); top: 28px; left: -8px; width: min(260px, 70vw); padding: 10px var(--s-3); border-radius: var(--r-12);
  background: var(--fg-1); color: var(--fg-on-dark-1); font-size: 12px; line-height: 1.5; box-shadow: var(--elev-4); }
.info-tip--end .info-tip__body { left: auto; right: -8px; }

/* ---------- Dock nổi (báo giá + so sánh) & sheet bên phải ---------- */
.action-dock { position: fixed; left: 50%; bottom: var(--s-5); transform: translateX(-50%); z-index: var(--z-sticky); width: min(720px, calc(100% - 24px));
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-5); border-radius: var(--r-pill);
  background: rgba(255,255,255,.82); border: 1px solid var(--glass-stroke); box-shadow: var(--elev-4);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); }
.side-sheet { position: fixed; inset: 0 0 0 auto; z-index: var(--z-modal); width: min(560px, 100%); overflow-y: auto; background: var(--bg-pure); box-shadow: var(--elev-5); }

/* ---------- Stepper quy trình (bước hiện tại đổi theo trạng thái) ---------- */
.step-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line-soft); border-radius: var(--r-24); overflow: hidden; box-shadow: var(--elev-3); }
@media (max-width: 819px) { .step-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 519px) { .step-row { grid-template-columns: 1fr; } }
.step-row > li { display: flex; flex-direction: column; gap: 10px; padding: var(--s-6) 22px; background: var(--bg-pure); }
.step-row > li.is-active { background: var(--bg-elev); }

/* ---------- Ô điều kiện (lưới chia hết số ô — không ô mồ côi) ---------- */
.terms-block { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line-soft); border-radius: var(--r-24); overflow: hidden; box-shadow: var(--elev-3); }
@media (max-width: 599px) { .terms-block { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.terms-block > div { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-5); background: var(--bg-pure); }