/* TCBS Custom Style - v1.5.2 */
/* ===============================
   SF Pro Display - Custom Fonts
   Domain: stag-live.tcbs.com.vn
   =============================== */

/* Light (300) */
@font-face {
  font-family: 'SF Pro Display';
  src: url('/wp-content/uploads/fonts/SF-Pro-Display-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Light Italic (300 italic) */
@font-face {
  font-family: 'SF Pro Display';
  src: url('/wp-content/uploads/fonts/SF-Pro-Display-Light-Italic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* Regular (400) */
@font-face {
  font-family: 'SF Pro Display';
  src: url('/wp-content/uploads/fonts/SF-Pro-Display-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Medium (500) */
@font-face {
  font-family: 'SF Pro Display';
  src: url('/wp-content/uploads/fonts/SF-Pro-Display-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* SemiBold (600) */
@font-face {
  font-family: 'SF Pro Display';
  src: url('/wp-content/uploads/fonts/SF-Pro-Display-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Bold (700) */
@font-face {
  font-family: 'SF Pro Display';
  src: url('/wp-content/uploads/fonts/SF-Pro-Display-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Heavy (800) */
@font-face {
  font-family: 'SF Pro Display';
  src: url('/wp-content/uploads/fonts/SF-Pro-Display-Heavy.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ===============================
   Global Font Family & Fallbacks
   =============================== */
:root {
  --wp--preset--font-family--body: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  --wp--preset--font-family--heading: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
html,
body {
  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-smooth: antialiased;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Fallback for browsers that can't load SF Pro */
@supports not (font-variation-settings: normal) {

  html,
  body {
    font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  }
}

/* Optional: fallback for specific elements if SF font fails */
h1,
h2,
h3,
h4,
h5,
h6,
.btn,
.menu-item {
  font-family: 'SF Pro Display', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}
a {
    color: #c41c16;
    text-decoration: none;
    background-color: transparent;
}
.w100per img{width:100%!important;}
.h100per{height:100%;}
.footer-bottom-block{
    width: 100%;
    border-top: 1px solid #404040;
    padding-top: 20px;
margin-top:20px;
}
.wp-block-query-pagination>.wp-block-query-pagination-previous, .wp-block-query-pagination>.wp-block-query-pagination-next {
    font-size: 20px;
    font-weight: 600;
    color: #333;
}
.tcbs-bullet-default .tech__bullet{
background-image: url(https://www.tcbs.com.vn/documents/392342/392848/tech-bullet.svg);
}
.tcbs-mention-btn{z-index:1;}
.block-flex-center{
align-items: center;
    justify-content: center;
    display: flex;
}
@keyframes rotate {
    0% {
      -webkit-transform: translate(-50%, -50%) rotate(0);
      -ms-transform: translate(-50%, -50%) rotate(0);
      transform: translate(-50%, -50%) rotate(0)
    }

    100% {
      -webkit-transform: translate(-50%, -50%) rotate(360deg);
      -ms-transform: translate(-50%, -50%) rotate(360deg);
      transform: translate(-50%, -50%) rotate(360deg)
    }
  }

  @-moz-keyframes rotate {
    0% {
      -webkit-transform: translate(-50%, -50%) rotate(0);
      -ms-transform: translate(-50%, -50%) rotate(0);
      transform: translate(-50%, -50%) rotate(0)
    }

    100% {
      -webkit-transform: translate(-50%, -50%) rotate(360deg);
      -ms-transform: translate(-50%, -50%) rotate(360deg);
      transform: translate(-50%, -50%) rotate(360deg)
    }
  }

  @-webkit-keyframes rotate {
    0% {
      -webkit-transform: translate(-50%, -50%) rotate(0);
      -ms-transform: translate(-50%, -50%) rotate(0);
      transform: translate(-50%, -50%) rotate(0)
    }

    100% {
      -webkit-transform: translate(-50%, -50%) rotate(360deg);
      -ms-transform: translate(-50%, -50%) rotate(360deg);
      transform: translate(-50%, -50%) rotate(360deg)
    }
  }
@keyframes rev-rotate {
    0% {
      -webkit-transform: translate(-50%, -50%) rotate(360deg);
      -ms-transform: translate(-50%, -50%) rotate(360deg);
      transform: translate(-50%, -50%) rotate(360deg)
    }

    100% {
      -webkit-transform: translate(-50%, -50%) rotate(0);
      -ms-transform: translate(-50%, -50%) rotate(0);
      transform: translate(-50%, -50%) rotate(0)
    }
  }

  @-webkit-keyframes rev-rotate {
    0% {
      -webkit-transform: translate(-50%, -50%) rotate(360deg);
      -ms-transform: translate(-50%, -50%) rotate(360deg);
      transform: translate(-50%, -50%) rotate(360deg)
    }

    100% {
      -webkit-transform: translate(-50%, -50%) rotate(0);
      -ms-transform: translate(-50%, -50%) rotate(0);
      transform: translate(-50%, -50%) rotate(0)
    }
  }

  @-moz-keyframes rev-rotate {
    0% {
      -webkit-transform: translate(-50%, -50%) rotate(360deg);
      -ms-transform: translate(-50%, -50%) rotate(360deg);
      transform: translate(-50%, -50%) rotate(360deg)
    }

    100% {
      -webkit-transform: translate(-50%, -50%) rotate(0);
      -ms-transform: translate(-50%, -50%) rotate(0);
      transform: translate(-50%, -50%) rotate(0)
    }
  }
/*Blank page*/
body.page-template-blank{
padding-top:0;
}
.page-template-blank .entry-content{
    padding: 0;
}
/*update 1025*/
.hide-block{display:none;}
.list-usecase_card_content p {
    font-size: 16px;
    width: 100%;
}
.tcbs-button-group {
  gap: 10px;
}

.tcbs-tcanalysis .tcbs-tcanalysis-in a.findmore,
.tcbs-product-home .product-home-left a.findmore,
.tcbs-product-home.tcbs-zero-fee .product-home-left a.findmore,
.tcbs-tcwealth-home .tcwealth-home-in a {
  margin: 0;
}

#breadcrumbs nav.rank-math-breadcrumb .separator {
  background-image: url(/wp-content//uploads/2025/09/chevron_right_gray.svg);
font-size:0;
}

.grid-block-stats .grid-stat-item {
  padding-right: 20px;
}

.grid-block-stats .grid-stat-item>div:first-child {
  max-width: 64px;
}

.grid-block-stats .grid-stat-item>div:last-child hr,
.grid-block-stats .grid-stat-item>div:last-child p:last-child {
  margin-block-start: 12px;
}

.mega-menu-block-banner.mega-type-img .mega-sub-menu .mega-menu-item {
  padding: 20px 25px 0 5px !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}

.mega-menu-block-banner.mega-type-img .mega-sub-menu .mega-menu-item a img {
  border-radius: 4px;
}

.homepage-color-text-ul-li {
  color: #333;
}

.homepage-color-text-ul-li li {
  font-weight: 400 !important;
}

/*box grid fund*/
.CCCBbox {
  margin: 20px 0;
  display: flex;
  align-items: flex-start;
}

.CCCBbox .CCCBbox-l {
  width: 120px;
  display: flex;
  justify-content: center;
  flex: 1 0 auto;
}

.CCCBbox-out .CCCBbox .CCCBbox-l svg {
  max-width: 100px;
  width: 100%;
}

.CCCBbox .CCCBbox-r {
  order: 2;
  flex: 1 1 auto;
}

.CCCBbox h3 {
  font-weight: bold;
  margin: 0 0 5px 0;
  font-size: 20px;
  font-family: 'SF-UI-Display-Regular';
  text-align: left;
}

.CCCBbox p {
  font-family: 'SF-UI-Display-Regular';
  margin-bottom: 0;
  z-index: 1;
  position: relative;
  font-size: 16px;
  text-align: justify;
}

.no-border .table th,
.no-border table th,
.no-border .table td,
.no-border table td {
  border-left-width: 0;
  border-right-width: 0;
  vertical-align: baseline;
}

.no-border table tbody tr:first-child td,
.no-border table thead tr th {
  border-top-width: 0
}

.no-border table tbody tr:last-child td,
.no-border table thead tr:last-child th {
  border-right-width: 0
}

.table-normal tr th,
.table-normal tr td {
  padding: 15px;
  transition: all .5s;
  position: relative;
  border-bottom: 1px solid #d8d8d8;
  font-size: 16px;
  line-height: 1.4;
  text-align: justify;
}

.table-normal tbody tr:first-child td {
  border-top: solid 1px #d8d8d8;
  margin-top: -1px
}

.table-normal thead+tbody tr:first-child td {
  border-top-width: 0
}

.table-normal tbody tr td:first-child {
  font-weight: bold;
}

.table-normal .table-full-mb tbody tr td:first-child {
  font-weight: normal;
}

.table-normal .table-full-mb tbody tr td {
  width: 33.33%;
}

.table-normal .table-full-mb tbody tr td.noborder {
  border-bottom: none;
}

.table-normal .table-full-mb tbody tr td h4 {
  border: none;
}

.table-normal .table-full-mb tbody tr td p {
  text-align: justify;
}

.box-member {
  border: 7px solid rgba(256, 256, 256, .3);
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
  border-radius: 8px;
  overflow: hidden;
  padding: 10px;
  background-color: #f3f3f3;
  display: flex;
  cursor: pointer;
}

.box-member .mb-avt {
  width: 68px;
  display: flex;
  justify-content: center;
  flex: 1 0 auto;
  height: 68px;
}

.box-member .mb-avt img {
  width: 100%;
  border-radius: 50%;
}

.box-member .mb-detail {
  order: 2;
  flex: 1 1 auto;
  width: 100%;
  margin-left: 10px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.box-member .mb-detail h4 {
  font-size: 16px;
  font-weight: bold;
  padding-bottom: 0;
}

.box-member .mb-detail p {
  margin-bottom: 0;
}

.modal-body .box-member {
  border: none;
  box-shadow: none;
  overflow: hidden;
  padding: 10px;
  background-color: #FFF;
  display: flex;
  flex-direction: column;
}

.modal-body .box-member .mb-avt {
  width: 100%;
  text-align: center;
  margin-bottom: 0;
  height: 140px;
}

.modal-body .box-member .mb-avt img {
  width: 140px;
}

.modal-body .box-member .mb-detail {
  width: 100%;
  margin-bottom: 15px;
  margin-left: 0;
  padding: 10px 20px;
  text-align: justify;
  font-size: 16px;
}

.f-listitems {
  list-style: none;
}

.f-listitems li {
  position: relative;
  padding: 15px 0;
}

.f-listitems li .flex02 {
  display: flex;
  width: 100%;
}

.f-listitems li .w65 {
  padding-left: 40px;
  width: 65%
}

.f-listitems li .w35 {
  width: 35%;
  padding-right: 30px;
  text-align: right;
}

.f-listitems li a {
  text-decoration: none;
}

.line-bottom {
  width: 100% !important;
  height: 1px !important;
  background: #a1a1a1;
  position: absolute;
  bottom: 0;
  left: 0;
  -o-transform: scaleY(.5);
  -webkit-transform: scaleY(.5);
  transform: scaleY(.5)
}

.line-top {
  width: 100% !important;
  height: 1px !important;
  background: #a1a1a1;
  position: absolute;
  top: 0;
  left: 0;
  -o-transform: scaleY(.5);
  -webkit-transform: scaleY(.5);
  transform: scaleY(.5)
}

.line-left {
  width: 1px !important;
  height: 100% !important;
  background: #a1a1a1;
  position: absolute;
  top: 0;
  left: 0;
  -o-transform: scaleX(.5);
  -webkit-transform: scaleX(.5);
  transform: scaleX(.5)
}

.line-right {
  width: 1px !important;
  height: 100% !important;
  background: #a1a1a1;
  position: absolute;
  top: 0;
  right: 0;
  -o-transform: scaleX(.5);
  -webkit-transform: scaleX(.5);
  transform: scaleX(.5)
}

.only-show-mb {
  display: none;
}

.modal-close {
  position: absolute;
  right: -15px;
  z-index: 2;
  top: -15px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  text-align: center;
  background-color: rgba(0, 0, 0, .75);
}

.modal-close:before,
.modal-close:after {
  position: absolute;
  left: 19px;
  content: ' ';
  height: 16px;
  width: 2px;
  background-color: #ccc;
  top: 12px;
}

.modal-close:before {
  transform: rotate(45deg);
}

.modal-close:after {
  transform: rotate(-45deg);
}

.box-detailview .table-content {
  padding: 20px;
  width: 100%;
  border: 1px solid #e5e5e5;
  margin-bottom: 20px;
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
  border-radius: 8px;
}

.box-detailview .table-content p {
  font-family: SF-UI-Display-Light;
  font-size: 16px;
  text-align: left;
  margin: 0 0 8px 0;
  color: #777;
  line-height: 22px;
}

.box-detailview .table-content p span {
  color: rgb(196, 28, 22);
  font-family: SF-UI-Display-Regular;
  font-size: 18px;
}

.box-detailview .table-content table {
  width: 100%;
  margin: 10px 0 0 0;
  border: 1px #f1f1f1 solid;
}

.box-detailview .table-content table tr td {
  padding: 10px;
  border: 1px #f1f1f1 solid;
  font-family: SF-UI-Display-Light;
  font-size: 16px;
  text-align: left;
  margin: 0;
  color: #777;
  line-height: 24px;
}

.box-detailview .table-content table tr th {
  padding: 10px;
  background: #f1f1f1;
  font-family: SF-UI-Display-Medium;
  font-size: 16px;
  text-align: left;
  margin: 0;
  color: #333;
  line-height: 24px;
  border-right: 1px #fff solid;
}

.box-detailview .table-content table tr th:last-child {
  border-right: none;
}

.box-detailview .table-content a {
  font-size: 16px;
  cursor: pointer;
}

#fund-ranking-section {
  display: flex;
  gap: 24px;
  padding: 24px;
  color: #fff;
  max-width: 978px;
  margin: 0 auto
}

#fund-ranking-section .fund-ranking-box {
  flex: 1;
  background-color: #fafafa;
  border-radius: 8px;
  padding: 6px 0 0 0;
  border: 1px solid #ddd
}

#fund-ranking-section .fund-ranking-box h3 {
  font-size: 16px;
  font-family: SF-UI-Display-Regular;
  margin-bottom: 6px;
  color: #444;
  text-align: center
}

#fund-ranking-section .fund-ranking-list {
  display: flex;
  flex-direction: column;
  gap: 0 12px;
  border-radius: 0 0 6px 6px;
  overflow: hidden;
  border-top: 1px solid #ddd
}

#fund-ranking-section .fund-ranking-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background-color: #fff;
  border-bottom: 1px dashed #ddd;
  font-family: SF-UI-Display-Regular
}

#fund-ranking-section .fund-ranking-item:last-child {
  border-bottom: none
}

#fund-ranking-section .fund-rank {
  width: 20px;
  font-weight: 700;
  color: #333;
  text-align: center
}

#fund-ranking-section .fund-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 4px;
  border: 1px solid #ddd
}

#fund-ranking-section .fund-name {
  flex: 1;
  font-weight: 500;
  color: #333;
  font-family: SF-UI-Display-Medium;
  font-size: 16px
}

#fund-ranking-section .fund-growth {
  color: #009565;
  font-weight: 700;
  margin-right: 12px;
  background-color: #e9fcec;
  padding: 5px 15px 5px 10px;
  border-radius: 4px;
  font-size: 14px;
  display: flex;
  align-items: center
}

#fund-ranking-section .fund-growth svg {
  width: 16px;
  margin-right: 2px
}

#fund-ranking-section .fund-more-btn {
  background-color: #008253;
  color: #fff;
  border: none;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  font-weight: 500
}

#fund-ranking-section .fund-more-btn:hover {
  background-color: #036340;
  transition: all .25s linear
}

@media (max-width:480px) {
  #fund-ranking-section {
    flex-direction: column;
    gap: 16px;
    padding: 16px
  }

  #fund-ranking-section .fund-ranking-box {
    width: 100%
  }
}
.stock-list .subsection-carousel-content-wrapper {
                        height: auto;
                        max-width: 100%;
                        padding: 0;
                        margin: 0 auto;
                        display: flex;
                        align-items: flex-start;
                        flex-direction: column;
                        align-items: center
                      }

                    .stock-list .list-case .list-col{
                        margin-bottom: 0;
                        margin-top: 0;
                        display: grid;
                        grid-template-columns: repeat(4, 1fr);
                        gap: 20px;
                        width: 100%;
                        max-width: 770px;
                      }

                    .stock-list .subsection-carousel-content-wrapper .subsection-carousel-container {
                        width: 100%;
                        display: flex;
                        flex-direction: column
                      }
.stock-list  .list-case__item {
                        display: block;
                        padding-top: 1px;
                        box-shadow: 0 4px 30px rgb(95 94 231 / 7%);
                        margin-bottom: 0;
                        border-radius: 10px;
                        transition: all ease .3s
                      }

.stock-list  .list-case__item:hover {
                        background-color: #fff;
                        box-shadow: 0 5px 30px rgb(0 0 0 / 10%), 0 1px 4px rgb(0 0 0 / 5%);
                        border-color: #fff
                      }

.stock-list  .list-case__item:last-child {
                        margin-bottom: 0
                      }

.stock-list  .collap-head {
                        padding: 1px 0;
                        border-radius: 8px;
border:1px solid #ddd;
                      }

.stock-list  .collap-head:hover {
                        cursor: pointer
                      }

.stock-list  .collap-head>div {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background-color: #fff;
                        border-radius: 8px;
                        position: relative;
                        -webkit-transition: all linear .3s;
                        -o-transition: all linear .3s;
                        transition: all linear .3s
                      }
.stock-list  .collap-head.collapsed>div {
                        border-radius: 8px
                      }

.stock-list .collap-head>div .head-title {
                        margin: 0;
                        font-size: 16px;
                        line-height: 1.5;
                        padding: 13px 20px 13px 20px;
                        color: #333;
                        font-family: SF-UI-Display-Medium;
                        width: 100%;
                        text-align: center;
height: 60px;
line-height: 40px;
display: flex;
justify-content: center;
align-items: center;
                      }
.stock-list  .collap-head>div .head-title a{text-decoration: none;display: flex;
                      justify-content: center;
                      align-items: center;color:#333;}
.stock-list .collap-head>div .head-title:hover a{color: #c41c16;}
.stock-list .collap-head>div .head-title img{width: 30px;height: 30px;}

.stock-list .collap-head>div .head-title span {
                        font-weight: 400;
                        text-transform: initial;
                        font-family: SF-UI-Display-Light
                      }

.stock-list .collap-head>div .head-title span.ticker {
                        font-weight: 700;
                        margin-right: 10px;
                        font-family: SF-UI-Display-Medium;
                        border-right: 1px solid #aaa;
                        padding-right: 10px
                      }
.list-usecase_card .list-usecase_card_media{margin:0!important;}
.list-usecase_card_media img{width:100%}
.list-usecase_card .list-usecase_card_content strong a{color:#c41c16;}
.fund-item-box.no-shadow{box-shadow:none!important;}
.footer-links__social-media{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-left: -1pc;
    margin-top: 9pt;
    gap: 10px;
}
.footer-bottom-block .footer-bottom-inner p a{
    padding-right: 8px;
    margin-right: 8px;
    border-right: 1px solid #5a5a5a;
color:#a2a2a2;
}
.footer-bottom-block .footer-bottom-inner p a:hover{
color:#FFF!important;
}
.footer-bottom-block .footer-bottom-inner p a:last-child{border:none;}
.tcbs-bottom-link.color-white a{
color:#FFF;
font-size:16px;
}
.tcbs-bottom-link.color-white a:hover{color:#FFF !important;text-decoration:underline;}
@media (max-width:480px) {
.footertcbs .socials-tcbs{
align-content: flex-start;
}
.footer-links__social-media{
margin: 10px 0 0 0 !important;
width: 100%;
}
.footertcbs .socials-tcbs p{text-align:left;width: 100%;}
.footer-bottom-block .footer-bottom-inner p{text-align:left;}
.footer-bottom-block .footer-bottom-inner p a{
        display: block;
        border: none;
        padding: 0;
        margin: 0 0 5px 0;
}
.logo-footer{
        margin: 20px 0 0 0;
        text-align: left !important;
        width: 100%;
        padding-top: 15px;
}
}
/*Search page*/
.search-results li.type-post{margin-top: 20px;}
.search-results li.type-post hr{margin-top: 10px;}
.search-results .post-meta-share .taxonomy-category,
.search-results .post-meta-share p a,
.search-results .post-meta-share p{display:none;}
/*FAQ section*/
.mover {
                        -webkit-animation: mover 1.5s infinite alternate;
                        animation: mover 1.5s infinite alternate;
                      }

                      @-webkit-keyframes mover {
                        0% {
                          -webkit-transform: translateY(0);
                          transform: translateY(0);
                        }

                        100% {
                          -webkit-transform: translateY(10px);
                          transform: translateY(10px);
                        }
                      }

                      @keyframes mover {
                        0% {
                          -webkit-transform: translateY(0);
                          transform: translateY(0);
                        }

                        100% {
                          -webkit-transform: translateY(10px);
                          transform: translateY(10px);
                        }
                      }
.section-bottom-faq{
    padding: 35px 0 65px 0;
    border-top: 1px solid #dedede;
position:relative;
margin:0;
}
.section-bottom-faq:before{
background-image: url(/wp-content//uploads/2025/10/bg-map.png);
    background-size: cover !important;
    inset: 0 !important;
    opacity: .3 !important;
position:absolute;
content:"";
top:0;
left:0;
bottom:0;right:0;
width:100%;
background-position:center;
}
.block-img-bot-faq{
    align-items: center;
    justify-content: center;
    position: relative;
    display: flex;
}
.block-img-bot-faq .center-img{
    align-items: center;
    justify-content: center;
    position: relative;
    display: flex;
}
.block-img-bot-faq .center-img img{
width: 54%;
    top: 0;
    position: relative;
    z-index: 4;
    animation: mover 2s infinite alternate;
}
.dc-mover{
    border: 1px solid rgb(69 69 69);
    border-radius: 5px;
    padding: 0;
    position: absolute;
    z-index: 5;
    box-shadow: 0 25px 28px 0 #0000001A;
    transition: transform .1s ease;
    transform-style: preserve-3d;
    will-change: transform;
    overflow: hidden;
}
.dc-mover.pos-01{
    width: 420px;
    bottom: 19%;
}
#bond-ranking-section {
    display: flex;
    gap: 24px;
    padding: 24px;
    color: #fff;
    max-width: 978px;
    margin: 0 auto
  }

  #bond-ranking-section .bond-ranking-box {
    flex: 1;
    background-color: #fafafa;
    border-radius: 8px;
    padding: 6px 0 0 0;
    border: 1px solid #ddd
  }

  #bond-ranking-section .bond-ranking-box h3 {
    font-size: 16px;
    font-family: SF-UI-Display-Regular;
    margin-bottom: 6px;
    color: #444;
    text-align: center
  }

  #bond-ranking-section .bond-ranking-list {
    display: flex;
    flex-direction: column;
    gap: 0 12px;
    border-radius: 0 0 6px 6px;
    overflow: hidden;
    border-top: 1px solid #ddd
  }

  #bond-ranking-section table tr {
    border-bottom: 1px dashed #ccc;
    font-family: SF-UI-Display-Regular
  }

  #bond-ranking-section table tr:last-child {
    border-bottom: none
  }

  #bond-ranking-section table tr th {
    color: #333;
    padding: 8px 12px;
    font-size: 14px;
    padding: 8px 12px;
    border-bottom: 1px solid #ddd
  }

  #bond-ranking-section table tr td {
    color: #333;
    font-family: SF-UI-Display-Medium;
    font-size: 16px;
    padding: 8px 12px;
border:none;
  }

  #bond-ranking-section table .bond-name a {
    display: flex;
    align-items: center
  }

  #bond-ranking-section table .bond-name a svg {
    width: 24px;
    margin-right: 5px
  }

  #bond-ranking-section table .bond-rate {
    color: #009565
  }

  #bond-ranking-section .bond-ranking-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background-color: #fff;
    border-bottom: 1px dashed #ddd;
    font-family: SF-UI-Display-Regular
  }

  #bond-ranking-section .bond-ranking-item:last-child {
    border-bottom: none
  }

  #bond-ranking-section .bond-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 4px;
    border: 1px solid #ddd
  }

  #bond-ranking-section .bond-name {
    flex: 1;
    font-weight: 500;
    color: #333;
    font-family: SF-UI-Display-Medium;
    font-size: 16px
  }

  #bond-ranking-section .bond-more-btn {
    background-color: #008253;
    color: #fff;
    border: none;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    font-weight: 500
  }

  #bond-ranking-section .bond-more-btn:hover {
    background-color: #036340;
    transition: all .25s linear
  }

  @media (max-width:480px) {
    #bond-ranking-section {
      flex-direction: column;
      gap: 16px;
      padding: 16px
    }

    #bond-ranking-section .bond-ranking-box {
      width: 100%
    }
.dc-mover.pos-01{max-width:280px;}
.section-bottom-faq{padding-left:24px;padding-right:24px;}
  }
/*card*/
.how-thumb-area {
    margin: 0 auto;
    width: 142px;
    height: 142px;
    position: relative;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
}
.how-thumb-area::after, .how-thumb-area::before {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%, -50%);
    position: absolute;
    content: "";
}
.how-thumb-area::before {
    width: 100%;
    height: 100%;
    background: url(/wp-content/uploads/2025/10/ht-before.png) no-repeat center center;
    background-size: contain;
    animation: rotate 10s linear infinite;
    -webkit-animation: rotate 10s linear infinite;
    -moz-animation: rotate 10s linear infinite;
}
.how-thumb-area::after {
    width: 115px;
    height: 115px;
    background: url(/wp-content/uploads/2025/10/ht-after.png) no-repeat center center;
    background-size: contain;
    animation: rev-rotate 10s linear infinite;
    -webkit-animation: rev-rotate 10s linear infinite;
    -moz-animation: rev-rotate 10s linear infinite;
}
.how-thumb-area .how-thumb {
    width: 90px;
    height: 90px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: #fff;
    align-items: center;
    position: relative;
    z-index: 1;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.how-thumb-area .how-thumb img, .how-thumb-area .how-thumb svg {
    max-width: 60px;
    max-height: 60px;
}
.card-member .flip-front h4 {
    text-align: center;
    font-family: SF-UI-Display-Thin;
    color: #33406a;
    padding-top: 20px;
    padding-bottom: 0;
    font-size: 20px;
    line-height: 1.4;
}
/*List documents downloadable*/
.row-flex{
display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #ddd;
  padding: 12px 0;
    }
    .row-flex .date{
white-space: nowrap;
  min-width: 90px;
  color: #555;
    }
    .date span {
font-size: 16px;
font-weight: 600;
letter-spacing: 2px;
line-height: 1.5;
text-transform: uppercase;
color:#616161;
}
.row-flex .content {
  flex: 1;
  word-break: break-word;
  font-size: 16px;
  line-height: 1.5;
}
.row-flex .content h4{color:#333;font-weight:600;margin:0;padding:0;font-size: 16px;}
.row-flex .file-download .item {
-webkit-box-direction: normal;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.row-flex .file-download {
  flex-shrink: 0;
  white-space: nowrap;
  min-width: max-content;
  text-align: right;
}
.row-flex .file-download .item.have-file-name {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
justify-content: space-between;
}
.row-flex .file-download .link {
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
grid-gap: 9pt;
align-items: center;
background-color: inherit;
border: none;
color: #000;
cursor: pointer;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
font-size: 1rem;
font-weight: 600;
gap: 9pt;
justify-content: space-between;
line-height: 1.5;
position: relative;
width: 100%;
text-decoration:none;
}
.row-flex .file-download .link:hover{
text-decoration:underline;
color:#c41c16;
}
.row-flex .file-download .item {
-webkit-box-orient: horizontal;
-webkit-box-pack: end;
-ms-flex-pack: end;
-ms-flex-direction: row;
flex-direction: row;
justify-content: flex-end;
margin-bottom: 0;
padding-bottom: 0;
width: 100%;
}
.row-flex .file-download, .list-view-documents .file-download .item {
-webkit-box-direction: normal;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.row-flex .file-download .btn {
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: space-between;
min-width: 39.8%;
padding-left: 28px;
padding-right: 35px;
position: relative;
-webkit-transition: all .3s ease;
transition: all .3s ease;
    border: none;
    padding-top: 0;
    padding-bottom: 0;
}
.row-flex .file-download .btn:before {
background-color: #dadada;
content: "";
height: 15px;
left: 0;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 2px;
}
.row-flex .file-download .btn:hover{background-color:transparent;}
.grid-nhdt-collap .box-feature .grid-box .grid-item .step{
background-image: url(https://www.tcbs.com.vn/documents/392342/558755/circle-bg.png);
}
@media (max-width:480px) {
.stock-list .list-case .list-col{
    grid-template-columns: repeat(2, 1fr);
}
}
.tcs-item-box-df.tcs-fe-item-box p{position:relative;}
.grid-img-inbox .img-inbox_eq{
text-align:center;
}
.grid-img-inbox .img-inbox_eq svg{
max-width:80px
}
.card-icon-top-st01 .icon-top-outside .how-thumb span{position:relative;z-index:2;}
.bond-newjourney{
background-image: url(https://www.tcbs.com.vn/wp-content/uploads/2025/10/bg-journey-bond-scaled.jpeg);
}