/* toast */
/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
    visibility: hidden; /* Hidden by default. Visible on click */
    min-width: 250px; /* Set a default minimum width */
    margin-left: -125px; /* Divide value of min-width by 2 */
    background-color: green; /* Black background color */
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 2px; /* Rounded borders */
    padding: 16px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 999; /* Add a z-index if needed */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
    visibility: visible; /* Show the snackbar */
    /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
    However, delay the fade out process for 2.5 seconds */
    -webkit-animation: fadein 0.5s, fadeout 0.5s 3.5s;
    animation: fadein 0.5s, fadeout 0.5s 3.5s;
}


body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    background-color: #eeecec;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
}

.container {
    margin: auto;
    padding: 0;
    /* width: 1190px; */
}
.box-contact{
    background-color: #4A8E09;
}
.box-contact .box-left{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 20px;
}
.box-contact .box-left h3{
    color: white;
}
.box-contact .box-right{
    background-color: #bfbfbf;
    padding: 15px;
}
.p-absolute {
    position: absolute;
}
.menu-status button {
    padding: 18px 0;
    width: calc(100%/7);
    margin: 0;
}
.menu-status button.active {
    border-left: 1px solid #D9D9D9!important;
    border-right: 1px solid #D9D9D9!important;
    border-top: 5px solid #4A8E09!important;
}
/* Common */
#loading_web{
    display: none;
}
.box-loading{
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 9999;
    background: #000;
    top: 0;
    left: 0;
    opacity: 0.6;
    display: flex;
    justify-content: center;
    align-items: center;
}
.loader {
    border: 10px solid red;
    border-radius: 25%;
    border-top: 10px solid green;
    width: 50px;
    height: 50px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
  }
  
  /* Safari */
  @-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  .error{
    color: red;
  }
.mg0 {
    margin: 0;
}
.pd-15{
    padding: 15px;
}
.pd-40{
    padding: 40px;
}
.mb-15 {
    margin-bottom: 15px;
}
.pb-15 {
    padding-bottom: 15px;
}
.mb-25 {
    margin-bottom: 25px;
}
.mt-15 {
    margin-top: 15px;
}
.mgr-15{
    margin-right: 15px;
}
.detail-product .box-title{
    background: #ddd;
}
.detail-product .box-title .title{
    padding: 10px;
}
.btn-increase, .btn-decrease, .input-quantity {
    border: 1px solid #ABA9A9!important;
    border-color: #ABA9A9!important;
}
.mb-30 {
    margin-bottom: 30px;
}
.pt-24 {
    padding-top: 24px;
}
.pt-15 {
    padding-top: 15px;
}
.pdl-10 {
    padding-left: 10px;
}
.pdr-0 {
    padding-right: 0px;
}
.pdl-15 {
    padding-left: 15px;
}
.pdl-20 {
    padding-left: 20px;
}
.pdl-30 {
    padding-left: 30px;
}
.pdt-30{
    padding-top: 30px;
}
.pb-29 {
    padding-bottom: 29px;
}
.c-fff {
    color: #fff;
}
.c-808080 {
    color: #808080;
}
.mgl-10{
    margin-left: 10px;
}
.mgl-d-10{
    margin-left: -10px !important;
}
.mgl-d-15{
    margin-left: -15px !important;
}
.c-69D008 {
    color: #69D008;
}
.c-0DA6C8 {
    color: #0DA6C8;
}

.fs-12 {
    font-size: 12px;
}

.fs-14 {
    font-size: 14px;
}

.fs-15 {
    font-size: 15px;
}

.fw-400 {
    font-weight: 400;
}
.w-20 {
    width: 20px;
}
.w-70 {
    width: 70px;
}
.w-1190 {
    width: 1190px;
}
.w-100vw {
    width: 100vw;
}
/* --------------------------------Page product-cart -------------------------------- */
.history .title,
.information .title,
.product-cart .title {
    font-size: 20px;
    padding: 13px 22px;
}
.product-total {
    height: 58px;
}
.product-money {
    font-size: 20px;
    font-weight: bold;
    color: #C70808;
}
.btn-buy {
    color: white;
    background-color: #C70808;
    padding: 9px 17px;
}
.btn-delete-product {
    background: #FD7777;
    color: black;
    padding: 7px 8px;
}
.btn-increase, .btn-decrease, .input-quantity {
    border: 1px solid #ABA9A9!important;
    border-color: #ABA9A9!important;
}
.c-C70808 {
    color: #C70808!important;
}
.infor,
.book-complete,
.payment-card,
.address-cart {
    background-color: white;
    padding: 20px;
}
.payment-method,
.address-receive {
    font-size: 18px;
    color: #F30A0A;
    font-weight: 400;
}

.bg-FF0C0C {
    background-color: #FF0C0C;
}

.btn-default {
    color: #E32D2D;
    border: 1px solid #E32D2D;
    padding: 3px 5px;
    font-size: 12px;
}
.bb-1 {
    border-bottom: 1px solid #D9D9D9;
}
.product-cost {
    font-size: 16px;
    color: #F80505;
}
.br-line {
    display: none;
}
.text-decoration-line-through {
    margin-left: 10px;
}
.btn-save {
    color: white;
    background: #FF0C0C;
    font-size: 20px;
    font-weight: bold;
    padding: 10px 20px;
}
.title-complete {
    font-size: 24px;
    color: #4A8E09;
}
.title-error {
    font-size: 24px;
    color: red;
}
.product-cart th, .product-cart td {
    vertical-align: middle;
}
.pos-inherit{
    position: inherit !important;
}
.ml-10{
    margin-left: 10px;
}
.cursor-pointer{
    cursor:pointer;
}
.btn-search-header{
    border: 2px solid #F31F24;
}
.editor-view table{
    border-collapse: inherit !important;
}
.editor-view img{
    max-width: 100%;
}
.editor-view tbody, .editor-view td, .editor-view tfoot, .editor-view th, .editor-view thead, .editor-view tr {
    border-width: inherit;
}
.editor-view ul{
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}
.footer .address big{
    font-size: 20px;
    line-height: 20px;
}
/* -------------------------------- header -------------------------------- */
.header-pc {
    height: 80px;
    padding: 15px;
}
#frmSearch .input-group-text {
    background-color: #F31F24;
    color: #fff;
}


.cart {
    position: relative;
    display: flex;
    align-items: center;
    .material-icons {
      position: relative;
      /* top: 4px; */
      z-index: 1;
      font-size: 24px;
      color: white;
    }
    .count {
      position: absolute;
      top: -5px;
      left: -5px;
      z-index: 2;
      font-size: 11px;
      border-radius: 50%;
      background: #d60b28;
      width: 16px;
      height: 16px;
      line-height:16px;
      display: block;
      text-align: center;
      color: white;
      font-family: 'Roboto', sans-serif;
      font-weight: bold;
    }
}
/* Login */
.form-login {
    border: 1px solid #C5C2C2;
}

.btn-login {
    cursor: pointer;
    border: 0;
    padding: 8px 21px;
    border-radius: 21px;
}
.form-login i {
    cursor: pointer;
}
.link-register {
    margin-top: 24px;
    margin-bottom: 41px;
}
.btn-google {
    background-color: #F1501D;
    padding: 8px 32px;
    border-radius: 30px;
}
.btn-facebook {
    background-color: #238FF2;
    padding: 8px 32px;
    border-radius: 30px;
}
.btn-google:hover, .btn-facebook:hover{
    background-color: orange;
}
.text-center-line {
    top: 0;
    line-height: 33px;
    background-color: white;
    left: calc(50% - 80px);
}
.gender {
    height: 38px;
    display: flex;
    align-items: center;
}
.body-register {
    padding: 24px 40px 37px 40px;
}

.bg-D9D9D9 {
    background-color: #D9D9D9;
}
.fs-16 {
    font-size: 16px;
}
.product-cost {
    font-size: 16px;
    color: #F80505;
}
.br-line {
    display: none;
}
.text-decoration-line-through {
    margin-left: 10px;
}
.c-4A8E09 {
    color: #4A8E09!important;
}

.fw-700 {
    font-weight: 700!important;
}
/* contact */
.group-contact .title{
    font-size: 20px;
}
.group-contact .card-title{
    font-size: 20px;
    font-weight: bold; 
}
.group-contact .card-text{
    font-size: 16px;
}
.group-contact .card-text a{
    color: #343a40 !important;
}
.group-contact .card-text a:hover{
    color: #00aaff !important;
}
/* -------------------------------- menu -------------------------------- */
.bg-4A8E09 {
    background-color: #4A8E09;
}
.bg-e5eedd {
    background-color: #e5eedd;
}

.c-4A8E09 {
    color: #4A8E09;
}

.bg-06370A {
    background-color: #06370A;
}

.menu  ul {
    list-style: none;
}

.menu ul li {
    display: inline-block;
}

.menu ul li:not(:last-child) {
    margin-right: 40px;
}

.menu .dropdown {
    position: relative;
}  

.menu ul li a {
    text-transform: capitalize;
    font-size: 14px;
    color: white;
    display: block;
}
.menu ul li .dropdown-menu li a {
    color: #777070;
}


.menu > ul > li > a {
    padding: 15px 0;
}

.menu ul .dropdown > a {
    padding-right: 30px;
}

.menu ul .dropdown {
    justify-content: space-between;
}

.menu > ul > .dropdown > .sub-menu > .dropdown i {
    font-size: 10px;
    pointer-events: none;
    user-select: none;
    color: #777070;
}
.menu > ul > .dropdown > .sub-menu > li:not(:last-child) {
    border-bottom: 1px solid #808080;
}

.menu > ul > .dropdown > .sub-menu > li > a {
    color: #777070;
}

.menu > ul > li > i {
    font-size: 10px;
    pointer-events: none;
    user-select: none;
    position: absolute;
    top: calc(50% - 5px);
    color: #fff;
}
.text-bold{
    font-weight: bold;
}
.menu ul li i {
    right: 0;
}
.btn-invest-sp{
    padding: 2px 13px;
    border: none;
    color: #fff;
    background-color: #4A8E09;
    border-radius: 15px;
}
.menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 320px;
    background-color: #E5EEDD;
    box-shadow: 0 0 5px gray;
    z-index: 15;
    transform-origin: top;
    transform: scaleY(0);
    visibility: hidden;
    opacity: 0;
} 

.menu > ul > li:hover > a{
    font-weight: 700;
    color: #F0E70B;
}
.menu .sub-menu-right {
    display: inline-block;
    padding: 20px;
}
.menu .sub-menu-right li {
    width: 25%;
}
.slide-home > .category > ul > .dropdown > .sub-menu-right > li > a {
    color: #808080;
}
.menu .sub-menu-right > li > a {
    color: red;
    font-weight: 700;
}

.menu > ul > .dropdown > .sub-menu > .dropdown > .sub-menu-right > li:hover a {
    color: red;
}
.color-red{
    color: red;
}
.menu li:hover > .sub-menu {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition: all 0.5s ease;
}

.menu .sub-menu-right {
    left: 100%;
    min-height: 505px;
    padding-top: 10px;
    width: 800px;
    background-color: #fff;
    top: 0;
}

.menu .sub-menu .dropdown a {
    padding-right: 34px;
}
.menu .sub-menu-right a{
    padding: 5px 0px !important;;
}
.slide-home .category ul li .sub-menu-right {
    position: absolute;
    left: 0;
    width: 262px;
    background-color: #fff;
    z-index: 3;
    box-shadow: 0 0 1px gray;
    transform-origin: top;
    transform: scaleY(0);
    visibility: hidden;
    opacity: 0;
} 
.slide-home .category ul li:hover > .sub-menu {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition: all 0.5s ease;
}

.slide-home .category ul li .sub-menu-right {
    left: 100%;
    min-height: 333px;
    padding-top: 0;
    width: 975px;
    max-width: 75vw;
    background-color: #fff;
    top: 0;
}
.slide-home > .category > ul > .dropdown > .sub-menu-right > li:hover a{
    color: #d60b28;
    font-family: 700;
}

.menu > ul > .dropdown > .sub-menu > li:hover {
    background-color: #d60b28;
}
.menu > ul > .dropdown > .sub-menu > li:hover a,
.menu > ul > .dropdown > .sub-menu > li:hover i {
    color: #fff;
    font-weight: 700;
}
.menu > ul > .dropdown > .sub-menu > li > .sub-menu-right > li > a{
    color: #777070;
}

.menu .sub-menu li:hover > a span {
    background-size: 100% 1px;
}

.menu .sub-menu i {
    transform: rotate(-90deg);
    right: 24px;
}

.menu .sub-menu a {
    padding: 12px 24px;
}

.menu ul .dropdown .sub-menu > .dropdown {
    width: 100%;
    position: static;
}

.menu > ul > .dropdown > .sub-menu > .dropdown {
    display: flex;
}

/* -------------------------------- Slide-pc -------------------------------- */
.slide-home {
    background-color: #fff;
    padding: 15px;
}

.slide-home .category ul li {
    border-bottom: 1px solid #d9d9d9;
}
.category-body{
    overflow-y: auto;
    height: 375px;
}
.slide-home ::-webkit-scrollbar {
    width: 10px;
    background:lightgray;
}

.slide-home ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgb(104, 212, 146); 
    border-radius: 10px;
}

.slide-home ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(111, 226, 140, 0.5);
    background:#4A8E09;
}
.slide-home .category ul .dropdown {
    position: relative;
    padding: 10px;
    color: #ccc;
}
.slide-home .category-title .dropdown {
    padding: 0px !important;
    padding-left: 20px;
}

.slide-home .category-title ul li:not(:first-child):hover {
    background-color: #d60b28;
}

.slide-home .category-title ul li:hover a {
    color: #fff;
    font-weight: 700;
}
.slide-home .category ul li:hover {
    background-color: #d60b28;
}
.slide-home .icon-cate {
    position: absolute;
    top: 14px;
    right: 10px;
}
.slide-home .category ul li:hover a {
    color: #fff;
    font-weight: 700;
}
.slide-home .category ul li:not(:first-child):hover .sub-menu-right li a {
    color: #777070;
}
.slide-home .category ul .dropdown:not(:first-child):hover .sub-menu-right li:hover {
    background-color: white;
}
.slide-home .category ul .dropdown:not(:first-child):hover .sub-menu-right li:hover a {
    color: #d60b28;
}

.slide-home .category .title {
    font-size: 20px;
    height: 45px;
    display: flex;
    align-items: center;
    font-weight: 700;
    padding: 0 10px 0 20px;
    color: #4A8E09;
}

.slide-home .category ul li a {
    color: #777070;
}

.slide-home .category ul {
    position: relative;
}

.slide-home .category ul .dropdown .sub-menu-right {
    position: absolute;
    padding: 12px 34px 0 44px;
}

.slide-home .category ul .dropdown .sub-menu-right li {
    width: 250px;
    display: inline-block;
    height: 30px;
    margin-right: 40px;
    border: 0;
    color: #777070;
}
.padding-5{
    padding: 5px;
}
.magic{
    margin-left: -10px !important;
    margin-right: -10px !important;
}
/* -------------------------------- Page home-pc -------------------------------- */
.home .content .card img,
.list .content .card img,
.news .content .card img,
.detail-list .content .card img,
.detail-news .content .card img  {
    width: 100%;
}

.news .title,
.detail-list .title,
.list-post .title,
.home .title {
    font-weight: 400;
    font-size: 24px;
    color: #808080;
    padding-bottom: 6px;
    padding-left: 0px;
    border-bottom: 1px solid #808080;
}

.card .body {
    width: 100%;
    overflow: hidden;
    height: 49px;
    line-height: 16px;
    margin-bottom: 7px;
    margin-top: 7px;
    text-align: justify;
}

.card .body a{
    color: #0DA6C8;
}

.card .bottom .date {
    color: #69D008;
    font-size: 15px;
    line-height: 18px;
}

.card .bottom .date i {
    margin-right: 3px;
}

.card .bottom .view {
    color: #777070;
    font-size: 15px;
    line-height: 18px;
}
.card .bottom .view i {
    margin-right: 3px;
}

.card > .img-post {
    width: 100%;
    overflow: hidden;
    aspect-ratio: 3/2;
}
.card > .img-post img:hover {
    transform: scale(1.1);
    transition: 1s ease-in-out;
}

.home div .post {
    display: grid;
    grid-template-columns: auto 268px;
    grid-gap: 30px;
}
.post > .content {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 30px;
}
.card .body{
    width: 100%;
    height: 54px;
    overflow: hidden;
    line-height: normal;
    margin-bottom: 7px;
    display: flex;
    text-align: justify;
}
.card .body a{
    color: #0DA6C8;
}

iframe > body > #deactivated {
    border: 1px solid #bfbfbf;
    width: 100%!important;
}

/* -------------------------------- Page list-pc -------------------------------- */
.ifr-investing{
    width: 100%;
    aspect-ratio: 3/3.2;
    overflow: hidden;
    position: relative;
    border: 7px solid #aaa;
    z-index: 999;
}
.ifr-investing .d-block{
    width: 100vw;
}
.ifr-investing iframe{
    position: absolute;
    left: 5px;
    top: 10px;
    width: 100vw;
}
.ifr-investing .invest-btn{
    position: absolute;
    bottom: 0px;
    width: 100%;
    padding: 10px;
    justify-content: center;
    display: flex;
    align-items: center;
}
.box-img {
    width: 100%;
    overflow: hidden;
    aspect-ratio: 3/2;
    background: #aaa;
    display: flex;
    justify-content: center;
    align-items: center;
}
.box-img img{
    width: 100%;
    display: block;
}
.box-img img:hover {
    transform: scale(1.1);
    transition: 1s ease-in-out;
}

.list .title {
    font-weight: 400;
    font-size: 24px;
    color: #808080;
    padding-bottom: 7px;
    border-bottom: 1px solid #808080;
}

.list .content .card .body{
    overflow: hidden;
    margin-bottom: 7px;
    margin-top: 7px;
    margin-top: 10px;
    text-align: justify;
    height: 53px;
    line-height: normal;
}

.list .content .card .body a {
    width: 100%;
    height: 58px;
    color: #0DA6C8;
    margin-top: 12px;
    line-height: 18px;
}

.list .content .card .post-content {
    display: none;
}

/* --------------------------------Page footer-pc -------------------------------- */
.footer .container {
    padding-top: 30px;
}
.fs-18 {
    font-size: 18px;
}

.footer .row .address p ,
.footer .row .about p a {
    color: white;
}

.footer .row .payment .top {
    margin-bottom: 22px;
}
.footer .row .install .row .app img,
.footer .row .payment .bottom img,
.footer .row .payment .top img {
    margin-right: 15px;
    margin-bottom: 15px;
    background-color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
}

/* -------------------- Page news-pc ------------------------- */
.detail-news .content .card .name-post,
.detail-list .content .card .name-post,
.news .content .card .name-post {
    margin-top: 7px;
}
.detail-news .content .card .name-post a:hover,
.detail-list .content .card .name-post a:hover,
.news .content .card .name-post a:hover {
    color: #d60b28;
}
.detail-news .content .card .name-post a,
.detail-list .content .card .name-post a,
.news .content .card .name-post a {
    font-size: 15px;
    color: #0DA6C8;
    width: 100%;
    height: 56px;
    overflow: hidden;
    text-align: justify;
    display: flex;
    line-height: normal;
}
.detail-news .content .card .body,
.detail-list .content .card .body,
.news .content .card .body {
    font-size: 14px;
    width: 100%;
    max-height: 95px;
    overflow: hidden;
    margin-top: 7px;
    line-height: normal;
    display: flex;
    text-align: justify;
}
.detail-news .content .card .date,
.detail-list .content .card .date,
.news .content .card .date {
    color: #69D008;
}
.detail-news .content .card .date i,
.detail-news .content .card .view i
.detail-list .content .card .date i,
.detail-list .content .card .view i,
.news .content .card .date i,
.news .content .card .view i {
    padding-right: 5px;
}

.news .btn-watch-more,
.list > div > button {
    display: none!important;
}

/* ------------------------ Page detail-news-pc ---------------------------*/
.detail-news .title {
    font-size: 20px;
    color: #F31F24;
    font-weight: 700;
}

.detail-news .date {
    font-weight: 500;
    font-size: 14px;
    color: black;
    padding-bottom: 10px;
    border-bottom: 1.21px solid #D9D9D9;
}
.detail-news .content {
    color: #808080;
    padding: 0px 10px;
    text-align: justify;
    display: flex;
}
.detail-news .detail .link li {
    padding: 10px;
    border-radius: 50%;
    border: 1px solid #808080;
}
.detail-news .detail .link li:not(:last-child) {
    margin-right: 10px;
}

/* ---------------- Page detail-pc --------------------- */
.detail-list .info .slideshow {
    max-width: 497px;
    position: relative;
    margin: auto;
}
.detail-list .slideshow .slides {
    display: none;
}
.detail-list .slideshow .slides img {
    width: 100%;
}

.detail-list .list-img .dot:not(:last-child) {
    cursor:pointer;
    display: inline-block;
    transition: background-color 0.6s ease;
    margin-right: 20px;
}

.detail-list .card-title {
    font-size: 20px;
    font-weight: 700;
    color: #d60b28;
}
.detail-list .card-text {
    display: flex;
    text-align: justify;
    font-size: 14px;
    width: 100%;
    height: 120px;
    overflow: hidden;
    line-height: normal;

}
.detail-list .card-title,
.detail-list .detail .content {
    text-align: justify;
}

.detail-list .detail .title,
.detail-list .detail .number-phone span {
    font-size: 20px;
    color: #E6000D;
}

.detail-list #thumbSlider .carousel-inner .carousel-item img {
    width: 60px;
    height: 40px;
}

#myCarousel .carousel-inner .carousel-item {
    width: 100%;
    overflow: hidden;
    aspect-ratio: 3/2;
}
.box-slide{
    overflow: hidden;
    aspect-ratio: 9/4;
}
#myCarousel img {
    width: 100%;
}
  
#thumbSlider {
    .carousel-inner {
      padding-left: 3rem;
      padding-right: 3rem;
      
      .row {
        overflow: hidden;
      }
      
      .thumb {
        display: flex;
        justify-content: center;
        &:hover {
          cursor: pointer;
        }
        &.active img {
          opacity: 1;
        }
      }
      
      img {
        height: 150px;
        margin-left: auto;
        margin-right: auto;
        display: block;
        opacity: .5;
        
        &:hover {
          opacity: 1;
        }
      }
    }
}
  
/* ---------------------------------------------- */
.header-sp {
    display: none;
}
.menu-sp {
    display: none;
}

.h-38 {
    height: 38px;
}

.home > .investing {
    display: none;
}

.row {
    margin: 0;
}
/* Hover image */

@media only screen and (min-width: 768px) {
    #snackbar {
        left: 50%; /* Center the snackbar */
        bottom: 30px; /* 30px from the bottom */
    }
    /* Animations to fade the snackbar in and out */
    @-webkit-keyframes fadein {
        from {bottom: 0; opacity: 0;}
        to {bottom: 30px; opacity: 1;}
    }

    @keyframes fadein {
        from {bottom: 0; opacity: 0;}
        to {bottom: 30px; opacity: 1;}
    }

    @-webkit-keyframes fadeout {
        from {bottom: 30px; opacity: 1;}
        to {bottom: 0; opacity: 0;}
    }

    @keyframes fadeout {
        from {bottom: 30px; opacity: 1;}
        to {bottom: 0; opacity: 0;}
    }
}

/* SP SCREEN */
@media only screen and (max-width: 768px) {
    #snackbar {
        top: 15px; /* Center the snackbar */
        right: 15px; /* 30px from the bottom */
    }
    @-webkit-keyframes fadein {
        from {right: 0; opacity: 0;}
        to {right: 15px; opacity: 1;}
    }

    @keyframes fadein {
        from {right: 0; opacity: 0;}
        to {right: 15px; opacity: 1;}
    }

    @-webkit-keyframes fadeout {
        from {right: 15px; opacity: 1;}
        to {right: 0; opacity: 0;}
    }

    @keyframes fadeout {
        from {right: 15px; opacity: 1;}
        to {right: 0; opacity: 0;}
    }
    /* --------------------------------Page footer-sp -------------------------------- */
    .sp-mt-50{
        margin-top: 50px;
    }
    .footer .container{
        padding: 38px 20px;
        width: 100vw!important;
    }

    .footer .container .text-center:not(:last-child) {
        text-align: start;
    }
    .footer .address .img img {
        width: 224px;
        height: 40px;
    }

    .footer .address,
    .footer .about,
    .footer .payment,
    .footer .install {
        text-align: start!important;
        padding: 0!important;
    }

    .footer .install .col-6 {
        padding: 0;
    }

    .footer .copyright {
        padding-top: 5px!important;
        padding-bottom: 0!important;
        font-size: 12px;
    }
    /* -------------------------------- header -------------------------------- */
    .header-pc {
        display: none;
    }
    .header-sp {
        display: block;
        background-color: #fff;
        align-items: center;
    }

    .header-sp > .row{
        padding: 7px 13px;
    }
    .header-sp .logo-sp a img {
        width: 40vw;
    }
    .count {
        top: -15px!important;
        left: -10px!important;
    }

    /* -------------------------------- menu-sp -------------------------------- */
    .menu-pc {
        display: none!important;
    }

    .menu-sp {
        display: block;
    }

    .menu-sp > .navbar > .navbar-collapse > ul > li > a {
        color: #777070  ;
        display: flex;
        justify-content: space-between;
        font-size: 15px;
    } 

    .menu-sp > .navbar > .navbar-collapse > ul > li:not(:last-child) {
        border-bottom: 1px solid #808080;
    }

    .dropdown-menu {
        margin-top: 0!important;
        border-radius: 0;
    }

    .menu-sp .navbar .container-fluid .btn-login {
        background-color: #F31F24;
        padding: 3px 10px;
    }

    .menu-sp .navbar #menu-search .input-group input {
        border: 1px solid #808080;
    }
    .menu-sp .navbar ul .dropdown .dropdown-menu{
        background-color: #E5EEDD;
        width: 100vw;
        border: 1px solid #e5eedd;
    }
    .menu-sp .navbar .dropdown .dropdown-menu .nav-item {
        line-height: 40px;
        position: relative;
    }
    .menu-sp .navbar .dropdown .dropdown-menu .nav-item:not(:last-child) {
        border-bottom: 1px solid #D9D9D9;
    }

    .menu-sp .navbar .dropdown .dropdown-menu .nav-item .nav-link {
        display: inline-flex;
        align-items: center;
    }
    .menu-sp .navbar .dropdown .dropdown-menu .nav-item i {
        position: absolute;
        right: 10px;
        top: 5px;
        padding: 5px 10px;
    }
    .right-20{
        right: 30px !important;
        color: #999;
    }
    /* ---------- Page slide-sp ----------- */
    .slide-home {
        display: block;
        padding: 0;
    }

    .slide-home .category {
        display: none;
    }

    /* ---------- Page home-sp ----------- */
    .home-investing iframe {
        height: 70vh;
    }
    /* ========= Page list-sp ============= */
    .breadcrumb {
        display: none;
    }

    .news > .left > .page,
    .list > div > .page {
        display: none!important;
    }

    .news .btn-watch-more,
    .list .btn-watch-more {
        display: block!important;
        color: black;
        background-color: #D9D9D9;
        border: 0;
        margin: auto;
        width: 147px;
        height: 42px;
        align-items: center;
    }
    .list div .content .card .post-content {
        width: 100%;
        overflow: hidden;
        line-height: normal;
        margin-bottom: 7px;
        color: #808080;
        height: 59px;
    }

    /* ======== Page news-sp ======== */
    .detail-news .content .card .name-post a,
    .detail-list .content .card .name-post a,
    .news .content .card .name-post a {
        font-size: 14px;
        height: 52px;
    }
    .detail-news .content .card .date,
    .detail-news .content .card .view,
    .detail-list .content .card .date,
    .detail-list .content .card .view,
    .news .content .card .date,
    .news .content .card .view {
        font-size: 11px;
    }

    .news .page {
        display: none!important;
    }
    .detail-news .investing,
    .detail-list .investing,
    .news .investing {
        display: none!important;
    }
    /* ------------------------ Page detail-sp ---------------------------*/
    .detail-list .detail-title {
        display: block!important;
        text-align: justify;
    }

    .detail-list .detail-title .date,
    .detail-list .detail-title .view,
    .detail-list .detail-title .button {
        font-size: 11px;
        font-weight: 700;
    }

    .detail-list .info .card-title,
    .detail-list .info .date-view {
        display: none!important;
    }

    /* ------------------------ Page detail-news-sp ---------------------------*/
    .detail .breadcrumb {
        display: flex;
        padding: 0 15px;
    }

    .detail-news .detail .link {
        justify-content: center;
    }

    /* Common-sp*/
    .home,
    .list,
    .detail-list,
    .news,
    .slide-home,
    .detail-news {
        width: 100vw!important;
    }

    .home-investing .title,
    .home .title,
    .list .title,
    .news .title,
    .detail-list .title,
    .detail-news .title {
        display: flex;
        justify-content: center;
        font-size: 20px;
    }
    .product-cost {
        font-size: 13px;
    }
    .br-line {
        display: block;
    }
    .text-decoration-line-through {
        margin-left: 6px;
        font-size: 13px;
    }
}
@media only screen and (max-width: 480px) {
    .card .bottom .date {
        font-size: 12px;
        line-height: 16px;
    }
    .card .bottom .view{
        font-size: 12px;
        line-height: 16px;
    }
}
@media only screen and (max-width: 380px) {
    .card .bottom .date {
        font-size: 11px;
        line-height: 15px;
    }
    .card .bottom .view {
        font-size: 11px;
        line-height: 15px;
    }
}
.streaming {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

#snackbar.bg-red{
    background-color: #df2121;
}


#loading {
    display: none;
}

.loading {
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    width: 100%;
    height: 100%;
    z-index: 9999;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.loading .img {
    width: 300px;
    margin: auto;
    text-align: center;
    position: relative;
}

.loading .img img {
    width: 200px;
}

.loading p {
    color: bisque;
}

@media (hover: hover) {
  .poll-swiper .group:hover .filter-green {
    filter: brightness(0) invert(1);
  }

  .poll-swiper .group:hover {
    background-color: #009355;
  }
}

.poll-swiper .swiper-pagination-bullet {
  background-color: #aaeabf !important;
  opacity: 1;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.poll-swiper .swiper-pagination-bullet-active {
  background: #009355 !important;
  width: 40px !important;
  border-radius: 10px;
}

.poll-swiper.swiper{
  padding-bottom: 50px;
}
.poll-swiper .swiper-pagination{
  bottom: 16px;
}