/* General Styling */
body {
	font-family: 'Varela Round', 'Inconsolata', monospace;
    background-color: #f4f7fa;
    margin: 0;
    padding: 0;
    color: #333;
    font-size: 16px; /* Kích thước chữ cơ bản cho nội dung văn bản */
    line-height: 1.5; /* Khoảng cách giữa các dòng */
}


/* Các kích thước font tiêu đề */
h1 {
    font-size: 2.5rem; /* Khoảng 40px */
    font-weight: bold;
}

h2 {
    font-size: 2rem; /* Khoảng 32px */
    font-weight: bold;
}

h3 {
    font-size: 1.75rem; /* Khoảng 28px */
    font-weight: bold;
}

h4 {
    font-size: 1.5rem; /* Khoảng 24px */ 
    font-weight: bold;
}

h5 {
    font-size: 1.25rem; /* Khoảng 20px */
    font-weight: bold;
}

h6 {
    font-size: 1rem; /* Khoảng 16px */
    font-weight: bold;
}

/* Kích thước font cho đoạn văn và văn bản phụ */
p {
    font-size: 1rem; /* 16px */
    line-height: 1.6; /* Đảm bảo khoảng cách thoải mái giữa các dòng văn bản */
}

small {
    font-size: 0.875rem; /* Khoảng 14px */
}

footer {
    font-size: 0.75rem; /* Khoảng 12px */
}

/* Giới hạn ký tự trong phần mô tả và thêm dấu ba chấm */
.description {
    max-width: 250px; /* Đặt giới hạn chiều rộng phần mô tả */
    white-space: nowrap; /* Giữ nội dung trên một dòng */
    overflow: hidden; /* Ẩn phần nội dung tràn ra ngoài */
    text-overflow: ellipsis; /* Thêm dấu ba chấm khi nội dung bị cắt ngắn */
	word-wrap: break-word;
}

.logo-text-full {
    font-family: 'Varela Round', 'Pacifico', cursive;
    font-size: 2rem; /* Kích thước chữ */
    color: white; /* Màu chữ trắng để phù hợp với màu logo cũ */
    font-weight: bold; /* In đậm để trông nổi bật hơn */
    letter-spacing: 1px; /* Khoảng cách giữa các chữ */
    margin: 0; /* Xóa khoảng cách thừa xung quanh */
    padding: 5px 0; /* Thêm khoảng cách trên và dưới */
}

/* Ẩn logo khi thu nhỏ */
.logo-text-collapsed {
    display: none;
}

/* Khi sidebar thu nhỏ */
#sidebar.collapsed .logo-text-full {
    display: none; /* Ẩn logo đầy đủ */
}

#sidebar.collapsed .logo-text-collapsed {
    display: block; /* Hiển thị chữ "VPS" */
    font-family: 'Varela Round', 'Pacifico', cursive;
    font-size: 2rem;
    color: white;
    font-weight: bold;
    letter-spacing: 1px;
    margin: 0;
    padding: 10px 0;
}

/* Responsive cho mobile */
@media (max-width: 768px) {
    .description {
		display: inline-block !important;
        max-width: 250px !important; /* Giảm chiều rộng phần mô tả trên mobile */
    }

    .d-flex {
        flex-wrap: wrap;
    }

    .d-flex .text-right {
        margin-top: 10px;
        text-align: left;
    }
}

/* Flexbox for main layout - điều chỉnh lại chiều cao */
.d-flex {
    display: flex;
    flex-wrap: wrap; /* Cho phép nội dung tự động xuống dòng nếu cần */
    height: auto; /* Đảm bảo chiều cao chỉ dựa vào nội dung */
    min-height: unset; /* Xóa bỏ min-height: 100vh nếu đã có */
	justify-content: space-between;
}

/* Nếu bạn cần sử dụng min-height ở cấp bố cục trang */
.page-container {
    min-height: 100vh; /* Giữ chiều cao 100vh ở cấp trang */
    display: flex;
    flex-direction: column;
}

/* Sidebar */
.sidebar {
    background-color: #20c997;
    width: 250px;
    transition: width 0.3s ease;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

#sidebar.collapsed {
    width: 80px;
}

/* Sidebar nội dung */
.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #23272b;
}

.sidebar-logo img {
    max-width: 80%;
    margin: 0 auto;
}

.components {
    padding: 0;
    list-style: none;
    margin-top: 20px;
}

.components li a {
    display: block;
    color: #fff;
    padding: 15px 20px;
    text-decoration: none;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.components li a:hover {
    background-color: #495057;
    color: #ffffff;
}

.components li a i {
    margin-right: 10px;
}

.components li.active a {
    background-color: #00805a;
    color: #ffffff;
}

.components li.active a:hover {
    background-color: #05b883;
}

/* Main content */
.main-content {
    flex-grow: 1;
    margin-left: 250px;
    transition: margin-left 0.3s ease, padding 0.3s ease;
    padding: 20px;
}

.sidebar.collapsed + .main-content {
    margin-left: 0;
}

#sidebar.collapsed ~ .main-content {
    margin-left: 80px;
}

#sidebar.collapsed .sidebar-logo img,
#sidebar.collapsed .components li a span {
    display: none;
}

#sidebar.collapsed .components li a i {
    margin-right: 0;
}

.sidebar .components li a {
    display: flex;
    align-items: center;
    padding-left: 20px;
    transition: padding-left 0.3s ease;
}

.sidebar .components li a i {
    font-size: 1.2rem;
    transition: font-size 0.3s ease;
}

#sidebar.collapsed .components li a {
    justify-content: center;
    padding-left: 0;
}

#sidebar.collapsed .components li a i {
    font-size: 1.8rem;
    margin-left: 10px;
}

.sidebar-header button {
    background-color: #ffffff;
    color: #20c997;
    border-radius: 50%;
    border: none;
}

.sidebar-logo {
    text-align: center;
    margin-bottom: 10px;
}


/* Table */
.table {
    width: 100%;
    overflow-x: auto;
}



/* Đảm bảo các nút giữ nguyên kích thước và không bị xuống hàng */
.table td a.btn {
    white-space: nowrap; /* Giữ nút trên một dòng */
    display: inline-block; /* Giữ nguyên kích thước và không bị co */
}

/* Responsive chỉnh lại nút trên mobile */
@media (max-width: 768px) {


    .table td a.btn {
        width: auto; /* Đảm bảo nút chiếm toàn bộ chiều rộng trên mobile */
        margin-top: 5px; /* Thêm khoảng cách khi xuống hàng */
    }
}

.table th, .table td {
    padding: 0.75rem;
    text-align: left;
    vertical-align: middle;
}

.table th {
    background-color: #20c997;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.05);
}

.table tr:hover {
    background-color: #e2e6ea;
}

/* Styling cho status của hóa đơn */
.text-success {
    color: #28a745 !important;  /* Màu xanh lá cho trạng thái đã thanh toán */
    font-weight: bold;  /* In đậm cho status */
}

.text-danger {
    color: #dc3545 !important;  /* Màu đỏ cho trạng thái chưa thanh toán */
    font-weight: bold;  /* In đậm cho status */
}



/* Navbar */
.navbar {
    background-color: #20c997;
    color: white;
    padding: 1rem;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 1.5rem;
}

/* List group item */
.list-group-item {
    font-size: 1rem;
    padding: 0.75rem 1rem;
    background-color: #20c997;
    color: white;
    border: 1px solid #20c997;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.list-group-item:hover, .list-group-item.active {
    background-color: #00805a;
}

.list-group-item.active {
    background-color: #004080;
}

/* Nav tabs */
.nav-tabs .nav-link.active {
    background-color: #20c997;
    color: white;
}

.nav-tabs .nav-link {
    background-color: #e9ecef;
    color: #20c997;
    margin-right: 2px;
    border-radius: 4px 4px 0 0;
    transition: background-color 0.3s ease;
}

.nav-tabs .nav-link:hover {
    background-color: #dae0e5;
}

/* Status */
.copied, .status-online {
    color: #28a745;
    font-weight: bold;
}

.status-offline {
    color: #dc3545;
    font-weight: bold;
}

/* Trạng thái sync màu vàng cam */
.status-sync {
    color: #acc10a; /* màu đỏ */
    font-weight: bold;
}

/* Trạng thái suspended - màu đỏ */
.status-suspended {
    color: #dc3545; /* màu đỏ */
    font-weight: bold;
}

/* Trạng thái Online - màu xanh lá cây */
.status-online {
    color: #28a745; /* Màu xanh lá cây */
    font-weight: bold;
}

/* Trạng thái Active - màu xanh lá */
.status-active {
    color: #28a745; /* Màu xanh lá cây */
    font-weight: bold;
}
/* Trạng thái Pending Upgrade - màu xanh dương */
.status-pending-upgrade {
    color: #ff7b06; /* Màu xanh dương */
    font-weight: bold;
}
/* Trạng thái Expired - màu đỏ */
.status-expired {
    color: #dc3545; /* Màu đỏ */
    font-weight: bold;
}

.status-pending, .status-change_password, .status-change_ip, .status-renew {
    color: #ffc107;
    font-weight: bold;
}

.status-completed {
    color: #5cb85c; /* Màu xanh lá cho trạng thái "Completed" */
    font-weight: bold;
}

.status-cancelled {
    color: #d9534f; /* Màu đỏ cho trạng thái "Cancelled" */
    font-weight: bold;
}

.status-default {
    color: #777; /* Màu xám cho các trạng thái khác */
    font-weight: bold;
}

.status-reinstall {
    color: #ffc107;
    font-weight: bold;
}

.status-processing {
    color: #acc10a; /* Màu xanh cam cho các trạng thái processing */
    font-weight: bold;
}

.status-open {
    color: #5cb85c; /* Màu xanh lá cho trạng thái "open" */
    font-weight: bold;
}

.status-in-progress {
    color: #acc10a; /* Màu xanh cam cho các trạng thái processing */
    font-weight: bold;
}

.status-closed {
    color: #d9534f; /* Màu đỏ cho trạng thái "close" */
    font-weight: bold;
}

/* Tùy chỉnh màu sắc cho cột Invoice Status */
.invoice-paid {
    color: #5cb85c; /* Màu xanh lá cho trạng thái "Paid" */
    font-weight: bold;
}

.invoice-unpaid {
    color: red; /* Màu đỏ cho trạng thái "Unpaid" */
    font-weight: bold;
}

.invoice-default {
    color: #777; /* Màu xám cho trạng thái khác */
    font-weight: bold;
}

/* Đảm bảo không có margin âm giữa các cột */
.row {
    margin-left: 0;
    margin-right: 0;
}


/* Đảm bảo các option block có viền và hiển thị đẹp */
.option-block {
    cursor: pointer;
    padding: 15px;
    margin: 5px;
    border: 1px solid #ddd;  /* Đường viền mặc định */
    transition: background-color 0.3s ease, border-color 0.3s ease;
    background-color: #f9f9f9; /* Nền mặc định */
}

.option-block:hover {
    background-color: #f0f0f0; /* Màu nền khi hover */
}



/* Hiển thị các tùy chọn trong các ô lựa chọn */
.region-option, .os-option, .isp-option, .protocol-option {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Đảm bảo nội dung trong nút căn lề trái */
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    background-color: #f9f9f9;
    font-size: 1rem;
    position: relative; /* Để chứa dấu tích */
}
/* Khi tùy chọn được chọn */
.selected-option {
    background-color: #f0faff !important;  /* Nền xanh nhạt khi được chọn */
    position: relative;
    border: 1px solid #20c997 !important;  /* Viền xanh */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);  /* Hiệu ứng shadow nhẹ khi được chọn */
}

/* Dấu tích nằm ngang hàng với văn bản, căn phải */
.selected-option::after {
    content: '\2713'; /* Dấu tích */
    position: absolute;
    top: 50%;  /* Căn chỉnh theo chiều dọc để ngang hàng với văn bản */
    transform: translateY(-50%);  /* Đảm bảo dấu tích luôn ở giữa */
    right: 10px;  /* Khoảng cách từ dấu tích đến cạnh phải */
    color: #20c997;
    font-size: 1.5rem;
    z-index: 1;
}

/* Đảm bảo rằng nội dung trong các ô không bị ảnh hưởng */
.selected-option td {
    position: relative;
    padding-right: 30px; /* Tạo không gian cho dấu tích không bị chồng lên nội dung */
}

/* Định dạng icon và tên */
.flag-icon, .os-option i, .isp-option i, .protocol-option i {
    margin-right: 10px;
    font-size: 1.5rem;
}

.region-option span, .os-option span, .isp-option span, .protocol-option span {
    margin-left: 10px;
    font-size: 1rem;
}

/* Chỉnh sửa các nút trong phần "Select Type" để có chiều cao bằng nhau */
.custom-btn {
    font-size: 1.5rem;
    padding: 20px 0;
    width: 100%; /* Đảm bảo nút chiếm toàn bộ chiều rộng của cột */
    text-align: center;
    border-radius: 8px;
    border: none;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    min-height: 80px; /* Chiều cao tối thiểu để đồng đều */
    display: flex;
    align-items: center; /* Căn giữa theo chiều dọc */
    justify-content: center; /* Căn giữa theo chiều ngang */
}

/* Đảm bảo các nút có cùng chiều cao trên mobile */
@media (max-width: 768px) {
    .custom-btn {
        min-height: 60px; /* Đặt chiều cao tối thiểu cho các nút trên mobile */
    }

    .col-md-4 {
        padding-left: 0; /* Xóa padding thừa trên mobile */
        padding-right: 0;
    }

    /* Nếu muốn các nút trong cùng một hàng xuống hàng trên mobile */
    .row.mb-4 {
        flex-direction: column; /* Chuyển thành hàng đơn khi trên mobile */
    }

    .col-md-4 {
        width: 100%;
        margin-bottom: 10px; /* Thêm khoảng cách giữa các nút trên mobile */
    }
}
.custom-btn:hover {
    background-color: #00805a;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Đảm bảo các nút có cùng chiều cao trên mobile */
@media (max-width: 768px) {
    .custom-btn {
        min-height: 80px;
    }

    /* Chuyển layout các tùy chọn Region, OS, ISP, Protocol thành dạng hàng */
    #regionOptions, #osOptions, #ispOptions, #protocolOptions {
        display: block !important; /* Chuyển từ grid thành block để xuống hàng */
    }

    .region-option, .os-option, .isp-option, .protocol-option {
        width: 95% !important; /* Đảm bảo các tùy chọn chiếm toàn bộ chiều rộng */
        margin-bottom: 10px !important; /* Thêm khoảng cách giữa các lựa chọn */
        text-align: left !important; /* Căn lề trái cho các nút */
        justify-content: flex-star !important; /* Đảm bảo nội dung trong nút cũng căn về bên trái */
        padding-left: 10px !important;/* Thêm padding để tạo khoảng cách từ lề trái */
    }
	.card {
		padding: 25px !important;
    }
}

/* Layout cho các tùy chọn ở màn hình lớn */
#regionOptions, #osOptions, #ispOptions, #protocolOptions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top: 20px;
}

/* Điều chỉnh layout để các nút chiếm toàn bộ không gian mà không có khoảng cách dư */
.row.mb-4 {
    display: flex;
    justify-content: space-between;
    margin-left: 0;
    margin-right: 0;
	padding-bottom: 15px;
}

/* Đảm bảo các nút chiếm toàn bộ không gian của cột */
.col-md-4 {
    flex: 1;
    padding-left: 5px;
    padding-right: 5px;
    display: flex; /* Thêm flex để cột có chiều cao linh hoạt */
}

/* Điều chỉnh layout cho hàng tổng quan tài khoản */
.row.text-center.mb-4 {
    display: flex;
    justify-content: space-between;  /* Đảm bảo các cột được chia đều */
    margin-left: 0;
    margin-right: 0;
}



/* Hiệu ứng khi hover vào các thẻ card */
.card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);  /* Thêm hiệu ứng shadow khi hover */
}
/* Điều chỉnh layout cho hàng tổng quan tài khoản */
.row.text-center.mb-4 {
    display: flex;
    justify-content: space-between;
    margin-left: 0;
    margin-right: 0;
    gap: 15px; /* Khoảng cách giữa các cột */
    flex-wrap: wrap; /* Đảm bảo cột được xuống dòng khi không đủ không gian */
}

/* Card */
.card {
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px; /* Giữ giá trị lớn hơn để đảm bảo bo góc rõ ràng hơn */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Giữ giá trị với bóng lớn hơn */
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 5px;
    box-sizing: border-box;
    display: flex;
    flex: 1; /* Đảm bảo card chiếm toàn bộ chiều cao của cột */
    flex-direction: column;
    justify-content: space-between;
    transition: box-shadow 0.3s ease; /* Giữ hiệu ứng chuyển đổi */
}



/* Styling cho phần header của card */
.card-header {
    font-size: 1.25rem;
    font-weight: bold;
    color: #ffffff;
    background-color: #20c997;
    border-bottom: 1px solid #20c997;
    border-radius: 4px 4px 0 0;
    padding: 15px;
	text-align: center;
}

/* Styling cho phần body của card */
.card-body {
    padding: 20px;
    text-align: left;
    flex-grow: 1; /* Đảm bảo body mở rộng chiếm hết chiều cao còn lại */
	padding-left: 5px;
	padding-right: 5px	
}

/* Căn chỉnh h3 bên trong card */
.card-body h3 {
    font-size: 2rem;
    margin: 0;
    font-weight: bold;
}

/* Định dạng màu sắc cho các thẻ card dựa trên background của header */
.bg-primary {
    background-color: #20c997;
    color: white;
}

.bg-success {
    background-color: #28a745;
    color: white;
}

.bg-warning {
    background-color: #ffc107;
    color: white;
}

.bg-danger {
    background-color: #dc3545;
    color: white;
}


/*css dành riêng dashboard */
.dashboard-col-md-3 {
    flex: 1;  /* Đảm bảo các cột chiếm đều không gian */
    display: flex;
	padding-left: auto;
    padding-right: 0px !important;
}
/* Media query để chuyển thành 1 cột trên thiết bị di động */
@media (max-width: 768px) {
    .dashboard-col-md-3 {
        width: 100%; /* Đảm bảo mỗi cột chiếm toàn bộ chiều rộng */
        margin-bottom: 15px; /* Thêm khoảng cách giữa các thẻ card */
    }
}

/* Đảm bảo các cột chiếm đều không gian và có chiều cao bằng nhau */
.col-md-3 {
    flex: 1;  /* Đảm bảo các cột chiếm đều không gian */
    display: flex;
    padding: 15px; /* Thêm padding giữa các cột */
	padding-left: auto;
    padding-right: 0px !important;
}
/* Media query để chuyển thành 1 cột trên thiết bị di động */
@media (max-width: 768px) {
    .row.text-center.mb-4 {
        flex-direction: column; /* Chuyển từ dạng nhiều cột thành 1 cột */
    }
    
    .col-md-3 {
        width: 100%; /* Đảm bảo mỗi cột chiếm toàn bộ chiều rộng */
        margin-bottom: 15px; /* Thêm khoảng cách giữa các thẻ card */
    }
}

/* Đưa ô tìm kiếm và dropdown vào cùng 1 hàng, căn sang phải */
.form-inline {
    display: flex;
    justify-content: flex-end;  /* Đưa form tìm kiếm sang phải */
    flex-wrap: nowrap;  /* Không cho các phần tử xuống hàng */
    gap: 10px;  /* Khoảng cách giữa các phần tử */
}

/* Phong cách cho Search Form */
form.form-inline {
    display: flex;
    justify-content: flex-end; /* Căn chỉnh về bên phải */
    gap: 10px; /* Khoảng cách giữa các phần tử */
    flex-wrap: nowrap; /* Đảm bảo không xuống dòng */
}

form.form-inline input[type="text"] {
    width: 250px; /* Đặt kích thước của ô nhập liệu */
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
    font-size: 1rem;
    transition: all 0.3s ease;
}

form.form-inline input[type="text"]:focus {
    border-color: #20c997;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

form.form-inline button {
    background-color: #20c997;
    color: white;
    padding: 8px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

form.form-inline button:hover {
    background-color: #00805a;
}

/* Media query để điều chỉnh trên màn hình nhỏ */
@media (max-width: 768px) {
    form.form-inline {
        justify-content: center; /* Căn giữa form trên thiết bị di động */
        flex-wrap: wrap; /* Cho phép xuống dòng khi cần */
    }

    form.form-inline input[type="text"], 
    form.form-inline button {
        width: auto; /* Đảm bảo cả ô nhập liệu và nút không quá dài */
        flex: 1; /* Chia đều chiều rộng cho ô nhập và nút */
    }
}

/* Phong cách cho các nút hành động (Start, Stop, Reboot, ...) */
.btn-sm {
    padding: 5px 10px; /* Điều chỉnh padding cho các nút nhỏ */
    font-size: 0.875rem; /* Kích thước chữ nhỏ */
    border-radius: 4px;
    cursor: pointer;
}

/* Styling for buttons VPS - PROXY - CUSTOM */
.btn-primary-plan {
    background-color: #fff; /* Nền trắng */
    border: 2px solid #20c997 !important; /* Viền màu xanh */
    color: #20c997 !important; /* Chữ màu xanh */
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
	border-radius: 5px !important; /* Bo góc cho nút */
}

.btn-primary-plan:hover {
    background-color: #20c997 !important; /* Nền xanh khi hover */
    color: #fff !important; /* Chữ trắng khi hover */
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.3); /* Hiệu ứng shadow khi hover */
}

/* Styling cho nút active */
.btn-primary-plan.active {
    background-color: #20c997 !important; /* Nền xanh dương */
    color: #fff !important; /* Chữ trắng */
    border-color: #20c997 !important; /* Viền xanh */
}

/* Styling for buttons */
.btn {
    padding: 10px 16px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
}

.btn-secondary {
    background-color: #6c757d;
    color: white;
}

.btn-secondary:hover {
    background-color: #5a6268;
}

.btn-primary {
    background-color: #20c997;
    border-color: #20c997;
    color: white;
    font-size: 16px; /* Hoặc kích thước bạn muốn */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}


.btn-primary:hover {
    background-color: #00805a;
}

.btn-success {
    background-color: #28a745;
    color: white;
    border: none;
}

.btn-success:hover {
    background-color: #218838;
}

.btn-danger {
    background-color: #dc3545;
    color: white;
    border: none;
}

.btn-danger:hover {
    background-color: #c82333;
}

.btn-warning {
    background-color: #ffc107;
    color: white;
    border: none;
}

.btn-warning:hover {
    background-color: #e0a800;
}

/* Đảm bảo rằng nút bấm nổi bật và dễ sử dụng trên tất cả các thiết bị */
.btn-info {
	z-index: 1050 !important;
    background-color: #17a2b8; /* Màu nền của nút */
    border-color: #17a2b8; /* Màu viền của nút */
    color: #fff; /* Màu chữ của nút */
    padding: 10px 20px; /* Kích thước padding bên trong nút */
    border-radius: 5px; /* Bo góc của nút */
    font-size: 16px; /* Kích thước chữ */
    text-align: center; /* Căn giữa chữ */
    display: inline-block; /* Đảm bảo nút không chiếm toàn bộ chiều rộng */
    cursor: pointer; /* Hiển thị con trỏ chuột khi di chuột qua nút */
    transition: background-color 0.3s, border-color 0.3s; /* Hiệu ứng chuyển đổi màu */
}

.btn-info:hover {
    background-color: #138496; /* Màu nền khi di chuột qua nút */
    border-color: #117a8b; /* Màu viền khi di chuột qua nút */
}

.btn-info:focus {
    outline: none; /* Loại bỏ đường viền khi nút được chọn */
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5); /* Hiệu ứng đổ bóng khi nút được chọn */
}

/* Đảm bảo rằng nút bấm không bị che khuất trên thiết bị di động */
@media (max-width: 768px) {
    .btn-info {
		z-index: 1050 !important; /* Hoặc giá trị cao hơn */
        font-size: 14px; /* Kích thước chữ nhỏ hơn trên thiết bị di động */
        padding: 8px 16px; /* Padding nhỏ hơn trên thiết bị di động */
        width: 100%; /* Đảm bảo nút chiếm toàn bộ chiều rộng trên thiết bị di động */
    }
}


/* Đảm bảo khoảng cách giữa các nút */
.action-container button {
    display: inline-block;
    width: 90px; /* Đặt chiều rộng cố định cho tất cả các nút */
    text-align: center; /* Đảm bảo văn bản nằm giữa nút */
    padding: 8px 0; /* Điều chỉnh padding cho các nút */
    margin-bottom: 5px; /* Thêm khoảng cách giữa các nút khi xếp chồng */
    margin-right: 5px; /* Khoảng cách ngang giữa các nút */
    font-size: 0.875rem; /* Đặt kích thước font đồng đều */
}

.action-container button:last-child {
    margin-right: 0; /* Xóa khoảng cách của nút cuối cùng */
}

/* Mặc định ẩn menu top và dropdown trên desktop */
.top-nav, .dropdown-menu {
    display: none;
}

/* Bulk Actions Container */
.bulk-actions-container {
    position: relative;
    display: inline-block;
    margin-right: 15px; /* Khoảng cách giữa nút Bulk Actions và các phần tử khác */
}

/* Nút Bulk Actions */
.btn-bulk-actions {
    background-color: #20c997;
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-bulk-actions i {
    margin-left: 10px;
    transition: transform 0.3s ease;
}

.btn-bulk-actions:hover {
    background-color: #00805a;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Menu thả xuống của Bulk Actions */
.bulk-actions-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #dadcde;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 10px;
    z-index: 1000;
    min-width: 200px;
}

.bulk-actions-container.active .bulk-actions-menu {
    display: block;
}

/* Các mục trong menu thả xuống */
.bulk-action-item {
    background-color: white;
    color: #333;
    padding: 10px 20px;
    font-size: 14px;
    text-align: left;
    border: none;
    cursor: pointer;
    width: 100%;
    transition: all 0.3s ease;
    border-bottom: 1px solid #ccc;
}

.bulk-action-item:hover {
    background-color: #f1f1f1;
    color: #20c997;
}

.bulk-action-item:last-child {
    border-bottom: none;
}

.bulk-action-item i {
    margin-right: 10px;
    color: #20c997; /* Màu icon */
}

/* Định dạng cho action buttons */
.action-buttons {
    display: flex;
    flex-direction: column; /* Xếp các nút theo chiều dọc */
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    background-color: #dadcde; /* Màu nền */
    padding: 10px; /* Khoảng cách bên trong */
    border-radius: 8px; /* Bo góc */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Hiệu ứng đổ bóng */
}

/* Khoảng cách giữa các nút */
.action-buttons button {
    margin-bottom: 1px;
}

.action-buttons button:last-child {
    margin-bottom: 0; /* Xóa margin cho nút cuối cùng */
}

/* Khi nút bị vô hiệu hóa, thay đổi màu sắc */
.btn:disabled {
background-color: #d3d3d3; /* Màu nền nhạt */
border-color: #d3d3d3; /* Màu viền nhạt */
color: #a9a9a9; /* Màu chữ nhạt */
}

/* Tùy chỉnh icon bánh răng khi nút bị disabled */
.btn:disabled i.fas.fa-cog {
color: #a9a9a9; /* Màu icon bánh răng nhạt */
}

/* Ẩn sidebar và đảm bảo main-content chiếm toàn bộ không gian trên mobile */
@media (max-width: 768px) {
    .sidebar {
        display: none;
    }

    .main-content {
        margin-left: 0; /* Đảm bảo không còn khoảng trống của sidebar */
        width: 100%; /* Main content chiếm toàn bộ chiều rộng */
        padding-left: 0 !important;  /* Loại bỏ padding bên trái */
        padding-right: 0 !important; /* Loại bỏ padding bên phải */
    }

    /* Top navigation bar */
    .top-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #20c997;
        color: white;
        padding: 10px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000; /* Giữ menu trên cùng */
    }

    .top-nav .menu-toggle {
        font-size: 1.5rem;
        cursor: pointer;
    }

    .top-nav .brand {
        font-size: 1.25rem;
        font-weight: bold;
    }

    /* Dropdown menu for mobile */
    .dropdown-menu {
        display: none;
        flex-direction: column;
        background-color: #20c997;
        position: fixed;
        top: 10%; /* Hiển thị ngay dưới top-nav */
        left: 0;
        right: 0;
        z-index: 1001;
        padding: 10px 0;
    }

    .dropdown-menu.active {
        display: flex; /* Hiển thị menu khi toggle */
    }

    .dropdown-menu a {
        color: white;
        padding: 10px;
        text-align: center;
        text-decoration: none;
    }

    .dropdown-menu a:hover {
        background-color: #00805a;
    }
}

/* Desktop giữ nguyên sidebar */
@media (min-width: 768px) {
    .top-nav {
        display: none; /* Không hiển thị top-nav trên desktop */
    }

    .sidebar {
        display: block; /* Hiển thị sidebar trên desktop */
    }

    .main-content {
        margin-left: 250px; /* Điều chỉnh để phù hợp với kích thước sidebar */
    }
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Cho phép cuộn mượt trên iOS */
    min-height: 400px; /* Chiều cao tối thiểu, bạn có thể điều chỉnh theo nhu cầu */
}

.table-responsive table {
    width: 100%;
    min-width: 600px; /* Đặt kích thước tối thiểu để bảng không bị ép nhỏ quá trên mobile */
}

/* Media queries cho mobile */
@media (max-width: 768px) {
    .table-responsive {
        margin-bottom: 15px; /* Thêm khoảng cách giữa bảng và phần khác */
    }

    /* Responsive cho các thành phần khác ngoài bảng */
    .content-responsive {
        width: 100%;
        padding: 0 10px; /* Đảm bảo nội dung bên ngoài bảng giữ tính responsive */
    }
}

.plan-table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Cho phép cuộn mượt trên iOS */
}

.plan-table-responsive table {
    width: 100%;
    min-width: 600px; /* Đặt kích thước tối thiểu để bảng không bị ép nhỏ quá trên mobile */
}


.invoice-table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Cho phép cuộn mượt trên iOS */
}

.invoice-table-responsive table {
    width: 100%;
    min-width: 600px; /* Đặt kích thước tối thiểu để bảng không bị ép nhỏ quá trên mobile */
}

/* Media queries cho mobile */
@media (max-width: 768px) {
    .invoice-table-responsive {
        margin-bottom: 15px; /* Thêm khoảng cách giữa bảng và phần khác */
    }

    /* Responsive cho các thành phần khác ngoài bảng */
    .invoice-content-responsive {
        width: 100%;
        padding: 0 10px; /* Đảm bảo nội dung bên ngoài bảng giữ tính responsive */
    }
}


/* Styling cho phân trang (pagination) */
.pagination {
    display: flex;
    justify-content: center; /* Căn giữa các nút phân trang */
    padding: 10px 0;
    margin: 0;
    list-style: none;
}

.pagination .page-item {
    margin: 0 5px; /* Khoảng cách giữa các nút phân trang */
}

.pagination .page-item .page-link {
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid #20c997;
    color: #20c997;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.pagination .page-item .page-link:hover {
    background-color: #20c997;
    color: white;
}

.pagination .page-item.active .page-link {
    background-color: #20c997;
    color: white;
    border-color: #20c997;
    cursor: default;
}

.pagination .page-item.disabled .page-link {
    color: #6c757d;
    pointer-events: none;
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

/* Responsive pagination */
@media (max-width: 768px) {
    .pagination {
        flex-wrap: wrap; /* Đảm bảo phân trang sẽ xuống dòng khi không đủ không gian */
        gap: 10px; /* Thêm khoảng cách giữa các hàng */
    }

    .pagination .page-item {
        margin: 5px 2px; /* Giảm khoảng cách giữa các nút phân trang trên mobile */
    }
}

/* Ghi đè hoàn toàn kiểu mặc định của input */
input[type="number"] {
    font-family: 'Varela Round', sans-serif; /* Cài đặt font như body */
    background-color: #fff; /* Đặt nền trắng cho input */
    border: 1px solid #ccc; /* Thay đổi viền input */
    border-radius: 4px; /* Bo góc nhẹ cho input */
    padding: 10px; /* Thêm khoảng cách padding */
    width: 50%; /* Chiều rộng 100% để chiếm hết không gian */
    box-sizing: border-box; /* Đảm bảo padding không làm tăng kích thước của input */
    font-size: 1rem; /* Cài đặt kích thước chữ */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Thêm hiệu ứng khi hover/focus */
    appearance: none; /* Xóa kiểu dáng mặc định của trình duyệt */
    -moz-appearance: textfield; /* Firefox */
    -webkit-appearance: none; /* Chrome, Safari, Opera */
}

}

/* Xóa các nút tăng/giảm cho input number trên các trình duyệt */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield; /* Xóa nút tăng/giảm của Firefox */
}

/* Hiệu ứng khi hover và focus vào ô nhập liệu */
input[type="number"]:focus {
    border-color: #20c997; /* Đổi màu viền khi focus */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Hiệu ứng đổ bóng khi focus */
    outline: none; /* Xóa outline mặc định của trình duyệt */
}

/* Styling chung cho form */
.form-group label {
    font-size: 1.1rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 10px;
} 


/* Định dạng chung cho input text */
input[type="text"] {
    font-family: 'Varela Round', sans-serif;
    background-color: #fff; /* Nền trắng cho ô nhập liệu */
    border: 1px solid #ccc; /* Viền nhẹ */
    border-radius: 4px; /* Bo tròn nhẹ các góc */
    padding: 10px; /* Khoảng cách giữa nội dung và viền */
    width: auto; /* Đảm bảo chiều rộng đầy đủ */
    box-sizing: border-box; /* Đảm bảo padding không làm tăng kích thước của input */
    font-size: 1rem; /* Cài đặt kích thước chữ */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Hiệu ứng khi hover/focus */
    width: 50%; /* Chiều rộng 100% để chiếm hết không gian */
}

/* Định dạng riêng cho input readonly */
input[readonly] {
    background-color: #f8f9fa; /* Màu nền xám nhạt để phân biệt */
    border-color: #ccc; /* Viền màu nhạt */
    color: #6c757d; /* Màu chữ xám nhẹ */
    cursor: not-allowed; /* Đổi con trỏ chuột để biểu thị không thể chỉnh sửa */
}

/* Hiệu ứng khi hover hoặc focus vào input readonly */
input[readonly]:hover,
input[readonly]:focus {
    border-color: #ccc; /* Không thay đổi viền khi focus */
    box-shadow: none; /* Không có đổ bóng khi hover/focus */
}

/* Phong cách chung cho form tuỳ chỉnh VPS */
#customFields {
    background-color: #f9f9f9;  /* Màu nền nhẹ cho vùng tuỳ chỉnh */
    padding: 20px;
    border-radius: 8px;  /* Bo tròn các góc */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  /* Hiệu ứng bóng đổ nhẹ */
    margin-top: 20px;
	padding-right: 35px;
}

/* Định dạng tiêu đề */
#customFields h5 {
    font-size: 1.5rem;
    font-weight: bold;
    color: #20c997;  /* Màu xanh nổi bật cho tiêu đề */
    margin-bottom: 20px;
}

/* Styling cho các nhãn và ô nhập liệu */
#customFields .form-group label {
    font-size: 1.1rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 5px;
}

#customFields .form-group input {
    width: 100%;
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #ccc;  /* Viền nhẹ cho ô nhập liệu */
    border-radius: 4px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    appearance: none; /* Xóa style mặc định của trình duyệt */
}

/* Tùy chỉnh cho input số */
#customFields .form-group input[type="number"] {
    -moz-appearance: textfield; /* Xóa các nút tăng giảm của Firefox */
}

/* Ẩn nút tăng giảm của input number cho Chrome, Safari, Edge, Opera */
#customFields .form-group input[type="number"]::-webkit-outer-spin-button,
#customFields .form-group input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Hiệu ứng khi hover và focus vào ô nhập liệu */
#customFields .form-group input:focus {
    border-color: #20c997;  /* Đổi màu viền khi focus */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
    outline: none;
}

/* Định dạng cho phần hiển thị tổng giá */
#priceDisplay {
    font-size: 1.2rem;
    font-weight: bold;
    color: #28a745;  /* Màu xanh cho tổng giá */
    margin-top: 15px;
}

/* Hiệu ứng hover cho tổng giá */
#priceDisplay:hover {
    color: #218838;  /* Đổi màu khi hover */
    text-decoration: underline;
}

/* Khoảng cách giữa các trường trong form */
#customFields .form-group {
    margin-bottom: 20px;  /* Tạo khoảng cách giữa các form-group */
}

/* Responsive cho mobile */
@media (max-width: 768px) {
    #customFields {
        padding: 5px;
		padding-right: 25px;
    }

    #customFields h5 {
        font-size: 1.25rem;
    }

    #priceDisplay {
        font-size: 1rem;
    }
}
/* Phong cách chung cho nút Place Order */
#submitOrder {
    display: inline-block;
    width: 100%;  /* Đảm bảo nút chiếm toàn bộ chiều rộng */
    padding: 15px 20px;  /* Khoảng cách bên trong nút */
    font-size: 1.2rem;  /* Tăng kích thước chữ */
    font-weight: bold;  /* Đậm chữ cho nổi bật */
    background-color: #20c997;  /* Màu xanh cho nút */
    color: white;  /* Màu chữ trắng */
    border: none;  /* Loại bỏ viền mặc định */
    border-radius: 8px;  /* Bo tròn góc nút */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;  /* Hiệu ứng mượt mà */
    cursor: pointer;  /* Đổi con trỏ thành pointer khi hover */
    text-align: center;
}

/* Hiệu ứng khi hover qua nút */
#submitOrder:hover {
    background-color: #00805a;  /* Màu xanh đậm hơn khi hover */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  /* Bóng đổ nhẹ khi hover */
}

/* Hiệu ứng khi nhấn vào nút */
#submitOrder:active {
    background-color: #004085;  /* Màu xanh đậm hơn khi click */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);  /* Hiệu ứng bóng đổ khi click */
    transform: translateY(2px);  /* Hiệu ứng nhấn xuống */
}

/* Responsive cho mobile */
@media (max-width: 768px) {
    #submitOrder {
        font-size: 1rem;  /* Điều chỉnh kích thước chữ nhỏ hơn trên mobile */
        padding: 12px 15px;  /* Giảm padding trên mobile */
    }
}

#desktopToggleMenu {
    position: absolute;
    bottom: 5px;  /* Đặt nút ở dưới cùng */
    right: 20px;  /* Căn lề phải */
    background-color: #20c997;  /* Màu nền (xanh dương) */
    color: white;  /* Màu của icon */
    border: none;  /* Xóa viền mặc định */
    padding: 10px 15px;  /* Padding cho nút */
    border-radius: 50%;  /* Làm nút tròn */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  /* Đổ bóng cho nút */
    cursor: pointer;  /* Thay đổi con trỏ thành pointer khi hover */
    transition: background-color 0.3s ease, transform 0.3s ease;  /* Hiệu ứng chuyển mượt mà */
}

#desktopToggleMenu:hover {
    background-color: #00805a;  /* Thay đổi màu nền khi hover */
    transform: scale(1.1);  /* Phóng to nhẹ nút khi hover */
}

#desktopToggleMenu i {
    font-size: 1.5rem;  /* Tăng kích thước icon */
}
/* Tạo một custom spinner */
/* Spinner container */
.data-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
}

/* Network lines */
.network-loader {
    position: relative;
    width: 100px;
    height: 100px;
}

.network-lines {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: space-between;
}

.line {
    width: 5px;
    height: 100%;
    background-color: #00d4ff;
    animation: pulse 1.2s infinite ease-in-out;
}

.line:nth-child(2) {
    animation-delay: 0.2s;
}

.line:nth-child(3) {
    animation-delay: 0.4s;
}

.line:nth-child(4) {
    animation-delay: 0.6s;
}

/* Circle */
.data-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    background-color: #00d4ff;
    border-radius: 50%;
    animation: rotate 1.2s linear infinite;
}

/* Animations */
@keyframes pulse {
    0%, 100% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(0.5);
    }
}

@keyframes rotate {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
/* Layout chia 2 cột cho thông tin thanh toán */
.payment-details-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 20px;
}

.payment-details-column {
    width: 48%; /* Chiếm 48% để tạo khoảng cách giữa hai cột */
    box-sizing: border-box; /* Đảm bảo padding không ảnh hưởng đến chiều rộng */
}

/* Căn phải cho cột trạng thái */
.payment-details-column.text-right {
    text-align: left;
}

/* Đảm bảo hiển thị tốt trên màn hình nhỏ */
@media (max-width: 768px) {
    .payment-details-column {
        width: 100%; /* Hiển thị 100% chiều rộng khi trên màn hình nhỏ */
        margin-bottom: 15px;
    }
}

/* Styling trạng thái thanh toán */
.status-text.text-success {
    color: green;
	font-weight: bold;
}

.status-text.text-danger {
    color: red;
}

/* Layout chia 2 cột cho thông tin dịch vụ */
.service-details-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 20px;
}

.service-details-column {
    width: 48%; /* Chiếm 48% để tạo khoảng cách giữa hai cột */
    box-sizing: border-box; /* Đảm bảo padding không ảnh hưởng đến chiều rộng */
}

/* Đảm bảo hiển thị tốt trên màn hình nhỏ */
@media (max-width: 768px) {
    .service-details-column {
        width: 100%; /* Hiển thị 100% chiều rộng khi trên màn hình nhỏ */
        margin-bottom: 15px;
    }
}

/* Invoice container styling */
.invoice-container {
    max-width: auto;
    margin: 0 auto;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

/* Invoice card header */
.invoice-header {
    background-color: #20c997;
    color: white;
    padding: 15px;
    font-size: 1.4rem;
    border-radius: 5px 5px 0 0;
    text-align: left;
	font-weight: bold;
}

/* Section headers */
.section-header {
    font-size: 1.2rem;
    font-weight: bold;
    color: #20c997;
    margin-top: 20px;
    border-bottom: 2px solid #20c997;
    padding-bottom: 5px;
}

/* Đảm bảo rằng phần Trạng Thái hiển thị gọn gàng và nổi bật */
.status-text {
    font-size: 1.5rem;
    font-weight: bold;
    margin-top: 0.5rem;
}
/* Tùy chỉnh thêm khoảng cách giữa hai cột trái phải */
/* Đảm bảo các cột không kéo dài */
.d-flex .justify-content-between > div {
    flex: 0 0 auto;
	padding-right: 15%;
}

/* Button back styling */
.btn-back {
    text-decoration: none;
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 1rem;
}

/* Tab page invoice & transactions Styles */
.tab-container {
    display: flex;
    border-bottom: 2px solid #20c997;
    margin-bottom: 20px;
}

.tab-container .tab {
    padding: 10px 20px;
    cursor: pointer;
    text-decoration: none;
    color: #555;
    border: 1px solid transparent;
    border-bottom: none;
    transition: background-color 0.3s, color 0.3s;
    margin-right: 5px; /* Khoảng cách giữa các tab */
    border-radius: 5px 5px 0 0; /* Bo góc trên cho đẹp */
}

.tab-container .tab:hover {
    background-color: #f1f1f1;
    color: #000;
}

.tab-container .tab.active {
    border: 1px solid #ddd;
    border-bottom: 2px solid #20c997;
    background-color: #20c997;
    color: #fff;
    font-weight: bold;
}

/* Table styling */
.custom-table {
    margin-top: 15px;
}

.custom-table th {
    background-color: #20c997;
    color: white;
    text-align: center;
}
 
.custom-table td {
    text-align: center;
}

/* Add shadow to card */
.shadow-sm {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
/* Tab navigation styling */
.tab-navigation {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.tab-link {
    background-color: #f1f1f1;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    margin-right: 5px;
    font-size: 16px;
}

.tab-link.active {
    background-color: #20c997;
    color: white;
}

.tab-link:hover {
    background-color: #ddd;
}

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

.tab-content.active {
    display: block;
}
/* Định dạng cho thẻ login card */
.login-card {
    background-color: #ffffff;
    border-radius: 8px; /* Bo tròn góc */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Hiệu ứng đổ bóng */
    max-width: 100%; /* Giới hạn chiều rộng */
    width: 100%;
    padding: 20px;
}
/* Định dạng cho input trong form */
.form-control {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-control:focus {
    border-color: #20c997;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

/* Đảm bảo label hiển thị phía trên input */
.form-label {
    display: block;
    margin-bottom: 0.5rem; /* Thêm khoảng cách dưới nhãn */
    font-size: 1.1rem; /* Tăng kích thước chữ nếu cần */
    font-weight: bold; /* In đậm nhãn */
    color: #333; /* Đặt màu chữ */
}


/* Thêm khoảng cách giữa các form-group */
.form-group {
    margin-bottom: 20px;
}

/* Định dạng cho thẻ đăng ký */
.register-card {
    background-color: #ffffff;
    border-radius: 8px; /* Bo tròn góc */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Hiệu ứng đổ bóng */
    max-width: auto; /* Giới hạn chiều rộng */
    width: 100%;
    padding: 20px;
}

/* Định nghĩa chung cho các ô nhập liệu tùy chỉnh */
.custom-input {
    width: 100%; /* Đảm bảo các ô nhập chiếm toàn bộ chiều rộng của cột */
    max-width: 500px; /* Giới hạn chiều rộng tối đa nếu cần */
    padding: 12px; /* Thêm khoảng cách trong cho các ô nhập */
    font-size: 1rem; /* Điều chỉnh kích thước chữ */
    border: 1px solid #ccc; /* Đường viền mỏng */
    border-radius: 4px; /* Bo góc các ô nhập liệu */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Hiệu ứng chuyển tiếp khi focus */
}

/* Hiệu ứng khi người dùng focus vào ô nhập */
.custom-input:focus {
    border-color: #20c997;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}


/* Top-bar mặc định khi sidebar mở rộng */
.top-bar {
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: calc(100% - 250px); /* Căn chỉnh theo sidebar rộng */
    margin-left: 250px; /* Căn bên cạnh sidebar khi chưa thu nhỏ */
    padding: 10px 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    transition: margin-left 0.3s ease, width 0.3s ease; /* Hiệu ứng mượt */
    z-index: 1000;
}

/* Khi sidebar thu nhỏ */
#sidebar.collapsed ~ .top-bar {
    margin-left: 80px; /* Điều chỉnh vị trí khi sidebar thu nhỏ */
    width: calc(100% - 80px); /* Căn chỉnh chiều rộng khi sidebar thu nhỏ */
}

/* Nút bên trong top-bar */
.left-buttons, .right-buttons {
    display: flex;
    gap: 10px; /* Khoảng cách giữa các nút */
}

.top-btn {
    background-color: white;
    color: #20c997;
    border: 1px solid #20c997;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.top-btn:hover {
    background-color: #20c997;
    color: white;
}

/* Phần nội dung không bị top-bar che khuất */
.main-content {
    margin-top: 80px; /* Khoảng cách tránh bị che bởi top-bar */
    padding: 20px;
    transition: margin-left 0.3s ease; /* Hiệu ứng co dãn khi sidebar thu nhỏ */
}
/* Ẩn top-bar trên mobile (màn hình dưới 768px) */
@media (max-width: 767.98px) {
    .top-bar {
        display: none;
    }
}

#notification-area {
    position: fixed;
    bottom: 70px; /* Điều chỉnh để không che khuất các phần tử khác */
    right: 20px;
    z-index: 1000;
    width: auto;
}

@media (max-width: 768px) {
    #notification-area {
        bottom: 90px; /* Điều chỉnh trên thiết bị di động */
        width: 90%;
        left: 5%;
    }
}


.alert {
    padding: 1rem;
    background-color: #00805a;
    color: white;
    border-radius: 8px; /* Bo tròn góc */
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Thêm bóng đổ cho nổi bật */
    margin-top: 10px; /* Khoảng cách giữa các thông báo nếu có nhiều */
}
/* Container for the transfer information and QR code */
/* Modal container */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    justify-content: center;
    align-items: center;
    overflow: auto;
}

/* Modal content */
.modal-content {
    background-color: white;
    padding: 20px;
    margin: auto;
    border-radius: 10px;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: left;
}

/* Close button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}

/* Full width button */
.btn-full-width {
    width: 100%;
}

/* Center QR Code */
#QR_image {
    display: block;
    margin: 20px auto;
}

.custom-button-container form {
    margin-bottom: 2px; /* Khoảng cách dưới nút "Thanh Toán Bằng Số Dư" */
}

.custom-margin-top {
    margin-top: 2px; /* Khoảng cách trên nút "Thanh Toán Bằng Chuyển Khoản Ngân Hàng" */
}

.textarea-medium {
    width: 48.3%; /* Đặt chiều rộng 100% của container cha */
    height: 100px; /* Đặt chiều cao tùy chỉnh */
    resize: vertical; /* Cho phép người dùng thay đổi chiều cao */
}

.textarea-large {
    width: 99%; /* Đặt chiều rộng 100% của container cha */
    height: 200px; /* Đặt chiều cao tùy chỉnh */
    resize: vertical; /* Cho phép người dùng thay đổi chiều cao */
}