/* -------------------------------------------------------------------------- */
/*                                  SONNT CSS                                 */
/* -------------------------------------------------------------------------- */

:root {
    --wrapper: 1440px; /** 1440px */
    --container: 1216px; /** 1216px */
    --bg: #056cf2;
    --bg-hover: #004cff;
    --c: #056cf2;
    --c-hover: #056cf2;
    --rad: 5px;
    --rad8: 8px;
    --c-dark: #1b1d29;
    --bg-dark: #1b1d29;
    --bg-light: #f5f7fa;
    --bg-gray: #f2f4f7;
    --bg-btn: #101828;
    --c-heading: #101828;
    --p: 32px;
    --p2: 16px;
    --p4: 8px;
    --a-hover: gold;
    --a-btn-hover: #fff;
    --bg-btn-hover: #004cff;
    --border-btn-hover: #004cff;
    --font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
        sans-serif;
    --font2: "Roboto", "Inter", system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
        "Helvetica Neue", sans-serif;
    --c1: #ffd121;
    --c2: gold;
    --c3: gold;
    --c4: gold;
    --bg1: #ffd121;
    --bg2: #30cd60;
    --bg3: #f83142;
    --bg4: gold;
    --bg1-hover: #f0c002;
    --bg3-hover: #df2f3e;
    --tr-hover: #e1f0ff8a;
}
.bg1 {
    background-color: var(--bg1) !important;
    border-color: var(--bg1) !important;
}
.bg1:hover {
    background-color: var(--bg1-hover) !important;
    border-color: var(--bg1-hover) !important;
}
.bg {
    background-color: var(--bg) !important;
}
.bg-white {
    background-color: #fff;
}
.bg-black {
    background-color: #000;
}
.center {
    text-align: center;
}
.p-16 {
    padding: 16px;
}
.rad8 {
    border-radius: var(--rad8);
}
.px {
    padding-left: 32px;
    padding-right: 32px;
}
.py {
    padding-top: 32px;
    padding-bottom: 32px;
}
.main-bg {
    background-color: var(--bg);
    color: #fff;
}
.main-bg:hover {
    background-color: var(--bg-hover);
}
button,
a {
    transition: 0.3s;
}
input,
select {
    outline: none;
}
/* -------------------------------------------------------------------------- */
/*                              Responsive Start                              */
/* -------------------------------------------------------------------------- */
@media only screen and (max-device-width: 1980px), (max-width: 1980px) {
    /* 1980 Screen */
}
@media only screen and (max-device-width: 1440px), (max-width: 1440px) {
    /* 1440 Screen */
}
@media only screen and (max-device-width: 1280px), (max-width: 1280px) {
    /* 1280 Screen */
    .page-banner,
    .home-banner {
        background-position: 58% 50%;
        transition: 0.5s;
    }
    .home-poster {
        min-height: unset !important;
    }
}
@media only screen and (max-device-width: 1220px), (max-width: 1220px) {
    /* 1024 Screen */
}
@media only screen and (max-device-width: 1024px), (max-width: 1024px) {
    /* 1024 Screen */
    .row-noibat > div {
        margin: 8px 0;
    }
    .home-poster {
        background-image: unset !important;
    }
    .modal-dkytuvan .modal-content {
        max-width: calc(100% - 16px);
        margin: 16px auto;
    }
    .content-popup:before {
        display: block;
        margin: 0 auto 20px;
        position: static !important;
        transform: none !important;
    }
    .content-popup {
        max-height: 90%;
        overflow-x: hidden;
    }
    .contact-popup {
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .address-popup {
        order: 1;
        margin: 15px auto 0 22px;
        max-width: unset !important;
    }
}
@media only screen and (max-device-width: 992px), (max-width: 992px) {
    /* 992px Screen / Bootstrap LG */

    .header-panel .search-v1 {
        width: 100%;
        max-width: 100% !important;
    }
    .navbar-collapse ul.navbar-nav li a {
        padding: 12px 0;
        font-size: 15px;
        border-bottom: 1px solid #efefef;
    }
    .navbar-collapse .nav-account {
        margin-top: 15px;
        padding: 0 10px;
    }
    .navbar-collapse .nav-account .h-account,
    .navbar-collapse .nav-account .creat-order {
        width: 50%;
    }
    .navbar-collapse {
        background: #fff;
        margin-top: 10px;
        padding: 15px 25px;
        border: 1px solid #eaecf0;
        box-shadow: 0px 24px 24px rgba(0, 0, 0, 0.08),
            0px 8px 12px rgba(0, 0, 0, 0.04);
        border-radius: 10px;
        padding: 15px;
        z-index: 9;
    }
    .homepage .navbar a,
    .homepage .navbar a:visited {
        color: #1d2939 !important;
    }
    .abs-footer {
        display: flex;
        flex-direction: column-reverse;
    }
    .abs-footer > div.right {
        margin-bottom: 10px;
    }
    ul.abs-footer-menu {
        justify-content: center !important;
    }
    .abs-footer > div.col-12 {
        text-align: center;
    }
    ul.header-login-reg {
        flex-direction: column;
        margin-top: 12px;
    }
    ul.header-login-reg li {
        margin-bottom: 15px;
        font-size: 15px;
    }
    .header-panel {
        flex-direction: column;
    }
    .header-panel .u-heading {
        margin-bottom: 15px;
    }
}
@media only screen and (max-device-width: 850px), (max-width: 850px) {
    /* 850 Screen */
    .block-forms {
        flex-direction: column;
        align-items: start !important;
    }
    .block-forms .line-forms,
    .block-forms .timkiem-btn {
        width: 100% !important;
        max-width: 100% !important;
        margin: 5px 0;
    }
    .search-filter-form .timkiem-btn button.btn {
        width: 100% !important;
        margin: 5px 0 !important;
    }
    .price-and-total {
        flex-direction: column;
    }
    .price-and-total .left,
    .price-and-total .right {
        width: 100% !important;
    }
    .home-tintuc .block-post {
        padding: 16px !important;
    }
    .page-chitiet.chitiet-lienquan .block-post {
        padding: 0;
        margin: 16px 0;
        padding: 0 !important;
    }
    .snt.nav-pills.fourtab > li.nav-item,
    .snt.nav-pills.threetab > li.nav-item {
        width: 100% !important;
    }
}
@media only screen and (max-device-width: 768px), (max-width: 768px) {
    /* Ipad Mini */
    section.withdraw .inner-layout .money-title,
    section.withdraw .inner-layout .money-value {
        font-size: 18px !important;
        line-height: 1.4em !important;
    }
    section.withdraw .inner-layout .money-value span.time {
        margin-top: 5px;
        display: block;
    }
    .copy-banks .tk-bank div.item div.left {
        margin-right: 10px !important;
    }
    .copy-banks-inner {
        padding: 16px 0 !important;
    }
}
@media only screen and (max-device-width: 640px), (max-width: 640px) {
}
@media only screen and (max-device-width: 550px), (max-width: 550px) {
    /* 550 Screen */
    .right.two-btn {
        flex-direction: column;
    }
    section.vnpay .top-layout .inner-layout,
    section.vnpay .bot-layout .inner-layout {
        flex-direction: column;
    }
    section.vnpay .top-layout .inner-layout .left,
    section.vnpay .top-layout .inner-layout .right {
        margin: 5px auto 10px !important;
    }
    .banktrans-tip div {
        max-width: 100% !important;
    }
    .copy-banks .tk-bank div.item > div:nth-child(1) {
        flex-direction: column;
        align-items: flex-start;
    }
    ul.nav-pills-stk.nav-pills li {
        width: calc(50% - 6px) !important;
    }
    .list-banks > div {
        width: calc(50% - 10px) !important;
    }
    .u-heading h2,
    .u-heading {
        font-size: 1.1em !important;
    }
    ul.dropdown-menu.vertical {
        position: absolute;
        right: unset !important;
        left: -50% !important;
    }
    .tab-search .input-div input.submit {
        padding: 12px 10px !important;
    }
    input.search_input {
        padding: 0 125px 0 12px !important;
    }
    .close_input svg {
        right: 100px !important;
    }
    .snt.tab-search button.nav-link {
        font-size: 14px !important;
    }
    .snt.tab-search .tab-content {
        padding: 32px 10px !important;
    }
    .block-contact,
    .contact-popup {
        padding: 20px 15px !important;
    }
    .content-popup {
        padding: 15px !important;
    }
    .logo-popup {
        margin: 0 0 15px !important;
    }
    .contact-popup {
        justify-content: center !important;
        flex-direction: column !important;
    }
    .snt-form input:not([type="submit"], [type="checkbox"]) {
        margin-bottom: 20px !important;
    }
    .snt-form label:not([for="agree_ruler"]) {
        margin-bottom: 3px !important;
    }
    .faq-more {
        padding: 20px !important;
    }
    .block-contact {
        padding: 40px 20px !important;
    }
}
@media only screen and (max-device-width: 480px), (max-width: 480px) {
    /* 480 Screen */

    .a2z .navbar-custom .logo {
        display: unset;
    }
    .a2z .navbar-custom .button-menu-mobile {
        margin-right: 0;
    }
}
@media only screen and (max-device-width: 414px), (max-width: 414px) {
    /* Iphone 6-7-8 Screen */
}
@media only screen and (max-device-width: 375px), (max-width: 375px) {
    /* Iphone X */
    .wallet-top-info {
        max-width: 100% !important;
    }
    .nav-layout.wallet {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
}
@media only screen and (max-device-width: 320px), (max-width: 320px) {
    /* Iphone 5 */
}
/* -------------------------------------------------------------------------- */
/*                               Responsive End                               */
/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/*                               All Page Start                               */
/* -------------------------------------------------------------------------- */

/* Layout Start */
.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    max-width: var(--container) !important;
}
/* Layout End */

/* Style Start */
body {
    font-family: var(--font) !important;
}
img {
    max-width: 100%;
}
footer input:hover,
footer input:active,
footer input:focus {
    outline: none;
}
.btn:hover,
.btn:focus {
    box-shadow: unset !important;
}
.btn-link {
    text-decoration: none !important;
}
.custom-table tbody tr:hover {
    background-color: var(--tr-hover);
}
blockquote {
    background-color: rgb(248, 235, 203);
    padding: 8px 10px;
    width: 100%;
    border-radius: 3px;
    color: var(--c-dark);
    font-size: 14px;
    display: block;
}
/* Style End */

/* Header Start */
/* -- nav-account start */
.topnav_btn {
    background-color: var(--bg1) !important;
    border: 1px solid var(--bg1) !important;
    transition: 0.5s all;
}
.topnav_btn:hover {
    background-color: var(--bg1-hover) !important;
    border-color: var(--bg1-hover) !important;
}
.nav-account {
    text-transform: none;
}
.nav-account .creat-order,
.nav-account .cart-order {
    margin-right: 10px;
    height: 40px;
}
.layout-user .creat-cart {
    color: var(--c-dark);
}
.creat-cart svg {
    margin-right: 5px;
}
.h-account {
    position: relative;
    border: 0;
}
.h-account .avatar {
    margin-right: 8px;
    position: relative;
}
.h-account .avatar img {
    min-width: 32px;
    width: 32px;
    height: 32px;
}
.h-account .avatar img {
    border-radius: 50%;
}
.h-account .name {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #344054;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.h-account .resource {
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: #667085;
}
.nav-account .dropdown-toggle::after {
    display: none;
}
.h-account .dropdown-menu.show {
    background: #ffffff;
    border: 1px solid #eaecf0;
    box-shadow: 0px 24px 24px rgba(0, 0, 0, 0.08),
        0px 8px 12px rgba(0, 0, 0, 0.04);
    border-radius: 10px;
    width: 230px;
}
.h-account .dropdown-menu.show .dropdown-item {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #101828d6;
    height: 50px;
    display: flex;
    align-items: center;
}
.h-account .dropdown-menu[data-bs-popper] {
    left: unset;
    right: 0;
}
/* -- nav-account end */
.topbar {
    background-color: var(--bg);
    height: 40px;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    text-align: right;
    color: #fcfcfd;
}
.topbar a {
    color: #fcfcfd;
    margin: 0 5px;
    text-decoration: none;
}
#topbar a:hover {
    color: var(--a-hover);
}
a,
a:hover {
    text-decoration: none !important;
}
.topbar-content > div:not(:last-child) {
    margin-right: 24px !important;
}
.topbar .v-icon {
    display: inline-flex;
    align-items: center;
}
.topbar .v-icon:before {
    content: "";
    width: 24px;
    height: 24px;
    margin-right: 8px;
}
.v-icon.tygia:before {
    background: url(../../assets/images/calculator.svg);
}
.v-icon.tvmh:before {
    background: url(../../assets/images/ct-support.svg);
}
.v-icon.email-andress:before {
    background: url(../../assets/images/ct-mail.svg);
}
.v-icon.lichlv:before {
    background: url(../../assets/images/oclock.svg);
}
.v-icon.tvmh strong {
    margin-left: 5px;
}
.homepage .home-banner {
    background-image: url(../../assets/images/home-banner.png);
    background-size: cover;
    /* min-height: 600px; */
    background-repeat: no-repeat;
    background-attachment: fixed;
}
ul.navbar-nav {
    margin: 0 auto;
}
ul.navbar-nav li {
    margin: 0 14px;
}
ul.navbar-nav li,
ul.navbar-nav li a {
    color: #434657;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    text-transform: uppercase;
}

.navbar-nav .nav-link.active {
    color: #004cff !important;
}

ul.navbar-nav li a:hover,
ul.navbar-nav li a:active {
    color: var(--a-hover) !important;
}
.homepage .navbar a,
.homepage .navbar a:visited {
    text-decoration: none;
}
.navbar-brand img {
    max-height: 46px;
}
.layout-user .snt.navbar {
    margin: 20px auto;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    text-transform: uppercase;
    color: #fcfcfd;
    box-shadow: 0px 1px 0px #eaecf0;
}
.layout-user .snt.navbar {
    background: #fff;
    box-shadow: 0px 1px 0px #eaecf0;
    margin: 0px auto;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    text-transform: uppercase;
    color: #111;
    height: 76px;
    padding: 18px 0;
}
.layout-user .navbar a,
.layout-user .navbar a:visited {
    color: #1d2939;
    text-decoration: none;
}
.homepage .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28 255, 255, 255, 0.90 %29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.homepage .navbar-toggler {
    border: 1px solid #fff;
}
.layout-user .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28 0, 0, 0, 0.90 %29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.layout-user .navbar-toggler {
    border: 1px solid #111;
}
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler:hover {
    outline: none !important;
}
ul.header-login-reg {
    display: flex;
    margin-bottom: 0;
    padding-left: 1em;
    align-items: center;
}
ul.header-login-reg li {
    list-style: none;
}
.header-login {
    margin-right: 16px;
}
li.header-reg a {
    color: #fff !important;
}
.header-reg .btn {
    padding: 8px 16px;
    border: 1px solid #b2ddff;
    color: #fff !important;
}
.page-banner .txt-logo {
    margin: 64px auto 32px;
}
.home-banner .txt-logo {
    margin: 28px auto 20px;
}
ul.page-breadcrumb {
    margin: 32px 0 0 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding-left: 0;
    padding-bottom: 15px;
}
ul.page-breadcrumb li {
    list-style: none;
    display: inline-flex;
    align-items: center;
    margin-left: 0;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
}
ul.page-breadcrumb li a,
ul.page-breadcrumb li {
    color: #fcfcfd;
}
ul.page-breadcrumb li a:hover {
    color: var(--a-hover) !important;
}
ul.page-breadcrumb li.homelink::before {
    content: "";
    background: url(../../assets/images/homelink.svg) no-repeat;
    width: 20px;
    height: 17px;
    margin-right: 12px;
}
ul.page-breadcrumb li:not(:last-child):after {
    content: "";
    background: url(../../assets/images/arrow-right-white.svg) no-repeat;
    width: 8px;
    height: 12px;
    margin: 0 12px 0 12px;
}
.page-banner .heading,
.home-banner .heading {
    font-weight: 700;
    font-size: 30px;
    line-height: 38px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #ffffff;
}
.page-banner {
    background-image: url(../../assets/images/page-banner.jpg);
    background-size: cover;
    min-height: 400px;
    background-repeat: no-repeat;
}
/* --- home-search start */

.tab-search-wrapper {
    width: 100%;
    max-width: 850px;
    margin: -150px auto 32px;
    box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08),
        0px 8px 8px -4px rgba(16, 24, 40, 0.03);
}
.snt.tab-search .tab-content {
    background-color: #fff;
    min-height: 236px;
    padding: 32px;
    border-radius: 0 8px 8px 8px;
}
.snt.tab-search button.nav-link {
    padding: 8px 16px;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    border: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 48vw;
    max-width: 240px;
}
.snt.tab-search button.nav-link:not(.active) {
    background-color: var(--bg-btn);
    color: #fff;
}
ul.nav-tabs li {
    margin-bottom: -1px;
    background: linear-gradient(180deg, #000 50%, #fff 50%);
    transition: 0.5s;
}
ul.nav-tabs li:nth-child(1) {
    border-radius: 8px 0 0 0;
}
ul.nav-tabs li:nth-child(2) {
    border-radius: 0 8px 0 0;
}
ul.nav-tabs li:nth-child(1) button.nav-link.active {
    border-radius: 8px 8px 0 0 !important;
}
ul.nav-tabs li:nth-child(1) button.nav-link:not(.active) {
    border-radius: 8px 0 8px 0;
    margin-bottom: 0px;
}
ul.nav-tabs li:nth-child(2) button.nav-link.active {
    border-radius: 8px 8px 0 0;
}
ul.nav-tabs li:nth-child(2) button.nav-link:not(.active) {
    border-radius: 0 8px 0 8px;
    margin-bottom: 0px;
}
/* -- search input form start */
.tab-search input:focus,
.tab-search input:hover,
.tab-search input:active {
    outline: unset;
}
.block-form-search {
    margin-bottom: 32px;
    width: calc(850px - 64px);
    max-width: 100%;
    display: flex;
    align-items: center;
}
.tab-search .select-div,
.tab-search .select-div select {
    background-color: var(--bg-gray);
    border: 1px solid var(--bg-gray);
}
.tab-search .select-div select,
.tab-search .input-div input.search_input,
.tab-search .input-div input.submit {
    height: 52px;
}
.tab-search .select-div {
    padding: 0 5px;
    width: 135px;
    height: 54px;
    display: flex;
    align-items: center;
}
.block-form-search .input-div {
    display: flex;
    position: relative;
    border: 1px solid var(--bg);
    box-sizing: border-box;
    width: 100%;
}
.tab-search .input-div input[type="submit"] {
    position: absolute;
    right: 0;
}
.dropdown-menu.dropdown-1.show {
    min-width: 230px;
    max-width: 100%;
}
.dropdown-1 a.dropdown-item {
    font-weight: 400 !important;
    line-height: 20px !important;
    color: #434657 !important;
}
.dropdown-2 .dropdown-item::before {
    content: "";
    width: 24px;
    height: 24px;
    margin-right: 10px;
}
img.item-donhang {
    max-height: 32px;
    margin-right: 8px;
}
#m-tttk::before {
    background-image: url(../../assets/images/m-tttk.svg);
}
#m-thongbao::before {
    background-image: url(../../assets/images/m-thongbao.svg);
}
#m-donhang::before {
    background-image: url(../../assets/images/m-donhang.svg);
}
#m-wishlist::before {
    background-image: url(../../assets/images/m-wishlist.svg);
}
#m-vidientu::before {
    background-image: url(../../assets/images/m-vidientu.svg);
}
#m-khieunai::before {
    background-image: url(../../assets/images/m-khieunai.svg);
}
#m-logout::before {
    background-image: url(../../assets/images/m-logout.svg);
}

input.search_input {
    max-width: 100%;
    width: 100%;
    padding: 0 150px 0 12px;
    border: 0;
}
a.close_input {
    cursor: pointer;
}
.close_input:hover svg path {
    fill: #111;
}
.close_input svg {
    right: 120px;
    position: absolute;
    top: 15px;
}
input.search_input::placeholder {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #98a2b3;
}
.tab-search .input-div input.submit {
    background-color: var(--bg);
    color: #fff;
    border: 0;
    padding: 12px 20px;
}

div.mm-dropdown {
    background-color: #fff;
    width: 100%;
    border-radius: 4px;
    z-index: 999;
    transition: 0.5s;
}

div.mm-dropdown ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
div.mm-dropdown ul li,
div.mm-dropdown div.textfirst {
    background-color: var(--bg-gray);
    color: #333;
    padding: 0 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: unset;
}

div.mm-dropdown div.textfirst img.down {
    margin-left: 8px;
}
div.mm-dropdown .textfirst img:not(.down) {
    height: 36px;
    max-width: 100%;
    transition: 0.6s;
}
div.mm-dropdown ul li:hover img:not(.down) {
    height: 35px;
    transition: 0.6s;
}
div.mm-dropdown ul li img {
    height: 35px;
}
div.mm-dropdown ul li {
    background-color: #fff;
    display: none;
    padding: 5px 10px;
    border: 1px solid #eee;
    text-align: center;
    cursor: pointer;
}
div.mm-dropdown ul li:hover {
    background-color: rgb(250, 248, 248);
}
div.mm-dropdown ul li.main {
    display: block;
}

/* -- search input form end */

.snt.tab-search .nav-tabs {
    border-bottom-color: transparent;
}
.snt.tab-content img.app-dl {
    height: 48px;
    max-width: 155px;
}
.snt.tab-content a.appdl {
    margin: 0 8px;
}
.snt.tab-content .title {
    font-weight: 600;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: #101828;
    margin: 8px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.search-tip {
    background: #fffbf5;
    border: 1px solid #fff6ec;
    border-radius: 8px;
    padding: 15px;
}
.search-tip .tip-title {
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #ffa940;
    margin-bottom: 8px;
}
.search-tip ul li {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #38383d;
}
/* --- home-search end */

/* Header End */

/* Footer Start */
footer a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
}
footer a:hover {
    color: var(--a-hover);
}
.snt.footer {
    background-color: #101828;
}
.snt.footer .row-footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 64px 0;
}
.footer-widget p {
    color: rgba(255, 255, 255, 0.75);
}
.footer-title {
    color: #f9fafb !important;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    margin: 12px 0;
}

.footer-logo {
    margin: 8px 0;
}
.footer-widget ul {
    padding-left: 0;
}
.footer-widget ul li {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 8px;
}
.snt.footer input {
    width: 100%;
}
.snt.footer .dl-app {
    max-width: 100%;
    margin: 21px auto 16px;
}
.snt.footer .dl-app > div {
    max-width: 148px;
}
.snt.footer .dl-app > div:nth-child(1) {
    margin-right: 8px;
}
.snt.footer .dl-app img {
    margin: 8px 0;
    height: 45px;
}
ul.footer-social {
    display: flex;
}
ul.footer-social li {
    margin-right: 8px;
}
ul.footer-social li a {
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    padding: 6px;
    width: 30px;
    height: 30px;
}
.abs-footer-hr {
    color: #fff;
    margin: 0;
}
.abs-footer {
    color: #fff;
    padding: 16px 0;
}
ul.abs-footer-menu {
    display: flex;
    justify-content: end;
    margin: 0;
    padding-left: 0;
}
ul.abs-footer-menu li {
    list-style: none;
}
ul.abs-footer-menu li:not(:last-child) a {
    margin-right: 32px;
}
.footer-subemail {
    position: relative;
    display: flex;
    align-items: center;
}
.footer-subemail input[type="submit"] {
    position: absolute;
    right: 0;
    width: 104px;
}
.footer-subemail input.sub-email {
    height: 50px;
    border: 0;
    border-radius: 4px;
    padding: 0 114px 0 10px;
}
.footer-subemail input.sub-email::placeholder {
    padding: 0 10px;
}
.footer-subemail input.submit {
    height: 46px;
    margin-right: 2px;
    border: 0;
    border-radius: 3px 4px 4px 3px;

    background-color: var(--bg);
    color: #fff;
}
.footer-subemail input.submit:hover,
.footer-subemail input.submit:active {
    background-color: var(--bg-btn-hover);
}
/* Footer End */

/* -------------------------------------------------------------------------- */
/*                                All Page End                                */
/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/*                                 PAGE START                                 */
/* -------------------------------------------------------------------------- */
/* Homepage Start */
section.home-dichvu {
    background-image: url(../../assets/images/bg-seaplace.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 90%;
    padding: 32px 0;
}
.home-dichvu .sup-heading {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    text-transform: uppercase;
    color: #344054;
    margin-bottom: 8px;
}
.home-dichvu .heading {
    font-weight: 700;
    font-size: 30px;
    line-height: 38px;

    text-align: center;
    text-transform: uppercase;

    color: #056cf2;
}
.row.box-dichvu {
    margin: 32px auto;
}
.box-dv {
    background: #f9fafb;
    border-radius: 8px;
    padding: 32px 15px 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    text-align: center;
    min-height: 420px;
}
.box-dv .icon-svg {
    margin: 20px auto 40px;
}
.box-dv .title {
    font-weight: 700;
    font-size: 17px;
    line-height: 28px;
    text-transform: uppercase;
    color: #101828;
    margin: 16px auto;
}
.box-dv .desc {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #667085;
}
.home-dichvu .viewmore {
    min-width: 240px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.home-dichvu .viewmore::after {
    content: "";
    background-image: url(../../assets/images/right-arrow-white.svg);
    background-repeat: no-repeat;
    height: 13px;
    width: 13px;
    margin-left: 8px;
    transition: 0.5s;
}
.home-dichvu .viewmore:hover::after {
    margin-left: 16px;
}

section.home-quytrinh {
    background-color: #ffc929;
    padding: 64px 0;
}
.home-quytrinh .sup-heading {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    text-transform: uppercase;
    color: #344054;
    margin-bottom: 8px;
}
.home-quytrinh .heading {
    font-weight: 700;
    font-size: 30px;
    line-height: 38px;
    text-align: center;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 32px;
}
.row-quytrinh {
    display: flex;
    align-items: center;
    justify-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 auto;
    max-width: 100% !important;
}
.row-quytrinh .box-quytrinh {
    padding: 0 0;
    min-width: fit-content;
    max-width: 100%;
    z-index: 2;
    position: relative;
    margin: 15px 0;
}
.quytrinh-step {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.quytrinh-step .icon-svg {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background-color: #ffc929;
    z-index: 10;
}
.quytrinh-step .icon-svg img {
    height: 60px;
    margin-bottom: 11px;
    padding: 0 20px;
}
.quytrinh-step .title {
    font-weight: 700;
    font-size: 20px;
    line-height: 30px;
    color: #101828;
}
/* -- dashed quy trinh dich vu start */
@media only screen and (max-device-width: 1230px), (max-width: 1230px) {
    /* 1230px Screen */
    .box-quytrinh .quytrinh-step .icon-svg::before,
    .box-quytrinh .quytrinh-step .icon-svg::after {
        display: none;
    }
    .row-quytrinh .box-quytrinh {
        padding: 0 15px;
    }
}
@media only screen and (max-device-width: 1080px), (max-width: 1080px) {
    /* Ipad 1080 Screen */
}
@media only screen and (max-device-width: 810px), (max-width: 810px) {
    /* Ipad Screen */
    .box-quytrinh .quytrinh-step .icon-svg::before,
    .box-quytrinh .quytrinh-step .icon-svg::after {
        display: none;
    }
}
@media only screen and (max-device-width: 550px), (max-width: 550px) {
    /* 850 Screen */
    .box-quytrinh {
        width: 100%;
    }
}
.box-quytrinh:nth-child(1) .quytrinh-step .icon-svg::before {
    content: "";
    height: 17px;
    width: 75px;
    background-image: url(../../assets/images/dash/start.png);
    background-repeat: no-repeat;
}
.box-quytrinh:nth-child(1) .quytrinh-step .icon-svg::after {
    content: "";
    height: 4px;
    width: 75px;
    background-image: url(../../assets/images/dash/line1.png);
    background-repeat: no-repeat;
}
.box-quytrinh:nth-child(2) .quytrinh-step .icon-svg::before {
    content: "";
    height: 4px;
    width: 95px;
    background-image: url(../../assets/images/dash/line1.png);
    background-repeat: no-repeat;
}
.box-quytrinh:nth-child(2) .quytrinh-step .icon-svg::after {
    content: "";
    height: 4px;
    width: 95px;
    background-image: url(../../assets/images/dash/line2.png);
    background-repeat: no-repeat;
}
.box-quytrinh:nth-child(4) .quytrinh-step .icon-svg::before {
    content: "";
    height: 4px;
    width: 85px;
    background-image: url(../../assets/images/dash/line3.png);
    background-repeat: no-repeat;
}
.box-quytrinh:nth-child(4) .quytrinh-step .icon-svg::after {
    content: "";
    height: 4px;
    width: 75px;
    background-image: url(../../assets/images/dash/line4.png);
    background-repeat: no-repeat;
}
.box-quytrinh:nth-child(5) .quytrinh-step .icon-svg::before {
    content: "";
    height: 4px;
    width: 80px;
    background-image: url(../../assets/images/dash/line4.png);
    background-repeat: no-repeat;
}
.box-quytrinh:nth-child(5) .quytrinh-step .icon-svg::after {
    content: "";
    height: 27px;
    width: 95px;
    background-image: url(../../assets/images/dash/end.png);
    background-repeat: no-repeat;
}

/* -- dashed quy trinh dich vu end */
.home-camket .heading {
    font-style: normal;
    font-weight: 700;
    font-size: 30px;
    line-height: 38px;
    text-align: center;
    color: #101828;
    margin: 32px auto 16px;
}
.home-camket .sup-heading {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    margin: 16px auto 32px;
    max-width: 584px;
}
.row-camket {
    text-align: center;
}
.box-camket .title {
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    text-align: center;
    color: #1d2939;
    margin-bottom: 8px;
}
.box-camket .desc {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    color: #667085;
}
.box-camket .icon-svg {
    margin: 24px auto;
}
.box-camket .icon-svg {
    width: 64px;
    height: 64px;
    background: #f5faff;
    border-radius: 50%;
    display: flex;
    align-content: center;
    justify-content: center;
}
.box-camket .icon-svg img {
    height: 32px;
    display: block;
    margin: auto;
}
.box-camket .icon-svg::before {
    content: "";
    height: 1px;
    width: 50px;
    background: #fff;
}
.box-camket .icon-svg::after {
    content: "";
    height: 1px;
    width: 50px;
    background: #fff;
}
.row-chi-so {
    background: #f9fafb;
    border: 1px solid #eaecf0;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    border-radius: 8px;
    margin: 32px auto !important;
    padding: 16px 15px;
}
.box-chi-so {
    margin: 4px auto;
}
.box-chi-so .chi-so {
    font-weight: 700;
    font-size: 30px;
    line-height: 38px;
    text-align: center;
    color: #056cf2;
}
.box-chi-so .desc {
    font-weight: 600;
    font-size: 14px;
    line-height: 180%;
    text-align: center;
    color: #344054;
}
.home-camket {
    background-image: url(../../assets/images/bg-map-22.jpg);
    background-repeat: no-repeat;
    background-position: 50% 0%;
}
.home-poster {
    background: var(--bg);
    background-image: url(../../assets/images/poster-kiemsoatcongviec.png);
    min-height: 600px;
    background-repeat: no-repeat;
    background-position: 105% 0;
    background-size: contain;
    padding: 32px 0;
}
.home-poster .txt-svg {
    margin: 40px 0 40px;
}
.home-poster .title {
    font-weight: 700;
    font-size: 30px;
    line-height: 38px;
    color: #fcfcfd;
    margin-bottom: 16px;
}
.home-poster .sup-title {
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: #b2ddff;
    max-width: 400px;
    margin-bottom: 40px;
}
.home-poster .row-noibat {
    background: #fff;
    border-radius: 8px;
    width: 1000px;
    max-width: 100%;
    padding: 20px;
    margin-left: 0;
    margin-right: 0;
}
.row-noibat .box-title {
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    text-transform: uppercase;
    color: #101828;
}
.row-noibat .box-sup-title {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #344054;
}
.home-poster .app-list {
    margin: 32px auto;
}
.home-poster .app-list .btn-dl {
    height: 45px;
    margin-right: 16px;
}
section.home-doitac {
    background-color: var(--bg-light);
    padding: 32px 0;
}
.home-doitac .heading {
    font-weight: 400;
    font-size: 30px;
    line-height: 38px;
    color: #1d2939;
    text-align: center;
}
.slider-logo {
    position: relative !important;
    margin: 32px auto 0;
}
.slider-logo .slick-arrow {
    top: 25% !important;
    transform: translateY(-25%);
}
.slider-dichvu {
    position: relative !important;
}
.slider-dichvu .title a {
    color: #212529;
}
.slider-dichvu .title a:hover {
    color: #0b5ed7;
}
.slick-prev.slick-arrow,
.slick-next.slick-arrow {
    position: absolute !important;
    background-color: #eee;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    padding: 7px;
    z-index: 99;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.07);

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.slick-prev.slick-arrow:hover,
.slick-next.slick-arrow:hover {
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.17);
}
.slick-slide {
    padding: 0 16px;
}
.slick-prev.slick-arrow {
    left: 0;
}
.slick-next.slick-arrow {
    right: 0;
}
.slick-arrow:hover {
    cursor: pointer;
}
ul.slick-dots {
    margin: 32px 0;
    text-align: center;
}
ul.slick-dots li {
    display: inline-flex !important;
    list-style: none;
    margin: 0 8px !important;
}
.slick-dots li img:nth-child(1) {
    display: block;
}

.slick-dots li img:nth-child(2) {
    display: none;
}

.slick-dots li.slick-active img:nth-child(1) {
    display: none;
}

.slick-dots li.slick-active img:nth-child(2) {
    display: block;
}

.block-contact-form {
    background-color: var(--bg-dark);
    padding: 32px 0;
}
.block-contact-form .sup-heading {
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
    color: #f8f8fc;
    margin-bottom: 16px;
}
.block-contact-form .heading {
    font-weight: 700;
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin-bottom: 20px;
    max-width: 290px;
}
.block-contact-form .desc {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #f8f8fc;
    max-width: 480px;
    margin-bottom: 20px;
}
.block-contact-form ul.list-contact {
    padding-left: 0;
    margin-bottom: 32px;
}
.block-contact-form ul.list-contact li {
    list-style: none;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    margin: 12px 0;
    display: flex;
    align-content: center;
}
.block-contact-form ul.list-contact li a,
.block-contact-form ul.list-contact li {
    color: #f8f8fc;
}
.block-contact-form ul.list-contact li a:hover {
    color: var(--a-hover);
}
.block-contact-form ul.list-contact li::before {
    content: "";
    width: 24px;
    height: 24px;
    padding-left: 40px;
    background-repeat: no-repeat;
}

.block-contact-form ul.list-contact li.phone::before {
    background-image: url(../../assets/images/ct-phone.png);
}
.block-contact-form ul.list-contact li.email::before {
    background-image: url(../../assets/images/ct-mail.png);
}
.block-contact-form ul.list-contact li.chat::before {
    background-image: url(../../assets/images/ct-chat.png);
}
.block-contact-form ul.list-contact li.andress::before {
    background-image: url(../../assets/images/ct-andress.png);
}
.block-contact {
    background: #fff;
    padding: 40px;
    border-radius: 8px;
}
.snt-form label:not([for="agree_ruler"]) {
    display: block;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #1b1d29;
    margin-bottom: 16px;
}
.snt-form input:not([type="submit"], [type="checkbox"]) {
    margin-bottom: 40px;
    height: 31px;
    display: flex;
    align-items: center;
    width: 100%;
    border-width: 0 0 1px 0;
    border-bottom: 1px solid #f2f3f3;
    transition: 0.5s;
}
.snt-form input::placeholder {
    font-weight: 500;
    font-size: 14px;
    line-height: 28px;
    color: #abadac;
}
.snt-form input:focus-visible {
    box-shadow: unset;
    outline: none;
    box-shadow: none;
    border-bottom: 1px solid #cfcfcf;
}
.agree_row > div {
    display: inline-flex;
    align-items: center;
}
.agree_row label {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #82869e;
    margin: 0 0 0 12px;
}
.agree_row label strong {
    color: #1b1d29;
}
.snt-form .submit {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #fcfcfd;
    background: var(--bg);
    border: 1px solid #b2ddff;
    border-radius: 4px;
    padding: 12px 20px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 145px;
    max-width: 100%;
}
.snt-form .submit:hover {
    background: var(--bg-btn-hover);
}
.home-tintuc {
    padding: 64px 0;
}
.home-tintuc .sup-heading {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    text-transform: uppercase;
    color: #161519;
    margin-bottom: 8px;
}
.home-tintuc .heading {
    font-weight: 700;
    font-size: 30px;
    line-height: 38px;
    color: #111013;
    max-width: 65vw;
}
.viewmore-arrow {
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;

    display: inline-flex;
    align-items: center;
    text-align: center;
    transition: 0.5s;
}
.viewmore-arrow,
.viewmore-arrow a {
    color: #111013;
}
.viewmore-arrow::after {
    content: "";
    background-image: url(../../assets/images/right-arrow.png);
    width: 24px;
    height: 18px;
    background-repeat: no-repeat;
    margin-left: 8px;
}
.viewmore-arrow:hover::after {
    background-image: url(../../assets/images/right-arrow-hover.png);
}

section.home-tintuc {
    background-image: url(../../assets/images/bg-block-news.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 90%;
    padding: 32px 0;
}
.home-tintuc .block-post {
    background: #fff;
    border-radius: 8px;
    padding: 32px;
    margin: 40px 0;
}
.box-blogpost {
    position: relative;
    margin: 16px 0;
}
.box-blogpost .post-title {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    text-transform: uppercase;
    margin: 8px 0;
    overflow: hidden;
    height: 48px;
}
.box-blogpost .post-title,
.box-blogpost .post-title a {
    color: #101828;
}
.box-blogpost .post-title:hover,
.box-blogpost .post-title a:hover {
    color: var(--c-hover);
}
.box-blogpost .post-desc {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #475467;
    overflow: hidden;
    height: 60px;
}
.box-blogpost .badge-date {
    background-color: var(--bg);
    position: absolute;
    top: 8px;
    left: 8px;
    border-radius: 4px;

    width: 43px;
    height: 40px;
    padding: 5px 7px;

    font-weight: 600;
    font-size: 14px;
    line-height: 15px;
    color: #101828;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
section.home-faq {
    padding: 32px 0;
}
.home-faq .container {
    width: 890px;
    max-width: 100% !important;
}
.home-faq .heading {
    font-weight: 700;
    font-size: 30px;
    line-height: 38px;
    text-align: center;
    color: #101828;
    margin-bottom: 40px;
}
.block-faq .accordion-button:not(.collapsed) {
    background-color: unset;
    color: unset;
}
.accordion-button:focus,
.block-faq .accordion-button:not(.collapsed):focus,
.block-faq .accordion-button:not(.collapsed):focus-visible,
.block-faq .accordion-button:not(.collapsed) {
    box-shadow: unset !important;
    outline: none;
}
.block-faq .accordion-item {
    border-width: 0 0 1px 0;
}
.block-faq .accordion-header .accordion-button {
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
    color: #101828;
}
.block-faq .accordion-body {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #344054;
    padding-top: 0;
    padding-bottom: 32px;
}
.faq-more {
    background-color: #f9fafb;
    padding: 32px;
    margin: 40px auto;
    border-radius: 8px;
    flex-wrap: wrap;
}
.faq-more .title {
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
    color: #101828;
    margin-bottom: 4px;
}
.faq-more .sup-title {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #667085;
}
.faq-more .sideright {
    margin: 15px 0;
}
.home-faq .contact-now {
    min-width: max-content;
}
.home-faq .sideleft {
    max-width: 540px;
    padding-right: 10px;
}

/* Popup */

.modal.modal-dkytuvan {
    background: rgb(255 255 255 / 80%);
    --bs-modal-width: 1080px;
}
.modal.modal-dkytuvan .btn-close {
    position: absolute;
    right: -70px;
    z-index: 2;
    font-size: 32px;
    padding: 0;
    filter: invert(49%) sepia(12%) saturate(411%) hue-rotate(174deg)
        brightness(97%) contrast(95%);
    box-shadow: none;
}
.content-popup {
    max-width: 1080px;
    background: #056cf2;
    color: #fff;
    padding: 40px;
    position: relative;
    border-radius: 8px;
    margin: 0 auto;
}
.content-popup:before {
    content: "";
    width: 80px;
    height: 80px;
    background: url(../images/mail-popup.svg);
    position: absolute;
    top: -40px;
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
}
.content-popup .sub-title {
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    color: #f9fafb !important;
}
.content-popup .title {
    font-weight: 700;
    font-size: 36px;
    line-height: 44px;
    text-align: center;
    margin: 0 0 16px;
}
.small,
small {
    font-size: unset;
}
.content-popup .des {
    color: #b2ddff;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}
.content-popup .title small {
    color: #0d2259;
}
.block-contact.form-popup {
    padding: 20px 40px;
    margin: 0 0 16px;
}
.form-popup .agree_row {
    justify-content: center !important;
}
.form-popup .snt-form input.submit {
    text-transform: uppercase;
}
.contact-popup {
    background: #fff;
    border-radius: 8px;
    color: #101828;
    padding: 20px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.address-popup {
    max-width: 480px;
    position: relative;
}
.address-popup span {
    font-weight: 700;
}
.address-popup:before {
    content: "";
    width: 20px;
    height: 20px;
    background: url(./images/map-popup.svg);
    position: absolute;
    left: -25px;
    top: 0;
}
.hotline-popup {
    display: flex;
    justify-content: center;
    flex-direction: column;
    background: #056cf2;
    border-radius: 50px 8px 8px 50px;
    padding: 8px 10px 5px 65px;
    position: relative;
}
.hotline-popup span {
    color: #d1e9ff;
    font-weight: 500;
    line-height: 1;
}
.hotline-popup small {
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    color: #fcfcfd;
}
.hotline-popup:before {
    content: "";
    width: 55px;
    height: 55px;
    position: absolute;
    background: #0d2259 url(../images/phone-call-popup.svg) no-repeat center
        center;
    left: 1px;
    top: 1px;
    border-radius: 50% 50% 0 50%;
}
.homepage .h-account {
    background: rgb(247, 247, 247);
    padding: 3px 12px;
    box-sizing: content-box;
    border-radius: 5px;
}
.homepage .h-account .resource,
.homepage .h-account .name {
    color: #111;
}
.homepage ul.header-login-reg li a {
    color: #fcfcfd;
}
/* Homepage End */

/* Auth Page Start */
.auth-page .wrapper {
    background-image: url(../../assets/images/bg-auth.png);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 40% 40%;
    background-color: #f1f1f5;
    padding: 32px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}
.form-account {
    background-color: #fff;
    box-shadow: 0px 3px 4px rgb(153 155 168 / 25%);
    max-width: 400px;
    min-height: 446px;
    height: 100%;
    padding: 24px;
    border-radius: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-direction: column;
}
.form-account .rs-done {
    width: 100%;
}
.account-input {
    display: flex;
    flex-direction: column;
}
.form-account .site-logo img {
    height: 80px;
}
.form-account .site-logo {
    margin-bottom: 15px;
}
.form-account .have-account {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #101828;
}
.form-account .have-account a {
    color: var(--c);
    font-weight: 600;
}
.form-account .welcome {
    font-weight: 600;
    font-size: 28px;
    line-height: 120%;
    letter-spacing: -0.01em;
    color: #25324b;
    margin: 18px 0;
    width: 100%;
}
.form-account .desc {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #667085;
    margin-bottom: 4px;
}
.form-account .account-input {
    margin: 20px 0 5px;
}
.form-account .account-input label {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #475467;
    margin-bottom: 4px;
}
.form-account .account-input input.field {
    margin-bottom: 12px;
    height: 48px;
    padding: 12px 16px;
    border: 1px solid #d0d5dd;
    width: 100%;
    border-radius: 0;
}
.form-account .account-input input.field::placeholder {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #98a2b3;
}
.form-account .account-input input.field-pw {
    position: relative;
}
.form-account .account-input .eye-check {
    position: absolute;
    right: 9px;
    top: 9px;
    z-index: 99;
    background: unset;
    box-shadow: unset;
    border: 0;
}
.form-account .account-input .eye-check:hover {
    cursor: pointer;
}
.eye-check.disable::after,
.eye-check.disable-2::after {
    content: "";
    width: 28px;
    height: 1.5px;
    position: absolute;
    background-color: #7c8493;
    transform: rotate(-45deg);
    top: 50%;
    left: 8%;
}
.form-account .account-input .under-form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 2px 0 22px;
}
.form-account .account-input input.submit {
    background: var(--bg);
    color: #fff;
    height: 48px;
    border-radius: 1px;
    box-shadow: unset;
    border: 0;
    padding: 12px 24px;
    width: 100%;
}
.form-account .account-input .under-form label {
    margin-bottom: 0;
    margin-left: 4px;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #1d2939;
}
.default-continue {
    text-align: center;
    margin: 24px 35px 0;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
    color: #98a2b3;
}
.default-continue a {
    font-weight: 600;
}
.quenmatkhau-layout input.field-email {
    margin-bottom: 24px !important;
}
.rs-matkhau-layout input.submit {
    margin-top: 24px;
}
.rs-done-layout {
    position: relative;
}
.rs-done-layout .closex {
    position: absolute;
    top: 20px;
    right: 32px;
}
.rs-done {
    margin-top: 32px;
}
.rs-done-layout .rs-done .desc {
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
    text-align: center;
    color: #344054;
}
.homeback {
    background: var(--bg);
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    margin-top: 20px;
}
a.homeback::before {
    content: "";
    background: url(../../assets/images/homeicon.svg) no-repeat;
    width: 20px;
    height: 17px;
    margin-right: 8px;
}
.homeback,
a.homeback,
a.homeback:hover {
    color: #fcfcfd;
}
.closex:hover img {
    background: #eee;
    padding: 6px;
    border-radius: 50%;
    transform: translate(6px);
}
/* Auth Page End */

/* -------------------------------------------------------------------------- */
/*                                  PAGE END                                  */
/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/*                               USER PAGE START                              */
/* -------------------------------------------------------------------------- */
.layout-user {
    background-color: #f3f3f7;
    min-height: 20vh;
}
.layout-user * {
    font-family: var(--font2);
}
.layout-user .snt-sidebar,
.layout-user .snt-content {
    margin-bottom: 32px;
}
.layout-user .body-wrapper {
    padding: 16px 0 25px;
}
.layout-user .widget-user {
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    border-radius: 8px;
}
.layout-user .widget-user > div.menu-item:first-child {
    border-radius: 8px 8px 0 0 !important;
}
.layout-user .widget-user > div.menu-item:last-child {
    border-radius: 0 0 8px 8px !important;
}
.widget-user .menu-item {
    background: #fff;
    border-top: 1px solid #eee;
    max-height: 48px;
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: #434657;
    transition: 0.3s all;
}
.widget-user .menu-item:not(.nobefore):hover,
.widget-user .menu-item.active {
    background: var(--bg1);
}
.widget-user a.item-icon:hover svg path {
    fill: #fff !important;
}
.widget-user .menu-item a,
.widget-user .menu-item {
    color: #434657;
    display: flex;
    align-items: center;
}
.widget-user .menu-item a {
    width: 100%;
    padding: 12px 16px;
}
.widget-user .menu-item.nobefore {
    min-height: 80px;
}

/* .widget-user .menu-item:not(.nobefore) a::before {
    content: '';
    width: 24px;
    height: 24px;
    margin-right: 12px;
}
.widget-user #mi-tttk .item-icon::before {
    background: url(../../assets/images/mi-tttk.svg) no-repeat;
}
.widget-user #mi-thongbao .item-icon::before {
    background: url(../../assets/images/mi-thongbao.svg) no-repeat;
}
.widget-user #mi-quanlydonmuaho .item-icon::before {
    background: url(../../assets/images/mi-quanlydonmuaho.svg) no-repeat;
}
.widget-user #mi-quanlydonkygui .item-icon::before {
    background: url(../../assets/images/mi-quanlydonkygui.svg) no-repeat;
}
.widget-user #mi-vidientu .item-icon::before {
    background: url(../../assets/images/mi-vidientu.svg) no-repeat;
}
.widget-user #mi-quanlykhieunai .item-icon::before {
    background: url(../../assets/images/mi-quanlykhieunai.svg) no-repeat;
}
.widget-user #mi-dangxuattaikhoan .item-icon::before {
    background: url(../../assets/images/mi-dangxuattaikhoan.svg) no-repeat;
} */
.widget-user .item-icon svg {
    margin-right: 10px;
}
.widget-user menu-item:hover .item-icon svg path {
    fill: var(--bg1);
}
.item-icon .num-notice {
    background-color: var(--bg1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px;
    border-radius: 50%;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    color: #1b1d29;
    padding: 5px;
}
.widget-user .menu-item:hover .num-notice,
.widget-user .menu-item.active .num-notice {
    background: #fff;
}
.header-panel {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.body-panel section {
    border-radius: 8px;
    margin-bottom: 16px;
    box-shadow: inset 0px -1px 0px #ebebf0;
}
.snt.nav-pills .nav-link {
    border-radius: 0;
    padding: 15px;
    color: #82869e !important;
    box-shadow: inset 0px -1.20637px 0px #e4e5f0;
}
.nav-pills-stk.nav-pills .nav-link.active,
.nav-pills-stk.nav-pills .show > .nav-link {
    background-color: unset;
    padding: 0;
}
ul.nav-pills-stk.nav-pills {
    width: 100%;
    justify-content: space-between;
}
ul.nav-pills-stk.nav-pills li {
    width: calc(25% - 12px);
    margin: 6px 0;
}
ul.nav-pills-stk.nav-pills li .nav-link {
    padding: 0 0px !important;
}

ul.nav-pills-stk.nav-pills button.nav-link img.bank-cash {
    width: 100%;
    border: 1px solid #eee !important;
    border-radius: 4px;
}
ul.nav-pills-stk.nav-pills button.nav-link.active img.bank-cash {
    border: 1px solid #ffd121 !important;
}

.snt.nav-pills .nav-link.active,
.snt.nav-pills .show > .nav-link {
    background: #fff;
    border-radius: 8px 8px 0 0;
}
.snt.nav-pills .nav-link.active,
.snt.nav-pills .nav-link:focus {
    color: var(--c-dark) !important;
    box-shadow: inset 0px -2px 0px #ffd121;
}

ul.snt.nav-pills {
    justify-content: space-around;
    align-items: center;
    width: 100%;
}
ul.snt.nav-pills li.nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
}
ul.snt.nav-pills li.nav-item:hover .nav-link {
    color: #000 !important;
    transition: 0.5s;
}

.snt.nav-pills.twotab > li.nav-item {
    width: 50% !important;
}
.snt.nav-pills.twotab .nav-link {
    width: 100%;
}
.snt.nav-pills.threetab > li.nav-item {
    width: 33.33%;
}
.snt.nav-pills.fourtab .nav-link {
    width: 100%;
}
.snt.nav-pills.fourtab > li.nav-item {
    width: 25%;
    min-width: 25%;
}
section.tab-all-orders {
    box-shadow: unset;
}
.tab-all-orders ul {
    background-color: #fff;
    margin-bottom: 15px;
}
span.ck-atm img,
span.ck-office img,
span.ck-vnpay img {
    width: 32px;
    margin-right: 5px;
}
.snt.nav-pills.threetab .nav-link {
    width: 100%;
    font-weight: 500;
    font-size: 13px;
    line-height: 20px;
    color: #1b1d29;
}
.u-heading h2,
.u-heading {
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    color: #434657;
    margin-bottom: 0;
}
.u-heading h2,
.u-heading svg {
    margin-right: 5px;
}
.snt-panel .header-panel .panel-button {
    border: 1px solid #bcbfd6;
    font-weight: 500;
    font-size: 15px;
    line-height: 24px;
    color: #434657;
    display: flex;
    align-items: center;
    transition: 0.3s all;
}
.snt-panel .header-panel .panel-button:hover {
    background-color: var(--bg1);
    border: 1px solid var(--bg1);
}
.snt-panel .header-panel .panel-button svg {
    margin-right: 8px;
}
.snt-panel .user-profile-setting > .tab-content {
    padding: 0 16px 20px 16px;
}
.snt-panel .banks-tabs > .tab-content {
    padding: 0 16px 20px 16px;
}
.tab-content form#form_pay_internet_banking,
.tab-content form#form_pay_vnpay {
    max-width: 580px;
    width: 100%;
}
.az-form button.submit {
    background-color: var(--bg1);
    font-weight: 500;
    font-size: 15px;
    line-height: 24px;
    text-align: center;
    color: #1b1d29;
    padding: 8px 70px;
}
.az-form label {
    font-weight: 500;
    font-size: 13px;
    line-height: 20px;
    text-align: justify;
    color: #1b1d29;
    margin-bottom: 4px;
}
.az-form input.form-control {
    border: 1px solid #e4e5f0;
    border-radius: 4px;
    height: 40px;
    margin-bottom: 13px;
}
.az-form textarea {
    width: 100%;
    border: 1px solid #e4e5f0;
    border-radius: 4px;
    padding: 0.375rem 0.75rem;
}
.az-form input.form-control.haveicon {
    padding-right: 8px;
}
.az-form textarea::placeholder,
.az-form input.form-control::placeholder {
    font-weight: 400 !important;
    font-size: 13px;
    line-height: 20px;
    color: #a7abc3;
}
.az-form label .required {
    color: #da4343;
    margin-left: 2px;
}
.az-form .form-check-input:checked {
    background-color: var(--bg1) !important;
    border-color: var(--bg1) !important;
}
.az-form .form-check-input:focus {
    box-shadow: unset !important;
}
.az-form button[type="submit"],
.withdraw-form .button[type="submit"] {
    font-weight: 500;
    font-size: 15px;
    line-height: 24px;
    color: #1b1d29;
}
.wallet_form_trans .form-control:focus,
.az-form .form-control:focus {
    background-color: #fff8db59 !important;
    box-shadow: unset;
    border-color: var(--bg1) !important;
}
.creat_new_order {
    font-weight: 700;
    font-size: 15px;
    line-height: 24px;
    color: #38383d;
}
.snt.filter-forms .form-label {
    font-weight: 500;
    font-size: 13px;
    line-height: 20px;
    color: #434657;
    margin-bottom: 8px;
}
.snt.filter-forms input {
    background: #ffffff;
    border: 1px solid #e4e5f0;
    border-radius: 4px !important;
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    display: flex;
    align-items: center;
    padding-right: 40px;
}
.snt.filter-forms input:focus,
.snt.filter-forms input:active {
    box-shadow: unset;
    background-color: #fff7da;
    border: 1px solid #ffc600;
    padding-right: 12px;
}
/* Chrome, Safari, Edge, Opera */
.snt.filter-forms input::-webkit-outer-spin-button,
.snt.filter-forms input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}
/* Hide Calendar Icon In Chrome */
.snt.filter-forms input[type="date"]::-webkit-inner-spin-button,
.snt.filter-forms input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}
/* Firefox */
.snt.filter-forms input[type="date"],
.snt.filter-forms input[type="number"] {
    -moz-appearance: textfield;
}
.filter-forms .input-group img.input-svg,
.filter-forms .input-group svg {
    right: 8px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: 0.3s;
    pointer-events: none;
}
.filter-forms .input-group:focus img.input-svg,
.filter-forms .input-group:active img.input-svg,
.filter-forms .input-group:focus svg,
.filter-forms .input-group:active svg {
    display: none;
    transition: 0.3;
}
.dropdown-menu.vertical {
    border: 1px solid #f3f3f3 !important;
}
.dropdown-menu.vertical li.submenu-item {
    height: 40px;
    border-top: 0;
    border-bottom: 1px solid #f3f3f3;
    display: flex;
    align-items: center;
    padding: 8px;
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
}
.dropdown-menu.vertical li.submenu-item:hover {
    background-color: var(--bg-gray);
}
.line-user-profile {
    width: 100%;
    position: relative;
}
.line-user-profile .avatar img {
    min-width: 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 10px;
}
.line-user-profile .name {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #344054;

    width: 170px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.line-user-profile .user-resource {
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: #667085;
}
.line-user-profile .user-resource::before {
    content: "";
    width: 24px;
    height: 24px;
    background: url(../../assets/images/xu.png) no-repeat top center;
    background-size: 15px;
    padding: 0 26px 0 0;
    margin-left: -8px;
}
#mi-user .btn-group,
#mi-user {
    width: 100%;
    height: 48px;
    position: relative;
}
#mi-user a.line-user-info::after {
    content: "";
    width: 10px;
    height: 18px;
    background: url(../../assets/images/menu-arrow-right.svg) no-repeat top
        center;
    transition: 0.3s;
    padding-left: 10px;
    position: absolute;
    right: 25px;
}
#mi-user:hover a.line-user-info::after {
    right: 18px !important;
}
#mi-user a.line-user-info:not(.collapsed)::after {
    transform: rotate(90deg);
}
.collapse.drop-subitem .menu-item {
    background-color: #fff7e5e0;
    border-top: 1px solid #ffeea3;
}
.collapse.drop-subitem .menu-item:hover {
    background-color: var(--bg1);
}
.inputgroup {
    position: relative;
    display: flex;
    align-items: center;
}
.inputgroup.dateborn::after {
    content: "";
    width: 19px;
    height: 16px;
    background: #fff url(../../assets/images/calendar.svg) no-repeat center
        center;
    right: 10px;
    bottom: 25px;
    position: absolute;
    pointer-events: none;
    background-size: cover;
}
.filter-forms.snt .btn-outline-secondary {
    border-color: #ffd121;
    color: var(--c1);
    font-weight: 500;
    font-size: 15px;
    line-height: 24px;
}
.filter-forms.snt .btn-outline-secondary:hover {
    background: var(--bg1);
    border-color: var(--bg1);
    color: var(--c-dark);
}
.filter-forms.snt .btn-link {
    color: var(--c1);
}
.filter-forms.snt .btn-link:hover {
    color: var(--c-dark);
}
section.tip-khieunai .left {
    margin-right: 16px;
}
section.tip-khieunai .title {
    font-weight: 500;
    font-size: 15px;
    line-height: 24px;
    color: #434657;
    margin-bottom: 4px;
}
section.tip-khieunai .desc {
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: #82869e;
    margin-bottom: 8px;
}
section.tip-khieunai .btn-go {
    background: var(--bg1);
    font-weight: 500;
    font-size: 13px;
    line-height: 20px;
    color: #1b1d29;
    max-width: 100%;
    width: 250px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
}
section.tip-khieunai .btn-go:hover {
    background: var(--bg1-hover);
}
section.tip-khieunai .btn-go svg {
    margin-left: 10px;
}
.tip-img {
    min-width: 84px;
    width: 84px;
    height: 84px;
}
.result-search-kn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 200px;
    max-width: 220px;
    margin: 0 auto;
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: #82869e;
}
.result-search-kn img.kqkn {
    margin-bottom: 20px;
}
.btn.top-btn-complain-order {
    background: var(--bg3);
    color: #fafafa;
    display: flex;
}
.btn.top-btn-complain-order:focus,
.btn.top-btn-complain-order:hover {
    background: var(--bg3-hover);
    border-color: var(--bg3-hover);
    color: #fafafa;
}
.top-btn-complain-order::before {
    content: "";
    width: 20px;
    height: 20px;
    background-image: url(/public/../../assets/images/mailbox.svg);
    background-repeat: no-repeat;
    align-items: center;
    margin-right: 8px;
}
.btn.top-btn-order-deposit {
    background: var(--bg1);
    border-color: var(--bg1);
    display: flex;
}
.top-btn-order-deposit svg {
    margin-right: 8px;
}
.btn.top-btn-order-deposit:focus,
.btn.top-btn-order-deposit:hover {
    background: var(--bg1-hover);
    border-color: var(--bg1-hover);
}
/* -- custom table start */
.table {
    border-bottom: 0;
}
.custom-table tbody,
.custom-table tbody tr:last-child {
    border-bottom: 0 solid #e4e5f0 !important;
    border-radius: 0 0 8px 8px;
}
table.custom-table {
    margin-bottom: 0;
}
/* -- custom table end */

/* -- table v1 start */
.table-v1 {
    border-radius: 8px;
    margin-bottom: 0 !important;
    border: 0;
}
.table-v1 thead {
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid #eee;
    height: 46px;
    background: #f8f8fc;
}
.table-v1 thead th {
    font-weight: 500;
    font-size: 13px;
    line-height: 20px;
    color: #434657;
}
.table-v1 tbody,
.table-v1 tbody tr:last-child {
    border-bottom: 0 solid #e4e5f0 !important;
    border-radius: 0 0 8px 8px;
}
.table-v1 th,
.table-v1 td {
    border-left: 1px solid #e4e5f0;
    border-right: 1px solid #e4e5f0;
}
.table-v1 thead th {
    border-top: 1px solid #e4e5f0;
}
.table-v1 td {
    background-color: #fff;
    font-weight: 400;
    font-size: 13px;
    line-height: 22px;
    color: #434657;
}
.table-v1 tr td:nth-child(1) {
    min-width: 40px;
    width: 40px;
}
.table-v1 tr td:nth-child(2) {
    min-width: 160px;
    width: 160px;
}
.table-v1 tr td:nth-child(3) {
    min-width: 100px;
    width: 100px;
}
.table-v1 tr td:nth-child(4) {
    min-width: 105px;
    width: 105px;
}
.table-v1 tr td:nth-child(5) {
    min-width: 150px;
    width: 150px;
}
.table-v1 tr td:nth-child(6) {
    min-width: 112px;
    width: 112px;
}
.table-v1 tr td:nth-child(6) span {
    border-radius: 4px;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    padding: 6px 8px;
}
.table-v1 tr td:nth-child(7) {
    min-width: 102px;
    width: 102px;
}
.table-v1 tr td:nth-child(8) {
    min-width: auto;
    width: auto;
}
.table-v1 .stt-thanhcong {
    background: #effff4;
    color: #00ab56;
}
.table-v1 .stt-dangxuly {
    background: #f3f3f7;
}
.table-v1 .stt-warning {
    background: #ffe9e6;
    color: #f75f5f;
    padding: 4px 8px 3px !important;
}
.table-v1 tbody tr:hover {
    background-color: var(--tr-hover);
}
/* -- table v1 end */

/* -- table v2 start */
.table-list-product,
.table-responsive {
    border-radius: 8px;
}
.table-v2 {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
}
.table-v2 thead {
    border-radius: 8px 8px 0 0;
}
.table-v2 thead th {
    padding-top: 16px;
    padding-bottom: 16px;
}
.table-v2 thead tr {
    box-shadow: inset 0px -1px 0px #e4e5f0;
}
.table-v2 thead tr th:nth-child(1) {
    font-weight: 500;
    font-size: 15px;
    line-height: 24px;
    color: #434657;
}
.table-v2 thead tr th:not(:nth-child(1)) {
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: #1b1d29;
    text-align: right;
}

.table-v2 tr th:first-child,
.table-v2 tr td:first-child {
    padding-left: 20px;
}
.table-v2 tr th:last-child,
.table-v2 tr td:last-child {
    padding-right: 20px;
}
.table-v2 tr td:not(:nth-child(1)) {
    text-align: right;
}
.table-v2 tbody tr {
    box-shadow: inset 0px -1px 0px #e4e5f0;
}
.table-v2 tbody tr:hover {
    background-color: var(--tr-hover);
}
.table-v2 .vnprice {
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    color: #434657;
}
.table-v2 .cnprice {
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #82869e;
}
.table-v2 td {
    vertical-align: middle !important;
    min-height: 110px !important;
}
.table.table-v2 > :not(caption) > * > * {
    border-bottom: 0;
}
.table-list-product.table-v2 tr td:nth-child(1) {
    min-width: 250px;
}
.table-list-product.table-v2 tr td:nth-child(2) {
    min-width: 125px;
}
.table-list-product .table-v2 tr td:nth-child(3) {
    min-width: 125px;
}
.table-list-product .table-v2 tr td:nth-child(4) {
    min-width: 110px;
}
.table-list-product .table-v2 tr td:nth-child(5) {
    min-width: 110px;
}
.table-list-product .table-v2 tr td:nth-child(6) {
    min-width: 125px;
    width: auto;
}

.table-v2 tbody td.product {
    display: flex;
    align-items: center;
}
.table-v2 tbody td.product .thumb {
    min-width: 84px;
    width: 84px;
    height: 84px;
    margin-right: 12px;
}
.table-v2 tbody td.product .thumb img {
    border-radius: 4px;
    border: 1px solid #e4e5f0;
}
.table-v2 tbody td.product .title {
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: #434657;
    min-width: 150px;
    max-width: 150px;
    max-height: 63px !important;
    overflow: hidden;
}
.table-v2 tbody td.product a .title,
.table-v2 tbody td.product .title a {
    color: #434657;
}
.table-v2 tbody td.product .property {
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #82869e;
}
.table-v2 tbody td.order {
    font-weight: 500;
    font-size: 15px;
    line-height: 24px;
    color: #434657;
}
.table-v2 tbody td.quanity {
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: #434657;
}
.table-v2 tbody td.note input {
    width: 100%;
    background: #ffffff;
    border: 1px solid #e4e5f0;
    border-radius: 4px;
    padding: 0 10px;
    height: 40px;

    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #444;
}
.table-v2 tbody td.note input::placeholder {
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: #a7abc3;
}
.table-v2 tbody td p {
    margin-bottom: 0px;
}
/* -- table v2 end */
/* -- table v3 start */
.table-v3 thead th:not(:last-child),
.table-v3 tbody tr td:not(:last-child) {
    border-right: 1px solid #e4e5f0;
}
.table-v3 thead tr th {
    font-weight: 700;
    font-size: 13px;
    line-height: 20px;
    color: #434657;
}
.table-v3 tbody tr td {
    font-weight: 400;
    font-size: 13px;
    line-height: 22px;
    color: #434657;
}
.table-v3 tbody tr:hover {
    background: var(--tr-hover);
}
/* -- table v3 end */

/* -- table v4 start */
.table-v4 {
    border: 0 !important;
    margin: 15px 0;
}
.table.table-v4 tbody tr,
.table.table-v4 > :not(caption) > * > * {
    border-bottom-width: 0 !important;
}
.table-v4 thead tr th {
    font-weight: 700;
    font-size: 13px;
    line-height: 20px;
    color: #434657;
}
.table-v4 tbody tr td {
    font-weight: 400;
    font-size: 13px;
    line-height: 22px;
    color: #434657;
    padding: 3px 0;
}
table.table-v4 tbody tr:hover {
    background: var(--tr-hover);
    border-bottom: 0px solid #e4e5f0 !important;
}
.table-v4 tbody tr td:nth-child(2),
.table-v4 tbody tr td:nth-child(3) {
    text-align: right;
}
.table-v4 tbody tr td:nth-child(1) {
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: #82869e;
}
.table-v4 tbody tr td:not(:nth-child(1)) {
    font-weight: 500;
    font-size: 13px;
    line-height: 24px;
    text-align: right;
    color: #434657;
}
.vat-desc {
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    text-align: right;
    color: #82869e;
}
/* -- table v4 end */

/* -- table v5 start */
.table-v5 {
    border: 1px solid transparent !important;
    box-shadow: unset !important;
}
.table-v5 th {
    font-weight: 700;
    font-size: 15px;
    line-height: 24px;
    color: #434657;
}
.table-v5 tr th:nth-child(1) {
    text-align: left;
}
.table-v5 tr th:nth-child(2) {
    text-align: center;
}
.table-v5 tr th:nth-child(3) {
    text-align: right;
}

.table-v5 tbody tr td {
    padding: 6px 10px;
    vertical-align: middle;
}
.pay-total-order {
    padding: 0 0 5px;
    background-color: #fff;
    box-shadow: inset 0px -1px 0px #ebebf0;
}
.table-v5 tbody,
.table-v5 tbody tr:last-child {
    border-bottom: 1px solid transparent !important;
}
.table-v5 tbody tr td:nth-child(1) {
    text-align: left;
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: #434657;
}
.table-v5 tbody tr td:nth-child(2) {
    text-align: center;
    font-weight: 700;
    font-size: 13px;
    line-height: 20px;
    color: #434657;
}
.table-v5 tbody tr td:nth-child(3) {
    text-align: right !important;
    font-weight: 700;
    font-size: 15px;
    line-height: 24px;
    color: #f83142;
}
.table-v5 tbody tr {
    box-shadow: unset;
    border-bottom: 0px solid transparent !important;
}
.table-v5 thead {
    width: 100%;
    vertical-align: middle !important;
    height: 56px;
    border-bottom: 1px solid #e4e5f0;
}
/* -- table v5 end */
.pay_history_order .table-v3 tr th:nth-child(1),
.pay_history_order .table-v3 tr td:nth-child(1) {
    min-width: 140px;
}
.pay_history_order .table-v3 tr th:nth-child(2),
.pay_history_order .table-v3 tr td:nth-child(2) {
    min-width: 125px;
}
.pay_history_order .table-v3 tr th:nth-child(3),
.pay_history_order .table-v3 tr td:nth-child(3) {
    min-width: 125px;
}
.pay_history_order .table-v3 tr th:nth-child(4),
.pay_history_order .table-v3 tr td:nth-child(4) {
    min-width: 160px;
    width: auto;
}
.pay_history_order table tbody tr td:nth-child(2) {
    font-weight: 500;
    font-size: 14px;
}
.header-panel > div {
    margin-bottom: 8px;
}
.header-panel .search-v1 {
    background-color: #fff;
    border-radius: 4px;
    height: 40px;
    display: flex;
    align-items: center;
    border: 1px solid #e4e5f0;
    width: 470px;
    max-width: min(calc(100vw - 40px), 100%);
    margin: 0 auto -1px;
}
.search-v1 input {
    border: 0;
    font-weight: 400;
    font-size: 15px;
    line-height: 20px;
    color: #444;
}
.search-v1 input:active,
.search-v1 input:focus {
    box-shadow: unset;
}
.search-v1 input::placeholder {
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: #a7abc3;
}
.search-v1 .search_btn {
    background-color: var(--bg1);
    height: 31px;
    width: 31px;
    border-radius: 4px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
    cursor: pointer;
}
.search-v1 .search_btn:hover {
    background-color: var(--bg1-hover);
}
.search-v1 input[type="date"] {
    color: rebeccapurple !important;
}
.top-notice-order {
    display: flex;
    border-radius: 8px;
}
.top-notice-order.green {
    border: 1px solid #30cd60;
}
.top-notice-order.red {
    border: 1px solid #da4343;
}
.top-notice-order.green .notice-content .title {
    color: #30cd60;
}
.top-notice-order.red .notice-content .title {
    color: #da4343;
}
.top-notice-order .thumb {
    min-width: 60px;
    width: 60px;
    height: 60px;
    margin-right: 10px;
    border: 0.5px solid #e4e5f0;
    padding: 4px;
    position: relative;
}
.top-notice-order .thumb img {
    border: 1px solid #e4e5f0;
    width: 100%;
}
.top-notice-order .thumb img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}
.top-notice-order .thumb .thumb-num {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 3;

    background-color: #f3f3f7;
    width: 28px;
    height: 28px;
    border-radius: 10px 0px 4px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    color: #82869e;
}
.top-notice-order .notice-content .title {
    font-weight: 500;
    font-size: 15px;
    line-height: 24px;
    margin-bottom: 2px;
}
.top-notice-order .notice-content .desc {
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: #434657;
}
.frame-border.thumb {
    margin-right: 10px;
    border: 0.5px solid #e4e5f0;
    padding: 4px;
    position: relative;
}
.frame-border .thumb-num {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 3;

    background-color: #f3f3f7;
    width: 28px;
    height: 28px;
    border-radius: 10px 0px 4px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    color: #82869e;
}
.frame-border .thumb img {
    border: 1px solid #e4e5f0;
    width: 100%;
}
.list-line-notices .frame-border {
    min-width: 60px;
    width: 60px;
    height: 60px;
}
.line-notice {
    height: 92px;
    padding: 0 16px;
    border-bottom: 1px solid #e4e5f0;
}
.line-notice:hover {
    background-color: #fffbf5;
}
.line-notice:last-child {
    border-bottom: 1px solid transparent;
}
.line-notice .notice-content .title {
    font-weight: 500;
    font-size: 13px;
    line-height: 20px;
    margin-bottom: 4px;
    color: #434657;
}
.line-notice .notice-content .title,
.line-notice .notice-content .title a,
.line-notice .notice-content a.title {
    color: #434657;
    margin-bottom: 0;
}
.line-notice .notice-content .desc {
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: #82869e;
    margin-bottom: 4px;
}
.line-notice .time-notice {
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    text-align: right;
    color: #82869e;
}
.quick-info-order .title {
    font-weight: 700;
    font-size: 15px;
    line-height: 24px;
    color: #1b1d29;
    margin-bottom: 8px;
}
.quick-info-order .title svg {
    margin-right: 8px;
}
.quick-info-order .col-inner {
    border-radius: 8px;
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: #434657;
    min-height: 232px;
}
.quick-info-order .col-inner strong {
    font-weight: 600;
}
.quick-info-order .col-inner p {
    margin-bottom: 3px;
}
.quick-info-order .col-inner a name,
.quick-info-order .col-inner .name {
    color: #434657;
}
.quick-info-order form textarea {
    max-height: 80px;
    border: 1px solid #e4e5f0;
    border-radius: 4px;
    width: 100%;
    max-width: 100%;
}
.quick-info-order .form-check-input:checked {
    background-color: var(--bg1);
    border-color: var(--bg1);
}
.quick-info-order .form-check-input:focus {
    box-shadow: unset;
}
.loaidon {
    padding: 2px 4px;
    background: var(--bg1);
    border-radius: 4px;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #1b1d29;
}
select.insurance-costs {
    border: 1px solid #e4e5f0;
    border-radius: 4px;
    padding: 2px 4px;
    margin-left: 5px;
    color: #3c3b3b;
}
select.insurance-costs option {
    background-color: #fff;
}
.more-info {
    margin: 0 4px;
}
.more-info:hover svg path {
    fill: #333 !important;
}
.nv-staff {
    display: flex;
    margin-bottom: 10px;
}
.nv-staff .avatar {
    min-width: 40px;
    width: 40px;
    height: 40px;
    margin-right: 8px;
}
.nv-staff .avatar img {
    border-radius: 50%;
}
.nv-staff .phone,
.nv-staff .phone a {
    color: #434657;
}

.section-title {
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    color: #38383d;
    margin-bottom: 16px;
}
.price-and-total {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.price-and-total > .left,
.price-and-total > .right {
    width: calc(50%);
    margin-bottom: 10px;
}
.price-and-total > div .th-title {
    text-align: center;
    width: 100%;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
}
.price-and-total .table-responsive {
    padding: 0 15px;
}
.bot_btn-group {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: end;
}
.bot_btn-group btn {
    color: #434657;
}
.bot_btn-group .btn-outline-dark {
    border: 1px solid #bcbfd6;
}
.noteblock {
    padding: 16px;
    background: #fffbf5;
    border: 1px solid #fff6ec;
    border-radius: 8px;

    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: #38383d;
}
.noteblock p {
    margin-bottom: 5px;
}
.noteblock ul {
    margin: 8px 0 8px -1.3em;
}
.noteblock ul li {
    margin-bottom: 5px;
}
.noteblock p.title {
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #ffa940;
}
.line-andress {
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: #434657;
}
.line-andress svg {
    margin-right: 5px;
}
.title-step {
    font-weight: 700;
    font-size: 15px;
    line-height: 24px;
    color: #38383d;
    margin: 16px 0;
}
.title-step .step {
    background: #e8f4ff;
    border-radius: 4px;
    font-weight: 700;
    font-size: 13px;
    line-height: 20px;
    text-align: center;
    color: #1990ff;
    padding: 3px 6px;
}
.select-banks {
    margin: 10px 0;
}
.nav-pills-stk.nav-pills button.nav-link.active {
    position: relative;
}
.nav-pills-stk.nav-pills button.nav-link.active::after {
    content: "";
    background: url("../../assets/images/bank-tick.svg") no-repeat;
    width: 38px;
    height: 38px;
    position: absolute;
    right: -2px;
}
.banktrans-tip {
    background: #fffbf5;
    border: 1px solid #ffeed9;
    border-radius: 8px;
    padding: 16px;
    margin: 8px 0 16px;
    font-size: 13px;
    line-height: 19px;
    text-align: center;
    color: #434657;
}
.banktrans-tip div {
    max-width: 60%;
    margin: 0 auto;
}
.banktrans-tip a.link-contact {
    display: block;
}
.wallet_form_trans label {
    font-weight: 500;
    font-size: 13px;
    line-height: 20px;
    color: #1b1d29;
    margin-bottom: 4px;
}
.wallet_form_trans select,
.wallet_form_trans input,
.wallet_form_trans textarea {
    background: #ffffff;
    border: 1px solid #e4e5f0;
    border-radius: 4px;
    margin-bottom: 16px;
    width: 100%;
    font-size: 14px;
    font-weight: 500;
}
.wallet_form_trans select:focus,
.wallet_form_trans input:focus,
.wallet_form_trans textarea:focus,
.wallet_form_trans textarea:focus:focus-visible {
    background-color: #fff8db59 !important;
    box-shadow: unset !important;
    border-color: var(--bg1) !important;
}
.wallet_form_trans textarea::placeholder,
.wallet_form_trans select::placeholder,
.wallet_form_trans input::placeholder {
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: #a7abc3;
}
.wallet_form_trans button[type="submit"] {
    font-weight: 500;
    font-size: 15px;
    line-height: 24px;
    color: #1b1d29;
}
.wallet_form_trans button[type="submit"] svg {
    margin-right: 8px;
}
.bank-and-qr .bank-img {
    width: 44px;
    height: 44px;
}
.copy-banks {
    background: #f8f8fc;
    border-radius: 8px;
    padding: 16px;
    margin: 8px 0 16px;
    width: 650px;
    max-width: 100%;
}
.copy-banks .qr {
    margin-bottom: 25px !important;
}
.copy-banks .tk-bank div.item,
.copy-banks .qr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0;
}
.copy-banks .tk-bank div.item div.left {
    width: 100%;
    margin-right: 140px;
}
.copy-banks .tk-bank .item .btn_copy,
.copy-banks .qr .qr-icon {
    width: fit-content;
    max-width: 80px;
}
.btn.btn_copy {
    font-weight: 500;
    font-size: 12px !important;
    line-height: 16px;
    text-align: center;
    color: #1b1d29;
    background-color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}
.btn.btn_copy:hover {
    background: var(--bg1);
    border-color: var(--bg1-hover);
}
.copy-banks .tk-bank div.item,
.copy-banks .qr .qr-icon {
    min-width: fit-content;
    margin-left: 5px;
}
.copy-banks .qr-lightbox .qr-img .qr-frame {
    background: #f8f8fc;
    border-radius: 16px;
    padding: 16px;
}
.copy-banks .qr-lightbox .qr-img img {
    box-shadow: 0px 2px 8px rgba(40, 40, 43, 0.16);
    border-radius: 8px;
    background: #fff;
    padding: 8px;
}
.copy-banks .bank-logo {
    min-width: 44px;
    width: 44px;
    height: 44px;
    margin-right: 8px;
    border-radius: 1px;
}
.copy-banks .bank-logo img {
    border-radius: 1px;
}
.copy-banks .bank-name {
    font-weight: 600;
    font-size: 15px;
    line-height: 24px;
    color: #1b1d29;
}
.copy-banks .bank-name span.cn {
    font-weight: 500;
    font-size: 13px;
    line-height: 20px;
    color: #82869e;
    display: block;
}
.copy-banks button.qr-clickscan {
    padding: 0;
}
.copy-banks button.qr-clickscan:visited,
.copy-banks button.qr-clickscan:focus,
.copy-banks button.qr-clickscan:hover,
.copy-banks button.qr-clickscan:active {
    border: 0;
    box-shadow: none;
    outline: none;
}
.copy-banks .tk-bank .item .left > .row > div:nth-child(1) {
    font-weight: 500;
    font-size: 13px;
    line-height: 20px;
    color: #a7abc3;
}
.copy-banks .tk-bank .item .left > .row > div:nth-child(2) {
    font-weight: 500;
    font-size: 13px;
    line-height: 20px;
    color: #1b1d29;
    text-transform: uppercase;
}
.copy-banks-inner {
    padding: 16px 64px;
}
.qr-lightbox .qr-tip .title {
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    color: #434657;
}
.qr-lightbox .qr-tip ul {
    margin: 16px 0;
    padding-left: 0;
}
.qr-lightbox .qr-tip ul li {
    list-style: none;
}

.qr-lightbox .qr-tip ul li {
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: #a7abc3;
    margin: 8px 0;
    display: flex;
}
.qr-lightbox .qr-tip ul li strong {
    font-weight: 500;
    font-size: 13px;
    line-height: 20px;
    color: #1b1d29;
}
.tip-scan-qr span.num {
    background-color: #4383ff;
    color: #fff;
    min-width: 20px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-content: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 8px;
}
.copy-banks .modal-dialog {
    max-width: 600px;
}
.qr-lightbox .modal-title {
    font-weight: 700;
    font-size: 15px;
    line-height: 24px;
    color: #1b1d29;
}
.qr-lightbox .modal-title svg,
.qr-lightbox .modal-title img {
    margin-right: 8px;
}
.qr-lightbox .modal-header {
    width: 100%;
}
.qr-lightbox .modal-header > div.d-flex {
    justify-content: space-between;
    width: calc(100% - 5px);
}
.x-close {
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    position: absolute;
    right: -10px;
    top: -10px;
    filter: drop-shadow(0px 2px 8px rgba(40, 40, 43, 0.16));
}
.x-close button {
    padding: 0 !important;
    margin: 0 !important;
}
.qr-lightbox a.change {
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: #1990ff;
}
/* --drop and drag file input start */
.drop-zone {
    background-color: #e8f4ff;
    max-width: 100%;
    height: 110px;
    margin: 10px 0;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    font-weight: 500;
    font-size: 20px;
    cursor: pointer;
    color: #cccccc;
    border: 1px dashed #1990ff;
    border-radius: 10px;
}
#avatar .drop-zone--over {
    width: 200px !important;
    margin: 0 auto;
}
#avatar .drop-zone__thumb {
    background-size: contain !important;
}
.action-change-avatar img {
    width: 16px;
}
.drop-zone.drop-zone--over {
    height: 200px !important;
}
.drop-zone:hover {
    filter: drop-shadow(0px 3px 6px rgba(40, 40, 43, 0.08));
    border: 1px dashed #0b66bb;
}
.drop-zone--over {
    border-style: solid;
}

.drop-zone__input {
    display: none;
}

.drop-zone__thumb {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    background-color: #cccccc;
    background-size: cover;
    position: relative;
}

.drop-zone__thumb::after {
    content: attr(data-label);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 5px 0;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.75);
    font-size: 14px;
    text-align: center;
}
span.drop-zone__prompt .drop-zone-content {
    display: flex;
    width: 100%;
}
span.drop-zone__prompt .drop-zone-content .thumb {
    min-width: 56px;
    width: 56px;
    margin-right: 8px;
}
span.drop-zone__prompt .drop-zone-content .thumb img {
    border-radius: 50%;
}
span.drop-zone__prompt .drop-zone-content .desc {
    font-weight: 500;
    font-size: 13px;
    line-height: 20px;
    color: #434657;
    margin-bottom: 5px;
}
span.drop-zone__prompt .drop-zone-content .desc a {
    text-decoration: underline !important;
}
span.drop-zone__prompt .drop-zone-content .desc .tip {
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: #a7abc3;
    display: block;
}
/* --drop and drag file input end */

.header-panel .back-heading {
    font-weight: 500;
    font-size: 15px;
    line-height: 24px;
    color: #1990ff;
}
.header-panel .right .complete-checkout {
    background: #dcdee9;
    border-color: #dcdee9;
    border-radius: 4px;

    font-weight: 500;
    font-size: 15px;
    line-height: 24px;
    text-align: center;
    color: #a7abc3;
}
.header-panel .right .complete-checkout:hover {
    background: #b3b5be;
    color: #494b57;
}
section.vnpay {
    font-weight: 400;
    font-size: 14px;
    color: var(--c-dark);
}
section.vnpay .top-layout {
    border-bottom: 1px solid #eee;
}
section.vnpay .bot-layout {
    border-top: 1px solid #eee;
}
section.vnpay .inner-layout {
    padding: 16px;
}
section.vnpay .top-layout .inner-layout,
section.vnpay .bot-layout .inner-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
section.vnpay .inner-layout .left,
section.vnpay .inner-layout .right {
    margin: 0px 0 !important;
}

section.vnpay img.vnpay-logo {
    max-height: 32px;
    margin-right: 10px;
}
section.vnpay .time-to-end {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 400;
    color: var(--c-dark);
}
section.vnpay .time-to-end .time {
    margin-left: 6px;
}

.wallet-trans-result {
    width: 100%;
    max-width: 740px;
    background-color: #fff;
    margin: 64px auto;
    border-radius: 4px;
}
.wallet-trans-result .top {
    background-image: url(../../assets/images/sucsess-tcat.png);
    height: 140px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wallet-trans-result .top .inner {
    text-align: center;
    color: #fff;
    padding: 5px 16px;
}
.wallet-trans-result .top .title {
    margin-top: 15px;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
}
.wallet-trans-result .top .sub-title {
    font-weight: 500;
    font-size: 15px;
    line-height: 24px;
}
.wallet-trans-result .bot {
    padding: 16px;
}
.wallet-trans-result .top .inner,
.wallet-trans-result .bot {
    max-width: 500px;
    margin: 0 auto;
}
.wallet-trans-result .bot .line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.wallet-trans-result .bot .line > div.label {
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: #82869e;
}
.wallet-trans-result .bot .line > div.value {
    font-weight: 500;
    font-size: 15px;
    line-height: 24px;
    text-align: right;
    color: #434657;
}
.wallet-trans-result .bot .line .bank-icon svg,
.wallet-trans-result .bot .line .bank-icon img {
    max-height: 32px;
}
.wallet-trans-result .bot .line .value.total {
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    color: #434657;
}
.wallet-trans-result a.backhome {
    display: flex;
    width: 100%;
    height: 40px;
    align-items: center;
    justify-content: center;

    border: 1px solid #ffd121;
    border-radius: 4px;
    font-weight: 500;
    font-size: 15px;
    line-height: 24px;
    text-align: center;
    color: #ffd121;
    margin: 30px 0 10px;
}
.wallet-trans-result a.backhome:hover {
    background-color: var(--bg1);
    color: #fff;
}
section.withdraw {
    font-weight: 400;
    font-size: 14px;
    color: var(--c-dark);
    margin-bottom: 32px;
}
section.withdraw .top-layout {
    border-bottom: 1px solid #eee;
}
section.withdraw .inner-layout {
    padding: 16px;
}
section.withdraw .top-layout .inner-layout,
section.withdraw .bot-layout .inner-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
section.withdraw .inner-layout .left,
section.withdraw .inner-layout .right {
    margin: 0px 0 !important;
}
section.withdraw .inner-layout .money-title,
section.withdraw .inner-layout .money-value {
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    color: #434657;
    margin: 5px 0;
}
section.withdraw .inner-layout .money-value span.time {
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: #434657;
}
section.withdraw .inner-layout .money-value sup {
    text-decoration: underline;
    margin-right: 5px;
}
.recharge-btn svg {
    margin-right: 5px;
}
.recharge-btn {
    font-weight: 500;
    font-size: 15px;
    line-height: 24px;
    color: #1b1d29;
    border: 1px solid #1b1d29 !important;
}
.btn.recharge-btn:hover {
    background-color: var(--bg1);
    border-color: var(--bg1-hover);
}
.withdraw-history .title {
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    color: #38383d;
    margin-bottom: 16px;
}
.table-v1.table-charge tbody tr td:nth-child(1) {
    min-width: 40px;
}
.table-v1.table-charge tbody tr td:nth-child(2) {
    min-width: 110px;
}
.table-v1.table-charge tbody tr td:nth-child(3) {
    min-width: 120px;
}
.table-v1.table-charge tbody tr td:nth-child(4) {
    min-width: 100px;
}
.table-v1.table-charge tbody tr td:nth-child(5) {
    min-width: 110px;
}
.table-v1.table-charge tbody tr td:nth-child(6) {
    min-width: 120px;
}
.table-v1.table-charge tbody tr td:nth-child(7) {
    min-width: 100px;
}
.table-v1.table-charge tbody tr td:nth-child(8) {
    min-width: 90px;
}
.table-v1.table-charge tbody tr td:nth-child(9) {
    min-width: 95px;
}

.select-thumb .vodiapicker {
    display: none;
}

.select-thumb #a {
    padding-left: 0px;
}

.select-thumb #a img,
.select-thumb .btn-select img {
    height: 32px;
}

.select-thumb #a li {
    list-style: none;
    padding-top: 5px;
    padding-bottom: 5px;
}

.select-thumb #a li:hover {
    background-color: #f4f3f3;
}

.select-thumb #a li img {
    margin: 5px;
}

.select-thumb #a li span,
.select-thumb .btn-select li span {
    margin-left: 10px;
}

/* item list */

.select-thumb .b {
    display: none;
    width: 100%;
    max-width: 350px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 5px;
}
.select-thumb .open {
    display: show !important;
}

.select-thumb .btn-select {
    background-color: #f8f8fc;
    margin-top: 10px;
    width: 100%;
    border: 1px solid #e4e5f0;
    border-radius: 4px;
    padding: 12px 16px;
}
.select-thumb .btn-select li {
    list-style: none;
    float: left;
    padding-bottom: 0px;
}

.select-thumb .btn-select:hover li {
    margin-left: 0px;
}

.select-thumb .btn-select:hover {
    box-shadow: inset 0 0px 0px 1px #ccc;
}

.select-thumb .btn-select:focus {
    outline: none;
}
.select-thumb ul#a {
    width: 100%;
}
.select-thumb ul#a li {
    padding: 10px 10px 10px 15px;
}
.select-thumb .btn-select li span {
    font-weight: 500;
    font-size: 15px;
    line-height: 24px;
    color: #1b1d29;
    margin-left: 15px;
}
li.line-ibanks {
    display: flex;
    align-items: center;
}
li.line-ibanks > div:nth-child(1) {
    margin-right: 10px;
}
/* -------------------------------------------------------------------------- */
/*                                USER PAGE END                               */
/* -------------------------------------------------------------------------- */

.fee_conf {
    margin-top: 15px;
    display: flex;
}

.fee_conf .phikiemdem-table {
    margin-left: 12px;
}

/* ForDatLX */
table tr td.red, 
table tr td .red {
    color: #da4343;
}
table tr td.green,
table tr td .green {
    color: #0f9437;
}
.history_list-order.table-v1 tr td {
    width: fit-content;
}
.history_list-order.table-v1 tr td:nth-child(1) {
    min-width: 42px;
}
.history_list-order.table-v1 tr td:nth-child(2) {
    min-width: 120px;
}
.history_list-order.table-v1 tr td:nth-child(3) {
    min-width: 120px;
}
.history_list-order.table-v1 tr td:nth-child(4) {
    min-width: 120px;
}
.history_list-order.table-v1 tr td:nth-child(5) {
    min-width: 50px;
}
.right.two-btn {
    display: flex;
}
.right.two-btn > a.btn {
    margin: 5px;
    display: flex;
    align-items: center;
    justify-content: center;

    font-weight: 500;
    font-size: 15px;
    line-height: 24px;
    text-align: center;
    color: #434657;
}
.right.two-btn > a.btn svg {
    margin-right: 6px;
}
.right.two-btn > a.withdraw-btn:hover {
    border: 1px solid #ffc411;
    background: #ffeaba;
}
.right.two-btn > a.withdraw-btn {
    border: 1px solid #ffc411;
    background: #fff1cf;
}
.right.two-btn > a.recharge-btn:hover {
    background-color: var(--bg1-hover);
}
.right.two-btn > a.recharge-btn {
    background-color: var(--bg1);
    border: 1px solid var(--bg1) !important;
}
.nav-layout.wallet {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
}
.btn.excel-export {
    height: 40px;
    background: #2bb956;
    border-radius: 4px;
    color: #fff;
    font-weight: 500;
    font-size: 15px;
    line-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 130px;
    margin: 10px 5px 10px 0;
}
.btn.excel-export svg {
    margin-right: 6px;
}
.btn.excel-export:focus,
.btn.excel-export:active,
.btn.excel-export:hover {
    color: #fff;
    background: #209e46;
    border: 1px solid #0f8633;
}
.wallet-top-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: calc(100% - 150px);
}
.wallet-top-info .item {
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: #434657;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}
.wallet-top-info .item strong {
    font-weight: bolder;
}
.wallet-top-info > .row {
    width: 100%;
}
section.withdraw.wallet-page-header {
    margin-bottom: 15px;
}
.search-filter-form .timkiem-btn button.btn {
    min-width: fit-content;
    width: 100px;
    margin-left: 10px;
    font-size: 15px;
}
.line-forms {
    max-width: calc(100% - 100px);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.line-forms,
.line-forms > .row {
    width: 100%;
    margin: 0;
}
.line-forms > .col {
    padding: 0 3px;
}
.line-forms input.form-control {
    margin: 0 0 5px;
    height: 40px;
}
.block-forms {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.line-forms .row .col-lg-3 {
    padding: 0 5px;
}
.line-forms .input-group {
    position: relative;
    border-radius: 6px;
}
.line-forms .input-group svg {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 48%;
    transform: translateY(-48%);
    right: 4px;
}
.line-forms .input-group.date svg {
    width: 25px;
    height: 25px;
    position: absolute;
    top: 48%;
    transform: translateY(-48%);
    right: 6px;
}
.line-forms .input-group.date svg path {
    fill: #434657;
}
.line-forms .input-group input:not(:focus):not(.active):not(:focus-visible) {
    border-radius: 5px !important;
    padding-right: 40px;
    font-size: 13px;
}
.table-all-orders.table-v1 tr td {
    width: fit-content;
    max-width: fit-content;
}
.table-all-orders.table-v1 tr td:nth-child(1) {
    min-width: 45px;
    text-align: center;
}
.table-all-orders.table-v1 tr td:nth-child(2) {
    min-width: 100px;
}
.table-all-orders.table-v1 tr td:nth-child(3) {
    min-width: 100px;
}
.table-all-orders.table-v1 tr td:nth-child(4) {
    min-width: 100px;
}
.table-all-orders.table-v1 tr td:nth-child(5) {
    min-width: 100px;
}
.table-all-orders.table-v1 tr td:nth-child(6) {
    min-width: 100px;
}
.table-all-orders.table-v1 tr td:nth-child(7) {
    min-width: 100px;
}

/* Pagination start */
.snt-pagi {
    margin: 32px 0;
    background: transparent;
    box-shadow: unset !important;
}
.snt-pagi .pagination {
    background: transparent;
    box-shadow: unset !important;
    margin: 0;
}
.snt-pagi ul {
    background: transparent;
    box-shadow: unset !important;
    display: flex;
    align-items: center;
}
.snt-pagi ul li:first-child .page-link,
.snt-pagi ul li:last-child .page-link {
    background-color: unset;
    box-shadow: unset;
    border: 0;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #101828;
    display: flex;
    align-items: center;
}
.snt-pagi ul li:first-child .page-link::before {
    content: "";
    width: 16px;
    height: 17px;
    background: url(../../assets/images/pagi-left-arrow.svg);
    margin-right: 6px;
}
.snt-pagi ul li:last-child .page-link::after {
    content: "";
    width: 16px;
    height: 17px;
    background: url(../../assets/images/pagi-right-arrow.svg);
    margin-left: 6px;
}
.snt-pagi ul li:first-child:hover .page-link,
.snt-pagi ul li:last-child:hover .page-link {
    height: 40px;
    background-color: rgba(234, 234, 234, 0.698);
}
.snt-pagi ul li:not(:first-child):not(:last-child) .page-link {
    margin: 0 3px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border-color: transparent;
    border-radius: 1px;
    color: #101828;
}
.snt-pagi ul li:not(:first-child):not(:last-child).active .page-link {
    background-color: var(--bg1);
    border-color: var(--bg1);
    color: #101828;
}
.snt-pagi
    ul
    li:not(:first-child):not(:last-child):not(.active):hover
    .page-link {
    background-color: #fff !important;
}
/* Pagination end */

section.withdraw-history {
    box-shadow: none;
}
.timeline-order .thoigian-nhanhang {
    margin: 0;
}
.input-group.search_khieunai svg {
    position: absolute;
    top: 49%;
    transform: translateY(-49%);
    right: 3px;
}
.search_khieunai {
    min-width: 320px;
}
select.form-control:focus {
    box-shadow: none;
    background-color: #fff7da;
    border: 1px solid #ffc600;
}
select#complain_type {
    font-size: 13px;
    border: 1px solid #e4e5f0;
    border-radius: 4px;
    min-height: 40px;
}
.filter-forms.snt input {
    color: #a7abc3;
    font-size: 13px;
    min-height: 40px;
}
.agree_row > div {
    position: relative;
}

.luu-y-box ~ .drop-zone {
    margin: 33px 0 16px;
    position: relative;
}
.luu-y-box ~ .drop-zone:before {
    content: "";
    width: calc(100% + 32px);
    height: 1px;
    background: #e4e5f0;
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
}
.capnhat-ds {
    color: #1b1d29;
    font-weight: 500;
    font-size: 15px;
    line-height: 24px;
    margin: 0 auto;
    display: flex;
    padding: 6px 16px;
    align-items: center;
    justify-content: center;
    background: #ffd121;
    border: 1px solid #ffd121;
    transition: 0.3s;
    border-radius: 4px;
}
.capnhat-ds img {
    margin: 0 8px 0 0;
}
.capnhat-ds:hover {
    background: #fff;
}
ul.page-breadcrumb.user-breadcrumb {
    margin: -8px 0 0 12px;
    padding: 0;
}
ul.user-breadcrumb li a {
    color: #a7abc3;
}
ul.page-breadcrumb.user-breadcrumb li.homelink::before {
    filter: brightness(0) saturate(100%) invert(73%) sepia(8%) saturate(601%)
        hue-rotate(194deg) brightness(93%) contrast(90%);
    width: 16px;
    height: 14px;
    margin: 0 6px 0 0;
    background-size: contain;
}
ul.page-breadcrumb.user-breadcrumb li:not(:last-child):after {
    filter: brightness(0) saturate(100%) invert(73%) sepia(8%) saturate(601%)
        hue-rotate(194deg) brightness(93%) contrast(90%);
    width: 6px;
    height: 10px;
    background-size: contain;
}
ul.page-breadcrumb li a,
ul.page-breadcrumb li {
    font-size: 13px;
    line-height: 20px;
}
.fourtab {
    font-size: 15px;
}
.layout-user .body-wrapper .container ~ .container .left.u-heading {
    position: relative;
    padding: 0 0 0 30px;
    margin: 0;
}
.layout-user .body-wrapper .container ~ .container .left.u-heading:before {
    content: "";
    width: 10px;
    height: 18px;
    background: url(../../assets/images/menu-arrow-right.svg) no-repeat top
        center;
    transition: 0.3s;
    padding-left: 10px;
    position: absolute;
    left: 0;
    top: 6px;
    transform: rotate(180deg);
}
.layout-user .body-wrapper .container ~ .container .left-layout.row {
    margin-top: 12px;
}
.form-account .account-input .under-form .right a {
    font-weight: 600;
    color: #056cf2;
}
.form-account .account-input .under-form .right {
    color: #98a2b3;
    font-size: 14px;
}

.price-list p {
    margin-bottom: 0;
}

.tooltip {
    position: absolute;
    z-index: 10200;
    display: block;
    visibility: visible;
    font-size: 12px;
    line-height: 1.4;
    opacity: 0;
    filter: alpha(opacity=0)
}

.tooltip.in {
    opacity: 0.9;
    filter: alpha(opacity=90)
}

.tooltip.top {
    margin-top: -3px;
    padding: 5px 0
}

.tooltip.right {
    margin-left: 3px;
    padding: 0 5px
}

.tooltip.bottom {
    margin-top: 3px;
    padding: 5px 0
}

.tooltip.left {
    margin-left: -3px;
    padding: 0 5px
}

.tooltip-inner {
    max-width: 200px;
    padding: 3px 8px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    background-color: #34495e;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 4px rgba(0, 0, 0, 0.23);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 2px 4px rgba(0, 0, 0, 0.23)
}

.tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid
}

.tooltip.top .tooltip-arrow {
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    border-width: 5px 5px 0;
    border-top-color: #34495e
}

.tooltip.top-left .tooltip-arrow {
    bottom: 0;
    left: 5px;
    border-width: 5px 5px 0;
    border-top-color: #34495e
}

.tooltip.top-right .tooltip-arrow {
    bottom: 0;
    right: 5px;
    border-width: 5px 5px 0;
    border-top-color: #34495e
}

.tooltip.right .tooltip-arrow {
    top: 50%;
    left: 0;
    margin-top: -5px;
    border-width: 5px 5px 5px 0;
    border-right-color: #34495e
}

.tooltip.left .tooltip-arrow {
    top: 50%;
    right: 0;
    margin-top: -5px;
    border-width: 5px 0 5px 5px;
    border-left-color: #34495e
}

.tooltip.bottom .tooltip-arrow {
    top: 0;
    left: 50%;
    margin-left: -5px;
    border-width: 0 5px 5px;
    border-bottom-color: #34495e
}

.tooltip.bottom-left .tooltip-arrow {
    top: 0;
    left: 5px;
    border-width: 0 5px 5px;
    border-bottom-color: #34495e
}

.tooltip.bottom-right .tooltip-arrow {
    top: 0;
    right: 5px;
    border-width: 0 5px 5px;
    border-bottom-color: #34495e
}

.tooltip_btn:hover + div.tooltip {
    opacity: 1;
    filter: alpha(opacity=100);
    display: block;
    top: -40px;
    right: 100px;
}

.list-cell-name-warehouse_history {
    position: relative;
}

.list-cell-name-warehouse_history .histoty-tooltip {
    top: 0;
    display: none;
}

.list-cell-name-warehouse_history .histoty-tooltip .tooltip-arrow {
    top: 60px !important;
}
.list-cell-name-warehouse_history .histoty-tooltip .tooltip-inner {
    max-width: 400px !important;
}

.list-cell-name-warehouse_history .histoty-tooltip .table {
    width: 384px !important;
    margin: 0;
}

.list-cell-name-current_warehouse strong.btn_tq {
    padding: 5px;
    background: #aa8806;
    color: white !important;
}

.list-cell-name-current_warehouse strong.btn_vn {
    padding: 5px;
    background: #008000;
    color: white !important;
}

.list-cell-name-current_warehouse strong.btn_da_giao {
    padding: 5px;
    background: #0a54ad;
    color: white !important;
}