body {
  margin: 0;
  line-height: normal;
  font-family: "Open Sans", sans-serif, "Microsoft JhengHei";
  color: #000;
  font-size: 12px;

  /* Background settings */
  background: #fff url('/data/2146/uploads/bg.jpg') no-repeat center center fixed;
  background-size: cover;
}
#body-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
}
#divBody { margin-bottom: auto; }
body.modal-open #body-container { display: block; }

* { padding: 0; margin: 0; box-sizing: border-box; }
img { vertical-align: middle; }
table { width: 100%; }
button { outline: 0; border: 0; }
input { outline: 0; border: 0; }
iframe { width: 100%; height: 70vh;; border: 0; }
a, a:hover, a:active, a:focus { text-decoration: none; }
ul, ol { margin-left: 20px; margin-bottom: 20px; }
li { list-style-type: disc; padding: 5px 0; }

@media screen and (min-width:767px) {
    body { font-size: 14px; }
    #divBody > div { /*min-height: 500px;*/ }
}

@media screen and (min-width:1024px) {
    html { overflow-x: hidden; }
}


@media screen and (min-height:767px) {
    iframe { height: 850px; }
}

/***************************************************************************** style */
.w1440 { max-width: 1440px; margin: auto; width: 100%; }
.w1200 { max-width: 1200px; margin: auto; width: 100%; }
.w1000 { max-width: 1000px; margin: auto; width: 100%; }
a { color: #fd0900; }
    a:hover { color: #e7ce66; }
h1 { color: #fd0900; font-weight: bold; }
h2 { color: #fd0900; font-weight: bold; }
h3 { color: #fd0900; font-weight: bold; }
h4 { color: #fff; font-weight: bold; margin-top: 30px; margin-bottom: 15px; }
h5 { color: #fd0900; text-align: center; }
button.close { transition: transform 0.2s ease-in-out; font-size: 40px; opacity: 1; text-shadow: none; font-weight: normal; }
    button.close:hover { transform: rotate(180deg); }
.pd-5 { padding: 5px; }

.modal-backdrop { background-color: #000; }
    .modal-backdrop.in { opacity: 0.8; }

@media screen and (max-width:767px) {
    .box-container { margin: 25px auto; }
    h1 { font-size: 2.0em; }
    h2 { font-size: 1.8em; }
    h3 { font-size: 1.5em; }
    h4 { font-size: 1.2em; }
    h5 { font-size: 1.0em; }
}

@media screen and (max-width:1023px) {
    .windowOnly { display: none; }
}

@media screen and (min-width:1024px) {
    .mobileOnly { display: none; }
}

.btn-blue { color: #e7ce66; font-size: 1.2em; }

.bg-red { background: linear-gradient(to bottom, #f30900, #560202); color: #fff; }
.bg-yellow { background: linear-gradient(to bottom, #fde700, #e4b702); color: #000; }

/**** bootstrap */
.d-flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.align-items-center { align-items: center; }
.text-center { text-align: center; }

/**** scroll bar */
::-webkit-scrollbar { width: 8px; height: 5px; }
::-webkit-scrollbar-button { width: 0px; height: 0px; }
::-webkit-scrollbar-thumb { background: #888; border: 0px none #ffffff; border-radius: 50px; }
    ::-webkit-scrollbar-thumb:hover { background: #888; }
    ::-webkit-scrollbar-thumb:active { background: #888; }
::-webkit-scrollbar-track { background: #F5F5F5; border: 0px none #ffffff; border-radius: 50px; }
    ::-webkit-scrollbar-track:hover { background: #F5F5F5; }
/*::-webkit-scrollbar-track:active { background: #F5F5F5; }*/
::-webkit-scrollbar-corner { background: transparent; }

/***************************************************************************** THEME */
.switch { position: relative; display: inline-block; width: 50px; height: 25px; margin-bottom: 0; }
    .switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #2a2a2a; -webkit-transition: .4s; transition: .4s; }
    .slider:before { position: absolute; content: ""; height: 19px; width: 19px; left: 3px; bottom: 3px; background-color: white; -webkit-transition: .4s; transition: .4s; }
input + .slider { background-color: #525252; }
input:checked + .slider { background-color: #00506d; }
    input:checked + .slider:before { -webkit-transform: translateX(24px); -ms-transform: translateX(24px); transform: translateX(24px); }
/* Rounded sliders */
.slider.round { border-radius: 34px; }
    .slider.round:before { border-radius: 50%; }

@media (min-width:1024px) {
    input:checked + .slider { background: #e7ce66; }
}
/***************************************************************************** TERMS */
.collapse-box { border: 1px solid #888; border-radius: 6px; margin: 10px 0; background: #fff; }
.btn-collapse { width: 100%; border-radius: 0; margin: 0; text-align: left; border: 0; position: relative; padding: 7px 15px; background-color: rgba(173, 0, 0, 1); border-top-left-radius: 6px; border-top-right-radius: 6px; color: #fff; }
.btn-collaps:hover { border-color: rgba(173, 0, 0, 1); color: #fff; }
.btn-collapse.collapsed:after { content: '+'; position: absolute; top: 0; bottom: 0; right: 10px; display: flex; justify-content: center; align-items: center; color: rgba(173, 0, 0, 1); font-weight: bold; font-size: 21px; }
.btn-collapse.collapsed { background: transparent; color: #560202; }
    .btn-collapse.collapsed:hover { background: rgba(173, 0, 0, 1); color: #fff; }
        .btn-collapse.collapsed:hover:after { color: #fff; }
.btn-collapse:not(collapsed):after { content: '-'; position: absolute; top: 0; bottom: 0; right: 10px; display: flex; justify-content: center; align-items: center; color: #fff; font-weight: normal; font-size: 21px; }
.content.collapse { padding-left: 10px; padding-right: 10px; }
.content.collapsing { padding-left: 10px; padding-right: 10px; }

/***************************************************************************** ADMIN  */
#theme-contain-adminloginx { padding: 20px 15px; }
    #theme-contain-adminloginx input { padding: 5px 7px; border: 1px solid #666; margin: 5px auto; background-color: #fff; color: #000; }
    #theme-contain-adminloginx > p + table { max-width: 350px; margin: 0 auto; width: 90%; }
        #theme-contain-adminloginx > p + table > tbody > tr > td:nth-child(2) { padding-left: 10px; }
    #theme-contain-adminloginx table { border: 0 !important; }
        #theme-contain-adminloginx table td { border: 0 !important; }

/***************************************************************************** LOGIN */
.div-login { }
#customform { }
    #customform dl { margin-bottom: 15px; }
    #customform dd { margin-left: 0; }
    #customform input#customform_UserName, #customform input#customform_Password { width: 100%; padding: 8px 15px; border: 1px solid #a7a7a7; background: #fff; border-radius: 5px; }
#customform_submit { background: #fde700; background: linear-gradient(to bottom, #fde700, #e4b702); color: #000; border-radius: 5px; text-transform: uppercase; font-weight: bold; padding: 10px 20px; width: 100%; }

#customform #redirectaddr a { margin-right: 10px; color: #fde700; }

.link-password { color: #444; text-align: center; display: block; padding: 10px 5px; }
.header-login .link-password { color: #fff; position: absolute; right: 0px; font-size: 12px; }
    .header-login .link-password:hover { color: #fde700; }

@media (min-width:768px) {
    .header-login #customform { display: flex; align-items: center; }
        .header-login #customform dl { margin-bottom: 0px; margin-right: 4px; }
        .header-login #customform input#customform_UserName, .header-login #customform input#customform_Password { padding: 5px 5px; }
    .header-login #customform_submit { padding: 5px 20px; width: auto; }
}

#theme-contain-login .div-login { max-width: 300px; width: 90%; margin: 35px auto; padding: 20px; }
.login-header { text-align: center; }

/***************************************************************************** register */
.register { max-width: 1000px; margin: auto; }
.register-form { }
.register-title { margin-top: 40px; text-align: center; }
#registerform { width: 100%; padding: 0px 40px; display: -webkit-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; }
    #registerform dl { margin: 15px auto; width: 100%; flex: 1 1 100%; }
    #registerform dt { width: 100%; color: #000; font-size: 12px; margin-bottom: 5px; font-weight: normal; }
    #registerform dd { position: relative; }
    #registerform textarea, #registerform input[type=text], #registerform input[type=password], #registerform input[type=email], #registerform select { width: 100%; color: #000; font-size: 14px; padding: 10px 10px; background-color: #fff; padding-left: 20px; border: 1px solid #aaa; border-radius: 6px; }
        #registerform textarea:focus, #registerform input[type=text]:focus, #registerform input[type=password]:focus { border-color: #e5ba5d; }
#groupUsername dd { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
    #groupUsername dd #registerform_UserName { width: auto; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
    #groupUsername dd #registerform_UserNameMsg { width: 100%; color: #e5ba5d; }
#groupUsername .icnR { top: 5px; }
#registerform input.btnCheckUser { margin-top: 0; margin-bottom: 0; /*margin-left: 15px;*/ padding: 10px 20px; /*max-width: calc(40% - 15px);*/ font-size: 12px; cursor: pointer; margin-left: 10px; }
#registerform #registerform_varifycode { width: calc(100% - 115px); float: left; }
#registerform .btnCheckUser, #registerform_btnSubmit { color: #ffffff; font-weight: bold; padding: 8px 12px; font-size: 14px; border-radius: 6px; text-transform: uppercase; margin: 6px 0; background: linear-gradient(to bottom, #f30900, #560202); }
    #registerform .btnCheckUser:hover, #registerform_btnSubmit:hover { }
    #registerform .btnCheckUser:active, #registerform_btnSubmit:active { }
#groupSubmit { text-align: center; }
#registerform_btnSubmit { padding: 15px 75px; cursor: pointer; border-radius: 15px; }
#registerform:after { font-size: 10px; color: #fff; }
#groupVerifyCode dd:last-child { position: static; }
#groupVerifyCode img { margin-left: 15px; }


.small { font-size: 12px; }
.w3-text-red { color: #ff5858; }
.divRegister-box { background-color: #fff; }
.img-register { overflow: hidden; }
.register-box-wrapper > .right { }
.register-logo { position: absolute; bottom: 15px; left: 0; right: 0; margin: auto; z-index: 9; }
    .register-logo img { height: 100px; display: block; margin: auto; }
.affiliate-content { background-image: linear-gradient(218deg,#ff7134 11.82%,#f73b00 90.79%); -webkit-box-shadow: -4px 4px 12px rgba(0,0,0,.25), 4px -4px 12px rgba(255,255,255,.16), 0 2px 0 #bc2200, inset -2px 2px 4px #ff7e36, inset 2px -2px 4px #e21b00; box-shadow: -4px 4px 12px rgba(0,0,0,.25), 4px -4px 12px rgba(255,255,255,.16), 0 2px 0 #bc2200, inset -2px 2px 4px #ff7e36, inset 2px -2px 4px #e21b00; padding: 20px; margin: 20px 0; }
#registerform_FullNameDescription { color: #ff5858; padding-top: 5px; }

@media screen and (max-width: 1024px) {
    #registerform { padding: 0 25px 25px; }
}

@media screen and (min-width: 768px) {
    #groupPassword, #groupComfirmPassword, #groupMobileNumber, #groupCurrency, #groupAffiliate, #groupReferralCode, #groupVerifyCode { flex: 1 1 50%; max-width: 50%; }
    #groupPassword, #groupAffiliate { padding-right: 15px; }
    #groupComfirmPassword, #groupMobileNumber, #groupReferralCode, #groupVerifyCode { padding-left: 15px; }
}

@media screen and (min-width: 767px) {
    .imgRegister-window { margin-left: 50%; transform: translateX(-50%); }
    .note { font-size: 11px; width: 550px; }
    .small { font-size: 11px; }
}

@media screen and (max-width: 766px) {
    .modal-register .modal-content { border: 0; border-radius: 0; }
    .registration-wrapper { padding: 0; }
    .divRegister-box { padding: 0; }
    .register-box-wrapper { border-radius: 0; }
    .register-logo { top: auto; left: 10px; right: auto; }
        .register-logo img { height: 50px; }
    .div-register { border-radius: 0; margin: 0; }
}

@media screen and (max-width: 768px) and (min-width:608px) {
    #registerform { flex-wrap: wrap; flex-direction: row; }
    #registerform_btnSubmit { padding: 15px 35px; }
    .note { position: absolute; width: 535px; font-size: 11px; }
    .small { font-size: 11px; }
}

@media screen and (max-width: 766px) {
    #registerform { }
        #registerform .btnCheckUser { font-size: 3vw; }
    #registerform_btnSubmit { margin: 25px auto 0; width: 100%; padding-left: 0; padding-right: 0; }
    #groupUsername dd #registerform_UserName { width: 100%; }
    #groupPassword { position: relative; }
    #registerform_Password:focus { margin-bottom: 37px; }
        #registerform_Password:focus + .note { display: block; margin-top: -37px; }
    #registerform input.btnCheckUser { font-size: 10px; }
    .register-logo { display: none; }
}
/***************************************************************************** MENU */
#btnMenu { padding: 10px; display: table; }
    #btnMenu img { width: 25px; height: 25px; }

#cssmenu > ul > li > a { border: 0; }
#cssmenu > ul > li.has-sub > a::after { display: none; }

#cssmenu > ul > li { float: none; }

    #cssmenu > ul > li > a img { width: 25px; height: 25px; }

@media (min-width:1024px) {
    #divMenu.modal { display: block !important; position: static; margin-left: 0; margin-right: auto; overflow: visible; }
    #divMenu .modal-dialog { width: auto; margin: auto; position: static; }

    #cssmenu { position: static; max-width: 1200px; margin: auto; }
        #cssmenu > ul { display: flex; align-items: center; position: static; justify-content: space-around; }
            #cssmenu > ul > li { position: static; width: 100%; text-align: center; }
                #cssmenu > ul > li > a { padding: 10px 0px !important; position: static; font-weight: bold; width: 100%; border-bottom: 2px solid transparent; }
                #cssmenu > ul > li.active > a { color: #e7ce66; border-bottom: 2px solid #e7ce66; }
                #cssmenu > ul > li > a img { filter: grayscale(1); opacity: 0.6; margin-right: 5px; }
                #cssmenu > ul > li.active > a img, #cssmenu > ul > li:hover > a img { filter: none; opacity: 1; }
                #cssmenu > ul > li:first-child { }

                #cssmenu > ul > li:hover > a { color: #e7ce66; }

                #cssmenu > ul > li.has-sub > a::after { display: none; }
        #cssmenu ul ul { left: 0 !important; right: 0; position: absolute; z-index: 99; /*max-width: 1820px; */ margin: auto; display: flex; flex-wrap: wrap; opacity: 0; visibility: hidden; justify-content: center; max-width:1200px;}
        #cssmenu > ul > li:hover > ul, #cssmenu > ul > li > ul:hover { opacity: 1; visibility: visible; }
        #cssmenu ul ul:before { content: ''; position: absolute; top: 0px; bottom: -2px; left: -1px; right: 0; width: 100vw; background: rgba(0,0,0,0.9); margin: auto; margin-left: 50%; transform: translateX(-50%); border-bottom: solid 2px #e7ce66; border-top: 1px solid #353535; }
        /*#cssmenu ul ul:after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; margin: auto;   width: 100%; border-bottom: solid 2px #e7ce66; pointer-events: none; z-index: 2; }*/
        #cssmenu ul li:hover > ul > li { height: auto; }
        #cssmenu ul ul li { height: auto; z-index: 3; }
            #cssmenu ul ul li:hover { height: auto; }
            #cssmenu ul ul li a { width: auto; background-color: transparent; text-align:center; margin:10px; padding:0;}
            #cssmenu ul ul li:hover > a { background: #191919; }

            #cssmenu ul ul li a img{max-width:125px; display:block;margin:auto; border-radius:6px; margin-bottom:5px; width:100%;}
            #cssmenu ul ul li a:hover{color:#e7ce66;}
            #cssmenu ul ul li:hover > a{color:#e7ce66;}
}

@media (max-width:1023px) {
    #divMenu { overflow: hidden; }
    #menuContainer, #cssmenu { background: #430102; }
    #menuContainer { max-width: 280px; /*margin: 10px;*/ /*height: calc(100% - 20px);*/ margin: 0; height: 100%; overflow-y: auto; /*border-radius: 15px;*/ padding: 7px; box-shadow: 0px 0px 6px 0px rgba(173, 0, 0, 1); padding-bottom: 30px; display: flex; flex-direction: column; }
    #cssmenu { order: 1; }
    .menubottom { order: 2; }

    #cssmenu { }

        #cssmenu > ul::after, #cssmenu::after { display: none; }
    #menuContainer ul > li { border-bottom: 1px solid #430102; }
        #menuContainer ul > li > a { padding: 12px 10px; border-radius: 10px; font-weight: bold; text-transform: capitalize; display: block; text-align: left; font-size: 12px; margin: 2px 0; }
            #menuContainer ul > li > a img { margin: auto 20px; width: 25px; height: 25px; }
            #menuContainer ul > li > a:hover { background: rgba(160,0,0,0.6); }
    #cssmenu > ul > li.active > a { background: linear-gradient(to bottom, #fde700, #e4b702); color: #000; background: linear-gradient(to bottom, #fd0900, rgba(173, 0, 0, 1)); color: #fff; border: 1px solid #fd0900; }
        #cssmenu > ul > li.active > a img { /*filter: invert(1) brightness(0);*/ }

    .menuhead { display: flex; align-items: center; justify-content: space-between; background: #f30900; padding: 5px 10px; }
        .menuhead .close { position: static; color: #fff; font-size: 32px; }
        .menuhead .menutheme { margin-right: 38px; }

    .modal-menu .modal-dialog { transform: translateX(-280px) !important; transition: 0.35s; }
    .modal-menu.in .modal-dialog { transform: translateX(0) !important; }

    #cssmenu ul ul { display: none !important; }
}

@media (max-width:1200px) and (min-width:1024px) {
    #cssmenu > ul > li > a { font-size: 12px; }
}

.modal-backdrop--custom { background: #fff; }

.menu_float ul { margin: 0; }
.menu_float li { list-style-type: none; padding: 0; }
.menu-etc { }
.menu-contact { }
    .menu-contact .contact-list img { filter: brightness(1.3); }

.menu-etc a { }
    .menu-etc a img { width: 25px; height: 25px; }
    .menu-etc a + div { white-space: nowrap; }

.float-header { color: #fff; margin-top: 40px; padding-left: 20px; position: relative; }
    .float-header:after { content: ''; background: rgba(255,255,255,0.5); height: 1px; display: block; top: -23px; left: 0; position: absolute; right: 0; }
.contact-float_head img { display: none; }

@media (min-width:1024px) {
    .menubottom { position: relative; z-index: 999; }

    .menu_float { position: fixed; top: 30%; z-index: 15; }
    .menu-etc { left: 0; }
    .menu-contact { right: 0; }

    .menu-etc a { display: block; padding: 5px; border-top-right-radius: 12px; border-bottom-right-radius: 12px; margin: 6px 0; background: linear-gradient(to bottom, #f30900, #560202); box-shadow: 0px 0px 16px 0px rgba(173, 0, 0, 1); animation: myshadowshine 2s infinite; font-size: 0; }
        .menu-etc a img { width: 50px; height: 50px; transition: transform 0.2s;  animation: blinkScale 1s infinite ease-in-out; }
        .menu-etc a:hover img { transform: scale(0.9); }

    .menu-contact { display: flex; }
    .contact-float_head { background: linear-gradient(to left, #f30900, #560202); border-top-left-radius: 12px; border-top-right-radius: 12px; color: #fceabb; padding: 12px; padding-left: 20px; font-weight: bold; text-transform: uppercase; transform: rotate(-90deg); box-shadow: 0px 0px 16px 0px rgba(173, 0, 0, 1); animation: myshadowshine 2s infinite; transform-origin: 51% 198%; position: absolute; left: -50px;}
        .contact-float_head p { margin: 0; display: flex; align-items: center; white-space: nowrap; color: #fceabb;}
        .contact-float_head img { width: 25px; height: 25px; margin: 0px 8px; transform: rotate(90deg); display: block; }
    .menu-contact .contact-list { position: relative; z-index: 2; }
        .menu-contact .contact-list li { background: #b92c2a; padding: 3px; }
            .menu-contact .contact-list li:first-child { padding-top: 6px; }
            .menu-contact .contact-list li:last-child { padding-bottom: 6px; border-bottom-left-radius: 12px; }
        .menu-contact .contact-list a { display: block; background: #430101; padding: 16px 14px; border-radius: 12px; border: 1px solid #fd0900; background: linear-gradient(to bottom, #c51913, #560202); text-align: left; }
            .menu-contact .contact-list a:hover { background: linear-gradient(to bottom, #ff695a, #930808); }
            .menu-contact .contact-list a + div { display: none !important; }
        .menu-contact .contact-list img { width: 25px; height: 25px; margin-right: 10px; }
    .menu-contact:hover .contact-float_head { box-shadow: none; animation: none; }

    .menu-contact { left: 100%; }
        .menu-contact:hover { right: 0; left: auto; }
    .contact-float_head p:after { display: none; }
}


@keyframes myshadowshine {
    0%, 100% { box-shadow: 0px 0px 10px 0px rgba(173, 0, 0, 1); }
    50% { box-shadow: 0px 0px 5px 0px rgba(173, 0, 0, 1); }
}

/***************************************************************************** HEADER */
.logo { height: 45px; width: auto; }

#divHeader { background-color: #430102; display: contents; }
.headertop-wrapper { background-color: #430102; box-shadow: 0px 0px 16px 0px rgba(173, 0, 0, 1); background: linear-gradient(to bottom, #760607, #430102); }
.header-left { position: sticky; top: 0; z-index: 11; }
.header-menu { background: #120000; }

.header-left { display: flex; justify-content: space-between; align-items: center; }

.header-logo { text-align: center; }

.headertop-wrapper { }
.header-left > div { flex: 1; }

.header-left { max-width: 1200px; margin: auto; /* border-bottom: 3px solid #140000;*/ /*border-bottom: 1px solid #fd0900;*/ }

.header-righttop { margin-bottom: 0px; text-align: right; }
    .header-righttop ul { margin: auto; display: flex; justify-content: end; }
        .header-righttop ul li { list-style-type: none; position: relative; color: #fff; padding: 0; margin: 0; }

.header-time { display: none; }
    .header-time p { margin: 0; padding: 10px; }
.time .blink { animation: myblink 2s infinite steps(1, start); }
#Date { margin-right: 10px; }

@keyframes myblink {
    0% { opacity: 1; }
    50% { opacity: 0; }
}

.header-lc a { display: block; padding: 10px; text-align: center; color: #fff !important; }
    .header-lc a img { width: 22px; height: 22px; display: block; margin: auto; margin-bottom: 2px; }

.header-rightbottom { position: relative; }
.header-topright .login-header { display: none; }
.header-rightbottom .div-login { display: none; }
.header-rightbottom .div-auth { display: none; }

.header-rightbottom { display: flex; justify-content: end; align-items: center; }
    .header-rightbottom .btn-login { display: none; }
    .header-rightbottom .btn-register { padding: 7px 20px; display: block; border-radius: 5px; font-weight: bold; }

.header-bottom { box-shadow: 0px 0px 16px 0px rgba(173, 0, 0, 1); }

.header-top { position: sticky; top: 0; z-index: 999; }
.modal-open .header-top { position: static; }

@media (min-width:1024px) {
    .logo { height: auto; width: auto; }
    .header-left { position: static; box-shadow: none; padding: 0 15px; }
    .headertop-wrapper { /*padding: 0 20px;*/ /* border-bottom: 0;*/ }
    .header-logo { text-align: left; }
    .header-time { display: block; }
    .header-lc a img { display: none; }
    .header-righttop { margin: 0px; }
        .header-righttop ul > li:not(:first-child):after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; margin: auto; width: 1px; height: 14px; background: #fff; pointer-events: none; opacity: 0.7; }

    .header-rightbottom { margin-bottom: 35px; }
        .header-rightbottom .div-login { display: block; }
        .header-rightbottom .div-auth { display: block; }

    .header-bottom { }

    .header-top { position: static; }
}


/***************************************************************************** FOOTER */
.footer-wrapper { max-width: 1200px; padding: 0 20px; margin: auto; }

.footer-contact { border-bottom: 1px solid #8d8d8d; padding: 25px; }
    .footer-contact .contact-list { display: flex; justify-content: center; align-items: center; }
        .footer-contact .contact-list li { margin: 10px; }
        .footer-contact .contact-list a { font-size: 0; }
            .footer-contact .contact-list a img { width: 50px; height: 50px; }


.footer-qlink { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; margin: 20px auto; }
    .footer-qlink a { display: block; padding: 10px 8px; font-size: 12px; color: #bbb; }
        .footer-qlink a:hover { color: #f30900; }

.footer-content { margin: 40px 0; }
    .footer-content h1 { font-size: 14px; margin-bottom: 20px; }
    .footer-content p { font-size: 10px; color: #bbb; text-align: justify; }

.footer-copyright { background: #430102; text-align: center; padding: 10px; color: #fff; font-size: 12px; }


.footer-contact a:hover img { filter: brightness(0.5); }

.footer-nav { position: sticky; bottom: 0; z-index: 11; box-shadow: 0px 0px 16px 0px rgba(173, 0, 0, 1); }
.fn-container { background: #430101; display: flex; align-items: center; border-top: 1px solid #fd0900; background: linear-gradient(to bottom, #760607, #430102); }
    .fn-container a { padding: 7px 5px; flex: 1; text-align: center; width: 100%; font-size: 10px; font-weight: bold; }
        .fn-container a img { display: block; margin: auto; width: 25px; height: 25px;; margin-bottom: 5px; }


@media (min-width:1024px) {
    .footer-nav { display: none; }
    .footer-qlink a { font-size: 14px; padding: 10px 15px; }

    .footer-content h1 { font-size: 20px; }
    .footer-content p { font-size: 12px; line-height: 16px; }
}


/****************************** contact us */
.contact-list { margin: 0; }
    .contact-list li { list-style-type: none; padding: 0; }
        .contact-list li a { color: #fff; display: block; padding: 10px; }
    .contact-list img { width: 30px; height: 30px; }
    .contact-list a:hover { color: #fff; }

#theme-contain-contactus { }
    #theme-contain-contactus .contact-list { max-width: 250px; margin: 30px auto; }
        #theme-contain-contactus .contact-list li a { background: #560202; margin: 5px 0; border: 1px solid #fd0900; background: linear-gradient(to bottom, #c51913, #560202); }
            #theme-contain-contactus .contact-list li a:hover { background: linear-gradient(to bottom, #ff695a, #930808); }
            #theme-contain-contactus .contact-list li a img { margin-right: 10px; }
            #theme-contain-contactus .contact-list li a + div { display: none !important; }



/***************************************************************************** HOME */
.divBanner { }
    .divBanner img { width: 100%; }
.flexslider { margin: 0; border: 0; }
.flex-direction-nav { height: 0; }

/*** announcement */
.announce-box { padding: 4px 0; background-color: #120000; }
.announce-container { display: flex; position: relative; align-items: center; color: #fff; }
.announce-scroll { display: flex; align-items: center; width: 100%; position: relative; }
#horizontal-scrolling-msg { width: 100%; }
    #horizontal-scrolling-msg ul { margin: 0; }
        #horizontal-scrolling-msg ul li { margin-right: 20px; list-style-type: none; }

/*** auth */
.home-auth { }
    .home-auth .auth-container { display: flex; justify-content: center; align-items: center; }
        .home-auth .auth-container a { width: 50%; flex: 1; padding: 12px 0; text-align: center; font-weight: bold; }

/*** game category */
.home-game { background: #430101; }
.cat-container { overflow-x: auto; }
.cat-game { margin: 0; display: flex; flex-wrap: nowrap; }
    .cat-game li { list-style-type: none; padding: 0; flex: 1; }
        .cat-game li a { display: block; padding: 20px 10px; text-align: center; margin: 0 1vw; white-space: nowrap; font-size: 11px; color: #fde700; }
    .cat-game li { color: #fff; }
    .cat-game img { display: block; margin: auto; margin-bottom: 8px; width: 60px; }

/*** jackpot */
.jackpot { margin: 30px auto; }
.jackpot-container { max-width: 1200px; margin: auto; padding-left: 5px; padding-right: 5px; }
.jackpot-wrapper { display: flex; justify-content: center; align-items: center; }
.jackpot-img { flex: 1; text-align: center; }
    .jackpot-img img { width: 90%; }
.jackpot-count { flex: 2; }
.count-container { background: linear-gradient(45deg, #430101,#c42c36,#430101,#c42c36,#430101); border-radius: 200px; padding: 6px; animation: bgjackpot 3s infinite; background-size: 200% auto; }
#count { border: 3px solid #c5c5c5; text-align: center; padding-top: 1vw; padding-bottom: 1vw; background: linear-gradient(to bottom, #fd0900, #430101); border-radius: 200px; color: #eff1f1; font-size: 4.5vw; font-weight: bold; outline: 1px solid #fde700; }

@media (min-width:1024px) {
    .jackpot-count { padding-left: 15px; padding-right: 15px; }
    .count-container { padding: 10px; }
    #count { border-width: 4px; padding-top: 15px; padding-bottom: 15px; font-size: 45px; }
}

@media (max-width:650px) {
    .jackpot-img { flex: 2; }
    .jackpot-count { flex: 3; }
    #count { padding-top: 1.5vw; padding-bottom: 1.5vw; }
}

@keyframes bgjackpot {
    0%, 100% { background-position: center left 0; }
    50% { background-position: center left 50%; }
}

/*** text title */
.head-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; padding-left: 5px; padding-right: 5px; }
    .head-title h3 { margin: 0; }
    .head-title a { display: block; border-radius: 50px; padding: 7px 15px; color: #fff; background: #fd0900; font-size: 11px; }
        .head-title a:hover { color: #fff; background: #f95f59; }
        .head-title a:active, .head-title a:focus { background: #430101; }

@media (min-width:600px) {
    .head-title { white-space: nowrap; }
    .title-border { position: relative; width: calc(100% - 20px); margin-left: 10px; margin-right: 10px; }
        .title-border:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 2px; background: #fd0900; }
}

@media (min-width:1024px) {
    .head-title { padding-left: 10px; padding-right: 10px; }
        .head-title a { font-size: 14px; }
}

/*** home popular games */
.swiper-button-prev, .swiper-button-next { position: absolute; top: 0; bottom: 0px; margin: auto; width: 30px; height: 30px; border-radius: 50%; padding: 10px; background: #444; cursor: pointer; background-size: auto 20px; background-repeat: no-repeat; background-position: center; }
.swiper-button-prev { left: 0px; background-image: url('/data/2146/uploads/icn-arrow-left.png'); }
.swiper-button-next { right: 0px; background-image: url('/data/2146/uploads/icn-arrow-right.png'); }

@media (min-width:1100px) {
    .swiper-button-prev { left: -30px; }
    .swiper-button-next { right: -30px; }
}


.hpg-list .swiper-button-next { display: none; }
.hpg-list .swiper-button-prev { display: none; }

.home-popular { margin: 30px auto; }
.hpg-container { max-width: 1200px; margin: auto; }

.hpgl-owl { display: flex; flex-wrap: nowrap; }

.hpg-list { padding: 5px; position: relative; }
.hpgl-container { }
    .hpgl-container ul { margin: 0; align-items: stretch; }
.hpg-items { padding: 3px; border-radius: 6px; background: linear-gradient(to bottom, #fd0900, #430101); font-size: 9px; list-style-type: none; height: auto; }
.hpg-img img { width: 100%; border-radius: 5px; margin-bottom: 5px; border: 1px solid #ff433c; }
.hpg-provider { padding: 5px; }
    .hpg-provider p { margin-bottom: 5px; color: #fff; font-size: 11px; }
    .hpg-provider span { display: block; color: #c19796; font-size: 9px; }

@media (min-width:1024px) {
    .hpg-list .swiper-button-next { display: block; }
    .hpg-list .swiper-button-prev { display: block; }

    .hpg-list { padding: 10px; }

    .hpg-items { padding: 10px; border-radius: 15px; }
    .hpg-img img { margin-bottom: 10px; }
    .hpg-provider p { font-size: 14px; }
    .hpg-provider span { font-size: 10px; }
}


/*** home promotions */
.home-promo { margin: 30px auto; }

.hp-container { max-width: 1200px; margin: auto; }





/***************************************************************************** PROMOTIONS */

.hide { display: none; }

#tab-promotion { overflow: auto; padding: 0 10px; }
    #tab-promotion > ul { display: flex; margin: 30px 0 15px; }
        #tab-promotion > ul > li { list-style-type: none; padding: 7px 15px; border-radius: 50px; border: 1px solid #eaeaea; margin: 0 2px; background: #fff; cursor: pointer; color: #aaa; white-space: nowrap; }
            #tab-promotion > ul > li:hover { border-color: #f30900; color: #000; }
            #tab-promotion > ul > li:active { border-color: #e7ce66; }
            #tab-promotion > ul > li.active { background: linear-gradient(to bottom, #f30900, #560202); border-color: #f30900; color: #fff; }

#promotion-faq { padding: 5px; }
ol#faq_modal { margin: 0; display: flex; flex-wrap: wrap; }
li.question { list-style-type: none; width: 100%; padding: 5px; }
.promo { overflow: hidden; border-radius: 7px; background: #f1f1f1; background:#620201; height: 100%; }
.promo-img img { width: 100%; max-width: 1000px; }
.promo-d { display: flex; justify-content: space-between; align-items: center; padding: 5px 10px; color: #ad0000; color:#fff; }
.promo h3 { font-size: 14px; margin-top: 10px; margin-bottom: 10px; color: #ad0000; color:#fff;}
.promo p { color: #888; font-size: 12px; }
    .promo p span { color: #f30900; margin-left: 5px; }
.promo-b { display: flex; flex-direction: row; text-align: center; }
    .promo-b a.btn-ambil { background: red; padding: 5px 10px; margin: 2px; color: #fff; text-align: center; border-radius: 6px; background: linear-gradient(to bottom, #f30900, #991212); color: #fff; white-space: nowrap; }
    .promo-b div { padding: 5px 10px; margin: 2px; border-radius: 6px; /*background: #fde700;*/ background: linear-gradient(to bottom, #fde700, #e4b702); color: #ad0000; color: #000; cursor: pointer; }
        .promo-b div:hover { background: #ccc; }

.swiper-slide .promo-b a.btn-ambil { display: none; }


@media (min-width:768px) {
    li.question { width: 50%; }
    .promo h3 { /*font-size: 16px;*/ }
    .swiper-slide .promo-b a.btn-ambil { display: block; }
}

@media (max-width:1100px) {
    .promo-b { flex-direction: column; }
}



#faq_fbinner .promo { background: transparent; border-radius: 4px; }
#faq_fbinner p.question { display: none; }
    #faq_fbinner p.question + h4 { margin: 0; font-weight: normal; }
        #faq_fbinner p.question + h4 + p { display: none; }
#faq_fbinner .answer { display: none; }
#faq_fbinner .promo-d { justify-content: flex-end; }
    #faq_fbinner .promo-d h3 { display: none; }
    #faq_fbinner .promo-d p { width: 210px; display: flex; justify-content: space-between; align-items: center; margin: 0; }
#faq_fbinner .promo-b { display: none; }
#faq_fbinner > div { max-width: 1000px; }
.prizeboxdetail { padding-left: 20px; padding-right: 20px; }
    .prizeboxdetail > h3 { margin-top: 10px; }
    .prizeboxdetail > h4 { margin-top: 10px; }

#faq_fbinner table { background: rgba(173, 0, 0, 1); }
    #faq_fbinner table > tbody > tr:first-child > td { background: #560202; }
    #faq_fbinner table > thead > tr > td { background: #560202; }
    #faq_fbinner table > thead + tbody > tr:first-child > td { background: rgba(173, 0, 0, 1); }



.hp-list .swiper-button-next { display: none; }
.hp-list .swiper-button-prev { display: none; }

.hp-list { padding: 5px; position: relative; }
    .hp-list #faq_modal { display: flex; flex-wrap: nowrap; }

.promo-content { padding: 20px 0; }
#cms5faq_modal_template_list { }
ol#faq_modal { margin: 0; display: flex; flex-wrap: wrap; }

.hp-list ol#faq_modal > li.question { list-style-type: none; padding: 0; height: auto; max-width: 100%; max-width: 100%; flex: none; margin: 0; }


#faq_fbinner .promodetail { display: none; }
#faq_fbinner table tr td { background: rgba(173, 0, 0, 1); }
.prizeboxdetail h3 a { color: #fd0900; }

.hp-list li.question { height: auto; }
    .hp-list li.question a { height: 100%; }
    .hp-list li.question .promodetail { height: 100%; }

li.question { /*background: linear-gradient(to bottom, #fd0900, #430101);*/ /* border-radius: 6px;*/ }
.promodetail { text-align: center; padding: 3px; font-size: 9px; }
    .promodetail:hover { color: #fff; }
    .promodetail img { width: 100%; margin-bottom: 5px; border-radius: 5px; border: 1px solid #ff433c; }
    .promodetail p { margin-bottom: 5px; color: #fff; }

@media (min-width:1024px) {
    .hp-list .swiper-button-next { display: block; }
    .hp-list .swiper-button-prev { display: block; }

    .hp-list { padding: 10px; }

    .promodetail { font-size: 12px; padding: 5px; }
        .promodetail img { margin-bottom: 10px; }
}


/***************************************************************************** PAGE  */
.prod-details { padding: 50px 15px; }
.row { margin-right: -15px; margin-left: -15px; }

.left-prod-details img { width: 100%; }
.logosmall { width: 35%; border: 0px solid red; margin: auto; margin-top: 25px; margin-bottom: 15px; }
    .logosmall img { width: 100%; }
.right-prod-details p { color: #1a1a1a; line-height: 25px; padding: 0 20px; }
.icon-prod { border: 0px solid green; padding: 20px 0px; }
    .icon-prod ul { padding: 0px; margin: 0px; text-align: center; display: flex; justify-content: center; align-items: center; }
        .icon-prod ul li { list-style-type: none; margin: 10px; }
            .icon-prod ul li img { width: 100%; }
.list-name-prod ul { padding: 0px; margin: 0px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
    .list-name-prod ul li { list-style-type: none; border-radius: 5px; background: rgb(67, 1, 1); background: linear-gradient(122deg, rgba(67, 1, 1, 1) 0%, rgba(97, 0, 0, 1) 100%); border: 1px solid #fff; text-align: center; padding: 10px; margin: 3px; width: calc(50% - 6px); }
        .list-name-prod ul li a { color: #fff; padding: 10px 20px; text-transform: uppercase; }

.zoominout1 { animation: zoom-in-out-round 3s infinite; animation-timing-function: linear; }

@keyframes zoom-in-out-round {
    0% { transform: scale(1); border-radius: 100%; }
    25% { transform: scale(1.05); border-radius: 100%; }
    50% { transform: scale(1); border-radius: 100%; }
    75% { transform: scale(0.9); border-radius: 100%; }
    100% { transform: scale(1); border-radius: 100%; }
}

.tab-content { padding-left: 15px; padding-right: 15px; }

.panel-heading { padding: 0; }
.panel-default > .panel-heading { background: rgba(90, 3, 3, 1); color: #fff; }
    .panel-default > .panel-heading:hover { background: rgba(143, 24, 24, 1); color: #fff; }
.panel-heading a { display: block; padding: 10px 15px; color: #fff; }
.panel-default > .panel-heading + .panel-collapse > .panel-body { background: #fff; }

/*====================== lottery ====*/

#drawresult ul { width: 100%; padding: 0; text-align: center; display: flex; flex-wrap: wrap; }

    #drawresult ul > li { border: 0px solid !important; }

        #drawresult ul > li table caption { border-radius: unset !important; border-top-left-radius: 7px !important; border-top-right-radius: 7px !important; background-size: 30px; }

    #drawresult ul > li { width: 100% !important; max-width: calc(50% - 20px); }

        #drawresult ul > li#M table { border: 1px solid #f2bc00 !important; }

            #drawresult ul > li#M table caption { background-color: #f2bc00 !important; color: #000 !important; background-image: url('/data/2146/uploads/btn-magnum.png'); }

        #drawresult ul > li#P table { border: 1px solid #148ea4 !important; }

            #drawresult ul > li#P table caption { background-color: #148ea4 !important; background-image: url('/data/2146/uploads/btn-pmp.png'); }

        #drawresult ul > li#T table { border: 1px solid #dd0000 !important; }

            #drawresult ul > li#T table caption { background-color: #dd0000 !important; background-image: url('/data/2146/uploads/btn-toto.png'); color: #ffc7c7; }

        #drawresult ul > li#S table { border: 1px solid #12689a !important; }

            #drawresult ul > li#S table caption { background-color: #12689a !important; background-image: url('/data/2146/uploads/btn-singapore.png'); color: #8dd5ff; }

        #drawresult ul > li#B table { border: 1px solid #da002c !important; }

            #drawresult ul > li#B table caption { background-color: #da002c !important; background-image: url('/data/2146/uploads/btn-sabah.png'); color: #ffc7c7; }

        #drawresult ul > li#K table { border: 1px solid #4e9803 !important; }

            #drawresult ul > li#K table caption { background-color: #4e9803 !important; background-image: url('/data/2146/uploads/btn-sandakan.png'); }

        #drawresult ul > li#W table { border: 1px solid #094405 !important; }

            #drawresult ul > li#W table caption { background-color: #094405 !important; background-image: url('/data/2146/uploads/btn-sarawak.png'); color: #9bff94; }

        #drawresult ul > li#H table { border: 1px solid #95650a !important; }

            #drawresult ul > li#H table caption { background-color: #95650a !important; background-image: url('/data/2146/uploads/btn-gd.png'); color: #fff0d4; }

        #drawresult ul > li#N table { border: 1px solid #777 !important; }

            #drawresult ul > li#N table caption { background-color: #777 !important; background-image: url('/data/2146/uploads/btn-perdana.png'); color: #f9f9f9; }

        #drawresult ul > li#R table { border: 1px solid #00aced !important; }

            #drawresult ul > li#R table caption { background-color: #00aced !important; background-image: url('/data/2146/uploads/btn-lucky.png'); }

        #drawresult ul > li ol.p li { width: 31.3333% !important; display: block; float: left; background: rgba(0,0,0,0.1); margin: 1%; border: rgba(0,0,0,0.2) 1px solid; }

        #drawresult ul > li ol.c li { width: 31.3333% !important; display: block; float: left; background: rgba(0,0,0,0.1); margin: 1%; border: rgba(0,0,0,0.2) 1px solid; }

        #drawresult ul > li ol.abc li { width: 33.3333%; display: block; float: left; }

            #drawresult ul > li ol.abc li::before { content: ""; font-size: 12px; font-weight: bold; }

@media (min-width:768px) {
    #drawresult ul > li { max-width: calc(25% - 20px); }
}
/***************************************************************************** PROD  */
#theme-contain-prod { max-width: 1200px; margin: auto; }

/*===========   prod   ==========*/
#cms5-prodcatlist { clear: both; display: none; }


#keyword textarea,
#keyword input[type="text"],
#keyword input[type="password"] { border: 1px solid #f5f5f5; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 6px; margin: 2px; background: #f5f5f5; }

div#sort { position: absolute; right: 30px; top: 24px; }

input#submit-btn { background: red; color: #fff; border: 0px; padding: 8px 40px; border-radius: 5px; }

#search-bar { background: rgba(171, 0, 0, 0.1); padding: 20px 40px; position: relative; }
    #search-bar fieldset { position: relative; }
a#clear-btn { position: absolute; left: 145px; bottom: 0; background: #8b0e0e; color: #fff; padding: 8px 40px; border-radius: 5px; }

#sortlist { background: red; color: #fff; border: 0px; padding: 8px; border-radius: 5px; }

input#price-min,
input#price-max { width: 100px; border: 0px; margin: 2px; }


#cms5-prod-list { display: flex; flex-wrap: wrap; }
    #cms5-prod-list > ul { margin: 0; flex: 1 1 calc(33% - 10px); margin: 5px; max-width: 33%; }
        #cms5-prod-list > ul > li { list-style-type: none; padding: 0; position: relative; }
    #cms5-prod-list ul #photo .caption { display: none; }
.effect-photogrp #piclayer { position: absolute; left: 0px; right: 0px; z-index: 10; }
#cms5-prod-list ul li#photo img { border: 1px solid #bdbdbd; padding: 8px; width: 100%; height: 100%; max-width: 150px; max-height: 140px; }
#cms5-prod-list ul #title { font-size: 12px; margin-top: 12px; }
    #cms5-prod-list ul #title a,
    #cms5-prod-list ul #title a:visited { color: #aa0f0f; text-decoration: none; font-size: 16px; }

#cms5-prod-list ul #addcart a { text-align: center; height: auto; background: #600000; margin: -10px auto 0px; padding-left: 15px; padding-top: 10px; padding-bottom: 10px; border-radius: 5px; padding-right: 15px; color: #fff; font-weight: bold; border: 0px solid #ff4343; }


#cms5-prodcatlist { clear: both; display: block; }
    #cms5-prodcatlist ul { margin: 3px; padding: 10px; list-style: none; }
        #cms5-prodcatlist ul li { display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; vertical-align: top; width: 33%; }

#cms5-prod-list ul { padding: 10px; list-style: none; border: 1px solid #444444; overflow: hidden; background: #fff; border-radius: 6px; }
    #cms5-prod-list ul li { clear: both; display: block; }
    #cms5-prod-list ul #code { display: none; overflow: hidden; }
        #cms5-prod-list ul #code .caption { display: none; }
    #cms5-prod-list ul #title { display: block; height: 20px; overflow: hidden; text-align: center; font-size: 15px; font-weight: bold; }
        #cms5-prod-list ul #title .caption { display: none; }
        #cms5-prod-list ul #title a,
        #cms5-prod-list ul #title a:visited { color: rgba(173, 0, 0, 1); text-decoration: none; }
            #cms5-prod-list ul #title a:hover { color: #1A74C6; }
    #cms5-prod-list ul #photo { display: block; text-align: center; }
        #cms5-prod-list ul #photo .caption { display: none; }
    #cms5-prod-list ul #desc { display: none; height: 85px; overflow: hidden; }
        #cms5-prod-list ul #desc .caption { display: none; }
    #cms5-prod-list ul #addcart { padding-top: 10px; }
        #cms5-prod-list ul #addcart a { text-align: left; display: block; color: #fff; font-weight: bold; text-decoration: none; padding: 8px 5px; padding-left: 30px; background: url('/data/2146/uploads/icn-cart.png'), linear-gradient(to bottom, #f30900, #560202); background-repeat: no-repeat; background-size: 25px auto, auto; background-position: center left 15px, center; text-align: center; margin: 5px auto; }
    #cms5-prod-list ul #details { display: none; }
    #cms5-prod-list ul #enquiry { display: none; }
    #cms5-prod-list ul #price { display: block; clear: both; text-align: center; color: navy; }
        #cms5-prod-list ul #price div#offer-strike { color: #ff0000; text-decoration: line-through; }
        #cms5-prod-list ul #price .caption { display: none; }
    #cms5-prod-list ul #weight { display: block; clear: both; text-align: center; }
        #cms5-prod-list ul #weight .caption { display: none; }


#cms5-prod-view { clear: both; display: block; }
    #cms5-prod-view table#particular { padding-top: 50px; }
        #cms5-prod-view table#particular tr td { vertical-align: top; }
            #cms5-prod-view table#particular tr td#caption { text-align: right; font-weight: bold; white-space: nowrap; width: 80px; }
        #cms5-prod-view table#particular tr#title { }
        #cms5-prod-view table#particular tr td#title { font-weight: bold; font-size: 15px; text-align: left; }
        #cms5-prod-view table#particular tr#code { }
        #cms5-prod-view table#particular tr td#code { }
        #cms5-prod-view table#particular tr#price { }
        #cms5-prod-view table#particular tr td#price { color: navy; }
            #cms5-prod-view table#particular tr td#price div#offer-strike { color: #ff0000; text-decoration: line-through; }
            #cms5-prod-view table#particular tr td#price span#offer-message { font-weight: bold; padding-left: 10px; }

        #cms5-prod-view table#particular tr#weight { }
        #cms5-prod-view table#particular tr td#weight { }
        #cms5-prod-view table#particular tr#addcart { }
        #cms5-prod-view table#particular tr td#addcart { }
        #cms5-prod-view table#particular tr#enquiry { }
        #cms5-prod-view table#particular tr td#enquiry { }
        #cms5-prod-view table#particular tr#addcart { }
        #cms5-prod-view table#particular tr td#addcart a { display: block; width: 100px; text-align: left; height: 25px; background: url(/theme/m9win/imgs/add-to-cart.png) left top no-repeat; padding-left: 35px; padding-top: 5px; color: #fff; font-weight: bold; text-decoration: none; }
        #cms5-prod-view table#particular tr#enquiry { }
        #cms5-prod-view table#particular tr td#enquiry a { display: block; width: 100px; height: 25px; background: url(/theme/m9win/imgs/enquiry.png) left top no-repeat; padding-left: 35px; padding-top: 5px; color: #fff; font-weight: bold; text-decoration: none; }
    #cms5-prod-view div#desc { }
        #cms5-prod-view div#desc #caption { display: none; }
    #cms5-prod-view div#photo { float: left; padding: 0px 5px 5px 0px; }
        #cms5-prod-view div#photo img { display: block; padding-bottom: 3px; }
    #cms5-prod-view td#doclink { padding-top: 10px; }
    #cms5-prod-view tr#doclink td#caption { color: #fff; }
    #cms5-prod-view span#doc1link { }
        #cms5-prod-view span#doc1link a,
        #cms5-prod-view span#doc1link a:visited { padding: 5px; background: #ff0000; color: #fff; }
    #cms5-prod-view span#doc2link a,
    #cms5-prod-view span#doc2link a:visited { padding: 5px; background: #ff0000; color: #fff; }
    #cms5-prod-view span#doc3link a,
    #cms5-prod-view span#doc3link a:visited { padding: 5px; background: #ff0000; color: #fff; }
    #cms5-prod-view div#sharelink { padding-top: 20px; }





#cms5-prod-view4 { clear: both; display: block; }
    #cms5-prod-view4 table#particular { padding-top: 50px; width: 350px; float: right; }
        #cms5-prod-view4 table#particular tr td { vertical-align: top; }
            #cms5-prod-view4 table#particular tr td#caption { text-align: right; font-weight: bold; white-space: nowrap; width: 80px; }
        #cms5-prod-view4 table#particular tr#title { }
        #cms5-prod-view4 table#particular tr td#title { font-weight: bold; font-size: 15px; }
        #cms5-prod-view4 table#particular tr#code { }
        #cms5-prod-view4 table#particular tr td#code { }
        #cms5-prod-view4 table#particular tr#price { }
        #cms5-prod-view4 table#particular tr td#price { color: navy; }
            #cms5-prod-view4 table#particular tr td#price div#offer-strike { color: #ff0000; text-decoration: line-through; }
            #cms5-prod-view4 table#particular tr td#price span#offer-message { font-weight: bold; padding-left: 10px; }
        #cms5-prod-view4 table#particular tr#weight { }
        #cms5-prod-view4 table#particular tr td#weight { }
        #cms5-prod-view4 table#particular tr#addcart { }
        #cms5-prod-view4 table#particular tr td#addcart { }
        #cms5-prod-view4 table#particular tr#enquiry { }
        #cms5-prod-view4 table#particular tr td#enquiry { }
        #cms5-prod-view4 table#particular tr#addcart { }
        #cms5-prod-view4 table#particular tr td#addcart a { display: block; width: 100px; text-align: left; height: 25px; background: url(/theme/m9win/imgs/add-to-cart.png) left top no-repeat; padding-left: 35px; padding-top: 5px; color: #fff; font-weight: bold; text-decoration: none; }
        #cms5-prod-view4 table#particular tr#enquiry { }
        #cms5-prod-view4 table#particular tr td#enquiry a { display: block; width: 100px; height: 25px; background: url(/theme/m9win/imgs/enquiry.png) left top no-repeat; padding-left: 35px; padding-top: 5px; color: #fff; font-weight: bold; text-decoration: none; }
    #cms5-prod-view4 div#desc { }
        #cms5-prod-view4 div#desc #caption { display: none; }
    #cms5-prod-view4 div#photo { float: left; padding: 0px 5px 5px 0px; }
        #cms5-prod-view4 div#photo img { display: block; padding-bottom: 3px; }
    #cms5-prod-view4 td#doclink { padding-top: 10px; }
    #cms5-prod-view4 tr#doclink td#caption { color: #fff; }
    #cms5-prod-view4 span#doc1link { }
        #cms5-prod-view4 span#doc1link a,
        #cms5-prod-view4 span#doc1link a:visited { padding: 5px; background: #ff0000; color: #fff; }
    #cms5-prod-view4 span#doc2link a,
    #cms5-prod-view4 span#doc2link a:visited { padding: 5px; background: #ff0000; color: #fff; }
    #cms5-prod-view4 span#doc3link a,
    #cms5-prod-view4 span#doc3link a:visited { padding: 5px; background: #ff0000; color: #fff; }
    #cms5-prod-view4 div#sharelink { padding-top: 20px; }




#cms5-prod-view5 { clear: both; display: block; }
    #cms5-prod-view5 ul { margin: 0px; padding: 0px; list-style: none; }
        #cms5-prod-view5 ul li span#caption { text-align: right; font-weight: bold; white-space: nowrap; width: 80px; }
        #cms5-prod-view5 ul li#title { font-weight: bold; font-size: 15px; }
        #cms5-prod-view5 ul li#code { }
        #cms5-prod-view5 ul li#price { color: navy; }
            #cms5-prod-view5 ul li#price div#offer-strike { color: #ff0000; text-decoration: line-through; }
            #cms5-prod-view5 ul li#price span#offer-message { font-weight: bold; padding-left: 10px; }
        #cms5-prod-view5 ul li#weight { }
        #cms5-prod-view5 ul li#addcart { }
        #cms5-prod-view5 ul li#enquiry { }
        #cms5-prod-view5 ul li#addcart a { display: block; width: 100px; text-align: left; height: 25px; background: url(/theme/m9win/imgs/add-to-cart.png) left top no-repeat; padding-left: 35px; padding-top: 5px; color: #fff; font-weight: bold; text-decoration: none; }
        #cms5-prod-view5 ul li#enquiry a { display: block; width: 100px; height: 25px; background: url(/theme/m9win/imgs/enquiry.png) left top no-repeat; padding-left: 35px; padding-top: 5px; color: #fff; font-weight: bold; text-decoration: none; }
        #cms5-prod-view5 ul li#desc { }
        #cms5-prod-view5 ul li#photo img { display: block; padding-bottom: 3px; }
        #cms5-prod-view5 ul li#caption { color: #fff; }
        #cms5-prod-view5 ul li#doc1link { }
            #cms5-prod-view5 ul li#doc1link a,
            #cms5-prod-view5 ul li#doc1link a:visited { padding: 5px; background: #ff0000; color: #fff; }
        #cms5-prod-view5 ul li#doc2link a,
        #cms5-prod-view5 ul li#doc2link a:visited { padding: 5px; background: #ff0000; color: #fff; }
        #cms5-prod-view5 ul li#doc3link a,
        #cms5-prod-view5 ul li#doc3link a:visited { padding: 5px; background: #ff0000; color: #fff; }
        #cms5-prod-view5 ul li#sosialmedia { padding-top: 20px; }


#cms5-prodenquiry { }


#prod-cart #cart-shipping { clear: both; }
    #prod-cart #cart-shipping ul { margin: 0px; padding: 0px; list-style: none; }
        #prod-cart #cart-shipping ul li { display: block; font-size: 16px; font-weight: bold; }
            #prod-cart #cart-shipping ul li div#description { padding-left: 25px; font-size: 12px; font-weight: normal; }

#prod-cart #cart-payment { clear: both; }
    #prod-cart #cart-payment ul { margin: 0px; padding: 0px; list-style: none; }
        #prod-cart #cart-payment ul li { display: block; font-size: 16px; font-weight: bold; }
            #prod-cart #cart-payment ul li div#description { padding-left: 25px; font-size: 12px; font-weight: normal; }



#cms5-prod-all #cat { clear: both; display: block; }
    #cms5-prod-all #cat ul { margin: 3px; padding: 10px; list-style: none; display: block; overflow: hidden; }
        #cms5-prod-all #cat ul li { clear: both; display: block; padding: 0px 0px 10px 0px; }
            #cms5-prod-all #cat ul li:first-child { }


#cms5-prod-all #itemlist { clear: both; display: block; }
    #cms5-prod-all #itemlist ul { margin: 3px; padding: 10px; list-style: none; border: 1px solid #444444; display: block; display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; vertical-align: top; width: 200px; height: 250px; overflow: hidden; }
        #cms5-prod-all #itemlist ul li { clear: both; display: block; }
        #cms5-prod-all #itemlist ul #code { display: none; overflow: hidden; }
            #cms5-prod-all #itemlist ul #code .caption { display: none; }
        #cms5-prod-all #itemlist ul #title { display: block; height: 20px; overflow: hidden; text-align: center; font-size: 15px; font-weight: bold; }
            #cms5-prod-all #itemlist ul #title .caption { display: none; }
            #cms5-prod-all #itemlist ul #title a,
            #cms5-prod-all #itemlist ul #title a:visited { color: rgba(173, 0, 0, 1); text-decoration: none; }
                #cms5-prod-all #itemlist ul #title a:hover { color: #1A74C6; }
        #cms5-prod-all #itemlist ul #photo { display: block; text-align: center; }
            #cms5-prod-all #itemlist ul #photo .caption { display: none; }
        #cms5-prod-all #itemlist ul #desc { display: none; height: 85px; overflow: hidden; }
            #cms5-prod-all #itemlist ul #desc .caption { display: none; }
        #cms5-prod-all #itemlist ul #addcart { padding-top: 10px; }
            #cms5-prod-all #itemlist ul #addcart a { text-align: left; display: block; width: 120px; height: 25px; background: url(/theme/m9win/imgs/add-to-cart.png) top no-repeat; padding-left: 70px; padding-top: 5px; color: #fff; font-weight: bold; text-decoration: none; }
        #cms5-prod-all #itemlist ul #details { display: none; }
        #cms5-prod-all #itemlist ul #enquiry { display: none; }
        #cms5-prod-all #itemlist ul #price { display: block; clear: both; text-align: center; color: navy; }
            #cms5-prod-all #itemlist ul #price div#offer-strike { color: #ff0000; text-decoration: line-through; }
            #cms5-prod-all #itemlist ul #price .caption { display: none; }
#cms5-prod-list ul #price { color: rgba(173, 0, 0, 1); }
#cms5-prod-all #itemlist ul #weight { display: block; clear: both; text-align: center; }
    #cms5-prod-all #itemlist ul #weight .caption { display: none; }

@media (max-width:400px) {
    #cms5-prod-list > ul { flex: 1 1 calc(50% - 10px); max-width: calc(50% - 10px); }
}

@media (min-width:1024px) {
    #cms5-prod-list > ul { flex: 1 1 calc(25% - 10px); max-width: calc(25% - 10px); }
}

#cms5-prod-list { margin-top: 25px; }
.effect-photogrp #piclayer { bottom: 0; right: 0; margin: auto; }

#cartlist { background: rgba(173, 0, 0, 1); padding: 5px; margin-top: 25px; }
#prod-cart .tbllist .tbl th { background: #7c0707; }
.tbllist .tbl th { padding: 5px; color: #fffd7b; font-size: 16px; font-weight: bold; border-left: 1px solid #e2e8fe; border-bottom: 1px solid #e2e8fe; background: #07447c top; padding-left: 8px; padding-right: 8px; }
.tbllist .tbl td a, .tbllist .tbl td a:visited { color: #ffffff; text-decoration: none; }
#prod-cart .tbllist .tbl tfoot td { background: #640000; }
.tbllist .tbl td { border-top: 1px solid #55aaee; padding-left: 8px; padding-right: 8px; color: #ffffff; }
.tbllist .tbl tfoot td { padding: 3px 8px 3px 8px; background: #003264; color: #fff000; font-weight: bold; }
#prod-cart input[type="button"] { background: #6e3d00; }
.iconx32 li#icon-delete a { display: block; float: left; width: 32px; height: 32px; text-indent: -3000px; overflow: hidden; text-decoration: none; background: url(/data/2146/uploads/icon-delete.png) 0 0 no-repeat; }
#continue-shopping a { color: #fd0900; display: table; padding: 5px; margin-bottom: 10px; margin-top: 5px; }
#prod-cart textarea, #prod-cart input[type=text], #prod-cart input[type=password] { color: #000; }
#icon-delete { list-style-type: none; }
.alert-warning { padding: 10px; }
#theme-contain-prod #customform { max-width: 300px; margin: auto; }

    #theme-contain-prod #customform dl:nth-child(4) { display: flex; flex-wrap: wrap; }
        #theme-contain-prod #customform dl:nth-child(4) dd { flex: 1; }
            #theme-contain-prod #customform dl:nth-child(4) dd:last-child { flex: 2; margin-left: 10px; }
#customform_MemberVerifyCode_Caption { flex: 0 0 100%; }

#customform input#customform_MemberVerifyCode { width: 100%; padding: 8px 15px; border: 1px solid #a7a7a7; background: #fff; border-radius: 5px; }
#theme-contain-prod #sys_msg { padding: 30px 10px; }

#cms5-prod-view { padding-top: 20px; }
    #cms5-prod-view table#particular tr td#caption { width: 120px; }
#particular #desc #content p { font-size: 0; margin: 0; }
#particular tr#spacer { display: none; }
#particular tr#addcart { display: none; }
#particular td { padding: 3px; padding-bottom: 10px; }
    #particular td#caption { color: #fd0900; }
#galleria .galleria-image { }

#back-btn a { display: table; background: linear-gradient(to bottom, #f30900, #560202); padding: 7px 15px; margin-bottom: 25px; border-radius: 6px; }


#sys_msg { text-align: center; color: #f00900; font-size: 24px; font-weight: bold; padding: 20px; max-width: 450px; margin: auto; }
    #sys_msg img { display: block; margin: auto; max-width: 180px; width: 100%; margin-bottom: 25px; }
    #sys_msg p { color: #000; font-size: 14px; font-weight: normal; margin-top: 10px; }
    #sys_msg a { font-size: 14px; display: table; margin: 30px auto 10px; background: linear-gradient(to bottom, #f30900, #560202); color: #fff; padding: 8px 15px; border-radius: 6px; }

#cart-member-info {
    max-width: 300px;
    margin: auto;
    width: 100%;
    color: #000;
}

#cart-member-info ~ #submit {
    text-align: center;
}

#cart-member-info ~ #submit button ,
#cart-member-info ~ #submit input{
background: linear-gradient(to bottom, #f30900, #560202);
    color: #fff;
    padding:7px 12px;
    border-radius:6px;
}

#cart-member-info #caption {
    color: #000;
    white-space: nowrap;
    padding-top: 5px;
    padding-bottom: 5px;
}
#prod-cart #btn-submit button {
    background: linear-gradient(to bottom, #f30900, #560202);
    color: #fff;
    padding:7px 12px;
    border-radius:6px;
}

#prod-cart #btn-submit {
    text-align: center;
    margin: 30px auto;
}

.image-container {
  position: relative;
  display: inline-block;
}

.new-label {
  position: absolute;
  top: 0px; /* Geser ke atas gambar */
  left: 50%; /* Posisikan ke tengah gambar */
  transform: translateX(-50%); /* Koreksi posisi ke tengah */
  background-color: red;
  color: white;
  font-weight: bold;
  padding: 3px 6px;
  font-size: 10px;
  border-radius: 3px;
  animation: blink 1s infinite;
}
.blinking-text {
  display: block;
  text-align: center;
  position: relative;  /* Keeps blinking text in place */
  top: 50%;  /* Centers the text vertically */
  transform: translateY(-50%); /* Corrects the vertical centering */
  animation: blink 1s infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


        .container {
            background: #620201;
            padding: 15px;
            border-radius: 10px;
        }
        .title {
            font-size: 18px;
            margin-bottom: 10px;
            text-align: center;
            border-top: 2px solid red;
            padding-top: 10px;

        }
        .progres-container {
            text-align: left;
            margin-bottom: 15px;
        }
        .progres-title {
            font-weight: bold;
            font-size: 14px;
        }
 .progres-subtitle {
            font-size: 12px;
            color: #ccc;
            margin-bottom: 5px;
        }
        .progres-bar {
            width: 100%;
            background: #444;
            border-radius: 5px;
            overflow: hidden;
            height: 13px;
            position: relative;
        }
        .progres {
            height: 100%;
            background: #f5d203;
            width: 90%; /* Default */
        }
  .waktu {
            position: absolute;
            right: 5px;
            top: -2px;
            font-size: 12px;
            font-weight: bold;
        }
      
        .bottom-border {
            border-bottom: 2px solid red;
            padding-bottom: 10px;
        }
.icon-kl {
    width: 25px; /* Ukuran kecil */
    height: 25px;
    background-color: white; /* Latar belakang putih */
    padding: 2px; /* Ruang di sekitar ikon */
    border-radius: 35%; /* Membuat latar belakang bulat */
    top: -2px;
    position: relative;

}
.count-item {
    font-size: 1.8rem;
    background: #fd0900;
    padding: 0.3rem 0.5rem;
    color: #fff !important;
    border-radius: 10px;
    font-weight: bold;
}

/* Global Service Wrapper */
.wrapper-service {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 12px; /* Slightly rounded corners for consistency */
    margin-top: 1rem;
    border: 3px solid #fd0900;
    padding: 1rem;
    background: linear-gradient(145deg, #990000, #7a0000); /* Futuristic gradient */
    margin-left: auto;
    margin-right: auto;
    min-height: 180px; /* Reduced height to match previous design */
    max-width: 100%;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */

}

@media (min-width: 1024px) { /* Desktop */
    .wrapper-service {
        max-width: 40%; /* Adjusted for desktop */
        min-height: 120px; /* Reduced height for desktop */
    }
    .item-service h1 {
        font-size: 2rem; /* Adjusted text size for consistency */
        margin-top: 10px;
    }
}

@media (max-width: 768px) { /* Mobile */
    .wrapper-service {
        max-width: 95%; /* Full width for mobile */
    }
    .item-service h1 {
        font-size: 1.8rem; /* Smaller text size for mobile */
    }
}

/* Service Item */
.item-service {
    margin-right: 1rem; /* Reduced spacing between items */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.item-service:last-child {
    margin-right: 0;
}

.item-service h1 {
    font-size: 1.5rem;
    color: #fff;
    margin: 0 0 10px 0;
    text-transform: uppercase;
    font-weight: bold;
}

.item-service p {
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.item-service p span {
    background: #fd0900;
    color: #fff;
    padding: 0.3rem 0.7rem;
    border-radius: 10px;
    font-size: 1.2rem;
    font-weight: bold;
}

/* Google Wrapper (maintain consistency with design) */
.google-wrapper {
    background: #fff;
    padding: 1.2rem; /* Adjusted padding */
    width: 14rem; /* Slightly reduced width */
    height: 2rem; /* Adjusted height */
    border-radius: 10px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
}

.google-wrapper img {
    position: absolute;
    width: 2rem;
    top: 2px;
    left: 10px;
}

.google-wrapper p {
    position: absolute;
    top: 4px;
    left: 5rem;
    text-transform: uppercase;
    font-size: 1.4rem;
    font-weight: bold;
    color: #000;
    text-align: center;
    width: 100%;
}

/* Status Wrappers */
.status-wrapper, .status-wrapper-mem {
    display: flex;
    align-items: center;
}

.status-wrapper {
    justify-content: center;
}

.status-wrapper-mem {
    justify-content: center;
}

.status-wrapper p {
    margin-right: 0.6rem !important;
    color: #fff !important;
}

/* Global Container */
.payment-container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 10px;
}

/* Payment Box */
.payment-box {
    background: linear-gradient(145deg, #b30000, #800000); /* More solid red */
    padding: 10px;
    border-radius: 15px;
    color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease-in-out;
}

.payment-box:hover {
    transform: scale(1.05);
}

.payment-title {
    font-weight: bold;
    font-size: 14px;
    color: #fff;
    margin-bottom: 12px; /* Increased for clear separation */
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 0;
    text-transform: uppercase;
    border-bottom: none;
}

/* Payment Options */
.payment-options {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    flex-wrap: wrap;
}

/* Payment Method */
.payment-method {
    background: linear-gradient(90deg, #cc0000, #660000); /* More vibrant red gradient */
    width: 30%;
    padding: 6px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    transition: transform 0.3s ease-in-out;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    height: 75px;
}

.payment-method:hover {
    transform: scale(1.05);
}

.payment-method img {
    width: 24px;
}
.payment-method .text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    height: 100%;
}
.payment-method .title {
    font-size: 11px;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
}



/* Mobile View */
@media (max-width: 768px) {
    .payment-container {
        padding: 0 8px;
    }

    .payment-method {
        width: 30%;
        padding: 6px;
        height: 65px;
    }

    .payment-method .title {
        font-size: 8px;
    }

    .payment-method .desc {
        font-size: 6px;
    }
}


@media (max-width: 600px) {
  .telegram-banner {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 10px;
  }
}

@keyframes blinkScale {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); } 
}

.btn-grad-2 {
    background: linear-gradient(270deg, rgb(201 194 0) 0%, rgb(193 136 0) 21%, rgb(255 154 0) 33%, rgb(255 236 0) 44%, rgb(215 200 9) 60%, rgb(252 126 34) 73%, rgb(255 180 0) 85%, rgb(255 217 0) 100%);
    background-size: 400% 400%;
    animation: gradient 4s ease infinite;
    box-shadow: inset 0 0 5px 3px #f1e900, inset 0 2px 0 0 #fff, inset 0 0 0 2px #670064, 3px 3px 3px 1px rgba(0, 0, 0, .2);
    color: #ffffff;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.btn-grad-1 {
    background: linear-gradient(270deg, #ff0000, #ff0000, #ab0101, #b60f0f, #b60f0f, #b60f0f, #850000, #ff0000, #ff0000) #9a1fec;
    background-size: 400% 400%;
    animation: gradient 4s ease infinite;
    box-shadow: inset 0 0 5px 3px #d41515, inset 0 2px 0 0 #fff, inset 0 0 0 2px #640067, 3px 3px 3px 1px rgba(0, 0, 0, .2);
    color: #ffffff;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}