/* ══════════════════════════════════════════════════════════
   CTTPay — WooCommerce & Cart/Checkout — Pro Dark Theme
   Matches main.css design system exactly
   ══════════════════════════════════════════════════════════ */

/* ── Override WooCommerce's white content-bg variable ── */
:root {
    --wc-content-bg:    #0d1320 !important;
    --wc-secondary:     #1e2740 !important;
    --wc-secondary-text:#e2e8f0 !important;
}

/* ── WooCommerce global resets ── */
.woocommerce, .woocommerce-page {
    background: transparent;
    color: #e2e8f0;
    font-family: var(--font-base, 'Inter', sans-serif);
}
.woocommerce a, .woocommerce-page a { color: #60a5fa; }
.woocommerce a:hover { color: #93c5fd; }
.woocommerce-page .entry-content { max-width: none; }

/* ── woocommerce.php wrapper — dark background ── */
.wc-main-content {
    padding-top: calc(var(--header-h, 72px) + 32px);
    background: var(--bg-dark, #080c14);
    min-height: 100vh;
}
.wc-main-content .woocommerce,
.wc-main-content .woocommerce-page { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ── Ẩn section "Thông tin bổ sung" (Additional Information) ── */
.woocommerce-additional-fields,
.woocommerce-additional-fields h3 { display: none !important; }

/* ══════════════════════════════════════════
   PAGE WRAPPER — shared by cart + checkout
   ══════════════════════════════════════════ */
.ctt-page-wrap {
    min-height: 100svh;
    background: var(--bg-dark, #080c14);
    padding-bottom: 80px;
}

/* ══════════════════════════════════════════
   PROGRESS BAR
   ══════════════════════════════════════════ */
.ctt-progress-wrap {
    background: rgba(255,255,255,0.02);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    padding: 18px 0;
}
.ctt-progress-wrap--page { margin-top: var(--header-h, 72px); }
.ctt-progress-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 500px;
    margin: 0 auto;
    padding: 0 24px;
}
.cps {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 64px;
}
.cpb {
    width: 34px; height: 34px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    background: rgba(255,255,255,0.05);
    border: 1.5px solid rgba(255,255,255,0.1);
    color: #6b7280;
    transition: all .3s var(--ease, cubic-bezier(.4,0,.2,1));
}
.cps em { font-style: normal; font-size: 11px; color: #6b7280; white-space: nowrap; transition: color .3s; }
.cps.active .cpb {
    background: linear-gradient(135deg, var(--blue-600, #2563eb), var(--indigo-600, #4f46e5));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 20px rgba(59,130,246,.45);
}
.cps.active em { color: #93c5fd; font-weight: 600; }
.cps.done .cpb  { background: rgba(22,163,74,.12); border-color: rgba(74,222,128,.3); color: #4ade80; }
.cps.done em    { color: #4ade80; }
.cps-line {
    flex: 1; height: 2px; min-width: 28px;
    background: rgba(255,255,255,.07);
    margin-bottom: 19px;
    transition: background .5s;
}
.cps-line.done { background: rgba(74,222,128,.3); }

/* ══════════════════════════════════════════
   CART PAGE GRID
   ══════════════════════════════════════════ */
.cart-page-grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 36px;
    padding: 48px 0;
    align-items: start;
}
.cart-section-label { margin-bottom: 24px; }

/* ── Product Card ── */
.cart-product-card {
    position: relative;
    background: var(--bg-dark-card, #0d1320);
    border: 1px solid rgba(59,130,246,.18);
    border-radius: 24px;
    padding: 32px;
    overflow: hidden;
    transition: border-color .3s, box-shadow .3s;
    box-shadow: 0 0 60px rgba(59,130,246,.06);
}
.cart-product-card:hover { border-color: rgba(59,130,246,.32); box-shadow: 0 0 80px rgba(59,130,246,.12); }
.cart-product-top-line {
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--blue-500, #3b82f6), var(--violet-500, #8b5cf6), var(--cyan-400, #22d3ee));
}
.cart-product-header {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 28px;
}
.cart-product-icon-wrap {
    width: 72px; height: 72px;
    background: linear-gradient(135deg, rgba(37,99,235,.15), rgba(99,102,241,.1));
    border: 1px solid rgba(59,130,246,.22);
    border-radius: 20px;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; flex-shrink: 0;
}
.cart-product-title-wrap { flex: 1; }
.cart-product-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.cpt-tag {
    padding: 3px 10px; border-radius: 99px;
    font-size: 11px; font-weight: 600;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    color: #9ca3af;
}
.cpt-tag--green { background: rgba(22,163,74,.08); border-color: rgba(74,222,128,.2); color: #4ade80; }
.cart-product-name { font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em; color: #fff; margin-bottom: 8px; line-height: 1.25; }
.cart-product-short { font-size: .88rem; color: #6b7280; line-height: 1.6; }

/* Features */
.cart-product-features {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 10px; margin-bottom: 28px;
}
.cpf-item { display: flex; align-items: center; gap: 10px; font-size: .875rem; color: #9ca3af; }
.cpf-check {
    width: 20px; height: 20px;
    background: rgba(74,222,128,.1);
    border: 1px solid rgba(74,222,128,.2);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; color: #4ade80; flex-shrink: 0;
}
.cpf-item strong { color: #fff; }

/* Pricing */
.cart-product-pricing {
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,.07);
}
.cpp-price-wrap { display: flex; flex-direction: column; gap: 6px; }
.cpp-price {
    display: flex; align-items: baseline; gap: 4px;
}
.cpp-currency { font-size: 1.2rem; font-weight: 700; color: #9ca3af; }
.cpp-amount {
    font-size: clamp(2.2rem,5vw,3rem);
    font-weight: 900; letter-spacing: -.04em;
    background: linear-gradient(135deg, #fff, #93c5fd);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.cpp-period { font-size: 1rem; color: #6b7280; }
.cpp-note { font-size: .82rem; color: #6b7280; }
.cpp-note strong { color: #4ade80; }

/* Guarantees row */
.cart-guarantees {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    background: var(--bg-dark-card, #0d1320);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 16px;
    margin-top: 16px;
}
.cg-item { display: flex; align-items: center; gap: 10px; flex: 1; justify-content: center; }
.cg-icon { font-size: 1.4rem; }
.cg-item span { font-size: .75rem; color: #6b7280; line-height: 1.4; }
.cg-item strong { color: #fff; font-size: .82rem; }
.cg-divider { width: 1px; height: 36px; background: rgba(255,255,255,.07); }
.cart-no-product { padding: 24px; background: rgba(220,38,38,.08); border: 1px solid rgba(220,38,38,.2); border-radius: 16px; color: #f87171; font-size: .9rem; text-align: center; }
.cart-no-product a { color: #60a5fa; }

/* ── Order Card (sidebar) ── */
.cart-order-card {
    background: var(--bg-dark-card, #0d1320);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 16px;
}
.coc-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.coc-header h3 { font-size: 1rem; font-weight: 700; color: #fff; margin: 0; }
.coc-items-count { font-size: 11px; font-weight: 600; color: #6b7280; background: rgba(255,255,255,.05); padding: 3px 10px; border-radius: 99px; }

.coc-line-item {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 24px;
}
.coc-item-icon {
    width: 44px; height: 44px;
    background: linear-gradient(135deg, rgba(37,99,235,.15), rgba(99,102,241,.1));
    border: 1px solid rgba(59,130,246,.2);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; flex-shrink: 0;
}
.coc-item-info { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.coc-item-name { font-size: .85rem; font-weight: 600; color: #fff; line-height: 1.3; }
.coc-item-meta { font-size: .75rem; color: #6b7280; }
.coc-item-price .woocommerce-Price-amount { font-size: .95rem; font-weight: 700; color: #fff; }

.coc-divider { height: 1px; background: rgba(255,255,255,.07); margin: 0 24px; }

.coc-rows { padding: 12px 24px; display: flex; flex-direction: column; gap: 8px; }
.coc-row { display: flex; justify-content: space-between; font-size: .85rem; color: #6b7280; }
.coc-row--green span:last-child { color: #4ade80; font-weight: 600; }

.coc-total-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 24px;
    border-top: 1px solid rgba(255,255,255,.07);
    font-weight: 700; color: #fff; font-size: .95rem;
}
.coc-total-amount .woocommerce-Price-amount { font-size: 1.15rem; font-weight: 800; }

/* Cart CTA button */
.ctt-checkout-cta {
    margin: 0 24px 16px;
    width: calc(100% - 48px) !important;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--blue-600,#2563eb), var(--indigo-600,#4f46e5)) !important;
    border: none !important;
    box-shadow: 0 4px 28px rgba(59,130,246,.4) !important;
    transition: all .3s !important;
    padding: 16px 24px !important;
    border-radius: 12px !important;
}
.ctt-checkout-cta:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 40px rgba(59,130,246,.55) !important; }
.ctt-checkout-cta:active { transform: translateY(0) !important; }

.coc-security {
    display: flex; justify-content: center; gap: 18px;
    padding: 12px 24px 20px;
    font-size: 11px; color: #4b5563;
    flex-wrap: wrap;
}

/* Plugin status */
.cart-plugin-status {
    background: var(--bg-dark-card, #0d1320);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 16px;
}
.cps-title {
    display: flex; align-items: center; gap: 8px;
    font-size: .82rem; font-weight: 700; color: #9ca3af;
    text-transform: uppercase; letter-spacing: .06em;
    margin-bottom: 14px;
}
.cps-title-icon { font-size: 1rem; }
.cps-list { display: flex; flex-direction: column; gap: 8px; }
.cpsi {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-radius: 8px;
    font-size: .82rem; background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.05);
}
.cpsi span { flex: 1; color: #9ca3af; }
.cpsi strong { font-size: .82rem; }
.cpsi-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: #6b7280; }
.cpsi.ok .cpsi-dot   { background: #4ade80; box-shadow: 0 0 6px rgba(74,222,128,.5); }
.cpsi.ok strong      { color: #4ade80; }
.cpsi.warn .cpsi-dot { background: #fbbf24; }
.cpsi.warn strong    { color: #fbbf24; }
.cpsi.err .cpsi-dot  { background: #f87171; }
.cpsi.err strong     { color: #f87171; }

/* Webhook hint */
.cart-webhook-hint {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 20px;
    background: rgba(99,102,241,.06);
    border: 1px solid rgba(99,102,241,.15);
    border-radius: 16px;
}
.cwh-icon { font-size: 1.4rem; flex-shrink: 0; }
.cart-webhook-hint div { flex: 1; }
.cart-webhook-hint strong { font-size: .88rem; color: #fff; display: block; margin-bottom: 4px; }
.cart-webhook-hint p { font-size: .8rem; color: #6b7280; margin: 0; line-height: 1.5; }

/* ══════════════════════════════════════════
   CART — FORM THÔNG TIN KHÁCH HÀNG
   ══════════════════════════════════════════ */
.ctt-info-form {
    background: var(--bg-dark-card, #0d1320);
    border: 1px solid rgba(59,130,246,.2);
    border-radius: 24px;
    padding: 28px 32px 32px;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 40px rgba(59,130,246,.06);
}
.ctt-info-form::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #2563eb, #8b5cf6, #22d3ee);
    border-radius: 24px 24px 0 0;
}
.ctt-info-form__header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
}
.ctt-info-form__icon {
    width: 52px; height: 52px;
    background: linear-gradient(135deg, rgba(37,99,235,.25), rgba(99,102,241,.18));
    border: 1px solid rgba(59,130,246,.3);
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; flex-shrink: 0;
}
.ctt-info-form__title {
    font-size: 1.1rem; font-weight: 800;
    color: #f1f5f9; margin-bottom: 3px;
}
.ctt-info-form__sub {
    font-size: .82rem; color: #64748b;
}
.ctt-info-form__fields {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.ctt-info-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.ctt-info-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ctt-info-field label {
    font-size: .72rem; font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase; letter-spacing: .06em;
}
.ctt-req { color: #f87171; }
.ctt-info-field input {
    background: rgba(255,255,255,.05);
    border: 1.5px solid rgba(255,255,255,.12);
    border-radius: 16px;
    color: #f1f5f9;
    font-family: var(--font-base,'Inter',sans-serif);
    font-size: .95rem;
    padding: 15px 18px;
    width: 100%; box-sizing: border-box;
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
    -webkit-appearance: none;
}
.ctt-info-field input::placeholder { color: #334155; }
.ctt-info-field input:focus {
    border-color: rgba(59,130,246,.6);
    box-shadow: 0 0 0 4px rgba(59,130,246,.12);
    background: rgba(59,130,246,.04);
}
@media (max-width: 640px) {
    .ctt-info-form__row { grid-template-columns: 1fr; }
    .ctt-info-form { padding: 22px 20px 24px; }
}

/* ══════════════════════════════════════════
   WOOCOMMERCE CHECKOUT FORM — Pro Dark UI
   ══════════════════════════════════════════ */

/* ── Ẩn entry-title trên WC pages ── */
.wc-main-content .entry-title {
    font-size: 1.3rem !important; font-weight: 700 !important;
    color: #6b7280 !important; text-transform: uppercase !important;
    letter-spacing: .08em !important; padding: 0 0 16px !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    margin-bottom: 28px !important;
}
body.woocommerce-checkout .entry-title,
body.woocommerce-order-received .entry-title { display: none !important; }


/* ── Giảm khoảng trắng bên trên checkout ── */
body.woocommerce-checkout .page-main {
    padding-top: var(--header-h, 72px) !important;
}
body.woocommerce-checkout .woocommerce { padding-top: 0 !important; margin-top: 0 !important; }

/* ── Progress bar flush with header ── */
body.woocommerce-checkout .ctt-progress-wrap {
    margin-bottom: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
}

/* ── Coupon notice (dòng mã giảm giá) ── */
.woocommerce-form-coupon-toggle {
    margin: 0 0 0 !important;
    padding: 14px 20px !important;
    background: rgba(59,130,246,.04) !important;
    border: 1px solid rgba(59,130,246,.15) !important;
    border-radius: 14px !important;
    font-size: .85rem !important; color: #93c5fd !important;
    margin-bottom: 24px !important;
}
.woocommerce-form-coupon-toggle a { color: #60a5fa !important; font-weight: 600 !important; }
.woocommerce-form-coupon-toggle::before { content: '🏷'; margin-right: 8px; }
.checkout_coupon {
    background: rgba(255,255,255,.03) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 14px !important;
    padding: 20px !important;
    margin-bottom: 24px !important;
}
.checkout_coupon p { color: #9ca3af !important; font-size: .875rem !important; margin-bottom: 12px !important; }
.checkout_coupon .input-text {
    background: rgba(255,255,255,.05) !important;
    border: 1.5px solid rgba(255,255,255,.1) !important;
    border-radius: 10px !important; color: #fff !important;
    padding: 11px 14px !important; font-size: .9rem !important;
    margin-right: 8px !important;
}
.checkout_coupon button[type="submit"] {
    background: rgba(59,130,246,.15) !important;
    border: 1.5px solid rgba(59,130,246,.35) !important;
    border-radius: 10px !important; color: #93c5fd !important;
    padding: 11px 20px !important; font-size: .875rem !important;
    font-weight: 600 !important; cursor: pointer !important;
    transition: all .2s !important;
}
.checkout_coupon button[type="submit"]:hover { background: rgba(59,130,246,.25) !important; }

/* ── Checkout form layout: 2 cột ── */
.woocommerce-checkout { }
form.woocommerce-checkout {
    display: grid !important;
    grid-template-columns: 1fr 400px !important;
    grid-template-areas: "billing review" !important;
    gap: 28px !important;
    align-items: start !important;
}
form.woocommerce-checkout #customer_details { grid-area: billing; }
form.woocommerce-checkout #order_review_heading { display: none !important; }
form.woocommerce-checkout #order_review { grid-area: review; }

/* ══ Billing card ══ */
#customer_details {
    position: relative;
    background: var(--bg-dark-card, #0d1320);
    border: 1px solid rgba(59,130,246,.18);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 0 60px rgba(59,130,246,.06);
}
/* top gradient line */
#customer_details::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #2563eb, #8b5cf6, #22d3ee);
    border-radius: 24px 24px 0 0;
    pointer-events: none;
}

/* Billing section header */
.woocommerce-billing-fields > h3 {
    padding: 22px 28px 18px !important;
    font-size: .78rem !important; font-weight: 800 !important;
    color: #6b7280 !important; letter-spacing: .1em !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    margin: 0 !important;
    background: rgba(255,255,255,.02) !important;
    display: flex !important; align-items: center !important; gap: 8px !important;
}
.woocommerce-billing-fields > h3::before { content: '👤'; font-size: .95rem; letter-spacing: 0; }

/* ── FIX: form-row chiều rộng đầy đủ ── */
.woocommerce-billing-fields__field-wrapper {
    padding: 24px 28px 28px !important;
    display: flex !important; flex-direction: column !important; gap: 20px !important;
}
.woocommerce-checkout .form-row,
.woocommerce-checkout .form-row-wide,
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
    float: none !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    clear: none !important;
}
.woocommerce-checkout .form-row .input-text,
.woocommerce-checkout .form-row input {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ── Labels ── */
.woocommerce-checkout label {
    display: flex !important; align-items: center !important; gap: 6px !important;
    font-size: .8rem !important; font-weight: 700 !important;
    color: #9ca3af !important; margin-bottom: 8px !important;
    letter-spacing: .04em !important; text-transform: uppercase !important;
}
.woocommerce-checkout abbr[title] { text-decoration: none !important; color: #f87171 !important; font-style: normal !important; }

/* ── Input fields ── */
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="number"],
.woocommerce-checkout select,
.woocommerce-checkout textarea {
    background: rgba(255,255,255,.04) !important;
    border: 1.5px solid rgba(255,255,255,.1) !important;
    border-radius: 14px !important;
    color: #fff !important;
    font-family: var(--font-base,'Inter',sans-serif) !important;
    font-size: .95rem !important;
    padding: 14px 18px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    height: auto !important;
    line-height: 1.5 !important;
    transition: border-color .2s, box-shadow .2s, background .2s !important;
    outline: none !important;
    -webkit-appearance: none !important;
    box-shadow: none !important;
}
.woocommerce-checkout input::placeholder,
.woocommerce-checkout textarea::placeholder { color: #374151 !important; }
.woocommerce-checkout input:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 4px rgba(59,130,246,.14) !important;
    background: rgba(59,130,246,.04) !important;
}
.woocommerce-checkout select option { background: #0d1320 !important; color: #fff !important; }

/* Validation states */
.woocommerce-checkout .woocommerce-invalid .input-text { border-color: #f87171 !important; box-shadow: 0 0 0 3px rgba(248,113,113,.1) !important; }
.woocommerce-checkout .woocommerce-validated .input-text { border-color: #4ade80 !important; box-shadow: 0 0 0 3px rgba(74,222,128,.08) !important; }
.woocommerce-checkout .woocommerce-error,
.woocommerce form .woocommerce-error li { font-size: .82rem !important; color: #fca5a5 !important; margin-top: 6px !important; }

/* ══ Order Review (right panel) ══ */
#order_review { position: sticky; top: calc(var(--header-h,72px) + 16px); }
.woocommerce-checkout-review-order {
    background: var(--bg-dark-card,#0d1320) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 40px rgba(0,0,0,.3) !important;
}

/* Review table header */
.woocommerce-checkout-review-order-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: .875rem !important;
}
.woocommerce-checkout-review-order-table thead {
    background: rgba(255,255,255,.025) !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
}
.woocommerce-checkout-review-order-table thead th {
    padding: 16px 24px !important;
    font-size: .7rem !important; font-weight: 800 !important;
    color: #6b7280 !important;
    text-transform: uppercase !important; letter-spacing: .1em !important;
}
.woocommerce-checkout-review-order-table thead th:last-child { text-align: right !important; }
.woocommerce-checkout-review-order-table tbody td,
.woocommerce-checkout-review-order-table tfoot td,
.woocommerce-checkout-review-order-table tfoot th {
    padding: 14px 24px !important;
    border-bottom: 1px solid rgba(255,255,255,.05) !important;
    color: #9ca3af !important; vertical-align: middle !important;
}
.woocommerce-checkout-review-order-table .product-name { color: #e2e8f0 !important; font-weight: 600 !important; font-size: .88rem !important; line-height: 1.4 !important; }
.woocommerce-checkout-review-order-table .product-total { text-align: right !important; }
.woocommerce-checkout-review-order-table tfoot .order-total td,
.woocommerce-checkout-review-order-table tfoot .order-total th {
    color: #fff !important; font-weight: 800 !important;
    font-size: 1.05rem !important;
    border-top: 2px solid rgba(255,255,255,.1) !important;
    padding-top: 18px !important; padding-bottom: 18px !important;
    border-bottom: none !important;
}
.woocommerce-checkout-review-order-table .woocommerce-Price-amount { color: #fff !important; font-weight: 700 !important; }

/* ══ Payment section ══ */
#payment {
    background: transparent !important;
    border: none !important; border-radius: 0 !important; padding: 0 !important;
    border-top: 1px solid rgba(255,255,255,.07) !important;
}
#payment ul.payment_methods {
    padding: 16px 20px 12px !important;
    list-style: none !important;
    border-bottom: none !important;
    margin: 0 !important;
}
#payment ul.payment_methods li { padding: 0 !important; margin: 0 !important; }

/* Payment method label (thẻ phương thức TT) */
#payment ul.payment_methods label {
    display: flex !important; align-items: center !important; gap: 10px !important;
    padding: 14px 18px !important;
    background: linear-gradient(135deg, rgba(37,99,235,.08), rgba(99,102,241,.05)) !important;
    border: 1.5px solid rgba(59,130,246,.3) !important;
    border-radius: 16px !important;
    cursor: pointer !important;
    transition: all .25s !important;
    font-size: .9rem !important; color: #e2e8f0 !important; font-weight: 600 !important;
    margin-bottom: 0 !important;
    position: relative !important;
}
#payment ul.payment_methods label::before {
    content: '🏦';
    font-size: 1.1rem; letter-spacing: 0;
}
#payment ul.payment_methods label img { max-height: 20px !important; width: auto !important; margin-left: auto !important; opacity: .7 !important; }
#payment ul.payment_methods input[type="radio"] { margin: 0 !important; accent-color: #3b82f6 !important; width: 16px !important; height: 16px !important; }
#payment ul.payment_methods li input[type="radio"]:checked + label {
    border-color: rgba(59,130,246,.6) !important;
    background: linear-gradient(135deg, rgba(37,99,235,.14), rgba(99,102,241,.08)) !important;
    color: #fff !important;
    box-shadow: 0 0 20px rgba(59,130,246,.15) !important;
}

/* Payment box: xóa mũi tên mặc định của WooCommerce */
#payment .payment_box {
    background: rgba(59,130,246,.05) !important;
    border: 1px solid rgba(59,130,246,.12) !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    margin: 8px 0 4px !important;
    font-size: .83rem !important; color: #93c5fd !important;
    line-height: 1.6 !important;
    position: relative !important;
}
/* Xóa tam giác mũi tên mặc định WooCommerce */
#payment .payment_box::before,
#payment .payment_box::after { display: none !important; content: none !important; }
#payment .payment_box p { margin: 0 !important; color: #93c5fd !important; }
#payment .payment_box p::before { content: 'ℹ️ '; }

/* ══ Place Order button ══ */
#payment .place-order {
    padding: 20px 20px 24px !important;
    background: transparent !important;
}

#payment #place_order {
    width: 100% !important;
    background-image: linear-gradient(135deg, #1d4ed8 0%, #4f46e5 50%, #7c3aed 100%) !important;
    background-size: 200% 200% !important;
    background-position: 0% 50% !important;
    border: none !important;
    border-radius: 16px !important;
    color: #fff !important;
    font-family: var(--font-base,'Inter',sans-serif) !important;
    font-size: 1.05rem !important; font-weight: 800 !important;
    padding: 18px 28px !important;
    height: auto !important;
    cursor: pointer !important;
    transition: background-position .5s ease, transform .35s, box-shadow .35s !important;
    letter-spacing: .01em !important;
    box-shadow: 0 6px 32px rgba(79,70,229,.45), 0 2px 8px rgba(0,0,0,.3) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    gap: 10px !important;
    position: relative !important;
    overflow: hidden !important;
}
#payment #place_order::before {
    content: '🔒';
    font-size: 1rem;
    letter-spacing: 0;
}
#payment #place_order::after {
    content: '→';
    font-size: 1.2rem; font-weight: 900;
    transition: transform .3s;
    display: inline-block;
}
#payment #place_order:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 14px 52px rgba(79,70,229,.65), 0 4px 16px rgba(0,0,0,.4) !important;
    background-position: 100% 50% !important;
}
#payment #place_order:hover::after { transform: translateX(5px); }
#payment #place_order:active { transform: translateY(-1px) !important; }

/* Security badges under button */
.woocommerce-terms-and-conditions-wrapper {
    padding: 0 20px 20px !important;
    text-align: center !important;
}
.woocommerce-terms-and-conditions-wrapper p {
    font-size: .75rem !important; color: #374151 !important;
    display: flex !important; align-items: center !important;
    justify-content: center !important; gap: 6px !important;
}
.woocommerce-terms-and-conditions-wrapper p::before { content: '🔐'; font-size: .85rem; }
.woocommerce-terms-and-conditions-wrapper a { color: #60a5fa !important; }

/* Security badge row */
.ctt-checkout-security {
    display: flex; justify-content: center; gap: 16px;
    padding: 0 20px 16px;
    font-size: .72rem; color: #374151;
}
.ctt-checkout-security span { display: flex; align-items: center; gap: 4px; }

/* ── WC Notices ── */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
    background: var(--bg-dark-card,#0d1320) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    color: #e2e8f0 !important; border-radius: 14px !important;
    padding: 14px 18px 14px 46px !important; font-size: .875rem !important;
    list-style: none !important; margin: 0 0 20px !important;
    position: relative !important; line-height: 1.5 !important;
}
.woocommerce-error::before   { content: '⚠️'; position: absolute !important; left: 16px !important; top: 13px !important; }
.woocommerce-message::before { content: '✅'; position: absolute !important; left: 16px !important; top: 13px !important; }
.woocommerce-info::before    { content: '💡'; position: absolute !important; left: 16px !important; top: 13px !important; }
.woocommerce-error   { border-color: rgba(248,113,113,.3) !important; color: #fca5a5 !important; background: rgba(220,38,38,.06) !important; }
.woocommerce-message { border-color: rgba(74,222,128,.3) !important; color: #86efac !important; background: rgba(22,163,74,.06) !important; }
.woocommerce-info    { border-color: rgba(59,130,246,.3) !important; color: #93c5fd !important; background: rgba(37,99,235,.06) !important; }
.woocommerce-error a, .woocommerce-message a, .woocommerce-info a { color: inherit !important; text-decoration: underline !important; }

/* ── Responsive checkout ── */
@media (max-width: 860px) {
    form.woocommerce-checkout {
        grid-template-columns: 1fr !important;
        grid-template-areas: "billing" "review" !important;
    }
    #order_review { position: static !important; top: auto !important; }
}

/* ══════════════════════════════════════════
   ORDER RECEIVED / THANK YOU PAGE
   ══════════════════════════════════════════ */

/* ── Căn giữa toàn bộ nội dung trang order-received ── */
body.woocommerce-order-received .page-main {
    padding-top: var(--header-h, 72px) !important;
}
body.woocommerce-order-received .woocommerce {
    max-width: 820px !important;
    margin: 0 auto !important;
    padding-top: 32px !important;
}
body.woocommerce-order-received .woocommerce-order {
    max-width: 820px !important;
    margin: 0 auto !important;
}
.woocommerce-order { background: transparent !important; }

/* WC default notice on thankyou */
.woocommerce-thankyou-order-received {
    display: flex !important; align-items: center !important; gap: 12px !important;
    background: rgba(37,99,235,.08) !important;
    border: 1px solid rgba(59,130,246,.22) !important;
    border-radius: 14px !important;
    padding: 16px 20px !important;
    color: #93c5fd !important;
    font-size: .95rem !important; font-weight: 600 !important;
    margin-bottom: 24px !important;
}
.woocommerce-thankyou-order-received::before { content: '✓'; font-size: 1.1rem; }

/* Order overview mini-stats */
.woocommerce-order-overview {
    display: flex !important; flex-wrap: wrap !important; gap: 12px !important;
    background: transparent !important;
    padding: 0 0 24px !important;
    border: none !important;
    list-style: none !important; margin: 0 !important;
}
.woocommerce-order-overview li {
    flex: 1 !important; min-width: 140px !important;
    background: var(--bg-dark-card,#0d1320) !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    border-radius: 14px !important;
    padding: 14px 18px !important;
    font-size: .8rem !important; color: #6b7280 !important;
    display: flex !important; flex-direction: column !important; gap: 5px !important;
}
.woocommerce-order-overview li strong { font-size: .9rem !important; color: #fff !important; }
.woocommerce-order-overview li .woocommerce-Price-amount { color: #fff !important; font-weight: 700 !important; }

/* Order & customer details tables */
.woocommerce-order-details,
.woocommerce-customer-details {
    background: var(--bg-dark-card,#0d1320) !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    margin-bottom: 24px !important;
}
.woocommerce-order-details__title,
.woocommerce-customer-details h2 {
    padding: 16px 24px !important; margin: 0 !important;
    font-size: .78rem !important; font-weight: 800 !important;
    color: #6b7280 !important; text-transform: uppercase !important; letter-spacing: .1em !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    background: rgba(255,255,255,.02) !important;
}
.woocommerce-table--order-details {
    width: 100% !important; border-collapse: collapse !important; font-size: .88rem !important;
}
.woocommerce-table--order-details th,
.woocommerce-table--order-details td {
    padding: 12px 24px !important;
    border-bottom: 1px solid rgba(255,255,255,.05) !important;
    color: #9ca3af !important;
}
.woocommerce-table--order-details .product-name { color: #e2e8f0 !important; font-weight: 600 !important; }
.woocommerce-table--order-details .woocommerce-Price-amount { color: #fff !important; font-weight: 700 !important; }
.woocommerce-table--order-details tfoot tr:last-child td,
.woocommerce-table--order-details tfoot tr:last-child th {
    color: #fff !important; font-weight: 800 !important;
    border-top: 2px solid rgba(255,255,255,.1) !important;
    font-size: .95rem !important;
}

/* Address columns */
.woocommerce-customer-details .woocommerce-columns { display: flex !important; flex-wrap: wrap !important; gap: 16px !important; padding: 20px 24px !important; }
.woocommerce-customer-details .woocommerce-column { flex: 1 !important; min-width: 200px !important; }
.woocommerce-customer-details h3 { font-size: .82rem !important; color: #6b7280 !important; font-weight: 600 !important; margin-bottom: 8px !important; }
.woocommerce-customer-details address { font-size: .875rem !important; color: #9ca3af !important; line-height: 1.7 !important; font-style: normal !important; }

/* ══════════════════════════════════════════
   PLUGIN CTTSMS — DARK THEME OVERRIDE
   Override toàn bộ styles.css của plugin để khớp dark theme
   ══════════════════════════════════════════ */

/* Căn giữa wrap */
.cttsms-wrap {
    margin: 0 auto 24px !important;
    max-width: 760px !important;
}

/* ── Success state → dark green ── */
.cttsms-success {
    text-align: center !important;
    padding: 40px 32px !important;
    background: linear-gradient(135deg, rgba(22,163,74,.08), rgba(16,185,129,.05)) !important;
    border: 1px solid rgba(74,222,128,.22) !important;
    border-radius: 20px !important;
    max-width: 100% !important;
    margin: 0 !important;
}
.cttsms-success__icon { filter: none !important; width: 80px !important; margin: 0 auto 16px !important; }
.cttsms-success__title {
    font-size: 1.2rem !important; font-weight: 800 !important;
    color: #4ade80 !important; margin-bottom: 8px !important;
}
.cttsms-success__sub { color: #9ca3af !important; font-size: .9rem !important; }

/* ── Header ── (đã dark, chỉ tinh chỉnh) */
.cttsms-header {
    background: linear-gradient(135deg, #1a2454, #1e2d5a) !important;
    border-radius: 20px 20px 0 0 !important;
}

/* ── Payment card ── */
.cttsms-card {
    background: var(--bg-dark-card, #0d1320) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-top: none !important;
    border-radius: 0 !important;
}

/* ── QR column ── */
.cttsms-qr {
    background: rgba(255,255,255,.02) !important;
    border-right: 1px solid rgba(255,255,255,.06) !important;
}
.cttsms-qr__img {
    border: 3px solid rgba(255,255,255,.1) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.4) !important;
    border-radius: 16px !important;
}
.cttsms-napas-pill {
    background: rgba(255,255,255,.05) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
}
.cttsms-napas-pill__name { color: #60a5fa !important; }
.cttsms-napas-pill__sub  { color: #6b7280 !important; }

/* Steps */
.cttsms-step { color: #9ca3af !important; }
.cttsms-step__num {
    background: rgba(37,99,235,.2) !important;
    color: #60a5fa !important;
}

/* Confirm button */
.cttsms-confirm-btn {
    background: rgba(255,255,255,.04) !important;
    border: 1.5px solid rgba(255,255,255,.1) !important;
    color: #d1d5db !important;
    border-radius: 12px !important;
}
.cttsms-confirm-btn:hover {
    background: rgba(255,255,255,.08) !important;
    border-color: rgba(255,255,255,.2) !important;
}

/* ── Details column ── */
.cttsms-details { background: transparent !important; }
.cttsms-details__header { color: #9ca3af !important; }
.cttsms-details__accent { color: #f87171 !important; }
.cttsms-details__subtitle { color: #6b7280 !important; }

/* Account card */
.cttsms-account-card {
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    border-radius: 14px !important;
}
.cttsms-account-name { color: #e2e8f0 !important; }
.cttsms-account-bank { color: #f87171 !important; }

/* Info table */
.cttsms-table {
    background: rgba(255,255,255,.02) !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    border-radius: 14px !important;
}
.cttsms-table tr { border-bottom: 1px solid rgba(255,255,255,.05) !important; }
.cttsms-table td { color: #9ca3af !important; }
.cttsms-table__label { color: #6b7280 !important; }
.cttsms-table__value { color: #e2e8f0 !important; }
.cttsms-amount-val { color: #4ade80 !important; font-weight: 700 !important; }
.cttsms-paid-val   { color: #9ca3af !important; }

/* Reference code */
.cttsms-ref {
    color: #fbbf24 !important;
    border: 1.5px solid rgba(251,191,36,.3) !important;
    background: rgba(251,191,36,.06) !important;
    border-radius: 6px !important; padding: 2px 10px !important;
}

/* Copy button */
.cttsms-copy-btn {
    background: rgba(255,255,255,.05) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    color: #9ca3af !important;
    border-radius: 8px !important;
}
.cttsms-copy-btn:hover {
    background: rgba(255,255,255,.1) !important;
    color: #e2e8f0 !important;
}

/* Warning note */
.cttsms-note {
    background: rgba(251,146,60,.06) !important;
    border: 1px solid rgba(251,146,60,.2) !important;
    color: #fdba74 !important;
    border-radius: 12px !important;
}
.cttsms-note strong { color: #f87171 !important; }

/* Done button */
.cttsms-done-btn {
    background: rgba(255,255,255,.04) !important;
    border: 1.5px solid rgba(255,255,255,.1) !important;
    color: #d1d5db !important;
    border-radius: 12px !important;
}
.cttsms-done-btn:hover {
    background: rgba(255,255,255,.08) !important;
    border-color: rgba(255,255,255,.2) !important;
}

/* Footer */
.cttsms-footer {
    background: rgba(255,255,255,.02) !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    border-top: none !important;
    color: #6b7280 !important;
    border-radius: 0 0 20px 20px !important;
}
.cttsms-footer__badge {
    background: rgba(255,255,255,.05) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    color: #9ca3af !important;
}

/* Outer radius for the full payment block */
.cttsms-wrap .cttsms-header { border-radius: 20px 20px 0 0 !important; }
.cttsms-wrap .cttsms-footer { border-radius: 0 0 20px 20px !important; }
.cttsms-wrap .cttsms-card   { overflow: hidden !important; }

/* ══════════════════════════════════════════
   WEBHOOK TEST PAGE
   ══════════════════════════════════════════ */
.wh-hero {
    padding: 40px 0 32px;
    background: rgba(255,255,255,.02);
    border-bottom: 1px solid rgba(255,255,255,.06);
    margin-top: var(--header-h,72px);
}
.wh-hero-inner { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.wh-hero-icon { font-size: 2.5rem; flex-shrink: 0; }
.wh-title { font-size: clamp(1.4rem,3vw,2rem); font-weight: 800; color: #fff; letter-spacing: -.03em; margin-bottom: 4px; }
.wh-subtitle { font-size: .9rem; color: #6b7280; }
.wh-hero-inner .btn { margin-left: auto; flex-shrink: 0; }

.wh-grid { display: grid; grid-template-columns: 1fr 360px; gap: 28px; padding-top: 32px; }

.wh-result { display: flex; align-items: flex-start; gap: 16px; padding: 16px 20px; border-radius: 14px; margin-top: 24px; margin-bottom: 4px; }
.wh-result--ok  { background: rgba(22,163,74,.08); border: 1px solid rgba(74,222,128,.2); }
.wh-result--err { background: rgba(220,38,38,.08); border: 1px solid rgba(248,113,113,.2); }
.wh-result-icon { font-size: 1.4rem; flex-shrink: 0; }
.wh-result-body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.wh-result-body strong { font-size: .95rem; color: #fff; font-weight: 700; }
.wh-result-body span { font-size: .85rem; color: #9ca3af; }
.wh-result-sms { margin-top: 8px; }
.wh-result-sms-label { font-size: .75rem; color: #6b7280; display: block; margin-bottom: 4px; }
.wh-result-sms code { display: block; padding: 8px 12px; background: rgba(0,0,0,.3); border-radius: 8px; font-size: .78rem; color: #a5f3fc; word-break: break-all; font-family: 'Courier New',monospace; }
.wh-result-status { margin-top: 8px; font-size: .85rem; color: #d1d5db; }
.wh-result-code { font-size: .75rem; font-weight: 700; padding: 4px 10px; border-radius: 6px; background: rgba(255,255,255,.07); color: #9ca3af; align-self: flex-start; flex-shrink: 0; }

.wh-config-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 12px 16px; border-radius: 12px; margin-bottom: 16px; font-size: .83rem; }
.wh-config-bar--ok   { background: rgba(22,163,74,.06); border: 1px solid rgba(74,222,128,.18); }
.wh-config-bar--warn { background: rgba(245,158,11,.06); border: 1px solid rgba(251,191,36,.18); }
.wcb-left { display: flex; align-items: center; gap: 8px; color: #d1d5db; }
.wcb-right { display: flex; align-items: center; gap: 16px; color: #9ca3af; flex-wrap: wrap; }
.wcb-right strong { color: #fff; }
.wcb-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.wh-config-bar--ok .wcb-dot   { background: #4ade80; box-shadow: 0 0 6px rgba(74,222,128,.5); }
.wh-config-bar--warn .wcb-dot { background: #fbbf24; }
.wcb-link { color: #60a5fa !important; font-weight: 600; text-decoration: none; }

.wh-url-box { background: var(--bg-dark-card,#0d1320); border: 1px solid rgba(59,130,246,.2); border-radius: 14px; padding: 16px 20px; margin-bottom: 20px; }
.wh-url-label { display: flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 600; color: #93c5fd; margin-bottom: 10px; }
.wh-url-copy { display: flex; gap: 10px; align-items: center; }
.wh-url-copy input { flex:1; padding: 9px 14px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.08); border-radius: 8px; color: #a5f3fc; font-size: .8rem; font-family: 'Courier New',monospace; outline: none; cursor: text; }

.wh-form-card { background: var(--bg-dark-card,#0d1320); border: 1px solid rgba(255,255,255,.07); border-radius: 20px; padding: 24px; margin-bottom: 20px; }
.wh-form-title { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; font-weight: 700; color: #fff; margin-bottom: 6px; }
.wh-form-desc { font-size: .85rem; color: #6b7280; margin-bottom: 20px; line-height: 1.6; }
.wh-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.wh-form-group { display: flex; flex-direction: column; gap: 6px; }
.wh-form-group label { font-size: .8rem; font-weight: 600; color: #d1d5db; }
.req { color: #f87171; }
.wh-form-group input,.wh-form-group select,.wh-form-group textarea { padding: 10px 14px; background: rgba(255,255,255,.04); border: 1.5px solid rgba(255,255,255,.1); border-radius: 10px; color: #fff; font-family: inherit; font-size: .88rem; outline: none; transition: all .2s; width: 100%; }
.wh-form-group input:focus,.wh-form-group select:focus,.wh-form-group textarea:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.12); }
.wh-form-group select option { background: #0d1320; color: #fff; }
.wh-field-hint { font-size: .75rem; color: #6b7280; }

.wh-sms-preview { background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.wsp-header { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 600; color: #6b7280; margin-bottom: 10px; }
.wsp-bubble { background: rgba(59,130,246,.06); border: 1px solid rgba(59,130,246,.14); border-radius: 10px; padding: 10px 14px; font-family: 'Courier New',monospace; font-size: .8rem; color: #a5f3fc; word-break: break-all; line-height: 1.5; }
.wsp-amount { color: #4ade80; font-weight: 700; }
.wsp-orderid { color: #fbbf24; font-weight: 700; }

.wh-advanced { background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.07); border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; font-size: .83rem; color: #6b7280; }
.wh-advanced summary { outline: none; user-select: none; font-weight: 600; cursor: pointer; }
.wh-warn { font-size: .82rem; color: #fbbf24; margin-top: 12px; text-align: center; }
.wh-warn a { color: #60a5fa; }

.wh-log-card { background: var(--bg-dark-card,#0d1320); border: 1px solid rgba(255,255,255,.07); border-radius: 20px; overflow: hidden; }
.wh-log-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.07); }
.wh-log-header h4 { display: flex; align-items: center; gap: 8px; font-size: .95rem; color: #fff; margin: 0; }
.wh-log-lines { max-height: 260px; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.log-line { font-family: 'Courier New',monospace; font-size: .7rem; line-height: 1.5; padding: 4px 8px; border-radius: 4px; color: #6b7280; word-break: break-all; }
.log-ok   { color: #4ade80; background: rgba(74,222,128,.04); }
.log-err  { color: #f87171; background: rgba(248,113,113,.04); }
.log-info { color: #60a5fa; background: rgba(96,165,250,.04); }
.wh-log-empty { padding: 20px; color: #4b5563; font-size: .85rem; text-align: center; margin: 0; }

.wh-orders-card { background: var(--bg-dark-card,#0d1320); border: 1px solid rgba(255,255,255,.07); border-radius: 20px; overflow: hidden; margin-bottom: 16px; }
.wh-orders-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.07); }
.wh-orders-header h3 { display: flex; align-items: center; gap: 8px; font-size: .95rem; color: #fff; margin: 0; }
.wh-orders-empty { padding: 24px; text-align: center; }
.wh-orders-empty p { color: #6b7280; margin-bottom: 12px; font-size: .88rem; }
.wh-orders-list { padding: 12px; display: flex; flex-direction: column; gap: 8px; max-height: 500px; overflow-y: auto; }
.wo-item { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; transition: border-color .2s; }
.wo-item:hover { border-color: rgba(59,130,246,.2); }
.wo-top { display: flex; align-items: center; justify-content: space-between; }
.wo-id { display: flex; flex-direction: column; gap: 1px; }
.wo-hash { font-size: .88rem; font-weight: 700; color: #fff; }
.wo-time { font-size: .72rem; color: #6b7280; }
.wo-middle { display: flex; justify-content: space-between; align-items: center; }
.wo-name { font-size: .8rem; color: #9ca3af; }
.wo-total .woocommerce-Price-amount { font-size: .88rem; font-weight: 700; color: #fff; }
.wo-ref { display: flex; align-items: center; gap: 8px; }
.wo-ref-label { font-size: .72rem; color: #6b7280; }
.wo-ref-code { font-size: .8rem; font-family: 'Courier New',monospace; color: #fbbf24; background: rgba(251,191,36,.07); padding: 3px 8px; border-radius: 6px; cursor: pointer; border: 1px solid rgba(251,191,36,.15); transition: background .2s; }
.wo-ref-code:hover { background: rgba(251,191,36,.14); }
.wo-test-btn { width: 100%; justify-content: center; font-size: .8rem !important; padding: 8px 16px !important; margin-top: 4px; }
.wo-partial { display: flex; flex-direction: column; gap: 4px; }
.wo-partial-bar { height: 4px; background: rgba(255,255,255,.07); border-radius: 2px; overflow: hidden; }
.wo-partial-fill { height: 100%; background: linear-gradient(90deg, #fbbf24, #f97316); border-radius: 2px; transition: width .5s; }
.wo-partial span { font-size: .72rem; color: #fbbf24; }

.wo-status { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 9999px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.wo-status--ok         { background: rgba(22,163,74,.1); color: #4ade80; border: 1px solid rgba(74,222,128,.2); }
.wo-status--processing { background: rgba(59,130,246,.1); color: #60a5fa; border: 1px solid rgba(96,165,250,.2); }
.wo-status--hold       { background: rgba(251,191,36,.08); color: #fbbf24; border: 1px solid rgba(251,191,36,.2); }
.wo-status--warn       { background: rgba(245,158,11,.08); color: #fb923c; border: 1px solid rgba(251,146,60,.2); }
.wo-status--err        { background: rgba(220,38,38,.08); color: #f87171; border: 1px solid rgba(248,113,113,.2); }
.wo-status--info       { background: rgba(255,255,255,.05); color: #9ca3af; border: 1px solid rgba(255,255,255,.1); }
.status-chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 9999px; font-size: .75rem; font-weight: 700; }
.status-chip--completed { background: rgba(22,163,74,.1); color: #4ade80; }
.status-chip--on-hold, .status-chip--pending { background: rgba(251,191,36,.08); color: #fbbf24; }
.status-chip--processing { background: rgba(59,130,246,.1); color: #60a5fa; }

.wh-info-card { background: var(--bg-dark-card,#0d1320); border: 1px solid rgba(255,255,255,.07); border-radius: 16px; padding: 20px; }
.wh-info-card h4 { font-size: .95rem; color: #fff; margin-bottom: 14px; }
.wh-info-steps { padding-left: 16px; display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; list-style: decimal; }
.wh-info-steps li { font-size: .83rem; color: #9ca3af; line-height: 1.6; }
.wh-info-steps a { color: #60a5fa; }
.wh-info-steps strong { color: #fff; }
.wh-info-note { padding: 10px 12px; background: rgba(59,130,246,.06); border: 1px solid rgba(59,130,246,.15); border-radius: 8px; font-size: .8rem; color: #93c5fd; }
.wh-info-note code { background: rgba(59,130,246,.1); padding: 1px 6px; border-radius: 4px; font-family: 'Courier New',monospace; color: #fbbf24; }

/* ══════════════════════════════════════════════════════════
   CART PAGE — Full table & totals dark theme
   ══════════════════════════════════════════════════════════ */

body.woocommerce-cart .page-main {
    padding-top: var(--header-h, 72px) !important;
}
/* Cart page: form (left) + totals sidebar (right) */
body.woocommerce-cart .woocommerce {
    display: grid !important;
    grid-template-columns: 1fr 380px !important;
    gap: 32px !important;
    align-items: start !important;
    padding-top: 32px !important;
}
/* Full-width: notices, errors */
body.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper,
body.woocommerce-cart .woocommerce > .woocommerce-error,
body.woocommerce-cart .woocommerce > .woocommerce-message,
body.woocommerce-cart .woocommerce > .woocommerce-info {
    grid-column: 1 / -1 !important;
}
/* Left column: cart form table */
body.woocommerce-cart .woocommerce > .woocommerce-cart-form {
    grid-column: 1 !important;
    min-width: 0 !important;
}
/* Right column: totals (sticky) */
body.woocommerce-cart .woocommerce > .cart-collaterals {
    grid-column: 2 !important;
    position: sticky !important;
    top: calc(var(--header-h, 72px) + 16px) !important;
}

/* ── Empty cart ── */
.wc-empty-cart-message {
    text-align: center !important;
    padding: 60px 24px !important;
}
.wc-empty-cart-message .woocommerce-info {
    max-width: 480px !important;
    margin: 0 auto 24px !important;
    font-size: 1rem !important;
    padding: 20px 24px 20px 56px !important;
}
.wc-empty-cart-message .return-to-shop { margin-top: 8px !important; }
.return-to-shop .wc-backward,
.wc-backward {
    display: inline-flex !important; align-items: center !important; gap: 8px !important;
    background: linear-gradient(135deg, #2563eb, #4f46e5) !important;
    color: #fff !important; font-weight: 700 !important; font-size: .9rem !important;
    padding: 13px 24px !important; border-radius: 12px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 20px rgba(59,130,246,.35) !important;
    transition: all .3s !important;
}
.wc-backward:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 32px rgba(59,130,246,.5) !important; }
.wc-backward::before { content: '← '; }

/* ── Cart layout ── */
.woocommerce-cart-form { margin-bottom: 32px !important; }

/* Cart table */
table.shop_table,
table.woocommerce-cart-form__contents {
    width: 100% !important;
    border-collapse: collapse !important;
    background: var(--bg-dark-card, #0d1320) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    font-size: .9rem !important;
}
table.shop_table thead {
    background: rgba(255,255,255,.025) !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
}
table.shop_table thead th {
    padding: 14px 20px !important;
    font-size: .72rem !important; font-weight: 800 !important;
    color: #6b7280 !important;
    text-transform: uppercase !important; letter-spacing: .1em !important;
    border: none !important;
}
table.shop_table tbody td {
    padding: 18px 20px !important;
    border-bottom: 1px solid rgba(255,255,255,.05) !important;
    color: #9ca3af !important; vertical-align: middle !important;
    border-right: none !important; border-left: none !important; border-top: none !important;
}
table.shop_table tbody tr:last-child td { border-bottom: none !important; }

/* Product cell */
.product-thumbnail img {
    width: 64px !important; height: 64px !important;
    object-fit: cover !important; border-radius: 10px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
}
.product-name { color: #e2e8f0 !important; }
.product-name a { color: #e2e8f0 !important; font-weight: 600 !important; text-decoration: none !important; }
.product-name a:hover { color: #60a5fa !important; }
.product-price .woocommerce-Price-amount,
.product-subtotal .woocommerce-Price-amount { color: #fff !important; font-weight: 700 !important; }

/* Remove button */
a.remove {
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 28px !important; height: 28px !important;
    border-radius: 8px !important;
    background: rgba(248,113,113,.1) !important;
    border: 1px solid rgba(248,113,113,.2) !important;
    color: #f87171 !important; font-size: 1rem !important; font-weight: 700 !important;
    text-decoration: none !important;
    transition: all .2s !important;
}
a.remove:hover { background: rgba(248,113,113,.25) !important; color: #fca5a5 !important; }

/* Quantity input */
.quantity .qty {
    background: rgba(255,255,255,.05) !important;
    border: 1.5px solid rgba(255,255,255,.1) !important;
    border-radius: 10px !important; color: #fff !important;
    font-size: .9rem !important; font-weight: 600 !important;
    padding: 8px 12px !important; width: 70px !important;
    text-align: center !important;
    -webkit-appearance: none !important;
}
.quantity .qty:focus { border-color: #3b82f6 !important; box-shadow: 0 0 0 3px rgba(59,130,246,.12) !important; outline: none !important; }

/* Coupon row */
.cart-contents td.actions {
    background: rgba(255,255,255,.015) !important;
}
.coupon { display: flex !important; align-items: center !important; gap: 10px !important; flex-wrap: wrap !important; }
.coupon input#coupon_code {
    background: rgba(255,255,255,.05) !important;
    border: 1.5px solid rgba(255,255,255,.1) !important;
    border-radius: 12px !important; color: #fff !important;
    font-size: .88rem !important; padding: 11px 16px !important;
    outline: none !important; width: 200px !important;
    transition: border-color .2s !important;
}
.coupon input#coupon_code:focus { border-color: #3b82f6 !important; }
.coupon input#coupon_code::placeholder { color: #4b5563 !important; }
.coupon .button,
button[name="apply_coupon"] {
    background: rgba(59,130,246,.12) !important;
    border: 1.5px solid rgba(59,130,246,.3) !important;
    border-radius: 12px !important; color: #93c5fd !important;
    font-size: .875rem !important; font-weight: 700 !important;
    padding: 11px 20px !important; cursor: pointer !important;
    transition: all .2s !important;
}
.coupon .button:hover { background: rgba(59,130,246,.22) !important; }

/* Update cart button */
button[name="update_cart"] {
    background: rgba(255,255,255,.05) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 12px !important; color: #9ca3af !important;
    font-size: .875rem !important; padding: 11px 20px !important;
    cursor: pointer !important; transition: all .2s !important;
}
button[name="update_cart"]:hover { background: rgba(255,255,255,.1) !important; color: #fff !important; }

/* ── Cart Totals ── */
.cart_totals {
    background: var(--bg-dark-card, #0d1320) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 20px !important; overflow: hidden !important;
}
.cart_totals h2 {
    padding: 18px 24px !important; margin: 0 !important;
    font-size: .78rem !important; font-weight: 800 !important;
    color: #6b7280 !important; text-transform: uppercase !important; letter-spacing: .1em !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    background: rgba(255,255,255,.025) !important;
}
.cart_totals table { width: 100% !important; border-collapse: collapse !important; }
.cart_totals table th {
    padding: 14px 24px !important;
    color: #9ca3af !important; font-size: .85rem !important; font-weight: 500 !important;
    border-bottom: 1px solid rgba(255,255,255,.05) !important;
    text-align: left !important; vertical-align: middle !important;
    background: transparent !important; width: 40% !important;
}
.cart_totals table td {
    padding: 14px 24px !important;
    color: #e2e8f0 !important; font-size: .9rem !important; font-weight: 600 !important;
    border-bottom: 1px solid rgba(255,255,255,.05) !important;
    vertical-align: middle !important; background: transparent !important;
}
.cart_totals table .order-total th,
.cart_totals table .order-total td {
    color: #fff !important; font-size: 1.05rem !important; font-weight: 800 !important;
    border-top: 2px solid rgba(255,255,255,.1) !important;
    border-bottom: none !important;
    padding-top: 18px !important; padding-bottom: 18px !important;
}
.cart_totals table .order-total .woocommerce-Price-amount { color: #fff !important; }
.cart_totals .woocommerce-shipping-destination { font-size: .8rem !important; color: #6b7280 !important; }

/* Checkout button in cart totals */
.wc-proceed-to-checkout {
    padding: 20px 24px !important;
}
.wc-proceed-to-checkout .checkout-button,
a.checkout-button {
    display: flex !important; align-items: center !important; justify-content: center !important;
    gap: 10px !important; width: 100% !important;
    background-image: linear-gradient(135deg, #1d4ed8 0%, #4f46e5 50%, #7c3aed 100%) !important;
    background-size: 200% 200% !important; background-position: 0% 50% !important;
    border: none !important; border-radius: 16px !important;
    color: #fff !important; font-size: 1.05rem !important; font-weight: 800 !important;
    padding: 18px 28px !important; text-decoration: none !important;
    cursor: pointer !important; letter-spacing: .01em !important;
    box-shadow: 0 6px 32px rgba(79,70,229,.45) !important;
    transition: background-position .5s ease, transform .3s, box-shadow .3s !important;
}
.checkout-button:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 48px rgba(79,70,229,.6) !important;
    background-position: 100% 50% !important;
}
.checkout-button::before { content: '🛒'; font-size: .95rem; }

/* Remove WooCommerce default floats on cart col items */
.woocommerce-cart .col-1,
.woocommerce-cart .col-2 { float: none !important; width: auto !important; }

/* ══════════════════════════════════════════════════════════
   MY ACCOUNT PAGE — Login, Register, Dashboard, Orders
   ══════════════════════════════════════════════════════════ */

body.woocommerce-account .page-main {
    padding-top: var(--header-h, 72px) !important;
}
.ctt-account-wrap {
    padding-top: 40px !important;
}

/* ── Login / Register page: block layout (chưa đăng nhập) ── */
body:not(.logged-in).woocommerce-account .woocommerce,
.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) {
    display: block !important;
    max-width: 940px !important;
    margin: 0 auto !important;
}
/* Login + Register columns side by side */
.woocommerce-account .col2-set {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
    align-items: start !important;
}
.woocommerce-account .col-1,
.woocommerce-account .col-2 { float: none !important; width: auto !important; }

.woocommerce-form-login,
.woocommerce-form-register {
    background: var(--bg-dark-card, #0d1320) !important;
    border: 1px solid rgba(59,130,246,.18) !important;
    border-radius: 24px !important;
    padding: 36px !important;
    position: relative !important;
    box-shadow: 0 8px 40px rgba(59,130,246,.08), 0 0 60px rgba(59,130,246,.05) !important;
}
.woocommerce-form-login::before,
.woocommerce-form-register::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #2563eb, #8b5cf6, #22d3ee);
    border-radius: 24px 24px 0 0;
}

/* Form header h2 */
body.woocommerce-account .woocommerce > h2,
body.woocommerce-account .woocommerce > h3 {
    font-size: 1.3rem !important; font-weight: 800 !important;
    color: #fff !important; margin-bottom: 20px !important;
    letter-spacing: -.02em !important;
    display: flex !important; align-items: center !important; gap: 10px !important;
}
body.woocommerce-account .woocommerce > h2::before { content: '🔐'; font-size: 1.1rem; }

/* Form rows */
.woocommerce-form-login .form-row,
.woocommerce-form-register .form-row {
    float: none !important; display: block !important;
    width: 100% !important; box-sizing: border-box !important;
    margin: 0 0 18px !important; padding: 0 !important;
}
.woocommerce-form-login label,
.woocommerce-form-register label {
    display: block !important;
    font-size: .78rem !important; font-weight: 700 !important;
    color: #9ca3af !important; margin-bottom: 8px !important;
    text-transform: uppercase !important; letter-spacing: .06em !important;
}
.woocommerce-form-login .woocommerce-Input,
.woocommerce-form-register .woocommerce-Input,
.woocommerce-form-login input[type="text"],
.woocommerce-form-login input[type="password"],
.woocommerce-form-login input[type="email"],
.woocommerce-form-register input[type="text"],
.woocommerce-form-register input[type="password"],
.woocommerce-form-register input[type="email"] {
    display: block !important; width: 100% !important; box-sizing: border-box !important;
    background: rgba(255,255,255,.04) !important;
    border: 1.5px solid rgba(255,255,255,.1) !important;
    border-radius: 14px !important; color: #fff !important;
    font-family: var(--font-base,'Inter',sans-serif) !important;
    font-size: .95rem !important; padding: 14px 18px !important;
    outline: none !important; -webkit-appearance: none !important;
    transition: border-color .2s, box-shadow .2s !important;
}
.woocommerce-form-login input:focus,
.woocommerce-form-register input:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 4px rgba(59,130,246,.14) !important;
    background: rgba(59,130,246,.04) !important;
}
.woocommerce-form-login input::placeholder,
.woocommerce-form-register input::placeholder { color: #374151 !important; }

/* Remember me checkbox row */
.woocommerce-form-login__rememberme {
    display: flex !important; align-items: center !important; gap: 8px !important;
    font-size: .85rem !important; color: #9ca3af !important; margin-bottom: 4px !important;
}
.woocommerce-form__input-checkbox { accent-color: #3b82f6 !important; width: 16px !important; height: 16px !important; }

/* Submit buttons */
.woocommerce-form-login__submit,
.woocommerce-form-register__submit,
.woocommerce-Button--alt,
.woocommerce button[type="submit"] {
    display: flex !important; align-items: center !important; justify-content: center !important;
    gap: 8px !important; width: 100% !important;
    background-image: linear-gradient(135deg, #1d4ed8 0%, #4f46e5 50%, #7c3aed 100%) !important;
    background-size: 200% 200% !important; background-position: 0% 50% !important;
    border: none !important; border-radius: 14px !important;
    color: #fff !important; font-size: 1rem !important; font-weight: 800 !important;
    padding: 16px 24px !important; cursor: pointer !important;
    letter-spacing: .01em !important;
    box-shadow: 0 5px 24px rgba(79,70,229,.4) !important;
    transition: background-position .5s ease, transform .3s, box-shadow .3s !important;
    font-family: var(--font-base,'Inter',sans-serif) !important;
}
.woocommerce-form-login__submit:hover,
.woocommerce-form-register__submit:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 36px rgba(79,70,229,.6) !important;
    background-position: 100% 50% !important;
}
.woocommerce-form-login__submit::before { content: '🔓'; font-size: .9rem; }

/* Lost password / Register links */
.woocommerce-LostPassword,
.lost_password { margin-top: 16px !important; text-align: center !important; }
.woocommerce-LostPassword a,
.lost_password a { color: #60a5fa !important; font-size: .85rem !important; text-decoration: none !important; }
.woocommerce-LostPassword a:hover { color: #93c5fd !important; text-decoration: underline !important; }

/* Divider between login & register */
.woocommerce-account .u-column1,
.woocommerce-account .u-column2 {
    background: var(--bg-dark-card, #0d1320) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 24px !important; padding: 32px !important;
    position: relative !important; overflow: hidden !important;
}
.woocommerce-account .u-column1::before,
.woocommerce-account .u-column2::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #2563eb, #8b5cf6, #22d3ee);
}

/* ── My Account dashboard ── */
.woocommerce-MyAccount-navigation {
    background: var(--bg-dark-card, #0d1320) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 20px !important; overflow: hidden !important;
}
.woocommerce-MyAccount-navigation ul {
    list-style: none !important; margin: 0 !important; padding: 8px !important;
}
.woocommerce-MyAccount-navigation ul li { margin: 0 !important; padding: 0 !important; }
.woocommerce-MyAccount-navigation ul li a {
    display: flex !important; align-items: center !important; gap: 10px !important;
    padding: 12px 16px !important;
    color: #9ca3af !important; font-size: .88rem !important; font-weight: 500 !important;
    text-decoration: none !important;
    border-radius: 12px !important;
    transition: all .2s !important;
}
.woocommerce-MyAccount-navigation ul li a:hover {
    background: rgba(59,130,246,.08) !important; color: #93c5fd !important;
}
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--is-active a {
    background: linear-gradient(135deg, rgba(37,99,235,.15), rgba(99,102,241,.1)) !important;
    color: #fff !important; font-weight: 700 !important;
    border: 1px solid rgba(59,130,246,.25) !important;
}

/* Content area */
.woocommerce-MyAccount-content {
    background: var(--bg-dark-card, #0d1320) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 20px !important; padding: 28px !important;
    color: #9ca3af !important;
}
.woocommerce-MyAccount-content p { color: #9ca3af !important; line-height: 1.7 !important; }
.woocommerce-MyAccount-content a { color: #60a5fa !important; }
.woocommerce-MyAccount-content strong { color: #e2e8f0 !important; }

/* Account dashboard: float-based layout — nav trái, content phải, cùng 1 hàng */
.woocommerce-account .woocommerce-MyAccount-navigation {
    float: left !important;
    width: 220px !important;
}
.woocommerce-account .woocommerce-MyAccount-content {
    float: right !important;
    width: calc(100% - 248px) !important;
}
/* Clearfix cho container */
body.logged-in.woocommerce-account .woocommerce {
    display: block !important;
    overflow: hidden !important;
}

/* Orders table in My Account */
.woocommerce-orders-table,
.woocommerce-table--order-downloads {
    width: 100% !important; border-collapse: collapse !important;
    font-size: .875rem !important;
}
.woocommerce-orders-table thead th,
.woocommerce-table--order-downloads thead th {
    padding: 12px 14px !important;
    font-size: .72rem !important; font-weight: 800 !important;
    color: #6b7280 !important; text-transform: uppercase !important; letter-spacing: .06em !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important; background: rgba(255,255,255,.02) !important;
    white-space: nowrap !important;
}
.woocommerce-orders-table tbody td,
.woocommerce-table--order-downloads tbody td {
    padding: 14px 14px !important;
    border-bottom: 1px solid rgba(255,255,255,.05) !important;
    color: #9ca3af !important; vertical-align: middle !important;
    white-space: nowrap !important;
}
/* Chỉ cột tổng tiền cho phép wrap nếu cần */
.woocommerce-orders-table .order-total { white-space: normal !important; }
.woocommerce-orders-table .order-number a { color: #60a5fa !important; font-weight: 700 !important; }
/* Trạng thái: badge màu */
.woocommerce-orders-table .order-status mark {
    background: transparent !important;
    padding: 4px 10px !important;
    border-radius: 99px !important;
    font-size: .75rem !important;
    font-weight: 700 !important;
}
.woocommerce-orders-table .order-status mark.completed   { background: rgba(22,163,74,.12) !important; color: #4ade80 !important; border: 1px solid rgba(74,222,128,.25) !important; }
.woocommerce-orders-table .order-status mark.processing  { background: rgba(59,130,246,.1) !important; color: #60a5fa !important; border: 1px solid rgba(96,165,250,.2) !important; }
.woocommerce-orders-table .order-status mark.on-hold     { background: rgba(251,191,36,.08) !important; color: #fbbf24 !important; border: 1px solid rgba(251,191,36,.2) !important; }
.woocommerce-orders-table .order-status mark.pending     { background: rgba(251,191,36,.08) !important; color: #fbbf24 !important; border: 1px solid rgba(251,191,36,.2) !important; }
.woocommerce-orders-table .order-status mark.cancelled   { background: rgba(248,113,113,.08) !important; color: #f87171 !important; border: 1px solid rgba(248,113,113,.2) !important; }
.woocommerce-orders-table .woocommerce-Price-amount { color: #fff !important; font-weight: 700 !important; }
.woocommerce-orders-table .order-actions a,
.woocommerce-orders-table .button {
    display: inline-flex !important; align-items: center !important;
    padding: 6px 14px !important; border-radius: 8px !important;
    background: rgba(59,130,246,.12) !important; border: 1px solid rgba(59,130,246,.25) !important;
    color: #93c5fd !important; font-size: .8rem !important; font-weight: 600 !important;
    text-decoration: none !important; transition: all .2s !important;
}
.woocommerce-orders-table .button:hover { background: rgba(59,130,246,.25) !important; }

/* No orders message */
.woocommerce-MyAccount-content .woocommerce-Message {
    background: rgba(37,99,235,.06) !important;
    border: 1px solid rgba(59,130,246,.2) !important;
    border-radius: 14px !important; padding: 20px 24px !important;
    color: #93c5fd !important;
}
.woocommerce-MyAccount-content .woocommerce-Message a.button {
    background: linear-gradient(135deg, #2563eb, #4f46e5) !important;
    color: #fff !important; border: none !important;
    padding: 10px 20px !important; border-radius: 10px !important;
    font-weight: 700 !important; text-decoration: none !important;
    display: inline-flex !important;
}

/* ── Account addresses / edit forms ── */
.woocommerce-address-fields input,
.woocommerce-address-fields select,
.woocommerce-EditAccountForm input,
.woocommerce-EditAccountForm select,
.woocommerce-EditAccountForm textarea,
.edit-account input,
.edit-account select {
    background: rgba(255,255,255,.04) !important;
    border: 1.5px solid rgba(255,255,255,.1) !important;
    border-radius: 12px !important; color: #fff !important;
    font-size: .9rem !important; padding: 12px 16px !important;
    width: 100% !important; box-sizing: border-box !important;
    outline: none !important; transition: border-color .2s !important;
    font-family: var(--font-base,'Inter',sans-serif) !important;
}
.woocommerce-address-fields input:focus,
.woocommerce-EditAccountForm input:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.12) !important;
}
.woocommerce-address-fields label,
.woocommerce-EditAccountForm label,
.edit-account label {
    font-size: .78rem !important; font-weight: 700 !important;
    color: #9ca3af !important; text-transform: uppercase !important;
    letter-spacing: .05em !important; display: block !important; margin-bottom: 7px !important;
}

/* Account save button */
.woocommerce-account .woocommerce-Button,
.woocommerce-account button[type="submit"]:not(.woocommerce-form-login__submit) {
    background-image: linear-gradient(135deg, #1d4ed8 0%, #4f46e5 100%) !important;
    border: none !important; border-radius: 12px !important;
    color: #fff !important; font-weight: 700 !important;
    padding: 13px 28px !important; cursor: pointer !important;
    box-shadow: 0 4px 20px rgba(59,130,246,.35) !important;
    transition: all .3s !important;
    font-family: var(--font-base,'Inter',sans-serif) !important;
}
.woocommerce-account .woocommerce-Button:hover { transform: translateY(-2px) !important; }

/* Password reset / Lost password form */
.woocommerce-ResetPassword .form-row,
.lost_reset_password .form-row {
    float: none !important; display: block !important;
    width: 100% !important; margin-bottom: 16px !important;
}
.woocommerce-ResetPassword input { width: 100% !important; }

/* ══════════════════════════════════════════════════════════
   GENERAL WC BUTTONS & COMMON ELEMENTS
   ══════════════════════════════════════════════════════════ */

/* Generic WC buttons (not already styled) */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    background: rgba(59,130,246,.12) !important;
    border: 1.5px solid rgba(59,130,246,.3) !important;
    color: #93c5fd !important; border-radius: 10px !important;
    font-size: .875rem !important; font-weight: 600 !important;
    padding: 10px 20px !important; cursor: pointer !important;
    text-decoration: none !important; display: inline-flex !important;
    align-items: center !important; gap: 6px !important;
    transition: all .2s !important;
    font-family: var(--font-base,'Inter',sans-serif) !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover { background: rgba(59,130,246,.22) !important; color: #fff !important; }

/* Alt / primary button */
.woocommerce a.button.alt,
.woocommerce button.button.alt {
    background: linear-gradient(135deg, #2563eb, #4f46e5) !important;
    border: none !important; color: #fff !important;
    box-shadow: 0 4px 20px rgba(59,130,246,.35) !important;
}
.woocommerce a.button.alt:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 32px rgba(59,130,246,.5) !important; }

/* WC notices already covered above */

/* ── Shop / Archive page ── */

/* Shop header */
.ctt-shop-wrap .woocommerce-products-header { margin-bottom: 8px; }
.ctt-shop-wrap .woocommerce-products-header__title,
.ctt-shop-wrap h1.page-title {
    font-size: 26px !important; font-weight: 800 !important;
    color: #f1f5f9 !important; margin: 0 0 4px !important;
}
.ctt-shop-wrap .woocommerce-result-count {
    font-size: 13px !important; color: #475569 !important; margin: 0 0 20px !important;
}
.ctt-shop-wrap .woocommerce-ordering {
    float: right !important; margin: 0 0 20px !important;
}
.ctt-shop-wrap .woocommerce-ordering select {
    background: #0d1320 !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    color: #e2e8f0 !important;
    border-radius: 10px !important; padding: 8px 14px !important;
    font-size: 13px !important; outline: none !important;
}

/* Products grid — reset WooCommerce float/width first */
.ctt-shop-wrap ul.products,
.woocommerce .ctt-shop-wrap ul.products,
.woocommerce-page .ctt-shop-wrap ul.products {
    list-style: none !important;
    margin: 0 !important; padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 24px !important;
    float: none !important;
    clear: both !important;
}

/* Override WC column-based float widths */
.ctt-shop-wrap ul.products li.product,
.woocommerce .ctt-shop-wrap ul.products li.product,
.woocommerce-page .ctt-shop-wrap ul.products li.product,
.woocommerce ul.products.columns-2 li.product,
.woocommerce ul.products.columns-3 li.product,
.woocommerce ul.products.columns-4 li.product,
.woocommerce-page ul.products.columns-2 li.product,
.woocommerce-page ul.products.columns-3 li.product,
.woocommerce-page ul.products.columns-4 li.product {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    background: var(--bg-dark-card, #0d1320) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 20px !important; overflow: hidden !important;
    transition: border-color .3s, box-shadow .3s !important;
    display: flex !important; flex-direction: column !important;
}
.ctt-shop-wrap ul.products li.product:hover {
    border-color: rgba(59,130,246,.3) !important;
    box-shadow: 0 8px 40px rgba(59,130,246,.1) !important;
}
.ctt-shop-wrap ul.products li.product a.woocommerce-loop-product__link {
    text-decoration: none !important; display: block !important; flex: 1 !important;
}
.ctt-shop-wrap ul.products li.product img {
    width: 100% !important; height: 200px !important;
    object-fit: cover !important; display: block !important;
}
.ctt-shop-wrap ul.products li.product .woocommerce-loop-product__title {
    font-size: .95rem !important; font-weight: 700 !important;
    color: #e2e8f0 !important; padding: 16px 18px 6px !important; margin: 0 !important;
    line-height: 1.4 !important;
}
.ctt-shop-wrap ul.products li.product .price {
    padding: 0 18px 16px !important; display: block !important;
    color: #60a5fa !important; font-size: 1.05rem !important; font-weight: 800 !important;
}
.ctt-shop-wrap ul.products li.product .price .woocommerce-Price-amount {
    color: #60a5fa !important;
}
.ctt-shop-wrap ul.products li.product .button {
    margin: auto 18px 18px !important; display: block !important; text-align: center !important;
    background: rgba(59,130,246,.1) !important;
    border: 1px solid rgba(59,130,246,.25) !important;
    border-radius: 10px !important; color: #93c5fd !important;
    padding: 10px 14px !important;
    font-weight: 700 !important; font-size: .85rem !important;
    transition: all .2s !important;
}
.ctt-shop-wrap ul.products li.product .button:hover {
    background: rgba(59,130,246,.2) !important;
    border-color: rgba(59,130,246,.4) !important;
    color: #bfdbfe !important;
}

/* WC notices inside shop */
.ctt-shop-wrap .woocommerce-info,
.ctt-shop-wrap .woocommerce-notices-wrapper { margin-bottom: 20px !important; }

@media (max-width: 640px) {
    .ctt-shop-wrap ul.products,
    .woocommerce .ctt-shop-wrap ul.products {
        grid-template-columns: 1fr 1fr !important;
        gap: 14px !important;
    }
}
@media (max-width: 420px) {
    .ctt-shop-wrap ul.products,
    .woocommerce .ctt-shop-wrap ul.products {
        grid-template-columns: 1fr !important;
    }
}

/* WC pagination */
.woocommerce-pagination ul {
    list-style: none !important; display: flex !important; gap: 6px !important;
    justify-content: center !important; flex-wrap: wrap !important;
    margin: 32px 0 !important; padding: 0 !important;
}
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 40px !important; height: 40px !important;
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 10px !important; color: #9ca3af !important;
    font-size: .875rem !important; font-weight: 600 !important;
    text-decoration: none !important; transition: all .2s !important;
}
.woocommerce-pagination ul li a:hover { background: rgba(59,130,246,.12) !important; color: #93c5fd !important; border-color: rgba(59,130,246,.3) !important; }
.woocommerce-pagination ul li span.current {
    background: linear-gradient(135deg, #2563eb, #4f46e5) !important;
    border-color: transparent !important; color: #fff !important;
}

/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */
@media (max-width: 1024px) {
    form.woocommerce-checkout { grid-template-columns: 1fr !important; grid-template-areas: "billing" "review" !important; }
    #order_review { position: static !important; }
    .cart-page-grid { grid-template-columns: 1fr; }
    .wh-grid { grid-template-columns: 1fr; }
    /* Cart: stack vertically */
    body.woocommerce-cart .woocommerce { grid-template-columns: 1fr !important; }
    body.woocommerce-cart .woocommerce > .cart-collaterals { grid-column: 1 !important; position: static !important; top: auto !important; }
    /* Account dashboard: stack nav above content on tablet */
    .woocommerce-account .woocommerce-MyAccount-navigation {
        float: none !important;
        width: 100% !important;
        margin-bottom: 16px !important;
    }
    .woocommerce-account .woocommerce-MyAccount-content {
        float: none !important;
        width: 100% !important;
    }
}
@media (max-width: 768px) {
    /* Account login: stack login + register */
    .woocommerce-account .col2-set { grid-template-columns: 1fr !important; }
    table.shop_table thead .product-thumbnail { display: none !important; }
    table.shop_table .product-thumbnail { display: none !important; }
    table.shop_table td { padding: 12px 12px !important; }
    .woocommerce-form-login,
    .woocommerce-form-register { padding: 24px !important; }
    .ctt-account-wrap { padding-top: 24px !important; }
}
@media (max-width: 640px) {
    .ctt-progress-steps { padding: 0 12px; }
    .cps em { display: none; }
    .cps { min-width: 44px; }
    .cps-line { min-width: 16px; }
    .cart-product-features { grid-template-columns: 1fr; }
    .wh-form-row { grid-template-columns: 1fr; }
    .woocommerce-billing-fields__field-wrapper { padding: 18px !important; }
    .coupon { flex-direction: column !important; }
    .coupon input#coupon_code { width: 100% !important; }
    table.shop_table { font-size: .8rem !important; }
    .cart_totals table th,
    .cart_totals table td { padding: 12px 16px !important; }
    .woocommerce-orders-table { font-size: .8rem !important; }
    .woocommerce-orders-table thead th,
    .woocommerce-orders-table tbody td { padding: 10px 12px !important; }
}