@charset "UTF-8";

.page-body > .container {
  padding: 20px; }

@media only screen and (min-width: 769px) {

  .page-body > .container {
    padding: 55px; }

}
/*[START][80580][ADD] - [tien_anh] - [2021-02-26]*/
ul.note-small {
    list-style: none;
    padding: 0;
}

.note-small,ul.note-small li {
    font-size: 1.1rem;
    line-height: 1.5;
}

.align-c {
    text-align: center;
}

h4.point {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 50px;
}

h4.point::before {
    position: absolute;
    background: #21445b;
    color: #fff;
    content: '';
    border-radius: 20px;
    width: 40px;
    height: 40px;
    left: 0;
    line-height: 40px;
    font-size: 22px;
    display: inline-block;
    text-align: center;
}

h4.point--01::before {
    content: '1';
}

h4.point--02::before {
    content: '2';
}

h4.point--03::before {
    content: '3';
}

h4.point--04::before {
    content: '4';
}

@media only screen and (max-width: 768px) {
    h4.point--01::after,h4.point--03::after,h4.point--04::after {
    left: 16px;
    }
}

.rank_bnr {
    margin-bottom: 100px;
}

@media only screen and (max-width: 768px) {
    .rank_bnr {
    margin-bottom: 60px;
    }
}

.other-server-qa {
    margin-bottom: 40px;
}

@media only screen and (max-width: 768px) {
    .other-server-qa {
    margin-bottom: 20px;
    }
}

.other-server-q {
    color: #fff;
    background: #21445b;
    border-radius: 10px 10px 0 0;
    padding: 5px 20px;
    font-weight: bold;
}

.other-server-q p {
    position: relative;
    display: flex;
    align-items: center;
}

@media only screen and (max-width: 768px) {
    .other-server-q p {
    line-height: 1.5;
    }
}

.other-server-q p::before {
    content: '';
    display: inline-block;
    width: 20px;
    min-width: 20px;
    height: 25px;
    background: url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2222%22%20viewBox%3D%220%200%2018%2022%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M17.9%2022c-.814%200-1.619-.075-2.417-.224-.797-.149-1.57-.352-2.317-.609-.747-.257-1.464-.557-2.149-.901s-1.318-.704-1.9-1.081c-.581-.377-1.103-.762-1.563-1.155-.461-.394-.845-.772-1.152-1.137-.938-.232-1.8-.629-2.585-1.193-.785-.563-1.46-1.226-2.024-1.988-.565-.762-1.005-1.592-1.32-2.491-.315-.896-.473-1.796-.473-2.699%200-1.176.228-2.282.685-3.317.457-1.035%201.088-1.938%201.894-2.708.805-.77%201.756-1.379%202.853-1.826s2.287-.671%203.574-.671c1.279%200%202.466.224%203.563.671s2.047%201.056%202.853%201.826c.805.77%201.437%201.673%201.893%202.708.457%201.035.685%202.141.685%203.317%200%20.953-.17%201.89-.511%202.814-.341.924-.812%201.77-1.414%202.54-.602.77-1.32%201.431-2.155%201.981-.834.551-1.75.926-2.747%201.124.183.547.488%201.093.916%201.64.428.547.938%201.037%201.532%201.472.594.435%201.256.787%201.987%201.056.731.269%201.495.404%202.292.404v.447zm-8.894-5.59c.93-.099%201.758-.354%202.485-.764.727-.41%201.339-.952%201.837-1.628.498-.675.878-1.474%201.14-2.397.262-.923.392-1.957.392-3.099%200-1.134-.129-2.174-.386-3.118-.258-.944-.635-1.758-1.134-2.441-.498-.683-1.111-1.213-1.837-1.59-.727-.377-1.559-.565-2.497-.565-.963%200-1.81.188-2.541.565-.731.377-1.341.907-1.831%201.59s-.86%201.497-1.109%202.441-.373%201.983-.373%203.118c0%201.143.125%202.195.374%203.155.249.961.619%201.793%201.109%202.497s1.1%201.253%201.831%201.646c.73.393%201.577.59%202.54.59z%22%2F%3E%3C%2Fsvg%3E) no-repeat;
    background-size: 100%;
    margin-right: 15px;
}

.other-server-a {
    background: #fff;
    border-radius: 0 0 10px 10px;
    padding: 5px 20px;
    border: 1px solid #21445b;
}

.trouble-wrap {
    border: 1px solid #21445b;
    border-radius: 10px;
    margin: 40px 0 60px;
    padding: 0 30px 30px;
    position: relative;
}

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

.trouble-wrap::after {
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #fff;
    border-width: 25px;
    margin-left: -25px;
}

.trouble-wrap::before {
    border-color: rgba(33, 68, 91, 0);
    border-bottom-color: #21445b;
    border-width: 26px;
    margin-left: -26px;
}

@media only screen and (max-width: 768px) {
    .trouble-wrap {
    padding: 0 20px 20px;
    }
}

.flex--trouble {
    flex-direction: column;
}

p.server-ttl {
    margin: 10px 0;
    line-height: 1.5;
    font-weight: bold;
    color: #009e96;
}

.fz-large {
    font-size: 2rem;
}

.bold {
    color: #009e96;
}

.for-customer {
/*[START][92358][ADD] - [tien_anh] - [2021-08-06]*/
/*    background: #ecf0f3;*/
    background: #ecf0f3 !important;
/*[END][92358][ADD] - [tien_anh] - [2021-08-06]*/
    padding: 20px 30px;
    border-radius: 10px;
    margin: 60px 0;
}

@media only screen and (max-width: 768px) {
    .for-customer {
    margin: 30px 0;
    }
}

.user-voice {
    padding: 20px 0 30px;
    border-bottom: 5px dotted #fff;
}

.user-voice:last-child {
    border-bottom: none;
}

.user-voice h3 {
    font-size: 1.8rem;
}

.user-voice__inner {
    align-items: center;
    justify-content: center;
}

.user-voice__inner figure img {
    min-width: 60px;
    height: auto;
}

.user-voice__inner .comment {
    background: #fff;
    padding: 10px 20px;
    border-radius: 40px;
    position: relative;
    color: #21445b;
    font-weight: bold;
    line-height: 1.5;
}

.user-voice__inner .comment::after {
    content: '';
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 15px;
    border-color: transparent transparent transparent #ffffff;
}

@media only screen and (max-width: 768px) {
    .for-customer h2 {
    margin-bottom: 0;
    }
}

.precautions-inner {
    margin-bottom: 60px;
    align-items: center;
}

.precautions-inner figure {
    min-width: 120px;
    text-align: center;
    margin-right: 20px;
}

.precautions-inner .precautions-txt {
    width: calc(100% - 180px);
    border-left: 1px solid #21445b;
    padding-left: 20px;
}

.precautions-inner .precautions-txt p {
    margin: 0;
}

.precautions-txt p a.external {
    background: url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2228%22%20viewBox%3D%22-20.5%2047.5%2024%2028%22%20enable-background%3D%22new%20-20.5%2047.5%2024%2028%22%3E%3Cpath%20fill%3D%22%2321445a%22%20d%3D%22M3.5%2047.5h-7.987v2h4.564l-1.915%202h-18.662v20h20v-18.662l2-1.915v4.564h2v-7.987zm-6%2022h-16v-16.01h14.625l-7.294%207.294%201.385%201.385%207.284-7.294v14.625z%22%2F%3E%3C%2Fsvg%3E) 100% 50% / 15px auto no-repeat;
    display: inline-block;
}

.page-body a.external {
    background: url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2228%22%20viewBox%3D%22-20.5%2047.5%2024%2028%22%20enable-background%3D%22new%20-20.5%2047.5%2024%2028%22%3E%3Cpath%20fill%3D%22%2321445a%22%20d%3D%22M3.5%2047.5h-7.987v2h4.564l-1.915%202h-18.662v20h20v-18.662l2-1.915v4.564h2v-7.987zm-6%2022h-16v-16.01h14.625l-7.294%207.294%201.385%201.385%207.284-7.294v14.625z%22%2F%3E%3C%2Fsvg%3E) 100% 50% / 15px auto no-repeat;
    display: inline-block;
    padding-right: 20px;
}

@media only screen and (max-width: 768px) {
    .precautions-inner {
    flex-direction: column;
    margin-bottom: 40px;
    }

    .precautions-inner figure {
    margin-right: 0;
    margin-bottom: 15px;
    }

    .precautions-inner .precautions-txt {
    width: 100%;
    padding: 10px 0 0 0;
    border-left: none;
    border-top: 1px solid #21445b;
    }
}

.howto-list ol {
    counter-reset: my-counter;
    padding: 0;
}

.howto-list li {
    list-style: none;
    margin: 3.5em 0;
    position: relative;
    padding: 10px 0 10px 218px;
    background-color: #ecf0f3;
    border-radius: 10px;
}

.howto-list li:before {
    content: counter(my-counter);
    counter-increment: my-counter;
    background: linear-gradient(to right, #7eaed2, #96c1dd);
    color: #fff;
    position: absolute;
    top: -15%;
    left: 5%;
    line-height: 118px;
    text-align: center;
    height: 118px;
    width: 118px;
    border-radius: 50%;
    display: inline-block;
    font-size: 38px;
    font-weight: bold;
}

.howto-list li p {
    line-height: 2 !important;
    margin: 0 !important;
}

.howto-list .title {
    font-size: 2.2rem;
    color: #21445b;
    font-weight: bold;
}

@media screen and (max-width: 768px) {
    .howto-list .title {
    font-size: 18px;
    }
}

.howto-list .eleven:before {
    top: 4%;
}

@media screen and (max-width: 768px) {
    .howto-list ol {
    padding: 0 !important;
    }

    .howto-list li {
    margin: 1em 0;
    line-height: 80px;
    padding: 15px 10px 15px 76px;
    }

    .howto-list li:before {
    line-height: 50px;
    height: 50px;
    width: 50px;
    font-size: 22px;
    font-weight: bold;
    top: 10%;
    left: 4%;
    }

    .howto-list .eleven:before {
    top: 5%;
    }
}

.howto-list .list-add {
    padding: 26px 0 26px 218px;
}

@media screen and (max-width: 768px) {
    .howto-list .list-add {
    padding: 20px 10px 20px 76px;
    }
}

.flow-center {
    margin: 0 auto;
}

.flow-center ol li:after {
    background: none !important;
}

@media screen and (max-width: 768px) {
    .flow-center ol li:last-child {
    display: none !important;
    }
}

.howto-table table {
    box-sizing: border-box;
}

.howto-table table p {
    line-height: 1.5;
    margin: 0;
}

.howto-table table tr {
    background-color: #f3f1ef;
    border: 1px solid rgba(196, 175, 144, 0.5);
    border-top: none;
    border-right: none;
}

.howto-table table th {
    background-color: #c4af90;
    color: #fff;
    padding: 16px 30px;
    border-bottom: 1px solid #f3f1ef;
}

.howto-table table td {
    padding: 16px 30px;
}

.howto-table .border-r {
    border-right: 1px solid rgba(196, 175, 144, 0.5);
}

@media screen and (max-width: 768px) {
    .howto-table table p {
    margin: 0 0 0.5em;
    }

    .howto-table table th,
.howto-table table td {
    padding: 13px;
    }
}

.col-red {
    color: #c33749;
}
/*[END][80580][ADD] - [tien_anh] - [2021-02-26]*/
/*[START][82986][ADD] - [tien_anh] - [2021-03-16]*/
.important_txt {
    color: #ff0000;
    font-weight: bold;
    margin: 1em 0 0;
    text-align: center;
}

.page-body .about-faq .chat_btn {
    margin-bottom: 20px;
}

.chat_left_txt {
    text-align: left;
}

.chat_left_txt .notes_txt {
    font-size: 12px;
    font-size: 1.2rem;
}

.page-body .service_list {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.service_list li {
    list-style: none;
    width: 48%;
    margin: 0 4% 4% 0;
    padding: 15px 12px;
    display: inline-block;
    vertical-align: top;
    background-color: #e9ebee;
    border-radius: 10px;
}

.service_list li:nth-of-type(2n) {
    margin-right: 0;
}

.page-body .service_ico {
    width: 70px;
    margin: 0 auto 10px;
}

.page-body .service_head {
    font-size: 15px;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.6;
    margin: 0 0 10px;
    text-align: center;
}

.page-body .service_txt {
    height: 140px;
    margin: 0;
    line-height: 1.6;
}

.page-body .service_btn {
    margin: 0 auto 15px;
    line-height: 1.6;
}

.page-body .service_btn.last_btn {
    margin-bottom: 0;
}

.page-body .service_btn a {
    color: #fff;
    font-size: 12px;
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 34px;
    width: 100%;
    min-height: 34px;
    background-color: #21445b;
    text-decoration: none;
    text-align: center;
    border-radius: 20px;
    display: block;
}

.page-body .service_btn.line_2 a {
    line-height: 1.6;
    padding: 5px 0;
    border-radius: 30px;
}

.chatbot_box {
    padding: 20px;
    background-color: #e9ebee;
    border-radius: 10px 20px 25px;
}

.page-body .chatbot_box .service_txt {
    height: auto;
    margin-bottom: 15px;
}

.block-customer-center .business-time {
    justify-content: flex-start;
    text-align: center;
}

.block-customer-center .business-time dt {
    display: inline-block;
}

.block-customer-center .business-time dd {
    display: inline-block;
    margin-left: 0;
}

@media only screen and (min-width: 769px) {
    .chat_left_txt .notes_txt {
        font-size: 14px;
        font-size: 1.4rem;
    }
    .page-body .service_list {
        width: 792px;
        margin: 0 auto;
    }
    .service_list li {
        width: 376px;
        padding: 30px;
        margin: 0 20px 20px 0;
    }
    .service_list li:nth-of-type(2n),
    .service_list li:last-of-type {
        margin-right: 0;
    }
    .page-body .service_txt {
        height: 76px;
    }
    .page-body .service_btn a {
        font-size: 14px;
        font-size: 1.4rem;
    }
    .page-body .service_btn a:hover {
        opacity: 0.7;
    }
    .page-body .service_btn.line_2 a {
        padding: 0;
        line-height: 34px;
    }
    .chatbot_box {
        width: 376px;
        margin: 2em auto 0;
        padding: 30px;
    }
    .block-customer-center .tel {
        margin: 20px 0 0;
    }
}
/*[END][82986][ADD] - [tien_anh] - [2021-03-16]*/
/*[START][92358][ADD] - [tien_anh] - [2021-08-06]*/
.sp-only {
    display: none;
}
.note {
    font-size: 1.2rem;
}
.page-body .infograph {
    border-radius: 0;
}
.table-price {
    width: 762px!important;
    margin: 0 auto;
    border: 2px solid #29ADD5;
    color: #29ADD5;
    font-weight: bold;
    border-collapse: separate!important;
    border-spacing: 0;
    border-radius: 10px;
    overflow: hidden;
}
.table-price thead th,
.table-price tbody th,
.table-price tbody td {
    border-bottom: 2px solid #29ADD5;
    padding: 8px 16px;
}
.table-price thead th {
    background: #29ADD5;
    color: #fff;
}
.table-price tbody th {
    background: #E0F3FD;
    font-size: 1.6rem;
}
.table-price tbody td {
    text-align: center;
    background: #fff;
    font-size: 1.6rem;
}
.table-price tbody th + th,
.table-price tbody td {
    border-left: 2px solid #29ADD5;
}
.table-price tbody tr:last-child th,
.table-price tbody tr:last-child td {
    border-bottom: none;
}
.table-price tbody .zero {
    background-image: url(../img/pages/zero.png);
    background-position-x: 34%;
    background-position-y: 10px;
    background-repeat: no-repeat;
    background-size: 59px 59px;
}
.page-body .panel3 .panel-body {
    padding: 0;
    height: auto;
    text-align: center;
    padding: 15px 5px 20px;
}
.page-body .panel3 .panel-body h4 {
    margin: 0;
}
.page-body p.img_com_txt {
    font-size: 1.4rem;
    text-align: center;
    margin: 10px 0 0;
}

.unordered-list li {
    text-align: left;
}
@media only screen and (max-width: 768px) {
    .sp-only {
        display: block;
    }
    .table-price {
        width: 100%!important;
    }
    .table-price thead th,
    .table-price tbody th,
    .table-price tbody td {
        padding: 4px 0;
    }
    .table-price thead th {
        font-size: 1.2rem;
    }
    .table-price tbody td,
    .table-price tbody th {
        font-size: 1.2rem;
    }
    .table-price tbody .fee {
        font-size: 1.4rem;
    }
    .table-price tbody .zero {
        background-position-x: 2.5%;
        background-position-y: 5px;
        background-size: 40px 40px;
    }
    .sp-col2 {
        display: flex;
        -webkit-justify-content: space-around;
        justify-content: space-around;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .page-body .panels > :not(:first-child) {
        margin-top: 0px;
    }
    .sp-col2 .col {
        width: 45%;
    }
    .page-body .panel3 .panel-body h4 {
        margin: 5px 0 0 0;
        font-size: 1.4rem;
        height: 50px;
        display: table-cell;
        vertical-align: middle;
    }
    .page-body p.img_com_txt {
        font-size: 1.2rem;
    }
}
/*[END][92358][ADD] - [tien_anh] - [2021-08-06]*/