/* ================= CSS CUNG ĐÌNH HUẾ TINH TẾ ================= */
html,
:root,
body {
--vang-hoang-toc: #E5A93B;
/* Vàng sẫm của lọng vua, không chói */
--vang-dong-co: #B88E40;
/* Vàng thau, đồng cổ dùng cho đường viền */
--do-son-son: #8C1A1B;
/* Đỏ thẫm đại nội, sâu và sang */
--go-trac-nen: #2B1810;
/* Nền gỗ đen nâu quý phái */
--giay-xuyen-chi: #FBF9F3;
/* Nền trắng ngà của sắc phong */
/* BIẾN ĐỒNG BỘ CHO ĐẤU TRƯỜNG GIẢI ĐẤU (THEME 0 - CUNG ĐÌNH / GỖ TRẦM) */
--tour-bg-page: #ffffff;
--tour-hero-bg: linear-gradient(135deg, #3d1c10 0%, #5a2c17 50%, #3d1c10 100%);
--tour-hero-title: #f7d08a;
--tour-hero-desc: #d8c2aa;
--tour-hero-border: rgba(229, 169, 59, 0.4);
--tour-hero-btn-bg: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
--tour-hero-btn-border: #f39c12;
--tour-hero-btn-hover-bg: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
--tour-tab-switcher-bg: #ebd8be;
--tour-tab-btn-color: #6a4a2f;
--tour-tab-btn-hover-bg: rgba(255, 255, 255, 0.5);
--tour-tab-btn-active-bg: linear-gradient(135deg, #8b4513 0%, #5a2c09 100%);
--tour-tab-btn-active-color: #f7d08a;
--tour-tab-btn-active-shadow: 0 4px 15px rgba(90, 44, 9, 0.35);
--tour-tab-badge-bg: #ffd700;
--tour-tab-badge-color: #5a3c00;
--tour-tab-badge-active-bg: #f7d08a;
--tour-tab-badge-active-color: #5a2c09;
--tour-card-bg: #ffffff;
--tour-card-border: #e8decb;
--tour-card-header-bg: linear-gradient(90deg, #fdfaf6 0%, #f6eee3 100%);
--tour-card-header-border: #ebdccb;
--tour-card-footer-bg: #faf6f0;
--tour-card-footer-border: #ebdccb;
--tour-title-color: #4a2f1b;
--tour-muted-color: #8c735d;
--tour-empty-bg: #fafafa;
--tour-empty-border: #e2e8f0;
--tour-empty-icon: #c89b5c;
--tour-btn-watch-bg: linear-gradient(135deg, #8b4513 0%, #6d340c 100%);
--tour-btn-watch-hover: #5a2c09;
--tour-table-thead-bg: linear-gradient(180deg, #4a2f1b 0%, #352112 100%);
--tour-table-thead-color: #f7d08a;
--tour-table-thead-border: #5a3d28;
--tour-table-tr-border: #f0e6d9;
--tour-table-tr-hover: #fdfaf5;
--tour-score-bg: #faf2e6;
--tour-score-color: #8b4513;
--tour-score-border: #ebd8be;
--tour-round-tag-bg: #faf2e6;
--tour-round-tag-color: #8b4513;
--tour-round-tag-border: #ebd8be;
--tour-replay-header-bg: linear-gradient(135deg, #2b1f14 0%, #4a2f1b 60%, #1f140c 100%);
--tour-replay-header-border: #c89b5c;
--tour-replay-header-color: #f7d08a;
--tour-replay-btn-bg: #8b4513;
--tour-replay-btn-hover: #6f370f;
/* BIẾN ĐỒNG BỘ CHO POPUP / MODAL / ALERT (THEME 0 - CUNG ĐÌNH HUẾ / GỖ TRẦM) */
--fixi-modal-border: var(--vang-hoang-toc, #E5A93B);
--fixi-modal-header-bg: linear-gradient(135deg, var(--go-trac-nen, #2B1810) 0%, var(--do-son-son, #8C1A1B) 100%);
--fixi-modal-header-color: #FFFDE7;
--fixi-modal-header-border: var(--vang-hoang-toc, #E5A93B);
--fixi-modal-body-bg: #ffffff;
--fixi-modal-text-color: #2b1810;
--fixi-modal-footer-bg: #faf6f0;
--fixi-modal-footer-border: #ede4d6;
--fixi-modal-btn-submit-bg: linear-gradient(135deg, var(--do-son-son, #8C1A1B) 0%, #6e1515 100%);
--fixi-modal-btn-submit-color: #FFFDE7;
--fixi-modal-btn-submit-border: var(--vang-hoang-toc, #E5A93B);
--fixi-modal-btn-submit-hover: linear-gradient(135deg, #a62425 0%, var(--do-son-son, #8C1A1B) 100%);
--fixi-modal-btn-submit-shadow: 0 3px 8px rgba(140, 26, 27, 0.35);
--fixi-modal-btn-cancel-bg: #ece5db;
--fixi-modal-btn-cancel-color: #4a2f1b;
--fixi-modal-btn-cancel-border: #dcd0bf;
--fixi-modal-btn-cancel-hover: #ded3c1;
--fixi-modal-input-focus-border: var(--vang-hoang-toc, #E5A93B);
--fixi-modal-input-focus-ring: rgba(229, 169, 59, 0.2);
/* Biến đồng bộ Replay & Biên bản Buttons (Theme 0 - Cung Đình Huế / Gỗ Trầm) */
--replay-btn-import-bg: linear-gradient(135deg, #1f4068 0%, #162447 100%);
--replay-btn-import-hover: linear-gradient(135deg, #245281 0%, #1f4068 100%);
--replay-btn-import-border: var(--vang-dong-co, #B88E40);
--replay-btn-import-shadow: 0 3px 8px rgba(22, 36, 71, 0.35);
--replay-btn-export-bg: linear-gradient(135deg, #A62425 0%, var(--do-son-son, #8C1A1B) 100%);
--replay-btn-export-hover: linear-gradient(135deg, #c02b2c 0%, #A62425 100%);
--replay-btn-export-border: var(--vang-hoang-toc, #E5A93B);
--replay-btn-export-shadow: 0 3px 8px rgba(140, 26, 27, 0.35);
}
.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,
#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: var(--vang-hoang-toc) !important;
}
/* Tinh chỉnh khung chứa tổng thể */
.chess-content {
background-color: var(--giay-xuyen-chi) !important;
border: 3px double var(--vang-dong-co) !important;
border-radius: 0 !important;
padding: 10px !important;
box-shadow: 0 10px 30px rgba(43, 24, 16, 0.15) !important;
}
.xiangqiboard {
border-radius: 0 !important;
}
/* Khung thông số cài đặt thời gian (Dải tím cũ ở trên cùng) */
.area_time {
background: linear-gradient(135deg, var(--do-son-son) 0%, #5E0F10 100%) !important;
border: 1px solid var(--vang-hoang-toc) !important;
border-radius: 0 !important;
color: var(--vang-hoang-toc) !important;
font-weight: 600 !important;
letter-spacing: 0.5px;
padding: 5px !important;
box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.2) !important;
text-shadow: inherit !important;
}
/* Chỉnh sửa đồng loạt nút bấm chức năng bên dưới */
.div-btn-function button.button,
#btn_ready,
input[type="button"]#submitmsg {
background: linear-gradient(180deg, #A62425 0%, var(--do-son-son) 100%) !important;
color: #FFFDE7 !important;
border: 1px solid var(--vang-dong-co) !important;
border-radius: 0 !important;
font-weight: 600 !important;
text-transform: uppercase !important;
font-size: 13px !important;
letter-spacing: 0.5px !important;
padding: 10px 18px !important;
box-shadow: 0 3px 0 #5E0F10, 0 4px 6px rgba(0, 0, 0, 0.2) !important;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5) !important;
transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}
/* Khi di chuột qua - Nút chuyển sang ánh Vàng Đồng như được lau sáng */
.div-btn-function button.button:hover,
#btn_ready:hover,
input[type="button"]#submitmsg:hover {
background: linear-gradient(180deg, var(--vang-hoang-toc) 0%, var(--vang-dong-co) 100%) !important;
color: var(--go-trac-nen) !important;
border-color: #FFF59D !important;
text-shadow: none !important;
box-shadow: 0 3px 0 #8D6E63, 0 4px 8px rgba(184, 142, 64, 0.4) !important;
}
/* Khi nhấn nút - Tạo cảm giác thụp xuống thật */
.div-btn-function button.button:active,
#btn_ready:active {
transform: translateY(3px) !important;
box-shadow: none !important;
}
/* Nút Bỏ cuộc / Từ chối (Cần nhận diện riêng biệt) */
#btn_give_up,
.btn-danger {
background: linear-gradient(180deg, #424242 0%, #212121 100%) !important;
border-color: #757575 !important;
box-shadow: 0 3px 0 #111, 0 4px 6px rgba(0, 0, 0, 0.2) !important;
}
/* Khung chứa hàng chờ (Vùng màu cam chói cũ) */
.area_member_joined,
.area_member_queue {
background: #EFEBE9 !important;
/* Màu vải thô/giấy cổ nhạt */
color: var(--do-son-son) !important;
border: 1px solid var(--vang-dong-co) !important;
border-top: none !important;
padding: 12px !important;
}
#area_member_queue_name {
background: #FFFDF6 !important;
border: 1px dashed var(--vang-dong-co) !important;
border-radius: 0 !important;
padding: 5px !important;
}
/* Huy hiệu Watermark chữ chìm ở nền hàng chờ */
#area_member_queue_name::before {
color: rgba(140, 26, 27, 0.05) !important;
font-size: 24px !important;
}
/* Thẻ tên kỳ thủ trong hàng chờ */
.queue-member-card {
background: #FFF !important;
border: 1px solid #E0D4C3 !important;
border-radius: 0 !important;
}
/* Người đứng đầu hàng chờ - Nhận long kỳ (Vàng viền Đỏ) */
.queue-member-card.first-in-line {
border: 1.5px solid var(--do-son-son) !important;
background-color: #FFF9C4 !important;
/* Vàng ngọc nhẹ */
}
/* Ô hiển thị thời gian tổng (00:00) */
.countdown {
background: var(--giay-xuyen-chi) !important;
color: var(--do-son-son) !important;
border: 1px solid var(--vang-dong-co) !important;
border-radius: 0 !important;
font-weight: 700 !important;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}
/* Ô hiển thị số nước đi (Màu xanh lá cũ khá lệch tông) */
.so_nuoc_di {
background: var(--do-son-son) !important;
color: #FFF !important;
border: 1px solid var(--vang-dong-co) !important;
border-radius: 0 !important;
}
.div-btn-function button.button,
#btn_ready,
input[type="button"]#submitmsg {
background: #2B1810 !important;
/* Màu nền gỗ trắc cực sang */
color: #E5A93B !important;
/* Chữ vàng hoàng tộc */
font-weight: bold !important;
padding: 10px 22px !important;
border: 8px solid transparent !important;
border-image-slice: 10 !important;
/* SVG Họa tiết hồi văn đứt đoạn liên kết */
border-image-source: url("data:image/svg+xml;utf8,") !important;
box-shadow: inset 0 0 5px rgba(255, 215, 0, 0.2), 0 4px 6px rgba(0, 0, 0, 0.4) !important;
transition: all 0.2s !important;
}
.div-btn-function button.button:hover,
#btn_ready:hover {
background: #8C1A1B !important;
/* Lướt qua đổi sang nền đỏ sơn son */
color: #FFF !important;
border-image-source: url("data:image/svg+xml;utf8,") !important;
}
.box-time-think {
background: linear-gradient(135deg, var(--do-son-son) 0%, #5E0F10 100%) !important;
}
/* ================= CSS SẢNH CHỜ (LOBBY) CUNG ĐÌNH HUẾ - MẪU 2 ================= */
:root {
--vang-hoang-toc: #E5A93B;
/* Vàng lọng vua */
--vang-dong-co: #B88E40;
/* Vàng đồng thau, đồng cổ làm viền */
--do-son-son: #8C1A1B;
/* Đỏ thẫm thếp vàng Đại Nội */
--go-trac-nen: #2B1810;
/* Nền gỗ nâu đen quý phái */
--giay-xuyen-chi: #FBF9F3;
/* Trắng ngà sắc phong */
}
/* 1. Tiêu đề "CHỌN BÀN" hoàng gia */
.h2_choosegame {
color: var(--do-son-son) !important;
font-weight: bold !important;
text-shadow: 1px 1px 0px var(--vang-hoang-toc) !important;
letter-spacing: 4px !important;
margin-bottom: 40px !important;
}
/* 2. Thiết kế các Ô Bàn Cờ (Room Items) thành Thẻ Bài Hồi Văn */
.room_item {
background: #FAF6EE !important;
/* Nền giấy ngả vàng mượt */
border: 5px solid transparent !important;
border-image-slice: 9 !important;
/* Nhúng họa tiết Hồi văn mẫu 2 chạy bo quanh viền hộp */
border-image-source: url("data:image/svg+xml;utf8,") !important;
border-radius: 0px !important;
/* Trả về góc vuông cho cấu trúc vân mây khớp biên */
box-shadow: 0 4px 10px rgba(43, 24, 16, 0.08) !important;
transition: all 0.25s ease-in-out !important;
}
/* Trạng thái Bàn Đang Trống / Có người đợi (Dải cam rực cũ) */
/* ĐỎ SƠN SON QUYẾN RŨ, ĐẬM CHẤT CHIẾN TRẬN */
/* ================= HIỆU ỨNG TÔ SÁNG MỘT NỬA CHO BÀN ĐANG CHỜ (HALF) ================= */
.room_item.half {
/* Tạo dải màu tuyến tính chia rõ 2 phần bằng cách khóa điểm dừng (color stops):
- Từ 0% đến 45%: Màu vàng hoàng tộc sẫm (Tô sáng nửa bên trái - Đại diện cho Player 1 đã ngồi sẵn)
- Từ 45% đến 55%: Đoạn chuyển màu mượt mà tránh bị thô cứng
- Từ 55% đến 100%: Trở về màu giấy xuyên chi/trắng ngà cổ (Nửa bên phải đang trống chờ người)
*/
background: linear-gradient(90deg,
#E5A93B 0%,
#EBC374 45%,
#FAF6EE 55%,
#FBF9F3 100%) !important;
/* Viền họa tiết hồi văn chuyển sang màu Đỏ Sơn Son đại nội để bao bọc và tạo điểm nhấn */
border-image-source: url("data:image/svg+xml;utf8,") !important;
/* Đổ bóng nhẹ dạng tỏa ra xung quanh giúp ô bàn cờ trông như đang phát sáng nhẹ, thu hút người chơi */
box-shadow: 0 4px 15px rgba(229, 169, 59, 0.25) !important;
transition: all 0.25s ease-in-out !important;
}
/* Xử lý màu chữ phối hợp để đảm bảo tính dễ nhìn:
Chuyển chữ sang màu Nâu Đen Gỗ Trắc trầm ấm, có độ tương phản cực kỳ tốt trên cả nền vàng lẫn nền ngà
*/
.room_item.half,
.room_item.half .size_big,
.room_item.half div,
.room_item.half span {
color: #2B1810 !important;
font-weight: 700 !important;
text-shadow: none !important;
/* Xóa bỏ text-shadow cũ để chữ sắc nét hơn */
}
/* Hiệu ứng khi kỳ thủ rê chuột qua ô bàn cờ đang chờ */
.room_item.half:hover {
transform: translateY(-3px);
/* Tăng cường hào quang đỏ sơn son xung quanh khi ho rơ chuột */
box-shadow: 0 8px 20px rgba(140, 26, 27, 0.25) !important;
}
/* Trạng thái Bàn Đầy (Full trận - Thay thế màu đỏ gắt bằng màu Gỗ trắc lót viền vàng) */
.room_item.full {
background: linear-gradient(135deg, #3E2723 0%, var(--go-trac-nen) 100%) !important;
border-image-source: url("data:image/svg+xml;utf8,") !important;
}
.room_item.full div,
.room_item.full span {
color: #FFFDE7 !important;
}
/* Hiệu ứng nhấc nổi hộp bàn cờ khi rê chuột vào */
.room_item:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(184, 142, 64, 0.3) !important;
}
/* Định dạng chữ thông số phòng nội khu (Phút - Suy nghĩ - Tích lũy) */
.room_item .size_big {
color: var(--do-son-son) !important;
font-family: 'Courier New', Courier, monospace !important;
font-weight: 700 !important;
letter-spacing: 1px;
}
.room_item.full .size_big {
color: var(--vang-hoang-toc) !important;
}
/* Nút chữ Delete & Clear chat ẩn góc phòng */
.btn_del_table,
.btn_clear_chat {
color: #9E9E9E !important;
font-size: 11px !important;
text-transform: uppercase;
font-weight: 600;
transition: color 0.2s;
}
.room_item:hover .btn_del_table {
color: #D32F2F !important;
}
.room_item:hover .btn_clear_chat {
color: var(--vang-dong-co) !important;
}
/* 3. Khu vực Form tạo bàn bên dưới */
.setting_area {
background: #FDFBF7 !important;
border: 1px solid #E0D4C3 !important;
border-bottom: 3px double var(--vang-dong-co) !important;
border-radius: 6px !important;
padding: 20px 15px !important;
margin-top: 25px !important;
}
.setting_area h2 strong {
color: var(--do-son-son) !important;
font-size: 18px !important;
letter-spacing: 1px;
}
/* Định hình lại các ô Input dữ liệu thành hộp sơn mài mượt */
.setting_area .form-control {
border: 1px solid #DDD1BC !important;
background-color: #FFF !important;
border-radius: 4px !important;
color: var(--go-trac-nen) !important;
font-weight: 500 !important;
padding: 4px 8px !important;
transition: all 0.2s;
}
.setting_area .form-control:focus {
border-color: var(--vang-dong-co) !important;
box-shadow: 0 0 5px rgba(184, 142, 64, 0.3) !important;
}
/* 4. Tái cấu trúc NÚT TẠO BÀN (Nút màu cam cũ) áp dụng Mẫu 2 */
.btn_set_time.button,
.btn-royal-submit {
background: linear-gradient(180deg, #A62425 0%, var(--do-son-son) 100%) !important;
color: #FFFDE7 !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
/* Đồng bộ khung hoa văn viền mẫu 2 thu nhỏ */
border: 6px solid transparent !important;
border-image-slice: 8 !important;
border-image-source: url("data:image/svg+xml;utf8,") !important;
border-radius: 0px !important;
padding: 6px 24px !important;
height: auto !important;
line-height: initial !important;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16) !important;
transition: all 0.2s ease-in-out !important;
}
.btn_set_time.button:hover,
.btn-royal-submit:hover {
background: linear-gradient(180deg, var(--vang-hoang-toc) 0%, var(--vang-dong-co) 100%) !important;
color: var(--go-trac-nen) !important;
border-image-source: url("data:image/svg+xml;utf8,") !important;
box-shadow: 0 4px 12px rgba(184, 142, 64, 0.4) !important;
}
.btn_set_time.button:active,
.btn-royal-submit:active {
transform: scale(0.96);
}
.setting_area,
.setting_dg {
gap: 20px;
}
.setting_area h2 {
position: inherit;
}
.header-search-fb {
height: auto;
min-height: 32px;
top: 50%;
transform: translateY(-50%);
z-index: 100050;
}
.header-search-fb .search-input-wrapper {
padding: 5px 12px;
}
.header-search-fb .search-input-wrapper input {
padding: 0 4px;
}
.brand,
.orange {
color: var(--vang-hoang-toc) !important;
}
p a,
li a,
a:hover,
.button.normal:hover,
span.color,
#footer a:hover,
.widget a:hover,
.question h3 a:hover,
.boxedtitle h1 a:hover,
.boxedtitle h2 a:hover,
.boxedtitle h3 a:hover,
.boxedtitle h4 a:hover,
.boxedtitle h5 a:hover,
.boxedtitle h6 a:hover,
.box_icon:hover span i,
.color_default,
.navigation_mobile>ul a:hover,
.navigation_mobile>ul li ul li:hover:before,
.post .post-meta .meta-author a:hover,
.post .post-meta .meta-categories a:hover,
.post .post-meta .meta-comment a:hover,
.question h2 a:hover,
.question-category a:hover,
.question-reply:hover i,
.question-category a:hover i,
.question-comment a:hover,
.question-comment a:hover i,
.question-reply:hover,
.post .post-meta .meta-author:hover a,
.post .post-meta .meta-author:hover i,
.post .post-meta .meta-categories:hover i,
.post .post-meta .meta-comment:hover a,
.post .post-meta .meta-comment:hover i,
.post-title a:hover,
.question-tags a,
.question .question-type,
.comment-author a:hover,
.comment-reply:hover,
.user-profile-widget li a:hover,
.taglist .tag a.delete:before,
.form-style p span.color,
.post-tags,
.post-tags a,
.related-posts li a:hover,
.related-posts li a:hover i,
#footer.footer_light_top .related-posts li a:hover,
.related-posts li a:hover i,
.share-inside,
.share-inside-warp ul li a:hover,
.user-points .question-vote-result,
.navigation>.header-menu>ul>li>a>.menu-nav-arrow,
#footer-bottom a,
.widget h3.widget_title,
#footer .related-item span,
.widget_twitter ul li:before,
#footer .widget_twitter .tweet_time a,
.widget_highest_points li h6 a,
#footer .widget_contact ul li span,
.rememberme label,
.ask_login .ask_captcha_p i,
.login-text i,
.subscribe-text i,
.widget_search .search-submit,
.login-password i,
.question-tags,
.question-tags i,
.panel-pop h2,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
textarea,
select,
.panel-pop p,
.main-content .page-content .boxedtitle.page-title h2,
.fakefile button,
.login p,
.login h2,
.contact-us h2,
.share-inside i,
#related-posts h2,
.comment-reply,
.post-title,
.post-title a,
.user-profile h2,
.user-profile h2 a,
.stats-head,
.block-stats-1,
.block-stats-2,
.block-stats-3,
.block-stats-4,
.user-question h3 a,
.icon_shortcode .ul_icons li,
.testimonial-client span,
.box_icon h1,
.box_icon h2,
.box_icon h3,
.box_icon h4,
.box_icon h5,
.box_icon h6,
.widget_contact ul li i,
#footer.footer_light_top .widget a:hover,
#header .logo h2 a:hover,
.widget_tabs.tabs-warp .tabs li a,
#footer .widget .widget_highest_points a,
#footer .related-item h3 a:hover,
#footer.footer_dark .widget .widget_comments a:hover,
#footer .widget_tabs.tabs-warp .tabs li a,
.dark_skin .sidebar .widget a:hover,
.user-points h3,
.woocommerce mark,
.woocommerce .product_list_widget ins span,
.woocommerce-page .product_list_widget ins span,
ul.products li .product-details h3 a:hover,
ul.products li .product-details .price,
ul.products li .product-details h3 a:hover,
ul.products li .product-details>a:hover,
.widget.woocommerce:not(.widget_product_categories):not(.widget_layered_nav) ul li a:hover,
.price>.amount,
.woocommerce-page .product .woocommerce-woo-price ins span,
.cart_wrapper .widget_shopping_cart_content ul li a:hover,
.woocommerce-billing-fields>h3,
#order_review_heading,
.woocommerce .sections h2,
.yith-wcwl-share>h4,
.woocommerce .sections h3,
.woocommerce header.title h3,
.main-title>h4,
.woocommerce h2,
.post-content .woocommerce h3,
.box-default.woocommerce-message .button,
.woocommerce .cart .product-name a:hover,
header.title a,
.widget_search label:before,
.post .post-meta .post-view a:hover,
.post .post-meta .post-view:hover a,
.post .post-meta .post-view:hover i,
.question-author-meta a:hover,
.question-author-meta a:hover i,
ul.login-links a:hover,
input[type="tel"],
.styled-select select,
.woocommerce-MyAccount-content .woocommerce-Button.button,
.widget_categories .accordion .accordion-title a:hover,
.dark_skin .widget_categories .accordion .accordion-title a:hover,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--single .select2-selection__rendered {
color: var(--vang-hoang-toc) !important;
}
.big_title {
color: var(--vang-hoang-toc) !important;
}
#btn-login-login,
.list-filter,
.btn-import,
.btn-export,
.btn-primary {
background-color: var(--do-son-son) !important;
background-image: linear-gradient(180deg, #A62425 0%, var(--do-son-son) 100%) !important;
}
/* ================= CSS THEME 0 (CUNG ĐÌNH HUẾ / TỐI) CHO MOBILE MENU & DRAWER BẬC THANG ================= */
.mobile-nav-bar {
background: #1c0e08 !important;
border-bottom: 1px solid #4a2f18 !important;
}
.mobile-nav-tabs {
background: linear-gradient(180deg, #2b170e 0%, #190c06 100%) !important;
border-top: 1px solid #4a2f18 !important;
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.45) !important;
height: 42px !important;
min-height: 42px !important;
padding: 3px 6px !important;
border-radius: 0 !important;
}
.nav-tab-item {
color: #c9b192 !important;
height: 35px !important;
min-height: 35px !important;
gap: 6px !important;
border-radius: 0 !important;
}
.nav-tab-item:active {
background: rgba(140, 26, 27, 0.4) !important;
border-radius: 0 !important;
}
.nav-tab-item .tab-icon-wrap {
color: #c9b192 !important;
font-size: 17px !important;
}
.nav-tab-item .tab-label {
color: #c9b192 !important;
font-size: 14px !important;
font-weight: 700 !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
}
/* Quân cờ Tướng Cung Đình */
.nav-tab-item .icon-chess-piece {
border-color: #c9b192 !important;
color: #c9b192 !important;
background: #2b170e !important;
width: 22px !important;
height: 22px !important;
font-size: 12.5px !important;
}
/* Tab đang Active trong Theme Cung Đình */
.nav-tab-item.active {
color: var(--vang-hoang-toc) !important;
background: linear-gradient(180deg, rgba(140, 26, 27, 0.85) 0%, rgba(85, 14, 15, 0.95) 100%) !important;
border: 1px solid #b88e40 !important;
box-shadow: inset 0 1px 0 rgba(255, 245, 157, 0.3), 0 0 8px rgba(229, 169, 59, 0.25) !important;
border-radius: 0 !important;
}
.nav-tab-item.active .tab-icon-wrap {
color: var(--vang-hoang-toc) !important;
transform: scale(1.05) !important;
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
}
.nav-tab-item.active .tab-label {
color: var(--vang-hoang-toc) !important;
font-size: 14px !important;
font-weight: 700 !important;
text-shadow: 0 1px 3px #000000 !important;
}
.nav-tab-item.active .icon-chess-piece {
border-color: #ffd978 !important;
color: #ffd978 !important;
background: #8c1a1b !important;
box-shadow: 0 0 6px rgba(229, 169, 59, 0.4) !important;
}
/* Tab Giải đấu trong Theme Cung Đình */
.nav-tab-item.tab-tour-item .tab-icon-wrap i {
color: #f5b041 !important;
filter: drop-shadow(0 1px 2px rgba(245, 176, 65, 0.5)) !important;
}
.nav-tab-item.tab-tour-item.active {
border-color: #f5b041 !important;
border-radius: 0 !important;
}
.nav-tab-item.tab-tour-item.active .tab-icon-wrap i {
color: #ffd978 !important;
filter: drop-shadow(0 0 6px rgba(245, 176, 65, 0.7)) !important;
}
/* Tab Nhạc trong Theme Cung Đình */
.nav-tab-item.tab-music-item {
flex: 0 0 35px !important;
width: 35px !important;
max-width: 35px !important;
padding: 0 !important;
border-radius: 0 !important;
}
.nav-tab-item.tab-music-item.music-on {
color: var(--vang-hoang-toc) !important;
background: linear-gradient(180deg, rgba(140, 26, 27, 0.85) 0%, rgba(85, 14, 15, 0.95) 100%) !important;
border: 1px solid #b88e40 !important;
border-radius: 0 !important;
}
.nav-tab-item.tab-music-item.music-on .tab-icon-wrap i {
color: #ffd978 !important;
filter: drop-shadow(0 0 6px rgba(229, 169, 59, 0.7)) !important;
}
.nav-tab-item.tab-music-item:not(.music-on) {
color: #a89279 !important;
}
.nav-tab-item.tab-music-item:not(.music-on) .tab-icon-wrap {
color: #a89279 !important;
position: relative !important;
}
.nav-tab-item.tab-music-item:not(.music-on) .tab-icon-wrap::after {
content: "" !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
width: 17px !important;
height: 2px !important;
background-color: #e74c3c !important;
transform: translate(-50%, -50%) rotate(-45deg) !important;
border-radius: 0 !important;
pointer-events: none !important;
}
/* Nút Mở rộng (Menu) trong Theme Cung Đình */
.nav-tab-item.tab-more-toggle {
flex: 0 0 35px !important;
width: 35px !important;
max-width: 35px !important;
padding: 0 !important;
border-radius: 0 !important;
}
.nav-tab-item.tab-more-toggle.open {
color: var(--vang-hoang-toc) !important;
background: linear-gradient(180deg, rgba(140, 26, 27, 0.85) 0%, rgba(85, 14, 15, 0.95) 100%) !important;
border: 1px solid #b88e40 !important;
border-radius: 0 !important;
}
.nav-tab-item.active-subpage::after {
background-color: var(--vang-hoang-toc) !important;
box-shadow: 0 0 4px var(--vang-hoang-toc) !important;
}
/* Drawer Bậc Thang Cung Đình Huế */
body.mobile-drawer-opened .mobile-nav-bar,
body.mobile-search-opened .mobile-nav-bar,
body.mobile-social-opened .mobile-nav-bar,
.mobile-nav-bar:has(.mobile-more-drawer.active),
.mobile-nav-bar:has(.mobile-search-modal.active),
.mobile-nav-bar:has(.mobile-social-modal.active) {
z-index: 10000005 !important;
}
body.mobile-drawer-opened .div-btn-function {
z-index: 1 !important;
}
.mobile-more-drawer {
z-index: 10000010 !important;
}
.mobile-more-backdrop {
background: rgba(10, 5, 2, 0.75) !important;
backdrop-filter: blur(6px) !important;
-webkit-backdrop-filter: blur(6px) !important;
}
.mobile-more-panel {
background: linear-gradient(180deg, #2b170e 0%, #150904 100%) !important;
border-top: 2px solid #b88e40 !important;
box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.65) !important;
border-radius: 0 !important;
}
.mobile-more-drag-indicator span {
background: #5a3a22 !important;
}
.mobile-more-header {
border-bottom: 1px solid #4a2f18 !important;
}
.mobile-more-badge {
color: #ffd978 !important;
background: rgba(140, 26, 27, 0.6) !important;
border: 1px solid #b88e40 !important;
border-radius: 0 !important;
}
.mobile-more-title {
color: var(--vang-hoang-toc) !important;
text-shadow: 0 1px 3px #000000 !important;
}
.mobile-more-close {
background: #3e2213 !important;
color: #d6b88d !important;
border: 1px solid #5a3a22 !important;
border-radius: 0 !important;
}
.mobile-more-close:hover,
.mobile-more-close:active {
background: #8c1a1b !important;
color: #ffffff !important;
border-color: #ffd978 !important;
}
/* Thẻ Item trong Drawer Theme Cung Đình */
.more-item-card {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
background: rgba(43, 23, 14, 0.85) !important;
border: 1px solid #4a2f18 !important;
color: #d6b88d !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
border-radius: 0 !important;
}
.more-item-card:active {
background: rgba(140, 26, 27, 0.5) !important;
border-color: #b88e40 !important;
}
.more-item-card.active {
background: linear-gradient(90deg, rgba(140, 26, 27, 0.7) 0%, rgba(43, 23, 14, 0.95) 100%) !important;
border-color: #b88e40 !important;
box-shadow: 0 0 10px rgba(229, 169, 59, 0.2) !important;
}
.more-item-card.active .more-item-name {
color: var(--vang-hoang-toc) !important;
}
.more-item-icon-box {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
max-width: 40px !important;
min-height: 40px !important;
max-height: 40px !important;
flex: 0 0 40px !important;
align-self: center !important;
border-radius: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
padding: 0 !important;
margin: 0 12px 0 0 !important;
box-sizing: border-box !important;
line-height: 1 !important;
background: linear-gradient(135deg, #3e2213 0%, #1c0e08 100%) !important;
border: 1px solid #6b431e !important;
color: #ffd978 !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}
.more-item-icon-box i,
.more-item-icon-box svg {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
font-size: 18px !important;
line-height: 1 !important;
text-align: center !important;
width: auto !important;
height: auto !important;
color: #ffd978 !important;
}
.more-item-name {
color: #ffd978 !important;
text-shadow: 0 1px 2px #000000 !important;
}
.more-item-desc {
color: #bfa588 !important;
}
.more-item-arrow {
color: #b88e40 !important;
}
.more-item-card:hover .more-item-arrow {
color: #ffd978 !important;
}
/* Footer Drawer Theme Cung Đình */
.mobile-more-footer {
border-top: 1px solid #4a2f18 !important;
}
.more-footer-btn.btn-logout {
background: linear-gradient(180deg, #8c1a1b 0%, #5a0e0e 100%) !important;
color: #ffd978 !important;
border: 1px solid #b88e40 !important;
border-radius: 0 !important;
}
.more-footer-btn.btn-login {
background: linear-gradient(180deg, #a62425 0%, #8c1a1b 100%) !important;
color: #ffffff !important;
border: 1px solid #ffd978 !important;
box-shadow: 0 2px 8px rgba(140, 26, 27, 0.5) !important;
border-radius: 0 !important;
}
.more-footer-btn.btn-register {
background: #3e2213 !important;
color: #ffd978 !important;
border: 1px solid #5a3a22 !important;
border-radius: 0 !important;
}
/* ================= CSS ĐỒNG BỘ HEADER (HOÀNH PHI GỖ TRẮC) ================= */
/* Thanh trên cùng chứa logo và tiêu đề lớn */
#header-top {
background-color: var(--go-trac-nen) !important;
background-image: linear-gradient(180deg, #3E2723 0%, var(--go-trac-nen) 100%) !important;
border-bottom: 1px solid var(--vang-dong-co) !important;
padding: 12px 0 !important;
}
/* Chuyển text tiêu đề lớn sang màu vàng lọng vua */
#header-top h1 {
color: var(--vang-hoang-toc) !important;
font-weight: bold !important;
text-shadow: 1px 1px 2px #000 !important;
font-size: 18px !important;
}
/* Thanh chứa Menu chính điều hướng */
#header {
background-color: var(--do-son-son) !important;
background-image: linear-gradient(180deg, #A62425 0%, var(--do-son-son) 100%) !important;
margin-bottom: 20px !important;
padding: 2px 0 !important;
position: relative !important;
z-index: 100000 !important;
/* Chạy đường viền hồi văn mẫu 2 làm dải chỉ đáy hoành tráng */
border-bottom: 5px solid transparent !important;
border-image-slice: 10 !important;
border-image-source: url("data:image/svg+xml;utf8,") !important;
box-shadow: 0 4px 12px rgba(43, 24, 16, 0.2) !important;
}
/* Màu chữ menu điều hướng li a */
#menu-header-menu-1 li a {
color: #FFFDE7 !important;
/* Chữ ngà nổi bật trên nền lụa đỏ */
font-weight: 600 !important;
font-size: 15px !important;
text-transform: uppercase !important;
transition: all 0.2s ease-in-out !important;
}
/* Hover menu hoặc trang hiện tại: Chữ bừng sáng vàng lọng vua */
#menu-header-menu-1 li a:hover,
#menu-header-menu-1 li.current-menu-item a {
color: var(--vang-hoang-toc) !important;
background-color: rgba(0, 0, 0, 0.15) !important;
}
/* Ô tìm kiếm Facebook mượt mà góc trái trên desktop */
#header .header-search-fb {
z-index: 100050 !important;
}
#header .header-search-fb .search-input-wrapper {
background-color: rgba(255, 255, 255, 0.15) !important;
border-radius: 4px !important;
}
#header .header-search-fb .search-input-wrapper input {
color: #FFF !important;
-webkit-text-fill-color: #FFF !important;
}
#header .header-search-fb .search-input-wrapper input::placeholder {
color: #E0D4C3 !important;
-webkit-text-fill-color: #E0D4C3 !important;
}
#header .header-search-fb .search-input-wrapper>i {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
/* Ô tìm kiếm trên mobile (Header toàn trang) */
/* Nút Top Bar Mobile trong Theme Cung Đình */
.mobile-nav-top .mobile-top-btn {
background: #2b170e !important;
border: 1px solid #4a2f18 !important;
color: #ffd978 !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35) !important;
}
.mobile-nav-top .mobile-top-btn i {
color: #ffd978 !important;
}
.mobile-nav-top .mobile-top-btn:active {
background: #4a2f18 !important;
}
/* Modal Search Fullscreen trong Theme Cung Đình Huế */
.mobile-search-backdrop {
background: rgba(18, 9, 4, 0.82) !important;
}
.mobile-modal-input-wrapper {
background: linear-gradient(180deg, #2b170e 0%, #190c06 100%) !important;
border: 1px solid #b88e40 !important;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6) !important;
}
.mobile-modal-input-wrapper .modal-search-icon {
color: var(--vang-hoang-toc, #ffd978) !important;
}
#mobile-modal-search-input {
color: #fffde7 !important;
-webkit-text-fill-color: #fffde7 !important;
}
#mobile-modal-search-input::placeholder {
color: #a89279 !important;
-webkit-text-fill-color: #a89279 !important;
}
.btn-clear-search {
color: #a89279 !important;
}
.btn-clear-search:hover {
color: var(--vang-hoang-toc, #ffd978) !important;
}
.mobile-search-close-btn {
background: rgba(85, 14, 15, 0.75) !important;
border-color: #b88e40 !important;
color: var(--vang-hoang-toc, #ffd978) !important;
}
.mobile-search-close-btn:active {
background: rgba(140, 26, 27, 0.95) !important;
}
.mobile-search-hint {
background: rgba(43, 23, 14, 0.85) !important;
border: 1px solid #5a381b !important;
color: #e5ccae !important;
}
.mobile-search-hint i {
color: var(--vang-hoang-toc, #ffd978) !important;
}
.mobile-modal-input-wrapper .search-results-ajax {
background: #1f0f08 !important;
border: 1px solid #5a381b !important;
}
/* Dropdown kết quả tìm kiếm trận đấu - đồng bộ màu sắc vàng hoàng tộc Desktop & Mobile & không bo tròn */
.search-results-container,
.search-results-ajax,
#search-results-ajax {
border-radius: 0 !important;
z-index: 9999999 !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}
.search-results-container::-webkit-scrollbar,
.search-results-container::-webkit-scrollbar-track,
.search-results-container::-webkit-scrollbar-thumb,
.search-results-ajax::-webkit-scrollbar,
.search-results-ajax::-webkit-scrollbar-track,
.search-results-ajax::-webkit-scrollbar-thumb {
border-radius: 0 !important;
}
.search-results-container .search-match-icon,
.search-results-ajax .search-match-icon,
.search-match-icon,
.search-item,
.search-view-all {
border-radius: 0 !important;
}
.search-results-container .search-match-icon,
.search-results-ajax .search-match-icon,
.search-match-icon {
background: linear-gradient(135deg, #8b4513 0%, #5c2c09 100%) !important;
color: #f7d08a !important;
border-radius: 0 !important;
}
.search-results-container .search-match-icon i,
.search-results-ajax .search-match-icon i,
.search-match-icon i {
color: #f7d08a !important;
-webkit-text-fill-color: #f7d08a !important;
}
.search-results-container .match-players i.fa-circle,
.search-results-ajax .match-players i.fa-circle,
.search-item .match-players i.fa-circle {
color: #e5a823 !important;
-webkit-text-fill-color: #e5a823 !important;
}
.search-results-container .post-title,
.search-results-ajax .post-title,
.search-item .post-title {
color: #c87a1e !important;
-webkit-text-fill-color: #c87a1e !important;
}
.search-results-container .match-submeta i,
.search-results-ajax .match-submeta i {
color: #e5a823 !important;
-webkit-text-fill-color: #e5a823 !important;
}
/* Menu đổ xuống con (Dropdown Thư viện) */
.navigation ul li .sub-menu {
background-color: var(--go-trac-nen) !important;
border: 2px solid var(--vang-dong-co) !important;
border-radius: 0px !important;
width: 250px !important;
}
.navigation ul li .sub-menu li a {
color: #E0D4C3 !important;
border-bottom: 1px solid #3A2218 !important;
}
.navigation ul li .sub-menu li a:hover {
background-color: var(--do-son-son) !important;
color: var(--vang-hoang-toc) !important;
}
/* ================= CSS ĐỒNG BỘ TRONG PHÒNG CHƠI (ROOM.PHP) ================= */
/* Các nút bấm chức năng phòng chơi (Theme 0 Cung Đình Huế: 5 nút, #btn_ready ở giữa nổi bật nhất) */
@media (min-width: 992px) {
.div-btn-function {
position: relative !important;
width: 100% !important;
background: none !important;
padding: 0 !important;
margin: 0 !important;
margin-top: 10px !important;
box-shadow: none !important;
z-index: 99 !important;
box-sizing: border-box !important;
}
}
@media (max-width: 991px) {
.div-btn-function {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
background: #2B1810 !important;
padding: 5px 8px !important; /* Giảm padding dải nút thon gọn giống giao diện sáng */
box-shadow: 0 -3px 15px rgba(0, 0, 0, 0.4) !important;
z-index: 999999 !important;
box-sizing: border-box !important;
}
.div-btn-function .trio-buttons-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 6px !important; /* Thu hẹp khoảng cách giống giao diện sáng */
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.div-btn-function button.mobile-trio-btn {
width: 100% !important;
height: 32px !important; /* Thon gọn 32px giống giao diện sáng */
line-height: 32px !important;
padding: 0 4px !important; /* Giảm padding tối đa */
margin: 0 !important;
display: inline-flex !important;
flex-direction: row !important; /* Icon và chữ nằm trên 1 hàng ngang */
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
border-radius: 0 !important; /* Vẫn giữ bo góc vuông */
box-shadow: none !important; /* Bỏ hoàn toàn bóng / inset mờ bao quanh */
text-shadow: none !important;
box-sizing: border-box !important;
}
.div-btn-function button.mobile-trio-btn i {
font-size: 13px !important;
margin: 0 !important;
background: transparent !important;
box-shadow: none !important;
text-shadow: none !important;
}
.div-btn-function button.mobile-trio-btn span {
font-size: 11.5px !important;
font-weight: 600 !important;
text-transform: none !important;
white-space: nowrap !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
box-shadow: none !important;
text-shadow: none !important;
}
/* 2 nút phụ (Khán Giả & Trò Chuyện): Nền gỗ trắc nâu đen, icon và chữ vàng hoàng tộc */
.div-btn-function .btn-luxury-wood,
.div-btn-function button.btn-luxury-wood {
background: #2B1810 !important;
color: #E5A93B !important;
box-shadow: none !important;
}
.div-btn-function .btn-luxury-wood i,
.div-btn-function .btn-luxury-wood span {
color: #E5A93B !important;
background: transparent !important;
box-shadow: none !important;
text-shadow: none !important;
}
/* Nút chính Điều Khiển ở giữa nổi bật: Nền đỏ son Đại Nội, icon và chữ trắng nổi bật */
.div-btn-function .btn-luxury-gold,
.div-btn-function button.btn-luxury-gold {
background: linear-gradient(180deg, #A62425 0%, #8C1A1B 100%) !important;
color: #FFFFFF !important;
box-shadow: none !important; /* Bỏ lớp inset mờ bao quanh label */
text-shadow: none !important;
}
.div-btn-function .btn-luxury-gold i,
.div-btn-function .btn-luxury-gold span,
.div-btn-function .btn-luxury-gold .pulse-text {
color: #FFFFFF !important;
background: transparent !important;
box-shadow: none !important;
text-shadow: none !important;
}
.div-btn-function .btn-luxury-gold:hover,
.div-btn-function .btn-luxury-gold:active {
background: linear-gradient(180deg, #BA2A2B 0%, #9B1C1D 100%) !important;
color: #FFFFFF !important;
box-shadow: none !important;
}
}
.royal-btn-grid-wrapper {
display: flex !important;
width: 100% !important;
justify-content: space-between !important;
align-items: center !important;
gap: 10px !important;
box-sizing: border-box !important;
}
.royal-btn-grid-wrapper button,
.royal-btn-grid-wrapper .button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 7px !important;
height: 44px !important;
padding: 0 8px !important;
font-size: 13px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
box-sizing: border-box !important;
margin: 0 !important;
border-radius: 0 !important;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
cursor: pointer;
}
/* 4 nút phụ 2 bên: Bỏ cuộc, Xin hòa (trái) và Mời, Copy link (phải) - Nền Gỗ Trắc Cung Đình Huế */
.div-btn-function #btn_give_up,
.div-btn-function #btn_draw,
.div-btn-function #btn_invite,
.div-btn-function #btn_copy_link {
flex: 1 !important;
width: 0 !important;
background: linear-gradient(180deg, #382015 0%, #2B1810 100%) !important;
color: #E5A93B !important;
border: 1px solid #B88E40 !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 0 4px rgba(229, 169, 59, 0.15) !important;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
}
.div-btn-function #btn_give_up:not(.disabled):hover,
.div-btn-function #btn_draw:not(.disabled):hover,
.div-btn-function #btn_invite:not(.disabled):hover,
.div-btn-function #btn_copy_link:not(.disabled):hover {
background: linear-gradient(180deg, #4A2B1D 0%, #382015 100%) !important;
color: #FFD54F !important;
border-color: #E5A93B !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), inset 0 0 6px rgba(229, 169, 59, 0.3) !important;
}
.div-btn-function #btn_give_up:not(.disabled):active,
.div-btn-function #btn_draw:not(.disabled):active,
.div-btn-function #btn_invite:not(.disabled):active,
.div-btn-function #btn_copy_link:not(.disabled):active {
transform: translateY(2px) !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}
/* Nút Bỏ cuộc & Xin hòa khi disabled */
.div-btn-function #btn_give_up.disabled,
.div-btn-function #btn_draw.disabled,
.div-btn-function #btn_ready.disabled,
.royal-btn-grid-wrapper #btn_ready.disabled,
.div-btn-function button.disabled {
opacity: 0.45 !important;
cursor: not-allowed !important;
background: #212121 !important;
color: #757575 !important;
border-color: #424242 !important;
box-shadow: none !important;
transform: none !important;
text-shadow: none !important;
pointer-events: none !important;
}
/* Nút Bỏ cuộc khi khả dụng (Đỏ sậm mun) */
.div-btn-function #btn_give_up:not(.disabled) {
background: linear-gradient(180deg, #5A1618 0%, #3A0C0E 100%) !important;
color: #FFCDD2 !important;
border-color: #BD2B2F !important;
box-shadow: 0 2px 6px rgba(189, 43, 47, 0.4) !important;
}
/* Nút Xin hòa khi khả dụng (Xanh lam ngọc cổ) */
.div-btn-function #btn_draw:not(.disabled) {
background: linear-gradient(180deg, #1C3B4A 0%, #0E232E 100%) !important;
color: #B2EBF2 !important;
border-color: #00838F !important;
box-shadow: 0 2px 6px rgba(0, 131, 143, 0.4) !important;
}
/* NÚT CHÍNH Ở GIỮA: BTN_READY - FORMAT NỔI BẬT NHẤT HỆ THEME CUNG ĐÌNH HUẾ */
.div-btn-function #btn_ready,
.royal-btn-grid-wrapper #btn_ready {
flex: 1.35 !important;
width: 0 !important;
height: 44px !important;
font-size: 14.5px !important;
font-weight: 800 !important;
letter-spacing: 0.8px !important;
color: #FFFDE7 !important;
background: linear-gradient(180deg, #BD2B2F 0%, #8C1A1B 100%) !important;
border: 2px solid #FFD700 !important;
box-shadow: 0 0 14px rgba(255, 215, 0, 0.45), 0 4px 10px rgba(0, 0, 0, 0.5) !important;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7) !important;
}
.div-btn-function #btn_ready i {
font-size: 15px !important;
margin-right: 2px !important;
}
.div-btn-function #btn_ready:not(.disabled):hover {
background: linear-gradient(180deg, #FFD700 0%, #E5A93B 100%) !important;
color: #2B1810 !important;
border-color: #FFFDE7 !important;
transform: translateY(-2px) scale(1.02) !important;
box-shadow: 0 0 18px rgba(255, 215, 0, 0.75), 0 5px 12px rgba(0, 0, 0, 0.6) !important;
text-shadow: none !important;
}
.div-btn-function #btn_ready:not(.disabled):active {
transform: translateY(2px) scale(0.99) !important;
box-shadow: 0 0 8px rgba(255, 215, 0, 0.4) !important;
}
/* Trạng thái Thoát hàng / Stop (bg-danger) */
.div-btn-function #btn_ready.bg-danger {
background: linear-gradient(180deg, #D32F2F 0%, #800000 100%) !important;
color: #FFF !important;
border: 2px solid #FFCDD2 !important;
box-shadow: 0 0 14px rgba(211, 47, 47, 0.55), 0 4px 10px rgba(0, 0, 0, 0.5) !important;
}
.div-btn-function #btn_ready.bg-danger:not(.disabled):hover {
background: linear-gradient(180deg, #F44336 0%, #C62828 100%) !important;
box-shadow: 0 0 18px rgba(244, 67, 54, 0.75), 0 5px 12px rgba(0, 0, 0, 0.6) !important;
}
#submitmsg {
background: linear-gradient(180deg, #A62425 0%, var(--do-son-son) 100%) !important;
color: #FFFDE7 !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
border: 6px solid transparent !important;
border-image-slice: 8 !important;
border-image-source: url("data:image/svg+xml;utf8,") !important;
border-radius: 0px !important;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16) !important;
transition: all 0.2s ease-in-out !important;
}
#submitmsg .fa {
display: block;
margin: 0 auto;
}
#submitmsg:hover {
background: linear-gradient(180deg, var(--vang-hoang-toc) 0%, var(--vang-dong-co) 100%) !important;
color: var(--go-trac-nen) !important;
border-image-source: url("data:image/svg+xml;utf8,") !important;
}
/* Khung thông tin Người chơi góc giữa (Chuyển thành hộp gỗ sơn mài) */
.box-player-1,
.box-player-2 {
background: #FFFDF9 !important;
border-radius: 0 !important;
}
/* Đồng hồ đếm ngược chữ đỏ nền vàng kinh điển */
.countdown {
background: var(--vang-hoang-toc) !important;
color: var(--do-son-son) !important;
border: 1px solid var(--vang-dong-co) !important;
border-radius: 0 !important;
}
/* Khung Hàng chờ thi đấu & Thành viên tham gia bên phải (Chỉ áp dụng desktop) */
.desktop .area_member_joined,
.desktop .area_member_queue {
background: linear-gradient(to right, var(--do-son-son), #BD2B2F) !important;
border-left: 5px solid var(--vang-hoang-toc) !important;
color: var(--vang-hoang-toc) !important;
}
#area_member_queue_name {
background-color: #FFFDF6 !important;
border: 1px dashed var(--vang-dong-co) !important;
}
#area_member_queue_name::before {
color: rgba(140, 26, 27, 0.05) !important;
}
/* ================= CSS ĐỒNG BỘ KHUNG CHAT PHONG CÁCH CUNG ĐÌNH HUẾ ================= */
/* 1. Hộp thông báo hệ thống (System Message) */
.msg_sys {
background-color: #F5EFEB !important;
/* Màu nền giấy bản cổ, ấm áp và dịu mắt */
color: #4E342E !important;
/* Chữ màu nâu sẫm giả mực tàu cổ kính */
border-left: 4px solid var(--do-son-son, #8C1A1B) !important;
/* Viền lụa Đỏ Sơn Son Đại Nội */
padding: 8px 12px;
margin: 6px 0;
border-radius: 0 !important;
font-weight: 500;
box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.03);
}
/* Icon thông tin hệ thống nằm đầu câu */
.msg_sys .fa-info-circle,
.msg_sys .fa {
color: var(--do-son-son, #8C1A1B) !important;
/* Chuyển icon sang màu đỏ thẫm đại nội */
margin-right: 6px;
opacity: 0.9 !important;
}
/* 2. Màu sắc hiển thị Kết quả trận đấu & Nút bấm "Xem lại trận đấu" trong log chat */
.text-result,
.btn_view_board {
color: var(--do-son-son, #8C1A1B) !important;
/* Đổi hẳn chữ "thắng", "bỏ cuộc" từ cam sang Đỏ Sơn Son */
font-weight: 700 !important;
}
/* Hiệu ứng liên kết khi người xem hoặc kỳ thủ rê chuột vào chữ "Xem lại trận đấu" */
.btn_view_board:hover {
color: var(--vang-hoang-toc, #E5A93B) !important;
/* Bừng sáng tông Vàng Hoàng Tộc khi hover */
text-decoration: underline !important;
}
.msgln .user_name {
color: #3E2723 !important;
font-weight: 700 !important;
text-shadow: 0.5px 0.5px 0px rgba(255, 253, 249, 0.8);
}
/* ================= HIỆU ỨNG KẾT THÚC TRẬN ĐẤU HOÀNG GIA (ROYAL MATCH RESULT EFFECTS) ================= */
.avatar-container .player_status {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
z-index: 25 !important;
pointer-events: none !important;
}
.royal-result-container {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
/* 1. HIỆU ỨNG CHIẾN THẮNG (WINNER) */
.royal-result-winner .royal-crown {
position: absolute;
top: -24px;
left: 50%;
transform: translateX(-50%) scale(0);
width: 34px;
height: 34px;
filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.95)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
animation: royalCrownDrop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, royalCrownFloat 2s ease-in-out infinite 0.6s;
z-index: 30;
}
.royal-result-winner .royal-seal {
position: absolute;
bottom: -8px;
right: -8px;
background: linear-gradient(135deg, #BD2B2F 0%, #8C1A1B 100%);
color: #FFE082;
border: 1.5px solid #FFD700;
font-size: 11px;
font-weight: 900;
padding: 2px 6px;
border-radius: 4px;
box-shadow: 0 0 10px rgba(189, 43, 47, 0.8), 0 2px 5px rgba(0, 0, 0, 0.4);
text-transform: uppercase;
letter-spacing: 0.5px;
transform: scale(0) rotate(-6deg);
animation: royalSealStamp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s forwards;
z-index: 31;
}
.royal-winner-glow {
position: absolute;
inset: -4px;
border-radius: 50%;
border: 2.5px solid #FFD700;
box-shadow: 0 0 15px rgba(255, 215, 0, 0.9), inset 0 0 10px rgba(255, 215, 0, 0.6);
animation: royalGlowPulse 1.5s infinite alternate;
pointer-events: none;
}
.royal-sparkle {
position: absolute;
width: 6px;
height: 6px;
background: #FFF;
border-radius: 50%;
box-shadow: 0 0 6px #FFD700, 0 0 10px #FFD700;
animation: royalSparkleAnim 1.2s infinite ease-in-out;
}
.royal-sparkle.s1 {
top: -10px;
left: 0px;
animation-delay: 0.1s;
}
.royal-sparkle.s2 {
top: -15px;
right: 2px;
animation-delay: 0.4s;
}
.royal-sparkle.s3 {
bottom: -2px;
left: -6px;
animation-delay: 0.7s;
}
/* 2. HIỆU ỨNG THẤT BẠI (LOSER) */
.royal-result-loser .royal-shield {
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%) scale(0);
width: 26px;
height: 26px;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
animation: royalShieldPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
z-index: 30;
}
.royal-result-loser .royal-seal {
position: absolute;
bottom: -8px;
right: -8px;
background: linear-gradient(135deg, #4A4A4A 0%, #2A2A2A 100%);
color: #D6D6D6;
border: 1.5px solid #8A8A8A;
font-size: 11px;
font-weight: 800;
padding: 2px 6px;
border-radius: 4px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
text-transform: uppercase;
transform: scale(0);
animation: royalSealStamp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s forwards;
z-index: 31;
}
/* 3. HIỆU ỨNG HÒA (DRAW) */
.royal-result-draw .royal-shield,
.royal-result-draw .royal-swords {
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%) scale(0);
width: 26px;
height: 26px;
filter: drop-shadow(0 0 6px rgba(0, 188, 212, 0.6));
animation: royalShieldPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
z-index: 30;
}
.royal-result-draw .royal-seal {
position: absolute;
bottom: -8px;
right: -8px;
background: linear-gradient(135deg, #00838F 0%, #004D40 100%);
color: #E0F7FA;
border: 1.5px solid #4DD0E1;
font-size: 11px;
font-weight: 800;
padding: 2px 6px;
border-radius: 4px;
box-shadow: 0 0 8px rgba(0, 131, 143, 0.6);
text-transform: uppercase;
transform: scale(0);
animation: royalSealStamp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s forwards;
z-index: 31;
}
/* 4. DÒNG CHỮ ELO BAY */
.royal-elo-float {
position: absolute;
left: 50%;
font-family: 'Segoe UI', Roboto, sans-serif;
font-size: 13px;
font-weight: 900;
white-space: nowrap;
pointer-events: none;
z-index: 35;
opacity: 0;
}
.royal-elo-float.elo-plus {
color: #4CAF50;
text-shadow: 0 0 8px rgba(76, 175, 80, 0.9), 0 1px 2px #000;
animation: royalEloFloatUp 2.5s ease-out 0.4s forwards;
}
.royal-elo-float.elo-minus {
color: #FF5252;
text-shadow: 0 0 8px rgba(255, 82, 82, 0.9), 0 1px 2px #000;
animation: royalEloFloatDown 2.5s ease-out 0.4s forwards;
}
.royal-elo-float.elo-draw {
color: #FFD54F;
text-shadow: 0 0 8px rgba(255, 213, 79, 0.9), 0 1px 2px #000;
animation: royalEloFloatUp 2.5s ease-out 0.4s forwards;
}
@keyframes royalCrownDrop {
0% {
transform: translateX(-50%) translateY(-20px) scale(0.2);
opacity: 0;
}
60% {
transform: translateX(-50%) translateY(3px) scale(1.15);
opacity: 1;
}
100% {
transform: translateX(-50%) translateY(0) scale(1);
opacity: 1;
}
}
@keyframes royalCrownFloat {
0%,
100% {
transform: translateX(-50%) translateY(0);
}
50% {
transform: translateX(-50%) translateY(-4px);
}
}
@keyframes royalSealStamp {
0% {
transform: scale(2) rotate(15deg);
opacity: 0;
}
60% {
transform: scale(0.9) rotate(-8deg);
opacity: 1;
}
100% {
transform: scale(1) rotate(-6deg);
opacity: 1;
}
}
@keyframes royalShieldPop {
0% {
transform: translateX(-50%) scale(0);
opacity: 0;
}
70% {
transform: translateX(-50%) scale(1.1);
opacity: 1;
}
100% {
transform: translateX(-50%) scale(1);
opacity: 1;
}
}
@keyframes royalGlowPulse {
0% {
box-shadow: 0 0 8px rgba(255, 215, 0, 0.5), inset 0 0 4px rgba(255, 215, 0, 0.3);
}
100% {
box-shadow: 0 0 20px rgba(255, 215, 0, 0.95), inset 0 0 10px rgba(255, 215, 0, 0.7);
}
}
@keyframes royalSparkleAnim {
0%,
100% {
transform: scale(0);
opacity: 0;
}
50% {
transform: scale(1.2);
opacity: 1;
}
}
@keyframes royalEloFloatUp {
0% {
top: 10px;
transform: translateX(-50%) scale(0.7);
opacity: 0;
}
20% {
top: -5px;
transform: translateX(-50%) scale(1.2);
opacity: 1;
}
60% {
top: -18px;
transform: translateX(-50%) scale(1);
opacity: 1;
}
100% {
top: -32px;
transform: translateX(-50%) scale(0.9);
opacity: 0;
}
}
@keyframes royalEloFloatDown {
0% {
top: 10px;
transform: translateX(-50%) scale(0.7);
opacity: 0;
}
20% {
top: 25px;
transform: translateX(-50%) scale(1.2);
opacity: 1;
}
60% {
top: 38px;
transform: translateX(-50%) scale(1);
opacity: 1;
}
100% {
top: 50px;
transform: translateX(-50%) scale(0.9);
opacity: 0;
}
}
/* =========================================================================
OVERRIDE THEME 0: GỖ TRẦM ĐẠI NỘI & HOÀNG TỘC (DÀNH CHO MEMBER CHỌN THEME 0 / GUEST)
========================================================================= */
/* 1. Header User Dropdown Menu */
.header-user-dropdown-menu {
background: linear-gradient(180deg, #2B1810 0%, #1f110b 100%) !important;
border: 1px solid #B88E40 !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}
.dropdown-user-greeting {
color: #dcd1be !important;
}
.dropdown-user-fullname {
color: #FFFDE7 !important;
}
.header-user-dropdown-divider {
background: rgba(184, 142, 64, 0.25) !important;
}
.header-user-dropdown-item {
color: #FFFDE7 !important;
}
.header-user-dropdown-item i {
color: #E5A93B !important;
font-family: 'Font Awesome 6 Free', 'FontAwesome' !important;
font-weight: 900 !important;
font-style: normal !important;
display: inline-block !important;
}
.header-user-dropdown-item:hover {
background: rgba(229, 169, 59, 0.2) !important;
color: #ffd54f !important;
}
.header-user-dropdown-item:hover i {
color: #ffd54f !important;
}
/* 2. Profile Hero, Actions Bar & Elo Showcase Cards */
.fixi-card {
border: 1px solid rgba(184, 142, 64, 0.25) !important;
box-shadow: 0 8px 24px rgba(43, 24, 16, 0.08) !important;
}
.fixi-profile-hero {
background: linear-gradient(135deg, #2B1810 0%, #3E2723 50%, #5E0F10 100%) !important;
border-bottom: 3px solid #B88E40 !important;
color: #FFFDE7 !important;
}
.fixi-avatar-wrapper {
border: 3px solid #E5A93B !important;
box-shadow: 0 0 16px rgba(229, 169, 59, 0.4) !important;
background: #1c0e08 !important;
}
.fixi-avatar-icon {
background: linear-gradient(135deg, #3d1c10 0%, #200e07 100%) !important;
color: var(--vang-hoang-toc) !important;
}
.fixi-avatar-change-btn {
background: rgba(229, 169, 59, 0.15) !important;
border: 1px solid rgba(229, 169, 59, 0.45) !important;
color: var(--vang-hoang-toc, #E5A93B) !important;
border-radius: 20px !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
}
.fixi-avatar-change-btn i {
color: var(--vang-hoang-toc, #E5A93B) !important;
}
.fixi-avatar-change-btn:hover {
background: linear-gradient(135deg, #B88E40 0%, #8C6226 100%) !important;
border-color: #E5A93B !important;
color: #FFFDE7 !important;
box-shadow: 0 4px 12px rgba(229, 169, 59, 0.45) !important;
}
.fixi-avatar-change-btn:hover i {
color: #FFFDE7 !important;
}
.header-user-profile {
background: linear-gradient(135deg, #3d1c10 0%, #200e07 100%) !important;
border: 1px solid var(--vang-dong-co) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}
.header-user-dropdown-container:hover .header-user-profile,
.header-user-profile:hover {
background: linear-gradient(135deg, #502717 0%, #30150b 100%) !important;
border-color: var(--vang-hoang-toc) !important;
box-shadow: 0 4px 15px rgba(229, 169, 59, 0.35) !important;
}
.header-user-avatar {
border: 2px solid var(--vang-hoang-toc) !important;
background-color: #2b1810 !important;
}
.header-user-avatar-icon {
background: linear-gradient(135deg, #4a2718 0%, #2b1810 100%) !important;
border: 2px solid var(--vang-hoang-toc) !important;
color: var(--vang-hoang-toc) !important;
}
.header-user-name {
color: #FFFDE7 !important;
}
.header-user-dropdown-container:hover .header-user-name {
color: var(--vang-hoang-toc) !important;
}
.header-user-arrow {
color: var(--vang-hoang-toc) !important;
}
.fixi-badge-nickname {
background: linear-gradient(135deg, #E5A93B 0%, #B88E40 100%) !important;
color: #2B1810 !important;
}
.fixi-hero-meta {
color: #E0D4C3 !important;
}
.fixi-hero-meta-item i {
color: #E5A93B !important;
}
.fixi-hero-qr {
background: rgba(255, 255, 255, 0.08) !important;
border: 1px solid rgba(229, 169, 59, 0.3) !important;
}
.fixi-hero-qr span {
color: #E0D4C3 !important;
}
.fixi-actions-bar {
background: #fdfbf7 !important;
border-bottom: 1px solid #f0e6d6 !important;
}
.fixi-btn-primary {
background: linear-gradient(180deg, #A62425 0%, #8C1A1B 100%) !important;
color: #FFFDE7 !important;
border-color: #B88E40 !important;
box-shadow: 0 2px 6px rgba(140, 26, 27, 0.25) !important;
}
.fixi-btn-primary:hover {
background: linear-gradient(180deg, #F5B041 0%, #E5A93B 100%) !important;
color: #2B1810 !important;
border-color: #B88E40 !important;
}
.fixi-btn-secondary {
background: #fff !important;
color: #4A3528 !important;
border: 1px solid #dcd1be !important;
}
.fixi-btn-secondary:hover {
background: #fbf5eb !important;
border-color: #E5A93B !important;
color: #8C1A1B !important;
}
.fixi-elo-card {
border: 1px solid rgba(184, 142, 64, 0.3) !important;
}
.fixi-elo-card.card-daily {
background: linear-gradient(135deg, #FFF9F0 0%, #FFFDF9 100%) !important;
border-top: 4px solid #E5A93B !important;
}
.fixi-elo-card.card-tournament {
background: linear-gradient(135deg, #FBF4F4 0%, #FFFDFD 100%) !important;
border-top: 4px solid #8C1A1B !important;
}
.fixi-elo-header {
border-bottom: 1px dashed rgba(184, 142, 64, 0.3) !important;
}
.fixi-elo-title {
color: #2B1810 !important;
}
.card-daily .fixi-elo-title i {
color: #E5A93B !important;
}
.card-tournament .fixi-elo-title i {
color: #8C1A1B !important;
}
/* 3. Forms (Edit Profile, Change Password) */
.fixi-form-header {
background: linear-gradient(135deg, #2B1810 0%, #8C1A1B 100%) !important;
color: #FFFDE7 !important;
border-bottom: 2px solid #B88E40 !important;
}
.fixi-form-header h2 {
color: #FFFDE7 !important;
}
.fixi-form-header i {
color: #E5A93B !important;
}
.fixi-form-group-title {
color: #8C1A1B !important;
border-bottom: 1px solid #f0e6d6 !important;
}
.fixi-input-field input:focus,
.fixi-input-field textarea:focus {
border-color: #E5A93B !important;
box-shadow: 0 0 0 3px rgba(229, 169, 59, 0.25) !important;
}
.fixi-input-icon-wrap:focus-within i {
color: #E5A93B !important;
}
.fixi-gender-label input[type="radio"] {
accent-color: #8C1A1B !important;
}
.fixi-form-control:focus {
border-color: #E5A93B !important;
box-shadow: 0 0 0 3px rgba(229, 169, 59, 0.25) !important;
}
.fixi-setting-preview-box:hover {
border-color: #E5A93B !important;
}
.fixi-setting-preview-sound {
color: #8C1A1B !important;
background: #ffffff !important;
}
.fixi-setting-preview-sound:hover {
color: #E5A93B !important;
border-color: #E5A93B !important;
}
.fixi-setting-preview-sound.is-muted {
color: #8f857d !important;
opacity: 0.6;
}
.fixi-board-lightbox-content {
border: 2px solid #E5A93B !important;
}
.fixi-board-lightbox-header {
background: linear-gradient(135deg, #2B1810 0%, #8C1A1B 100%) !important;
border-bottom: 2px solid #B88E40 !important;
}
.fixi-board-lightbox-title i {
color: #E5A93B !important;
}
.fixi-section-title {
border-left: none !important;
padding-left: 0 !important;
}
.fixi-section-title i {
color: #8C1A1B !important;
}
.fixi-setting-item label i {
color: #8C1A1B !important;
}
.fixi-link-add {
color: #8C1A1B !important;
}
.fixi-link-add:hover {
color: #E5A93B !important;
}
/* 4. Match History, Practice AI, Leaderboard */
.fixi-history-hero {
background: linear-gradient(135deg, #2B1810 0%, #3E2723 50%, #5E0F10 100%) !important;
border: 1px solid rgba(184, 142, 64, 0.35) !important;
border-bottom: 3px solid #B88E40 !important;
color: #FFFDE7 !important;
}
.fixi-history-title-wrap h1 {
color: #FFFDE7 !important;
}
.fixi-history-title-wrap p {
color: #E0D4C3 !important;
}
.fixi-history-title-wrap i.hero-icon {
color: #E5A93B !important;
}
.fixi-history-card {
border: 1px solid rgba(184, 142, 64, 0.25) !important;
}
.fixi-history-card-header {
background: linear-gradient(135deg, #2B1810 0%, #8C1A1B 100%) !important;
color: #FFFDE7 !important;
border-bottom: 2px solid #B88E40 !important;
}
.fixi-history-card-header h2 {
color: #FFFDE7 !important;
}
.fixi-history-card-header h2 i {
color: #E5A93B !important;
}
.fixi-ai-card {
border: 1px solid rgba(184, 142, 64, 0.35) !important;
border-radius: 0 !important;
}
.fixi-ai-header {
background: linear-gradient(135deg, #2B1810 0%, #8C1A1B 100%) !important;
border-bottom: 2px solid #B88E40 !important;
border-radius: 0 !important;
}
.fixi-ai-title-wrap h1 {
color: #FFFDE7 !important;
}
.fixi-ai-title-wrap i {
color: #E5A93B !important;
}
.fixi-ai-header-badge {
background: rgba(229, 169, 59, 0.2) !important;
color: #FFFDE7 !important;
border: 1px solid rgba(229, 169, 59, 0.5) !important;
border-radius: 0 !important;
}
.fixi-ai-bot-bar {
border-radius: 0 !important;
}
.fixi-bot-avatar-img {
border: 2px solid #E5A93B !important;
background: #2B1810 !important;
}
.fixi-bot-name {
color: #2B1810 !important;
}
.fixi-bot-level-badge {
color: #8C1A1B !important;
}
.fixi-bot-side-badge,
.fixi-bot-badge-tag span {
border-radius: 0 !important;
}
.fixi-ai-board-wrapper {
border-radius: 0 !important;
}
.fixi-ai-select {
border-radius: 0 !important;
}
.fixi-ai-select:focus {
border-color: #E5A93B !important;
box-shadow: 0 0 0 3px rgba(229, 169, 59, 0.25) !important;
}
.fixi-ai-btn {
border-radius: 0 !important;
}
.fixi-ai-btn-primary {
background: linear-gradient(180deg, #A62425 0%, #8C1A1B 100%) !important;
color: #FFFDE7 !important;
border: 1px solid #B88E40 !important;
border-radius: 0 !important;
}
.fixi-ai-btn-primary:hover {
background: linear-gradient(180deg, #F5B041 0%, #E5A93B 100%) !important;
color: #2B1810 !important;
}
.fixi-ai-btn-secondary {
color: #4A3528 !important;
border: 1px solid #dcd1be !important;
border-radius: 0 !important;
}
.fixi-ai-btn-secondary:hover {
border-color: #E5A93B !important;
color: #8C1A1B !important;
}
.fixi-ai-guest-card {
border-radius: 0 !important;
}
.fixi-leaderboard-hero {
background: linear-gradient(135deg, #2B1810 0%, #681415 60%, #8C1A1B 100%) !important;
border: 1px solid #B88E40 !important;
}
.fixi-leaderboard-title-wrap h1 {
color: #FFFDE7 !important;
}
.fixi-leaderboard-title-wrap p {
color: #E0D4C3 !important;
}
.fixi-leaderboard-title-wrap i.hero-icon {
color: #E5A93B !important;
text-shadow: 0 0 15px rgba(229, 169, 59, 0.4) !important;
}
/* 5. Tournament Banners */
.tour-hero-banner,
.tour-detail-header-card {
background: linear-gradient(135deg, #2b1f14 0%, #4a2f1b 50%, #1f140c 100%) !important;
border: 1px solid #c89b5c !important;
box-shadow: 0 4px 18px rgba(43, 31, 20, 0.15) !important;
}
/* 6. Modal & Popup Toàn Cục (Theme Cung Đình Huế / Gỗ Trầm) */
.fixi-idpw-dialog {
border: 2px solid var(--fixi-modal-border, #E5A93B) !important;
border-radius: 0 !important;
}
.fixi-idpw-header {
background: var(--fixi-modal-header-bg) !important;
border-bottom: 2px solid var(--fixi-modal-header-border, #E5A93B) !important;
border-radius: 0 !important;
}
.fixi-idpw-body {
border-radius: 0 !important;
}
.fixi-idpw-footer {
background: var(--fixi-modal-footer-bg, #faf6f0) !important;
border-top: 1px solid var(--fixi-modal-footer-border, #ede4d6) !important;
border-radius: 0 !important;
}
.fixi-idpw-field input,
.fixi-idpw-body input,
.fixi-idpw-body select,
.fixi-idpw-body textarea {
border-radius: 0 !important;
}
.fixi-idpw-btn-cancel {
background: var(--fixi-modal-btn-cancel-bg, #ece5db) !important;
color: var(--fixi-modal-btn-cancel-color, #4a2f1b) !important;
border: 1px solid var(--fixi-modal-btn-cancel-border, #dcd0bf) !important;
border-radius: 0 !important;
}
.fixi-idpw-btn-cancel:hover {
background: var(--fixi-modal-btn-cancel-hover, #ded3c1) !important;
color: #2b1810 !important;
}
.fixi-idpw-btn-submit {
background: var(--fixi-modal-btn-submit-bg) !important;
color: var(--fixi-modal-btn-submit-color, #FFFDE7) !important;
border: 1px solid var(--fixi-modal-btn-submit-border, #E5A93B) !important;
box-shadow: var(--fixi-modal-btn-submit-shadow) !important;
border-radius: 0 !important;
}
.fixi-idpw-btn-submit:hover {
background: var(--fixi-modal-btn-submit-hover) !important;
color: #ffffff !important;
}
.fixi-idpw-field input:focus {
border-color: var(--fixi-modal-input-focus-border, #E5A93B) !important;
box-shadow: 0 0 0 3px var(--fixi-modal-input-focus-ring, rgba(229, 169, 59, 0.2)) !important;
}
.fixi-idpw-msg-text {
color: var(--fixi-modal-text-color, #2b1810) !important;
}
.fixi-idpw-warning {
background: #fbf5ea !important;
border-color: #ebd8be !important;
color: #7c3d12 !important;
border-radius: 0 !important;
}
.fixi-idpw-close {
background: rgba(229, 169, 59, 0.25) !important;
border-color: rgba(229, 169, 59, 0.45) !important;
color: #FFFDE7 !important;
border-radius: 0 !important;
}
.fixi-idpw-close:hover {
background: #8C1A1B !important;
border-color: #E5A93B !important;
}
/* ==========================================================================
7. FIXI AUTHENTICATION OVERRIDES - THEME 0 (CUNG ĐÌNH HUẾ / GỖ TRẦM HOÀNG GIA)
========================================================================== */
.fixi-auth-card {
background: #ffffff !important;
border: 1px solid rgba(184, 142, 64, 0.3) !important;
box-shadow: 0 10px 30px rgba(43, 24, 16, 0.12) !important;
}
.fixi-auth-card:hover {
box-shadow: 0 15px 35px rgba(43, 24, 16, 0.16) !important;
}
.fixi-auth-header {
background: linear-gradient(135deg, #2B1810 0%, #3E2723 50%, #8C1A1B 100%) !important;
border-bottom: 3px solid #B88E40 !important;
color: #FFFDE7 !important;
}
.fixi-auth-header h2 {
color: #FFFDE7 !important;
}
.fixi-auth-header h2 i {
color: #E5A93B !important;
}
.fixi-auth-header p {
color: #E0D4C3 !important;
}
.fixi-auth-body {
background: #ffffff !important;
}
.fixi-auth-field label {
color: #2B1810 !important;
}
.fixi-auth-field label .required {
color: #8C1A1B !important;
}
.fixi-auth-input-wrap i {
color: #8C1A1B !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
.fixi-auth-input-wrap input[type="text"],
.fixi-auth-input-wrap input[type="password"],
.fixi-auth-input-wrap input[type="email"],
.fixi-auth-input-wrap input,
.fixi-auth-input-wrap select {
border: 1.5px solid #dcd1be !important;
border-radius: 0 !important;
color: #2B1810 !important;
background: #ffffff !important;
}
.fixi-auth-input-wrap input:focus,
.fixi-auth-input-wrap select:focus {
border-color: #E5A93B !important;
box-shadow: 0 0 0 3.5px rgba(229, 169, 59, 0.25) !important;
background: #ffffff !important;
}
.fixi-auth-input-wrap:focus-within i {
color: #E5A93B !important;
}
.fixi-auth-btn-submit {
background: linear-gradient(135deg, #8C1A1B 0%, #6e1515 100%) !important;
color: #FFFDE7 !important;
border: 1px solid #B88E40 !important;
border-radius: 50px !important;
box-shadow: 0 4px 14px rgba(140, 26, 27, 0.35) !important;
}
.fixi-auth-btn-submit:hover {
background: linear-gradient(135deg, #F5B041 0%, #E5A93B 100%) !important;
color: #2B1810 !important;
border-color: #B88E40 !important;
box-shadow: 0 6px 18px rgba(229, 169, 59, 0.4) !important;
}
.fixi-auth-remember label {
color: #4A3528 !important;
}
.fixi-auth-remember input[type="checkbox"] {
accent-color: #8C1A1B !important;
}
.fixi-auth-forgot-link {
color: #8C1A1B !important;
}
.fixi-auth-forgot-link:hover {
color: #b32424 !important;
}
.fixi-auth-divider {
color: #8c735d !important;
}
.fixi-auth-divider:before,
.fixi-auth-divider:after {
background: #ebdccb !important;
}
.fixi-auth-switch-prompt {
border-top-color: #ebdccb !important;
color: #4A3528 !important;
}
.fixi-auth-switch-prompt a {
color: #8C1A1B !important;
}
.fixi-auth-switch-prompt a:hover {
color: #b32424 !important;
}
/* =========================================================================
NÚT TẠO BÀN TRÊN ĐẦU TRANG LOBBY (THEME 0 - CUNG ĐÌNH HUẾ)
========================================================================= */
.lobby-header-actions {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 16px !important;
margin: 10px 0 25px 0 !important;
flex-wrap: wrap !important;
text-align: center !important;
width: 100% !important;
}
.btn-lobby-create.btn-normal {
background: linear-gradient(135deg, #8C1A1B 0%, #6E1213 100%) !important;
border: 1px solid #B88E40 !important;
color: #FFFDE7 !important;
box-shadow: 0 4px 14px rgba(140, 26, 27, 0.35) !important;
}
.btn-lobby-create.btn-normal:hover {
background: linear-gradient(135deg, #A82325 0%, #8C1A1B 100%) !important;
border-color: #E5A93B !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 18px rgba(140, 26, 27, 0.5) !important;
color: #FFFFFF !important;
}
.btn-lobby-create.btn-admin {
background: linear-gradient(135deg, #B88E40 0%, #8C6A28 100%) !important;
border: 1px solid #E5A93B !important;
color: #2B1810 !important;
box-shadow: 0 4px 14px rgba(184, 142, 64, 0.35) !important;
}
.btn-lobby-create.btn-admin i {
color: #2B1810 !important;
}
.btn-lobby-create.btn-admin:hover {
background: linear-gradient(135deg, #D4AF37 0%, #B88E40 100%) !important;
border-color: #FFFDE7 !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 18px rgba(229, 169, 59, 0.5) !important;
color: #1A0F0A !important;
}
/* =========================================================================
ĐẤU TRƯỜNG GIẢI ĐẤU - GIAO DIỆN THEME 0 (GỖ TRẦM HOÀNG GIA / CUNG ĐÌNH HUẾ)
========================================================================= */
.tour-round-tag {
color: #6a3906 !important;
background: #f7ede0 !important;
border: 1px solid #e5cdb2 !important;
box-shadow: 0 1px 3px rgba(109, 52, 12, 0.08) !important;
border-radius: 0 !important;
}
.tour-round-tag:hover {
background: #f0e2d0 !important;
border-color: #dab894 !important;
filter: none !important;
}
/* =========================================================================
QUY CHUẨN THIẾT KẾ GÓC VUÔNG ĐỒNG BỘ TOÀN BỘ THEME 0 (CUNG ĐÌNH / GỖ TRẦM)
Loại bỏ toàn bộ border-radius (= 0) cho buttons, search, menu, cards, modals
========================================================================= */
/* 1. Nút bấm, Inputs & Form Controls toàn hệ thống */
button,
.button,
.btn,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="search"],
select,
textarea,
input.form-control,
select.form-control,
textarea.form-control,
.form-control,
.styled-select,
.styled-select select,
.fakefile button {
border-radius: 0 !important;
}
/* 2. Thanh Search & Menu Navigation Header */
.header-search-fb,
.header-search-fb .search-input-wrapper,
.header-search-fb .search-input-wrapper input,
#header .header-search-fb .search-input-wrapper,
#header .header-search-fb .search-input-wrapper input,
.mobile-nav-search.header-search-fb .search-input-wrapper,
.mobile-nav-search.header-search-fb .search-input-wrapper input,
.mobile-nav-tabs,
.nav-tab-item,
.nav-tab-item.tab-main-item,
.nav-tab-item.active,
.nav-tab-item.tab-tour-item,
.nav-tab-item.tab-tour-item.active,
.nav-tab-item.tab-music-item,
.nav-tab-item.tab-music-item.music-on,
.nav-tab-item.tab-more-toggle,
.nav-tab-item.tab-more-toggle.open,
.mobile-more-panel,
.mobile-more-badge,
.mobile-more-close,
.more-item-card,
.more-item-icon-box,
.more-footer-btn,
.more-footer-btn.btn-logout,
.more-footer-btn.btn-login,
.more-footer-btn.btn-register,
.search-results-container,
.search-results-ajax,
#search-results-ajax,
.search-match-icon,
.search-item,
.search-view-all,
#header,
#header-top,
.navigation,
.navigation>.header-menu>ul>li>a,
#menu-header-menu-1 li a,
#menu-header-menu-1 li a:hover,
#menu-header-menu-1 li.current-menu-item a,
.navigation .header-menu ul>li ul,
.navigation .header-menu ul>li ul li,
.navigation .header-menu ul>li ul li a,
.sub-menu,
.sub-menu li,
.sub-menu li a,
#desktop-music-control button,
#btn-desktop-music,
.mobile-music-control button {
border-radius: 0 !important;
}
/* 3. Nút Tạo Bàn & Thẻ Bàn Chơi Trang Lobby */
.btn-lobby-create,
.btn-lobby-create.btn-normal,
.btn-lobby-create.btn-admin,
.room_item,
.speed-column-box,
.box_pw_confirm button,
.box_pw_confirm input,
.setting_area,
.setting_time,
.setting_time_item,
.setting_dg {
border-radius: 0 !important;
}
/* 4. Đấu Trường Giải Đấu (Tournament) */
.tour-hero-banner,
.tour-detail-header-card,
.tour-hero-btn-register,
.tour-hero-btn-history,
.tour-hero-btn-action,
.tour-main-tab-switcher,
.tour-main-tab-btn,
.tour-main-tab-badge,
.tour-match-card,
.tour-card-header,
.tour-card-body,
.tour-card-footer,
.tour-badge-cup,
.tour-round-tag,
.tour-status-tag,
.tour-time-tag,
.tour-btn-action,
.tour-btn-action.btn-watch,
.tour-btn-action.btn-disabled,
.tour-empty-box,
.tour-reg-section-wrap,
.tour-reg-sec-header,
.tour-reg-sec-desc,
.tour-reg-member-bar,
.tour-reg-member-info,
.tour-reg-elo-group,
.tour-reg-elo-chip,
.tour-reg-elo-val,
.tour-reg-list-grid,
.tour-reg-item-card,
.tour-reg-item-header,
.tour-reg-type-pill,
.tour-reg-state-tag,
.tour-reg-item-title,
.tour-reg-item-desc,
.tour-reg-item-body,
.tour-reg-spec-label,
.tour-reg-spec-val,
.tour-reg-members-box,
.tour-reg-members-head,
.tour-reg-members-title,
.tour-reg-members-list,
.tour-reg-member-tag,
.tour-btn-card-register,
.tour-btn-card-withdraw,
.tour-badge-registered,
.tour-badge-locked,
.tour-btn-card-login,
.tour-btn-view-result,
.tour-btn-back,
.tour-hero-btn-register,
.tour-type-badge,
.tour-time-text,
.tour-count-players,
.tour-history-link-title,
.tour-history-card-wrap,
.tour-history-table-responsive,
.tour-history-table,
.tour-history-table thead th,
.tour-history-table tbody td,
.tour-history-item,
.tour-empty-box,
.tour-empty-icon,
.tour-podium-card,
.tour-podium-box,
.tour-pagination,
.tour-pagination-wrap,
.tour-pagination-link,
.tour-schedule-card,
.tour-bracket-node,
.tour-bracket-match,
.tour-info-card,
.tour-rule-card,
.tour-prize-card,
.tour-modal-box,
.tour-modal-content,
.tour-modal-header,
.tour-modal-footer,
.tour-detail-header-card,
.tour-detail-title-group,
.tour-detail-submeta span,
.tour-standings-section-wrap,
.tour-matrix-table-responsive,
.tour-matrix-table,
.tour-matrix-table thead th,
.tour-matrix-table tbody td,
.tour-status-bi-loai,
.tour-matrix-pill,
button.tour-matrix-pill,
.tour-matrix-pill.win,
.tour-matrix-pill.draw,
.tour-matrix-pill.loss,
.tour-matrix-pill.pending,
.tour-matrix-pill.empty,
.tour-score-total,
.tour-buchholz-val,
.tour-wdl-val,
[class*="tour-reg-"],
[class*="tour-card-"],
[class*="tour-badge-"],
[class*="tour-tag-"],
[class*="tour-tab-"],
[class*="tour-btn-"],
[class*="tour-matrix-"],
[class*="tour-detail-"],
[class*="tour-standings-"] {
border-radius: 0 !important;
}
.tour-match-card.clickable:hover {
border-color: var(--tour-card-border) !important;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
}
/* Đảm bảo footer giải đấu và các nút cân xứng 50% uppercase trên giao diện Gỗ Trầm (Theme 0) */
.tour-reg-item-footer {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
width: 100% !important;
margin-top: 0 !important;
box-sizing: border-box !important;
}
.tour-reg-item-footer > * {
flex: 1 1 0 !important;
min-width: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
.tour-btn-card-register,
.tour-btn-card-withdraw,
.tour-badge-registered,
.tour-badge-locked,
.tour-btn-card-login {
text-transform: uppercase !important;
letter-spacing: 0.3px !important;
font-weight: 800 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
margin: 0 !important;
min-height: 40px !important;
box-sizing: border-box !important;
transition: all 0.35s ease !important;
}
.tour-btn-card-register {
background: var(--tour-hero-btn-bg) !important;
border: 1px solid var(--tour-hero-btn-border) !important;
box-shadow: 0 3px 10px rgba(230, 126, 34, 0.25) !important;
color: #ffffff !important;
}
.tour-btn-card-register:hover {
background: var(--tour-hero-btn-hover-bg) !important;
transform: translateY(-2px) !important;
box-shadow: 0 0 20px rgba(230, 126, 34, 0.7), 0 4px 16px rgba(211, 84, 0, 0.5) !important;
color: #ffffff !important;
}
.tour-btn-card-withdraw:hover {
transform: translateY(-2px) !important;
box-shadow: 0 0 18px rgba(231, 76, 60, 0.6), 0 4px 16px rgba(192, 57, 43, 0.4) !important;
}
.tour-btn-card-login:hover {
transform: translateY(-2px) !important;
box-shadow: 0 0 18px rgba(52, 73, 94, 0.5), 0 4px 16px rgba(44, 62, 80, 0.35) !important;
}
.tour-badge-locked {
white-space: normal !important;
word-break: break-word !important;
overflow-wrap: break-word !important;
height: auto !important;
min-height: 40px !important;
line-height: 1.4 !important;
max-width: 100% !important;
width: 100% !important;
padding: 8px 12px !important;
font-size: 11.5px !important;
font-weight: 700 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
background: #f2f3f4 !important;
color: #64748b !important;
border: 1px solid #d5d8dc !important;
text-align: center !important;
}
.tour-badge-locked i,
.tour-badge-locked .fa-solid {
flex-shrink: 0 !important;
font-size: 12px !important;
}
@media (max-width: 480px) {
.tour-reg-item-footer {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
width: 100% !important;
}
.tour-reg-item-footer > * {
flex: 1 1 0 !important;
min-width: 0 !important;
width: 100% !important;
min-height: 36px !important;
padding: 7px 4px !important;
font-size: 11px !important;
letter-spacing: 0.2px !important;
margin: 0 !important;
box-sizing: border-box !important;
}
.tour-btn-card-register,
.tour-btn-card-withdraw,
.tour-badge-registered,
.tour-btn-card-login {
min-height: 36px !important;
padding: 7px 4px !important;
font-size: 11px !important;
margin: 0 !important;
}
.tour-reg-item-footer > .tour-badge-locked,
.tour-badge-locked {
white-space: normal !important;
word-break: break-word !important;
overflow-wrap: break-word !important;
height: auto !important;
min-height: 36px !important;
font-size: 10.5px !important;
padding: 6px 10px !important;
line-height: 1.35 !important;
display: flex !important;
}
.tour-reg-item-footer .fa-solid,
.tour-reg-item-footer .fa {
font-size: 11px !important;
}
}
/* 5. Kỳ Đàn & Bài viết Diễn đàn (Forum) */
.post-card,
.fb-post-card,
.post-input,
.my-posts-widget,
.sidebar-section,
.sidebar-profile-box,
.sidebar-my-post-item,
.fb-badge,
.fb-action-btn,
.fb-comment-content,
.fb-reply-box,
.fb-reply-box input,
.fb-comment-box,
.fb-comment-box input,
.btn-fb-submit,
.btn-edit-submit,
.btn-edit-cancel,
.fb-add-to-post,
.profile-info-list li.elo-item,
.fb-modal-content,
.fb-modal-header,
.fb-modal-textarea,
.close-modal {
border-radius: 0 !important;
}
/* 6. Modals, Popups, Dropdowns & Auth Forms */
.fixi-idpw-dialog,
.fixi-idpw-header,
.fixi-idpw-body,
.fixi-idpw-footer,
.fixi-idpw-warning,
.fixi-idpw-msg-box,
.fixi-idpw-field input,
.fixi-idpw-body input,
.fixi-idpw-body select,
.fixi-idpw-body textarea,
.fixi-idpw-btn-submit,
.fixi-idpw-btn-cancel,
.fixi-idpw-close,
#createRoomModal,
#createRoomModal .fixi-idpw-dialog,
#createRoomModal .fixi-idpw-header,
#createRoomModal .fixi-idpw-body,
#createRoomModal .fixi-idpw-footer,
#createRoomModal .fixi-idpw-close,
#createRoomModal input,
#createRoomModal select,
#createRoomModal button,
#updateIdPwModal,
#updateIdPwModal .fixi-idpw-dialog,
#updateIdPwModal .fixi-idpw-header,
#updateIdPwModal .fixi-idpw-body,
#updateIdPwModal .fixi-idpw-footer,
#updateIdPwModal .fixi-idpw-close,
#updateIdPwModal input,
#updateIdPwModal button,
#fixiGlobalModal,
#fixiGlobalModal .fixi-idpw-dialog,
#fixiGlobalModal .fixi-idpw-header,
#fixiGlobalModal .fixi-idpw-body,
#fixiGlobalModal .fixi-idpw-footer,
#fixiGlobalModal .fixi-idpw-close,
#fixiGlobalModal input,
#fixiGlobalModal button,
.modal,
.modal-dialog,
.modal-content,
.modal-header,
.modal-body,
.modal-footer,
.modal-title,
.modal-close,
.modal input,
.modal select,
.modal textarea,
.modal button,
.royal-modal-content,
.royal-modal-header,
.royal-modal-close,
.royal-modal-body,
.royal-btn-item,
.panel-pop,
.panel-pop .pop-border,
.panel-pop input,
.panel-pop button,
.panel-pop .form-inputs,
.panel-pop .form-style,
.popup-window,
.popup-box,
.popup-inner,
.popup-close,
.alert-box,
.confirm-box,
.fixi-alert-modal,
.fixi-confirm-modal,
.create-room-modal-body input.form-control,
.create-room-modal-footer button,
.fixi-auth-card,
.fixi-auth-header,
.fixi-auth-body,
.fixi-auth-input-wrap,
.fixi-auth-input-wrap input,
.fixi-auth-input-wrap input[type="text"],
.fixi-auth-input-wrap input[type="password"],
.fixi-auth-input-wrap input[type="email"],
.fixi-auth-input-wrap select,
.register-form input,
.register-form select,
.fixi-auth-form input,
.fixi-auth-form select,
.login-dropdown-content,
.header-user-dropdown-menu,
.notif-popup,
[class*="fixi-idpw-"],
[class*="fixi-modal-"],
[class*="royal-modal-"] {
border-radius: 0 !important;
}
/* Riêng nút submit đăng ký/đăng nhập & nút mạng xã hội (Google, Facebook) giữ bo tròn */
.fixi-auth-btn-submit,
#btn-register-submit,
#btn-login-login,
.fixi-auth-social-btn,
.fixi-auth-social-btn.google,
.fixi-auth-social-btn.facebook,
.fixi-auth-social .fixi-auth-social-btn,
.id-auth__social-button .wv-button--google,
.id-auth__social-button .wv-button--facebook {
border-radius: 50px !important;
}
/* 7. Phòng Cờ (Room) & Bàn Cờ & Bảng Điều Khiển */
#move_list,
#xiangqiboard,
.xiangqiboard,
#xiangqiboard_history,
.royal-panel-card,
.player-panel-height,
.royal-player-row-2-think .box-time-think,
.box-time-think,
.royal-player-row-2-think .box-time-total-premium,
.box-time-total-premium,
.stat-premium-card,
.time-card-bg,
.move-card-bg,
.stat-premium-card .stat-premium-value,
.stat-premium-card .countdown,
.stat-premium-card .so_nuoc_di,
.countdown,
.so_nuoc_di,
.chess-pick-side-vertical label,
.royal-time-header,
.premium-lobby-status-panel,
.royal-queue-card,
#area_member_queue_name,
.queue-member-card,
.royal-viewer-embedded-card,
.royal-viewer-user-card,
.premium-lobby-status-panel #area_member_queue_name::-webkit-scrollbar-track,
.premium-lobby-status-panel #area_member_queue_name::-webkit-scrollbar-thumb,
.premium-lobby-status-panel .royal-viewer-embedded-card .viewer-list-scroll::-webkit-scrollbar-thumb,
.premium-full-chat-layout,
.royal-tab-panel-container,
.royal-tab-header-buttons,
.tab-toggle-item,
.tab-content-pane,
.chatbox_game,
.chess-content,
.area_time,
.royal-chat-input-bar,
.chat-utility-btn,
.chat-input-text-field,
.chat-submit-btn-send,
#submitmsg,
input[type="button"]#submitmsg,
.royal-sticker-dropdown,
.sticker-tab-item,
.royal-tts-dropdown,
.tts-item,
.chatbox,
.message-history,
.chat-input-area,
.tab-header,
.tab-content,
.div-btn-function,
.royal-btn-grid-wrapper,
.royal-btn-grid-wrapper button,
.royal-btn-grid-wrapper .button,
.div-btn-function button.button,
#btn_ready,
#btn_give_up,
#btn_draw,
#btn_invite,
#btn_copy_link,
#btn_back_lobby,
.btn-danger,
.btn-primary,
.royal-result-winner .royal-seal,
.royal-result-loser .royal-seal,
.royal-result-draw .royal-seal,
#tournament_countdown_overlay .tc_box,
#tournament_countdown_overlay .tc_badge,
#tournament_countdown_overlay .tc_btn_lobby {
border-radius: 0 !important;
}
.royal-radio-circle,
.chess-pick-side-vertical .royal-radio-circle,
#sec-pick-chess .royal-radio-circle {
border-radius: 50% !important;
}
/* 8. Luyện Cờ AI (Play with AI Arena) */
.fixi-ai-card,
.fixi-ai-header,
.fixi-ai-header-badge,
.fixi-ai-body,
.fixi-ai-bot-bar,
.fixi-bot-info,
.fixi-bot-side-badge,
.fixi-bot-badge-tag span,
.fixi-ai-board-wrapper,
.fixi-ai-controls,
.fixi-ai-select,
.fixi-ai-btn,
.fixi-ai-btn-primary,
.fixi-ai-btn-secondary,
.fixi-ai-guest-card,
[class*="fixi-ai-"] {
border-radius: 0 !important;
}
/* 9. Hồ Sơ Cá Nhân, Chỉnh Sửa & Tùy Chọn Cài Đặt (Profile, Edit Profile, Public Profile, Change Pass & Settings) */
.fixi-profile-container,
.fixi-form-container,
.fixi-card,
.fixi-profile-hero,
.fixi-badge-nickname,
.fixi-hero-qr,
.fixi-hero-qr img,
.fixi-actions-bar,
.fixi-btn,
.fixi-btn-primary,
.fixi-btn-secondary,
.fixi-btn-blue,
.fixi-elo-grid,
.fixi-elo-card,
.fixi-elo-header,
.fixi-elo-stats-row,
.fixi-elo-item,
.fixi-info-section,
.fixi-info-grid,
.fixi-info-item,
.fixi-about-text,
.fixi-social-row,
.fixi-social-btn,
.fixi-settings-grid,
.fixi-setting-item,
.fixi-form-control,
.fixi-setting-preview-box,
.fixi-setting-preview-piece,
.fixi-setting-preview-sound,
.fixi-setting-preview-board,
.fixi-setting-preview-board::after,
.fixi-board-lightbox-content,
.fixi-board-lightbox-header,
.fixi-board-lightbox-close,
.fixi-board-lightbox-body,
.fixi-board-lightbox-img,
.fixi-lang-flag,
.fixi-form-header,
.fixi-form-body,
.fixi-alert,
.fixi-alert-danger,
.fixi-alert-success,
.fixi-profile-form,
.fixi-change-pass-form,
.fixi-input-field,
.fixi-input-field input,
.fixi-input-field input[type="text"],
.fixi-input-field input[type="password"],
.fixi-input-field input[type="email"],
.fixi-input-field input[type="tel"],
.fixi-input-field input[type="date"],
.fixi-input-field input[type="number"],
.fixi-input-field select,
.fixi-input-field textarea,
.fixi-input-field input:disabled,
.fixi-input-field input:read-only,
.fixi-input-icon-wrap,
.fixi-input-icon-wrap input,
.fixi-input-icon-wrap input[type="text"],
.fixi-input-icon-wrap input[type="password"],
.fixi-input-icon-wrap input[type="email"],
.fixi-input-icon-wrap input[type="tel"],
.fixi-input-icon-wrap input[type="date"],
.fixi-input-icon-wrap input[type="number"],
.fixi-input-field .fixi-input-icon-wrap input,
.fixi-input-field .fixi-input-icon-wrap input[type="text"],
.fixi-input-field .fixi-input-icon-wrap input[type="password"],
.fixi-input-field .fixi-input-icon-wrap input[type="email"],
.fixi-input-field .fixi-input-icon-wrap input[type="tel"],
.fixi-input-field .fixi-input-icon-wrap input[type="date"],
.fixi-input-field .fixi-input-icon-wrap input[type="number"],
.fixi-form-row input,
.fixi-form-row select,
.fixi-form-row textarea,
.fixi-profile-form input,
.fixi-profile-form select,
.fixi-profile-form textarea,
.fixi-change-pass-form input,
.fixi-change-pass-form select,
.fixi-change-pass-form textarea,
.fixi-idpw-field input,
.fixi-idpw-field input[type="text"],
.fixi-idpw-field input[type="password"],
.fixi-idpw-field input[type="email"],
.fixi-idpw-warning,
.fixi-gender-options,
.fixi-gender-label,
.fixi-history-container,
.fixi-history-hero,
.fixi-history-card,
.fixi-history-card-header,
.fixi-history-grid,
.fixi-history-item,
.fixi-history-table,
.fixi-table-wrap,
.fixi-badge-count,
.fixi-pagination,
.fixi-pagination a,
.fixi-pagination span,
.ui-datepicker,
.ui-datepicker-header,
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next,
.ui-corner-all,
[class*="fixi-profile-"],
[class*="fixi-form-"],
[class*="fixi-setting-"],
[class*="fixi-input-"],
[class*="fixi-history-"] {
border-radius: 0 !important;
}
/* 11. Bảng Xếp Hạng Top 100 Kỳ Thủ (Top 100 Leaderboard) */
.fixi-leaderboard-container,
.fixi-leaderboard-hero,
.fixi-leaderboard-nav,
.fixi-leaderboard-tab-btn,
.fixi-tab-pane,
.fixi-podium-wrap,
.fixi-podium-card,
.fixi-podium-card.rank-1,
.fixi-podium-card.rank-2,
.fixi-podium-card.rank-3,
.fixi-podium-elo,
.fixi-leaderboard-card,
.fixi-leaderboard-table-header,
.fixi-leaderboard-search,
.fixi-leaderboard-search input,
.fixi-leaderboard-table-wrap,
.fixi-leaderboard-table,
.fixi-leaderboard-table thead th,
.fixi-leaderboard-table tbody td,
.fixi-elo-badge,
.fixi-btn-view-profile,
[class*="fixi-leaderboard-"],
[class*="fixi-podium-"] {
border-radius: 0 !important;
}
/* 12. Thư Viện Ván Cờ, Biên Bản & Replay (/thu-vien & /bien-ban) */
.workspace-container,
.side-list,
.list-filter,
.list-filter input,
.table-wrapper,
.match-table,
.match-table tr,
.match-table td,
.side-board,
#main-board-area,
.board-controls,
.btn-ctrl,
.auto-play-config,
.auto-play-config select,
select#auto-time,
select#select-speed,
.category-header,
.group-title,
.title-divider,
.match-meta,
.match-date,
.match-result,
.result-red-win,
.result-black-win,
.result-draw,
#matchSearch,
.replay-container,
.board-section,
.xiangqiboard,
.control-section,
.import-export-section,
.control-section .import-export-section,
.control-section .replay-controls,
.btn-modern,
.btn-import,
.btn-export,
.btn-modern.btn-import,
.btn-modern.btn-export,
.import-export-section .btn-modern,
.import-export-section .btn-import,
.import-export-section .btn-export,
.import-export-section button,
.control-section .btn-modern,
#move-list-ui,
#move-list-ui li,
.step-no,
.move-item,
.active-step,
.replay-controls,
.btn-replay,
.btn-replay.btn-success,
.btn-replay.btn-primary,
.btn-replay.btn-dark,
.btn-replay.btn-danger,
#btn-play-pause,
.div-lsd,
#historyTable,
.move-list-header,
.price-filter-link,
.price-filter-link a,
.mt-tabs,
.filters-block,
.group_filter,
.group_filter li,
.group_filter a,
[class*="btn-replay"],
[class*="replay-"],
[class*="match-"],
[class*="result-"] {
border-radius: 0 !important;
}
/* ==========================================================================
10. KHUNG AVATAR & HUY HIỆU XÁC THỰC (GIỮ NGUYÊN BO TRÒN TRÊN TOÀN BỘ THEME TỐI)
========================================================================== */
.fixi-avatar-wrapper,
.fixi-avatar-img,
.fixi-avatar-icon,
.fixi-avatar-upload-overlay,
.fixi-podium-avatar,
.fixi-player-avatar,
.fixi-podium-badge,
.header-user-avatar,
.header-user-avatar img,
.header-user-avatar-icon,
.viewer-avatar-circle,
.viewer-avatar-circle img,
.royal-viewer-embedded-card .viewer-avatar-circle,
.viewer-list-section .viewer-avatar-circle,
#area_member_joined_name .viewer-avatar-circle,
.avatar_member,
.avatar_member img,
.chess-player-avatar,
.chess-player-avatar img,
.player-avatar-circle,
.queue-avatar,
.queue-avatar img,
.tour-player-avatar-wrap,
.tour-player-avatar,
.tour-player-avatar-icon,
.tour-podium-avatar,
.tour-podium-avatar-icon,
.tour-winner-avt,
.tour-winner-avt-icon,
.tour-reg-member-avt-wrap,
.tour-reg-member-avt,
.tour-member-avt-icon,
.tour-reg-member-tag-avt,
.tour-reg-member-tag-avt-icon,
.tour-winner-cell img,
.tour-player-cell-avt,
.tour-player-cell-avt-icon,
.tour-player-cell img,
.tour-reg-members-list img,
.tour-reg-members-list span.tour-reg-member-tag-avt-icon,
.tour-reg-club-logo,
.tour-rank-badge,
.tour-rank-badge.rank-other,
.tour-rank-badge.rank-1,
.tour-rank-badge.rank-2,
.tour-rank-badge.rank-3,
.search-item img,
.fixi-badge-verified {
border-radius: 50% !important;
}
/* 16. Thông Báo (Notifications Popup Dark Royal Style) */
.notif-popup {
background: #241614 !important;
color: #e5d8c8 !important;
border: 1px solid #5a3825 !important;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6) !important;
z-index: 999999;
}
@media (max-width: 768px) {
.notif-popup.mobile-only-popup {
z-index: 1000005 !important;
background: #241614 !important;
}
}
.notif-header {
background: #2c1b18 !important;
color: #f7d08a !important;
border-bottom: 1px solid #5a3825 !important;
display: flex;
justify-content: space-between;
align-items: center;
}
.notif-header span {
color: #f7d08a !important;
font-size: 16px;
}
.notif-header .close-notif {
color: #c9ad8b !important;
}
.notif-header .close-notif:hover {
color: #f7d08a !important;
}
.notif-item {
color: #e5d8c8 !important;
border-bottom: 1px solid rgba(90, 56, 37, 0.3) !important;
}
.notif-item:hover {
background-color: #35211d !important;
}
.notif-item.unread {
background-color: #381f14 !important;
}
.notif-item .notif-text,
.notif-item .notif-text div,
.notif-item .notif-msg {
color: #e5d8c8 !important;
}
.notif-item .notif-text strong,
.notif-item .notif-msg strong {
color: #f7d08a !important;
}
.notif-empty,
.notif-loading {
color: #a89078 !important;
}
/* 17. Mobile Social Modal Royal Theme */
.mobile-social-dialog {
background: transparent !important;
}
.mobile-social-header {
background: rgba(36, 22, 20, 0.85) !important;
border: 1px solid #5a3825 !important;
}
.mobile-social-title {
color: #f7d08a !important;
}
.mobile-social-title i {
color: #ffd700 !important;
}
.mobile-social-close-btn {
background: rgba(90, 56, 37, 0.6) !important;
color: #f7d08a !important;
border: 1px solid #7d4f33 !important;
}
.mobile-social-card {
background: #2a1a17 !important;
border: 1px solid #5a3825 !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}
.mobile-social-card:hover,
.mobile-social-card:active {
border-color: #ffd700 !important;
background: #35211d !important;
}
.mobile-social-card .social-card-name {
color: #f7d08a !important;
}
/* =========================================================================
ĐỒNG BỘ HIỂN THỊ ELO PHÒNG CỜ - THEME 0 (CUNG ĐÌNH HUẾ / TỐI)
========================================================================= */
.elo-lbl {
color: #888888 !important;
font-weight: 500 !important;
font-size: 11.5px !important;
opacity: 0.85 !important;
margin-right: 2px !important;
display: inline-block !important;
}
.elo-sep {
color: #888888 !important;
opacity: 0.45 !important;
font-weight: 400 !important;
font-size: 11.5px !important;
margin: 0 4px !important;
user-select: none !important;
display: inline-block !important;
}
.elo-lbl {
color: #888888 !important;
font-weight: 500 !important;
font-size: 11.5px !important;
opacity: 0.85 !important;
margin-right: 2px !important;
display: inline-block !important;
}
.player-elo-row .elo_daily,
.player-elo-row .elo_tour,
.area_elo .elo_daily,
.area_elo .elo_tour,
.elo_daily,
.elo_tour {
background: linear-gradient(135deg, #b45309 0%, #f59e0b 45%, #fbbf24 60%, #d97706 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: #d97706 !important;
font-size: 13.5px !important;
font-weight: 800 !important;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25)) !important;
letter-spacing: 0.3px !important;
display: inline-block !important;
}
.area_elo .elo_daily,
.area_elo .elo_tour {
font-size: 12.5px !important;
}
.elo-rolling-active,
.elo-gain-flash,
.elo-loss-flash,
.elo-draw-flash {
-webkit-text-fill-color: currentColor !important;
background: none !important;
}
/* ==========================================================================
FIXI ARTICLE SYSTEM OVERRIDES (THEME 0 - HOÀNG GIA / CUNG ĐÌNH HUẾ)
========================================================================== */
/* Legacy breadcrumbs fallback if accessed */
.breadcrumbs {
background: linear-gradient(135deg, #2B1810 0%, #3E2723 50%, #5E0F10 100%) !important;
border-bottom: 3px solid #B88E40 !important;
color: #FFFDE7 !important;
}
.breadcrumbs h1 {
color: #F7D08A !important;
}
.crumbs, .crumbs a {
color: #D8C2AA !important;
}
/* Modern Article Breadcrumbs */
.fixi-article-breadcrumb .breadcrumb-item {
color: #c8b39b !important;
}
.fixi-article-breadcrumb .breadcrumb-item:hover {
color: var(--vang-hoang-toc, #E5A93B) !important;
}
.fixi-article-breadcrumb .breadcrumb-sep {
color: #8c735d !important;
}
.fixi-article-breadcrumb .breadcrumb-static {
color: #c8b39b !important;
}
.fixi-article-breadcrumb .breadcrumb-active {
color: var(--vang-hoang-toc, #E5A93B) !important;
}
/* Article Card */
.fixi-article-card {
background: #ffffff !important;
border: 1px solid rgba(184, 142, 64, 0.35) !important;
box-shadow: 0 10px 32px rgba(43, 24, 16, 0.15) !important;
}
/* Hero Header */
.fixi-article-hero {
background: linear-gradient(135deg, #2B1810 0%, #3E2723 50%, #5E0F10 100%) !important;
border-bottom: 3px solid #B88E40 !important;
color: #FFFDE7 !important;
}
.fixi-article-hero::after {
background: radial-gradient(circle, rgba(229, 169, 59, 0.22) 0%, rgba(229, 169, 59, 0) 70%) !important;
}
.fixi-article-hero-badge {
background: rgba(229, 169, 59, 0.15) !important;
border: 1px solid rgba(229, 169, 59, 0.45) !important;
color: var(--vang-hoang-toc, #E5A93B) !important;
}
.fixi-article-hero-badge i {
color: var(--vang-hoang-toc, #E5A93B) !important;
}
.fixi-article-hero-title {
color: #F7D08A !important;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.6) !important;
}
.fixi-article-hero-meta {
color: #D8C2AA !important;
}
.fixi-article-hero-meta .meta-item i {
color: var(--vang-hoang-toc, #E5A93B) !important;
}
/* Article Typography */
.fixi-article-content {
color: #3D2E24 !important;
}
.fixi-article-content h1,
.fixi-article-content h2,
.fixi-article-content h3,
.fixi-article-content h4 {
color: #2B1810 !important;
}
.fixi-article-content h2 {
border-left-color: #B88E40 !important;
}
.fixi-article-content h3 {
border-left-color: var(--vang-hoang-toc, #E5A93B) !important;
}
.fixi-article-content strong,
.fixi-article-content b {
color: #2B1810 !important;
}
.fixi-article-content ul li::before {
background: #B88E40 !important;
}
.fixi-article-content blockquote {
background: rgba(184, 142, 64, 0.08) !important;
border-left-color: #B88E40 !important;
color: #4A3528 !important;
}
.fixi-article-content a {
color: #8C1A1B !important;
}
.fixi-article-content a:hover {
color: #B88E40 !important;
}
.fixi-article-content hr {
border-top-color: rgba(184, 142, 64, 0.25) !important;
}
.fixi-article-content th {
background: #FAF6F0 !important;
color: #2B1810 !important;
border-bottom: 2px solid #E8DECB !important;
}
.fixi-article-content td {
border-bottom: 1px solid #E8DECB !important;
}
/* Footer Support Box */
.fixi-article-footer-box {
background: #FAF6F0 !important;
border: 1px solid #EBDCCB !important;
}
.footer-box-icon {
background: rgba(184, 142, 64, 0.15) !important;
color: #B88E40 !important;
}
.footer-box-info h4 {
color: #2B1810 !important;
}
.footer-box-info p {
color: #6A5243 !important;
}
.fixi-article-btn-contact {
background: linear-gradient(135deg, #8B4513 0%, #6D340C 100%) !important;
border: 1px solid #B88E40 !important;
color: #F7D08A !important;
box-shadow: 0 3px 10px rgba(90, 44, 9, 0.35) !important;
}
.fixi-article-btn-contact:hover {
background: linear-gradient(135deg, #A0522D 0%, #8B4513 100%) !important;
border-color: #E5A93B !important;
color: #FFFDE7 !important;
box-shadow: 0 5px 15px rgba(229, 169, 59, 0.35) !important;
}