html, body {
    height: 100%;
}

.globalWidth {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.globalPadding {
    padding: 15px;
}

.globalPaddingX {
    padding-left: 15px;
    padding-right: 15px;
}

body .globalWidth {
    height: 100%;
}

.globalContainer {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.globalMain {
    flex: 1;
    overflow-y: scroll;
    position: relative;
    -webkit-overflow-scrolling: touch;
}

.globalMain::-webkit-scrollbar{
    display: none;
}


.globalHead {
    background-color: #F5F5F5;
    padding: 7.5px;
    padding-bottom: 7px;
}

.globalHead .logo {
    display: block;
    float: left;
    height: 35px;
    margin-left: 1em;
}

.globalHead .logo img {
    height: 100%;
}

.globalHead .search {
    width: 54%;
    margin-left: 113px;
    position: relative;
    border-radius: 7.5px;
    background-color: #ffffff;
    height: 35px;
}

.globalHead form {
    height: 100%;
}

.globalHead input, .globalHead span {
    width: 100%;
    height: 100%;
    background: none;
    border: none;
    padding: 2.5px 7.5px;
    line-height: 35px;
    font-size: 15px;
}

.globalHead button {
    position: absolute;
    border: none;
    background: none;
    color: #ccc;
    right: 7.5px;
    top: 50%;
    height: 30px;
    line-height: 30px;
    padding: 0 5px;
    margin-top: -15px;
    font-size: 20px;
}

.globalTop {
    border-bottom: 1px solid #ccc;
    background-color: #ffffff;
    position: relative;
}

.globalTopShade {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .5);
    display: none;
}

.globalTopLeft {
    float: left;
}

.globalTopRight {
    float: right;
}

.globalTopLeft,
.globalTopRight {
    width: 50px;
}

.globalTopLeft,
.globalTopRight,
.globalTopCenter {
    position: relative;
    height: 44px;
}

.globalTopBack {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 24px;
    line-height: 1.25;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.globalTopSearchIcon {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 20px;
    line-height: 1.25;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.globalTopButton {
    border: none;
    background: none;
    color: #ff9b24;
    font-size: 15px;
    height: 100%;
    width: 100%;
    padding: 0;
}

.globalTopCenter {
    margin: auto 50px;
}

.globalTopTitle {
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    font-weight: bold;
    line-height: 44px;
}

.globalTopGameType {
    height: 100%;
    overflow: hidden;
    text-align: center;
}

.globalTopGameType li {
    display: inline-block;
    /*max-width: 25%;*/
    margin: 0 0%;
    height: 100%;
    line-height: 42px;
    text-align: center;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.globalTopGameType li.active {
    border-bottom: 2px solid #FE8A1A;
}

.globalTopGameType li a {
    display: block;
    padding-left: 1em;
    padding-right: 1em;
    font-weight: bold;
}

.globalTopFilterBtn {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 20px;
    line-height: 1.25;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all .25s;
}

.globalTopFilterBtn.active {
    color: #fe8a1a;
}

.globalBottom ul {
    background-color: #ffffff;
    border-top: 1px solid #ccc;
    padding: 10px;
}

.globalBottom li {
    float: left;
    width: 25%;
    text-align: center;
}

.globalBottom li a {
    display: block;
}

.globalBottom li:hover,
.globalBottom li:hover a,
.globalBottom li.active,
.globalBottom li.active a {
    color: #F5842D;
}

.globalBottom i.fa {
    font-size: 24px;
    line-height: 1.25;
}

.globalBottom p {
    margin-top: 5px;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 414px) {
    .globalBottom ul {
        padding: 7.5px 10px;
    }

    .globalBottom i.fa {
        font-size: 22px;
    }

    .globalBottom p {
        font-size: 13px;
    }
}

.globalLocation {
    color: #494949;
    padding: 5px 5px 10px 5px;
    font-size: 13px;
}

.globalLocation span {
    font-size: 12px;
}

.gameList ul {
    margin-top: -7.5px;
}

.gameList li {
    padding-top: 7.5px;
    padding-bottom: 7.5px;
    border-bottom: 1px solid #ccc;
}

.gameList .img {
    width: 55px;
    height: 55px;
    float: left;
}

.gameList .img img {
    display: block;
    width: 100%;
}

.gameList .info {
    margin-left: 65px;
    font-size: 13px;
    color: #424242;
}

.gameList .name {
    font-size: 14px;
    height: 19px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gameList .name span {
    background-color: #ff2501;
    color: #ffffff;
    border-radius: 5px;
    padding: 0 .35em;
    margin-left: .5em;
    font-size: 12px;
}

.gameList .service span {
    display: block;
    float: left;
    margin-top: 5px;
    margin-right: 5px;
    color: #ff9b24;
    border-radius: 5px;
    border: 1px solid #D8D8D8;
    font-size: 13px;
    padding: 1px 5px;
}

.gameList .service span.already {
    color: #d8d8d8;
}

.gameList .text {
    height: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gameList .desc {
    height: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #FF9B24;
}

.gameList .down {
    float: right;
    height: 55px;
    position: relative;
    width: 85px;
}

.gameList .down a {
	border-radius: 10px;
    display: block;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ff9b24;
    color: #ffffff;
    padding: .35em 0;
    text-align: center;
}

.scrollLoadPlac {
    display: none;
}

.scrollLoadPlac:after {
    display: block;
    text-align: center;
    padding: .5em;
    color: #ccc;
    font-size: 13px;
}

.scrollLoadPlac.load {
    display: block;
}

.scrollLoadPlac.load:after {
    content: '加载中。。。';
}

.scrollLoadPlac.noMore {
    display: block;
}

.scrollLoadPlac.noMore:after {
    content: '没有更多了。。。';
}

.globalTitle {
    margin-bottom: 15px;
}

.globalTitle li {
    float: left;
    font-size: 16px;
    height: 30px;
    line-height: 1.25;
    margin-right: 1em;
}

.globalTitle li.active {
    color: #fe8a1a;
    border-bottom: 1px solid #fe8a1a;
}

.globalTitleExt {
    float: right;
}

.globalTitleExt p {
    float: left;
}

.globalTitleExt .fa {
    margin-left: .5em;
}

.globalWidget {
    margin-top: 12.5px;
}

.gameImgType {
    display: block;
    position: relative;
}

.gameImgType-3:after {
    content: 'h5';
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    color: red;
    background-color: #ffffff;
    line-height: 1;
    padding: 4px;
    border-radius: 4px;
    font-size: 13px;
}

.gameImgTypeDiscount {
    content: '折';
    display: none;
    position: absolute;
    bottom: 0;
    right: 0;
    color: red;
    background-color: #ffffff;
    line-height: 1;
    padding: 4px;
    border-radius: 4px;
    font-size: 13px;
}

.gameImgType-2 .gameImgTypeDiscount {
    display: block;
}

.gameImgType-lg:after, .gameImgTypeDiscount {
    padding: 5px;
    border-radius: 5px;
    font-size: 14px;
}

.gameImgType-sm:after, .gameImgTypeDiscount {
    padding: 3px;
    border-radius: 2px;
    font-size: 12px;
}

.gameImgType-xs:after, .gameImgTypeDiscount {
    font-size: 10px;
    padding: 2.5px;
    border-radius: 2.5px;
}

.widgetGiftList li {
    background-color: #f9f9fd;
    padding: 10px;
    border-radius: 7.5px;
    margin-top: 7.5px;
}

.widgetGiftList li:first-child {
    margin-top: auto;
}

.widgetGiftList li .name {
    color: #fc5d2a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.widgetGiftList li .desc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.widgetGiftList li .btn {
    float: right;
    width: 40px;
    height: 40px;
    border: 1px solid #fc5d2a;
    color: #fc5d2a;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
}
.small_divs{
    width: 100%;
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid #ffffff;
    font-weight: 600;
    font-size: 16px;
}
.small_divsa{
    width: 100%;
    height: 60px;
    line-height: 70px;
    border-bottom: 1px solid #ffffff;
    font-weight: 600;
    font-size: 16px;
}
.big_deivs{
    background:url("../img/jiantou.png") no-repeat 0px 0px;
    top: 8%;
    right: 14%;
    position: fixed;
    z-index: 99;
    display:none;
    text-align: center;
    width: 25%;
    float: right;
    /*background: #e0dddd;*/
    margin-right: -53px;
}
/* =========================================
   CSS CHO MODAL ĐĂNG NHẬP / ĐĂNG KÝ
   ========================================= */

/* Lớp phủ toàn màn hình */
.auth-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    display: flex; /* Dùng flex để căn giữa */
    align-items: center;
    justify-content: center;
}

.auth-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Lớp mờ */
}

/* Cửa sổ (box) */
.auth-box {
    position: relative;
    background-color: #ffffff;
    width: 90%;
    max-width: 400px; /* Giới hạn chiều rộng */
    border-radius: 10px; /* Giống .gameDetailSummary */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    overflow: hidden; /* Để bo góc các tab */
    z-index: 1000;
}

/* Nút đóng (X) */
.auth-close {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 22px;
    color: #aaa;
    text-decoration: none;
    z-index: 10;
}

    .auth-close:hover {
        color: #333;
    }

/* Header (chứa TABS) */
.auth-header {
    display: flex; /* Chia 2 tab đều nhau */
    border-bottom: 1px solid #eee;
    background-color: #f9f9f9;
}

    .auth-header li {
        flex: 1; /* Mỗi tab chiếm 50% */
        text-align: center;
    }

        .auth-header li a {
            display: block;
            padding: 14px;
            font-size: 16px;
            font-weight: bold;
            color: #666;
            text-decoration: none;
            border-bottom: 3px solid transparent; /* Đường gạch chân khi chưa active */
        }

        /* Tab được chọn (Active) */
        .auth-header li.active a {
            color: #ff9b24; /* Đồng bộ màu cam */
            border-bottom-color: #ff9b24; /* Đồng bộ màu cam */
        }

/* Thân (chứa FORM) */
.auth-body {
    padding: 20px;
}

.form-group {
    margin-bottom: 15px;
}

    .form-group input {
        width: 100%;
        padding: 12px;
        border: 1px solid #ccc;
        border-radius: 5px; /* Đồng bộ bo góc 5px */
        font-size: 15px;
        box-sizing: border-box; /* Quan trọng */
    }

/* Nút bấm (Đồng bộ với .gameDetailBtn .btn) */
.auth-btn {
    display: block;
    width: 100%;
    padding: 12px;
    border-radius: 5px;
    text-align: center;
    background-color: #ff9b24; /* Đồng bộ màu cam */
    color: #ffffff;
    border: none;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}

    .auth-btn:hover {
        background-color: #e68a13; /* Màu cam đậm hơn khi hover */
    }

/* Link chuyển đổi (Đăng ký / Đăng nhập) */
.auth-switch-link {
    display: block;
    text-align: center;
    margin-top: 15px;
    color: #ff9b24; /* Đồng bộ màu cam */
    font-size: 14px;
    text-decoration: none;
}
/* =========================================
   SỬA LỖI THANH MENU (globalBottom)
   ========================================= */

/* 1. Ghim thanh menu xuống đáy màn hình */
.globalBottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90; /* Nằm trên nội dung, nhưng dưới modal (999) */
    /* Áp dụng lại quy tắc max-width 640px (giống .globalWidth) */
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    /* Thêm nền và viền cho chính nó */
    background-color: #ffffff;
    border-top: 1px solid #ccc;
}

    /* 2. Dọn dẹp CSS của <ul> bên trong */
    .globalBottom ul {
        border-top: none; /* Bỏ viền, vì đã đưa ra ngoài .globalBottom */
        padding: 7.5px 10px; /* Giữ lại padding */
    }

/* 3. Tạo khoảng trống ở cuối nội dung (quan trọng) */
.globalMain {
    /* Thêm 75px đệm dưới để nội dung khi cuộn đến cuối 
       sẽ không bị thanh menu che mất */
    padding-bottom: 75px !important;
}
/* =========================================
   CSS CHO THÔNG BÁO (LỖI / THÀNH CÔNG)
   ========================================= */
.global-alert {
    position: fixed;
    top: 60px; /* Nằm dưới header */
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    /* Đồng bộ với .globalWidth */
    max-width: 640px;
    padding: 15px;
    border-radius: 5px;
    font-size: 15px;
    font-weight: bold;
    z-index: 10000; /* Nằm trên cùng */
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    border: 1px solid transparent;
}
/* Dùng màu đỏ từ .indexNewsEntity span */
.alert-error {
    background-color: #ff5153;
    color: #ffffff;
    border-color: #e04446;
}
/* Dùng màu xanh lá từ service.css .future */
.alert-success {
    background-color: #01bb53;
    color: #ffffff;
    border-color: #00a248;
}
/* =========================================
   CSS CHO TRANG PROFILE (profile.php)
   ========================================= */

.profile-container {
    padding: 10px;
    background: #fff;
    border-radius: 5px;
}

    .profile-container h2 {
        font-size: 20px;
        font-weight: bold;
        color: #ff9b24; /* Đồng bộ màu cam */
        border-bottom: 2px solid #f0f0f0;
        padding-bottom: 10px;
        margin-bottom: 15px;
    }

.profile-section {
    margin-top: 25px;
}

    .profile-section h3 {
        font-size: 16px;
        font-weight: bold;
        color: #333;
        border-left: 3px solid #ff9b24; /* Đồng bộ màu cam */
        padding-left: 8px;
        margin-bottom: 15px;
    }

    /* Form (Sử dụng lại class .form-group và .auth-btn) */
    .profile-section form .form-group {
        margin-bottom: 10px;
    }

    .profile-section form small {
        display: block;
        margin-top: 10px;
        color: #888;
    }

/* Nút đăng xuất (màu đỏ) */
.btn-logout {
    background-color: #ff5153; /* Màu đỏ */
}

    .btn-logout:hover {
        background-color: #e04446;
    }

/* Avatar preview */
.avatar-preview {
    margin-bottom: 15px;
    text-align: center;
}

    .avatar-preview img {
        width: 120px;
        height: 120px;
        border-radius: 50%; /* Bo tròn ảnh */
        border: 4px solid #f0f0f0;
        object-fit: cover; /* Đảm bảo ảnh không bị méo */
    }
/* CSS cho Avatar ở Footer (globalBottom) */
.footer-profile-link {
    display: flex !important; /* Ghi đè */
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.footer-avatar {
    width: 26px; /* Kích thước giống icon (24px + 2px) */
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: -3px; /* Căn chỉnh lại cho đẹp */
}
.profile-section.admin-menu-section {
    border: 2px solid #ff9b24; /* Làm nổi bật */
    background-color: #fffaf5; /* Màu nền cam nhạt */
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 25px; /* Tách biệt với các mục khác */
}

.admin-menu-section h3 {
    color: #ff9b24 !important; /* Ghi đè màu */
    border-left: none !important; /* Bỏ gạch chân trái */
    padding-left: 0 !important;
}

.admin-menu-section p {
    margin: 10px 0 15px 0;
    line-height: 1.5;
}

/* Nút màu xanh dương cho Admin */
.btn-admin {
    background-color: #1e78eb;
}

    .btn-admin:hover {
        background-color: #155bb5;
    }
/* =========================================
   CSS CHO TAB TRANG PROFILE
   ========================================= */

/* Thanh điều hướng các tab */
.profile-nav {
    margin-top: 15px;
    margin-bottom: 10px;
    border-bottom: 2px solid #eee; /* Đường viền xám */
}

    .profile-nav li {
        float: left;
        color: #666; /* Màu chữ xám */
        font-size: 15px;
        text-align: center;
        padding-bottom: 8px;
        margin-right: 20px; /* Khoảng cách giữa các tab */
        font-weight: bold;
        cursor: pointer;
        transition: all .25s;
    }

        /* Tab được chọn (active) */
        .profile-nav li.active {
            border-bottom: 3px solid #ff9b24; /* Đường viền cam */
            color: #ff9b24; /* Chữ cam */
            margin-bottom: -2px; /* Dính liền tab vào viền */
        }

/* Khối nội dung của tab */
.profile-section-tab {
    display: none; /* Ẩn tất cả nội dung tab */
}

    .profile-section-tab.active {
        display: block; /* Chỉ hiển thị tab được chọn */
    }

    /* Chỉnh lại lề cho các box bên trong tab */
    .profile-section-tab .profile-section {
        margin-top: 15px;
    }

        .profile-section-tab .profile-section:first-child {
            margin-top: 0; /* Box đầu tiên trong tab không cần lề */
        }
/* =========================================
   CSS CHO BẢNG XẾP HẠNG (top.php)
   ========================================= */

.leaderboard-list {
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #eee;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

    .leaderboard-list ol {
        list-style-type: none; /* Chúng ta tự tạo hạng */
        padding-left: 0;
        margin: 0;
    }

    .leaderboard-list li {
        padding: 10px 15px;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        align-items: center;
        line-height: 1.5;
    }

        .leaderboard-list li:last-child {
            border-bottom: none;
        }

/* Hạng (#1, #2, #3...) */
.leaderboard-rank {
    font-size: 18px;
    font-weight: bold;
    color: #888;
    width: 40px; /* Cố định độ rộng */
    flex-shrink: 0;
}
/* [MỚI] Tô màu cho Top 3 */
.leaderboard-list li:nth-child(1) .leaderboard-rank {
    color: #D4AF37;
}
/* Vàng */
.leaderboard-list li:nth-child(2) .leaderboard-rank {
    color: #A8A8A8;
}
/* Bạc */
.leaderboard-list li:nth-child(3) .leaderboard-rank {
    color: #A97142;
}
/* Đồng */

.leaderboard-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    margin-left: 5px;
    margin-right: 15px;
    flex-shrink: 0;
}

.leaderboard-info {
    flex-grow: 1; /* Đẩy tiền sang phải */
}

.leaderboard-name {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}
/* Số tiền */
.leaderboard-currency {
    font-size: 17px;
    font-weight: bold;
    color: #ff5153; /* Màu đỏ */
    text-align: right;
    flex-shrink: 0;
}
/* =========================================
   CSS CẬP NHẬT CHO BẢNG XẾP HẠNG (top.php)
   ========================================= */

/* [SỬA] Cho phép Tên và Items xếp chồng lên nhau */
.leaderboard-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Căn giữa Tên và Items */
}

/* (CSS cũ cho tên) */
.leaderboard-name {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

/* [MỚI] CSS cho khối chứa item */
.leaderboard-items {
    display: flex;
    flex-wrap: wrap; /* Cho phép xuống dòng nếu quá nhiều item */
    gap: 3px; /* Khoảng cách giữa các item */
    margin-top: 5px; /* Khoảng cách giữa Tên và Items */
}

/* [MỚI] CSS cho từng item (huy hiệu) */
.leaderboard-item-flair {
    height: 30px; /* Kích thước nhỏ (giống trang game) */
    width: auto;
    max-width: 30px;
    object-fit: contain;
}
/* =========================================
   CSS CHO MENU "XEM THÊM" (HEADER)
   ========================================= */

.more-dropdown-menu {
    position: absolute;
    top: 45px; /* Chiều cao của header */
    right: 10px; /* Căn lề phải */
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    width: 160px; /* Chiều rộng menu */
    z-index: 100; /* Nằm trên cùng */
    border: 1px solid #eee;
    display: none; /* Ẩn mặc định */
    overflow: hidden;
}

    /* Class 'show' này sẽ được JS thêm/xóa */
    .more-dropdown-menu.show {
        display: block;
    }

    .more-dropdown-menu ul {
        list-style: none;
        padding: 5px 0;
        margin: 0;
    }

    .more-dropdown-menu li a {
        display: block;
        padding: 10px 15px;
        color: #494949; /* Màu chữ giống .newsList */
        font-size: 15px;
        font-weight: bold;
        text-decoration: none;
        display: flex;
        align-items: center;
    }

        .more-dropdown-menu li a:hover {
            background-color: #f5f5f5;
            color: #ff9b24; /* Màu cam (màu chính) */
        }

        /* CSS cho icon (Font Awesome) */
        .more-dropdown-menu li a .fa {
            margin-right: 10px;
            width: 20px;
            text-align: center;
            color: #ff9b24; /* Màu cam */
        }



    /* =========================================
   CSS CHO SUBMENU CỦA "HOẠT ĐỘNG"
   ========================================= */

    /* Bố cục của <li> cha */
    .more-dropdown-menu .has-submenu {
        position: relative; /* Cần cho submenu */
    }

    /* Nút "Hoạt động" (<a>) */
    .more-dropdown-menu .submenu-trigger {
        display: flex;
        justify-content: space-between; /* Đẩy mũi tên qua phải */
        align-items: center;
    }

        /* Ghi đè CSS cho icon mũi tên (để nó không giống icon chính) */
        .more-dropdown-menu .submenu-trigger .submenu-arrow {
            margin-right: 0;
            width: auto;
            color: #aaa; /* Mũi tên màu xám */
            transition: transform 0.3s ease;
        }

    /* Khi submenu mở, xoay mũi tên */
    .more-dropdown-menu .has-submenu.open > .submenu-trigger .submenu-arrow {
        transform: rotate(90deg);
    }

/* CSS cho Submenu <ul> (ẩn mặc định) */
.more-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #f9f9f9; /* Nền hơi xám */
    display: none; /* Ẩn */
    padding-left: 20px; /* Thụt lề so với cha */
}

/* Khi <li> cha có class 'open', hiện submenu */
.has-submenu.open > .more-submenu {
    display: block;
}

/* Các <li> con trong submenu */
.more-submenu li a {
    font-size: 14px; /* Cỡ chữ nhỏ hơn */
    font-weight: normal; /* Không in đậm */
    color: #555;
    padding: 8px 15px 8px 10px; /* Căn lề lại */
}

    /* Thêm icon "chấm" cho các mục con */
    .more-submenu li a::before {
        content: '\f10c'; /* Icon fa-circle-o */
        font-family: FontAwesome;
        margin-right: 8px;
        font-size: 10px;
        color: #ff9b24; /* Màu cam */
    }

    /* Khi hover, đổi icon thành "chấm đặc" */
    .more-submenu li a:hover::before {
        content: '\f111'; /* Icon fa-circle */
    }

    /* Khi hover, icon chính (fa-star-o) không đổi màu */
    .more-submenu li a:hover .fa {
        color: #ff9b24;
    }