/* ============================================================
   Go365 BRAND COMPONENTS — lớp giao diện dùng chung Web + Admin (02/10/2026).
   Nguồn DUY NHẤT: src/Go365.Shared/BrandAssets/brand-components.css
   → copy vào wwwroot/css/ của cả Go365.Web và Go365.Admin mỗi lần build
     (target SyncBrandTokens trong .csproj). Sửa ở ĐÂY, không sửa bản copy.
   Chỉ dùng biến trong brand-tokens.css — KHÔNG gõ mã màu trực tiếp.
   Tiền tố .ds- để không đụng lớp cũ (.btn, .card, .bd, .tg...).
   Viết theo kiểu điện thoại trước: vùng chạm 44px, chữ nội dung ≥ 12px;
   màn rộng + chuột mới thu gọn lại.
   Trạng thái đang chọn nhận cả .is-active lẫn .ac (JS cũ đang bật/tắt .ac).

   Có gì:
     .ds-btn      nút      --primary · --teal · --outline · --outline-light · --ghost · --gold
                            --sm · --lg · --block
     .ds-badge    nhãn     --hot · --new · --sale · --info · --success · --warn · --danger · --neutral
                            --float (đặt trên ảnh)
     .ds-card     thẻ sản phẩm (__media · __body · __title · __excerpt · __foot) + .ds-price · .ds-rate
     .ds-filter   khung bộ lọc (__head · __group · __label) · .ds-filterbar (dải chip) · .ds-chip · .ds-input
     .ds-table    bảng (bọc trong .ds-table-wrap để trượt ngang ở điện thoại) · td.num cho số
     .ds-eyebrow  dòng chữ nhỏ trên tiêu đề · .ds-note thông báo
   ============================================================ */

/* ---------- NÚT ---------- */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:var(--tap-min);padding:0 var(--space-5);border:1.5px solid transparent;border-radius:var(--radius-pill);
  font-family:var(--font-body);font-size:var(--fs-body-sm);font-weight:var(--fw-bold);line-height:1.2;
  text-decoration:none;white-space:nowrap;cursor:pointer;background:transparent;color:var(--text-link);
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),
             transform var(--dur-fast) var(--ease-out)}
.ds-btn svg{width:16px;height:16px;flex:none}
.ds-btn:hover{transform:translateY(-1px)}
.ds-btn:active{transform:var(--press-scale)}
.ds-btn:focus-visible{outline:2px solid var(--brand-primary);outline-offset:2px;box-shadow:0 0 0 4px var(--focus-ring)}
.ds-btn[disabled],.ds-btn.is-disabled{opacity:.5;pointer-events:none}

.ds-btn--primary{background:var(--brand-accent);color:var(--text-on-accent);box-shadow:var(--shadow-cta)}
.ds-btn--primary:hover{background:var(--go-orange-600);color:var(--text-on-accent);box-shadow:var(--shadow-cta-lg)}
.ds-btn--teal{background:var(--brand-primary);color:var(--text-on-accent)}
.ds-btn--teal:hover{background:var(--brand-deep);color:var(--text-on-accent)}
.ds-btn--outline{border-color:var(--brand-primary);color:var(--brand-primary);background:var(--surface-card)}
.ds-btn--outline:hover{background:var(--brand-primary);color:var(--text-on-accent)}
.ds-btn--outline-light{border-color:rgba(255,255,255,.6);color:var(--go-white)}
.ds-btn--outline-light:hover{border-color:var(--go-white);background:rgba(255,255,255,.1)}
.ds-btn--ghost{color:var(--text-link)}
.ds-btn--ghost:hover{background:rgba(41,179,182,.1)}
.ds-btn--gold{background:var(--brand-gold);color:var(--go-teal-900)}
.ds-btn--gold:hover{filter:brightness(.96)}
.ds-btn--sm{min-height:36px;padding:0 var(--space-4);font-size:var(--fs-caption)}
.ds-btn--lg{min-height:52px;padding:0 var(--space-8);font-size:var(--fs-body-lg)}
.ds-btn--block{display:flex;width:100%}
@media (pointer:coarse){.ds-btn--sm{min-height:var(--tap-min)}}

/* ---------- NHÃN ---------- */
.ds-badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:3px 10px;border-radius:var(--radius-pill);
  font-family:var(--font-body);font-size:var(--fs-micro);font-weight:var(--fw-extra);line-height:1.35;
  letter-spacing:.02em;white-space:nowrap;background:var(--t4);color:var(--brand-primary)}
.ds-badge--hot{background:var(--brand-accent);color:var(--text-on-accent)}
.ds-badge--new{background:var(--brand-gold);color:var(--go-teal-900)}
.ds-badge--sale{background:var(--go-danger);color:var(--go-white)}
.ds-badge--info{background:var(--t4);color:var(--brand-primary)}
.ds-badge--success{background:var(--gl);color:var(--gn)}
.ds-badge--warn{background:var(--pll);color:var(--gd-text,var(--go-gold-ink))}
.ds-badge--danger{background:var(--rl);color:var(--rd)}
.ds-badge--neutral{background:var(--border-soft);color:var(--text-muted)}
.ds-badge--float{box-shadow:0 3px 8px rgba(0,0,0,.22)}

/* ---------- Ô NHẬP ---------- */
/* 16px ở điện thoại để iPhone không tự phóng to khi chạm vào ô. */
.ds-input{width:100%;min-height:var(--tap-min);padding:10px 14px;border:var(--border-input);border-radius:var(--radius-md);
  background:var(--surface-card);color:var(--text-body);font-family:var(--font-body);font-size:16px;outline:none;
  transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.ds-input::placeholder{color:var(--text-muted);opacity:.75}
.ds-input:focus{border-color:var(--brand-primary);box-shadow:0 0 0 4px var(--focus-ring)}
@media (min-width:981px){.ds-input{font-size:var(--fs-body-sm)}}

/* ---------- CHIP LỌC ---------- */
.ds-chip{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--tap-min);
  padding:0 14px;border:1.5px solid var(--border-soft);border-radius:var(--radius-pill);background:var(--surface-card);
  color:var(--text-muted);font-family:var(--font-body);font-size:var(--fs-caption);font-weight:var(--fw-bold);
  line-height:1.2;white-space:nowrap;text-decoration:none;cursor:pointer;
  transition:border-color var(--dur-fast),color var(--dur-fast),background var(--dur-fast),transform var(--dur-fast),box-shadow var(--dur-fast)}
.ds-chip svg{width:15px;height:15px;flex:none}
.ds-chip:hover{border-color:var(--go-teal-400);color:var(--brand-primary)}
.ds-chip:focus-visible{outline:2px solid var(--brand-primary);outline-offset:2px}
.ds-chip.is-active,.ds-chip.ac{background:var(--brand-primary);border-color:var(--brand-primary);color:var(--text-on-accent);
  box-shadow:0 3px 10px rgba(1,89,89,.28)}
.ds-chip__count{display:inline-block;padding:1px 6px;border-radius:var(--radius-pill);background:var(--border-soft);
  color:var(--text-muted);font-family:var(--font-mono);font-size:var(--fs-micro);font-weight:var(--fw-bold)}
.ds-chip.is-active .ds-chip__count,.ds-chip.ac .ds-chip__count{background:rgba(255,255,255,.24);color:inherit}
@media (min-width:981px) and (pointer:fine){.ds-chip{min-height:36px}}

/* Dải chip: điện thoại = 1 hàng trượt ngang (đỡ tốn chiều cao), màn rộng = xuống dòng. */
.ds-filterbar{display:flex;gap:var(--space-2);flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;padding-bottom:var(--space-2)}
.ds-filterbar::-webkit-scrollbar{display:none}
.ds-filterbar > *{flex:0 0 auto}
@media (min-width:981px){.ds-filterbar{flex-wrap:wrap;overflow:visible}}

/* ---------- KHUNG BỘ LỌC ---------- */
.ds-filter{background:var(--surface-card);border:var(--border-hairline);border-radius:var(--radius-xl);
  padding:var(--space-5);box-shadow:var(--shadow-sm)}
.ds-filter__head{display:flex;align-items:center;gap:6px;margin-bottom:var(--space-4);padding-bottom:var(--space-3);
  border-bottom:var(--border-dashed);font-family:var(--font-mono);font-size:var(--fs-caption);font-weight:var(--fw-bold);
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-heading)}
.ds-filter__group{margin-bottom:var(--space-4)}
.ds-filter__label{display:flex;align-items:center;gap:6px;margin-bottom:var(--space-2);
  font-size:var(--fs-caption);font-weight:var(--fw-bold);color:var(--text-heading)}

/* ---------- THẺ SẢN PHẨM ---------- */
/* Vạch chân thẻ là đường đục lỗ của vé + 2 khuyết tròn hai bên (hoạ tiết "vé" của thương hiệu). */
.ds-card{--ds-card-pad:var(--space-3);position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface-card);border:var(--border-hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);
  color:inherit;text-decoration:none;
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base)}
.ds-card:hover{transform:var(--hover-lift);box-shadow:var(--shadow-lift);border-color:var(--go-teal-400)}
.ds-card:focus-visible{outline:3px solid var(--brand-primary);outline-offset:3px}
.ds-card__media{position:relative;aspect-ratio:1200/630;overflow:hidden;background:var(--border-soft)}
.ds-card__media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out)}
.ds-card:hover .ds-card__media img{transform:scale(1.07)}
.ds-card__body{display:flex;flex-direction:column;flex:1;gap:var(--space-2);padding:var(--ds-card-pad)}
.ds-card__title{margin:0;font-family:var(--font-display);font-size:15px;font-weight:var(--fw-bold);line-height:var(--lh-snug);
  letter-spacing:-.01em;color:var(--text-heading);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ds-card__excerpt{margin:0;font-size:var(--fs-caption);line-height:1.5;color:var(--text-muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ds-card__foot{position:relative;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-2);
  margin-top:auto;padding-top:var(--space-3);border-top:var(--border-dashed)}
.ds-card__foot::before,.ds-card__foot::after{content:"";position:absolute;top:-9px;width:16px;height:16px;border-radius:50%;
  background:var(--surface-page);border:var(--border-hairline)}
.ds-card__foot::before{left:calc(-1 * var(--ds-card-pad) - 9px)}
.ds-card__foot::after{right:calc(-1 * var(--ds-card-pad) - 9px)}
@media (min-width:601px){
  .ds-card{--ds-card-pad:var(--space-4);border-radius:var(--radius-xl)}
  .ds-card__title{font-size:var(--fs-h4)}
}

/* Giá: số luôn là IBM Plex Mono, giá bán màu cam thương hiệu */
.ds-price{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.ds-price__orig{font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--text-muted);text-decoration:line-through}
.ds-price__row{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:6px}
.ds-price__now{font-family:var(--font-mono);font-size:19px;font-weight:var(--fw-bold);letter-spacing:-.02em;color:var(--brand-accent)}
.ds-price__now i{font-style:normal;font-size:var(--fs-caption);margin-left:1px;opacity:.85}
.ds-price__ask{font-family:var(--font-body);font-size:var(--fs-body-lg);font-weight:var(--fw-bold);color:var(--brand-accent)}
.ds-price__fx{font-family:var(--font-mono);font-size:var(--fs-micro);font-weight:var(--fw-semibold);color:var(--text-muted)}
@media (min-width:601px){.ds-price__now{font-size:21px}}
.ds-rate{display:inline-flex;align-items:center;gap:3px;white-space:nowrap;font-family:var(--font-mono);
  font-size:var(--fs-micro);font-weight:var(--fw-bold);color:var(--text-muted)}

/* ---------- BẢNG ---------- */
.ds-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--surface-card);
  border:var(--border-hairline);border-radius:var(--radius-lg)}
.ds-table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-body-sm);color:var(--text-body)}
.ds-table th{position:sticky;top:0;z-index:1;padding:10px 14px;text-align:left;white-space:nowrap;
  background:var(--surface-sand);border-bottom:var(--border-hairline);font-family:var(--font-mono);
  font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted)}
.ds-table td{padding:12px 14px;border-bottom:1px solid var(--border-soft);vertical-align:middle}
.ds-table tbody tr:last-child td{border-bottom:0}
.ds-table tbody tr:hover td{background:rgba(41,179,182,.07)}
.ds-table .num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.ds-table--zebra tbody tr:nth-child(even) td{background:var(--surface-page)}
@media (max-width:600px){.ds-table{min-width:max-content}.ds-table th,.ds-table td{padding:10px 12px}}

/* ---------- PHỤ TRỢ ---------- */
.ds-eyebrow{display:block;font-family:var(--font-mono);font-size:var(--fs-micro);font-weight:var(--fw-semibold);
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-accent)}
.ds-note{display:flex;gap:var(--space-2);align-items:flex-start;padding:10px 14px;border-radius:var(--radius-md);
  font-size:var(--fs-caption);line-height:1.5;background:var(--surface-sand);color:var(--text-body);border:1px solid var(--border-soft)}
.ds-note--warm{background:var(--go-terra-100);color:var(--text-accent);border-color:transparent}

@media (prefers-reduced-motion:reduce){
  .ds-btn,.ds-chip,.ds-card,.ds-card__media img{transition:none}
  .ds-btn:hover,.ds-card:hover,.ds-card:hover .ds-card__media img{transform:none}
}