/* Đổi quà từ bố mẹ: cửa hàng của bé (Kho quà) + thẻ quản lý trong khu bố mẹ */
.gshop { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin: 10px 0 16px; }
.gcard { background: #fff; border-radius: 24px; padding: 16px; box-shadow: var(--sh); display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; border: 3px solid transparent; }
.gcard.can { border-color: var(--sun); background: linear-gradient(180deg, #fffaf0, #fff); }
.gic { font-size: 40px; line-height: 1; }
.gic.big { font-size: 72px; margin-bottom: 6px; }
.gnm { font-family: var(--font-d); font-size: 18px; line-height: 1.25; flex: 1; }
.gpr { font-weight: 800; color: var(--sun-d); }
.gbar { width: 100%; height: 12px; border-radius: 99px; background: #f1e5d1; overflow: hidden; margin: 4px 0; }
.gbar i { display: block; height: 100%; background: linear-gradient(90deg, #22b98d, #ffc23d); border-radius: 99px; transition: width .4s; }
.gcard .kbtn { width: 100%; padding-left: 10px; padding-right: 10px; }
.gpend { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 14px; }
.gpi { display: flex; align-items: center; gap: 8px; background: #fff4d8; border: 2px dashed var(--sun); border-radius: 18px; padding: 8px 14px; }
.gpi span { font-size: 28px; } .gpi small { color: var(--muted); font-weight: 700; }
.gask { text-align: center; } .gask h3 { margin: 4px 0 8px; } .gask p { margin: 8px 0; }
/* khu bố mẹ */
.gq { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin: 8px 0; background: #fff4d8; border-radius: 16px; }
.gqi { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; } .gqi small { color: var(--muted); }
.gqb { display: flex; gap: 8px; flex-wrap: wrap; }
.gedit { display: grid; gap: 8px; margin: 6px 0 10px; }
.ge { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ge .gsel { width: 72px; font-size: 22px; padding-left: 6px; padding-right: 6px; }
.ge .gname { flex: 1 1 180px; min-width: 0; }
.ge .gp { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.gh { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.gh small { color: var(--muted); } .gh.refunded small { color: var(--brand-d); } .gh.done small { color: var(--mint-d); }
@media (max-width: 520px) {
  .gshop { grid-template-columns: 1fr 1fr; gap: 10px; }
  .gcard { padding: 12px 10px; } .gic { font-size: 34px; } .gnm { font-size: 16px; }
  .gqb { width: 100%; } .gqb .kbtn { flex: 1; }
}