/**
 * =============================================================================
 *  GIAO DIỆN TRANG GIỎ HÀNG + THANH TOÁN (ALLA)
 * =============================================================================
 *  CHỈ LÀ CSS. Không sửa một dòng template, không thêm JS, không đổi class nào
 *  của WooCommerce -> mọi chức năng (cập nhật giỏ, mã giảm giá, chọn phương
 *  thức thanh toán, validate, đặt hàng...) chạy y nguyên như mặc định.
 *
 *  Chỉ nạp ở trang giỏ hàng / thanh toán / cảm ơn (xem alla_enqueue_cart_checkout_css
 *  trong functions.php) nên các trang khác không phải tải file này.
 *
 *  Bố cục:
 *    - PC : 2 cột - danh sách bên trái, bảng tiền dính (sticky) bên phải.
 *    - Mobile: 1 cột, mỗi sản phẩm là 1 thẻ (card) thay cho hàng bảng.
 *
 *  MỤC LỤC
 *    1. Biến màu / khoảng cách
 *    2. Thành phần dùng chung (nút, ô nhập, thông báo, tiêu đề)
 *    3. Trang giỏ hàng
 *    4. Trang thanh toán
 *    5. Trang cảm ơn / chi tiết đơn hàng
 *    6. Responsive
 */

/* ==========================================================================
   1. BIẾN
   ========================================================================== */
.woocommerce-cart,
.woocommerce-checkout,
.woocommerce-order-received {
  --alla-surface: #fff;
  --alla-surface-soft: #f8fafc;
  --alla-line: #e6eaf0;
  --alla-line-strong: #d3dae4;
  --alla-text: #16202e;
  --alla-text-soft: #64748b;
  --alla-accent: var(--colorMain, #fe5d9d);
  --alla-blue: var(--colorMain2, #3565a3);
  --alla-radius: 14px;
  --alla-radius-sm: 10px;
  --alla-shadow: 0 1px 2px rgba(16, 32, 46, .04), 0 6px 20px rgba(16, 32, 46, .05);
  --alla-focus: 0 0 0 3px rgba(254, 93, 157, .18);
}

/* ==========================================================================
   2. THÀNH PHẦN DÙNG CHUNG
   ========================================================================== */

/* --- Tiêu đề khối --- */
.woocommerce-cart .node-detail h1.title-list,
.woocommerce-checkout .node-detail h1.title-list {
  margin-bottom: 22px;
}
.woocommerce-checkout .woocommerce h3,
.woocommerce-cart .cart_totals > h2 {
  font-size: 17px;
  font-weight: 700;
  color: var(--alla-text);
  margin: 0 0 16px;
  letter-spacing: -.01em;
}

/**
 * --- Ô nhập MỘT DÒNG dùng chung cho cả 2 trang ---
 * (ô mã giảm giá ở giỏ hàng, các ô của trang thanh toán nằm ngoài .form-row)
 * KHÔNG liệt kê textarea ở đây: nó có khối riêng ngay bên dưới, để tránh
 * chiều cao 46px của ô một dòng dính nhầm sang ô nhiều dòng.
 */
.woocommerce-cart .woocommerce input[type="text"],
.woocommerce-cart .woocommerce input[type="tel"],
.woocommerce-cart .woocommerce input[type="email"],
.woocommerce-checkout .woocommerce input[type="text"],
.woocommerce-checkout .woocommerce input[type="tel"],
.woocommerce-checkout .woocommerce input[type="email"],
.woocommerce-checkout .woocommerce input[type="password"],
.woocommerce-checkout .woocommerce select {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  font-size: 15px;
  color: var(--alla-text);
  background: var(--alla-surface);
  border: 1px solid var(--alla-line-strong);
  border-radius: var(--alla-radius-sm);
  box-shadow: none;
  transition: border-color .15s, box-shadow .15s;
}
/**
 * ---------------------------------------------------------------------------
 * Ô nhập trong .form-row của trang thanh toán - BẢN ĐẶC HIỆU CAO
 * ---------------------------------------------------------------------------
 * Vì sao phải viết riêng thay vì dùng bộ chọn ở trên:
 *
 *   input : ".woocommerce-checkout .woocommerce input[type=text]" = (0,3,1)
 *           -> thắng mọi quy tắc đang có, hiển thị đúng ý.
 *   textarea: ".woocommerce-checkout .woocommerce textarea"       = (0,2,1)
 *           -> THUA ".woocommerce form .form-row textarea" = (0,2,2), quy tắc
 *              này có ở CẢ woocommerce.css (height:4em) lẫn style-common.css
 *              (height:200px). Kết quả: textarea cao và trông khác hẳn dãy
 *              input phía trên.
 *
 * Bộ chọn dưới đây là (0,3,2) và (0,4,2) nên chắc chắn thắng, không cần
 * !important. Tách 2 nhóm "một dòng" / "nhiều dòng" vì padding và line-height
 * khác nhau, còn viền - bo góc - màu - cỡ chữ thì dùng chung để trông đồng bộ.
 */
.woocommerce-checkout .woocommerce form .form-row input.input-text,
.woocommerce-checkout .woocommerce form .form-row textarea,
.woocommerce-checkout .woocommerce form .form-row select {
  box-sizing: border-box;
  display: block;
  width: 100%;
  margin: 0;
  font-family: inherit;
  font-size: 15px;
  color: var(--alla-text);
  background: var(--alla-surface);
  border: 1px solid var(--alla-line-strong);
  border-radius: var(--alla-radius-sm);
  box-shadow: none;
  transition: border-color .15s, box-shadow .15s;
}
/* Ô một dòng */
.woocommerce-checkout .woocommerce form .form-row input.input-text,
.woocommerce-checkout .woocommerce form .form-row select {
  height: 46px;
  padding: 0 14px;
}
/* Ô nhiều dòng: cùng viền, cùng bo góc, cùng padding ngang với ô một dòng */
.woocommerce-checkout .woocommerce form .form-row textarea {
  height: 92px;
  min-height: 92px;
  padding: 12px 14px;
  line-height: 1.5;
  resize: vertical;
  overflow: auto;
}
.woocommerce-checkout .woocommerce form .form-row input.input-text:focus,
.woocommerce-checkout .woocommerce form .form-row textarea:focus,
.woocommerce-checkout .woocommerce form .form-row select:focus {
  outline: 0;
  border-color: var(--alla-accent);
  box-shadow: var(--alla-focus);
}
.woocommerce-cart .woocommerce input:focus,
.woocommerce-checkout .woocommerce input:focus,
.woocommerce-checkout .woocommerce textarea:focus,
.woocommerce-checkout .woocommerce select:focus {
  outline: 0;
  border-color: var(--alla-accent);
  box-shadow: var(--alla-focus);
}
.woocommerce-checkout .woocommerce ::placeholder {
  color: #a3aebd;
}

/* --- Nút chính (đặt hàng / tiến hành thanh toán) --- */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout #payment #place_order {
  display: block;
  width: 100%;
  float: none;          /* bỏ float:right mặc định của WooCommerce */
  height: 52px;
  line-height: 52px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--alla-accent);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  letter-spacing: .01em;
  transition: filter .15s, transform .06s, box-shadow .15s;
  box-shadow: 0 6px 16px rgba(254, 93, 157, .28);
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-checkout #payment #place_order:hover {
  filter: brightness(1.05);
  color: #fff;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:active,
.woocommerce-checkout #payment #place_order:active {
  transform: translateY(1px);
}

/* --- Nút phụ (áp dụng mã giảm giá) --- */
.woocommerce-cart .coupon button.button,
.woocommerce-checkout .checkout_coupon button.button {
  height: 46px;
  padding: 0 22px;
  border: 1px solid var(--alla-accent);
  border-radius: 999px;
  background: transparent;
  color: var(--alla-accent);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.woocommerce-cart .coupon button.button:hover,
.woocommerce-checkout .checkout_coupon button.button:hover {
  background: var(--alla-accent);
  color: #fff;
}

/* --- Thông báo --- */
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-info,
.woocommerce-cart .woocommerce-error,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-error {
  /* Khai báo cả 4 cạnh: Woo chỉ đặt border-top, phần còn lại bị .table-bordered
     của Bootstrap và CSS cũ của theme kẻ vào nên trước đó hiện ra viền tối */
  border: 1px solid #d6e4f5;
  border-left: 3px solid var(--alla-blue);
  border-radius: var(--alla-radius-sm);
  background: #f1f6fc;
  color: var(--alla-text);
  padding: 14px 18px;
  font-size: 14.5px;
  line-height: 1.55;
}
.woocommerce-cart .woocommerce-error,
.woocommerce-checkout .woocommerce-error {
  border-color: #f3d3d3;
  border-left-color: #d64545;
  background: #fdf2f2;
}
/* Nút "Xem giỏ hàng" trong thông báo */
.woocommerce-cart .woocommerce-message .button,
.woocommerce-checkout .woocommerce-message .button {
  height: 36px;
  line-height: 34px;
  padding: 0 16px;
  border: 1px solid var(--alla-accent);
  border-radius: 999px;
  background: transparent;
  color: var(--alla-accent);
  font-size: 13.5px;
  font-weight: 700;
}
.woocommerce-cart .woocommerce-message .button:hover,
.woocommerce-checkout .woocommerce-message .button:hover {
  background: var(--alla-accent);
  color: #fff;
}
/**
 * Tắt icon mặc định của Woo ở CẢ BA loại thông báo.
 * Woo đặt icon "position:absolute; top:1em; left:1.5em" và chừa chỗ cho nó bằng
 * "padding: 1em 2em 1em 3.5em". Bố cục mới chỉ dùng padding-left 18px nên nếu
 * còn icon thì nó ĐÈ LÊN dòng chữ đầu tiên (dễ thấy nhất ở khối báo lỗi).
 */
.woocommerce-cart .woocommerce-message::before,
.woocommerce-cart .woocommerce-info::before,
.woocommerce-cart .woocommerce-error::before,
.woocommerce-checkout .woocommerce-message::before,
.woocommerce-checkout .woocommerce-info::before,
.woocommerce-checkout .woocommerce-error::before {
  display: none;
}

/* --- Danh sách lỗi bên trong .woocommerce-error --- */
.woocommerce-cart .woocommerce-error,
.woocommerce-checkout .woocommerce-error {
  margin: 0 0 18px;
}
.woocommerce-cart .woocommerce-error li,
.woocommerce-checkout .woocommerce-error li {
  margin: 0 0 6px;
  line-height: 1.55;
  color: #a12a2a;
}
.woocommerce-cart .woocommerce-error li:last-child,
.woocommerce-checkout .woocommerce-error li:last-child {
  margin-bottom: 0;
}
/* WooCommerce bọc tên trường bằng link nhảy tới ô nhập -> bỏ gạch chân cho gọn,
   vẫn giữ link để bấm vào là con trỏ nhảy đúng ô đang thiếu */
.woocommerce-cart .woocommerce-error li a,
.woocommerce-checkout .woocommerce-error li a {
  color: #a12a2a;
  text-decoration: none;
  border-bottom: 1px solid rgba(161, 42, 42, .35);
}
.woocommerce-cart .woocommerce-error li a:hover,
.woocommerce-checkout .woocommerce-error li a:hover {
  color: #d64545;
  border-bottom-color: #d64545;
}

/* ==========================================================================
   3. TRANG GIỎ HÀNG
   ========================================================================== */

/* --- Bố cục 2 cột: danh sách trái | bảng tiền phải --- */
@media (min-width: 992px) {
  .woocommerce-cart .node-detail > .woocommerce {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
    gap: 24px;
  }
  .woocommerce-cart .node-detail > .woocommerce > .woocommerce-notices-wrapper {
    grid-column: 1 / -1;
  }
  /* Giỏ rỗng: "Chưa có sản phẩm nào" và nút "Quay trở lại cửa hàng" là 2 thẻ
     anh em, nếu không cho trải hết hàng thì lưới đẩy nút sang cột phải, nhìn
     như 2 khối rời nhau. */
  .woocommerce-cart .node-detail > .woocommerce > .wc-empty-cart-message,
  .woocommerce-cart .node-detail > .woocommerce > .cart-empty,
  .woocommerce-cart .node-detail > .woocommerce > .return-to-shop {
    /* .wc-empty-cart-message là lớp bọc của WooCommerce đời mới, .cart-empty là
       của bản cũ - liệt kê cả hai để không phụ thuộc phiên bản */
    grid-column: 1 / -1;
  }
  /* display:contents -> .cart_totals và .cross-sells trở thành ô lưới trực tiếp,
     nhờ vậy bảng tiền nằm cột phải còn "sản phẩm mua kèm" trải hết chiều ngang */
  .woocommerce-cart .cart-collaterals {
    display: contents;
  }
  /* BẮT BUỘC: woocommerce-layout.css gắn clearfix ::before/::after vào
     .cart-collaterals. Khi cha là display:contents thì 2 pseudo-element này cũng
     thành ô lưới và chiếm mất chỗ, đẩy bảng tiền xuống hàng dưới. */
  .woocommerce-cart .cart-collaterals::before,
  .woocommerce-cart .cart-collaterals::after {
    display: none;
  }
  .woocommerce-cart .cart-collaterals .cross-sells {
    grid-column: 1 / -1;
    width: 100%;
    float: none;
  }
  .woocommerce-cart .cart-collaterals .cart_totals {
    position: sticky;
    top: 20px;
    width: auto;
    float: none;
  }
}

/* --- Bảng giỏ hàng: bỏ hẳn dáng bảng, đổi thành danh sách thẻ --- */
.woocommerce-cart table.cart.woocommerce-cart-form__contents {
  display: block;
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: separate;
  background: none;
}
.woocommerce-cart table.cart.woocommerce-cart-form__contents thead {
  display: none;   /* bố cục thẻ đã tự diễn giải, không cần hàng tiêu đề */
}
.woocommerce-cart table.cart.woocommerce-cart-form__contents tbody {
  display: block;
}
.woocommerce-cart table.cart td,
.woocommerce-cart table.cart th {
  border: 0 !important;   /* .table-bordered của Bootstrap kẻ viền mọi ô */
  padding: 0;
  background: none;
  vertical-align: middle;
}
/**
 * Bootstrap 5 kẻ viền lên chính thẻ <tr> chứ không chỉ <td>:
 *   .table-bordered > :not(caption) > *   { border-width: 1px 0 }
 *   .table-bordered > :not(caption) > * > * { border-width: 0 1px }
 * Khi <tr> chuyển sang display:block thì 2 viền trên/dưới đó hiện thành vạch
 * tối chạy hết chiều ngang. Phải tắt ở cả 2 bảng (giỏ hàng + đơn hàng).
 * Không dùng !important để quy tắc viền thẻ sản phẩm bên dưới vẫn ghi đè được.
 */
.woocommerce-cart table.cart > thead > tr,
.woocommerce-cart table.cart > tbody > tr,
.woocommerce-cart table.cart > tbody > tr > td,
.woocommerce-checkout table.woocommerce-checkout-review-order-table > thead > tr,
.woocommerce-checkout table.woocommerce-checkout-review-order-table > tbody > tr,
.woocommerce-checkout table.woocommerce-checkout-review-order-table > tfoot > tr {
  border-width: 0;
  background: none;
  box-shadow: none;   /* .table dùng inset box-shadow để tô nền ô */
}

/* Nhãn "Sản phẩm:", "Giá:"... mà woocommerce-smallscreen.css chèn ở mobile:
   bố cục thẻ đã rõ nghĩa nên tắt đi cho gọn */
.woocommerce-cart table.shop_table_responsive tr td::before,
.woocommerce-cart table.shop_table_responsive tr td::after {
  content: none !important;
}

/**
 * --- Một dòng sản phẩm = một thẻ ---
 *
 * Bố cục MẶC ĐỊNH (dùng cho gần như mọi bề ngang): ảnh trái, thành tiền phải,
 * ở giữa xếp dọc tên / giá / số lượng. Kiểu này luôn chừa được nhiều chỗ nhất
 * cho TÊN SẢN PHẨM.
 *
 * Các cột: auto = co đúng bằng nội dung (giá tiền dài bao nhiêu rộng bấy nhiêu),
 * chỉ cột tên dùng minmax(0,1fr) để nuốt hết phần dư.
 *
 * Vì sao KHÔNG mặc định xếp 1 hàng ngang 5 cột: Bootstrap khoá .container ở
 * 960px khi viewport 992-1199 (đúng khoảng rơi vào khi phóng trình duyệt lên
 * 125-150%). Lúc đó cột danh sách chỉ còn ~510px trong khi 5 cột cố định đã
 * ngốn ~560px -> cột tên bị ép về 0 và tiêu đề rớt xuống mỗi dòng một chữ cái.
 */
.woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item {
  display: grid;
  position: relative;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "thumb name  subtotal"
    "thumb price subtotal"
    "thumb qty   subtotal";
  align-items: center;
  gap: 8px 16px;
  margin-bottom: 12px;
  padding: 14px 44px 14px 14px;
  background: var(--alla-surface);
  border: 1px solid var(--alla-line);
  border-radius: var(--alla-radius);
  box-shadow: var(--alla-shadow);
}

/**
 * Chỉ khi thật sự rộng rãi (>=1280px, lúc .container đạt 1140px) mới trải
 * thành 1 hàng ngang cho thoáng. Kiểm tra: cột danh sách ~756px, các cột
 * co theo nội dung ngốn ~410px -> tên vẫn còn ~290px.
 */
@media (min-width: 1280px) {
  .woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item {
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    grid-template-areas: "thumb name price qty subtotal";
    gap: 16px;
    padding: 14px 44px 14px 14px;
  }
}
.woocommerce-cart td.product-thumbnail { grid-area: thumb; }
.woocommerce-cart td.product-name      { grid-area: name; }
.woocommerce-cart td.product-price     { grid-area: price; }
.woocommerce-cart td.product-quantity  { grid-area: qty; }
.woocommerce-cart td.product-subtotal  { grid-area: subtotal; }

.woocommerce-cart td.product-thumbnail img {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: contain;
  border: 1px solid var(--alla-line);
  border-radius: var(--alla-radius-sm);
  background: var(--alla-surface-soft);
  padding: 3px;
}
.woocommerce-cart td.product-name a {
  display: block;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--alla-text);
  text-decoration: none;
}
.woocommerce-cart td.product-name a:hover {
  color: var(--alla-accent);
}
.woocommerce-cart td.product-name .variation {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--alla-text-soft);
}
/* nowrap: giữ số tiền trên một dòng, nhờ đó cột "auto" co đúng bằng bề rộng
   của con số - không chiếm chỗ thừa của cột tiêu đề sản phẩm */
.woocommerce-cart td.product-price {
  color: var(--alla-text-soft);
  font-size: 14.5px;
  white-space: nowrap;
}
.woocommerce-cart td.product-subtotal {
  text-align: right;
  font-size: 16px;
  font-weight: 700;
  color: var(--alla-text);
  white-space: nowrap;
}

/* Nút xoá: đưa lên góc phải thẻ */
.woocommerce-cart td.product-remove {
  position: absolute;
  top: 10px;
  right: 10px;
  width: auto;
}
.woocommerce-cart td.product-remove a.remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-size: 19px;
  line-height: 1;
  color: #9aa7b5 !important;
  background: transparent !important;
  border-radius: 50%;
  transition: background .15s, color .15s;
}
.woocommerce-cart td.product-remove a.remove:hover {
  color: #fff !important;
  background: #d64545 !important;
}

/* --- Hàng "actions": ô mã giảm giá --- */
.woocommerce-cart table.cart tr:has(td.actions),
.woocommerce-cart table.cart td.actions {
  display: block;
}
.woocommerce-cart table.cart td.actions {
  /* flex + gap: nút "Cập nhật giỏ hàng" (khi hiện) không còn dính sát ô nhập mã */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px !important;
  margin-top: 4px;
  text-align: left;
  background: var(--alla-surface);
  /* !important vì quy tắc "table.cart td { border:0 !important }" ở trên */
  border: 1px solid var(--alla-line) !important;
  border-radius: var(--alla-radius);
  box-shadow: var(--alla-shadow);
}
.woocommerce-cart table.cart td.actions .coupon {
  display: flex;
  align-items: center;
  gap: 10px;
  float: none;
  flex-wrap: wrap;
  flex: 1 1 340px;
  min-width: 0;
}

/**
 * Nút "Cập nhật giỏ hàng".
 *
 * Số lượng đã tự cập nhật nên nút này thừa -> ẩn đi. NHƯNG phải ẩn bằng CSS
 * kèm class do JS gắn vào <body>, KHÔNG dùng .hide() một lần: cart.js của
 * WooCommerce thay mới nguyên khối form sau mỗi AJAX (áp mã giảm giá, xoá sản
 * phẩm...) nên nút trong form mới sẽ lại hiện ra.
 * Trình duyệt tắt JS -> không có class alla-cart-js -> nút vẫn hiện bình thường.
 */
body.alla-cart-js .woocommerce-cart-form [name="update_cart"] {
  display: none;
}
.woocommerce-cart table.cart td.actions [name="update_cart"] {
  flex: 0 0 auto;
  height: 46px;
  padding: 0 22px;
  border: 1px solid var(--alla-line-strong);
  border-radius: 999px;
  background: var(--alla-surface);
  color: var(--alla-text);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.woocommerce-cart table.cart td.actions [name="update_cart"]:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.woocommerce-cart table.cart td.actions .coupon label {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--alla-text);
  white-space: nowrap;
}
.woocommerce-cart table.cart td.actions .coupon .input-text {
  flex: 1 1 180px;
  width: auto !important;   /* Woo ép 80px */
  min-width: 0;
}

/* --- Trạng thái giỏ rỗng --- */
.woocommerce-cart .return-to-shop {
  margin: 14px 0 0;
}
.woocommerce-cart .return-to-shop a.button {
  display: inline-block;
  height: 46px;
  line-height: 44px;
  padding: 0 26px;
  border: 1px solid var(--alla-accent);
  border-radius: 999px;
  background: var(--alla-accent);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  float: none;
}
.woocommerce-cart .return-to-shop a.button:hover {
  filter: brightness(1.05);
  color: #fff;
}

/* --- Bảng tổng tiền --- */
.woocommerce-cart .cart_totals {
  padding: 20px;
  background: var(--alla-surface);
  border: 1px solid var(--alla-line);
  border-radius: var(--alla-radius);
  box-shadow: var(--alla-shadow);
}
.woocommerce-cart .cart_totals table.shop_table {
  width: 100%;
  margin: 0 0 16px;
  border: 0;
  border-collapse: collapse;
}
.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
  padding: 11px 0 !important;
  border: 0 !important;
  border-bottom: 1px dashed var(--alla-line) !important;
  background: none;
  font-size: 14.5px;
  vertical-align: top;
}
.woocommerce-cart .cart_totals table.shop_table th {
  width: 45%;
  font-weight: 500;
  color: var(--alla-text-soft);
  text-align: left;
}
.woocommerce-cart .cart_totals table.shop_table td {
  text-align: right;
  font-weight: 600;
  color: var(--alla-text);
}
.woocommerce-cart .cart_totals tr.order-total th,
.woocommerce-cart .cart_totals tr.order-total td {
  border-bottom: 0 !important;
  padding-top: 14px !important;
  font-size: 16px;
}
.woocommerce-cart .cart_totals tr.order-total th {
  font-weight: 700;
  color: var(--alla-text);
}
.woocommerce-cart .cart_totals tr.order-total .woocommerce-Price-amount {
  font-size: 21px;
  font-weight: 800;
}
.woocommerce-cart .cart_totals .shipping-calculator-button {
  color: var(--alla-blue);
  text-decoration: underline;
}

/* ==========================================================================
   4. TRANG THANH TOÁN
   ========================================================================== */

/* --- Ô "Bạn có mã giảm giá?" --- */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  margin-bottom: 16px;
}
.woocommerce-checkout form.checkout_coupon {
  margin: 0 0 22px;
  padding: 18px;
  border: 1px solid var(--alla-line);
  border-radius: var(--alla-radius);
  background: var(--alla-surface);
  box-shadow: var(--alla-shadow);
}
.woocommerce-checkout form.checkout_coupon .form-row {
  display: inline-block;
  vertical-align: middle;
  margin: 0 10px 0 0;
  padding: 0;
  width: auto;
}

/* --- Bố cục 2 cột --- */
@media (min-width: 992px) {
  .woocommerce-checkout form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    /* HÀNG 1 để dành cho khối thông báo lỗi (xem giải thích ngay dưới).
       Không có lỗi thì hàng này cao 0 và vì chỉ dùng column-gap nên
       cũng không sinh khoảng trống thừa. */
    grid-template-rows: auto auto 1fr;
    align-items: start;
    column-gap: 30px;
  }

  /**
   * BẮT BUỘC đặt vị trí cho khối thông báo lỗi.
   *
   * Khi bấm "Đặt hàng" mà validate hỏng, wc-checkout.js chèn
   * <div class="woocommerce-NoticeGroup woocommerce-NoticeGroup-checkout">
   * vào ĐẦU form. Nhưng vì 3 khối kia đã được đặt tường minh ở hàng 1-2, lưới
   * sẽ tự đẩy khối mới này xuống ô trống kế tiếp = hàng 3 cột 1, tức là RƠI
   * XUỐNG TẬN ĐÁY TRANG và chỉ rộng bằng cột trái.
   * Ghim nó ở hàng 1, trải hết 2 cột.
   */
  .woocommerce-checkout form.checkout > .woocommerce-NoticeGroup {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .woocommerce-checkout form.checkout > #customer_details {
    grid-column: 1;
    grid-row: 2 / span 2;
  }
  .woocommerce-checkout form.checkout > #order_review_heading {
    grid-column: 2;
    grid-row: 2;
  }
  .woocommerce-checkout form.checkout > #order_review {
    grid-column: 2;
    grid-row: 3;
    position: sticky;
    top: 20px;
  }
  /* Thẻ chứa input ẩn của WooCommerce - display:contents để nó không chiếm ô lưới */
  .woocommerce-checkout form.checkout > wc-order-attribution-inputs {
    display: contents;
  }
}

/* Trong cột trái thì xếp dọc, không chia đôi kiểu mặc định của Woo */
.woocommerce-checkout .woocommerce .col2-set .col-1,
.woocommerce-checkout .woocommerce .col2-set .col-2 {
  float: none;
  width: 100%;
}
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields {
  margin-bottom: 20px;
  padding: 22px;
  background: var(--alla-surface);
  border: 1px solid var(--alla-line);
  border-radius: var(--alla-radius);
  box-shadow: var(--alla-shadow);
}
.woocommerce-checkout .woocommerce-additional-fields h3,
.woocommerce-checkout .woocommerce-billing-fields h3 {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--alla-line);
}
/**
 * functions.php đã bỏ hết trường giao hàng (custom_override_checkout_fields)
 * nên .woocommerce-shipping-fields chỉ còn khoảng trắng -> hiện ra một thẻ
 * trắng rỗng giữa trang. Ẩn khi bên trong không có tiêu đề lẫn trường nhập nào.
 * Nếu sau này bật lại trường giao hàng thì thẻ tự hiện lại, không phải sửa CSS.
 */
.woocommerce-checkout .woocommerce-shipping-fields:not(:has(h3)):not(:has(.form-row)) {
  display: none;
}

/* --- Trường nhập --- */
.woocommerce-checkout .woocommerce form .form-row {
  margin: 0 0 16px;
  padding: 0;
}
.woocommerce-checkout .woocommerce form .form-row label {
  display: block;
  margin-bottom: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--alla-text);
}
.woocommerce-checkout .woocommerce form .form-row .required {
  color: #d64545;
  text-decoration: none;
  border: 0;
}
.woocommerce-checkout .woocommerce form .form-row.woocommerce-invalid input.input-text {
  border-color: #d64545;
}
.woocommerce-checkout .woocommerce form .form-row.woocommerce-validated input.input-text {
  border-color: #3fae6a;
}
/**
 * Hai trường trên một hàng ở màn hình rộng - NHƯNG chỉ khi thật sự có đủ cặp.
 * Theme đã bỏ trường "Họ" nên "Tên" là .form-row-first đứng một mình; nếu chia
 * đôi vô điều kiện thì ô Tên hụt còn nửa dòng trông rất lệch.
 * :has(+ .form-row-last) = "chỉ khi ngay sau nó có ô thứ hai".
 */
@media (min-width: 768px) {
  .woocommerce-checkout .woocommerce form .form-row-first:has(+ .form-row-last),
  .woocommerce-checkout .woocommerce form .form-row-first + .form-row-last {
    float: none;
    display: inline-block;
    vertical-align: top;
    width: calc(50% - 8px);
  }
  .woocommerce-checkout .woocommerce form .form-row-first:has(+ .form-row-last) {
    margin-right: 12px;
  }
}

/* --- Bảng đơn hàng bên phải --- */
.woocommerce-checkout #order_review {
  padding: 22px;
  background: var(--alla-surface);
  border: 1px solid var(--alla-line);
  border-radius: var(--alla-radius);
  box-shadow: var(--alla-shadow);
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table {
  width: 100%;
  margin: 0 0 18px;
  border: 0;
  border-collapse: collapse;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table td {
  padding: 11px 0 !important;
  border: 0 !important;
  border-bottom: 1px dashed var(--alla-line) !important;
  background: none;
  font-size: 14.5px;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th {
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--alla-line-strong) !important;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--alla-text-soft);
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name {
  padding-right: 12px !important;
  font-weight: 500;
  line-height: 1.45;
  color: var(--alla-text);
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-quantity {
  color: var(--alla-text-soft);
  font-weight: 400;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-total,
.woocommerce-checkout table.woocommerce-checkout-review-order-table th.product-total {
  text-align: right;
  white-space: nowrap;
  font-weight: 600;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot th {
  font-weight: 500;
  color: var(--alla-text-soft);
  text-align: left;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot .order-total td {
  border-bottom: 0 !important;
  padding-top: 14px !important;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot .order-total th {
  font-size: 16px;
  font-weight: 700;
  color: var(--alla-text);
}
/* Số tiền căn phải và không bị ngắt dòng giữa con số với chữ "đ" */
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot td,
.woocommerce-cart .cart_totals table.shop_table td {
  white-space: nowrap;
  text-align: right;
}
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot .order-total .woocommerce-Price-amount {
  font-size: 21px;
  font-weight: 800;
}
@media(max-width: 992px) {
  .woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot .order-total .woocommerce-Price-amount {
    font-size: 18px;
  }
}
/* --- Phương thức thanh toán: mỗi lựa chọn là một thẻ bấm được --- */
.woocommerce-checkout #payment,
.woocommerce-cart #payment {
  background: none !important;
  border: 0 !important;
  border-radius: 0;
}
.woocommerce-checkout #payment ul.payment_methods {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  list-style: none;
}
/* <li> chứa <input radio> và <label> là 2 thẻ ANH EM (không lồng nhau), nên
   phải cho chính <li> làm flex thì nút chọn mới nằm cùng dòng với nhãn. */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 10px;
  padding: 0;
  border: 1px solid var(--alla-line-strong);
  border-radius: var(--alla-radius-sm);
  background: var(--alla-surface);
  transition: border-color .15s, background .15s;
}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:hover {
  border-color: var(--alla-accent);
}
/* :has() -> viền sáng lên đúng thẻ đang được chọn, không cần JS */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:has(input:checked) {
  border-color: var(--alla-accent);
  background: #fff5f9;
  box-shadow: var(--alla-focus);
}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  margin: 0;
  padding: 15px 16px 15px 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--alla-text);
}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > input[type="radio"] {
  flex: 0 0 auto;
  margin: 0 0 0 16px;
  width: 18px;
  height: 18px;
  accent-color: var(--alla-accent);
  cursor: pointer;
}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method img {
  max-height: 24px;
  width: auto;
  margin-left: auto;
}
/**
 * Hộp mô tả của phương thức thanh toán.
 *
 * TRÀN RA NGOÀI THẺ vì woocommerce.css đặt sẵn
 *   ".woocommerce-checkout #payment div.payment_box { width:100% }"  = (1,1,1)
 * mà quy tắc cũ của mình (1,2,1) chỉ thêm "margin: 0 16px" chứ không ghi đè
 * width -> bề ngang thành 100% + 32px lề = lòi hẳn ra khỏi viền thẻ.
 *
 * Bộ chọn dưới đây là (1,4,3), thắng cả woocommerce.css (1,1,1) lẫn quy tắc
 * .main-content-common... trong style.css (1,3,1).
 */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > div.payment_box {
  flex: 0 0 auto;
  width: calc(100% - 32px);
  box-sizing: border-box;
  margin: 0 16px 15px;
  padding: 13px 15px;
  border-radius: var(--alla-radius-sm);
  color: var(--alla-text-soft);
  font-size: 13.5px;
  line-height: 1.6;
}
/* Mũi tên nhọn mặc định không hợp bố cục thẻ.
   (1,4,4) để thắng ".main-content-common ... div.payment_box::before" = (1,3,2) */
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > div.payment_box::before {
  display: none;
}
.woocommerce-checkout #payment div.payment_box p:last-child {
  margin-bottom: 0;
}

/* --- Điều khoản + nút đặt hàng --- */
.woocommerce-checkout #payment .form-row.place-order {
  margin: 0;
  padding: 0;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
  margin-bottom: 14px;
}
.woocommerce-checkout .woocommerce-privacy-policy-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--alla-text-soft);
}
.woocommerce-checkout #payment .terms,
.woocommerce-checkout #payment .wc-terms-and-conditions {
  float: none;
  padding: 0;
  text-align: left;
}
/**
 * Ô tích "Tôi đã đọc và đồng ý với điều khoản..."
 *
 * KHÔNG dùng flex cho <label>. WooCommerce đặt dấu sao bắt buộc NGAY TRONG
 * label: <label><input><span>...chữ...</span>&nbsp;<span class="required">*</span></label>
 * Nếu label là flex thì dấu * thành một flex item độc lập, bị ô chữ (flex-grow)
 * đẩy ra tận mép phải và dính lên dòng đầu - đúng như đang thấy.
 *
 * Cách đúng: giữ label ở dạng block cho chữ chảy bình thường, ô tích tách ra
 * bằng position:absolute. Nhờ vậy dấu * bám ngay sau chữ cuối cùng.
 * (0,4,2) để thắng ".woocommerce form .form-row label.checkbox" = (0,3,2).
 */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row label.checkbox {
  display: block;
  position: relative;
  margin: 0;
  padding-left: 26px;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--alla-text);
  cursor: pointer;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row label.checkbox input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 3px;
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--alla-accent);
  cursor: pointer;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text {
  display: inline;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row .required {
  display: inline;
  color: #d64545;
  text-decoration: none;
  border: 0;
}

/* ==========================================================================
   5. TRANG CẢM ƠN / CHI TIẾT ĐƠN HÀNG
   ========================================================================== */
/* Lời cảm ơn */
.woocommerce-order-received .woocommerce-thankyou-order-received {
  margin: 0 0 18px;
  padding: 14px 18px;
  border: 1px solid #cfe8d5;
  border-left: 3px solid #3fae6a;
  border-radius: var(--alla-radius-sm);
  background: #f2faf5;
  color: var(--alla-text);
  font-size: 15px;
}

/**
 * Khối "Mã đơn hàng - Ngày - Email - Tổng cộng - Phương thức thanh toán"
 *
 * WooCommerce dựng khối này bằng float + gạch đứt ngăn cách:
 *   ".woocommerce ul.order_details li { float:left; padding-right:2em;
 *     border-right:1px dashed; margin-right:2em; font-size:.715em }" = (0,2,2)
 * Quy tắc cũ của mình cũng (0,2,2) nên chỉ hơn nhờ thứ tự file - rất mong manh,
 * và <ul> thì chưa có padding riêng nên chữ nằm sát mép khung.
 *
 * Bản này đặt padding hẳn cho <ul> và nâng độ đặc hiệu lên (0,3,1)/(0,3,2)
 * để chắc chắn thắng, đồng thời đổi float -> flex + gap cho giãn cách đều.
 */
.woocommerce-order-received .woocommerce .woocommerce-order-overview,
.woocommerce-order-received .woocommerce ul.order_details {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 36px;
  margin: 0 0 22px;
  padding: 22px 24px;
  list-style: none;
  background: var(--alla-surface);
  border: 1px solid var(--alla-line);
  border-radius: var(--alla-radius);
  box-shadow: var(--alla-shadow);
}

/**
 * BẮT BUỘC tắt 2 pseudo-element clearfix của WooCommerce:
 *
 *   .woocommerce ul.order_details::after,
 *   .woocommerce ul.order_details::before { content:" "; display:table }
 *
 * Trong một flex container thì ::before/::after CŨNG là flex item. Cái ::before
 * chiếm hẳn một ô ở đầu hàng, cộng thêm column-gap 36px -> đẩy "MÃ ĐƠN HÀNG" /
 * "NGÂN HÀNG" thụt vào trong, nhìn như khung bị thừa lề trái rất rộng.
 * (Đúng cùng loại lỗi đã gặp với .cart-collaterals + display:contents.)
 */
.woocommerce-order-received .woocommerce ul.order_details::before,
.woocommerce-order-received .woocommerce ul.order_details::after {
  display: none;
}

/**
 * Ẩn khung rỗng.
 *
 * Cấu hình WooCommerce của site đang có 2 dòng tài khoản chuyển khoản, trong đó
 * DÒNG ĐẦU để trống hoàn toàn. WooCommerce vẫn in ra một <ul> rỗng cho dòng đó;
 * trước kia không thấy vì <ul> không có style, nay có viền + nền nên nó hiện
 * thành một khung trắng trống trơn.
 * Đây chỉ là lớp phòng thủ - cách sửa gốc là xoá dòng trống trong
 * WooCommerce > Cài đặt > Thanh toán > Chuyển khoản ngân hàng > Chi tiết tài khoản.
 */
.woocommerce-order-received .woocommerce ul.order_details:not(:has(li)) {
  display: none;
}
.woocommerce-order-received .woocommerce ul.order_details li {
  float: none;
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 12px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--alla-text-soft);
  /* email/mã đơn dài không làm vỡ khung */
  overflow-wrap: anywhere;
}
.woocommerce-order-received .woocommerce ul.order_details li strong {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: 0;
  color: var(--alla-text);
}

/**
 * Khối "Thông tin chuyển khoản ngân hàng" của cổng BACS.
 * <h2> và <h3> ở đây nằm ngoài các container đã style bên dưới nên trước đó
 * không được style gì, hiện ra to bất thường so với phần còn lại của trang.
 */
.woocommerce-order-received .woocommerce-bacs-bank-details {
  margin: 0 0 22px;
}
.woocommerce-order-received .wc-bacs-bank-details-heading {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  color: var(--alla-text);
}
.woocommerce-order-received .wc-bacs-bank-details-account-name {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--alla-text);
}

/* Bảng chi tiết đơn + thông tin khách hàng */
.woocommerce-order-received .woocommerce-order-details,
.woocommerce-order-received .woocommerce-customer-details {
  margin-bottom: 22px;
  padding: 24px 26px;
  background: var(--alla-surface);
  border: 1px solid var(--alla-line);
  border-radius: var(--alla-radius);
  box-shadow: var(--alla-shadow);
}
.woocommerce-order-received .woocommerce-order-details h2,
.woocommerce-order-received .woocommerce-customer-details h2 {
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--alla-line);
  font-size: 17px;
  font-weight: 700;
  color: var(--alla-text);
}
.woocommerce-order-received .woocommerce-order-details table.shop_table,
.woocommerce-order-received .woocommerce-customer-details address {
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
}
.woocommerce-order-received .woocommerce-order-details table.shop_table th,
.woocommerce-order-received .woocommerce-order-details table.shop_table td {
  padding: 11px 0 !important;
  border: 0 !important;
  border-bottom: 1px dashed var(--alla-line) !important;
  background: none;
}
.woocommerce-order-received .woocommerce-customer-details address {
  padding: 0;
  border: 0;
  font-style: normal;
  line-height: 1.7;
  color: var(--alla-text);
}

@media (max-width: 575px) {
  /* Màn hình bé: mỗi mục xuống một dòng riêng cho dễ đọc, lề gọn lại */
  .woocommerce-order-received .woocommerce .woocommerce-order-overview,
  .woocommerce-order-received .woocommerce ul.order_details {
    gap: 14px 20px;
    padding: 16px 18px;
  }
  .woocommerce-order-received .woocommerce ul.order_details li {
    flex: 1 1 130px;
  }
  .woocommerce-order-received .woocommerce-order-details,
  .woocommerce-order-received .woocommerce-customer-details {
    padding: 18px;
  }
}

/* ==========================================================================
   6. RESPONSIVE
   ========================================================================== */

/* --- Tablet: bớt 1 cột trong thẻ sản phẩm --- */
@media (max-width: 991px) {
  /* Bố cục thẻ đã là kiểu 3 hàng ở mặc định nên ở đây không phải đổi gì nữa,
     chỉ trả bảng tiền về full width khi trang hết chia 2 cột. */
  .woocommerce-cart .cart-collaterals .cart_totals {
    width: 100%;
    float: none;
    margin-top: 18px;
  }
}

/* --- Mobile: thẻ 2 cột --- */
@media (max-width: 575px) {
  /**
   * Lưới 3 cột:  [ảnh 64px] [nội dung co giãn] [thành tiền vừa đủ]
   *
   * Bản trước để cột 1 là "auto" nên nó rộng bằng phần tử TO NHẤT trong cột -
   * mà ô +/- số lượng cũng nằm ở cột 1 và rộng ~100px. Hậu quả: ảnh đã thu về
   * 60px nhưng cột vẫn 100px, chừa một khoảng trắng to bên phải ảnh nên nhìn
   * như ảnh chưa hề nhỏ lại.
   * Nay chuyển ô số lượng sang cột 2, cột 1 ép cứng đúng bằng bề rộng ảnh.
   */
  .woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    grid-template-areas:
      "thumb name  name"
      "thumb price price"
      "thumb qty   subtotal";
    gap: 8px 12px;
    padding: 14px 36px 14px 14px;
  }
  .woocommerce-cart td.product-thumbnail img {
    width: 64px;
    height: 64px;
  }
  .woocommerce-cart td.product-name a {
    font-size: 14.5px;
  }
  .woocommerce-cart td.product-quantity {
    padding-top: 4px !important;
  }
  .woocommerce-cart td.product-subtotal {
    align-self: center;
    font-size: 15.5px;
  }
  /* Ô +/- thu nhỏ vừa màn hình bé */
  .woocommerce-cart .alla-vp-qty button {
    width: 30px;
    height: 36px;
  }
  .woocommerce-cart .alla-vp-qty .alla-vp-qty-input,
  .woocommerce-cart.woocommerce .alla-vp-qty .alla-vp-qty-input {
    width: 38px;
    height: 36px;
  }

  .woocommerce-cart table.cart td.actions {
    display: block;   /* xếp dọc cho gọn màn hình bé */
  }
  .woocommerce-cart table.cart td.actions [name="update_cart"] {
    width: 100%;
    margin-top: 10px;
  }
  .woocommerce-cart table.cart td.actions .coupon {
    flex-direction: column;
    align-items: stretch;
  }
  /* Đổi sang flex-direction:column thì trục chính là TRỤC DỌC, nên
     "flex: 1 1 180px" ở trên biến 180px thành CHIỀU CAO -> ô nhập cao vống lên.
     Trả về auto để chiều cao do thuộc tính height quyết định. */
  .woocommerce-cart table.cart td.actions .coupon .input-text {
    flex: 0 0 auto;
    width: 100% !important;
  }
  .woocommerce-cart table.cart td.actions .coupon button.button {
    width: 100%;
  }

  .woocommerce-checkout .woocommerce-billing-fields,
  .woocommerce-checkout .woocommerce-shipping-fields,
  .woocommerce-checkout .woocommerce-additional-fields,
  .woocommerce-checkout #order_review,
  .woocommerce-cart .cart_totals {
    padding: 16px;
  }
  .woocommerce-checkout form.checkout_coupon .form-row {
    display: block;
    width: 100%;
    margin: 0 0 10px;
  }
  .woocommerce-checkout form.checkout_coupon button.button {
    width: 100%;
  }
}

/**
 * --- Trung hoà woocommerce-smallscreen.css (chỉ nạp ở <= 768px) ---
 *
 * File đó biến bảng thành danh sách dọc cho theme mặc định, dùng !important và
 * chèn nhãn qua ::before. Bố cục thẻ ở trên đã lo phần đó rồi, nên phải gỡ đúng
 * các quy tắc gây xung đột - nếu không, ở mobile mọi thứ bị dồn sang phải và
 * mất ảnh sản phẩm.
 *
 * Đặt CUỐI FILE để thắng theo thứ tự khi độ đặc hiệu bằng nhau.
 */
@media (max-width: 768px) {
  /* .shop_table_responsive tr td { text-align: right !important } */
  .woocommerce-cart table.cart tr td {
    text-align: left !important;
  }
  /* Phải đặc hiệu HƠN quy tắc ngay trên (cả hai đều !important, cùng (0,2,2)
     thì cái sau thắng) - nếu không thành tiền sẽ bị kéo về sát ô số lượng */
  .woocommerce-cart table.cart td.product-subtotal {
    text-align: right !important;
  }

  /* Woo ẩn hẳn ảnh sản phẩm ở mobile; bố cục thẻ của ta thì cần ảnh */
  .woocommerce-cart table.cart .product-thumbnail {
    display: block;
  }

  /* Bỏ nền kẻ sọc xen kẽ của Woo (thẻ đã có nền trắng riêng) */
  .woocommerce-cart table.shop_table_responsive tr:nth-child(2n) td {
    background-color: transparent;
  }

  /* Bảng tổng tiền: Woo ẩn <th> rồi thay bằng ::before lấy từ data-title.
     Ta đã tắt ::before nên phải trả lại <th>, không thì mất hết nhãn
     "Tạm tính" / "Tổng". Dùng flex cho mỗi dòng: nhãn trái - số phải. */
  .woocommerce-cart .cart_totals table.shop_table tr {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
  }
  .woocommerce-cart .cart_totals table.shop_table th {
    display: block;
    width: auto;
    text-align: left !important;
  }
  .woocommerce-cart .cart_totals table.shop_table td {
    display: block;
    text-align: right !important;
  }

  /* Nút "Cập nhật giỏ hàng" đã bị JS ẩn; chặn luôn quy tắc width:100% của Woo
     kẻo lúc tắt JS nó chiếm trọn hàng */
  .woocommerce-cart table.cart td.actions .coupon .button {
    width: auto;
  }
}

/* --- Dự phòng cho trình duyệt chưa hỗ trợ :has() ---
   Không có :has() thì thẻ thanh toán chỉ mất phần tô sáng khi được chọn,
   nút radio gốc vẫn hiện và vẫn bấm chọn được bình thường. */
@supports not selector(:has(*)) {
  .woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
    background: var(--alla-surface);
  }
}