/* =============================================================
   "Banner pattern" — component system design dùng chung: nền gradient + hoa văn trang trí
   (dải ruy-băng chéo góc trên-phải + khung vuông bo góc lồng nhau góc dưới-trái).

   Bản gốc dựng cho BSC Smart Invest (bsc-app-preview/src/components/BannerPattern.jsx), path SVG
   lấy đúng nguyên bản export từ Figma (không phải suy đoán từ CSS bounding box) nên hình dạng khớp
   1:1 thiết kế gốc. Bản này chỉ đổi NGUỒN MÀU sang token của BSC Webtrade — hình hoa văn giữ
   nguyên, để hai app cùng một ngôn ngữ trang trí dù khác design system.

   Màu: dùng thẳng --gradient-btn-primary-start/-end (khai ở lib/tokens.css, body.fss.theme-dark /
   body.fss.theme-light) — dải CTA chính của Webtrade, KHÔNG tạo token màu mới vì hai màu này đã
   đúng vai "dải thương hiệu chính" mà banner cần, tự đổi theo theme luôn (dark #2681E0→#265CAB,
   light #17B19D→#2B80E4 — light lục lam→lam theo đúng bản đo production).

   Cách dùng: thêm class "wt-banner-pattern" vào khối cần nền banner. Khối đó cần content bên
   trong tự đặt position:relative + z-index để không bị hoa văn che (xem ví dụ .block-1 ở
   quick-order.css — đã có sẵn cấu trúc position/z-index cho nội dung con).

   viewBox gốc của hoa văn là 375x176 (đúng khung banner Figma); banner-size 100% 100% ép hoa văn
   lấp đầy khối bất kể tỉ lệ thật, chấp nhận co giãn nhẹ vì đây là hoa văn trang trí — cùng cách
   .block-1 hiện đang làm với ảnh bg_quickoder.png (background ... / cover).
   ============================================================= */
.wt-banner-pattern {
  background-image:
    url('/webtrade/lib/banner-pattern.svg'),
    linear-gradient(90deg, var(--gradient-btn-primary-start), var(--gradient-btn-primary-end));
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 100% 100%, 100% 100%;
}