/* ═══════════════════════════════════════════════════════════════════════
   Khối dùng chung cho các trang sản phẩm (/san-pham/*, /phan-mem-quan-ly-bida)

     .bgia  — bảng giá rút gọn đặt ngay trên trang sản phẩm
     .bkh   — dàn tên khách hàng thật
     .banh  — lưới ảnh chụp thật tại quán

   Tách khỏi sp-bida.css ngày 13/08/2026 khi làm tới trang sản phẩm thứ hai:
   chép cùng một khối vào bốn file CSS thì lần sửa sau chắc chắn sót một chỗ.
   Nạp file này TRƯỚC file CSS riêng của từng trang.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Bảng giá dùng chung ───────────────────────────────────────────
   Viết riêng thay vì nạp price-page.css: file kia 10KB và chứa nhiều luật
   dành cho bố cục trang bảng giá, nạp vào đây dễ đè lên style của trang
   sản phẩm. Tiền tố .bgia- nên chắc chắn không đụng class nào sẵn có. */
.sg .bgia{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:22px;max-width:820px;margin:0 auto}
/* 820px vừa cho 2 gói (trang bida). Trang có 3 gói phải nới ra, không thì
   auto-fit xếp 2+1 và gói thứ ba đứng lẻ một mình. */
.sg .bgia--3{max-width:1120px}
.sg .bgia-card{position:relative;background:#fff;border:1px solid #E4E9F2;border-radius:18px;
  padding:28px 26px 26px;display:flex;flex-direction:column}
.sg .bgia-card--pop{border-color:#F5A623;box-shadow:0 14px 40px -18px rgba(243,146,33,.45)}
.sg .bgia-badge{position:absolute;top:-12px;left:26px;background:#F39221;color:#fff;
  font-size:.76rem;font-weight:800;padding:5px 12px;border-radius:999px;letter-spacing:.02em}
.sg .bgia-name{font-size:1.22rem;font-weight:900;color:var(--navy)}
.sg .bgia-desc{color:#6A7792;font-size:.95rem;margin-top:4px}
.sg .bgia-price{margin:16px 0 4px;color:var(--navy);line-height:1.1}
.sg .bgia-price b{font-size:2.1rem;font-weight:900;letter-spacing:-.02em}
.sg .bgia-price span{font-size:1rem;font-weight:600;color:#6A7792}
.sg .bgia-gift{display:inline-block;background:#FFF4E8;color:#A5600D;font-size:.82rem;
  font-weight:700;padding:5px 11px;border-radius:999px;margin-bottom:16px}
.sg .bgia-list{list-style:none;padding:0;margin:0 0 22px;display:flex;
  flex-direction:column;gap:10px;flex:1}
.sg .bgia-list li{display:flex;gap:9px;align-items:flex-start;
  font-size:.95rem;color:#33405C;line-height:1.5}
.sg .bgia-list li svg{width:15px;height:15px;flex:none;margin-top:4px;color:#1A9C6C}
.sg .bgia-list li.bgia-lead{font-weight:700;color:var(--navy)}
.sg .bgia-more{text-align:center;margin-top:22px}
.sg .bgia-more a{color:#2563C9;font-weight:700;text-decoration:none}
.sg .bgia-more a:hover{text-decoration:underline}

/* ── khách hàng đang dùng (khối tên khách hàng thật) ────────────────────── */
.sg .bkh{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  max-width:1120px;margin:0 auto;align-items:stretch}
@media(max-width:1020px){.sg .bkh{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.sg .bkh{grid-template-columns:1fr}}
.sg .bkh-c{display:flex;align-items:center;gap:13px;background:#fff;
  border:1px solid var(--line2);border-radius:var(--r-2xl);padding:16px 18px;
  box-shadow:var(--sh-lift);transition:transform .18s ease,box-shadow .18s ease}
.sg .bkh-c:hover{transform:translateY(-3px)}
.sg .bkh-av{flex:0 0 auto;width:46px;height:46px;border-radius:50%;
  background:var(--grad-navy);display:grid;place-items:center;color:#fff;
  font-weight:900;font-size:1.05rem}
.sg .bkh-t{min-width:0}
.sg .bkh-t b{display:block;color:var(--navy);font-size:.98rem;line-height:1.25}
.sg .bkh-t span{display:block;font-size:.82rem;color:var(--slate);margin-top:3px;
  line-height:1.4}

/* ── ảnh chụp thật tại quán khách hàng ───────────────────────────────────────── */
.sg .banh{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;
  max-width:1120px;margin:0 auto}
.sg .banh figure{margin:0;min-width:0}
.sg .banh img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--r-2xl);border:1px solid var(--line2);box-shadow:var(--sh-lift)}
.sg .banh figcaption{font-size:.79rem;color:var(--slate);line-height:1.45;
  margin-top:9px;padding-inline:2px}
.sg .banh .w2{grid-column:span 2}
.sg .banh .w2 img{aspect-ratio:1400/488}
@media(max-width:1020px){
  .sg .banh{grid-template-columns:repeat(2,1fr)}
  .sg .banh .w2{grid-column:span 2}
}
@media(max-width:540px){
  .sg .banh{grid-template-columns:1fr}
  .sg .banh .w2{grid-column:span 1}
  /* giữ nguyên tỉ lệ gốc: màn hình hẹp mà xén nữa thì mất cả mép bảng và mép bill */
}

/* ảnh thứ 7 đứng một mình ở hàng cuối — cho vào giữa thay vì dính mép trái */
@media(min-width:1021px){.sg .banh .w2.mid{grid-column:2 / span 2}}