:root {
--sys-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
"Helvetica Neue", sans-serif;
--sys-font-zh: var(--sys-font), "PingFang SC", "Hiragino Sans GB",
"Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1", sans-serif;
--text-xs:   11px;
--text-sm:   13px;
--text-base: 15px;
--text-lg:   18px;
--text-xl:   24px;
--text-2xl:  36px;
--leading-tight:  1.3;
--leading-normal: 1.6;
--leading-loose:  1.8;
--color-text-primary:   #111827;
--color-text-secondary: #6b7280;
--color-text-muted:     #6b7280;
--color-text-disabled:  #d1d5db;
--color-text-inverse:   #ffffff;
--color-primary:        #2563eb;
--color-primary-hover:  #1d4ed8;
--color-danger:         #ef4444;
--color-success:        #22c55e;
--color-warning:        #f59e0b;
--color-bg-page:   #f8fafc;
--color-bg-card:   #ffffff;
--color-bg-subtle: #f1f5f9;
--color-border:        #e2e8f0;
--color-border-strong: #cbd5e1;
}
html[lang="en"],
html[lang="en-us"] {
font-family: var(--sys-font) !important;
}
html[lang="en"] body,
html[lang="en-us"] body,
html[lang="en"] *:not(.mdi):not([class*="icon"]):not(i),
html[lang="en-us"] *:not(.mdi):not([class*="icon"]):not(i) {
font-family: var(--sys-font) !important;
}
html[lang="zh"],
html[lang="zh-cn"],
html[lang="zh-tw"] {
font-family: var(--sys-font-zh) !important;
}
html[lang="zh"] body,
html[lang="zh-cn"] body,
html[lang="zh-tw"] body,
html[lang="zh"] *:not(.mdi):not([class*="icon"]):not(i),
html[lang="zh-cn"] *:not(.mdi):not([class*="icon"]):not(i),
html[lang="zh-tw"] *:not(.mdi):not([class*="icon"]):not(i) {
font-family: var(--sys-font-zh) !important;
}
html:not([lang]) body,
html:not([lang]) *:not(.mdi):not([class*="icon"]):not(i) {
font-family: var(--sys-font-zh) !important;
}
.buy-price, .buy-price *,
.price, .price *,
.goods-price,
.actual-price,
.col-price *,
.order-price,
.total-price,
.amount,
.text-danger,
.text-primary {
font-family: "Consolas", "Monaco", "Courier New", monospace !important;
}
html[lang="en"] .col-name h5,
html[lang="en-us"] .col-name h5,
html[lang="en"] .media-body h5,
html[lang="en-us"] .media-body h5 {
color: #434343  !important;
font-weight: 400 !important;
}
.mdi,
[class*="mdi-"],
[class*="icon-"],
i[class*="mdi"],
i[class*="icon"] {
font-family: "Material Design Icons" !important;
}
body {
color: #6c757d !important;
}
.hyper-footer {
background: transparent !important;
color: #98a6ad !important;
}
#back-to-top,
.back-to-top,
[id="back-to-top"] {
background-color: #183153 !important;
border-color: #183153 !important;
color: #fff !important;
}
.btn-primary:not(.btn-danger):not([class*="btn-outline"]) {
background-color: #3688fc !important;
border-color: #3688fc !important;
color: #fff !important;
}
.btn-primary:not(.btn-danger):not([class*="btn-outline"]):hover {
background-color: #1a6fef !important;
border-color: #1a6fef !important;
}
.buy-title,
.form-group h3,
.form-group label,
.form-group p,
.card-body,
.card-body p,
.card-body label,
.card-body h1,
.card-body h2,
.card-body h3,
.card-body h4,
.card-body h5,
.card-body h6,
.bill-container,
.bill-container *,
.orderinfo-grid,
.orderinfo-grid *,
.table td,
.table th,
.modal-body,
.modal-body *,
.modal-title {
color: inherit !important;
}
html, body {
overflow-x: hidden;
max-width: 100%;
}
@media screen and (max-width: 767px) {
body, p, h1, h2, h3, h4, h5, h6, span, div, a, td, th, li, label {
word-break: break-word;
overflow-wrap: break-word;
}
.name,
.media-body h5,
.xlo-product-name,
.buy-title,
.form-group h3,
.card-title,
.header-title,
.col-name h5 {
word-break: break-word !important;
overflow-wrap: break-word !important;
white-space: normal !important;
}
.home-card, .card, .card-body {
overflow: hidden;
max-width: 100%;
}
.table-responsive,
.order-table,
.recharge-table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.buy-grid {
overflow-x: hidden;
}
.navbar-brand,
.topnav-logo {
max-width: 60vw;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.breadcrumb {
flex-wrap: wrap;
overflow-x: hidden;
}
.breadcrumb-item {
word-break: break-word;
overflow-wrap: break-word;
}
.badge,
.badge-outline-primary,
.badge-outline-danger {
white-space: normal;
word-break: break-word;
}
.mobile-only-content {
overflow-x: hidden;
}
.home-list-table tbody td.col-name .media-body h5 {
word-break: break-word !important;
overflow-wrap: break-word !important;
}
.pay-grid {
max-width: 100%;
overflow-x: hidden;
}
.pay-type {
min-width: unset !important;
max-width: 100%;
white-space: normal;
word-break: break-word;
}
.bill-container,
.orderinfo-grid {
overflow-x: hidden;
}
.user-center-orders,
.user-center-recharges {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
@media screen and (max-width: 400px) {
.container {
padding-left: 13px !important;
padding-right: 13px !important;
}
.card-body {
padding: 18px !important;
border-radius: 16px !important;
}
.card {
border-radius: 16px !important;
}
#submit, .btn-danger, .btn-primary {
font-size: 14px !important;
padding: 10px 16px !important;
}
.form-group h3 {
font-size: 16px !important;
word-break: break-word !important;
}
.tab-link {
font-size: 12px !important;
padding: 4px 8px !important;
min-width: 50px !important;
}
}
.jq-toast-wrap {
width: auto !important;
max-width: min(340px, calc(100vw - 32px)) !important;
min-width: 240px !important;
pointer-events: all !important;
}
.jq-toast-wrap.top-center,
.jq-toast-wrap.bottom-center {
left: 50% !important;
transform: translateX(-50%) !important;
right: auto !important;
}
.jq-toast-wrap.top-right {
top: 16px !important;
right: 16px !important;
}
.jq-toast-wrap.top-center {
top: 16px !important;
}
@media (max-width: 640px) {
.jq-toast-wrap {
left: 12px !important;
right: 12px !important;
max-width: calc(100vw - 24px) !important;
min-width: 0 !important;
transform: none !important;
}
.jq-toast-wrap.top-center,
.jq-toast-wrap.top-right {
top: 12px !important;
left: 12px !important;
right: 12px !important;
transform: none !important;
}
}
.jq-toast-single {
background: #fff !important;
color: #374151 !important;
border: 1px solid rgba(0,0,0,0.06) !important;
border-left: 3px solid #d1d5db !important;
border-radius: 10px !important;
box-shadow: 0 2px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04) !important;
padding: 13px 48px 13px 14px !important;
font-size: 13px !important;
font-family: inherit !important;
line-height: 1.55 !important;
word-break: break-word !important;
overflow-wrap: break-word !important;
margin: 0 0 8px !important;
position: relative !important;
}
.jq-toast-single h2 {
font-size: 12.5px !important;
font-weight: 600 !important;
color: #111827 !important;
margin: 0 0 2px !important;
letter-spacing: -0.01em !important;
font-family: inherit !important;
line-height: 1.3 !important;
background: none !important;
padding: 0 !important;
}
.jq-toast-loader {
display: none !important;
}
.close-jq-toast-single {
position: absolute !important;
top: 50% !important;
right: 12px !important;
transform: translateY(-50%) !important;
font-size: 15px !important;
color: #9ca3af !important;
opacity: 0.6 !important;
line-height: 1 !important;
cursor: pointer !important;
transition: opacity 0.15s !important;
}
.close-jq-toast-single:hover { opacity: 1 !important; }
.jq-has-icon {
background-image: none !important;
padding-left: 14px !important;
}
.jq-icon-success {
background-color: #fff !important;
border-left-color: #6ee7b7 !important;
color: #374151 !important;
}
.jq-icon-success h2 { color: #065f46 !important; }
.jq-icon-error {
background-color: #fff !important;
border-left-color: #fca5a5 !important;
color: #374151 !important;
}
.jq-icon-error h2 { color: #7f1d1d !important; }
.jq-icon-warning {
background-color: #fff !important;
border-left-color: #fcd34d !important;
color: #374151 !important;
}
.jq-icon-warning h2 { color: #78350f !important; }
.jq-icon-info {
background-color: #fff !important;
border-left-color: #93c5fd !important;
color: #374151 !important;
}
.jq-icon-info h2 { color: #1e3a8a !important; }
.alert {
border-radius: 9px !important;
border: 1px solid transparent !important;
border-left: 3px solid transparent !important;
padding: 11px 15px !important;
font-size: 13px !important;
font-weight: 400 !important;
line-height: 1.55 !important;
word-break: break-word !important;
overflow-wrap: break-word !important;
margin-bottom: 14px !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}
.alert-danger {
background: #fff5f5 !important;
border-color: rgba(252,165,165,0.3) !important;
border-left-color: #fca5a5 !important;
color: #7f1d1d !important;
}
.alert-success {
background: #f6fef9 !important;
border-color: rgba(110,231,183,0.3) !important;
border-left-color: #6ee7b7 !important;
color: #064e3b !important;
}
.alert-warning {
background: #fffdf0 !important;
border-color: rgba(252,211,77,0.3) !important;
border-left-color: #fcd34d !important;
color: #78350f !important;
}
.alert-info {
background: #f5f9ff !important;
border-color: rgba(147,197,253,0.3) !important;
border-left-color: #93c5fd !important;
color: #1e3a8a !important;
}
div.alert-danger:not(.alert) {
background: #fff5f5 !important;
border: 1px solid rgba(252,165,165,0.3) !important;
border-left: 3px solid #fca5a5 !important;
border-radius: 9px !important;
color: #7f1d1d !important;
padding: 11px 15px !important;
font-size: 13px !important;
margin-bottom: 14px !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}
.xlo-alert-overlay {
position: fixed;
inset: 0;
z-index: 99999;
background: rgba(17,24,39,0.15);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
animation: xloFadeIn 0.14s ease;
}
@keyframes xloFadeIn {
from { opacity: 0; }
to   { opacity: 1; }
}
.xlo-alert-box {
background: #fff;
border-radius: 14px;
box-shadow: 0 8px 30px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.05);
padding: 22px 22px 18px;
max-width: 300px;
width: 100%;
border: 1px solid rgba(0,0,0,0.05);
animation: xloSlideUp 0.17s cubic-bezier(0.34,1.2,0.64,1);
}
@keyframes xloSlideUp {
from { opacity: 0; transform: translateY(10px) scale(0.97); }
to   { opacity: 1; transform: translateY(0)  scale(1);    }
}
.xlo-alert-icon {
width: 36px;
height: 36px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
}
.xlo-alert-icon svg { width: 18px; height: 18px; }
.xlo-alert-icon.type-error   { background: #fff1f1; color: #e57373; }
.xlo-alert-icon.type-success { background: #f0fdf6; color: #52c98a; }
.xlo-alert-icon.type-warning { background: #fffbeb; color: #f0b429; }
.xlo-alert-icon.type-info    { background: #f0f6ff; color: #6fa8dc; }
.xlo-alert-icon.type-default { background: #f3f4f6; color: #9ca3af; }
.xlo-alert-title {
font-size: 14.5px;
font-weight: 600;
color: #111827;
margin: 0 0 5px;
letter-spacing: -0.01em;
line-height: 1.3;
}
.xlo-alert-msg {
font-size: 13px;
color: #6b7280;
line-height: 1.6;
margin: 0 0 16px;
}
.xlo-alert-btn {
width: 100%;
padding: 9px 0;
border-radius: 8px;
border: none;
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
transition: opacity 0.15s, transform 0.1s;
letter-spacing: -0.01em;
font-family: inherit;
}
.xlo-alert-btn:active { transform: scale(0.98); opacity: 0.88; }
.xlo-alert-btn.type-error   { background: #f87171; color: #fff; }
.xlo-alert-btn.type-success { background: #4ade80; color: #fff; }
.xlo-alert-btn.type-warning { background: #fbbf24; color: #fff; }
.xlo-alert-btn.type-info    { background: #60a5fa; color: #fff; }
.xlo-alert-btn.type-default { background: #374151; color: #fff; }
.col-price, .col-price b, .col-price *,
.buy-price, .buy-price *,
.mobile-price, .mobile-price *,
.xlo-price-col, .xlo-price-col *,
.xlo-card-price, .xlo-card-price *,
.home-list-table .col-price,
.home-list-table .col-price b,
.order-price, .total-price, .amount,
.actual-price, .goods-price {
color: #374151 !important;
}
.xlo-footer-desc,
.xlo-footer-contact-item,
.xlo-footer-col ul li a,
.xlo-footer-copy,
.xlo-footer-pay-label,
.xlo-footer-pay-badge,
.xlo-footer-brand-sub {
color: rgba(255,255,255,0.55) !important;
}
.home-list-table thead th,
.xlo-col-header-row span,
.xlo-sort-btn {
font-size: var(--text-xs) !important;
color: var(--color-text-muted) !important;
}
.xlo-product-name,
.xlo-card-name,
.col-name h5,
.media-body h5 {
font-size: var(--text-base) !important;
color: var(--color-text-primary) !important;
}
.col-price, .col-price b, .col-price *,
.buy-price, .buy-price *,
.mobile-price, .mobile-price *,
.xlo-price-col, .xlo-price-col *,
.xlo-card-price, .xlo-card-price *,
.home-list-table .col-price,
.home-list-table .col-price b,
.order-price, .total-price, .amount,
.actual-price, .goods-price {
font-size: var(--text-lg) !important;
font-weight: 400 !important;
}
.xlo-tag, .xlo-card-tag,
.xlo-delivery-badge,
.badge, .badge-outline-primary,
.badge-outline-danger,
.badge-auto-delivery, .badge-manual-delivery {
font-size: var(--text-xs) !important;
}
.xlo-footer-copy,
.blog-date, .post-date,
.xlo-sp-blog-date {
font-size: var(--text-xs) !important;
color: var(--color-text-muted) !important;
}
.xnav-link,
.xnav-mobile-item {
font-size: var(--text-sm) !important;
}
.xlo-footer-desc,
.xlo-sp-child-item-name,
.xlo-sp-result-name,
.xlo-sp-no-result,
.xlo-search-placeholder {
font-size: var(--text-sm) !important;
}
.xlo-group-title {
font-size: var(--text-sm) !important;
color: var(--color-text-primary) !important;
}
.xlo-group-count,
.xlo-stock-val,
.mobile-stock {
font-size: var(--text-xs) !important;
color: var(--color-text-muted) !important;
}
.xlo-footer-brand-name {
font-size: var(--text-lg) !important;
}
.xlo-footer-col h4 {
font-size: var(--text-sm) !important;
}
body {
line-height: var(--leading-normal) !important;
}
p, li, td, .xlo-footer-desc {
line-height: var(--leading-normal) !important;
}
h1, h2, h3, h4, h5, h6,
.xlo-product-name, .xlo-card-name,
.xlo-group-title, .xlo-footer-brand-name {
line-height: var(--leading-tight) !important;
}
.mobile-price,
.mobile-price *,
.text-danger.price,
.col-price .text-danger,
span.mobile-price {
color: var(--color-text-primary) !important;
font-weight: 500 !important;
}
.alert .text-danger,
.form-control.is-invalid ~ .text-danger,
.invalid-feedback {
color: var(--color-danger) !important;
}
.blog-content,
.blog-content * {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
.blog-content [style*="font-weight: 300"],
.blog-content [style*="font-weight:300"] { font-weight: 300 !important; }
.blog-content [style*="font-weight: 400"],
.blog-content [style*="font-weight:400"] { font-weight: 400 !important; }
.blog-content [style*="font-weight: 500"],
.blog-content [style*="font-weight:500"] { font-weight: 500 !important; }
.blog-content [style*="font-weight: 600"],
.blog-content [style*="font-weight:600"] { font-weight: 600 !important; }
.blog-content [style*="font-weight: 700"],
.blog-content [style*="font-weight:700"] { font-weight: 700 !important; }
.blog-content p,
.blog-content li,
.blog-content td,
.blog-content blockquote {
text-align: justify;
hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
word-spacing: normal;
letter-spacing: 0em;
line-height: 1.8;
}
.blog-content h1,
.blog-content h2,
.blog-content h3,
.blog-content h4,
.blog-content h5,
.blog-content h6 {
hyphens: none;
-webkit-hyphens: none;
word-spacing: normal;
letter-spacing: normal;
}
@media (max-width: 768px) {
.blog-content {
font-size: 17px !important;
}
.blog-content p,
.blog-content li,
.blog-content td,
.blog-content blockquote {
text-align: justify !important;
hyphens: auto !important;
-webkit-hyphens: auto !important;
-ms-hyphens: auto !important;
word-spacing: normal !important;
letter-spacing: 0em !important;
line-height: 1.8 !important;
}
.blog-content h1,
.blog-content h2,
.blog-content h3,
.blog-content h4,
.blog-content h5,
.blog-content h6 {
hyphens: none !important;
-webkit-hyphens: none !important;
word-spacing: normal !important;
letter-spacing: normal !important;
}
}
.blog-content > h1:first-child,
.blog-content > h2:first-child,
.blog-content > h3:first-child,
.blog-content > h4:first-child,
.blog-content > h5:first-child,
.blog-content > h6:first-child {
margin-top: 0 !important;
}
html[lang="zh"] .blog-content p,
html[lang="zh"] .blog-content li,
html[lang="zh"] .blog-content td,
html[lang="zh"] .blog-content blockquote,
html[lang="zh-cn"] .blog-content p,
html[lang="zh-cn"] .blog-content li,
html[lang="zh-cn"] .blog-content td,
html[lang="zh-cn"] .blog-content blockquote,
html[lang="zh-tw"] .blog-content p,
html[lang="zh-tw"] .blog-content li,
html[lang="zh-tw"] .blog-content td,
html[lang="zh-tw"] .blog-content blockquote {
text-align: left !important;
hyphens: none !important;
-webkit-hyphens: none !important;
}
@media (max-width: 768px) {
html[lang="zh"] .blog-content p,
html[lang="zh"] .blog-content li,
html[lang="zh"] .blog-content td,
html[lang="zh"] .blog-content blockquote,
html[lang="zh-cn"] .blog-content p,
html[lang="zh-cn"] .blog-content li,
html[lang="zh-cn"] .blog-content td,
html[lang="zh-cn"] .blog-content blockquote,
html[lang="zh-tw"] .blog-content p,
html[lang="zh-tw"] .blog-content li,
html[lang="zh-tw"] .blog-content td,
html[lang="zh-tw"] .blog-content blockquote {
text-align: left !important;
hyphens: none !important;
-webkit-hyphens: none !important;
}
}

/* ===== User Center: unify table font sizes on desktop (PC only) ===== */
/* Override the global .col-price font-size: var(--text-lg) rule for user-center tables */
@media (min-width: 768px) {
#user-orders .uc-table .col-price,
#user-orders .uc-table .col-price b,
#user-orders .uc-table .col-price *,
#user-orders .uc-table .col-amount,
#user-orders .uc-table .col-amount b,
#user-orders .uc-table .col-amount *,
#user-orders .uc-table .col-qty,
#user-recharges .uc-table .col-price,
#user-recharges .uc-table .col-price b,
#user-recharges .uc-table .col-price *,
#user-wallet-logs .uc-table .col-price,
#user-wallet-logs .uc-table .col-price b,
#user-wallet-logs .uc-table .col-price * {
font-size: 0.82rem !important;
font-weight: 400 !important;
}
#user-orders .uc-table thead th,
#user-recharges .uc-table thead th,
#user-wallet-logs .uc-table thead th {
font-size: 0.75rem !important;
}
}