/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
.wof-wheel .wof-form-wrapper button:hover{
	opacity: 1 !important;
	background: #f34143;
}
.wof-response .popup-body p {
    border-radius: 20px;
    overflow: hidden;
}
.popup-trung-thuong .popup-body button{
	font-size: 25px !important;
 	border-radius: 0 0 20px 20px !important;
}
.wof-response .popup-content {
    border-radius: 20px !important;
    overflow: hidden;
}
div.wof-wheel[data-id="32"] .wof-form-wrapper button {
    padding: 0 20px;
}
.fx-cmm{
	display: none;
    text-align: center;
}
.fx-cmm img{
    margin: auto;
    width: 100%;
    margin-top: 60%;
}
.fx-cmm a{
    background: linear-gradient(45deg, #1b1010, #3e3535);
    padding: 5px 40px;
    border-radius: 8px;
    color: white;
    box-shadow: 0px 0px 4px 2px #dd2727eb;
    border: 1px solid #a7a7a7;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 26px;
}
 .fxpro-quay-thuong {
    display: none;
    margin-top: 20%;
}
.col-inner{
    height: 1920px;
/*    width: 100vw;*/
    background: url(https://game.ffi.com.vn/wp-content/uploads/2024/11/1-2.png);
    background-repeat: no-repeat;
    background-size: contain;
    padding: 8% 19%;
}
.fxpro-quaythuong .col-inner{
	background: url(https://game.ffi.com.vn/wp-content/uploads/2024/11/b1gl.png);
}
.fxpro-gamess, .fxpro-gamess .col{
	padding: 0 !important;
	margin: 0 !important;
}
.game-board{
    margin-top: 17% !important;
    padding: 6% 0;
    position: relative;
    z-index: 1;
    border-radius: 12px;
}
/*//popup*/

#popup {
	display: none;
    margin-top: -110%;
    width: 100%;
    height: 38%;
    text-align: center;
    background: white;
    padding: 10%;
    padding-top: 33%;
    position: relative;
    z-index: 2;
    border-radius: 12px;
}
#popup input {
    padding: 5px;
    padding-left: 15px;
    font-size: 16px;
    border-radius: 36px;
    border-color: #ae0000;
    box-shadow: 0px 0px 1px 2px #701c1c4d;
}
#popup label{
    font-size: 36px;
    font-style: italic;
    text-shadow: 2px 2px 3px #9c9c9c;
}
#popup button {
    margin-top: 10px;
    font-size: 16px;
    width: 100%;
    background: #9c0000;
    color: white;
    border-radius: 36px;
}

/*end*/

.game-board {
    text-align: center;
    text-align: center;
    margin: auto;
    display: flex;
    flex-direction: column; /* Sắp xếp các phần tử theo chiều dọc */
    justify-content: center; /* Căn giữa theo chiều dọc */
    align-items: center; /* Căn giữa theo chiều ngang */
    text-align: center; /* Căn giữa văn bản nếu cần */
    background-color: transparent; /* Màu nền (tùy chọn) */
}

#game-status {
    font-size: 1.5em;
    margin-bottom: 10px;
    opacity: 0;
}
#reset-game{
    opacity: 0;
}


.board {
    display: grid;
    grid-template-columns: repeat(30, 20px);
    gap: 1px;
    margin-bottom: 25px;
    padding-bottom: 30px;
    background: url(https://game.ffi.com.vn/wp-content/uploads/2024/11/bg3x3.png);
    background-size: cover;
}

.cell {
    width: 180px;
    height: 180px;
    background-color: transparent !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3em;
    cursor: pointer;
/*    border: 1px solid #ccc;*/
    transition: background-color 0.3s;
}

.cell:hover {
    background-color: #e0e0e0;
}

@media only screen and (max-width: 1500px) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
	#my-popup{
	    width: 64% !important;
	    left: 20% !important;
	    bottom: 45.5% !important;
	    top: 19% !important;
	    background: transparent !important;
	}

}

@media only screen and (max-width: 800px) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
	#popup {
        margin-top: -120%;
        height: 430px;
        padding-top: 23%;
	}
	.col-inner {
	    padding: 8% 15%;
	}
	.wof-wheel .wof-pointer {
        transform-origin: -84.69% -6.11% !important;
    	transform: rotate(145deg) !important;
	}
	.wof-wheel .wof-logo {
	    width: 97px !important;
	    height: 97px !important;
        transform: rotate(55deg);
    	top: 48% !important;
    	left: 48% !important;
	}
	.wof-wheel .wof-slice {
	    font-size: 18px !important;
	}
	.wof-wheel .wof-spinning {
/*	    transform: rotate(-72deg) !important;*/
	}
	.cell {
    	width: 130px !important;
    	height: 130px !important;
	}
	.board{
	    grid-template-columns: repeat(3, 130px) !important;
	}
	.fx-cmm img {
	    margin-top: 40%;
	}

	.game-board {
	    margin-top: 8% !important;
	}

	.fx-cmm a {
	    top: 30px;
	    position: relative;
	}
	.fxpro-quay-thuong {
	    margin-top: 0%;
	}
	div.wof-wheel[data-id="32"] .wof-form-wrapper .wof-btn-submit {
	    font-size: 20px !important;
        padding: 10px 50px !important;
	}
    .wof-wheel-standalone .wof-right {
        margin-top: -50px;
    }
    .col-inner{
        height: 90vh !important;
        width: 100vw !important; 
        background-size: 100% 100% !important;
        padding: 8% 16%;
    }
    .wof-response .popup-body p {
        background: red;
    }
}
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}