/* Giỏ hàng (danh sách hóa đơn). Tiền tố gh-. Theo design GioHang, GioHangPC, PhoneGioHang. */

/* ===== Chip vòng, nhãn trạng thái: dùng cả ở Chi tiết hóa đơn ===== */
.gh-vong { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px 0 6px; border-radius: 999px; background: #E3F1E5; color: #1D4A27; font-size: 11.5px; font-weight: 700; border: 1px solid #C3DEC8; white-space: nowrap; flex: none; font-variant-numeric: tabular-nums; }
.gh-vong i { width: 6px; height: 6px; border-radius: 50%; background: var(--xanh-rung); box-shadow: 0 0 0 2px #fff; }
.gh-vong.da-thu { background: #F1EFE8; color: #8A8372; border-color: #E0DCD0; }
.gh-vong.da-thu i { background: #B5AFA0; }
.gh-vong.gh-them-2, .gh-vong.gh-them-3 { padding: 0 8px; }
.gh-vong.gh-them-3 { display: none; }
.gh-nhan { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; font-weight: 700; white-space: nowrap; flex: none; }
.gh-nhan.moi { background: #E2EBF5; color: #2B4C70; }
.gh-nhan.trai-nghiem { background: #E9F4EA; color: #1D4A27; }
.gh-nhan.chua-tt { background: #FBEBC8; color: #7A4E05; }
.gh-nhan.da-tt { background: #ECEAE3; color: #6B6557; }
.gh-nhan.huy { background: #FDE6E3; color: var(--canh-bao); }
.gh-cham-do { width: 8px; height: 8px; border-radius: 50%; background: var(--canh-bao); box-shadow: 0 0 0 2px #FBEBC8; flex: none; }


/* ===== Trang ===== */
.gh-trang { display: flex; flex-direction: column; gap: 12px; min-height: 100%; }
.gh-hang-dau { display: flex; align-items: center; gap: 12px; min-height: 50px; }
.gh-tieu-dt { display: none; }
.gh-hang-dau .o-quet-vong { width: 340px; height: 50px; flex: none; }
.gh-hang-dau .o-quet-vong input { font-size: 16px; }
.gh-moi { margin-left: auto; flex: none; }
.gh-ket-qua { margin: 0; display: flex; align-items: center; gap: 6px; font-size: calc(13.5px * var(--co-chu)); font-weight: 500; min-width: 0; line-height: 1.3; }
.gh-ket-qua svg { flex: none; }
.gh-ket-qua.ok { color: #1D4A27; }
.gh-ket-qua.ok svg { color: var(--xanh-rung); }
.gh-ket-qua.ok a { font-weight: 700; color: var(--xanh-dam); text-decoration: underline; text-decoration-color: #BCD8C1; text-underline-offset: 3px; }
.gh-ket-qua.canh-bao { color: #7A4E05; }
.gh-ket-qua.loi { color: var(--canh-bao); }
.gh-ngan { display: none; }

.gh-loc { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 4px; margin: -2px; }
.gh-loc::-webkit-scrollbar { display: none; }

/* ===== Lưới ô hóa đơn ===== */
.gh-luoi-hop { flex: 1; background: #fff; border: 1px solid var(--vien); border-radius: 16px; padding: 18px 16px 16px; min-width: 0; }
.gh-luoi { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-content: start; }
.gh-the { position: relative; display: flex; flex-direction: column; gap: 7px; min-height: 132px; min-width: 0; padding: 12px; border-radius: 14px; border: 1.5px solid #E3E0D6; background: #FBFBF8; }
.gh-the:hover { border-color: #C9D8CB; }
.gh-the.cho { background: #FFF8E8; border-color: #EFC56D; }
.gh-the.tim-thay { border-color: var(--xanh-rung); box-shadow: 0 0 0 3px var(--xanh-rung) inset, 0 8px 20px rgba(45, 102, 53, .18); background: #fff; }
.gh-the-tim { position: absolute; left: 12px; top: -11px; background: var(--xanh-rung); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 7px; z-index: 2; }
.gh-the-dau { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.gh-the-ten { font-size: calc(14px * var(--co-chu)); font-weight: 600; line-height: 1.2; color: var(--chu); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.gh-the-ten.trong { font-weight: 400; color: var(--chu-phu); }
.gh-the-ma { font-size: calc(16px * var(--co-chu)); font-weight: 700; color: var(--xanh-dam); white-space: nowrap; }
/* Cả ô bấm được: liên kết số HĐ phủ kín ô; nút "Thêm sản phẩm" nằm trên */
.gh-the-ma::after { content: ''; position: absolute; inset: 0; border-radius: 14px; }
.gh-the-ma:focus-visible { outline: none; }
.gh-the-ma:focus-visible::after { outline: 3px solid var(--xanh-rung); outline-offset: 2px; }
.gh-the-gio { display: flex; align-items: center; gap: 5px; height: 18px; font-size: calc(12.5px * var(--co-chu)); color: var(--chu-phu); white-space: nowrap; min-width: 0; }
.gh-the-gio svg { flex: none; }
.gh-the-gio-chu { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.gh-the-bt { margin-left: auto; display: flex; gap: 3px; flex: none; }
.gh-the-bt > span { display: flex; }
.gh-the-bt .spa { color: #8A5A3C; }
.gh-the-bt .bep { color: #9A7414; }
.gh-the-bt .nha { color: #A9502E; }
.gh-the-bt .canh-bao { color: var(--canh-bao); }
.gh-the-vong { display: flex; gap: 4px; flex-wrap: nowrap; min-height: 22px; overflow: hidden; }
.gh-the-vong .gh-vong.thu-3 { display: none; }
.gh-the-chan { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; min-width: 0; }
.gh-the-khach { display: inline-flex; align-items: center; gap: 4px; font-size: calc(12.5px * var(--co-chu)); color: var(--chu-phu); white-space: nowrap; }
.gh-the-khach svg { flex: none; }
.gh-chi-dt { display: none; }
.gh-the-tien { font-size: calc(14px * var(--co-chu)); font-weight: 700; color: var(--xanh-dam); white-space: nowrap; }
.gh-them { position: relative; z-index: 1; width: 100%; height: 36px; margin-top: auto; }
.gh-the.tim-thay .gh-the-chan { display: none; }

/* Điện thoại: cột 1, ô gọn như PhoneGioHang; ô tìm thấy và chip đứng đầu */
@media (max-width: 767px) {
  .gh-trang { gap: 0; }
  .gh-hang-dau { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'tieu tieu' 'vong moi' 'kq kq'; gap: 10px 8px; align-items: center;
    background: var(--xanh-dam); border-radius: 18px; padding: 14px; margin: 0 0 12px; }
  .gh-tieu-dt { display: block; grid-area: tieu; margin: 0; font-size: calc(13px * var(--co-chu)); font-weight: 500; color: var(--xanh-lui); }
  .gh-hang-dau .o-quet-vong { grid-area: vong; width: auto; height: 50px; border: 0; font-size: 17px; }
  .gh-hang-dau .o-quet-vong input { font-size: 17px; }
  .gh-moi { grid-area: moi; margin: 0; width: 50px; height: 50px; padding: 0; }
  .gh-moi .gh-dai { display: none; }
  .gh-ket-qua { grid-area: kq; color: var(--xanh-lui); font-size: calc(14px * var(--co-chu)); }
  .gh-ket-qua.ok { color: #fff; }
  .gh-ket-qua.ok svg { color: #8FD39A; }
  .gh-ket-qua.ok a { color: #fff; text-decoration-color: rgba(255, 255, 255, .5); }
  .gh-ket-qua.canh-bao { color: #FFD9A0; }
  .gh-ket-qua.loi { color: #FFB4AA; }

  .gh-trang { display: flex; }
  .gh-loc { order: 2; padding: 4px 2px 12px; }
  .gh-loc .chip { height: 40px; padding: 0 14px; font-size: calc(14px * var(--co-chu)); }
  .gh-dai { display: none; }
  .gh-ngan { display: inline; }
  .gh-luoi-hop, .gh-luoi { display: contents; }
  .gh-luoi-hop > .khung-trong, .gh-luoi-hop > .khung-loi, .gh-luoi-hop > .dang-tai-nho { order: 3; }
  .gh-hang-dau { order: 0; }

  .gh-the { order: 3; min-height: 0; margin-bottom: 10px; padding: 12px 14px; gap: 8px 8px; border-color: var(--vien); background: #fff;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'dau tien' 'vong khach'; align-items: center; }
  .gh-the.cho { background: #FFF8E8; border-color: #EFC56D; }
  .gh-the.tim-thay { order: 1; margin: 0 0 12px; background: #F0FBF2; border: 2px solid var(--xanh-rung); box-shadow: none;
    grid-template-areas: 'dau tien' 'vong khach' 'them them'; }
  .gh-the-tim { display: none; }
  .gh-the-dau { grid-area: dau; justify-content: flex-start; gap: 8px; }
  .gh-the-ma { font-size: calc(16.5px * var(--co-chu)); }
  .gh-the .gh-nhan { display: none; }
  .gh-the.tim-thay .gh-nhan, .gh-the.cho .gh-nhan { display: inline-flex; }
  .gh-the-gio { display: none; }
  .gh-the-vong { grid-area: vong; gap: 4px; }
  .gh-the-vong .gh-vong { height: 26px; font-size: calc(12.5px * var(--co-chu)); }
  .gh-the-vong .gh-vong.thu-3 { display: inline-flex; }
  .gh-vong.gh-them-2 { display: none; }
  .gh-vong.gh-them-3 { display: inline-flex; }
  .gh-the-chan { display: contents; }
  .gh-the.tim-thay .gh-the-chan { display: contents; }
  .gh-the-tien { grid-area: tien; justify-self: end; font-size: calc(15px * var(--co-chu)); }
  .gh-the-khach { grid-area: khach; justify-self: end; font-size: calc(13px * var(--co-chu)); }
  .gh-the-khach svg { display: none; }
  .gh-chi-dt { display: inline; }
  .gh-them { grid-area: them; height: 46px; font-size: calc(15px * var(--co-chu)); margin-top: 2px; }
}
@media (min-width: 768px) {
  /* Mặc định chỉ hiện 2 chip vòng + "+N" (như thiết kế) */
  .gh-vong.gh-them-3 { display: none; }
}
/* Máy tính: ô cao hơn như GioHangPC (150px) */
@media (min-width: 1300px) { .gh-the { min-height: 150px; } }
/* iPad hẹp: 4 cột nếu màn rất hẹp */
@media (min-width: 768px) and (max-width: 1000px) { .gh-luoi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }