.list_table {
      border-collapse: collapse;
      border-color: #f5f5f5
  }

  .list_table td {
      border: solid 1px #ccc;
      padding: 10px;
      vertical-align: middle
  }

  .in-bao-gia-container {

      margin: 20px auto;
      padding: 10px;

      font-size: 14px;
      background: #fff;

  }


  .in-bao-gia-header {
      position: relative;
      padding: 25px 0 15px 0;
      border-bottom: 3px solid var(--maincolor);
      color: #333
  }

  .in-bao-gia-header-right {
      position: relative
  }

  .in-bao-gia-header-right p {
      margin: 0 0 10px 0
  }

  .in-bao-gia-header-right p:last-child {
      margin-bottom: 0
  }

  .ten-cong-ty {
      font-size: 20px;
      font-weight: 700
  }

  .in-bao-gia-title {
      color: var(--maincolor);
      display: block;
      font-size: 32px;
      font-weight: 700;
      text-align: center;

  }

  .date-currency {
      display: flex;
      justify-content: space-between;
      color: #575757;
      font-weight: 700
  }

  .currency {
      color: var(--maincolor);
      font-weight: 700
  }


  .in-bao-gia-note {
      border-bottom: 3px solid var(--maincolor)
  }

  .in-bao-gia-footer {
      display: flex;
      justify-content: space-between;
      align-items: center
  }

  .in-bao-gia-footer-right {
      color: var(--maincolor);
      font-size: 1.1rem;
      font-weight: 700
  }

  .in-bao-gia-footer p a {
      font-size: 14px
  }

  .thank-you {
      text-align: center;
      margin-top: 30px
  }

  table {
      width: 100%;
  }

  @media print {
      .hide-print {
          display: none;
      }
  }


  :root {
      --font: 'Arial', sans-serif;
      --fonttitle: 'Manrope';
      --color: <?=$Setting['color_web'] ?>;
      --color2: <?=$Setting['color_web1'] ?>;
      --tcolor: #E44650;
      --hcolor: orange;
      --fcolor: orange;
      --bcolor: #d60c0c;
      --maincolor: #d34263;
  }

  /* CSS Chuyển khoản*/
  table {
      width: 100%;
  }

  td {
      padding: 10px;
      vertical-align: top;
  }

  b {
      font-weight: bold;
  }

  ul {

      padding-left: 15px;
      list-style-type: disc;
  }



  i {
      font-style: italic;
  }

  .cot-left {
      line-height: 0.8
  }

  .product-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
  }

  .product-box {
      border: 1px solid #ddd;
      border-radius: 8px;
      overflow: hidden;
  }

  .product-image img {

      height: auto;
      display: block;
      border-radius: 8px 8px 0 0;
  }

  .product-details {
      padding: 10px;
  }

  .product-details h3 {
      margin-top: 0;
      margin-bottom: 10px;
      font-size: 18px;

  }

  .product-details p {
      margin: 0;
      font-size: 16px;
  }

  @media (min-width: 768px) {
      .product-grid {
          grid-template-columns: repeat(5, 1fr);
      }

      .in-bao-gia-container {}

      #toggle-panel {
          position: fixed;
          bottom: 173px;
          right: 12px;
          z-index: 1000;
      }
  }

  @media (max-width: 768px) {
      .product-details h3 {}

      .product-details p {}

      .product-title h3 {}

      .in-bao-gia-title {}

      .faqs-group {
          margin-bottom: 251px;
      }


      #toggle-panel {
          position: fixed;
          bottom: 136px;
          left: 11px;
          z-index: 1000;
      }

      .control-panel {
          left: -2px !important;
      }

  }

  .product-title h3 {
      text-align: center;
      font-size: x-large;
      text-transform: uppercase;
      margin: 30px 0px;
  }



  .e-flex {
      -webkit-text-size-adjust: 100%;
      -webkit-tap-highlight-color: transparent;
      visibility: inherit;
      text-align: left;
      font-family: var(--font);
      font-weight: 400;
      font-style: normal;
      font-size: 15px;
      line-height: 1.5;
      color: #3e3e3e;
      box-sizing: border-box;
      --column-space: 20px;
      --row-space: 46px;
      --columns: 6;
      display: flex;
      flex-wrap: wrap;
      margin-left: calc(-1 * var(--column-space));
      margin-bottom: calc(-1 * var(--row-space));
      margin-top: 10px;
  }

  .e-flex-item {
      -webkit-text-size-adjust: 100%;
      -webkit-tap-highlight-color: transparent;
      visibility: inherit;

      font-family: var(--font);
      font-weight: 400;
      font-style: normal;
      font-size: 15px;
      line-height: 1.5;
      color: #3e3e3e;
      --column-space: 20px;
      --row-space: 46px;
      --columns: 6;
      box-sizing: border-box;
      width: calc((100% / var(--columns)) - var(--column-space));
      margin-left: var(--column-space);
      margin-bottom: var(--row-space);
      height: 83px;
      border-radius: 8px;
      text-align: center;
      padding: 10px 20px;
  }


  #form_project {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      background-color: yellow;
      padding: 50px;
      font-size: 20px;

  }

  .button-style {
      padding: 12px 10px 14px;
      position: relative;
      display: inline-block;
      font-weight: 400;
      transition: 0.6s;
      text-align: center;
      line-height: normal;
      color: #ffffff;
      vertical-align: middle;
      background: #317721;
      border: solid 1px #1C540F;
      border-radius: 4px;
      padding-right: 30px;
  }

  .button-style:last-child a:after {
      width: 11px;
      height: 5px;
      background: url(../images/muiten.png) no-repeat center right;
      position: absolute;
      content: "";
      top: 18px;
      right: 10px;
      filter: brightness(0) invert(1);
  }


  .button-style a {
      color: #fff;
  }

  .form-group.px-4.pt-3 {
      background-color: red
  }

  #container {
      overflow-x: hidden;
  }

  header {
      position: relative;
      background-color: white;
  }

  header .header-top {
      background-color: #e9e9e9
  }

  header .header-top .ul li {
      position: relative;
      display: inline-block;
  }

  header .header-top .ul li:after {
      content: '|';
      color: #3e3e3e;
      position: absolute;
      top: 9px;
      right: 0
  }

  header .header-top .ul li:last-child:after {
      content: none;
  }

  header .header-top .ul li a {
      display: block;
      text-transform: capitalize;
      padding: .7em 1em;
      color: #3e3e3e;
      font-weight: 400;
  }

  header .header-top .ul li a:hover {
      color: var(--color)
  }

  header .header-top .ul li:first-child a {
      padding-left: 0;
  }

  header .header-top span {
      color: #3e3e3e;
      font-weight: 400;
  }

  header .logo img {
      max-width: 100px;
  }

  header .hotline {
      color: var(--color2);
      font-weight: 700;
      font-size: 1.14em
  }

  header .email {
      font-weight: 400;
      color: #777777;
  }

  header .icon {
      width: 42px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px dotted var(--color2);
      border-radius: 5px;
  }

  header .banner h3,
  header .mbanner h3 {
      text-transform: uppercase;
      font-weight: 700;
      color: var(--color);
      font-size: 1.7em
  }

  header .banner p,
  header .mbanner p {
      color: var(--color2);
      margin: 0
  }

  /**/
  .title-style-1 {
      text-align: center;
      margin: 0;
      padding: 1em 0 2em 0;
  }

  .title-style-1 h1,
  .title-style-1 h2 {
      position: relative;
      font-family: var(--fonttitle);
      display: inline-block;
      padding: 0 .5em;
      margin: 0;
      font-size: 2em;
      font-weight: 700;
      color: var(--color);
      text-transform: uppercase;
  }

  .title-style-2 {
      border-top: 3px solid var(--color);
      border-left: 1px solid #ececec;
      border-right: 1px solid #ececec;
  }

  .title-style-2 h2 {
      position: relative;
      color: var(--color);
      text-transform: uppercase;
      font-size: 1.3em;
      font-weight: 800;
      padding: .5em 0 .5em 2.5em;
      margin: 0;
  }

  .title-style-2 h2:before {
      content: '';
      width: 15px;
      height: 20px;
      background: url(../../images/hot.png) no-repeat;
      position: absolute;
      left: 1em;
      top: .5em;
  }

  main.pagein .title-style-1 {}

  main.pagein {
      margin-bottom: 1em;
  }

  .jumbotron {
      background-color: #f8f8f8;
      border-radius: 0;
  }

  .allview {
      font-size: 1.07em;
      transition: all 0.5s;
      border-radius: 2em;
      padding: .6em 2.5em;
      border: 1px solid #393939;
      color: #393939;
  }

  .allview:hover {
      transform: translateX(10px);
      border-color: var(--color);
      color: var(--color);
  }

  /*product*/
  .selling {
      border-right: 1px solid var(--color)
  }

  .boxProd {
      position: relative;
  }

  .boxProd .col-xx {
      flex: 1 20%;
      padding: 0 5px;
      position: relative;
      max-width: 20%;
  }

  .boxProd .items {
      background-color: white;
      position: relative;
      transition: all 0.5s;
  }

  .boxProd .items:hover {
      transform: translateY(-5px);
  }

  .boxProd .items .img {
      position: relative;
      overflow: hidden;
      transition: all 0.5s;
  }

  .boxProd .items .img img {
      width: 100%;
      transition: all 0.5s;
      border-radius: 10px;
  }

  .boxProd .items .details {
      text-align: center;
  }

  .boxProd .items .details h3 {
      font-size: 1em;
      line-height: 1.4;
      margin: 0;
  }

  .boxProd .items .details h3 a {
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 8px;
      text-transform: capitalize;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      padding: 0;
      color: #333;
  }

  .boxProd .items .img .flag {
      width: 39px;
      height: 39px;
      display: grid;
      text-align: center;
      align-items: center;
      position: absolute;
      top: .5em;
      left: .5em;
      z-index: 9;
      color: white;
      font-size: .9em;
  }

  .boxProd .items .details h3 a:hover {
      color: var(--color);
  }

  .boxProd .items .details .code {
      color: var(--tcolor);
      text-transform: uppercase;
      margin-bottom: 3px;
      display: block
  }

  .boxProd .items .details .price,
  .boxProd .items .details .price a {
      font-size: 1em;
      color: red;
      font-weight: 700;
  }

  .boxProd .items .details .des,
  .boxProd .items .details .price span {
      color: #797979;
      margin-bottom: .5em;
  }

  .boxProd .items .details .price .line-through {
      font-size: .9em;
      text-decoration: line-through;
  }

  .boxProd .items .img .sale {
      width: 39px;
      height: 39px;
      display: grid;
      text-align: center;
      align-items: center;
      position: absolute;
      top: .5em;
      right: .5em;
      z-index: 9;
      background: url(../../images/sale.png) no-repeat;
      color: white;
      font-size: .9em;
  }

  .showproduct {
      border: 1px solid #cdcdcd;
      border-top: 0;
      margin: 2em 0;
  }

  .showproduct .title-sp {
      color: red;
      font-size: 1.1em;
      text-transform: uppercase;
      font-weight: 700;
      border: 1px dashed black;
      border-radius: 5px;
      padding: .5em 2em;
      display: inline-block;
  }

  .selling .items {
      position: relative;
      display: flex;
      border-bottom: 1px solid #cdcdcd;
      margin-bottom: .5em;
      padding-bottom: .5em;
  }

  .selling .items:last-child {
      border: 0;
  }

  .selling .items .img {
      flex: 1 40%;
      padding-right: 1em;
  }

  .selling .items .details {
      flex: 60%;
  }

  .selling .items .details h3 {
      font-size: 1.1em;
      line-height: 1.5;
      margin: 1em 0 .5em;
  }

  .selling .items .details h3 a {
      color: #393939;
      font-weight: 700;
      text-transform: capitalize;
  }

  .selling .items .details h3 a:hover {
      color: var(--color);
  }

  .selling .items .details .price,
  .selling .items .details .price a {
      font-size: 1em;
      color: red;
      font-weight: 700;
  }

  .selling .items .details .des,
  .selling .items .details .price span {
      color: #797979;
      margin-bottom: .5em;
  }

  .selling .items .details .price .line-through {
      font-size: .9em;
      text-decoration: line-through;
  }

  /**/
  #boxBottom .title-style-3 {
      position: relative;
      color: white;
      font-size: 1.5em;
      text-transform: uppercase;
      font-weight: 700;
      padding-bottom: .5em;
      margin-bottom: 1em;
      border-bottom: 3px solid #ececec38;
  }

  #boxBottom .title-style-3:after {
      content: '';
      width: 60px;
      height: 3px;
      background-color: var(--color);
      position: absolute;
      bottom: -3px;
      left: 0;
  }

  /* post */
  .post {
      position: relative;
      border: 1px solid #eaeaea;
      transition: all 0.5s;
  }

  .post:hover {
      transform: translateY(-5px);
  }

  .post .img {
      transition: all 0.5s;
      position: relative;
      overflow: hidden;
  }

  .post .img img {
      width: 100%;
      height: auto;
  }

  .post .details {
      position: relative;
      padding: 1em;
  }

  .post .details h3 {
      font-family: var(--font);
      font-size: 1.14em;
      line-height: 1.5;
  }

  .post .details h3 a {
      color: #393939;
      text-transform: uppercase;
      font-weight: 600;
  }

  .post .details h3 a:hover {
      color: var(--color);
  }

  .post .details p {
      font-size: 1em;
      color: black;
      margin: 10px 0;
  }

  .post .details span {
      font-size: 13px;
      color: #666;
  }

  /* post details */
  .container .img {
      position: relative;
  }

  .container .title-details {
      position: absolute;
      z-index: 99;
      width: 80%;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      font-size: 2.8em;
      color: white;
      text-shadow: 2px 2px 2px rgba(80, 80, 80, 1);
  }

  .heading {
      font-size: 1.28em;
      color: var(--color);
      text-transform: uppercase;
      font-weight: 700;
      margin: .5em 0;
  }

  article {
      padding: 1em 0 2em;
  }

  article img {
      max-width: 100% !important;
      height: auto !important;
  }

  article iframe {
      width: 100% !important;
      height: auto !important;
  }

  .datecreate {
      font-size: 1em;
      color: #464646;
      font-weight: 400;
  }

  .datecreate i {
      color: var(--color);
      margin-right: .5em;
  }

  .newsfrind {
      margin: 1em 0;
      border: 1px solid #eaeaea;
      border-radius: 10px;
      padding: 1em;
  }

  .title-news {
      text-align: center;
      text-transform: uppercase;
      color: var(--color);
      font-size: 1.4em;
      margin-bottom: .3em;
      font-weight: 700;
  }

  .newsfrind ul li {
      padding: 0.75em 0;
      border-bottom: 1px dashed #e6e6e6;
      display: flex;
      align-items: center;
  }

  .newsfrind ul li:last-child {
      border: none;
  }

  .newsfrind ul .img {
      flex: 1 30%;
  }

  .newsfrind ul .img img {
      width: 100%;
      transition: all .5s;
  }

  .newsfrind ul .img img:hover {
      opacity: .7;
  }

  .newsfrind ul .details {
      flex: 1 70%;
      padding-left: 0.75em;
  }

  .newsfrind ul .details h3 {
      font-size: 1.2em;
      font-weight: normal;
      transition: all .5s;
  }

  .newsfrind ul .details h3 a {
      color: var(--color);
      font-size: .93em;
  }

  .newsfrind ul .details h3 a:hover {
      color: var(--tcolor);
  }

  .newsfrind ul .details h3:hover {
      transform: translateX(5px);
  }

  .title-other {
      font-size: 1.8em;
      font-weight: 700;
      color: var(--color);
      position: relative;
      display: block;
      font-family: var(--font3);
      margin: 0 0 1em 0;
      text-transform: uppercase;
  }

  .title-other:before {
      content: '';
      width: 50px;
      height: 1px;
      background-color: var(--color);
      position: absolute;
      left: 0;
      bottom: -3px;
  }

  /* .frame_images */
  /* =====================================================
   PRODUCT DETAIL - OLD STYLES (DEPRECATED)
   ===================================================== */
  .frame_images {
      text-align: center;
  }

  .selectors {
      padding: 0;
      margin-top: 10px;
  }

  .selectors .owl_carousel_detail .owl-stage {
      margin: auto;
  }

  /* Backward compatibility - redirected to new styles */
  .khung_thongtin {
      list-style: none;
  }

  .khung_thongtin h1 {
      font-size: 1.8em;
      font-weight: 700;
      margin: 0;
      text-transform: uppercase;
      color: var(--color);
  }

  .khung_thongtin li {
      padding: 8px 0;
      color: black;
      border-bottom: 1px solid #ebebeb;
  }

  .khung_thongtin li.code {
      font-size: 1em;
  }

  .khung_thongtin li.code span {
      color: red;
  }

  .khung_thongtin .gia_detail {
      font-size: 1.28em;
      color: red;
      font-weight: 700;
  }

  .khung_thongtin .gia_detail a {
      color: red;
  }

  .khung_thongtin .gia_detail span {
      font-size: 1em;
      color: gray;
      text-decoration: line-through;
  }

  .khung_thongtin .gia_detail .text-unset {
      color: red;
  }

  .khung_thongtin .gia_detail .line-through {
      font-size: .9em;
      font-weight: 400;
  }

  .khung_thongtin .input-group input {
      text-align: center;
      max-width: 200px;
      margin: 0 5px;
      border-radius: 4px !important;
      background: #f7f7f7;
  }

  .khung_thongtin .input-group-btn button {
      padding: 5px 14px;
      background-color: var(--color);
      color: white;
  }

  .khung_thongtin .dathat_detail,
  .khung_thongtin .dathat_all {
      padding: .5em 1.5em;
      margin: 0;
      display: inline-block;
      background: #277d12;
      color: white;
      text-align: center;
      text-transform: uppercase;
      font-size: 1.4em;
      border: 0;
      border-radius: 5px;
      transition: 0.5s;
  }

  .khung_thongtin .dathat_detail p {
      font-size: 12px;
      margin-bottom: 0px;
  }

  .khung_thongtin .input-group-btn button:hover,
  .khung_thongtin .dathat_detail:hover {
      background-color: var(--tcolor);
  }

  /* ===================================================== */
  #container_product {
      margin: 2em 0;
  }

  #container_product #tabs {
      overflow: hidden;
      border-bottom: 1px solid var(--color);
  }

  #container_product #tabs li {
      margin: 0;
      padding: .5em 1.5em;
      color: rgba(0, 102, 204, 1);
      text-transform: uppercase;
  }

  #container_product #tabs li.active,
  #container_product #tabs li:hover {
      color: black;
      background: var(--color);
  }

  #container_product #tabs li {
      display: inline-block;
  }

  #container_product #tabs li a {
      color: black;
      font-size: 1.2em;
  }

  #container_product #tabs li.active a,
  #container_product #tabs li:hover a {
      color: white;
  }

  #container_product .noidung_ta {
      width: 100%;
      padding: 10px;
      border: 1px solid var(--color);
  }

  /**/
  .thuvien {
      padding: 1em 0;
  }

  .thuvien .view img {
      width: 100%;
      transition: all .2s linear;
      position: relative;
      display: block;
  }

  .thuvien .view {
      position: relative;
      overflow: hidden;
      cursor: default;
  }

  .thuvien .view .flex-center {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
      width: 100%;
      height: 100%;
      background-attachment: fixed;
      background-color: rgba(0, 0, 0, .5);
  }

  .thuvien .view .flex-center {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      opacity: 1;
  }

  .thuvien .view .flex-center .details {
      text-align: center;
  }

  .thuvien .view .flex-center h3 {
      display: block;
      text-transform: uppercase;
      font-size: 1.3em;
      margin: 0 0 1em 0;
      color: var(--color);
      font-weight: bold;
  }

  .thuvien .view .flex-center p {
      display: block;
      text-transform: uppercase;
      margin: 10px 0 20px 0;
      color: #fff;
  }

  .thuvien .view .flex-center .chitiet {
      color: #6d6e71;
      background-color: #fff;
      text-align: center;
      padding: 10px 10px 7px 10px;
      border-radius: 50%;
  }

  .thuvien .view:hover img {
      transform: scale(1.1);
  }

  .thuvien .view:hover .flex-center {
      opacity: 1;
      background-color: rgba(0, 0, 0, .7);
  }

  .thuvien .view:hover .flex-center h3 {
      color: #fff;
  }

  /* Content pagination */
  ul.pagination {
      font-size: 15px;
      text-align: center;
      width: 100%;
      display: inline-block;
  }

  ul.pagination li {
      display: inline;
      padding: 0 3px;
  }

  ul.pagination a {
      display: inline-block;
      padding: 0px 10px 2px 10px;
      border: 1px solid #D4D4D4;
  }

  ul.pagination a:hover,
  ul.pagination a.current {
      background-color: var(--color);
      color: white;
  }

  ul.tags {
      display: block;
      position: relative;
      padding: 0;
      margin: 0 0 1em 0;
      list-style: none;
  }

  ul.tags>li {
      display: inline-block;
  }

  ul.tags>li>a {
      font-family: var(--font);
      color: var(--hcolor);
      font-size: 1em;
      padding: 0;
      border-radius: 10px;
      display: block;
      margin: 0 .5em .5em 0;
  }

  ul.tags>li>a:hover {
      color: var(--color3);
      border: 1px solid var(--color3);
  }

  /**/
  .boxLeft {
      position: relative;
      width: 100%;
      margin-top: 3em;
      background-color: white;
  }

  .boxLeft .title-left h2 {
      background: var(--color) url(../../images/title-left.png) no-repeat left center;
      display: block;
      color: white;
      font-weight: 700;
      font-size: 18px;
      font-family: var(--fonttitle);
      text-transform: uppercase;
      text-align: center;
      padding: 12px;
      margin-bottom: 6px;
  }

  .boxLeft .title h2 {
      background-color: var(--fcolor);
      color: white;
      font-size: 15px;
      padding: 12px 20px;
      margin: 0;
      border-bottom: 1px solid white;
  }

  .boxLeft .title h2 a {
      color: white;
      font-weight: 600;
      text-transform: uppercase;
  }

  .boxLeft .title h2 a:hover {
      color: black;
  }

  .boxLeft .danhmuc li {
      padding: 10px 15px;
  }

  .boxLeft .danhmuc li a {
      transition: all 0.5s;
      background: url(../../images/arrow.png) no-repeat left center;
      color: #191919;
      font-size: 15px;
      text-transform: capitalize;
      display: block;
      padding: 0 1em;
  }

  .boxLeft .danhmuc li:hover a {
      color: var(--color);
      transform: translateX(5px);
  }

  /**/
  .boxDv {
      padding: 2em 0 1em 0;
      position: relative;
  }

  .boxDv .items {
      position: relative;
      transition: all 0.5s;
      background-color: white;
  }

  .boxDv .items:hover {
      transform: translateY(-5px);
  }

  .boxDv .items .img {
      position: relative;
      overflow: hidden;
      transition: all 0.5s;
  }

  .boxDv .items .img img {
      width: 100%;
      transition: all 0.5s;
  }

  .boxDv .items .img .caption {
      position: absolute;
      z-index: 9;
      left: 0;
      right: 0;
      bottom: -3em;
      display: flex;
      opacity: 0;
  }

  .boxDv .items .img .caption a {
      width: 50%;
      background-color: var(--fcolor);
      text-align: center;
      font-size: .93em;
      color: white;
      padding: .75em 0;
  }

  .boxDv .items .img .caption a:hover {
      background-color: var(--color);
      color: yellow;
  }

  .boxDv .items:hover .caption {
      transition: all .5s;
      opacity: 1;
      bottom: 0;
  }

  .boxDv .items .details {
      padding: 1em;
      text-align: left;
  }

  .boxDv .items .details h3 {
      font-size: 1.14em;
      line-height: 1.5;
  }

  .boxDv .items .details h3 a {
      color: black;
      font-weight: 600;
      text-transform: uppercase;
  }

  .boxDv .items .details h3 a:hover {
      color: var(--hcolor);
  }

  .boxDv .items .details .des {
      color: #333333;
  }

  .boxDv .items .details .price {
      font-weight: 600;
      color: var(--color);
  }

  .boxDv .items .details .price span {
      font-weight: 400;
      color: #6c6c6c;
      text-decoration: line-through;
  }

  .boxDv .items .details .price a {
      color: var(--color);
  }

  .boxDv .items .details .price a:hover {
      color: blue;
  }

  /**/
  .accordion-btn.collapsed:after,
  .accordion-btn:after {
      content: "+";
      font-size: 30px;
      line-height: 38px
  }

  .accordion-btn.collapsed:after {
      -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      transform: rotate(-90deg)
  }

  .accordion-btn:after {
      position: absolute;
      right: 20px;
      top: 16px;
      color: #B3001E;
      transition: all .2s ease 0;
      -webkit-transform: rotate(-134deg);
      -ms-transform: rotate(-134deg);
      transform: rotate(-134deg)
  }

  .accordion-btn,
  .accordion-btn:active,
  .accordion-btn:after,
  .accordion-btn:focus,
  .accordion-btn:hover {
      -webkit-transition: all .2s ease 0;
      -moz-transition: all .2s ease 0;
      -ms-transition: all .2s ease 0;
      -o-transition: all .2s ease 0
  }

  .accordion-btn,
  .accordion-btn:active,
  .accordion-btn:focus,
  .accordion-btn:hover {
      display: block;
      position: relative;
      width: 100%;
      margin-top: 10px;
      padding: 20px;
      font-size: 20px;
      line-height: 26px;
      text-align: left;
      color: #383838;
      background-color: #efefef;
      border: none;
      transition: all .2s ease 0
  }

  .accordion-container {
      margin-top: -1px;
      padding: 20px;
      background-color: #efefef
  }

  .download a {
      font-size: 1.4em;
  }

  /**/
  footer {
      background-size: cover;
      background-repeat: no-repeat;
      padding-top: 2em;
  }

  footer .footer-menu {
      background: url(../../images/line.png) no-repeat bottom center;
      padding-bottom: .5em;
  }

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

  footer .footer-menu .ul li:after {
      content: '|';
      color: #eeecec;
      position: absolute;
      top: 9px;
      right: 0
  }

  footer .footer-menu .ul li:last-child:after {
      content: none;
  }

  footer .footer-menu .ul li a {
      display: block;
      font-size: 1.14em;
      text-transform: uppercase;
      padding: .7em 1em;
      color: #eeecec;
      font-weight: 400;
      transition: all 1s;
  }

  footer .footer-menu .ul li a:hover {
      text-decoration: underline !important;
  }

  footer .footer-menu .ul li:first-child a {
      padding-left: 0;
  }

  footer .footer-tags {
      background: url(../../images/line.png) no-repeat bottom center;
      padding: 1em 0;
  }

  footer .footer-tags .ul li {
      display: inline-block;
  }

  footer .footer-tags .ul li a {
      color: #eeecec;
      padding: .5em 0 .5em .4em;
      display: block;
      font-size: 1em;
      text-transform: capitalize;
  }

  footer .footer-tags .ul li a:hover {
      text-decoration: underline !important;
  }

  footer .footer h5 {
      color: white;
      font-size: 2.57em;
      padding: 0;
      margin: 0 0 .5em 0;
      display: block;
      font-weight: 700;
      text-transform: uppercase;
  }

  footer .footer .ul li {
      color: #eeecec;
      font-size: 1.1em;
      font-weight: 400;
      line-height: 1.8;
  }

  footer .footer h6 {
      position: relative;
      color: white;
      font-size: 1.2em;
      font-weight: 700;
      padding: 0;
      margin: 0 0 2em 0;
      display: block;
      text-transform: uppercase;
      font-weight: 400;
  }

  footer .footer h6:after {
      content: '';
      width: 40px;
      height: 2px;
      background-color: white;
      position: absolute;
      bottom: -.7em;
      left: 0;
  }

  footer .footer p {
      font-size: 1em;
      color: white;
  }

  footer .map iframe {
      max-width: 100%;
      max-height: 210px;
  }

  #map iframe {
      max-width: 100%;
      max-height: 500px;
      width: 100%;
  }

  #map_canvas iframe {
      max-width: 100%;
      max-height: 350px;
      width: 100%;
  }

  #copyright {
      text-align: center;
      color: white;
      font-size: 1em;
      font-weight: 400;
      padding: 1em 0;
      width: 100%;
      background-color: var(--color);
  }

  #copyright .copy a {
      color: white;
  }

  #copyright .copy a:hover {
      color: #fcb143;
  }

  /* @media */
  .col-x {
      flex: 1 25%;
      padding-left: 15px;
      padding-right: 15px;
  }

  .col-y {
      flex: 1 75%;
      padding-left: 15px;
      padding-right: 15px;
  }

  @media (min-width:1200px) {
      .container {
          max-width: 1300px;
      }

      .boxProd .items .details h3 {}
  }

  @media screen and (max-width:1200px) {

      html,
      body {
          font-size: 13px;
      }

      .boxProd .col-xx {
          flex: 1 20%;
          max-width: 20%;
      }
  }

  @media screen and (max-width:1024px) {
      .col-x {
          flex: 1 25%;
      }

      .col-y {
          flex: 1 75%;
      }

      .boxProd .col-xx {
          flex: 1 25%;
          max-width: 25%;
      }
  }

  @media screen and (max-width:992px) {

      html,
      body {
          font-size: 12px;
      }

      .col-y {
          flex: 1 100%;
      }

      .boxProd .col-xx {
          flex: 1 33.33333%;
          max-width: 33.33333%;
      }
  }

  @media screen and (max-width:768px) {

      html,
      body {
          font-size: 14px;

          .khung_thongtin .dathat_detail,
          .khung_thongtin .dathat_all {
              padding: 10px 10px;
              margin: 10px 0px;
              width: 100%;
              font-size: large;
              background-color: #078507;
          }

          .khung_thongtin .dathat_detail p {
              font-size: 11px;
              margin-bottom: 0px;
          }


      }
  }

  @media screen and (max-width:576px) {
      .boxProd .col-xx {
          flex: 1 50%;
          max-width: 50%;
      }


  }

  @media screen and (max-width:320px) {}

  @media (max-width: 600px) {
      .live-button-fixed {
          font-size: 14px;
          padding: 8px 14px;

          width: 184px;

          bottom: 10px !important;
          left: 91px !important;
      }
  }

  .live-button-fixed {
      position: fixed;
      bottom: 264px;
      left: 20px;
      z-index: 9999;
      display: inline-flex;
      align-items: center;
      background-color: #fff;
      border: 2px solid #e53935;
      color: #e53935;
      font-weight: bold;
      padding: 10px 16px;
      border-radius: 30px;
      font-size: 16px;
      text-decoration: none;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      transition: background-color 0.2s, color 0.2s;
  }

  .live-button-fixed:hover {
      background-color: #e53935;
      color: #fff;
  }

  .live-icon {
      position: relative;
      width: 12px;
      height: 12px;
      background-color: #e53935;
      border-radius: 50%;
      margin-right: 10px;
  }

  .live-icon::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      height: 100%;
      background-color: rgba(229, 57, 53, 0.5);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      animation: pulse 1.2s infinite;
  }

  @keyframes pulse {
      0% {
          transform: translate(-50%, -50%) scale(1);
          opacity: 0.8;
      }

      70% {
          transform: translate(-50%, -50%) scale(2.2);
          opacity: 0;
      }

      100% {
          transform: translate(-50%, -50%) scale(1);
          opacity: 0;
      }
  }