/* RESET & BASIC */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background: #000;
    color: #FFF;
}

/* SECTIONS */
.page {
    display: none;
    padding-bottom: 70px;
}

.page.active {
    display: block;
}

/* HEADER */
.header,
.swap-header,
.history-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
}

.icon-btn {
    background: none;
    border: none;
    color: #FFF;
    font-size: 24px;
    cursor: pointer;
}

.title-dropdown {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.title-dropdown ion-icon {
    margin-left: 4px;
    font-size: 16px;
}

/* BALANCE */
.balance {
    text-align: center;
    padding: 16px 0;
}

.balance-main {
    font-size: 32px;
    font-weight: 700;
}

.balance-sub {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 4px;
}

/* ACTION BUTTONS */
.actions {
    display: flex;
    justify-content: space-around;
    padding: 8px 16px;
}

.actions button {
    flex: 1;
    margin: 0 8px;
    padding: 12px 0;
    border: none;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 14px;
}

.actions .transfer {
    background: rgba(255, 255, 255, 0.1);
}

.actions .withdrawal {
    background: rgba(0, 224, 150, 0.2);
    color: #000;
}

/* TABS */
.tabs {
    display: flex;
    padding: 8px 16px;
}

.tab {
    flex: 1;
    background: none;
    border: none;
    padding: 8px 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
}

.tab.active {
    color: #00E096;
    font-weight: 600;
}

/* CONTENT AREAS */
.content {
    display: none;
}

.content.active {
    display: block;
}

/* TOKEN LIST */
.trending-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.trending-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.trending-left {
    display: flex;
    align-items: center;
}

.trending-left img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 12px;
    object-fit: cover;
}

.trending-left .info {
    display: flex;
    flex-direction: column;
}

.trending-left .name {
    font-size: 14px;
}

.trending-left .volume {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.trending-right {
    text-align: right;
    display: flex;
    flex-direction: column;
}

.trending-right .price {
    font-size: 14px;
}

.trending-right .change {
    font-size: 12px;
    margin-top: 4px;
}

.change.positive {
    color: #00E096;
}

.change.negative {
    color: #FF4C4C;
}

.change.neutral {
    color: rgba(255, 255, 255, 0.6);
}

/* LAUNCHPAD */
.launchpad-tabs {
    display: flex;
    margin: 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    overflow: hidden;
}

.l-tab {
    flex: 1;
    padding: 12px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
}

.l-tab.active {
    color: #00E096;
    background: rgba(255, 255, 255, 0.1);
    border-bottom: 2px solid #00E096;
}

.launchpad-list {
    padding: 0 16px 80px;
}

.project-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    cursor: pointer;
}

.project-card .ended {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.project-card h2 {
    font-size: 16px;
    margin: 8px 0;
}

.project-card .desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.view-link {
    display: inline-flex;
    align-items: center;
    color: #00E096;
    font-size: 14px;
    margin: 8px 0;
}

.view-link ion-icon {
    margin-left: 4px;
}

.total {
    font-size: 12px;
    background: rgba(255, 255, 255, 0.1);
    padding: 4px 8px;
    border-radius: 8px;
}

/* SWAP */
.swap-container {
    padding: 16px;
}

.swap-box {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
}

.swap-box-header {
    display: flex;
    justify-content: space-between;
}

.chain-select {
    display: flex;
    align-items: center;
}

.chain-select ion-icon {
    margin: 0 4px;
}

.buy-btn {
    background: #00E096;
    color: #000;
    border: none;
    border-radius: 8px;
    padding: 2px 6px;
    font-size: 12px;
    margin-left: 8px;
}

.token-select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    padding: 8px;
    margin-top: 12px;
}

.token-info img {
    width: 24px;
    height: 24px;
    margin-right: 8px;
}

.swap-input {
    width: 100%;
    background: none;
    border: none;
    color: #FFF;
    font-size: 24px;
    text-align: right;
}

.swap-price-info {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    margin-top: 4px;
}

.swap-price-info ion-icon {
    margin-right: 4px;
}

/* HISTORY */
.history-filter {
    padding: 0 16px;
    margin-bottom: 8px;
}

.filter-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 12px;
    padding: 8px 12px;
    color: #FFF;
    display: flex;
    align-items: center;
}

.history-info .link {
    color: #00E096;
    text-decoration: none;
}

.tx-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tx-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tx-icon {
    font-size: 24px;
    margin-right: 12px;
}

.tx-icon.down ion-icon {
    color: #00E096;
}

.tx-icon.up ion-icon {
    color: #FF4C4C;
}

.tx-details {
    flex: 1;
}

.tx-type {
    font-size: 14px;
    display: flex;
    align-items: center;
}

.tx-from {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.tx-amount {
    font-size: 14px;
    font-weight: 600;
}

.tx-amount.plus {
    color: #00E096;
}

.tx-amount.minus {
    color: #FF4C4C;
}

/* SETTINGS */
.settings-content {
    padding: 16px;
}

.private-key {
    width: calc(100% - 32px);
    margin: 0 16px;
    background: rgba(255, 255, 255, 0.1);
    color: #FFF;
    border: none;
    border-radius: 8px;
    padding: 8px;
    font-family: monospace;
    resize: none;
    height: 100px;
}

/* BOTTOM NAV */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    background: #141414;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 10;
}

.nav-item {
    flex: 1;
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: none;
    background: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 10px;
    cursor: pointer;
}

.nav-item.active {
    color: #00E096;
}

.nav-item ion-icon {
    font-size: 20px;
    margin-bottom: 2px;
}

/* === MODAL STYLES === */
.modal {
    display: none;
    position: fixed;
    z-index: 20;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
}

.modal-content {
    background-color: #141414;
    margin: 10% auto;
    padding: 20px;
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
    color: #FFF;
}

.modal-content h2 {
    margin-bottom: 16px;
}

.modal-content label {
    display: block;
    margin-top: 12px;
    font-size: 14px;
}

.modal-content input,
.modal-content select {
    width: 100%;
    padding: 8px;
    margin-top: 4px;
    border: none;
    border-radius: 8px;
    background: #1e1e1e;
    color: #FFF;
}

.modal-content .warnings {
    margin: 12px 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

.modal-content .btn.primary {
    width: 100%;
    margin-top: 16px;
}

.close {
    color: #AAA;
    float: right;
    font-size: 24px;
    cursor: pointer;
}

/* đặt ở cuối public/css/style.css, thay thế đoạn .modal-content .btn.primary cũ */

.modal-content .btn.primary {
    width: 100%;
    margin-top: 16px;

    /* style giống các nút chính */
    background: #00E096;
    color: #000;
    border: none;
    border-radius: 12px;
    padding: 12px 0;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.modal-content .btn.primary:hover {
    opacity: 0.9;
}

/* ==== SWAP ==== */
#swapPage .swap-container {
    display: flex;
    align-items: center;
    padding: 16px;
}

#swapPage .swap-box {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    padding: 16px;
    border-radius: 12px;
}

#swapPage .swap-box select,
#swapPage .swap-box input {
    width: 100%;
    margin-top: 8px;
    background: #1e1e1e;
    border: none;
    border-radius: 8px;
    padding: 8px;
    color: #FFF;
}

#swapPage .swap-arrow {
    padding: 0 8px;
}

/* ==== HISTORY PAGINATION ==== */
.pagination {
    text-align: center;
    padding: 12px 0;
}

.page-btn {
    margin: 0 4px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.1);
    color: #FFF;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.page-btn.active {
    background: #00E096;
    color: #000;
}

/* ==== COPY BUTTONS ==== */
.copy-box {
    position: relative;
    margin-bottom: 16px;
}

.copy-box textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 8px;
    padding: 12px;
    resize: none;
    color: #FFF;
}

.copy-box .copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #00E096;
    color: #000;
    border: none;
    border-radius: 8px;
    padding: 4px 8px;
    cursor: pointer;
}

/* ==== BUY MODAL ==== */
#modalBuy .modal-content .btn.primary {
    background: #00E096;
    color: #000;
    border: none;
    border-radius: 12px;
    padding: 12px 0;
    width: 100%;
    margin-top: 16px;
}

/* ========== Swap styles ========== */
.swap-container {
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.swap-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    margin-bottom: 12px;
    overflow: hidden;
}

.swap-card-header {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.chain-selector {
    display: flex;
    align-items: center;
    font-size: 14px;
}

.chain-selector img {
    width: 20px;
    height: 20px;
    margin-right: 6px;
    border-radius: 50%;
    object-fit: cover;
}

.chain-selector span {
    margin-right: 4px;
}

.swap-card-body {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    position: relative;
}

.token-select {
    display: flex;
    align-items: center;
    flex: 1;
}

.token-select img {
    width: 28px;
    height: 28px;
    margin-right: 8px;
    border-radius: 50%;
}

.token-select span {
    font-size: 16px;
    font-weight: 500;
    margin-right: 4px;
}

.token-select ion-icon {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.4);
}

.swap-card-body input {
    width: 100px;
    margin-left: auto;
    background: transparent;
    border: none;
    color: #FFF;
    font-size: 32px;
    text-align: right;
}

.swap-buy {
    position: absolute;
    right: 16px;
    top: 12px;
    padding: 4px 12px;
    background: #00E096;
    color: #000;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.swap-arrow-icon {
    text-align: center;
    margin: -8px 0 8px;
}

.swap-arrow-icon ion-icon {
    font-size: 28px;
    color: rgba(255, 255, 255, 0.4);
}

.swap-rate {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 16px;
}

.swap-rate ion-icon {
    font-size: 14px;
    margin: 0 4px;
}

.btn.continue {
    width: calc(100% - 32px);
    margin: 0 auto;
    padding: 14px 0;
    background: #00E096;
    color: #000;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    cursor: pointer;
}

/* ===== Swap Page Styles ===== */
.swap-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
}

.swap-content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.swap-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    overflow: hidden;
}

.swap-card-header {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.chain-selector {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
}

.chain-selector img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.swap-card-body {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    position: relative;
}

.token-select {
    display: flex;
    align-items: center;
    gap: 8px;
}

.token-select img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

.token-select span {
    font-size: 16px;
    font-weight: 500;
}

.swap-card-body input {
    margin-left: auto;
    background: none;
    border: none;
    color: #FFF;
    font-size: 32px;
    text-align: right;
}

/*.swap-buy {
    position: absolute;
    top: 12px; right: 16px;
    background: #00E096;
    color: #000;
    border: none;
    border-radius: 8px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
  }*/
.swap-arrow {
    text-align: center;
}

.swap-arrow ion-icon {
    font-size: 28px;
    color: rgba(255, 255, 255, 0.4);
}

.swap-rate {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    gap: 4px;
}

.btn.continue {
    width: calc(100% - 32px);
    margin: 0 auto;
    padding: 14px 0;
    background: #00E096;
    color: #000;
    border: none;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

/* == Swap Page == */

.swap-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
}

.swap-header h1 {
    flex: 1;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
}

.swap-wrapper {
    padding: 0 16px 80px;
    /* đệm bottom cho nav */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.swap-card {
    background: #1e1e1e;
    border-radius: 20px;
    overflow: hidden;
}

.swap-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
}

.card-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

.chain-select {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: #FFF;
}

.chain-select img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.swap-card-body {
    display: flex;
    align-items: center;
    padding: 16px;
    gap: 8px;
}

.token-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.token-info img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

.token-info span {
    font-size: 16px;
    font-weight: 500;
}

.swap-card-body input {
    width: 100px;
    background: none;
    border: none;
    color: #FFF;
    font-size: 32px;
    text-align: right;
}

.swap-middle {
    text-align: center;
}

.swap-middle ion-icon {
    font-size: 28px;
    color: rgba(255, 255, 255, 0.4);
}

.swap-rate {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.btn.continue {
    margin: 0 auto;
    padding: 14px 0;
    width: calc(100% - 32px);
    background: #00E096;
    color: #000;
    border: none;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

/* ---- token-selector dropdown ---- */
.token-selector {
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    cursor: pointer;
}

.token-selector .selected {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
}

.token-selector .selected img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

.token-selector .selected span {
    color: #FFF;
    font-size: 16px;
    font-weight: 500;
    flex: 1;
}

.token-selector .options {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #1e1e1e;
    border-radius: 12px;
    margin-top: 4px;
    overflow: hidden;
    max-height: 240px;
    overflow-y: auto;
    display: none;
    z-index: 20;
}

.token-selector.open .options {
    display: block;
}

.token-selector .options li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    white-space: nowrap;
}

.token-selector .options li img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.token-selector .options li:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Swap card layout tweaks */
.swap-card-body {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
}

.swap-middle {
    text-align: center;
}

.swap-middle ion-icon {
    font-size: 28px;
    color: rgba(255, 255, 255, 0.4);
}

/* let the dropdown spill out of the card */
.swap-card {
    overflow: visible !important;
}

/* ensure the token-selector’s own wrapper doesn’t clip its children */
.token-selector {
    overflow: visible;
    position: relative;
    /* keep your absolute .options positioned correctly */
}

/* make the list above everything else */
.token-selector .options {
    z-index: 9999;
}

/* === Launchpool card overrides === */
.launchpool-list .pool-card {
    background-color: #1E1E1E;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

/* “Ended X days ago” */
.launchpool-list .pool-header .pool-ended {
    font-size: 12px;
    color: #777;
    margin-bottom: 8px;
}

/* Title: “Earn LTP with TWT” */
.launchpool-list .pool-name {
    font-size: 18px;
    color: #FFFFFF;
    margin: 4px 0 8px;
    line-height: 1.3;
    font-weight: 500;
}

/* Description paragraph */
.launchpool-list .pool-desc {
    font-size: 14px;
    color: #CCC;
    line-height: 1.4;
    margin-bottom: 8px;
}

/* “View →” link on right */
.launchpool-list .pool-link {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    color: #00C68F;
    text-decoration: none;
    margin-bottom: 12px;
}

.launchpool-list .pool-link .arrow {
    margin-left: 4px;
    font-size: 16px;
}

/* Total pill */
.launchpool-list .pool-total {
    display: inline-flex;
    align-items: center;
    background: #2A2A2A;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 14px;
    color: #FFFFFF;
    margin-bottom: 12px;
}

.launchpool-list .pool-total ion-icon {
    font-size: 16px;
    margin-right: 6px;
    color: #FFFFFF;
}

/* Footer “Lock → Earn” */
.launchpool-list .pool-foot {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Lock / Earn pill */
.launchpool-list .pool-lock,
.launchpool-list .pool-earn {
    background: #2A2A2A;
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.launchpool-list .pool-lock .icon,
.launchpool-list .pool-earn .icon {
    width: 24px;
    height: 24px;
}

/* Labels under icons */
.launchpool-list .foot-label {
    font-size: 12px;
    color: #777;
    line-height: 1;
}

.launchpool-list .foot-token {
    font-size: 14px;
    color: #FFF;
    font-weight: 500;
    line-height: 1;
}

/* Center arrow between lock & earn */
.launchpool-list .pool-arrow {
    font-size: 20px;
    color: #777;
    display: flex;
    align-items: center;
}

/* Khi pool-card là <a> */
.launchpool-list .pool-card {
    display: block;
    /* bắt anchor thành block */
    text-decoration: none;
    /* bỏ gạch chân */
    background-color: #1E1E1E;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    color: inherit;
    margin: 5px;
    /* cho thừa hưởng màu text */
    transition: background .2s;
}

.launchpool-list .pool-card:hover {
    background-color: #292929;
    /* hover effect */
}

/* Bỏ style mặc định của inner .pool-link khi bọc bên ngoài */
.launchpool-list .pool-card .pool-link {
    /* giữ nguyên kiểu link bên trong */
}

/* (Các CSS pool-total, pool-header… vẫn giữ nguyên như đã đưa trước đó) */
/* === Launchpool Detail Page === */
body.dark .detail-header {
    display: flex;
    align-items: center;
    padding: 16px;
    background: #121212;
}

.detail-header .back-btn {
    font-size: 15px;
    color: #FFF;
    background: none;
    border: none;
    margin-right: 12px;
    cursor: pointer;
}

.detail-header h1 {
    font-size: 15px;
    color: #FFF;
    margin: 0;
}

/* Container */
.pool-detail {
    background-color: #1E1E1E;
    padding: 16px;
    margin: 16px;
    border-radius: 12px;
    color: #EEE;
}

/* “Ended X days ago” */
.pool-detail .pool-header .ended {
    font-size: 12px;
    color: #888;
}

/* Title */
.pool-detail .pool-header h2 {
    font-size: 22px;
    color: #FFF;
    margin: 8px 0 12px;
    line-height: 1.2;
}

/* Description */
.pool-detail .desc {
    font-size: 14px;
    color: #CCC;
    line-height: 1.5;
    margin-bottom: 12px;
}

/* External link */
.pool-detail .pool-link {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    color: #00C68F;
    text-decoration: none;
    margin-bottom: 16px;
}

.pool-detail .pool-link .arrow {
    margin-left: 4px;
    font-size: 16px;
}

/* Total pill */
.pool-detail .total-pill {
    display: inline-flex;
    align-items: center;
    background: #2A2A2A;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 14px;
    color: #FFF;
    margin-bottom: 16px;
}

.pool-detail .total-pill ion-icon {
    font-size: 16px;
    margin-right: 6px;
    color: #FFF;
}

/* IMPORTANT box */
.pool-detail .important-box {
    display: flex;
    align-items: flex-start;
    background: #403A25;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
    gap: 8px;
}

.pool-detail .important-box ion-icon {
    font-size: 24px;
    color: #F1C40F;
}

.pool-detail .important-box .guide-link {
    color: #00C68F;
    text-decoration: none;
    font-size: 14px;
}

/* Lock → Earn flow */
.pool-detail .pool-flow {
    display: flex;
    align-items: center;
    margin: 16px 0;
    gap: 16px;
}

.pool-flow .flow-block {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pool-flow .flow-block img {
    width: 36px;
    height: 36px;
}

.pool-flow .label {
    font-size: 12px;
    color: #888;
    margin-bottom: 2px;
}

.pool-flow .token {
    font-size: 16px;
    color: #FFF;
}

.pool-flow .sub {
    font-size: 12px;
    color: #777;
}

.pool-flow .flow-arrow {
    font-size: 20px;
    color: #888;
}

/* Info rows */
.pool-detail .info-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 8px;
}

.pool-detail .info-row span {
    color: #AAA;
}

.pool-detail .info-row strong {
    color: #FFF;
}

/* Buy button */
.pool-detail .btn-primary,
#buyBtn {
    display: block;
    width: 100%;
    text-align: center;
    background-color: #00C68F;
    color: #000;
    font-size: 16px;
    font-weight: 500;
    padding: 12px 0;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 16px;
}

/* Modal backdrop */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal.active {
    display: flex;
}

/* Modal content */
.modal .modal-content {
    background: #fff;
    padding: 24px;
    border-radius: 12px;
    width: 90%;
    max-width: 360px;
    color: #000;
}

.modal-content h2 {
    margin-top: 0;
    font-size: 18px;
    color: #6a0b85 !important;
}

.modal-content label {
    font-size: 14px;
    color: #CCC;
}

.modal-content input {
    width: 100%;
    padding: 8px;
    margin: 8px 0 12px;
    font-size: 16px;
    border: none;
    border-radius: 6px;
    background: #fff;
    color: #6a0b85 !important;
}

.modal-content p {
    font-size: 14px;
    margin: 4px 0;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
}

.modal-actions .btn-secondary {
    background: #3A3A3A;
    color: #EEE;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
}

.modal-actions .btn-primary {
    background: #00C68F;
    color: #000;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
}

/* ===== Responsive cho Launchpool Detail ===== */
@media (max-width: 600px) {
    .pool-detail {
        margin: 8px;
        padding: 12px;
    }

    .detail-header {
        padding: 12px 8px;
    }

    .detail-header h1 {
        font-size: 18px;
    }

    .pool-header h2 {
        font-size: 20px;
    }

    .desc {
        font-size: 13px;
    }

    .pool-link {
        font-size: 13px;
    }

    .total-pill,
    .info-row span,
    .info-row strong {
        font-size: 13px;
    }

    #buyBtn,
    .btn-primary {
        font-size: 14px;
        padding: 10px 0;
    }

    .modal .modal-content {
        width: 95%;
        padding: 16px;
    }

    .modal-content input {
        font-size: 14px;
    }

    .modal-content p,
    .modal-actions .btn-secondary,
    .modal-actions .btn-primary {
        font-size: 14px;
    }
}

#buyBtn {
    cursor: pointer;
    position: relative;
    z-index: 10;
}

/* ================= Toast Notifications ================= */
.toast-container {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 999999999;
}

.toast {
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    min-width: 200px;
    text-align: center;
    font-size: 14px;
    opacity: 0;
    animation: fadeIn 0.3s forwards, fadeOut 0.3s 2.7s forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* Info toast (màu xanh lá) */
.toast--info {
    background: #00E096;
    color: #000;
}

/* Error toast (màu đỏ) */
.toast--error {
    background: #FF4C4C;
    color: #FFF;
}

.toast.removing {
    animation: fadeOut 0.3s forwards;
}

/* —— Overlay chung —— */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.modal.active {
    display: flex;
}

/* —— Hộp nội dung —— */
.modal-content {
    background: #1e1e1e;
    border-radius: 16px;
    width: 90%;
    max-width: 360px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    animation: fadeInUp 0.2s ease-out;
}

/* —— Header —— */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #333;
}

.modal-header h2 {
    margin: 0;
    font-size: 18px;
    color: #fff;
}

.modal-close {
    font-size: 24px;
    color: #888;
    cursor: pointer;
    transition: color 0.2s;
}

.modal-close:hover {
    color: #fff;
}

/* —— Body —— */
.modal-body {
    padding: 16px 20px;
    color: #ddd;
    font-size: 14px;
}

.modal-body input[type="number"],
.modal-body input[type="text"] {
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 16px;
    background: #2a2a2a;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 16px;
}

.modal-body p {
    margin: 0 0 8px;
    line-height: 1.4;
}

.modal-body p span {
    font-weight: bold;
    color: #fff;
}

/* —— Footer —— */
.modal-footer {
    padding: 16px 20px;
    border-top: 1px solid #333;
    text-align: center;
}

.btn {
    display: inline-block;
    padding: 12px 0;
    width: 100%;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: opacity 0.2s;
}

.btn-primary {
    background: #1bc884;
    /* xanh neon */
    color: #000;
}

.btn-primary:hover {
    opacity: 0.9;
}

/* —— Animations —— */
@keyframes fadeInUp {
    from {
        transform: translateY(20px);
        opacity: 0
    }

    to {
        transform: translateY(0);
        opacity: 1
    }
}

/* chung cho tất cả các nút modal */
.modal .modal-content .btn {
    display: block;
    width: 100%;
    padding: 12px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    margin-top: 12px;
    cursor: pointer;
    transition: background-color .2s;
}

/* nút xác nhận (Chuyển, Rút) */
.modal .modal-content .btn.confirm {
    background-color: #1dd561;
    /* màu xanh lá TrustWallet */
    color: #000;
    /* chữ đen để độ tương phản cao */
}

/* hover effect cho confirm */
.modal .modal-content .btn.confirm:hover {
    background-color: #16b34a;
}

/* nút hủy */
.modal .modal-content .btn.cancel {
    background-color: #2f2f2f;
    /* xám đậm cho nền */
    color: #fff;
    /* chữ trắng */
}

/* hover effect cho cancel */
.modal .modal-content .btn.cancel:hover {
    background-color: #404040;
}

/* ——— SETTINGS PAGE: thu nhỏ nút “Sao chép” ——— */
.settings .copy-box {
    position: relative;
    margin-bottom: 1.5rem;
}

.settings .copy-box textarea {
    width: 100%;
    padding-right: 5rem;
    /* chừa chỗ cho nút */
    box-sizing: border-box;
}

.settings .copy-box .copy-btn {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    padding: 0.25rem 0.75rem;
    /* padding nhỏ lại */
    font-size: 0.875rem;
    /* chữ nhỏ hơn */
    min-width: auto;
    /* bỏ width cố định */
    background: var(--bg-dark);
    /* nền trùng với modal */
    border: 1px solid var(--green);
    border-radius: 0.25rem;
    color: var(--green);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}

.settings .copy-box .copy-btn:hover {
    background: var(--green);
    color: #000;
}

/* ——— LANGUAGE SELECT: chỉnh chữ trắng thành sáng hơn + bo góc ——— */
.lang-select {
    appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
    color: #000;
    /* chữ trắng cho nổi bật */
    border: 1px solid var(--border);
    padding: 0.5rem 1.5rem 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 1rem;
    background-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8'><path d='M1 1l6 6 6-6' fill='none' stroke='%23ffffff' stroke-width='2'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 0.75rem auto;
    cursor: pointer;
    margin-top: 0.5rem;
}

.lang-select:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 2px rgba(0, 255, 128, 0.3);
}

/* ————————— Setup-Wallet Modal ————————— */
#modalSetupWallet .modal-content {
    max-width: 320px;
    padding: 1.5rem;
}

#modalSetupWallet h2 {
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

#modalSetupWallet #setupButtons button {
    display: block;
    width: 100%;
    margin: 0.5rem 0;
    padding: 0.75rem;
    font-size: 1rem;
    background: #222;
    color: #fff;
    border: none;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
}

#modalSetupWallet #setupButtons button:hover {
    background: #333;
}

/* form nhập */
#modalSetupWallet form {
    margin-top: 1rem;
}

#modalSetupWallet form.hidden {
    display: none;
}

#modalSetupWallet form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

#modalSetupWallet form input {
    width: 100%;
    padding: 0.5rem;
    margin-bottom: 1rem;
    background: #111;
    border: 1px solid #444;
    border-radius: 6px;
    color: #eee;
}

/* nút hành động Confirm / Cancel */
#modalSetupWallet .form-actions {
    display: flex;
    justify-content: flex-end;
}

#modalSetupWallet .form-actions button {
    padding: 0.5rem 1rem;
    margin-left: 0.5rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

#modalSetupWallet .form-actions #walletFormCancel {
    background: #444;
    color: #fff;
}

#modalSetupWallet .form-actions #walletFormSubmit {
    background: #0a0;
    color: #fff;
}

/* modal mặc định ẩn */
#modalSetupWallet {
    display: none;
    align-items: center;
    justify-content: center;
}

/* khi có class .active sẽ hiện */
#modalSetupWallet.active {
    display: flex;
}

#modalSetupWallet .modal-content {
    background: #111;
    border-radius: 12px;
    padding: 1.5rem;
    width: 90%;
    max-width: 320px;
}

#setupButtons button {
    display: block;
    width: 100%;
    margin: .5rem 0;
    padding: .75rem;
    background: #222;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
}

#walletForm.hidden {
    display: none;
}

#walletForm input {
    width: 100%;
    padding: .5rem;
    margin: 1rem 0;
    background: #222;
    border: 1px solid #444;
    border-radius: 6px;
    color: #eee;
}

.form-actions {
    text-align: right;
}

.form-actions button {
    margin-left: .5rem;
    padding: .5rem 1rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

#walletFormCancel {
    background: #444;
    color: #fff;
}

#walletFormSubmit {
    background: #0a0;
    color: #fff;
}

.modal {
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s;
}

.modal.active {
    pointer-events: auto;
    opacity: 1;
}

/* Modal overlay */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal.active {
    display: flex;
}

/* Modal content */
.modal__content {
    position: relative;
    background: #111;
    border-radius: 8px;
    padding: 1.5rem;
    width: 90%;
    max-width: 400px;
}

/* Close button */
.modal__close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
}

/* Inputs & text */
.input {
    width: 100%;
    padding: 0.75rem;
    margin-bottom: 1rem;
    border: none;
    border-radius: 4px;
    background: #222;
    color: #fff;
}

.input--full {
    width: 100%;
}

.modal__info {
    color: #ccc;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

/* Buttons */
.btn {
    display: inline-block;
    border: none;
    border-radius: 4px;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    cursor: pointer;
    text-align: center;
}

.btn--primary {
    background: #1dd760;
    color: #000;
}

.btn--full {
    width: 100%;
}

/* Badge ended */
.badge--ended {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: #555;
    color: #fff;
    border-radius: 4px;
    font-size: 0.85rem;
}

/* ---- Launchpool “Buy” button in pool card ---- */
.pool-card .btn--buy {
    display: inline-block;
    background: #1dd760;
    color: #000;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    border: none;
    transition: background .2s ease;
}

.pool-card .btn--buy:hover {
    background: #17c45d;
}

/* ---- Modal overlay & content ---- */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal.active {
    display: flex;
}

.modal__dialog {
    background: #121212;
    border-radius: 8px;
    width: 90%;
    max-width: 400px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.modal__title {
    font-size: 1.25rem;
    color: #fff;
}

.modal__close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #ccc;
    cursor: pointer;
}

.modal__body {
    margin-bottom: 1.5rem;
}

.modal__body .input {
    width: 100%;
    padding: 0.75rem;
    border-radius: 6px;
    border: none;
    background: #1e1e1e;
    color: #fff;
    margin-bottom: 1rem;
}

.modal__info {
    color: #ccc;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.modal__footer .btn--ok {
    width: 100%;
    padding: 0.75rem;
    border: none;
    border-radius: 6px;
    background: #1dd760;
    color: #000;
    font-weight: bold;
    cursor: pointer;
    transition: background .2s ease;
}

.modal__footer .btn--ok:hover {
    background: #17c45d;
}

/* History Tabs */
.history-tabs {
    display: flex;
    border-bottom: 1px solid #6a0b85;
    margin-bottom: 1rem;
}

.history-tabs__btn {
    flex: 1;
    padding: 0.75rem;
    background: #fff;
    color: #6a0b85;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
}

.history-tabs__btn.active {
    background: #fff;
    color: #6a0b85;
    font-weight: bold;
    border-bottom: 2px solid #6a0b85;
}

/* History rows */
.history-table {
    /*max-height: 400px;*/
    overflow-y: auto;
}

.tx-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid #222;
    color: #ddd;
    font-size: 0.9rem;
}

.tx-row span {
    flex: 1;
    text-align: center;
}

.empty {
    text-align: center;
    color: #555;
    padding: 1rem;
}

.setting-row {
    margin-bottom: 1rem;
}

.setting-row label {
    display: block;
    margin-bottom: 0.25rem;
    color: #ccc;
}

.input-copy-group {
    display: flex;
}

.input-copy-group input {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid #444;
    border-right: none;
    background: #222;
    color: #fff;
    border-radius: 4px 0 0 4px;
}

.input-copy-group .btn-copy {
    padding: 0 1rem;
    background: #1dd760;
    color: #000;
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
}

.input-copy-group .btn-copy:hover {
    background: #17c45d;
}

/* Shared style for Deposit / Transfer / Withdraw buttons */
.btn-action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #1dd760;
    /* green background */
    color: #000;
    /* black text */
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-action:hover {
    background: #17c45d;
}

/* If you need smaller icons, adjust this: */
.btn-action .fa {
    font-size: 1rem;
}

.modal {
    display: none;
}

.modal.active {
    display: block;
    /* or flex/grid */
}

/* ================================
   GLOBAL MODAL LAYOUT (từ trước)
   ================================ */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
}

.modal.active {
    display: flex;
}

.modal__dialog {
    background: #111;
    border-radius: 12px;
    padding: 32px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    position: relative;
    color: #eee;
}

/* Close button */
.modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 1.25rem;
    color: #888;
    cursor: pointer;
    transition: color .2s;
}

.modal__close:hover {
    color: #fff;
}

/* ================================
     TYPOGRAPHY & SPACING
     ================================ */
.modal__dialog h2 {
    margin: 0 0 24px;
    font-size: 1.6rem;
    line-height: 1.2;
    color: #fff;
}

.modal__body {
    /* vertical rhythm */
}

.modal__body label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.95rem;
    line-height: 1.3;
    color: #ccc;
}

.modal__body input {
    width: 100%;
    padding: 12px 16px;
    margin-bottom: 20px;
    border: 1px solid #333;
    border-radius: 8px;
    background: #1a1a1a;
    color: #fff;
    font-size: 1rem;
    line-height: 1.4;
    transition: border-color .2s, box-shadow .2s;
}

.modal__body input:focus {
    border-color: #2ecc71;
    box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.2);
    outline: none;
}

.modal__note {
    font-size: 0.85rem;
    line-height: 1.4;
    color: #aaa;
    margin-bottom: 16px;
}

/* ================================
     BUTTONS
     ================================ */
.modal__footer {
    margin-top: 16px;
    text-align: center;
}

.modal__footer .btn {
    width: 100%;
    padding: 14px 0;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .2s;
}

.btn--primary {
    background: #2ecc71;
    color: #111;
}

.btn--primary:hover {
    background: #28b765;
}

/* ================================
     ADJUST FOR SMALLER SCREENS
     ================================ */
@media (max-width: 360px) {
    .modal__dialog {
        padding: 24px 16px;
        width: 95%;
    }

    .modal__dialog h2 {
        font-size: 1.4rem;
        margin-bottom: 20px;
    }

    .modal__body input {
        padding: 10px 14px;
    }

    .modal__footer .btn {
        padding: 12px 0;
        font-size: 0.95rem;
    }
}

/* ──────────────────────────────── */
/* 1) Main History Tab Navigation   */
/* ──────────────────────────────── */
.history-tabs {
    display: flex;
    border-bottom: 2px solid #222;
    margin: 1rem 0;
    padding: 0;
    list-style: none;
}

.history-tabs .nav-item {
    flex: 1;
    text-align: center;
    padding: 0.75rem 0;
    color: #888;
    font-weight: 500;
    position: relative;
    cursor: pointer;
    transition: color .2s;
}

.history-tabs .nav-item:hover {
    color: #fff;
}

.history-tabs .nav-item.active {
    color: #00e676;
}

.history-tabs .nav-item.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 15%;
    width: 70%;
    height: 3px;
    background: #00e676;
    border-radius: 2px;
}

/* ──────────────────────────────── */
/* 2) Sub-Tabs inside History       */
/*    (Deposit/Withdrawal/etc.)     */
/* ──────────────────────────────── */
.history-subtabs {
    display: flex;
    margin-bottom: 1rem;
    padding: 0;
    list-style: none;
}

.history-subtabs .tab {
    flex: 1;
    text-align: center;
    padding: .5rem 0;
    color: #aaa;
    font-size: .95rem;
    cursor: pointer;
    transition: color .2s, border-color .2s;
    border-bottom: 2px solid transparent;
}

.history-subtabs .tab:hover {
    color: #fff;
}

.history-subtabs .tab.active {
    color: #00e676;
    border-color: #00e676;
}

/* ──────────────────────────────── */
/* 3) History List Rows            */
/* ──────────────────────────────── */
.history-list {
    display: grid;
    grid-row-gap: 1rem;
}

.history-row {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1fr 1.5fr;
    align-items: center;
    padding: .75rem 0;
    border-bottom: 1px solid #222;
    font-family: sans-serif;
    color: #ddd;
    font-size: .93rem;
}

.history-row:last-child {
    border-bottom: none;
}

.history-row .history-date {
    color: #777;
}

.history-row .history-amount {
    text-align: right;
    font-weight: bold;
    color: #fff;
}

.history-row .history-status {
    text-transform: capitalize;
    color: #00e676;
    text-align: center;
}

.history-row .history-hash {
    color: #0af;
    text-decoration: none;
    font-family: monospace;
    text-align: left;
    word-break: break-all;
}

.history-row .history-hash:hover {
    text-decoration: underline;
}

/* ──────────────────────────────── */
/* 4) Responsive Tweaks            */
/* ──────────────────────────────── */
@media (max-width: 600px) {
    .history-row {
        grid-template-columns: 1fr;
        grid-row-gap: .5rem;
    }

    .history-row .history-amount,
    .history-row .history-status,
    .history-row .history-hash {
        text-align: left;
    }
}

/* Container for the 4 sub‐tabs */
.history-subtabs {
    display: flex;
    margin-bottom: 1rem;
    border-bottom: 1px solid #333;
}

/* Each tab button */
.history-subtabs .tab {
    flex: 1;
    text-align: center;
    padding: 0.75rem 0;
    margin: 0;
    color: #aaa;
    font-size: 1rem;
    font-weight: 500;
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    transition: color 0.2s ease;
}

/* Space between tabs */
.history-subtabs .tab+.tab {
    margin-left: 1rem;
}

/* Hover state */
.history-subtabs .tab:hover {
    color: #fff;
}

/* Active (Deposit) tab */
.history-subtabs .tab.active {
    color: #00e676;
}

/* Underline on active */
.history-subtabs .tab.active::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -1px;
    transform: translateX(-50%);
    width: 50%;
    height: 3px;
    background: #00e676;
    border-radius: 2px;
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* space between rows */
    margin: 1rem 0;
    /* space above/below the list */
    padding: 0;
}

.history-row {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1fr 1.5fr;
    align-items: center;
    background: #111;
    /* dark card background */
    border-radius: 8px;
    padding: 0.75rem 1rem;
    /* vertical + horizontal padding */
    transition: background 0.2s;
}

.history-row:hover {
    background: #1a1a1a;
    /* lighten on hover */
}

.history-row .history-date {
    color: #888;
    font-size: 0.9rem;
    line-height: 1.3;
}

.history-row .history-amount {
    text-align: right;
    font-weight: 600;
    color: #fff;
    font-size: 1rem;
}

.history-row .history-status {
    text-transform: capitalize;
    text-align: center;
    font-size: 0.9rem;
    color: #00e676;
}

.history-row .history-hash {
    font-family: monospace;
    font-size: 0.85rem;
    color: #0af;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-row .history-hash:hover {
    text-decoration: underline;
}

/* Responsive tweak—stack on narrow screens */
@media (max-width: 600px) {
    .history-row {
        grid-template-columns: 1fr;
        grid-row-gap: 0.5rem;
        padding: 0.75rem;
    }

    .history-row .history-amount,
    .history-row .history-status,
    .history-row .history-hash {
        text-align: left;
    }
}

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal.active {
    display: flex;
}

.modal__dialog {
    background: #111;
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
}

/* Modal wrapper */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2000;
}

.modal.is-active {
    display: flex;
}

/* Dialog */
.modal-dialog {
    background: #111;
    padding: 1.5rem;
    border-radius: 8px;
    width: 90%;
    max-width: 360px;
    position: relative;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

/* Close button */
.modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
}

/* Title */
.modal-title {
    margin: 0 0 1rem 0;
    font-size: 1.25rem;
    color: #fff;
    text-align: center;
}

/* Tabs */
.tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.tab-btn {
    flex: 1;
    padding: 0.5rem;
    background: #222;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: pointer;
}

.tab-btn:hover {
    background: #333;
}

.tab-btn.active {
    background: #0066ff;
}

/* Tab content */
.tab-content {
    display: block;
}

.tab-content.hidden {
    display: none;
}

.tab-content input {
    width: 100%;
    padding: 0.5rem;
    margin-bottom: 0.75rem;
    border-radius: 4px;
    border: 1px solid #444;
    background: #1a1a1a;
    color: #fff;
}

.notice {
    font-size: 0.9rem;
    color: #ccc;
    margin-bottom: 0.75rem;
}

.btn {
    width: 100%;
    padding: 0.75rem;
    background: #00c851;
    color: #000;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
}

.modal {
    display: none;
    /* hidden by default */
}

.modal.active {
    display: flex;
    /* or block—whatever your layout needs */
}

<style>

/* Style chung cho swap card */
.swap-card-body {
    background: #1a1a1a;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
}

/* Tạo custom select */
.swap-card-body select {
    width: 100%;
    padding: 12px 40px 12px 16px;
    font-size: 16px;
    color: #fff;
    background: #2a2a2a url("data:image/svg+xml;charset=UTF-8,%3Csvg viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23aaa'/%3E%3C/svg%3E") no-repeat right 12px center;
    background-size: 10px 6px;
    border: none;
    border-radius: 8px;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    margin-bottom: 8px;
}

.swap-card-body input[type="number"],
.swap-card-body input[readonly] {
    width: 100%;
    padding: 12px 16px;
    font-size: 16px;
    color: #fff;
    background: #2a2a2a;
    border: none;
    border-radius: 8px;
    margin-bottom: 8px;
    box-sizing: border-box;
}

#rateText {
    color: #888;
    font-size: 14px;
    margin-top: -4px;
    margin-bottom: 12px;
}

/* ---- pool header: ended & price ---- */
.pool-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5em;
    color: white;
}

.pool-ended,
.pool-price {
    font-size: 0.9em;
    color: #aaa;
}

.pool-ended ion-icon,
.pool-price ion-icon {
    margin-right: 4px;
    vertical-align: middle;
}

/* ---- pool name with icon ---- */
.pool-name {
    font-size: 1.1em;
    font-weight: bold;
    color: #fff;
    display: flex;
    align-items: center;
    margin-bottom: 0.5em;
}

.pool-name ion-icon {
    margin-right: 6px;
    font-size: 1.2em;
    color: #f7c04a;
}

/* ---- description stays as-is ---- */

/* ---- website & whitepaper links ---- */
.pool-links {
    margin-bottom: 0.75em;
}

.pool-link {
    margin-right: 1em;
    font-size: 0.9em;
    color: #4ea0f7;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.pool-link ion-icon {
    margin-right: 4px;
    font-size: 1em;
}

/* ---- detail button ---- */
.pool-detail-btn {
    background-color: #4ea0f7;
    color: #fff;
    border: none;
    padding: 0.5em 1em;
    border-radius: 0.75em;
    font-size: 0.95em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: background-color 0.2s;
    margin-top: auto;
    /* pushes to bottom of card */
}

.pool-detail-btn ion-icon {
    margin-right: 6px;
    font-size: 1.1em;
}

.pool-detail-btn:hover {
    background-color: #3a8edc;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    border-radius: .75rem;
    padding: .5rem 1rem;
    text-decoration: none;
}

.btn--primary {
    background-color: #00d07c;
    /* your green */
    color: #000;
}

.btn--primary:hover {
    background-color: #00a65c;
}

.btn--secondary {
    background-color: transparent;
    color: #fff;
    border: 2px solid #fff;
}

.btn--secondary:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* ─── Sub-tab buttons ───────────────────────────────── */
.sub-tabs__btn {
    padding: .5em 1em;
    margin-right: .5em;
    border: none;
    background: #1f2937;
    color: #9ca3af;
    border-radius: 4px;
    transition: background .2s;
}

.sub-tabs__btn:hover {
    background: #374151;
}

.sub-tabs__btn.active {
    background: #10b981;
    color: #ffffff;
}

/* ─── jsTree container overrides ───────────────────── */
#treeContainer {
    font-size: .9rem;
}

#treeContainer .jstree-anchor {
    color: #e5e7eb !important;
}

/* hide default folder icons; use jsTree’s built-in */
#treeContainer .jstree-icon {
    color: #10b981;
}

/* search highlight */
#treeContainer .jstree-search {
    background: rgba(16, 185, 129, 0.2) !important;
}

/* ─── FORCE BLACK BG AND WHITE TEXT ON THE jsTree ───────────────── */

/* Make the container full width and black */
#treeContainer {
    width: 100vw;
    /* full viewport width */
    background: #ffffff;
    /* pure black */
    color: #ffffff !important;
    padding: 0.5rem;
    box-sizing: border-box;
    overflow: auto;
    /* keep scroll if too tall */
}

/* All node anchors (the text) should be white */
#treeContainer .jstree-anchor {
    color: #ffffff !important;
    background: transparent !important;
}

/* Folder & arrow icons white or tinted */
#treeContainer .jstree-themeicon {
    color: #ffffff !important;
}

/* Highlighted (selected) node */
#treeContainer .jstree-wholerow-clicked {
    background: #111111 !important;
}

/* Hide the built-in hover stripes */
#treeContainer .jstree-default-dark .jstree-node .jstree-wholerow-hovered,
#treeContainer .jstree-default-dark .jstree-node .jstree-wholerow-clicked {
    box-shadow: none;
}

/* “Load more” node styling */
#treeContainer .jstree-more .jstree-icon {
    color: #10b981 !important;
}

/* Optional: shrink folder icons a bit */
#treeContainer .jstree-themeicon-folder {
    font-size: 1.1em;
}

.btn-history-tab {
    background: transparent;
    border: 1px solid #007bff;
    color: #007bff;
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    margin-right: 0.5rem;
}

.btn-history-tab.active {
    background: #007bff;
    color: #fff;
}

.theme-search-group {
    margin-bottom: 1rem;
    width: 100%;
}

.theme-search {
    border-radius: 0.25rem;
    border: 1px solid #ced4da;
    padding: 0.375rem 0.75rem;
}

.launch-detail button {
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

/* 1. CARD CONTAINER */
.launch-card {
    background-color: #111;
    border-radius: 12px;
    padding: 16px;
    max-width: 400px;
    margin: 0 auto;
    color: #fff;
}

/* 2. HEADER */
.launch-card__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
}

.launch-card__status {
    font-size: 0.875rem;
    color: #888;
}

.launch-card__title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

/* 3. ACTION BUTTONS */
.launch-card__actions {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.launch-card__btn {
    flex: 1;
    padding: 10px 0;
    border-radius: 6px;
    font-weight: 500;
    font-size: 1rem;
    cursor: pointer;
}

.btn--primary.launch-card__btn {
    background-color: #00d084;
    color: #000;
    border: none;
}

.btn--secondary.launch-card__btn {
    background-color: #1e1e1e;
    color: #00d084;
    border: 1px solid #00d084;
}

/* 4. POOL PROGRESS */
.launch-card__pool {
    text-align: left;
}

.launch-card__progress-bar {
    width: 100%;
    height: 8px;
    background-color: #333;
    border-radius: 4px;
    overflow: hidden;
}

.launch-card__progress-fill {
    height: 100%;
    background-color: #00d084;
    transition: width 0.3s ease;
}

.launch-card__pool-text {
    font-size: 0.875rem;
    color: #ccc;
    margin-top: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.investment-summary {
    background: #1a1a1a;
    border-radius: 8px;
    padding: 16px;
    margin: 16px auto;
    max-width: 400px;
    color: #eee;
}

.investment-summary__title {
    font-size: 1.125rem;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #00d084;
}

.investment-summary__row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
}

.investment-summary__row i {
    width: 20px;
    text-align: center;
    color: #00d084;
}

.investment-summary__row span {
    flex: 1;
    font-size: 0.95rem;
    color: #ccc;
}

.investment-summary__row strong {
    font-size: 0.95rem;
    color: #fff;
}

.investment-summary {
    background: #1a1a1a;
    border-radius: 8px;
    padding: 16px;
    margin: 16px auto;
    max-width: 400px;
    color: #eee;
}

.investment-summary__title {
    font-size: 1.125rem;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #00d084;
}

.investment-summary__row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
}

.investment-summary__row i {
    width: 20px;
    text-align: center;
    color: #00d084;
}

.investment-summary__row span {
    flex: 1;
    font-size: 0.95rem;
    color: #ccc;
}

.investment-summary__row strong {
    font-size: 0.95rem;
    color: #fff;
}

.modal .transfer-list {
    max-height: 200px;
    overflow-y: auto;
    margin: 8px 0;
    padding-left: 0;
    list-style: none;
}

.modal .transfer-list li {
    padding: 4px 0;
    border-bottom: 1px solid #333;
    display: flex;
    justify-content: space-between;
}

.modal .modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

/* Modal wrapper */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal.active {
    display: flex;
}

/* Content box */
.modal-content {
    position: relative;
    background: #000;
    padding: 1rem;
    border-radius: 8px;
    width: 90%;
    max-width: 320px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Close “X” */
.modal-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #fff;
    cursor: pointer;
}

/* Title */
.modal-title {
    margin: 0 0 1rem;
    color: #fff;
    font-size: 1.25rem;
    text-align: center;
}

/* Body flows vertically */
.modal-body {
    display: flex;
    flex-direction: column;
}

/* Stack the three buttons */
.setup-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

/* Full-width style for those buttons */
.btn--full {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    border: none;
    border-radius: 4px;
    background-color: #00c897;
    color: #000;
    cursor: pointer;
}

/* Hide these sections initially */
.hidden {
    display: none !important;
}

/* Spacing for forms area */
.modal-forms>.tab-content {
    margin-top: 1rem;
}

/* Inputs inside forms */
.input--full {
    width: 100%;
    padding: 0.5rem;
    font-size: 1rem;
    border: 1px solid #6a0b85;
    border-radius: 4px;
    margin-bottom: 1rem;
    background: #fff;
    color: #6a0b85;
}

/* Action row at bottom of each form */
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Primary vs close button styling */
.btn--primary {
    background: #00c897;
    color: #000;
    border: none;
}

.btn--close {
    background: none;
    color: #ccc;
    border: none;
}

.btn-copy {
    background: none;
    border: none;
    padding: 0.25rem;
    font-size: 1rem;
    /* adjust icon size */
    color: #00c897;
    /* your theme color */
    cursor: pointer;
    transition: color 0.2s ease;
}

.btn-copy:hover {
    color: #00e0a5;
}

.btn-copy:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 200, 151, 0.4);
}

.btn-copy i {
    vertical-align: middle;
}

/* in public/css/main.css */
#kycModal .modal-content {
    max-width: 400px;
    padding: 1.5rem;
}

#kycModal .form-group {
    margin-bottom: 1rem;
}

#kycModal input {
    width: 100%;
    padding: .5rem;
}

#kycModal .form-actions {
    text-align: right;
}

.tier-list {
    list-style: none;
    margin: 1.5rem 0;
    padding: 0;
}

.tier-list li {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
    font-size: 1rem;
    color: #f0f0f0;
    /* hoặc #fff nếu nền tối */
}

/* custom bullet */
.tier-list li::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #00d28a;
    /* màu xanh button */
    border-radius: 50%;
    margin-right: 0.75rem;
}

.filters {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 0.5rem;
}

.filter-select {
    min-width: 80px;
    padding: 0.25rem 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    font-size: 0.875rem;
    color: #333;
}

.table-container {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

.history-table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    table-layout: fixed;
    word-wrap: break-word;
    color: #6a0b85;
}

.history-table th,
.history-table td {
    white-space: normal;
    word-break: break-word;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #eee;
    color: #555;
}

.history-table th {
    font-size: 0.875rem;
    background: #fafafa;
}

.history-table tr:hover {
    background: #f5f5f5;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.pagination button {
    background: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: background 0.2s;
}

.pagination button:hover:not(:disabled) {
    background: #0056b3;
}

.pagination button:disabled {
    background: #ccc;
    cursor: default;
}

#pageInfo {
    font-size: 0.9rem;
    color: #666;
}

/* Modal backdrop */
#depositModal.modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
}

/* Nội dung modal */
#depositModal .modal-content {
    background: #1E1E1E;
    padding: 1.5rem;
    border-radius: 1rem;
    width: 90%;
    max-width: 400px;
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* Tiêu đề */
#depositModal .modal-content h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    font-weight: 600;
}

/* Radio labels */
#depositModal .modal-content>div:first-of-type label {
    display: inline-flex;
    align-items: center;
    margin-right: 1.5rem;
    font-size: 1rem;
    cursor: pointer;
    color: #e5e7eb;
}

#depositModal .modal-content input[type="radio"] {
    margin-right: 0.5rem;
    accent-color: #16a34a;
}

/* Input amount */
#depositModal .modal-content input[type="number"] {
    width: 100%;
    padding: 0.75rem;
    margin-top: 0.25rem;
    background: #fff;
    border: 1px solid #555;
    border-radius: 0.5rem;
    color: #6085;
    font-size: 1rem;
}

#depositModal .modal-content input[type="number"]::placeholder {
    color: #888;
}

/* Button container */
#depositModal .modal-content>div:last-of-type {
    margin-top: 1.5rem;
    text-align: right;
}

/* Cancel button */
#depositModal #depositCancelBtn {
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid #1E1E1E;
    color: #ccc;
    border-radius: 0.5rem;
    cursor: pointer;
    margin-right: 0.5rem;
}

#depositModal #depositCancelBtn:hover {
    background: #1E1E1E;
}

/* OK button */
#depositModal #depositOkBtn {
    padding: 0.5rem 1rem;
    background: #16a34a;
    border: none;
    color: #fff;
    border-radius: 0.5rem;
    cursor: pointer;
}

#depositModal #depositOkBtn:hover {
    background: #158038;
}


/* Luôn ẩn modal setup wallet */
#setupModal,
#modalSetupWallet {
    display: none !important;
}

/* Đổi màu chữ trong section.balance */
section.balance,
section.balance * {
    color: #6a0b85 !important;
}

/* Đổi màu chữ trong các div.tab */
.tab,
.tab * {
    color: #6a0b85 !important;
}

/* Đổi màu chữ trong div#cryptoContent */
#cryptoContent,
#cryptoContent * {
    color: #6a0b85 !important;
}


/* Giữ nguyên các nút: nền tím #6a0b85 và chữ trắng */
.btn-action,
.actions button,
.btn,
.btn--primary,
.btn-primary,
.btn.continue,
.btn-action span {
    background: #6a0b85 !important;
    color: #ffffff !important;
}

/* Đảm bảo nền trắng */
body,
html,
.page {
    background: #ffffff !important;
}

/* Màu chữ cho refcodeDisplay */
#refcodeDisplay,
.refcodeDisplay {
    color: #6a0b85 !important;
}


/* Bottom nav nền trắng, chữ và icon màu tím */
.bottom-nav {
    background: #ffffff !important;
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.bottom-nav .nav-item {
    color: #6a0b85 !important;
}

.bottom-nav .nav-item ion-icon,
.bottom-nav .nav-item i,
.bottom-nav .nav-item svg {
    color: #6a0b85 !important;
}


/* Button profileBtn màu tím, chữ trắng */
#profileBtn {
    background: #6a0b85 !important;
    color: #ffffff !important;
    border: none !important;
}

#profileBtn i,
#profileBtn ion-icon,
#profileBtn svg {
    color: #ffffff !important;
}


/* #profileBtn: nền trắng, chữ & icon tím */
#profileBtn {
    background: #ffffff !important;
    color: #6a0b85 !important;
    border: none !important;
}

#profileBtn i,
#profileBtn ion-icon,
#profileBtn svg {
    color: #6a0b85 !important;
}

/* #copyRefcodeBtn copy icon màu tím */
#copyRefcodeBtn i.fas.fa-copy {
    color: #6a0b85 !important;
}

/* ========== Profile-page tabs (Bonus / Referral Tree) ========== */

/* Container nav.profile (hoặc nav.profile-nav tuỳ class bạn dùng) */
nav.profile,
nav.profile-nav {
    background-color: #ffffff !important;
    border-bottom: none !important;
}

/* Các nút tab */
nav.profile .tab,
nav.profile .tab-history,
/* nếu bạn đặt class khác cho tab */
nav.profile-nav .tab,
nav.profile-nav button {
    background-color: #ffffff !important;
    color: #6a0b85 !important;
}

/* Tab active */
nav.profile .tab.active,
nav.profile-nav .tab.active,
nav.profile .tab-history.active,
nav.profile-nav button.active {
    background-color: #ffffff !important;
    color: #6a0b85 !important;
    border-bottom: 2px solid #6a0b85 !important;
}

/* Đảm bảo toàn bộ text trong nav.profile đều tím */
nav.profile *,
nav.profile-nav * {
    color: #6a0b85 !important;
}

.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    max-width: 360px;
    width: 90%;
    position: relative;
}

.modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #6a0b85;
}

.field {
    margin-bottom: 16px;
}

.field label {
    display: block;
    margin-bottom: 4px;
    color: #333;
}

.field .value,
.field select {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #ddd;
}

.important-notes {
    background: #fff9db;
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 16px;
}

.important-notes ul {
    margin: 8px 0 0 16px;
    color: #aa7600;
}

.btn--primary {
    width: 100%;
    padding: 12px 0;
    background: linear-gradient(90deg, #6a0b85, #d75fb5);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

/* Deposit Modal (Buy TBT) */
#depositModal .modal-content {
    background: #ffffff !important;
    color: #6a0b85;
    /* chữ tím cho toàn modal */
}

/* Tiêu đề và sub-title */
#depositModal .modal-content h2,
#depositModal .modal-content .subtitle {
    color: #6a0b85 !important;
}

/* Nhãn field */
#depositModal .modal-content label {
    color: #6a0b85 !important;
}

/* Dropdown và giá trị network */
#depositModal .modal-content .value,
#depositModal .modal-content select {
    color: #6a0b85 !important;
}

/* Important notes */
#depositModal .modal-content .important-notes {
    background: #fff9db;
    /* giữ nền vàng nhạt nếu muốn */
    color: #6a0b85 !important;
}

#depositModal .modal-content .important-notes ul li {
    color: #6a0b85 !important;
}

/* Nút Buy now */
#depositModal .modal-content .btn--primary {
    background: #6a0b85 !important;
    color: #ffffff !important;
}

/* Nút đóng (X) */
#depositModal .modal-close {
    color: #6a0b85 !important;
}

/* Dropdown chọn số tiền mua (USDT) */
#depositAmountSelect {
    background: #ffffff !important;
    color: #6a0b85 !important;
    border: 1px solid #6a0b85 !important;
}

/* Important notes */
#important-notes,
#depositModal .important-notes {
    background: #fff9db !important;
    /* vàng nhạt */
    color: #6a0b85 !important;
    /* chữ tím */
    text-align: left !important;
    /* căn lề trái */
    padding: 16px !important;
    border-radius: 8px !important;
}

#depositModal .important-notes ul {
    margin: 0;
    padding-left: 1.25em !important;
}

#depositModal .important-notes ul li {
    margin-bottom: 0.5em;
}

/* Super Node select giống Deposit Modal */
#superNodeSelect {
    background: #ffffff !important;
    color: #6a0b85 !important;
    border: 1px solid #6a0b85 !important;
}

/* Tiêu đề và subtitle */
#superNodeModal .modal-content h2,
#superNodeModal .modal-content .subtitle {
    color: #6a0b85 !important;
}

/* Nút Confirm */
#superNodeModal .btn--primary {
    background: #6a0b85 !important;
    color: #ffffff !important;
}

/* Important notes */
#superNodeModal .important-notes {
    background: #fff9db !important;
    color: #6a0b85 !important;
}

/* Super Node Modal: nền trắng, chữ tím */
#superNodeModal .modal-content {
    background-color: #ffffff !important;
    color: #6a0b85 !important;
}

/* Tiêu đề và subtitle */
#superNodeModal .modal-content h2,
#superNodeModal .modal-content .subtitle {
    color: #6a0b85 !important;
}

/* Label và select */
#superNodeModal .modal-content label {
    color: #6a0b85 !important;
}

#superNodeSelect {
    background: #ffffff !important;
    color: #6a0b85 !important;
    border: 1px solid #6a0b85 !important;
}

/* Important notes */
#superNodeModal .important-notes {
    background: #fff9db !important;
    color: #6a0b85 !important;
    text-align: left !important;
    padding: 16px !important;
    border-radius: 8px !important;
}

#superNodeModal .important-notes ul {
    margin: 0;
    padding-left: 1.25em !important;
}

#superNodeModal .important-notes ul li {
    margin-bottom: 0.5em;
}

/* Nút Confirm */
#superNodeModal .btn--primary {
    background: #6a0b85 !important;
    color: #ffffff !important;
}

/* Nút đóng (X) */
#superNodeModal .modal-close {
    color: #6a0b85 !important;
}

.mining-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.mining-section h2 {
    color: #6a0b85;
    text-align: center;
}

.mining-card .subtitle {
    color: #555;
    text-align: center;
    margin-bottom: 12px;
}

.mining-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mining-title {
    font-weight: 600;
}

.mining-base {
    color: #777;
}

#mineBtn.btn.continue {
    width: 100%;
    background: #6a0b85 !important;
    color: #fff !important;
    border-radius: 20px;
    padding: 14px 0;
    font-size: 16px;
}

#mineBtn:disabled {
    opacity: 0.6;
    cursor: default;
}

/* ---------- Mining Section ---------- */
.mining-section {
    margin: 32px 16px;
    text-align: center;
}

.mining-section h2 {
    color: #6a0b85;
    font-size: 20px;
    margin-bottom: 4px;
}

.mining-subtitle {
    color: #777;
    font-size: 14px;
    margin-bottom: 16px;
}

/* Card chính */
.mining-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* Header inside card */
.mining-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.mining-card-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: #000;
}

/* Badge Super Node */
.super-node-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: linear-gradient(90deg, #ff597b, #ff2e6d);
    border-radius: 12px;
    color: #fff;
    font-size: 12px;
}

/* Dòng thông tin mining */
.mining-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 8px 0;
}

.mining-row .label {
    font-size: 14px;
    color: #333;
}

.mining-row .value {
    font-size: 14px;
    font-weight: 600;
    color: #000;
}

/* Nút Mining */
.mining-btn {
    width: 100%;
    margin-top: 16px;
    padding: 14px 0;
    background: linear-gradient(90deg, #6a0b85, #d75fb5);
    color: #ffffff;
    border: none;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: opacity 0.2s ease;
}

.mining-btn:hover {
    opacity: 0.9;
}

.mining-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Icon trong badge và button */
.fa-bolt {
    font-size: 14px;
}

/* ────────── Toast Notifications ────────── */
.toast,
.toast--info,
.toast--error {
    background: #ffffff !important;
    color: #6a0b85 !important;
}

/* Nếu bạn muốn phân biệt thông báo error/info bằng đường viền */
.toast--info {
    border: 1px solid #6a0b85 !important;
}

.toast--error {
    border: 1px solid #6a0b85 !important;
}

/* ───── History ───── */
.history-title {
    font-size: 1.25rem;
    margin: 0 0 1rem;
    color: #333;
}

.history-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.history-tabs .tab {
    flex: 1;
    padding: 8px;
    background: #ececec;
    border: none;
    border-radius: 20px;
    font-size: 0.875rem;
    color: #555;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.history-tabs .tab.active {
    background: #fff;
    color: #000;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.history-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.history-item {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.history-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.history-type {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
}

.badge {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    text-transform: uppercase;
}

.badge--success,
.badge--completed {
    background: #e6f9f0;
    color: #2ebc7f;
}

.badge--pending {
    background: #fff7e6;
    color: #dfa707;
}

.history-amount {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.history-amount.positive {
    color: #2ebc7f;
}

.history-amount.negative {
    color: #fa3535;
}

.history-meta {
    display: flex;
    gap: 16px;
    font-size: 0.875rem;
    color: #555;
    flex-wrap: wrap;
}

.meta-label {
    color: #888;
    margin-right: 4px;
}

.meta-value {
    color: #333;
}

#historyPage {
    margin-top: 24px;
    /* đẩy xuống 24px, bạn có thể tăng/giảm tuỳ ý */
    color: #6a0b85;
    /* màu tím chủ đạo */
}

/* Nếu chỉ muốn tiêu đề chính màu tím */
#historyPage .history-title {
    color: #6a0b85;
}

/* Đổi màu text trong tất cả các profile-item thành tím */
.profile-item,
.profile-item .label,
.profile-item .value {
    color: #6a0b85 !important;
}

/* Nếu muốn đổi luôn màu select trong profile-item */
.profile-item select {
    color: #6a0b85 !important;
}

/* ===== Profile Card ===== */
.profile-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin: 16px;
}

/* Mỗi dòng thông tin */
.profile-item {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.profile-item:last-child {
    margin-bottom: 0;
}

/* Vòng tròn chứa icon */
.icon-wrapper {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #6a0b85;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}

.icon-wrapper .fa {
    color: #fff;
    font-size: 18px;
}

/* Nhãn & giá trị */
.text-wrapper {
    flex: 1;
}

.label {
    display: block;
    font-weight: 600;
    color: #6a0b85;
    margin-bottom: 4px;
}

.value {
    color: #333;
    word-break: break-all;
}

/* Style riêng cho selector ngôn ngữ */
.lang-item .text-wrapper {
    display: flex;
    flex-direction: column;
}

.lang-item .lang-select {
    margin-top: 4px;
    padding: 8px;
    border: 1px solid #6a0b85;
    border-radius: 6px;
    background: #fff;
    color: #6a0b85;
    font-size: 0.95rem;
    cursor: pointer;
}

/* Đảm bảo tab tiêu đề vẫn tím */
.profile-tabs .tab,
.profile-tabs .tab.active {
    color: #6a0b85 !important;
}

.profile-tabs .tab.active {
    border-bottom: 2px solid #6a0b85;
}

/* ─── History Page: no horizontal scroll, smaller text ───────────────── */
#historyPage {
    overflow-x: hidden;
}

#historyPage .history-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

#historyPage .history-table th,
#historyPage .history-table td {
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.8em;
    /* half of system font size */
}

/* Pagination buttons style */
#historyPage .pagination .page-btn {
    background-color: #6a0b85;
    color: #fff;
    border: none;
    border-radius: 4px;
    width: 32px;
    height: 32px;
    font-size: 0.9em;
    cursor: pointer;
    transition: opacity 0.2s;
}

#historyPage .pagination .page-btn.active {
    opacity: 0.8;
}

#historyPage .pagination .page-btn:hover {
    opacity: 0.9;
}

#buyTbtAmount {
    background-color: #ffffff;
    /* nền trắng */
    color: purple;
    /* chữ tím */
}


.mining-progress {
    margin: 16px 0;
}

.mining-progress label {
    display: block;
    font-weight: bold;
    margin-bottom: 4px;
}

.progress-bar {
    position: relative;
    width: 100%;
    height: 20px;
    background: #f0f0f0;
    border-radius: 4px;
    color: #6a0b85;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: purple;
    width: 0%;
    transition: width 0.4s ease;
}

.progress-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    line-height: 20px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    color: #000;
    pointer-events: none;
}

.progress-percent {
    text-align: right;
    font-size: 12px;
    margin-top: 4px;
}



.sale-phases-box {
    margin: 32px 16px;
}

.sale-phases-box .mining-card-header {
    font-size: 1.2rem;
    color: purple;
}

.sale-phases-box .phases-list {
    list-style: none;
    padding: 0;
    margin: 12px 0;
}

.sale-phases-box .phases-list li {
    margin-bottom: 8px;
    font-size: 0.95rem;
    color: #333;
}

.sale-phases-box .phases-list li span.phase-label {
    font-weight: bold;
    margin-right: 6px;
}