---
form PHẢI mang class `checkout` (checkout.js của Woo bắt `form.checkout`) nên
nó ăn luôn `padding` của `.checkout` -> cộng dồn với section.checkout thành
padding đôi. Triệt tiêu ở đây, KHÔNG bỏ class khỏi form. */
form.woocommerce-checkout {
padding: 0;
}
/* Chỉ có 1 cổng thanh toán -> design không hiện dòng chọn cổng (2 lựa chọn nhìn
thấy được là 100%/50%). Ẩn thị giác nhưng GIỮ radio hoạt động vì checkout.js
của Woo đọc `input[name="payment_method"]:checked` (xem mt_hide_single_gateway).
Không dùng display:none — Woo/gateway có thể cần đọc giá trị và một số trình
duyệt không gửi field trong phần tử display:none của form. */
.mt-gateway-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* #payment chỉ còn radio ẩn -> không được chiếm chỗ giữa .co-head và .co-deposit. */
.co-method--single-gateway .woocommerce-checkout-payment {
margin: 0;
padding: 0;
}
.co-method--single-gateway .wc_payment_methods {
margin: 0;
padding: 0;
list-style: none;
}
/* --- Tỉ lệ trả trước: dùng lại hình thức .co-pay của design --- */
.co-deposit {
margin: 0;
padding: 0;
border: 0;
}
/* --- Dấu "Áp dụng trả trước 50%" trên từng dòng khóa học (design không có) ---
Chỉ khóa học được cọc; tài liệu / gói hội viên thu đủ 100%. Không đánh dấu thì
giỏ hỗn hợp nhìn không ra vì sao "Thanh toán ngay" khác nửa tổng.
.co-item là block thường (không phải grid) nên thêm một là an toàn;
.co-item { min-height: 109px } ở desktop chỉ là min nên item cao thêm được. */
.co-item__note {
margin-top: 4px;
font-size: .8125rem; /* 13px — cùng cỡ với "(Trả trước 50%)" ở .co-final */
font-weight: 600;
line-height: 1.3;
color: var(--color-accent, #d86227);
}
/* --- Nhãn "Thanh toán ngay (Trả trước 50%)" (design chỉ có "Thành tiền") ---
Cả cụm 401px chỉ chứa nhãn + số tiền 26px bold, một dòng là chật, nên phần
"(Trả trước 50%)" xuống dòng và nhỏ hơn.
`.co-final { align-items: baseline }` của design giữ nguyên: nhãn là grid nên
flex lấy baseline DÒNG ĐẦU -> "Thanh toán ngay" vẫn thẳng hàng với số tiền. */
.co-final__label--deposit {
display: grid;
line-height: 1.2;
}
.co-final__label--deposit em {
font-size: .8125rem;
font-style: normal; /* nhưng KHÔNG in nghiêng, design không có chữ nghiêng */
font-weight: bold;
color: red;
}
/* --- Trạng thái ĐANG TÍNH LẠI khi đổi 100% / 50% (design không có) ---
Đổi tỉ lệ đi qua AJAX update_checkout nên phải cho khách thấy là đã chọn được
và hệ thống đang tính. Woo có blockUI sẵn nhưng nó nhắm
`.woocommerce-checkout-review-order-table` (bảng của Woo, DOM design không có)
và CSS của Woo/Flatsome đã dequeue. */
/* Chặn bấm tiếp trong lúc chờ — KHÔNG dùng `disabled` trên radio vì
update_checkout serialize form sau đó, input disabled sẽ không được gửi. */
.co-method.is-recalc {
pointer-events: none;
cursor: progress;
}
.co-method.is-recalc .co-pay__title,
.co-method.is-recalc .co-pay__desc {
opacity: .55;
transition: opacity .15s linear;
}
/* Lựa chọn vừa bấm vẫn sáng rõ để khách biết mình đang chọn cái nào. */
.co-method.is-recalc .co-pay__radio:checked ~ .co-pay__title {
opacity: 1;
}
/* .co-summary chỉ position:relative từ 1024px; lớp phủ cần mọi khổ. */
.co-summary {
position: relative;
}
.mt-recalc {
position: absolute;
inset: 0;
z-index: 3;
display: grid;
place-items: center;
border-radius: inherit;
background: rgba(255, 255, 255, .72);
backdrop-filter: blur(1px);
}
.mt-recalc__spin {
width: 46px;
height: 46px;
border: 4px solid rgba(0, 61, 168, .18);
border-top-color: var(--color-primary-dark, #003da8);
border-radius: 50%;
animation: mt-recalc-spin .7s linear infinite;
}
@keyframes mt-recalc-spin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.mt-recalc__spin {
animation-duration: 2.4s;
}
}
/* --- Mã giảm giá đã áp dụng (design không có, cần để bỏ mã được) --- */
.co-coupon__applied {
display: grid;
gap: 6px;
margin-top: var(--spacing-sm, 8px);
font-size: .9375rem;
}
.co-coupon__applied li {
display: flex;
gap: 8px;
align-items: center;
justify-content: space-between;
color: var(--color-text-muted, #666);
}
.co-coupon__applied a {
display: grid;
place-items: center;
width: 22px;
height: 22px;
border-radius: var(--radius-pill, 999px);
background: rgba(216, 98, 39, .12);
color: var(--color-accent, #d86227);
text-decoration: none;
line-height: 1;
}
/* --- Thông báo trong popup đăng nhập/đăng ký --- */
.mt-auth__msg {
margin: 0 0 var(--spacing-sm, 8px);
padding: 10px 14px;
border-radius: var(--radius-sm, 8px);
background: rgba(36, 88, 221, .08);
font-size: .9375rem;
color: var(--color-primary-dark, #003da8);
}
.mt-auth__msg--error {
background: rgba(216, 98, 39, .1);
color: var(--color-accent, #d86227);
}
.auth__submit[disabled] {
opacity: .6;
cursor: progress;
}
/* --- Thông báo của WooCommerce (design không có markup) --- */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
margin: 0 auto var(--spacing-lg, 24px);
padding: 14px 18px;
max-width: var(--container-max, 1500px);
border-radius: var(--radius-sm, 8px);
list-style: none;
font-size: 1rem;
}
.woocommerce-error {
background: rgba(216, 98, 39, .1);
color: #a8400f;
}
.woocommerce-message {
background: rgba(36, 88, 221, .08);
color: var(--color-primary-dark, #003da8);
}
.woocommerce-info {
background: var(--color-surface-alt, #f2f2f2);
color: var(--color-text, #333);
}
.woocommerce-error li + li,
.woocommerce-message li + li {
margin-top: 6px;
}
/* ==========================================================================
Dropdown "Nhóm ngành" (bộ lọc khóa học): CUỘN trong panel.
PSD "Rectangle 23" [214,557,666,862] = 452×305 -> design chốt panel cao 305px,
nhưng đó là với ~6 danh mục demo. Thật có 34 danh mục product_cat ⇒ list dài
~1100px: ở desktop panel absolute nên trùm hết vùng kết quả, ở mobile nó đẩy
sập cả bộ lọc. Giữ đúng chiều cao design và cho cuộn.
(Cùng loại bẫy "design hard-code hình học theo lượng nội dung demo".)
========================================================================== */
.course-filter__checks {
max-height: 260px;
overflow-y: auto;
overscroll-behavior: contain; /* cuộn hết list không kéo trôi cả trang */
scrollbar-width: thin;
scrollbar-color: #c9ced8 transparent;
}
@media (min-width: 768px) {
.course-filter__checks {
max-height: 305px; /* đúng PSD */
}
}
.course-filter__checks::-webkit-scrollbar {
width: 8px;
}
.course-filter__checks::-webkit-scrollbar-thumb {
border-radius: 999px;
background: #c9ced8;
}
.course-filter__checks::-webkit-scrollbar-thumb:hover {
background: #9aa3b2;
}
/* ==========================================================================
Cá nhân hóa THAY danh sách tĩnh.
Dải nào mang class .mt-static-shelf (đặt trong option class của element ở
builder) sẽ bị ẩn khi mt_for_you render được nội dung cá nhân hóa — người có
hành vi thấy gợi ý theo hành vi, khách mới vẫn thấy dải tĩnh. Ẩn bằng JS
(mt-ui.js), KHÔNG ẩn sẵn bằng CSS: JS lỗi/mất mạng thì trang vẫn đủ nội dung.
========================================================================== */
.mt-static-shelf--replaced {
display: none;
}
/* Khoảng thở SAU khu cá nhân hóa (chỉ >=1024px).
Tiêu đề "Khóa học sắp khai giảng" là position:absolute top:-122px — NỔI LÊN
TRÊN panel của nó (sections.css:110), và design chừa chỗ bằng
.section-featured { padding-bottom: 167px } của section đứng trước. Khi shelf
cá nhân hóa thay dải featured thì section đứng trước là shelf course-sec
(đáy ngắn) -> title -122px đè vào dots. Chừa lại đúng 167px như design.
(Giữa các shelf với nhau thì .course-sec + .course-sec {margin-top:53px}
của design tự lo — shelf nào cũng mang class course-sec.) */
@media (min-width: 1024px) {
.mt-for-you .mt-foryou-shelf:last-child {
margin-bottom: 167px;
}
/* Tiêu đề shelf nhô 32px TRÊN mép panel (course-list.css top:-38px). Dải cá nhân
hóa thay dải "Khóa học nổi bật" ⇒ đứng ngay dưới hero, không còn khoảng trắng
của section trước ⇒ chữ đè lên đáy hero (khách báo 2026-09-22). Chừa chỗ. */
.mt-for-you .mt-foryou-shelf:first-child {
margin-top: 72px;
}
/* Tiêu đề + dòng phụ ("Vì bạn vừa xem…"): nâng cả khối thêm đúng 1 dòng phụ để
dòng phụ nằm gọn trong notch trắng thay vì thò xuống nền xám, và nới khoảng
cách với dải phía trên tương ứng (53px của design + 1 dòng phụ). */
.mt-foryou-shelf--has-sub .course-sec__title {
top: calc(-38px - (clamp(1rem, calc(1.6 * var(--mt-vw)), 1.375rem) * 1.25 + 4px));
}
.course-sec + .mt-foryou-shelf--has-sub {
margin-top: calc(53px + clamp(1rem, calc(1.6 * var(--mt-vw)), 1.375rem) * 1.25 + 4px);
}
.mt-for-you .mt-foryou-shelf--has-sub:first-child {
margin-top: calc(72px + clamp(1rem, calc(1.6 * var(--mt-vw)), 1.375rem) * 1.25 + 4px);
}
}
/* Dòng phụ của tiêu đề shelf (tên khóa mốc của "Khóa học liên quan").
Nằm TRONG