:root {
	--wd-text-font: "Roboto", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: rgb(0,0,0);
	--wd-text-font-size: 14px;
	--wd-title-font: "Roboto", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 500;
	--wd-title-color: #242424;
	--wd-entities-title-font: "Urbanist", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 500;
	--wd-entities-title-color: #333333;
	--wd-entities-title-color-hover: rgb(51 51 51 / 65%);
	--wd-alternative-font: "Roboto", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "Roboto", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 600;
	--wd-widget-title-transform: none;
	--wd-widget-title-color: #333;
	--wd-widget-title-font-size: 16px;
	--wd-header-el-font: "Roboto", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 600;
	--wd-header-el-transform: capitalize;
	--wd-header-el-font-size: 15px;
	--wd-brd-radius: 20px;
	--wd-otl-style: dotted;
	--wd-otl-width: 2px;
	--wd-primary-color: rgb(41,133,255);
	--wd-alternative-color: rgba(41,133,255,0.38);
	--btn-default-bgcolor: rgb(225,235,255);
	--btn-default-bgcolor-hover: rgb(219,227,249);
	--btn-default-color: rgb(41,133,255);
	--btn-default-color-hover: rgb(41,133,255);
	--btn-accented-bgcolor: rgb(41,133,255);
	--btn-accented-bgcolor-hover: rgb(41,133,255);
	--btn-transform: capitalize;
	--wd-form-brd-width: 1px;
	--notices-success-bg: #459647;
	--notices-success-color: #fff;
	--notices-warning-bg: #E0B252;
	--notices-warning-color: #fff;
	--wd-link-color: rgb(0,122,255);
	--wd-link-color-hover: rgb(0,63,255);
}
.wd-age-verify-wrap {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: #111111;
	background-image: none;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left center;
}
.wd-promo-popup-wrap {
	--wd-popup-width: 800px;
}
:is(.woodmart-archive-shop .wd-builder-off,.wd-wishlist-content,.related-and-upsells,.cart-collaterals,.wd-shop-product,.wd-fbt) .wd-products-with-bg, :is(.woodmart-archive-shop .wd-builder-off,.wd-wishlist-content,.related-and-upsells,.cart-collaterals,.wd-shop-product,.wd-fbt) .wd-products-with-bg :is(.wd-product,.wd-cat) {
	--wd-prod-bg:rgb(255,255,255);
	--wd-bordered-bg:rgb(255,255,255);
}
:is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content {
	max-height: 223px;
}
.wd-page-title .wd-page-title-bg img {
	object-fit: cover;
	object-position: center center;
}
.wd-footer {
	background-color: rgb(255,255,255);
	background-image: none;
}
html .product.wd-cat .wd-entities-title, html .product.wd-cat.cat-design-replace-title .wd-entities-title, html .wd-masonry-first .wd-cat:first-child .wd-entities-title {
	font-family: "Roboto", Arial, Helvetica, sans-serif;
	font-size: 15px;
	text-transform: none;
}
 {
	font-family: "Roboto", Arial, Helvetica, sans-serif;
	font-weight: 700;
}
html .page-title > .container > .title, html .page-title .wd-title-wrapp > .title {
	font-family: "Roboto", Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-size: 30px;
	text-transform: capitalize;
}
html .wd-nav-mobile > li > a, html .wd-nav-mobile .wd-sub-menu li a {
	font-family: "Roboto", Arial, Helvetica, sans-serif;
	text-transform: none;
}
:is(.page, .search-no-results, .error404) :is(.wd-page-content, .whb-header) {
	background-color: rgb(246,245,248);
	background-image: none;
}
.woodmart-archive-shop:not(.single-product) :is(.wd-page-content, .whb-header) {
	background-color: rgb(246,245,248);
	background-image: none;
}
.woodmart-archive-blog :is(.wd-page-content, .whb-header) {
	background-color: rgb(246,245,248);
	background-image: none;
}
.single-post :is(.wd-page-content, .whb-header) {
	background-color: rgb(246,245,248);
	background-image: none;
}
html .btn.wd-buy-now-btn {
	color: rgb(225,74,92);
	background: rgb(249,219,223);
}
html .btn.wd-buy-now-btn:hover {
	color: rgb(225,74,92);
	background: rgb(237,208,211);
}
body, [class*=color-scheme-light], [class*=color-scheme-dark], .wd-search-form[class*="wd-header-search-form"] form.searchform, .wd-el-search .searchform {
	--wd-form-color: rgb(119,119,119);
	--wd-form-placeholder-color: rgb(119,119,119);
	--wd-form-bg: rgb(255,255,255);
}
.wd .product-label.onsale {
	background-color: rgb(241,129,13);
}
.wd .product-label.featured {
	background-color: rgb(225,74,92);
}
.wd .product-label.out-of-stock {
	background-color: rgb(255,255,255);
}
.mfp-wrap.wd-popup-quick-view-wrap {
	--wd-popup-width: 920px;
}

@media (max-width: 1024px) {
	html .page-title > .container > .title, html .page-title .wd-title-wrapp > .title {
		font-size: 24px;
	}

}

@media (max-width: 768.98px) {
	html .page-title > .container > .title, html .page-title .wd-title-wrapp > .title {
		font-size: 22px;
	}

}
:root{
--wd-container-w: 1660px;
--wd-form-brd-radius: 35px;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 35px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-accented-brd-radius: 35px;
--btn-accented-box-shadow: none;
--btn-accented-box-shadow-hover: none;
}

@media (min-width: 1660px) {
section.elementor-section.wd-section-stretch > .elementor-container {
margin-left: auto;
margin-right: auto;
}
}



/* Ẩn chữ "Buy now" cũ */
button#wd-add-to-cart.wd-buy-now-btn {
    font-size: 0 !important;
}

/* Thêm chữ "Mua ngay" mới */
button#wd-add-to-cart.wd-buy-now-btn::after {
    content: "Mua ngay";
    font-size: 14px !important; /* Bạn có thể điều chỉnh lại size chữ này cho khớp với giao diện */
    font-weight: 600; /* In đậm chữ nếu cần */
}

/* ========================================================== */
/* GIAO DIỆN DANH SÁCH MÃ KEY TRONG QUẢN LÝ TÀI KHOẢN         */
/* ========================================================== */

/* 1. Giao diện bảng trên PC / Laptop */
table.woocommerce-orders-table--keys {
    font-family: 'Inter', 'Segoe UI', sans-serif !important;
    border-collapse: separate !important; /* Bắt buộc để bo góc bảng */
    border-spacing: 0 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
    width: 100% !important;
    background: #ffffff !important;
    margin-bottom: 30px !important;
}

/* Phần Tiêu đề cột (Sản phẩm, Key, HSD) */
table.woocommerce-orders-table--keys thead th {
    background-color: #f8fafc !important;
    color: #475569 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    padding: 18px 24px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    border-top: none !important;
    text-align: left !important;
    letter-spacing: 0.5px !important;
}

/* Các hàng và ô dữ liệu */
table.woocommerce-orders-table--keys tbody td {
    padding: 24px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #f1f5f9 !important;
    border-top: none !important;
    text-align: left !important;
}

/* Xóa viền dòng cuối cùng */
table.woocommerce-orders-table--keys tbody tr:last-child td {
    border-bottom: none !important;
}

/* Hiệu ứng hover khi di chuột qua từng hàng */
table.woocommerce-orders-table--keys tbody tr:hover td {
    background-color: #f8fafc !important;
    transition: background-color 0.2s ease !important;
}

/* Tên sản phẩm */
table.woocommerce-orders-table--keys .woocommerce-orders-table__cell-product a {
    color: #0f172a !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    display: block !important;
    line-height: 1.5 !important;
    transition: color 0.2s ease !important;
}

table.woocommerce-orders-table--keys .woocommerce-orders-table__cell-product a:hover {
    color: #3b82f6 !important; /* Đổi màu xanh khi hover */
}

/* Ô bọc Mã Key */
table.woocommerce-orders-table--keys .wckm_key {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background-color: #f1f5f9 !important;
    border-radius: 8px !important;
    padding: 6px 6px 6px 16px !important;
    border: 1px solid #e2e8f0 !important;
    min-width: 260px !important; /* Đảm bảo ô key không bị quá ngắn */
}

table.woocommerce-orders-table--keys .wckm_key__code {
    font-family: 'Menlo', 'Monaco', monospace !important;
    font-size: 14px !important;
    color: #0f172a !important;
    font-weight: 500 !important;
    margin-right: 16px !important;
}

/* Nút Copy */
table.woocommerce-orders-table--keys .wckm_key__copy {
    background-color: #ffffff !important;
    color: #475569 !important;
    padding: 8px 14px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
    text-transform: uppercase !important;
    transition: all 0.2s ease !important;
}

table.woocommerce-orders-table--keys .wckm_key__copy:hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
}

/* Ngày hết hạn (HSD) */
table.woocommerce-orders-table--keys .woocommerce-orders-table__cell-expires time {
    font-size: 14px !important;
    color: #64748b !important;
    font-weight: 500 !important;
}


/* 2. Giao diện liền khối trên Điện thoại / Máy tính bảng (Bản vá lỗi dính chữ HSD) */
@media screen and (max-width: 768px) {
    /* 1. Ẩn tiêu đề cột */
    table.shop_table.woocommerce-orders-table--keys thead {
        display: none !important;
    }
    
    /* 2. Ép cấu trúc thành dạng khối, CHỐNG NỔI (FLOAT) TRÀN HÀNG */
    table.shop_table.woocommerce-orders-table--keys,
    table.shop_table.woocommerce-orders-table--keys tbody,
    table.shop_table.woocommerce-orders-table--keys tr,
    table.shop_table.woocommerce-orders-table--keys td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        float: none !important; /* Ép tắt chế độ nổi của theme */
        clear: both !important; /* Bắt buộc xuống dòng mới */
    }

    /* 3. KHUNG TỔNG */
    table.shop_table.woocommerce-orders-table--keys {
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        overflow: hidden !important; 
        margin-bottom: 30px !important;
        padding: 0 !important;
    }

    /* 4. TỪNG ĐƠN HÀNG */
    table.shop_table.woocommerce-orders-table--keys tbody tr {
        background: #ffffff !important;
        border: none !important;
        border-bottom: 1px solid #e2e8f0 !important; 
        padding: 20px !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    table.shop_table.woocommerce-orders-table--keys tbody tr:last-child {
        border-bottom: none !important; 
    }

    /* 5. CÁC Ô DỮ LIỆU BÊN TRONG */
    .woocommerce table.shop_table.woocommerce-orders-table--keys tbody tr td,
    table.shop_table.woocommerce-orders-table--keys tbody tr td {
        border: none !important; 
        border-bottom: 0px solid transparent !important; 
        box-shadow: none !important;
        padding: 0 0 16px 0 !important; 
        margin: 0 !important;
        text-align: left !important;
    }

    table.shop_table.woocommerce-orders-table--keys tbody tr td:last-child {
        padding-bottom: 0 !important;
    }

    /* Tiêu đề tự động (Sản phẩm, Key, HSD) */
    table.shop_table.woocommerce-orders-table--keys tbody tr td::before {
        content: attr(data-title) !important;
        display: block !important;
        width: 100% !important; /* Bắt tiêu đề chiếm trọn 1 hàng ngang */
        font-size: 12px !important;
        color: #64748b !important;
        text-transform: uppercase !important;
        font-weight: 600 !important;
        margin-bottom: 8px !important;
        border: none !important;
        clear: both !important; /* Chống nhảy chữ lên trên */
    }

    /* 6. CHỈNH Ô MÃ KEY VỪA VẶN */
    table.shop_table.woocommerce-orders-table--keys .wckm_key {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 !important; 
        box-sizing: border-box !important;
    }

    table.shop_table.woocommerce-orders-table--keys .wckm_key__code {
        word-break: break-all !important;
    }
}
/* 6. CHỈNH Ô MÃ KEY VỪA VẶN */
    table.shop_table.woocommerce-orders-table--keys .wckm_key {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 0 16px 0 !important; /* Đẩy chữ HSD xuống 16px cho thoáng */
        box-sizing: border-box !important;
    }

/* ========================================================== */
/* GIAO DIỆN THÔNG BÁO ĐANG CHỜ CẤP KEY                       */
/* ========================================================== */

.wckm-order-keys p {
    background-color: #eff6ff !important; /* Nền xanh dương siêu nhạt cho cảm giác an tâm */
    color: #1e3a8a !important; /* Chữ màu xanh dương đậm để dễ đọc */
    border: 1px solid #bfdbfe !important; /* Viền mỏng màu xanh */
    border-radius: 8px !important;
    padding: 16px 20px 16px 52px !important; /* Thụt lề trái để lấy chỗ đặt Icon */
    margin: 24px !important; /* Căn lề cách đều viền Card bên ngoài */
    font-size: 15px !important;
    line-height: 1.6 !important;
    font-weight: 500 !important;
    position: relative !important;
    box-sizing: border-box !important;
}

/* Thêm icon đồng hồ cát (chờ đợi) vào bên trái thông báo */
.wckm-order-keys p::before {
    content: "⏳"; /* Bạn có thể đổi thành "ℹ️" hoặc "📦" nếu muốn */
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 22px !important;
}

/* Tinh chỉnh lại trên giao diện Điện thoại */
@media screen and (max-width: 768px) {
    .wckm-order-keys p {
        margin: 16px !important;
        padding: 14px 14px 14px 44px !important;
        font-size: 14px !important;
    }
    .wckm-order-keys p::before {
        left: 12px !important;
        font-size: 20px !important;
    }
}

/* ========================================================== */
/* LỘT XÁC TRANG CHI TIẾT ĐƠN HÀNG (BẢN VÁ LỖI HIỂN THỊ)      */
/* ========================================================== */

/* Định dạng tổng thể */
.woocommerce-order {
    font-family: 'Inter', 'Segoe UI', sans-serif !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    color: #334155 !important;
}

/* 1. THÔNG BÁO THÀNH CÔNG */
.woocommerce-order .woocommerce-notice {
    background-color: #f0fdf4 !important;
    color: #166534 !important;
    border: 1px solid #bbf7d0 !important;
    border-radius: 12px !important;
    padding: 20px 24px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-align: center !important;
    margin-bottom: 30px !important;
    box-shadow: 0 4px 12px rgba(22, 101, 52, 0.05) !important;
}

/* 2. TÓM TẮT ĐƠN HÀNG (Đã sửa lỗi tràn email) */
ul.woocommerce-order-overview {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    justify-content: space-between !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-bottom: 30px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
    list-style: none !important;
}

ul.woocommerce-order-overview li {
    flex: 1 1 140px !important; /* Cho phép các khối tự động co giãn */
    word-break: break-word !important; /* Bắt buộc email dài tự xuống dòng */
    border: none !important; 
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
}

ul.woocommerce-order-overview li span {
    font-size: 12px !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
}

ul.woocommerce-order-overview li strong {
    font-size: 14px !important;
    color: #0f172a !important;
    font-weight: 700 !important;
}

/* 3. BẢNG CHI TIẾT SẢN PHẨM */
.woocommerce-order h2.woocommerce-order-details__title,
.woocommerce-order h2.woocommerce-column__title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin: 30px 0 16px 0 !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

.woocommerce-order-details .responsive-table {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
    margin-bottom: 30px !important;
}

table.woocommerce-table--order-details {
    width: 100% !important;
    border-collapse: collapse !important;
    border: none !important;
    margin: 0 !important;
}

table.woocommerce-table--order-details th,
table.woocommerce-table--order-details td {
    padding: 16px 24px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    border-top: none !important;
}

table.woocommerce-table--order-details thead th {
    background-color: #f8fafc !important;
    color: #475569 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    text-align: left !important;
}

table.woocommerce-table--order-details tbody td.product-name a {
    color: #0f172a !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
}

/* TFOOT: Sửa lỗi căn lề và lỗi màu đỏ sai chỗ */
table.woocommerce-table--order-details tfoot th {
    text-align: right !important; /* Đẩy các nhãn (Tổng, Thuế) sang phải */
    color: #475569 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

table.woocommerce-table--order-details tfoot td {
    text-align: right !important; /* Giá tiền căn phải thẳng hàng */
    font-weight: 600 !important;
    color: #0f172a !important;
    font-size: 14px !important;
}

/* Xóa bỏ đường kẻ dưới cùng của bảng */
table.woocommerce-table--order-details tfoot tr:last-child th,
table.woocommerce-table--order-details tfoot tr:last-child td {
    border-bottom: none !important;
}

/* 4. KHUNG THÔNG TIN THANH TOÁN & NÚT ĐẶT LẠI */
.woocommerce-customer-details address {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
    font-style: normal !important;
    color: #334155 !important;
    line-height: 1.8 !important;
    margin: 0 !important;
}

.woocommerce-customer-details address p {
    margin: 0 0 8px 0 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
}

p.order-again {
    margin-top: 24px !important;
    text-align: right !important;
}

p.order-again .button {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 12px 28px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    border: none !important;
}

/* ========================================================== */
/* GIAO DIỆN MOBILE & TABLET                                  */
/* ========================================================== */
@media (max-width: 768px) {
    
    /* Ép bảng tóm tắt thành dạng Lưới (Grid) 2 cột cho gọn gàng */
    ul.woocommerce-order-overview {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* Chia đúng 2 cột đều nhau */
        gap: 16px 12px !important; /* Khoảng cách dòng 16px, khoảng cách cột 12px */
        padding: 20px !important;
    }

    /* Các cột ngắn thì đứng chung, cột dài (email, phương thức) thì cho chiếm 2 cột */
    ul.woocommerce-order-overview li.email,
    ul.woocommerce-order-overview li.method {
        grid-column: span 2 !important; 
    }
    
    ul.woocommerce-order-overview li {
        width: 100% !important;
        flex: none !important;
    }
    /* ... CÁC ĐOẠN MÃ PHÍA DƯỚI CỦA @MEDIA GIỮ NGUYÊN ... */
    .woocommerce-order-details .responsive-table {
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }
    
    table.woocommerce-table--order-details,
    table.woocommerce-table--order-details tbody,
    table.woocommerce-table--order-details tr,
    table.woocommerce-table--order-details td,
    table.woocommerce-table--order-details th {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    table.woocommerce-table--order-details thead { display: none !important; }

    table.woocommerce-table--order-details tbody tr {
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        margin-bottom: 16px !important;
        padding: 16px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
    }

    table.woocommerce-table--order-details tbody td {
        padding: 0 !important;
        border: none !important;
        text-align: left !important;
    }

    table.woocommerce-table--order-details tbody td.product-total {
        text-align: left !important;
        margin-top: 10px !important;
        color: #b91c1c !important;
    }
    table.woocommerce-table--order-details tbody td.product-total::before {
        content: "Thành tiền: " !important;
        color: #64748b !important;
        font-weight: 500 !important;
    }

    table.woocommerce-table--order-details tfoot {
        display: block !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        padding: 16px !important;
        margin-top: 16px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
    }

    table.woocommerce-table--order-details tfoot tr {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 0 !important;
        border-bottom: 1px solid #f1f5f9 !important;
    }
    table.woocommerce-table--order-details tfoot tr:last-child {
        border-bottom: none !important;
    }

    table.woocommerce-table--order-details tfoot th { text-align: left !important; }
    table.woocommerce-table--order-details tfoot td { text-align: right !important; }

    p.order-again { text-align: center !important; margin-top: 16px !important; }
    p.order-again .button { width: 100% !important; }
}

/* ========================================================== */
/* GIAO DIỆN DANH SÁCH ĐƠN HÀNG (QUẢN LÝ TÀI KHOẢN)           */
/* ========================================================== */

/* 1. GIAO DIỆN BẢNG TRÊN PC/LAPTOP */
table.account-orders-table {
    font-family: 'Inter', 'Segoe UI', sans-serif !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
    width: 100% !important;
    background: #ffffff !important;
    margin-bottom: 30px !important;
}

/* Tiêu đề bảng */
table.account-orders-table thead th {
    background-color: #f8fafc !important;
    color: #475569 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    padding: 18px 24px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    border-top: none !important;
    text-align: left !important;
}

/* Cột hành động căn phải */
table.account-orders-table thead th.woocommerce-orders-table__header-order-actions {
    text-align: right !important;
}

/* Các hàng và ô dữ liệu */
table.account-orders-table tbody th,
table.account-orders-table tbody td {
    padding: 20px 24px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #f1f5f9 !important;
    border-top: none !important;
    text-align: left !important;
    background-color: #ffffff !important;
    transition: background-color 0.2s ease !important;
}

/* Hiệu ứng hover cho cả hàng */
table.account-orders-table tbody tr:hover th,
table.account-orders-table tbody tr:hover td {
    background-color: #f8fafc !important;
}

/* Xóa viền dòng cuối */
table.account-orders-table tbody tr:last-child th,
table.account-orders-table tbody tr:last-child td {
    border-bottom: none !important;
}

/* Mã đơn hàng */
table.account-orders-table .woocommerce-orders-table__cell-order-number a {
    color: #3b82f6 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    text-decoration: none !important;
}

table.account-orders-table .woocommerce-orders-table__cell-order-number a:hover {
    color: #1d4ed8 !important;
    text-decoration: underline !important;
}

/* Ngày tháng */
table.account-orders-table .woocommerce-orders-table__cell-order-date time {
    color: #64748b !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* Tổng tiền */
table.account-orders-table .woocommerce-orders-table__cell-order-total {
    color: #334155 !important;
    font-size: 14px !important;
}

table.account-orders-table .woocommerce-orders-table__cell-order-total .amount {
    font-weight: 700 !important;
    color: #0f172a !important;
}

/* Trạng thái đơn hàng (Tô màu cho từng loại) */
table.account-orders-table .woocommerce-orders-table__cell-order-status {
    font-weight: 600 !important;
    font-size: 14px !important;
}

/* Đã hoàn thành -> Xanh lá */
table.account-orders-table tr.woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status {
    color: #16a34a !important; 
}

/* Tạm giữ -> Cam/Vàng */
table.account-orders-table tr.woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status {
    color: #d97706 !important;
}

/* Đang xử lý -> Xanh dương */
table.account-orders-table tr.woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status {
    color: #2563eb !important;
}

/* Đã hủy / Thất bại -> Đỏ */
table.account-orders-table tr.woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status,
table.account-orders-table tr.woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status {
    color: #dc2626 !important;
}

/* Nút "Xem" */
table.account-orders-table .woocommerce-orders-table__cell-order-actions {
    text-align: right !important;
}

table.account-orders-table .button.view {
    background-color: #eff6ff !important;
    color: #3b82f6 !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 20px !important;
    padding: 8px 24px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.2s ease !important;
}

table.account-orders-table .button.view:hover {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
}

/* ========================================================== */
/* 2. GIAO DIỆN THẺ (CARDS) TRÊN ĐIỆN THOẠI / TABLET          */
/* ========================================================== */
@media (max-width: 768px) {
    /* Ẩn tiêu đề bảng */
    table.account-orders-table thead {
        display: none !important;
    }
    
    /* Chuyển thành dạng khối */
    table.account-orders-table,
    table.account-orders-table tbody,
    table.account-orders-table tr,
    table.account-orders-table th,
    table.account-orders-table td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Bỏ viền bảng tổng, làm nền trong suốt */
    table.account-orders-table {
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        padding: 0 !important;
    }

    /* Mỗi đơn hàng là 1 Card */
    table.account-orders-table tbody tr {
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        margin-bottom: 20px !important;
        padding: 16px 20px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
    }

    /* Hiển thị các ô thông tin nằm ngang (Nhãn trái - Dữ liệu phải) */
    table.account-orders-table tbody th,
    table.account-orders-table tbody td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 12px 0 !important;
        border: none !important;
        border-bottom: 1px solid #f8fafc !important;
        text-align: right !important;
    }

    table.account-orders-table tbody td:last-child {
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }

    /* Tự động điền nhãn (Mã đơn, Ngày, Trạng thái...) */
    table.account-orders-table tbody th::before,
    table.account-orders-table tbody td::before {
        content: attr(data-title) !important;
        font-size: 13px !important;
        color: #64748b !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        margin-right: 16px !important;
        text-align: left !important;
    }

    /* Nút Xem trên Mobile (Tràn viền ngang) */
    table.account-orders-table .woocommerce-orders-table__cell-order-actions {
        display: block !important;
        margin-top: 16px !important;
        padding: 0 !important;
        border: none !important;
    }
    
    /* Ẩn nhãn "Hành động" để nhường chỗ cho nút */
    table.account-orders-table .woocommerce-orders-table__cell-order-actions::before {
        display: none !important; 
    }

    table.account-orders-table .button.view {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 12px !important;
        font-size: 14px !important;
    }
}

/* ========================================================== */
/* LỘT XÁC HOÀN TOÀN BẢNG THÔNG TIN KEY (FLEXBOX DESIGN)      */
/* ========================================================== */

/* 1. Khung Card Bo Góc */
section.woocommerce-order-details__key {
    font-family: 'Inter', 'Segoe UI', sans-serif !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
    margin: 30px 0 !important;
    overflow: hidden !important;
}

/* 2. Tiêu đề khối */
section.woocommerce-order-details__key h2.woocommerce-order-details__title {
    background: #f8fafc !important;
    margin: 0 !important;
    padding: 16px 24px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

/* 3. Dòng chữ thông báo & Xóa nền xám xấu xí của chữ Ngày */
section.woocommerce-order-details__key .order-info {
    padding: 16px 24px !important;
    margin: 0 !important;
    font-size: 14px !important;
    color: #475569 !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
section.woocommerce-order-details__key .order-info mark {
    background: transparent !important; /* Xóa nền xám */
    color: #0f172a !important;
    font-weight: 700 !important;
}
section.woocommerce-order-details__key .order-info a {
    color: #3b82f6 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

/* 4. CHUYỂN BẢNG THÀNH FLEXBOX (Ép thẳng hàng) */
section.woocommerce-order-details__key table.woocommerce-orders-table--key {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    border: none !important;
}
section.woocommerce-order-details__key table.woocommerce-orders-table--key tbody {
    display: block !important;
    width: 100% !important;
}
section.woocommerce-order-details__key table.woocommerce-orders-table--key tr {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 24px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}
section.woocommerce-order-details__key table.woocommerce-orders-table--key tr:last-child {
    border-bottom: none !important;
}

/* 5. Cột Nhãn (Bên Trái) */
section.woocommerce-order-details__key table.woocommerce-orders-table--key th {
    display: block !important;
    width: 30% !important; /* Chiếm 30% chiều rộng */
    padding: 0 !important;
    border: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    text-align: left !important;
    background: transparent !important;
}

/* 6. Cột Dữ Liệu (Bên Phải) */
section.woocommerce-order-details__key table.woocommerce-orders-table--key td {
    display: flex !important;
    width: 70% !important; /* Chiếm 70% chiều rộng */
    justify-content: flex-end !important; /* ÉP MỌI THỨ SANG SÁT LỀ PHẢI */
    align-items: center !important;
    padding: 0 !important;
    border: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #0f172a !important;
    text-align: right !important;
}
section.woocommerce-order-details__key table.woocommerce-orders-table--key td a {
    color: #3b82f6 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

/* 7. Khung chứa Mã Key hiện đại (Đã fix lỗi mất icon Copy) */
section.woocommerce-order-details__key .wckm_key {
    display: flex !important;
    align-items: center !important;
    background-color: #f8fafc !important; 
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 4px 4px 4px 16px !important;
    gap: 12px !important;
}

section.woocommerce-order-details__key .wckm_key__code {
    font-family: 'Menlo', 'Monaco', monospace !important;
    font-size: 14px !important;
    color: #0f172a !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
}

section.woocommerce-order-details__key .wckm_key__copy {
    background-color: #ffffff !important; /* Bắt buộc dùng background-color để không làm mất Icon SVG */
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    padding: 6px 16px !important; /* Nới rộng một chút cho cân đối với icon */
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    transition: all 0.2s ease !important;
}

section.woocommerce-order-details__key .wckm_key__copy:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

/* ========================================================== */
/* 8. GIAO DIỆN THÔNG MINH CHO MOBILE & TABLET (Tự gập)       */
/* ========================================================== */
/* Đổi từ 768px thành 1024px để bao phủ toàn bộ các dòng iPad/Tablet */
@media (max-width: 1024px) {
    section.woocommerce-order-details__key table.woocommerce-orders-table--key tr {
        flex-direction: column !important; /* Chuyển xếp ngang thành xếp dọc */
        align-items: flex-start !important; /* Ép toàn bộ sát lề trái */
        padding: 16px 20px !important;
        gap: 8px !important; 
    }
    
    section.woocommerce-order-details__key table.woocommerce-orders-table--key th,
    section.woocommerce-order-details__key table.woocommerce-orders-table--key td {
        width: 100% !important; 
        justify-content: flex-start !important; /* Khắc phục lỗi căn giữa của theme */
        text-align: left !important; /* Chống theme tự động căn giữa */
        display: flex !important;
    }
    
    /* Ô mã Key tràn đều màn hình mobile/tablet, dễ bấm */
    section.woocommerce-order-details__key .wckm_key {
        width: 100% !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
    }
}

/* Ẩn toàn bộ khối "Cách 2: Chuyển khoản thủ công" */
.woocommerce-sepay-bank-details .manual-box {
    display: none !important;
}

/* Căn giữa lại khối QR (Cách 1) khi không còn Cách 2 bên cạnh, ở màn hình rộng */
@media (min-width: 768px) {
    .woocommerce-sepay-bank-details .sepay-pay-info {
        justify-content: center;
    }
}