/* Minification failed. Returning unminified contents.
(2464,17): run-time error CSS1038: Expected hex color, found '#0000'
(2473,13): run-time error CSS1038: Expected hex color, found '#0000'
(4541,14): run-time error CSS1035: Expected colon, found ','
 */
/**
 * Owl Carousel v2.2.1
 * Copyright 2013-2017 David Deutsch
 * Licensed under  ()
 */
/*
 *  Owl Carousel - Core
 */
.owl-carousel {
  display: none;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  /* position relative and z-index fix webkit rendering fonts issue */
  position: relative;
  z-index: 1; }
  .owl-carousel .owl-stage {
    position: relative;
    -ms-touch-action: pan-Y;
    -moz-backface-visibility: hidden;
    /* fix firefox animation glitch */ }
  .owl-carousel .owl-stage:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0; }
  .owl-carousel .owl-stage-outer {
    position: relative;
    overflow: hidden;
    /* fix for flashing background */
    -webkit-transform: translate3d(0px, 0px, 0px); }
  .owl-carousel .owl-wrapper,
  .owl-carousel .owl-item {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0); }
  .owl-carousel .owl-item {
    position: relative;
    min-height: 1px;
    float: left;
    -webkit-backface-visibility: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none; }
  .owl-carousel .owl-item img {
    display: block;
    width: 100%; }
  .owl-carousel .owl-nav.disabled,
  .owl-carousel .owl-dots.disabled {
    display: none; }
  .owl-carousel .owl-nav .owl-prev,
  .owl-carousel .owl-nav .owl-next,
  .owl-carousel .owl-dot {
    cursor: pointer;
    cursor: hand;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
  .owl-carousel.owl-loaded {
    display: block; }
  .owl-carousel.owl-loading {
    opacity: 0;
    display: block; }
  .owl-carousel.owl-hidden {
    opacity: 0; }
  .owl-carousel.owl-refresh .owl-item {
    visibility: hidden; }
  .owl-carousel.owl-drag .owl-item {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
  .owl-carousel.owl-grab {
    cursor: move;
    cursor: grab; }
  .owl-carousel.owl-rtl {
    direction: rtl; }
  .owl-carousel.owl-rtl .owl-item {
    float: right; }

/* No Js */
.no-js .owl-carousel {
  display: block; }

/*
 *  Owl Carousel - Animate Plugin
 */
.owl-carousel .animated {
  animation-duration: 1000ms;
  animation-fill-mode: both; }

.owl-carousel .owl-animated-in {
  z-index: 0; }

.owl-carousel .owl-animated-out {
  z-index: 1; }

.owl-carousel .fadeOut {
  animation-name: fadeOut; }

@keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

/*
 * 	Owl Carousel - Auto Height Plugin
 */
.owl-height {
  transition: height 500ms ease-in-out; }

/*
 * 	Owl Carousel - Lazy Load Plugin
 */
.owl-carousel .owl-item .owl-lazy {
  opacity: 0;
  transition: opacity 400ms ease; }

.owl-carousel .owl-item img.owl-lazy {
  transform-style: preserve-3d; }

/*
 * 	Owl Carousel - Video Plugin
 */
.owl-carousel .owl-video-wrapper {
  position: relative;
  height: 100%;
  background: #000; }

.owl-carousel .owl-video-play-icon {
  position: absolute;
  height: 80px;
  width: 80px;
  left: 50%;
  top: 50%;
  margin-left: -40px;
  margin-top: -40px;
  background: url("owl.video.play.png") no-repeat;
  cursor: pointer;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  transition: transform 100ms ease; }

.owl-carousel .owl-video-play-icon:hover {
  -ms-transform: scale(1.3, 1.3);
      transform: scale(1.3, 1.3); }

.owl-carousel .owl-video-playing .owl-video-tn,
.owl-carousel .owl-video-playing .owl-video-play-icon {
  display: none; }

.owl-carousel .owl-video-tn {
  opacity: 0;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: opacity 400ms ease; }

.owl-carousel .owl-video-frame {
  position: relative;
  z-index: 1;
  height: 100%;
  width: 100%; }

@font-face {
    font-family: "Barlow Condensed";
    src: url('/content/fonts/BarlowCondensed/BarlowCondensed-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: "Barlow Condensed";
    src: url('/content/fonts/BarlowCondensed/BarlowCondensed-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: "Barlow Condensed";
    src: url('/content/fonts/BarlowCondensed/BarlowCondensed-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Barlow Condensed";
    src: url('/content/fonts/BarlowCondensed/BarlowCondensed-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Barlow Condensed";
    src: url('/content/fonts/BarlowCondensed/BarlowCondensed-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Barlow Condensed";
    src: url('/content/fonts/BarlowCondensed/BarlowCondensed-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "Barlow Condensed";
    src: url('/content/fonts/BarlowCondensed/BarlowCondensed-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Barlow Condensed";
    src: url('/content/fonts/BarlowCondensed/BarlowCondensed-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: "Barlow Condensed";
    src: url('/content/fonts/BarlowCondensed/BarlowCondensed-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: "Barlow Condensed";
    src: url('/content/fonts/BarlowCondensed/BarlowCondensed-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: "Barlow Condensed";
    src: url('/content/fonts/BarlowCondensed/BarlowCondensed-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: "Barlow Condensed";
    src: url('/content/fonts/BarlowCondensed/BarlowCondensed-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: "Barlow Condensed";
    src: url('/content/fonts/BarlowCondensed/BarlowCondensed-RegularItalic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: "Barlow Condensed";
    src: url('/content/fonts/BarlowCondensed/BarlowCondensed-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: "Barlow Condensed";
    src: url('/content/fonts/BarlowCondensed/BarlowCondensed-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: "Barlow Condensed";
    src: url('/content/fonts/BarlowCondensed/BarlowCondensed-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: "Barlow Condensed";
    src: url('/content/fonts/BarlowCondensed/BarlowCondensed-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: "Barlow Condensed";
    src: url('/content/fonts/BarlowCondensed/BarlowCondensed-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

#package-policy-page {
    margin: 0;
    margin-top: 10px;
}

.mg-lr-5 {
    margin: 0 5px;
}

.title-head-page {
    font-weight: bold;
    font-size: 27px;
    font-family: 'Barlow Condensed', sans-serif;
    color: #545b66;
}

.sub1-title-head-page {
    color: #272525;
}

.sub2-title-head-page {
    font-weight: normal;
    color: #686868;
    font-size: 27px;
}

.c-line-center {
    width: 30px;
    height: 3px;
    background-color: #32c5d2;
    margin: 0 auto 30px auto;
}

.col-width50 {
    min-width: 50px;
    width: 50px;
}

.col-width150 {
    min-width: 150px;
    width: 150px;
}

.col-width200 {
    min-width: 200px;
    width: 200px;
}

.text-center-ipt {
    text-align: center !important;
}

.text-a-l {
    text-align: left !important;
}

#package-policy-data {
    /*overflow-x: hidden;*/
    color: #545b66;
}

#table-package-policy tr, #table-package-policy td {
    border: 1px solid #ddd;
    vertical-align: middle;
}

#table-package-policy .td-package-name {
    padding: 5px;
    vertical-align: top;
}

#table-package-policy .div-package-name {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}

#table-package-policy .td-package-name hr {
    border-top: 2px solid #eeb523;
    width: 35px;
}

#table-package-policy .td-menu-name {
    font-weight: bold;
    font-size: 18px;
    height: 100px;
}

    #table-package-policy .td-menu-name a {
        font-weight: normal;
        font-size: 14px;
        cursor: pointer;
    }


#table-package-policy select {
    width: 100px;
    margin: auto;
}

.span-free, .total-span {
    font-size: 28px;
    font-family: 'Big Shoulders Display';
    color: #098dfe;
}

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

.padding-left-30 {
    padding-left: 30px !important;
}

.span-price {
    font-size: 20px;
    color: #000;
    font-weight: 600;
}

.span-totalmount {
    font-size: 20px;
    font-weight: bold;
    color: #5b5e6d;
}

.menu-check-icon {
    color: #0071bc;
    font-size: 11px;
}

.menu-uncheck-icon {
    color: #ddd;
    font-size: 11px;
}

.btn-trial {
    border-width: 1px;
    color: #ffffff;
    background: #576f9f;
    width: 49%;
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
}

    .btn-trial:hover, .btn-mua:hover, .btn-dang-ky-tai-khoan:hover {
        color: #576f9f;
        background: #ffffff;
        border: solid 1px #ccd0d6;
    }

.btn-mua {
    border-width: 1px;
    color: #ffffff;
    background: #467fd0;
    width: 49%;
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
}

.btn-dang-ky-tai-khoan {
    border-radius: 4px;
    border-width: 1px;
    color: #ffffff;
    background: #576f9f;
    width: 100%;
}

.title-head-popup {
    background: #1C579B;
    color: white;
    padding: 5px;
}

.content-popup {
    padding: 5px;
}

#table-info-support {
    margin: auto;
}

#div-support-content > hr {
    border-top: 2px solid #32c5d2;
    width: 35px;
}

#img-bank-logo {
    margin: 2px;
    width: 150px;
}

#table-info-payment {
    margin: 20px auto;
}

    #table-info-payment td {
        text-align: left;
        padding: 5px;
    }

#package-compare-popup table {
    margin: auto;
}

    #package-compare-popup table tr th, #package-compare-popup table tr td {
        vertical-align: middle;
        border: 1px solid #ccc;
        padding: 10px 5px;
    }

#package-compare-popup .content-data {
    overflow: auto;
}

#package-compare-popup table tbody, #package-compare-popup table thead {
    display: block;
}

#package-compare-popup table tbody {
    overflow: auto;
    max-height: 500px;
}

.div-word-break {
    word-break: break-word;
}

.no-border-top {
    border-top: none !important;
}

.no-border-bottom {
    border-bottom: none !important;
}

#register-trial-popup table tr td {
    padding: 5px;
    vertical-align: middle;
    font-weight: normal;
}

#register-trial-popup table {
    margin-bottom: 0;
}

    #register-trial-popup table tr td label {
        font-weight: normal;
    }

/* Nguyễn Phú Thành Override */
#package-policy-data-loading {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0px 0px -50px;
    z-index: 1200;
}

    #package-policy-data-loading > .fa-spinner {
        font-size: 50px;
        color: #286090;
        -webkit-animation: fa-spin 1s infinite linear;
        animation: fa-spin 1s infinite linear;
    }

.dynamic-width {
    float: left;
    position: relative;
    min-height: 1px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    margin-bottom: 10px;
}

.Cards {
    background: #fff;
    padding-top: 40px;
    border-radius: 5px;
}

.CardHeader {
    /*background-color: #fff;*/
    border-bottom: none;
    padding: 5px 6px 0 5px;
}

.card-top .CardHeader {
    height: 110px;
}

.CardHeader hr {
    border-top: 2px solid #1e82c4;
    width: 50px;
    margin-top: 5px;
    margin-bottom: 10px;
}

.CardTitle {
    font-weight: 700;
    font-size: 20px;
    line-height: 30px;
    text-transform: uppercase;
    padding: 10px 0px;
    font-family: 'Barlow Condensed', sans-serif;
}

.CardBody {
    padding: 15px 5px 10px 5px;
    border-bottom: none;
    margin-bottom: 5px;
}

.dynamic-ads-width {
    float: left;
    position: relative;
    min-height: 40px;
    margin-bottom: 10px;
    word-break: break-word;
    margin: 0 10px;
}

.CardFree {
    margin-top: 45%;
}

.CardButton {
    border-top: none;
    margin: 0 15px !important;
    height: 34px !important;
    border-radius: 3px;
    padding: unset !important;
}

.CardFooter {
    border-top: none;
    text-align: left;
    padding: 0px 15px 5px 15px;
    word-break: break-word;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.CardFooterFree {
    height: 15px;
}

.CardFooterContentFree {
    position: relative;
    text-align: left;
}

.footer-1 {
    position: absolute;
    right: calc(-100% - 20px);
    background: white;
    width: calc(100% + 20px);
    top: -150px;
    height: 150px;
    border-top-left-radius: 5px;
    border-left: solid 1px #ccc;
    border-image: linear-gradient(179deg, #fff, #e0e3eb, #fff) 1;
    text-align: center;
}

    .footer-1 .footer-body {
        padding-left: 0px;
    }

    .footer-1 .CardButton {
        margin: 0 24px !important;
    }

.footer-1-1 {
    transform: rotate(235deg);
    position: absolute;
    right: -30px;
    width: calc(100% + 20px);
    top: -185px;
    height: 20px;
    width: 50px;
    height: 50px;
    border-radius: 70%;
    box-shadow: inset 0px 20px #fff, inset 0px 20px 0px 0px #fff;
    -moz-box-shadow: inset 0px 16px #999, inset 0px 16px 1px 1px #999;
}

.footer-2 {
    position: absolute;
    right: calc(-200% - 40px);
    background: white;
    width: calc(100% + 20px);
    top: -150px;
    /*height: 150px;*/
    /*padding-top: 15px;*/
    border-left: solid 1px #ccc;
    border-image: linear-gradient(179deg, #fff, #e0e3eb, #fff) 1;
}

.footer-3 {
    position: absolute;
    right: calc(-300% - 60px);
    background: white;
    width: calc(100% + 20px);
    top: -150px;
    /*height: 150px;*/
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    /*padding-top: 35px;*/
    border-left: solid 1px #ccc;
    border-image: linear-gradient(179deg, #fff, #e0e3eb, #fff) 1;
}

.footer-body {
    padding: 15px 0px 15px 20px;
    color: #566f9e;
}

    .footer-body b {
        color: #545b66
    }

    .footer-body .fa-check {
        color: #098dfe !important;
        font-size: 11px;
    }

    .footer-body table {
        margin-top: 5px;
    }

.footer-features {
    padding-top: 10px;
    padding-bottom: 15px;
    border-top: solid 20px #ccc;
    border-image: linear-gradient(89deg, #fff, #ebedf4, #fff) 1;
}

    .footer-features .fa-check {
        color: #098dfe !important;
        font-size: 11px;
    }

    .footer-features table {
        color: #566f9e;
        margin-top: 5px;
    }

.span-symbol:after {
    content: "đ";
    font-size: .6em;
    vertical-align: text-top;
}

.span-month {
    font-size: .6em;
}

.discount {
    font-size: 11px;
    background: rgba(237, 28, 36, 0.1);
    /*#ed1c24;*/
    margin-left: 5px;
    font-weight: 600;
    padding: 3px;
    border-radius: 2px;
    color: #ed1c24;
}

.save-money {
    font-size: 15px;
    color: #136ba9;
    margin-top: 5px;
}

.total-mount {
    padding: 15px 0 10px 0;
    font-size: 25px;
    font-weight: bold;
}

.total-span:after {
    content: "đ";
    font-size: .6em;
    vertical-align: text-top;
}

.box-div-month {
    background-color: #eaedf4;
    margin: 0 10px;
    border-radius: 4px;
    height: 30px;
}

.div-month {
    width: 100%;
    margin: 0;
}

.month-choose {
    cursor: pointer;
    font-weight: 700;
    padding: 5px 0px;
    border-radius: 5px;
}

    .month-choose.active {
        color: #467fd0;
        background: #e4f2fe;
    }

    .month-choose.activeitem {
        color: #467fd0;
    }

.ads-head-product {
    font-size: 20px;
    text-align: left;
    margin-bottom: 30px;
    background-color: #e1f5fe;
    padding: 11px 10px;
    margin-left: 65px;
    background-image: linear-gradient(to right, #e1f5fe, #fff);
    font-family: 'Barlow Condensed', sans-serif;
    color: #545b66;
    text-transform: uppercase;
    font-weight: 700;
}

.ads-title {
    text-align: left;
    margin: 10px 20px;
    /*font-size: 13px;
    font-weight: bold;*/
}

    .ads-title.policy-a-z {
        font-weight: bold;
        font-size: 18px;
        border-bottom: 1px solid #e0e3eb;
    }

.ads-name {
    font-family: 'Barlow Condensed', sans-serif;
}

.div-fixed {
    height: 30px;
}

.display-none {
    display: none;
}

.ads-bg {
    background-color: #576f9f;
    color: #fff;
}

.ads-sticky {
    position: fixed;
    z-index: 10;
    background-color: #576f9f;
    color: #fff;
}

.packages-table .ads-name {
    text-transform: uppercase;
    font-size: 15px;
}

.ads-sticky-none {
    position: relative;
    z-index: 10;
    background-color: #e1f5fe;
}

.container-detail {
    width: 100%;
    overflow: auto;
}

.container-detail-new {
    width: 100%;
    overflow: unset;
}

.detail-name {
    text-align: left;
    border-bottom: 1px solid #e0e3eb;
    font-weight: bold;
    padding: 10px 5px;
}

.info-name {
    text-align: left;
}

.dynamic-detail-width {
    float: left;
    position: relative;
    min-height: 1px;
    word-break: break-word;
    width: 16%;
    margin: 0 10px;
}

.stock-center {
    width: 50%;
    margin: 0 auto;
}

.info-detail {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px !important;
}

.span-detail-stock {
    margin-left: 4px;
}

.voucher-info-left {
    width: 39%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.voucher-info-right {
    width: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.package-layout {
    visibility: hidden;
}

#stock-code-v2 th {
    font-weight: normal;
    color: black;
}

#voucher-content {
    overflow: auto;
    max-height: 350px;
}

    #voucher-content .table {
        margin-bottom: 5px;
    }

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

.popup-tool .content-popup, .popup-tool .modal-footer, .popup-tool .modal-body {
    background-color: #bdd7ee;
}

.popup-tool .modal-header {
    padding: 5px;
}

.popup-tool button, .popup-tool button:hover {
    background-color: #2f75b5;
    color: #fff;
}

.popup-tool #messenge {
    padding: 5px 0 0 5px;
}

.popup-tool .modal-header {
    background-color: #1C579B;
    color: white;
    border-bottom: 0;
}

.popup-tool .title-header-popup div:nth-child(1) {
    width: 99%;
}

.popup-tool .title-header-popup div:nth-child(2) {
    width: 1%;
}

.popup-tool div:nth-child(2) {
    background-color: #bdd7ee;
}

.popup-tool div:nth-child(3) {
    background-color: #bdd7ee;
}

.popup-tool fieldset, .popup-tool fieldset div {
    background-color: white !important;
}

.expand-container {
    display: flex;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    height: 100%;
}

.expand:nth-child(1) {
    display: flex;
    height: 100%;
    width: 50%;
    -webkit-transition: width 500ms;
    -moz-transition: width 500ms;
    transition: width 500ms;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    background-color: #566f9e;
}

.expand:nth-child(2) {
    display: flex;
    height: 100%;
    width: 50%;
    -webkit-transition: width 500ms;
    -moz-transition: width 500ms;
    transition: width 500ms;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    background-color: #467fcf;
    cursor: pointer;
}

.expand div {
    position: relative;
    height: fit-content;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.expand-container:hover .expand {
    width: 0%;
}

.expand:nth-child(1):hover {
    width: 100%;
}

.expand:nth-child(2):hover {
    width: 100%;
}

/* Extend Mobile */
.extend-common-mobile {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
}

.extend-using {
    background-color: #566f9e;
}

.extend-extend {
    background-color: #467fcf;
}

.vstf-sale {
    background-color: #3c78d8;
    height: 250px;
    text-align: center;
    color: #fff;
    margin-bottom: 10px
}

    .vstf-sale button {
        border-radius: 10px;
        width: 400px;
        height: 70px;
        color: #3c78d8;
        font-size: 25px;
        border: none;
    }

.question-policy {
}

    .question-policy li {
        border-top: solid 1px #ccc;
        padding: 10px 0px;
        text-align: left;
    }

        .question-policy li:hover {
            cursor: pointer;
            color: #467fcf;
        }

        .question-policy li i {
            float: right;
            color: #01579B;
            cursor: pointer;
            padding-right: 5px;
        }

        .question-policy li .extend {
            padding-top: 5px;
            display: none;
            margin: 0px;
            color: #333;
            margin: 0 10px;
        }

        .question-policy li i.plus-item, .question-policy li i.minus-item {
            display: none;
        }

            .question-policy li i.plus-item.action, .question-policy li i.minus-item.action {
                display: block;
            }

.answer-detail {
    width: 100%;
}

.cl_googleads {
    /*padding: 0px 5px;*/
}

.cl-googleads-icon {
    background-color: #eaedf4;
    display: inline-block;
    width: 20%;
    height: 7px;
    /*border-right: 1px solid #ffffff;*/
    margin-right: 2px;
}

.cl-googleads-icon--1 {
    background-color: #3c5a9a;
}

.cl-googleads-icon--2 {
    background-color: #4867aa;
}

.cl-googleads-icon--3 {
    background-color: #6094df;
}

.cl-googleads-icon--4 {
    background-color: #1290fe;
}

.cl-googleads-icon--5 {
    background-color: #0686f5;
}

.about-vietstock h4 {
    color: #01579B;
    font-weight: 700;
}

.index-vietstock h4 {
    color: #1091ff;
    font-weight: 500;
    font-size: 35px;
    padding: 15px 0px;
    margin-top: 0px;
    margin-bottom: 0px;
}

h4.customer-info {
    color: #545b66;
    text-transform: uppercase;
    font-size: 20px;
    font-family: 'Barlow Condensed', sans-serif;
}

h4.common-index {
    font-size: 50px;
    padding: 0;
    font-family: 'Big Shoulders Display', sans-serif;
}

    h4.common-index:hover {
        color: #ffdead;
    }

.about-vietstock-detail {
    margin: 0px 0px 20px;
}

    .about-vietstock-detail p {
        text-align: left;
        font-weight: 500;
        color: #545b66;
    }

.box-rating {
    text-align: left;
    padding: 40px 0px;
}

.rating-vietstock-item {
    background-color: white;
}

    .rating-vietstock-item p {
        text-align: center;
        height: 100px;
        color: #566f9e;
        font-size: 16px;
    }

    .rating-vietstock-item .info p {
        height: unset;
        color: #9da3af;
    }

    .rating-vietstock-item i {
        position: absolute;
        top: -12px;
        left: 25px;
        border: solid 1px #ccc;
        padding: 5px;
        border-radius: 50%;
        background-color: #3c78d8;
        color: white;
    }

.rating-info .box-image {
    float: left;
}

    .rating-info .box-image div {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        position: absolute;
        top: -50px;
        right: 33%;
        padding: 10px;
        background: #fafafa;
        background-size: cover;
    }

.rating-info .info {
    float: left;
    text-align: center;
    width: 100%;
}

    .rating-info .info b {
        color: #545b66;
    }

.rating-info {
    border-top: solid 1px #ccc;
    border-image: linear-gradient(45deg, #fff, #e0e3eb, #fff) 1;
    padding: 15px 0px;
}

.group-star .checked {
    color: orange;
}

h4.customer-info {
    border-top: solid 1px #e0e3eb;
    border-bottom: solid 1px #e0e3eb;
    border-image: linear-gradient(45deg, #fff, #e0e3eb, #fff) 1;
}

.item-about-index label {
    font-weight: 500;
    color: #545b66;
}

.policy-fix {
    position: fixed;
    top: 38px;
    left: 0;
    margin: 0px 0px;
    padding: 0px 10px;
    z-index: 9;
    width: 100%;
    background: #e1f5fe;
}

.top-0 {
    top: 0px !important;
}

.cards-icon-span {
    padding: 15px;
}

    .cards-icon-span i {
        position: absolute;
        padding: 15px;
        background: #ebedf4;
        border-radius: 50%;
        top: -5px;
        left: 40%;
    }

.page-content, .header-breadcrumb {
    background: #ebedf4;
}

.policy-ask-icon {
    float: left;
}

.svg-vst.shield-check {
    width: 70px;
    height: 72px;
    border-radius: 84%;
    padding: 10px 10px;
}

    .svg-vst.shield-check:before {
        content: url(/content/images/shield-check.svg);
    }

.svg-vst.pro-check {
    width: 67px;
    height: 72px;
    border-radius: 45%;
    padding: 10px 15px;
}

    .svg-vst.pro-check:before {
        content: url(/content/images/pro-icon-06.svg);
    }

.svg-vst.ask-icon {
    content: url(/content/images/question-03.svg);
    width: 50px;
    background: #01569b;
    padding: 14px;
    border-radius: 10%;
}

.svg-vst.finance-icon {
    content: url(/content/images/finance-policy.svg);
    width: 50px;
}

.cl-setting {
    color: #457ece;
}

.cl-like {
    color: #1091ff;
}

.cl-gift {
    color: #f45c3a;
}

.bg-single {
    background: #467fd0;
    width: 100%;
    border-radius: 3px;
}

.dynamic-chart-width {
    margin: 0 10px;
}

.dynamic-ads-width, .dynamic-detail-width, .w18 {
    width: 18% !important;
}

    .dynamic-ads-width:first-child, .dynamic-detail-width:first-child, .w19 {
        width: 19% !important;
    }

.bg-lv1 {
    background: #dce2ea;
    border-top: solid 1px #576f9f;
}

    .bg-lv1 b {
        font-size: 16px;
        font-weight: 700;
    }

.bg-lv2 {
    background: #f2f4f7
}

    .bg-lv2 b {
        font-size: 13px;
        font-weight: bold;
    }

.bg-while {
    background: #fff;
}

.bg-gray {
    background: #e6e9ef;
    color: #576f9f;
}

    .bg-gray b {
        font-size: 15px;
        font-weight: 700;
    }

.bg-gray-1 {
    background: #fafafa
}

.h-thdn {
    /*height:60px;*/
}

.package-layout .owl-nav > div.owl-prev {
    position: absolute;
    top: 15%;
    left: auto;
    left: -1px;
    height: 20px;
    width: 20px;
    text-align: center;
    line-height: 42px;
    border: solid 1px #ccc;
    border-radius: 50%;
    background: #eaedf4;
}

.package-layout .owl-nav > div.owl-next {
    position: absolute;
    top: 85%;
    right: -1px;
    height: 20px;
    width: 20px;
    text-align: center;
    line-height: 42px;
    margin-top: -21px;
    border: solid 1px #ccc;
    border-radius: 50%;
    background: #eaedf4;
}

    .package-layout .owl-nav > div.owl-prev:hover, .package-layout .owl-nav > div.owl-next :hover {
        color: #467fd0;
    }

.index-vietstock .owl-nav > div.owl-prev {
    position: absolute;
    top: 50%;
    left: -15px;
    right: auto;
    height: 42px;
    width: 25px;
    text-align: center;
    line-height: 42px;
    border-radius: 0%;
    background: none;
    border: none;
}

.index-vietstock .owl-nav > div.owl-next {
    position: absolute;
    top: 55%;
    right: -22px;
    height: 42px;
    width: 25px;
    text-align: center;
    line-height: 42px;
    margin-top: -21px;
    border-radius: 0%;
    background: none;
    border: none;
}

.package-layout .owl-nav i {
    top: 10%;
    right: 30%;
    position: absolute;
}

.bg-top-policy {
    background: #e1f5fe;
    width: 100%;
    height: 110px;
    position: fixed;
    top: 37px;
    z-index: 10;
}

.bg-top {
    background: #e1f5fe !important;
    color: #000;
}

.bg-account {
    background: #8a99b6 !important;
}

.percent-discount {
    position: absolute;
    top: 8px;
    right: 0px;
    font-size: 9px;
    background: rgba(9, 141, 254, 0.1);
    padding: 2px 3px;
    line-height: 10px;
    border-radius: 3px;
    font-weight: 700;
    color: #098dfe;
}

.CardDescription {
    color: #566f9e
}

.CardNew {
    position: absolute;
    width: 28%;
    transform: rotate(45deg);
    top: 11px;
    right: -9px;
    margin-top: 31px;
    border-bottom: 20px solid #098DFE;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    height: 0;
}

    .CardNew span {
        color: #fff;
        font-weight: 700;
    }

.box-div-month .owl-prev.disabled, .box-div-month .owl-next.disabled {
    display: none;
}

.box-div-month .owl-item {
    width: 90px !important;
}

.bd-box-top {
    border-top: solid 1px #ccd0d6;
}

.ads-table {
    height: 40px;
}

.month-choose:hover {
    color: #098dfe
}

.box-div-month .owl-stage {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.svg-vst.standard-icon {
    width: 67px;
    height: 72px;
    border-radius: 50%;
    padding: 10px 15px;
}

    .svg-vst.standard-icon:before {
        content: url(/content/images/standard-icon-06.svg);
    }

.svg-vst.premium-icon {
    width: 67px;
    height: 72px;
    border-radius: 50%;
    padding: 10px 10px;
}

    .svg-vst.premium-icon:before {
        content: url(/content/images/premium-icon-06.svg);
    }

.svg-vst.pro-icon {
    width: 67px;
    height: 72px;
    border-radius: 50%;
    padding: 10px 15px;
}

    .svg-vst.pro-icon:before {
        content: url(/content/images/pro-icon-06.svg);
    }

.svg-vst.free-icon {
    width: 67px;
    height: 72px;
    border-radius: 50%;
    padding: 10px 15px;
}

    .svg-vst.free-icon:before {
        content: url(/content/images/free-icon-06.svg);
    }

.svg-vst.basic-icon {
    width: 67px;
    height: 72px;
    border-radius: 50%;
    padding: 10px 15px;
}

    .svg-vst.basic-icon:before {
        content: url(/content/images/basic-icon-06.svg);
    }

.mg-top-35 button {
    margin-top: 0px;
    background: #8a99b5 !important;
}

.card-top .CardFree {
    margin-top: 0px !important;
}

.card-top .CardBody {
    height: auto !important;
    padding: 15px;
}

.card-top .Cards {
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
}

.mg-top-35 button:hover {
    background: #fff !important;
}

.free-row-price {
    margin-top: 17% !important;
}

.br-gradient {
    border-top: solid 1px #ccc;
    border-image: linear-gradient(89deg, #fff, #e0e3eb, #fff) 1;
    padding: 5px;
}

@media only screen and (min-width: 992px) {
    .info-name {
        padding: 10px 10px !important;
        border-top: solid 1px #ccd0d6;
        height: 40px;
    }

    #row-companyA-z .info-name, #row-rrg .info-name, #ads-table .info-name, #row-screener .info-name {
        align-items: center;
        height: 40px;
        display: flex;
        border-top: solid 1px #ccd0d6;
    }

    #row-companyA-z .info-detail, #row-rrg .info-detail, #ads-table .info-detail, #row-screener .info-detail {
        padding: 10px !important;
        text-align: center;
        align-items: center;
        height: 40px;
        border-top: solid 1px #ccd0d6;
    }

    .display-block {
        display: block;
    }

    .chart-info {
        text-align: left;
    }

    .hover-package {
        background-color: #ffdead;
    }

    .cl_chart .ads-options {
        padding: 10px 5px !important;
    }
}

@media only screen and (min-width: 1200px) {
    .item-about-index {
        width: 19%;
        float: left;
        margin: 20px 5px;
        padding: 30px 0px;
        height: 150px;
    }

        .item-about-index.user:before {
            transform: scale(0);
            transform-origin: bottom right;
        }

        .item-about-index.user:hover,
        .item-about-index.data-stock:hover,
        .item-about-index.profile:hover,
        .item-about-index.macro:hover,
        .item-about-index.finance:hover {
            background: #e1f5fe;
            border-radius: 5px;
            animation-name: bounceInUp;
        }

            .item-about-index.user:hover:before {
                transform: scale(1);
                transform-origin: bottom left;
            }

            .item-about-index.user:hover .icon-user,
            .item-about-index.data-stock:hover .icon-data-stock,
            .item-about-index.profile:hover .icon-profile,
            .item-about-index.macro:hover .icon-macro,
            .item-about-index.finance:hover .icon-finance {
                /*width: 60px;*/
                object-fit: cover;
                height: 60px;
                background-repeat: no-repeat;
                margin: auto;
                margin-top: 10px;
            }

            .item-about-index.user:hover .icon-user {
                background-image: url(/content/images/users-03.svg);
                background-position: center;
            }

            .item-about-index.data-stock:hover .icon-data-stock {
                background-image: url(/content/images/du-lieu-05.svg);
                background-position: center;
            }

            .item-about-index.profile:hover .icon-profile {
                background-image: url(/content/images/doanh-nghiep-05.svg);
                background-position: center;
            }

            .item-about-index.macro:hover .icon-macro {
                background-image: url(/content/images/vi-mo-05.svg);
                background-position: center;
            }

            .item-about-index.finance:hover .icon-finance {
                background-image: url(/content/images/bao-cao-05.svg);
                background-position: center;
            }

            .item-about-index.user:hover .common-index, .item-about-index.user:hover .common-index span, .item-about-index.user:hover label,
            .item-about-index.data-stock:hover .common-index, .item-about-index.data-stock:hover .common-index span, .item-about-index.data-stock:hover label,
            .item-about-index.profile:hover .common-index, .item-about-index.profile:hover .common-index span, .item-about-index.profile:hover label,
            .item-about-index.macro:hover .common-index, .item-about-index.macro:hover .common-index span, .item-about-index.macro:hover label,
            .item-about-index.finance:hover .common-index, .item-about-index.finance:hover .common-index span, .item-about-index.finance:hover label {
                display: none;
            }

    .rating-vietstock-item {
        margin: 0 10px;
        padding: 20px 20px;
        min-height: 315px;
        position: relative;
        margin-top: 50px;
        padding-top: 70px;
        border-radius: 5%;
    }

    .info-detail {
        border-top: solid 1px #ccd0d6;
    }

    .cl_chart {
        height: 40px;
    }

    .box-div-month .owl-stage {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
}

.question-list li:last-child {
    border-bottom: solid 1px #ccc;
}

.question-list p {
    margin: 0 0 5px;
    color: #545b66;
}
/* TOOLTIP */
.policy-tooltip {
    position: relative;
}

    .policy-tooltip::before {
        content: attr(data-tooltip);
        position: absolute;
        top: 0%;
        left: 0%;
        transform: translate(-10%, -100%);
        margin-top: -10px;
        padding: 5px 10px;
        background-color: #335295;
        border-radius: 5px;
        color: #fff;
        text-align: center;
        white-space: nowrap;
    }

    .policy-tooltip::after {
        content: " ";
        position: absolute;
        top: 0px;
        margin-top: -10px;
        border-width: 6px;
        border-style: solid;
        border-color: #335295 transparent transparent transparent;
    }

    .policy-tooltip:before, .policy-tooltip:after {
        visibility: hidden;
        pointer-events: none;
        z-index: 5000;
    }

    .policy-tooltip:hover::before, .policy-tooltip:hover::after {
        visibility: visible;
    }
/*new ver 2023*/
.card-one {
    position: relative;
}

    .card-one .policy-used {
        text-transform: uppercase;
        font-family: 'Roboto';
    }

    .card-one .card-description {
        opacity: .8;
        color: #566f9e;
        margin-bottom: 5px;
        margin-top: 5px;
        font-size: 14px;
    }

    .card-one .span-free-new {
        font-size: 14px;
        color: #098dfe;
        position: relative;
        background: rgba(9, 141, 254, 0.1);
        padding: 2px 5px 2px 25px;
        border-radius: 7px;
        margin-left: 5px;
        cursor: default;
        text-transform: uppercase;
    }

        .card-one .span-free-new:before {
            content: url(/content/images/free-icon-new.svg);
            position: absolute;
            width: 16px;
            left: 5px;
            background: #098dfe;
            border-radius: 50%;
            padding: 2px 3px;
            font-size: 3px;
            top: 3px;
        }

        .card-one .span-free-new:hover {
            background: #bbd9fb;
        }

    .card-one .card-notice {
        color: #566f9e;
    }

    .card-one .card-status {
        padding-bottom: 5px;
        display: contents;
    }

    .card-one .card-content {
        position: absolute;
        width: 42%;
        z-index: 999;
        text-align: left;
        left: 60%;
        background: #fff;
        height: 133px;
        display: none;
        border-radius: 10px;
        border: solid 1px #ccc;
        top: -100%;
        font-size: 12px;
        background-color: #335295;
    }

        .card-one .card-content:after {
            content: " ";
            position: absolute;
            top: 67%;
            left: -12px;
            border-width: 6px;
            border-style: solid;
            border-color: transparent transparent #335295 transparent;
            transform: rotate(270deg);
        }

    .card-one .card-one-tooltip {
        cursor: pointer;
        padding-left: 5px;
    }

    .card-one .card-one-show {
        display: block !important;
    }

    .card-one .footer-body b {
        color: #fff;
    }

    .card-one .footer-body {
        color: #fff;
    }

.footer-2-free {
    right: unset !important;
    top: 0px !important;
    background: unset !important;
}

.footer-3-free {
    right: unset !important;
    left: 235px;
    top: 0px !important;
    background: unset !important;
    border-left: unset;
}
/*end new ver 2023*/
@media only screen and (min-width: 962px) and (max-width: 1200px) {
    .item-about-index {
        width: 20%;
        float: left;
    }

    .rating-vietstock-item {
        /*width: 30%;*/
        float: left;
        margin: 0px 12px;
        padding: 20px 10px;
        min-height: 300px;
        position: relative;
        margin-top: 50px;
        padding-top: 70px;
    }
}

@media only screen and (width: 1024px) {
    .rating-vietstock-item {
        margin: 0px 15px;
    }

    .dynamic-ads-width, .dynamic-detail-width {
        margin: 0 8px;
    }

    .rating-vietstock-item {
        width: auto;
        margin: 0px 0px;
        padding: 20px 5px;
        min-height: 315px;
        position: relative;
        margin-top: 50px;
        padding-top: 70px;
        border-radius: 5%;
    }

    .ads-button {
        display: none;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .footer-1, .footer-2 {
        width: 100%;
    }

    .footer-3, .footer-1-1 {
        display: none
    }

    .footer-1, .footer-2 {
        position: unset;
        width: 100%;
    }

    .footer-3, .footer-1-1 {
        display: none
    }

    .footer-1 .CardButton {
        margin: 0 15px !important;
    }

    .CardNew {
        top: 26px;
        right: -19px;
        border-bottom: 25px solid #098DFE;
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
    }

    .card-one .card-content {
        height: unset !important;
        left: 56%;
    }

    .card-one .card-status:hover .card-content {
        display: none;
    }
}

@media only screen and (min-width: 768px) and (max-width: 961px) {
    .item-about-index {
        width: 20%;
        float: left;
    }

    .rating-vietstock-item {
        /*width: 30%;*/
        float: left;
        margin: 0px 12px;
        padding: 20px 10px;
        min-height: 300px;
        position: relative;
        margin-top: 50px;
        padding-top: 70px;
    }

    .ads-table-mobile .dynamic-ads-width:first-child, .ads-table-mobile .dynamic-detail-width:first-child, .w19 {
        width: 98% !important;
    }
}

@media only screen and (min-width:414px) and (max-width: 767px) {
    .vstf-sale {
        height: 280px;
    }

    .item-about-index {
        width: 30%;
        float: left;
    }

    .cl-googleads-icon {
        margin-top: 5px;
    }

    .card-one .card-content {
        height: unset !important;
        left: 56%;
    }

    .card-one .card-status:hover .card-content {
        display: none;
    }
}

@media only screen and (max-width: 844px) {
    .vstf-sale {
        height: auto;
        padding-bottom: 30px;
    }

        .vstf-sale button {
            width: 100%;
        }

    .ads-title.policy-a-z {
        margin-top: 20px;
    }

    .item-about-index {
        width: 46%;
        float: left;
        padding: 6px;
        border: solid 1px #e1f5fe;
        margin: 5px;
        height: 110px;
        padding-top: 20px;
        border-radius: 5px;
    }

    .rating-vietstock-item {
        width: 95%;
        float: left;
        margin: 10px 8px;
        padding: 20px 10px;
        min-height: 300px;
        position: relative;
        margin-top: 80px;
        padding-top: 70px;
    }

    .box-rating {
        padding: 0px 0px;
    }

    h4.common-index {
        font-size: 30px;
    }

    .info-detail {
        height: auto !important;
        background: white;
        margin: 4px 2px;
        padding: 5px;
    }

    .cl-googleads-icon {
        margin: 7px 1px;
    }

    .dynamic-ads-width {
        margin: 0 3px;
    }

    .dynamic-ads-width, .dynamic-detail-width, .w18 {
        width: 22% !important;
    }

        .dynamic-ads-width:first-child, .dynamic-detail-width:first-child, .w19 {
            width: 22% !important;
        }

    .ads-table-mobile .dynamic-ads-width, .ads-table-mobile .dynamic-detail-width, .w18 {
        width: 0% !important;
    }

        .ads-table-mobile .dynamic-ads-width:first-child, .ads-table-mobile .dynamic-detail-width:first-child, .w19 {
            width: 96% !important;
            margin: 0 8px;
        }

    .info-name {
        text-align: left;
        padding: 5px 10px;
    }

    .dynamic-ads-width {
        min-height: 30px;
    }

    .policy-fix {
        padding-left: 26px;
    }

        .policy-fix .dynamic-ads-width {
            width: 22% !important;
        }

    .row-detail {
        margin: 0 5px;
        padding-left: 0px;
    }

    .dynamic-chart-width.cl_chart {
        width: 24% !important;
        margin: 0 2px !important;
    }

    .chart-table {
        margin: 0 15px;
        padding-left: 0px;
    }

    .index-vietstock .owl-nav > div.owl-prev {
        top: 51%;
    }

    .percent-discount {
        left: 80%;
        right: auto;
    }

    .ads-table-mobile {
        padding-left: 10px;
        padding-right: 10px;
    }

    #ads-table .dynamic-ads-width:first-child {
        margin-left: 17px;
    }

    .detail-name, .mobile-title {
        text-align: left;
        border-bottom: none;
        padding: 0px 17px;
        text-align: left !important;
    }

    .child-box-mobile {
        background: white;
        padding: 7px;
    }

    .chart-info-mobile {
        background: white;
        padding: 7px;
        text-align: left;
        margin: 4px 17px;
    }

    .h-thdn {
        height: 30px;
    }

    .ads-title {
        margin: 0px 20px;
        padding: 0 5px;
    }

    .cards-icon-span i {
        left: 41%;
    }

    .CardNew {
        top: 14px;
        right: -10px;
        width: 90px;
        border-bottom: 20px solid #098DFE;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
    }

    .CardBody {
        margin-bottom: -5px;
    }

    .ads-table {
        height: auto;
    }

    .policy-fix {
        padding-top: 31px;
    }

    .ads-sticky {
        background-color: #e1f5fe;
        font-family: 'Big Shoulders Display';
        color: #098dfe;
        border-top: solid 1px #ccd0d6;
        border-image: linear-gradient(89deg, #e1f5fe, #ccd0d6, #e1f5fe) 1;
        width: 21% !important;
        padding: 6px 0px !important;
    }

    .packages-table .ads-name {
        color: #545b66;
    }

    .box-div-month .owl-item {
        width: 110px !important;
    }

    #ads-table .dynamic-ads-width {
        margin: 4px 2px;
        height: 30px;
    }
    /*#ads-table .info-detail {
        margin: 0px 2px;
    }*/
    .footer-1, .footer-2 {
        position: unset;
        width: 100%;
        padding-top: 0px;
        height: 100%;
    }

    .footer-2 {
        border-top: solid 20px #ccc;
        border-image: linear-gradient(89deg, #fff, #e0e3eb, #fff) 1;
        padding: 0px 0px 30px 0px;
    }

    .footer-3, .footer-1-1 {
        display: none
    }

    .footer-1 .CardButton {
        margin: 0 15px !important;
    }

    .card-top .Cards {
        border-bottom-right-radius: 5px;
        border-top-right-radius: 5px;
    }

    .footer-body {
        padding: 15px 0px 0px 20px;
    }

    .bg-lv1 {
        border-top: none;
    }
}

@media only screen and (min-width: 768px) and (max-width: 961px) {
    .ads-table-mobile .dynamic-ads-width:first-child, .ads-table-mobile .dynamic-detail-width:first-child, .w19 {
        width: 98% !important;
    }

    .info-detail {
        height: auto !important;
    }

    .chart-table {
        margin: 7px 2px;
        padding-left: 12px;
    }

    .ads-sticky {
        width: 25% !important;
    }
}

@media only screen and (max-width: 320px) {
    .cards-icon-span i {
        left: 39%;
    }

    .box-div-month .owl-item {
        width: 80px !important;
    }
}

@media only screen and (max-width: 518px) {
    .card-one .card-content {
        height: unset !important;
        left: 18%;
        width: 65%;
        top: 105%;
    }

    .card-one .card-status:hover .card-content {
        display: none;
    }
}
/* vietnamese */
@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/content/fonts/HTxwL3I-JCGChYJ8VI-L6OO_au7B46r2z3nWuZEC.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/content/fonts/HTxwL3I-JCGChYJ8VI-L6OO_au7B46r2z3jWuZEC.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/content/fonts/HTxwL3I-JCGChYJ8VI-L6OO_au7B46r2z3bWuQ.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Big Shoulders Display';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url(/content/fonts/fC1MPZJEZG-e9gHhdI4-NBbfd2ys3SjJCx12wPgf9g-_3F0YdQ88FFYwSCP4.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Big Shoulders Display';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url(/content/fonts/fC1MPZJEZG-e9gHhdI4-NBbfd2ys3SjJCx12wPgf9g-_3F0YdQ88FFcwSCP4.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Big Shoulders Display';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url(/content/fonts/fC1MPZJEZG-e9gHhdI4-NBbfd2ys3SjJCx12wPgf9g-_3F0YdQ88FFkwSA.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Top navigation header */
.nav-header-container {
    display: flex;
    align-items: center;
    height: 40px;
    width: 100%;
    overflow-x: auto;
    position: fixed;
    top: 0;
    left: 0;
    transform: translateY(-60px);
    border-bottom: 1px solid #e0e3eb;
    background-color: #fff;
    z-index: 98;
    transition: transform .3s ease-in-out;
    font-family: Roboto, sans-serif;
    font-size: 14px;
    font-weight: 400;
}

.nav-header-container--show {
    top: 38px;
    transform: translateY(0px);
}

.nav-header-home {
    display: flex;
    align-items: center;
}

.nav-item {
    display: inline-block;
    color: #262627;
    padding: 5px 12px;
    text-align: center;
    white-space: nowrap;
    cursor: default;
    transition: color .3s;
}

    .nav-item:hover {
        color: #262627;
        background: #ededed;
        border: #0000;
        border-radius: 50px;
        text-decoration: none;
    }

.nav-item--active {
    color: #0a6cd5;
    font-weight: 500;
    background: #ededed;
    border: #0000;
    border-radius: 50px;
    text-decoration: none;
}

    .nav-item--active:hover {
        color: #0a6cd5;
    }

.package-compare-group {
    display: flex;
    /*gap: 5px 15px;*/
    gap: 5px 1px;
}

    .package-compare-group > * {
        flex-basis: 0;
        word-break: break-word;
    }

.package-compare-label {
    flex-grow: 21;
}

.package-compare-item {
    flex-grow: 20;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.package-compare-head {
    text-transform: uppercase;
    font-size: 15px;
}

    .package-compare-head > * {
        text-transform: uppercase;
        font-size: 15px;
        padding: 10px;
        z-index: 10;
        background-color: #D6EEFC;
        color: #fff;
        text-align: center;
        font-family: 'Barlow Condensed', sans-serif;
        font-weight: 700;
        font-size: 18px;
        line-height: 21.6px;
        color: #0280EA;
    }

.package-compare-menu > * {
    display: flex;
    align-items: center;
    background-color: #D6EEFC;
    border-top: solid 1px #576f9f;
    padding: 10px !important;
    height: 40px;
    font-size: 16px;
    font-weight: 700;
}

.package-compare-page > * {
    background: #e6e9ef;
    color: #576f9f;
    align-items: center;
    height: 40px;
    display: flex;
    border-top: solid 1px #ccd0d6;
    font-size: 15px;
    font-weight: 700;
    padding: 10px !important;
}

.package-compare-object > *, .package-compare-feature > *, .package-compare-sub-feature > * {
    background: #fff;
    align-items: center;
    min-height: 40px;
    display: flex;
    padding: 4px 10px !important;
    border-top: solid 1px #ccd0d6;
}

.package-compare-feature > * {
    background-color: #f1fafa;
}

.package-compare-sub-feature > * {
    background-color: #e8f6ff;
}

/*.package-compare-feature > .package-compare-label > span {
    padding-left: 15px !important;
}*/

.package-compare-object > .package-compare-item, .package-compare-feature > .package-compare-item, .package-compare-sub-feature > .package-compare-item {
    justify-content: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.package-compare-sub-feature > .package-compare-label > span {
    padding-left: 20px !important;
}

.package-compare-object:hover > *, .package-compare-feature:hover > *, .package-compare-sub-feature:hover > * {
    background-color: #ffdead;
}

.package-compare--desc > .package-compare-label {
    min-height: 40px;
    display: flex;
    align-items: center;
    padding: 10px;
    font-size: 14px;
    background-color: #eef5ff;
    opacity: 0.85;
}

.btn-expand-feature {
    /*cursor: pointer;
    padding: 2px 3px;
    border: 1px solid #ccc;
    border-radius: 3px;*/
    margin-right: 5px;
    font-size: 12px;
}

/*.btn-expand-feature:hover {
    color: #195096;
}*/

.package-compare-head--sticky {
    position: fixed;
    top: 78px;
    z-index: 50;
    left: 0;
    right: 0;
    height: fit-content;
    background: #e1f5fe;
    display: none;
}

    .package-compare-head--sticky .package-info > * {
        background: none;
        color: #000;
        text-align: center;
    }

    .package-compare-head--sticky .package-option > * {
        padding: 10px 0px;
        display: flex;
    }

.checkbox-group {
    display: flex;
    align-items: center;
    gap: 7px;
    user-select: none;
    font-family: Barlow Condensed;
    color: #282828;
}

    .checkbox-group > input[type="checkbox"] {
        width: 15px;
        height: 15px;
        margin: 0;
        cursor: pointer;
    }

    .checkbox-group > label {
        text-transform: none;
        cursor: pointer;
        margin: 0;
        font-family: Barlow Condensed;
        font-size: 14px;
        font-weight: 400;
    }

.package-compare-head > .package-compare-label {
    display: flex;
    justify-content: center;
}

.collapse-content-box {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-top: 10px;
}

    .collapse-content-box.box-collapsed {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, #FFFFFF 93.7%);
        height: 100px;
    }

.collapse-content-btn {
    background-color: #E7F4FF;
    border: 1px solid #0280EA;
    border-radius: 15px;
    color: #282828;
    height: 35px;
    font-size: 13px;
    font-weight: 400;
    text-align: center;
    line-height: 35px;
    width: 135px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 7px;
    cursor: pointer;
    user-select: none;
    text-decoration: none !important;
}

    .collapse-content-btn > span {
        margin-right: 5px;
    }

    .collapse-content-btn > i {
        font-size: 17px;
    }

.package-compare-container {
    position: relative;
    max-height: 600px;
    overflow: hidden;
    margin-bottom: 25px;
}

.package-compare-container--show {
    overflow: initial !important;
    max-height: fit-content !important;
}

.nav-package-compare-container--show {
    height: 36px;
    top: 145px;
    transform: translateY(0px);
    box-shadow: 0px 4px 4px 0px #00000040;
}

    .nav-package-compare-container--show .nav-item {
        font-size: 13px;
    }

    .nav-package-compare-container--show .nav-item--active {
        background-color: #F5F5F5;
    }

@media screen and (max-width: 991px) {
    .package-compare-menu > .package-compare-item, .package-compare-page > .package-compare-item {
        display: none;
    }

    .package-compare-object, .package-compare-feature, .package-compare-sub-feature {
        flex-wrap: wrap;
        gap: 0 1px;
        margin-bottom: 0;
    }

        .package-compare-object > .package-compare-label, .package-compare-feature > .package-compare-label, .package-compare-sub-feature > .package-compare-label {
            min-width: 100%;
        }

    .package-compare-head--sticky .package-compare-group > .package-compare-label {
        display: none;
    }

    .package-compare-head--sticky .package-compare-head > .package-compare-item {
        color: #545b66;
        font-family: 'Big Shoulders Display';
        padding: 6px 0 !important;
    }

    .package-compare-head--sticky .package-price > .package-compare-item {
        font-family: 'Big Shoulders Display';
        color: #098dfe;
        border-top: solid 1px #ccd0d6;
        border-image: linear-gradient(89deg, #e1f5fe, #ccd0d6, #e1f5fe) 1;
        padding: 6px 0 !important;
    }

    .package-compare-head--sticky .package-option > .package-compare-label {
        justify-content: flex-start !important;
        padding: 7px 5px 8px 15px;
        padding-top: 0 !important;
    }

    .package-compare-head--sticky .package-option > .package-compare-item {
        display: none;
    }

    .package-compare-head--sticky .btn-option {
        display: none;
    }

    .package-compare-head {
        gap: 1px;
    }

        .package-compare-head > .package-compare-label {
            display: none;
        }

    .collapse-content-btn {
        padding: 7px 15px;
    }

    .package-compare-label {
        padding: 7px !important;
    }

    .package-compare-item {
        padding: 5px !important;
        height: auto;
        min-height: 30px;
    }

    .nav-header-container--show {
        top: 46px;
    }

    .package-compare-head--sticky {
        top: 86px;
    }

    .nav-package-compare-container--show {
        top: 148px;
    }

    .package-compare-head--sticky .package-compare-label + .package-compare-item {
        border-left: none !important;
    }
}

.expand-btn-group {
    margin: auto;
    width: 90%;
    color: white;
    height: 34px;
}

    .expand-btn-group:hover .expand div {
        display: none;
    }

    .expand-btn-group .expand:hover div {
        display: block;
    }

.package-compare-label > span[data-href]:hover {
    color: #015096;
    cursor: pointer;
}

.package-free-using {
    background-color: #ececf4 !important;
}

.promote-service-content {
    background-image: url(/content/policy/img/bgr.png);
    background-size: 100% auto;
}

.promote-service--brand-text {
    font-weight: 600;
    color: #22569A;
    font-size: 40px;
}

button.promote-service--btn-create {
    background: linear-gradient(90deg, #00C6FB 0%, #005BEA 100%);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    color: #fff;
    height: 40px;
    font-size: 16px;
    font-weight: 600;
    width: 240px;
}

.collapse-content-btn:hover {
    background-color: #0b68b9;
    color: #fff;
}

.info-tooltip {
    position: relative;
}

    .info-tooltip:hover .info-tooltip__tips {
        display: block
    }

.info-tooltip__tips {
    display: none;
    position: absolute;
    left: -7px;
    bottom: calc(100% + 10px);
    padding: 10px;
    border: 1px solid #efefef;
    background-color: #335295;
    border-radius: 5px;
    color: #fff;
    font-weight: 400;
    font-size: 14px;
    z-index: 50;
    max-width: 250px;
    width: max-content;
    white-space: normal;
}

    .info-tooltip__tips:after {
        content: " ";
        position: absolute;
        top: calc(100%);
        left: 15px;
        border-width: 6px;
        border-style: solid;
        border-color: #335295 transparent transparent transparent;
    }

.package-policy-page {
    background-image: url(/content/policy/img/price-plan-bgr1.png);
    background-repeat: no-repeat;
    /*background-size: 100%;*/
    margin: 0 !important;
    background-color: #fff;
    padding-bottom: 80px;
}

@media screen and (max-width: 1199px) {
    .package-policy-page {
        background-size: auto 120%;
    }
}

.title-price-plan {
    margin-top: 20px;
    font-size: 32px;
    font-weight: 600;
    font-family: 'Barlow Condensed', sans-serif;
}

.endow-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 15px;
}

.best-endow-title {
    position: absolute;
    top: -5px;
    right: 25%;
    font-family: Helvetica;
    font-weight: 700;
    font-size: 14px;
    line-height: 25px;
}

.endow-vector {
    margin: auto;
}

    .endow-vector > img {
        width: calc(100% - 180px);
        max-height: 25px;
        min-height: 15px;
    }

.endow-option-outer {
    height: 60px;
    padding: 5px;
    background-color: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 5px;
    border-radius: 30px;
    overflow-x: auto;
}

.endow-option {
    position: relative;
    width: fit-content;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.endow-option__indicator {
    left: calc(100% / 3);
    position: absolute;
    height: 50px;
    width: 135px;
    color: #fff;
    background-color: #0280EA !important;
    border-radius: 30px;
    box-shadow: 0px 4px 4px 0px #00000040;
    transition: all 0.5s;
}

.endow-option__item {
    width: 135px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #545B66;
    cursor: pointer;
    z-index: 1;
    height: 50px;
    user-select: none;
    border-radius: 30px;
}

.endow-option__item--value {
    margin-top: 1px;
}

.endow-option__item--value-percent {
    font-weight: 700;
    font-size: 18px;
    margin-left: 5px;
}

.endow-option__item--value-text {
    font-weight: 400;
    font-size: 12px;
}

.endow-option__item--type {
    font-weight: 700;
    font-size: 13px;
    line-height: 22px;
}

.endow-option__item:not(.endow-option__item--active):hover {
    background-color: #ffe5bf66;
    border-radius: 30px;
}

.endow-option__item--active {
    color: #fff;
    /*background-color: #0280EA !important;
    border-radius: 30px;
    box-shadow: 0px 4px 4px 0px #00000040;*/
}

/*.packages-sub-desc {
    margin-top: 15px;
    font-size: 13px;
    font-weight: 400;
}

.use-package-free {
    margin-top: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.use-package-free__title {
    text-transform: uppercase;
    font-weight: 400;
}

.use-package-free__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #0280EA;
    border-radius: 5px;
    box-shadow: 0px 4px 4px 0px #00000040;
    background-color: #fff;
    width: 120px;
    height: 30px;
    color: #0280EA;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
    margin-left: 10px;
    cursor: default;
}*/

.packages-list {
    display: flex;
    gap: 65px 7px;
    margin-top: 80px;
    justify-content: center;
    flex-wrap: wrap;
}

.package-card {
    flex: 1 1 0px;
    width: 285px;
    max-width: 285px;
    min-width: 280px;
}

    .package-card:hover .package-card-info--name {
        background-color: #0280EA;
        color: #fff;
    }

.package-card-info {
    width: 100%;
    background-repeat: no-repeat;
    background-size: 100%;
    position: relative;
    text-align: center;
    color: #fff;
    float: left;
    height: fit-content;
    /*padding-bottom: 52px;*/
    min-height: 260px;
    z-index: 1;
}

.package-card-info--basic {
    background-image: url(/content/policy/img/card-bgr-basic.svg);
}

.package-card-info--standard {
    background-image: url(/content/policy/img/card-bgr-standard.svg);
}

.package-card-info--pro {
    background-image: url(/content/policy/img/card-bgr-pro.svg);
}

.package-card-info--premium {
    background-image: url(/content/policy/img/card-bgr-premium.svg);
}

.package-card-info--name {
    position: absolute;
    width: 90px;
    height: 90px;
    left: 0;
    right: 0;
    margin-left: auto;
    transform: translateY(-50%);
    margin-right: auto;
    border-radius: 50%;
    background: #fff;
    text-align: center;
    text-transform: uppercase;
    line-height: 90px;
    border: 2px solid #fff;
    color: #0280EA;
    font-size: 18px;
    font-weight: 700;
    font-family: 'Barlow Condensed';
    box-shadow: 0px 10px 10px 0px #00000026;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.package-card-info--active .package-card-info--name {
    background-color: #0280EA;
    color: #fff;
}

.package-card-info--intro {
    font-family: Helvetica;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
    font-weight: 400;
    padding-top: 52px;
    font-size: 12px;
    line-height: 13.8px;
}


.package-card-info--pay {
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cost-saving {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 15px;
    font-family: Barlow Condensed;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
    text-align: left;
}

.cost-saving__label {
    /*font-family: 'Roboto';
    font-size: 13px;
    font-weight: 300;
    text-align: left;*/
}

.original-price {
    color: #FFFFFF80;
    font-size: 12px;
    text-decoration: line-through;
}

.price-save {
    font-family: Barlow Condensed;
    font-size: 20px;
    /*font-weight: 700;*/
    line-height: 20px;
    text-align: center;
}

.outstand-price {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 2px;
}

.current-price {
    font-weight: 700;
    font-family: 'Barlow Condensed';
    display: flex;
    align-items: flex-start;
}

.current-price__value {
    font-size: 34px;
    line-height: 40.8px;
}

.current-price__unit {
    font-size: 24px;
    margin-left: 4px;
    line-height: 28.8px;
}

.price-period {
    font-family: 'Barlow Condensed';
    font-size: 20px;
    font-weight: 300;
    line-height: 24px;
    text-align: center;
}

.discount-container {
    display: flex;
    justify-content: center;
    align-items: end;
    padding-left: 10px;
    padding-right: 10px;
    gap: 10px;
    min-height: 40px;
}

.discount-info {
    display: flex;
    gap: 4px;
}

.discount-info__group {
    display: flex;
    gap: 3px;
    flex-direction: column;
    justify-content: flex-end;
}

.current-discount {
    background-color: #FCEAE9;
    color: #E83F01;
    font-size: 12px;
    font-weight: 400;
    padding: 2px 4px;
    line-height: 16px;
    text-align: center;
    cursor: default;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

    .current-discount > div {
        line-height: 14px;
    }

.package-card-info--option {
    display: flex;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    margin-top: 5px;
    min-height: 8px;
}

.package-card-info--option__item {
    color: #ffffff80;
    padding-left: 8px;
    padding-right: 8px;
    border-right: 1px solid #fff;
    line-height: 13px;
    cursor: pointer;
}

.package-card-info--option__item--active {
    color: #fff;
}

.package-card-info--option__item:last-child {
    border-right: none;
}

.package-service__btn {
    min-width: 100px;
    height: 30px;
    padding: 0 20px;
    text-align: center;
    line-height: 30px;
    text-transform: uppercase;
    border-radius: 25px;
    box-shadow: 0px 4px 4px 0px #00000040;
    background-color: #fff;
    color: #448BFC;
    cursor: pointer;
}

    .package-service__btn:hover {
        background-color: #0280EA;
        color: #fff;
    }

.package-service {
    width: fit-content;
    margin: auto;
    margin-top: 14px;
    font-size: 12px;
    font-weight: 700;
}

.package-service__link {
    text-decoration: underline;
    margin-top: 7px;
    cursor: pointer;
    font-weight: 400;
}

    .package-service__link:hover {
        color: #ffffffcc;
    }

.package-card-spec {
    margin-top: 0;
    padding: 0 10px;
    height: 100%;
    position: relative;
}

.package-card-spec--content {
    height: fit-content;
    background-color: #fff;
    box-shadow: 0px 4px 4px 0px #00000026;
    border-radius: 20px;
    height: 100%;
    padding-bottom: 15px;
}

.package-card-desc__label {
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #545B66;
    padding: 0 5px;
}

.package-feature-list {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.package-feature__item--main {
    display: flex;
    align-items: baseline;
    column-gap: 5px;
    font-size: 14px;
    font-weight: 400;
    color: #566F9E;
    position: relative;
}

.package-feature__item--icon {
    width: 10px;
    min-width: 10px;
}

.package-feature__item--text {
    line-height: 20px;
    /*border-bottom: 1px dashed #00000026;*/
    cursor: default;
    text-decoration-line: underline;
    text-decoration-style: dashed;
    text-underline-offset: 4px;
    text-decoration-color: #00000026;
}

.package-feature__item--text-disabled {
    color: #566F9E80;
}

.package-feature__item--text:hover {
    text-decoration-color: #00000070;
    color: #4365a7;
}

.package-feature__item--progress {
    position: relative;
    margin-top: 6px;
    margin-left: 15px;
    height: 3px;
    width: calc(100% - 25px);
    background-color: #D4D4D4;
    border-radius: 3px;
}

.package-compare-value--progress {
    position: relative;
    /*margin-top: 4px;*/
    max-width: 150px;
    height: 3px;
    width: 100%;
    background-color: #D4D4D4;
    border-radius: 3px;
    margin-top: auto;
    margin-bottom: 3px;
}

    .package-feature__item--progress::after, .package-compare-value--progress::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 3px;
        width: 0;
        background-color: #0280EA;
        border-radius: 3px;
    }

.progress--1::after {
    width: 20%;
}

.progress--2::after {
    width: 40%;
}

.progress--3::after {
    width: 60%;
}

.progress--4::after {
    width: 80%;
}

.progress--5::after {
    width: 100%;
}

.package-card-voucher {
    padding-top: 30px;
}

.package-card-voucher--gift {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding-left: 15px;
    padding-bottom: 20px;
    padding-right: 10px;
}

.package-card-voucher--gift__text {
    font-size: 12px;
    font-weight: 400;
    color: #015096;
}

.package-card-voucher--code {
    display: flex;
    justify-content: center;
    padding-top: 14px;
    padding-bottom: 15px;
    margin-left: 20px;
    margin-right: 20px;
    border-top: 1px dashed #00000026;
}

.package-card-voucher--code__btn {
    border: 1px dashed #0280EA;
    height: 30px;
    width: 100px;
    border-radius: 15px;
    text-align: center;
    line-height: 30px;
    color: #0280EA;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.package-compare-layout {
    position: relative;
    background-color: #fff;
}

    .package-compare-layout::before {
        content: "";
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url(/content/policy/img/bgr1.png);
        /*background-repeat: no-repeat;*/
        background-repeat: repeat-y;
        background-size: 100%;
        background-position: center 30px;
        opacity: 0.2;
    }

.frequent-ques-layout {
    padding-bottom: 20px;
    margin-top: 40px;
}

    .frequent-ques-layout::before {
        content: "";
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 280px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 25.8%, #FFFFFF 82.38%);
    }

.frequent-ques-container {
    /*border-radius: 10px;
    background: #FFFFFFCC;*/
}

.fag-label {
    font-family: Barlow Condensed;
    font-size: 32px;
    font-weight: 600;
    line-height: 38.4px;
    text-align: center;
    color: #448BFC;
    padding-bottom: 12px;
}

.fag-content {
    background: #fff;
    border-radius: 10px;
    opacity: 0.85;
}

.fag-content-list {
    padding-top: 5px;
}

    .fag-content-list p {
        margin: 0 0 5px;
        color: #545b66;
    }

.fag-content-item {
}

.ques-content {
    padding: 12px 22px;
    border-bottom: 1px solid #00000026;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
}

.answer-content {
    background-color: #EBEDF4CC;
    font-size: 13px;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.2s ease;
}

    .answer-content > div {
        padding: 15px 35px 10px;
    }

.answer-content--show {
    max-height: 1000px;
}

.ques-content--label {
    font-family: Helvetica;
    font-size: 14px;
    font-weight: 600;
    line-height: 13.8px;
    color: #545B66;
}

.ques-content--icon {
    margin-left: auto;
    color: #282828;
}

.about-vietstock-layout {
    position: relative;
    background-color: #fff;
    width: 100%;
    height: 100%;
    background-image: url(/content/policy/img/bgr2.png);
    background-repeat: no-repeat;
    padding: 200px 0;
    background-position: center;
    background-size: auto 100%;
}

    .about-vietstock-layout > .container {
        position: relative;
    }

.about-info__label {
    font-family: 'Barlow Condensed';
    font-size: 32px;
    font-weight: 600;
    text-align: center;
    color: #448BFC;
}

.about-info__desc {
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    color: #282828;
}

.info-card-list {
    display: flex;
    gap: 30px;
    justify-content: center;
    margin-top: 30px;
    flex-wrap: wrap;
}

.info-card {
    background-color: #fff;
    padding: 5px;
    width: 200px;
    height: 230px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    transition: transform .2s;
}

    .info-card:hover {
        transform: scale(1.1);
    }

.info-card__desc {
    position: relative;
}

.info-card__desc--data {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 20px;
    font-family: Barlow Condensed;
    font-size: 48px;
    font-weight: 700;
    text-align: left;
    color: #fff;
}

.info-card__label {
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    color: #282828;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-vietstock-outer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
}

.our-customer-layout {
    background-color: #fff;
}

.our-customer-outer {
    padding-bottom: 80px;
    max-width: 100%;
}

.our-customer--container {
    overflow-x: hidden;
    padding-left: 20px;
    padding-bottom: 5px;
    margin-right: -2px;
}

.our-customer__label {
    font-family: Barlow Condensed;
    font-size: 32px;
    font-weight: 600;
    text-align: center;
    color: #448BFC;
}

.our-customer--list {
    display: flex;
    justify-content: flex-start;
    /*align-items: center;*/
    align-items: stretch;
    gap: 45px;
    margin-top: 90px;
    transition: transform 0.3s ease-in-out;
}

.customer-item {
    background-color: #fff;
    box-shadow: 0px 4px 4px 0px #00000040;
    border-radius: 20px;
    position: relative;
    width: 350px;
    min-width: 350px;
    user-select: none;
}

    .customer-item:active {
        cursor: grab;
    }

.customer-item--info {
    position: absolute;
    left: -20px;
    top: -30px;
}

.customer-item--info-name {
    font-family: Helvetica;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

.customer-item--info-corp {
    color: #fff;
    font-family: Helvetica;
    font-weight: 400;
    padding-left: 5px;
    font-size: 13px;
}

.customer-item--img {
    border-radius: 50%;
    width: 120px;
    height: 120px;
    position: absolute;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
}

    .customer-item--img > img {
        border-radius: 50%;
        width: 100%;
        height: 100%;
        background: #fff;
        background-size: cover;
    }

.customer-item--feedback {
    padding: 15px;
    margin-top: 50px;
    /*height: 140px;*/
}

.customer-item--feedback-rating {
    display: flex;
    gap: 3px;
}

.rating-star::before {
    content: "\2605";
    color: #999999;
    font-size: 26px;
}

.rating-star.star-fill::before {
    color: #FFC700;
}

@media screen and (max-width: 1199px) {
    /*.about-vietstock-layout {
        background-image: url(/content/policy/img/bgr2-mobile.png);
        background-repeat: repeat;
        background-position: top;
        padding: 50px 0;
    }*/
    .about-vietstock-layout {
        padding: 150px 0;
    }

    .info-card-list {
        gap: 20px;
    }

    .info-card {
        width: 175px;
    }

    /*.our-customer-outer{
        padding-top: 50px;
    }*/
}

@media screen and (max-width: 1024px) {
    .info-card-list {
        gap: 20px;
    }
}

@media screen and (max-width: 991px) {
    .info-card-list {
        gap: 30px;
    }

    .about-vietstock-layout {
        padding: 120px 0;
    }
}

@media screen and (max-width: 767px) {
    .info-card-list {
        gap: 10px;
    }

    .info-card {
        width: 170px;
    }
}

.customer-item--info-shape {
    position: relative;
    width: 240px;
    min-height: 60px;
    padding: 8px 5px 7px 30px;
    height: fit-content;
    border-radius: 30px 30px 30px 0px;
    background-color: #448BFC;
}

.customer-item--info-shape--rect {
    width: 20px;
    height: 20px;
    border-radius: 0px 0px 0px 20px;
    background-color: #0042AB;
}

@media screen and (max-width: 1199px) {
    .our-customer--container {
        /*overflow: auto;
        height: 280px;*/
        display: flex;
        align-items: flex-end;
        padding-left: 20px;
        padding-bottom: 5px;
        padding-top: 75px;
    }

    .our-customer--list {
        margin-top: 0;
    }
}

@media screen and (max-width: 767px) {
    .customer-item {
        width: 320px;
        min-width: 320px;
    }

    .customer-item--feedback {
        /* height: 160px;*/
    }

    .customer-item--img {
        width: 100px;
        height: 100px;
    }
}

.package-compare-head--sticky .package-compare-head > * {
    padding: 8px 0px;
}

.package-compare-head--sticky .package-compare-head > .package-compare-label {
    visibility: hidden;
}

.package-compare-head--sticky .package-compare-head > .package-compare-item {
    font-size: 18px;
    color: #0280EA;
    line-height: 21px;
    font-weight: 700;
}

.btn-option {
    font-size: 13px;
    font-weight: 400;
    color: #545B66;
    text-decoration: underline;
    cursor: pointer;
    user-select: none;
}

    .btn-option:hover {
        color: #333;
    }

.package-compare-head--sticky .package-option > * {
    padding-top: 0;
}

.nav-header-container--show .nav-item {
    font-family: Helvetica;
    padding: 5px 20px;
}

    .nav-header-container--show .nav-item > span::before {
        content: attr(data-text);
        display: block;
        font-weight: 700;
        height: 0;
        overflow: hidden;
        visibility: hidden;
    }

.nav-header-container--show .nav-item--active {
    font-weight: 700;
    background-color: #448BFC;
    color: #fff;
}

.package-compare-item > div {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width: 767px) {
    .endow-vector > img {
        content: url("/content/policy/img/price-plan-vector.svg");
        width: calc(100% - 60px);
    }

    .best-endow-title {
        right: 15%;
    }

    .endow-option__item, .endow-option__indicator {
        height: 45px;
        width: 110px;
    }

    .endow-option-outer {
        height: 55px;
    }

    .endow-option__item--type {
        font-size: 12px;
        line-height: 20px;
    }

    .endow-option__item--value-percent {
        font-size: 17px;
    }
}

.swiper-container {
    display: flex;
    justify-content: center;
    margin-top: 15px;
    gap: 10px;
}

.swiper-btn {
    cursor: pointer;
    color: #467fd0;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #e1f5febb;
    border-radius: 50%;
    border: 1px solid #8ac8ff;
}

    .swiper-btn > i {
        font-size: 18px;
        background-image: linear-gradient(90deg, #89F7FE 0%, #66A6FF 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .swiper-btn:first-child > i {
        background-image: linear-gradient(-90deg, #89F7FE 0%, #66A6FF 100%);
    }

.package-compare-object, .package-compare-feature, .package-compare-sub-feature, .package-compare-page {
    opacity: 0.85;
}

.package-compare-head--sticky .package-compare-group {
    padding: 10px 0;
}

.package-compare-head--sticky .package-compare-label {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.package-compare-head--sticky .package-compare-item:not(:last-child) {
    border-right: 1px solid #0000001A;
}

.package-compare-head--sticky .package-compare-label + .package-compare-item {
    border-left: 1px solid #0000001A;
}

.package-compare-head--sticky .package-info {
    text-transform: uppercase;
    font-family: 'Barlow Condensed', sans-serif;
    text-align: center;
    padding-bottom: 8px;
    font-size: 18px;
    color: #0280EA;
    line-height: 21px;
    font-weight: 700;
}

.group-checkbox-sm {
    display: none;
}

@media screen and (max-width: 991px) {
    .group-checkbox-sm {
        display: block;
        padding: 0 0 8px 10px;
    }

    .package-compare-head--sticky .package-compare-group {
        padding: 7px 0px !important;
    }

        .package-compare-head--sticky .package-compare-group > .package-compare-item {
            padding: 0 !important;
            min-height: fit-content;
        }

            .package-compare-head--sticky .package-compare-group > .package-compare-item > .package-info {
                padding: 0 !important;
            }
}

.package-feature__item--tooltip {
    display: none;
    width: fit-content;
    min-width: 240px;
    max-width: 300px;
    height: fit-content;
    background: #335295;
    color: #fff;
    position: absolute;
    top: -5px;
    transform: translateY(-100%);
    left: 12px;
    padding: 5px 10px;
    border-radius: 5px;
    z-index: 10;
}

    .package-feature__item--tooltip::before {
        content: "";
        position: absolute;
        top: calc(100% - 1px);
        border-width: 6px;
        border-style: solid;
        border-color: #335295 transparent transparent transparent;
    }

.package-feature__item--text:hover + .package-feature__item--tooltip {
    display: block;
}

/*Style for voucher*/
.voucher-container-outer {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.voucher-container {
    position: relative;
}

.voucher-tooltip-container {
    position: absolute;
    width: max-content;
    top: 100%;
    left: 0;
    background-color: #576F9FF1;
    z-index: 10;
    border-radius: 5px;
    padding: 7px 10px;
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    text-align: left;
    color: #fff;
    display: none;
}

.voucher-list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: wrap;
    /*max-width: calc(100% - 130px);*/
    overflow: hidden;
    /*gap: 20px;*/
}

.voucher-item {
    display: flex;
    height: 70px;
    min-width: 230px;
    position: relative;
    max-width: fit-content;
}

.voucher-item__left {
    width: 77px;
    min-width: 77px;
    height: 100%;
    color: #fff;
    background: radial-gradient(5px at 100% 5px, transparent 98%, #0280EA) 0px -5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.voucher-item__right {
    display: flex;
    height: 100%;
    width: 100%;
    background: radial-gradient(5px at 0 5px, transparent 98%, #fff) 0px -5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    gap: 7px;
    padding: 5px 5px 5px 10px;
    font-family: Helvetica;
    justify-content: space-between;
}

.voucher-item__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    gap: 3px;
}

.voucher-item__info-label {
    font-family: Helvetica;
    font-size: 13px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
}

.voucher-item__info-tooltip {
    /*position: relative;*/
}

.voucher-item__info-tooltip-icon {
    background-color: #fff;
    color: #0280EA;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    line-height: 14px;
    cursor: default;
}

.voucher-item__info-tooltip-tips {
    position: absolute;
    width: max-content;
    top: 100%;
    left: 0;
    background-color: #576F9FF1;
    z-index: 10;
    border-radius: 5px;
    padding: 7px 10px;
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    text-align: left;
    display: none;
}

.voucher-item__info-tooltip:hover .voucher-item__info-tooltip-tips {
    display: block;
}

.voucher-item__detail {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
}

.voucher-item__discount {
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: flex-end;
    font-weight: 700;
    color: #545B66;
}

.voucher-item__discount-txt {
    font-size: 11px;
    /*font-weight: 400;*/
    line-height: 13px;
    /*color: #282828;*/
}

.voucher-item__discount-main {
    font-size: 16px;
    /*font-weight: 700;*/
    line-height: 16px;
    /*color: #0280EA;*/
}

.voucher-item__expire {
    font-size: 11px;
    font-weight: 400;
    line-height: 14px;
    color: #545B66;
}

.voucher-item__code-box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3px;
}

.voucher-item__code {
    font-size: 11px;
    font-weight: 500;
    line-height: 12px;
    color: #545B66;
}

.voucher-item__code-copy {
    display: flex;
    width: 14px;
    cursor: default;
}

.voucher-item__opt {
    display: flex;
    justify-content: center;
    align-items: center;
}

.voucher-item__opt-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 7px;
    font-family: Helvetica;
    font-size: 12px;
    font-weight: 400;
    line-height: 12px;
    background-color: #0280EA;
    color: #fff;
    border-radius: 5px;
    height: 36px;
    width: 40px;
    cursor: pointer;
    outline: none;
    border: none;
    box-shadow: none;
    user-select: none;
}

.voucher-item__opt-btn:disabled,
.voucher-item__opt-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.voucher-item--active .voucher-item__opt-btn {
    background: #fff;
    color: #0280EA;
    border: 1px solid #0280EA;
}

.voucher-list-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    /*margin-top: 30px;*/
    gap: 15px;
    position: relative;
}

.btn-slider-voucher {
    max-width: 35px;
    min-width: 35px;
    min-height: 35px;
    max-height: 35px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 4px 4px 0px #00000026;
    cursor: pointer;
    user-select: none;
}

.btn-slider-voucher--disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.voucher-list .owl-stage {
    display: flex;
    justify-content: center;
}

.voucher-list .owl-stage-outer, .voucher-list {
    width: fit-content !important;
}

.voucher-list .owl-item:last-child {
    margin-right: 0 !important;
}


.voucher-item--vert {
    flex-direction: column;
    min-width: 90px;
    height: fit-content;
}

.voucher-item--vert .voucher-item__left {
    width: 100%;
    height: 60px;
    background: radial-gradient(5px at 0px calc(100% - 0px), transparent 98%, #0280EA) bottom left, radial-gradient(5px at calc(100% - 0px) calc(100% - 0px), transparent 98%, #0280EA) bottom right;
    background-repeat: no-repeat;
    background-size: 51% 100%;
    border-radius: initial;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.voucher-item--vert .voucher-item__right {
    flex-direction: column;
    padding: 7px 7px 5px 7px;
    gap: 5px;
    background: radial-gradient(5px at 0px 0px, transparent 98%, #fff) top left, radial-gradient(5px at 100% 0px, transparent 98%, #fff) top right;
    background-repeat: no-repeat;
    background-size: 51% 100%;
    border-radius: initial;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

/*.voucher-item--vert .voucher-item__expire {
    font-size: 10px;
}*/

.voucher-item--vert .voucher-item__code-copy {
    width: 11px;
}

.voucher-item--vert .voucher-item__opt-btn {
    height: 20px;
    width: 45px;
    font-size: 9px;
    padding: 0;
}

.voucher-item--vert .voucher-item__detail {
    align-items: center;
}

/*End for voucher*/

/* Style for --> Package News */

.package-news-box {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-top: 50px;
}

.package-news-label {
    font-family: Barlow Condensed;
    font-size: 32px;
    font-weight: 600;
    line-height: 38.4px;
    text-align: center;
    color: #448BFC;
}

.package-news-content {
    display: flex;
    gap: 30px;
    align-items: stretch;
    width: 100%;
}

.package-news-box-group {
    display: flex;
    gap: 30px;
    flex-grow: 2;
    flex-direction: row;
    width: calc(50% - 30px);
    flex-wrap: wrap;
}

.package-news-box--shape {
    flex: 1 0 calc(50% - 15px);
    /*aspect-ratio: 0.85;*/
}

.package-news-box--highlight {
    width: calc(50% - 30px);
    flex-grow: 2;
}

.package-news-item {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.package-news-item__main-box {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
    gap: 6px;
}

.package-news-item__main {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.package-news-item__title {
    font-family: Barlow Condensed;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    text-align: left;
    color: #0280EA !important;
    cursor: pointer;
    text-transform: uppercase;
}

.package-news-item__time {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: Helvetica;
    font-size: 13px;
    font-weight: 400;
    line-height: 13px;
    color: #545B66;
}

.package-news-item__content > * {
    display: none;
    font-family: Helvetica;
    font-size: 13px;
    font-weight: 400;
    line-height: 15px;
    text-align: left;
    color: #666;
}

.package-news-item__content .pHead {
    display: block;
    font-family: Helvetica;
    font-size: 13px;
    font-weight: 700;
    line-height: 14.95px;
    text-align: left;
    color: #282828;
    text-transform: uppercase;
    margin-bottom: 3px;
    Helvetica, font-family: sans-serif;
}

.package-news-item__content a {
    color: #0280EA;
}

.package-news-item__content .pHead + .pBody {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.package-news-item__btn {
    display: flex;
    gap: 10px;
    align-items: center;
    font-family: Helvetica;
    font-size: 13px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
    text-transform: uppercase;
    color: #566F9E !important;
    cursor: pointer;
    text-decoration: none !important;
    margin-left: auto;
}

.package-news-item__btn img {
    width: fit-content;
    height: fit-content;
}

.package-news-item--shape .package-news-item__main-box {
    padding: 10px 10px 20px 10px;
}

.package-news-item--shape .package-news-item__title {
    font-size: 16px;
    line-height: 19px;
}

.package-news-box--row .package-news-item {
    flex-direction: row;
}

.package-news-box--row .package-news-item__thumbnail, .package-news-box--row .package-news-item__main-box {
    flex-grow: 1;
    width: 50%;
    aspect-ratio: 1.8;
}

.package-news-box--row .package-news-item__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.package-news-box--row .package-news-item__title {
    font-size: 16px;
    line-height: 19px;
}

.package-news-box--feat .package-news-item__content .pHead + .pBody {
    display: none;
}

.package-news-box--feat .package-news-item__content .pHead {
    text-transform: none;
    color: #666;
}

.package-news-box--feat .package-news-item__content .pHead a {
    color: #0099FF;
}

@media screen and (max-width: 1199px) {
    .package-news-content, .package-news-box-group {
        gap: 20px;
    }
}

@media screen and (max-width: 991px) {
    .package-news-content, .package-news-box-group {
        gap: 15px;
    }
}

@media screen and (max-width: 767px) {
    .package-news-content, .package-news-box-group {
        gap: 10px;
    }

    .package-news-box--highlight {
        width: 100%;
    }

    .package-news-content {
        flex-wrap: wrap;
    }

    .package-news-item__main-box {
        padding: 15px;
    }
}

.promotion_banner {
    display: none;
}

@media (max-width: 767px) {
    .promotion_banner--mobile {
        display: block;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .promotion_banner--tablet {
        display: block;
    }
}

@media (min-width: 992px) {
    .promotion_banner--desktop {
        display: block;
    }
}

/* End for --> Package News */
.item-about-index.user {
    transition: .2s ease-in-out transform;
}
.item-about-index.user:hover {
    transform: rotate(0deg) scale(1.1);
}
.item-about-index.data-stock{
    transition: .2s ease-in-out transform;
}
.item-about-index.data-stock:hover{
    transform: rotate(0deg) scale(1.1);
}
.item-about-index.profile{
    transition: .2s ease-in-out transform;
}
.item-about-index.profile:hover{
    transform: rotate(0deg) scale(1.1);
}
.item-about-index.macro{
    transition: .2s ease-in-out transform;
}
.item-about-index.macro:hover{
    transform: rotate(0deg) scale(1.1);
}
.item-about-index.finance{
    transition: .2s ease-in-out transform;
}
.item-about-index.finance:hover{
    transform: rotate(0deg) scale(1.1);
}
.col-xs-22.col-sm-22.col-md-22 {
    color: #545b66;
}
.ads-head-product{
    border-radius: 5px;
}
.total-span{
    font-size: 28px;
}