/* ============================================================
XGO Care — shop.css · style WooCommerce + component bán hàng
(nạp sau main.css; dùng lại design tokens trong :root của main.css)
============================================================ */
/* ---------- Header / nav phụ ---------- */
.cat-quick .cat-quick__list { display: flex; gap: 18px; flex-wrap: wrap; margin: 0; padding: 0; }
.cat-quick li { list-style: none; display: inline-flex; align-items: center; }
.search--inline { display: flex; max-width: 520px; }
.search--inline input { flex: 1; }
/* ---------- Nội dung trang thường (prose) ---------- */
.entry-content.prose { color: var(--ink); line-height: 1.7; }
.prose h2 { color: var(--navy); margin: 26px 0 10px; font-size: 1.3rem; }
.prose h3 { color: var(--navy); margin: 20px 0 8px; font-size: 1.1rem; }
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { margin: 0 0 14px; padding-left: 20px; }
.prose li { margin: 4px 0; }
.prose img { border-radius: var(--r); height: auto; }
.prose a { color: var(--blue); }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 16px; }
.prose th, .prose td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.prose th { background: var(--bg-soft); }
/* ---------- Trang Chứng nhận & Công bố sản phẩm ---------- */
.cert-block { border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; margin: 0 0 22px; background: #fff; }
.cert-block h2 { margin-top: 0 !important; }
.cert-table { max-width: 640px; }
.cert-table th { width: 190px; white-space: nowrap; color: var(--navy); }
.cert-imgs { display: flex; flex-wrap: wrap; gap: 14px; margin: 6px 0 14px; }
.cert-imgs a { flex: 1 1 260px; max-width: 340px; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; transition: box-shadow .2s, transform .15s; }
.cert-imgs a:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.cert-imgs img { display: block; width: 100%; border-radius: 0; }
.cert-pdf { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--blue); }
.cert-pdf::before { content: ""; width: 16px; height: 16px; flex: none; background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; }
/* ---------- Giấy công bố sản phẩm trên trang chi tiết (DHC) ---------- */
.xgo-congbo { margin: 14px 0; padding: 12px 14px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-sm); }
.xgo-congbo__item + .xgo-congbo__item { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.xgo-congbo__cap { font-weight: 700; color: var(--navy); font-size: .9rem; margin-bottom: 4px; }
.xgo-congbo__row { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; }
.xgo-congbo__k { color: var(--muted); min-width: 92px; }
.xgo-congbo__v { color: var(--navy); font-weight: 700; }
.xgo-congbo__link { display: inline-block; margin-top: 4px; color: var(--blue); font-weight: 600; }
.xgo-congbo__link:hover { text-decoration: underline; }
/* ---------- Blog ---------- */
.blog-main .post-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.post-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
.post-card__thumb img { width: 100%; height: 180px; object-fit: cover; }
.post-card__body { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.post-card__title { font-size: 1.02rem; margin: 0; color: var(--navy); }
.post-card__title a { color: inherit; text-decoration: none; }
.post-card__meta { font-size: .8rem; color: var(--muted); }
.post-card__excerpt { font-size: .88rem; color: var(--muted); flex: 1; }
.widget-area { display: grid; gap: 18px; }
.widget { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.widget-title { color: var(--navy); margin: 0 0 10px; font-size: 1rem; }
/* ---------- Nút WooCommerce dùng look .btn ---------- */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt {
background: var(--blue); color: #fff; border-radius: var(--r-sm); border: 1px solid var(--blue);
font-weight: 600; font-family: inherit; padding: 11px 20px; font-size: .92rem; line-height: 1.2;
transition: background .2s, border-color .2s; cursor: pointer;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.woocommerce #respond input#submit:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.woocommerce .button.added::after { margin-left: 6px; }
.woocommerce .single_add_to_cart_button { background: var(--green); border-color: var(--green); font-size: 1rem; padding: 14px 26px; }
.woocommerce .single_add_to_cart_button:hover { background: #128a3e; border-color: #128a3e; }
.woocommerce .single_add_to_cart_button.xgo-flash { box-shadow: 0 0 0 4px rgba(22,163,74,.25); }
/* ---------- Thông báo (notice) ---------- */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
border-radius: var(--r); border: 1px solid var(--line); border-top: 3px solid var(--blue);
background: var(--bg-soft); padding: 14px 16px; color: var(--ink);
}
.woocommerce-message { border-top-color: var(--green); }
.woocommerce-error { border-top-color: var(--sale); list-style: none; }
/* Bỏ icon ::before mặc định của WC (theme không nạp icon-font nên hiện ô vuông đè chữ) */
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display: none; }
.woocommerce-message, .woocommerce-info { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.woocommerce-message .button, .woocommerce-info .button { background: var(--navy); border-color: var(--navy); margin: 0; flex: none; }
/* ---------- Lưới sản phẩm (shop / archive) — thẻ gọn, đều nhau, nút mua full-width ---------- */
.woocommerce ul.products { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none;
grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); }
/* WooCommerce chèn ::before/::after (clearfix cho layout float cũ). Trong CSS grid chúng
thành ô lưới -> để lại 1 ô TRỐNG ở góc trên trái. Vô hiệu hoá để lưới xếp sát từ SP đầu. */
.woocommerce ul.products::before, .woocommerce ul.products::after { content: none; display: none; }
.woocommerce ul.products li.product { position: relative; display: flex; flex-direction: column;
background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
margin: 0 !important; padding: 0; width: auto !important; float: none !important; text-align: left;
transition: box-shadow .2s, transform .15s; }
.woocommerce ul.products li.product:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link { display: flex; flex-direction: column; flex: 1 0 auto; color: inherit; text-decoration: none; }
.woocommerce ul.products li.product a img { margin: 0; border-radius: 0; background: #fff; aspect-ratio: 1/1; object-fit: contain; padding: 10px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-size: .84rem; font-weight: 600; line-height: 1.4; color: var(--ink); padding: 8px 12px 2px;
min-height: 2.5em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.woocommerce ul.products li.product .price { display: block; margin-top: auto; padding: 2px 12px 10px; color: var(--sale); font-weight: 800; font-size: .98rem; }
.woocommerce ul.products li.product .price del { color: var(--muted); font-weight: 400; font-size: .8rem; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .button, .woocommerce ul.products li.product .added_to_cart {
display: block; margin: 0; padding: 11px 10px; border: 0; border-radius: 0; text-align: center;
font-size: .88rem; background: var(--green); border-color: var(--green); }
.woocommerce ul.products li.product .added_to_cart { padding: 8px 10px; background: var(--bg-soft); color: var(--blue); font-weight: 600; font-size: .82rem; }
.woocommerce ul.products li.product .button:hover { background: #128a3e; }
/* Nút phụ "Xem chi tiết" (đứng trên nút "Thêm vào giỏ hàng" xanh): kiểu viền/nền sáng */
.woocommerce ul.products li.product .xgo-view-detail { background: #fff; color: var(--blue); font-weight: 600; border-top: 1px solid var(--line); }
.woocommerce ul.products li.product .xgo-view-detail:hover { background: var(--bg-soft); color: var(--blue-dark); }
.woocommerce span.onsale { background: var(--sale); color: #fff; border-radius: var(--r-pill); min-height: auto;
min-width: auto; padding: 3px 10px; font-weight: 800; font-size: .76rem; top: 8px; left: 8px; margin: 0; line-height: 1.4; }
.woocommerce .star-rating span::before, .woocommerce .star-rating::before { color: var(--amber); }
/* ---------- Toolbar archive ---------- */
.woocommerce .woocommerce-result-count { color: var(--muted); font-size: .88rem; }
.woocommerce .woocommerce-ordering select { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 12px; font-family: inherit; }
.woocommerce nav.woocommerce-pagination ul { border: 0; display: flex; gap: 6px; justify-content: center; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span {
border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 14px; color: var(--ink); background: #fff; }
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--blue); color: #fff; border-color: var(--blue); }
/* ---------- Trang sản phẩm đơn ---------- */
.single-product div.product { display: block; }
/* Buy box: gom ẢNH + TÓM TẮT vào 1 thẻ trắng thống nhất (kiểu Long Châu). */
.single-product .pdp-buybox { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 28px; align-items: start;
background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 22px; }
/* WooCommerce ép gallery/summary width:48% + float (woocommerce-layout.css) -> khoảng trống giữa;
cần !important để ghi đè layout 2 cột float của WooCommerce cho item lưới lấp đầy cột. */
.single-product div.product .pdp-buybox .woocommerce-product-gallery { position: relative; width: 100% !important; min-width: 0; max-width: 100%; overflow: hidden; float: none !important; margin: 0;
background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 10px; box-sizing: border-box; }
.single-product div.product .pdp-buybox .summary { width: 100% !important; min-width: 0; float: none !important; margin: 0; }
.single-product div.product .product_title { font-size: clamp(1.3rem, 2.6vw, 1.7rem); color: var(--navy); margin: 0 0 12px; }
.single-product div.product p.price, .single-product div.product span.price { color: var(--sale); font-weight: 800; font-size: 1.6rem; }
.single-product div.product p.price del { color: var(--muted); font-weight: 400; font-size: 1rem; }
.single-product .woocommerce-product-details__short-description { color: var(--ink); margin: 12px 0; }
.single-product form.cart { margin: 18px 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.single-product .product_meta { font-size: .85rem; color: var(--muted); margin-top: 14px; }
/* Product gallery image slider navigation (nút lướt hình sản phẩm) */
.woocommerce-product-gallery { position: relative; }
/* Ảnh chính = "chồng" tuyệt đối, chỉ hiện slide đang active. Flexslider vẫn chạy và
chuyển class .flex-active-slide khi bấm thumbnail → ảnh lớn đổi theo. Trước đây theme
ép mọi slide display:flex nên tất cả hiện chồng, bấm thumbnail không thấy đổi. */
/* width:100%!important để đè inline `width:<9×slide>px` mà flexslider set (nó xếp slide
thành hàng ngang); ta hiện slide bằng absolute nên không cần hàng ngang đó. */
.woocommerce-product-gallery .woocommerce-product-gallery__wrapper { position: relative; width: 100% !important; height: auto !important; aspect-ratio: 1/1; margin: 0; overflow: hidden; transform: none !important; }
.woocommerce-product-gallery .woocommerce-product-gallery__image { position: absolute; inset: 0; margin: 0; aspect-ratio: 1/1; display: flex !important; align-items: center; justify-content: center; background: #fff; pointer-events: none; transition: opacity .2s ease; }
/* Có thumbnail (flexslider đã chạy) -> chỉ hiện slide đang active; bấm thumbnail đổi ảnh. */
.woocommerce-product-gallery:has(.flex-control-thumbs) .woocommerce-product-gallery__image { opacity: 0; visibility: hidden; }
.woocommerce-product-gallery:has(.flex-control-thumbs) .woocommerce-product-gallery__image.flex-active-slide { opacity: 1; visibility: visible; pointer-events: auto; z-index: 1; }
/* Chưa có thumbnail (flexslider chưa/không chạy) -> hiện ảnh đầu để không trống. */
.woocommerce-product-gallery:not(:has(.flex-control-thumbs)) .woocommerce-product-gallery__image:first-child { opacity: 1; visibility: visible; pointer-events: auto; z-index: 1; }
.woocommerce-product-gallery .woocommerce-product-gallery__image img { max-width: 100% !important; max-height: 100% !important; width: auto !important; height: auto !important; object-fit: contain !important; aspect-ratio: 1/1; }
.woocommerce-product-gallery .flex-direction-nav,
.woocommerce-product-gallery .xgo-gallery-arrows { list-style: none; margin: 0; padding: 0; position: absolute; top: 40%; left: 10px; right: 10px; transform: translateY(-50%); z-index: 50 !important; pointer-events: none; display: flex; justify-content: space-between; }
.woocommerce-product-gallery .flex-direction-nav li { pointer-events: auto; margin: 0; }
.woocommerce-product-gallery .flex-direction-nav a,
.woocommerce-product-gallery .xgo-gallery-arrow { pointer-events: auto !important; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background-color: rgba(255,255,255,.96); background-repeat: no-repeat; background-position: center; background-size: 22px 22px; border: 1.5px solid var(--line); border-radius: 50%; color: transparent; box-shadow: 0 6px 18px rgba(0,0,0,.18); text-indent: -9999px; font-size: 0; line-height: 0; text-decoration: none; transition: all .2s ease; cursor: pointer; opacity: 0.95; padding: 0; }
.woocommerce-product-gallery .flex-direction-nav a:hover,
.woocommerce-product-gallery .xgo-gallery-arrow:hover { background-color: var(--blue); border-color: var(--blue); opacity: 1; transform: scale(1.1); box-shadow: 0 8px 22px rgba(28,109,208,.35); }
/* Mũi tên lướt ảnh = chevron SVG tự vẽ (không dùng ký tự ‹ ›). Áp cho cả nút flexslider
(.flex-prev/.flex-next) lẫn nút tùy biến của theme (.xgo-prev/.xgo-next). */
.woocommerce-product-gallery .flex-direction-nav a.flex-prev,
.woocommerce-product-gallery .xgo-gallery-arrow.xgo-prev { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230d2b52' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E"); }
.woocommerce-product-gallery .flex-direction-nav a.flex-next,
.woocommerce-product-gallery .xgo-gallery-arrow.xgo-next { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230d2b52' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E"); }
.woocommerce-product-gallery .flex-direction-nav a.flex-prev:hover,
.woocommerce-product-gallery .xgo-gallery-arrow.xgo-prev:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E"); }
.woocommerce-product-gallery .flex-direction-nav a.flex-next:hover,
.woocommerce-product-gallery .xgo-gallery-arrow.xgo-next:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E"); }
/* Selector khớp đúng WooCommerce (.woocommerce div.product div.images ...) để THẮNG
rule `overflow:hidden` của WC — nếu không, dải thumbnail bị cắt, khách không lướt được ảnh. */
.woocommerce div.product div.images .flex-control-thumbs,
.woocommerce-product-gallery .flex-control-thumbs { display: flex; gap: 8px; margin: 12px 0 0; padding: 4px 2px 9px; list-style: none; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar { height: 6px; }
.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar-track { background: transparent; }
.woocommerce-product-gallery .flex-control-thumbs li { flex: 0 0 62px; width: 62px; height: 62px; border: 1.5px solid var(--line); border-radius: var(--r-sm); overflow: hidden; cursor: pointer; opacity: 0.65; background: #fff; transition: all .2s ease; scroll-snap-align: start; }
.woocommerce-product-gallery .flex-control-thumbs li img { width: 100%; height: 100%; object-fit: contain; aspect-ratio: 1/1; }
.woocommerce-product-gallery .flex-control-thumbs li:hover,
.woocommerce-product-gallery .flex-control-thumbs li.flex-active,
.woocommerce-product-gallery .flex-control-thumbs li .flex-active { opacity: 1; border-color: var(--blue); box-shadow: 0 0 0 2px rgba(28,109,208,.25); }
.single-product .woocommerce-tabs { grid-column: 1 / -1; margin-top: 26px; }
.single-product .woocommerce-tabs ul.tabs { padding: 0; border-bottom: 1px solid var(--line); display: flex; gap: 6px; flex-wrap: wrap; }
.single-product .woocommerce-tabs ul.tabs::before { border: 0; }
.single-product .woocommerce-tabs ul.tabs li { background: transparent; border: 0; border-radius: var(--r-sm) var(--r-sm) 0 0; margin: 0; }
.single-product .woocommerce-tabs ul.tabs li::before, .single-product .woocommerce-tabs ul.tabs li::after { display: none; }
.single-product .woocommerce-tabs ul.tabs li a { color: var(--muted); font-weight: 600; padding: 12px 18px; display: block; }
.single-product .woocommerce-tabs ul.tabs li.active a { color: var(--blue); box-shadow: inset 0 -3px 0 var(--blue); }
.single-product .woocommerce-tabs .panel { padding-top: 18px; }
.single-product .pdp-section { grid-column: 1 / -1; }
.single-product .pdp-section:first-of-type { margin-top: 26px; }
.single-product .related.products, .single-product .upsells.products { grid-column: 1 / -1; }
.single-product .related.products > h2, .single-product .upsells.products > h2 { color: var(--navy); }
/* ---------- Quantity stepper (cân bằng, đồng nhất 100%) ---------- */
.woocommerce .quantity { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: var(--r-pill); overflow: hidden; background: #fff; height: 42px; box-sizing: border-box; margin: 0; vertical-align: middle; }
.xgo-qty-btn { border: 0; background: var(--bg-soft); color: var(--navy); width: 40px; height: 100%; font-size: 1.25rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; line-height: 1; user-select: none; transition: background .15s, color .15s; }
.xgo-qty-btn:hover { background: var(--blue); color: #fff; }
.woocommerce .quantity input.qty { border: 0; width: 48px; height: 100%; text-align: center; font-weight: 700; font-size: 0.98rem; font-family: inherit; color: var(--navy); background: transparent; padding: 0; margin: 0; line-height: 42px; -moz-appearance: textfield; box-sizing: border-box; }
.woocommerce .quantity input.qty:focus { outline: none; }
.woocommerce .quantity input.qty::-webkit-outer-spin-button, .woocommerce .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* ---------- Chọn "Phân loại" dạng viên (pill) — SP nhiều phiên bản ---------- */
/* Bố cục dọc: nhãn + hàng nút phân loại ở trên, số lượng + nút mua ở dưới. */
.single-product form.variations_form.cart { display: block; }
.single-product form.variations_form .variations { width: 100%; margin: 4px 0 6px; border: 0; }
.single-product form.variations_form .variations tbody,
.single-product form.variations_form .variations tr,
.single-product form.variations_form .variations th,
.single-product form.variations_form .variations td { display: block; padding: 0; border: 0; }
.single-product form.variations_form .variations th.label { margin: 12px 0 8px; text-align: left; }
.single-product form.variations_form .variations th.label label { margin: 0; font-weight: 700; font-size: .95rem; color: var(--navy); }
/* Ẩn dropdown gốc (vẫn nằm trong DOM để form gửi giá trị) + link "Clear". */
.xgo-swatch-select { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.single-product form.variations_form .reset_variations { display: none !important; }
/* Hàng nút phân loại. */
.xgo-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.xgo-swatch { font-family: inherit; font-size: .92rem; font-weight: 600; line-height: 1.2; color: var(--ink);
background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-pill); padding: 9px 18px; cursor: pointer;
transition: border-color .15s, color .15s, background .15s, box-shadow .15s; }
.xgo-swatch:hover { border-color: var(--blue); color: var(--blue); }
.xgo-swatch.is-active { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: var(--shadow-sm); }
.xgo-swatch.is-disabled { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.xgo-swatch.is-disabled:hover { border-color: var(--line); color: var(--ink); }
/* Số lượng + nút thêm giỏ (WC bọc trong .woocommerce-variation-add-to-cart) trên 1 hàng. */
.single-product .single_variation_wrap { margin-top: 6px; }
.single-product .woocommerce-variation-add-to-cart { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Giá biến thể trong form bị ẩn: giá chính (p.price dưới tiêu đề) đã cập nhật live theo phân loại (variation-swatches.js). Tránh 2 khối giá trùng. */
.single-product .woocommerce-variation-price { display: none; }
.single-product .woocommerce-variation-availability { color: var(--muted); font-weight: 600; margin: 2px 0 8px; }
/* ---------- Social proof: "Đã bán N" (+ sao) ---------- */
.pcard__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 4px; min-height: 0; }
.pcard__meta:empty { display: none; }
.pcard__sold { color: var(--muted); font-size: .8rem; font-weight: 600; }
.pcard__meta .pcard__rating + .pcard__sold::before { content: "·"; margin-right: 8px; color: var(--line); }
.single-product .pdp-social { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; color: var(--muted); font-weight: 600; }
.single-product .pdp-social .pcard__sold { font-size: .95rem; }
/* ---------- Badge bảo đảm cạnh giá ---------- */
.single-product .pdp-guarantee { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 14px; }
.single-product .pdp-guarantee__item { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--navy); background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 5px 12px; }
.single-product .pdp-guarantee__item svg { color: var(--green); flex: 0 0 auto; }
/* ---------- Trang chủ: ẩn mũi tên/chấm carousel khi chỉ 1 slide ---------- */
.car:has(.car__track > *:only-child) .car-arrow,
.car:has(.car__track > *:only-child) .car-dots { display: none; }
/* ---------- Trang chủ: strip Cam kết chất lượng & pháp lý ---------- */
.home-certs { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 22px; text-align: center; }
.home-certs__head h2 { color: var(--navy); margin: 0 0 4px; }
.home-certs__head p { color: var(--muted); margin: 0 auto 16px; max-width: 640px; }
.home-certs__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 16px; }
.home-cert { display: flex; align-items: center; gap: 10px; text-align: left; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px; }
.home-cert .ic { color: var(--green); flex: 0 0 auto; }
.home-cert b { display: block; color: var(--navy); font-size: .9rem; line-height: 1.25; }
.home-cert span { color: var(--muted); font-size: .78rem; }
.home-certs__cta { display: inline-block; }
/* ---------- Trang chủ: teaser Góc sức khỏe ---------- */
.home-blog { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hblog-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; color: inherit; text-decoration: none; transition: box-shadow .18s, transform .18s; }
.hblog-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.hblog-card__media { display: block; aspect-ratio: 16/9; background: var(--bg-soft); overflow: hidden; }
.hblog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hblog-card__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.hblog-card__cat { align-self: flex-start; font-size: .72rem; font-weight: 700; color: var(--blue); background: var(--bg-soft-2); border-radius: var(--r-pill); padding: 2px 10px; }
.hblog-card__title { color: var(--navy); font-weight: 700; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hblog-card__meta { color: var(--muted); font-size: .8rem; }
/* ---------- Checkout: dải trust dưới nút đặt hàng ---------- */
.checkout-trust { clear: both; display: grid; grid-template-columns: 1fr; width: 100%; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.checkout-trust > div { display: flex; align-items: center; gap: 7px; font-size: .82rem; color: var(--muted); font-weight: 600; }
.checkout-trust svg { color: var(--green); flex: 0 0 auto; }
/* ---------- Footer: badge phương thức thanh toán ---------- */
.foot-pay { background: var(--navy); border-top: 1px solid rgba(255,255,255,.12); }
.foot-pay .container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; padding-block: 14px; }
.foot-pay__label { color: rgba(255,255,255,.7); font-size: .82rem; font-weight: 600; }
.foot-pay__badge { display: inline-flex; align-items: center; gap: 7px; color: #fff; font-size: .8rem; font-weight: 600; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-pill); padding: 6px 14px; }
.foot-pay__badge svg { color: var(--sky); }
/* Badge "Đã thông báo Bộ Công Thương" — đặt trong cột thông tin công ty (nền trắng) */
.foot-nap__bct { list-style: none; margin-top: 10px; }
.foot-bct { display: inline-block; line-height: 0; }
.foot-bct img { height: 44px; width: auto; display: block; }
@media (max-width: 860px) {
.home-certs__grid { grid-template-columns: repeat(2, 1fr); }
.home-blog { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.home-certs__grid { grid-template-columns: 1fr; }
}
/* ---------- Reviews ---------- */
.woocommerce #reviews #comments ol.commentlist li { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; margin-bottom: 12px; }
.woocommerce #review_form #respond input, .woocommerce #review_form #respond textarea { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; font-family: inherit; }
/* Voucher Auto Picker 1-click */
.xgo-voucher-picker { background: #eff6ff; border: 1px dashed #3b82f6; border-radius: var(--r-lg); padding: 14px 16px; margin-bottom: 20px; }
.xgo-vp__title { font-size: .88rem; font-weight: 700; color: var(--navy); margin-bottom: 10px; }
.xgo-vp__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.xgo-vp__item { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 8px 12px; box-shadow: var(--shadow-sm); }
.xgo-vp__info { display: flex; flex-direction: column; }
.xgo-vp__info b { font-size: .84rem; color: var(--blue); }
.xgo-vp__info span { font-size: .74rem; color: var(--muted); }
.xgo-vp-apply { font-size: .76rem; font-weight: 700; padding: 4px 10px; height: auto; border-radius: var(--r-pill); cursor: pointer; }
/* ---------- Cart ---------- */
.woocommerce table.shop_table { border: 1px solid var(--line); border-radius: var(--r-lg); border-collapse: separate; border-spacing: 0; overflow: hidden; }
/* Chỉ hàng tiêu đề (thead) mới nền navy; th nhãn-hàng (tbody/tfoot) để nền sáng, chữ tối — tránh navy đè cả bảng */
.woocommerce table.shop_table thead th { background: var(--navy); color: #fff; padding: 14px; }
.woocommerce table.shop_table tbody th, .woocommerce table.shop_table tfoot th { background: var(--bg-soft); color: var(--navy); padding: 14px; font-weight: 700; }
.woocommerce table.shop_table td { padding: 14px; border-top: 1px solid var(--line); }
.woocommerce .cart-collaterals .cart_totals, .woocommerce-cart .cart-collaterals .cart_totals { float: none; width: 100%; }
.woocommerce .cart_totals h2 { color: var(--navy); }
.woocommerce a.remove { color: var(--sale) !important; border: 1px solid var(--line); }
.woocommerce a.remove:hover { background: var(--sale); color: #fff !important; }
/* ---------- Checkout / Account ---------- */
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce-account form input, .woocommerce .select2-container--default .select2-selection--single {
border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px 12px; font-family: inherit; }
.woocommerce #payment, .woocommerce-checkout #order_review, .woocommerce form.checkout_coupon,
.woocommerce-account .woocommerce-MyAccount-content { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--line); }
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 12px 16px; color: var(--ink); text-decoration: none; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--blue); color: #fff; }
/* ---------- Breadcrumb WooCommerce ---------- */
.woocommerce .woocommerce-breadcrumb { color: var(--muted); font-size: .86rem; }
.woocommerce .woocommerce-breadcrumb a { color: var(--blue); text-decoration: none; }
/* ---------- Thanh "Mua ngay" cố định (mobile) ---------- */
.xgo-sticky-atc { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #fff;
border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(20,40,80,.10); padding: 8px 0; }
.xgo-sticky-atc[hidden] { display: none; }
.xgo-sticky-atc .container { display: flex; align-items: center; gap: 12px; }
.xgo-sticky-atc__info { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.xgo-sticky-atc__info img { width: 44px; height: 44px; object-fit: contain; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; }
.xgo-sticky-atc__info strong { display: block; font-size: .88rem; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xgo-sticky-atc__price { color: var(--sale); font-weight: 800; font-size: .92rem; }
.xgo-sticky-atc__btn { white-space: nowrap; }
/* ---------- Responsive ---------- */
@media (max-width: 860px) {
.single-product .pdp-buybox { grid-template-columns: minmax(0, 1fr); padding: 16px; }
}
@media (min-width: 861px) {
/* Desktop: ẩn thanh sticky add-to-cart (đã có buy-box hiển thị). */
.xgo-sticky-atc { display: none !important; }
}
/* ============================================================
MY ACCOUNT — thiết kế lại (sidebar + thẻ, đồng bộ phong cách site)
============================================================ */
.woocommerce-account .woocommerce { margin: 0; }
/* Trang tài khoản KHÔNG dùng giới hạn bề rộng kiểu bài viết (.prose) */
.woocommerce-account .entry-content.prose, .woocommerce-account .prose { max-width: none; }
body.woocommerce-account.logged-in .woocommerce { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 24px; align-items: start; }
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation { grid-column: 1; }
body.woocommerce-account.logged-in .woocommerce-MyAccount-content { grid-column: 2; }
/* Thẻ hồ sơ được JS chèn vào đầu nav (xem main.js) → nằm trên menu trong cột trái */
/* Sidebar điều hướng */
.woocommerce-account .woocommerce-MyAccount-navigation { float: none; width: auto; margin: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: visible; }
.woocommerce-account .woocommerce-MyAccount-navigation li { border: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: flex; align-items: center; gap: 11px; padding: 11px 14px; margin: 2px 0; color: var(--navy); font-weight: 600; font-size: .92rem; border-radius: var(--r); text-decoration: none; transition: background .15s, color .15s; }
.woocommerce-account .woocommerce-MyAccount-navigation li a::before { content: ""; width: 19px; height: 19px; flex: none; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--bg-soft); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--blue); color: #fff; box-shadow: 0 6px 14px rgba(28,109,208,.28); }
.woocommerce-MyAccount-navigation-link--dashboard a { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8M5 10v10h14V10'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--orders a { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l-1 13H7L6 7z'/%3E%3Cpath d='M9 7a3 3 0 0 1 6 0'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--downloads a { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0l-4-4m4 4l4-4M5 21h14'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--edit-address a { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-5-7-11a7 7 0 0 1 14 0c0 6-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.4'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--edit-account a { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--sale); --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 17l5-5-5-5M21 12H9M12 3H5v18h7'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--customer-logout a:hover { background: #fdece8; }
/* Thẻ hồ sơ đầu sidebar (kiểu Long Châu) */
.xgo-acc-profile { display: flex; align-items: center; gap: 12px; padding: 16px; margin-bottom: 12px;
border-radius: var(--r-lg); background: linear-gradient(135deg, var(--blue), var(--blue-dark)); color: #fff; box-shadow: var(--shadow-sm); }
.xgo-acc-profile__av { width: 48px; height: 48px; border-radius: 50%; flex: none; display: grid; place-items: center;
background: rgba(255,255,255,.22); font-weight: 800; font-size: 1.3rem; }
.xgo-acc-profile__meta { display: flex; flex-direction: column; min-width: 0; }
.xgo-acc-profile__meta b { font-size: 1rem; line-height: 1.3; }
.xgo-acc-profile__meta span { font-size: .82rem; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Nội dung */
.woocommerce-account .woocommerce-MyAccount-content { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 24px 26px; margin: 0; width: auto; float: none; }
.woocommerce-MyAccount-content > h2, .woocommerce-MyAccount-content > h3 { color: var(--navy); margin-top: 0; }
.woocommerce-MyAccount-content mark { background: var(--bg-soft); color: var(--blue); font-weight: 700; padding: 0 4px; border-radius: 4px; }
/* Dashboard: thẻ điều hướng nhanh (chèn qua hook woocommerce_account_dashboard) */
.xgo-acc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.xgo-acc-card { display: flex; gap: 12px; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-soft); color: var(--navy); transition: box-shadow .15s, transform .15s, background .15s; }
.xgo-acc-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); background: #fff; }
.xgo-acc-card .ic { width: 42px; height: 42px; border-radius: 12px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; color: var(--blue); flex: none; }
.xgo-acc-card b { display: block; font-size: .95rem; }
.xgo-acc-card .sub { font-size: .8rem; color: var(--muted); }
/* Bảng đơn hàng */
.woocommerce-orders-table.shop_table thead th { background: var(--navy); color: #fff; padding: 13px 14px; font-size: .82rem; }
.woocommerce-orders-table tbody td { background: #fff; color: var(--ink); }
.woocommerce-orders-table td { padding: 13px 14px; vertical-align: middle; }
.woocommerce-orders-table__cell-order-number a { color: var(--blue); font-weight: 700; }
.woocommerce-orders-table .woocommerce-button { margin: 2px; }
.woocommerce-orders-table__cell-order-status { font-weight: 700; color: var(--green); }
/* Địa chỉ */
.woocommerce-Addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 6px; }
/* WC mặc định ép con .col-1/.col-2 width:48% + float → trong ô grid bị hẹp & lệch.
CSS WC nạp SAU theme nên cần specificity cao hơn (gắn kèm .col2-set/.u-columns) mới đè được. */
.woocommerce-Addresses.col2-set .col-1, .woocommerce-Addresses.col2-set .col-2,
.woocommerce-Addresses.u-columns .u-column1, .woocommerce-Addresses.u-columns .u-column2 { width: auto; float: none; margin: 0; }
/* Ép vị trí ô lưới (auto-placement của grid bị đảo cột/lệch hàng) */
.woocommerce-Addresses.col2-set .col-1, .woocommerce-Addresses.u-columns .u-column1 { grid-column: 1; grid-row: 1; }
.woocommerce-Addresses.col2-set .col-2, .woocommerce-Addresses.u-columns .u-column2 { grid-column: 2; grid-row: 1; }
.woocommerce-Address { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; }
.woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.woocommerce-Address-title h2, .woocommerce-Address-title h3 { margin: 0; color: var(--navy); font-size: 1.05rem; white-space: nowrap; }
.woocommerce-Address-title .edit { font-size: .82rem; font-weight: 600; color: var(--blue); white-space: nowrap; }
.woocommerce-Address address { font-style: normal; color: var(--ink); line-height: 1.7; }
/* Tài khoản — nhóm đổi mật khẩu thành fieldset có viền cho gọn */
.woocommerce-EditAccountForm fieldset { border: 1px solid var(--line); border-radius: var(--r); padding: 14px 18px 4px; margin: 20px 0 6px; }
.woocommerce-EditAccountForm legend { font-weight: 700; color: var(--navy); padding: 0 8px; font-size: .98rem; }
.woocommerce-EditAccountForm .woocommerce-Button { margin-top: 4px; }
/* Đăng nhập / Đăng ký — TÁCH RIÊNG: mỗi lúc chỉ hiện 1 form, chuyển bằng tab */
.woocommerce-account:not(.logged-in) .woocommerce { max-width: 480px; margin-inline: auto; }
.xgo-auth-tabs { display: flex; gap: 5px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 5px; margin: 0 0 16px; box-shadow: var(--shadow-sm); }
.xgo-auth-tabs button { flex: 1; border: 0; background: transparent; padding: 11px; border-radius: var(--r-pill); font-weight: 700; font-size: .92rem; color: var(--muted); cursor: pointer; font-family: inherit; transition: background .15s, color .15s; }
.xgo-auth-tabs button.is-active { background: var(--blue); color: #fff; }
.woocommerce-account:not(.logged-in) #customer_login.u-columns { display: block; }
.woocommerce-account:not(.logged-in) #customer_login .u-column1,
.woocommerce-account:not(.logged-in) #customer_login .u-column2 { float: none; width: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 24px 26px; }
.woocommerce-account:not(.logged-in) #customer_login .u-column2 { display: none; }
.woocommerce-account:not(.logged-in) #customer_login.show-register .u-column1 { display: none; }
.woocommerce-account:not(.logged-in) #customer_login.show-register .u-column2 { display: block; }
.woocommerce-account #customer_login h2 { color: var(--navy); margin-top: 0; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.woocommerce form.login, .woocommerce form.register { border: 0; padding: 0; margin: 0; border-radius: 0; }
.woocommerce .woocommerce-form-login__rememberme { color: var(--muted); }
/* ============================================================
GIỎ HÀNG — 2 cột: bảng trái + thẻ tổng tiền dính bên phải (kiểu Long Châu)
============================================================ */
/* Bỏ giới hạn .prose 820px để giỏ/thanh toán dùng hết chiều rộng container */
.woocommerce-cart .entry-content.prose, .woocommerce-cart .prose,
.woocommerce-checkout .entry-content.prose, .woocommerce-checkout .prose { max-width: none; }
.woocommerce-cart .woocommerce { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
/* Giỏ TRỐNG: bỏ lưới 2 cột để trạng thái rỗng canh giữa (không bị dồn cột trái). */
.woocommerce-cart .woocommerce:has(.xgo-empty-cart) { display: block; }
.woocommerce-cart .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.woocommerce-cart form.woocommerce-cart-form { grid-column: 1; margin: 0; }
.woocommerce-cart .cart-collaterals { grid-column: 2; width: auto; float: none; }
.woocommerce-cart .cart-collaterals .cart_totals { position: sticky; top: 90px; float: none; width: 100%;
background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 18px 20px; }
.woocommerce-cart .cart_totals h2 { font-size: 1.05rem; margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.woocommerce-cart .cart_totals table { border: 0; }
.woocommerce-cart .cart_totals table th, .woocommerce-cart .cart_totals table td { background: transparent; border: 0; padding: 8px 0; color: var(--ink); }
.woocommerce-cart .cart_totals .order-total th, .woocommerce-cart .cart_totals .order-total td { padding-top: 12px; border-top: 1px solid var(--line); font-size: 1.05rem; }
.woocommerce-cart .cart_totals .order-total .amount { color: var(--sale); font-size: 1.25rem; font-weight: 800; }
.woocommerce-cart .wc-proceed-to-checkout { padding: 14px 0 0; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { display: block; width: 100%; text-align: center;
background: var(--blue); border-color: var(--blue); font-size: 1.02rem; font-weight: 700; padding: 14px; border-radius: var(--r-sm); }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
/* Hàng nút coupon + cập nhật trong bảng */
.woocommerce-cart .cart-form__cart-item { vertical-align: middle; }
.woocommerce-cart .coupon label { display: none; }
/* ====== GIỎ HÀNG TRỐNG (kiểu Long Châu) ====== */
.woocommerce-cart .return-to-shop { display: none; } /* nút "Return to shop" mặc định -> đã thay bằng CTA riêng */
.xgo-empty-cart { max-width: 720px; margin: 0 auto; }
.xgo-empty-cart__back { display: inline-flex; align-items: center; gap: 6px; color: var(--blue); font-weight: 600; font-size: .95rem; margin-bottom: 18px; }
.xgo-empty-cart__back:hover { color: var(--blue-dark); }
.xgo-empty-cart__body { display: flex; flex-direction: column; align-items: center; text-align: center;
background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 48px 24px 56px; }
.xgo-empty-cart__icon { display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%;
background: var(--bg-soft-2); color: var(--sky); margin-bottom: 22px; }
.xgo-empty-cart__icon svg { width: 66px; height: 66px; }
.xgo-empty-cart__title { font-size: 1.25rem; color: var(--navy); margin: 0 0 8px; }
.xgo-empty-cart__sub { color: var(--muted); max-width: 420px; margin: 0 0 26px; line-height: 1.6; }
.xgo-empty-cart__cta { min-width: 200px; }
/* Trang giỏ nằm trong .prose -> ".prose a" (xanh) đè màu chữ nút; ép trắng cho nút CTA. */
.xgo-empty-cart .btn-primary { color: #fff; }
.xgo-empty-cart .btn-primary:hover { color: #fff; }
/* ====== GIỎ HÀNG kiểu Long Châu: thanh freeship + thẻ từng sản phẩm ====== */
/* Thanh miễn phí vận chuyển (nằm trên cùng, full 2 cột) */
.woocommerce-cart .xgo-freeship { grid-column: 1 / -1; background: #eef6ff; border: 1px solid #cfe4ff; border-radius: var(--r); padding: 12px 16px; margin: 0; }
.xgo-freeship.is-done { background: #eafaf0; border-color: #bfe8cf; }
.xgo-freeship__msg { font-size: .9rem; color: var(--navy); margin-bottom: 8px; }
.xgo-freeship__bar { height: 6px; background: #d7e7fb; border-radius: 999px; overflow: hidden; }
.xgo-freeship__bar span { display: block; height: 100%; width: 0; background: var(--blue); border-radius: 999px; transition: width .3s ease; }
.xgo-freeship.is-done .xgo-freeship__bar span { background: var(--green); }
/* Hàng "Chọn tất cả" (trên đầu danh sách, trong cột trái) */
.xgo-cart-head { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 12px 16px; margin: 0 0 12px; }
.xgo-cart-head__all { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; color: var(--navy); cursor: pointer; font-size: .92rem; }
.xgo-cart-head__all input { width: 18px; height: 18px; accent-color: var(--blue); cursor: pointer; }
/* Bảng WooCommerce -> danh sách thẻ */
.woocommerce-cart form.woocommerce-cart-form { border: 0; }
.woocommerce-cart form.woocommerce-cart-form table.shop_table { border: 0; background: transparent; border-radius: 0; overflow: visible; }
.woocommerce-cart form.woocommerce-cart-form thead { display: none; }
.woocommerce-cart form.woocommerce-cart-form tbody,
.woocommerce-cart form.woocommerce-cart-form tbody > tr:not(.cart_item),
.woocommerce-cart form.woocommerce-cart-form tbody > tr > td { display: block; width: auto; }
.woocommerce-cart tr.cart_item {
display: grid;
grid-template-columns: 26px 64px minmax(0, 1fr) 100px 128px 104px 34px;
grid-template-areas: "chk thumb name price qty sub remove";
align-items: center; column-gap: 12px;
background: #fff; border: 1px solid var(--line); border-radius: var(--r);
padding: 12px 14px; margin: 0 0 12px;
}
.woocommerce-cart tr.cart_item.is-unselected { opacity: .5; }
.woocommerce-cart tr.cart_item > td { border: 0 !important; padding: 0; }
.woocommerce-cart tr.cart_item td::before { display: none !important; } /* bỏ nhãn "responsive" của WC */
.woocommerce-cart tr.cart_item .xgo-cart-select { grid-area: chk; justify-self: center; }
.woocommerce-cart tr.cart_item .xgo-cart-check { width: 18px; height: 18px; accent-color: var(--blue); cursor: pointer; }
.woocommerce-cart tr.cart_item .product-thumbnail { grid-area: thumb; }
.woocommerce-cart tr.cart_item .product-thumbnail img { width: 60px; height: 60px; object-fit: contain; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; }
.woocommerce-cart tr.cart_item .product-name { grid-area: name; font-size: .9rem; line-height: 1.4; }
.woocommerce-cart tr.cart_item .product-name a { color: var(--navy); font-weight: 600; text-decoration: none; }
.woocommerce-cart tr.cart_item .product-name a:hover { color: var(--blue); }
.woocommerce-cart tr.cart_item .product-name .variation { font-size: .8rem; color: var(--muted); margin-top: 2px; }
.woocommerce-cart tr.cart_item .product-price { grid-area: price; text-align: right; color: var(--ink); font-size: .9rem; }
.woocommerce-cart tr.cart_item .product-quantity { grid-area: qty; justify-self: center; }
.woocommerce-cart tr.cart_item .product-subtotal { grid-area: sub; text-align: right; font-weight: 800; color: var(--sale); }
.woocommerce-cart tr.cart_item .product-remove { grid-area: remove; justify-self: center; }
.woocommerce-cart tr.cart_item .product-remove a.remove { border: 0 !important; background: transparent !important; color: var(--muted) !important; font-size: 1.25rem; line-height: 1; width: auto; height: auto; }
.woocommerce-cart tr.cart_item .product-remove a.remove:hover { color: var(--sale) !important; background: transparent !important; }
/* Hàng nút (coupon gốc + cập nhật giỏ) — coupon sẽ được JS chuyển sang thẻ tóm tắt */
.woocommerce-cart td.actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 4px 0 0 !important; background: transparent; }
.woocommerce-cart td.actions .button[name="update_cart"] { background: #fff; color: var(--navy); border: 1px solid var(--line); }
.woocommerce-cart td.actions .button[name="update_cart"]:hover:not([disabled]) { border-color: var(--blue); color: var(--blue); }
/* Ô mã ưu đãi trong thẻ tóm tắt (JS chuyển vào) */
.xgo-coupon-box { margin: 0 0 14px; padding: 0 0 14px; border-bottom: 1px solid var(--line); }
.xgo-coupon-box .coupon { display: flex; gap: 8px; }
.xgo-coupon-box .coupon .input-text { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; font-family: inherit; }
.xgo-coupon-box .coupon .button { flex: none; background: var(--blue); border-color: var(--blue); }
/* Nhãn dòng giảm giá (voucher) trong tóm tắt */
.woocommerce-cart .cart_totals .cart-discount th { font-weight: 600; }
.woocommerce-cart .cart_totals .cart-discount td { color: var(--green); text-align: right; }
.woocommerce-cart .cart_totals .order-total td { text-align: right; }
.woocommerce-cart .cart_totals .cart-subtotal td { text-align: right; }
@media (max-width: 860px) {
.woocommerce-cart tr.cart_item {
grid-template-columns: 26px 56px minmax(0, 1fr) auto;
grid-template-areas:
"chk thumb name remove"
"chk thumb price price"
"chk thumb qty sub";
row-gap: 6px;
}
.woocommerce-cart tr.cart_item .product-price { text-align: left; }
.woocommerce-cart tr.cart_item .product-quantity { justify-self: start; }
}
/* ============================================================
THANH TOÁN — form trái + tóm tắt đơn dính bên phải (kiểu Long Châu)
============================================================ */
.woocommerce-checkout form.checkout.woocommerce-checkout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }
.woocommerce-checkout .woocommerce-form-coupon-toggle { grid-column: 1 / -1; margin: 0; }
.woocommerce-checkout #customer_details { grid-column: 1; grid-row: 2 / 4; }
.woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 2; margin: 0 0 12px; font-size: 1.1rem; }
.woocommerce-checkout #order_review { grid-column: 2; grid-row: 3; position: sticky; top: 90px;
background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 18px 20px; }
/* Trong cột trái: xếp dọc billing rồi ghi chú, full chiều rộng
(#customer_details CHÍNH là .col2-set, col-1/col-2 là con trực tiếp) */
.woocommerce-checkout #customer_details.col2-set { display: block; }
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 { float: none; width: auto; max-width: none; padding: 0; }
.woocommerce-checkout #customer_details .col-2 { margin-top: 22px; }
/* Bộ chọn địa chỉ 3 cấp (Tỉnh/Quận/Phường) — select đồng bộ với input */
.woocommerce-checkout .xgo-addr select { width: 100%; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px 12px; font-family: inherit; font-size: .95rem; background: #fff; color: var(--ink); line-height: 1.3; }
.woocommerce-checkout .xgo-addr select:focus { border-color: var(--blue); outline: none; }
.woocommerce-checkout .col2-set .col-1 > h3, .woocommerce-checkout .col2-set .col-2 > h3 { font-size: 1.1rem; color: var(--navy); margin: 0 0 14px; }
/* Khung form trên nền thẻ trắng cho gọn */
.woocommerce-checkout #customer_details { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 22px 24px; }
/* Bảng tóm tắt đơn + thanh toán trong thẻ phải */
.woocommerce-checkout #order_review table.shop_table { border: 0; }
.woocommerce-checkout #order_review table.shop_table th, .woocommerce-checkout #order_review table.shop_table td { padding: 11px 13px; }
/* Ảnh + tên + số lượng sản phẩm trong "Đơn hàng của bạn" (× N gộp vào khối tên, không mồ côi) */
.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name .xgo-review-item { display: flex; align-items: flex-start; gap: 12px; }
.woocommerce-checkout .xgo-review-thumb { width: 60px; height: 60px; object-fit: contain; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; flex: none; margin: 0; padding: 3px; box-shadow: var(--shadow-sm); }
.woocommerce-checkout .xgo-review-name { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.woocommerce-checkout .xgo-review-title { font-size: .9rem; line-height: 1.4; font-weight: 600; color: var(--ink); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.woocommerce-checkout .xgo-review-qty { display: inline-block; align-self: flex-start; font-size: .76rem; font-weight: 600; color: var(--blue); background: var(--bg-soft); border-radius: 999px; padding: 2px 9px; }
/* Checkout 1 trang: bộ chỉnh số lượng (−/+) + nút xóa ngay trong "Đơn hàng của bạn" */
.woocommerce-checkout .xgo-review-actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.woocommerce-checkout .xgo-review-qtybox { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: #fff; overflow: hidden; flex: none; }
.woocommerce-checkout .xgo-review-qtybox .xgo-rq { border: 0; background: transparent; width: 28px; height: 30px; font-size: 1.1rem; line-height: 1; color: var(--navy); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.woocommerce-checkout .xgo-review-qtybox .xgo-rq:hover { background: var(--bg-soft); }
.woocommerce-checkout .xgo-review-qtybox .xgo-rq-n { min-width: 22px; text-align: center; font-weight: 700; font-size: .9rem; color: var(--ink); }
/* Thanh freeship dạng 1 hàng đầu bảng review (tự cập nhật khi đổi số lượng) */
.woocommerce-checkout .xgo-freeship-row > td { padding: 2px 13px 12px !important; border: 0 !important; }
/* Lớp phủ khi đang cập nhật giỏ trên checkout */
#order_review.xgo-updating { opacity: .55; pointer-events: none; transition: opacity .15s; }
/* Ẩn cụm nút liên hệ nổi trên trang thanh toán (đỡ che tổng tiền / nút đặt hàng) */
.woocommerce-checkout .xgo-float { display: none !important; }
/* Ô mã giảm giá luôn hiện trong khu vực thanh toán (bỏ toggle "bấm để mở") */
.woocommerce-checkout .woocommerce-form-coupon-toggle { display: none !important; }
.woocommerce-checkout .xgo-coupon { margin: 6px 0 16px; }
.woocommerce-checkout .xgo-coupon__label { display: block; font-weight: 700; color: var(--navy); font-size: .92rem; margin-bottom: 8px; }
.woocommerce-checkout .xgo-coupon__form { display: flex; gap: 8px; margin: 0; }
.woocommerce-checkout .xgo-coupon__form .input-text { flex: 1 1 auto; min-width: 0; width: auto; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px 12px; font-family: inherit; font-size: .95rem; background: #fff; color: var(--ink); margin: 0; }
.woocommerce-checkout .xgo-coupon__form .input-text:focus { border-color: var(--blue); outline: none; }
.woocommerce-checkout .xgo-coupon__btn { flex: none; background: var(--blue); color: #fff; border: 0; border-radius: var(--r-sm); padding: 0 18px; font-weight: 700; font-size: .92rem; cursor: pointer; white-space: nowrap; }
.woocommerce-checkout .xgo-coupon__btn:hover { background: var(--navy); }
/* Hàng "Mã giảm giá" trong tổng: cho xuống dòng để link [Xóa] không bị cắt */
.woocommerce-checkout-review-order-table tr.cart-discount td { white-space: normal; }
.woocommerce-checkout .woocommerce-remove-coupon { display: inline-block; margin-left: 4px; font-size: .74rem; color: var(--sale); }
.woocommerce-checkout .xgo-coupon-notice { margin-top: 10px; }
.woocommerce-checkout .xgo-coupon-notice .woocommerce-message, .woocommerce-checkout .xgo-coupon-notice .woocommerce-error, .woocommerce-checkout .xgo-coupon-notice ul { margin: 0; font-size: .85rem; padding: 9px 12px; border-radius: var(--r-sm); list-style: none; }
.woocommerce-checkout #order_review .order-total .amount { color: var(--sale); font-size: 1.2rem; font-weight: 800; }
.woocommerce-checkout #payment { background: transparent; border: 0; border-radius: 0; padding: 14px 0 0; }
.woocommerce-checkout #payment ul.payment_methods { border: 1px solid var(--line); border-radius: var(--r); padding: 0; overflow: hidden; background: #fff; }
/* Mỗi cổng = 1 hàng thẻ, có đường kẻ ngăn cách (giống mẫu cổng thanh toán chuyên nghiệp) */
.woocommerce-checkout #payment ul.payment_methods li { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 14px 16px; border-radius: 0; border-bottom: 1px solid var(--line); transition: background .15s ease; }
.woocommerce-checkout #payment ul.payment_methods li:last-child { border-bottom: 0; }
.woocommerce-checkout #payment ul.payment_methods li:hover { background: var(--bg-soft); }
.woocommerce-checkout #payment ul.payment_methods li input.input-radio { flex: none; margin: 0 10px 0 0; width: 18px; height: 18px; accent-color: var(--blue); }
.woocommerce-checkout #payment ul.payment_methods li label { display: flex; flex: 1 1 0; min-width: 0; align-items: center; gap: 12px; margin: 0; font-weight: 600; color: var(--navy); }
/* Icon do filter woocommerce_gateway_icon chèn — ô vuông bo góc 40px, đứng TRƯỚC chữ nhãn */
.woocommerce-checkout #payment ul.payment_methods li label .xgo-pay-ico { order: -1; display: inline-flex; flex: none; }
.woocommerce-checkout #payment ul.payment_methods li label .xgo-pay-ico svg { display: block; width: 40px; height: 40px; }
.woocommerce-checkout #payment ul.payment_methods li .payment_box { flex-basis: 100%; order: 5; margin: 10px 0 2px; }
/* Đè kiểu ảnh mặc định của WC nếu gateway có icon ảnh riêng (không áp cho SVG của ta) */
.woocommerce-checkout #payment ul.payment_methods li label img { max-height: 40px; width: auto; border-radius: 8px; }
/* Khối QR chuyển khoản ở trang Cảm ơn + email (bacs) */
.xgo-bacs-qr { border: 1px solid var(--line); border-radius: var(--r); padding: 18px; margin: 0 0 22px; background: #fff; }
.xgo-bacs-qr__title { margin: 0 0 12px; font-size: 1.1rem; color: var(--navy); }
.xgo-bacs-qr__inner { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.xgo-bacs-qr__img { width: 220px; height: 220px; flex: none; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; }
.xgo-bacs-qr__info { list-style: none; margin: 0; padding: 0; font-size: .95rem; line-height: 1.9; color: var(--ink); min-width: 220px; }
.xgo-bacs-qr__info strong { color: var(--navy); }
.xgo-bacs-qr__note { margin: 12px 0 0; font-size: .88rem; color: var(--muted); }
@media (max-width: 560px) { .xgo-bacs-qr__inner { justify-content: center; } .xgo-bacs-qr__img { width: 200px; height: 200px; } }
.woocommerce-checkout #payment div.payment_box { background: var(--bg-soft); border-radius: var(--r-sm); }
.woocommerce-checkout #payment div.payment_box::before { display: none; }
/* Thông tin chuyển khoản dưới cổng "Chuyển khoản (QR Code)" — gọn, mỗi mục 1 dòng.
!important để thắng style list mạnh của khối #payment (li 14px/flex). */
.xgo-bank-info { list-style: none !important; margin: 6px 0 0 !important; padding: 8px 12px !important; background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: .86rem; text-align: left !important; }
.xgo-bank-info li { padding: 2px 0 !important; margin: 0 !important; display: block !important; border: 0 !important; line-height: 1.5 !important; list-style: none !important; }
.xgo-bank-info li::before { display: none !important; }
.xgo-bank-info__k { color: var(--muted); margin-right: 4px; }
.xgo-bank-info__v { color: var(--navy); font-weight: 700; }
/* Ô bắt buộc còn thiếu: viền đỏ rõ + dòng nhắc ngắn dưới ô (bảng lỗi đầu trang đã gom 1 dòng) */
.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
.woocommerce-checkout .form-row.woocommerce-invalid select,
.woocommerce-checkout .form-row.woocommerce-invalid .select2-selection { border-color: var(--sale) !important; }
.woocommerce-checkout .form-row.woocommerce-invalid-required-field:not(.terms):not(.woocommerce-terms-and-conditions-wrapper)::after { content: "Vui lòng nhập thông tin này"; display: block; margin-top: 5px; color: var(--sale); font-size: .78rem; font-weight: 600; }
.woocommerce-checkout #place_order { display: block; width: 100%; background: var(--blue); border-color: var(--blue);
font-size: 1.05rem; font-weight: 700; padding: 14px; border-radius: var(--r-sm); margin-top: 8px; }
.woocommerce-checkout #place_order:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
/* --- Polish "Thông tin nhận hàng": bo tròn hơn, giãn cách, input đồng bộ, focus xanh --- */
.woocommerce-checkout #customer_details { padding: 26px 28px; }
.woocommerce-checkout #customer_details h3 { font-size: 1.15rem; color: var(--navy); margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper::after { content: ""; display: table; clear: both; }
.woocommerce-checkout .form-row { margin: 0 0 16px; padding: 0; }
.woocommerce-checkout .form-row > label { display: block; font-weight: 600; font-size: .86rem; color: var(--navy); margin: 0 0 6px; }
.woocommerce-checkout .form-row .required { color: var(--sale); border: 0; text-decoration: none; }
.woocommerce-checkout .form-row .optional { color: var(--muted); font-weight: 400; }
.woocommerce-checkout .form-row .woocommerce-input-wrapper { display: block; width: 100%; }
/* ===== Ô nhập / chọn ở checkout: đồng bộ cao 48px, bo 12px, focus xanh quầng nhẹ ===== */
.woocommerce-checkout form .form-row input.input-text,
.woocommerce-checkout form .form-row textarea,
.woocommerce-checkout form .form-row.xgo-addr select { width: 100%; box-sizing: border-box; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px;
font-family: inherit; font-size: .95rem; background: #fff; color: var(--ink); line-height: 1.35; transition: border-color .15s, box-shadow .15s; }
.woocommerce-checkout form .form-row input.input-text,
.woocommerce-checkout form .form-row.xgo-addr select { height: 48px; }
/* Select địa chỉ: mũi tên chevron tuỳ biến, thắng CSS mặc định WooCommerce */
.woocommerce-checkout form .form-row.xgo-addr select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 40px; cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7A99' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 14px center; background-size: 16px 16px; }
.woocommerce-checkout form .form-row input.input-text::placeholder,
.woocommerce-checkout form .form-row textarea::placeholder { color: #9aa7bd; }
.woocommerce-checkout form .form-row input.input-text:focus,
.woocommerce-checkout form .form-row textarea:focus,
.woocommerce-checkout form .form-row.xgo-addr select:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(28, 109, 208, .12); }
.woocommerce-checkout .form-row textarea { min-height: 92px; height: auto; resize: vertical; }
/* Ô "Quốc gia/Khu vực" (select2) — cùng cao 48px/viền/bo với các ô khác */
.woocommerce-checkout .select2-container--default .select2-selection--single { height: 48px; display: flex; align-items: center; border: 1.5px solid var(--line); border-radius: 12px; padding: 0 12px; transition: border-color .15s, box-shadow .15s; }
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.3; padding: 0 0 0 4px; margin: 0; color: var(--ink); }
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { top: 50%; transform: translateY(-50%); right: 12px; }
.woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(28, 109, 208, .12); }
/* Bảng xổ xuống select2 — bo tròn, đổ bóng nhẹ, ô tìm & item mềm mại (an toàn, sạch) */
.select2-container--default .select2-dropdown { border: 1.5px solid var(--line); border-radius: 12px; box-shadow: 0 14px 34px rgba(20, 40, 80, .14); overflow: hidden; }
.select2-container--default .select2-search--dropdown { padding: 10px; }
.select2-container--default .select2-search--dropdown .select2-search__field { border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 12px; outline: none; font-family: inherit; font-size: .92rem; }
.select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(28, 109, 208, .12); }
.select2-container--default .select2-results__options { padding: 4px; }
.select2-container--default .select2-results__option { padding: 10px 12px; border-radius: 8px; font-size: .92rem; color: var(--ink); outline: none; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: #eaf2fd; color: var(--navy); }
.select2-container--default .select2-results__option[aria-selected="true"] { background: var(--bg-soft); color: var(--navy); font-weight: 600; }
/* Tên + Họ: 2 cột đều nhau, khoảng cách gọn */
.woocommerce-checkout .form-row-first { float: left; width: calc(50% - 8px); margin-right: 16px; }
.woocommerce-checkout .form-row-last { float: right; width: calc(50% - 8px); margin-right: 0; }
/* Ô opt-in nhận email: canh checkbox + chữ gọn (không dùng kiểu label khối như trường thường) */
.woocommerce-checkout .form-row label.woocommerce-form__label-for-checkbox { display: flex; align-items: flex-start; gap: 8px; font-weight: 500; font-size: .88rem; color: var(--ink); margin: 2px 0; }
.woocommerce-checkout .form-row label.woocommerce-form__label-for-checkbox input { margin: 3px 0 0; }
@media (max-width: 860px) {
/* Checkout: Tên/Họ về 1 cột */
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last { float: none; width: 100%; margin: 0 0 16px; }
body.woocommerce-account.logged-in .woocommerce { grid-template-columns: 1fr; }
/* QUAN TRỌNG: reset grid-column của con, nếu không nội dung (đơn hàng/xem chi tiết)
bị đẩy sang "cột 2 ảo" -> lệch/tràn, không xem/bấm được trên mobile. */
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation,
body.woocommerce-account.logged-in .woocommerce-MyAccount-content { grid-column: auto; }
.xgo-acc-cards { grid-template-columns: 1fr; }
.woocommerce-Addresses,
.woocommerce-account:not(.logged-in) #customer_login.u-columns { grid-template-columns: 1fr; }
/* Địa chỉ: reset ô lưới về auto (cùng lỗi cột-2-ảo với 2 thẻ địa chỉ) */
.woocommerce-Addresses.col2-set .col-1, .woocommerce-Addresses.col2-set .col-2,
.woocommerce-Addresses.u-columns .u-column1, .woocommerce-Addresses.u-columns .u-column2 { grid-column: auto; grid-row: auto; }
/* Giỏ hàng + thanh toán: gộp về 1 cột, bỏ ép hàng/cột grid */
.woocommerce-cart .woocommerce { display: block; }
.woocommerce-cart .woocommerce > .cart-collaterals { width: auto; margin-top: 16px; }
.woocommerce-checkout form.checkout.woocommerce-checkout { grid-template-columns: 1fr; }
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review { grid-column: 1; grid-row: auto; position: static; }
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review { position: static; }
}
/* ------------------------------------------------------------------ *
* Nút "Xem thêm sản phẩm" (load-more) — thay phân trang số ở cửa hàng.
* ------------------------------------------------------------------ */
.xgo-loadmore-wrap { display: flex; justify-content: center; margin: 28px 0 8px; clear: both; }
.xgo-loadmore {
appearance: none; cursor: pointer;
background: #fff; color: var(--blue);
border: 1.5px solid var(--blue); border-radius: 999px;
font-weight: 700; font-size: .95rem; line-height: 1;
padding: 13px 30px; transition: background .15s, color .15s, box-shadow .15s;
}
.xgo-loadmore:hover { background: var(--blue); color: #fff; box-shadow: var(--shadow-sm); }
.xgo-loadmore.is-loading { opacity: .7; cursor: default; }
/* ------------------------------------------------------------------ *
* Trang cửa hàng/danh mục: layout 2 cột (bộ lọc trái + lưới phải).
* ------------------------------------------------------------------ */
body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
body .container.section {
width: 100% !important;
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 16px !important;
padding-right: 16px !important;
box-sizing: border-box !important;
float: none !important;
clear: both !important;
}
body .shop-layout {
display: grid !important;
grid-template-columns: 250px minmax(0, 1fr) !important;
gap: 26px !important;
align-items: start !important;
width: 100% !important;
max-width: 100% !important;
float: none !important;
clear: both !important;
margin: 0 !important;
padding: 0 !important;
}
body .shop-filter {
background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px 6px;
width: 100% !important;
max-width: 250px !important;
grid-column: 1 !important;
float: none !important;
margin: 0 !important;
position: sticky !important;
top: 88px !important;
}
body .site-main.woocommerce-main {
width: 100% !important;
max-width: 100% !important;
grid-column: 2 !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
}
body .woocommerce-products-header,
body .woocommerce-breadcrumb,
body .shop-toolbar,
body .woocommerce {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
body ul.products {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 16px !important;
width: 100% !important;
max-width: 100% !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.shop-filter__head { display: flex; justify-content: space-between; align-items: baseline; }
.shop-filter__head h3 { margin: 0; font-size: 1.05rem; color: var(--navy); }
.shop-filter__clear { font-size: .8rem; font-weight: 600; color: var(--sale); }
.shop-filter__clear:hover { text-decoration: underline; }
.shop-filter .filter-group { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
.shop-filter .filter-group:first-of-type { border-top: 0; margin-top: 6px; padding-top: 6px; }
.shop-filter .filter-group h4 { margin: 0 0 8px; font-size: .9rem; color: var(--navy); }
.shop-filter .filter-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.shop-filter .filter-group a { display: flex; justify-content: space-between; gap: 8px; color: var(--navy); font-size: .88rem; padding: 7px 9px; border-radius: var(--r-sm); text-decoration: none; }
.shop-filter .filter-group a span { color: var(--muted); }
.shop-filter .filter-group a:hover { background: var(--bg-soft); color: var(--blue); }
.shop-filter .filter-group a.is-active { background: var(--blue); color: #fff; font-weight: 600; }
.shop-filter .filter-group a.is-active span { color: rgba(255,255,255,.85); }
/* Khoảng giá dạng ô viền */
.shop-filter .filter-group a.chip { justify-content: center; border: 1px solid var(--line); }
.shop-filter .filter-group a.chip:hover { border-color: var(--blue); }
.shop-filter .filter-group a.chip.is-active { border-color: var(--blue); }
/* Filter "Tình trạng": icon checkbox SVG + chữ căn trái (không space-between). */
.shop-filter .filter-group a.xgo-check { justify-content: flex-start; align-items: center; }
.shop-filter .filter-group a.xgo-check .xgo-check__ic { flex: none; }
/* Nút "Bộ lọc" chỉ dùng cho mobile — desktop sidebar luôn mở nên ẩn nút. */
.shop-filter__toggle { display: none; }
@media (max-width: 900px) {
body .shop-layout { grid-template-columns: 1fr !important; gap: 16px !important; }
/* Mobile: bỏ nền card của aside; nút toggle + body tự làm card riêng. Body ẩn mặc định → SP hiện ngay. */
body .shop-filter { position: static !important; max-width: 100% !important; grid-column: auto !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; }
body .site-main.woocommerce-main { grid-column: auto !important; }
/* Tablet / màn hẹp: 4 cột quá chật -> 3 cột. Cần !important để thắng body ul.products{repeat(4)!important}. */
body ul.products { grid-template-columns: repeat(3, 1fr) !important; }
.shop-filter__toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 13px 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); font: inherit; font-size: 1rem; font-weight: 700; color: var(--navy); cursor: pointer; }
.shop-filter__toggle-lbl { display: inline-flex; align-items: center; gap: 8px; }
.shop-filter__badge { margin-left: 2px; font-size: .72rem; font-weight: 700; color: var(--blue); background: #eef3fb; padding: 2px 9px; border-radius: 999px; }
.shop-filter__chev { flex: none; transition: transform .2s ease; }
.shop-filter.is-open .shop-filter__chev { transform: rotate(180deg); }
.shop-filter__body { display: none; margin-top: 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 6px 16px 12px; }
.shop-filter.is-open .shop-filter__body { display: block; }
/* Nút đã ghi "Bộ lọc" -> ẩn tiêu đề lặp trong body; giữ "Xoá lọc" ở phải. */
.shop-filter__body .shop-filter__head { justify-content: flex-end; }
.shop-filter__body .shop-filter__head h3 { display: none; }
}
/* Điện thoại: 2 cột gọn để xem/mua dễ (4 cột bị "dít dít"). !important để thắng repeat(4)!important ở trên. */
@media (max-width: 560px) {
body ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
.woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: .8rem; padding: 6px 9px 2px; }
.woocommerce ul.products li.product .price { font-size: .9rem; padding: 2px 9px 8px; }
.woocommerce ul.products li.product a img { padding: 8px; }
}
/* ============================================================
TỐI ƯU MOBILE — thanh danh mục + rail sản phẩm
------------------------------------------------------------
Trên desktop cat-bar là thanh danh mục + mega-menu. Trên mobile mega-menu
bị ẩn (main.css ≤900) nhưng KHÔNG có style riêng cho cat-bar -> nó rơi về
layout flex desktop hỏng (nút "Danh mục sản phẩm" co thành hình tròn, các
link xếp dọc to đùng) và vì position:sticky nên đè lên nội dung khi cuộn.
Hamburger (.nav-toggle) chỉ bật class .open-mobile — cũng chưa có CSS.
-> Chuyển cat-bar thành DẢI DANH MỤC cuộn ngang (kiểu Long Châu), bỏ sticky,
và ẩn hamburger đã hỏng (điều hướng đã có: dải danh mục + ô tìm kiếm).
============================================================ */
/* Desktop: wrapper "trong suốt" (display:contents) -> header + cat-bar giữ nguyên
sticky riêng như cũ (site-header top:0, cat-bar top:70). */
.header-stack { display: contents; }
@media (max-width: 900px) {
/* Mobile: cả cụm TÌM KIẾM + thanh DANH MỤC dính theo khi cuộn (luôn bấm được).
Bọc trong 1 khối sticky duy nhất -> không cần đoán chiều cao header, không đè lệch. */
.header-stack { display: block; position: -webkit-sticky; position: sticky; top: 0; z-index: 60; box-shadow: 0 4px 14px rgba(20,40,80,.10); }
.header-stack .site-header { position: static; }
.cat-bar { position: static; }
.cat-bar > .container {
display: flex; flex-wrap: nowrap; align-items: center; gap: 8px;
min-height: 0; padding-top: 8px; padding-bottom: 8px;
overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.cat-bar > .container::-webkit-scrollbar { display: none; }
.cat-bar .cat-mega { flex: none; }
/* "Danh mục sản phẩm" -> viên chip (không co lại thành hình tròn) */
.cat-bar .cat-all { flex: none; white-space: nowrap; padding: 8px 14px; font-size: .86rem; border-radius: var(--r-pill); }
.cat-bar .mega { display: none !important; }
/* Nav nhanh -> hàng chip cuộn ngang */
.cat-bar .cat-quick { display: flex !important; flex: none; margin: 0; }
.cat-bar .cat-quick__list { flex-wrap: nowrap !important; gap: 8px !important; }
.cat-bar .cat-quick__list li { flex: none; }
.cat-bar .cat-quick__list a {
white-space: nowrap; background: var(--bg-soft); color: var(--navy);
padding: 8px 14px; border-radius: var(--r-pill); font-size: .86rem; font-weight: 600;
}
.cat-bar .cat-quick__list a:hover { background: var(--bg-soft-2); color: var(--blue); }
/* Hamburger mở menu cũ (đã hỏng) — ẩn, đã có dải danh mục + ô tìm kiếm */
.nav-toggle { display: none !important; }
}
/* Mobile: gộp header về 1 HÀNG — logo + ô tìm kiếm (rộng, ngay cạnh XGO CARE) + icon nhỏ.
Giữ phần ghim (tìm kiếm + Danh mục) MỎNG, không chiếm nhiều màn hình. */
@media (max-width: 860px) {
.header-main { flex-wrap: nowrap; gap: 8px; padding: 8px 0; align-items: center; }
.brand-box img { height: 32px; }
/* Ô tìm kiếm cùng hàng logo, co giãn lấp hết chỗ trống */
form.search { order: 0; flex: 1 1 0%; min-width: 0; max-width: none; padding: 4px 6px 4px 14px; }
/* min-width:0 để input co được, không thì placeholder dài tràn/đè icon bên cạnh */
form.search input { font-size: .9rem; min-width: 0; width: 100%; text-overflow: ellipsis; }
/* Nút tìm không co, giữ nguyên kích thước icon */
form.search button { flex: none; }
/* Nút "Tìm kiếm" -> chỉ còn icon kính lúp cho gọn, nhường chỗ cho ô nhập */
form.search button { font-size: 0; gap: 0; padding: 9px 13px; }
/* Icon hành động thu nhỏ nhưng vùng chạm ≥44px cho dễ bấm (icon nhìn thấy vẫn 34px) */
.header-actions { margin-left: 0; gap: 0; flex: none; }
.h-action { padding: 5px; min-height: 44px; }
.h-ico { width: 34px; height: 34px; }
}
@media (max-width: 560px) {
/* Rail sản phẩm (trang chủ): thu hẹp thẻ để lộ rõ thẻ kế -> thấy ngay là lướt ngang được */
.prod-rail:not(.is-grid) { grid-auto-columns: 44%; gap: 12px; }
/* Thẻ hẹp hơn -> thu gọn nút để "Thêm vào giỏ hàng" đủ 1 dòng, không bị cắt chữ */
.prod-rail:not(.is-grid) .pcard__body { padding-left: 10px; padding-right: 10px; }
.prod-rail:not(.is-grid) .pcard__detail,
.prod-rail:not(.is-grid) .pcard__actions .button { font-size: .72rem; padding: 7px 6px; }
.prod-rail:not(.is-grid) .pcard__actions .button { gap: 4px; }
/* Thẻ rail rất hẹp: bỏ icon giỏ để chữ "Thêm vào giỏ hàng" đủ 1 dòng không bị cắt */
.prod-rail:not(.is-grid) .pcard__actions .button::before { display: none; }
}
/* ============================================================
* Trang chính sách — bố cục sidebar (kiểu Long Châu)
* ============================================================ */
.policy-layout { display: grid; grid-template-columns: 264px 1fr; gap: 28px; align-items: start; }
.policy-sidebar { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; position: sticky; top: 88px; }
.policy-sidebar__title { background: var(--bg-soft); font-weight: 700; color: var(--navy); padding: 13px 16px; font-size: .95rem; border-bottom: 1px solid var(--line); }
.policy-sidebar ul { list-style: none; margin: 0; padding: 6px; }
.policy-sidebar li { margin: 0; }
.policy-sidebar li a { display: block; padding: 10px 12px; border-radius: var(--r-sm); color: var(--ink); font-size: .9rem; text-decoration: none; line-height: 1.45; }
.policy-sidebar li a:hover { background: var(--bg-soft); color: var(--blue); }
.policy-sidebar li.is-active a { background: var(--blue); color: #fff; font-weight: 600; }
.policy-main { min-width: 0; }
/* Khối cuộn ngang cho bảng nội dung (JS bọc) -> mobile không vỡ khi bảng rộng */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 16px; }
.table-wrap > table { margin: 0; }
/* Bảng trong nội dung chính sách */
.prose table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: .92rem; }
.prose th, .prose td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.prose thead th { background: var(--bg-soft); color: var(--navy); font-weight: 700; }
.prose table td:first-child { font-weight: 600; color: var(--navy); width: 34%; }
@media (max-width: 820px) {
.policy-layout { grid-template-columns: 1fr; gap: 18px; }
.policy-sidebar { position: static; }
.policy-sidebar ul { display: flex; flex-wrap: wrap; gap: 4px; }
.policy-sidebar li a { white-space: nowrap; padding: 8px 12px; }
.prose table td:first-child { width: auto; }
}
/* ===== Footer — khối thông tin công ty (NAP) gọn gàng ===== */
.foot-nap { list-style: none; margin: 12px 0 0; padding: 0; font-size: .82rem; color: var(--muted); line-height: 1.5; }
.foot-nap li { display: flex; gap: 8px; margin-bottom: 7px; align-items: flex-start; }
.foot-nap li:last-child { margin-bottom: 0; }
.foot-nap__ic { flex: 0 0 18px; text-align: center; }
.foot-nap__name { font-weight: 700; color: var(--navy); font-size: .92rem; margin-bottom: 9px; }
.foot-nap a { color: var(--muted); text-decoration: none; }
.foot-nap a:hover { color: var(--blue); }
/* ===== Trang Giới thiệu — chữ to hơn + Tầm nhìn/Sứ mệnh ===== */
.about-prose p { font-size: 1.04rem; line-height: 1.85; color: var(--ink); margin: 0 0 15px; }
.about-prose .lead { font-size: 1.24rem; line-height: 1.7; color: var(--navy); font-weight: 500; }
.about-prose .quote { color: var(--blue); font-weight: 600; font-size: 1.1rem; margin-bottom: 0; }
.vm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.vm-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 24px; box-shadow: var(--shadow-sm); }
.vm-card .ic { width: 54px; height: 54px; border-radius: 50%; background: var(--bg-soft); color: var(--blue); display: grid; place-items: center; margin-bottom: 14px; }
.vm-card h3 { color: var(--navy); font-size: 1.18rem; margin: 0 0 8px; }
.vm-card p { color: var(--muted); font-size: 1rem; line-height: 1.7; margin: 0; }
@media (max-width: 820px) { .vm-grid { grid-template-columns: 1fr; } }
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 8px; }
.proof-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); margin: 0; }
.proof-card img { width: 100%; height: auto; display: block; }
.proof-card figcaption { padding: 14px 16px; }
.proof-card figcaption b { display: block; color: var(--navy); margin-bottom: 4px; font-size: .98rem; }
.proof-card figcaption span { color: var(--muted); font-size: .84rem; line-height: 1.5; }
@media (max-width: 820px) { .proof-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }
/* ============================================================
CHI TIẾT ĐƠN HÀNG — ảnh sản phẩm cạnh tên
============================================================ */
.xgo-ord-item { display: flex; align-items: center; gap: 10px; }
.xgo-ord-thumb { width: 46px; height: 46px; object-fit: contain; border: 1px solid var(--line);
border-radius: var(--r-sm); background: #fff; flex: none; }
.xgo-ord-item__name { min-width: 0; }
/* ============================================================
SẢN PHẨM HẾT HÀNG — làm mờ + badge "Hết hàng" (WC đã chặn thêm-giỏ sẵn)
============================================================ */
.xgo-oos-badge { position: absolute; top: 8px; left: 8px; z-index: 3;
background: rgba(37, 50, 75, .85); color: #fff; font-size: .72rem; font-weight: 700;
padding: 3px 10px; border-radius: var(--r-pill); letter-spacing: .01em; }
/* Lưới WooCommerce (shop/danh mục) */
.woocommerce ul.products li.product.outofstock { opacity: .6; }
.woocommerce ul.products li.product.outofstock:hover { box-shadow: var(--shadow-sm); transform: none; }
.woocommerce ul.products li.product.outofstock a img { filter: grayscale(.2); }
.woocommerce ul.products li.product.outofstock .button {
background: var(--muted) !important; border-color: var(--muted) !important; }
/* Rail sản phẩm trang chủ (.pcard) */
.pcard.is-oos { opacity: .6; }
.pcard.is-oos:hover { box-shadow: var(--shadow-sm); transform: none; }
.pcard.is-oos .pcard__media img { filter: grayscale(.2); }
/* Nút "Thêm vào giỏ hàng" khi biến thể HẾT HÀNG / chưa chọn -> mờ + không bấm được.
(WooCommerce tự gắn .disabled/.wc-variation-is-unavailable khi biến thể không mua được.) */
.woocommerce div.product .single_add_to_cart_button.disabled,
.woocommerce div.product .single_add_to_cart_button.wc-variation-is-unavailable,
.woocommerce div.product .single_add_to_cart_button[disabled] {
background: var(--muted) !important; border-color: var(--muted) !important; color: #fff !important;
opacity: .5; cursor: not-allowed; pointer-events: none; box-shadow: none !important;
}
/* Swatch phân loại hết hàng: rõ là "hết" (kèm is-disabled -> mờ + gạch + không chọn được) */
.xgo-swatch.is-oos { position: relative; }
/* Bảng "Đơn hàng của bạn" (checkout) + chi tiết đơn: cột tiền co gọn về phải,
cột tên chiếm hết chỗ còn lại -> tên KHÔNG bị xuống dòng từng chữ trên mobile. */
.woocommerce-checkout-review-order-table td.product-total,
.woocommerce-checkout-review-order-table th.product-total,
.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout-review-order-table tfoot td,
.woocommerce-table--order-details td.product-total,
.woocommerce-table--order-details th.product-total,
.woocommerce-table--order-details tfoot th,
.woocommerce-table--order-details tfoot td { white-space: nowrap; }
/* table-layout:fixed để ÉP tỉ lệ cột ổn định. auto-layout BỎ QUA width:1% khi khối tên là
flex + overflow-wrap:anywhere (bị co còn 1 chữ/dòng) -> cột tiền phình 186px, tên teo 60px.
Fixed + cột tiền 34% -> tên chiếm ~66%, hết cảnh mỗi chữ một dòng. Cần .woocommerce table.
để thắng specificity `.woocommerce table.shop_table td{vertical-align:middle}`. */
.woocommerce table.woocommerce-checkout-review-order-table,
.woocommerce table.woocommerce-table--order-details { table-layout: fixed; width: 100%; }
.woocommerce table.woocommerce-checkout-review-order-table td.product-total,
.woocommerce table.woocommerce-checkout-review-order-table th.product-total,
.woocommerce table.woocommerce-table--order-details td.product-total,
.woocommerce table.woocommerce-table--order-details th.product-total { width: 35%; text-align: right; vertical-align: top; }
.woocommerce table.woocommerce-checkout-review-order-table td.product-name,
.woocommerce table.woocommerce-checkout-review-order-table th.product-name,
.woocommerce table.woocommerce-table--order-details td.product-name,
.woocommerce table.woocommerce-table--order-details th.product-name { width: auto; vertical-align: top; }
/* Số tiền từng SP đậm hơn để đọc rõ, sát dòng đầu tên SP */
.woocommerce-checkout-review-order-table td.product-total,
.woocommerce-table--order-details td.product-total .amount,
.woocommerce-checkout-review-order-table td.product-total .amount { font-weight: 600; color: var(--ink); }
/* Lưới an toàn: tổng tiền quá dài (vd 1.290.000₫) thì xuống dòng trong ô thay vì tràn/ cắt */
.woocommerce-checkout-review-order-table tfoot td .amount,
.woocommerce-table--order-details tfoot td .amount { overflow-wrap: anywhere; }
.xgo-review-title, .xgo-ord-item__name { overflow-wrap: anywhere; word-break: break-word; }
.xgo-ord-item__name { min-width: 0; }
@media (max-width: 860px) {
/* Giảm cỡ "Tổng" trên mobile để số lớn nằm gọn 1 dòng trong cột tiền hẹp */
.woocommerce-checkout #order_review .order-total .amount { font-size: 1.05rem; }
}