/* =====================================================================
   BINCOO — Giỏ hàng & Thanh toán
   ---------------------------------------------------------------------
   Nạp sau styles.css + styles-light.css, chỉ ở hai trang này
   (xem inc/shop.php).

   Theme tắt CSS của WooCommerce nên file này phải nhận cả phần việc mà
   Woo vốn lo hộ — rõ nhất là giấu `.screen-reader-text` — chứ không chỉ
   sơn lại màu. Dùng đúng biến màu và nhịp khoảng cách của theme, không
   khai màu mới.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Nhãn chỉ dành cho trình đọc màn hình
   Phải nằm trong DOM để người dùng trình đọc màn hình nghe được, nhưng
   không được nhìn thấy. display:none là sai — trình đọc màn hình bỏ qua
   luôn. Dùng cách cắt khung 1px chuẩn.
   --------------------------------------------------------------------- */
.screen-reader-text,
.trang-mua .shop_table .product-remove .screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* Ngoại lệ: nhãn được focus tới (link "bỏ qua tới nội dung") phải hiện lại */
.screen-reader-text:focus {
  position: static !important;
  width: auto; height: auto;
  clip: auto; clip-path: none;
}

/* Ô quốc gia bị ẩn (chỉ bán trong nước) */
.trang-mua .bc-an { display: none !important; }

/* ---------------------------------------------------------------------
   2. Khung trang
   --------------------------------------------------------------------- */
.mua-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px var(--mx) 60px;
}
.mua-head { margin-bottom: 26px; }
.mua-head h1 {
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -.02em;
  margin-bottom: 10px;
}
.mua-sub {
  color: var(--ink-2);
  font-size: 15px;
  max-width: 52ch;
  line-height: 1.7;
}

/* ---------------------------------------------------------------------
   3. Ba bước
   --------------------------------------------------------------------- */
.mua-buoc {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  flex-wrap: wrap;
}
.mua-buoc li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-d);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 9px 16px 9px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-2);
}
.mua-buoc .so {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--bg-3);
  color: var(--ink-3);
  font-size: 11px;
}
.mua-buoc .dang { color: var(--ink); border-color: var(--crema); }
.mua-buoc .dang .so { background: var(--crema); color: #fff; }
.mua-buoc .xong { color: var(--ink-2); }
.mua-buoc .xong .so { background: var(--crema); color: #fff; }

@media (max-width: 620px) {
  .mua-buoc .ten { display: none; }
  .mua-buoc li { padding: 9px; }
}

/* ---------------------------------------------------------------------
   4. Thông báo của WooCommerce
   --------------------------------------------------------------------- */
.trang-mua .woocommerce-message,
.trang-mua .woocommerce-info,
.trang-mua .woocommerce-error,
.trang-mua .woocommerce-notice {
  list-style: none;
  margin: 0 0 22px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--r);
  background: var(--bg-2);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}
.trang-mua .woocommerce-message { border-left-color: var(--crema); }
.trang-mua .woocommerce-info    { border-left-color: var(--line-2); }
.trang-mua .woocommerce-error   { border-left-color: var(--red); }
.trang-mua .woocommerce-error li { list-style: none; }
.trang-mua .woocommerce-message .button,
.trang-mua .woocommerce-info .button { margin-left: auto; }

/* ---------------------------------------------------------------------
   5. Nút — mượn hình dáng .btn của theme
   --------------------------------------------------------------------- */
.trang-mua .button,
.trang-mua button[type="submit"],
.trang-mua .checkout-button {
  font-family: var(--font-d);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 14px 24px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1;
}
.trang-mua .button:hover,
.trang-mua button[type="submit"]:hover {
  border-color: var(--crema);
  color: var(--crema);
}
/* Nút chính: sang bước sau / đặt hàng */
.trang-mua .checkout-button,
.trang-mua #place_order {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  width: 100%;
  padding: 18px 32px;
  font-size: 14px;
}
.trang-mua .checkout-button:hover,
.trang-mua #place_order:hover {
  background: var(--red-2);
  border-color: var(--red-2);
  color: #fff;
  transform: translateY(-2px);
}
.trang-mua button[disabled],
.trang-mua .button[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

/* ---------------------------------------------------------------------
   6. Bảng giỏ hàng
   Trên máy tính là bảng thật; dưới 780px đổ thành từng thẻ một món.
   --------------------------------------------------------------------- */
.trang-mua .shop_table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg-2);
}
.trang-mua .shop_table thead th {
  font-family: var(--font-d);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-3);
  white-space: nowrap;
}
.trang-mua .shop_table td {
  padding: 18px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  font-size: 15px;
  color: var(--ink);
}
.trang-mua .shop_table tbody tr:last-child td { border-bottom: 0; }

.trang-mua .cart_item .product-thumbnail { width: 92px; }
.trang-mua .cart_item .product-thumbnail img {
  width: 76px; height: 76px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--r);
  display: block;
  background: var(--bg-3);
}
.trang-mua .cart_item .product-name a {
  font-family: var(--font-d);
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.35;
  display: inline-block;
}
.trang-mua .cart_item .product-name a:hover { color: var(--crema); }
/* Cỡ / dung tích của biến thể */
.trang-mua .cart_item .variation {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--ink-2);
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
}
.trang-mua .cart_item .variation dt { font-weight: 500; }
.trang-mua .cart_item .variation dd { margin: 0; }
.trang-mua .cart_item .variation p { margin: 0; }

.trang-mua .product-price,
.trang-mua .product-subtotal { white-space: nowrap; }
.trang-mua .product-subtotal { font-weight: 700; font-family: var(--font-d); }

/* Nút xoá món */
.trang-mua .product-remove { width: 44px; }
.trang-mua .product-remove a.remove {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 17px;
  line-height: 1;
  text-decoration: none;
  transition: border-color .2s, color .2s, background .2s;
}
.trang-mua .product-remove a.remove:hover {
  border-color: var(--red);
  color: var(--red);
  background: var(--bg-3);
}

/* Ô số lượng — dùng lại hình dáng .qty của trang sản phẩm */
.trang-mua .quantity { display: inline-flex; }
.trang-mua .quantity input[type="number"] {
  width: 68px;
  padding: 10px;
  text-align: center;
  font-family: var(--font-d);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
}
.trang-mua .quantity input:focus-visible { outline: 2px solid var(--crema); outline-offset: 2px; }

/* Hàng cuối: mã giảm giá + cập nhật giỏ */
.trang-mua .actions {
  padding: 18px 16px;
  background: var(--bg-3);
  border-top: 1px solid var(--line);
}
.trang-mua .actions .coupon {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.trang-mua .actions .coupon label {
  font-family: var(--font-d);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.trang-mua .actions input[type="text"] {
  padding: 13px 14px;
  min-width: 200px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  color: var(--ink);
  font-family: var(--font-b);
  font-size: 14px;
}
.trang-mua .actions button[name="update_cart"] { margin-left: auto; }

/* Đổ thành thẻ trên màn hẹp */
@media (max-width: 780px) {
  .trang-mua .shop_table.cart thead { display: none; }
  .trang-mua .shop_table.cart,
  .trang-mua .shop_table.cart tbody,
  .trang-mua .shop_table.cart tr,
  .trang-mua .shop_table.cart td { display: block; width: auto; }
  .trang-mua .shop_table.cart tr.cart_item {
    position: relative;
    border-bottom: 1px solid var(--line);
    padding: 16px 16px 16px 108px;
    min-height: 108px;
  }
  .trang-mua .shop_table.cart tr.cart_item td {
    border: 0;
    padding: 3px 0;
  }
  .trang-mua .cart_item .product-thumbnail {
    position: absolute;
    left: 16px; top: 16px;
    width: 76px;
  }
  .trang-mua .cart_item .product-remove {
    position: absolute;
    right: 12px; top: 14px;
  }
  .trang-mua .cart_item .product-name { padding-right: 40px !important; }
  /* Nhãn cột lấy từ data-title mà WooCommerce đã gắn sẵn */
  .trang-mua .shop_table.cart td.product-price::before,
  .trang-mua .shop_table.cart td.product-subtotal::before {
    content: attr(data-title) ": ";
    font-size: 13px;
    color: var(--ink-3);
  }
  .trang-mua .shop_table.cart td.product-price { color: var(--ink-2); font-size: 14px; }
  .trang-mua .actions button[name="update_cart"] { margin-left: 0; width: 100%; }
}

/* ---------------------------------------------------------------------
   7. Cột tổng tiền
   --------------------------------------------------------------------- */
.trang-mua .cart-collaterals { margin-top: 30px; }
.trang-mua .cart_totals {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-2);
  padding: clamp(20px, 3vw, 30px);
  max-width: 440px;
  margin-left: auto;
}
.trang-mua .cart_totals h2 {
  font-family: var(--font-d);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 16px;
  color: var(--ink);
}
.trang-mua .cart_totals .shop_table {
  border: 0;
  background: transparent;
  border-radius: 0;
}
.trang-mua .cart_totals th,
.trang-mua .cart_totals td {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  font-size: 15px;
  text-align: left;
  white-space: normal;
}
.trang-mua .cart_totals th {
  font-family: var(--font-b);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
  width: 45%;
}
.trang-mua .cart_totals td { text-align: right; }
.trang-mua .cart_totals .order-total th,
.trang-mua .cart_totals .order-total td {
  border-bottom: 0;
  padding-top: 16px;
  font-family: var(--font-d);
  font-weight: 800;
  font-size: 20px;
  color: var(--ink);
}
.trang-mua .cart_totals .order-total .amount { color: var(--red); }
.trang-mua .wc-proceed-to-checkout { margin-top: 20px; }

/* Phí vận chuyển */
.trang-mua .woocommerce-shipping-methods {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: right;
}
.trang-mua .woocommerce-shipping-methods li { margin-bottom: 6px; }
.trang-mua .woocommerce-shipping-destination,
.trang-mua .shipping-calculator-button {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.6;
}
.trang-mua .shipping-calculator-form { margin-top: 12px; text-align: left; }

/* ---------------------------------------------------------------------
   8. Giỏ rỗng
   --------------------------------------------------------------------- */
.trang-mua .cart-empty {
  font-family: var(--font-d);
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 8px;
}
.trang-mua .return-to-shop { margin-top: 20px; }

/* ---------------------------------------------------------------------
   9. Trang thanh toán — hai cột
   --------------------------------------------------------------------- */
@media (min-width: 900px) {
  .trang-mua form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
    gap: 0 40px;
    align-items: start;
  }
  /* Đặt ô tường minh, không để lưới tự xếp.
     WooCommerce in ra ba khối anh em: #customer_details, rồi
     #order_review_heading, rồi #order_review. Nếu chỉ khai grid-column:2 cho
     hai khối sau thì chúng rơi xuống hàng 2 và hàng 3, mà chiều cao hàng 1
     do #customer_details quyết định — tóm tắt đơn bị đẩy xuống tận đáy
     trang, cạnh một cột trái đã hết nội dung. Cho khối trái trải hai hàng
     thì hai khối phải mới nằm ngang tầm với nó. */
  .trang-mua form.checkout #customer_details {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .trang-mua form.checkout #order_review_heading {
    grid-column: 2;
    grid-row: 1;
  }
  .trang-mua form.checkout #order_review {
    grid-column: 2;
    grid-row: 2;
    position: sticky;
    top: 90px;
  }
}

.trang-mua form.checkout h3,
.trang-mua #order_review_heading {
  font-family: var(--font-d);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 18px;
  color: var(--ink);
}
.trang-mua form.checkout .col2-set .col-1,
.trang-mua form.checkout .col2-set .col-2 { width: auto; float: none; }

/* Ô nhập — bám theo .field của biểu mẫu liên hệ */
.trang-mua .form-row {
  display: flex;
  flex-direction: column;
  margin: 0 0 16px;
  padding: 0;
}
@media (min-width: 620px) {
  .trang-mua #customer_details .woocommerce-billing-fields__field-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
  }
  .trang-mua .form-row-wide { grid-column: 1 / -1; }
}
.trang-mua .form-row label {
  font-family: var(--font-d);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 8px;
}
.trang-mua .form-row label .required {
  color: var(--red);
  text-decoration: none;
  margin-left: 2px;
}
.trang-mua .form-row .optional { color: var(--ink-3); font-weight: 500; }
.trang-mua .form-row input[type="text"],
.trang-mua .form-row input[type="tel"],
.trang-mua .form-row input[type="email"],
.trang-mua .form-row input[type="password"],
.trang-mua .form-row textarea,
.trang-mua .form-row select {
  width: 100%;
  padding: 14px 15px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  color: var(--ink);
  font-family: var(--font-b);
  font-size: 15px;
  line-height: 1.4;
}
.trang-mua .form-row textarea { min-height: 110px; resize: vertical; }
.trang-mua .form-row input::placeholder,
.trang-mua .form-row textarea::placeholder { color: var(--ink-3); }
.trang-mua .form-row input:focus-visible,
.trang-mua .form-row textarea:focus-visible,
.trang-mua .form-row select:focus-visible {
  outline: 2px solid var(--crema);
  outline-offset: 2px;
  border-color: var(--crema);
}
.trang-mua .form-row.woocommerce-invalid input,
.trang-mua .form-row.woocommerce-invalid select { border-color: var(--red); }
.trang-mua .form-row.woocommerce-validated input { border-color: var(--line-2); }

/* Bảng tóm tắt đơn bên phải */
.trang-mua #order_review {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-2);
  padding: clamp(20px, 3vw, 28px);
}
.trang-mua .woocommerce-checkout-review-order-table {
  border: 0;
  background: transparent;
  margin-bottom: 20px;
}
.trang-mua .woocommerce-checkout-review-order-table thead th {
  background: transparent;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--line);
}
.trang-mua .woocommerce-checkout-review-order-table td,
.trang-mua .woocommerce-checkout-review-order-table th {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
  background: transparent;
}
.trang-mua .woocommerce-checkout-review-order-table .product-name { padding-right: 14px; }
.trang-mua .woocommerce-checkout-review-order-table .product-total,
.trang-mua .woocommerce-checkout-review-order-table td.product-total { text-align: right; white-space: nowrap; }
.trang-mua .woocommerce-checkout-review-order-table .order-total th,
.trang-mua .woocommerce-checkout-review-order-table .order-total td {
  border-bottom: 0;
  font-family: var(--font-d);
  font-weight: 800;
  font-size: 19px;
  padding-top: 16px;
}
.trang-mua .woocommerce-checkout-review-order-table .order-total .amount { color: var(--red); }
.trang-mua .product-quantity { color: var(--ink-3); }

/* Cách thanh toán */
.trang-mua .wc_payment_methods {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}
.trang-mua .wc_payment_method {
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color .2s;
}
.trang-mua .wc_payment_method:has(input:checked) { border-color: var(--crema); }
.trang-mua .wc_payment_method > label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 16px;
  cursor: pointer;
  font-family: var(--font-d);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  margin: 0;
  letter-spacing: 0;
  text-transform: none;
}
.trang-mua .wc_payment_method > input[type="radio"] {
  accent-color: var(--crema);
  width: 17px; height: 17px;
  margin-left: 16px;
  flex: none;
}
.trang-mua .payment_box {
  background: var(--bg-3);
  border-top: 1px solid var(--line);
  padding: 15px 16px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-2);
}
.trang-mua .payment_box p:last-child { margin-bottom: 0; }
/* Thông tin chuyển khoản: giữ đúng khối, số tài khoản không được xuống dòng */
.trang-mua .payment_box .wc-bacs-bank-details {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}
.trang-mua .payment_box .wc-bacs-bank-details li {
  display: flex;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--line-2);
  font-size: 13.5px;
}
.trang-mua .payment_box .wc-bacs-bank-details li:last-child { border-bottom: 0; }
.trang-mua .payment_box .wc-bacs-bank-details strong { color: var(--ink); }

/* Điều khoản + nút đặt hàng */
.trang-mua .woocommerce-terms-and-conditions-wrapper { margin-bottom: 16px; }
.trang-mua .form-row.place-order { margin-bottom: 0; }

/* Ba dòng trấn an dưới nút đặt hàng (inc/shop.php) */
.mua-yen-tam {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.mua-yen-tam li {
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.5;
}
.mua-yen-tam li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--crema);
  font-weight: 700;
}
.mua-hotline {
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--ink-3);
  text-align: center;
}
.mua-hotline a { color: var(--crema); font-weight: 600; }

/* ---------------------------------------------------------------------
   10. Trang cảm ơn sau khi đặt
   --------------------------------------------------------------------- */
.trang-mua .woocommerce-order-overview,
.trang-mua .woocommerce-order-details,
.trang-mua .woocommerce-customer-details {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-2);
  padding: clamp(20px, 3vw, 28px);
  margin-bottom: 22px;
}
.trang-mua .woocommerce-order-overview {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px;
  margin-left: 0;
  padding-left: clamp(20px, 3vw, 28px);
}
.trang-mua .woocommerce-order-overview li {
  font-family: var(--font-d);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 0;
  padding: 0;
}
.trang-mua .woocommerce-order-overview li strong {
  display: block;
  margin-top: 7px;
  font-family: var(--font-b);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.trang-mua .woocommerce-order-details__title,
.trang-mua .woocommerce-column__title {
  font-family: var(--font-d);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.trang-mua .woocommerce-order .woocommerce-thankyou-order-received {
  font-size: 16px;
  color: var(--ink);
  line-height: 1.7;
  margin-bottom: 22px;
}