/* Layout */
.pp-no-scroll { overflow: hidden; }
.pp-drawer { position: fixed; inset: 0; z-index: 9999; display: none; }
.pp-drawer.open { display: block; }
.pp-drawer-mask { position:absolute; inset:0; background: rgba(0,0,0,.35); }
.pp-drawer-panel {
  position:absolute; right:0; top:0; bottom:0; width: 420px; max-width: 94vw;
  background:#fff; box-shadow: -2px 0 12px rgba(0,0,0,.2);
  display:flex; flex-direction:column; transform: translateX(100%); transition: transform .28s ease;
}
.pp-drawer.open .pp-drawer-panel { transform: translateX(0); }
.pp-drawer-header { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid #eee; }
.pp-drawer-title { font-weight:600; font-size:16px; }
.pp-drawer-close { background:none; border:0; font-size:22px; line-height:1; cursor:pointer; }
.pp-drawer-body { padding:12px; overflow:auto; }

/* Grid: mobile 2 cột, desktop 2 cột */
.pp-list { display:grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width:768px){ .pp-list { grid-template-columns: repeat(2, 1fr); } }

/* Card */
.pp-item { border:1px solid #eee; border-radius:10px; padding:10px; background:#fff; text-align:center; transition: box-shadow .2s, transform .05s; }
.pp-item:hover { box-shadow:0 2px 10px rgba(0,0,0,.08); }
.pp-img { width:100%; height:auto; border-radius:8px; }
.pp-name { font-size:13px; line-height:1.35; margin-top:8px; min-height:36px; }
.pp-price { margin:6px 0; }
.pp-old { text-decoration:line-through; opacity:.6; margin-right:6px; }
.pp-new { font-weight:700; color:#e53935; }
.pp-badge { display:inline-block; background:#f5f5f5; padding:3px 8px; border-radius:999px; font-size:11px; margin-bottom:6px; }
.pp-add {
  display:block;
  width:100%;
  padding:8px 10px;
  border:0;
  border-radius:8px;
  background:#0a437f; /* màu mới */
  color:#fff;
  font-weight:600;
  cursor:pointer;
}
.pp-add:disabled { opacity:.7; cursor:default; }


/* Toast */
.pp-toast { position:fixed; right:16px; bottom:16px; background:#333; color:#fff; padding:10px 14px; border-radius:8px; opacity:0; transform:translateY(8px); transition:opacity .2s, transform .2s; z-index:10000; }
.pp-toast.show { opacity:1; transform:translateY(0); }