/* ==========================================================================
FROGA — khoác nhận diện thiết kế lên phần WooCommerce
(cửa hàng, trang sản phẩm, giỏ hàng, thanh toán)
WooCommerce sinh markup riêng của nó, không có trong bộ thiết kế. Tệp này
kéo màu, bo góc, phông và dáng nút của Froga sang cho khớp, chứ không dựng
lại từ đầu — dựng lại mọi khuôn của Woo là rước nợ mỗi lần Woo cập nhật.
========================================================================== */
/* Khuôn WooCommerce đặt width:100% cho gần như mọi khối rồi mới thêm padding.
site.css của bộ thiết kế không khai box-sizing (các trang thiết kế dàn bằng
kích thước tường minh nên không cần), thành ra ở khổ 375px các thẻ trong giỏ
và trang tài khoản phình ra 26px và cả trang cuộn ngang. Khai riêng trong
phạm vi .froga-woo, không đụng tới các trang thiết kế. */
.froga-woo,
.froga-woo *,
.froga-woo *::before,
.froga-woo *::after { box-sizing: border-box; }
.froga-woo {
--xanh: #23773C;
--xanh-dam: #175A2B;
--xanh-sang: #23773C;
--kraft: #E4DDC9;
--kem: #FBF8F0;
--than: #42563F;
--mo: #5F6B58;
}
/* ---------- chữ chung ---------- */
.froga-woo h1, .froga-woo h2, .froga-woo h3 {
font-family: 'Be Vietnam Pro', sans-serif;
font-weight: 700;
color: #1E3B27;
}
.froga-woo h1 { font-size:clamp(22px,5vw,40px); line-height: 1.15; margin: 0 0 14px; }
.froga-woo h2 { font-size:clamp(18px,3.8vw,28px); margin: 28px 0 14px; }
.froga-woo h3 { font-size:clamp(15.5px,3vw,22px); margin: 22px 0 10px; }
.froga-woo p, .froga-woo li { color: var(--than); line-height: 1.65; }
/* ---------- nút ---------- */
.froga-woo .button,
.froga-woo button[type="submit"],
.froga-woo .wc-block-components-button {
font-family: 'Be Vietnam Pro', sans-serif !important;
font-weight: 700 !important;
background: var(--xanh) !important;
color: #fff !important;
border: none !important;
border-radius: 999px !important;
padding: 13px 26px !important;
box-shadow: 0 3px 0 var(--xanh-dam) !important;
transition: background .2s ease;
}
.froga-woo .button:hover,
.froga-woo button[type="submit"]:hover,
.froga-woo .wc-block-components-button:hover { background: var(--xanh-sang) !important; }
.froga-woo .button.alt { background: var(--xanh) !important; }
.froga-woo a.button.wc-backward {
background: transparent !important;
color: var(--xanh) !important;
border: 2px solid var(--xanh) !important;
box-shadow: none !important;
}
/* ---------- lưới sản phẩm ở cửa hàng ---------- */
.froga-woo ul.products {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 26px;
margin: 0;
padding: 0;
list-style: none;
}
.froga-woo ul.products::before,
.froga-woo ul.products::after { content: none !important; }
.froga-woo ul.products li.product {
width: auto !important;
margin: 0 !important;
float: none !important;
background: #fff;
border: 1px solid var(--kraft);
border-radius: 20px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform .25s ease, box-shadow .25s ease;
}
.froga-woo ul.products li.product:hover {
transform: translateY(-6px);
box-shadow: 0 18px 40px rgba(30, 59, 39, .13);
}
.froga-woo ul.products li.product a img {
margin: 0;
aspect-ratio: 1 / 1;
object-fit: cover;
background: #F2EDDE;
display: block;
}
.froga-woo ul.products li.product .woocommerce-loop-product__title {
font-family: 'Be Vietnam Pro', sans-serif;
font-weight: 700;
font-size: 20px !important;
line-height: 1.25;
color: #1E3B27;
padding: 18px 22px 0 !important;
margin: 0;
}
.froga-woo ul.products li.product .price {
padding: 6px 22px 0;
color: var(--xanh) !important;
font-weight: 700;
font-size: 17px;
}
.froga-woo ul.products li.product .button {
margin: 14px 22px 22px !important;
text-align: center;
}
.froga-woo ul.products li.product .onsale {
background: #F2B417;
color: #4A3505;
border-radius: 999px;
font-weight: 700;
padding: 5px 14px;
min-height: 0;
min-width: 0;
line-height: 1.4;
top: 14px;
left: 14px;
right: auto;
margin: 0;
}
/* ---------- trang một sản phẩm ---------- */
/* HAI cot, khong phai ba. minmax(320px,1fr) trong khung 1180px cho ra BA cot
(1180/320 = 3,7) — anh va the mua moi cai chi con ~360px, tieu de vo ba dong
va hai nut phai xep chong. Nguong 440px ep dung hai cot, va min(...,100%) de
o kho hep no van don ve mot cot. */
.froga-woo div.product { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: clamp(24px, 4vw, 44px); align-items: start; }
.froga-woo div.product .woocommerce-product-gallery { float: none !important; width: auto !important; }
.froga-woo div.product .woocommerce-product-gallery__wrapper img {
border-radius: 24px;
border: 1px solid var(--kraft);
background: #F2EDDE;
}
/* Khung thư viện ảnh kiểu Dropps (08/09/2026, anh gửi ảnh mẫu): dải ảnh nhỏ
đứng dọc bên trái, ảnh lớn bên phải — CHỈ đổi bố cục, ảnh vẫn là ảnh thật
đang có (không tự vẽ thêm ảnh lối sống hay huy hiệu giải thưởng nào).
WooCommerce in ba khối theo thứ tự: nút phóng to, khung ảnh lớn (flex-viewport),
rồi dải thumbnail (flex-control-nav) — dùng flex + order để đổi chỗ mà
không đụng JS phóng to/lướt ảnh của chính WooCommerce. */
.froga-woo div.product .woocommerce-product-gallery {
display: flex;
flex-direction: row-reverse; /* .flex-viewport in trước trong DOM, đảo chiều để nó nằm bên phải */
gap: 12px;
align-items: flex-start;
}
.froga-woo div.product .woocommerce-product-gallery .flex-viewport { flex: 1; min-width: 0; }
.froga-woo div.product .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs {
display: flex !important;
flex-direction: column;
gap: 10px;
width: 76px;
flex: none;
max-height: min(520px, 70vh);
overflow-y: auto;
padding: 2px; /* chừa chỗ cho viền active khỏi bị cắt */
margin: 0 !important;
}
/* Đặt kích thước CỐ ĐỊNH (không chỉ aspect-ratio): WooCommerce có JS gán
thẳng thuộc tính HTML width/height = kích thước gốc của ảnh khi tải xong
(`onload="this.width=this.naturalWidth…"`), dễ đá văng kích thước tính
qua tỉ lệ nếu chỉ đặt aspect-ratio. Cố định luôn width VÀ height thì dù
script kia chạy lúc nào cũng không lệch. */
.froga-woo div.product .woocommerce-product-gallery .flex-control-thumbs li {
width: 72px !important;
height: 72px !important;
flex: none !important;
float: none !important;
margin: 0 !important;
}
.froga-woo div.product .woocommerce-product-gallery .flex-control-thumbs img {
display: block !important;
width: 72px !important;
height: 72px !important;
max-width: none !important;
object-fit: cover;
border-radius: 12px;
border: 1.5px solid var(--kraft);
cursor: pointer;
opacity: .75;
transition: opacity .15s ease, border-color .15s ease;
}
.froga-woo div.product .woocommerce-product-gallery .flex-control-thumbs img:hover { opacity: 1; }
.froga-woo div.product .woocommerce-product-gallery .flex-control-thumbs img.flex-active {
opacity: 1;
border-color: var(--xanh);
}
.froga-woo div.product .woocommerce-product-gallery__trigger { z-index: 2; }
@media (max-width: 700px) {
/* Dải dọc bên cạnh chật ở màn hẹp — về ngang dưới ảnh như mặc định. */
.froga-woo div.product .woocommerce-product-gallery { flex-direction: column; }
.froga-woo div.product .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs {
flex-direction: row;
width: auto;
max-height: none;
overflow-x: auto;
}
.froga-woo div.product .woocommerce-product-gallery .flex-control-thumbs li { width: 60px !important; height: 60px !important; }
.froga-woo div.product .woocommerce-product-gallery .flex-control-thumbs img { width: 60px !important; height: 60px !important; }
}
.froga-woo div.product .summary { float: none !important; width: auto !important; margin: 0 !important; }
.froga-woo div.product .summary .price,
.froga-woo div.product p.price {
font-family: 'Be Vietnam Pro', sans-serif;
font-weight: 700;
font-size:clamp(18.5px,3.4vw,28px);
line-height: 1.25;
color: var(--xanh) !important;
margin: 6px 0 16px;
}
/* Dãy sao + số đánh giá (kiểu dropps.com: nhỏ, xám, sát nhau — hiện khi
sản phẩm CÓ đánh giá; froga.vn 08/09/2026 tất cả còn "Chưa có đánh giá
nào" nên khối này chưa thấy trên site, chuẩn bị sẵn cho lúc có đánh giá
đầu tiên, đừng tưởng nhầm là chưa chạy). */
.froga-woo div.product .summary .woocommerce-product-rating {
display: flex;
align-items: center;
gap: 6px;
margin: 0 0 8px;
}
.froga-woo div.product .summary .star-rating {
font-size: 13px;
width: 5.4em;
}
.froga-woo div.product .summary .woocommerce-review-link {
font-size: 12.5px;
color: #5F6B58;
text-decoration: none;
}
.froga-woo div.product .summary .woocommerce-review-link:hover { text-decoration: underline; }
.froga-woo div.product .woocommerce-product-details__short-description {
background: #fff;
border-left: 4px solid #F2B417;
border-radius: 0 14px 14px 0;
padding: 14px 18px;
margin-bottom: 18px;
font-size: 16px;
}
/* Đơn giá mỗi lần dùng + ghi chú ưu đãi mua nhiều (ban-hang.php, 08/09/2026). */
.froga-woo div.product .froga-don-gia-lan {
font-family: 'Be Vietnam Pro', sans-serif;
font-size: 14.5px;
color: var(--mo);
margin: -10px 0 12px;
}
.froga-woo div.product .froga-don-gia-lan strong { color: var(--xanh); font-weight: 700; }
.froga-woo div.product .froga-uu-dai-nhieu {
font-family: 'Be Vietnam Pro', sans-serif;
font-size: 14px;
color: var(--mo);
margin: 10px 0 0;
}
.froga-woo div.product .froga-uu-dai-nhieu strong { color: #B8860B; font-weight: 700; }
.froga-woo .quantity input[type="number"] {
font-family: 'Be Vietnam Pro', sans-serif;
font-size: 16px;
padding: 11px 10px;
border: 1.5px solid #DAD2BA;
border-radius: 12px;
background: var(--kem);
width: 84px;
}
.froga-woo .product_meta { font-size: 13.5px; color: var(--mo); border-top: 1px solid var(--kraft); padding-top: 14px; margin-top: 18px; }
/* Mã hàng và danh mục: WooCommerce in hai liền nhau, ra một dòng dính
"SKU: DAILY-CLEAN Danh mục: Máy rửa bát" — đọc như một câu lỗi. Mỗi thứ một
dòng, nhãn nhạt hơn giá trị. */
.froga-woo .product_meta > span { display: block; margin-bottom: 4px; }
.froga-woo .product_meta > span:last-child { margin-bottom: 0; }
/* tab mô tả / thông số */
.froga-woo .woocommerce-tabs { grid-column: 1 / -1; margin-top: 12px; }
.froga-woo .woocommerce-tabs ul.tabs { padding: 0 !important; margin: 0 0 18px !important; display: flex; gap: 10px; flex-wrap: wrap; }
.froga-woo .woocommerce-tabs ul.tabs::before { border: none !important; }
.froga-woo .woocommerce-tabs ul.tabs li {
background: #fff !important;
border: 1.5px solid #BBD9B9 !important;
border-radius: 999px !important;
margin: 0 !important;
padding: 0 !important;
}
.froga-woo .woocommerce-tabs ul.tabs li::before,
.froga-woo .woocommerce-tabs ul.tabs li::after { content: none !important; }
.froga-woo .woocommerce-tabs ul.tabs li.active { background: var(--xanh) !important; border-color: var(--xanh) !important; }
/* Mau chu tren tab PHAI dat specificity cao hon WooCommerce.
Woo dat `.woocommerce div.product .woocommerce-tabs ul.tabs li a { color:#515151 }`
— 4 lop + 2 the. Selector cua Froga chi 3 lop + 2 the nen thua, ket qua la
tab dang chon co chu xam dam #515151 tren nen xanh dam: KHONG DOC DUOC.
Them `div.product` va !important cho chac. */
.froga-woo .woocommerce-tabs ul.tabs li a,
.froga-woo div.product .woocommerce-tabs ul.tabs li a { font-weight: 700; font-size: 13.5px; padding: 9px 18px !important; color: var(--xanh) !important; }
.froga-woo .woocommerce-tabs ul.tabs li.active a,
.froga-woo div.product .woocommerce-tabs ul.tabs li.active a { color: #FFFFFF !important; }
.froga-woo .woocommerce-tabs .panel { background: #fff; border: 1px solid var(--kraft); border-radius: 20px; padding: clamp(20px, 4vw, 32px); }
/* WooCommerce có `.woocommerce div.product .woocommerce-tabs .panel { padding:0 }` — thêm
phần tử `div` nên thắng luật trên: khối Mô tả chữ dính sát lề trái (06/09/2026). */
.froga-woo div.product .woocommerce-tabs .panel { padding: clamp(20px, 4vw, 32px) !important; }
.froga-woo table.shop_attributes th { color: var(--xanh); font-weight: 700; }
/* sản phẩm liên quan */
.froga-woo .related, .froga-woo .upsells { grid-column: 1 / -1; }
/* ---------- giỏ hàng & thanh toán ---------- */
.froga-woo table.shop_table,
.froga-woo .cart-collaterals .cart_totals table {
border: 1px solid var(--kraft) !important;
border-radius: 20px !important;
border-collapse: separate !important;
overflow: hidden;
background: #fff;
}
.froga-woo table.shop_table th { background: var(--kem); color: var(--xanh); font-weight: 700; }
.froga-woo table.shop_table td, .froga-woo table.shop_table th { padding: 14px 18px !important; }
.froga-woo .cart_totals h2, .froga-woo #order_review_heading { font-size: 22px; }
.froga-woo form .form-row input.input-text,
.froga-woo form .form-row textarea,
.froga-woo form .form-row select,
.froga-woo .select2-container .select2-selection--single {
font-family: 'Be Vietnam Pro', sans-serif;
font-size: 16px;
padding: 12px 14px;
border: 1.5px solid #DAD2BA;
border-radius: 12px;
background: var(--kem);
color: #1E3B27;
height: auto;
}
.froga-woo form .form-row label { font-weight: 700; font-size: 13.5px; color: var(--than); }
.froga-woo .woocommerce-billing-fields h3 { margin-top: 0; }
.froga-woo #payment { background: var(--kem) !important; border: 1px solid var(--kraft); border-radius: 20px; }
.froga-woo #payment ul.payment_methods { border-bottom: 1px solid var(--kraft); }
.froga-woo #payment div.payment_box { background: #E7F2E4 !important; color: #2C4A34; border-radius: 12px; }
.froga-woo #payment div.payment_box::before { border-bottom-color: #E7F2E4 !important; }
/* thông báo */
.froga-woo .woocommerce-message,
.froga-woo .woocommerce-info,
.froga-woo .woocommerce-error {
border-top: none !important;
border-radius: 14px;
padding: 14px 18px 14px 46px !important;
font-weight: 600;
}
.froga-woo .woocommerce-message { background: #F1F8EE; border: 1px solid #BBD9B9; color: #1E3B27; }
.froga-woo .woocommerce-message::before { color: var(--xanh); }
.froga-woo .woocommerce-info { background: #EAF3F5; border: 1px solid #C3DDE3; color: #2C4A34; }
.froga-woo .woocommerce-info::before { color: #2F717F; }
.froga-woo .woocommerce-error { background: #FCF3DC; border: 1px solid #EDD9A8; color: #7A5F22; }
.froga-woo .woocommerce-error::before { color: #8A6820; }
/* đường dẫn phân cấp */
.froga-woo .woocommerce-breadcrumb { font-size: 14px; font-weight: 700; color: var(--mo); margin-bottom: 18px; }
.froga-woo .woocommerce-breadcrumb a { color: var(--mo); }
.froga-woo .woocommerce-breadcrumb a:hover { color: var(--xanh); }
/* trang cảm ơn */
.froga-woo .woocommerce-order ul.order_details {
background: #E7F2E4;
border-radius: 20px;
padding: 22px 26px !important;
margin: 0 0 26px !important;
border: 1px solid #BBD9B9;
}
.froga-woo .woocommerce-order ul.order_details li { border-right-color: #BBD9B9; color: var(--than); }
.froga-woo .woocommerce-order ul.order_details li strong { color: var(--xanh); font-family: 'Be Vietnam Pro', sans-serif; }
/* ==========================================================================
Luồng mua hàng — giỏ, thanh toán, tra cứu đơn, tài khoản
========================================================================== */
/* ---------- giỏ hàng ---------- */
.froga-woo .woocommerce-cart-form table.cart td.product-name a { color: #1E3B27; font-weight: 700; }
.froga-woo .woocommerce-cart-form table.cart img { width: 72px; border-radius: 12px; background: #F2EDDE; }
.froga-woo table.cart td.actions .coupon input.input-text {
width: 190px; padding: 11px 14px; border: 1.5px solid #DAD2BA; border-radius: 12px;
background: var(--kem); font-family: 'Be Vietnam Pro', sans-serif; font-size: 15px;
}
.froga-woo .cart-collaterals { margin-top: 26px; }
.froga-woo .cart_totals { width: 100% !important; float: none !important; }
.froga-woo .cart_totals .order-total .amount { font-family: 'Be Vietnam Pro', sans-serif; font-size: 24px; color: var(--xanh); }
.froga-woo .wc-proceed-to-checkout { padding-top: 18px !important; }
.froga-woo .wc-proceed-to-checkout .checkout-button { display: block; text-align: center; font-size: 17px !important; }
.froga-woo a.remove { color: #8A6820 !important; font-weight: 700; }
.froga-woo a.remove:hover { background: #FCF3DC !important; color: #7A5F22 !important; }
/* ---------- thanh toán ---------- */
/* Hai cột: thông tin khách | đơn hàng. Lưới chỉ chạy đúng khi form có đúng hai
phần tử con — functions.php bọc tiêu đề + bảng đơn vào .froga-cot-don để đạt
được điều đó. Khổ hẹp thì auto-fit tự dồn về một cột, không cần @media. */
.froga-woo form.checkout.woocommerce-checkout { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: clamp(24px, 4vw, 44px); align-items: start; }
.froga-woo .froga-cot-don { min-width: 0; }
.froga-woo #order_review_heading, .froga-woo #order_review { grid-column: auto; }
.froga-woo #customer_details,
.froga-woo .froga-cot-don {
background: #fff; border: 1px solid var(--kraft); border-radius: 22px;
padding: clamp(20px, 4vw, 32px);
}
.froga-woo #order_review_heading { margin: 0 0 12px; }
.froga-woo .woocommerce-billing-fields__field-wrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 16px; }
.froga-woo .form-row-wide { grid-column: 1 / -1; }
.froga-woo .woocommerce-form-coupon-toggle .woocommerce-info { font-size: 14px; }
.froga-woo .woocommerce-privacy-policy-text p { font-size: 12.5px; color: #5F6B58; }
.froga-woo #place_order { width: 100%; font-size: 17px !important; margin-top: 8px; }
.froga-woo .woocommerce-checkout-review-order-table tfoot .order-total th,
.froga-woo .woocommerce-checkout-review-order-table tfoot .order-total td { font-size: 18px; }
.froga-woo .woocommerce-checkout-review-order-table tfoot .order-total .amount { font-family: 'Be Vietnam Pro', sans-serif; color: var(--xanh); }
/* ---------- tra cứu đơn hàng ---------- */
.froga-woo form.track_order {
background: #fff; border: 1px solid var(--kraft); border-radius: 22px;
padding: clamp(20px, 4vw, 32px); max-width: 560px;
}
.froga-woo form.track_order .form-row { margin-bottom: 14px; }
.froga-woo form.track_order button { width: 100%; }
.froga-woo .woocommerce-order-details,
.froga-woo .woocommerce-customer-details {
background: #fff; border: 1px solid var(--kraft); border-radius: 22px;
padding: clamp(20px, 4vw, 30px); margin-bottom: 22px;
}
.froga-woo .woocommerce-order-details__title,
.froga-woo .woocommerce-column__title { margin-top: 0; }
/* ---------- tài khoản ---------- */
.froga-woo .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 22px; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.froga-woo .woocommerce-MyAccount-navigation li a {
display: inline-block; font-weight: 700; font-size: 13.5px; padding: 9px 18px;
border-radius: 999px; border: 1.5px solid #BBD9B9; color: var(--xanh); background: #fff;
}
.froga-woo .woocommerce-MyAccount-navigation li.is-active a { background: var(--xanh); border-color: var(--xanh); color: #fff; }
.froga-woo .woocommerce-MyAccount-content { background: #fff; border: 1px solid var(--kraft); border-radius: 22px; padding: clamp(20px, 4vw, 30px); }
.froga-woo .woocommerce-MyAccount-navigation, .froga-woo .woocommerce-MyAccount-content { width: 100% !important; float: none !important; }
/* ---------- form đăng nhập ---------- */
.froga-woo .woocommerce-form-login,
.froga-woo .woocommerce-form-register {
border: 1px solid var(--kraft) !important; border-radius: 20px !important;
padding: clamp(20px, 4vw, 28px) !important; background: #fff;
}
/* ---------- huy hiệu tin cậy dưới nút đặt hàng ---------- */
.froga-tin-cay { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.froga-tin-cay span {
background: #E7F2E4; border: 1px solid #BBD9B9; color: #23773C;
font-weight: 700; font-size: 12.5px; padding: 7px 14px; border-radius: 999px;
}
/* ---------- vá lại vài chỗ WooCommerce ép bằng CSS riêng ---------- */
/* Ảnh trong bảng giỏ mặc định 32px — quá bé để nhận ra sản phẩm. */
.froga-woo table.cart td.product-thumbnail img,
.froga-woo table.cart img { width: 72px !important; height: auto; border-radius: 12px; background: #F2EDDE; }
/* Ô mã giảm giá mặc định hẹp bằng nửa từ "Nhập mã".
ĐỪNG đặt display:flex lên chính
: nó có colspan, biến ô
đó thành flex là bảng mất cột, tiêu đề "Sản phẩm / Giá / Số lượng" trôi hẳn
sang phải và chừa một khoảng trống to ở đầu hàng. Bọc bên trong thì an toàn. */
.froga-woo table.cart td.actions { text-align: right; }
.froga-woo table.cart td.actions .coupon { float: left; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.froga-woo table.cart td.actions .coupon input.input-text { width: 200px !important; float: none; margin: 0; }
/* Cột tổng cộng nổi bên phải, phần bên trái để trống trông như lỗi dựng. */
.froga-woo .cart-collaterals { width: 100%; float: none; }
.froga-woo .cart-collaterals .cart_totals { max-width: 460px; margin-left: auto; }
/* ---------- bên trong thẻ "Thông tin thanh toán" ---------- */
/* WooCommerce lại chia đôi tiếp thẻ bên trái thành cột địa chỉ và cột ghi chú,
thành ra hai cột chỉ rộng hơn 200px: nhãn xuống dòng, email bị cắt cụt. Xếp
dọc lại, cột đã hẹp thì đừng chia nữa. */
.froga-woo #customer_details .col2-set { display: block; }
.froga-woo #customer_details .col-1,
.froga-woo #customer_details .col-2 { width: 100% !important; float: none !important; }
.froga-woo #customer_details .col-2 { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--kraft); }
/* Mỗi ô một dòng: form thanh toán đọc từ trên xuống nhanh hơn là đọc zigzag. */
.froga-woo .woocommerce-billing-fields__field-wrapper,
.froga-woo .woocommerce-shipping-fields__field-wrapper { display: block; }
.froga-woo #customer_details .form-row-first,
.froga-woo #customer_details .form-row-last,
.froga-woo #customer_details .form-row-wide { width: 100% !important; float: none !important; margin-right: 0 !important; }
.froga-woo #customer_details .form-row { margin-bottom: 14px; }
.froga-woo #customer_details .woocommerce-shipping-fields > h3 { font-size: 17px; margin: 0 0 12px; }
.froga-woo #customer_details textarea { min-height: 96px; }
/* WooCommerce bọc mã đơn, ngày và trạng thái trong , mặc định là nền
vàng chói của trình duyệt — lạc hẳn khỏi bảng màu Froga. */
.froga-woo mark { background: #E7F2E4; color: #23773C; font-weight: 700; padding: 1px 7px; border-radius: 8px; }
/* Giỏ trống đã có khối riêng của Froga kèm nút "Xem sản phẩm"; nút mặc định
của WooCommerce ngay bên dưới chỉ là cái thứ hai làm đúng một việc. */
.froga-woo .return-to-shop { display: none; }
/* ==========================================================================
TRANG SẢN PHẨM — theo lối đã dựng cho aotrummaygiat.vn
==========================================================================
Ảnh trái, một thẻ trắng bên phải gom hết phần quyết định mua: giá lớn, số
lượng có nút cộng trừ, tạm tính đổi theo số lượng, hai nút, ba lời hứa.
========================================================================== */
/* Đường dẫn phân cấp: chữ nhỏ, giãn, in hoa — cùng lối với web áo trùm. */
.froga-woo .woocommerce-breadcrumb {
font-size: 11.5px;
font-weight: 700;
letter-spacing: 1.1px;
text-transform: uppercase;
color: var(--mo);
margin-bottom: 20px;
}
.froga-woo .woocommerce-breadcrumb a { color: var(--mo); }
.froga-woo .woocommerce-breadcrumb a:hover { color: var(--xanh); }
/* Cột phải: một thẻ trắng bao lấy toàn bộ phần mua. */
.froga-woo .froga-cot-mua { display: contents; }
.froga-woo div.product .summary {
background: #FFFFFF;
border: 1px solid var(--kraft);
border-radius: 22px;
padding: clamp(20px, 3vw, 30px);
}
.froga-woo div.product .summary .product_title { margin-top: 0; }
/* 08/09/2026, anh gửi dropps.com làm mẫu "cỡ chữ của họ": tiêu đề, giá, dãy
sao đánh giá bên họ nhỏ và sát nhau hơn hẳn — nhìn gọn, chuyên nghiệp.
Đo bằng JS trên chính trang dropps.com (không đoán): tiêu đề 24px/700/
line-height 30px, giá 28px/700/line-height 35px, số sao + số lượt đánh
giá 12px/400. Ghi đè RIÊNG cho tiêu đề trang sản phẩm (không đụng
`.froga-woo h1` dùng chung cho tiêu đề Cửa hàng/Giỏ hàng). */
.froga-woo div.product .summary .product_title {
font-size:clamp(18.5px,3.2vw,26px);
line-height: 1.25;
}
/* Ô số lượng: nút − và + hai bên, đủ to để bấm bằng ngón tay. */
.froga-woo form.cart .quantity {
display: inline-flex;
align-items: stretch;
border: 1.5px solid #DAD2BA;
border-radius: 999px;
overflow: hidden;
background: var(--kem);
}
.froga-woo form.cart .quantity input[type="number"] {
width: 56px;
border: none !important;
border-radius: 0 !important;
background: transparent;
text-align: center;
font-weight: 700;
-moz-appearance: textfield;
appearance: textfield;
}
.froga-woo form.cart .quantity input[type="number"]::-webkit-outer-spin-button,
.froga-woo form.cart .quantity input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.froga-sl-nut {
flex: none;
width: 44px;
border: none;
background: transparent;
color: var(--xanh);
font-family: 'Be Vietnam Pro', sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 1;
cursor: pointer;
}
.froga-sl-nut:hover { background: #E7F2E4; }
/* Khối tạm tính — đứng cạnh ô số lượng, đổi theo số khách chọn. */
.froga-tam-tinh {
display: inline-flex;
flex-direction: column;
gap: 2px;
margin-left: 16px;
vertical-align: middle;
}
.froga-tam-tinh .froga-nhan {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 1.1px;
text-transform: uppercase;
color: var(--mo);
}
.froga-tam-tinh .froga-so {
font-family: 'Be Vietnam Pro', sans-serif;
font-weight: 700;
font-size: 22px;
line-height: 1.1;
color: var(--xanh);
font-variant-numeric: tabular-nums;
}
.froga-tam-tinh .froga-so .woocommerce-Price-amount { color: inherit; }
/* Hai nút: thêm vào giỏ (viền) và mua ngay (đặc) — cùng hàng ở khổ rộng. */
.froga-woo form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.froga-woo form.cart .quantity { order: 1; }
.froga-woo .froga-tam-tinh { order: 2; margin-left: 4px; margin-right: auto; }
.froga-woo form.cart button.single_add_to_cart_button { order: 3; }
.froga-woo .froga-mua-ngay { order: 4; }
.froga-woo .froga-tin-cay-sp { order: 5; flex: 1 1 100%; margin-top: 4px; }
/* 06/09/2026, anh Mừng "chưa ok lắm": hai nút to nhỏ lệch nhau (197×44 và 126×42).
Nay cùng một hàng, mỗi nút một nửa, cao 50px, bo 12px; ba viên cam kết xếp trái. */
.froga-woo form.cart button.single_add_to_cart_button,
.froga-woo .froga-mua-ngay {
flex: 1 1 calc(50% - 6px);
min-width: 140px;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 50px;
margin: 0;
padding: 0 18px !important;
border-radius: 12px !important;
font-weight: 700 !important;
font-size: 15px !important;
line-height: 1.2 !important;
white-space: nowrap;
}
.froga-woo form.cart button.single_add_to_cart_button {
background: #FFFFFF !important;
color: var(--xanh) !important;
border: 2px solid var(--xanh) !important;
box-shadow: none !important;
}
.froga-woo form.cart button.single_add_to_cart_button:hover { background: #E7F2E4 !important; }
.froga-woo .froga-mua-ngay {
background: var(--xanh) !important;
color: #FFFFFF !important;
border: 2px solid var(--xanh) !important;
box-shadow: 0 1px 2px rgba(23, 90, 43, .28) !important;
}
.froga-woo .froga-mua-ngay:hover { background: #1E6733 !important; border-color: #1E6733 !important; }
.froga-woo div.product form.cart .froga-tin-cay-sp,
.froga-woo .froga-tin-cay-sp { display: flex; flex-wrap: wrap; justify-content: flex-start !important; margin-left: 0 !important; margin-right: auto; gap: 6px; margin-top: 10px !important; }
/* Anh Mừng 06/09/2026: ba viên phải nằm MỘT dòng ở máy tính (cột mua ~470px):
chữ ngắn hơn, 11,5px, đệm gọn, mỗi viên giãn đều; điện thoại vẫn được xuống dòng. */
.froga-woo .froga-tin-cay-sp span { flex: 1 1 auto; text-align: center; white-space: nowrap; font-size: 11.5px; padding: 5px 9px; }
/* ==========================================================================
GIỎ HÀNG — hai cột, thẻ tổng kết bên phải
==========================================================================
Dùng flex chứ không grid: cần cột hàng rộng hơn cột tổng (basis 460 / 320),
mà vẫn tự xuống một cột ở khổ hẹp — grid auto-fit chỉ cho ra các cột bằng
nhau, còn 1.6fr/1fr thì phải kèm @media, thứ woo.css cố ý không có.
========================================================================== */
.froga-woo .froga-gio { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(20px, 3vw, 32px); }
.froga-woo .froga-gio > form.woocommerce-cart-form { flex: 1 1 460px; min-width: 0; margin: 0; }
.froga-woo .froga-gio > .cart-collaterals { flex: 1 1 320px; min-width: 0; width: auto; margin: 0; }
.froga-woo .froga-gio > .cart-collaterals .cart_totals { max-width: none; margin: 0; }
/* Thẻ tổng kết: một khối trắng gom mã giảm giá, các dòng tiền và tổng cộng. */
.froga-woo .cart_totals,
.froga-woo #order_review {
background: #FFFFFF;
border: 1px solid var(--kraft);
border-radius: 22px;
padding: clamp(18px, 2.5vw, 26px);
}
.froga-woo .cart_totals h2 { font-size: 20px; margin: 0 0 14px; }
.froga-woo .cart_totals table.shop_table { border: none !important; border-radius: 0 !important; background: transparent; }
.froga-woo .cart_totals table.shop_table th,
.froga-woo .cart_totals table.shop_table td { padding: 12px 0 !important; background: transparent; }
.froga-woo .cart_totals table.shop_table th { font-size: 14.5px; }
/* Ô mã giảm giá sau khi JS chuyển lên đầu thẻ. */
.froga-ma-giam { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--kraft); }
.froga-ma-giam .coupon { display: flex; gap: 8px; float: none; }
.froga-ma-giam .coupon input.input-text { flex: 1 1 auto; width: auto !important; margin: 0; }
.froga-ma-giam .coupon button { flex: none; }
/* Nhãn nhỏ in hoa — dấu nhận biết chung với web áo trùm. */
.froga-nhan {
display: block;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 1.1px;
text-transform: uppercase;
color: var(--mo);
margin-bottom: 8px;
}
/* Khối trấn an: ba lời hứa, nền xanh nhạt, đặt ngay dưới tổng tiền. */
.froga-tran-an {
margin-top: 16px;
background: #E7F2E4;
border: 1px solid #BBD9B9;
border-radius: 16px;
padding: 14px 18px;
}
.froga-tran-an .froga-nhan { color: var(--xanh); margin-bottom: 4px; }
.froga-tran-an p { margin: 0; font-size: 14px; line-height: 1.6; color: #2F4A33; }
/* Bảng hàng trong giỏ: bỏ khung riêng, để thẻ ngoài lo phần khung. */
.froga-woo .froga-gio table.cart { border-radius: 22px !important; }
.froga-woo .froga-gio table.cart td.actions { padding: 14px 18px !important; }
/* ---------- thanh toán: ảnh trong bảng đơn ---------- */
.froga-woo .woocommerce-checkout-review-order-table td.product-name { display: flex; align-items: center; gap: 12px; }
.froga-anh-don { flex: none; }
.froga-anh-don img { width: 56px; height: 56px; object-fit: cover; border-radius: 12px; background: #F2EDDE; display: block; }
.froga-ten-don { min-width: 0; }
/* ---------- đánh bóng sau khi soát bằng mắt ---------- */
/* Bảng đơn nằm trong thẻ trắng rồi thì đừng kẻ khung lần nữa — khung lồng
khung làm cả vùng trông chật và rối. */
.froga-woo #order_review table.shop_table,
.froga-woo .froga-gio .cart_totals table.shop_table {
border: none !important;
border-radius: 0 !important;
background: transparent;
}
.froga-woo #order_review table.shop_table th,
.froga-woo #order_review table.shop_table td { background: transparent; padding: 12px 0 !important; }
.froga-woo #order_review table.shop_table thead th { border-bottom: 1px solid var(--kraft); }
.froga-woo #order_review table.shop_table tfoot tr:last-child th,
.froga-woo #order_review table.shop_table tfoot tr:last-child td { border-top: 1px solid var(--kraft); padding-top: 14px !important; }
/* Cột thanh toán: cho cột đơn hàng rộng hơn để "Miễn phí giao hàng" và tên
sản phẩm không vỡ ba dòng. */
.froga-woo form.checkout.woocommerce-checkout { grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); }
.froga-woo .froga-cot-don { min-width: 0; }
.froga-woo #order_review td.product-total,
.froga-woo #order_review .order-total td { white-space: nowrap; }
/* Cột tên trong giỏ: ảnh nhỏ lại, nhường chỗ cho tên. */
.froga-woo table.cart td.product-thumbnail { width: 84px; }
.froga-woo table.cart td.product-name { width: 40%; }
.froga-woo table.cart td.product-name a { line-height: 1.35; }
/* Thanh "Bạn có mã ưu đãi?" mặc định là xanh dương của WooCommerce. */
.froga-woo .woocommerce-form-coupon-toggle .woocommerce-info {
background: var(--kem);
border-top-color: var(--xanh);
color: var(--than);
}
.froga-woo .woocommerce-form-coupon-toggle .woocommerce-info::before { color: var(--xanh); }
.froga-woo .woocommerce-form-coupon-toggle .woocommerce-info a { font-weight: 700; }
/* Khối trấn an ở trang thanh toán nằm ngoài thẻ đơn hàng — cho nó thụt vào
cùng mép với thẻ. */
.froga-woo .froga-cot-don .froga-tran-an { margin-top: 18px; }
/* Số lượng "× 1" dính sát vào số tiền thành ra đọc nhầm "× 1999.000".
Tách nó ra mép phải của cột tên, và chừa khoảng thở trước cột tiền. */
.froga-woo #order_review td.product-name { flex-wrap: wrap; }
.froga-woo #order_review td.product-name .product-quantity {
flex: none;
padding-left: 8px;
color: var(--mo);
font-weight: 700;
white-space: nowrap;
}
.froga-woo #order_review td.product-total { padding-left: 16px !important; text-align: right; }
/* ==========================================================================
GIỎ HÀNG — danh sách thẻ (đè khuôn cart.php)
==========================================================================
Ảnh trái, tên và giá đơn vị ở giữa, hàng dưới là nút cộng trừ + thành tiền
+ nút Xoá. Cùng khuôn với aotrummaygiat.vn.
========================================================================== */
.froga-mon-list { display: flex; flex-direction: column; gap: 14px; }
.froga-mon {
display: flex;
gap: 16px;
background: #FFFFFF;
border: 1px solid var(--kraft);
border-radius: 20px;
padding: 14px;
}
.froga-mon-anh { flex: none; width: clamp(76px, 18vw, 110px); }
.froga-mon-anh img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 14px;
background: #F2EDDE;
display: block;
}
.froga-mon-chu { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.froga-mon-ten {
font-family: 'Be Vietnam Pro', sans-serif;
font-weight: 700;
font-size:clamp(15px,2.2vw,19px);
line-height: 1.25;
}
.froga-mon-ten a { color: #1E3B27; }
.froga-mon-ten a:hover { color: var(--xanh); }
.froga-mon-don { font-size: 13.5px; color: var(--mo); font-weight: 700; }
.froga-mon-don .woocommerce-Price-amount { color: inherit; }
.froga-mon-day { display: flex; align-items: center; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.froga-mon-sl { flex: none; }
.froga-mon-tien {
margin-left: auto;
font-family: 'Be Vietnam Pro', sans-serif;
font-weight: 700;
font-size: 18px;
color: #1E3B27;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.froga-mon-tien .woocommerce-Price-amount { color: inherit; }
.froga-mon-xoa {
flex: none;
font-size: 13px;
font-weight: 700;
color: #A6484C !important;
background: #FBEEEE;
border: 1px solid #EED6D6;
border-radius: 999px;
padding: 7px 14px;
}
.froga-mon-xoa:hover { background: #F5DEDE; color: #8A3A3E !important; }
/* Ô số lượng trong giỏ: dùng lại dáng viên thuốc của trang sản phẩm. */
.froga-woo .froga-mon-sl .quantity {
display: inline-flex;
align-items: stretch;
border: 1.5px solid #DAD2BA;
border-radius: 999px;
overflow: hidden;
background: var(--kem);
}
.froga-woo .froga-mon-sl .quantity input[type="number"] {
width: 50px;
border: none !important;
border-radius: 0 !important;
background: transparent;
text-align: center;
font-weight: 700;
padding: 9px 0;
-moz-appearance: textfield;
appearance: textfield;
}
.froga-woo .froga-mon-sl .quantity input::-webkit-outer-spin-button,
.froga-woo .froga-mon-sl .quantity input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Hàng thao tác dưới danh sách. */
.froga-gio-thao-tac { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.froga-woo .froga-mua-them {
background: #FFFFFF !important;
color: var(--xanh) !important;
border: 2px solid var(--xanh) !important;
box-shadow: none !important;
padding: 11px 22px !important;
}
.froga-woo .froga-mua-them:hover { background: #E7F2E4 !important; }
.froga-gio-thao-tac .coupon { display: none; } /* JS chuyển sang thẻ tổng kết */
.froga-woo .froga-cap-nhat {
background: transparent !important;
color: var(--mo) !important;
border: 1.5px solid #DAD2BA !important;
box-shadow: none !important;
font-size: 13.5px !important;
padding: 10px 18px !important;
margin-left: auto;
}
.froga-woo .froga-cap-nhat:hover { background: var(--kem) !important; color: var(--than) !important; }
.froga-woo .froga-cap-nhat[disabled] { opacity: .45; }
/* Nút thanh toán kèm số tiền. */
.froga-woo .wc-proceed-to-checkout .checkout-button { font-size: 16px !important; }
/* ==========================================================================
DẢI BA BƯỚC — Giỏ hàng · Thanh toán · Hoàn tất
========================================================================== */
.froga-buoc {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px 22px;
list-style: none;
margin: 0 0 26px;
padding: 0;
}
.froga-buoc li { display: flex; align-items: center; gap: 9px; }
.froga-buoc-so {
flex: none;
width: 24px;
height: 24px;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 12.5px;
font-weight: 700;
background: #E4DDC9;
color: #5F6B58;
}
.froga-buoc-ten {
font-size: 11.5px;
font-weight: 700;
letter-spacing: 1.1px;
text-transform: uppercase;
color: var(--mo);
}
.froga-buoc .froga-buoc-dang .froga-buoc-so { background: var(--xanh); color: #FFFFFF; }
.froga-buoc .froga-buoc-dang .froga-buoc-ten { color: #1E3B27; }
.froga-buoc .froga-buoc-xong .froga-buoc-so { background: #BBD9B9; color: #175A2B; }
.froga-buoc .froga-buoc-xong .froga-buoc-ten { color: var(--xanh); }
/* ==========================================================================
THANH TOÁN — nhãn in hoa, hai cột, thẻ chọn phương thức
========================================================================== */
/* Nhãn nhỏ in hoa giãn chữ — dấu nhận biết chung với web áo trùm. */
.froga-woo #customer_details .form-row > label,
.froga-woo .woocommerce-shipping-fields .form-row > label {
display: block;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 1.1px;
text-transform: uppercase;
color: var(--mo);
margin-bottom: 6px;
}
.froga-woo #customer_details .form-row > label .required { color: #C05B5B; }
/* Hai cột: họ tên | điện thoại, tỉnh | quận huyện; email và địa chỉ cả hàng. */
.froga-woo .woocommerce-billing-fields__field-wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
gap: 0 16px;
}
.froga-woo #customer_details .form-row-wide { grid-column: 1 / -1; }
.froga-woo #customer_details .form-row-first,
.froga-woo #customer_details .form-row-last { width: 100% !important; float: none !important; }
/* Cách chọn thanh toán: mỗi cách một thẻ, không phải một dòng radio trơ. */
.froga-woo ul.wc_payment_methods { list-style: none; margin: 0 0 16px; padding: 0; }
.froga-woo ul.wc_payment_methods li.wc_payment_method {
border: 1.5px solid var(--kraft);
border-radius: 16px;
padding: 14px 16px;
margin-bottom: 10px;
background: #FFFFFF;
transition: border-color .18s ease, background .18s ease;
}
.froga-woo ul.wc_payment_methods li.wc_payment_method:has(input:checked) {
border-color: var(--xanh);
background: #F3F9F1;
}
.froga-woo ul.wc_payment_methods li.wc_payment_method label {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11.5px !important;
font-weight: 700;
letter-spacing: 1.1px;
text-transform: uppercase;
color: #1E3B27;
cursor: pointer;
}
.froga-woo ul.wc_payment_methods .payment_box {
background: transparent !important;
margin: 8px 0 0 !important;
padding: 0 !important;
font-size: 14px;
color: var(--than);
}
.froga-woo ul.wc_payment_methods .payment_box::before { display: none !important; }
/* Cách giao hàng: cùng dáng thẻ. */
.froga-woo #shipping_method { list-style: none; margin: 0; padding: 0; }
.froga-woo #shipping_method li {
border: 1.5px solid var(--kraft);
border-radius: 14px;
padding: 11px 14px;
margin-bottom: 8px;
background: #FFFFFF;
}
.froga-woo #shipping_method li:has(input:checked) { border-color: var(--xanh); background: #F3F9F1; }
.froga-woo #shipping_method label { font-size: 14px; font-weight: 700; color: #1E3B27; }
/* Dòng "Quốc gia/Khu vực: Việt Nam" là thừa — cửa hàng chỉ bán trong nước, ô
này không đổi được. Giữ trong DOM cho WooCommerce vẫn nhận giá trị. */
/* Phai co !important: address-i18n.js cua WooCommerce dat thang
style="display: block" vao the, ma style noi dong luon thang CSS thuong. */
.froga-woo #billing_country_field { display: none !important; }
/* Ảnh trong bảng đơn: 44px và không cho xuống dòng, kẻo ảnh nằm một hàng còn
tên nằm hàng dưới. */
.froga-woo #order_review td.product-name { flex-wrap: nowrap; align-items: flex-start; gap: 10px; }
.froga-anh-don img { width: 44px; height: 44px; }
.froga-woo #order_review td.product-name .froga-ten-don { flex: 1 1 auto; line-height: 1.35; }
.froga-woo #order_review td.product-name .product-quantity { align-self: center; }
/* Một cách giao hàng duy nhất thì đừng vẽ thành thẻ chọn — không có gì để chọn. */
.froga-woo #shipping_method li:only-child {
border: none;
background: transparent;
padding: 0;
margin: 0;
}
/* ==========================================================================
KHỐI MÃ QR CHUYỂN KHOẢN
==========================================================================
Hiện ở trang cảm ơn, trang xem lại đơn và trong email. Ảnh QR bên trái,
thông tin gõ tay bên phải — vì vẫn có khách dùng máy tính, quét không được
thì phải có số để gõ.
========================================================================== */
.froga-qr {
display: flex;
flex-wrap: wrap;
gap: clamp(16px, 3vw, 28px);
background: #FFFFFF;
border: 1px solid var(--kraft);
border-radius: 22px;
padding: clamp(18px, 3vw, 26px);
margin: 0 0 26px;
}
.froga-qr-anh { flex: 0 1 300px; }
.froga-qr-anh img {
width: 100%;
height: auto;
max-width: 320px;
border-radius: 14px;
background: #FFFFFF;
display: block;
}
.froga-qr-chu { flex: 1 1 300px; min-width: 0; }
.froga-qr-dan { font-size: 15px; line-height: 1.6; color: var(--than); margin: 0 0 14px; }
.froga-qr-bang {
display: grid;
grid-template-columns: auto 1fr;
gap: 8px 18px;
margin: 0 0 14px;
font-size: 15px;
}
.froga-qr-bang dt { color: var(--mo); font-weight: 700; }
.froga-qr-bang dd { margin: 0; color: #1E3B27; font-weight: 700; word-break: break-word; }
.froga-qr-bang dd strong { color: var(--xanh); }
.froga-qr-luu {
background: #FCF3DC;
border: 1px solid #EDD9A8;
border-radius: 14px;
padding: 12px 16px;
font-size: 14px;
line-height: 1.6;
color: #6B5417;
margin: 0;
}
.froga-qr-luu strong { color: #4A3505; }
/* ================================================================== *
* Giỏ hàng & Thanh toán — nhận diện bản thiết kế 12
*
* Ruột hai trang này do WooCommerce sinh (xem theme-src/mua-hang.php để biết
* vì sao không dựng lại). Phần nhìn thì kéo về đúng bản vẽ ở đây: thẻ viền
* trên 4px, huy hiệu vuông, nút bo tròn có chân, nền kraft.
* ================================================================== */
/* --- đường dẫn phân cấp + tiêu đề --- */
.froga-duong-mua {
max-width: 1180px;
margin: 0 auto;
padding: 18px clamp(16px, 4vw, 24px) 0;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.9px;
text-transform: uppercase;
color: #5F6B58;
}
.froga-duong-mua span { color: #42563F; }
.froga-tieu-mua {
max-width: 1180px;
margin: 0 auto;
padding: clamp(20px, 3vw, 30px) clamp(16px, 4vw, 24px) 0;
}
.froga-nhan-nho {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
font-weight: 700;
font-size: 12.5px;
letter-spacing: 1.6px;
text-transform: uppercase;
color: #23773C;
}
.froga-gach { width: 26px; height: 2px; background: #23773C; }
.froga-tieu-mua h1 {
font-family: 'Be Vietnam Pro', sans-serif;
font-weight: 700;
font-size:clamp(23px,4.6vw,38px);
margin: 0 0 6px;
color: #1E3B27;
letter-spacing: -0.4px;
}
.froga-phu-mua { font-size: 14px; font-weight: 700; color: #5F6B58; }
/* --- giỏ trống --- */
.froga-gio-trong {
max-width: 1180px;
margin: clamp(20px, 4vw, 34px) auto;
background: #FFFFFF;
border: 1px solid #DAD2BA;
border-radius: 20px;
padding: clamp(28px, 5vw, 46px) clamp(20px, 4vw, 30px);
display: flex;
flex-wrap: wrap;
gap: 28px;
align-items: center;
justify-content: center;
text-align: center;
}
.froga-gio-trong img { flex: none; width: 118px; height: auto; }
.froga-gio-trong > div { flex: 0 1 460px; text-align: left; }
.froga-gio-trong h2 {
font-family: 'Be Vietnam Pro', sans-serif;
font-weight: 700;
font-size: 23px;
margin: 0 0 8px;
color: #1E3B27;
}
.froga-gio-trong p { font-size: 15.5px; line-height: 1.65; color: #5A6B54; margin: 0 0 18px; }
.froga-gio-trong-nut { display: flex; flex-wrap: wrap; gap: 12px; }
.froga-nut-chinh,
.froga-nut-phu {
display: inline-block;
font-weight: 700;
font-size: 15px;
padding: 13px 26px;
border-radius: 999px;
}
.froga-nut-chinh { background: #23773C; color: #FFFFFF; box-shadow:0 8px 20px rgba(30,59,39,.14); }
.froga-nut-chinh:hover { background: #23773C; color: #FFFFFF; }
.froga-nut-phu { border: 2px solid #23773C; color: #23773C; }
.froga-nut-phu:hover { background: #E7F2E4; }
/* --- dòng trấn an + hộp hỗ trợ dưới bảng tổng --- */
.froga-cach-tra {
font-size: 13px;
line-height: 1.55;
color: #5F6B58;
text-align: center;
margin: 10px 0 0;
}
.froga-ho-tro {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid #F0EADA;
display: flex;
flex-direction: column;
gap: 3px;
font-size: 13.5px;
color: #5A6B54;
}
.froga-ho-tro strong { color: #1E3B27; font-size: 14.5px; }
.froga-ho-tro a { font-weight: 700; }
/* --- thẻ món trong giỏ: viền trên 4px như mọi thẻ khác của bản vẽ --- */
.froga-mon {
border-top: 4px solid #23773C !important;
border-radius: 4px 4px 18px 18px !important;
}
@media (max-width: 700px) {
.froga-gio-trong { flex-direction: column; }
.froga-gio-trong > div { flex: 1 1 auto; text-align: center; }
.froga-gio-trong-nut { justify-content: center; }
}
/* ==========================================================================
05/09/2026 — soát lại hai trang mua hàng bằng ẢNH CHỤP, không chỉ bằng số đo
==========================================================================
Bốn lỗi dưới đây đều đọc mã thấy đúng, đo `querySelector` thấy đủ, và chỉ
lộ ra khi mở ảnh chụp trang thật ở khổ 1440 và 430.
========================================================================== */
/* --- 1. Ba huy hiệu dưới nút Đặt hàng bị bóp còn 0px ---------------------
WooCommerce đặt `float: right` cho #place_order. `.froga-tin-cay` là một
khối flex, tức là một khung định dạng riêng (BFC), nên nó KHÔNG chui xuống
dưới phần nổi mà co lại vừa khoảng trống còn thừa bên cạnh — nút rộng gần
hết dòng nên khoảng đó bằng 0. Ba huy hiệu thành ba vệt chữ dọc, mỗi dòng
một từ, đè lên chính cái nút.
Đo `getComputedStyle` không có luật `width` nào khớp — vì đây là hệ quả bố
cục, không phải luật CSS. Chữa gốc: nút không nổi nữa (bản vẽ vốn vẽ nó
rộng hết dòng), và huy hiệu tự dọn phần nổi cho chắc. */
.froga-woo #place_order {
float: none !important;
width: 100%;
margin: 0;
}
.froga-tin-cay { clear: both; width: 100%; }
/* --- 2. Giỏ hàng: dòng "Giao hàng đến <địa chỉ cửa hàng>" ----------------
Bộ lọc `woocommerce_shipping_show_shipping_calculator` chỉ gỡ ô tính phí;
dòng địa chỉ nằm ngoài điều kiện đó nên phải ẩn ở đây. Nội dung nó in ra là
địa chỉ CƠ SỞ CỬA HÀNG, đọc lên thành "Froga giao hàng tới văn phòng
Froga" — và ở khổ 430px nó còn tràn sát mép thẻ. */
.froga-woo .woocommerce-shipping-destination,
.froga-woo .shipping-calculator-button,
.froga-woo .shipping-calculator-form { display: none !important; }
/* --- 3. Nút cộng / trừ quanh ô số lượng (bản thiết kế 12) ---------------- */
.froga-woo .froga-mon-sl .quantity {
display: inline-flex !important;
align-items: center;
border: 1.5px solid #BBD9B9;
border-radius: 10px;
overflow: hidden;
background: #FFFFFF;
}
.froga-woo .froga-mon-sl .quantity input.qty {
border: none !important;
border-radius: 0 !important;
width: 44px !important;
min-width: 44px;
height: 42px;
text-align: center;
font-family: 'Be Vietnam Pro', sans-serif;
font-weight: 700;
font-size: 17px;
color: #1E3B27;
background: transparent;
padding: 0 !important;
}
.froga-woo .froga-so-nut {
flex: none;
width: 40px;
height: 42px;
border: none;
background: #FFFFFF;
cursor: pointer;
font-family: 'Be Vietnam Pro', sans-serif;
font-weight: 700;
font-size: 19px;
line-height: 1;
color: var(--xanh);
}
.froga-woo .froga-so-nut:hover { background: #E7F2E4; }
/* --- 4. Hàng thao tác: liên kết bên trái, nút xoá bên phải --------------- */
.froga-woo .froga-mua-them {
background: none !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
font-weight: 700;
font-size: 14.5px;
color: var(--xanh) !important;
}
.froga-woo .froga-mua-them:hover { background: none !important; text-decoration: underline; }
/* Nút "Cập nhật giỏ hàng" là nút PHỤ — nút chính là "Thanh toán" bên cột
tiền. Luật cũ ở trên đã ghi `background: transparent !important` mà đo ra
vẫn xanh lá: cùng nằm trong woo.css còn có `.froga-woo button[type="submit"]`,
và bộ chọn thuộc tính đó nặng hơn `.froga-woo .froga-cap-nhat` một bậc nên
`!important` bên này thua. Nhắc lại kèm cả thẻ và thuộc tính cho chắc. */
.froga-woo button.froga-cap-nhat[type="submit"] {
margin-left: auto;
background: transparent !important;
color: var(--mo) !important;
border: 1.5px solid #DAD2BA !important;
box-shadow: none !important;
font-size: 13.5px !important;
padding: 10px 18px !important;
}
.froga-woo button.froga-cap-nhat[type="submit"]:hover {
background: var(--kem) !important;
color: var(--than) !important;
}
.froga-woo .froga-xoa-gio {
flex: none;
border: 1.5px solid #E4DDC9;
border-radius: 8px;
padding: 10px 16px;
font-weight: 700;
font-size: 13px;
color: var(--mo) !important;
background: #FFFFFF;
}
.froga-woo .froga-xoa-gio:hover { border-color: #8A6820; color: #7A5F22 !important; }
/* --- 5. Ô mã giảm giá: gập lại, nằm CUỐI thẻ tổng kết -------------------- */
.froga-woo .froga-ma-giam {
margin: 16px 0 0;
padding: 14px 0 0;
border-top: 1px solid var(--kraft);
border-bottom: none;
}
.froga-woo .froga-ma-giam > summary {
cursor: pointer;
list-style: none;
font-weight: 700;
font-size: 13px;
color: var(--mo);
}
.froga-woo .froga-ma-giam > summary::-webkit-details-marker { display: none; }
.froga-woo .froga-ma-giam > summary::after { content: '+'; margin-left: 6px; }
.froga-woo .froga-ma-giam[open] > summary::after { content: '−'; margin-left: 6px; }
.froga-woo .froga-ma-giam .coupon { margin-top: 12px; }
/* --- 6. Lối quay lại sửa giỏ, dưới nút Đặt hàng -------------------------- */
.froga-woo .froga-ve-gio {
display: block;
clear: both;
text-align: center;
margin-top: 14px;
font-weight: 700;
font-size: 13.5px;
}
/* --- 7. Thẻ tổng ở GIỎ HÀNG dính theo khi cuộn (chỉ khổ máy tính) --------
Ở khổ hẹp hai cột đã xếp chồng, dính là thẻ tổng che mất danh sách hàng.
⚠️ ĐỪNG áp luật này cho `.froga-cot-don` bên trang thanh toán: cột đó cao
1.347px, cao hơn cả khung nhìn. Phần tử sticky cao hơn khung nhìn thì dính
ở mép trên rồi trôi mất phần đuôi — tức là nút Đặt hàng biến khỏi màn hình
và không cuộn tới được. */
@media (min-width: 1000px) {
.froga-woo .froga-gio > .cart-collaterals { position: sticky; top: 96px; }
}
/* --- 8. Thẻ chọn thanh toán: nút tròn và nhãn phải cùng một dòng ---------
Khối
để nguyên `display:block` thì ba con của nó (radio, nhãn, ô mô
tả) xếp theo dòng chữ: nhãn nào ngắn thì nằm cạnh nút tròn, nhãn nào dài
thì XUỐNG DÒNG và nút tròn còn trơ lại một mình. Ở khổ 430px, "Chuyển
khoản QR" nằm cạnh nút còn "Thanh toán khi nhận hàng (COD)" thì không —
hai thẻ cùng kiểu mà trông như hai kiểu khác nhau.
Lưới hai cột chốt nút tròn ở cột 1, nhãn và ô mô tả ở cột 2. Đã đếm con
của
: đúng ba thứ trên, không có biểu tượng cổng thanh toán nào chen
vào — thêm cổng mới thì đếm lại. */
.froga-woo ul.wc_payment_methods li.wc_payment_method {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: 10px;
align-items: center;
}
/* ⚠️ Phải ghi hàng VÀ cột cho cả ba con, đừng để cái nào tự xếp.
Con của lưới bị "khối hoá": `input[type=radio]` đang là inline thành khối,
rồi giãn hết ô của nó — đo ra một nút tròn rộng 224px, cột 1 rộng 0px, và
nút rơi xuống một hàng riêng phía trên nhãn. Ghi `grid-row` rõ ràng cộng
`width`/`justify-self` thì hết. */
.froga-woo ul.wc_payment_methods li.wc_payment_method > input[type="radio"] {
grid-column: 1;
grid-row: 1;
width: 18px;
height: 18px;
margin: 0;
justify-self: start;
}
.froga-woo ul.wc_payment_methods li.wc_payment_method > label { grid-column: 2; grid-row: 1; }
.froga-woo ul.wc_payment_methods li.wc_payment_method > .payment_box { grid-column: 2; grid-row: 2; }
/* ==========================================================================
05/09/2026 — hai trang trơ 900px
==========================================================================
Đo được: `/tra-cuu-don-hang/` và giỏ trống đều cao ĐÚNG 900px, tức là vừa
một khung màn hình rồi hết. Trang tương đương của officialfinish.vn
(/tro-giup-va-ho-tro/) cao 4.295px. Một trang chỉ có cái form là trang
không trả lời câu hỏi mà khách mang theo khi vào đó.
========================================================================== */
.froga-hoi-tra-cuu { margin-top: 30px; }
.froga-hoi-tra-cuu h2,
.froga-goi-y h2 {
font-family: 'Be Vietnam Pro', sans-serif;
font-size:clamp(17px,3vw,25px);
color: #1E3B27;
margin: 0 0 16px;
}
.froga-hoi-tra-cuu .froga-gap {
background: #FFFFFF;
border: 1px solid var(--kraft);
border-radius: 16px;
padding: 4px 20px;
margin-bottom: 10px;
}
.froga-hoi-tra-cuu .froga-gap p { margin: 0 0 12px; font-size: 15px; line-height: 1.7; color: #42563F; }
.froga-ho-tro--rong { margin-top: 24px; }
.froga-goi-y { margin-top: 34px; }
.froga-goi-y-luoi {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
gap: 18px;
}
.froga-goi-y-the {
background: #FFFFFF;
border: 1px solid var(--kraft);
border-top: 4px solid var(--xanh);
border-radius: 4px 4px 18px 18px;
padding: 18px 20px 20px;
display: flex;
flex-direction: column;
gap: 8px;
color: inherit;
}
.froga-goi-y-the:hover { border-color: var(--xanh); }
.froga-goi-y-the img { width: 100%; height: auto; border-radius: 12px; background: #F2EDDE; }
.froga-goi-y-ten { font-family: 'Be Vietnam Pro', sans-serif; font-weight: 700; font-size: 16.5px; line-height: 1.3; color: #1E3B27; }
.froga-goi-y-gia { font-family: 'Be Vietnam Pro', sans-serif; font-weight: 700; font-size: 18px; color: #1A582C; }
.froga-goi-y-gia .woocommerce-Price-amount { color: inherit; }
/* --------------------------------------------------------------------------
Vùng chạm ở khổ điện thoại — đo 05/09/2026, khổ 430px
--------------------------------------------------------------------------
Ngưỡng thường dùng là 44px. Đo được: "Xoá" của từng món 34px, "Xoá toàn bộ
giỏ" 36px, "Cập nhật giỏ hàng" 40px, nút − / + 42px, nút Thanh toán 42px.
Đây là trang ra tiền, bấm trượt một cái là mất đơn — không phải chuyện đẹp
xấu.
-------------------------------------------------------------------------- */
@media (max-width: 700px) {
.froga-woo .froga-mon-xoa,
.froga-woo .froga-xoa-gio,
.froga-woo button.froga-cap-nhat[type="submit"] {
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.froga-woo .froga-so-nut { height: 46px; }
.froga-woo .froga-mon-sl .quantity input.qty { height: 46px; }
.froga-woo .wc-proceed-to-checkout .checkout-button,
.froga-woo #place_order {
min-height: 50px;
display: flex;
align-items: center;
justify-content: center;
}
}
/* ==========================================================================
TRANG THANH TOÁN — dựng lại theo khuôn Shopee desktop (05/09/2026)
==========================================================================
Anh Mừng: xem trang thanh toán desktop của Shopee rồi làm lại như vậy.
Cấu trúc thật đọc được ở shopee.vn/checkout:
Địa chỉ nhận hàng
→ Sản phẩm · Đơn giá · Số lượng · Thành tiền (bảng có hàng tiêu đề)
→ Voucher
→ Phương thức thanh toán
→ Bảng tổng tiền canh phải
→ nút Đặt hàng
MỘT CỘT DỌC, thẻ trắng xếp chồng. Froga trước đó là hai cột — form bên
trái, đơn bên phải — nên ở khổ 1440px cột đơn chỉ rộng 544px, bảng bị bóp
và mắt phải nhảy qua lại giữa hai cột.
========================================================================== */
/* --- 1. Bỏ hai cột, về một cột --------------------------------------- */
.froga-woo form.checkout.woocommerce-checkout {
display: block !important;
}
.froga-woo form.checkout > .col2-set,
.froga-woo form.checkout > .froga-cot-don { max-width: none; }
/* --- 2. Mỗi phần là một thẻ trắng có vạch xanh trên đầu ---------------- */
.froga-woo #customer_details,
.froga-woo .froga-cot-don {
background: #FFFFFF;
border: 1px solid var(--kraft);
border-top: 3px solid var(--xanh);
border-radius: 3px 3px 18px 18px;
padding: clamp(20px, 3vw, 28px);
margin-bottom: 18px;
}
.froga-woo #customer_details { display: block; }
.froga-woo #customer_details .col-1,
.froga-woo #customer_details .col-2 { width: auto; float: none; }
/* Thẻ tổng kết bên trong không cần viền lồng viền nữa. */
.froga-woo .froga-cot-don #order_review {
background: transparent;
border: none;
border-radius: 0;
padding: 0;
}
/* --- 3. Bảng đơn bốn cột ---------------------------------------------- */
.froga-woo table.froga-bang-don {
width: 100%;
border-collapse: collapse;
border: none !important;
}
.froga-woo table.froga-bang-don thead th {
text-align: left;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--mo);
padding: 0 0 12px !important;
border-bottom: 1px solid var(--kraft);
background: transparent;
}
.froga-woo table.froga-bang-don thead th.product-price,
.froga-woo table.froga-bang-don thead th.product-qty,
.froga-woo table.froga-bang-don thead th.product-total { text-align: right; }
.froga-woo table.froga-bang-don tbody td {
padding: 16px 0 !important;
border-bottom: 1px solid #F0EADA;
background: transparent;
vertical-align: middle;
font-size: 15px;
}
.froga-woo table.froga-bang-don td.product-price,
.froga-woo table.froga-bang-don td.product-qty,
.froga-woo table.froga-bang-don td.product-total { text-align: right; white-space: nowrap; }
.froga-woo table.froga-bang-don td.product-total {
font-family: 'Be Vietnam Pro', sans-serif;
font-weight: 700;
font-size: 17px;
color: #1A582C;
}
.froga-woo table.froga-bang-don td.product-total .woocommerce-Price-amount { color: inherit; }
.froga-woo table.froga-bang-don td.product-price { color: var(--mo); }
.froga-woo table.froga-bang-don .product-quantity { font-weight: 700; }
/* Tên món: ảnh trái, chữ phải — giống hàng sản phẩm bên Shopee. */
.froga-woo table.froga-bang-don td.product-name {
display: flex;
align-items: center;
gap: 14px;
border-bottom: 1px solid #F0EADA;
}
.froga-woo table.froga-bang-don td.product-name .froga-anh-don img {
width: 56px;
height: 56px;
object-fit: contain;
background: #F2EDDE;
border: 1px solid var(--kraft);
border-radius: 10px;
display: block;
}
.froga-woo table.froga-bang-don td.product-name .froga-ten-don {
font-weight: 700;
line-height: 1.4;
color: #1E3B27;
}
/* --- 4. Bảng tổng tiền: canh phải, tách khỏi bảng hàng ---------------- */
/* Các hàng TỔNG cho thành flex, đừng trông vào colspan.
Hàng "Phí vận chuyển" do chính WooCommerce sinh (cart/cart-shipping.php)
với đúng hai ô và KHÔNG có colspan, nên trong bảng bốn cột nó chiếm cột 1–2
và trôi hẳn sang trái so với ba dòng tiền kia — nhìn ra một bảng gãy hàng.
Đè colspan bằng CSS thì khỏi phải đè cả khuôn của Woo (khuôn đó dùng chung
với trang giỏ, đè là phải tự giữ hai nhánh is_cart / is_checkout). */
/* 06/09/2026, anh Mừng: "phần này nên canh lề bên phải". Bản trước cho các hàng
tfoot thành flex để né hàng phí giao thiếu colspan — nhưng
flex trong tfoot
chỉ rộng bằng ba cột đầu (đo 627/1074px), cả cụm tổng tiền trôi vào giữa.
Nay trả về hàng bảng thật: mọi hàng đều
đã bỏ: với hàng bảng thật,
::before có content sinh ra một Ô ẨN ở đầu hàng, đẩy cả hàng Tổng cộng lệch một
cột — đo được bảng thành 5 cột. Vệt kẻ nay đặt ở border-top của th/td. */
/* Ô phí giao trong tfoot vốn chứa cả danh sách cách giao — cho nó thở. */
/* Hàng phí giao: ô giá trị là một
danh sách cách giao, nên phải ép canh
phải xuống tận