/********** Template CSS **********/

:root {

    --primary: #EB1616;

    --secondary: #191C24;

    --light: #6C7293;

    --dark: #000000;

}



.back-to-top {

    position: fixed;

    display: none;

    right: 45px;

    bottom: 45px;

    z-index: 99;

}





/*** Spinner ***/

#spinner {

    opacity: 0;

    visibility: hidden;

    transition: opacity .5s ease-out, visibility 0s linear .5s;

    z-index: 99999;

}



#spinner.show {

    transition: opacity .5s ease-out, visibility 0s linear 0s;

    visibility: visible;

    opacity: 1;

}





/*** Button ***/

.btn {

    transition: .5s;

}



.btn-square {

    width: 38px;

    height: 38px;

}



.btn-sm-square {

    width: 32px;

    height: 32px;

}



.btn-lg-square {

    width: 48px;

    height: 48px;

}



.btn-square,

.btn-sm-square,

.btn-lg-square {

    padding: 0;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-weight: normal;

    border-radius: 50px;

}





/*** Layout ***/

.sidebar {

    position: fixed;

    top: 0;

    left: 0;

    bottom: 0;

    width: 250px;

    height: 100vh;

    overflow-y: auto;

    background: var(--secondary);

    transition: 0.5s;

    z-index: 999;

}



.content {

    margin-left: 250px;

    min-height: 100vh;

    background: var(--dark);

    transition: 0.5s;

}



@media (min-width: 992px) {

    .sidebar {

        margin-left: 0;

    }



    .sidebar.open {

        margin-left: -250px;

    }



    .content {

        width: calc(100% - 250px);

    }



    .content.open {

        width: 100%;

        margin-left: 0;

    }

}



@media (max-width: 991.98px) {

    .sidebar {

        margin-left: -250px;

    }



    .sidebar.open {

        margin-left: 0;

    }



    .content {

        width: 100%;

        margin-left: 0;

    }

}





/*** Navbar ***/

.sidebar .navbar .navbar-nav .nav-link {

    padding: 7px 20px;

    color: var(--light);

    font-weight: 500;

    border-left: 3px solid var(--secondary);

    border-radius: 0 30px 30px 0;

    outline: none;

}



.sidebar .navbar .navbar-nav .nav-link:hover,

.sidebar .navbar .navbar-nav .nav-link.active {

    color: var(--primary);

    background: var(--dark);

    border-color: var(--primary);

}



.sidebar .navbar .navbar-nav .nav-link i {

    width: 40px;

    height: 40px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background: var(--dark);

    border-radius: 40px;

}



.sidebar .navbar .navbar-nav .nav-link:hover i,

.sidebar .navbar .navbar-nav .nav-link.active i {

    background: var(--secondary);

}



.sidebar .navbar .dropdown-toggle::after {

    position: absolute;

    top: 15px;

    right: 15px;

    border: none;

    content: "\f107";

    font-family: "Font Awesome 5 Free";

    font-weight: 900;

    transition: .5s;

}



.sidebar .navbar .dropdown-toggle[aria-expanded=true]::after {

    transform: rotate(-180deg);

}



.sidebar .navbar .dropdown-item {

    padding-left: 25px;

    border-radius: 0 30px 30px 0;

    color: var(--light);

}



.sidebar .navbar .dropdown-item:hover,

.sidebar .navbar .dropdown-item.active {

    background: var(--dark);

}



.content .navbar .navbar-nav .nav-link {

    margin-left: 25px;

    padding: 12px 0;

    color: var(--light);

    outline: none;

}



.content .navbar .navbar-nav .nav-link:hover,

.content .navbar .navbar-nav .nav-link.active {

    color: var(--primary);

}



.content .navbar .sidebar-toggler,

.content .navbar .navbar-nav .nav-link i {

    width: 40px;

    height: 40px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background: var(--dark);

    border-radius: 40px;

}



.content .navbar .dropdown-item {

    color: var(--light);

}



.content .navbar .dropdown-item:hover,

.content .navbar .dropdown-item.active {

    background: var(--dark);

}



.content .navbar .dropdown-toggle::after {

    margin-left: 6px;

    vertical-align: middle;

    border: none;

    content: "\f107";

    font-family: "Font Awesome 5 Free";

    font-weight: 900;

    transition: .5s;

}



.content .navbar .dropdown-toggle[aria-expanded=true]::after {

    transform: rotate(-180deg);

}



@media (max-width: 575.98px) {

    .content .navbar .navbar-nav .nav-link {

        margin-left: 15px;

    }

}





/*** Date Picker ***/

.bootstrap-datetimepicker-widget.bottom {

    top: auto !important;

}



.bootstrap-datetimepicker-widget .table * {

    border-bottom-width: 0px;

}



.bootstrap-datetimepicker-widget .table th {

    font-weight: 500;

}



.bootstrap-datetimepicker-widget.dropdown-menu {

    padding: 10px;

    border-radius: 2px;

}



.bootstrap-datetimepicker-widget table td.active,

.bootstrap-datetimepicker-widget table td.active:hover {

    background: var(--primary);

}



.bootstrap-datetimepicker-widget table td.today::before {

    border-bottom-color: var(--primary);

}





/*** Testimonial ***/

.progress .progress-bar {

    width: 0px;

    transition: 2s;

}





/*** Testimonial ***/

.testimonial-carousel .owl-dots {

    margin-top: 24px;

    display: flex;

    align-items: flex-end;

    justify-content: center;

}



.testimonial-carousel .owl-dot {

    position: relative;

    display: inline-block;

    margin: 0 5px;

    width: 15px;

    height: 15px;

    border: 5px solid var(--primary);

    border-radius: 15px;

    transition: .5s;

}



.testimonial-carousel .owl-dot.active {

    background: var(--dark);

    border-color: var(--primary);

}

.video-wrapper {

    max-width: 800px;

    margin: 0 auto;

    padding: 5px;

}

.hover-red:hover {

    color: #EB1616 !important;

}

.text-white-75 {

    color: rgba(255, 255, 255, 0.75) !important;

}





:root {

    --primary-dark: #1a1a2e;

    --secondary-dark: #16213e;

    --accent-color: #1e88e5; /* 深蓝色 */

    --highlight: #42a5f5; /* 亮蓝色 */

    --light-text: #ffffff; /* 更亮的文字颜色 */

    --dark-text: #333;

    --input-bg: #2c2c54;

    --card-bg: #22223b;

    --button-gradient: linear-gradient(90deg, #1e88e5, #0d47a1);

    --slider-gradient: linear-gradient(90deg, #42a5f5, #1e88e5);

    --success: #4dccbd;

    --warning: #f3a738;

    --error: #e57373;

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    background: linear-gradient(135deg, var(--primary-dark), var(--secondary-dark));

    color: var(--light-text);

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    line-height: 1.6;

    padding: 20px;

    min-height: 100vh;

}



.container {

    max-width: 1200px;

    margin: 0 auto;

}



/* 卡片样式 */

.card-custom {

    background-color: var(--card-bg);

    border-radius: 12px;

    border: 1px solid rgba(255,255,255,0.1);

    box-shadow: 0 10px 30px rgba(0,0,0,0.3);

    overflow: hidden;

    margin-bottom: 30px;

}



.card-header-custom {

    background: var(--button-gradient);

    border-bottom: 2px solid var(--highlight);

    padding: 1.2rem 1.5rem;

    color: #ffffff;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



    .card-header-custom h4 {

        margin: 0;

        font-weight: 600;

        display: flex;

        align-items: center;

        gap: 10px;

    }



.card-body {

    padding: 25px;

}



/* 通用样式 */

h1, h2, h3, h4, h5, h6,

p, span, div, label,

.text-light, .text-secondary,

.form-label, .balance-label {

    color: var(--light-text) !important;

}



.section-title {

    color: var(--highlight);

    border-bottom: 2px solid var(--highlight);

    padding-bottom: 10px;

    margin-bottom: 20px;

    font-weight: 600;

    font-size: 1.25rem;

    display: flex;

    align-items: center;

    gap: 10px;

}



/* 产品卡片 */

.product-card {

    background: rgba(255,255,255,0.05);

    border-radius: 10px;

    padding: 15px;

    margin-bottom: 15px;

}



    .product-card h5 {

        font-weight: 600;

        font-size: 1.1rem;

        margin-bottom: 8px;

        color: #ffffff;

    }



    .product-card p {

        color: #cccccc;

        margin-bottom: 4px;

        font-size: 0.95rem;

    }



/* 支付容器 */

.payment-container {

    background: rgba(255,255,255,0.05);

    border-radius: 10px;

    padding: 20px;

    margin: 25px 0;

    border: 1px solid rgba(255,255,255,0.1);

}



/* 表单控件 */

.form-control-custom {

    background-color: var(--input-bg);

    border: 1px solid rgba(255,255,255,0.1);

    color: #ffffff;

    border-radius: 8px;

    padding: 12px 15px;

    width: 100%;

    margin-bottom: 15px;

}



    .form-control-custom:focus {

        border-color: var(--highlight);

        box-shadow: 0 0 0 0.25rem rgba(66, 165, 245, 0.25);

        outline: none;

    }



    .form-control-custom[readonly] {

        background-color: #3d3d5c;

        color: #ffffff;

    }



.form-group {

    margin-bottom: 20px;

}



.form-label {

    display: block;

    margin-bottom: 8px;

    font-weight: 500;

}



/* 余额信息 */

.balance-info {

    background: rgba(15, 52, 96, 0.3);

    border-radius: 10px;

    padding: 15px;

    margin: 20px 0;

    border-left: 4px solid var(--highlight);

}



/* 金额显示 */

.amount-display {

    background: var(--input-bg);

    border-radius: 8px;

    padding: 12px;

    font-weight: 600;

    text-align: center;

    margin-bottom: 15px;

    border-left: 3px solid var(--highlight);

}



.amount-label {

    color: #e0e0e0;

    font-size: 0.9rem;

    margin-bottom: 5px;

}



.fl-amount {

    color: var(--success);

    font-size: 1.5rem;

}



.usdt-amount {

    color: var(--warning);

    font-size: 1.5rem;

}



.amount-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 15px;

    margin: 20px 0;

}



/* 按钮样式 */

.btn {

    display: inline-block;

    padding: 10px 20px;

    border-radius: 8px;

    font-weight: 600;

    text-align: center;

    cursor: pointer;

    transition: all 0.3s ease;

    border: none;

    font-size: 1rem;

}



.btn-outline-light {

    background: transparent;

    border: 1px solid rgba(255,255,255,0.3);

    color: white;

}



    .btn-outline-light:hover {

        background: rgba(255,255,255,0.1);

    }



.btn-primary-custom {

    background: var(--button-gradient);

    border-radius: 8px;

    padding: 15px 30px;

    font-weight: 700;

    font-size: 1.25rem;

    color: #ffffff;

    text-shadow: 0 1px 2px rgba(0,0,0,0.3);

    box-shadow: 0 4px 15px rgba(30, 136, 229, 0.3);

    transition: all 0.3s ease;

    display: block;

    width: 100%;

    border: none;

    cursor: pointer;

}



    .btn-primary-custom:hover {

        transform: translateY(-3px);

        box-shadow: 0 7px 20px rgba(30, 136, 229, 0.4);

    }



.contract-section {

    background: rgba(255,255,255,0.05);

    border-radius: 10px;

    padding: 20px;

    margin: 20px 0;

}



.customer-info-section {

    background: rgba(255,255,255,0.05);

    border-radius: 10px;

    padding: 20px;

    margin: 20px 0;

}



.summary-section {

    background: rgba(255,255,255,0.05);

    border-radius: 10px;

    padding: 20px;

    margin: 20px 0;

}



.footer-actions {

    display: flex;

    justify-content: space-between;

    margin-top: 25px;

}



.text-info {

    color: var(--highlight) !important;

}



.text-warning {

    color: var(--warning) !important;

}



.text-muted {

    color: #999 !important;

}



.text-danger {

    color: var(--error) !important;

}



.d-flex {

    display: flex;

}



.justify-content-between {

    justify-content: space-between;

}



.align-items-center {

    align-items: center;

}



.mb-3 {

    margin-bottom: 1rem;

}



.mb-4 {

    margin-bottom: 1.5rem;

}



.mt-4 {

    margin-top: 1.5rem;

}



.py-3 {

    padding-top: 0.75rem;

    padding-bottom: 0.75rem;

}



.text-end {

    text-align: right;

}



.row {

    display: flex;

    flex-wrap: wrap;

    margin-right: -15px;

    margin-left: -15px;

}



.col-md-6 {

    flex: 0 0 50%;

    max-width: 50%;

    padding: 0 15px;

}



.col-12 {

    flex: 0 0 100%;

    max-width: 100%;

    padding: 0 15px;

}



.col-md-3 {

    flex: 0 0 25%;

    max-width: 25%;

    padding: 0 15px;

}



.col-md-4 {

    flex: 0 0 33.333333%;

    max-width: 33.333333%;

    padding: 0 15px;

}



.col-md-9 {

    flex: 0 0 75%;

    max-width: 75%;

    padding: 0 15px;

}



/* 响应式调整 */

@media (max-width: 768px) {

    .card-body {

        padding: 1.25rem;

    }



    .amount-grid {

        grid-template-columns: 1fr;

    }



    .footer-actions {

        flex-direction: column;

        gap: 15px;

    }



    .btn-outline-light, .btn-primary-custom {

        width: 100%;

    }



    .col-md-6, .col-md-3, .col-md-4, .col-md-9 {

        flex: 0 0 100%;

        max-width: 100%;

    }

}



.card-custom {

    background-color: #ffffff;

    border: 1px solid #dee2e6;

    border-radius: 0.5rem;

    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);

}



.card-header-custom {

    background-color: #f8f9fa;

    font-weight: 600;

    font-size: 1.1rem;

    color: #333;

}



.table-custom th {

    background-color: #f1f3f5;

    font-weight: 600;

}



.badge-custom-success {

    background-color: #28a745;

    color: #fff;

}



.badge-custom-primary {

    background-color: #007bff;

    color: #fff;

}



.badge-custom-secondary {

    background-color: #6c757d;

    color: #fff;

}



.btn-danger-custom {

    background-color: #dc3545;

    color: #fff;

    border: none;

}



.btn-danger-custom:hover {

    background-color: #c82333;

}

.btn-text {

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    max-width: 100%;

    font-size: clamp(12px, 3vw, 16px); /* 響應式字體大小 */

}

.back-btn {

    width: auto !important; /* 移除固定寬度限制 */

    min-width: min-content; /* 最小寬度基於內容 */

    white-space: nowrap; /* 禁止文字換行 */

    display: inline-flex; /* 使用彈性佈局 */

    justify-content: center; /* 內容居中 */

    padding: 0.5rem 1rem; /* 適當的內邊距 */

}



/* 針對小屏幕優化 */

@media (max-width: 576px) {

    .back-btn {

        font-size: 0.85rem; /* 適當縮小字體 */

        padding: 0.4rem 0.8rem; /* 調整內邊距 */

        transform: scale(0.95); /* 輕微縮放按鈕 */

        transform-origin: center;

    }

}

/* 修正 Bootstrap .btn-primary */

.btn-primary {

    background-color: #2a2a2a !important; /* 深灰底 */

    border-color: #444 !important;

    color: #fff !important; /* 白字 */

}



    /* hover 狀態 - 更深色 */

    .btn-primary:hover,

    .btn-primary:focus {

        background-color: #1f1f1f !important;

        border-color: #555 !important;

        color: #fff !important;

    }



    /* active 狀態 - 紅色按鈕 */

    .btn-primary:active,

    .btn-primary.active,

    .show > .btn-primary.dropdown-toggle {

        background-color: #aa0000 !important;

        border-color: #aa0000 !important;

        color: #fff !important;

    }

.form-control[readonly] {

    background-color: rgba(255, 255, 255, 0.08);

    color: #adb5bd;

}



.form-control:-webkit-autofill {

    -webkit-box-shadow: 0 0 0 1000px rgba(58, 65, 83, 0.5) inset !important;

    -webkit-text-fill-color: #e9ecef !important;

}

/* 只針對移動設備的樣式 start 20250705*/

@media (max-width: 991px) {

    /* 側邊欄初始隱藏 */

    .sidebar {

        transform: translateX(-100%);

        transition: transform 0.3s ease;

        z-index: 1000;

        position: fixed;

        height: 100vh;

        overflow-y: auto;

    }



    /* 導航欄固定在頂部 */

    .mobile-nav {

        position: fixed;

        top: 0;

        left: 0;

        right: 0;

        z-index: 1001;

        transition: transform 0.3s ease;

    }



    /* 內容區域添加頂部內邊距 */

    .content {

        padding-top: 70px;

        transition: transform 0.3s ease;

    }



    /* 側邊欄打開時的狀態 */

    .sidebar-open .sidebar {

        transform: translateX(0);

    }



    .sidebar-open .mobile-nav {

        transform: translateX(250px);

    }



    .sidebar-open .content {

        transform: translateX(250px);

    }



    /* 遮罩層 */

    .mobile-overlay {

        display: none;

        position: fixed;

        top: 0;

        left: 0;

        right: 0;

        bottom: 0;

        background: rgba(0, 0, 0, 0.5);

        z-index: 999;

    }



    .sidebar-open .mobile-overlay {

        display: block;

    }

}

/* 只針對移動設備的樣式 end 20250705*/