/* Nhúng font từ Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

@font-face {
	font-family:Aquawax-Regular;
	src:url("fonts/Aquawax-Regular-trial.ttf");
}
@font-face {
	font-family:Roboto-Regular;
	src:url("fonts/Roboto-Regular.ttf");
}
body {
    margin: 0;
    padding: 0;
	background-color: #e9e9f1 !important;
	/*font-family:Roboto-Regular !important;*/
	font-family: 'Inter', sans-serif!important;
    -webkit-font-smoothing: antialiased;
    color: #1c1e21; /* Màu đen của Facebook, không dùng đen tuyền #000 */
}
*, button, input, select, textarea, .button, h1, h2, h3, h4, h5, h6
{
    font-family: 'Inter', sans-serif !important;
}
.fa {
    font: normal normal normal 14px / 1 FontAwesome !important;
}
.fa-brands, .fab {
    font-family: "Font Awesome 6 Brands" !important;
}
.fa-solid, .fas, .fa-classic, .fa-regular, .far {
    font-family: "Font Awesome 6 Free" !important;
}
[class^="icon-"], [class*=" icon-"] {
    font-family: FontAwesome!important;
}
a {
    color: #000;
	text-decoration:none !important;
}
img {
	max-width: 100%;
}
ol, ul {
	margin: 0 !important;
}
.text-right {text-align:right;}
.base_color {
	color: #f50;
}
.base_color_2 {
	color: #f50;
}
.font-bold {
	font-weight: bold;
}
.w100 {
	width: 100%;
}
.mg0 {
	margin: 0 !important;
}
.mgl0 {
	margin-left: 0;
}
.mgr0 {
    margin-right: 0;
}
.mgt0 {
    margin-top: 0;
}
.mgb0 {
    margin-bottom: 0;
}
.pd0 {
	padding: 0 !important;
}
.pdl0 {
	padding-left: 0 !important;
}
.pdr0 {
    padding-right: 0 !important;
}
.mt-30 {margin-top: 30px;}
.mb-30 {margin-bottom: 30px;}
.mt-50 {margin-top: 50px;}
.mt-60 {margin-top: 60px;}
.h30 {height:30px;}
.uppercase {
	text-transform: uppercase;
}
.desktop {
	display: block !important;
}
.mobile {
	display: none !important;
}
.text-center {
	text-align: center;
}
.cb:after {
	clear: both;
	content: '';
    display: block;
}
.text-danger {
    color: red;
}
.text-success {
	 color:#04AA6D;
}
.css-scroll {
    overflow-y: scroll;
    margin-bottom: 20px;
    padding-right: 5px;
}
.css-scroll::-webkit-scrollbar {
    width: 12px;
}
/* Track (thanh chua)*/
.css-scroll::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
/* Handle (thanh scroll)*/
.css-scroll::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,255,255,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
.css-scroll::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(255,255,255,0.4); 
}
.css-scroll .table {margin-bottom:0;}
.tableFixHead thead th { position: sticky; top: -1px; z-index: 1; }

@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}
.pagination {
    list-style: none;	
    text-align: center;
    margin: 20px;
}
.pagination a, .pagination strong {
    background: #fff;
    display: inline-block;
    padding: 5px 15px;
    text-decoration: none;
	line-height: 1.5em;
	 border: 0; outline: 0;
	color: #8A5359;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
	font-size:13px;
	font-weight:bold;
	border: 1px dotted #f50;
    margin-left: 3px !important;
}
.pagination a:hover {
    background-color: #f50;
    color: #fff;
}
.pagination a:active, .pagination li.active a {
	background: #f50;
	color:#fff;
}
.pagination strong {
    color: #fff;
    background-color: #BEBEBE;
}
.clearfix::after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
html[xmlns] .clearfix {
display: block;
}
.pagination {
	display: block;
	text-align:center;
}
.pagination>li {
    display: inline-block;
}

.d-flex {
	display:flex;
}
.about-user {
    position: relative;
}
.search-results {
	text-align: left;
}
.top-after-header .box_icon.box_warp.box_no_border {
    z-index: 99999;
}
.top-after-header .col-md-12 a:hover {
    background-color: initial !important;
}
ul.single-question-vote, .single-question-vote-result {
	display: none;
}
.about-user ul li:nth-child(even) {
    width: 45%;	
}

.css-scroll {
    max-height: 270px;
    overflow-y: scroll;
    margin-bottom: 20px;
    padding-right: 5px;
}
.css-scroll::-webkit-scrollbar {
    width: 12px;
}
/* Track (thanh chua)*/
.css-scroll::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
/* Handle (thanh scroll)*/
.css-scroll::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,255,255,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
.css-scroll::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(255,255,255,0.4); 
}

/*
.wrap-pop {display:none;} 
*/
#header-top .social_icons ul li a {
    color: #fff;
	line-height: initial;
}
#header-top .social_icons ul li a:hover, #header-top .social_icons ul li a:hover i {
    color: #000;
}
#member_online ul li {
    padding-bottom: 5px;
    margin-bottom: 5px;
	position: relative;
	border-bottom: 1px solid #eee;
}
#member_online ul li a {
    color: #000;
}
#member_online ul li h6 {
    margin: 2px 0;
}
.profile-button {
	right: 20px !important;
	bottom: 70px !important;
}
.logo-img {
	height:75px;position: relative;z-index:9;
}
.button.black, .button.dark_button.color, .button.color:hover, input[type="submit"]:hover, .woocommerce button[type="submit"]:hover, .single_add_to_cart_button:hover, .return-to-shop a:hover, .button-default.empty-cart:hover, .wc-proceed-to-checkout a:hover, .button[name="calc_shipping"]:hover, .price_slider_amount button.button[type="submit"]:hover, .wc-proceed-to-checkout .button.wc-forward:hover, .buttons .button.checkout.wc-forward:hover, .button.view:hover {
    background: #c40 !important;
}
.button.large {
    border-radius: 5px;
}
.logo img {
	height: 60px;
    width: auto;
    max-height: initial;
}
.post-read-more:before {
    content: "\f178";
	color: #fff;
}
.wpcf7-spinner, .header-search {display:none;}
.header-top-nav li {
    margin-right: 10px;
}

#header-top {
	height: auto;
	padding:10px 0;
}
#header-top h1 {
	text-transform:uppercase;
	color: #fff;
	font-size:20px;
	line-height:60px;
	margin: 0;
    margin-top: 5px;	
	/*letter-spacing:15px;
	text-shadow: 0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424, 0 7px 0 #222, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212, 0 22px 30px rgba(0,0,0,0.9);
	*/
}
#header-top a i {
	font-size:13px !important;
}
#menu-header-menu-1 {
	text-align:center;
}
/*
#header-top li {
	color: #fff;
	font-size:16px;
}
#header-top li a {
	color: #fff;
}
*/
.navigation {
    float: none;
}
.navigation>.header-menu>ul li {
    float: none;
    display: inline-block;
}
.navigation>.header-menu>ul>li>a {
	color: #f50;
    text-transform: uppercase;
	font-weight: normal;
    font-size: 16px;
}
#header {
    background-color: #fff;
}
.section-warp {
    min-height: 600px;
}
.breadcrumbs h1 {
    text-transform: uppercase;
}
table thead {
	text-align:center;
}
table td {
	color: #000;
}
.single-post, .page-content, .post, .widget {
    border-radius: 5px;
}
.product-title {
	font-size: 26px;
	color: #000;
    margin-top: 10px;	
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
}
.big_title {
	color: #f50 !important;
    border-bottom: 2px solid #dedede;
    margin-bottom: 20px;
    padding-bottom: 10px;
    font-size: 20px !important;
}

.price {color:red;}
/*
#header-social {
    padding: 10px 0;
    background: #fff;
    border-bottom: 1px solid #eee;
}
.social_icons ul li {
    float: none;
    display: inline-block;
    margin: 0 20px;
}
*/
.social_icons ul {
    float: none;
    display: flex;
    gap: 20px;	
}
.social_icons ul li {
    float: none;
    margin: 0;
}
#header {
    height: auto;
    padding: 10px 0;
	margin-bottom: 30px;
}
.breadcrumbs {
    margin-bottom: 30px;
	margin-top: -30px;
}
.navigation>.header-menu>ul li {
    margin: 0;
}
.navigation>.header-menu>ul>li>a {
	float:none;
}
.blog_2.post .post-img a img {
    height: 160px;
    object-fit: cover;
}
.button.color, input[type="submit"], input[type="button"], .navigation>.header-menu>ul>li.current-menu-item>a, .navigation>.header-menu>ul>li:hover>a, .tab a.current, .go-up {
	background-color: #f50;
}
.tabs {
    border-bottom-color: #f50;
}
.tab a.current {
    border-top-color: #f50;
}
.crumbs .current {
    color: #ccc;
}

/* v3 */
#room_list {
	border-bottom:1px solid #eee;
	margin-bottom:30px;
	padding-bottom:30px;
	display:flex;
	flex-wrap: wrap;
    align-items: center;
	justify-content: center;
}
#room_list p {margin-bottom: 0;text-align: center;width: 100%;}
.room_item {width: 30%;margin: 10px;padding:8px;border-radius:10px;background: #eee;cursor:pointer;position:relative;}
.room_item.full {background: #f50;border-color: #fff;}
.room_item.full:hover {background: #c40;}
.room_item.full:hover a {color: #fff;}
.room_item.full a {color: #fff;}
/*.room_item.full a {color: #fff;}*/

.room_item.half {background-image: linear-gradient(to right, rgba(255, 0, 0, 0), #f50);}
.room_item.half .btn_del_table, .room_item.half .fa-lock {color: #fff;}
.room_item:hover {box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;}
.room_item:hover a {color: #000;}
.room_item a {display: flex;gap: 10px;}
.room_item .avatar {border-radius:50%;width:50px;height:50px;object-fit: cover;}
.size_big {font-size: 22px;font-weight: bold;}
.chess_side_img {    
	position: absolute;
    right: 10px;
    top: 10px;
    width: 25px;
    border-radius: 50%;	
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.h2_choosegame {
    text-transform: uppercase;
    margin-top: 20px;
    margin-bottom: 30px;
    text-align: center;
    font-size: 35px;
    letter-spacing: 2px;
}
.setting_time_item .form-control {
	width:50px;height: 30px;line-height: 30px;padding:0;margin: 0;background: #fff;padding-left: 5px;color:#666;
}
.setting_name .form-control {
	height: 30px;line-height:30px;padding:0;margin: 0;background: #fff;padding-left: 5px;color:#666;
}
.setting_area, .setting_dg {
	display: flex;gap: 10px;align-items: center;justify-content: end;
	border-bottom: 1px solid #eee;
    margin-bottom: 30px;
    padding-bottom: 30px;
}
.setting_2 {
	gap: 10px;
}
.setting_3 {
	border-bottom: 0;
    padding-bottom: 0;
}
.setting_area h2 {
	margin:0;
    position: absolute;
    left: 20px;
    font-size: 22px;
	text-transform: uppercase;
}
.roomName, #roomPW, #roomPW_dg {
    width: 150px !important;
}
select.form-control, #club_id {
	color:#000;
	background: #fff;
	font-weight: normal;
    padding: 5px;
    height: 30px;
}
/* Ẩn mũi tên lên/xuống trong input type="number" */
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
     margin: 0;
}
/* Hỗ trợ thêm cho Firefox */
input[type="number"] {
     -moz-appearance: textfield;
}
.user-profile-img img {
    object-fit: cover;
}
/*
.menu_lang {
	position:absolute;
    right: 15px;
    top: 5px;
}
*/
.menu_lang img {
	width:30px;
}
.btn_set_time {
	height: 28px;line-height: 0;border-radius: 3px;padding: 20px;text-transform:uppercase;
}
.avatar_member {
	object-fit:cover;
}
.btn_del_table {
	position: absolute;
    right: 10px;
    top: 10px;
    text-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	color:#f50;
}
.btn_clear_chat {
	position: absolute;
    right: 35px;
    bottom: 5px;
    text-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	color:#f50;
}
.room_item:hover .btn_del_table, .room_item:hover .btn_clear_chat {color: #f50;}
.room_item .btn_del_table:hover, .room_item .btn_clear_chat:hover {color: #f50;}
.room_item .fa-lock {
    position: absolute;
    right: 10px;
    bottom: 10px;
    color: #f50;
}
.room_item.full .fa-lock {
    color: #fff;
}
.post-content>ul li, .single-question .question-desc ul li {
    list-style: disc !important;
}

/* Container chính cho khu vực hàng chờ */
#area_member_queue_name {
    display: flex; /* Bật Flexbox */
    flex-direction: row; /* Sắp xếp ngang */
    flex-wrap: wrap; /* Cho phép xuống dòng */
    gap: 10px; /* Khoảng cách giữa các thẻ */
    padding: 5px;
    background-color: #f8f8f8; /* Màu nền nhẹ */
    border-radius: 5px;
    border: 1px solid #ddd;
    min-height: 55px; 
    align-items: center; /* Căn giữa theo chiều dọc */
	position: relative; 
    overflow: hidden;
}


/* Text "Hàng chờ" ở chế độ nền (Watermark) */
#area_member_queue_name::before {
    content: "Hàng chờ thi đấu";
    position: absolute;
    top: 50%; /* Đặt giữa container (vertical) */
    left: 50%; /* Đặt giữa container (horizontal) */
    transform: translate(-50%, -50%); /* Dịch chuyển để căn chính giữa */
    font-size: 20px; /* Kích thước lớn */
    font-weight: bold;
    /* Sử dụng màu tím chủ đạo (#f50) với độ mờ thấp (0.08) */
    color: rgba(119, 0, 171, 0.1); 
    pointer-events: none; /* Đảm bảo không chặn click/tương tác với các thẻ thành viên */
    white-space: nowrap; 
    /* z-index: 0; (Mặc định sẽ nằm dưới nội dung thật) */
    text-transform: uppercase;	
}

/* Thẻ của từng thành viên trong hàng chờ */
.queue-member-card {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 20px; /* Bo tròn (pill-shaped) */
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
    cursor: default;
    position: relative;	
}

/* Hiệu ứng khi hover */
.queue-member-card:hover {
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
    transform: translateY(-1px);
}

/* Avatar của thành viên */
.queue-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%; /* Ảnh tròn */
    margin-right: 8px;
    object-fit: cover;
    border: 2px solid #ccc;
}

/* Số thứ tự trong hàng */
.queue-index {
    font-weight: bold;
    color: #f50; /* Màu chính (base_color) */
    margin-right: 5px;
    font-size: 0.9em;
}

/* Tên của thành viên */
.queue-name {
    font-size: 1em;
    color: #333;
    white-space: nowrap; 
}

/* Thẻ thành viên đầu tiên trong hàng (Player 1) */
.queue-member-card.first-in-line {
    border: 2px solid #FFD700; /* Viền vàng nổi bật */
    background-color: #FFFACD;
    padding-right: 5px; /* Điều chỉnh nếu có thêm status */
}

/* Hiển thị trạng thái (chỉ áp dụng cho người đầu hàng) */
.queue-status {
    margin-left: 8px;
    font-size: 0.8em;
    font-weight: bold;
    color: #DAA520; /* Màu vàng đậm */
}

/* CSS cho Popup Thắng Cuộc (winner_prompt_box) */
#winner_prompt_box {
    /* Nền chung của popup */
    background-color: #fff; /* Nền trắng */
    border-radius: 12px; /* Bo góc nhẹ nhàng */
    font-family: 'Segoe UI', 'Roboto', sans-serif; /* Font hiện đại */
    color: #333; /* Màu chữ tổng thể */
    margin: auto; /* Căn giữa */
    position: relative; /* Để có thể thêm các hiệu ứng khác */
    overflow: hidden; /* Đảm bảo mọi thứ nằm trong bo góc */
}

#winner_prompt_box h3 {
    /* Tiêu đề "Chúc mừng" */
    font-size: 28px; /* Lớn hơn, nổi bật hơn */
    color: #4CAF50; /* Màu xanh lá cây của sự chiến thắng */
    margin-bottom: 15px; /* Khoảng cách dưới */
    font-weight: 700; /* Đậm hơn */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* Bóng chữ nhẹ */
}

#winner_prompt_box p {
    /* Đoạn văn mô tả */
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
    color: #555;
}

#countdown_timer {
    /* Đồng hồ đếm ngược */
    font-size: 48px; /* Rất lớn, dễ nhìn */
    font-weight: 900; /* Cực đậm */
    color: #FF5722; /* Màu cam nổi bật, tạo cảm giác khẩn cấp */
    margin: 20px 0; /* Khoảng cách trên dưới */
    letter-spacing: 2px; /* Tăng khoảng cách chữ */
    animation: pulse 1.5s infinite; /* Hiệu ứng nhấp nháy nhẹ */
}

/* Keyframes cho hiệu ứng nhấp nháy */
@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.9; }
    100% { transform: scale(1); opacity: 1; }
}

#winner_prompt_box .btn {
    /* Nút bấm */
    padding: 12px 25px; /* Kích thước nút lớn hơn */
    font-size: 16px; /* Chữ to hơn */
    font-weight: 600; /* Đậm hơn */
    border-radius: 8px; /* Bo góc cho nút */
    cursor: pointer; /* Biểu tượng con trỏ */
    transition: all 0.3s ease; /* Hiệu ứng chuyển động mượt mà */
    text-transform: uppercase; /* Chữ hoa */
}

#winner_prompt_box .btn-success {
    background-color: #4CAF50; /* Xanh lá */
    border-color: #4CAF50;
    color: #fff;
}

#winner_prompt_box .btn-success:hover {
    background-color: #45a049; /* Đậm hơn khi hover */
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4); /* Bóng nhẹ */
    transform: translateY(-2px); /* Nhấc nhẹ nút lên */
}

#winner_prompt_box .btn-danger {
    background-color: #F44336; /* Đỏ */
    border-color: #F44336;
    color: #fff;
}

#winner_prompt_box .btn-danger:hover {
    background-color: #da190b; /* Đậm hơn khi hover */
    box-shadow: 0 4px 15px rgba(244, 67, 54, 0.4); /* Bóng nhẹ */
    transform: translateY(-2px); /* Nhấc nhẹ nút lên */
}


.fancybox-content {
    background: transparent !important; 
    padding: 0 !important;
}

.msgln {
	color: #333!important;
    margin: 3px 0!important;
    padding: 2px 5px;
}
.msg_sys {
    color: #707C8C !important;	
	background-color: #f6f3f9; 
    border-left: 4px solid #f50; 
    padding: 8px 12px; 
    margin: 6px 0; 
    border-radius: 4px; 
}
.msgln .user_name {
    color: #640594; 
    margin-right: 5px; 
}
.msg_sys .fa-info-circle {
	color: #f50 !important;	
    margin-right: 5px;	
    opacity: 0.8;	
}
#footer-bottom {
    margin-top: 30px;
}
.logo_img {
	height:80px;
}

.more:hover, .button.color, .button.black:hover, .go-up, .widget_portfolio .portfolio-widget-item:hover .portfolio_img:before, .popular_posts .popular_img:hover a:before, .widget_flickr a:hover:before, .widget_highest_points .author-img a:hover:before, .question-author-img:hover span, .pagination a:hover, .pagination span:hover, .pagination span.current, .about-author .author-image a:hover:before, .avatar-img a:hover:before, .question-comments a, .flex-direction-nav li a:hover, .button.dark_button.color:hover, .table-style-2 thead th, .progressbar-percent, .carousel-arrow a:hover, .box_icon:hover .icon_circle, .box_icon:hover .icon_soft_r, .box_icon:hover .icon_square, .bg_default, .box_warp_colored, .box_warp_hover:hover, .post .boxedtitle i, .single-question-title i, .question-type, .post-type, .social_icon a, .page-content .boxedtitle, .main-content .boxedtitle, .flex-caption h2, .flex-control-nav li a.flex-active, .bxslider-overlay:before, .navigation .header-menu ul li ul li:hover>a, .navigation .header-menu ul li ul li.current_page_item>a, #header-top, .navigation>.header-menu>ul>li:hover>a, .navigation>.header-menu>ul>li.current_page_item>a, .navigation>.header-menu>ul>li.current-menu-item>a, .top-after-header, .breadcrumbs, #footer-bottom .social_icons ul li a:hover, .tagcloud a:hover, input[type="checkbox"], .login-password a:hover, .tab a.current, .question-type-main, .question-report:hover, .load-questions, .del-poll-li:hover, .styled-select::before, .fileinputs span, .post .post-type, .divider span, .widget_menu li.current_page_item a, .accordion .accordion-title.active a, .tab-inner-warp, .navigation_mobile, .user-profile-img a:hover:before, .post-pagination>span, #footer.footer_dark .tagcloud a:hover, input[type="submit"], .woocommerce button[type="submit"], .post-delete a, .post-edit a, .woocommerce [type="submit"][name="update_cart"]:hover, .buttons .button.wc-forward:hover, .button.checkout.wc-forward, .woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content, .woocommerce-page .widget_price_filter .price_slider_wrapper .ui-widget-content, ul.products li .woocommerce_product_thumbnail .woocommerce_woo_cart_bt .button, ul.products li .woocommerce_product_thumbnail .yith-wcwl-add-button .add_to_wishlist, .cart_list .remove, .wc-proceed-to-checkout .button.wc-forward, .single_add_to_cart_button, .return-to-shop a, .button-default.empty-cart, .wc-proceed-to-checkout a, .button[name="calc_shipping"], .price_slider_amount button.button[type="submit"], .button.checkout.wc-forward, .button.view, #footer.footer_dark .buttons .button.wc-forward, #footer.footer_dark .buttons .button.wc-forward:first-child:hover, .woocommerce-MyAccount-downloads-file.button.alt, .ask-button:hover, .ui-datepicker-header, .ui-datepicker-current-day, .mobile-bar-apps-colored .mobile-bar-content, .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #f50;
}
.div-btn-function button.button {
    background: #f50 !important;
}
.area_member_joined, .area_member_queue {
	background: #f50 !important;
}
.button:hover, .div-btn-function button.button:active, .div-btn-function button.button:focus, .div-btn-function button.button:hover, .div-btn-function button.button:active{
    background-color: #c40 !important;
}

.elo {
	font-size: 12px;
}
/* Căn chỉnh khối Elo bên phải */
.elo-display-wrapper {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #65676b;
    font-size: 14px;
}

.elo-display-wrapper i {
    font-size: 16px;
    color: #f50; /* Màu xanh đặc trưng hoặc giữ màu xám tùy bạn */
}

/* Định dạng màu sắc cho từng hệ số Elo trong chuỗi trả về từ hàm get_member_3_elo */
.elo_1 { color: #e67e22 !important; font-weight: bold; } /* Màu Cam */
.elo_2 { color: #27ae60 !important; font-weight: bold; } /* Màu Xanh lá */
.elo_3 { color: #2980b9 !important; font-weight: bold; } /* Màu Xanh dương */


/* biểu cảm thắng thua */
.player_status_icon {
	position: absolute;
    left: 0;
    top: 0;
    font-size: 3em; /* Kích thước lớn */
    display: inline-block;
    animation: bounce 0.8s infinite alternate; /* Hiệu ứng nảy lên */
    line-height: 1; /* Căn chỉnh dòng */
    vertical-align: middle; /* Căn giữa theo chiều dọc */
}

@keyframes bounce {
    0% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-5px) scale(1.1); } /* Nhảy nhẹ lên 5px */
    100% { transform: translateY(0) scale(1); }
}

.player_status img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
    /* animation: bounce 0.8s infinite alternate; */
    line-height: 1;
    vertical-align: middle;
    width: 90px;
}

/* room.php (trong thẻ <style>) */

/* Đảm bảo ô cờ (td) có position: relative để pseudo-element có thể định vị tuyệt đối */
#xiangqiboard td {
    position: relative;
    /* Các thuộc tính CSS khác của ô cờ */
}

/* --- HIỆU ỨNG CHO Ô ĐI (SOURCE SQUARE) --- */
/* Dot tròn (#f50) ở giữa ô cờ */
.last-move-source-highlight::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    /* Kích thước của dot (điều chỉnh nếu cần) */
    width: 20px; 
    height: 20px; 
    background-color: #f50; /* Màu cam/đỏ */
    border-radius: 50%; /* Tạo hình tròn */
    /* Dịch chuyển ngược lại 50% kích thước để căn giữa hoàn toàn */
    transform: translate(-50%, -50%); 
    z-index: 10; /* Đảm bảo dot nằm trên các hiệu ứng khác (nếu có) */
}

/* --- HIỆU ỨNG CHO Ô ĐẾN (TARGET SQUARE) --- */
/* Border xung quanh ô cờ (#f50) */
.last-move-target-highlight {
    border-radius: 50%;
    background: #f50;
}
.last-move-target-highlight img {
	border-radius: 50%;
    border: 1px solid #f50 !important;
    box-shadow: 0 0 5px #f50, 0 0 10px #f50;
}
#header-top a i.fa.fa-bell {
    font-size: 18px !important;
    background: #fff;
	color: #fa3e3e;
    border-radius: 50%;
    padding: 5px;
    width: 30px;
    height: 30px;
    line-height: 20px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}

/* vùng search */
/* Căn chỉnh vùng search */
.header-search-fb {
    float: left;
    display: flex;
    align-items: center;
	position: absolute;
    height: 30px;	
	top: 13px;
}

/* Khối bao quanh input và icon */
.search-input-wrapper {
    background-color: #f0f2f5; 
    border-radius: 20px;     
    padding: 5px 12px;
    display: flex;
    align-items: center;
    width: 300px;       
    transition: width 0.3s ease;
}

/* Icon kính lúp */
.search-input-wrapper i {
    color: #65676b;
    margin-right: 8px;
    font-size: 14px;
}

/* Input text */
.search-input-wrapper input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    color: #050505;
    width: 100%;
    margin: 0;	
}

.search-input-wrapper input::placeholder {
    color: #65676b;
}

/* Hiệu ứng khi nhấn vào ô search (rộng ra một chút) */
.search-input-wrapper:focus-within {
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    width: 350px;
}

/* Ẩn search trên điện thoại cực nhỏ nếu cần thiết */
@media (max-width: 768px) {
    .header-search-fb {
        display: none; /* Ẩn ở mobile nếu header quá chật */
    }
}

/* phần chuông và thông báo */ 
/* Chấm đỏ trên chuông */
.notif-badge {
    position: absolute;
    top: -8px;
    right: -10px;
    background-color: #fa3e3e;
    color: white;
    font-size: 11px;
    padding: 2px 5px;
    border-radius: 50%;
    font-weight: bold;
    border: 2px solid #ef5c2c; /* Màu cam của header để tiệp màu */
    display: block; /* Chỉnh thành none nếu không có thông báo */
}

/* Khung Popup */
.notif-popup {
    display: none;
    position: absolute;
    right: 0;
    top: 30px;
    width: 360px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.2);
    z-index: 999999;
    color: #050505;
    text-align: left;
    overflow: hidden;
}

.notif-header {
    padding: 12px 16px;
    font-weight: bold;
    font-size: 17px;
    border-bottom: 1px solid #ddd;
}

.notif-list {
    max-height: 400px;
    overflow-y: auto;
}

/* Từng mục thông báo */
.notif-item {
    display: flex;
    padding: 8px 16px;
    align-items: center;
    gap: 12px;
    text-decoration: none !important;
    color: #050505 !important;
    transition: background 0.2s;
}

.notif-item:hover { background-color: #f2f2f2; }
.notif-item.unread { background-color: #ebf5ff; }

.notif-item img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
}

.notif-text { font-size: 14px; line-height: 1.3; }
.notif-time { color: #f50; font-size: 12px; font-weight: 600; }

.notif-footer {
    text-align: center;
    padding: 10px;
    border-top: 1px solid #ddd;
    display: none;	
}

/* cho vùng search */
.search-results-container {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: none;
    z-index: 9999;
    border-radius: 8px;
    margin-top: 5px;
    overflow: hidden;
	max-height: 480px; 
    overflow-y: auto; 
    overflow-x: hidden;
}
/* Tùy chỉnh thanh cuộn cho đẹp giống Facebook (Chrome/Safari) */
.search-results-container::-webkit-scrollbar {
    width: 8px;
}
.search-results-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 8px;
}
.search-results-container::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 8px;
}
.search-results-container::-webkit-scrollbar-thumb:hover {
    background: #999;
}
.search-item {
    display: flex; align-items: center;
    padding: 10px 15px;
    text-decoration: none !important;
    border-bottom: 1px solid #f0f0f0;
}
.search-item:hover { background: #f2f3f5; }
.search-item img {
    width: 40px; 
	height: 40px;
    border-radius: 50%;
    margin-right: 12px;
    object-fit: cover;
    border: 1px solid #ddd;
	flex-shrink: 0;
}
.search-item .post-title {
    color: #1c1e21;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
	border: 0;
    margin: 0;
    padding: 0;
}
.search-view-all {
    display: block;
    text-align: center;
    padding: 10px;
    font-size: 13px;
    color: #f50;
    background: #f0f2f5;
}
.search-no-result { padding: 15px; text-align: center; color: #888; }

.active-lang {
    border: 1px solid #ff5500;
    padding: 2px 8px;
    border-radius: 5px;
    background: #fff;
}

/* update lại header cho mobile */
.mobile-nav-bar {
    background: #fff;
    border-bottom: 1px solid #ddd;
    position: sticky;
    top: 0;
    z-index: 1000;
    display: none; /* Chỉ hiện trên mobile */
}

@media (max-width: 768px) {
    .mobile-nav-bar { display: block; }
    .header-main, .mobile-aside { display: none !important; } /* Ẩn menu cũ */
}

.mobile-nav-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 15px;
}

.mobile-logo { height: 30px; }

.mobile-nav-tabs {
    display: flex;
    justify-content: space-around;
    border-top: 1px solid #f0f2f5;
}

.nav-tab-item {
    padding: 10px 0;
    flex: 1;
    text-align: center;
    font-size: 20px;
    color: #65676b;
    position: relative;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 12px;
}

.nav-tab-item.active {
    color: #f50;
    border-bottom: 3px solid #f50;
}

/* Badge thông báo màu đỏ */
.notification-wrapper { position: relative; display: inline-block; }
.noti-badge {
    position: absolute;
    top: -5px;
    right: -8px;
    background: #fa3e3e;
    color: #fff;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 10px;
    font-weight: bold;
}
/* Container bên phải cho 2 icon top */
.nav-right-group {
    display: flex;
    gap: 8px; /* Khoảng cách giữa search và menu */
}

/* Style icon dạng vòng tròn xám nhẹ của Facebook */
.nav-icon-circle {
    width: 36px;
    height: 36px;
    background: #f0f2f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #050505;
    text-decoration: none;
    font-size: 16px;
}

.nav-icon-circle:active {
    background: #e4e6eb;
}

/* Điều chỉnh lại padding cho top bar mobile */
.mobile-nav-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #fff;
}

/* Đảm bảo logo không quá to gây lệch hàng */
.mobile-logo {
    height: 28px;
    display: block;
}
/* Điều chỉnh layout top bar */
.mobile-nav-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
}

/* Thanh search mobile chiếm hết vùng trống ở giữa */
.mobile-nav-top .header-search-fb {
    flex-grow: 1; /* Đây là lệnh để nó chiếm vùng trống */
    margin: 0;
    display: block !important; /* Đảm bảo hiển thị trên mobile */
}

.mobile-nav-top .search-input-wrapper {
    background: #f0f2f5;
    border-radius: 20px;
    padding: 0 12px;
    height: 36px;
    display: flex;
    align-items: center;
}

.mobile-nav-top .search-input-wrapper input {
    background: transparent;
    border: none;
    font-size: 14px;
    padding-left: 8px;
    width: 100%;
    outline: none;
}

/* Ẩn bớt icon search cũ nếu thanh input đã lộ diện */
@media (max-width: 480px) {
    .mobile-hide { display: none; }
    .mobile-logo { height: 30px; } /* Thu nhỏ logo một chút để lấy thêm chỗ */
	.header-search-fb {position: initial;}
	.mobile-nav-top .search-input-wrapper {height:30px;}
	 #header .container {
        padding-right: 0!important;
        padding-left: 0!important;
    }
}
/* CSS dành riêng cho popup thông báo trên mobile */
@media (max-width: 768px) {
    .notif-popup.mobile-only-popup {
        position: fixed;
        top: 0; 
        left: 0;
        right: 0;
        width: 100%;
        height: 100vh; 
        box-shadow: 0 -5px 15px rgba(0,0,0,0.1);
        display: none;
        z-index: 999;
    }
    
    .notif-popup.mobile-only-popup.show {
        display: block;
        animation: slideUp 0.3s ease-out;
    }
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* Container kết quả tìm kiếm đổ xuống */
.search-results-container {
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 9999;
    border-radius: 8px;
}
.icon-chess-piece {
    width: 24px;
    height: 24px;
    border: 2px solid currentColor;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    font-family: "Microsoft JhengHei", "Source Han Sans", sans-serif;
}


/* login header */
.login {
    max-width: 450px;
}

.login .page-content {
    background: #ffffff;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    border: 1px solid #eee;
	margin-bottom:0;
}

.login .page-content h2 {
    text-align: center;
    font-weight: 700;
    color: #333;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.login-submit {
    float: none;
}
/* 2. Ô nhập liệu (Inputs) */
.form-inputs p {
    position: relative;
    margin-bottom: 20px;
}

.form-inputs input[type="text"], 
.form-inputs input[type="password"],
.form-inputs input[type="email"]
{
    width: 100%;
    padding: 12px 15px 12px 45px;
    border: 1px solid #ddd;
    border-radius: 8px;
    transition: all 0.3s ease;
    font-size: 15px;
    box-sizing: border-box;
    outline: none;
}

.form-inputs input:focus {
    border-color: #3498db;
    box-shadow: 0 0 8px rgba(52, 152, 219, 0.2);
}

.form-inputs p i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 18px;
}

/* 3. Nút bấm chính */
.login-submit input[type="button"] {
    width: 100%;
    background: #3498db;
    color: #fff;
    padding: 14px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
}

.login-submit input[type="button"]:hover {
    background: #2980b9;
}

/* 4. Khu vực điều hướng (Remember & Register) - Giải quyết lỗi layout */
.login-footer-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
}
.rememberme {
    margin-top: 0;
}
.rememberme label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    color: #666;
}

.rememberme input[type="checkbox"] {
    margin: 0 8px 0 0;
}

.register-link a {
    color: #ff5500;
    font-weight: 600;
    text-decoration: none;
    font-size: 14px;
}

.register-link a:hover {
    text-decoration: underline;
}

/* 5. Ngăn cách (Divider) */
.wv-divider--options--fluid {
    text-align: center;
    margin: 25px 0;
    position: relative;
    color: #888;
}

.wv-divider--options--fluid:before,
.wv-divider--options--fluid:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 40%;
    height: 1px;
    background: #eee;
}

.wv-divider--options--fluid:before { left: 0; }
.wv-divider--options--fluid:after { right: 0; }

/* 6. Nút mạng xã hội */
.id-auth__social-button a {
    display: block;
    text-align: center;
    padding: 12px;
    border-radius: 8px;
    text-decoration: none;
    margin-bottom: 12px;
    font-weight: 500;
    transition: 0.3s;
}

.wv-button--google {
    background-color: #fff;
    color: #444;
    border: 1px solid #ddd;
}

.wv-button--facebook {
    background-color: #1877f2;
    color: #fff !important;
}

/* 7. Responsive Mobile */
@media (max-width: 480px) {
    .login { margin: 20px; }
    .page-content { padding: 25px; }
    .login-footer-actions {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
}

/* Reset chung cho các nút Social */
.id-auth__social-button a {
    display: flex;
    align-items: center;
    justify-content: center; /* Căn giữa nội dung */
    padding: 10px 20px;
    border-radius: 50px; /* Tạo hình viên thuốc như ảnh */
    text-decoration: none;
    margin-bottom: 12px;
    font-weight: 600;
    font-size: 16px;
    position: relative;
    transition: all 0.3s ease;
    border: none;
}

/* Icon trong nút */
.id-auth__social-button a img {
    width: 24px;   /* Kích thước icon vừa vặn */
    height: 24px;
    position: absolute;
    left: 10px;    /* Đẩy icon về phía bên trái nút */
    background: white;
    border-radius: 50%; /* Làm icon Google/FB tròn */
    padding: 2px;
}

/* Nút Google */
.wv-button--google {
    background-color: #4285F4 !important; /* Màu xanh Google */
    color: #ffffff !important;
}

.wv-button--google:hover {
    background-color: #357ae8 !important;
}

/* Nút Facebook */
.wv-button--facebook {
    background-color: #4267B2 !important; /* Màu xanh Facebook */
    color: #ffffff !important;
}

.wv-button--facebook:hover {
    background-color: #365899 !important;
}

/* Tùy chỉnh chữ bên trong nút */
.id-auth__social-button a span {
    flex: 1;
    text-align: center;
}

/* Nút Login chính (Xác nhận/Login) theo phong cách ảnh 2 */
.login-submit input[type="button"] {
    background: #ff5500; /* Màu cam như ảnh */
    border-radius: 50px;  /* Bo tròn giống nút social */
    padding: 14px;
    text-transform: none;
    font-weight: bold;
}
/* Container tổng */
.header-auth-container {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-family: Arial, sans-serif;
}

.auth-link-item {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
}

.auth-divider { margin: 0 5px; opacity: 0.7; }

/* Dropdown Logic */
.login-dropdown-wrapper {
    position: relative;
    display: inline-block;
}

.login-dropdown-content {
    display: none;
    position: absolute;
    top: 60%;
    left: -130px;
    background-color: #fff;
    min-width: 400px;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    z-index: 999999;
    margin-top: 15px; /* Khoảng cách để tránh mất hover khi di chuyển chuột */
}

/* Tam giác chỉ lên */
.login-dropdown-content::after {
    content: '';
    position: absolute;
    bottom: 99%;
    right: 200px;
    border: 10px solid transparent;
    border-bottom-color: #fff;
}
/* tạo khoảng trống vô hình giữa nút đăng nhập và tam giác để hover ko bị trượt ra khỏi form */
.login-dropdown-content::before {
    content: "";
    position: absolute;
    top: -25px;
    left: 0;
    width: 100%;
    height: 30px;
    background: transparent;
    z-index: -1;
}
.login-dropdown-wrapper:hover .login-dropdown-content {
    display: block;
}
.login-dropdown-wrapper:hover .login-dropdown-content,
.login-dropdown-wrapper:focus-within .login-dropdown-content {
    display: block;
    opacity: 1;
    visibility: visible;
}
.login-dropdown-wrapper .post-avatar {
    width: 25px;
    height: 25px;
    margin-right: 5px;
}
/* Style Form bên trong */
.login-dropdown-content input[type="text"],
.login-dropdown-content input[type="password"] {
    width: 100%;
    padding: 10px 15px 10px 40px;
    margin-bottom: 0;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-sizing: border-box;
}

/* Nút Xác nhận (Màu cam, bo tròn) */
#btn-login-login {
    width: 100%;
    background: #ff5500;
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 50px;
    font-weight: bold;
    cursor: pointer;
    margin: 10px 0;
}

/* Social Buttons (Hình viên thuốc) */
.social-btn {
    display: flex;
    align-items: center;
    padding: 8px 15px;
    border-radius: 50px;
    text-decoration: none;
    margin-bottom: 10px;
    font-size: 14px;
    color: #fff;
}

.google-btn { background: #4285F4; }
.facebook-btn { background: #4267B2; }

.social-btn img {
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    margin-right: 15px;
}

.social-btn span { flex: 1; text-align: center; }

/* Footer của form */
.login-footer-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #666;
    margin-bottom: 15px;
}

.forgot-pass { color: #666; text-decoration: none; }
.forgot-pass:hover { text-decoration: underline; }

.wv-divider--options--fluid {
    text-align: center;
    margin: 15px 0;
    position: relative;
    color: #888;
    font-size: 12px;
}

.site-footer {
    background-color: #2c2f33; 
    color: #ffffff;
    padding: 15px 0;
    font-family: Arial, sans-serif;
    font-size: 14px;
}

.footer-container {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    flex-wrap: wrap; 
}

.brand, .orange {
    color: #f50; 
}

.footer-links {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-links a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: #f50;
    text-decoration: underline;
}

/* Tối ưu cho điện thoại */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    
    .footer-links {
        margin: 10px 0;
    }
}

/*danh hiệu*/
/* Hiệu ứng hào quang cho Siêu Đại Kiện Tướng */
@keyframes glow-sgm {
    from {
        box-shadow: 0 0 5px #ffd700, 0 0 10px #ffd700;
    }
    to {
        box-shadow: 0 0 15px #ff4500, 0 0 25px #ff4500;
    }
}

/* Hiệu ứng tia sáng lướt qua (Shine) */
@keyframes shine {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Container bao quanh Avatar và Badge */
.fb-post-header-left {
    position: relative; /* Quan trọng để định vị badge */
}

/* Ghi đè hoặc thêm mới style cho Badge */
.badge {
    position: absolute;
    bottom: -2px;   /* Căn xuống góc dưới */
    left: 28px;     /* Căn sang phải ảnh đại diện (ảnh 40px nên 28px là vừa đẹp) */
    width: 18px;    /* Kích thước nhỏ gọn giống ảnh mẫu */
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    font-size: 8px;
    font-weight: bold;
    color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    z-index: 2;
}

.badge i { font-size: 8px; color: #fff; } /* Cho icon check */
.badge svg {
    width: 12px;  /* Tăng nhẹ để nhìn rõ icon hơn */
    height: 12px;
    display: block;
    fill: currentColor; /* Tự động lấy màu chữ của thẻ cha */
}

/* Riêng cho các icon dùng stroke (như check và minus) */
.badge svg[stroke="currentColor"] {
    fill: none;
}
/* 10 Cấp độ màu sắc */
/* Style chung cho toàn bộ Badge để đồng bộ độ sắc nét */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(255, 255, 255, 0.8); /* Viền trắng mảnh giúp tách biệt màu nền */
    box-shadow: 0 2px 4px rgba(0,0,0,0.3); /* Đổ bóng nhẹ phía dưới chân */
    overflow: visible;
}

/* Cập nhật độ bóng cho từng cấp độ */
.bg-weak { 
    background: linear-gradient(180deg, #bdbdbd 0%, #9e9e9e 100%); 
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.4); 
}

.bg-practice { 
    background: linear-gradient(180deg, #4dabf7 0%, #2196f3 100%); 
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.5), 0 0 5px rgba(33, 150, 243, 0.4); 
}

.bg-medium { 
    background: linear-gradient(180deg, #81c784 0%, #4caf50 100%); 
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.5), 0 0 5px rgba(76, 175, 80, 0.4); 
}

.bg-nearly { 
    background: linear-gradient(180deg, #4dd0e1 0%, #00bcd4 100%); 
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.5), 0 0 5px rgba(0, 188, 212, 0.4); 
}

.bg-good { 
    background: linear-gradient(180deg, #ff7043 0%, #FF4500 100%); 
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.5), 0 0 8px rgba(255, 69, 0, 0.6); 
}

.bg-verywell { 
    background: linear-gradient(180deg, #ffb74d 0%, #ff9800 100%); 
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.5), 0 0 5px rgba(255, 152, 0, 0.4); 
}

.bg-master { 
    background: linear-gradient(180deg, #ef5350 0%, #f44336 100%); 
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.5), 0 0 8px rgba(244, 67, 54, 0.5); 
}

.bg-im { 
    background: linear-gradient(180deg, #d32f2f 0%, #b71c1c 100%); 
    border: 1.5px solid #ffd700 !important; /* Viền vàng đặc trưng */
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.3), 0 0 10px rgba(183, 28, 28, 0.6); 
}

.bg-gm { 
    background: linear-gradient(45deg, #ffd700, #ffa500); 
    color: #543b00 !important;
    border: 1.5px solid #fff !important;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.8), 0 0 12px rgba(255, 215, 0, 0.7);
    font-weight: bold;
}
.bg-gm {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%) !important;
    color: #543b00 !important;
    border: 1.5px solid #fff !important;
    box-shadow: 
        inset 0 1px 2px rgba(255, 255, 255, 0.9), 
        0 0 12px rgba(255, 215, 0, 0.8) !important;
}
/* Thêm hiệu ứng lấp lánh nhẹ cho kim cương */
.bg-gm svg {
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.8));
    width: 13px !important; /* Tăng size một chút cho rõ mặt cắt */
    height: 13px !important;
}
.bg-sgm {
    background: radial-gradient(circle, #444, #000) !important;
    border: 2px solid #ffd700;
    color: #ffd700;
    animation: glow-sgm 1.5s infinite alternate;
}
.bg-sgm {
    overflow: hidden; /* Để tia sáng không tràn ra ngoài */
    animation: glow-sgm 1.5s infinite alternate;
    background: radial-gradient(circle, #444, #000) !important;
}

.bg-sgm::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -100%;
    width: 200%;
    height: 200%;
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(30deg);
    animation: shine 3s infinite;
}
@keyframes glow-sgm {
    from { box-shadow: 0 0 4px #ffd700; }
    to { box-shadow: 0 0 12px #ff4500; }
}

/* Style nền tảng cho Badge số */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
    position: absolute;
    bottom: -2px;
    right: -2px;
    z-index: 10;
}

/* CẤP 1-3: ĐƠN GIẢN (Sắc nét) */
.bg-weak     { background: linear-gradient(180deg, #bdbdbd, #9e9e9e); }
.bg-practice { background: linear-gradient(180deg, #4dabf7, #2196f3); }
.bg-medium   { background: linear-gradient(180deg, #81c784, #4caf50); }

/* CẤP 4-6: CÓ ĐỘ BÓNG (Glossy) */
.bg-nearly, .bg-good, .bg-verywell {
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.6), 0 2px 4px rgba(0,0,0,0.3);
}
.bg-nearly   { background: linear-gradient(180deg, #4dd0e1, #00bcd4); }
.bg-good     { background: linear-gradient(180deg, #ff7043, #FF4500); }
.bg-verywell { background: linear-gradient(180deg, #ffb74d, #ff9800); }

/* CẤP 7-8: HIỆU ỨNG NHẤP NHÁY NHẸ (Glow) */
.bg-master, .bg-im {
    animation: pulse-glow 2s infinite;
    border-color: #fff;
}
.bg-master { background: linear-gradient(180deg, #ef5350, #f44336); }
.bg-im     { 
    background: linear-gradient(180deg, #d32f2f, #b71c1c); 
    border-color: #ffd700 !important; 
}

/* CẤP 9-10: CỰC PHẨM (Sparkle & Intense Glow) */
.bg-gm, .bg-sgm {
    border: 1.5px solid #fff !important;
    font-size: 11px;
}
.bg-gm {
    background: linear-gradient(45deg, #ffd700, #ffa500, #ffd700);
    background-size: 200% 200%;
    color: #543b00 !important;
    text-shadow: none;
    animation: shine-gold 3s linear infinite, pulse-gold 1.5s infinite;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
}
.bg-sgm {
    background: radial-gradient(circle, #444, #000);
    color: #ffd700 !important;
    border-color: #ffd700 !important;
    animation: pulse-crown 1s infinite alternate;
    box-shadow: 0 0 15px rgba(255, 69, 0, 0.6);
}

/* CÁC ANIMATION */

/* Nhấp nháy hào quang cho cấp 7-8 */
@keyframes pulse-glow {
    0% { box-shadow: 0 0 2px rgba(244, 67, 54, 0.5); }
    50% { box-shadow: 0 0 8px rgba(244, 67, 54, 0.8); }
    100% { box-shadow: 0 0 2px rgba(244, 67, 54, 0.5); }
}

/* Hiệu ứng bóng đổ lướt qua cho Vàng (Cấp 9) */
@keyframes shine-gold {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* Nhấp nháy mạnh cho Đại Kiện Tướng */
@keyframes pulse-gold {
    0% { transform: scale(1); box-shadow: 0 0 5px rgba(255, 215, 0, 0.6); }
    50% { transform: scale(1.1); box-shadow: 0 0 15px rgba(255, 215, 0, 0.9); }
    100% { transform: scale(1); box-shadow: 0 0 5px rgba(255, 215, 0, 0.6); }
}

/* Hào quang rực cháy cho Siêu Đại Kiện Tướng (Cấp 10) */
@keyframes pulse-crown {
    from { box-shadow: 0 0 5px #ff4500, inset 0 0 2px #ffd700; }
    to { box-shadow: 0 0 18px #ff4500, inset 0 0 5px #ffd700; border-color: #fff !important; }
}