:root {

    /* =============================================
       NỀN (BACKGROUND)
    ============================================= */

    /* Nền trang chính (body) — màu tối bao phủ toàn bộ trang */
    --bg-page:          #0f172a;

    /* Nền header trên cùng, sidebar trái, card, modal đăng nhập/đăng ký, marquee thông báo */
    --bg-panel:         #1e293b;

    /* Nền tối nhất — ô input, select, submenu khi mở, box thông tin user góc phải */
    --bg-deep:          #020617;

    /* Nền item trong lịch sử khi hover chuột vào */
    --bg-hover-dark:    #020617;

    /* Nền menu item khi hover, menu item đang active, card-header, submenu-item khi hover */
    --bg-hover-menu:    #334155;

    /* Nền submenu item đang được chọn (trang hiện tại đang xem) */
    --bg-submenu-active:#2563eb;

    /* Nền toàn bộ bảng #donhangTable và #proxyTable */
    --bg-table:         #162133;

    /* Nền hàng tiêu đề (thead th) của bảng đơn hàng */
    --bg-table-head:    #22324a;

    /* Nền từng dòng dữ liệu (tbody td) của bảng đơn hàng */
    --bg-table-row:     #182435;

    /* Nền dòng bảng khi di chuột vào (hover) */
    --bg-table-hover:   #24344d;


    /* =============================================
       CHỮ (TEXT)
    ============================================= */

    /* Chữ trắng chính — tiêu đề card, chữ body, chữ trong input, thead bảng */
    --text-main:        #ffffff;

    /* Chữ sáng phụ — dữ liệu trong tbody bảng */
    --text-light:       #f8fafc;

    /* Chữ mờ vừa — history item, submenu item, nội dung SweetAlert2 popup */
    --text-muted:       #e2e8f0;

    /* Chữ nhãn label trong form (dòng chữ nhỏ trên mỗi ô input) */
    --text-label:       #cbd5f5;

    /* Chữ phụ nhỏ xám — dòng sub trong history item, chú thích chiết khấu admin */
    --text-sub:         #94a3b8;

    /* Chữ xám trung tính — chú thích chiết khấu trong trang admin */
    --text-gray:        #787474;


    /* =============================================
       VIỀN (BORDER)
    ============================================= */

    /* Viền chính — sidebar phải, card, ô input/select, submenu, user dropdown, history item */
    --border-main:      #334155;

    /* Viền ô td/th trong bảng đơn hàng và proxy */
    --border-table:     #2b3a55;

    /* Viền riêng cho hàng tiêu đề thead của bảng */
    --border-table-head:#31415d;

    /* Đường viền trái màu xanh của menu item đang active (border-left) */
    --border-active:    #3b82f6;

    /* Viền ô input/select khi đang được focus (click vào ô nhập liệu) */
    --border-focus:     #3b82f6;


    /* =============================================
       MÀU NHẤN / TRẠNG THÁI (ACCENT / STATUS)
    ============================================= */

    /* Xanh dương chính — nút Bootstrap btn-primary (Đăng nhập, Đăng ký, Mua...) */
    --color-primary:      #3b82f6;

    /* Xanh đậm — submenu item active, trạng thái đơn hàng PHP */
    --color-primary-dark: #2563eb;

    /* Xanh đậm nhất — dùng trong các file PHP với inline style */
    --color-primary-deep: #1d4ed8;

    /* Xanh lá — số điện thoại trong history item, màu kết thúc loading bar */
    --color-success:      #22c55e;

    /* Xanh lá đậm — lợi nhuận trang admin */
    --color-success-dark: #2f8f1e;

    /* Đỏ hồng — giá tiền (cột price) trong history item */
    --color-danger:       #f43f5e;

    /* Đỏ nhạt — chữ nút Đăng xuất trong user dropdown menu */
    --color-danger-alt:   #f87171;

    /* Đỏ — số proxy còn lại, lỗi cảnh báo trong PHP inline */
    --color-danger-php:   #FF3333;

    /* Hồng — giá tiền trong các trang mua proxy */
    --color-pink:         #f472b6;

    /* Hồng sáng — thống kê tài khoản trong trang admin */
    --color-pink-bright:  #FF3399;

    /* Vàng sáng — ghi chú highlight (thẻ <i>) trong trang mua proxy */
    --color-yellow:       #FFFF66;

    /* Xanh nhạt — màu chữ chạy marquee thông báo */
    --color-info:         #60a5fa;

    /* Xanh nhạt hơn — màu chữ badge thời gian trong history item */
    --color-info-light:   #38bdf8;

    /* Xanh cyan — tham số API, link mẫu trong tài liệu API */
    --color-cyan:         #33CCFF;

    /* Xanh teal — ghi chú idproxy, time trong tài liệu API */
    --color-teal:         #1aa18f;


    /* =============================================
       LOADING BAR (thanh tiến trình trên cùng trang)
    ============================================= */

    /* Màu bắt đầu (bên trái) của thanh loading #pageLoaderBar */
    --loader-color-start: #3b82f6;

    /* Màu kết thúc (bên phải) của thanh loading #pageLoaderBar */
    --loader-color-end:   #22c55e;


    /* =============================================
       SHADOW / OVERLAY
    ============================================= */

    /* Lớp nền tối phủ toàn màn hình khi mở modal đăng nhập / đăng ký */
    --shadow-modal:       rgba(0, 0, 0, 0.6);

    /* Bóng đổ (box-shadow) bên dưới submenu khi mở ra */
    --shadow-submenu:     rgba(0, 0, 0, 0.6);

    /* Nền track của thanh loading (phần chưa load — mờ trắng) */
    --bg-loader-track:    rgba(255, 255, 255, 0.08);

}


/*
=======================================================
  ÁP DỤNG BIẾN — style.css đã dùng var(--...) hết rồi
  Chỉ cần sửa các giá trị trong :root ở trên là xong.
=======================================================
*/

body {
    background: var(--bg-page);
    color: var(--text-main);
}

.header,
.sidebar,
.card,
.modal-box,
.swal2-popup,
.marquee-box,
.history-item,
.user-dropdown,
.card-header {
    background: var(--bg-panel);
}

.sidebar {
    border-right-color: var(--border-main);
}

.menu-item:hover,
.menu-item.active,
.sidebar .menu-item.active,
.submenu-item:hover,
.user-item:hover {
    background: var(--bg-hover-menu);
}

.sidebar .menu-item.active {
    border-left-color: var(--border-active);
}

.submenu.show {
    background: var(--bg-deep);
    border-color: var(--border-main);
}

.submenu-item {
    background: var(--bg-deep);
    color: var(--text-muted);
}

.submenu-item.active {
    background: var(--bg-submenu-active);
}

.card {
    border-color: var(--border-main);
}

.card-header {
    border-bottom-color: var(--border-main);
    color: var(--text-main);
}

.card-body {
    color: var(--text-main);
}

.card-body label {
    color: var(--text-label);
}

.card-body input,
.card-body select {
    background: var(--bg-deep) !important;
    color: var(--text-main) !important;
    border-color: var(--border-main) !important;
}

.card-body input:focus,
.card-body select:focus {
    background: var(--bg-deep) !important;
    color: var(--text-main) !important;
    border-color: var(--border-focus) !important;
}

.card-body select option {
    background: var(--bg-deep);
    color: var(--text-main);
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--bg-deep) inset !important;
    -webkit-text-fill-color: var(--text-main) !important;
}

.marquee-box {
    border-bottom-color: var(--border-main);
}

.marquee-text {
    color: var(--color-info);
}

.history-item {
    border-bottom-color: var(--border-main);
    color: var(--text-muted);
}

.history-item:hover {
    background: var(--bg-hover-dark);
}

.history-item .phone {
    color: var(--color-success);
}

.history-item .price {
    color: var(--color-danger);
}

.history-item .sub {
    color: var(--text-sub);
}

.history-item .time {
    background: var(--bg-panel);
    color: var(--color-info-light);
    border-color: var(--border-main);
}

.user-info {
    background: var(--bg-deep);
    border-color: var(--border-main);
}

.user-dropdown {
    border-color: var(--border-main);
}

.user-item.logout {
    color: var(--color-danger-alt);
}

.swal2-popup {
    background: var(--bg-panel) !important;
    color: var(--text-main) !important;
}

.swal2-title {
    color: var(--text-main) !important;
}

.swal2-html-container {
    color: var(--text-muted) !important;
}

#customSearch {
    background: var(--bg-deep);
    color: var(--text-main);
    border-color: var(--border-main);
}

#donhangTable {
    background: var(--bg-table) !important;
    border-color: var(--border-table) !important;
    color: var(--text-light) !important;
}

#donhangTable thead th {
    background: var(--bg-table-head) !important;
    color: var(--text-main) !important;
    border-color: var(--border-table-head) !important;
}

#donhangTable tbody td {
    background: var(--bg-table-row) !important;
    color: var(--text-light) !important;
    border-color: var(--border-table) !important;
}

#donhangTable tbody tr:hover td {
    background: var(--bg-table-hover) !important;
}

#proxyTable {
    background: var(--bg-table) !important;
    border-color: var(--border-table) !important;
    color: var(--text-light) !important;
}

#pageLoader {
    background: var(--bg-loader-track);
}

#pageLoaderBar {
    background: linear-gradient(90deg, var(--loader-color-start), var(--loader-color-end));
}

#pageLoaderText {
    color: var(--text-main);
    background: rgba(15, 23, 42, 0.85);
}

.table-scroll-mobile::-webkit-scrollbar-thumb {
    background: var(--bg-hover-menu);
}

.table-scroll-mobile::-webkit-scrollbar-track {
    background: var(--bg-page);
}