/* ================================================================
   VIETADV THEME — woocommerce.css
   Style cho giỏ hàng, thanh toán, tài khoản, form đặt hàng online.
   Tải trên: trang giỏ hàng, thanh toán, tài khoản, shop, danh mục,
   chi tiết sản phẩm và trang chủ.
   ================================================================ */

/* ── Nút dùng chung của WooCommerce (.button) — đồng bộ với .btn ── */
.woocommerce .button,
.woocommerce a.button,
a.button, button.button, input.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 22px; min-height: 44px;
  font-size: .88rem; font-weight: 700; font-family: inherit;
  border-radius: var(--radius); border: 2px solid var(--primary);
  background: var(--primary); color: #fff !important;
  cursor: pointer; transition: all var(--transition);
  text-decoration: none; white-space: nowrap; line-height: 1;
}
.woocommerce .button:hover, a.button:hover, button.button:hover, input.button:hover {
  background: var(--primary-dark); border-color: var(--primary-dark);
}
.woocommerce .button.alt, a.button.alt, button.button.alt, input.button.alt {
  background: var(--vn-red); border-color: var(--vn-red);
}
.woocommerce .button.alt:hover { background: var(--vn-red-dark); border-color: var(--vn-red-dark); }
.woocommerce a.remove {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  color: var(--danger) !important; background: #fee2e2;
  font-size: 1.1rem; line-height: 1; text-decoration: none !important;
  transition: background var(--transition);
}
.woocommerce a.remove:hover { background: var(--danger); color: #fff !important; }

/* ── Form đặt hàng trên trang chi tiết sản phẩm ── */
.woocommerce div.product form.cart {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 0;
}
.woocommerce div.product form.cart .quantity { margin: 0; }
.woocommerce div.product form.cart .single_add_to_cart_button { flex: 1; min-width: 180px; font-size: .95rem; }
.woocommerce div.product .stock { font-size: .82rem; color: var(--muted); margin-top: 10px; }
.woocommerce div.product p.stock.in-stock  { color: var(--success); font-weight: 700; }
.woocommerce div.product p.stock.out-of-stock { color: var(--danger); font-weight: 700; }

/* ── Add to cart trên thẻ sản phẩm (loop) — dùng class .btn có sẵn ── */
.woocommerce a.add_to_cart_button.btn,
.woocommerce .added_to_cart.btn { width: 100%; }
.woocommerce .added_to_cart {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: .78rem; font-weight: 600; color: var(--primary);
}
a.add_to_cart_button.loading,
a.single_add_to_cart_button.loading { opacity: .6; pointer-events: none; }

/* ── Notices (thông báo thêm giỏ hàng / lỗi form) ── */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message, .woocommerce-error, .woocommerce-info {
  list-style: none; margin: 0 0 20px; padding: 14px 18px;
  border-radius: var(--radius); font-size: .88rem; line-height: 1.6;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
}
.woocommerce-message { background: #dcfce7; color: #166534; border-left: 4px solid var(--success); }
.woocommerce-error   { background: #fee2e2; color: #991b1b; border-left: 4px solid var(--danger); }
.woocommerce-info    { background: var(--primary-light); color: var(--primary-dark); border-left: 4px solid var(--primary); }
.woocommerce-error li, .woocommerce-message li, .woocommerce-info li { list-style: none; }
.woocommerce-message .button, .woocommerce-info .button {
  margin-left: auto; padding: 8px 16px; min-height: 36px; font-size: .8rem;
}

/* ================================================================
   TRANG GIỎ HÀNG
   ================================================================ */
.woocommerce-cart-form table.shop_table,
.woocommerce-checkout-review-order-table {
  width: 100%; border-collapse: collapse; margin-bottom: 24px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden;
}
.shop_table thead th {
  background: var(--bg-alt); color: var(--bg-dark); font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; text-align: left; padding: 12px 14px;
  border-bottom: 2px solid var(--border);
}
.shop_table td { padding: 14px; border-bottom: 1px solid var(--border); font-size: .88rem; vertical-align: middle; }
.shop_table tr:last-child td { border-bottom: none; }

.product-remove { width: 40px; text-align: center; }
.product-thumbnail { width: 76px; }
.product-thumbnail img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius); display: block; }
.product-name a { color: var(--bg-dark); font-weight: 600; }
.product-name a:hover { color: var(--primary); }
.product-name .variation { font-size: .78rem; color: var(--muted); margin-top: 4px; }
.product-price, .product-subtotal { font-weight: 700; color: var(--primary); white-space: nowrap; }

/* Bộ chọn số lượng */
.quantity { display: inline-flex; align-items: stretch; border: 1.5px solid var(--border); border-radius: var(--radius); overflow: hidden; width: fit-content; }
.quantity .qty {
  width: 52px; height: 40px; border: none; text-align: center;
  font-size: .95rem; font-weight: 600; color: var(--text); background: var(--bg);
  -moz-appearance: textfield;
}
.quantity .qty::-webkit-outer-spin-button, .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.woocommerce-cart-form .actions { padding: 16px 14px; }
.woocommerce-cart-form .coupon { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.woocommerce-cart-form .coupon label { display: none; }
.woocommerce-cart-form .coupon #coupon_code {
  height: 44px; padding: 0 14px; border: 1.5px solid var(--border); border-radius: var(--radius);
  font-size: .9rem; min-width: 180px; flex: 1;
}
.woocommerce-cart-form .coupon #coupon_code:focus { border-color: var(--primary); outline: none; }
.woocommerce-cart-form button[name="update_cart"] {
  background: transparent; color: var(--primary) !important; border-color: var(--primary);
}
.woocommerce-cart-form button[name="update_cart"]:hover { background: var(--primary); color: #fff !important; }
.woocommerce-cart-form .actions > .button { margin-left: auto; }
@media (max-width:640px) {
  .woocommerce-cart-form .actions { display: flex; flex-direction: column; gap: 12px; }
  .woocommerce-cart-form .actions > .button { margin-left: 0; width: 100%; justify-content: center; }
  .woocommerce-cart-form .coupon { width: 100%; }
}

/* Tổng tiền giỏ hàng */
.cart-collaterals { margin-top: 8px; }
.cart_totals {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 20px; max-width: 420px; margin-left: auto;
}
.cart_totals h2 { font-size: 1rem; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid var(--primary); }
.cart_totals table { width: 100%; }
.cart_totals table th, .cart_totals table td { padding: 10px 0; border-bottom: 1px solid var(--border); font-size: .88rem; text-align: left; }
.cart_totals table tr:last-child th, .cart_totals table tr:last-child td { border-bottom: none; }
.cart_totals .order-total th, .cart_totals .order-total td { font-size: 1rem; font-weight: 800; color: var(--danger); padding-top: 14px; }
.cart_totals .woocommerce-shipping-totals select { width: 100%; margin-top: 6px; }
.wc-proceed-to-checkout { margin-top: 16px; }
.wc-proceed-to-checkout .checkout-button { width: 100%; justify-content: center; font-size: .95rem; padding: 14px 22px; }

.cart-empty { text-align: center; padding: 40px 0 20px; font-size: .95rem; color: var(--muted); }
.return-to-shop { text-align: center; margin-top: 8px; }

/* Sản phẩm gợi ý cuối giỏ hàng */
.cross-sells { margin-top: 40px; }
.cross-sells h2 { font-size: 1.15rem; margin-bottom: 18px; }
.cross-sells ul.products { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; list-style: none; padding: 0; }
@media (min-width:640px) { .cross-sells ul.products { grid-template-columns: repeat(4,1fr); } }
.cross-sells ul.products li.product { list-style: none; }

/* ================================================================
   TRANG THANH TOÁN (CHECKOUT)
   ================================================================ */
.woocommerce-checkout .col2-set,
.woocommerce-checkout #customer_details { display: grid; grid-template-columns: 1fr; gap: 32px; margin-bottom: 32px; }
@media (min-width:900px) { .woocommerce-checkout .col2-set, .woocommerce-checkout #customer_details { grid-template-columns: 1fr 1fr; } }

.woocommerce-billing-fields h3, .woocommerce-additional-fields h3,
#order_review_heading {
  font-size: 1.05rem; font-weight: 700; color: var(--bg-dark);
  margin-bottom: 18px; padding-bottom: 10px; border-bottom: 2px solid var(--primary);
}

.woocommerce-checkout .form-row { margin-bottom: 16px; }
.woocommerce-checkout .form-row label { display: block; font-size: .84rem; font-weight: 600; color: var(--bg-dark); margin-bottom: 6px; }
.woocommerce-checkout .form-row label .required { color: var(--danger); text-decoration: none; }
.woocommerce-checkout .form-row .woocommerce-input-wrapper { display: block; }
.woocommerce-checkout input.input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  width: 100%; padding: 11px 14px; min-height: 44px;
  border: 1.5px solid var(--border); border-radius: var(--radius);
  font-size: 1rem; font-family: inherit; color: var(--text); background: var(--bg);
  transition: border-color var(--transition);
}
.woocommerce-checkout textarea { min-height: 90px; padding-top: 10px; }
.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus { border-color: var(--primary); outline: none; }
@media (min-width:560px) {
  .woocommerce-checkout .form-row-first { float: left; width: 48%; }
  .woocommerce-checkout .form-row-last  { float: right; width: 48%; }
  .woocommerce-checkout .form-row-wide  { clear: both; }
}
.woocommerce-checkout .create-account,
.woocommerce-checkout .woocommerce-account-fields { clear: both; padding-top: 6px; }
.woocommerce-checkout #ship-to-different-address { margin: 20px 0 12px; font-weight: 600; }
.woocommerce-checkout #ship-to-different-address label { display: flex; align-items: center; gap: 8px; cursor: pointer; }

/* Bảng đơn hàng bên phải */
#order_review, .woocommerce-checkout-review-order {
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 20px;
}
.woocommerce-checkout-review-order-table thead th {
  background: transparent; border-bottom: 2px solid var(--border); padding: 8px 0;
}
.woocommerce-checkout-review-order-table td, .woocommerce-checkout-review-order-table th { padding: 10px 0; background: transparent; }
.woocommerce-checkout-review-order-table .product-name { font-size: .86rem; }
.woocommerce-checkout-review-order-table .product-name .product-quantity { color: var(--muted); font-weight: 400; }
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td { font-size: 1.05rem; font-weight: 800; color: var(--danger); }

/* Phương thức thanh toán */
.woocommerce-checkout-payment { margin-top: 20px; }
ul.wc_payment_methods { list-style: none; padding: 0; margin: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg); }
ul.wc_payment_methods li.wc_payment_method { border-bottom: 1px solid var(--border); }
ul.wc_payment_methods li.wc_payment_method:last-child { border-bottom: none; }
ul.wc_payment_methods .payment_method_label,
ul.wc_payment_methods label { display: flex; align-items: center; gap: 10px; padding: 14px 16px; font-size: .9rem; font-weight: 600; color: var(--bg-dark); cursor: pointer; }
ul.wc_payment_methods input[type="radio"] { width: 18px; height: 18px; accent-color: var(--primary); }
ul.wc_payment_methods .payment_box {
  padding: 4px 16px 16px 44px; font-size: .84rem; color: var(--text-light); line-height: 1.7;
  background: var(--bg-alt);
}
ul.wc_payment_methods .payment_box p:first-child { margin-top: 0; }
ul.wc_payment_methods img { max-height: 22px; vertical-align: middle; margin-left: 4px; }

.woocommerce-terms-and-conditions-wrapper { margin: 18px 0; font-size: .84rem; }
.woocommerce-terms-and-conditions-wrapper label { display: flex; align-items: flex-start; gap: 8px; }

#place_order {
  width: 100%; justify-content: center; font-size: 1rem; padding: 15px 22px; margin-top: 16px;
  background: var(--vn-red); border-color: var(--vn-red);
}
#place_order:hover { background: var(--vn-red-dark); border-color: var(--vn-red-dark); }

/* Login form (checkout) */
.woocommerce-form-login, .woocommerce-form-coupon {
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 20px; margin-bottom: 24px; max-width: 420px;
}
.woocommerce-form-login .form-row, .woocommerce-form-coupon .form-row { margin-bottom: 14px; }
.woocommerce-form-login-toggle, .woocommerce-info { }

/* ================================================================
   TRANG THÀNH CÔNG (ORDER RECEIVED)
   ================================================================ */
.woocommerce-order {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 24px;
}
.woocommerce-order > .woocommerce-notice,
.woocommerce-thankyou-order-received {
  font-size: 1.05rem; font-weight: 700; color: var(--success); margin-bottom: 20px;
  display: flex; align-items: center; gap: 8px;
}
.woocommerce-order-overview {
  display: flex; flex-wrap: wrap; gap: 16px 32px; list-style: none; padding: 16px 0;
  margin: 0 0 24px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.woocommerce-order-overview li { font-size: .84rem; color: var(--muted); }
.woocommerce-order-overview li strong { display: block; color: var(--bg-dark); font-size: .95rem; margin-top: 2px; }

/* ================================================================
   TRANG TÀI KHOẢN (MY ACCOUNT)
   ================================================================ */
.woocommerce-account .woocommerce { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width:800px) { .woocommerce-account .woocommerce { grid-template-columns: 220px 1fr; align-items: start; } }
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--border); }
.woocommerce-MyAccount-navigation li:last-child { border-bottom: none; }
.woocommerce-MyAccount-navigation li a { display: block; padding: 12px 16px; font-size: .88rem; font-weight: 600; color: var(--text); }
.woocommerce-MyAccount-navigation li a:hover { color: var(--primary); background: var(--bg-alt); }
.woocommerce-MyAccount-navigation li.is-active a { color: var(--primary); background: var(--primary-light); }
.woocommerce-MyAccount-content table.shop_table { margin-top: 16px; }
.woocommerce-MyAccount-content .addresses .title h3 { font-size: 1rem; margin-bottom: 8px; }
.woocommerce-EditAccountForm .form-row, .woocommerce-address-fields .form-row,
.woocommerce-ResetPassword .form-row { margin-bottom: 16px; }
.woocommerce-EditAccountForm input.input-text,
.woocommerce-address-fields input.input-text,
.woocommerce-ResetPassword input.input-text,
.woocommerce form.login input.input-text,
.woocommerce form.register input.input-text {
  width: 100%; padding: 11px 14px; min-height: 44px; border: 1.5px solid var(--border);
  border-radius: var(--radius); font-size: 1rem; font-family: inherit;
}

/* ================================================================
   RESPONSIVE: bảng giỏ hàng dạng "thẻ" trên mobile
   ================================================================ */
@media (max-width:680px) {
  .shop_table thead { display: none; }
  .shop_table, .shop_table tbody, .shop_table tr, .shop_table td { display: block; width: 100%; }
  .shop_table tr { border-bottom: 1px solid var(--border); padding: 14px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
  .shop_table td { border: none; padding: 0; }
  .product-remove { order: 1; width: auto; }
  .product-thumbnail { order: 2; }
  .product-name { order: 3; flex: 1; min-width: 140px; }
  .product-price { order: 4; display: none; }
  .product-quantity { order: 5; }
  .product-subtotal { order: 6; margin-left: auto; }
  .cart_totals { max-width: 100%; }
}