/* ==========================================================================
   AWE 2026 — trang khoá học và luồng mua (giỏ hàng, thanh toán).
   Nạp sau awe.css, dùng chung tokens ở :root. Theo option 4a/4b/4c của thiết kế,
   chuyển sang hệ thị giác 3a: Be Vietnam Pro, teal #008080, mực #14201f.
   ========================================================================== */

/* ------------------------------------------------------- nút giỏ ở header */
.awe-cartbtn {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: rgba(20, 32, 31, .75);
    text-decoration: none;
    padding: 4px;
}
.awe-cartbtn:hover { color: var(--awe-primary); }
.awe-cartbtn__count {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--awe-red);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}
.awe-cartbtn__count[hidden] { display: none; }

/* ------------------------------------------------------------- nút phụ */
.awe-btn--outline {
    background: transparent;
    border-color: var(--awe-primary);
    color: var(--awe-primary);
}
.awe-btn--outline:hover { background: var(--awe-tint); color: var(--awe-primary-dark); }
.awe-btn.is-busy { opacity: .6; pointer-events: none; }

/* ------------------------------------------------------------- bố cục */
.awe-course__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 392px;
    gap: 56px;
    align-items: start;
}
.awe-course__grid--main { padding-bottom: 64px; }
.awe-course__main { min-width: 0; }

/* Thẻ mua trượt lên đè vào dải hero — cột phải của hero cố ý để trống. */
.awe-course__aside {
    position: sticky;
    top: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: -128px;
}
/* cột phải của hero để trống — thẻ mua ở lưới dưới trượt lên đè vào đây */

/* ------------------------------------------------------------- hero */
.awe-chero {
    background: var(--awe-tint);
    padding: 24px 0 34px;
}
/* .awe-crumb và .awe-prose đã chuyển sang awe.css — nhiều loại trang dùng chung. */

.awe-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 16px; }
.awe-tags .awe-tag {
    margin-left: 0;
    background: transparent;
    border: 1px solid rgba(20, 32, 31, .22);
    color: rgba(20, 32, 31, .8);
    font-size: 11px;
    font-weight: 600;
    padding: 5px 11px;
    letter-spacing: .06em;
}
.awe-tags .awe-tag--hot {
    background: var(--awe-primary);
    border-color: var(--awe-primary);
    color: #fff;
    font-weight: 700;
}

.awe-chero__title {
    font-weight: 800;
    font-size: 42px;
    line-height: 1.08;
    letter-spacing: -.03em;
    color: var(--awe-primary);
    margin: 0;
    max-width: 22ch;
    text-wrap: balance;
}
.awe-chero__lead {
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--awe-muted);
    margin: 18px 0 0;
    max-width: 56ch;
}
.awe-chero__facts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 26px;
    margin-top: 24px;
}
.awe-chero__gvname { display: block; font-size: 14.5px; font-weight: 600; }
.awe-chero__gvrole { display: block; font-size: 12px; color: rgba(20, 32, 31, .55); }
.awe-chero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin: 0;
    padding: 0 0 0 26px;
    list-style: none;
    font-size: 13.5px;
    color: var(--awe-muted);
    border-left: 1px solid var(--awe-line);
}

/* ------------------------------------------------------------- tab neo */
.awe-ctabs {
    display: flex;
    gap: 30px;
    border-bottom: 1px solid var(--awe-line);
    padding-bottom: 14px;
    margin: 26px 0 28px;
    overflow-x: auto;
}
.awe-ctabs a {
    font-size: 15.5px;
    color: var(--awe-muted);
    text-decoration: none;
    white-space: nowrap;
}
.awe-ctabs a:hover { color: var(--awe-primary); }

/* ------------------------------------------------------------- khối nội dung */
.awe-csec { margin-bottom: 38px; scroll-margin-top: 20px; }
.awe-csec__title {
    font-weight: 800;
    font-size: 26px;
    letter-spacing: -.02em;
    color: var(--awe-primary);
    margin: 0 0 14px;
}
.awe-csec__sub { font-size: 14.5px; color: rgba(20, 32, 31, .6); margin: -8px 0 18px; }


/* "Học xong bạn làm được gì": biến <ul> của biên tập viên thành checklist. */
.awe-willlearn ul { list-style: none; padding-left: 0; }
.awe-willlearn li { position: relative; padding-left: 26px; }
.awe-willlearn li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--awe-primary);
    font-weight: 700;
}

/* ------------------------------------------------------------- chương trình học */
.awe-curri {
    border: 1px solid rgba(20, 32, 31, .16);
    border-radius: var(--awe-radius);
    background: var(--awe-surface);
    overflow: hidden;
}
.awe-curri__group + .awe-curri__group { border-top: 1px solid rgba(20, 32, 31, .12); }
.awe-curri__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 20px;
    background: var(--awe-tint);
    cursor: pointer;
    list-style: none;
}
.awe-curri__head::-webkit-details-marker { display: none; }
.awe-curri__head::before {
    content: "+";
    color: var(--awe-primary);
    font-size: 17px;
    line-height: 1;
    width: 14px;
    flex: none;
}
.awe-curri__group[open] > .awe-curri__head::before { content: "−"; }
.awe-curri__name { flex: 1; font-weight: 700; font-size: 17px; }
.awe-curri__meta { font-size: 13px; color: rgba(20, 32, 31, .6); white-space: nowrap; }

.awe-curri__items { margin: 0; padding: 0; list-style: none; }
.awe-curri__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 20px 13px 52px;
    border-top: 1px solid var(--awe-line-soft);
    font-size: 15px;
    color: rgba(20, 32, 31, .85);
}
.awe-curri__label { min-width: 0; }
.awe-curri__badge {
    flex: none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--awe-primary);
    background: var(--awe-tint);
    padding: 3px 8px;
}
/* Ổ khoá vẽ bằng mask thay vì <svg> inline: dòng bị khoá có tới 31 cái trong
   một trang, mỗi bản inline tốn ~270 byte HTML. */
.awe-curri__lock {
    --awe-lock: 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%3Crect x='4' y='10.5' width='16' height='9.5' rx='2'/%3E%3Cpath d='M8 10.5V7a4 4 0 0 1 8 0v3.5'/%3E%3C/svg%3E");
    flex: none;
    width: 14px;
    height: 14px;
    background: rgba(20, 32, 31, .32);
    -webkit-mask: var(--awe-lock) center / 14px 14px no-repeat;
    mask: var(--awe-lock) center / 14px 14px no-repeat;
}
.awe-curri__note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -6px 0 14px;
    font-size: 13.5px;
    color: rgba(20, 32, 31, .6);
}
.awe-curri__empty { margin: 0; padding: 14px 20px 14px 52px; font-size: 14.5px; }

/* ------------------------------------------------------------- callout */
.awe-callout {
    background: var(--awe-tint);
    border-left: 4px solid var(--awe-primary);
    border-radius: var(--awe-radius);
    padding: 20px 22px;
    margin: 0 0 38px;
}
.awe-callout__title { font-weight: 700; font-size: 16.5px; margin: 0 0 6px; }
.awe-callout p { font-size: 14.5px; line-height: 1.6; color: var(--awe-muted); margin: 0; }

.awe-quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.awe-quotes .awe-quote__who {
    display: block;
    margin-top: 14px;
    font-size: 13px;
    color: rgba(20, 32, 31, .55);
}

/* ------------------------------------------------------------- thẻ mua */
.awe-buy {
    background: var(--awe-surface);
    border: 1px solid rgba(20, 32, 31, .16);
    border-radius: var(--awe-radius);
    box-shadow: 0 10px 30px rgba(20, 32, 31, .1);
    overflow: hidden;
}
.awe-buy__media { aspect-ratio: 16 / 9; background: var(--awe-tint); }
.awe-buy__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.awe-buy__body { padding: 20px; }
.awe-buy__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.awe-buy .awe-price--lg { display: inline; font-size: 30px; }
.awe-buy .awe-price--old { font-size: 15px; }
.awe-buy__save {
    display: inline-block;
    background: var(--awe-gold);
    color: var(--awe-ink);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    padding: 4px 9px;
    margin: 10px 0 0;
}
.awe-buy__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.awe-buy__actions .awe-addcart { margin: 0; }
.awe-buy__flow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 2px 0 0;
    font-size: 12.5px;
    color: rgba(20, 32, 31, .55);
}
.awe-buy__owned { margin: 0; font-size: 13px; color: var(--awe-muted); text-align: center; }

/* ---- khoá không bán lẻ ---- */
.awe-buy__only {
    display: inline-block;
    margin: 0;
    background: var(--awe-tint);
    color: var(--awe-primary-deep);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 5px 10px;
}
.awe-buy__onlynote {
    margin: 12px 0 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--awe-muted);
}

.awe-bundles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.awe-bundles__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(20, 32, 31, .16);
    border-radius: 3px;
    text-decoration: none;
    color: inherit;
}
.awe-bundles__item:hover { border-color: var(--awe-primary); background: var(--awe-tint); }
.awe-bundles__name { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.awe-bundles__price {
    font-weight: 700;
    color: var(--awe-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.awe-buy__specs {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin: 20px 0 0;
    padding-top: 18px;
    border-top: 1px solid rgba(20, 32, 31, .12);
    font-size: 14.5px;
}
.awe-buy__specs > div { display: flex; justify-content: space-between; gap: 14px; }
.awe-buy__specs dt { color: rgba(20, 32, 31, .6); }
.awe-buy__specs dd { margin: 0; font-weight: 600; text-align: right; }

.awe-buy__call {
    display: block;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(20, 32, 31, .12);
    text-decoration: none;
    color: inherit;
}
.awe-buy__calllabel { display: block; font-size: 12px; color: rgba(20, 32, 31, .55); }
.awe-buy__callnum {
    display: block;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--awe-primary);
    font-variant-numeric: tabular-nums;
}

.awe-trycard { background: var(--awe-tint); border-radius: var(--awe-radius); padding: 16px 18px; }
.awe-trycard__title { font-size: 13.5px; font-weight: 700; margin: 0 0 6px; }
.awe-trycard p { font-size: 13.5px; line-height: 1.6; color: var(--awe-muted); margin: 0 0 12px; }

/* Nút ghi danh khoá miễn phí do LearnPress in ra — kéo về hình của awe.
   Cần ba class: learnpress.min.css nạp SAU awe-shop.css và có
   `.learnpress-page .lp-button` (cùng trọng số 0,2,0) nên sẽ thắng nếu hoà. */
.awe-buy__actions .enroll-course { margin: 0; }
.awe-buy .awe-buy__actions button.lp-button {
    display: block;
    width: 100%;
    background: var(--awe-primary);
    color: #fff;
    border: 0;
    border-radius: 3px;
    font: 600 16px/1.2 inherit;
    padding: 16px 0;
    cursor: pointer;
    text-transform: none;
}
.awe-buy .awe-buy__actions button.lp-button:hover { background: var(--awe-primary-dark); }

/* ------------------------------------------------------------- thanh mua mobile */
.awe-buybar { display: none; }

/* ------------------------------------------------------------- ngăn kéo giỏ */
.awe-noscroll { overflow: hidden; }

.awe-drawer { position: fixed; inset: 0; z-index: 120; }
.awe-drawer[hidden] { display: none; }
.awe-drawer__scrim {
    position: absolute;
    inset: 0;
    background: rgba(20, 32, 31, .45);
    opacity: 0;
    transition: opacity .2s ease;
}
.awe-drawer.is-open .awe-drawer__scrim { opacity: 1; }
.awe-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 100%);
    background: var(--awe-surface);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .22s ease;
    box-shadow: -8px 0 30px rgba(20, 32, 31, .18);
}
.awe-drawer.is-open .awe-drawer__panel { transform: none; }

@media (prefers-reduced-motion: reduce) {
    .awe-drawer__scrim,
    .awe-drawer__panel { transition: none; }
}

.awe-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(20, 32, 31, .12);
}
.awe-drawer__title { font-weight: 800; font-size: 19px; color: var(--awe-primary); margin: 0; }
.awe-drawer__close {
    background: none;
    border: 0;
    font-size: 24px;
    line-height: 1;
    color: rgba(20, 32, 31, .45);
    cursor: pointer;
    padding: 0 4px;
}
.awe-drawer__close:hover { color: var(--awe-ink); }
.awe-drawer__note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 11px 20px;
    background: var(--awe-tint);
    color: #005f5f;
    font-size: 13px;
}
.awe-drawer__note span { color: var(--awe-primary); font-weight: 700; }
.awe-drawer__empty { padding: 28px 20px; text-align: center; }
.awe-drawer__empty p { color: var(--awe-muted); }

.awe-cartlist { margin: 0; padding: 0; list-style: none; }
.awe-cartlist__row {
    display: flex;
    gap: 13px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(20, 32, 31, .1);
}
.awe-cartlist__media { width: 92px; height: 66px; flex: none; display: block; }
.awe-cartlist__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.awe-cartlist__body { flex: 1; min-width: 0; }
.awe-cartlist__title {
    display: block;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.3;
    color: inherit;
    text-decoration: none;
}
.awe-cartlist__title:hover { color: var(--awe-primary); }
.awe-cartlist__price { display: flex; align-items: baseline; gap: 8px; margin-top: 7px; }
.awe-cartlist__price .awe-price { font-size: 16px; }
.awe-cartlist__price .awe-price--old { font-size: 12px; }
.awe-cartlist__remove {
    align-self: flex-start;
    font-size: 12.5px;
    color: rgba(20, 32, 31, .5);
    text-decoration: none;
    flex: none;
}
.awe-cartlist__remove:hover { color: var(--awe-red); }

.awe-drawer__foot { padding: 18px 20px; display: flex; flex-direction: column; gap: 11px; }
.awe-drawer__more { text-align: center; font-size: 13.5px; color: var(--awe-muted); text-decoration: none; }
.awe-drawer__more:hover { color: var(--awe-primary); }

.awe-coupon { display: flex; gap: 9px; }
.awe-coupon input {
    flex: 1;
    min-width: 0;
    border: 1px solid rgba(20, 32, 31, .22);
    border-radius: 3px;
    padding: 12px 13px;
    font: inherit;
    font-size: 13.5px;
    background: var(--awe-surface);
    color: inherit;
}
.awe-coupon button { flex: none; cursor: pointer; }

.awe-sumline { display: flex; justify-content: space-between; gap: 14px; font-size: 14px; color: var(--awe-muted); }
.awe-sumline--save span:last-child { color: var(--awe-primary); }
.awe-sumline--total {
    align-items: baseline;
    padding-top: 12px;
    border-top: 1px solid var(--awe-line);
    color: var(--awe-ink);
}
.awe-sumline--total > span:first-child { font-size: 15px; font-weight: 700; }
.awe-sumline--total .awe-price--lg { display: inline; font-size: 22px; font-weight: 800; }

.awe-drawer__pay { background: var(--awe-bg); border-top: 1px solid rgba(20, 32, 31, .1); padding: 16px 20px 20px; }
.awe-drawer__payhead,
.awe-totals__payhead {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(20, 32, 31, .5);
    margin: 0 0 10px;
}
.awe-totals .awe-paylist { grid-template-columns: 1fr; }
.awe-paylist {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.awe-paylist li {
    border: 1px solid rgba(20, 32, 31, .18);
    border-radius: 3px;
    padding: 11px 12px;
    font-size: 13.5px;
    color: var(--awe-muted);
}
.awe-drawer__paynote { font-size: 12.5px; line-height: 1.6; color: var(--awe-muted); margin: 12px 0 0; }

/* ------------------------------------------------------------- giỏ / thanh toán */
.awe-shop { padding: 26px 0 64px; }
.awe-shop__title {
    font-weight: 800;
    font-size: 34px;
    letter-spacing: -.025em;
    color: var(--awe-primary);
    margin: 0 0 24px;
}

/* Giỏ hàng: danh sách bên trái, tóm tắt bên phải. Lưới đặt trên .woocommerce
   vì bảng tổng của WooCommerce nằm ngoài <form>. */
body.woocommerce-cart .awe-shop .woocommerce {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 392px;
    gap: 40px;
    align-items: start;
}
body.woocommerce-cart .awe-shop .woocommerce > .woocommerce-notices-wrapper,
body.woocommerce-cart .awe-shop .woocommerce > .awe-cartempty { grid-column: 1 / -1; }

/* WooCommerce cho .cart_totals float:right; width:48% — trong cột 392px thì
   nó teo còn 188px và mọi nhãn xuống dòng. */
.awe-shop .cart-collaterals,
.awe-shop .cart-collaterals .cart_totals { width: 100%; float: none; }

.awe-shop .woocommerce-message,
.awe-shop .woocommerce-info,
.awe-shop .woocommerce-error {
    list-style: none;
    background: var(--awe-tint);
    border-left: 4px solid var(--awe-primary);
    border-radius: var(--awe-radius);
    padding: 14px 18px;
    margin: 0 0 20px;
    font-size: 14.5px;
}
.awe-shop .woocommerce-error { background: #fdeceb; border-left-color: var(--awe-red); }

.awe-cartpage__list { margin: 0; padding: 0; list-style: none; border: 1px solid rgba(20, 32, 31, .16); border-radius: var(--awe-radius); background: var(--awe-surface); }
.awe-cartrow { display: flex; gap: 16px; padding: 18px 20px; }
.awe-cartrow + .awe-cartrow { border-top: 1px solid var(--awe-line-soft); }
.awe-cartrow__media { width: 128px; flex: none; }
.awe-cartrow__media img { width: 100%; height: auto; display: block; border-radius: 3px; }
.awe-cartrow__body { flex: 1; min-width: 0; }
.awe-cartrow__title { font-size: 17px; font-weight: 600; line-height: 1.3; margin: 0; }
.awe-cartrow__title a { color: inherit; text-decoration: none; }
.awe-cartrow__title a:hover { color: var(--awe-primary); }
.awe-cartrow__price { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; }
.awe-cartrow__remove { font-size: 13px; color: rgba(20, 32, 31, .5); text-decoration: none; }
.awe-cartrow__remove:hover { color: var(--awe-red); }

.awe-cartpage__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 20px;
}
.awe-cartpage__actions .awe-coupon { max-width: 360px; flex: 1 1 260px; }
.awe-cartpage__back { font-size: 14px; color: var(--awe-muted); text-decoration: none; }
.awe-cartpage__back:hover { color: var(--awe-primary); }

.awe-totals {
    background: var(--awe-surface);
    border: 1px solid rgba(20, 32, 31, .16);
    border-radius: var(--awe-radius);
    box-shadow: 0 10px 30px rgba(20, 32, 31, .08);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.awe-totals__title { font-size: 17px; font-weight: 700; margin: 0; }
.awe-totals .wc-proceed-to-checkout { margin-top: 6px; }
.awe-totals__pay { border-top: 1px solid rgba(20, 32, 31, .12); padding-top: 16px; }

.awe-cartempty { text-align: center; padding: 40px 0 20px; }
.awe-cartempty__lead { font-size: 20px; font-weight: 700; margin: 0 0 6px; }
.awe-cartempty__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

/* thanh toán ------------------------------------------------------------- */
/* Header rút gọn (header-checkout.php): không menu, không nút giỏ. */
.awe-header--slim .awe-header__inner { justify-content: space-between; gap: 24px; }
.awe-header__trust { display: flex; align-items: center; gap: 24px; }
.awe-trust { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--awe-muted); }
.awe-trust svg { color: var(--awe-primary); flex: none; }
.awe-trust a { color: var(--awe-ink); font-weight: 700; text-decoration: none; }
.awe-trust a:hover { color: var(--awe-primary); }

/* Ba bước, thay cho đường dẫn: cho biết còn bao xa mới xong. */
.awe-steps { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; list-style: none; margin: 0 0 22px; padding: 0; }
.awe-steps__step { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--awe-muted-2); }
.awe-steps__step + .awe-steps__step::before { content: ""; width: 84px; height: 1px; background: var(--awe-line); margin-right: 3px; }
.awe-steps__mark {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(20, 32, 31, .22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    flex: none;
}
.awe-steps__step--done { color: var(--awe-muted); }
.awe-steps__step--done .awe-steps__mark { background: var(--awe-primary); border-color: var(--awe-primary); color: #fff; }
.awe-steps__step--done a { color: inherit; text-decoration: none; }
.awe-steps__step--done a:hover { color: var(--awe-primary); }
.awe-steps__step--now { color: var(--awe-ink); font-weight: 700; }
.awe-steps__step--now .awe-steps__mark { border: 2px solid var(--awe-primary); color: var(--awe-primary); font-weight: 700; }

.awe-shop--checkout .awe-shop__title { margin-bottom: 6px; }
.awe-shop__lead { margin: 0 0 24px; font-size: 15.5px; color: var(--awe-muted); max-width: 62ch; }

/* Hai cột: form bên trái, đơn hàng dính bên phải. */
.awe-checkout__grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 40px; align-items: start; }
.awe-checkout__main {
    min-width: 0;
    background: var(--awe-surface);
    border: 1px solid rgba(20, 32, 31, .16);
    border-radius: var(--awe-radius);
    padding: 24px;
}
.awe-checkout__aside { min-width: 0; position: sticky; top: 20px; }
.awe-checkout__head { font-size: 19px; font-weight: 700; margin: 0; }
.awe-checkout__payment { border-top: 1px solid var(--awe-line-soft); margin-top: 24px; padding-top: 22px; }
.awe-checkout__payment .awe-checkout__head { margin-bottom: 14px; }

/* Form rỗng nhận ô mã ưu đãi (awe_checkout_coupon_shell) — không chiếm chỗ. */
.awe-coupon-form { display: none; }

/* Ba ô thông tin */
.awe-fields__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.awe-fields__login { margin: 0; font-size: 13.5px; color: var(--awe-muted); }
.awe-fields__login a { font-weight: 600; }
.awe-fields__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.awe-fields__grid .awe-field--wide { grid-column: 1 / -1; }
.awe-fields__grid .form-row { margin: 0; }
.awe-fields:last-child .awe-fields__grid:empty { display: none; }

.awe-shop .form-row { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.awe-shop .form-row label { font-size: 13.5px; font-weight: 600; }
.awe-shop .form-row .required { color: var(--awe-red); text-decoration: none; }
.awe-shop .form-row .description { font-size: 12.5px; line-height: 1.5; color: var(--awe-muted-2); }
.awe-shop .input-text,
.awe-shop select,
.awe-shop textarea {
    width: 100%;
    border: 1px solid rgba(20, 32, 31, .22);
    border-radius: 3px;
    padding: 12px 13px;
    font: inherit;
    font-size: 15px;
    background: var(--awe-surface);
    color: inherit;
}
/* Bản Eduma không vẽ vòng focus nào — bàn phím không biết mình đang ở ô nào. */
.awe-shop .input-text:focus,
.awe-shop select:focus,
.awe-shop textarea:focus {
    outline: 2px solid var(--awe-primary);
    outline-offset: 1px;
    border-color: var(--awe-primary);
}
.awe-shop .woocommerce-invalid .input-text { border-color: var(--awe-red); }
.awe-shop textarea { min-height: 96px; }

/* Cổng thanh toán: radio và nhãn cùng hàng, hộp mô tả xuống dòng riêng.
   WooCommerce đặt <input> và <label> là hai anh em trong <li>, nên chính <li>
   phải làm flex chứ không nhét được vào nhãn. */
.awe-shop .awe-paymethods { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; border: 0; }
/* Nút radio định vị tuyệt đối, không làm con của flex. Eduma và WooCommerce đều
   nhét margin vào <input> trong ul.payment_methods; kể cả khi ép margin:0 nó vẫn
   chiếm thêm vài px, và mỗi px lệch lại đẩy hộp mô tả lệch khỏi nhãn. Khoá chỗ
   của nó thì nhãn và hộp bên dưới bắt đầu đúng cùng một cột. */
.awe-shop .awe-paymethods li { position: relative; display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding-left: 28px; }
.awe-shop .awe-paymethods li > input[type="radio"] {
    position: absolute;
    left: 0;
    top: 19px;
    margin: 0 !important;
    width: 18px;
    height: 18px;
    accent-color: var(--awe-primary);
}
.awe-shop .awe-paymethods li > label {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    min-height: 48px;
    border: 1px solid rgba(20, 32, 31, .18);
    border-radius: 3px;
    padding: 12px 14px;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
}
.awe-shop .awe-paymethods li > input:checked + label { border-color: var(--awe-primary); box-shadow: inset 0 0 0 1px var(--awe-primary); }
.awe-shop .awe-paymethods li > input:focus-visible + label { outline: 2px solid var(--awe-primary); outline-offset: 2px; }
.awe-paymethod__name { display: flex; align-items: center; gap: 10px; }
.awe-paymethod__name svg { color: var(--awe-primary); flex: none; }
/* Một cổng duy nhất: giấu nút radio (nó vẫn nằm trong DOM cho WooCommerce đọc)
   và cho nhãn trải hết chiều ngang như một khối thông tin, không phải lựa chọn. */
.awe-shop .awe-paymethods--single li { padding-left: 0; }
.awe-shop .awe-paymethods--single li > input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.awe-shop .awe-paymethods--single li > label { cursor: default; }

.awe-paymethod__badge {
    flex: none;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--awe-primary);
    background: var(--awe-tint);
    border-radius: 2px;
    padding: 4px 8px;
}

/* Hộp mô tả của cổng. Phải qua mặt WooCommerce, nó đặt nền tím #dcd7e2 bằng
   .woocommerce-checkout #payment div.payment_box (trọng số 1,2,1) — nên selector
   dưới đây bám thêm class của chính #payment cho chắc thắng. */
.awe-shop #payment.awe-payment div.payment_box {
    flex: 1 0 100%;
    margin: 8px 0 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--awe-muted);
    background: var(--awe-tint);
    border: 0;
    border-radius: 3px;
    padding: 12px 14px;
}
.awe-shop #payment.awe-payment div.payment_box::before { display: none; }
.awe-shop #payment.awe-payment div.payment_box { overflow: hidden; }
.awe-shop #payment div.payment_box p { margin: 0 0 8px; }
.awe-shop #payment div.payment_box p:last-child { margin-bottom: 0; }
.awe-shop #payment .awe-paymethod__logo img { height: 18px; width: auto; display: block; margin-bottom: 8px; }

/* Plugin VietQR đổ nguyên lưới 40 logo ngân hàng vào mô tả, cao gần 200px và
   đẩy nút trả tiền xuống dưới màn hình. Thu về hai hàng: vẫn thấy "nhiều ngân
   hàng" mà không nuốt mất phần còn lại của trang. Plugin đóng đinh vài giá trị
   bằng !important (vietqr/assets/css/custom.css) nên phải đáp lại bằng !important. */
.awe-shop #payment .vietqr-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
    max-height: 56px;
    overflow: hidden;
}
.awe-shop #payment .list-bank { flex: none; width: auto; max-width: 74px !important; margin: 0; padding: 0; }
.awe-shop #payment .list-bank-box {
    background: #fff !important;
    border: 1px solid var(--awe-line-soft);
    border-radius: 3px;
    padding: 3px 5px;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    box-sizing: border-box;
}
.awe-shop #payment .list-bank-box img { max-height: 14px; max-width: 100%; width: auto; display: block; }

/* Alepay hỏi thêm loại thẻ trong hộp mô tả. Đó là field thật — cổng đọc
   $_POST['payment_alepay'] làm checkoutType — nên chỉ tạo hình lại, không giấu. */
.awe-shop #payment div.payment_box .form-row { flex-direction: row; align-items: center; gap: 8px; margin: 0 0 6px; }
.awe-shop #payment div.payment_box label { font-size: 13.5px; font-weight: 500; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.awe-shop #payment div.payment_box input[type="radio"],
.awe-shop #payment div.payment_box input[type="checkbox"] { accent-color: var(--awe-primary); margin: 0; }

/* Nút đặt hàng */
.awe-place { margin-top: 20px; }
.awe-place__noscript { font-size: 13px; line-height: 1.6; color: var(--awe-muted); margin: 0 0 10px; }
.awe-shop #place_order {
    width: 100%;
    background: var(--awe-primary);
    color: #fff;
    border: 0;
    border-radius: 3px;
    font: 700 16.5px/1.2 inherit;
    padding: 17px 0;
    cursor: pointer;
}
.awe-shop #place_order:hover { background: var(--awe-primary-dark); }
.awe-shop #place_order:focus-visible { outline: 2px solid var(--awe-ink); outline-offset: 2px; }
.awe-shop .woocommerce-terms-and-conditions-wrapper { margin-bottom: 16px; }
.awe-shop .woocommerce-privacy-policy-text p { font-size: 12.5px; line-height: 1.6; color: var(--awe-muted-2); margin: 0 0 12px; }
.awe-shop .validate-required.terms { flex-direction: row; align-items: flex-start; gap: 9px; margin: 0; }
.awe-shop .woocommerce-terms-and-conditions-checkbox-text { font-size: 13.5px; font-weight: 500; line-height: 1.5; }
.awe-shop .form-row.terms label { display: flex; align-items: flex-start; gap: 9px; font-weight: 500; cursor: pointer; }
.awe-shop .form-row.terms input[type="checkbox"] { accent-color: var(--awe-primary); width: 17px; height: 17px; margin: 2px 0 0; flex: none; }

/* Thẻ đơn hàng bên phải */
.awe-review {
    background: var(--awe-surface);
    border: 1px solid rgba(20, 32, 31, .16);
    border-radius: var(--awe-radius);
    box-shadow: 0 10px 30px rgba(20, 32, 31, .08);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.awe-review__title { font-size: 17px; font-weight: 700; margin: 0; }
.awe-review__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.awe-review__item { display: flex; gap: 13px; }
.awe-review__media { flex: none; }
.awe-review__img { width: 84px; height: 84px; object-fit: cover; border-radius: 3px; display: block; }
.awe-review__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.awe-review__name { font-size: 15px; font-weight: 600; line-height: 1.35; }
.awe-review__name a { color: inherit; text-decoration: none; }
.awe-review__name a:hover { color: var(--awe-primary); }
.awe-review__name .product-quantity { font-weight: 700; color: var(--awe-muted); }
.awe-review__meta { font-size: 12.5px; color: var(--awe-muted-2); }
.awe-review__price { font-size: 19px; }
.awe-review__lines { display: flex; flex-direction: column; gap: 10px; }
.awe-review__promise {
    list-style: none;
    margin: 0;
    padding: 16px 0 0;
    border-top: 1px solid rgba(20, 32, 31, .12);
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--awe-muted);
}
.awe-review__promise li { display: flex; align-items: flex-start; gap: 9px; }
.awe-review__promise svg { color: var(--awe-primary); flex: none; margin-top: 2px; }
.awe-review__promise a { color: var(--awe-ink); font-weight: 700; text-decoration: none; }
.awe-review__promise a:hover { color: var(--awe-primary); }

/* Nút hotline nổi (footer-awe.php) rộng 191px và đứng đúng chồng lên hàng nút
   chọn cổng thanh toán. Không ẩn nó — đang trả tiền là lúc người ta hay gọi
   nhất — mà thu về nút tròn chỉ còn icon, đủ hẹp để không che gì. */
body.woocommerce-checkout .awe-float__text { display: none; }
body.woocommerce-checkout .awe-float__call,
body.woocommerce-checkout .awe-float__zalo { padding: 0; border-radius: 50%; }


/* trang cảm ơn ----------------------------------------------------------- */
.awe-ty__grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 40px; align-items: start; }
.awe-ty__main { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.awe-ty__aside { min-width: 0; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 20px; }

.awe-ty__banner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--awe-tint);
    border-radius: var(--awe-radius);
    padding: 20px 22px;
}
.awe-ty__banner--failed { background: #fdeceb; }
.awe-ty__check {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--awe-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.awe-ty__title { font-size: 21px; font-weight: 800; letter-spacing: -.015em; margin: 0 0 4px; }
.awe-shop .awe-ty__banner p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--awe-muted); }
.awe-ty__banner .awe-btn { margin-top: 12px; margin-right: 8px; }

/* Bốn con số của đơn: mã, ngày, tổng, cách trả tiền.
   WooCommerce tạo hình ul.order_details bằng float + clearfix ::before/::after,
   và trong một grid container thì hai giả phần tử đó thành hai ô rỗng — chính là
   khoảng trắng lạ ở đầu hàng. Phải tắt chúng, và tắt cả kiểu chữ hoa của nó.

   Selector phải kèm `ul`: bản của WooCommerce là `.woocommerce ul.order_details li`
   (0,2,2), bỏ `ul` đi thì chỉ được 0,2,1 và thua. */
.awe-shop ul.awe-ty__facts::before,
.awe-shop ul.awe-ty__facts::after { content: none; display: none; }
.awe-shop ul.awe-ty__facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* Ô cuối rộng hơn: tên cổng ("Chuyển khoản ngân hàng (Quét mã QR)") dài gấp
       ba lần ba ô kia, chia đều thì nó xuống bốn dòng và kéo cao cả hàng. */
    grid-template-columns: repeat(3, minmax(0, 1fr)) 1.6fr;
    gap: 1px;
    background: rgba(20, 32, 31, .12);
    border: 1px solid rgba(20, 32, 31, .12);
    border-radius: var(--awe-radius);
    overflow: hidden;
}
.awe-shop ul.awe-ty__facts li {
    margin: 0;
    padding: 14px 16px;
    background: var(--awe-surface);
    display: flex;
    flex-direction: column;
    gap: 3px;
    border: 0;
    float: none;
    width: auto;
    font-size: 16px;
    line-height: 1.5;
    text-transform: none;
}
.awe-ty__facts li > span { font-size: 12.5px; color: var(--awe-muted-2); }
.awe-ty__facts li strong { font-size: 15px; font-weight: 700; line-height: 1.35; text-wrap: pretty; }
.awe-ty__facts .woocommerce-order-overview__total strong { color: var(--awe-primary); font-size: 17px; font-variant-numeric: tabular-nums; }
.awe-ty__facts .woocommerce-order-overview__payment-method strong { font-size: 14px; }

/* Khối do cổng thanh toán sinh ra: mã QR của VietQR, hướng dẫn của Alepay.
   Không dựng lại markup của plugin — chỉ đặt nó vào một tấm thẻ và chỉnh cỡ. */
.awe-ty__gateway {
    background: var(--awe-surface);
    border: 1px solid rgba(20, 32, 31, .16);
    border-radius: var(--awe-radius);
    padding: 22px;
}
.awe-ty__gateway > :first-child { margin-top: 0; }
.awe-ty__gateway > :last-child { margin-bottom: 0; }
.awe-shop .wc-vietqr-bank-details-heading { font-size: 18px; font-weight: 700; margin: 0 0 14px; text-align: center; }
.awe-shop #qrcode img { width: 232px; height: auto; max-width: 100%; margin: 0 auto; display: block; }
.awe-shop .woocommerce-vietqr-qr-scan { margin-bottom: 22px; }
/* Nút "Lưu ảnh QR" của plugin là một thanh dính đáy màn hình, và plugin chỉ bật
   nó khi wp_is_mobile() — đúng chỗ của nó, vì trên điện thoại người ta lưu ảnh
   rồi mở app ngân hàng. Giữ nguyên cách bố trí đó, chỉ đổi màu xanh #0274be của
   plugin về mực của hệ này. Selector kèm .awe-shop để hơn <style> inline mà
   plugin in ra ngay trong trang (chỉ có #id, 1,0,0). */
#btnDownloadQR > div { width: auto !important; justify-content: center !important; }
.awe-shop #downloadQR { text-decoration: none; }
.awe-shop #btnDownloadQR {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--awe-ink);
    border-color: var(--awe-ink);
    color: #fff;
    border-width: 0;
    padding: 13px 18px;
    font: inherit;
    font-size: 13.5px;
    cursor: pointer;
}
.awe-shop #btnDownloadQR svg { flex: none; }

/* Bảng số tài khoản của plugin: bỏ mọi thứ trừ hai cột nhãn/giá trị. */
.awe-shop .wc-vietqr-bank-details,
.awe-shop .woocommerce-vietqr-bank-details table {
    width: 100%;
    max-width: none !important;
    border-collapse: collapse;
    font-size: 14.5px;
    margin: 0;
}
.awe-shop .woocommerce-vietqr-bank-details td {
    padding: 9px 0;
    border-bottom: 1px solid var(--awe-line-soft);
    text-align: left !important;
    vertical-align: top;
}
.awe-shop .woocommerce-vietqr-bank-details td:first-child { width: 42%; color: var(--awe-muted); }
.awe-shop .woocommerce-vietqr-bank-details td strong { color: var(--awe-ink) !important; font-weight: 600; }
.awe-shop .woocommerce-vietqr-bank-details tr:last-child td { border-bottom: 0; }
/* Plugin in dòng "chuyển đúng nội dung …" bằng <h4 style="color: red"> */
.awe-shop .woocommerce-vietqr-bank-details h4 {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--awe-ink) !important;
    background: #fff8e6;
    border-radius: 3px;
    padding: 11px 13px;
    margin: 0 0 14px;
}
.awe-shop .woocommerce-vietqr-bank-details h4 b { color: var(--awe-red); }

/* Ba việc còn lại, đánh số. */
.awe-ty__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; counter-reset: none; }
.awe-ty__steps li { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; line-height: 1.6; color: var(--awe-muted); }
.awe-ty__steps strong { color: var(--awe-ink); font-weight: 700; }
.awe-ty__num {
    flex: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--awe-tint);
    color: var(--awe-primary);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.awe-ty__actions { display: flex; flex-direction: column; gap: 9px; }
.awe-ty__help { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--awe-muted); text-align: center; }
.awe-ty__help a { font-weight: 600; }

.awe-ty__customer {
    background: var(--awe-surface);
    border: 1px solid rgba(20, 32, 31, .16);
    border-radius: var(--awe-radius);
    padding: 20px;
}
.awe-ty__subtitle { font-size: 15px; font-weight: 700; margin: 0 0 12px; }
.awe-shop .awe-ty__customerlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.awe-shop .awe-ty__customerlist li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; font-size: 14px; margin: 0; }
/* WooCommerce gắn icon từ font riêng vào hai dòng này; font đó không được nạp ở
   đây nên chỉ còn ô vuông rỗng. */
.awe-shop .awe-ty__customerlist li::before,
.awe-shop .awe-ty__customerlist li::after { content: none; display: none; }
.awe-shop .awe-ty__customerlist li { padding: 0; }
.awe-ty__customerlist span { color: var(--awe-muted); flex: none; }
.awe-ty__customerlist strong { font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }

.awe-review__note { font-size: 13.5px; color: var(--awe-muted); }

/* Màn hình xác minh email khi mở lại đơn cũ. */
.awe-verify {
    max-width: 520px;
    background: var(--awe-surface);
    border: 1px solid rgba(20, 32, 31, .16);
    border-radius: var(--awe-radius);
    padding: 26px;
}
.awe-verify__title { font-size: 20px; font-weight: 700; margin: 0 0 8px; }
.awe-verify__lead { margin: 0 0 20px; font-size: 15px; line-height: 1.6; color: var(--awe-muted); }
.awe-shop .awe-verify__form { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.awe-shop .awe-verify__field { width: 100%; margin: 0; }
.awe-verify__help { margin: 20px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--awe-muted-2); }

/* ------------------------------------------------------------- responsive */
@media (max-width: 1080px) {
    .awe-course__grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 36px; }
    .awe-shop .woocommerce { grid-template-columns: minmax(0, 1fr) 340px; }
    .awe-checkout__grid { grid-template-columns: minmax(0, 1fr) 356px; gap: 28px; }
    .awe-ty__grid { grid-template-columns: minmax(0, 1fr) 356px; gap: 28px; }
}

@media (max-width: 900px) {
    .awe-course__grid { grid-template-columns: 1fr; gap: 0; }
    .awe-course__aside { display: none; }

    /* Một cột, và đơn hàng lên trước form: thấy mình đang mua gì rồi mới nhập. */
    .awe-checkout__grid { grid-template-columns: 1fr; gap: 16px; }
    .awe-checkout__aside { position: static; order: -1; }

    /* Trang cảm ơn giữ thứ tự tự nhiên: việc còn phải làm (quét QR) trước,
       biên lai sau. */
    .awe-ty__grid { grid-template-columns: 1fr; gap: 20px; }
    .awe-ty__aside { position: static; }
    .awe-shop ul.awe-ty__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .awe-ty__facts li strong { font-size: 14px; }
    .awe-ty__facts .woocommerce-order-overview__payment-method strong { font-size: 13px; }
    .awe-checkout__main { padding: 18px; }
    .awe-fields__grid { grid-template-columns: 1fr; }
    .awe-header__trust .awe-trust:first-child { display: none; }
    .awe-review { box-shadow: none; }
    .awe-review__img { width: 64px; height: 64px; }

    /* 16px là ngưỡng dưới đó Safari trên iOS tự phóng to trang khi bấm vào ô. */
    .awe-shop .input-text,
    .awe-shop select,
    .awe-shop textarea { font-size: 16px; padding: 13px; }

    .awe-chero { padding: 18px 0 24px; }
    .awe-chero__title { font-size: 29px; max-width: none; }
    .awe-chero__lead { font-size: 14px; }
    .awe-chero__stats { padding-left: 0; border-left: 0; gap: 14px; }

    .awe-csec__title { font-size: 21px; }
    .awe-curri__item { padding-left: 38px; }
    .awe-quotes { grid-template-columns: 1fr; }
    .awe-course__grid--main { padding-bottom: 96px; }

    /* Giá và nút mua dính đáy — option 4b. */
    .awe-buybar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 90;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 11px 16px 12px;
        background: rgba(255, 255, 255, .98);
        border-top: 1px solid var(--awe-line);
    }
    .awe-buybar__price { flex: 1; min-width: 0; }
    .awe-buybar__price .awe-price { display: block; font-size: 19px; line-height: 1.15; }
    .awe-buybar__price .awe-price--old { font-size: 11px; }
    .awe-buybar .awe-addcart { margin: 0; flex: none; }
    .awe-buybar__cart {
        width: 48px;
        height: 48px;
        border: 1.5px solid var(--awe-primary);
        border-radius: 3px;
        background: transparent;
        color: var(--awe-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    .awe-buybar .awe-btn { flex: none; white-space: nowrap; padding: 14px 18px; font-size: 15px; }

    /* Cụm nút gọi/Zalo nổi ở chân trang nhích lên để không đè thanh mua.
       (Widget của plugin ot-zalo không còn ở đây — awe_drop_zalo_widget() gỡ nó
       khỏi mọi trang dùng footer-awe.php.) */
    .awe-has-buybar .awe-float { bottom: 92px; }

    .awe-shop .woocommerce { grid-template-columns: 1fr; gap: 24px; }
    .awe-shop__title { font-size: 26px; }
    .awe-cartrow { flex-wrap: wrap; }
    .awe-cartrow__media { width: 96px; }
}

@media (max-width: 520px) {
    .awe-paylist { grid-template-columns: 1fr; }
    .awe-cartpage__actions { flex-direction: column; align-items: stretch; }
    .awe-cartpage__actions .awe-coupon { max-width: none; }

    /* Ba bước không đủ chỗ trên một dòng; bỏ đường nối để chúng xuống dòng
       gọn gàng thay vì để lại một gạch ngang lơ lửng đầu dòng hai. */
    .awe-steps { gap: 6px 14px; }
    .awe-steps__step { font-size: 13px; }
    .awe-steps__step + .awe-steps__step::before { display: none; }
    .awe-steps__mark { width: 23px; height: 23px; font-size: 12px; }
    .awe-shop--checkout .awe-shop__title { font-size: 27px; }
    .awe-shop__lead { font-size: 14.5px; }
    .awe-paymethod__badge { display: none; }
    .awe-ty__banner { flex-direction: column; gap: 10px; padding: 16px; }
    .awe-ty__gateway { padding: 16px; }
    /* Chừa chỗ cho thanh "Lưu ảnh QR" dính đáy của plugin. */
    body.woocommerce-order-received .awe-shop { padding-bottom: 86px; }
}


/* ---------------------------------------------- ghi đè CSS của WooCommerce */
/* Bảng màu mặc định của WooCommerce (nút tím #a46497, link xoá đỏ to) chen vào
   mọi trang shop. Các selector dưới đây đủ trọng số để thắng, nhưng vẫn khoanh
   trong .awe-shop nên không ảnh hưởng trang nào khác. */
.awe-shop .woocommerce a.button,
.awe-shop .woocommerce button.button,
.awe-shop .woocommerce input.button,
.awe-shop .woocommerce a.button.alt,
.awe-shop .woocommerce button.button.alt,
.awe-shop .woocommerce input.button.alt {
    background-color: var(--awe-primary);
    color: #fff;
    border-radius: 3px;
    font-weight: 600;
    text-shadow: none;
}
.awe-shop .woocommerce a.button:hover,
.awe-shop .woocommerce button.button:hover,
.awe-shop .woocommerce input.button:hover,
.awe-shop .woocommerce a.button.alt:hover,
.awe-shop .woocommerce button.button.alt:hover,
.awe-shop .woocommerce input.button.alt:hover {
    background-color: var(--awe-primary-dark);
    color: #fff;
}

.awe-shop .woocommerce a.remove {
    width: auto;
    height: auto;
    font-size: 13px;
    font-weight: 400;
    line-height: inherit;
    color: rgba(20, 32, 31, .5);
    border-radius: 0;
    text-decoration: none;
}
.awe-shop .woocommerce a.remove:hover { background: transparent; color: var(--awe-red); }

.awe-shop button.awe-btn { font-family: inherit; cursor: pointer; }
.awe-shop .awe-btn--ghost { background: transparent; }

.awe-shop .woocommerce-checkout-payment,
.awe-shop #payment { background: transparent; border-radius: 0; }
.awe-shop #payment ul.payment_methods { border-bottom: 0; padding: 0; }
.awe-shop #payment div.form-row { padding: 0; }
.awe-shop #payment .payment_box::before { display: none; }

.awe-shop .woocommerce-form-login-toggle,
.awe-shop .woocommerce-form-coupon-toggle { max-width: 640px; }
.awe-shop .woocommerce-form-login,
.awe-shop .woocommerce-form-coupon {
    border: 1px solid var(--awe-line);
    border-radius: var(--awe-radius);
    padding: 20px;
    margin: 0 0 24px;
    max-width: 640px;
    background: var(--awe-surface);
}

/* WooCommerce vẽ một ô vuông ::before trước mỗi thông báo bằng font riêng của
   nó; font đó không được nạp ở đây nên chỉ còn glyph rỗng. */
.awe-shop .woocommerce-message::before,
.awe-shop .woocommerce-info::before,
.awe-shop .woocommerce-error::before { display: none; }
.awe-shop .woocommerce-info,
.awe-shop .woocommerce-message,
.awe-shop .woocommerce-error { padding-left: 18px; }

/* "Xoá" của WooCommerce là color:red !important — phải cùng vũ khí mới đè được. */
.awe-shop .woocommerce a.remove { color: rgba(20, 32, 31, .5) !important; }
.awe-shop .woocommerce a.remove:hover { color: var(--awe-red) !important; }

/* Môn học trong lộ trình có trang riêng thì cho bấm được. */
a.awe-curri__label { color: var(--awe-ink); text-decoration: none; }
a.awe-curri__label:hover { color: var(--awe-primary); text-decoration: underline; }
.awe-curri__item.is-locked .awe-curri__label { color: rgba(20, 32, 31, .68); }

/* ==========================================================================
   Trang tài khoản (/tai-khoan/).
   Ở awe-shop.css chứ không tách file: màn hình xem đơn dùng chung .awe-review
   với trang cảm ơn, và trang này đã nạp awe-shop.css cho ngăn kéo giỏ.
   ========================================================================== */

/* Hai cột: mục tài khoản bên trái, nội dung bên phải. Bản của WooCommerce để
   nav nổi float, nên trên mobile nó chồng lên nội dung. */
.awe-shop--account .woocommerce {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 34px;
    align-items: start;
}

.awe-acct__nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px;
}
.awe-acct__nav li a {
    display: block;
    padding: 10px 13px;
    border-radius: var(--awe-radius);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--awe-muted);
    text-decoration: none;
}
.awe-acct__nav li a:hover { background: var(--awe-tint); color: var(--awe-primary); }
.awe-acct__nav .is-active a { background: var(--awe-tint); color: var(--awe-primary); }

/* Lối vào chỗ học là việc chính của người đăng nhập — nó không phải một mục
   ngang hàng với "Thông tin của bạn". */
.awe-acct__nav-learn a {
    background: var(--awe-primary);
    color: #fff !important;
    margin-bottom: 8px;
}
.awe-acct__nav-learn a:hover { background: var(--awe-primary-dark); }

.awe-acct__nav-out {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--awe-line-soft);
}
.awe-acct__nav-out a { color: var(--awe-muted-2); font-weight: 500; }

/* --- tổng quan --- */
.awe-acct__hello-title { font-size: 22px; font-weight: 700; margin: 0 0 4px; }
.awe-acct__hello-lead { font-size: 14px; color: var(--awe-muted); margin: 0 0 26px; }

.awe-acct__ways { display: grid; gap: 12px; }
.awe-acct__way {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    background: var(--awe-surface);
    border: 1px solid var(--awe-line);
    border-radius: var(--awe-radius);
    text-decoration: none;
    transition: border-color .15s ease;
}
.awe-acct__way:hover { border-color: var(--awe-primary); }
.awe-acct__way-title { font-weight: 700; font-size: 16px; color: var(--awe-ink); }
.awe-acct__way-note { font-size: 13.5px; color: var(--awe-muted); }

/* --- danh sách đơn --- */
.awe-acct__orders { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.awe-acct__order {
    padding: 16px 18px;
    background: var(--awe-surface);
    border: 1px solid var(--awe-line);
    border-radius: var(--awe-radius);
}
.awe-acct__order-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}
.awe-acct__order-no { font-weight: 700; font-size: 15.5px; color: var(--awe-ink); text-decoration: none; }
.awe-acct__order-no:hover { color: var(--awe-primary); }

.awe-acct__order-state {
    flex: none;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: var(--awe-tint);
    color: var(--awe-primary-deep);
}
/* Đơn còn chờ tiền là việc chưa xong của người dùng — nhãn phải khác hẳn đơn
   đã hoàn thành, không cùng một màu teal cho mọi trạng thái. */
.awe-acct__order--on-hold .awe-acct__order-state,
.awe-acct__order--pending .awe-acct__order-state { background: #fff4d6; color: #6b4b00; }
.awe-acct__order--cancelled .awe-acct__order-state,
.awe-acct__order--failed .awe-acct__order-state { background: #fdeceb; color: #8c1c14; }

.awe-acct__order-items { font-size: 14.5px; line-height: 1.5; margin: 0 0 6px; color: var(--awe-ink); }
.awe-acct__order-meta { font-size: 13.5px; color: var(--awe-muted); margin: 0; display: flex; gap: 7px; }
.awe-acct__order-meta strong { color: var(--awe-ink); font-variant-numeric: tabular-nums; }
.awe-acct__order-act { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.awe-acct__order-act .awe-btn { font-size: 14px; padding: 8px 16px; }

.awe-acct__pager { display: flex; gap: 10px; margin-top: 18px; }

/* --- form thông tin --- */
.awe-acct__form { max-width: 480px; }
.awe-acct__form .awe-field { margin: 0 0 18px; }
.awe-acct__form label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
/* Nêu cả tên thẻ: CSS của WooCommerce dùng .woocommerce form .form-row input.input-text
   (0,3,2) và thắng mọi selector chỉ có class. */
.awe-acct__form input[type="text"],
.awe-acct__form input[type="email"],
.awe-acct__form input[type="password"] {
    width: 100%;
    padding: 11px 13px;
    font: inherit;
    font-size: 15px;
    color: var(--awe-ink);
    background: var(--awe-surface);
    border: 1px solid var(--awe-line);
    border-radius: var(--awe-radius);
}
.awe-acct__form input:focus { outline: 2px solid var(--awe-primary); outline-offset: 1px; }
.awe-field__note { display: block; font-size: 12.5px; color: var(--awe-muted-2); margin-top: 5px; }

.awe-acct__pass {
    margin: 0 0 22px;
    padding: 14px 16px;
    background: var(--awe-tint);
    border-radius: var(--awe-radius);
}
.awe-acct__pass summary { font-size: 14px; font-weight: 600; cursor: pointer; }
.awe-acct__pass-why { font-size: 13.5px; line-height: 1.6; color: var(--awe-muted); margin: 12px 0 16px; }
.awe-acct__pass .awe-field:last-child { margin-bottom: 0; }

/* --- khách chưa đăng nhập, và danh sách đơn rỗng --- */
.awe-acct__guest,
.awe-acct__empty {
    /* Khối ngắn thì không kéo hết 1280px — mắt phải đi hết chiều ngang màn
       hình mới đọc xong một câu. */
    max-width: 560px;
    margin-inline: auto;
    padding: 34px;
    background: var(--awe-surface);
    border: 1px solid var(--awe-line);
    border-radius: var(--awe-radius);
    text-align: center;
}
.awe-acct__guest-title,
.awe-acct__empty-title { font-size: 20px; font-weight: 700; margin: 0 0 8px; }
.awe-acct__guest-lead,
.awe-acct__empty-lead { font-size: 15px; color: var(--awe-muted); margin: 0 0 20px; }
.awe-acct__guest-act,
.awe-acct__empty-act { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; margin: 0; }
.awe-acct__guest-more { font-size: 14px; color: var(--awe-muted); margin: 18px 0 0; }

@media (max-width: 860px) {
    .awe-shop--account .woocommerce { grid-template-columns: 1fr; gap: 24px; }
    .awe-acct__nav ul { display: flex; flex-wrap: wrap; gap: 6px; }
    .awe-acct__nav-out { margin-top: 0; padding-top: 0; border-top: 0; }
    .awe-acct__order-head { flex-direction: column; align-items: flex-start; gap: 6px; }
}

@media (max-width: 560px) {
    /* 16px để Safari iOS không tự phóng to trang khi bấm vào ô nhập. */
    .awe-acct__form input[type="text"],
    .awe-acct__form input[type="email"],
    .awe-acct__form input[type="password"] { font-size: 16px; }
}

/* WooCommerce bọc số đơn, ngày và trạng thái trong <mark>, mà mặc định của
   trình duyệt là nền vàng chói — ba vệt highlight giữa một câu tiếng Việt. */
.awe-shop .woocommerce mark {
    background: transparent;
    color: var(--awe-ink);
    font-weight: 700;
}

/* Câu "Đơn hàng #… đã được đặt lúc …" đứng ngay dưới tiêu đề. */
.awe-shop--account .woocommerce-order-details__title,
.awe-shop--account .woocommerce-MyAccount-content > p:first-of-type {
    font-size: 14.5px;
    color: var(--awe-muted);
    margin: 0 0 18px;
}

.awe-acct__orderline { font-size: 14.5px; color: var(--awe-muted); margin: 0 0 18px; }

/* Khối mã QR do plugin VietQR in ra — chỉ đặt nó vào khung, không dựng lại. */
.awe-acct__qr {
    margin: 0 0 22px;
    padding: 20px;
    background: var(--awe-surface);
    border: 1px solid var(--awe-line);
    border-radius: var(--awe-radius);
}

.awe-acct__notes-title { font-size: 17px; font-weight: 700; margin: 26px 0 12px; }
.awe-acct__notes { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; }
.awe-acct__notes li {
    padding: 14px 16px;
    background: var(--awe-tint);
    border-radius: var(--awe-radius);
}
.awe-acct__note-date { font-size: 12.5px; color: var(--awe-muted-2); margin: 0 0 6px; }
.awe-acct__note-body { font-size: 14.5px; line-height: 1.6; }
.awe-acct__note-body p { margin: 0 0 8px; }
.awe-acct__note-body p:last-child { margin-bottom: 0; }