/* =====================================================================
   pages-shop-cart-checkout.css
   Rieng cho 4 man mua hang: gio hang, thanh toan, trang don, tra cuu don.
   Chi duoc nap o dung 4 template do (qua block extra_head), KHONG nap toan site.

   Ly do ton tai: Bootstrap 5.3 sinh mau cho .btn-*, o input focus va checkbox
   bang HEX CUNG trong file build san, KHONG doc bien --bs-primary. Vi vay ghi de
   --bs-primary o theme-variables.css khong dong toi chung — phai ghi de bang
   selector nhu duoi day. Cac tien ich doc bien (.text-primary, .bg-primary) thi
   da an mau thuong hieu roi, khong lap lai o day.
   ===================================================================== */

/* ============================ NUT ============================ */

/* CTA chinh cua ca 4 man dung .btn-danger. Bootstrap cho #dc3545, lech voi do
   thuong hieu #e01a1a → keo ve dung token. */
.btn-danger {
  --bs-btn-bg: var(--vs-primary);
  --bs-btn-border-color: var(--vs-primary);
  --bs-btn-hover-bg: var(--vs-primary-light);
  --bs-btn-hover-border-color: var(--vs-primary-light);
  --bs-btn-active-bg: var(--vs-primary-dark);
  --bs-btn-active-border-color: var(--vs-primary-dark);
  --bs-btn-disabled-bg: var(--vs-primary-soft);
  --bs-btn-disabled-border-color: var(--vs-primary-soft);
  --bs-btn-focus-shadow-rgb: 224, 26, 26;
}

/* "Mua sau" / "Chuyen lai vao gio" */
.btn-outline-danger {
  --bs-btn-color: var(--vs-primary);
  --bs-btn-border-color: var(--vs-primary);
  --bs-btn-hover-bg: var(--vs-primary);
  --bs-btn-hover-border-color: var(--vs-primary);
  --bs-btn-active-bg: var(--vs-primary-dark);
  --bs-btn-active-border-color: var(--vs-primary-dark);
  --bs-btn-focus-shadow-rgb: 224, 26, 26;
}

/* "Chon them san pham" o man thanh toan: hanh dong PHU dat ngay duoi CTA do.
   Bootstrap cho mau xanh #0d6efd — lac long giua do + navy. Doi sang navy de
   thu bac ro rang: do = chot don, navy = quay lai mua tiep. */
.btn-primary {
  --bs-btn-bg: var(--vs-dark);
  --bs-btn-border-color: var(--vs-dark);
  --bs-btn-hover-bg: var(--vs-darker);
  --bs-btn-hover-border-color: var(--vs-darker);
  --bs-btn-active-bg: var(--vs-darker);
  --bs-btn-active-border-color: var(--vs-darker);
  --bs-btn-focus-shadow-rgb: 32, 47, 64;
}

/* Nut stepper − / + va "Chon tat ca": giu trung tinh, chi doi vien cho hop tone */
.btn-outline-secondary {
  --bs-btn-color: var(--vs-body);
  --bs-btn-border-color: var(--vs-border);
  --bs-btn-hover-bg: var(--vs-bg-soft);
  --bs-btn-hover-border-color: var(--vs-muted);
  --bs-btn-hover-color: var(--vs-dark);
  --bs-btn-active-bg: var(--vs-bg-grey);
  --bs-btn-active-border-color: var(--vs-muted);
  --bs-btn-active-color: var(--vs-dark);
  --bs-btn-disabled-color: var(--vs-muted);
  --bs-btn-disabled-border-color: var(--vs-border);
  --bs-btn-focus-shadow-rgb: 143, 143, 143;
}

/* ============================ GIA TIEN ============================ */

/* Moi cho hien gia deu dung .text-danger. Dong bo voi --vs-sale de gia tren
   man gio/thanh toan trung khop voi gia tren the san pham. */
.text-danger { color: var(--vs-sale) !important; }

/* ============================ O NHAP LIEU ============================ */

/* Man thanh toan co ~12 o nhap. Vien + quang focus mac dinh cua Bootstrap la
   xanh, day la cho lech mau lo nhat cua ca luong mua hang. */
.form-control, .form-select { border-color: var(--vs-border); }
.form-control:focus, .form-select:focus {
  border-color: var(--vs-primary);
  box-shadow: 0 0 0 .2rem rgba(224, 26, 26, .18);
}

/* Checkbox "Nho nguoi khac nhan hang" / "Xuat hoa don" va 2 nhom radio
   (hinh thuc nhan hang, phuong thuc thanh toan). */
.form-check-input { border-color: var(--vs-muted); }
.form-check-input:checked {
  background-color: var(--vs-primary);
  border-color: var(--vs-primary);
}
.form-check-input:focus {
  border-color: var(--vs-primary);
  box-shadow: 0 0 0 .2rem rgba(224, 26, 26, .18);
}

/* O 4 so cuoi SDT o man tra cuu don */
#phone_tail { letter-spacing: .35em; font-weight: 700; }

/* ============================ KHUNG THE ============================ */

/* Cac the trang deu la .bg-white.rounded-3.shadow-sm. Bootstrap cho ban kinh
   .5rem va bong rat nhat; keo ve token de trung voi the san pham o trang chu. */
.bg-white.rounded-3.shadow-sm {
  border-radius: var(--vs-radius) !important;
  box-shadow: var(--vs-shadow) !important;
}

/* Lien ket "Quay lai gio hang" */
.container > a[href*="gio-hang"] { color: var(--vs-dark); }
.container > a[href*="gio-hang"]:hover { color: var(--vs-primary); }

/* ============================ DONG HO DEM NGUOC ============================ */

/* Khoi dem nguoc han thanh toan o man don hang. Nen cam nhat de hut mat ma
   khong danh nhau voi do thuong hieu cua so tien. */
.vs-order-countdown {
  background: #fff7ed;
  border: 1px solid #fed7aa;
}
.vs-order-countdown [data-expires-at] { color: var(--vs-primary-dark); }

/* ============================ CO LAI TREN MAN HEP ============================ */

/* `min-w-0` la ten class cua Tailwind — Bootstrap 5 KHONG co, va theme cung chua
   dinh nghia. Ba template shop deu dat class nay len cot ten san pham de no co
   lai duoc; thieu dinh nghia thi min-width = auto, cot ten khong chiu hep hon noi
   dung nen ca hang bi day rong ra ngoai man. Dinh nghia dung mot cho tai day.
   Cung la dieu kien de .text-truncate trong cot do lam viec. */
.min-w-0 { min-width: 0; }

/* Hang san pham trong gio: 4 cot duoi (don gia, stepper, thanh tien, xoa) deu
   flex-shrink-0 va cong lai ~390px, khong bao gio vua man dien thoai. Boc chung
   trong .vs-cart-controls: desktop dung display:contents nen bo cuc y het truoc,
   man hep thi ca cum tut xuong dong thu hai. */
.vs-cart-controls { display: contents; }

@media (max-width: 575.98px) {
  .vs-cart-row { flex-wrap: wrap; row-gap: .5rem; }

  /* Bon cot dieu khien can ~341px trong khi hang chi rong ~319px tren may 390px,
     nen phai xep thanh luoi 2x2 thay vi mot hang ngang:
       don gia   |          | thanh tien
       [- sl +]  |          | [xoa]
     Cot giua la khoang dan, giu hai cot so thang hang voi nhau. */
  .vs-cart-controls {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .5rem;
    flex: 1 1 100%;
  }
  .vs-cart-unit  { grid-area: 1 / 1; min-width: 0 !important; text-align: left !important; }
  .vs-cart-qty   { grid-area: 2 / 1; width: 8rem !important; }
  .vs-cart-total { grid-area: 1 / 3; min-width: 0 !important; }
  .vs-cart-del   { grid-area: 2 / 3; justify-self: end; }

  /* Het duong ke cua Bootstrap giua cac hang thi tu ke lay, cho de phan biet */
  .vs-cart-row + .vs-cart-row { border-top: 1px solid var(--vs-border); }
}

/* ============================ HOP VOUCHER ============================ */

/* cms/templates/cms/shop/_voucher_box.html la template CORE, moi tenant bat shop
   deu dung chung → CO Y de HTML tran, khong gan class Bootstrap (theme khac co
   the khong dung Bootstrap). No chi chua san moc `.vs-voucher` cho theme tao kieu.
   Truoc day chua theme nao dung moc do nen nut "Ap dung" hien ra la nut mac dinh
   cua trinh duyet, lac hoan toan voi phan con lai cua trang. */
.vs-voucher h3 { font-size: 1rem; font-weight: 700; margin: 0 0 .75rem; }
.vs-voucher p { margin: 0 0 .5rem; font-size: .9375rem; }
.vs-voucher label { display: block; font-size: .8125rem; color: var(--vs-muted); margin-bottom: .25rem; }

.vs-voucher form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; }
.vs-voucher form > label { flex: 1 1 100%; margin-bottom: -.25rem; }

.vs-voucher input[name="code"] {
  flex: 1 1 8rem; min-width: 0;
  padding: .375rem .75rem;
  border: 1px solid var(--vs-border);
  border-radius: var(--vs-radius-sm);
  font-size: .9375rem; line-height: 1.5;
}
.vs-voucher input[name="code"]:focus {
  outline: none;
  border-color: var(--vs-primary);
  box-shadow: 0 0 0 .2rem rgba(224, 26, 26, .18);
}

.vs-voucher button {
  flex: 0 0 auto;
  padding: .375rem 1rem;
  border: 1px solid var(--vs-primary);
  border-radius: var(--vs-radius-sm);
  background: var(--vs-primary);
  color: #fff; font-weight: 600; font-size: .9375rem; line-height: 1.5;
  cursor: pointer; transition: var(--vs-transition);
}
.vs-voucher button:hover { background: var(--vs-primary-light); border-color: var(--vs-primary-light); }

/* Danh sach ma cong khai: nut ma la hanh dong phu → kieu vien */
.vs-voucher details { margin-top: .75rem; }
.vs-voucher summary { cursor: pointer; font-size: .875rem; color: var(--vs-dark); }
.vs-voucher summary:hover { color: var(--vs-primary); }
.vs-voucher ul { list-style: none; padding: 0; margin: .5rem 0 0; }
.vs-voucher li + li { margin-top: .5rem; }
.vs-voucher li form { align-items: center; gap: .5rem; }
.vs-voucher li button {
  background: transparent; color: var(--vs-primary);
  border-style: dashed; font-family: inherit;
}
.vs-voucher li button:hover { background: var(--vs-primary); color: #fff; border-style: solid; }
.vs-voucher li span { font-size: .875rem; }
.vs-voucher li small { display: block; flex: 1 1 100%; color: var(--vs-muted); }

/* Nhan "Don gia"/"Thanh tien" chi hien o kho hep (Bootstrap .d-sm-none), xep tren
   con so thay vi cung dong cho do chat */
@media (max-width: 575.98px) {
  .vs-cart-unit .d-sm-none, .vs-cart-total .d-sm-none { display: block !important; line-height: 1.2; }
}

/* ============================ QR vs CHUYEN KHOAN TAY ============================ */

/* Hai cot ngang hang 1:1. Vach ngan doi chieu theo huong xep: tu md tro len hai
   cot nam canh nhau nen ke doc ben trai cot phai; duoi md chung xep chong nen ke
   ngang phia tren. */
.vs-transfer-manual { border-top: 1px solid var(--vs-border); padding-top: 1rem; }

@media (min-width: 768px) {
  .vs-transfer-manual {
    border-top: 0;
    border-left: 1px solid var(--vs-border);
    padding-top: 0;
    padding-left: 1.5rem;
  }
}

/* So tai khoan va noi dung la hai chuoi khach phai chep chinh xac — cho font don
   cach de khong nham 0/O, 1/l. */
.vs-transfer-manual strong {
  font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
  letter-spacing: .02em;
}