/* Phần 5 web mới: danh mục, tìm kiếm, chi tiết sản phẩm. Nạp SAU /css/shop.css (phần 4): dùng biến màu, .khung, .luoi-sp,
   .tieude-khoi / .nhan-khoi, .sp-the của file đó; lớp riêng bắt đầu bằng .spx- để không đụng nhau. */
.spx { flex: 1; background: var(--xam); padding: 12px 0 40px; }
.spx *, .spx *::before, .spx *::after { box-sizing: border-box; }
.spx a { color: var(--chinh); }
.spx-mono { font-family: "IBM Plex Mono", ui-monospace, monospace; }

/* Vụn bánh mì */
.spx-vun { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13px; color: var(--chu-3); margin: 0 0 12px; }
.spx-vun a { text-decoration: none; }
.spx-vun a:hover { text-decoration: underline; }
.spx-vun [aria-current] { color: var(--chu); overflow-wrap: anywhere; }
.spx-vun-ngan { color: #9AA0AA; }

/* Hàng nút nhóm: trượt ngang trên điện thoại, không tràn trang */
.spx-chips, .spx-goi-y { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 10px; margin: 0 0 6px; }
.spx-goi-y { flex-wrap: wrap; overflow: visible; justify-content: center; }
.spx-chips::-webkit-scrollbar { display: none; }
.spx-chip { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 6px;
  background: var(--trang); border: 1px solid var(--ke); color: var(--chu) !important; text-decoration: none; white-space: nowrap; }
.spx-chip:hover { border-color: var(--chinh); }
.spx-chip[aria-current] { background: var(--chinh); border-color: var(--chinh); color: #fff !important; font-weight: 600; }

/* Tiêu đề khối: .tieude-khoi + .nhan-khoi (shop.css); bên phải là số sản phẩm + sắp xếp */
.spx-dau { flex-wrap: wrap; margin-bottom: 14px; }
.spx-dau .nhan-khoi { margin: 0; }
.spx-dau-phai { display: flex; align-items: center; gap: 12px; padding-bottom: 6px; margin-left: auto; }
.spx-dem { color: var(--chu-3); font-size: 13px; white-space: nowrap; }
.spx-sx-nhan { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--chu-3);  }
.spx-sx-nhan[hidden] { display: none; }
.spx-sx { height: 34px; border: 1px solid var(--ke); border-radius: 6px; background: var(--trang); color: var(--chu); padding: 0 8px; font: inherit; }

/* Ô tìm */
.spx-tim { display: flex; gap: 8px; margin: 0 0 12px; }
.spx-tim input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid #C9CDD4; border-radius: 6px; background: var(--trang);
  color: var(--chu); font: inherit; font-size: 16px; }
.spx-tim input:focus { outline: 2px solid var(--chinh); outline-offset: -1px; border-color: var(--chinh); }
.spx-tim-nut { flex: none; height: 44px; padding: 0 18px; border: 0; border-radius: 6px; background: var(--chinh); color: #fff; font: 600 15px Inter, sans-serif; cursor: pointer; }

/* Lưới thẻ: .luoi-sp (shop.css) */
.spx .luoi-sp { background: var(--trang); }

.spx-them-wrap { text-align: center; margin: 16px 0 0; }
.spx-them { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 28px; border: 1px solid var(--ke); border-radius: 6px;
  background: var(--trang); color: var(--chinh); font: 600 14px Inter, sans-serif; cursor: pointer; }
.spx-them:hover { border-color: var(--chinh); }

.spx-trong { background: var(--trang); border-radius: var(--r); padding: 32px 16px; text-align: center; color: var(--chu-3); }
.spx-trong p { margin: 0 0 10px; }
.spx-trong-to { color: var(--chu) !important; font-size: 16px; font-weight: 600; }
.spx-trong .spx-tim { max-width: 480px; margin: 16px auto; }

/* Khung chờ tải */
.spx-cho { background: linear-gradient(90deg, #ECEEF1 25%, #F6F7F9 50%, #ECEEF1 75%); background-size: 200% 100%; animation: spx-cho 1.2s infinite linear; border-radius: 6px; }
.spx-cho-chu { height: 22px; width: 60%; margin: 8px 0 14px; }
.spx-cho-chu.ngan { width: 30%; height: 28px; }
.spx-cho-the { aspect-ratio: 3 / 4.4; border-radius: 0; }
.spx-cho-anh { aspect-ratio: 1; }
@keyframes spx-cho { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .spx-cho { animation: none; } }

/* Chi tiết sản phẩm: khung trắng 2 cột */
.spx-ct { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 28px; background: var(--trang); border-radius: var(--r); padding: 14px; }
.spx-anh { min-width: 0; }
.spx-anh-rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 6px; background: var(--xam); aspect-ratio: 1; }
.spx-anh-rail::-webkit-scrollbar { display: none; }
.spx-anh-o { flex: 0 0 100%; scroll-snap-align: start; display: grid; place-items: center; }
.spx-anh-o img { width: 100%; height: 100%; object-fit: contain; display: block; }
.spx-anh-o.hong img { display: none; }
.spx-anh-o.hong::after { content: "Chưa cập nhật ảnh"; color: #8A919C; }
.spx-anh-hang { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.spx-anh-nho { flex: none; width: 66px; height: 66px; padding: 2px; border: 1px solid var(--ke); border-radius: 6px; background: var(--trang); cursor: pointer; }
.spx-anh-nho[aria-pressed="true"] { border: 2px solid var(--chinh); padding: 1px; }
.spx-anh-nho img { width: 100%; height: 100%; object-fit: contain; display: block; }
.spx-anh-trong { aspect-ratio: 1; border-radius: 6px; background: var(--xam); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #8A919C; }
.spx-anh-icon { width: 48px; height: 40px; border: 3px solid #C3C8CF; border-radius: 6px; position: relative; }
.spx-anh-icon::after { content: ""; position: absolute; left: 12px; top: 9px; width: 16px; height: 16px; border: 3px solid #C3C8CF; border-radius: 50%; }

.spx-ct-ben { min-width: 0; padding-top: 6px; }
.spx-ct-ten { margin: 0 0 8px; font-size: 22px; font-weight: 400; line-height: 1.3; overflow-wrap: anywhere; }
.spx-ct-gia-hang { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.spx-ct-gia { color: var(--gia); font-size: 24px; font-weight: 700; }
.spx-het { display: inline-block; padding: 3px 10px; border-radius: 6px; background: #F2F3F5; color: #5B616B; font-size: 13px; font-weight: 600; }
.spx-ct-ma { color: var(--chu-3); font-size: 13px; margin-top: 4px; }
.spx-ke { border: 0; border-top: 1px solid var(--ke); margin: 16px 0; }
.spx-ct-dong { margin: 0 0 16px; }
.spx-ct-nhan { color: var(--chu-3); font-size: 13px; margin-bottom: 6px; }
.spx-dv-hang { display: flex; flex-wrap: wrap; gap: 8px; }
.spx-dv { min-width: 64px; min-height: 36px; padding: 0 14px; border: 1px solid var(--ke-2); border-radius: 6px; background: var(--trang); color: var(--chu); font: 14px var(--f); cursor: pointer; }
.spx-dv[aria-pressed="true"] { border-color: var(--chinh); color: var(--chinh); box-shadow: inset 0 0 0 1px var(--chinh); font-weight: 600; }
.spx-dv.het { color: #9AA1AB; }
.spx-ct-ma[hidden], .spx-ct-dong[hidden], .spx-het[hidden] { display: none; }
.spx-sl { display: inline-flex; align-items: center; gap: 6px; }
.spx-sl-nut { width: 40px; height: 40px; border: 1px solid var(--ke); border-radius: 6px; background: var(--trang); color: var(--chinh); font-size: 20px; line-height: 1; cursor: pointer; }
.spx-sl-o { width: 56px; height: 40px; text-align: center; border: 1px solid var(--ke); border-radius: 6px; font: 600 16px Inter, sans-serif; color: var(--chu); background: var(--trang); }
.spx-ct-nut { display: flex; gap: 8px; flex-wrap: wrap; max-width: 400px; }
.spx-nut { flex: 1 1 160px; min-height: 46px; border: 0; border-radius: 6px; font: 600 15px Inter, sans-serif; cursor: pointer; }
.spx-nut-phu { background: var(--xanh-nhat); color: var(--chinh); }
.spx-nut-chinh { background: var(--chinh); color: #fff; }
.spx-nut:disabled { background: #E9EBEE; color: #7C838E; cursor: not-allowed; }
.spx-ct-ghi { flex-basis: 100%; margin: 4px 0 0; color: var(--chu-3); font-size: 13px; }

.spx-khoi { background: var(--trang); border-radius: var(--r); padding: 14px; margin-top: 16px; }
.spx-khoi-tieu { margin: 0 0 12px; font-size: 16px; font-weight: 600; }
.spx-mota { white-space: pre-line; color: #3F454C; overflow-wrap: anywhere; }
.spx-truot { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 5); gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; }
.spx-truot > * { scroll-snap-align: start; min-width: 0; border: 1px solid var(--ke); border-radius: 6px; }
@media (max-width: 720px) { .spx-truot { grid-auto-columns: 42%; } }

@media (max-width: 640px) {
  .spx { padding: 10px 0 32px; }
  .spx-ct { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 10px; }
  .spx-ct-ten { font-size: 19px; }
  .spx-ct-nut { max-width: none; }
  .spx-nut { flex-basis: 0; }
  .spx-dau-phai { margin-left: 0; width: 100%; justify-content: space-between; padding-bottom: 8px; }
}

/* Thông báo nổi */
.spx-toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  max-width: calc(100vw - 32px); padding: 12px 16px; border-radius: 8px; background: #26292E; color: #fff; font: 14px Inter, sans-serif;
  box-shadow: 0 6px 20px rgba(0,0,0,.18); transition: opacity .2s, transform .2s; z-index: 50; }
.spx-toast.hien { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.spx-toast a { color: #9EC2FF; font-weight: 600; }