style.css 7.35 KB
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Regular.woff') format('woff'), url('../fonts/Roboto-Regular.ttf') format('truetype'), url('../fonts/Roboto-Regular.svg#Roboto-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'RobotobB';
    src: url('../fonts/Roboto-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Bold.woff') format('woff'), url('../fonts/Roboto-Bold.ttf') format('truetype'), url('../fonts/Roboto-Bold.svg#Roboto-Bold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto-Light';
    src: url('../fonts/Roboto-Light.eot?#iefix') format('embedded-opentype'), url('../fonts/Roboto-Light.woff') format('woff'), url('../fonts/Roboto-Light.ttf') format('truetype'), url('../fonts/Roboto-Light.svg#Roboto-Light') format('svg');
    font-weight: normal;
    font-style: normal;
}

nav.navbar {
    border: 0px;
    margin: 0px;
    background: #910b0d !important;
    border-radius: 0px;
}

.navbar-brand {
    height: auto !important;
    padding: 5px !important;
}

.navbar-default .navbar-nav>li>a {
    text-decoration: none;
    font-size: 14px;
    font-family: "Roboto";
    color: rgb(255, 255, 255);
    text-transform: uppercase;
    padding-top: 50px !important;
}

.navbar-default .navbar-nav>li>a:hover {
    font-family: "RobotobB";
    color: #fff;
}

.navbar-collapse {
    position: relative;
}

.btnRegister, .btnRegister:focus, .btnRegister:active, .btnRegister:hover {
    background: #fdb813;
    padding: 6px 20px;
    border-radius: 5px;
    position: absolute;
    top: 10px;
    right: 0px;
    font-size: 14px;
    font-family: "Roboto";
    color: rgb(33, 33, 33);
    text-transform: uppercase;
    text-decoration: none;
}

.main-content {
    margin: 30px 0px;
    position: relative;
}

.main-game {
    margin: 50px 0px;
    border: 5px solid #3b3b3a;
    background: url('../images/plslogin.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 586px;
    position: relative;
    text-align: center;
}
.pls-login {
  position: absolute;
  top: 30%;
  transform: translateY(-25%);
}

.main-img {
    margin: 10px 0px;
}

.main-img img, .main-game img {
    width: 100%;
}

.main-prize {
    padding: 50px 0px;
    text-align: center;
    margin-top: 30px;
    border-top: 1px solid #cccccc;
}

.prize h1 {
    font-size: 25px;
    font-family: "Roboto";
    color: rgb(52, 52, 52);
    text-transform: uppercase;
    text-align: center;
    padding: 0px;
    margin: 0px;
}

.prize h1 span {
    font-family: "RobotobB";
}

.prize p span {
    font-family: "RobotobB";
    font-size: 31px;
}

.prize p {
    font-size: 18px;
    font-family: "Roboto";
    color: rgb(52, 52, 52);
    padding: 0px;
    margin: 0px;
}

.prize {
    text-align: center;
    margin-top: 30px;
}

.prize img {
    max-width: 100%;
    margin-bottom: 20px;
    margin-top: 10px;
}

.main-prize img {
    max-width: 100%;
}

.ads1 {
    position: absolute;
    left: 0px;
    top: 10%;
    text-align: left;
}

.ads2 {
    position: absolute;
    right: 0px;
    top: 10%;
    text-align: right;
}

@media (min-width:993px) {
    .ads1 img, .ads2 img {
        max-width: 65%;
    }
}

@media (max-width:992px) {
    .ads1, .ads2 {
        display: none;
    }
    .navbar-default .navbar-nav>li>a {
        padding: 10px 15px !important;
    }
    .table-wrapper {
      width: 100%;
      overflow-x: scroll;
    }
    .player-score, .player-name {
      padding: 0px;
    }
}
@media (max-width:768px) {
  .pls-login {
    width: 300px !important;
  }
  .pls-login p {
    font-size: 24px !important;
  }
  .btnPlsLogin {
    font-size: 24px !important;
  }
}
.part {
    padding-bottom: 20px;
}

.part p {
    font-size: 14px;
    font-family: "Roboto";
    color: rgb(52, 52, 52);
    text-align: left;
    padding: 0px;
    padding-top: 5px !important;
    margin: 0px;
}

.part p span {
    display: block;
    padding-left: 30px;
}

.part h1 {
    font-size: 14px;
    font-family: "RobotobB";
    color: rgb(52, 52, 52);
    text-align: left;
    padding: 0px;
    margin: 0px;
}

.table>tbody>tr {
    border: 1px solid #f7941d;
    text-align: center;
}

.table>tbody>tr>td {
    border-top: 1px solid #f7941d;
    border-right: 1px solid #f7941d;
    font-size: 16px;
    font-family: "RobotobB";
    color: rgb(81, 81, 81);
    text-transform: uppercase;
    text-align: center;
    padding: 15px 10px;
    position: relative;
}

.td-week {
    background: #fdb813;
}

.td-day1 {
    background: #fef9f4;
}

.td-day2 {
    background: #ffedd8;
}

.ketqua-img {
    text-align: center;
    padding-bottom: 40px;
}

.ketqua-img img {
    max-width: 100%;
}

.top-day1, .top-day2 {
    position: absolute;
    top: 0;
    right: -170%;
    z-index: 99999999;
    background: #f6f6f6;
    display: none;
    border: 1px solid #cccccc;
    text-align: left;
}

.top-day1 h1, .top-day2 h1 {
    width: 100%;
    font-size: 16px;
    font-family: "RobotobB";
    color: rgb(255, 255, 255);
    text-transform: uppercase;
    text-align: center;
    background: #910b0d;
    padding: 10px;
    margin: 0px;
}

.day1:hover .top-day1 {
    display: block;
}

.day2:hover .top-day2 {
    display: block;
}

.td-current-day{
    background: #910b0d !important;
    color: #fff !important;
}

.player-name {
  font-size: 14px;
  font-family: "Roboto";
  color: rgb(81, 81, 81);
  text-align: left;
  text-transform: none;
}
.player-score {
  font-size: 14px;
  font-family: "RobotobB";
  color: rgb(81, 81, 81);
  text-transform: uppercase;
  text-align: left;
}

.top10-line {
  padding: 5px 0px;
}
.pls-login {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 450px;
}
.btnPlsLogin {
  box-shadow: none !important;
  outline: 0 !important;
  border: 0px !important;
  background: #910b0d !important;
  color: #fff !important;

  font-size: 36px;
  font-family: "RobotobB";
  text-transform: uppercase;
  text-align: center;
  padding: 10px 20px;
  text-decoration: none !important;
}
.pls-login p {
  font-size: 36px;
  font-family: "RobotobB";
  color: #6c6c6c;
  text-transform: uppercase;
  text-align: center;
}

#footer {
    width: 100%;
}
/* CSS cho phần game mất khoảng trắng với ảnh cô gái nằm ngang */
#c2canvasdiv {
    margin-top: 0px !important;
}

@media (max-width: 400px){
    .pls-login p {
        font-size: 18px !important;
    }
    .pls-login {
        width: 250px !important;
    }
}
@media (max-width: 768px) {
    #c2canvasdiv {
        width: 100% !important;
        height: auto !important;
        margin-left: 0px !important;
    }
    #c2canvas {
        width: 100% !important;
        height: auto !important;
    }
}

body { overflow: visible !important ; }

@media (max-width:500px) {
    .required-score img {
        float: none !important;
    }
    .required-score p {
        padding-top: 10px !important;
    }
}

#footer .footer-ad img {
    width: 100%;
}
.footer-contact {
    background: #2b3035;
    padding: 30px 0px;
}
.footer-contact a {
    font-size: 14px !important;
    font-family: "Roboto" !important;
    color: rgb(100, 115, 130) !important;
    text-decoration: none !important;
}
@media (max-width: 991px) {
    .footer-a-contact {
        margin: 10px 0px;
    }
}

.footer-info > div > a > span:hover{
    color: white;
}