/* General Styles */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    color: #e0e0e0;
    background-color: #121212;
    background-image: url('/assets/chua.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
}

/* --- Account Page (Login/Register) Styles --- */
.auth-container { display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; box-sizing: border-box; }
.auth-form-wrapper { width: 100%; max-width: 450px; background: rgba(25, 25, 25, 0.85); border: 1px solid #444; border-radius: 8px; backdrop-filter: blur(10px); overflow: hidden; }
.auth-tabs { display: flex; border-bottom: 2px solid #995A3A; }
.tab-link { flex: 1; padding: 15px; background: none; border: none; color: #aaa; cursor: pointer; font-size: 1.1em; transition: color 0.3s, background-color 0.3s; }
.tab-link.active { color: #E48F45; border-bottom: 2px solid #E48F45; margin-bottom: -2px; }
.tab-content { display: none; padding: 30px; }
.input-group { margin-bottom: 20px; }
.input-group label { display: block; margin-bottom: 8px; color: #ccc; font-size: 0.9em; }
.input-group input { width: 100%; padding: 12px; background: #333; border: 1px solid #555; border-radius: 4px; color: #fff; box-sizing: border-box; }
.options { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; font-size: 0.9em; }
.remember-me { display: flex; align-items: center; cursor: pointer; color: #ccc; }
.remember-me input { margin-right: 8px; }
.forgot-password { color: #ccc; text-decoration: none; }
.forgot-password:hover { color: #E48F45; }
.auth-button { width: 100%; padding: 15px; background-color: #995A3A; border: none; border-radius: 4px; color: white; font-size: 1.2em; cursor: pointer; transition: background-color 0.3s; }
.auth-button:hover { background-color: #E48F45; }
.error-message { color: #ff6b6b; text-align: center; margin-top: 15px; min-height: 20px; }


/* --- Index Page (Game) Styles --- */
.game-container { max-width: 1200px; margin: 0 auto; padding: 15px; box-sizing: border-box; }
.game-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; background: rgba(15, 15, 15, 0.7); padding: 10px 20px; border-radius: 8px; border: 1px solid #444; margin-bottom: 20px; gap: 15px;}
.player-info { display: flex; align-items: center; gap: 15px; }
.player-avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
.player-info h3, .player-info p { margin: 0; }
.player-stats { display: flex; flex-wrap: wrap; gap: 10px 20px; color: #E48F45; }
.header-buttons { display: flex; gap: 10px; }
.level-up-btn, .logout-btn { background-color: #85e0ff; color: white; border: none; padding: 10px 15px; border-radius: 4px; cursor: pointer; }

/* Bố cục Desktop */
.game-main { display: flex; gap: 20px; align-items: flex-start; }
.left-panel { flex: 0 0 250px; } /* Giữ kích thước cố định cho desktop */
.center-panel { flex: 1; }

.left-panel, .center-panel { background: rgba(20, 20, 20, 0.8); border: 1px solid #444; border-radius: 8px; padding: 20px; }
.left-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 8px;
    align-content: start;
    margin-bottom: 20px;
}

.menu-btn { 
    width: 100%; 
    background: #444; 
    color: #ddd; 
    border: 1px solid #666; 
    padding: 8px 5px;
    font-size: 0.85em;
    border-radius: 4px; 
    cursor: pointer; 
    transition: background-color 0.2s; 
}
.menu-btn:hover { background-color: #555; }
.character-display { display: flex; flex-direction: column; align-items: center; margin-bottom: 20px; }
.character-image { max-width: 150px; }

/* === ĐÃ THAY ĐỔI: Căn giữa cho các dòng thông báo tu luyện === */
.status-feed p { 
    text-align: center; /* Đổi từ left sang center */
    margin: 8px 0; 
    font-size: 0.95em; 
}

.game-footer { margin-top: 20px; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.footer-btn { background: #5A3E2B; color: #ddd; border: 1px solid #8c6d56; padding: 10px 20px; border-radius: 4px; cursor: pointer; transition: background-color 0.2s; }
.footer-btn:hover { background-color: #7c5942; }

/* Styles cho Tab trong Game */
.game-tabs { display: flex; margin-bottom: 20px; border-bottom: 1px solid #7c5942; justify-content: center; }
.game-tab-link { background: none; border: none; color: #9e9e9e; padding: 10px 20px; cursor: pointer; font-size: 1.1em; position: relative; transition: color 0.3s; }
.game-tab-link.active { color: #E48F45; }
.game-tab-link.active::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; background-color: #E48F45; }
.game-tab-content { display: none; }
.game-tab-content > p { text-align: center; font-size: 1.2em; color: #bbb; padding-top: 20px; }

/* Styles cho tab Trạng Thái */
.stat-section { margin-bottom: 20px; }
.stat-section h4 { text-align: center; color: #E48F45; margin: 20px 0 15px 0; font-size: 1.1em; display: flex; align-items: center; justify-content: center; gap: 15px; font-weight: normal; }
.stat-section h4 .decorator { height: 1px; width: 50px; background: linear-gradient(to right, transparent, #7c5942, transparent); }

.stat-grid { display: grid; gap: 8px 25px; font-size: 0.95em; color: #ccc; justify-items: center; }
.stat-grid span { white-space: nowrap; }
.stat-grid span b { color: #fff; font-weight: normal; margin-left: 5px; }

.tu-luyen-grid { grid-template-columns: repeat(3, 1fr); }
.co-ban-grid { grid-template-columns: repeat(3, 1fr); }
.chien-dau-grid { grid-template-columns: repeat(3, 1fr); }

.stat-sat-thuong { color: #ff6b6b; }
.stat-phong-thu { color: #6b9cff; }
.stat-than-phap { color: #63ff8c; }

.thien-phu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-top: 25px;}
.thien-phu-box { background-color: rgba(0, 0, 0, 0.3); border: 1px solid #555; border-radius: 6px; padding: 15px; text-align: center; }
.thien-phu-box h5 { margin: 0 0 10px 0; color: #E48F45; font-size: 1em; }
.thien-phu-box p { font-size: 0.85em; color: #aaa; line-height: 1.4; margin: 0; }



/* ========================================================== */
/* ==       KHỐI SỬA LỖI LAYOUT CUỐI CÙNG    == */
/* ========================================================== */

/* 1. Định nghĩa layout chính */
.game-main {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: stretch;
}

#map-panel {
    height: calc(100vh - 100px); /* Tùy chỉnh theo header/footer */
}

/* 2. Panel chức năng bên trái: Cố định chiều rộng */
.left-panel {
    width: 320px;       /* Chiều rộng cố định */
    flex-shrink: 0;     /* Ngăn không cho panel này bị co lại */
    background: rgba(18, 18, 18, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 12px;
    box-sizing: border-box;
}

/* 3. Panel trung tâm và Panel bản đồ: Chiều rộng được TÍNH TOÁN rõ ràng */
.center-panel, #map-panel {
    /* Chiếm 100% không gian còn lại (100% - chiều rộng panel trái - khoảng cách gap) */
    width: calc(100% - 320px - 20px);
}

/* 4. Style chi tiết cho panel bản đồ (phần này giữ nguyên) */
#map-panel {
    display: flex; 
    flex-direction: column;
    background-color: rgba(20, 20, 20, 0.8);
    border: 1px solid #444;
    border-radius: 8px;
    padding: 0; 
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

/* Các style con của map-panel không thay đổi */
.map-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    color: #fff;
    text-shadow: 0 1px 5px rgba(0,0,0,0.7);
}
.map-header h2 { margin: 0; font-size: 1.4em; color: #E48F45; }
.panel-close-btn { background: none; border: none; color: #aaa; font-size: 2.5em; font-weight: bold; cursor: pointer; line-height: 1; padding: 0 5px; transition: color 0.2s; }
.panel-close-btn:hover { color: #fff; }
.map-content {
    flex-grow: 1;
    width: 100%;
    height: 100%;
    background-image: url('assets/bando2.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 5. CSS cho responsive */
@media (max-width: 992px) {
    .game-main {
        flex-direction: column;
        gap: 15px;
    }

    /* Khi xếp dọc, tất cả panel đều chiếm 100% chiều rộng */
    .left-panel, .center-panel, #map-panel {
        width: 100%; /* Ghi đè lại width calc() ở trên */
        max-width: 100%;
    }
    
    .left-panel {
        order: -1;
        margin-top: 0;
    }
}



/* Class tiện ích để ẩn panel một cách an toàn */
.panel-hidden {
    display: none !important;
}

/* --- Responsive Design --- */
@media (max-width: 992px) {
    .game-main {
        flex-direction: column;
    }

    /* responsive: Đảm bảo cả hai panel chiếm toàn bộ chiều rộng */
    .left-panel, .center-panel {
        width: 100%;
        box-sizing: border-box; /* Rất quan trọng: Để padding không làm vỡ layout */
        flex: none; /* Reset thuộc tính flex để width được ưu tiên */
    }
    
    .left-panel {
        order: -1; /* Giữ panel chức năng ở trên cùng */
        margin-top: 15px; /* Giữ khoảng cách với header */
    }

    .co-ban-grid, .chien-dau-grid, .tu-luyen-grid { grid-template-columns: repeat(2, 1fr); }
    .thien-phu-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    body { font-size: 14px; }
    .game-container { padding: 5px; }
    .game-header { flex-direction: column; align-items: stretch; }
    .player-info { justify-content: center; }
    .player-stats { grid-template-columns: 1fr 1fr; display: grid; }
    .header-buttons { justify-content: center; }
    .game-tabs { flex-wrap: wrap; }
    .game-tab-link { padding: 8px 10px; font-size: 1em; }
    .game-footer { display: grid; grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 480px) {
    .co-ban-grid, .chien-dau-grid, .tu-luyen-grid { grid-template-columns: 1fr; }
    .thien-phu-grid { grid-template-columns: repeat(2, 1fr); }
}


/* --- Realm Panel (Bảng Cấp Độ) Styles --- */
.realm-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s, visibility 0.4s;
}

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

.realm-panel-container {
    position: fixed;
    top: 0;
    right: -400px;
    width: 100%;
    max-width: 380px;
    height: 100vh;
    background-color: #181818;
    border-left: 2px solid #995A3A;
    z-index: 100;
    display: flex;
    flex-direction: column;
    transition: right 0.4s ease-in-out;
    box-shadow: -5px 0 15px rgba(0,0,0,0.5);
}

.realm-panel-container.show {
    right: 0;
}

.realm-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #222;
    border-bottom: 1px solid #444;
}

.realm-panel-header h3 {
    margin: 0;
    color: #E48F45;
    font-size: 1.3em;
    font-weight: normal;
}

#close-realm-panel-btn {
    background: none;
    border: none;
    color: #aaa;
    font-size: 2.2em;
    cursor: pointer;
    line-height: 1;
    padding: 0 5px;
    transition: color 0.2s;
}
#close-realm-panel-btn:hover {
    color: #fff;
}

.realm-list {
    padding: 10px;
    overflow-y: auto;
    flex-grow: 1;
}

.realm-list::-webkit-scrollbar { width: 8px; }
.realm-list::-webkit-scrollbar-track { background: #222; }
.realm-list::-webkit-scrollbar-thumb { background-color: #555; border-radius: 4px; border: 2px solid #222; }

.realm-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.realm-label {
    padding: 10px 15px;
    margin-bottom: 5px;
    border-radius: 4px;
    border-left: 5px solid;
    transition: all 0.2s;
    background-color: rgba(40, 40, 40, 0.5);
}

.realm-label.current {
    background-color: rgba(228, 143, 69, 0.2);
    border-color: #E48F45 !important;
}

.realm-label .font-semibold {
    font-weight: 600;
    color: #e0e0e0;
}

.realm-label .text-xs {
    font-size: 0.8em;
    color: #999;
}

.realm-luyen-khi { border-color: #6c757d; }
.realm-truc-co { border-color: #28a745; }
.realm-kim-dan { border-color: #fd7e14; }
.realm-nguyen-anh { border-color: #0d6efd; }
.realm-hoa-than { border-color: #6f42c1; }
.realm-phan-hu { border-color: #e83e8c; }
.realm-hop-the { border-color: #d63384; }
.realm-dai-thua { border-color: #ffc107; }
.realm-do-kiep { border-color: #dc3545; }
.realm-tien-nhan { border-color: #0dcaf0; }
.realm-chan-tien { border-color: #20c997; }
.realm-kim-tien { border-color: #ffde7a; }
.realm-thai-at { border-color: #85e0ff; }
.realm-dai-la { border-color: #c3e6cb; }
.realm-hon-don { border-color: #a2a2a2; }
.realm-chi-ton { border-color: #f8f9fa; }
.realm-thien-dao { border-color: #6610f2; }
.realm-vo-cuc { border-color: #198754; }
.realm-hu-vo { border-color: #0dcaf0; }


/* --- Custom Modal (Popup) Styles --- */
.hidden {
    display: none !important;
}

.modal-close-btn {
    position: absolute; /* Định vị tuyệt đối so với .modal-content */
    top: 5px;          /* Khoảng cách từ cạnh trên */
    right: 5px;         /* Khoảng cách từ cạnh phải */
    
    /* Style để nút trông đẹp hơn */
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: #888;
    font-size: 28px;
    font-weight: bold;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    border-radius: 50%; /* Bo tròn nút */
    transition: all 0.2s ease;
    z-index: 10;
}

.modal-close-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

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

.modal-content {
    position: relative; /* Rất quan trọng để định vị nút con */
    background: #2a2a2e;
    padding: 25px;
    border-radius: 8px;
    border: 1px solid #995A3A;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
    text-align: center;
    width: 90%;
    max-width: 400px;
    color: #e0e0e0;
}

.modal-content h3 {
    margin-top: 0;
    color: #E48F45;
    font-size: 1.5em;
}

.modal-content p {
    line-height: 1.6;
    margin-bottom: 20px;
    white-space: pre-wrap;
}

.modal-button {
    width: 100%;
    padding: 12px;
    background-color: #995A3A;
    border: none;
    border-radius: 4px;
    color: white;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s;
}

.modal-button:hover {
    background-color: #E48F45;
}


/* ========================================================== */
/* ==   NÂNG CẤP GIAO DIỆN NÚT BẤM & TAB THEO CHỦ ĐỀ TU TIÊN   == */
/* ========================================================== */

/* --- 1. Thiết lập cơ bản cho các nút & hiệu ứng chuyển động --- */
.menu-btn,
.footer-btn,
.game-tab-link {
    transition: all 0.3s ease-in-out; /* Hiệu ứng chuyển động mượt mà cho mọi thuộc tính */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); /* Thêm bóng cho chữ để nổi bật hơn */
    border-radius: 5px; /* Bo góc nhẹ nhàng, tinh tế */
}

/* --- 2. Nâng cấp các nút chức năng ở Panel Trái & Dưới --- */
.menu-btn,
.footer-btn {
    background: linear-gradient(145deg, #4a4a4a, #3a3a3a); /* Nền gradient tạo chiều sâu như phiến đá */
    color: #e0e0e0;
    border: 1px solid #666;
    border-top-color: #777;
    border-left-color: #777;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.05);
}

.menu-btn:hover,
.footer-btn:hover {
    transform: translateY(-2px); /* Nhẹ nhàng nhấc nút lên khi hover */
    color: #fff;
    border-color: #E48F45; /* Viền màu cam khi hover */
    background: linear-gradient(145deg, #5c5c5c, #4c4c4c);
    box-shadow: 0 4px 10px rgba(228, 143, 69, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

.menu-btn:active,
.footer-btn:active {
    transform: translateY(1px); /* Hiệu ứng nhấn xuống */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* --- 3. Nâng cấp các Tab chính (Thổ Nạp, Trạng Thái...) --- */
.game-tabs {
    border-bottom: 2px solid #5a4a3a; /* Đường kẻ dưới đậm chất cổ trang */
}

.game-tab-link {
    color: #a0a0a0;
    background: none;
    border: none;
    border-bottom: 3px solid transparent; /* Chuẩn bị cho hiệu ứng active */
    padding-bottom: 12px;
    margin: 0 5px -2px 5px; /* Điều chỉnh vị trí để khớp với border của container */
}

.game-tab-link:hover {
    color: #E48F45;
    border-bottom-color: rgba(228, 143, 69, 0.4); /* Hiện đường viền mờ khi hover */
}

/* Hiệu ứng "tỏa sáng" cho tab đang được chọn */
.game-tab-link.active {
    color: #ffc97a; /* Màu vàng kim cho tab active */
    font-weight: bold;
    border-bottom: 3px solid #E48F45;
    /* Hiệu ứng phát sáng quan trọng */
    box-shadow: 0 5px 20px -5px rgba(228, 143, 69, 0.6);
}

/* Loại bỏ hiệu ứng after cũ để thay bằng hiệu ứng mới */
.game-tab-link.active::after {
    display: none;
}


/* --- 4. Hiệu ứng đặc biệt cho nút "Quà Tân Thủ" --- */

/* Tạo một keyframe animation để làm nút nhấp nháy, thu hút sự chú ý */
@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 5px rgba(133, 224, 255, 0.5), 0 0 10px rgba(133, 224, 255, 0.4);
    }
    50% {
        box-shadow: 0 0 15px rgba(133, 224, 255, 0.8), 0 0 25px rgba(133, 224, 255, 0.7);
    }
    100% {
        box-shadow: 0 0 5px rgba(133, 224, 255, 0.5), 0 0 10px rgba(133, 224, 255, 0.4);
    }
}

#newbie-gift-btn {
    background: linear-gradient(145deg, #5b99af, #4a7c8f); /* Màu xanh lam ngọc */
    border-color: #85e0ff;
    color: #fff;
    /* Áp dụng animation */
    animation: pulse-glow 2.5s infinite ease-in-out;
}

#newbie-gift-btn:hover {
    border-color: #fff;
    background: linear-gradient(145deg, #73b3c9, #619cb1);
}

/* --- 5. Nâng cấp các nút trong Header --- 
.level-up-btn, .logout-btn {
    background: linear-gradient(145deg, #995A3A, #7a482e);
    border: 1px solid #c59a76;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    color: #fff;
    font-weight: bold;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.level-up-btn:hover, .logout-btn:hover {
    transform: translateY(-2px);
    border-color: #E48F45;
    background: linear-gradient(145deg, #a36342, #855136);
    box-shadow: 0 4px 10px rgba(228, 143, 69, 0.3);
} */

/* --- Nâng cấp Nút Header (Cảnh giới & Đăng xuất) --- */
.level-up-btn, .logout-btn {
    position: relative; /* Cần thiết cho các hiệu ứng phức tạp hơn */
    background: linear-gradient(145deg, #524032, #3a2e25); /* Nền gradient tối, sang trọng */
    color: #ffedd6; /* Màu chữ vàng nhạt, ấm */
    font-weight: bold;
    font-size: 1em;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease-in-out;
    border: 1px solid rgba(228, 143, 69, 0.5); /* Viền màu cam mờ */
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.level-up-btn {
    /* Áp dụng hiệu ứng tỏa sáng đã định nghĩa ở trên */
    animation: realm-glow 3s infinite ease-in-out;
}

.level-up-btn:hover, .logout-btn:hover {
    transform: translateY(-2px) scale(1.03); /* Hiệu ứng nhấc lên và phóng to nhẹ */
    color: #ffffff; /* Chữ sáng hơn khi hover */
    border-color: rgba(255, 199, 122, 0.8);
    background: linear-gradient(145deg, #6a5342, #4e3f34);
}

/* Hiệu ứng riêng cho nút cảnh giới khi hover, làm hào quang mạnh hơn */
.level-up-btn:hover {
    box-shadow: 0 0 15px rgba(255, 199, 122, 0.7), 
                0 0 25px rgba(255, 199, 122, 0.5),
                inset 0 0 5px rgba(255, 199, 122, 0.4);
    animation-play-state: paused; /* Tạm dừng animation mặc định để ưu tiên hiệu ứng hover */
}


/* --- Keyframes cho hiệu ứng tỏa sáng của nút Cảnh Giới --- */
@keyframes realm-glow {
  0% {
    box-shadow: 0 0 5px rgba(228, 143, 69, 0.4), 
                0 0 10px rgba(228, 143, 69, 0.3),
                inset 0 0 5px rgba(228, 143, 69, 0.2);
  }
  50% {
    box-shadow: 0 0 10px rgba(255, 199, 122, 0.6), 
                0 0 20px rgba(255, 199, 122, 0.4),
                inset 0 0 7px rgba(255, 199, 122, 0.3);
  }
  100% {
    box-shadow: 0 0 5px rgba(228, 143, 69, 0.4), 
                0 0 10px rgba(228, 143, 69, 0.3),
                inset 0 0 5px rgba(228, 143, 69, 0.2);
  }
}


/* ========================================================== */
/* ==       CSS CHO MENU FOOTER CỐ ĐỊNH (MỚI)              == */
/* ========================================================== */

/* QUAN TRỌNG: Tạo một khoảng trống ở cuối trang để nội dung
   không bị che khuất bởi menu footer cố định.
   Chiều cao của padding-bottom nên lớn hơn chiều cao của menu. */
body {
    padding-bottom: 75px; /* Chiều cao footer + 10px */
}

/* Thanh menu chính */
.fixed-footer-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 65px; /* Chiều cao của thanh menu */
    background: rgba(18, 18, 18, 0.9); /* Nền tối mờ */
    backdrop-filter: blur(10px); /* Hiệu ứng kính mờ (hoạt động trên các trình duyệt hỗ trợ) */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.3);
    
    display: flex;
    justify-content: space-around; /* Dàn các nút đều nhau */
    align-items: center;
    z-index: 1000; /* Đảm bảo menu luôn nằm trên cùng */
}

/* Các nút bấm (là thẻ a) */
.footer-nav-btn {
    display: flex;
    flex-direction: column; /* Xếp icon và chữ theo chiều dọc */
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #8a8a8a; /* Màu chữ mặc định */
    font-size: 11px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 8px;
    gap: 4px; /* Khoảng cách giữa icon và chữ */
    
    /* Hiệu ứng chuyển động mượt mà */
    transition: all 0.2s ease-in-out;
}

/* Icon bên trong nút */
.footer-nav-btn img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

/* Hiệu ứng khi di chuột vào nút */
.footer-nav-btn:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: #fff;
}

/* Định dạng cho nút đang được chọn (active) */
.footer-nav-btn.active {
    color: #E48F45; /* Màu cam đặc trưng */
    font-weight: 600;
}

/* Hiệu ứng nhỏ cho icon của nút active */
.footer-nav-btn.active img {
    transform: scale(1.1);
}


/* ========================================================== */
/* ==   Chống menu footer đè lên nội dung           == */
/* ========================================================== */

/* Thêm khoảng đệm dưới cho body (áp dụng cho trang game chính) */
body {
    padding-bottom: 75px; 
}

/* Áp dụng khoảng đệm dưới cho chính các PANEL TOÀN MÀN HÌNH.
   Đây là cách đảm bảo khu vực có thanh cuộn sẽ có một vùng trống
   ở dưới cùng, đúng bằng chiều cao của menu footer.
*/
.inv-fullscreen-panel,
.bc-fullscreen-panel,
.cd-fullscreen-panel,
.vtc-fullscreen-panel,
.ld-fullscreen-panel,
.tong-mon-fullscreen,
.bl-fullscreen-panel,
.br-fullscreen-panel {
    /* Quan trọng: Thêm padding vào chính panel */
    padding-bottom: 75px;

    /* Đảm bảo padding không làm tăng kích thước tổng thể của panel */
    box-sizing: border-box;
}





/* --- CSS cho Popup lựa chọn --- */
.modal-actions-vertical {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Khoảng cách giữa các nút */
    margin-top: 20px;
}


/* ===== Nâng Cấp Avatar Nhân Vật Trong Header ===== */

/* --- Style Cơ Bản cho Avatar --- */
.player-avatar {
    /* Các thuộc tính cũ của bạn */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    
    /* === THÊM MỚI: Viền xanh và hiệu ứng chuyển động === */
    border: 3px solid #4CAF50; /* Viền màu xanh lá cây */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Đổ bóng nhẹ ban đầu */
    transition: all 0.3s ease-in-out; /* Hiệu ứng chuyển động mượt mà cho mọi thay đổi */
    cursor: pointer; /* Biến con trỏ thành hình bàn tay khi rê vào */
}

/* --- Hiệu ứng khi rê chuột vào Avatar --- */
.player-avatar:hover {
    /* Hiệu ứng "nổi lên" */
    transform: translateY(-5px) scale(1.1); /* Nhấc lên trên 5px và phóng to 10% */

    /* Viền và bóng đổ phát sáng */
    border-color: #66BB6A; /* Màu viền sáng hơn khi hover */
    box-shadow: 0 8px 20px rgba(76, 175, 80, 0.5); /* Bóng đổ màu xanh lá, tạo hiệu ứng phát sáng */
}

/* Hiệu ứng khi người dùng NHẤN VÀ GIỮ CHUỘT vào avatar */
.player-avatar:active {
    transform: translateY(-2px) scale(1.05); /* Hiệu ứng hơi khác so với hover để tạo cảm giác nhấn xuống */
    filter: brightness(0.9); /* Avatar hơi tối lại một chút khi nhấn */
    transition: all 0.1s ease; /* Hiệu ứng nhấn xuống diễn ra nhanh hơn */
}

 
 /*  Đưa popup thông báo chung lên lớp cao nhất */
#custom-modal-overlay {
    z-index: 1001;
}

/* ========================================================== */
/* == Căn Chỉnh Header cho các Panel Toàn Màn Hình (Sửa Lỗi) == */
/* ========================================================== */


/* Biến header thành một 'hộp chứa' cho việc định vị */
.tong-mon-header,
.vtc-header,
.inv-header,
.ld-header,
.cd-header {
    display: flex;
    align-items: center;
    position: relative; /* RẤT QUAN TRỌNG: để định vị tuyệt đối cho tiêu đề */
    padding: 10px 15px;
    height: 60px; /* Đặt chiều cao cố định để căn giữa theo chiều dọc dễ dàng hơn */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Định vị tuyệt đối cho tiêu đề để nó LUÔN LUÔN ở giữa */
.tong-mon-main-title,
.vtc-main-title,
.inv-main-title,
.ld-main-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* Kỹ thuật căn giữa tuyệt đối trong CSS */
    margin: 0; /* Xóa margin mặc định */
    font-size: 1.6em;
    white-space: nowrap; /* Đảm bảo tiêu đề không bị xuống dòng */
}

/* Nút back sẽ tự động nằm ở bên trái vì nó không bị định vị tuyệt đối */
.back-btn {
    /* Các style cũ của nút back được giữ nguyên */
    font-size: 1.8em;
    z-index: 2; /* Đảm bảo nút back nằm trên tiêu đề nếu tiêu đề quá dài */
}

/* ========================================================== */
/* ==         BẢNG CHỨC NĂNG           == */
/* ========================================================== */

/* Ghi đè style của .left-panel để biến nó thành một panel có nền */
.left-panel {
    flex: 1 1 auto;
    max-width: 340px; /* Tăng chiều rộng để vừa 5 nút thoải mái hơn */
    background: rgba(18, 18, 18, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    /* Ghi đè các thuộc tính cũ */
    display: block;
    margin-bottom: 0;
    align-content: start;
}

/* Lưới chứa các nút chức năng */
.feature-grid {
    display: grid;
    /* Tạo 5 cột bằng nhau */
    grid-template-columns: repeat(auto-fit, minmax(75px, 1fr));
    gap: 8px;
}

/* Style cho từng nút chức năng, tương tự footer */
.feature-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #b0b0b0;
    background: rgba(40, 40, 40, 0.7);
    border-radius: 6px;
    padding: 8px 4px;
    gap: 5px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.2s ease-in-out;
    aspect-ratio: 1 / 1; /* Đảm bảo nút luôn vuông */
    cursor: pointer;
}

.feature-btn:hover {
    color: #E48F45;
    background: rgba(60, 60, 60, 0.9);
    border-color: rgba(228, 143, 69, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* Icon bên trong nút */
.feature-btn i {
    font-size: 22px; /* Tăng nhẹ kích thước icon */
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Chữ bên trong nút */
.feature-btn span {
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    line-height: 1.2;
}

/* Điều chỉnh trên màn hình nhỏ hơn */
@media (max-width: 992px) {
    .left-panel {
        max-width: 100%;
        margin-top: 15px;
        order: -1;
    }
}

@media (max-width: 480px) {
    .feature-grid {
        gap: 6px;
    }
    .feature-btn span {
        font-size: 9px;
    }
    .feature-btn i {
        font-size: 18px;
    }
}


/* ========================================================== */
/* ==                  CSS CHO HỘP THƯ                       == */
/* ========================================================== */

/* Lớp phủ cho panel hộp thư */
#mailbox-panel-overlay {
    z-index: 1010; /* Nằm trên các lớp phủ khác */
}

/* Panel hộp thư chính */
#mailbox-panel-content {
    width: 90%;
    max-width: 700px;
    height: 85vh;
    max-height: 600px;
    background: #1f1f23;
    border: 1px solid #555;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.mailbox-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background: rgba(0,0,0,0.3);
    border-bottom: 1px solid #444;
}

.mailbox-header h3 {
    margin: 0;
    color: #E48F45;
    font-size: 1.4em;
}

/* Danh sách thư */
#mailbox-list-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 8px;
}

.mail-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px;
    border-bottom: 1px solid #3a3a3f;
    cursor: pointer;
    transition: background-color 0.2s;
}
.mail-item:hover {
    background-color: #2a2a2e;
}

/* Trạng thái chưa đọc */
.mail-item.unread .mail-info {
    font-weight: bold;
    color: #fff;
}
.mail-item.unread {
    background-color: rgba(228, 143, 69, 0.1);
}

.mail-icon {
    font-size: 1.8em;
    color: #E48F45;
    position: relative; /* Dành cho icon vật phẩm */
}

/* Logic hiển thị icon thư đóng/mở */
.mail-item.unread .fa-envelope-open,
.mail-item.read .fa-envelope {
    display: none;
}
.mail-item.unread .fa-envelope,
.mail-item.read .fa-envelope-open {
    display: inline-block;
}

/* Icon báo có vật phẩm đính kèm */
.attachment-indicator {
    position: absolute;
    bottom: -2px;
    right: -5px;
    font-size: 0.5em;
    color: #ffc107;
    background: #1f1f23;
    border-radius: 50%;
    padding: 3px;
}

.mail-info {
    flex-grow: 1;
}

.mail-sender {
    font-size: 1em;
    color: #e0e0e0;
}

.mail-summary {
    font-size: 0.9em;
    color: #aaa;
    margin: 4px 0 0 0;
    font-weight: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mail-timestamp {
    font-size: 0.8em;
    color: #888;
    white-space: nowrap;
}

/* Các nút hành động ở cuối panel */
.mailbox-actions {
    display: flex;
    gap: 10px;
    padding: 15px;
    border-top: 1px solid #444;
}
.mailbox-btn {
    flex: 1;
    padding: 10px;
    border: 1px solid #555;
    background-color: #3e3e42;
    color: #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}
.mailbox-btn:hover {
    background-color: #555;
    border-color: #777;
}

.delete-read-btn {
    background-color: #a13a3a;
    border-color: #b55;
}
.delete-read-btn:hover {
    background-color: #c0392b;
}


/* ========================================================== */
/* ==             CSS CHO CHI TIẾT THƯ (MODAL CON)         == */
/* ========================================================== */
#mail-view-modal-overlay {
    z-index: 1020; /* Nằm trên cả panel hộp thư */
}

#mail-view-header {
    text-align: left;
    margin-bottom: 20px;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
}
#mail-view-sender { margin: 0; color: #E48F45; }
#mail-view-timestamp { font-size: 0.8em; color: #999; }

#mail-view-body {
    text-align: left;
    line-height: 1.6;
    color: #ccc;
    margin-bottom: 20px;
    max-height: 200px;
    overflow-y: auto;
}

/* Khu vực vật phẩm */
#mail-view-attachments {
    text-align: left;
    padding: 10px;
    background: rgba(0,0,0,0.2);
    border-radius: 4px;
    margin-bottom: 20px;
}
#mail-view-attachments h5 { margin: 0 0 10px 0; color: #E48F45; }
.attachment-item {
    display: flex;
    align-items: center;
    gap: 10px;
}
.attachment-item img {
    width: 32px;
    height: 32px;
}

.mail-view-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}
.mail-view-actions .delete {
    background-color: #c0392b;
}

#mailbox-list-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 8px;
    /* Ẩn thanh cuộn trên các trình duyệt phổ biến */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}

#mailbox-list-container::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
}

.mail-summary {
    font-size: 0.9em;
    color: #aaa;
    margin: 4px 0 0 0;
    font-weight: normal;
    
    /* Các thuộc tính thêm vào để cắt ngắn văn bản */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 450px; /* Giới hạn chiều rộng tối đa của tóm tắt */
}

/* Phân trang cho mail */
#mailbox-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    gap: 8px;
}

.page-btn {
    padding: 5px 12px;
    border: 1px solid #444;
    background-color: #333;
    color: #ccc;
    cursor: pointer;
    border-radius: 4px;
}

.page-btn.active {
    background-color: #E48F45;
    color: #111;
    border-color: #E48F45;
    font-weight: bold;
}

.page-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* ========================================================== */
/* ==   Ẩn thanh cuộn cho phần nội dung chi tiết thư      == */
/* ========================================================== */

#mail-view-body {
    /* Ẩn thanh cuộn trên các trình duyệt phổ biến */
    scrollbar-width: none; /* Dành cho Firefox */
    -ms-overflow-style: none;  /* Dành cho Internet Explorer */
}

/* Ẩn thanh cuộn trên Chrome, Safari, và các trình duyệt WebKit khác */
#mail-view-body::-webkit-scrollbar {
    display: none;
}

/* ========================================================== */
/* ==      Responsive cho Hộp thư trên màn hình nhỏ        == */
/* ==                  (Phiên bản cuối cùng)                == */
/* ========================================================== */

@media (max-width: 480px) {

    /* 1. Panel chính */
    #mailbox-panel-content {
        width: 95%;
        height: 90vh;
    }

    /* 2. Mỗi dòng thư */
    .mail-item {
        padding: 10px 8px;
        gap: 10px;
        position: relative;
        padding-bottom: 30px;
    }

    /* 3. Icon và các loại chữ */
    .mail-icon {
        font-size: 1.6em;
    }
    .mail-sender {
        font-size: 0.9em;
    }

    /* === SỬA LỖI HIỂN THỊ TÓM TẮT TẠI ĐÂY === */
    .mail-summary {
        /* Giữ lại các style cũ */
        font-size: 0.8em;
        
        /* Thêm lại các thuộc tính để tạo dấu "..." */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        /* Giới hạn chiều rộng để nó không bị vỡ và hiển thị dấu "..." */
        /* Bạn có thể điều chỉnh giá trị 180px này nếu muốn */
        max-width: 180px;
    }

    .mail-timestamp {
        position: absolute;
        bottom: 8px;
        right: 10px;
        font-size: 0.75em;
    }

    /* 4. Các nút hành động */
    .mailbox-actions {
        padding: 12px;
        flex-direction: column;
        gap: 8px;
    }
    .mailbox-btn {
        padding: 12px;
        font-size: 0.95em;
    }
}

/* ========================================================== */
/* ==   CSS Căn chỉnh Nút Đóng (X) cho các Panel           == */
/* ========================================================== */

/* 1. Thiết lập cho các panel cha (quan trọng nhất) */
/* Đảm bảo các panel này là gốc để định vị nút con bên trong nó. */
#mailbox-panel-content, 
#mail-view-content {
    position: relative; /* Rất quan trọng! */
}

/* 2. Style chung cho các nút đóng */
/* Áp dụng cho các nút có class="modal-close-btn" */
.modal-close-btn {
    /* Định vị tuyệt đối so với panel cha đã được đặt position: relative */
    position: absolute;
    top: 5px;   /* Cách lề trên 5px */
    right: 8px; /* Cách lề phải 8px */

    /* Style để nút trông đẹp hơn */
    width: 35px;
    height: 35px;
    padding: 0;
    border: none;
    background: transparent;
    color: #aaa;
    font-size: 30px;
    font-weight: bold;
    line-height: 35px;
    text-align: center;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.3s ease;
    
    /* Đảm bảo nút luôn nằm trên các nội dung khác trong panel */
    z-index: 10;
}

/* 3. Hiệu ứng khi rê chuột vào nút */
.modal-close-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    transform: rotate(90deg); /* Hiệu ứng xoay khi hover */
}


/* style.css */

/* ========================================================== */
/* ==           CSS CHO HIỆU ỨNG LOADING (MỚI)           == */
/* ========================================================== */

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(5px);
    z-index: 9999; /* Luôn nằm trên cùng */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease;
}

.loading-overlay.hidden {
    display: none !important;
}

.loading-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    color: #e0e0e0;
    text-align: center;
}

/* Keyframes cho hiệu ứng xoay tròn */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #555; /* Màu nền của vòng tròn */
    border-top: 5px solid #E48F45; /* Màu của phần xoay */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

#loading-message {
    font-size: 1.2em;
    font-weight: 500;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}


/* === CSS CHO DÒNG THÔNG BÁO CHẠY CHỮ === */

#marquee-container {
    position: fixed; /* Luôn nằm cố định ở trên cùng màn hình */
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Màu nền đen mờ */
    color: #ffdd7e; /* Màu chữ vàng nhạt */
    padding: 5px 0;
    z-index: 9999; /* Đảm bảo nó nổi lên trên tất cả các thành phần khác */
    overflow: hidden; /* Ẩn phần chữ chạy ra ngoài màn hình */
    white-space: nowrap; /* Ngăn chữ bị xuống dòng */
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
}

#marquee-container.hidden {
    display: none; /* Dùng để ẩn/hiện */
}

.marquee-text {
    display: inline-block;
    padding-left: 100%; /* Bắt đầu chạy từ bên phải màn hình */
    animation: marquee-animation 15s linear infinite; /* Tên animation, thời gian, kiểu và lặp lại */
}

/* Định nghĩa chuyển động của animation */
@keyframes marquee-animation {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); } /* Di chuyển sang hết bên trái */
}


/* ========================================================== */
/* ==      CSS CHUẨN CHO FOOTER & THANH TRẠNG THÁI           == */
/* ========================================================== */

/* 1. THANH TRẠNG THÁI (Sẽ nằm ngay trên footer) */
#activity-status-bar {
    position: fixed;
    left: 0;
    width: 100%;
    height: 50px; /* Chiều cao của thanh trạng thái */
    z-index: 1001; /* z-index cao hơn footer để luôn nổi lên trên */
    
    /* ĐỊNH VỊ CHUẨN: 
       Cách cạnh dưới của màn hình một khoảng bằng chiều cao của footer (65px) */
    bottom: 65px; 
    
    /* Các thuộc tính giao diện khác */
    background: linear-gradient(to right, #2c3e50, #34495e);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
    
    /* Thuộc tính để điều khiển ẩn/hiện bằng JS */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
}

/* Lớp .show dùng để kích hoạt hiển thị thanh trạng thái */
#activity-status-bar.show {
    opacity: 1;
    visibility: visible;
}


/* 2. ĐIỀU CHỈNH LAYOUT CỦA TOÀN TRANG */
/* Khi thanh trạng thái hiện ra, chúng ta cần tạo khoảng trống ở dưới cùng của trang */
body.status-bar-active {
    /* Quan trọng: Khoảng đệm phải bằng TỔNG CHIỀU CAO của cả footer và thanh trạng thái cộng lại.
       Công thức: 65px (footer) + 50px (thanh trạng thái) = 115px */
    padding-bottom: 115px !important;
}

/*nút cài đặt */
/* ========================================================== */
/* ==                  CSS CHO PANEL CÀI ĐẶT                 == */
/* ========================================================== */

/* Nội dung chính của panel */
#settings-panel-content {
    background: #1f1f23;
    border: 1px solid #555;
    border-radius: 8px;
    width: 90%;
    max-width: 600px; /* Kích thước vừa phải, không full màn hình */
    min-height: 400px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 5px 25px rgba(0,0,0,0.5);
    padding: 0; 
    position: relative; 
}

/* Phần header của panel */
.settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: rgba(0,0,0,0.2);
    border-bottom: 1px solid #444;
}

.settings-header h3 {
    margin: 0;
    color: #E48F45;
    font-size: 1.4em;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Thanh điều hướng tab */
.settings-tabs-nav {
    display: flex;
    background-color: #2a2a2e;
    padding: 0 10px;
    border-bottom: 1px solid #444;
}

.settings-tab-link {
    background: none;
    border: none;
    color: #a0a0a0;
    padding: 12px 20px;
    font-size: 1em;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border-bottom: 3px solid transparent;
}

.settings-tab-link:hover {
    color: #E48F45;
}

.settings-tab-link.active {
    color: #fff;
    font-weight: bold;
    border-bottom: 3px solid #E48F45;
}

/* Khu vực chứa nội dung các tab */
.settings-panel-body {
    padding: 25px;
    overflow-y: auto;
    flex-grow: 1; 
}

.settings-tab-content {
    display: none;
}

.settings-tab-content.active {
    display: block;
}


/* ========================================================== */
/* ==              CSS CHO TAB ÂM THANH (TU TIÊN)           == */
/* ========================================================== */

.sound-setting-item {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.setting-label {
    color: #d4af37; /* Vàng kim loại, phong cách tu tiên */
    font-weight: bold;
    font-size: 1.1em;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    gap: 5px;
    width: 120px; /* Đảm bảo căn chỉnh */
}

/* Nút Bật/Tắt */
.toggle-button {
    position: relative;
    width: 60px;
    height: 30px;
    background-color: #333;
    border-radius: 15px;
    border: 2px solid #555;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.toggle-button.active {
    background-color: #8fbc8f; /* Xanh lục bảo khi bật */
    border-color: #a9d1a9;
}

.toggle-inner {
    position: absolute;
    left: 2px;
    top: 2px;
    width: 26px;
    height: 26px;
    background-color: #eee;
    border-radius: 50%;
    transition: transform 0.3s ease-in-out;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.toggle-button.active .toggle-inner {
    transform: translateX(30px);
    background-color: #f0fff0; /* Trắng ngà khi bật */
}

/* Thanh trượt âm lượng */
.volume-slider {
    width: 200px;
    height: 10px;
    -webkit-appearance: none;
    background: #444;
    border-radius: 5px;
    outline: none;
    border: 1px solid #666;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #d4af37; /* Vàng kim loại cho nút trượt */
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #b8860b;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.6);
}

.volume-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #d4af37;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #b8860b;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.6);
}

#volume-value {
    color: #ccc;
    font-size: 0.9em;
    width: 40px;
    text-align: right;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}

/* ========================================================== */
/* ==      CSS CHO TRÌNH PHÁT NHẠC PHONG CÁCH TU TIÊN       == */
/* ========================================================== */

.music-player {
    margin-top: 25px;
    border-top: 1px solid rgba(228, 143, 69, 0.3);
    padding-top: 20px;
}

.playlist-container {
    max-height: 150px;
    overflow-y: auto;
    margin-bottom: 15px;
    background-color: rgba(10, 10, 10, 0.4);
    border-radius: 6px;
    border: 1px solid #444;
    padding: 8px;
}

/* Tùy chỉnh thanh cuộn cho hợp phong cách */
.playlist-container::-webkit-scrollbar {
    width: 6px;
}
.playlist-container::-webkit-scrollbar-track {
    background: #222;
}
.playlist-container::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 3px;
}
.playlist-container::-webkit-scrollbar-thumb:hover {
    background-color: #E48F45;
}

.playlist-title {
    color: #E48F45;
    font-size: 1.2em;
    margin: 0 0 10px 5px;
    text-align: center;
    font-weight: normal;
}

#music-playlist {
    list-style: none;
    padding: 0;
    margin: 0;
}

#music-playlist li {
    color: #b0b0b0;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 4px;
    border-bottom: 1px solid #3a3a3a;
    font-size: 0.9em;
}

#music-playlist li:last-child {
    border-bottom: none;
}

#music-playlist li:hover {
    background-color: rgba(228, 143, 69, 0.1);
    color: #ffdd99;
}

/* Style cho bài hát đang được chọn */
#music-playlist li.active {
    background-color: rgba(228, 143, 69, 0.9);
    color: #111;
    font-weight: bold;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}

.player-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.control-button {
    background: linear-gradient(145deg, #4a4a4a, #3a3a3a);
    border: 1px solid #777;
    color: #E48F45;
    font-size: 1.3em;
    cursor: pointer;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}

.control-button:hover {
    color: #fff;
    border-color: #E48F45;
    transform: scale(1.1);
}

.time-progress {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 10px;
}

.time-label {
    color: #aaa;
    font-size: 0.9em;
    width: 45px;
    text-align: center;
}

.timeline-slider {
    flex-grow: 1;
    -webkit-appearance: none;
    appearance: none;
    background: #444;
    height: 6px;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    background-image: linear-gradient(#E48F45, #E48F45);
    background-size: 0% 100%;
    background-repeat: no-repeat;
}

.timeline-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: #ffdd99;
    border-radius: 50%;
    border: 2px solid #E48F45;
    box-shadow: 0 0 8px rgba(228, 143, 69, 0.7);
}

.timeline-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: #ffdd99;
    border-radius: 50%;
    border: 2px solid #E48F45;
    box-shadow: 0 0 8px rgba(228, 143, 69, 0.7);
}

/* cài đặt */
/* ========================================================== */
/* ==         CSS CHO TÙY CHỌN TỰ ĐỘNG BÁN (MỚI)          == */
/* ========================================================== */

.setting-section {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(228, 143, 69, 0.2);
}

.setting-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.setting-section-title {
    color: #E48F45;
    font-size: 1.2em;
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.autosell-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
}

.autosell-option {
    position: relative;
}

.autosell-checkbox {
    /* Ẩn checkbox gốc */
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.autosell-label {
    display: block;
    padding: 12px;
    text-align: center;
    border-radius: 6px;
    border: 2px solid #555;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
}

/* Giao diện mặc định cho các phẩm chất */
.autosell-label.pham-pham { color: #ccc; border-color: #6c757d; }
.autosell-label.trung-pham { color: #63ff8c; border-color: #28a745; }
.autosell-label.thuong-pham { color: #85e0ff; border-color: #0dcaf0; }

/* Thay đổi giao diện khi checkbox được chọn */
.autosell-checkbox:checked + .autosell-label {
    color: #111;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}

.autosell-checkbox:checked + .autosell-label.pham-pham { background-color: #6c757d; }
.autosell-checkbox:checked + .autosell-label.trung-pham { background-color: #28a745; box-shadow: 0 0 15px #28a745; }
.autosell-checkbox:checked + .autosell-label.thuong-pham { background-color: #0dcaf0; box-shadow: 0 0 15px #0dcaf0; }


/* ========================================================== */
/* == CSS CHUẨN CHO CHECKBOX TỰ ĐỘNG BÁN (PHIÊN BẢN HOÀN CHỈNH) == */
/* ========================================================== */

/* Dùng ID để tăng độ ưu tiên và đảm bảo các quy tắc này luôn được áp dụng */

#settings-panel-content .autosell-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
}

/* Định dạng lại khung chứa checkbox và label */
#settings-panel-content .autosell-option {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 10px 15px;
    border-radius: 6px;
    border: 1px solid #444;
    transition: border-color 0.2s ease-in-out;
}

#settings-panel-content .autosell-option:hover {
    border-color: #E48F45;
}

/* Reset lại label để nó chỉ là văn bản */
#settings-panel-content .autosell-label {
    padding: 0;
    border: none;
    background: none !important;
    box-shadow: none;
    text-align: left;
    font-weight: bold;
    color: inherit; /* Kế thừa màu từ các class phẩm chất */
    cursor: pointer;
}

/* Đảm bảo checkbox luôn hiển thị và có giao diện đẹp */
#settings-panel-content .autosell-checkbox {
    opacity: 1;
    position: static;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: #E48F45; /* Màu dấu tick */
    cursor: pointer;
}

/* Đặt màu chữ cho các label phẩm chất */
#settings-panel-content .autosell-label.pham-pham { color: #ccc; }
#settings-panel-content .autosell-label.trung-pham { color: #63ff8c; }
#settings-panel-content .autosell-label.thuong-pham { color: #85e0ff; }


/* ========================================================== */
/* ==      NÂNG CẤP NÚT LƯU CÀI ĐẶT - PHONG CÁCH TU TIÊN   == */
/* ========================================================== */

/* 1. Định nghĩa animation cho hiệu ứng "hào quang" */
@keyframes mystical-glow {
  0% {
    box-shadow: 0 0 7px rgba(255, 204, 102, 0.4), 0 0 15px rgba(228, 143, 69, 0.3);
    border-color: rgba(255, 204, 102, 0.7);
  }
  50% {
    box-shadow: 0 0 15px rgba(255, 204, 102, 0.7), 0 0 30px rgba(228, 143, 69, 0.5);
    border-color: rgba(255, 224, 179, 1);
  }
  100% {
    box-shadow: 0 0 7px rgba(255, 204, 102, 0.4), 0 0 15px rgba(228, 143, 69, 0.3);
    border-color: rgba(255, 204, 102, 0.7);
  }
}

/* 2. Style chính cho nút bấm */
#save-settings-btn {
    /* -- Bố cục và chữ -- */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 30px;
    font-size: 1.1em;
    font-weight: bold;
    color: #f0e6d2; /* Màu chữ như giấy da dê */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);

    /* -- Nền và Viền -- */
    background: linear-gradient(145deg, #4a3728, #3b2a1f); /* Nền màu gỗ mun/đá tối */
    border: 2px solid; /* Viền sẽ được tô màu bởi animation */
    border-radius: 8px;
    
    /* -- Hiệu ứng và chuyển động -- */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), inset 0 1px 2px rgba(255, 229, 194, 0.1);
    animation: mystical-glow 4s infinite ease-in-out; /* Áp dụng animation hào quang */
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    position: relative;
    overflow: hidden; /* Cần cho hiệu ứng lóe sáng */
}

/* 3. Hiệu ứng "lóe sáng" khi di chuột vào */
#save-settings-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 229, 194, 0.3), transparent);
    transition: left 0.5s ease-in-out;
}

#save-settings-btn:hover::before {
    left: 100%; /* Di chuyển vệt sáng qua nút */
}

/* 4. Hiệu ứng khi di chuột và nhấn */
#save-settings-btn:hover {
    transform: translateY(-2px); /* Nút hơi nhô lên */
    color: #fff;
    /* Tăng cường độ hào quang khi hover */
    animation-play-state: paused; /* Tạm dừng animation mặc định để ưu tiên hiệu ứng hover */
    box-shadow: 0 6px 20px rgba(255, 204, 102, 0.5), inset 0 1px 2px rgba(255, 229, 194, 0.2);
}

#save-settings-btn:active {
    transform: translateY(0px); /* Nút bị nhấn xuống */
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.6); /* Tạo hiệu ứng lõm vào trong */
}
/* Căn giữa cho khu vực chứa nút Lưu Cài Đặt */
#settings-panel-content .setting-actions {
    display: flex;
    justify-content: center; /* Đây là dòng quan trọng nhất để căn giữa */
    margin-top: 25px;
}


/* ========================================================== */
/* ==          CSS CHO PANEL HƯỚNG DẪN (TU TIÊN)           == */
/* ========================================================== */

#guide-panel-overlay {
    z-index: 1005;
}

#guide-panel-content {
    background: linear-gradient(160deg, #2c251e, #1a1a1d);
    border: 2px solid #8a6d3b;
    border-radius: 12px;
    width: 90%;
    max-width: 800px;
    height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.7), inset 0 0 5px rgba(228, 197, 158, 0.2);
    padding: 0;
    position: relative;
    color: #dcdcdc;
}

.guide-panel-header {
    padding: 15px 25px;
    text-align: center;
    border-bottom: 1px solid #5a4a3a;
    background: rgba(0, 0, 0, 0.2);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.guide-panel-header h3 {
    margin: 0;
    color: #E4C59E;
    font-size: 1.8em;
    font-weight: normal;
    text-shadow: 0 0 10px #E48F45;
}

.guide-panel-header .fa-scroll {
    margin-right: 15px;
}

.guide-panel-body {
    padding: 15px 30px;
    overflow-y: auto;
    flex-grow: 1;
}

.guide-panel-body::-webkit-scrollbar { width: 10px; }
.guide-panel-body::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); border-radius: 10px; }
.guide-panel-body::-webkit-scrollbar-thumb { background-color: #8a6d3b; border-radius: 10px; border: 2px solid #2c251e; }
.guide-panel-body::-webkit-scrollbar-thumb:hover { background-color: #E4C59E; }

.guide-section {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(138, 109, 59, 0.3);
}
.guide-section:last-child { border-bottom: none; }

.guide-section h4 {
    color: #E48F45;
    font-size: 1.4em;
    text-align: center;
    margin: 15px 0 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}
.guide-section h4 i { font-size: 0.9em; }

.deco-left, .deco-right {
    display: inline-block;
    width: 60px;
    height: 1px;
    background: linear-gradient(to right, transparent, #8a6d3b);
}
.deco-left { background: linear-gradient(to left, transparent, #8a6d3b); }

.guide-section p {
    font-size: 1.05em;
    line-height: 1.7;
    text-align: justify;
    text-indent: 2em;
}

.keyword { color: #85e0ff; font-weight: bold; }
.keyword-nl { color: #63ff8c; font-weight: bold; }
.keyword-lt { color: #ffde7a; font-weight: bold; }
.keyword-st { color: #ff6b6b; font-weight: bold; }
.keyword-pt { color: #6b9cff; font-weight: bold; }
.keyword-sm { color: #ffb3ba; font-weight: bold; }