/* ================= CSS CUNG ĐÌNH HUẾ TINH TẾ ================= */
:root {
--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 */
}
/* 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: 8px !important;
padding: 10px !important;
box-shadow: 0 10px 30px rgba(43, 24, 16, 0.15) !important;
}
.xiangqiboard {
border-radius: 5px;
}
/* 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: 6px 6px 0 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: 4px !important; /* Góc bo nhẹ sang trọng */
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: 4px !important;
padding: 10px !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: 4px !important; /* Đồng bộ góc bo phẳng vuông */
}
/* 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: 4px !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: 4px !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: 20px;
top: 11px;
}
.header-search-fb .search-input-wrapper {
padding: 3px 12px;
}
.header-search-fb .search-input-wrapper input {
padding: 5px 8px;
}
.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;
}
.nav-tab-item.active {
color: var(--do-son-son) !important;
border-bottom: 3px solid var(--do-son-son) !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;
/* 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 */
.header-search-fb .search-input-wrapper {
background-color: rgba(255, 255, 255, 0.15) !important;
border-radius: 4px !important;
}
.header-search-fb .search-input-wrapper input { color: #FFF !important; }
.header-search-fb .search-input-wrapper input::placeholder { color: #E0D4C3 !important; }
.header-search-fb .search-input-wrapper i { color: var(--vang-hoang-toc) !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;
}
.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 (Xếp hàng, Bỏ cuộc, Xin hòa, Mời, Copy Link...) áp dụng mẫu 2 */
.div-btn-function button.button,
#btn_ready,
#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;
}
.div-btn-function button.button:hover,
#btn_ready:hover,
#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: 4px !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: 4px !important;
}
/* Khung Hàng chờ thi đấu & Thành viên tham gia bên phải */
.area_member_joined, .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;
}
/* ================= HỆ THỐNG PHÍM ĐIỀU KHIỂN RESPONSIVE TRÊN MOBILE ================= */
.div-btn-function {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #2B1810 !important; /* Đồng bộ nền gỗ trắc sang trọng từ phong cách Huế */
padding: 8px 10px pb-safe !important; /* Đảm bảo an toàn cho các dòng máy có tai thỏ/vuốt đáy */
box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.3) !important;
z-index: 999999;
box-sizing: border-box;
}
/* Container chia tầng xử lý nút */
.d-flex-grid-buttons {
display: flex;
flex-direction: column;
gap: 6px;
width: 100%;
}
/* TẦNG 1: Các nút điều hướng cốt lõi của ván đấu - Chia thành 3 cột đều nhau */
.main-actions-group {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
width: 100%;
}
/* Định hình lại nút hành động chính */
.div-btn-function button.button.action-main {
width: 100% !important;
height: 38px !important;
line-height: 38px !important;
font-size: 13px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 0 4px !important;
margin: 0 !important;
border-radius: 4px !important;
}
/* TẦNG 2: Các tiện ích phụ (Mời, Link, Khán giả, Chat) - Chia thành 4 cột đều nhau */
.sub-utilities-group {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
width: 100%;
}
/* Định hình nút tiện ích dạng icon vuông gọn gàng */
.div-btn-function button.button.utility-item {
width: 100% !important;
height: 34px !important;
line-height: 34px !important;
font-size: 15px !important; /* Tăng kích thước icon cho dễ bấm */
display: flex;
align-items: center;
justify-content: center;
margin: 0 !important;
padding: 0 !important;
background: #3E2723 !important; /* Gỗ trầm nhạt hơn làm nền phụ */
border-color: #B88E40 !important; /* Đường viền đồng cổ */
}
/* Xóa bỏ thuộc tính width 20% cũ gây lỗi chen chúc */
.div-btn-function button.button {
width: auto;
}
/* Tối ưu hóa padding đáy cho các thiết bị di động có thanh vuốt (Safe Area) */
@support (padding-bottom: env(safe-area-inset-bottom)) {
.div-btn-function {
padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
}
}
/* Điều chỉnh lại khoảng cách an toàn cho các thành phần mở rộng khi dâng lên */
.chatbox {
bottom: 88px !important; /* Đẩy chatbox lên trên dải nút mới tinh chỉnh */
}
#btn_chat, #btn_view_member_room {
position: static !important; /* Hủy bỏ thuộc tính fixed cũ gây loạn vị trí */
color: inherit !important;
}
/* ================= CSS PHÒNG CHƠI GUEST TRÊN ĐIỆN THOẠI ================= */
.div-btn-function {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #2B1810 !important; /* Màu nền gỗ trắc đồng bộ cấu trúc Cung Đình Huế */
padding: 8px 10px !important;
box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.3) !important;
z-index: 999999;
box-sizing: border-box;
}
/* Khung bọc Flexbox chuyển hướng dọc */
.d-flex-grid-buttons {
display: flex;
flex-direction: column;
gap: 6px;
width: 100%;
}
/* TẦNG CHÍNH: 2 nút Guest được phép dùng -> Chia làm 2 cột bằng nhau */
.main-actions-group.guest-view {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 6px;
width: 100%;
}
.div-btn-function button.button.action-main {
width: 100% !important;
height: 38px !important;
line-height: 38px !important;
font-size: 13px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 0 !important;
margin: 0 !important;
border-radius: 4px !important;
background: linear-gradient(180deg, #A62425 0%, var(--do-son-son, #8C1A1B) 100%) !important;
color: #FFFDE7 !important;
border: 1px solid var(--vang-dong-co, #B88E40) !important;
}
/* TẦNG PHỤ: 5 nút chức năng hạn chế + copy link -> Chia làm 5 cột icon gọn gàng */
.sub-utilities-group.guest-restrict {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 6px;
width: 100%;
}
.div-btn-function button.button.utility-item {
width: 100% !important;
height: 32px !important;
line-height: 32px !important;
font-size: 14px !important;
display: flex;
align-items: center;
justify-content: center;
margin: 0 !important;
padding: 0 !important;
background: #3E2723 !important; /* Gỗ sẫm màu lót dưới làm nền phụ */
border: 1px solid #5E0F10 !important;
border-radius: 4px !important;
}
/* Hủy bỏ ép chiều rộng cũ */
.div-btn-function button.button {
width: 180px;
}
/* Fix vị trí fixed cũ của icon Chat và Khán giả gốc */
#btn_chat, #btn_view_member_room {
position: static !important;
background: none !important;
}
/* Đẩy khung chatbox lên trên dải nút mới tinh chỉnh */
.chatbox {
bottom: 86px !important;
}
/* Tối ưu hóa cho các dòng máy tràn viền có thanh vuốt đáy */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
.div-btn-function {
padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
}
.chatbox {
bottom: calc(86px + env(safe-area-inset-bottom)) !important;
}
.chatbox.chatbox-closed {
bottom:-200px !important;
}
}
/* ================= CSS FIX MÀN HÌNH THẤP (SAMSUNG ĐỜI CŨ/MÀN HÌNH NGẮN) ================= */
/* Khi chiều cao màn hình của thiết bị từ 680px trở xuống */
@media screen and (max-height: 680px) {
/* 1. Thu hẹp khoảng cách padding của toàn khối dải nút */
.div-btn-function {
padding: 4px 6px !important;
}
/* 2. Giảm khoảng cách gap giữa tầng 1 và tầng 2 */
.d-flex-grid-buttons {
gap: 4px !important;
}
/* 3. Bóp nhỏ tầng phím chính (Khán Giả, Trò Chuyện / Sắp Hàng, Xin Thua...) */
.div-btn-function button.button.action-main {
height: 32px !important; /* Giảm từ 38px xuống 32px */
line-height: 32px !important;
font-size: 11px !important; /* Giảm chữ nhỏ lại một chút cho vừa vặn */
gap: 4px !important;
}
/* 4. Bóp nhỏ tầng phím phụ tiện ích (Các nút icon vuông bên dưới) */
.div-btn-function button.button.utility-item {
height: 26px !important; /* Giảm từ 32px xuống 26px */
line-height: 26px !important;
font-size: 12px !important; /* Thu nhỏ icon lại để không bị méo */
}
/* 5. Điều chỉnh lại vị trí dâng lên của hộp thoại chatbox cho khít với dải nút đã bóp nhỏ */
.chatbox {
bottom: 72px !important; /* Giảm từ 86px xuống 72px để ôm sát dải nút */
}
}
/* Thêm một nấc thắt cực hạn cho các máy màn hình siêu ngắn (dưới 600px) nếu cần thiết */
@media screen and (max-height: 600px) {
.div-btn-function button.button.action-main {
height: 28px !important;
line-height: 28px !important;
font-size: 10px !important;
}
.div-btn-function button.button.utility-item {
height: 22px !important;
line-height: 22px !important;
font-size: 11px !important;
}
.chatbox {
bottom: 62px !important;
}
}
@media only screen and (max-width: 480px) {
#header {
background-color: inital !important;
background-image: none !important;
margin-bottom: 0 !important;
padding: 0 !important;
border-bottom: 1px solid var(--do-son-son) !important;
border-image-slice: none !important;
border-image-source: none !important;
}
.nav-tab-item {
height:35px;
}
#area_member_queue_name::before {
font-size: 20px !important;
letter-spacing: 0 !important;
}
}
/* ================= HỆ THỐNG 3 NÚT CHỨC NĂNG SIÊU TO TRÊN MOBILE ================= */
.div-btn-function {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #2B1810 !important; /* Gỗ trắc Đại Nội */
padding: 10px 12px !important;
box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.4) !important;
z-index: 999999;
box-sizing: border-box;
}
/* Khung lưới chia đều tuyệt đối 3 phần bằng nhau */
.trio-buttons-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
width: 100%;
}
/* Định hình chung cho 3 nút lớn */
.div-btn-function button.mobile-trio-btn {
width: 100% !important;
height: 46px !important; /* Tăng chiều cao lên 46px cực kỳ dễ bấm */
margin: 0 !important;
padding: 0 4px !important;
border-radius: 6px !important;
display: flex;
flex-direction: column; /* Icon ở trên, Chữ ở dưới nhìn rất chuyên nghiệp */
align-items: center;
justify-content: center;
gap: 3px;
box-sizing: border-box;
}
.div-btn-function button.mobile-trio-btn i {
font-size: 16px !important;
margin: 0 !important;
}
.div-btn-function button.mobile-trio-btn span {
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
white-space: nowrap;
}
/* Style nút màu gỗ trầm (Khán Giả & Trò Chuyện) */
.btn-luxury-wood {
background: linear-gradient(180deg, #4E342E 0%, #3E2723 100%) !important;
color: #FFE082 !important;
border: 1px solid #5D4037 !important;
}
/* Style nút màu vàng lộng lẫy (Điều Khiển Trung Tâm - Điểm Nhấn) */
.btn-luxury-gold {
background: linear-gradient(180deg, #F5B041 0%, #E5A93B 100%) !important;
color: #2B1810 !important;
border: 1px solid #B88E40 !important;
box-shadow: 0 0 10px rgba(229, 169, 59, 0.4) !important;
}
/* Reset thuộc tính fixed cũ của chat và viewer */
#btn_chat, #btn_view_member_room {
position: static !important;
}
/* Đẩy khung chatbox lên trên dải nút mới */
.chatbox {
bottom: 96px !important;
}
/* Tối ưu hóa vùng vuốt đáy an toàn cho các dòng iPhone tràn viền */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
.div-btn-function {
padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
}
.chatbox {
bottom: calc(66px + env(safe-area-inset-bottom)) !important;
}
}
/* ================= ĐỊNH DẠNG POPUP (ROYAL MODAL) ĐIỀU KHIỂN ================= */
.royal-modal-overlay {
display: none; /* Mặc định ẩn */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 1000000; /* Nằm trên dải nút */
backdrop-filter: blur(3px); /* Làm mờ nền phía sau */
}
.royal-modal-content {
position: absolute;
bottom: calc(75px + env(safe-area-inset-bottom, 0px)); /* Neo ở ngay trên dải nút bấm */
left: 5%;
width: 90%;
background: #FBF9F3 !important; /* Nền giấy xuyên chi cổ điển */
border: 2px solid #B88E40 !important; /* Viền đồng cổ */
border-radius: 8px;
box-shadow: 0 -10px 30px rgba(0,0,0,0.5);
overflow: hidden;
}
/* Hiệu ứng hoạt họa zoom mượt mà */
.animated { animation-duration: 0.25s; animation-fill-mode: both; }
@keyframes zoomIn {
from { opacity: 0; transform: scale3d(0.9, 0.9, 0.9); }
to { opacity: 1; }
}
.zoomIn { animation-name: zoomIn; }
/* Tiêu đề Popup */
.royal-modal-header {
background: #8C1A1B !important; /* Màu đỏ sơn son */
color: #FFFDE7 !important;
padding: 10px 15px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #B88E40;
}
.royal-modal-header h3 {
margin: 0 !important;
font-size: 14px !important;
font-weight: 700;
}
.royal-modal-close {
font-size: 24px;
cursor: pointer;
color: #FFE082;
line-height: 1;
}
/* Thân Popup */
.royal-modal-body {
padding: 15px;
}
.modal-section-title {
font-size: 12px;
font-weight: 700;
color: #795548;
text-transform: uppercase;
margin-bottom: 8px;
border-left: 3px solid #8C1A1B;
padding-left: 6px;
}
/* Bố cục nút bên trong Popup: To, cực kỳ thoáng */
.modal-buttons-layout {
display: flex;
flex-direction: column;
gap: 8px;
}
.modal-buttons-layout.grid-2-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
/* Thiết kế nút bấm trong Popup */
.royal-btn-item {
height: 42px !important;
border: 1px solid #B88E40 !important;
border-radius: 4px !important;
font-size: 13px !important;
font-weight: 700 !important;
color: #FFFDE7 !important;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
width: 100% !important;
box-sizing: border-box;
}
.bg-royal-red { background: linear-gradient(180deg, #A62425 0%, #8C1A1B 100%) !important; }
.bg-royal-gold { background: linear-gradient(180deg, #F5B041 0%, #E5A93B 100%) !important; color: #2B1810 !important; }
.bg-royal-dark { background: linear-gradient(180deg, #4E342E 0%, #3E2723 100%) !important; }
/* Trạng thái nút bị disabled */
.royal-btn-item.disabled {
opacity: 0.5 !important;
background: #757575 !important;
border-color: #9e9e9e !important;
color: #e0e0e0 !important;
pointer-events: none;
}
/* ================= HỖ TRỢ ĐIỆN THOẠI ĐỜI CŨ (CHIỀU CAO THẤP) ================= */
@media screen and (max-height: 640px) {
.div-btn-function button.mobile-trio-btn { height: 38px !important; }
.div-btn-function button.mobile-trio-btn span { font-size: 10px !important; }
.royal-btn-item { height: 36px !important; font-size: 12px !important; }
.chatbox { bottom: 84px !important; }
}
/* ================= TỐI ƯU SIÊU XẸP DẢI 3 NÚT CHỨC NĂNG MOBILE THEO KHÁCH YÊU CẦU ================= */
.div-btn-function {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #2B1810 !important; /* Gỗ trắc Đại Nội */
padding: 5px 8px !important; /* Giảm padding tối đa để thanh cực kỳ mỏng gọn */
box-shadow: 0 -3px 15px rgba(0, 0, 0, 0.4) !important;
z-index: 999999;
box-sizing: border-box;
}
/* Khung lưới chia đều 3 phần bằng nhau */
.trio-buttons-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px; /* Thu hẹp khoảng cách giữa các nút */
width: 100%;
}
/* Định hình lại nút: Chuyển icon và chữ nằm trên 1 hàng ngang để hạ thấp chiều cao */
.div-btn-function button.mobile-trio-btn {
width: 100% !important;
height: 30px !important; /* Ép chiều cao xuống 30px (thấp hết mức có thể) */
line-height: 30px !important;
margin: 0 !important;
padding: 0 4px !important;
border-radius: 4px !important;
display: flex !important;
flex-direction: row !important; /* Icon và chữ nằm cạnh nhau thay vì xếp chồng */
align-items: center !important;
justify-content: center !important;
gap: 4px !important; /* Khoảng cách nhỏ giữa icon và chữ */
box-sizing: border-box;
}
/* Tinh chỉnh Icon cho nhỏ gọn, tinh tế */
.div-btn-function button.mobile-trio-btn i {
font-size: 13px !important; /* Thu nhỏ icon */
margin: 0 !important;
}
/* Tinh chỉnh Chữ ngắn gọn, viết thường hoặc viết hoa nhẹ nhàng trên cùng 1 hàng */
.div-btn-function button.mobile-trio-btn span {
font-size: 11px !important;
font-weight: 600 !important;
text-transform: none !important; /* Bỏ viết hoa toàn bộ để chữ trông ngắn và gọn hơn */
white-space: nowrap;
}
/* Style phối màu lụa & gỗ cổ điển giữ nguyên độ sang trọng */
.btn-luxury-wood {
background: linear-gradient(180deg, #4E342E 0%, #3E2723 100%) !important;
color: #FFE082 !important;
border: 1px solid #5D4037 !important;
}
.btn-luxury-gold {
background: linear-gradient(180deg, #F5B041 0%, #E5A93B 100%) !important;
color: #2B1810 !important;
border: 1px solid #B88E40 !important;
}
/* Reset lại vị trí dâng lên của khung Chatbox sát với dải nút siêu mỏng mới */
.chatbox {
bottom: 72px !important; /* Chatbox hạ thấp xuống ôm khít thanh nút mới, nhường diện tích cho ván đấu */
}
/* Tối ưu vùng an toàn cho các dòng iPhone tràn viền có thanh vuốt đáy */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
.div-btn-function {
padding-bottom: calc(5px + env(safe-area-inset-bottom)) !important;
}
.chatbox {
bottom: calc(40px + env(safe-area-inset-bottom)) !important;
}
}
/* ================= ĐIỀU CHỈNH VỊ TRÍ POPUP ĐỂ KHÔNG BỊ ĐÈ LÊN THANH NÚT MỚI ================= */
.royal-modal-content {
/* Đẩy sát mông popup xuống dưới vì dải nút điều hướng đã được bóp lùn */
bottom: calc(45px + env(safe-area-inset-bottom, 0px)) !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: 4px !important; /* Đồng bộ góc bo phẳng nhẹ */
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);
}