@font-face {
    font-family: fontSarabunSemiBold;
    src: url(../font/Sarabun-SemiBold.ttf);
}

@font-face {
    font-family: fontSarabunRegular;
    src: url(../font/Sarabun-Regular.ttf);
}

@font-face {
    font-family: fontSourcesansproBold;
    src: url(../font/source-sans-pro.bold.ttf);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    font-size: 28px;
    line-height: 42px;
    font-family: 'fontSarabunSemiBold', sans-serif;
}

.clear-fix {
    clear: both;
}

a {
    text-decoration: none;
}

p {
    font-family: 'fontSarabunRegular', sans-serif;
}

h1 {
    font-family: 'fontSarabunSemiBold', sans-serif;
    font-size: 40px;
    text-align: center;
    line-height: 55px;
}

h2 {
    font-family: 'fontSarabunSemiBold', sans-serif;
    font-size: 34px;
}

h3 {
    font-family: 'fontSarabunSemiBold', sans-serif;
    font-size: 32px;
    text-align: center;
}

h1, h2{
    text-transform: uppercase;
}

.bt a {
    font-family: 'fontSarabunSemiBold', sans-serif;
    font-size: 28px;
}

img {
    max-width: 100%;
    vertical-align: middle;
}

ul li {
    list-style: none;
}

.light {
    text-align: center;
    margin-bottom: 50px;
}

#wrapper {
    width: 720px;
    margin: 0 auto;
}

/*banner ảnh*/

#banner {
    background-image: url("../images/webviewNew/banner_viettel.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 1273px;
    position: relative;
}

#logo .box-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 40px;
}

#logo .item:first-child {
    color: #9D8DCE;
    text-transform: uppercase;
    display: flex;
    align-items: center;
}

#logo .item:first-child img {
    width: 49px;
}

#logo .item:first-child span {
    font-size: 31px;
    margin-left: 10px;
}

#btn-buy {
    position: absolute;
    bottom: 10%;
    text-align: center;
    width: 100%;
}

#btn-buy a {
    color: #fff;
    background-image: linear-gradient(#F15144, #FC1712);
    padding: 12px 110px;
    border-radius: 25px;
    text-transform: uppercase;
}

#btn-buy a:hover {
    background-image: linear-gradient(to right, #1D7FEC, #38C06B);
}

.alert {
    position: relative;
    padding: .3rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    font-size: 0.8em;
}

.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.bd-example>.alert+.alert, .bd-example>.nav+.nav, .bd-example>.navbar+.navbar, .bd-example>.progress+.btn, .bd-example>.progress+.progress {
    margin-top: 1rem;
}

/*Nội dung elsa pro có gì*/

#elsapro {
    padding: 0 35px;
}

#elsapro .item {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

#elsapro .item img {
    margin-right: 15px;
}

/*Ưu đã dành cho KH*/

#voucher {
    background: #F4F9FF;
    padding: 65px 0 80px;
    text-align: center;
    display: none;
}

#voucher h1 {
    font-size: 36px;
    line-height: 48px;
    margin-bottom: 30px;
}

.only {
    font-family: 'fontSarabunSemiBold', sans-serif;
    font-size: 28px;
    margin-bottom: 40px;
    font-weight: bold;
}

#voucher .box-voucher {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#voucher .box-voucher .item:first-child .box{
    background-image: url("../images/webviewNew/voucher1.png");
    background-repeat: no-repeat;
    background-position: center;
    min-height: 160px;
    position: relative;
}

#voucher .box-voucher .item:last-child .box{
    background-image: url("../images/webviewNew/voucher2.png");
    background-repeat: no-repeat;
    background-position: center;
    min-height: 160px;
    position: relative;
}

#voucher .box-voucher .item {
    flex-basis: 50%;
}

#voucher .box-voucher .item ul {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#voucher .box-voucher .item ul li span {
    color: #EC3C3A;
    font-weight: bold;
}

#voucher .box-voucher .item ul li:last-child {
    color: #1A7AF8;
    font-weight: bold;
}

#voucher .text {
    font-family: 'fontSarabunSemiBold', sans-serif;
    font-size: 28px;
    padding: 0 55px;
    line-height: 32px
}

/*Đồng hồ đếm ngược*/

.countdown-time {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 82%;
    text-align: center;
    margin: auto;
    padding-bottom: 65px;
}

.countdown-time .item {
    flex-basis: 13%;
}

.countdown-time .item p {
    border-top: 3px solid #3AC465;
    border-bottom: 3px solid #1A79FB;
    background-position: 0 0, 100% 0;
    background-repeat: no-repeat;
    -webkit-background-size: 3px 100%;
    -moz-background-size: 3px 100%;
    background-size: 3px 100%;
    background-image: -webkit-linear-gradient(top, #3AC465 0%, #1A79FB 100%), -webkit-linear-gradient(top, #3AC465 0%, #1A79FB 100%);
    background-image: -moz-linear-gradient(top, #3AC465 0%, #1A79FB 100%), -moz-linear-gradient(top, #3AC465 0%, #1A79FB 100%);
    background-image: -o-linear-gradient(top, #3AC465 0%, #1A79FB 100%), -o-linear-gradient(top, #3AC465 0%, #1A79FB 100%);
    background-image: linear-gradient(to bottom, #3AC465 0%, #1A79FB 100%), linear-gradient(to bottom, #3AC465 0%, #1A79FB 100%);
    border-radius: 8px;
    margin-bottom: 15px;
    padding: 18px;
    font-size: 32px;
}

.countdown-time .item span {
    margin-top: 15px;
    text-transform: capitalize;
}

/*Danh sách gói elsa*/

.info-packet{
    padding: 75px 20px;
}

.info-packet .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #F8F8F8;
    padding: 30px 20px;
    box-shadow: 0 3px 11px 3px #f0f0f0;
    border-radius: 5px;
    margin-bottom: 60px;
    border: 1px solid #f0f0f0;
    position: relative;
}

.info-packet .item:first-child {
    background-image: linear-gradient(#E2FFED, #C2E8FD);
}

/* .info-packet .item:last-child {
    background-image: linear-gradient(#E2FFED, #C2E8FD);
} */

.info-packet .item .info h2 {
    margin-bottom: 10px;
    text-transform: uppercase;
}

.info-packet .item .info p {
    font-family: 'fontSarabunSemiBold', sans-serif;
    font-size: 43px;
    color: #1D7BFA;
    margin-top: 15px;
}

.info-packet .item .info del {
    color: #666666;
    font-family: 'fontSarabunRegular', sans-serif;
    font-size: 28px;
}

.info-packet .bt {
    padding: 15px 40px;
    border-radius: 28px;
    background-image: linear-gradient(to right, #1D7FEC, #38C06B);
    cursor: pointer;
    outline: none;
}

.info-packet .bt:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.info-packet .bt a {
    font-family: 'fontSarabunSemiBold', sans-serif;
    font-size: 28px;
    color: #fff;
    text-transform: uppercase;
    display: inline-block;
    width: 100%;
    outline: none;
}

.discount {
    font-size: 24px !important;
    color: #E6263E !important;
}

.best-seller, .big-sale {
    display: none;
    position: absolute;
    top: -45px;
    right: 0;
}

/*Nội dung giới thiệu phần phát âm tiếng anh*/

#frame {
    background-image: url("../images/webviewNew/bk_frame.png");
    background-repeat: no-repeat;
    background-position: center;
    color: #fff;
    padding: 55px 0 75px;
}

#frame h1 {
    padding: 0 90px;
}

#frame ul li {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
}

#frame ul li:last-child {
    margin-bottom: 0;
}

#frame ul li:first-child {
    background-image: url("../images/webviewNew/01.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 165px;
    position: relative;
}

#frame ul li:nth-child(2) {
    background-image: url("../images/webviewNew/02.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 165px;
}

#frame ul li:nth-child(3) {
    background-image: url("../images/webviewNew/03.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 165px;
}

#frame ul li:last-child {
    background-image: url("../images/webviewNew/04.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 165px;
}

#frame ul li .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 80%;
}

#frame ul li p {
    display: flex;
    flex-direction: column;
    padding-right: 50px;
}

#frame ul li p span {
    text-align: justify;
}

#frame ul li img {
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 2px 2px 5px #999;
    width: 120px;
    height: 120px;
    object-fit: scale-down;
    margin-right: 20px;
}

.mr30 {
    margin-right: 30px;
}

/*Nói chuyện như người bản xứ*/

#talk {
    background: #F4F9FF;
    padding: 80px 35px;
}

#talk .item {
    display: flex;
    align-items: baseline;
    margin-bottom: 30px;
}

#talk .item img {
    margin-right: 15px;
}

#talk .img {
    margin-top: 80px;
    text-align: center;
}

/*Chỉ 10 phút mỗi ngày*/

#talk2 {
    padding: 80px 35px;
}

#talk2 h1 {
    padding: 0 68px;
}

#talk2 .item {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}

#talk2 .item img {
    margin-right: 20px;
    /*width: 44px;*/
    /*height: 59px;*/
    /*object-fit: scale-down;*/
}

#talk2 .item:nth-child(2) img {
    margin-right: 38px;
}

#talk2 .img {
    margin-top: 80px;
    text-align: center;
}

/*Câu trả lời thực tế nhất*/

#introduce {
    padding: 80px 0;
}

#introduce .item {
    display: flex;
    margin-bottom: 40px;
}

#introduce .item img {
    width: 169px;
    height: 169px;
    object-fit: scale-down;
}

#introduce .item .text {
    text-align: justify;
    margin-left: 50px;
    padding-top: 20px;
}

#introduce .item h2 {
    margin-bottom: 15px;
}

#introduce .item .text p {
    font-family: 'fontSarabunRegular', sans-serif;
}

#introduce .item .text p span {
    text-transform: uppercase;
}

/*Kết quả sau khi học*/

#result {
    background-image: url("../images/webviewNew/rs_frame.png");
    background-repeat: no-repeat;
    background-position: center;
    min-height: 948px;
    padding: 75px 30px 90px;
    color: #fff;
}

#result h1 {
    font-size: 34px;
}

#result .item {
    margin-bottom: 60px;
}

#result .item:last-child {
    margin-bottom: 0;
}

#result .item .box {
    background: #fff;
    height: 90px;
    border-radius: 45px;
    margin-top: 20px;
    overflow: hidden;
}

#result .item .box .move {
    background-image: linear-gradient(to right, #4979F3 0%, #78C36C 100%);
    height: 90px;
    border-radius: 45px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 0;
}

#result .item .box .move span {
    font-family: 'fontSourcesansproBold', sans-serif;
    font-size: 36px;
    font-weight: bold;
    padding-right: 40px;
}

/*slick-slider*/

/*.slick-dots li button:before {*/
    /*color: #3A64B1 !important;*/
    /*font-size: 18px !important;*/
/*}*/

/*.slick-dots li.slick-active button:before {*/
    /*color: #59BEFF !important;*/
/*}*/

/*.slick-dots {*/
    /*bottom: 0 !important;*/
/*}*/

/*.slick-dotted.slick-slider {*/
    /*margin-bottom: 0 !important;*/
/*}*/

/*Người dùng*/

#users {
    padding: 80px 0 90px;
}

.users-box {
    background-image: url("../images/webviewNew/900.png");
    background-repeat: no-repeat;
    background-position: center;
    width: 86%;
    margin: 0 auto;
    position: relative;
    border-radius: 50px;
}

#users .lazy {
    color: #fff;
}

#users .lazy .box-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: row wrap;
    padding: 65px 70px 90px;
}

#users .lazy .box-content .text {
    text-align: justify;
}

#users .lazy .box-content .text .box-vhm {
    display: flex;
    align-items: baseline;
    margin-bottom: 65px;
}

#users .lazy .box-content .text h4 {
    margin-left: 15px;
}

#users .lazy .user {
    background: #EDEDED;
    display: flex;
    align-items: center;
    padding: 5px 30px;
    border-radius: 0 0 44px 44px;
}

#users .lazy .user p:first-child {
    color: #000;
    font-weight: bold;
    font-family: 'fontSourcesansproBold', sans-serif;
    font-size: 34px;
}

#users .lazy .user p:last-child {
    color: #737373;
    font-size: 24px;
}

/*Slick slider*/

#nav_left {
    position: absolute;
    top: 50%;
    left: 2%;
    transform: translateY(-50%);
    cursor: pointer;
    height: 50px;
    width: 31px;
    background: url(../images/webviewNew/slick_nav_left.png) no-repeat !important;
    z-index: 10;
}


#nav_right {
    position: absolute;
    top: 50%;
    right: 2%;
    transform: translateY(-50%);
    cursor: pointer;
    height: 50px;
    width: 31px;
    background: url(../images/webviewNew/slick_nav_right.png) no-repeat !important;
    z-index: 10;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

#video {
    text-align: center;
}

.box-time {
    padding-top: 65px;
}

#box-time2 {
    padding-top: 0;
}

#info-packet2 {
    padding: 60px 0 60px !important;
}

/*Đăng ký nhận bản tin mới*/

#register {
    background-image: url("../images/webviewNew/banner_dk.png");
    background-repeat: no-repeat;
    background-position: center;
    min-height: 762px;
    position: relative;
    color: #fff;
    padding: 75px 60px 0;
}

#register .text {
    text-align: center;
    margin-bottom: 40px;
    padding: 0 30px;
}

#register .box {
    padding: 0 40px;
}

#register .content .item {
    margin-bottom: 5px;
}

#register .content .item label {
    display: inline-block;
    margin-bottom: 8px;
}

#register .content .item input {
    outline: none;
    padding: 10px;
    width: 100%;
    border-radius: 8px;
    border: 1px solid #dedede;
    margin-bottom: 20px;
    background: #f2f2f2;
    font-size: 26px;
}

#register .content .item input:focus {
    border: 1px solid #36BC74;
}

#register .content .btn-register {
    text-align: center;
    width: 100%;
    margin-top: 30px;
}

#register .content .btn-register a {
    font-family: 'fontSarabunSemiBold', sans-serif;
    color: #fff;
    background-image: linear-gradient(to right, #1D7FEC, #38C06B);
    padding: 10px 70px;
    border-radius: 25px;
    text-transform: uppercase;
}

#register .content .btn-register a:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

/*footer*/

#footer {
    background-image: linear-gradient(#333333, #2C2C2C, #202020, #1C1C1C);
    padding: 30px;
}

#footer .content {
    padding: 30px 0;
}

#footer .content .items {
    margin-bottom: 20px;
}

#footer .content .items .icon {
    border-radius: 5px;
    display: inline-block;
    width: 27px;
    background: #fff;
    text-align: center;
    margin-right: 5px;
    color: #19173F;
    position: relative;
    height: 25px;
    top: 2px;
}

#footer .content .items span {
    color: #fff;
    font-family: 'myRobotoRegularFont', sans-serif;
    font-size: 27px;
}

#footer .content .items .icon i {
    font-size: 18px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*Form email*/

.popup-email {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    z-index: 100;
    overflow-y: auto;
    overflow-x: hidden;
    background: rgba(62,64,65,.5);
    display: none;
}

.popup-email .email-form {
    top: 0;
    width: 100%;
    height: 100%;
}

.popup-email .email-form .popup {
    width: 600px;
    margin: 0 auto;
    box-shadow: 0 8px 6px -6px black;
    text-align: center;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 40px 40px 50px;
    border-radius: 15px;
}

.popup h1 {
    font-size: 35px;
    line-height: 22px;
}

.popup .light {
    margin-bottom: 30px;
}

.popup .exit {
    position: absolute;
    top: -20px;
    right: -9px;
    cursor: pointer;
}

.popup .item input {
    outline: 0;
    padding: 8px 10px;
    width: 100%;
    border-radius: 4px;
    border: 2px solid #ccc;
    margin-bottom: 20px;
}

.popup .item input:focus {
    border: 2px solid #1977FE;
}

.popup .item input::placeholder {
    color: #D0D0D0;
}

.popup .content .box {
    text-align: left;
}

.popup .content .box label {
    display: inline-block;
    margin-bottom: 2px;
}

.popup .btn-submit {
    text-align: center;
    width: 100%;
    margin-top: 30px;
}

.popup .btn-submit a {
    font-family: 'fontSarabunSemiBold', sans-serif;
    color: #fff;
    background-image: linear-gradient(to right, #1D7FEC, #38C06B);
    padding: 12px 70px;
    border-radius: 25px;
    text-transform: uppercase;
}

.popup .btn-submit a:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.text-center{
    text-align: center;
    text-decoration: underline;
    font-style: italic;
}

@media only screen and (max-width: 720px) {
    #wrapper {
        width: 100%;
    }

    * {
        font-size: 14px;
        line-height: 22px;
    }

    h1, #voucher h1, .countdown-time .item p, #result h1 {
        font-size: 24px;
        line-height: 32px;
        margin-bottom: 15px;
    }

    h2 {
        font-size: 18px;
        line-height: 28px;
    }

    .countdown-time .item p {
        font-size: 24px;
    }

    #voucher h3 {
        font-size: 18px;
    }

    .only {
        font-size: 18px;
        margin-bottom: 15px;
    }

    #voucher .text, .info-packet .item .info del, .info-packet .bt a  {
        font-size: 14px;
        line-height: 22px;
    }

    .discount {
        font-size: 14px !important;
    }

    .info-packet .item .info p {
        font-size: 24px;
    }

    .light {
        margin-bottom: 30px;
    }

    #voucher .box-voucher .item .box {
        background-size: contain;
    }

    #voucher .box-voucher .item .box ul li, #voucher .box-voucher .item ul li span{
        font-size: 21px;
    }

    #voucher .box-voucher .item .box ul li:first-child {
        margin-bottom: 10px;
    }

    #voucher .box-voucher .item:last-child .box, #voucher .box-voucher .item:first-child .box {
        min-height: 120px;
    }

    .countdown-time {
        padding-bottom: 30px;
        width: 65%;
    }

    .countdown-time .item p {
        padding: 10px;
    }

    #voucher, #frame {
        padding: 30px;
    }

    .info-packet {
        padding: 30px 15px 0;
    }

    .best-seller, .big-sale {
        top: -20px;
        width: 50px;
    }

    #frame ul li {
        margin-bottom: 30px;
    }

    .info-packet .item .info p {
        margin-top: 7px;
    }

    .info-packet .item .info h2 {
        margin-bottom: 0;
    }

    .info-packet .item {
        padding: 20px;
        margin-bottom: 30px;
    }

    #frame ul li img {
        width: 110px;
        height: 110px;
    }

    #frame ul li {
        min-height: 130px !important;
    }

    #frame ul li p span {
        font-size: 16px;
    }

    #result .item .box .move span {
        font-size: 24px;
    }

    /*#frame ul li p span:first-child {*/
        /*margin-right: 5px;*/
    /*}*/

    .mr30 {
        margin-right: 140px;
    }

    #introduce .item img {
        width: 80px;
        height: 80px;
    }

    #introduce {
        padding: 30px;
    }

    #introduce .item .text {
        margin-left: 15px;
        padding-top: 15px;
    }

    #introduce .item h2 {
        margin-bottom: 5px;
    }

    #introduce .item:last-child {
        margin-bottom: 0;
    }

    #wrapper h1 {
        padding: 0 90px !important;
    }

    #result .item .box, #result .item .box .move {
        height: 45px;
    }

    #result .item {
        margin-bottom: 30px;
    }

    #result {
        padding: 30px;
        min-height: 530px;
    }

    #result .item p {
        font-size: 16px;
    }

    #users {
        padding: 50px 15px;
    }

    #users .lazy .box-content .text .box-vhm img {
        width: 25px;
    }

    #users .lazy .box-content .text h4 {
        margin-left: 7px;
    }

    #users .lazy .box-content .text .box-vhm {
        margin-bottom: 20px;
    }

    #users .lazy .user p:first-child {
        font-size: 21px;
    }

    #users .lazy .user p:last-child {
        font-size: 14px;
    }

    #users .lazy .user img {
        width: 110px;
    }

    .users-box {
        width: 100%;
        background-size: cover;
    }

    #video {
        padding: 0 15px;
    }

    #video iframe {
        width: 100%;
    }

    .box-time {
        padding-top: 30px;
    }

    .box-time .countdown-time{
        padding-bottom: 0;
    }

    #info-packet2 {
        padding: 30px 15px 0 !important;
    }

    #footer .content .items span {
        font-size: 14px;
    }

    #footer .content .items .icon i {
        font-size: 12px;
    }

    #footer .content .items .icon {
        width: 20px;
        height: 18px;
    }

    #footer .content {
        padding: 30px 0 0;
    }

    .info-packet .bt {
        padding: 12px 35px;
    }

    #footer .content .items {
        margin-bottom: 15px;
    }

    #elsapro {
        padding: 30px 15px 0;
    }

    #elsapro .item img, #talk .item img {
        width: 20px;
        margin-right: 8px;
    }

    #talk, #talk2 {
        padding: 45px 15px;
    }

    #talk2 .img {
        margin-top: 0;
    }

    #register {
        padding: 30px 15px 0;
        min-height: 450px;
    }

    #register .content .item input {
        font-size: 14px;
    }

    #register .text {
        margin-bottom: 20px;
    }

    #register .box {
        padding: 0 130px;
    }

    #register .content .item {
        margin-bottom: 0;
    }

    #register .content .btn-register {
        margin-top: 20px;
    }

    #register .content .btn-register a {
        padding: 10px 60px;
    }

    #frame ul li img {
        width: 90px;
        height: 90px;
    }

    #frame ul li .item {
        width: 75%;
    }

    .popup-email .email-form .popup {
        width: 500px;
    }

    .popup .exit {
        width: 40px;
        right: -5px;
    }

    .popup .btn-submit a {
        padding: 12px 55px;
    }

    .popup h1 {
        font-size: 24px;
        margin-bottom: 0;
    }

    .popup .item input {
        margin-bottom: 15px;
    }

    .popup .btn-submit {
        margin-top: 20px;
    }
}

@media only screen and (max-width: 640px) {
    #banner {
        min-height: 990px;
    }

    #wrapper h1 {
        padding: 0 !important;
    }

    #voucher .text {
        padding: 0;
    }

    #voucher, #frame {
        padding: 30px 15px;
    }

    #introduce {
        padding: 30px 15px;
    }

    #result {
        padding: 50px 15px !important;
    }

    .mr30 {
        margin-right: 85px;
    }

    #footer {
        padding: 15px;
    }

    #footer .logo-f img {
        width: 120px;
    }

    #register .text, #register .box {
        padding: 0;
    }

    #register .content {
        padding: 0 20px;
    }

    #talk .item, #elsapro .item {
        margin-bottom: 20px;
    }

    #talk2 .item {
        margin-bottom: 20px;
    }

    #talk2 .item img {
        width: 50px;
        margin-right: 15px;
    }

    #talk2 .item:nth-child(2) img {
        width: 35px;
    }

    #talk2 .item:nth-child(2) img {
        margin-right: 31px;
    }
}

@media only screen and (max-width: 576px) {
    #banner {
        min-height: 950px;
    }

    #logo .item:first-child img {
        width: 40px;
    }

    #logo .item:first-child span {
        font-size: 28px;
        margin-left: 8px;
    }

    #logo .item:last-child img {
        width: 85px;
    }

    #logo .box-item {
        padding: 15px;
    }

    h1, #voucher h1, .countdown-time .item p, #result h1 {
        font-size: 21px;
        line-height: 32px;
        margin-bottom: 15px;
    }

    #voucher .box-voucher .item .box ul li, #voucher .box-voucher .item ul li span {
        font-size: 18px;
    }

    .countdown-time .item {
        flex-basis: 16%;
    }

    #introduce .item {
        margin-bottom: 15px;
    }

    .light {
        margin-bottom: 15px;
    }

    #frame ul li {
        min-height: 100px !important;
    }

    #frame ul li img {
        width: 80px;
        height: 80px;
    }

    #frame ul li p span {
        font-size: 14px;
    }

    #frame h1 {
        padding: 0 60px !important;
    }

    .info-packet .item {
        margin-bottom: 20px;
    }

    .best-seller, .big-sale {
        top: -15px;
        width: 45px;
    }

    h1, #voucher h1, .countdown-time .item p, #result h1 {
        margin-bottom: 0;
    }

    #voucher h1 {
        margin-bottom: 15px;
    }

    #voucher .box-voucher {
        justify-content: space-evenly;
    }

    #voucher .box-voucher .item {
        flex-basis: 35%;
    }

    #frame ul li img {
        margin-right: 15px;
    }

    .popup-email .email-form .popup {
        width: 93%
    }

    .popup-email .email-form .popup {
        padding: 30px 15px 50px;
    }
}

@media only screen and (max-width: 480px) {
    #banner {
        min-height: 820px;
    }

    .info-packet .item .info p {
        font-size: 21px;
    }

    h2 {
        font-size: 16px;
    }

    .info-packet .item .info p {
        margin-top: 5px;
    }

    .mr30 {
        margin-right: 50px;
    }

    #video iframe {
        height: 280px;
    }

    #voucher .box-voucher .item:last-child .box, #voucher .box-voucher .item:first-child .box {
        width: 190px;
    }

    #voucher .box-voucher .item .box ul li, #voucher .box-voucher .item ul li span {
        font-size: 16px;
    }

    #voucher .box-voucher .item .box ul li:first-child {
        margin-bottom: 3px;
    }

    #wrapper h1 {
        padding: 0 !important;
    }

    .countdown-time {
        padding-bottom: 30px;
        width: 80%;
    }

    #users .lazy .user .info-user{
        margin-left: 8px;
    }

    #users .lazy .user p:first-child {
        font-size: 18px;
    }

    #voucher, #frame {
        padding: 45px 5px;
    }

    #users .lazy .user img {
        width: 95px;
    }

    #users .lazy .box-content {
        padding: 35px 70px 30px;
    }

    #result {
        min-height: 450px;
    }

    #result .item .box, #result .item .box .move {
        height: 40px;
    }

    #result .item .box {
        border-radius: 40px;
    }

    #result .item {
        margin-bottom: 20px;
    }

    #voucher .box-voucher .item:last-child .box, #voucher .box-voucher .item:first-child .box {
        width: 180px;
    }

    .only {
        margin-bottom: 5px;
    }

    #frame ul li p {
        padding-right: 35px;
    }
}

@media only screen and (max-width: 420px) {
    #banner {
        min-height: 720px;
    }

    .info-packet .bt {
        padding: 10px 15px;
    }

    #voucher .box-voucher .item:last-child .box, #voucher .box-voucher .item:first-child .box {
        min-height: 100px;
    }

    #frame ul li img {
        width: 70px;
        height: 70px;
    }

    .mr30 {
        margin-right: 20px;
    }

    #frame ul li {
        margin-bottom: 15px;
    }

    #voucher .box-voucher {
        justify-content: space-around;
    }

    #voucher .box-voucher .item:last-child .box, #voucher .box-voucher .item:first-child .box {
        width: 176px;
    }

    .countdown-time .item {
        flex-basis: 18%;
    }

    #register .content {
        padding: 0;
    }

    #frame ul li .item {
        width: 80%;
    }

    #frame ul li {
        min-height: 93px !important;
    }
}

@media only screen and (max-width: 375px) {
    .countdown-time .item {
        flex-basis: 19%;
    }

    .countdown-time {
        padding-bottom: 30px;
        width: 86%;
    }

    #users .lazy .box-content {
        padding: 35px 60px 50px;
    }

    #frame ul li {
        min-height: 88px !important;
    }

    #frame ul li p {
        padding-right: 15px;
    }
}

@media only screen and (max-width: 360px) {
    #banner {
        min-height: 650px;
    }

    #voucher .box-voucher .item:last-child .box, #voucher .box-voucher .item:first-child .box {
        width: 160px;
    }

    #voucher .box-voucher .item .box ul li, #voucher .box-voucher .item ul li span {
        font-size: 14px;
    }

    #voucher .box-voucher .item .box ul li:first-child {
        margin-bottom: 0;
    }

    #voucher .text {
        padding: 0 25px;
    }

    .info-packet .bt {
        padding: 8px 12px;
    }

    .info-packet .item .info p {
        font-size: 18px;
    }

    #frame ul li {
        min-height: 88px !important;
    }
}

@media only screen and (max-width: 335px) {
    #banner {
        min-height: 580px;
    }

    #users .lazy .box-content {
        padding: 35px 57px 30px;
    }

    .info-packet .item {
        padding: 10px;
    }

    .info-packet .bt {
        padding: 6px;
    }

    #voucher .box-voucher .item:last-child .box, #voucher .box-voucher .item:first-child .box {
        width: 150px;
    }

    .countdown-time {
        padding-bottom: 30px;
        width: 92%;
    }

    .countdown-time .item {
        flex-basis: 21%;
    }

    #frame ul li .item {
        width: 90%;
    }

    #frame ul li img {
        margin-right: 8px;
    }

    #frame ul li {
        min-height: 80px !important;
    }

    #frame ul li img {
        width: 60px;
        height: 60px;
    }

    #frame ul li p {
        padding-right: 18px;
    }
}