/* Khung chứa tổng thể (giống cấu trúc .qiContainer của mẫu) */
.OnlineCounter {
    width: 100%;
    max-width: 320px;
    margin: 10px 0;
    font-family: Arial, Helvetica, sans-serif;
}

/* ---------------------------------------------------
   1. PHẦN TIÊU ĐỀ (Giống .qihome_tieudebg & .qihome_tieude)
--------------------------------------------------- */
.OnlineCounter .Header {
    background-image: linear-gradient(to top, #dddddd, #ffffff);
    padding: 7px 10px;
    text-align: left;
    border-bottom: 2px solid #e20000; /* Đường viền đỏ dưới tiêu đề */
}

/* Ẩn tiêu đề cũ bị lỗi mã hóa font và ép hiển thị chữ chuẩn */
.OnlineCounter .Header span { font-size: 0; }
.OnlineCounter .Header span::before {
    content: "THỐNG KÊ TRUY CẬP";
    color: #e20000;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 15px;
}

/* ---------------------------------------------------
   2. KHUNG DANH SÁCH (Giống .qiContainer_border & table .thongke)
--------------------------------------------------- */
.OnlineCounter ul.OnlineContainer {
    border: 1px solid #dcdcdc;
    border-top: none;
    list-style: none;
    margin: 0;
    padding: 0;
    background: #fff;
    display: flex;
    flex-direction: column; /* Sử dụng Flexbox để đảo thứ tự dòng hiển thị */
}

/* Định dạng từng dòng (Giống cấu trúc thẻ tr của mẫu) */
.OnlineCounter li {
    display: flex;
    align-items: center;
    height: 36px;
    padding: 6px 10px;
    margin: 0;
    border-bottom: 1px solid #f1f1f1;
}

/* Tô màu nền xen kẽ các dòng (Giống .thongke tr:nth-child(2n+1)) */
.OnlineCounter li:nth-child(odd) {
    background-color: #fafafa;
}

/* ---------------------------------------------------
   3. CỘT NHÃN CHỮ (Giống .thss width: 55%) & CÀI ĐẶT ICON
--------------------------------------------------- */
.OnlineCounter li span:first-child {
    width: 55%;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    line-height: 30px;
    
    /* Thiết lập không gian hiển thị icon ở phía bên trái */
    padding-left: 24px; 
    background-repeat: no-repeat;
    background-position: left center;
}

/* Khớp các link ảnh icon cho từng danh mục tương ứng */
/* Dòng 1: Đang online (Dùng icon 1.jpg) */
.OnlineCounter li:nth-child(1) span:first-child {
    background-image: url('https://storage-vnportal.vnpt.vn/smeg2/4147/Logo/1.jpg');
}
/* Dòng 2: Trong ngày / Hôm nay (Dùng icon 1.jpg) */
.OnlineCounter li:nth-child(2) span:first-child {
    background-image: url('https://storage-vnportal.vnpt.vn/smeg2/4147/Logo/1.jpg');
}
/* Dòng 3: Trong tuần (Dùng icon 2.jpg) */
.OnlineCounter li:nth-child(3) span:first-child {
    background-image: url('https://storage-vnportal.vnpt.vn/smeg2/4147/Logo/2.jpg');
}
/* Dòng 4: Trong tháng (Dùng icon 3.jpg) */
.OnlineCounter li:nth-child(4) span:first-child {
    background-image: url('https://storage-vnportal.vnpt.vn/smeg2/4147/Logo/3.jpg');
}

/* ---------------------------------------------------
   4. CỘT SỐ LIỆU THƯỜNG (Của các mục ngày, tuần, tháng...)
--------------------------------------------------- */
.OnlineCounter li span:last-child {
    width: 45%;
    font-size: 14px;
    font-weight: normal;
    color: #333;
    text-align: left;
    font-family: Arial, sans-serif;
    text-shadow: none;
}

/* ---------------------------------------------------
   5. XỬ LÝ ĐẶC BIỆT: DÒNG TỔNG TRUY CẬP LÊN TRÊN CÙNG
--------------------------------------------------- */
/* Dùng order: -1 để ép dòng cuối cùng nhảy lên đầu danh sách */
.OnlineCounter li:last-child {
    order: -1; 
    justify-content: center;
    background-color: #fff;
    padding: 12px 0;
    height: auto;
}

/* Ẩn chữ "Tất cả:" của dòng cuối giống hệt giao diện mẫu */
.OnlineCounter li:last-child span:first-child {
    display: none;
}

/* Định dạng khối số Tổng truy cập kèm ảnh nền bgtruycapall.png */
.OnlineCounter li span.TotalOnline {
    width: auto;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    display: inline-block;
    
    /* Tạo khoảng cách thưa giữa các con số để khớp với ô bóng nhỏ của ảnh nền */
    letter-spacing: 5px; 
    padding: 3px 8px 3px 12px;
    
    /* Chèn hình ảnh bóng số của bạn */
    background-color: transparent;
    background-image: url('https://storage-vnportal.vnpt.vn/smeg2/4147/Logo/bgtruycapall.png');
    background-repeat: repeat-x; 
    background-position: center;
    height: 27px;
    line-height: 27px;
}