/*style-base*/

html,
body {

}

a,
button {
    transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    cursor: pointer;
    color: #333;
    text-shadow: none !important;
    font-weight: 0 !important;
}

.ui-overlay-a,
.ui-page-theme-a,
.ui-page-theme-a .ui-panel-wrapper {
    text-shadow: inherit !important;
}
.breadcrumbs {
    padding: 10px 0;
    background-color: #e5e5e5;
}
.breadcrumbs ul,
.breadcrumbs li {
    display: inline;
    color: #666;
}
.breadcrumbs ul a,
.breadcrumbs li a,
.breadcrumbs ul i,
.breadcrumbs li i {
    color: #666;
    float: left;
    margin-right: 10px;
}
.breadcrumbs ul i,
.breadcrumbs li i {
    margin-top: 2px;
}
.breadcrumbs ul li a .bread-link {
    float: left;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a:hover,
button:hover,
a:active,
button:active,
a:focus,
button:focus {
    text-decoration: none;
    color: #0071ff;
}

a:hover svg path:hover,
button:hover svg path:hover,
a:active svg path:hover,
button:active svg path:hover,
a:focus svg path:hover,
button:focus svg path:hover,
a:hover svg path:active,
button:hover svg path:active,
a:active svg path:active,
button:active svg path:active,
a:focus svg path:active,
button:focus svg path:active,
a:hover svg path:focus,
button:hover svg path:focus,
a:active svg path:focus,
button:active svg path:focus,
a:focus svg path:focus,
button:focus svg path:focus {
    fill: #0071ff;
}
img {
    max-width: 100%;
}
a img,
button img,
a span,
button span,
a svg path,
button svg path {
    transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
}

.transition-theme {
    transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
}

.ani-dura-theme {
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
}

.header-transform{
    right:0px;
}

/*a img:hover{
    transition: all 0.25s;
    -webkit-transition: all 0.25s;
    -moz-transition: all 0.25s;
    -o-transition: all 0.25s; 
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}*/

h1 {
    line-height: 1.4;
}

h2 {
    line-height: 2.13;
}

h3 {
    line-height: 1.5;
}

input[type='text'],
input[type='number'],
select {
    padding: 10px;
    min-width: 220px;
    font-size: 13px;
    border-radius: 4px;
    border: 1px #ccc solid;
    background-color: #fff;
}

input[type='text']::-webkit-input-placeholder,
input[type='number']::-webkit-input-placeholder,
select::-webkit-input-placeholder {
    color: #999;
}

input[type='text']:-moz-placeholder,
input[type='number']:-moz-placeholder,
select:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #999;
}

input[type='text']::-moz-placeholder,
input[type='number']::-moz-placeholder,
select::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #999;
}

input[type='text']:-ms-input-placeholder,
input[type='number']:-ms-input-placeholder,
select:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #999;
}

input[type='text']:focus,
input[type='number']:focus,
select:focus {
    outline: none;
}

select {
    padding: 12px 10px 10px 10px;
    height: 44px;
}

/*ul,
li {
    list-style: none;
}*/

ul.list li {
    list-style: disc;
}

.btn {
    padding: 5px 20px;
    -webkit-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    -o-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    /*background: #0071ff;*/
    color: #fff;
    line-height: 1.5;
    font-size: 13px;
    /*//border: 3px #0071ff solid;*/
}

.btn:hover,
.btn:active,
.btn:focus,
.btn:active:focus {
    color: #fff !important;
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    /*background: #f7931e;
    //border: 3px #0071ff solid;*/
}

.btn-link {
    border-color: transparent;
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #0071ff;
}

.btn-link:hover,
.btn-link:active,
.btn-link:focus,
.btn-link:active:focus {
    border-color: transparent;
}

.d-table {
    display: table;
    padding: 0;
    margin: 0;
}

.d-inline {
    display: inline;
}

.p-absolute {
    position: absolute;
}

footer {
    padding: 20px 0;
}

.footer ul {
    list-style: none;
}

.footer ul li {
    list-style: none;
}

.color-white {
    color: #fff;
}

.color-active {
    color: #0071ff;
}

.color-primary {
    color: #0071ff;
}

.color-strong {
    color: #333;
}

.color-medium {
    color: #666;
}

.color-light {
    color: #999;
}

.color-superlight {
    color: #e5e5e5;
}

.color-blue {
    color: #0071ff;
}

.color-red {
    color: #e41f34;
}

.color-green {
    color: #00c46d;
}

.color-yellow {
    color: #ff9100;
}

.color-orange {
    color: #f7941e;
}

.color-orange-dark {
    color: #ff9900;
}

.color-pink {
    color: #ff2275;
}

.background-blue {
    background-color: #0071ff;
}

.background-red {
    background-color: #e41f34;
}

.background-green {
    background-color: #00c46d;
}

.background-yellow {
    background-color: #ff9100;
}

.background-orange {
    background-color: #f7941e;
}

.bg-white {
    background-color: #fff;
}

.bg-gray-light {
    // background-color: #f5f5f5;
}

.font-bold {
    font-weight: 700;
}

.font-medium {
    font-weight: 500;
}

.font-light {
    font-weight: 300;
}

.font-regular {
    font-weight: 400;
}

.text-title {
    font-size: 18px;
}

.text-small {
    font-size: 11px;
}

.text-body-big {
    font-size: 15px;
    padding: 0;
}

.text-display-medium {
    font-size: 32px;
}

.text-display-small {
    font-size: 24px;
}

.text-display-big {
    font-size: 44px;
}

.margin-top-5px {
    margin-top: 5px;
}

.margin-top-10px {
    margin-top: 10px;
}

.margin-top-20px {
    margin-top: 20px;
}

.margin-top-30px {
    margin-top: 30px;
}

.margin-top-40px {
    margin-top: 40px;
}

.margin-top-60px {
    margin-top: 60px;
}

.margin-top-80px {
    margin-top: 80px;
}

.margin-left-20px {
    margin-left: 20px;
}

.margin-left-10px {
    margin-left: 10px;
}

.margin-left-5px {
    margin-left: 5px;
}

.margin-right-5px {
    margin-right: 5px;
}

.margin-right-10px {
    margin-right: 10px;
}

.margin-right-30px {
    margin-right: 30px;
}

.margin-bot-40px {
    margin-bottom: 40px;
}

.margin-bot-30px {
    margin-bottom: 30px;
}

.margin-bot-10px {
    margin-bottom: 10px;
}

.padding-0 {
    padding: 0;
}

.padding-top-10px {
    padding-top: 10px;
}

.padding-left-10px {
    padding-left: 10px;
}

.padding-15px {
    padding: 15px;
}

.padding-10px {
    padding: 10px;
}

.padding-5px {
    padding: 5px;
}

.padding-topbot-15px {
    padding: 15px 0;
}

.text-uppercase {
    text-transform: uppercase;
}

.fit {
    width: 100%;
}

.shadow-default {
    -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.shadow-hight {
    -webkit-box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
}

.pace .pace-progress {
    background: #0071ff;
    position: fixed;
    z-index: 2000;
    top: 0;
    right: 100%;
    width: 100%;
    height: 2px;
}

.pace-inactive {
    display: none;
}

.pagination li a {
    margin: 5px;
    padding: 4px 10px;
    border-radius: 4px;
    color: #666;
    font-weight: 500;
}

.pagination li.active a {
    background-color: #0071ff;
}

.pagination li.active a:focus,
.pagination li.active a:hover {
    background-color: #0071ff;
}

.modal {
    z-index: 9999999;
}

.modal .modal-dialog {
    margin-top: 8%;
    min-width: 800px;
}

.icon-cart.view-cart.view_card_history {
    top: 1px;
}

@media only screen and (max-width: 991px) {
    .modal .modal-dialog {
        margin-top: 15%;
        min-width: 600px;
    }
}

@media only screen and (max-width: 500px) {
    .modal .modal-dialog {
        margin-top: 20%;
        min-width: 100%;
        margin: 0 -10px;
    }
}

.modal .modal-dialog .modal-content {
    padding: 7px 20px;
    border-radius: 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
    width: 500px;
    height: 300px;
}

@media only screen and (max-width:414px){
    #popup-addcart-success {
        position: fixed;
        width: 300px;
        top: 30%;
        left: 50%;
        transform: translate(-50%, -20%);
    }
    #popup-addcart-success .modal-dialog {
            margin: 0;
    }
    .modal .modal-dialog .modal-content {
        width: 300px;
    }
    .icon-cart.view-cart{
        right:50px !important;
        top:13px !important;
    }
        .icon-cart.view-cart:not(.view_card_history){
            right:90px !important;
        }
        .icon-cart.view-cart.view_card_history {
            top: 15px !important;
        }
}

.modal .modal-dialog .modal-content .modal-header {
    padding-bottom: 10px;
    padding: 0;
    /* border-bottom: none; */
    padding-bottom: 10px;
}

.modal .modal-dialog .modal-content .modal-body {
    padding: 0;
}

.modal .modal-footer {
    border: 0;
    padding: 0;
}

@media only screen and (max-width: 500px) {
    .modal .modal-footer {
        text-align: left;
    }
}

.modal .close {
    position: absolute;
    right: -20px;
    top: -7px;
    z-index: 999;
    background-color: #388E3C;
    padding: 0px 0;
    width: 30px;
    height: 30px;
    opacity: 1;
    color: #fff;
    border-top-right-radius: 6px;
}

.modal .close i {
    font-size: 30px;
}

@media only screen and (max-width: 500px) {
    .modal .close {
        //right: 10px;
    }
}

@media (min-width: 200px) {
    .modal.modal-small .modal-dialog {
        margin: 25% auto;
        min-width: 200px;
        width: 200px;
    }
}

@media (min-width: 1222px) {
    .modal.modal-small .modal-dialog {
        margin: 10% auto;
        min-width: 250px;
        width: 500px;
    }
    .header .header-transform {
        left: 0px!important;
    }
    .header .header-menu-area {
        display: flex;
        display: -webkit-flex;
    }
    .header .header-menu-area ul.menu_left {
        display: flex;
        flex-grow: 1;
        -webkit-flex-grow: 1;
        display: -webkit-flex;
        justify-content: center;
        -webkit-justify-content: center;
        -ms-justify-content: center;
        -o-justify-content: center;
    }
}

.modal.modal-small .modal-dialog .modal-content {
    border-radius: 6px;
}

.modal.modal-small .modal-dialog .modal-content .modal-header {
    padding-bottom: 5px;
    border-bottom: none;
}

.modal.modal-small .modal-dialog .modal-content .modal-header h4 {
    font-size: 15px;
}

.modal.modal-small .modal-footer {
    background-color: #fff;
    border: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -30px;
    padding: 20px 30px;
}

.modal.modal-small .modal-footer .btn {
    padding: 5px 10px;
}

table.table>thead {
    background-color: #e5e5e5;
}

    table.table > thead > tr > th {
        border-bottom: 1px solid #D8DDE6;
        padding: 10px 20px;
    }

table.table > tbody > tr:not(:last-child) {
    border-bottom: 1px #D8DDE6 solid;
}

table.table>tbody>tr>td {
    /*border: 0;*/
    vertical-align:middle;
    padding: 20px;
    padding-bottom:17px;
}
div.dataTables_scrollBody table, dataTables_scrollHeadInner, div.dataTables_scrollBody table {
    width: 100% !important;
}

.line-through {
    text-decoration: line-through;
}

.svg {
    width: 25px;
    height: 30px;
    text-anchor: ce;
}

.icon-default {
    width: 25px;
}

.modal#cart-modal .modal-dialog {
    margin: 0;
    top: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    max-width: 450px;
    min-width: auto;
}

.modal#cart-modal .modal-dialog .modal-content {
    min-height: 100%;
}

@media only screen and (max-width: 500px) {
    .modal#cart-modal .modal-header {
        margin-bottom: 30px;
    }
}

.modal#cart-modal .modal-header .close {
    right: 0px;
    top: 5px;
    background: #b51717;
    color: #fff;
    border-radius: 4px;
}

.modal#cart-modal .modal-header .icon-rounded {
    /* padding: 0px; */
}

.modal#cart-modal .modal-header .icon-rounded .svg {
    padding: 25px;
    padding-left: 0px;
    padding-top: 3px;
}

.modal#cart-modal .modal-header .icon-rounded .svg path {
    fill: #0071ff;
}

@media only screen and (max-width: 500px) {
    .modal#cart-modal .modal-header .icon-rounded {
        margin-right: 10px;
    }
}

.modal#cart-modal .cart-table {
    overflow: hidden;
    overflow-y: scroll;
    max-height: 400px;
    border-bottom: 1px #e5e5e5 solid;
}

.modal#cart-modal .cart-table::-webkit-scrollbar {
    width: 5px;
    border-radius: 10px;
    margin-left: 10px;
}

.modal#cart-modal .cart-table::-webkit-scrollbar-thumb {
    background-color: #fff;
    border-radius: 20px;
}

.modal#cart-modal .cart-table .table {
    display: table;
}

.modal#cart-modal .cart-table .table tr,
.modal#cart-modal .cart-table .table td {
    vertical-align: middle;
}

@media only screen and (max-width: 500px) {
    .modal#cart-modal .cart-table .table tr,
    .modal#cart-modal .cart-table .table td {
        display: block;
    }
}

.modal#cart-modal .cart-table .table tbody tr td {
    padding: 10px;
}

.modal#cart-modal .cart-table .table tbody tr td.price {
    min-width: 100px;
}

.modal#cart-modal .cart-table input[type='number'] {
    min-width: 10px;
    width: 90px;
    padding: 7px 10px;
}

.modal#cart-modal .cart-table:hover::-webkit-scrollbar-thumb {
    background-color: #999;
}

@media only screen and (max-width: 500px) {
    .modal#cart-modal .cart-table {
        max-height: none;
    }
}

.modal#cart-modal .choose-bank-area {
    display: none;
}

.modal#cart-modal .choose-bank-area .list-bank ul {
    float: left;
    width: 100%;
}

.modal#cart-modal .choose-bank-area .list-bank ul li {
    float: left;
    width: 25%;
}

@media only screen and (max-width: 500px),
only screen and (max-width: 991px) {
    .modal#cart-modal .choose-bank-area .list-bank ul li {
        width: 33.3333333%;
    }
}

.modal#cart-modal .choose-bank-area .list-bank ul li .item-bank {
    float: left;
    border: 2px transparent solid;
}

.modal#cart-modal .choose-bank-area .list-bank ul li .item-bank input[type='radio'] {
    position: absolute;
    opacity: 0;
}

.modal#cart-modal .choose-bank-area .list-bank ul li .item-bank input[type='radio']:not(:checked)+label,
.modal#cart-modal .choose-bank-area .list-bank ul li .item-bank input[type="radio"]:checked+label {
    display: -webkit-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: auto;
    -ms-flex-align: center;
    -webkit-box-align: center;
    align-items: center;
    -webkit-align-items: center;
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    margin: 0;
    padding: 5px;
    border: 2px rgba(0, 0, 0, 0) solid;
    cursor: pointer;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
}

.modal#cart-modal .choose-bank-area .list-bank ul li .item-bank input[type="radio"]:checked+label {
    border: 2px #0071ff solid;
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

.modal#cart-modal .choose-bank-area .list-bank ul li .item-bank label img {
    width: 100%;
}

.header {
    /*padding: 3px 0;*/ 
    background-color: #fff;
}

.header ul li {
    display: inline;
    padding: 0 24px;
    float: left;
    position: relative;
}

    .header .btn-hamburger {
        width: 100%;
        float: left;
    }

.header .btn-hamburger #nav-icon1 {
    width: 30px;
    height: 30px;
    position: relative;
    margin: 10px auto 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    cursor: pointer;
}

.header .btn-hamburger #nav-icon1 span {
    display: block;
    position: absolute;
    height: 5px;
    width: 100%;
    background: #666;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    top: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: 0.25s ease-in-out;
    -moz-transition: 0.25s ease-in-out;
    -o-transition: 0.25s ease-in-out;
    transition: 0.25s ease-in-out;
}

.header .btn-hamburger #nav-icon1 span:nth-child(1) {
    top: 0px;
}

.header .btn-hamburger #nav-icon1 span:nth-child(2) {
    top: 10px;
}

.header .btn-hamburger #nav-icon1 span:nth-child(3) {
    top: 20px;
}

.header .btn-hamburger #nav-icon1.open span:nth-child(1) {
    top: 10px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
}

.header .btn-hamburger #nav-icon1.open span:nth-child(2) {
    opacity: 0;
    left: 60px;
}

.header .btn-hamburger #nav-icon1.open span:nth-child(3) {
    top: 10px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.header .header-logo-area img {
    max-width: 300px;
    /* margin-top: 10px; */
    margin-top:0px !important;
}

@media only screen and (max-width: 1199px),
only screen and (max-width: 991px),
only screen and (max-width: 500px) {
    .header .header-logo-area img {
        max-width: 200px;
    }
}
@media (max-width:500px) {
    .header .header-logo-area img {
        max-width: 120px;
        margin-top: 5px;
    }
}
.margin-top-5 {
    margin-top: -5px;
}

.header .header-menu-area {
    padding-top:32px;
    padding-bottom:26px;
    margin-bottom:-4px;
}

.header-menu-area .text-menu {
    display: flex;
    padding: 16px 22px;
    border-bottom: 1px solid #D8DDE6;
    justify-content: space-between;
}
    .header-menu-area .text-menu span {
        color: #6C738D;
        font-weight:bold;
    }
.header-menu-area .text-menu img {
    width: 14px;
    height: 14px;
    cursor: pointer;
}
.header .header-menu-area ul {
    /*width: 100%;*/
    float: left;
    margin: 0;
    /*padding-right:12px;*/
}

.header .header-menu-area ul li a {
    //color: #323232;
    position: relative;
    font-size: 13px;
    cursor:pointer;
}


.top-menu{
    text-transform:uppercase;
}
.header .header-menu-area ul li a:hover,
.header .header-menu-area ul li a:active {
    color: #388E3C;
}
.header .header-menu-area ul li a.active span {
    padding-bottom: 23px !important;
    border-bottom: 4px #388E3C solid;
    color: #388E3C;
    font-weight: bold;
}
.header .header-menu-area ul li a span, .header .header-menu-area ul li a.news-menu {
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 19px;
    color: #6C738D;
}

    .header .header-btn-area ul {
        padding-top: 3px;
        margin-bottom: 0;
        float: right;
    }

@media only screen and (max-width: 1199px),
only screen and (max-width: 991px),
only screen and (max-width: 500px) {
    .header .header-btn-area ul {
        float: left;
        padding: 0 30px;
        margin-top: 30px;
        text-align: center;
    }
}

@media only screen and (max-width: 1199px),
only screen and (max-width: 991px),
only screen and (max-width: 500px) {
    .header .header-btn-area ul li {
        width: 100%;
        padding: 0;
    }
}

.header .header-btn-area ul li a {
    font-size: 15px;
    font-weight: 500;
}

.header .header-btn-area ul li a.btn {
    padding: 7px 17px;
}

@media only screen and (max-width: 1199px),
only screen and (max-width: 991px),
only screen and (max-width: 500px) {
    .header .header-btn-area ul li a.btn {
        margin-top: 30px;
        width: 100%;
    }
}

.header .header-user-area {
    padding-top: 10px;
}

.header .header-user-area ul li {
    /* padding: 10px 15px; */
    /* border-right: 1px #e5e5e5 solid; */
}

.header .header-user-area ul li:last-child {
    border-right: none;
}

.header .header-user-area ul li a {
    position: relative;
}

.header .header-user-area ul li a .svg {
    display: inline-block;
    vertical-align: middle;
    width: 23px;
}

.header .header-user-area ul li a .user-ava {
    width: 30px;
}

.header .header-user-area ul li a span {
    display: inline-block;
    vertical-align: middle;
}

.header .header-user-area ul li a .user-name {
    max-width: 150px;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#noti-cart,
#noti-mess {
    line-height: 12px;
    /* padding: 4px 6px 3px; */
    position: absolute;
    left: 18px;
    top: -23px !important;
    /* border-radius: 20px; */
    background: #2A4793;
    color: #fff;
    font-size: 12px;
    min-width: 13px;
    height: 16px;
    text-align: center;
    padding: 0;
    vertical-align: middle;
    padding-top: 2px;
}
#noti-card {
    line-height: 12px;
    /* padding: 4px 6px 3px; */
    position: absolute;
    left: 18px;
    top: -23px !important;
    /* border-radius: 20px; */
    background: #2A4793;
    color: #fff;
    font-size: 12px;
    min-width: 13px;
    height: 16px;
    text-align: center;
    padding: 0;
    vertical-align: middle;
    padding-top: 2px;
}
.header .header-user-area ul li.has-secondnav {
    position: relative;
}

#user-select,#news-menu {
    z-index: 9999;
    top: 40px;
    right: 0;
    background-color: #fff;
    border: 1px #e5e5e5 solid;
    -webkit-box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
}
    #news-menu ul {
        width: 100%;
    }
a.news-menu[aria-expanded="true"] span:before {
    content: "\f106";
}
#user-select ul li, #news-menu ul li {
    float: left;
    width: 100%;
    border-bottom: 1px #e5e5e5 solid;
    padding: 12px 15px 8px 15px;
}

    #user-select .header, #news-menu .header {
        background-color: #f5f5f5;
        border-bottom: 1px #e5e5e5 solid;
    }

    #user-select .header .icon-default, #news-menu .header .icon-default {
        border: 1px #f7941e solid;
        padding: 10px 7px 5px 7px;
        width: 40px;
        border-radius: 30px;
    }

        #user-select .header .icon-default .svg path, #news-menu .header .icon-default .svg path {
            fill: #f7941e;
        }

    #user-select .header::after, #news-menu .header::after {
        content: "";
        position: absolute;
        top: -9px;
        width: 0;
        height: 0;
        right: 10px;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid #f5f5f5;
    }

    #user-select .header::before, #news-menu .header::before {
        content: "";
        position: absolute;
        top: -11px;
        width: 0;
        height: 0;
        right: 10px;
        z-index: -1;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid #e5e5e5;
    }

    #user-select ul li, #news-menu ul li {
        border-right: none;
    }

    #user-select ul.list-mes, #news-menu ul.list-mes {
        float: left;
    }

        #user-select ul.list-mes li, #news-menu ul.list-mes li {
            padding: 0;
            float: left;
            border-bottom: 1px #e5e5e5 solid;
        }

            #user-select ul.list-mes li a, #news-menu ul.list-mes li a {
                padding: 10px 0;
            }

                #user-select ul.list-mes li a .title-message, #news-menu ul.list-mes li a .title-message {
                    max-width: 200px;
                    overflow: hidden;
                    -o-text-overflow: ellipsis;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                #user-select ul.list-mes li a .short-message, #news-menu ul.list-mes li a .short-message {
                    max-width: 330px;
                    display: block;
                    /* Fallback for non-webkit */
                    display: -webkit-box;
                    overflow: hidden;
                    -o-text-overflow: ellipsis;
                    text-overflow: ellipsis;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                }

#mess-noti-list {
    width: 260px;
    position: absolute;
    z-index: 9999;
    top: 40px;
    right: 0;
    background-color: #fff;
    border: 1px #e5e5e5 solid;
    -webkit-box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
}

#mess-noti-list .header {
    background-color: #f5f5f5;
    border-bottom: 1px #e5e5e5 solid;
    padding: 15px;
}

#mess-noti-list .header:before {
    content: "";
    position: absolute;
    top: -11px;
    width: 0;
    height: 0;
    right: 10px;
    z-index: -1;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #e5e5e5;
}

#mess-noti-list .header .icon-default {
    border: 1px #f7941e solid;
    padding: 10px;
    width: 50px;
    height: 50px;
    color: #f7941e;
    border-radius: 30px;
    text-align: center;
}

.header .header-user-area ul li.has-secondnav .user-select ul li {
    float: left;
    width: 100%;
    border-bottom: 1px #e5e5e5 solid;
}

.header .header-user-area ul li.has-secondnav .user-select ul li a {
    width: 100%;
    float: left;
}


@media only screen and (max-width: 1199px),
only screen and (max-width: 991px),
only screen and (max-width: 500px) {
    .header .header-transform {
        position: fixed;
        z-index: 999999;
        background-color: #fff;
        top: 0;
        bottom: 0;
        right: -300px;
        width: 270px;
        overflow: hidden;
        overflow-y: scroll;
    }
    .header .header-transform .header-menu-area ul,
    .header .header-transform .header-user-area ul {
        width: 100%;
        padding: 0;
    }
    .header .header-transform .header-menu-area ul li,
    .header .header-transform .header-user-area ul li {
        width: 100%;
        display: block;
        padding: 20px 30px;
    }
    .header .header-menu-area ul li a.active span{
        padding-bottom:16px !important;
    }
    .header .header-transform .header-menu-area ul li {
        border-bottom: 1px #e5e5e5 solid;
    }
    .header .header-transform .header-user-area {
        margin-top: 60px;
    }
    .header .header-transform .header-user-area ul li {
        border: none;
        border-top: 1px #e5e5e5 solid;
    }
    .header .header-transform .header-user-area .label-noti {
        right: -60px;
        top: 0px;
    }
    #news-menu{
        right:auto;
    }
    #user-select{
        right:auto;
        top:50px;
    }
}

footer {
    background-color: #26262D;
    color: #fff;
    padding: 30px 0;
    /*border-top: 4px solid #0071ff*/
}




@media only screen and (max-width: 991px),
only screen and (max-width: 500px) {}

@media only screen and (max-width: 600px) {
    .header .header-menu-area ul li a.active span{
        padding-bottom:20px !important;
    }
}

.cart-terms {
    white-space: normal;
    /*display: none;*/
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
}

.cart-terms .terms-inner {
    border: 1px #eee solid;
    background-color: #f5f5f5;
}

.cart-terms .terms-inner .terms-body {
    height: 120px;
    padding: 10px;
    white-space: normal;
    overflow: hidden;
    overflow-y: scroll;
}

/*::-webkit-scrollbar {
    width: 5px;
    border-radius: 10px;
    margin-left: 10px;
}*/

/*::-webkit-scrollbar-thumb {
    background-color: #fff;
    border-radius: 20px;
}

:hover::-webkit-scrollbar-thumb {
    background-color: #999;
}*/

.radio input[type=radio] {
    position: absolute;
    visibility: hidden;
}

.radio {
    position: relative;
}

.radio label {
    display: block;
    position: relative;
    padding: 0px 30px;
    margin: 10px auto;
    height: 30px;
    z-index: 9;
    cursor: pointer;
    -webkit-transition: all 0.25s linear;
}

.radio:hover label {
    color: #ccc;
}

.radio .check {
    display: block;
    position: absolute;
    border: 3px solid #AAAAAA;
    border-radius: 100%;
    height: 20px;
    width: 20px;
    top: 0px;
    z-index: 5;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
}

.radio:hover .check {
    border: 3px solid #ccc;
}

.radio .check::before {
    display: block;
    position: absolute;
    content: '';
    border-radius: 100%;
    height: 10px;
    width: 10px;
    top: 2px;
    left: 2px;
    margin: auto;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
}

input[type=radio]:checked~.check {
    border: 3px solid #0071ff;
}

input[type=radio]:checked~.check::before {
    background: #0071ff;
}

input[type=radio]:checked~label {
    color: #0071ff;
}

.sticky {
    position: fixed;
    top: 0;
    z-index: 9999;
    width: 100%;
    padding: 5px 0px;
    -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    -webkit-animation: fadeInDown 0.5s;
    -moz-animation-name: fadeInDown 0.5s;
    -o-animation-name: fadeInDown 0.5s;
    -webkit-animation-name: fadeInDown 0.5s;
    animation-name: fadeInDown 0.5s;
}

.sticky .header-logo-area {
    //padding-top: 2px;
}

.sticky .header-logo-area img {
    // max-width: 150px;
}



/*viet le */

.select-pay img {
    max-width: 80px;
    display: block;
    margin: 0 auto;
    margin-bottom: 10px;
}

.map {
    height: 520px;
    margin-bottom: 10px;
}

.map #map {
    width: 100%;
    height: 100%;
    height: calc(100%);
}

.CartCell {
    padding: 0 1px 0 15px;
    position: relative;
    margin-bottom: 10px;
}

.CartTitle {
    padding: 0 20px;
}

.CartTitle h5 {
    color: #999;
    font-size: 12px;
}

.CartCell .Item--summary {
    overflow: auto;
    display: table;
    height: 100%;
    width: 100%;
}

.CartCell .ProductInfo {
    background: none;
    /* display: table-cell; */
    /* vertical-align: top; */
    /* height: 100%; */
    float: left;
}

.CartCell .ProductInfo .ProductInfo--image {
    height: 40px;
    vertical-align: middle;
}

.CartCell .ProductInfo>div {
    display: table-cell;
}

.Image {
    background-color: #ffffff;
    overflow: hidden;
    position: relative;
}

.Image--wrapper {
    background-position: 50% 50%;
    background-size: cover;
    height: 100%;
    transition: .25s opacity;
    width: 100%;
}

.cart-table-footer .slider-sp {
    border-bottom: 1px solid #e5e5e5;
}

.CartCell .ProductInfo .Image--wrapper img {
    vertical-align: middle;
    margin-right: 10px;
    overflow: auto;
    height: 40px;
}

.CartCell .ProductInfo .ProductInfo--title {
    width: 130px;
    overflow: auto;
    font-size: 9pt;
    font-weight: 700;
    color: #0074ff;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding-top: 3px;
    margin: 0;
}

.CartCell .ProductInfo a {
    cursor: pointer;
}

.CartCell .ProductInfo .ProductInfo--variation {
    display: block;
    font-weight: 400;
    color: #57646e;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.CartCell .ProductInfo--totals {
    /* padding-top: 5px; */
    /* display: inline-table; */
    /* height: 100%; */
    float: right;
    position: relative;
    margin-top: 10px;
    /* margin: 0; */
    display: -ms-flexbox;
    display: -webkit-flex;
    /* display: flex; */
    -ms-flex-align: center;
    /* align-items: center; */
    /* -webkit-align-items: center; */
    padding-right: 40px;
}

.CartCell .ProductInfo--totals .ProductInfo--quantity {
    font-size: 10px;
    font-weight: 700;
    color: #a59999;
    padding-right: 15px;
}

.CartCell .ProductInfo--totals input {
    border-radius: 3px;
    border: 1px solid #ddd;
    text-align: center;
    font-weight: 700;
    font-size: 9pt;
    color: #57646e;
    width: 45px;
    min-width: auto;
    height: 24px;
    box-shadow: 0 0 0 #ffffff, inset 0 0 0 #ffffff;
    outline: 0;
}

.CartCell .ProductInfo--totals .amount {
    color: #57646e;
    display: inline-block;
    margin-right: 15px;
    font-weight: 700;
    font-size: 9pt;
    min-width: 55px;
    padding-top: 5px;
    padding: 0;
    margin: 0;
    margin-top: 5px;
}

.CartCell .ProductInfo--totals .remove-product {
    color: #0074ff;
    cursor: pointer;
    padding: 0;
    width: 10px;
    height: 25px;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -webkit-align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    -webkit-justify-content: center;
    top: 0;
    right: 0;
}

.CartCell .ProductInfo--totals .remove-product img {
    width: 9px;
    height: 9px;
    display: block;
}

.cart-table-footer button {
    margin-bottom: 0;
}


/* 
  jQuery Logo Slider Ticker 
  by http://webdesignandsuch.com
  build with code from http://bxslider.com
*/

#slider {
    list-style: none;
    padding: 0px
}

.slider-container {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

#slider img {

    margin: 0px;
    display: inline-block
}

#slider-list-game li {
    width: 210px;
    position: relative !important;
}

.bx-wrapper,
.bx-window {
    width: 100% !important;
}

#slider-list-game img.absolute {
    position: absolute;
    left: 41%;
}

.home-banner .owl-carousel {
    z-index: 0;
}

.home-banner .owl-carousel .item {
    position: relative;
}

.home-banner .carousel-inner .item .banner-txt {
    position: absolute;
    top: 30%;
    right: 22%;
}

@media only screen and (max-width: 1440px) {
    .home-banner .carousel-inner .item .banner-txt {
        top: 20%;
        right: 10%;
    }
}

@media only screen and (max-width: 991px) {
    .home-banner .carousel-inner .item .banner-txt {
        top: 5%;
        right: 5%;
    }
}

@media only screen and (max-width: 500px) {
    .home-banner .carousel-inner .item .banner-txt {
        top: 0;
    }
}

.home-banner .carousel-inner .item .banner-txt h1 {
    font-size: 48px;
    font-weight: 800;
}

@media only screen and (max-width: 991px),
only screen and (max-width: 1199px) {
    .home-banner .owl-carousel .item .banner-txt h1 {
        font-size: 30px;
    }
}

@media only screen and (max-width: 500px) {
    .home-banner .carousel-inner .item .banner-txt h1 {
        font-size: 20px;
    }
}

.home-banner .carousel-inner .item .banner-txt h4 {
    font-size: 20px;
    font-weight: 400;
}

@media only screen and (max-width: 991px),
only screen and (max-width: 1199px) {
    .home-banner .carousel-inner .item .banner-txt h4 {
        font-size: 16px;
    }
}

@media only screen and (max-width: 500px) {
    .home-banner .carousel-inner .item .banner-txt h4 {
        font-size: 12px;
    }
}

.home-banner .carousel-inner .item .banner-txt .btn {
    font-weight: 900;
}

.home-banner .carousel-inner .item .banner-txt .btn:hover,
.home-banner .carousel-inner .item .banner-txt .btn:active,
.home-banner .carousel-inner .item .banner-txt .btn:focus {
    background-color: #0071ff;
    color: #fff;
    padding: 5px 50px;
}

@media only screen and (max-width: 500px) {
    .home-banner .owl-carousel .item .banner-txt .btn {
        position: absolute;
        z-index: 99999999;
        top: 50px;
        left: -180px;
    }
}

.hot-events .hot-events-thumb {
    position: relative;
    margin-top: -60px;
}

@media only screen and (max-width: 1440px),
only screen and (max-width: 1199px) {
    .hot-events .hot-events-thumb {
        margin-top: -30px;
    }
}

@media only screen and (max-width: 991px),
only screen and (max-width: 500px) {
    .hot-events .hot-events-thumb {
        margin-top: 40px;
    }
}

.hot-events .hot-events-thumb:hover {
    margin-top: -80px;
}

@media only screen and (max-width: 1440px),
only screen and (max-width: 1199px) {
    .hot-events .hot-events-thumb:hover {
        margin-top: -40px;
    }
}

@media only screen and (max-width: 991px),
only screen and (max-width: 500px) {
    .hot-events .hot-events-thumb:hover {
        margin-top: 40px;
    }
}

.hot-events .hot-events-thumb:hover .hot-events-pic {
    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
    -webkit-box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
    transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
}

.hot-events .hot-events-thumb .hot-events-pic {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.hot-events .hot-events-thumb .hot-events-pic:after {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    left: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%);
    border: 2px #fff solid;
}

.hot-events .hot-events-thumb .hot-events-desc {
    width: 75%;
    position: absolute;
    left: 30px;
    bottom: 10px;
    z-index: 999;
}

.hot-events .hot-events-thumb .hot-events-desc h5 {
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media only screen and (max-width: 991px),
only screen and (max-width: 1199px) {
    .hot-events .hot-events-thumb .hot-events-desc h5 {
        font-size: 15px;
    }
}

.hot-events .hot-events-thumb .hot-events-desc span {
    font-size: 12px;
    display: block;
    /* Fallback for non-webkit */
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

@media only screen and (max-width: 991px),
only screen and (max-width: 1199px) {
    .hot-events .hot-events-thumb .hot-events-desc span {
        font-size: 13px;
    }
}

.title-section-home {
    padding-left: 15px;
    border-left: 6px #0071ff solid;
    font-size: 24px;
}

@media only screen and (max-width: 991px),
only screen and (max-width: 1199px),
only screen and (max-width: 500px) {
    .title-section-home {
        font-size: 24px;
    }
}

.buy-credit-area .card-sll {
    height: 140px;
    background: linear-gradient(to bottom, #00d3ff, #006fff);
    border-radius: 6px;
    padding: 15px;
}

@media only screen and (max-width: 991px),
only screen and (max-width: 1199px),
only screen and (max-width: 500px) {
    .buy-credit-area .card-sll,
    .appota-card {
        margin: 15px 0;
    }
}

.buy-credit-area .card-sll a {
    color: #fff;
}

.buy-credit-area .card-sll a span.label-vip {
    position: absolute;
    bottom: 15px;
    right: 30px;
}

.buy-credit-area .card-sll img.logo {
    width: 120px;
}

.buy-credit-area .card-sll .label-sale {
    position: absolute;
    background-color: #ff2275;
    top: -5px;
    right: 30px;
    padding: 8px;
    color: #fff;
    font-size: 15px;
    z-index: 888;
}

.appota-card .label-sale {
    position: absolute;
    background-color: #ff2275;
    top: -5px;
    left: 35px;
    padding: 10px 15px;
    font-size: 16.5px;
    color: #fff;
    font-weight: bold;
    font-size: 17px;
    z-index: 888;
}

@media only screen and (max-width: 991px),
only screen and (max-width: 1199px),
only screen and (max-width: 500px) {
    .buy-credit-area .card-sll .label-sale {
        top: 5px;
    }
}

.buy-credit-area .card-sll .label-sale:after,
.buy-credit-area .card-sll .label-sale:before,
.appota-card .label-sale:after,
.appota-card .label-sale:before {
    content: "";
    position: absolute;
    top: 100%;
    width: 0;
    height: 0;
}

.buy-credit-area .card-sll .label-sale:after,
.appota-card .label-sale:after {
    left: 0;
    border-left: 0px solid transparent;
    border-right: 25px solid transparent;
    border-top: 10px solid #ff2275;
}

.buy-credit-area .card-sll .label-sale:before,
.appota-card .label-sale:before {
    right: 0;
    border-left: 25px solid transparent;
    border-right: 0px solid transparent;
    border-top: 10px solid #ff2275;
}

.buy-credit-area .card-sll .price {
    margin-top: 40px;
}

.buy-credit-area .card-sll .price h3 {
    margin: 0;
    line-height: 1.2;
}

.buy-credit-area .card-sll .price p {
    font-size: 13px;
}

.buy-credit-area .get-card-area {
    background-color: #291e4a;
    padding: 20px 30px;
}

.buy-credit-area .get-card-area .show-balance,
.buy-credit-area .get-card-area .show-card-type {
    float: left;
    width: 180px;
}

@media only screen and (max-width: 991px) {
    .buy-credit-area .get-card-area .show-balance,
    .buy-credit-area .get-card-area .show-card-type {
        width: 40%;
    }
}

@media only screen and (max-width: 500px) {
    .buy-credit-area .get-card-area .show-balance,
    .buy-credit-area .get-card-area .show-card-type {
        width: 100%;
    }
}

.buy-credit-area .get-card-area .show-balance input[type='text'],
.buy-credit-area .get-card-area .show-card-type input[type='text'] {
    min-width: auto;
    font-weight: 700;
    font-size: 14px;
}

.buy-credit-area .get-card-area .show-card-type {
    margin-left: 20px;
}

@media only screen and (max-width: 500px) {
    .buy-credit-area .get-card-area .show-card-type {
        margin-left: 0;
        margin-top: 20px;
    }
}

.buy-credit-area .get-card-area .choose-price {
    margin-left: 20px;
    float: left;
    width: 200px;
}

@media only screen and (max-width: 991px) {
    .buy-credit-area .get-card-area .choose-price {
        margin-left: 0;
        margin-top: 30px;
        width: 40%;
    }
}

@media only screen and (max-width: 500px) {
    .buy-credit-area .get-card-area .choose-price {
        margin-left: 0;
        margin-top: 20px;
        width: 100%;
    }
}

.buy-credit-area .get-card-area .choose-price select {
    font-size: 14px;
    font-weight: 500;
    min-width: auto;
}

.buy-credit-area .get-card-area .choose-price select option {
    font-size: 14px;
    font-weight: 500;
}

.buy-credit-area .get-card-area .choose-quantity {
    width: 100px;
    float: left;
    margin-left: 20px;
}

@media only screen and (max-width: 991px) {
    .buy-credit-area .get-card-area .choose-quantity {
        margin-top: 30px;
        width: 40%;
    }
}

@media only screen and (max-width: 500px) {
    .buy-credit-area .get-card-area .choose-quantity {
        margin-left: 0;
        margin-top: 20px;
        width: 100%;
    }
}

.buy-credit-area .get-card-area .choose-quantity input[type='number'] {
    min-width: 100px;
    font-size: 14px;
}

.buy-credit-area .get-card-area .btn-get-card {
    padding: 8px 30px;
    margin-left: 20px;
}

@media only screen and (max-width: 991px) {
    .buy-credit-area .get-card-area .btn-get-card {
        margin-left: 0;
        padding: 10px 50px;
    }
}

@media only screen and (max-width: 500px) {
    .buy-credit-area .get-card-area .btn-get-card {
        margin-left: 0;
        width: 100%;
        padding: 10px 50px;
    }
}

.buy-credit-area .get-card-area .btn-get-card:hover,
.buy-credit-area .get-card-area .btn-get-card:focus {
    color: #fff;
}

.buy-cards-area .appota-card {
    // float: left;
    // padding: 5px;
    // background-color: #fff;
    // border: 1px #e5e5e5 solid;
    // border-radius: 6px;
}

.buy-cards-area .appota-card .footer {
    padding: 10px;
}

.buy-cards-area .appota-card .footer .btn-addcart {
    margin-right: 10px;
    width: 25px;
}

.buy-cards-area .appota-card .footer .btn-addcart:hover .svg path:hover,
.buy-cards-area .appota-card .footer .btn-addcart:focus .svg path:hover,
.buy-cards-area .appota-card .footer .btn-addcart:hover .svg path:focus,
.buy-cards-area .appota-card .footer .btn-addcart:focus .svg path:focus {
    fill: #666;
}

.topup-mobile-area .select-operator {
    width: 100%;
    text-align: center;
    padding: 28px 50px;
    border: 2px #ccc solid;
    border-radius: 6px;
    margin: 10px 0;
}

.topup-mobile-area .select-operator:hover {
    border: 2px #0071ff solid;
}

.topup-mobile-area .select-operator:active {
    border: 2px #0071ff solid;
}

.topup-mobile-area .select-operator img {
    max-width: 120px;
}

.topup-mobile-area .select-operator.active {
    border: 2px #0071ff solid;
}

.topup-mobile-area form .select-row {
    padding: 15px 10px;
    border-radius: 6px;
    background-color: #eee;
    border: 1px #ccc solid;
    margin-top: 10px;
}

.topup-mobile-area form .select-row select,
.topup-mobile-area form .select-row input {
    width: 100%;
}

@media only screen and (max-width: 500px) {
    .topup-mobile-area form .select-row select,
    .topup-mobile-area form .select-row input {
        margin: 10px 0;
    }
}

.topup-mobile-area form .order-table {
    float: left;
    border: 1px #ccc solid;
    border-radius: 6px;
    width: 100%;
}

.topup-mobile-area form .order-table .table,
.topup-mobile-area form .order-table .footer {
    width: 100%;
    float: left;
}

.topup-mobile-area form .order-table table.table thead {
    background-color: #eee;
}

.topup-mobile-area form .order-table table.table thead tr th {
    border: none;
    font-weight: 500;
}

.topup-mobile-area form .order-table table.table tbody tr {
    height: 80px;
}

.topup-mobile-area form .order-table table.table tbody tr td {
    min-width: 50px;
    width: 30px;
}

.topup-mobile-area form .order-table table.table tbody tr td.show-operator {
    width: 35%;
}

.topup-mobile-area form .order-table .footer {
    padding: 15px;
    border-top: 1px #e5e5e5 solid;
}

@media only screen and (max-width: 500px) {
    .topup-mobile-area form .order-table .footer button {
        float: left !important;
        margin-top: 30px;
        width: 100%;
    }
}

.topup-mobile-area .clear-order-btn {
    display: none;
}

.list-game-area {
    // background-color: #f2f2f2;
    // padding: 50px 0 20px 0;
}

.list-game-area .title-section-home {
    font-size: 20px;
    font-weight: 500;
    border-left: 0;
    padding: 0;
}

.list-game-area ul li {
    max-width: 110px;
    float: left;
    display: inline;
    margin: 0px 15px;
    text-align: center;
    margin-bottom: 30px;
}

.list-game-area ul li .icon-game {
    width: 100%;
}

.list-game-area ul li label {
    margin-top: 10px;
}

.popup-get-card-success .header-code {
    overflow: hidden;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    font-weight: bold;
    padding: 10px 0;
    text-transform: uppercase;
    color: #999;
    font-size: 13px;
}

@media only screen and (max-width: 500px) {
    .popup-get-card-success .header-code {
        display: none;
    }
}

.popup-get-card-success .code-card,
.popup-get-card-success .price-card,
.popup-get-card-success .date-card {
    -ms-flex: 1;
    flex: 1;
    -webkit-flex: 1;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.popup-get-card-success .price-card {
    -ms-flex: .5;
    flex: .5;
    -webkit-flex: .5;
}

.popup-get-card-success .price-card b {
    display: none;
}

@media only screen and (max-width: 500px) {
    .popup-get-card-success .price-card b {
        display: inline-block;
    }
}

.popup-get-card-success .date-card {
    -ms-flex: .5;
    flex: .5;
    -webkit-flex: .5;
    text-align: right;
}

@media only screen and (max-width: 500px) {
    .popup-get-card-success .date-card {
        text-align: left;
    }
}

.popup-get-card-success .date-card b {
    display: none;
}

@media only screen and (max-width: 500px) {
    .popup-get-card-success .date-card b {
        display: inline-block;
    }
}

.popup-get-card-success .list-code ul {
    padding: 0;
}

.popup-get-card-success .list-code ul li {
    padding: 10px 0;
    border-top: 1px #e5e5e5 solid;
}

.popup-get-card-success .list-code .content-code {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

@media only screen and (max-width: 500px) {
    .popup-get-card-success .list-code .content-code {
        display: block;
        line-height: 24px;
    }
}

#contact-method {
    z-index: 1000;
    position: fixed;
    right: 16px;
    bottom: 64px;
    text-align:center;
}
    #contact-method > p {
        color: #FFFFFF;
        font-family: Lato;
        font-style: normal;
        font-weight: normal;
        font-size: 14px;
        line-height: 17px;
    }

    div.contact-info {
        color: #fff;
        min-width: 260px;
        font-size: 17px;
        padding: 20px 10px;
        position: absolute;
        right: 120%;
        top: -20px;
        -webkit-transform: translateY(-50%;
        );
        -moz-transform: translateY(-50%;
        );
        -ms-transform: translateY(-50%;
        );
        -o-transform: translateY(-50%;
        );
        transform: translateY(-50%;
        );
        z-index: -10;
        text-align: center;
    }

div.contact-info .contact-title {
    font-size: 15px;
}

#id-contact-phone {
    position: relative;
}

#id-contact-phone .btn-phone {
    padding-left: 30px;
    background: url(../images/btn-phone.png);
    background-repeat: no-repeat;
    background-position: left center;
    margin-bottom: 10px;
}

#id-contact-phone .btn-email {
    padding-left: 30px;
    background: url(../images/btn-email.png);
    background-repeat: no-repeat;
    background-position: left center;
}

.bg-blue {
    background: #0071ff;
    margin-bottom: 7px;
    border-radius: 50px;
}

.bg-blue a {
    width: 50px;
    height: 50px;
    display: block;
}

.bg-blue a#btn-contact-fb {
    background: url(../images/fb.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 25%;
}

.bg-blue a#btn-contact-phone {
    background: url(../images/phone.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 60%;
}

.bg-blue .contact-info {
    vertical-align: middle;
}

#div-contact .btn-contact {
    cursor: pointer;
}

#btn-contact-phone,
#btn-contact-mail,
#btn-contact-fb {
    position: relative;
}

// #contact-phone{
//     top:25%;
// }
// #contact-mail{
//     top:56%;
// }
.arrow_box {
    position: relative;
    background: #0071ff;
    border: 2px solid #0071ff;
    border-radius: 5px;
}

.arrow_box:after,
.arrow_box:before {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box:after {
    border-left-color: #0071ff;
    border-width: 10px;
    margin-top: -10px;
}

.arrow_box:before {
    border-left-color: #0071ff;
    border-width: 10px;
    margin-top: -10px;
}

#toTop {
    /*position: fixed;*/
    right: 0;
    bottom: 0;
    z-index: 100;
    width: 50px;
    margin-bottom:8px;
}

@media only screen and (max-width: 990px) {

    div.contact-info .contact-title {
        // font-size: 75%;
    }
    div.contact-info {
        // font-size: 110%;
        // padding: 2px 8px;
    }
}

.search-tool {
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    min-height: 79.5vh;
}

@media only screen and (max-width: 991px) {
    .search-tool {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        height: auto;
    }
}

@media only screen and (max-width: 991px) {
    .search-tool .search-area {
        -webkit-order: 1;
        -ms-flex-order: 1;
        order: 1;
    }
}

@media only screen and (max-width: 991px) {
    .search-tool .map {
        -webkit-order: 2;
        -ms-flex-order: 2;
        order: 2;
        padding: 0px;
    }
}

.search-area .select2-selection.select2-selection--single {
    padding: 5px 10px;
    height: auto;
}

.search-area .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
}

.search-area .select2-container--default .select2-selection--single .select2-selection__clear {
    color: #999;
}

// .content {
//   background-image: url('../images/doithuong/bg.jpg');
//   min-height: 90vh;
// }
@media only screen and (max-width: 1199px) {
    // .content {
    //     float: left;
    // }
}

.content .content-form {
    max-width: 500px;
    margin-top: 20vh;
}

@media only screen and (max-width: 991px),
only screen and (max-width: 1199px) {
    .content .content-form {
        margin: 5vh 10vw;
    }
}

@media only screen and (max-width: 500px) {
    .content .content-form {
        margin: 10vh 5vw;
    }
}

.content .content-form .icon-default {
    width: 105px;
    padding-top: 10px;
}

@media only screen and (max-width: 500px) {
    .content .content-form .icon-default {
        width: 69px;
    }
}

// .content .content-form .title-main {
//     line-height: 50px;
// }

@media only screen and (max-width: 500px) {
    .content .content-form .title-main {
        font-size: 32px;
    }
}

.list-messages {
    min-height: 800px;
}

@media only screen and (max-width: 991px),
only screen and (max-width: 500px) {
    .list-messages {
        min-height: auto;
    }
}

.list-messages .header-mess {
    border-bottom: 1px #e5e5e5 solid;
}

.list-messages .header-mess .title .icon-default {
    border: 1px #f7941e solid;
    padding: 10px 7px 5px 7px;
    width: 40px;
    border-radius: 30px;
}

.list-messages .header-mess .title .icon-default .svg path {
    fill: #f7941e;
}

.list-messages ul.list-messages-content {
    float: left;
    width: 100%;
    margin-bottom: 0;
}

.list-messages ul.list-messages-content li {
    float: left;
    width: 100%;
    border-bottom: 1px #e5e5e5 solid;
}

.list-messages ul.list-messages-content li .short-content,
.list-messages ul.list-messages-content li .short-title {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.list-messages ul.list-messages-content li.readed a {
    //color: #999;
}

.Checkbox {
    width: 20px;
    height: 20px;
    position: relative;
    float: left;
}

.Checkbox>* {
    position: absolute;
}

.Checkbox-visible {
    border: 1px solid gray;
    width: 16px;
    height: 16px;
    margin: 2px;
    background: #fff;
    border: 1px solid #dedede;
    border-radius: 3px;
}

.Checkbox>input {
    z-index: 1;
    opacity: 0;
    left: 50%;
    top: 50%;
    -webkit-transform: translatex(-50%) translatey(-50%);
    -ms-transform: translatex(-50%) translatey(-50%);
    transform: translatex(-50%) translatey(-50%);
    display: block;
    cursor: pointer;
    width: 20px;
    height: 20px;
}

.Checkbox>input:checked+.Checkbox-visible {
    background: #0071ff;
    border-color: #0071ff;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTQnIGhlaWdodD0nMTQnIHZpZXdCb3g9JzAgMCAxNCAxNCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48dGl0bGU+d2hpdGU8L3RpdGxlPjxwYXRoIGQ9J001LjM3OCAxMS4zN0wyIDcuNTlsMS40MzgtMS4yODZMNS4zNzQgOC40N2w1LjE4NS01Ljg0TDEyIDMuOTFsLTYuNjIyIDcuNDYnIGZpbGw9JyNmZmYnLz48L3N2Zz4=);
}

.Checkbox>input:hover+.Checkbox-visible {
    border-color: #cccccc;
}

.Checkbox>input:hover:checked+.Checkbox-visible {
    border-color: #0071ff;
}

.Checkbox>input:focus+.Checkbox-visible {
    border-color: #0071ff;
}

.list-article {
    padding-right: 15px;
}

@media only screen and (max-width: 500px) {
    .list-article {
        padding: 15px;
    }
}

.article {
    background-color: #fff !important;
    border-radius: 4px;
}

.list-article .article .article-content {
    padding: 11px 15px 15px;
}

.list-article .article .article-content .short-title {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.list-article .article .article-content .short-content {
    display: block;
    /* Fallback for non-webkit */
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 100px;
}

.article-event {

    overflow: hidden;
}

.article-event img {
    max-height: 185px;
}

.article-title {
    line-height: 40px;
}

.text-body-big {
    font-size: 100%;
}

.sidebar {
    float: left;
}

.sidebar .list-news {
    float: left;
}

.sidebar .list-news .title {
    float: left;
    border-bottom: 1px #e5e5e5 solid;
    padding-bottom: 10px;
}

.sidebar .list-news .title .icon-default {
    width: auto;
    padding: 9px 7px;
    border-radius: 100px;
}

.sidebar .list-news .title .icon-default img {
    width: 25px;
}

.sidebar .list-news .news-section {
    float: left;
    padding: 0;
}

.sidebar .list-news .news-section .news-article {
    float: left;
}

.sidebar .list-news .news-section .news-article .thumb-new img {
    width: 100%;
}

.sidebar .list-news .news-section .news-article .short-title {
    display: block;
    /* Fallback for non-webkit */
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.sidebar .list-news .news-section .news-article .short-content {
    display: block;
    /* Fallback for non-webkit */
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.images:before {
    padding-bottom: 60%;
}
.images {
    position: relative;
    z-index: 1;
}
.images:before {
    content: "";
    display: block
}
.imagesCrop, .imagesCrop0 {
    overflow: hidden;
    text-align: center;
    display: inline-block;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*================Trường hợp ảnh lọt trong khung================*/
.imagesCrop0 img {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}
.imagesCrop0 img {
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

/*transform phải viết thêm cho các trình duyệt cũ*/

/*================Trường hợp ảnh tràn lề khi chưa gắn class xác định ảnh dạng ngang hay dọc================*/
.imagesCrop img {
    max-width: 150%;
    max-height: 150%;
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}
.imagesCrop img {
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

/*Ảnh ngang (width > height) --> gắn height 100%, width sẽ bị lấp hai bên*/
.imagesCrop img.wide {
    height: 100%;
    max-width: none
}

/*Ảnh dọc (width < height) --> gắn width 100%, height sẽ bị lấp phần trên dưới*/
.imagesCrop img.tall {
    width: 100%;
    max-height: none
}
img.wide {
    height: 100%;
    max-width: none
}
img.tall {
    width: 100%;
    max-height: none
}
.pager{
    margin: 0;
}
.pager li>a{
    margin-top: 20px;
}
@media (max-width:767px) {
    .modal#cart-modal .modal-dialog .modal-content {
        padding: 5px;
    }
    .CartCell {
        //padding: 0 10px;
    }
    .CartCell .ProductInfo--totals {
        padding-right: 20px;
    }
}

@media only screen and (min-width:1222px){
    div.container{
        width:90%;
    }
    .header .header-menu-area {
        /*padding-left: 120px;*/
        display: flex;
        display: -webkit-flex;
        justify-content: flex-end;
        -webkit-justify-content: flex-end;
    }
    .header-user-info {
        /*margin-top: -7px;*/
        padding: 0 !important;
    }
    .icon_logined {
        margin-top: -7px;
        margin-left: 24px;
    }
}
@media only screen and (max-width:1199px) {
    .header .header-menu-area ul li a.user_login {
        width: 100px;
    }
}
    

    @media only screen and (min-width:601px) {
        .footer-privacy > .item-footer:not(:last-child) {
            padding-right: 98px;
        }
    }

    @media only screen and (max-width:600px) {
        .su-kien .item, .general_news div.item {
            padding-right: 0px;
            padding-left: 0px;
        }

        .container-fluid.general_news {
            padding: 0px;
        }

        .footer-privacy > .item-footer:not(:last-child) {
            padding-right: 32px;
            padding-bottom: 4px;
            padding-top: 4px;
        }
    }

    .box-search {
        background: #FFFFFF;
        box-shadow: 0px 8px 24px rgba(29, 32, 39, 0.08);
        border-radius: 4px;
        padding: 0 16px;
        height: 56px;
    }


        .box-search input {
            border: none;
            height: 100%;
            font-size: 16px;
            line-height: 19px;
            color: #6C738D;
        }

        .box-search .fa-search:before {
            color: #DADADA;
            font-size: 18px;
        }

    @media only screen and (min-width:600px) {
        .box-search {
            width: 570px;
        }
    }

    @media only screen and (max-width:599px) {
        .box-search {
            width: 300px;
        }
    }
    @media only screen and (min-width: 1200px){
        .text-menu{
            display: none !important;
        }
        .login-mobile{
            display:none !important;
        }
        
    }
    @media only screen and (max-width: 1199px){
        .login-pc {
            display: none !important;
        }
        .header .header-menu-area ul li a span{
            color: #1d243e;
            font-weight: bold;
        }
        .header .header-menu-area {
            padding-top: 0px !important;
        }
        .header-menu-area .text-body-big.top-menu.menu_left li {
            padding: 16px 22px;
            padding: 16px 0px;
            margin: 0px 22px;
            width: 226px;
        }
        .btn-login-mobile {
            border: 1px solid #388e3c;
            background: #388e3c;
            color: #fff !important;
            font-size: 16px !important;
            text-align: center;
            width: 100%;
            padding: 11px;
            border-radius: 4px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight:bold;
        }
        .btn-regis-mobile {
            margin-top:16px;
            border:1px solid #388e3c;
            background: #fff;
            color: #388e3c;
            font-size: 16px !important;
            text-align: center;
            width: 100%;
            padding: 11px;
            border-radius: 4px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight:bold;
        }
    }