/* Giỏ hàng và thanh toán.
   CHỈ tạo kiểu cho block của WooCommerce, KHÔNG viết lại template — viết lại là
   mỗi lần Woo cập nhật lại vỡ, mà giỏ hàng thì không được phép vỡ.

   GHI SỔ cho Task 11 (món nợ đo tương phản từ Task 2, nay đo được vì công tắc
   "Hiện giá" đã bật — 2026-08-05): đo computed style thật trên production
   bằng Playwright, qua `document.styleSheets` liệt kê rule THẬT đang áp dụng
   (không đoán từ CSS đã khai, và không đọc CSS minify của Woo bằng mắt — cả
   hai cách đều đã gây sót ở vòng sửa 1, xem chi tiết tại từng luật bên dưới).
   Danh sách đầy đủ các chỗ CSS lõi Woo thắng vì đặc hiệu cao hơn (đã sửa):
     1. Nút "Đặt hàng"/"Tiến hành thanh toán" — không phải escalate độ đặc
        hiệu (bộ chọn phẳng của theme vẫn thắng), NHƯNG cỡ chữ đo được khác
        nhau giữa 2 trang (xem mục "nút" dưới đây) nên phải đổi token màu.
     2. Viền ô nhập `input[type=...]` — Woo khớp CẢ HAI biến thể trong cùng
        danh sách chọn (có và không có tổ tiên `.wc-block-components-form`),
        biến thể có tổ tiên đặc hiệu hơn (0,3,1) — bản sửa đầu chỉ chép biến
        thể ngắn (0,2,1), phải chép đủ cả hai (chi tiết ở mục "ô nhập").
     3. Nút tăng/giảm số lượng — Woo khớp bằng 2 lớp lồng nhau (0,2,0) > bộ
        chọn phẳng cũ (0,1,0): `min-width:44px` bị THUA ÂM THẦM, nút đo thật
        chỉ rộng 30px.
     4. `:focus` của ô nhập — escalate ĐỒNG BỘ với mục 2, dù ở trạng thái
        thường không bị Woo thắng (outline là thuộc tính riêng).
     5. Trạng thái lỗi `.has-error` — thua CHÍNH luật viền mặc định (mục 2)
        do dùng shorthand `border`, mất luôn viền đỏ.
     6. Tên lớp `<select>` (Quốc gia) viết sai (`wc-block-` thay vì đúng
        `wc-blocks-` của Woo) — sửa tên xong (vòng sửa 1) vẫn CHƯA ĐỦ: luật
        thật của Woo trên production là `.wc-blocks-components-select
        .wc-blocks-components-select__select` (0,2,0, lồng 2 lớp), không phải
        bộ chọn phẳng `.wc-blocks-components-select__select` (0,1,0) như từng
        ghi nhầm ở vòng sửa 1 — đo lại computed style viền ô Quốc gia trên
        production (Task 11, 2026-08-05) vẫn ra `color-mix` của Woo, xác nhận
        bộ chọn phẳng KHÔNG thắng. Đã escalate đúng hình dạng lồng nhau.
     7. Cột phải lưới 12 cột (`.wc-block-components-sidebar`) escalate cho
        đối xứng với cột trái, phòng Woo đổi luật sau này.
   Ngoài ra, khối tóm tắt đơn KHÔNG còn đặt viền lên từng hàng con
   (`.wc-block-components-totals-wrapper`, lặp lại cho mỗi dòng) mà đặt một
   lần lên khung ngoài `.wc-block-cart__sidebar`/`.wc-block-checkout__sidebar`
   — xem mục "tóm tắt đơn". */

.gpkm-noi-dung .wp-block-woocommerce-cart,
.gpkm-noi-dung .wp-block-woocommerce-checkout {
  max-width: var(--rong-toi-da);
  margin-inline: auto;
  padding: var(--sp-5) var(--sp-3);
}

/* --- nút ---------------------------------------------------------------- */

/* Đo computed style thật trên production (2026-08-05, sau khi bật "Hiện giá"):
   nút "Tiến hành thanh toán" ở /gio-hang/ chữ 16px, nhưng nút "Đặt hàng" ở
   /thanh-toan/ (`.wc-block-components-checkout-place-order-button`) chữ chỉ
   13px — cả hai dùng chung 3 bộ chọn này. rose-red trắng-trên-nền chỉ 4,45:1,
   hợp lệ AA CHỈ với chữ ≥16px (large text) — 13px KHÔNG đạt. Vì 3 bộ chọn này
   dùng chung cho nút ở nhiều cỡ chữ khác nhau (và Woo có thể thêm nút mới bất
   cứ lúc nào dùng lại các lớp này), đổi ĐỒNG LOẠT sang --primary (6,69:1) —
   luôn đạt AA bất kể cỡ chữ, an toàn hơn là chỉ vá riêng nút 13px. */
.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  min-height: 44px;
  background: var(--primary);
  color: var(--surface);
  border: 1px solid var(--primary);
  border-radius: var(--bo-goc);
  cursor: pointer;
  transition: background var(--nhanh) var(--easing);
}

/* --primary-dam (đã có sẵn từ base.css/.gpkm-nut--phu:hover) làm hover đậm
   hơn — càng đậm thì tương phản với chữ trắng càng CAO, không bao giờ tụt
   dưới AA ở trạng thái hover. */
.wc-block-components-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover { background: var(--primary-dam); }

.wc-block-components-button:disabled { opacity: 0.55; cursor: not-allowed; }

/* --- ô nhập và nhãn ----------------------------------------------------- */

/* Nhãn phải LUÔN đọc được. Block của Woo dùng nhãn nổi: khi ô đã có nội dung thì
   nhãn thu nhỏ lên trên — vẫn hiện, chỉ cần bảo đảm đủ tương phản. */
.wc-block-components-text-input label,
.wc-block-components-checkout-step__title,
.wc-block-components-title { color: var(--ink); }

/* Escalate theo ĐÚNG hình dạng bộ chọn của Woo — và ĐÂY LÀ LẦN 2 vẫn escalate
   CHƯA ĐỦ, phải ghi lại làm bài học: bản sửa đầu chỉ chép
   `.wc-block-components-text-input input[type=email]` (0,2,1) từ nửa SAU của
   danh sách chọn cách nhau bởi dấu phẩy của Woo, nhưng Woo còn một biến thể
   ĐẶC HIỆU HƠN trong CÙNG danh sách:
   `.wc-block-components-form .wc-block-components-text-input input[type=email]`
   (0,3,1) — khi phần tử khớp CẢ HAI biến thể (ô nhập checkout luôn nằm trong
   `.wc-block-components-form`), trình duyệt dùng biến thể đặc hiệu NHẤT khớp
   được để so cascade, không phải biến thể ngắn hơn. Dùng
   `document.styleSheets` liệt kê rule thật đang áp mới bắt được — đọc CSS
   nguồn của Woo bằng mắt bị sót vì file minify dài cả nghìn ký tự một dòng.
   Phải chép ĐỦ CẢ HAI biến thể (có và không có tổ tiên `.wc-block-components-form`)
   thì mới chắc thắng ở mọi ngữ cảnh (giỏ hàng lẫn thanh toán).
   --line-2 (4,49:1) — chuẩn Task 8 cho viền thành phần giao diện, KHÔNG dùng
   --vien (--line, chỉ 1,70:1). */
/* Vòng sửa 1 (review độc lập, 2026-08-05) bắt thêm 1 lỗi trong CHÍNH danh sách
   này: `.wc-block-components-select__select` là TÊN SAI — lớp thật của Woo là
   `.wc-blocks-components-select__select` (có "s" ở "blocks"), xác nhận bằng
   `document.querySelector('select').className` trên production (đây là ô
   Quốc gia, `#shipping-country` — Việt Nam không cấu hình danh sách Tỉnh/Thành
   dạng <select> của Woo nên KHÔNG có ô "Tỉnh/Thành" nào là <select>, chỉ có
   `#shipping-city` là input text, đã nằm trong danh sách input[type=text] ở
   trên). Vì viết sai tên nên luật CHƯA BAO GIỜ áp cho ô Quốc gia — may là
   không escalate cũng thắng: luật thật của Woo cho lớp này là bộ chọn PHẲNG
   `.wc-blocks-components-select__select{...}` (0,1,0), bằng độ đặc hiệu bộ
   chọn phẳng của theme, thắng nhờ nạp sau. */
.wc-block-components-form .wc-block-components-text-input input[type='email'],
.wc-block-components-form .wc-block-components-text-input input[type='text'],
.wc-block-components-form .wc-block-components-text-input input[type='tel'],
.wc-block-components-form .wc-block-components-text-input input[type='number'],
.wc-block-components-form .wc-block-components-text-input input[type='password'],
.wc-block-components-form .wc-block-components-text-input input[type='url'],
.wc-block-components-text-input input[type='email'],
.wc-block-components-text-input input[type='text'],
.wc-block-components-text-input input[type='tel'],
.wc-block-components-text-input input[type='number'],
.wc-block-components-text-input input[type='password'],
.wc-block-components-text-input input[type='url'],
.wc-block-components-textarea,
.wc-blocks-components-select .wc-blocks-components-select__select {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--bo-goc);
}

/* :focus phải escalate ĐỒNG BỘ với luật ở trên — vòng sửa trước chỉ escalate
   viền mặc định rồi để :focus ở dạng phẳng cũ, sai với chính comment phía
   trên tự khai Woo có biến thể (0,3,1). Ở TRẠNG THÁI THƯỜNG (không lỗi),
   ngoại lệ này vô hại vì `outline` là thuộc tính RIÊNG, Woo không đặt outline
   cho input:focus nên bộ chọn phẳng vẫn thắng — nhưng escalate cho ĐỒNG BỘ,
   tránh lệch dạng bộ chọn giữa các luật liền kề (đã tái phạm lỗi này 1 lần ở
   ô nhập, ghi ở trên). Thêm border-color cho chắc, đề phòng Woo đổi cách
   dùng outline sau này. */
.wc-block-components-form .wc-block-components-text-input input[type='email']:focus,
.wc-block-components-form .wc-block-components-text-input input[type='text']:focus,
.wc-block-components-form .wc-block-components-text-input input[type='tel']:focus,
.wc-block-components-form .wc-block-components-text-input input[type='number']:focus,
.wc-block-components-form .wc-block-components-text-input input[type='password']:focus,
.wc-block-components-form .wc-block-components-text-input input[type='url']:focus,
.wc-block-components-text-input input[type='email']:focus,
.wc-block-components-text-input input[type='text']:focus,
.wc-block-components-text-input input[type='tel']:focus,
.wc-block-components-text-input input[type='number']:focus,
.wc-block-components-text-input input[type='password']:focus,
.wc-block-components-text-input input[type='url']:focus,
.wc-block-components-textarea:focus,
.wc-blocks-components-select .wc-blocks-components-select__select:focus {
  border-color: var(--rose-red);
  outline: 2px solid var(--rose-red);
  outline-offset: 1px;
}

/* Lỗi hiện ngay dưới ô sai, đủ tương phản — không chỉ dựa vào màu viền. */
.wc-block-components-validation-error {
  margin-top: var(--sp-1);
  color: var(--loi);
  font-size: 0.875rem;
}

/* I-4 (review độc lập, vòng sửa 1): `.has-error input` (0,1,1) — bộ chọn
   PHẲNG cũ — thua CHÍNH luật viền mặc định ở trên (0,3,1, dùng shorthand
   `border` nên ghi đè luôn border-color), lại thua cả luật lỗi CỦA WOO
   (cũng dạng `.wc-block-components-form .wc-block-components-text-input
   .has-error input`, ~0,3,1). Đo thật: sau khi làm ô email lỗi, viền vẫn ra
   rgb(143,111,112) — tức viền --line-2 bình thường, ô lỗi MẤT LUÔN dấu hiệu
   màu đỏ (của cả theme lẫn Woo). Phải escalate đúng hình dạng + cộng thêm
   lớp `.has-error` mới thắng được luật viền mặc định của CHÍNH mình. */
.wc-block-components-form .wc-block-components-text-input.has-error input[type='email'],
.wc-block-components-form .wc-block-components-text-input.has-error input[type='text'],
.wc-block-components-form .wc-block-components-text-input.has-error input[type='tel'],
.wc-block-components-form .wc-block-components-text-input.has-error input[type='number'],
.wc-block-components-form .wc-block-components-text-input.has-error input[type='password'],
.wc-block-components-form .wc-block-components-text-input.has-error input[type='url'],
.wc-block-components-text-input.has-error input[type='email'],
.wc-block-components-text-input.has-error input[type='text'],
.wc-block-components-text-input.has-error input[type='tel'],
.wc-block-components-text-input.has-error input[type='number'],
.wc-block-components-text-input.has-error input[type='password'],
.wc-block-components-text-input.has-error input[type='url'] {
  border-color: var(--loi);
}

/* --- tóm tắt đơn -------------------------------------------------------- */

/* I-7 (review độc lập, vòng sửa 1): bản đầu đặt viền lên
   `.wc-block-components-totals-wrapper` — nhưng lớp đó KHÔNG duy nhất, Woo
   gắn nó cho MỖI HÀNG trong khối tóm tắt (dòng sản phẩm, form mã giảm giá,
   tạm tính, giảm giá, phí, vận chuyển, tổng cộng — đếm thật trên
   /thanh-toan/ ra 7 phần tử, đều là ANH EM cùng cấp, không lồng nhau). Một số
   hàng Woo đã tự cho `border:none`, nhưng hàng "dòng sản phẩm" (border phải/
   dưới/trái CÓ, trên KHÔNG) nằm sát hàng "mã giảm giá" (border cả 4 cạnh) —
   2 viền liền kề xếp chồng thành một đường KẺ ĐÔI ngay chỗ nối. Trước đây vô
   hại vì --line gần như vô hình (1,70:1); đổi sang --line-2 (4,49:1) làm lộ
   ra. Sửa: viền/nền/bo góc chỉ đặt lên MỘT khung ngoài duy nhất mỗi trang —
   `.wc-block-cart__sidebar` (giỏ hàng) / `.wc-block-checkout__sidebar`
   (thanh toán) — không đặt lên từng hàng bên trong nữa. */
.wc-block-cart__sidebar,
.wc-block-checkout__sidebar {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--bo-goc);
  padding-block: var(--sp-4);
  overflow: hidden;
}

.wc-block-components-totals-item__value { color: var(--ink); font-weight: 600; }

@media (min-width: 1024px) {
  /* I-2 (review độc lập, vòng sửa 1): `top: var(--sp-4)` (24px) không tính
     đầu trang dính cao `--cao-dau-trang` (136px) — cuộn tới khi khối bắt đầu
     dính thì đầu trang che mất phần trên của nó. Theme đã có quy ước sẵn cho
     đúng tình huống này (`woo-single.css:49`, `filter.css:67`):
     `calc(var(--cao-dau-trang) + var(--sp-4))`. */
  .wc-block-checkout__sidebar,
  .wc-block-cart__sidebar {
    position: sticky;
    top: calc(var(--cao-dau-trang) + var(--sp-4));
    align-self: start;
  }

  /* Lưới 12 cột theo mockup: danh sách hàng 8/12 (66,6667%), tóm tắt đơn
     4/12 (33,3333%). Mặc định của WooCommerce Blocks (đo computed style thật,
     2026-08-05) là 65%/35% — khớp ĐÚNG hình dạng bộ chọn của Woo để phần ghi
     đè này thắng nhờ nạp SAU trong <head> (theme phụ thuộc `gpkm-base`, Woo
     là plugin nạp trước — đã kiểm chuỗi phụ thuộc). Lớp `.wc-block-components-sidebar`
     dùng chung cho cả giỏ hàng lẫn thanh toán nên chỉ cần một luật.

     I-1 (review độc lập, vòng sửa 1): cột trái escalate 2 lớp lồng nhau
     (`.wc-block-components-sidebar-layout .wc-block-components-main`, 0,2,0)
     nhưng cột phải trước đây để PHẲNG (`.wc-block-components-sidebar`, 0,1,0)
     — lệch độ đặc hiệu dù đo thực tế Woo hiện chưa có luật nào thắng nó. Để
     đối xứng và không phụ thuộc vào việc Woo có đổi luật hay không, escalate
     cột phải lên đúng hình dạng 2 lớp lồng nhau như cột trái. */
  .wc-block-components-sidebar-layout .wc-block-components-main {
    width: 66.6667%;
  }

  .wc-block-components-sidebar-layout .wc-block-components-sidebar {
    width: 33.3333%;
  }
}

/* --- vùng chạm ---------------------------------------------------------- */

.wc-block-components-radio-control__option {
  display: flex;
  align-items: center;
  min-height: 44px;
}

/* M-2 (review độc lập, vòng sửa 1): comment escalate trước đây nằm SÁT luật
   khung ngoài (`.wc-block-components-quantity-selector`, bộ chọn PHẲNG,
   0,1,0 — không hề escalate, không cần vì Woo cũng phẳng 0,1,0, thắng nhờ
   nạp sau) trong khi nội dung comment lại mô tả escalate của luật NÚT bên
   dưới — comment không khớp code đứng cạnh nó. Tách lại cho đúng chỗ.
   Khung ngoài `.wc-block-components-quantity-selector` có `width:107px` cố
   định của Woo, không đủ chỗ cho 2 nút 44px + ô nhập nên phải nới khung ra. */
.wc-block-components-quantity-selector {
  width: 132px;
  border: 1px solid var(--line-2);
  border-radius: var(--bo-goc-vien-thuoc);
}

/* Escalate theo ĐÚNG hình dạng bộ chọn của Woo (2 lớp lồng nhau, 0,2,0):
   `.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button{min-width:30px}`
   đặc hiệu hơn bộ chọn phẳng cũ (0,1,0) nên `min-width:44px` khai trước đây
   KHÔNG áp dụng — đo bằng getBoundingClientRect() ra 30px thật, dù CSS cũ đã
   khai 44px (bài học: đo, đừng tin CSS đã khai). */
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
}

/* Mockup: "nút tăng/giảm số lượng bo tròn" — bo tròn hẳn hai đầu của khối
   thay vì góc vuông 4px mặc định của Woo. Escalate theo đúng bộ chọn tổ hợp
   con (`>`) của Woo để thắng, cùng lý do đặc hiệu ở trên. */
.wc-block-components-quantity-selector > .wc-block-components-quantity-selector__button--minus {
  border-radius: var(--bo-goc-vien-thuoc) 0 0 var(--bo-goc-vien-thuoc);
}

.wc-block-components-quantity-selector > .wc-block-components-quantity-selector__button--plus {
  border-radius: 0 var(--bo-goc-vien-thuoc) var(--bo-goc-vien-thuoc) 0;
}

.wc-block-components-quantity-selector__input { min-height: 44px; }

/* Khoảng cách giữa các vùng chạm cạnh nhau ≥8px. */
.wc-block-components-radio-control__option + .wc-block-components-radio-control__option {
  margin-top: var(--sp-2);
}

/* --- giỏ rỗng ----------------------------------------------------------- */

.wp-block-woocommerce-empty-cart-block { text-align: center; padding-block: var(--sp-6); }
.wp-block-woocommerce-empty-cart-block h2 { color: var(--ink); }

/* --- trang cảm ơn ------------------------------------------------------- */

.woocommerce-order {
  max-width: var(--rong-toi-da);
  margin-inline: auto;
  padding: var(--sp-5) var(--sp-3);
}

.woocommerce-thankyou-order-received {
  padding: var(--sp-4);
  background: var(--accent-soft);
  border: 1px solid var(--rose-red);
  border-radius: var(--bo-goc);
  color: var(--ink);
  font-weight: 500;
}

.woocommerce-order-overview,
.woocommerce-order-details table,
.woocommerce-customer-details table {
  width: 100%;
  border-collapse: collapse;
}

/* --vien (--line, 1,70:1) CỐ Ý giữ nguyên ở đây: đây là ngăn cách dòng/ô bên
   TRONG một bảng/danh sách nội dung (trang cảm ơn), không phải ranh giới của
   chính một component — cùng quy ước đã dùng cho bảng trong mô tả sản phẩm
   (woo-single.css, khối .woocommerce-Tabs-panel table). Khác với khối tóm
   tắt đơn hay ô nhập ở trên, vốn LÀ ranh giới component nên phải dùng
   --line-2. */
.woocommerce-order-details th,
.woocommerce-order-details td,
.woocommerce-customer-details th,
.woocommerce-customer-details td {
  padding: var(--sp-2) var(--sp-3);
  border: var(--vien);
  text-align: left;
}

.woocommerce-order-overview {
  list-style: none;
  padding: 0;
  margin: var(--sp-4) 0;
}

.woocommerce-order-overview li {
  padding: var(--sp-2) 0;
  border-bottom: var(--vien);
}

/* --- Mã QR chuyển khoản (VietQR) ---------------------------------------- */

/* Khối QR là một CARD độc lập — ranh giới của chính component, dùng --line-2
   (4,49:1) như khối tóm tắt đơn ở trên, không dùng --vien (--line, 1,70:1). */
.gpkm-vietqr {
  max-width: 380px;
  margin-block: var(--sp-5);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--bo-goc);
  text-align: center;
}

.gpkm-vietqr h3 { margin-top: 0; }

/* Khung ảnh đặt sẵn theo đúng tỉ lệ ảnh trả về: ảnh QR nạp từ img.vietqr.io,
   không có width/height cố định thì trang nhảy khi ảnh về (CLS). */
.gpkm-vietqr img {
  width: 100%;
  max-width: 320px;
  height: auto;
  aspect-ratio: 320 / 420;
  margin-inline: auto;
}

.gpkm-vietqr__nd,
.gpkm-vietqr__tien { margin: var(--sp-2) 0 0; color: var(--ink-2); }

/* Nội dung chuyển khoản phải copy được chính xác — sai là kế toán không đối
   soát được đơn nào đã trả. */
.gpkm-vietqr__nd strong {
  display: inline-block;
  padding: 2px 8px;
  background: var(--accent-soft);
  border-radius: var(--bo-goc);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  user-select: all;
}