#wrap-game {
	position:relative;
	margin-top:0px;
	width:100%;
    /* Clear fix cho các phần tử float bên trong */
    overflow: hidden; 
}
#wrap-game .option-left {
	width:43%;
	position:relative;
	float:left;
	z-index:100;
}
#wrap-game .option-left .shortcode {
	padding:0px 10px;
}
#wrap-game .option-left .shortcode span.head{
	padding-right: 15px;
}
#wrap-game .option-left .shortcode span.short{
	font-size: 18px;
	font-weight: 500;
	padding: 3px 5px;
	background: #ffffff;
}
#wrap-game .option-right {
	width:10%;
	position:relative;
	float:left;
	z-index:150;
}
#wrap-game .option-right ul {
	list-style:none;
	width:100%;
}
#wrap-game .option-right li {
	position:relative;
	float:left;
	width:100%;
	padding:1px 1px;
	z-index:160;
}
#wrap-game .option-left .config ul {
	list-style:none;
}

#wrap-game .option-left .config ul > li {
	position:relative;
	float:left;	
	background:#f6f7f7;
	border:1px solid #ddd;
	padding:0px 3px;
	margin-bottom:0px !important;
}
#wrap-game .option-left .config ul > li > ul > li{
	border:none;
}
#wrap-game .option-left .config ul > li.even > ul > li,
#wrap-game .option-left .config ul > li.even {
	background:#dcdcde;
}
#wrap-game .option-left .config ul > li > ul > li input.txt {
	width:40px;
}
#wrap-game .option-left .config ul > li > ul > li input.upload {
	position: relative;
	left: 0px;
	top: 0px;
	display:block;
	float:left;
}
#wrap-game .option-left .config ul > li > ul > li img.img-thumb{
	position: relative;
	left:3px;
	top:-5px;
	width:30px;
	height:30px;
	float:left;
}

/* --- [FIX CĂN GIỮA CANVAS ADMIN] --- */
#wrap-game .preview-game {
	/* Tăng độ rộng để canvas thoải mái hơn */
	width: 47%; 
	position:relative;
	float:left;
    
    /* Dùng Flexbox ngay tại wrapper cha để căn giữa con (#area-game) */
    display: flex;
    justify-content: center; /* Căn giữa ngang */
    align-items: flex-start; /* Căn trên cùng */
    
    box-sizing: border-box;
    padding: 10px;
    background: #fdfdfd; /* Màu nền nhẹ để thấy khung */
    border: 1px dashed #ccc; /* Viền nét đứt để dễ nhận biết vùng preview */
    min-height: 520px; /* Đảm bảo chiều cao tối thiểu */
}

#wrap-game input[type=text] {
	width:150px;
}

#wrap-game #area-game {
    /* Quan trọng: Bỏ width 100% để nó co về đúng kích thước Canvas P5 tạo ra */
	width: auto; 
	margin: 0 auto;
    position: relative;
    z-index: 10;
}

#wrap-game #area-game canvas {
	border: none;
	z-index: 10;
    
    /* Reset style để tránh bị kéo lệch */
    display: block !important;
    margin: 0 auto !important;
    
    /* BỎ width: 100% !important; -> Nguyên nhân gây méo/lệch tâm */
    width: auto !important; 
    height: auto !important;
    max-width: 100%;
}
/* ----------------------------------- */

.dataTables_wrapper .dataTables_length select {
	width: 3.0rem;
}
.dataTables_wrapper {
	padding-top:15px;
}
#wrap-game .wp-picker-container .wp-color-result.button {
	/*margin: -11px 6px 6px 0;*/
	position:relative;
}
#wrap-game li {
	margin-bottom: 0px;
	margin-top:0px;
}
#wrap-game input.option-input {
	width:94px;
}
#wrap-game .htz-form {
	position:relative;
	background-color: rgba(255,255,255,1);
	width: 500px;
	height: auto;
	margin-top:8%; 
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	
}
#wrap-game .htz-form .form-input {
	padding:5px 15px;
	z-index:9000;
	box-shadow: 3px 5px rgba(0,0,0,0.1);
}
#wrap-game .htz-form .form-input::placeholder {
	color:#ededed;
	font-size:14px;
}
#wrap-game .htz-form .form-input .form-group {
	padding:3px 5px;
	margin-bottom:5px;
}
#wrap-game .htz-form .form-input h4 {
	margin-top:0px;
	margin-bottom:0px;
	font-size:16px;
}
#wrap-game .htz-form .form-input h4 span {
	color:#333;
	font-size:12px;
}
#wrap-game .htz-form .form-input .form-group.but{
	text-align:center;
}
#wrap-game .htz-form .form-input .form-group.but .btn-primary {
	padding:3px 15px;
	font-size:16px;
}
#wrap-game .htz-form .form-input .form-group input {
	width:100%;
	padding:3px 3px;
}
#wrap-game .htz-form .form-input .form-group .report {
	color:#000;
	font-size:16px;
	font-weight:500;
}
#wrap-game textarea.active-code {
	width:100%;
	margin-left:auto;
	margin-right:auto;
}
#wrap-game .htz-form .loading {
	position: absolute;
	top: 11%;
	left: 11%;
	display: none;
	width: 200px; 
	height: 200px;
	margin-left: auto;
	margin-right: auto;
}
.rotate-notice {
	border: 1px solid #4F800D;
	padding: 15px 15px;
	margin: 15px 0;
	background: #ffffff;
	box-shadow: 3px 5px rgba(0,0,0,0.1);
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	position: relative;
	overflow: hidden;
}
.rotate-notice .column-left {
	box-sizing: border-box;
	display: inline-block;
	background: #ffffff;
	padding: 5px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	-webkit-border-radius: 2px;
	width: 266px;
}
.rotate-notice .column-right {
	position: absolute;
	top: 12px;
	left: 285px;
	margin-left: 25px;
}
.rotate-notice .column-right p {
	margin: 0.2em 0;
	padding: 2px;
	font-size:14px;
	color: #000;
}
.rotate-notice .btn.btn-setting {
	color:#ffffff;
	font-size:18px;
	font-weight:500;
	padding:5px 25px;
	text-decoration:none;
	border: 1px solid #006699;
	-moz-border-radius: 2px;
	border-radius: 2px;
	-webkit-border-radius: 2px;
	background: #029DD6;
	background-image: -webkit-gradient(linear, 0% 0, 0% 100%, from(#029DD6), to(#0079B1));
	background-image: -moz-linear-gradient(0% 100% 90deg, #0079B1, #029DD6);
}
.upgrade {
	width:100%;
	margin-left:auto;
	margin-right:auto;
}
.upgrade .head {
	text-align:center;
	padding:15px 15px;
}
.upgrade .head h3 {
	color:#000000;
	font-size:16p;
	font-weight:500;
	text-transform:uppercase;
}
.line {
	border-top-width: 2px;
	border-left-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-style: solid;
	border-color: #00CCD6;
	margin-top: 10.5px;
	width:10%;
	margin-left:auto;
	margin-right:auto;
}
.upgrade .list-fee,
.upgrade .list-feature {
	width:46%;
	float:left;
	position:relative;
	padding: 15px 15px;
	margin: 0px;
	background: transparent;
}
.upgrade .list-fee h3 {
	color:#00CCD6;
}
.upgrade .list-fee .line {
	width:30%;
	margin-left:0px;
	margin-right:auto;
}
.upgrade .list-fee ul.checklist {
	list-style:none;
}
.upgrade .list-fee ul.checklist li span{
	padding:0px 5px;
}
.upgrade .list-fee ul.checklist li:before{
	position: relative;
	content: '\2713';
	left: 0;
	right: 0;
	color:#00CCD6;
}
.underline:after {
	position: absolute;
	content: '';
	height: 2px;
	bottom: -15px;
	margin: 5px auto;
	left: 0;
	right: 0;
	width: 25%;
	background: #df3a2c;
	-o-transition: .5s;
	-ms-transition: .5s;
	-moz-transition: .5s;
	-webkit-transition: .5s;
	transition: .5s;
}
.wrap-no-data {
	padding:15px 15px;
	width:100%;
}
.wrap-no-data .notice-data {
	width:300px;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	background:#ffffff;
	border:1px solid #0191C9;
}
.frm_config {
	margin:15px;
	padding:15px 15px;
	background: #fff;
}
.fr_config .btn-create {
	margin: 15px;
}
table td.shortcode {
	background: #F0F0F1;
	border:1px solid #E3E3E4;
}
table td.shortedit {
	background: #FFFFFF;
	border:1px solid #E3E3E4;
	padding:3px 5px;
}

 /* Pagination Container */
.zutalw-pagination { 
	margin: 5px 0; 
	text-align: right; 
	line-height: 2;
}

/* Pagination Button Base Style */
.zutalw-pagination .page-numbers {
	display: inline-block;
	padding: 3px 5px;
	margin: 0 2px;
	text-decoration: none;
	background: #fff;
	color: #0073aa;
	border: 1px solid #0073aa;
	border-radius: 4px; /* Bo góc nhẹ như hình pages.png */
	font-weight: 500;
	min-width: 15px;
	text-align: center;
}

/* Active/Current Page Style */
.zutalw-pagination .page-numbers.current {
	background: #0073aa; /* Màu xanh đặc trưng của WP */
	color: #fff;
	border-color: #0073aa;
}

/* Hover State */
.zutalw-pagination .page-numbers:hover:not(.current) {
	background: #f0f0f0;
	color: #00a0d2;
}

/* Next/Previous Buttons */
.zutalw-pagination .next, .zutalw-pagination .prev {
	font-weight: bold;
}

input[type=checkbox], input[type=radio] {
	margin: 0 5px;
	max-width: 15px;
}