/* ===== RESET ===== */

*{
box-sizing:border-box;
margin:0;
padding:0;
}

body{
font-family:Arial, Helvetica, sans-serif;
background:#f3f4f6;
color:#111;
line-height:1.4;
}

/* ===== HEADER ===== */

.header{
position:fixed;
top:0;
left:0;
width:100%;
height:60px;
background:#1f2937;
color:white;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 20px;
z-index:1000;
}

.header-left{
display:flex;
align-items:center;
gap:14px;
}

.menu-icon{
font-size:22px;
cursor:pointer;
}

.logo{
font-size:18px;
font-weight:600;
}

.user{
margin-left:auto;
font-size:14px;
opacity:0.9;
}

/* ===== SIDEBAR ===== */

.sidebar{
scroll-behavior:smooth;
position:fixed;
top:60px;
left:0;
width:220px;
height:calc(100vh - 60px);
background:#374151;
transition:0.3s;
overflow-y:auto;
overflow-x:hidden;

padding:10px 0;
border-right:1px solid #eee;
}


.sidebar::-webkit-scrollbar{
width:6px;
}

.sidebar::-webkit-scrollbar-thumb{
background:#d1d5db;
border-radius:10px;
}

.sidebar::-webkit-scrollbar-thumb:hover{
background:#9ca3af;
}




.sidebar a{
display:block;
padding:12px 20px;
color:white;
text-decoration:none;
font-size:15px;
}

.sidebar a:hover{
background:#4b5563;
}
.menu-title {
padding:12px 20px;
font-size:14px;
text-transform:uppercase;
color:#9ca3af;
margin-top:10px;
}

/* ===== ACTIVE MENU ===== */

.sidebar a.active{

color:white;
font-weight:600;
border-left:4px solid #a5b4fc;
}

.sidebar a.active:hover{
background:#4338ca;
}

/* ===== MAIN CONTENT ===== */

.main{
margin-left:220px;
margin-top:60px;
padding:30px;
min-height:calc(100vh - 60px);
transition:0.3s;
}

/* ===== TITLE ===== */

h1{
font-size:clamp(22px,3vw,28px);
margin-bottom:25px;
}

/* ===== DASHBOARD GRID ===== */

.dashboard{
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:22px;
}

/* ===== CARD ===== */

.card{
background:#fff;
border-radius:12px;
padding:22px;
box-shadow:0 6px 16px rgba(0,0,0,0.08);
}

.card:hover{
transform:translateY(-3px);
}

/* ===== SITE TITLE ===== */

.site-title{
font-size:clamp(13px,1.4vw,16px);
font-weight:600;
color:#666;
margin-bottom:10px;
word-break:break-word;
}

/* ===== ACTIVE USERS ===== */

.active-users{
font-size:clamp(28px,4vw,46px);
font-weight:bold;
margin-bottom:18px;
}

/* ===== TABLE ===== */

.country-table{
width:100%;
border-collapse:collapse;
font-size:clamp(12px,1.2vw,14px);
}

.country-table th{
text-align:left;
padding-bottom:8px;
border-bottom:1px solid #eee;
color:#777;
}

.country-table td{
padding:7px 0;
border-bottom:1px solid #f2f2f2;
}

.country-table td:last-child{
text-align:right;
font-weight:600;
}

/* ===== FOOTER ===== */

.footer{
margin-left:220px;
padding:20px 30px;
font-size:13px;
color:#777;
}



/* ===== MOBILE ===== */

@media (max-width:768px){

.main{
margin-left:0;
padding:20px !important;
}

.footer{
margin-left:0;
}

.dashboard{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:15px;
}

.card{
padding:16px;
}

.sidebar{
left:-220px;
z-index:1500;
}

.sidebar.show{
left:0;
}

.logo{
font-size:16px;
}

.menu-icon{
font-size:20px;
}

.user{
font-size:13px;
}

}

/* ===== SMALL MOBILE ===== */

@media (max-width:480px){


.active-users{
font-size:26px;
}

}

/* ===== DESKTOP SIDEBAR COLLAPSE ===== */

.sidebar.collapsed{
left:-220px;
}

.main.full{
margin-left:0;
}


.total-users{
font-size:18px;
font-weight:600;
color:#374151;
}

.total-users span{
font-size:22px;
font-weight:700;
margin-left:5px;
}


/* ===== MODAL ===== */

.modal{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
align-items:center;
justify-content:center;
z-index:2000;
}

.modal-content{
background:#fff;
padding:25px;
border-radius:10px;
width:500px;
max-width:90%;
}

.modal-header{
font-size:18px;
font-weight:600;
margin-bottom:15px;
display:flex;
justify-content:space-between;
}

.modal-close{
cursor:pointer;
font-size:18px;
}


/* ===== TOP PAGES SCROLL ===== */

#topPagesBody{
max-height:220px;   /* khoảng 5 dòng */
overflow-y:auto;
}

/* thanh scroll đẹp hơn */

#topPagesBody::-webkit-scrollbar{
width:6px;
}

#topPagesBody::-webkit-scrollbar-thumb{
background:#cbd5e1;
border-radius:10px;
}

#topPagesBody::-webkit-scrollbar-thumb:hover{
background:#94a3b8;
}





/* ============================= */
/* REALTIME DASHBOARD */
/* ============================= */

.realtime-wrapper{
width:100%;
margin-top:20px;
}

/* OWNER GROUP */

.owner-section{
margin-bottom:40px;
}

.owner-title{
font-size:20px;
font-weight:600;
margin-bottom:15px;
color:#333;
}

/* GRID */

.realtime-wrapper .dashboard{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:20px;
}

/* CARD */

.realtime-card{
background:#ffffff;
border-radius:10px;
padding:18px;
box-shadow:0 2px 8px rgba(0,0,0,0.05);
transition:all 0.2s ease;
border:1px solid #eee;
}

.realtime-card:hover{
transform:translateY(-2px);
box-shadow:0 6px 18px rgba(0,0,0,0.08);
}

/* SITE NAME */

.realtime-card .site-title{
font-size:14px;
font-weight:600;
color:#444;
margin-bottom:8px;
word-break:break-all;
}

/* ACTIVE USERS */

.realtime-card .active-users{
font-size:30px;
font-weight:700;
color:#2d7ef7;
margin-bottom:12px;
}

/* TABLE */

.country-table{
width:100%;
border-collapse:collapse;
font-size:13px;
}

.country-table th{
text-align:left;
padding:6px 0;
border-bottom:1px solid #eee;
font-weight:600;
color:#666;
}

.country-table td{
padding:6px 0;
border-bottom:1px solid #f3f3f3;
}

/* MOBILE */

@media(max-width:768px){

.realtime-wrapper .dashboard{
grid-template-columns:1fr;
}

.realtime-card .active-users{
font-size:24px;
}

.realtime-wrapper .dashboard{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:20px;
}



}


/* ===== USER FILTER ===== */

/* ===== FILTER BAR ===== */

.filter-bar{
display:flex;
align-items:center;
gap:10px;
margin-bottom:20px;
}

/* dropdown */

.user-dropdown-admin{
position:relative;
width:260px;
}

.dropdown-btn{
background:#f5f6fa;
border:1px solid #ddd;
padding:8px 12px;
border-radius:6px;
cursor:pointer;
}

/* dropdown list */

.dropdown-list{
display:none;
position:absolute;
top:100%;
left:0;

width:100%;

background:white;
border:1px solid #ddd;
border-radius:6px;

max-height:250px;
overflow-y:auto;

box-shadow:0 5px 15px rgba(0,0,0,0.1);

z-index:100;
}

.dropdown-list label{
display:flex;
align-items:center;
gap:8px;

padding:8px 12px;
cursor:pointer;
font-size:14px;
}

.dropdown-list label:hover{
background:#f1f3f9;
}

/* apply button */

.apply-btn{
background:#4f46e5;
color:white;

border:none;
padding:8px 16px;
border-radius:6px;

cursor:pointer;
font-size:14px;
}

.apply-btn:hover{
background:#4338ca;
}

/* reset */

.reset-btn{
font-size:14px;
color:#666;
text-decoration:none;
}




/* ===== PAGE ===== */

.page-title{
margin-bottom:20px;
}

/* ===== FORM CARD ===== */

.card-form{
background:white;
padding:20px;
border-radius:8px;
box-shadow:0 3px 10px rgba(0,0,0,0.05);
margin-bottom:25px;
max-width:500px;
}

.website-form{
display:flex;
flex-direction:column;
gap:10px;
}

.website-form input,
.website-form select,
.website-form textarea{

width:100%;
padding:10px;
border:1px solid #ddd;
border-radius:6px;

font-size:16px;
}

.website-form input:focus{
outline:none;
border-color:#4f46e5;
}

/* ===== BUTTON ===== */

.btn-primary{
background:#4f46e5;
color:white;
border:none;
padding:8px 14px;
border-radius:6px;
cursor:pointer;
font-size:14px;
width:150px;
}

.btn-primary:hover{
background:#4338ca;
}

/* ===== TABLE CARD ===== */

.card-table{
background:white;
border-radius:8px;
box-shadow:0 3px 10px rgba(0,0,0,0.05);
overflow:hidden;
}

/* ===== TABLE ===== */

.site-table{
width:100%;
border-collapse:collapse;
font-size:14px;
}

.site-table th{
background:#f3f4f6;
text-align:left;
padding:10px;
}

.site-table td{
padding:10px;
border-top:1px solid #eee;
}

.site-table tr:hover{
background:#fafafa;
}

/* ===== ACTION BUTTONS ===== */

.actions{
display:flex;
gap:10px;
}

.btn-view{
background:#10b981;
color:white;
padding:5px 10px;
border-radius:5px;
text-decoration:none;
font-size:13px;
}

.btn-view:hover{
background:#059669;
}

.btn-delete{
background:#ef4444;
color:white;
padding:5px 10px;
border-radius:5px;
text-decoration:none;
font-size:13px;
}

.btn-delete:hover{
background:#dc2626;
}

/* EDIT BUTTON */

.btn-edit{
background:#3b82f6;
color:white;
padding:5px 10px;
border-radius:5px;
text-decoration:none;
font-size:13px;
}

.btn-edit:hover{
background:#2563eb;
}


.login-error{
background:#fee2e2;
border:1px solid #ef4444;
color:#b91c1c;
padding:14px 16px;
border-radius:6px;
margin-bottom:15px;
font-size:14px;
font-weight:600;
display:flex;
align-items:center;
justify-content:left;
gap:8px;
}

.login-error::before{
content:"⚠️";
font-size:16px;
}

.login-wrapper{
display:flex;
justify-content:center;
align-items:center;
height:70vh;
}

.login-card{
width:100%;
max-width:420px;
background:#fff;
padding:35px;
border-radius:10px;
box-shadow:0 4px 20px rgba(0,0,0,0.08);
}

.login-title{
text-align:center;
font-size:22px;
font-weight:600;
margin-bottom:25px;
}

.login-form input{
width:100%;
padding:12px;
margin-bottom:15px;
border:1px solid #ddd;
border-radius:6px;
font-size:14px;
}

.login-form input:focus{
outline:none;
border-color:#4f46e5;
}

.login-form button{
width:100%;
padding:12px;
background:#4f46e5;
border:none;
color:white;
font-size:15px;
border-radius:6px;
cursor:pointer;
transition:0.2s;
}

.login-form button:hover{
background:#4338ca;
}

.login-register{
text-align:center;
margin-top:15px;
font-size:14px;
}

.login-register a{
color:#4f46e5;
text-decoration:none;
}

.login-register a:hover{
text-decoration:underline;
}

.remember-box{ display:flex; float:left; gap:6px; font-size:13px; margin-bottom:12px;white-space: nowrap; }


/* ===== AUTH PAGE ===== */

.auth-page{
background:#f3f4f6;
display:flex;
justify-content:center;
align-items:center;
min-height:50vh;
font-family:Arial, sans-serif;
}

/* container */

.auth-container{
background:#fff;
padding:32px;
border-radius:10px;
box-shadow:0 6px 24px rgba(0,0,0,0.08);
max-width:420px;
width:100%;
margin-top:50px;
}

/* title */

.auth-container h2{
margin-bottom:20px;
text-align:center;
font-weight:600;
}

/* form */

.auth-form{
display:flex;
flex-direction:column;
gap:14px;
}

.auth-form input{
padding:11px 12px;
border:1px solid #ddd;
border-radius:6px;
font-size:14px;
transition:0.2s;
}

.auth-form input:focus{
outline:none;
border-color:#4f46e5;
box-shadow:0 0 0 2px rgba(79,70,229,0.1);
}

/* button */

.btn-primary{
background:#4f46e5;
color:#fff;
border:none;
padding:11px;
border-radius:6px;
cursor:pointer;
font-size:14px;
font-weight:500;
transition:0.2s;
}

.btn-primary:hover{
background:#4338ca;
}

/* error */

.error-box{
background:#fee2e2;
color:#b91c1c;
padding:9px;
border-radius:6px;
font-size:13px;
}

/* footer */

.auth-footer{
margin-top:18px;
text-align:center;
font-size:13px;
}

.auth-footer a{
color:#4f46e5;
text-decoration:none;
font-weight:500;
}

.auth-footer a:hover{
text-decoration:underline;
}



.register-button{
width:100%;
padding:12px;
background:#4f46e5;
border:none;
color:white;
font-size:15px;
border-radius:6px;
cursor:pointer;
transition:0.2s;
}

.register-button:hover{
background:#4338ca;
}

.success-box{
background:#dcfce7;
color:#166534;
padding:10px;
border-radius:6px;
margin-bottom:15px;
font-size:14px;
}

/* ===== PROFILE GRID ===== */

.profile-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
}

/* mobile */

@media(max-width:768px){

.profile-grid{
grid-template-columns:1fr;
}

}


/* ===== TABLE RESPONSIVE ===== */

.table-responsive{
width:100%;
overflow-x:auto;
}

/* table */

.site-table{
width:100%;
border-collapse:collapse;
min-width:700px;
background:#fff;
}

.site-table th,
.site-table td{
padding:10px;
border-bottom:1px solid #eee;
text-align:left;
font-size:14px;
}

.site-table th{
background:#f9fafb;
font-weight:600;
}

/* action buttons */

.actions{
display:flex;
gap:8px;
}

.btn-edit{
background:#3b82f6;
color:#fff;
padding:5px 10px;
border-radius:5px;
font-size:13px;
text-decoration:none;
}

.btn-delete{
background:#ef4444;
color:#fff;
padding:5px 10px;
border-radius:5px;
font-size:13px;
text-decoration:none;
}

.btn-edit:hover{
background:#2563eb;
}

.btn-delete:hover{
background:#dc2626;
}

.btn-upgrade{
display:inline-block;
margin-top:10px;
padding:10px 16px;
background:#ff9800;
color:#fff;
text-decoration:none;
border-radius:6px;
font-weight:600;
border:none;
cursor:pointer;
}

.btn-upgrade:hover{
background:#e68900;
}

.membership-box{
display:flex;
justify-content:space-between;
align-items:center;
background:#fff;
border-radius:10px;
padding:20px;
margin-bottom:20px;
box-shadow:0 2px 8px rgba(0,0,0,0.05);
}

.membership-right{
display:flex;
align-items:center;
}

.pricing-grid{
display:grid;
grid-template-columns:1fr;
gap:20px;
margin-top:25px;
width:100%;
}

@media (min-width:768px){
.pricing-grid{
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
}

.pricing-card{
background:#fff;
border-radius:10px;
padding:20px;
text-align:center;
box-shadow:0 2px 8px rgba(0,0,0,0.05);
width:100%;
max-width:100%;
box-sizing:border-box;
}

.price{
font-size:22px;
font-weight:700;
margin:15px 0;
}

.btn-current{
background:#ccc;
padding:10px 16px;
border:none;
border-radius:6px;
}

.btn-disabled{
background:#ccc;
padding:10px 16px;
border:none;
border-radius:6px;
}



.modal{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
justify-content:center;
align-items:center;
z-index:9999;
}

.modal-content{
background:#fff;
padding:30px;
border-radius:10px;
width:90%;
max-width:400px;
text-align:center;
box-shadow:0 10px 30px rgba(0,0,0,0.2);
}

.modal-price{
font-size:20px;
font-weight:700;
margin:10px 0;
}

.modal-actions{
margin-top:20px;
display:flex;
gap:10px;
justify-content:center;
}




.btn-confirm{
background:#ff9800;
color:#fff;
padding:10px 16px;
border-radius:6px;
text-decoration:none;
font-weight:600;
border:none;
cursor:pointer;
}


.limit-box{
background:#fff3cd;
border:1px solid #ffeeba;
padding:16px;
border-radius:8px;
margin-top:10px;
}

.limit-box p{
margin-bottom:10px;
}



/* ===== MODAL ===== */

.modal-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.45);
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
opacity:0;
visibility:hidden;
transition:0.2s;
}

.modal-overlay.show{
opacity:1;
visibility:visible;
}

.modal-box{
background:#fff;
padding:28px;
border-radius:10px;
width:380px;
max-width:90%;
box-shadow:0 10px 30px rgba(0,0,0,0.2);
animation:modalFade 0.2s ease;
}

.modal-box h3{
margin-bottom:10px;
font-size:20px;
}

.modal-box p{
color:#555;
margin-bottom:22px;
line-height:1.5;
}



.btn-cancel{
background:#e5e7eb;
border:none;
padding:8px 14px;
border-radius:6px;
cursor:pointer;
}


.btn-confirm:hover{
background:#dc2626;
}

@keyframes modalFade{
from{
transform:translateY(-8px);
opacity:0;
}
to{
transform:translateY(0);
opacity:1;
}
}



.inactive-card{
opacity:0.7;
cursor:default;
}

.inactive-badge{
background:#999;
color:#fff;
font-size:12px;
padding:3px 8px;
border-radius:6px;
margin-left:8px;
}

.inactive-text{
margin-top:10px;
font-size:14px;
color:#666;
}




.status-active{
background:#22c55e;
color:#fff;
padding:3px 8px;
border-radius:6px;
font-size:12px;
}

.status-inactive{
background:#ccc;
color:grey;
padding:3px 8px;
border-radius:6px;
font-size:12px;
}



.fund-container{
display:flex;
gap:30px;
margin-top:20px;
flex-wrap:wrap;
}

.qr-box{
flex:1;
text-align:center;
background:white;
padding:20px;
border-radius:10px;
box-shadow:0 2px 6px rgba(0,0,0,0.05);
}

.qr-box img{
width:300px;
}

.bank-box{
flex:1;
background:white;
padding:20px;
border-radius:10px;
box-shadow:0 2px 6px rgba(0,0,0,0.05);
}

.bank-title{
font-size:20px;
margin-bottom:15px;
font-weight:bold;
}

.bank-info{
margin-bottom:8px;
font-size:15px;
}

.transfer-note{
background:#fff3cd;
padding:12px;
border-radius:6px;
margin-top:10px;
font-weight:bold;
font-size:18px;
text-align:center;
letter-spacing:1px;
}

.copy-btn{
margin-top:10px;
padding:8px 14px;
background:#2563eb;
color:white;
border:none;
border-radius:6px;
cursor:pointer;
}

.copy-btn:hover{
background:#1d4ed8;
}

.history-box{
margin-top:40px;
background:white;
padding:20px;
border-radius:10px;
box-shadow:0 2px 6px rgba(0,0,0,0.05);
}

.history-table{
width:100%;
border-collapse:collapse;
margin-top:15px;
}

.history-table th,
.history-table td{
border-bottom:1px solid #eee;
padding:10px;
text-align:left;
font-size:14px;
}

.history-table th{
background:#f9fafb;
font-weight:600;
}

.amount{
font-weight:bold;
color:#16a34a;
}


.transfer-field{
position:relative;
margin-top:10px;
}

.transfer-field input{
width:100%;
padding:10px 40px 10px 12px;
font-size:16px;
border:1px solid #ddd;
border-radius:6px;
background:#fff3cd;
font-weight:bold;
}

.copy-icon{
position:absolute;
right:6px;
top:50%;
transform:translateY(-50%);
border:none;
background:#2563eb;
color:white;
border-radius:4px;
cursor:pointer;
padding:6px 10px;
font-size:14px;
}

.copy-icon:hover{
background:#1d4ed8;
}


/* ===== TOP BAR ===== */

.dashboard-top{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
}

/* LEFT */

.total-users{
font-size:18px;
font-weight:600;
line-height:32px;
}

/* RIGHT GROUP */

.dashboard-right{
display:flex;
align-items:center;
gap:10px;
}

/* SEARCH */

.search-input{
height:32px;
padding:0 10px;
border:1px solid #ddd;
border-radius:6px;
font-size:13px;
}

/* FILTER */

.site-filter{
display:flex;
gap:8px;
}

.filter-btn{
height:32px;
padding:0 12px;
border:1px solid #ddd;
background:#fff;
border-radius:6px;
cursor:pointer;
font-size:13px;
display:flex;
align-items:center;
}

.filter-btn.active{
background:#111;
color:#fff;
border-color:#111;
}

@media(max-width:768px){

.dashboard-top{
flex-direction:column;
align-items:flex-start;
gap:10px;
}

.dashboard-right{
width:100%;
flex-direction:column;
align-items:flex-start;
}

.search-input{
width:100%;
}

}



/* USER MENU */

.user-menu{
margin-left:auto;
position:relative;
}

.user-trigger{

cursor:pointer;

padding:6px 10px;

font-size:14px;

color:#fff;

}

.user-dropdown{

position:absolute;

right:0;
top:50px;

background:#fff;

border-radius:6px;

box-shadow:0 8px 20px rgba(0,0,0,0.15);

min-width:180px;

display:none;

flex-direction:column;

z-index:999;

}

.user-dropdown a{

padding:10px 14px;

text-decoration:none;

color:#111;

font-size:14px;

}

.user-dropdown a:hover{
background:#f3f4f6;
}

.dropdown-name{
color:black;
padding:10px 14px;

font-weight:600;

border-bottom:1px solid #eee;

}


.current-plan-badge{
background:#22c55e;
color:#fff;
padding:4px 10px;
border-radius:6px;
font-size:12px;
margin-left:8px;
}

.btn-disabled{
background:#ddd;
cursor:not-allowed;
}

.btn-downgrade{
display:inline-block;
margin-top:10px;
padding:10px 16px;
background:brown;
color:#fff;
text-decoration:none;
border-radius:6px;
font-weight:600;
border:none;
cursor:pointer;
}

.pagination{
margin-top:20px;
display:flex;
gap:8px;
flex-wrap:wrap;
}

.page-btn{
padding:6px 12px;
border:1px solid #ddd;
background:#fff;
text-decoration:none;
color:#333;
border-radius:6px;
font-size:14px;
}

.page-btn:hover{
background:#f3f4f6;
}

.page-btn.active{
background:#2563eb;
color:#fff;
border-color:#2563eb;
}


.website-layout{
display:flex;
gap:25px;
align-items:flex-start;
}

/* desktop */

.card-form-add-website{
flex:1;
max-width:25%;
background:white;
padding:20px;
border-radius:8px;
box-shadow:0 3px 10px rgba(0,0,0,0.05);
margin-bottom:25px;
max-width:500px;
}

.guide-box{
flex:2;
max-width:75%;
background:#fff;
border-radius:10px;
padding:20px;
box-shadow:0 2px 10px rgba(0,0,0,0.05);
display:none;
}

.guide-box.show{
display:block;
}

/* mobile */

@media (max-width:768px){

.website-layout{
flex-direction:column;
}

.card-form-add-website{
width:100%;
max-width:100%;
background:white;
padding:20px;
border-radius:8px;
box-shadow:0 3px 10px rgba(0,0,0,0.05);
margin-bottom:25px;

}

}


.guide-box-content{
    padding:30px;
}


/* ===== TRANSACTION BADGE ===== */

.tx-topup,
.tx-upgrade,
.tx-extend,
.tx-downgrade{
display:inline-block;
padding:4px 10px;
border-radius:20px;
font-size:12px;
font-weight:600;
line-height:1;
white-space:nowrap;
}

/* Topup */

.tx-topup{
background:#dcfce7;
color:#166534;
}

/* Upgrade */

.tx-upgrade{
background:#dbeafe;
color:#1e40af;
}

/* Extend */

.tx-extend{
background:#ede9fe;
color:#5b21b6;
}

/* Downgrade */

.tx-downgrade{
background:#fee2e2;
color:#991b1b;
}
.wallet-box{
display:flex;
gap:20px;
margin-bottom:20px;
flex-wrap:wrap;
}

.wallet-card{
background:#fff;
padding:20px;
border-radius:10px;
box-shadow:0 2px 6px rgba(0,0,0,0.05);
flex:1;
min-width:200px;
}

.wallet-title{
font-size:13px;
color:#666;
margin-bottom:6px;
}

.wallet-value{
font-size:22px;
font-weight:bold;
}

.tx-filter{
display:flex;
gap:12px;
margin-bottom:18px;
align-items:center;
flex-wrap:wrap;
}

.tx-filter select,
.tx-filter input{
height:38px;
padding:0 12px;
border:1px solid #d1d5db;
border-radius:8px;
font-size:14px;
background:#fff;
outline:none;
transition:all .15s ease;
}

.tx-filter input{
min-width:220px;
}

.tx-filter select:focus,
.tx-filter input:focus{
border-color:#2563eb;
box-shadow:0 0 0 2px rgba(37,99,235,.1);
}

.tx-filter button{
height:38px;
padding:0 16px;
background:#2563eb;
color:#fff;
border:none;
border-radius:8px;
font-size:14px;
cursor:pointer;
transition:.15s;
}

.tx-filter button:hover{
background:#1d4ed8;
}

.pagination{
margin-top:20px;
display:flex;
gap:6px;
}

.page-btn{
padding:6px 10px;
background:#f3f4f6;
border-radius:6px;
text-decoration:none;
}

.page-current{
padding:6px 10px;
background:#111;
color:#fff;
border-radius:6px;
}

@media(max-width:768px){

.tx-filter{
flex-direction:column;
align-items:stretch;
}

.tx-filter input{
width:100%;
}

.tx-filter select{
width:100%;
}

.tx-filter button{
width:100%;
}

}


.sidebar-bottom{
margin-top:auto;
padding-top:20px;

}

.logout {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    color: #f87171;
}

.logout:hover {
    background: rgba(255,0,0,0.1);
    border-radius: 6px;
}

.user-trigger{
display:flex;
align-items:center;
gap:10px;
cursor:pointer;
}

.user-avatar{
width:34px;
height:34px;
border-radius:50%;
background:#4f46e5;
color:white;
display:flex;
align-items:center;
justify-content:center;
font-weight:600;
font-size:14px;
}

.user-meta{
display:flex;
flex-direction:column;
line-height:1.2;
}

.user-name{
font-size:13px;
font-weight:600;
}

.user-balance{
font-size:12px;
color:#16a34a;
}

.user-trigger i{
font-size:12px;
color:#666;
}

.role-admin{
background:#ede9fe;
color:#5b21b6;
padding:4px 8px;
border-radius:4px;
font-size:12px;
}

.role-user{
background:#e0f2fe;
color:#0369a1;
padding:4px 8px;
border-radius:4px;
font-size:12px;
}


.plan{
padding:4px 10px;
border-radius:6px;
font-size:12px;
font-weight:600;
display:inline-block;
}

/* FREE */

.plan-free{
background:#f1f5f9;
color:#475569;
}

/* PRO */

.plan-pro{
background:#dbeafe;
color:#1d4ed8;
}

/* AGENCY */

.plan-agency{
background:#ede9fe;
color:#6d28d9;
}

/* ENTERPRISE */

.plan-enterprise{
background:#fef3c7;
color:#b45309;
}



/*profile css */

/* PROFILE HEADER */

.profile-header{
display:flex;
align-items:center;
gap:15px;
margin-bottom:25px;
}

.profile-avatar{
width:50px;
height:50px;
border-radius:50%;
background:#eef2ff;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
color:#4f46e5;
}

.profile-info h3{
margin:0;
font-size:18px;
}

.profile-info p{
margin:0;
color:#6b7280;
font-size:14px;
}


/* MEMBERSHIP */

.membership-card{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
background:#fff;
padding:20px;
border-radius:8px;
margin-bottom:25px;
}

.membership-item span{
display:block;
font-size:13px;
color:#6b7280;
}

.membership-item strong{
font-size:16px;
}

.membership-action{
display:flex;
align-items:center;
justify-content:flex-end;
}

.btn-upgrade{
background:#4f46e5;
color:#fff;
padding:8px 14px;
border-radius:6px;
text-decoration:none;
}


/* PROFILE GRID */

.profile-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:25px;
}


/* FORM */

.profile-form{
display:flex;
flex-direction:column;
gap:10px;
}

.profile-form input{
padding:10px;
border:1px solid #ddd;
border-radius:6px;
}

.profile-form button{
margin-top:10px;
}


/* MOBILE */

@media(max-width:768px){

.profile-grid{
grid-template-columns:1fr;
}

.membership-card{
grid-template-columns:1fr 1fr;
}

}


.google-register-btn{

display:flex;
align-items:center;
justify-content:center;
gap:10px;

background:#fff;
border:1px solid #ddd;

padding:10px;
border-radius:6px;

text-decoration:none;
color:#333;

font-weight:600;
margin-bottom:15px;
}

.google-register-btn:hover{
background:#f5f5f5;
}

.login-divider{
text-align:center;
margin:15px 0;
color:#888;
font-size:13px;
}

.auth-divider{
text-align:center;
margin:20px 0;
position:relative;
}

.auth-divider span{
background:#fff;
padding:0 10px;
color:#777;
}

.auth-divider:before{
content:"";
position:absolute;
top:50%;
left:0;
right:0;
height:1px;
background:#ddd;
z-index:-1;
}

/* ========================
ALERT
======================== */

.alert{
padding:12px 16px;
margin-bottom:20px;
border-radius:6px;
font-size:14px;
}

.alert-success{
background:#dcfce7;
color:#166534;
border:1px solid #bbf7d0;
}

.alert-error{
background:#fee2e2;
color:#991b1b;
border:1px solid #fecaca;
}


.submenu-title {
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
color: #ccc;
}

.submenu-title.active {
color: #fff;
font-weight: bold;
}

.submenu-items a {
display: block;
padding: 8px 20px;
font-size: 14px;
color: #aaa;
}

.submenu-items a.active {
color: #fff;
font-weight: bold;
}

.arrow {
font-size: 12px;
}


/* MENU TITLE */


/* ITEM */
.sidebar a,
.submenu-title {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 15px;
color: #cbd5e1;
text-decoration: none;
}

/* ICON */
.sidebar a i,
.submenu-title i:first-child {
width: 20px;
text-align: center;
}

/* TEXT */
.sidebar a span,
.submenu-title span {
flex: 1;
}

/* ARROW */
.arrow {
margin-left: auto;
font-size: 12px;
transition: transform 0.2s;
}

.submenu-title.active .arrow {
transform: rotate(180deg);
}

/* ACTIVE */
.sidebar a.active,
.submenu-title.active {
color: #fff;
font-weight: 600;
}

/* SUBMENU */
.submenu-items {
padding-left: 35px;
}

.submenu-items a {
padding: 8px 0;
font-size: 14px;
color: #94a3b8;
}

.submenu-items a.active {
color: #fff;
}

/* HOVER */
.sidebar a:hover,
.submenu-title:hover {
background: rgba(255,255,255,0.05);
border-radius: 6px;
}
.float-contact 
{
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99999;
}
.chat-zalo, .chat-facebook, .call-hotline 
{
  display: block;
  margin-bottom: 6px;
  line-height: 0;
}