:root {
        /* Định nghĩa khoảng cách đồng nhất cho toàn bộ layout */
        --layout-gap: 15px; 
        --board-height: 460px;
		--layout-gap: 15px; 
        --board-size: 416px; /* độ rộng bàn cờ */
    }

    /* Responsive cho bàn cờ */
    @media (max-width: 576px) {
        :root { --board-size: 340px; } /* Thu nhỏ cho mobile */
        .div-lsd { height: 300px !important; } /* Giảm chiều cao bảng lịch sử trên mobile */
    }
    @media (min-width: 577px) and (max-width: 991px) {
        :root { --board-size: 380px; }
    }

    .custom-container {
        padding-left: var(--layout-gap) !important;
        padding-right: var(--layout-gap) !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Ép chiều cao bảng danh sách */
    .div-lsd {
        height: 520px; 
        overflow-y: auto;
        border: 1px solid #ddd;
        border-radius: 4px;
        background: #fff;
        padding: 5px;
    }

    /* Căn giữa bàn cờ trên mobile */
    .replay-sticky-container {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    /* Ẩn các cột không quan trọng trên mobile để bảng gọn hơn */
    @media (max-width: 768px) {
        /*
		#historyTable th:nth-child(3), 
        #historyTable td:nth-child(3) { display: none; }
		*/
        .row.tight-gutter > .col-md-6 { margin-bottom: 20px; }
    }

    #historyTable thead th {
        position: sticky;
        top: 0;
        background-color: #f8f9fa;
        z-index: 10;
    }

    /* Đưa container ra sát mép và đặt padding bằng khoảng cách giữa 2 cột */
    .custom-container {
        padding-left: var(--layout-gap) !important;
        padding-right: var(--layout-gap) !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Giảm padding giữa 2 cột theo biến đã định nghĩa */
    .row.tight-gutter {
        margin-left: calc(var(--layout-gap) * -0.5);
        margin-right: calc(var(--layout-gap) * -0.5);
    }
    .row.tight-gutter > [class*='col-'] {
        padding-left: calc(var(--layout-gap) * 0.5);
        padding-right: calc(var(--layout-gap) * 0.5);
    }

    /* Ép chiều cao bảng danh sách khớp với bàn cờ */
    .div-lsd {
        height: var(--board-height); 
        overflow-y: auto;
        border: 1px solid #ddd;
        border-radius: 4px;
        background: #fff;
		padding: 5px;
    }

    /* Giữ tiêu đề bảng cố định khi cuộn */
    #historyTable thead th {
        position: sticky;
        top: 0;
        background-color: #f8f9fa;
        z-index: 10;
        box-shadow: inset 0 -1px 0 #ddd;
        white-space: nowrap;
    }

    #historyTable {
        margin-bottom: 0;
        width: 100%;
    }

    /* Thanh cuộn hiện đại */
    .div-lsd::-webkit-scrollbar {
        width: 6px;
    }
    .div-lsd::-webkit-scrollbar-thumb {
        background-color: #ccc;
        border-radius: 10px;
    }
    .div-lsd::-webkit-scrollbar-thumb:hover {
        background-color: #f50;
    }

    /* Đồng bộ chiều cao cho khối Replay nếu cần 
    .replay-sticky-container {
        position: sticky;
        top: 80px;
    }
	*/
	
	.table-style-1 tr:nth-child(even), tr:nth-child(even), .table-style-2 tr:nth-child(even), .table-style-1 tr:nth-child(odd), tr:nth-child(odd), .table-style-2 tr:nth-child(odd) {
		background: none;
	}

    /* Bàn cờ & Hiệu ứng */
    .xiangqiboard table { border: none; margin: 0; width: auto; }
    .xiangqiboard td { border: none; padding: 0; }
    .piece-moving { position: fixed; z-index: 999; transition: all 0.3s ease-in-out; pointer-events: none; width: 44px; height: 44px; }

    /* Layout chính */
    .replay-container { display: flex; gap: 20px;justify-content: center; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
    .board-section { flex: 0 0 416px; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
    
    /* Panel bên phải hiện đại */
    .control-section { 
        flex: 0 0 320px; 
        background: #fff; 
        border: 1px solid #eee; 
        border-radius: 8px;
        display: flex; 
        flex-direction: column; 
        height: 460px; 
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    
    .move-list-header { 
        background: #f50; 
        color: #fff; 
        padding: 12px; 
        font-weight: bold; 
        text-align: center; 
        border-radius: 8px 8px 0 0;
        letter-spacing: 1px;
    }

    /* Danh sách nước đi dạng bảng mượt mà */
    #move-list-ui { 
        flex-grow: 1; 
        overflow-y: auto; 
        list-style: none; 
        padding: 0; 
        margin: 0; 
        background: #fdfdfd;
    }
    
    #move-list-ui li { 
        display: flex;
        align-items: center;
        padding: 0;
        border-bottom: 1px solid #f0f0f0;
        transition: background 0.2s;
    }

    /* Chia cột để không bao giờ bị lệch */
    .step-no { width: 45px; text-align: center; color: #999; font-size: 0.85em; background: #f9f9f9; padding: 10px 0; border-right: 1px solid #eee; }
    .move-item { 
        flex: 1; 
        text-align: center; 
        padding: 4px; 
        cursor: pointer; 
        transition: all 0.2s;
        border-radius: 4px;
        margin: 2px;
    }
    .move-item:hover { background: rgba(255, 85, 0, 0.1); color: #f50; }
    
    /* Nước đi đang chọn - Màu chủ đạo #f50 */
    .active-step { 
        background: #f50 !important; 
        color: #fff !important; 
        font-weight: bold;
        box-shadow: 0 2px 4px rgba(255, 85, 0, 0.3);
    }

    /* Controls */
    .replay-controls { padding: 15px; background: #fff; border-top: 1px solid #eee; display: flex; justify-content: center; gap: 8px; border-radius: 0 0 8px 8px; }
    .btn-replay { border-radius: 10px; padding: 6px 15px; font-weight: bold; transition: transform 0.2s;border: 0; }
    .btn-replay:active { transform: scale(0.9); }
    .btn-primary { background-color: #f50; border-color: #f50; }
    .btn-primary:hover { background-color: #e64a19; border-color: #e64a19; }
	.btn-prev, btn-next {color: #fff; }
    .import-export-section { padding: 10px; background: #fff; border-bottom: 1px solid #eee; display: flex; gap: 8px; justify-content: center;border-radius: 8px 8px 0 0; }
	
/* Container chứa 2 nút */
.import-export-section {
    display: flex;
    gap: 12px;
    padding: 15px;
    background: #ffffff;
    border-radius: 12px;
    justify-content: center;
}

/* Base style cho nút hiện đại */
.btn-modern {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 18px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Nút Nạp File - Tông Tím chủ đạo */
.btn-import {
    background: linear-gradient(135deg, #7700ab 0%, #a533ff 100%);
}

.btn-import:hover {
    background: linear-gradient(135deg, #8e00cc 0%, #b85cff 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(119, 0, 171, 0.3);
}

/* Nút Xuất File - Tông Cam chủ đạo */
.btn-export {
    background: linear-gradient(135deg, #ff5500 0%, #ff884d 100%);
}

.btn-export:hover {
    background: linear-gradient(135deg, #ff661a 0%, #ffa375 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(255, 85, 0, 0.3);
}

/* Hiệu ứng khi nhấn (active) */
.btn-modern:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Icon style */
.btn-modern i {
    font-size: 16px;
}

/* Mobile responsive */
@media (max-width: 480px) {
	.replay-controls {
		order: -1;
	}	
    .import-export-section {
        flex-direction: row; /* Giữ hàng ngang trên mobile */
        gap: 8px;
		order: 1;
    }
    .btn-modern {
        padding: 8px 12px;
        font-size: 12px;
        flex: 1; /* Cho 2 nút bằng nhau */
    }
}