@charset "UTF-8";
/**
 * _base.scss
 * 
 * 1/ biến màu săc
 * 2/ biến kích thước font chữ
 * 3/ Cấu hình border
 * 4/ Mixin
 * 5/ Responsive
*/
.ellipsis-2-rows {
  display: -webkit-box; /* Sử dụng Flexbox cho layout */
  -webkit-line-clamp: 2; /* Hiển thị tối đa 2 dòng */
  -webkit-box-orient: vertical; /* Xếp các dòng theo chiều dọc */
  overflow: hidden; /* Ẩn nội dung vượt quá */
  text-overflow: ellipsis; /* Thêm dấu ba chấm */
  max-height: 2.4em; /* Điều chỉnh chiều cao dựa trên số dòng và line-height */
  line-height: 1.2em; /* Khoảng cách dòng */
  min-height: 2.4em;
}

.section.bg-half .section-bg {
  background-position: left center;
  max-width: 50%;
}

section.mbws-bg-mask .section-bg-overlay {
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%221920%22%20height%3D%22954%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url%28%23prefix__clip0_75_23031%29%22%20fill%3D%22rgba%2815%2C35%2C133%2C1%29%22%3E%3Cpath%20d%3D%22M1321.57%20538C1357.08%20287.516%201273.7%2089.91%201127-.418L1374.18-6c65.77%20100.68-15.89%20431.512-52.61%20544zM312%20955c432.242%200%20746.77-180.667%20850-271-90.34%20157.09-176.766%20246.121-208.688%20271H312z%22%20fill%3D%22rgba%2866%2C90%2C158%2C1%29%22%20fill-opacity%3D%22.25%22%2F%3E%3Cpath%20d%3D%22M1344.5%20427c0-252.4-212.67-390.833-319-428.5H1373c70%2082.4%2010.17%20320-28.5%20428.5z%22%20fill%3D%22rgba%2866%2C90%2C158%2C1%29%22%20fill-opacity%3D%22.1%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M839.644%20954C1138.37%20793.549%201337%20508.902%201337%20184.5c0-63.218-7.54-124.926-21.9-184.5H1920v954H839.644zm0%200C676.842%201041.44%20484.311%201092%20278%201092c-584.87%200-1059-406.302-1059-907.5S-306.87-723%20278-723c511.098%200%20937.63%20310.269%201037.1%20723H0v954h839.644z%22%20fill%3D%22rgba%2866%2C90%2C158%2C1%29%22%20fill-opacity%3D%22.5%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M1011.55%20954C1221.42%20793.95%201353%20564.007%201353%20308.5c0-108.584-23.76-212.552-67.2-308.5H1920v954h-908.45zm0%200c-187.291%20142.83-436.933%20230-711.05%20230C-280.78%201184-752%20792.025-752%20308.5S-280.78-567%20300.5-567c450.743%200%20835.31%20235.692%20985.3%20567H0v954h1011.55z%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22prefix__clip0_75_23031%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M0%200h1920v954H0z%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");
  opacity: 1;
  transform: scale(-1, -1);
  background-size: cover;
  background-position: center top;
}

section.mbws-bg-mask-2 .section-bg {
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%221920%22%20height%3D%22954%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url%28%23prefix__clip0_58_745%29%22%20fill%3D%22rgba%2815%2C35%2C133%2C1%29%22%3E%3Cpath%20d%3D%22M250.018-408.977c69.019-18.494%20142.66%201.238%20193.185%2051.763L718.31-82.107c50.525%2050.525%2070.258%20124.167%2051.764%20193.185L669.378%20486.881c-18.493%2069.019-72.403%20122.928-141.421%20141.422L152.154%20728.999c-69.019%2018.493-142.66-1.239-193.186-51.764l-275.106-275.107c-50.525-50.525-70.258-124.167-51.764-193.185l100.696-375.803c18.493-69.018%2072.403-122.928%20141.421-141.421l375.803-100.696zM1646.73%201264.15c33.13%208.88%2068.48-.59%2092.73-24.84l147.89-147.89a96.031%2096.031%200%200024.85-92.732l-54.13-202.022a96.012%2096.012%200%2000-67.89-67.882l-202.02-54.132c-33.13-8.877-68.47.595-92.73%2024.847l-147.89%20147.89a95.994%2095.994%200%2000-24.84%2092.729l54.13%20202.022a95.967%2095.967%200%200067.88%2067.88l202.02%2054.13zM1572.48%20252.659a23.996%2023.996%200%200023.18%206.211l50.5-13.533a23.97%2023.97%200%200016.97-16.97l13.54-50.506a24.004%2024.004%200%2000-6.21-23.182l-36.98-36.973a23.993%2023.993%200%2000-23.18-6.211l-50.5%2013.533a24%2024%200%2000-16.98%2016.97l-13.53%2050.506a24.004%2024.004%200%20006.21%2023.182l36.98%2036.973z%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22prefix__clip0_58_745%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M0%200h1920v954H0z%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");
  background-size: cover;
  background-position: center;
}

section.mbws-bg-mask-3 .section-bg-overlay {
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%221920%22%20height%3D%22954%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url%28%23prefix__clip0_75_23245%29%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M2351.91%20237.689l-852.66-492.288L1352.25%200H0v954h801.461l-.689%201.194%20852.668%20492.286%2010.79-18.7L841.885%20954h136.628l719.877%20415.62%2016.46-28.51L1044.35%20954h109.29l588.53%20339.79%2020.98-36.33L1237.53%20954h81.97l464.14%20267.97%2030.74-53.25L1442.47%20954h54.66l330.91%20191.06%2046.45-80.46L1682.93%20954h27.3l171.09%2098.78%2054.86-95.016-16.18-9.339v-7.881l19.59%2011.31%20412.32-714.165zM1920%20948.425l-836.49-482.948-54.86%2095.015L1710.23%20954H1920v-5.575zM1682.93%20954l-661.1-381.686-46.453%2080.454L1497.13%20954h185.8zm-240.46%200L961.712%20676.436l-30.743%2053.248L1319.5%20954h122.97zm-204.94%200L910.479%20765.174%20889.506%20801.5%201153.64%20954h83.89zm-193.18%200L862.184%20848.824l-16.46%2028.51L978.513%20954h65.837zm-202.465%200l-30.318-17.504L801.461%20954h40.424zM1920%20940.544l-833.08-480.978L1352.25%200H1920v940.544zm-307.55%20577.926l-852.666-492.28-6.215%2010.76%20852.671%20492.29%206.21-10.77zm-906.694-398.7l852.664%20492.28-2.6%204.51-852.663-492.29%202.599-4.5z%22%20fill%3D%22rgba%284%2C9%2C34%2C1%29%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22prefix__clip0_75_23245%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M0%200h1920v954H0z%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");
  opacity: 1;
  transform: scale(-1, 1);
  background-size: cover;
  background-position: center top;
}

section.mbws-bg-gradient .section-bg-overlay {
  background-image: linear-gradient(152deg, rgb(255, 233, 179) 0%, rgb(210, 195, 244) 70%);
}

.select-resize-ghost,
.select2-container .select2-choice,
.select2-container .select2-selection,
input[type=date],
input[type=email],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=url],
select,
textarea {
  box-shadow: none !important;
}

.row.align-center {
  margin: auto !important;
}

@media (max-width: 550px) {
  .mbws-counter-home-2 .mbws_counter {
    text-align: center;
  }
  .mbws-counter-home-2 .mbws_counter .counter-content {
    width: 100%;
  }
}

.mbws_counter .title {
  font-weight: normal;
  text-transform: uppercase;
}

.mbws_counter .counter-style-left {
  align-items: center;
}

.mbws_counter .counter-icon {
  margin-top: 15px;
}

.banner.is-full-height {
  height: 100% !important;
}

@media (max-width: 1440px) {
  .banner-layers .text {
    font-size: 1.2rem !important;
  }
}
@media (max-width: 1024px) {
  .banner-layers .text {
    font-size: 1rem !important;
  }
}
@media (max-width: 850px) {
  .banner-layers .text {
    font-size: 0.8rem !important;
  }
}

.form-dang-ky form {
  max-width: 50%;
  margin: auto;
}
@media (max-width: 850px) {
  .form-dang-ky form {
    max-width: 100%;
  }
  .form-dang-ky form .ml-half {
    margin-left: 0;
  }
}
.form-dang-ky form input {
  border: none;
  border-bottom: 1px solid black;
  background-color: transparent;
}
.form-dang-ky form input:focus {
  background-color: transparent;
  border-bottom-color: var(--fs-color-primary);
}

.wpcf7-spinner {
  display: none;
}

form.wpcf7-form {
  margin: auto;
}
form.wpcf7-form input[type=submit] {
  width: 100%;
  padding: 1.2rem;
  height: auto;
  line-height: 1;
}
form.wpcf7-form .form-control {
  box-shadow: 0 0 37px -4px rgba(0, 0, 0, 0.1) !important;
  border: none;
  padding: 1.2rem;
  font-size: 0.875rem;
  height: auto;
}
form.wpcf7-form input.bg-black {
  background-color: black;
}

.button,
button {
  font-weight: 400;
}

.nav-pagination > li > a,
.nav-pagination > li > span {
  border-radius: 0;
  border-width: 1px;
  font-weight: normal;
}

.mbws-mask-1 img {
  object-fit: cover;
  /* Đảm bảo ảnh không bị méo */
  mask-image: url("/wp-content/themes/matbaows/assets/img/mask-1.svg");
  /* Đường dẫn đến ảnh PNG làm mask */
  mask-size: cover;
  /* Đảm bảo ảnh mask phủ toàn bộ */
  mask-repeat: no-repeat;
  mask-position: center;
}

.mbws-mask-2 img {
  object-fit: cover;
  /* Đảm bảo ảnh không bị méo */
  mask-image: url("/wp-content/themes/matbaows/assets/img/mask-2.svg");
  /* Đường dẫn đến ảnh PNG làm mask */
  mask-size: contain;
  /* Đảm bảo ảnh mask phủ toàn bộ */
  mask-repeat: no-repeat;
  mask-position: center;
}

.mbws-mask-3 img {
  object-fit: cover;
  /* Đảm bảo ảnh không bị méo */
  mask-image: url("/wp-content/themes/matbaows/assets/img/mask-3.svg");
  /* Đường dẫn đến ảnh PNG làm mask */
  mask-size: contain;
  /* Đảm bảo ảnh mask phủ toàn bộ */
  mask-repeat: no-repeat;
  mask-position: center;
}

.row-bg-white {
  background-color: white;
}

.image-contact .img-inner {
  border-radius: 100% 100% 0 0;
}

i.wishlist-icon:before {
  content: "";
  mask-image: url(../img/icon-heart.svg);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  background-color: currentcolor;
  width: 28px;
  height: 28px;
  margin-top: -5px;
  display: inline-block;
  vertical-align: middle;
}

i.icon-quickview {
  margin-right: 0 !important;
  margin-left: 0 !important;
  top: 2px;
}
i.icon-quickview:before {
  content: "";
  mask-image: url(../img/icon-view.svg);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  background-color: currentcolor;
  width: 28px;
  height: 28px;
  margin-top: -5px;
  display: inline-block;
  vertical-align: middle;
}

i.icon-user:before {
  content: "";
  mask-image: url(../img/icon-user.svg);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  background-color: currentcolor;
  width: 28px;
  height: 28px;
  margin-top: -5px;
  display: inline-block;
  vertical-align: middle;
}

i.icon-shopping-basket:before {
  content: "";
  mask-image: url(../img/icon-cart.svg);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  background-color: currentcolor;
  width: 28px;
  height: 28px;
  margin-top: -5px;
  display: inline-block;
  vertical-align: middle;
}

@media (max-width: 767px) {
  .center-on-mobile .col-inner {
    text-align: center !important;
  }
}

.mbws-testimonial-left .testimonial-text::before {
  content: "“";
  font-family: Poppins, sans-serif;
  position: absolute;
  line-height: 1;
  font-weight: 400;
  font-style: normal;
  top: -25px;
  left: 0;
  font-size: 90px;
  color: var(--fs-color-primary);
}

/* 8159 */
.secondary.is-outline:hover {
  color: black;
}

.bg-contain > .bg-loaded {
  background-size: contain !important;
}

.box-shadow-5, .portfolio-box,
.box-shadow-5-hover:hover,
.row-box-shadow-5 .col-inner,
.row-box-shadow-5-hover .col-inner:hover {
  box-shadow: 0 0 37px -4px rgba(0, 0, 0, 0.1) !important;
}

.mbws-title-left .section-title {
  justify-content: start;
}
.mbws-title-left .section-title span {
  border: none;
  text-transform: none;
}
.mbws-title-left .section-title b {
  display: none;
}
.mbws-title-left .section-title b:first-of-type {
  display: flex;
  max-width: 50px;
  background-color: var(--fs-color-secondary);
  height: 5px;
  opacity: 1;
}

.mbws-title-right .section-title {
  justify-content: end;
}
.mbws-title-right .section-title span {
  border: none;
  text-transform: none;
}
.mbws-title-right .section-title b {
  display: none;
}
.mbws-title-right .section-title b:last-of-type {
  display: flex;
  max-width: 50px;
  background-color: var(--fs-color-secondary);
  height: 5px;
  opacity: 1;
}

.mbws-btn-dark {
  border-width: 4px !important;
  transition: none !important;
}
.mbws-btn-dark span,
.mbws-btn-dark i {
  color: #212529;
  transition: 0.2s all ease-in-out !important;
}
.mbws-btn-dark:hover i {
  margin-left: 10px !important;
}

.mbws-btn-light {
  border-width: 4px !important;
  transition: none !important;
}
.mbws-btn-light span,
.mbws-btn-light i {
  color: white;
  transition: 0.2s all ease-in-out !important;
}
.mbws-btn-light:hover span {
  color: #212529;
}
.mbws-btn-light:hover i {
  margin-left: 10px !important;
  color: #212529;
}

.accordion .accordion-item {
  border: 2px solid #F7F7F7;
  margin-bottom: 5px;
}
.accordion .accordion-title {
  border-top: none;
  color: white;
  background-color: #919191;
}
.accordion .accordion-title.active {
  background-color: var(--fs-color-primary);
}

.mbws-process-wrap::before {
  content: "";
  position: absolute;
  left: -25%;
  width: 150%;
  border-top: 2px solid #EDEDED;
  top: 77px;
}

.mbws-process-step h5.uppercase {
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  border-radius: 50%;
  align-items: center;
  width: 110px;
  height: 110px;
  background: #fff;
  border: 2px solid #e2e5e8;
  z-index: 1;
  box-shadow: 0 0 0 15px #fff;
  font-size: 2.3em;
  color: #0053ce;
  margin: auto;
  margin-bottom: 20px;
}

.mbws-img-card-left {
  transform: translate3d(-20px, -20px, 0);
}

.mbws-img-card-right {
  transform: translate3d(50px, -20px, 0);
}

.filter-nav > li > a {
  border-radius: 0;
  padding: 1rem 1.5rem;
  line-height: 1;
  border: 1px solid #dee2e6;
  background-color: white;
  margin-bottom: 5px;
}
.portfolio-box {
  padding: 30px 30px 0 30px;
  background-color: white;
}

.featured-title .page-title-inner {
  padding-bottom: 50px;
  padding-top: 50px;
}

.mbws_skillbar {
  margin-bottom: 30px;
}
.mbws_skillbar .skill {
  border-radius: 99px;
  overflow: hidden;
}
.mbws_skillbar .skill-bar {
  color: black !important;
}

.mbws-list-checkmark ul {
  margin-bottom: 0;
}
.mbws-list-checkmark ul li {
  border: none;
}
.mbws-list-checkmark ul li p:last-of-type {
  margin-bottom: 0;
}

.stars a {
  font-family: fl-icons !important;
}

#header:not(.has-transparent) {
  background-color: #fdf7f2;
}

#header.header-full-width .container {
  padding-left: 50px;
  padding-right: 50px;
}
@media (max-width: 1248px) {
  #header.header-full-width .container {
    padding-left: 15px;
    padding-right: 15px;
  }
}
#header li.header-block {
  width: auto;
}

#top-bar {
  border-bottom: 1px solid #f5f5f5;
}
#top-bar .cart-item .nav-dropdown-default {
  padding: 20px;
}

#masthead .header-nav-main {
  justify-content: center !important;
}
@media (max-width: 1024px) {
  #masthead .header-nav-main.nav-left {
    display: none;
  }
}

.nav-dropdown > li.nav-dropdown-col {
  width: auto;
  display: block;
  position: relative;
}
.nav-dropdown > li.nav-dropdown-col:hover ul.sub-menu.nav-column {
  display: block;
}
.nav-dropdown > li.nav-dropdown-col ul.sub-menu.nav-column {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.15);
}
.nav-dropdown > li > a {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 10px !important;
}
.nav-dropdown .menu-item-has-children > a,
.nav-dropdown .nav-dropdown .nav-dropdown-col > a {
  font-size: 1em;
  font-weight: normal;
  text-transform: unset;
}
.nav-dropdown > li.image-column:not(:last-child),
.nav-dropdown .nav-dropdown > li.nav-dropdown-col:not(:last-child) {
  border-right: none;
}

.nav-dropdown-default {
  padding: 0;
  background-color: white;
}
.nav-dropdown-default .nav-column li > a,
.nav-dropdown-default .nav-dropdown.nav-dropdown-default > li > a {
  text-wrap: nowrap;
  background-color: white;
  margin-left: 0;
  margin-right: 0;
  padding: 10px 20px;
  border-bottom-color: rgba(0, 0, 0, 0.13);
  color: black;
}

.nav-dark .nav > li > a {
  color: white;
}

html {
  background-color: white;
}

.icon-box .has-icon-bg .icon img {
  width: 100%;
  margin: auto;
}

.cart-container {
  max-width: 1100px !important;
  padding-left: 15px;
  padding-right: 15px;
}

.page-title h1.entry-title {
  text-shadow: none;
  font-size: 40px;
}

.mbws-tab-product > h4 {
  margin-bottom: -45px;
  height: 45px;
  align-items: center;
  display: flex;
  border-bottom: 2px solid #f5f5f5;
  text-transform: unset;
  letter-spacing: 0;
}
.mbws-tab-product > ul.nav {
  justify-content: center;
  height: 45px;
}
.mbws-tab-product > ul.nav > li {
  margin-right: 15px;
}
.mbws-tab-product > ul.nav > li > a {
  padding: 9px 0;
}
.mbws-tab-product > ul.nav > li > a::before {
  height: 2px !important;
}

.mbws-top-brand {
  flex-wrap: wrap;
}

.mbws-home-product-tag > .col {
  padding-left: 0;
  padding-right: 0;
}
.mbws-home-product-tag span.widget-title {
  display: none;
}
.mbws-home-product-tag .is-divider {
  display: none;
}

.pho-bien-nhat .is-border {
  border-color: #b8a9d8;
  border-width: 2px !important;
}
.pho-bien-nhat .button {
  background-color: #7055a9;
}
.pho-bien-nhat .mbws-label-popular {
  color: #7055a9;
  background-color: #f4f2f9;
}

#product-sidebar .next-prev-thumbs {
  margin-top: 15px;
}

.mbws-lastest-news .is-divider {
  display: none;
}
.mbws-lastest-news .post-item > .col-inner {
  border: 1px solid #f5f5f5;
  overflow: hidden;
}
.mbws-lastest-news .post-item > .col-inner:hover {
  box-shadow: 0 3px 30px rgba(0, 0, 0, 0.11);
}
.mbws-lastest-news .post-item > .col-inner .box-text {
  padding: 15px 20px !important;
}
.mbws-lastest-news .post-item > .col-inner .post-title > a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 2.4em;
  line-height: 1.2em;
  min-height: 2.4em;
  margin-bottom: 0.7em;
}

.service-sidebar ul.mbws-menu {
  list-style: none;
}
.service-sidebar ul.mbws-menu li {
  margin-left: 0;
  background-color: var(--fs-color-primary);
  margin-bottom: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.service-sidebar ul.mbws-menu li.current-menu-item {
  background-color: #444;
}
.service-sidebar ul.mbws-menu li a {
  color: white;
  padding: 10px 30px;
  display: block;
}

.post-sidebar .is-divider {
  display: none;
}
.post-sidebar .widget_categories ul > li > a::before {
  content: "\f105";
  display: inline-block;
  font-family: fl-icons !important;
  margin-right: 5px;
  color: var(--fs-color-primary);
}
.post-sidebar .widget-title {
  display: inline-block;
  margin-bottom: 20px;
}
.post-sidebar .widget-title::before {
  content: " ";
  width: 10px;
  height: 10px;
  background-color: var(--fs-color-primary);
  display: inline-block;
  margin-right: 10px;
}
.post-sidebar .post-item > .col-inner .box-text {
  padding: 10px;
}
.post-sidebar .post-item > .col-inner .post-title > a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 2.4em;
  line-height: 1.2em;
  min-height: 2.4em;
  margin-bottom: 5px;
}
.post-sidebar .post-item > .col-inner .is-divider {
  display: none;
}
.post-sidebar .post-item > .col-inner .image-cover {
  border-radius: 5px;
}

.widget .is-divider {
  height: 1px;
  max-width: 100%;
}

.blog .blog-archive {
  padding-top: 30px;
}

.blog-archive {
  padding-top: 0;
}
.blog-archive .post-item > .col-inner .box-text {
  padding: 10px;
}
.blog-archive .post-item > .col-inner .post-title > a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 2.4em;
  line-height: 1.2em;
  min-height: 2.4em;
  margin-bottom: 5px;
}
.blog-archive .post-item > .col-inner .is-divider {
  display: none;
}
.blog-archive .post-item > .col-inner .image-cover {
  border-radius: 5px;
}
.blog-archive .entry-image {
  border-radius: 10px;
  overflow: hidden;
}

.archive-page-header h1.page-title {
  margin-top: 30px;
}

.mbws-related-posts-title {
  margin-top: 30px;
}

.mbws-related-posts .is-divider {
  display: none;
}
.mbws-related-posts .post-item > .col-inner .post-title > a {
  display: -webkit-box; /* Sử dụng Flexbox cho layout */
  -webkit-line-clamp: 2; /* Hiển thị tối đa 2 dòng */
  -webkit-box-orient: vertical; /* Xếp các dòng theo chiều dọc */
  overflow: hidden; /* Ẩn nội dung vượt quá */
  text-overflow: ellipsis; /* Thêm dấu ba chấm */
  max-height: 2.4em; /* Điều chỉnh chiều cao dựa trên số dòng và line-height */
  line-height: 1.2em; /* Khoảng cách dòng */
  min-height: 2.4em;
  margin-bottom: 5px;
}
.mbws-related-posts .post-item > .col-inner .image-cover {
  border-radius: 5px;
}

.single-post .blog-share {
  text-align: left;
  border-top: 1px solid #f5f5f5;
  border-bottom: 1px solid #f5f5f5;
}
.single-post .blog-share .is-divider {
  display: none;
}
.single-post footer.entry-meta {
  border-bottom: none;
  padding-top: 1em;
  padding-bottom: 1em;
}
.single-post .share-icons > a.button {
  margin-top: 1em;
}
.single-post .page-title-bg .title-overlay {
  background-image: linear-gradient(152deg, rgb(255, 233, 179) 0%, rgb(210, 195, 244) 70%);
}

.archive .shop-page-title.page-title {
  min-height: unset !important;
  height: unset !important;
}

.product-info {
  padding-top: unset !important;
}
@media (max-width: 850px) {
  .product-info {
    padding-top: 30px !important;
  }
  .product-info .product-title {
    font-size: 28px !important;
  }
}
.product-info .reset_variations,
.product-info .woocommerce-variation-price {
  display: none !important;
}
.product-info .ux-swatches--large .ux-swatch--label {
  min-height: 43px;
}
.product-info .single_add_to_cart_button.button {
  width: calc(100% - 105px);
  background: transparent !important;
  color: var(--fs-color-primary) !important;
  border: 1px solid var(--fs-color-primary);
}
.product-info .ux-buy-now-button {
  width: 100%;
}
.product-info .product_meta {
  font-size: 1rem;
  text-transform: unset;
}
.product-info .product_meta > span {
  border: none;
}

.product-footer .woocommerce-tabs {
  border-top: none !important;
}
.product-footer .woocommerce-tabs .nav {
  border-bottom: 1px solid #ddd;
}
@media (max-width: 850px) {
  .product-footer .woocommerce-tabs .nav {
    flex-wrap: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    justify-content: flex-start;
  }
  .product-footer .woocommerce-tabs .nav > li > a {
    white-space: nowrap;
  }
}
.product-footer .woocommerce-tabs .nav > li > a {
  font-size: 1rem;
  padding-left: 15px;
  padding-right: 15px;
}
.product-footer .woocommerce-tabs .nav > li > a::before {
  top: auto;
  bottom: 0;
}
.product-footer .woocommerce-tabs .nav > li.active > a {
  color: var(--fs-color-primary);
}
/* Ẩn bullet dot mặc định trong phần Điểm nổi bật sản phẩm */
.dsg-product-highlights ul {
  list-style: none !important;
}
.dsg-product-highlights ul li {
  list-style: none !important;
}

@media (max-width: 850px) {
  #review_form .review-form-inner {
    padding: 15px;
  }
}

#footer {
  border-top: 1px solid rgba(209, 209, 209, 0.8588235294);
  font-size: 14px;
  width: auto;
}
#footer h2, #footer h3, #footer h4, #footer h5 {
  font-weight: bold;
}
#footer ul {
  list-style: none;
}
#footer ul li {
  margin-left: 0;
}
#footer ul.mbws-menu li {
  margin-bottom: 1em;
}
#footer ul.mbws-menu li > a::before {
  content: "\f105";
  display: inline-block;
  font-family: fl-icons !important;
  margin-right: 5px;
  color: var(--fs-color-primary);
}

.absolute-footer {
  display: none;
}

a.back-to-top {
  border-radius: 0;
  border: none !important;
  background-color: var(--fs-color-primary) !important;
  color: white;
}

.social-icons > a {
  border-radius: 0 !important;
}
.social-icons > a i {
  margin-top: 2px !important;
}

.footer-bottom {
  border-top: 1px solid rgba(209, 209, 209, 0.8588235294);
}

/* Custom styles for Kodak Alaris page CTA section */
.dsg-consult-gradient .section-bg {
  background: linear-gradient(135deg, #ffe8db 0%, #ffd6d6 100%) !important;
}
.dsg-consult-btn-red {
  background-color: #c52720 !important;
  color: #ffffff !important;
  border-color: #c52720 !important;
  box-shadow: 0 4px 12px rgba(197, 39, 32, 0.2) !important;
}
.dsg-consult-btn-red:hover {
  background-color: #a01d18 !important;
  border-color: #a01d18 !important;
  box-shadow: 0 6px 18px rgba(160, 29, 24, 0.35) !important;
  transform: translateY(-1px);
}
.dsg-consult-btn-outline {
  border-color: #c52720 !important;
  color: #c52720 !important;
}
.dsg-consult-btn-outline:hover {
  background-color: #c52720 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(197, 39, 32, 0.2) !important;
  transform: translateY(-1px);
}

/* Custom benefit grid styles for Giai phap phan mem page */
.dsg-benefit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin-top: 25px;
  width: 100%;
}
@media (max-width: 767px) {
  .dsg-benefit-grid {
    grid-template-columns: 1fr;
  }
}
.dsg-benefit-card {
  background: #ffffff !important;
  border: 1px solid #eaeaea !important;
  border-radius: 12px !important;
  padding: 20px 15px !important;
  text-align: center !important;
  align-items: center !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  box-sizing: border-box !important;
}
.dsg-benefit-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 20px rgba(197, 39, 32, 0.08) !important;
  border-color: #c52720 !important;
}
.dsg-benefit-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background-color: #fff5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px auto !important;
  transition: all 0.3s ease;
}
.dsg-benefit-icon-box svg {
  width: 22px;
  height: 22px;
  stroke: #c52720;
  transition: all 0.3s ease;
}
.dsg-benefit-card:hover .dsg-benefit-icon-box {
  background-color: #c52720;
}
.dsg-benefit-card:hover .dsg-benefit-icon-box svg {
  stroke: #ffffff;
}
.dsg-benefit-title {
  font-size: 0.95rem;
  font-weight: 400;
  color: #111111;
  margin: 0 0 8px 0 !important;
  font-family: sans-serif;
  line-height: 1.4;
}
.dsg-benefit-desc {
  font-size: 0.8rem;
  color: #666666;
  margin: 0 !important;
  font-family: sans-serif;
  line-height: 1.5;
}

/* DSG Trusted Logos Style */
.dsg-trusted-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 25px 45px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
.dsg-trusted-logos img.dsg-trusted-logo-img {
  max-width: 140px !important;
  max-height: 42px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  filter: grayscale(100%) opacity(0.65);
  transition: all 0.3s ease;
}
.dsg-trusted-logos img.dsg-trusted-logo-img:hover {
  filter: grayscale(0%) opacity(1);
}


/* ==========================================================================
   DSG Custom Headings, Buttons & Tags Typography Weights (Perfect Balance)
   ========================================================================== */

/* Force all buttons on the site to be bold and sharp */
.button, button, input[type="submit"], input[type="button"], .btn {
  font-weight: 700 !important;
}

/* Force all red uppercase section tags (e.g. "Về Chúng Tôi") to be bold */


/* Unified Font Weights for Headings (Semi-bold 600 for clean look) */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, 
.dsg-hero-h1, .dsg-main-h2, .dsg-service-title, .dsg-eco-title, 
.dsg-why-title, .dsg-process-title, .dsg-flow-title, .dsg-app-title {
  font-weight: 600 !important;
}

/* DSG Hero H1 specific sizes */
.dsg-hero-h1 {
  font-size: 2.7rem !important;
  text-transform: uppercase;
  margin-bottom: 15px;
  letter-spacing: 1px;
  line-height: 1.2;
  color: #fff;
}
@media (max-width: 849px) {
  .dsg-hero-h1 {
    font-size: 2.1rem !important;
    line-height: 1.25 !important;
  }
}
@media (max-width: 549px) {
  .dsg-hero-h1 {
    font-size: 1.8rem !important;
    letter-spacing: 0.5px;
    line-height: 1.3 !important;
  }
}

/* Main H2 Headings sizes */
.dsg-main-h2 {
  font-size: 2.2em !important;
  line-height: 1.35 !important;
  color: #111 !important;
  font-family: sans-serif !important;
}

/* Mobile Responsive Unified Typography System (under 767px) */
@media (max-width: 767px) {
  h2, .h2, .dsg-main-h2 {
    font-size: 1.55rem !important;
    line-height: 1.35 !important;
  }
  h3, .h3, .dsg-eco-title {
    font-size: 1.15rem !important;
    line-height: 1.4 !important;
  }
  h4, .h4, .dsg-service-title, .dsg-why-title, .dsg-process-title, .dsg-flow-title {
    font-size: 1.02rem !important;
    line-height: 1.4 !important;
  }
  p, .text p, .banner-layers p {
    font-size: 0.92rem !important;
    line-height: 1.55 !important;
  }
}

/* Specific heading sizes */
.dsg-why-title {
  font-size: 0.95rem;
  color: #111111;
  margin-bottom: 8px;
  text-transform: none;
  line-height: 1.4;
}
.dsg-service-title {
  font-size: 1.05rem;
  color: #111111;
  margin: 0 0 8px 0 !important;
  font-family: sans-serif;
  line-height: 1.4;
}
.dsg-eco-title {
  font-size: 1.15rem;
  color: #111111;
  margin: 0 0 10px 0 !important;
  font-family: sans-serif;
}
.dsg-process-title {
  font-size: 0.95rem;
  color: #111111;
  margin: 0 0 8px 0 !important;
  font-family: sans-serif;
  line-height: 1.4;
}
.dsg-flow-title {
  font-size: 0.95rem;
  color: #111111;
  margin: 0 0 8px 0 !important;
  font-family: inherit !important;
  line-height: 1.4;
}

/* Rest of custom styles */
.dsg-why-col {
  transition: all 0.3s ease;
}
.dsg-why-col:hover {
  transform: translateY(-5px);
}
.dsg-why-icon-box {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #fff5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}
.dsg-why-col:hover .dsg-why-icon-box {
  background-color: #c52720;
}
.dsg-why-desc {
  font-size: 0.82rem;
  color: #555555;
  line-height: 1.6;
  margin: 0;
}
@media (min-width: 768px) {
  .dsg-why-col {
    border-right: 1px solid #eaeaea;
    padding-right: 25px;
  }
  .dsg-why-col:last-child {
    border-right: none;
    padding-right: 0;
  }
}
.dsg-service-card {
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 12px;
  padding: 40px 20px 35px 20px;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}
.dsg-service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
  border-color: #c52720;
}
.dsg-service-card-popular {
  border: 2px solid #c52720;
}
.dsg-service-badge {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: #c52720;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 15px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.dsg-service-list {
  list-style: none;
  padding: 0;
  margin: 25px 0 30px 0;
  text-align: left;
}
.dsg-service-list li {
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 12px;
  padding-left: 20px;
  position: relative;
}
.dsg-service-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #c52720;
  font-weight: bold;
}
.skill {
  height: 14px !important;
  border-radius: 7px !important;
  overflow: hidden !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
}
.skill-bar {
  height: 100% !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  background-color: #c52720 !important;
  border-radius: 7px !important;
}
.dsg-flow-timeline {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  margin-top: 50px;
  padding: 0 40px;
  box-sizing: border-box;
}
.dsg-flow-line {
  position: absolute;
  top: 35px;
  left: 8%;
  right: 8%;
  height: 2px;
  background-color: #eaeaea;
  z-index: 1;
}
.dsg-flow-step {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 10px;
}
.dsg-flow-icon-wrapper {
  position: relative;
  margin-bottom: 20px;
}
.dsg-flow-number {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #c52720;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  border: 2px solid #ffffff;
}
.dsg-flow-icon-box {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #fff5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #ffffff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.03);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.dsg-flow-step:hover .dsg-flow-icon-box {
  background-color: #c52720;
  transform: scale(1.1);
  box-shadow: 0 8px 20px rgba(197, 39, 32, 0.25);
}
.dsg-flow-step:hover .dsg-flow-icon-box svg {
  fill: #ffffff !important;
}
.dsg-flow-desc {
  font-size: 0.8rem;
  color: #666666;
  margin: 0 !important;
  font-family: inherit !important;
  line-height: 1.5;
  max-width: 160px;
}
@media (max-width: 991px) {
  .dsg-flow-timeline {
    flex-direction: column;
    align-items: flex-start;
    gap: 35px;
    padding: 0 20px;
  }
  .dsg-flow-step {
    flex-direction: row;
    text-align: left;
    align-items: flex-start !important;
    gap: 20px;
    width: 100%;
    padding: 0;
  }
  .dsg-flow-icon-wrapper {
    margin-bottom: 0;
    flex-shrink: 0;
    margin-top: 5px;
  }
  .dsg-flow-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    flex-grow: 1;
  }
  .dsg-flow-content h3 {
    margin: 0 0 6px 0 !important;
    font-size: 1.05rem !important;
    line-height: 1.3 !important;
  }
  .dsg-flow-desc {
    max-width: none !important;
    text-align: left !important;
  }
  .dsg-flow-line {
    display: none;
  }
}
.dsg-partner-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
  margin-top: 35px;
  width: 100%;
}
.dsg-badge-item {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}
.dsg-badge-icon-box {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background-color: #fff5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(197, 39, 32, 0.05);
}
.dsg-badge-icon-box svg {
  width: 22px;
  height: 22px;
  stroke: #c52720;
}
.dsg-badge-title {
  font-weight: 600;
  font-size: 0.85rem;
  color: #111111;
  margin: 0 !important;
  line-height: 1.3;
}
.dsg-badge-subtitle {
  font-size: 0.72rem;
  color: #666666;
  margin: 0 !important;
  line-height: 1.3;
  margin-top: 2px !important;
}
@media (max-width: 767px) {
  .dsg-partner-badges {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    max-width: 290px !important;
    margin: 25px auto 0 auto !important;
    gap: 20px !important;
    width: 100% !important;
  }
  .dsg-badge-item {
    width: 100% !important;
    justify-content: flex-start !important;
  }
}
.dsg-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 30px;
  margin-top: 20px;
  width: 100%;
}
.dsg-service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 10px;
}
.dsg-service-icon-box {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #fff5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 4px 12px rgba(197, 39, 32, 0.04);
}
.dsg-service-icon-box svg {
  width: 26px;
  height: 26px;
  stroke: #c52720;
  transition: all 0.3s ease;
}
.dsg-service-item:hover .dsg-service-icon-box {
  background-color: #c52720;
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(197, 39, 32, 0.25);
}
.dsg-service-item:hover .dsg-service-icon-box svg {
  stroke: #ffffff;
}
.dsg-service-desc {
  font-size: 0.85rem;
  color: #666666;
  margin: 0 !important;
  font-family: sans-serif;
  line-height: 1.5;
  max-width: 250px;
}
@media (max-width: 991px) {
  .dsg-services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 20px;
  }
}
@media (max-width: 767px) {
  .dsg-services-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
}
.dsg-app-grid {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 30px 20px;
  width: 100%;
  margin-top: 20px;
}
.dsg-app-item {
  flex: 1 1 140px;
  max-width: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 10px;
}
.dsg-app-icon-box {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background-color: #fff5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 4px 10px rgba(197, 39, 32, 0.03);
}
.dsg-app-icon-box svg {
  width: 26px;
  height: 26px;
  stroke: #c52720;
  transition: all 0.3s ease;
}
.dsg-app-item:hover .dsg-app-icon-box {
  background-color: #c52720;
  transform: translateY(-4px);
  box-shadow: 0 8px 18px rgba(197, 39, 32, 0.2);
}
.dsg-app-item:hover .dsg-app-icon-box svg {
  stroke: #ffffff;
}
.dsg-app-title {
  font-size: 0.95rem;
  color: #111111;
  margin: 0 !important;
  font-family: sans-serif;
  line-height: 1.4;
}
.dsg-process-timeline {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  margin-top: 40px;
}
.dsg-process-line {
  position: absolute;
  top: 20px;
  left: 8%;
  right: 8%;
  height: 2px;
  background-color: #eaeaea;
  z-index: 1;
}
.dsg-process-step {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 10px;
}
.dsg-process-number {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: #c52720;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 20px;
  border: 4px solid #ffffff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}
.dsg-process-step:hover .dsg-process-number {
  transform: scale(1.15);
  background-color: #111111;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.dsg-process-desc {
  font-size: 0.8rem;
  color: #666666;
  margin: 0 !important;
  font-family: sans-serif;
  line-height: 1.5;
  max-width: 150px;
}
@media (max-width: 991px) {
  .dsg-process-timeline {
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    padding-left: 20px;
  }
  .dsg-process-line {
    display: none !important;
  }
  .dsg-process-step {
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    padding: 0;
  }
  .dsg-process-number {
    margin-bottom: 0;
    min-width: 42px;
  }
  .dsg-process-desc {
    max-width: 100%;
  }
}
.dsg-why-container {
  display: flex;
  align-items: flex-start;
  font-family: sans-serif;
}
.dsg-why-icon-box {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background-color: #fff5f5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 4px 18px 0 0 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 3px 8px rgba(197, 39, 32, 0.04) !important;
  flex-shrink: 0 !important;
}
.dsg-why-icon-box svg,
.dsg-why-icon-box img {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain !important;
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: all 0.3s ease !important;
}
.dsg-why-container:hover .dsg-why-icon-box {
  background-color: #c52720 !important;
}
.dsg-why-container:hover .dsg-why-icon-box svg,
.dsg-why-container:hover .dsg-why-icon-box img {
  stroke: #ffffff !important;
  filter: brightness(0) invert(1) !important;
}
.dsg-why-desc {
  font-size: 0.8rem;
  color: #666666;
  margin: 0 !important;
  line-height: 1.5;
}
@media (max-width: 767px) {
  .dsg-why-container {
    margin-bottom: 25px;
  }
}
.dsg-eco-card {
  background: #ffffff;
  border: 1px solid #eaeaea;
  border-radius: 12px;
  padding: 30px 25px;
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}
.dsg-eco-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.06);
}
.dsg-eco-desc {
  font-size: 0.85rem;
  color: #666666;
  margin: 0 0 20px 0 !important;
  line-height: 1.5;
  font-family: sans-serif;
}
.dsg-eco-list {
  list-style: none;
  padding: 0;
  margin: 20px 0 25px 0;
}
.dsg-eco-list li {
  font-size: 0.88rem;
  color: #444444;
  margin-bottom: 10px;
  position: relative;
  padding-left: 20px;
  font-family: sans-serif;
}
.dsg-eco-list li::before {
  content: "✓";
  color: #c52720;
  font-weight: bold;
  position: absolute;
  left: 0;
}
.dsg-eco-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: #c52720 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s;
  font-family: sans-serif;
}
.dsg-eco-link:hover {
  color: #111111 !important;
  transform: translateX(3px);
}


/* DSG Consult White Button Hover Effect */
.dsg-consult-btn-white {
  transition: all 0.3s ease !important;
}
.dsg-consult-btn-white:hover {
  background-color: #f3f3f3 !important;
  color: #c52720 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}



.dsg-consult-banner .banner-bg {
  height: 100% !important;
  background-size: cover !important;
  background-position: 50% 50% !important;
}
.dsg-consult-banner .banner-layers {
  height: 100% !important;
}
.dsg-consult-banner .text-box {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}


/* DSG Consult Banner Responsive Height & Full Background Fill */

.dsg-consult-banner .banner-bg {
  height: 100% !important;
  background-size: cover !important;
  background-position: 50% 50% !important;
}
.dsg-consult-banner .banner-layers {
  height: 100% !important;
}
.dsg-consult-banner .text-box {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}


/* DSG Full Width Section Alignments */


/* DSG Full Width Section Container override */


/* DSG Consult Banner Responsive Height & Full Background Fill */

.dsg-consult-banner .banner-bg {
  height: 100% !important;
  background-size: cover !important;
  background-position: 50% 50% !important;
}
.dsg-consult-banner .banner-layers {
  height: 100% !important;
}
.dsg-consult-banner .text-box {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

/* DSG Full Width Section Container override */





@media (max-width: 991px) {
  
}


/* DSG Full Width & Zero Gap consultation section overrides */






@media (max-width: 991px) {
  
}


/* DSG Full Width & Zero Gap consultation section overrides */
.dsg-full-width-section {
  padding: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}
.dsg-full-width-section .section-content {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
.dsg-full-width-section .row {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
}
.dsg-full-width-section .col {
  padding: 0 !important;
  margin: 0 !important;
}
.dsg-full-width-section .col > .col-inner {
  padding: 0 !important;
  margin: 0 !important;
}
.dsg-full-width-section .col:last-child > .col-inner {
  padding: 60px 50px 60px 50px !important;
  background-color: #180403 !important;
  height: 100% !important;
}
@media (max-width: 991px) {
  .dsg-full-width-section .col {
    max-width: 100% !important;
    flex-basis: 100% !important;
    width: 100% !important;
  }
  .dsg-full-width-section .col:last-child > .col-inner {
    padding: 40px 20px 40px 20px !important;
  }
}


/* DSG Consult Banner Responsive Height & Full Background Fill */
.dsg-full-width-section .col:first-child > .col-inner {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
.dsg-consult-banner {
  height: 100% !important;
  padding-top: 0 !important;
  min-height: 520px !important;
  flex-grow: 1 !important;
}
.dsg-consult-banner .banner-bg {
  height: 100% !important;
  background-size: cover !important;
  background-position: 50% 50% !important;
}
.dsg-consult-banner .banner-layers {
  height: 100% !important;
}
.dsg-consult-banner .text-box {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}


/* Unified Design System for Tag Labels */
.dsg-tag-label {
  font-weight: 600 !important;
  color: #c52720 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  font-size: 0.85rem !important;
  margin-bottom: 12px !important;
  display: inline-block !important;
  font-family: inherit !important;
  opacity: 1 !important;
}

@media (max-width: 767px) {
  .dsg-tag-label {
    font-size: 0.78rem !important;
    letter-spacing: 1px !important;
    margin-bottom: 8px !important;
  }
}


/* DSG Global Icon Size Control for UX/UI Consistency */

/* 1. Homepage Service Columns (Vertical centered layout, 36px icon size) */
.dsg-about-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  transition: all 0.3s ease !important;
}
.dsg-about-col:hover {
  transform: translateY(-6px) !important;
}
.dsg-about-col:hover a {
  color: #a01d18 !important;
}
.dsg-about-col .col-inner > div:first-child,
.dsg-about-col [class*="icon-box"] {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-bottom: 18px !important;
  height: 40px !important; /* Fixed height container to prevent layout shifts */
}
.dsg-about-col img {
  width: 36px !important;
  max-width: 36px !important;
  height: auto !important;
  margin: 0 auto !important;
  display: block !important;
  transition: transform 0.2s ease;
}

/* 2. Benefit Cards - Centered layout, 36px icon size, no hover zoom */
.dsg-benefit-card {
  text-align: center !important;
}
.dsg-benefit-card div:first-child,
.dsg-benefit-card [style*="margin-bottom: 15px"] {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-bottom: 15px !important;
}
.dsg-benefit-card img {
  width: 36px !important;
  max-width: 36px !important;
  height: auto !important;
  margin: 0 auto !important; /* Align center */
  display: block !important;
}

/* 3. Page 5600 KDPP Brand Badges (Horizontal aligned-middle layout, 32px icon size) */
.dsg-badge-item {
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
  text-align: left !important;
}
.dsg-badge-icon-box {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background-color: #fff5f5 !important;
  box-shadow: 0 2px 8px rgba(197, 39, 32, 0.05) !important;
}
.dsg-badge-icon-box img {
  width: 22px !important;
  max-width: 22px !important;
  height: auto !important;
  margin: 0 !important;
}

/* 4. Page 5600 KDPP Why Choose DSG Columns (Side-by-side list layout, 26px icon size) */
.dsg-why-col .col-inner {
  height: 100% !important;
}
.dsg-why-container {
  display: flex !important;
  align-items: flex-start !important; /* Align icon at the top of the header line */
  gap: 16px !important;
  text-align: left !important;
  height: 100% !important;
}
.dsg-why-container > div:last-child {
  flex-grow: 1 !important;
}
.dsg-why-container h4 {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

/* 5. Page 5600 KDPP Additional Services & Apps (Vertical centered layout, 32px icon size) */
.dsg-service-item,
.dsg-app-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}
.dsg-service-icon-box,
.dsg-app-icon-box {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background-color: #fff5f5 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 auto 15px auto !important;
  box-shadow: 0 4px 12px rgba(197, 39, 32, 0.04) !important;
  transition: all 0.3s ease !important;
}
.dsg-service-icon-box img,
.dsg-app-icon-box img {
  width: 22px !important;
  max-width: 22px !important;
  height: auto !important;
  margin: 0 auto !important;
}
.dsg-service-item:hover .dsg-service-icon-box,
.dsg-app-item:hover .dsg-app-icon-box {
  background-color: #c52720 !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 20px rgba(197, 39, 32, 0.25) !important;
}
.dsg-service-item:hover .dsg-service-icon-box img,
.dsg-app-item:hover .dsg-app-icon-box img {
  filter: brightness(0) invert(1) !important; /* Turns red SVG icons into white on hover */
}

/* Hover effects for premium feeling */
.dsg-about-col:hover img,
.dsg-why-container:hover img {
  transform: scale(1.1);
}


/* DSG Clean Bullet Checkmark List Styling */
.dsg-eco-list {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
.dsg-eco-list li {
  position: relative !important;
  padding-left: 20px !important;
  margin-bottom: 8px !important;
  font-size: 0.92rem !important;
  color: #444 !important;
}
.dsg-eco-list li:before {
  content: "✓" !important;
  position: absolute !important;
  left: 0 !important;
  color: #c52720 !important;
  font-weight: bold !important;
}


/* Infinite Logo Marquee Effect */
.dsg-marquee-wrapper {
  overflow: hidden !important;
  width: 100% !important;
  padding: 30px 0 !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}
.dsg-marquee-wrapper::before,
.dsg-marquee-wrapper::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  width: 150px !important;
  height: 100% !important;
  z-index: 2 !important;
  pointer-events: none !important;
}
.dsg-marquee-wrapper::before {
  left: 0 !important;
  background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%) !important;
}
.dsg-marquee-wrapper::after {
  right: 0 !important;
  background: linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%) !important;
}
.dsg-marquee-content {
  display: flex !important;
  gap: 60px !important;
  width: max-content !important;
  align-items: center !important;
  animation: dsgMarquee 35s linear infinite !important;
}
.dsg-marquee-content:hover {
  animation-play-state: paused !important;
}
.dsg-marquee-content img {
  height: 42px !important;
  width: auto !important;
  max-width: 160px !important;
  object-fit: contain !important;
  filter: none !important;
  opacity: 0.95 !important;
  transition: all 0.3s ease !important;
  display: block !important;
}
.dsg-marquee-content img:hover {
  opacity: 1 !important;
  transform: scale(1.05) !important;
}

@keyframes dsgMarquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@media (max-width: 767px) {
  .dsg-marquee-wrapper {
    padding: 20px 0 !important;
  }
  .dsg-marquee-wrapper::before,
  .dsg-marquee-wrapper::after {
    width: 50px !important;
  }
  .dsg-marquee-content {
    gap: 35px !important;
    animation-duration: 20s !important;
  }
  .dsg-marquee-content img {
    height: 32px !important;
    max-width: 110px !important;
  }
}


/* Page 5600 Brand Logos Row Styles */
.dsg-brand-logos-row {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 50px !important;
  margin: 30px 0 !important;
  width: 100% !important;
}
.dsg-brand-logo-col {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
.dsg-brand-logo-col img {
  height: 38px !important;
  width: auto !important;
  max-width: 150px !important;
  object-fit: contain !important;
  filter: none !important;
  opacity: 0.95 !important;
  transition: all 0.3s ease !important;
  display: block !important;
}
.dsg-brand-logo-col img:hover {
  opacity: 1 !important;
  transform: scale(1.05) !important;
}

/* Badge Icon Box Image normalization */
.dsg-badge-icon-box img {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain !important;
  display: block !important;
}

/* Steps columns responsive styling */
@media (max-width: 767px) {
  .dsg-brand-logos-row {
    gap: 25px 15px !important;
    margin: 20px 0 !important;
  }
  .dsg-brand-logo-col {
    width: 30% !important;
    flex-basis: 30% !important;
    justify-content: center !important;
  }
  .dsg-brand-logo-col img {
    height: 32px !important;
    max-width: 100% !important;
  }
  
  /* Steps style on mobile: horizontal layout (flex-row) */
  .dsg-step-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 15px !important;
    text-align: left !important;
    padding: 15px !important;
    background: #fcfcfc !important;
    border-radius: 8px !important;
    border: 1px solid #f2f2f2 !important;
    margin-bottom: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .dsg-step-num {
    margin: 0 !important;
    flex-shrink: 0 !important;
  }
  .dsg-step-item h4 {
    font-size: 0.92rem !important;
    margin-top: 5px !important;
    margin-bottom: 4px !important;
    line-height: 1.3 !important;
  }
  .dsg-step-item p {
    font-size: 0.78rem !important;
    margin-bottom: 0 !important;
    line-height: 1.4 !important;
  }
}


/* Process Timeline body wrapper */
.dsg-process-body {
  display: flex !important;
  flex-direction: column !important;
  align-items: inherit !important;
  text-align: inherit !important;
}
@media (max-width: 991px) {
  .dsg-process-body {
    margin-top: 6px !important;
  }
  .dsg-process-step h3 {
    font-size: 0.95rem !important;
    margin-bottom: 4px !important;
    line-height: 1.3 !important;
  }
  .dsg-process-desc {
    font-size: 0.8rem !important;
    line-height: 1.45 !important;
  }
}


/* Page 66 Solution Section responsive fixes */
@media (max-width: 991px) {
  section.dsg-bg-mask-orange {
    background: linear-gradient(135deg, #ffe8db 0%, #ffd6d6 100%) !important;
    padding: 60px 0 !important;
    height: auto !important;
  }
  section.dsg-bg-mask-orange .section-bg {
    display: none !important;
  }
  section.dsg-bg-mask-orange .section-bg-overlay {
    display: none !important;
  }
  section.dsg-bg-mask-orange .row > .col:first-child {
    display: none !important;
  }
  section.dsg-bg-mask-orange .row > .col:last-child {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
    padding: 0 30px !important;
  }
  section.dsg-bg-mask-orange h2 {
    font-size: 1.8rem !important;
    line-height: 1.35 !important;
    text-align: left !important;
    color: #111 !important;
  }
  section.dsg-bg-mask-orange p {
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
    text-align: left !important;
    color: #333 !important;
    margin-bottom: 25px !important;
  }
}


/* Service Cards gap on mobile/tablet */
@media (max-width: 991px) {
  .dsg-about-col {
    margin-bottom: 25px !important;
  }
  .dsg-about-col:last-child {
    margin-bottom: 0 !important;
  }
}


/* Service Cards Icon Box and High-End Hover Effects */
.dsg-about-icon-box {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background-color: #fff5f5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 15px auto !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 10px rgba(197, 39, 32, 0.05) !important;
}
.dsg-about-icon-box img {
  width: 28px !important;
  max-width: 28px !important;
  height: auto !important;
  transition: all 0.3s ease !important;
}
.dsg-about-col:hover .dsg-about-icon-box {
  background-color: #c52720 !important;
  box-shadow: 0 6px 15px rgba(197, 39, 32, 0.2) !important;
}
.dsg-about-col:hover .dsg-about-icon-box img {
  filter: brightness(0) invert(1) !important;
  transform: scale(1.1) !important;
}


/* Override mobile priority override for orange section tag label */
section.dsg-bg-mask-orange p.dsg-tag-label {
  color: #c52720 !important;
  margin-bottom: 10px !important;
  font-size: 0.85rem !important;
  letter-spacing: 1.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  display: inline-block !important;
}


/* Fix icon hover inverting/bleeding for why and flow columns */
.dsg-why-container:hover .dsg-why-icon-box img,
.dsg-flow-step:hover .dsg-flow-icon-box img {
  filter: brightness(0) invert(1) !important;
  transform: scale(1.05) !important;
}

.dsg-flow-icon-box img {
  width: 32px !important;
  max-width: 32px !important;
  height: auto !important;
  transition: all 0.3s ease !important;
}


/* Premium Solution Cards Styles */
.dsg-solution-card {
  background-color: rgba(197, 39, 32, 0.05) !important;
  border-radius: 8px !important;
  padding: 20px !important;
  margin-bottom: 15px !important;
  font-family: 'SVN-Gilroy', sans-serif !important;
  font-weight: 600 !important;
  color: #111 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 1.02rem !important;
  transition: all 0.3s ease !important;
  border: 1px solid rgba(197, 39, 32, 0.08) !important;
}
.dsg-solution-card:last-child {
  margin-bottom: 0 !important;
}
.dsg-solution-card:hover {
  background-color: #c52720 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 15px rgba(197, 39, 32, 0.15) !important;
  border-color: #c52720 !important;
}
.dsg-solution-card:hover .dsg-checkmark {
  color: #ffffff !important;
}
.dsg-checkmark {
  color: #c52720 !important;
  font-size: 1.25rem !important;
  font-weight: bold !important;
  transition: color 0.3s ease !important;
}

/* Custom style for software cards on page 5602 */
.dsg-software-card {
  background: #ffffff !important;
  padding: 45px 35px !important;
  border-radius: 8px !important;
  border: 1px solid #eaeaea !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100% !important;
  min-height: 520px !important;
  text-align: left !important;
  box-sizing: border-box !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
}
.dsg-software-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.06) !important;
  border-color: #c52720 !important;
}
.dsg-software-btn-wrapper {
  text-align: left !important;
  margin-top: 20px !important;
}
@media (max-width: 767px) {
  .dsg-software-card {
    padding: 30px 20px !important;
    min-height: auto !important;
  }
  .dsg-software-btn-wrapper {
    text-align: center !important;
    margin-top: 15px !important;
    width: 100% !important;
  }
  .dsg-software-btn-wrapper .button {
    font-size: 0.85rem !important;
    padding: 10px 18px !important;
    width: 100% !important;
    text-align: center !important;
    letter-spacing: 0px !important;
  }
}

/* Custom styling to force Lĩnh vực hoạt động service columns 100% width and optimize spacing on mobile view */
@media (max-width: 767px) {
  body .row.row-equal > .col.dsg-service-col,
  body.page-id-66 .row.small-columns-2 > .col,
  body.page-id-5352 .row.row-equal > .col.dsg-service-col {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  body .row.row-equal > .col.dsg-service-col .banner,
  body.page-id-5352 .row.row-equal > .col.dsg-service-col .banner {
    height: 220px !important;
  }

  /* 1. Optimize global sections padding */
  section.section,
  .section {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
  
  /* 2. Optimize global row column spacing when stacked */
  .row > .col,
  .row > [class*="col-"] {
    margin-bottom: 15px !important;
    padding-bottom: 0 !important;
  }
  
  /* 3. Scale down the height of spacing gaps on mobile */
  .gap {
    max-height: 25px !important;
  }
  
  /* 4. Improve global typography margins and readability sizes on mobile */
  h1 {
    font-size: 1.85rem !important;
    line-height: 1.25 !important;
    margin-bottom: 10px !important;
  }
  h2 {
    font-size: 1.55rem !important;
    line-height: 1.3 !important;
    margin-bottom: 10px !important;
  }
  h3 {
    font-size: 1.3rem !important;
    line-height: 1.35 !important;
    margin-bottom: 8px !important;
  }
  h4 {
    font-size: 1.15rem !important;
    margin-bottom: 6px !important;
  }
  p {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    margin-bottom: 10px !important;
  }

  /* 5. Specific overrides for Lĩnh vực hoạt động page spacing (IDs 66 & 5352) */
  body.page-id-66 section.section,
  body.page-id-5352 section.section {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  body.page-id-66 .row.small-columns-2 > .col,
  body.page-id-5352 .row.row-equal > .col.dsg-service-col {
    margin-bottom: 12px !important;
    padding-bottom: 0 !important;
  }
  body.page-id-66 .row[style*="large"] > .col,
  body.page-id-5352 .row[style*="large"] > .col {
    margin-bottom: 10px !important;
    padding: 0 15px !important;
  }
  body.page-id-66 .dsg-solution-cards,
  body.page-id-5352 .dsg-solution-cards {
    margin-top: 10px !important;
  }
  body.page-id-66 .dsg-solution-card,
  body.page-id-5352 .dsg-solution-card {
    margin-bottom: 8px !important;
    padding: 10px 15px !important;
    font-size: 0.95rem !important;
  }
  body.page-id-66 .dsg-about-col,
  body.page-id-5352 .dsg-about-col {
    margin-bottom: 12px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* 6. Optimize and align hero buttons to be identical on mobile view */
  .hero-buttons {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 15px !important;
  }
  .hero-buttons .button,
  .hero-buttons a.button {
    width: 100% !important;
    max-width: 240px !important;
    margin: 0 !important;
    text-align: center !important;
  }
}

/* 6 new sections custom styling for Số hóa tài liệu page */
.dsg-laptop-container {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}
.dsg-laptop-screen {
  background: #000;
  border-radius: 12px 12px 0 0;
  padding: 5% 4% 5% 4%;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.dsg-laptop-screen img {
  width: 100%;
  display: block;
  border-radius: 4px;
  aspect-ratio: 16/10;
  object-fit: cover;
}
.dsg-laptop-base {
  height: 12px;
  background: #e2e8f0;
  border-radius: 0 0 12px 12px;
  border-bottom: 4px solid #cbd5e1;
  position: relative;
}
.dsg-laptop-base::after {
  content: '';
  position: absolute;
  width: 20%;
  height: 4px;
  background: #94a3b8;
  top: 0;
  left: 40%;
  border-radius: 0 0 4px 4px;
}

.dsg-features-grid {
  margin-top: 20px;
}
.dsg-feature-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 30px 25px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.02);
  transition: all 0.3s ease;
  text-align: center;
  margin-bottom: 25px !important;
}

.dsg-feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(197, 39, 32, 0.08);
  border-color: #c52720;
}
.dsg-feature-icon {
  width: 48px;
  height: 48px;
  background: #fff5f5;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
}
.dsg-feature-icon svg {
  stroke: #c52720;
  width: 24px;
  height: 24px;
}
.dsg-feature-icon svg * {
  fill: none !important;
}
.dsg-feature-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #0f2957;
  margin-bottom: 10px;
  margin-top: 0;
  text-align: center;
}
.dsg-feature-desc {
  font-size: 0.95rem;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 0;
  text-align: center;
}


.dsg-timeline-section {
  background: #f8fafc !important;
  color: #0f2957 !important;
}
.dsg-timeline-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  position: relative;
  margin: 50px auto 0 auto !important;
  max-width: 1360px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}

.dsg-timeline-grid::before {
  content: '';
  position: absolute;
  top: 30px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: rgba(15,41,87,0.1) !important;
  z-index: 1;
}
.dsg-timeline-item {
  text-align: center;
  position: relative;
  z-index: 2;
}
.dsg-timeline-badge {
  width: 60px;
  height: 60px;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px auto;
  box-shadow: 0 4px 15px rgba(15,41,87,0.06);
  border: 2px solid #e2e8f0;
  transition: all 0.3s ease;
  position: relative;
}
.dsg-timeline-item:hover .dsg-timeline-badge {
  background: #c52720 !important;
  border-color: #c52720 !important;
  transform: scale(1.1);
  box-shadow: 0 8px 20px rgba(197,39,32,0.25);
}
.dsg-timeline-badge svg,
.dsg-timeline-badge svg * {
  stroke: #c52720 !important;
  width: 24px;
  height: 24px;
  fill: none !important;
}
.dsg-timeline-item:hover .dsg-timeline-badge svg,
.dsg-timeline-item:hover .dsg-timeline-badge svg * {
  stroke: #ffffff !important;
}

.dsg-timeline-number {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #c52720;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.dsg-timeline-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #111111 !important;
  margin-bottom: 10px;
  margin-top: 0;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dsg-timeline-desc {
  font-size: 0.85rem;
  color: #64748b !important;
  line-height: 1.5;
  margin-bottom: 0;
}


.dsg-benefits-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-top: 50px;
}
.dsg-benefits-col {
  width: 33%;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.dsg-benefit-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  text-align: left;
}
.dsg-benefits-col.text-right .dsg-benefit-item {
  text-align: right;
  flex-direction: row-reverse;
}
.dsg-benefit-icon {
  width: 48px;
  height: 48px;
  background: #fff5f5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}
.dsg-benefit-item:hover .dsg-benefit-icon {
  background: #c52720;
}
.dsg-benefit-icon svg {
  stroke: #c52720;
  width: 20px;
  height: 20px;
}
.dsg-benefit-icon svg * {
  fill: none !important;
}
.dsg-benefit-item:hover .dsg-benefit-icon svg {
  stroke: #ffffff;
}
.dsg-benefit-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0f2957;
  margin-bottom: 8px;
  margin-top: 0;
}
.dsg-benefit-desc {
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.5;
  margin-bottom: 0;
}
.dsg-circle-center {
  width: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.dsg-circle-outer {
  width: 220px;
  height: 220px;
  border: 2px dashed #fecaca;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  animation: dsg-spin 25s linear infinite;
}
.dsg-circle-inner {
  width: 140px;
  height: 140px;
  background: #fff5f5;
  border: 4px solid #fecaca;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  box-shadow: 0 8px 25px rgba(197, 39, 32, 0.1);
}
.dsg-circle-inner img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}
.dsg-circle-node {
  position: absolute;
  width: 36px;
  height: 36px;
  background: #ffffff;
  border: 2px solid #c52720;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dsg-circle-node svg {
  stroke: #c52720;
  width: 16px;
  height: 16px;
}
.dsg-circle-node svg * {
  fill: none !important;
}
.dsg-node-1 { top: -18px; left: 92px; }
.dsg-node-2 { bottom: 15px; left: -8px; }
.dsg-node-3 { bottom: 15px; right: -8px; }

/* Global Container definition for Desktop */
.dsg-container {
  width: 100%;
  max-width: 1080px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  box-sizing: border-box !important;
}


.dsg-sectors-grid {
  margin-top: 20px;
}
.dsg-sector-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.03);
  aspect-ratio: 4/3;
  cursor: pointer;
  margin-bottom: 30px !important;
}

.dsg-sector-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease;
}
.dsg-sector-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(15,15,18,0.85) 0%, rgba(15,15,18,0.2) 60%, rgba(15,15,18,0.05) 100%);
  transition: all 0.3s ease;
}
.dsg-sector-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px;
  z-index: 2;
  text-align: center;
}
.dsg-sector-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #ffffff !important;
  margin-bottom: 0;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
  margin-top: 0;
  text-align: center;
}


.dsg-sector-card:hover .dsg-sector-bg {
  transform: scale(1.1);
}
.dsg-sector-card:hover .dsg-sector-overlay {
  background: linear-gradient(to top, rgba(197,39,32,0.9) 0%, rgba(197,39,32,0.3) 60%, rgba(197,39,32,0.1) 100%) !important;
}


.dsg-stats-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
  margin-top: 40px;
}
.dsg-clients-box {
  width: 50%;
}
.dsg-clients-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 30px;
}
.dsg-client-logo {
  background: #ffffff;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.01);
}
.dsg-client-logo img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: all 0.3s ease;
}
.dsg-client-logo:hover img {
  filter: grayscale(0%);
  opacity: 1;
}
.dsg-stats-box {
  width: 50%;
}
.dsg-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.dsg-stat-card {
  background: #f8fafc;
  border-radius: 12px;
  padding: 30px 20px;
  text-align: center;
  border: 1px solid #e2e8f0;
}
.dsg-stat-number {
  font-size: 2.2rem;
  font-weight: 800;
  color: #c52720;
  margin-bottom: 5px;
  font-family: Inter, sans-serif;
  margin-top: 0;
}
.dsg-stat-label {
  font-size: 0.95rem;
  color: #475569;
  font-weight: 600;
  margin: 0;
}

@keyframes dsg-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (max-width: 991px) {
  .dsg-timeline-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }
  .dsg-timeline-grid::before {
    display: none;
  }
  .dsg-circle-center {
    display: none;
  }
  .dsg-benefits-col {
    width: 50%;
  }
  .dsg-sectors-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .dsg-stats-row {
    flex-direction: column;
    gap: 40px;
  }
  .dsg-clients-box,
  .dsg-stats-box {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .dsg-features-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .dsg-timeline-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .dsg-timeline-item {
    display: grid !important;
    grid-template-columns: 60px 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 5px 15px !important;
    text-align: left !important;
    align-items: center !important;
  }
  .dsg-timeline-badge {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    align-self: start !important;
  }
  .dsg-timeline-title {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: block !important;
    text-align: left !important;
    margin: 0 !important;
    height: auto !important;
    align-self: end !important;
    font-size: 1.1rem !important;
    color: #111111 !important;
  }

  .dsg-timeline-desc {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: block !important;
    text-align: left !important;
    margin: 0 !important;
    align-self: start !important;
    font-size: 0.9rem !important;
    color: #64748b !important;
  }

  .dsg-timeline-number {
    top: -12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .dsg-benefits-container {
    flex-direction: column;
    gap: 20px;
  }
  .dsg-benefits-col {
    width: 100%;
    gap: 20px;
  }
  .dsg-benefits-col.text-right .dsg-benefit-item {
    text-align: left;
    flex-direction: row;
  }
  .dsg-sectors-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Warranty Process Cards layout matching template 8117 pricing section */
.dsg-timeline-section .row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 20px !important;
}
.dsg-timeline-section .col {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 1 1 calc(25% - 15px) !important;
  max-width: calc(25% - 15px) !important;
}
.dsg-timeline-section .col-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  height: 100% !important;
  flex-grow: 1 !important;
}
@media (max-width: 991px) {
  .dsg-timeline-section .col {
    flex: 1 1 calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
  }
}
@media (max-width: 767px) {
  .dsg-timeline-section .col {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
}
.dsg-step-card {
  background: #ffffff !important;
  border-radius: 8px !important;
  padding: 30px 20px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.3s ease !important;
  flex: 1 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  border: 1px solid #e2e8f0 !important;
  position: relative !important;
  overflow: hidden !important;
  font-family: 'SVN-Gilroy', sans-serif !important;
}
.dsg-step-card * {
  font-family: 'SVN-Gilroy', sans-serif !important;
}
.dsg-step-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1) !important;
}
.dsg-step-card-featured {
  border: 2px solid #c52720 !important;
  padding-top: 45px !important; /* Extra padding for the badge */
}
.dsg-step-badge-featured {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: #c52720 !important;
  color: #ffffff !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  padding: 6px 10px !important;
  text-align: center !important;
  letter-spacing: 1px !important;
}
.dsg-step-header {
  text-align: center !important;
  margin-bottom: 20px !important;
}
.dsg-step-badge {
  display: inline-block !important;
  background: #f1f5f9 !important;
  color: #475569 !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  padding: 4px 12px !important;
  border-radius: 99px !important;
  margin-bottom: 12px !important;
  letter-spacing: 0.5px !important;
}
.dsg-step-card-featured .dsg-step-badge {
  background: #fde8e8 !important;
  color: #c52720 !important;
}
.dsg-step-title {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #111111 !important;
  margin: 0 0 5px 0 !important;
  line-height: 1.3 !important;
}
.dsg-step-subtitle {
  font-size: 0.85rem !important;
  color: #64748b !important;
  margin: 0 !important;
}
.dsg-step-divider {
  height: 1px !important;
  background: #e2e8f0 !important;
  margin-bottom: 20px !important;
}
.dsg-step-body {
  flex-grow: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}
.dsg-step-body-title {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: #111111 !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
  letter-spacing: 0.5px !important;
  text-align: left !important;
}
.dsg-step-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: left !important;
}
.dsg-step-list li {
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  color: #475569 !important;
  line-height: 1.65 !important;
  margin-bottom: 12px !important;
  position: relative !important;
  padding-left: 20px !important;
}
.dsg-step-list li i {
  position: absolute !important;
  left: 0 !important;
  top: 6px !important;
  color: #c52720 !important;
  font-size: 0.8rem !important;
}

/* Custom styling for Expandable Step 2 Card */
.dsg-expandable-content {
  max-height: 130px; /* Limits Step 2 default view to roughly 2 bullet points */
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
}
.dsg-expandable-content.collapsed::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
  pointer-events: none;
}
.dsg-toggle-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #c52720 !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  margin-top: 15px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  align-self: center !important;
}
.dsg-toggle-btn:hover {
  color: #a51d18 !important;
}
.dsg-toggle-btn i {
  font-size: 0.75rem !important;
  transition: transform 0.25s ease !important;
}
.dsg-toggle-btn.expanded i {
  transform: rotate(180deg);
}
@media (max-width: 767px) {
  .dsg-expandable-content {
    max-height: 160px; /* Slightly taller default height on mobile screen */
  }
}

/* Why Choose DSG Section & Ribbon Styles */
.dsg-why-ribbon {
  background-color: #c52720 !important;
  padding: 18px 20px !important;
  text-align: center !important;
  margin-bottom: 40px !important;
  border-radius: 4px !important;
}
.dsg-why-ribbon-title {
  color: #ffffff !important;
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  margin: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-family: 'SVN-Gilroy', sans-serif !important;
}
.dsg-why-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 30px 15px !important;
  text-align: center !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.3s ease !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'SVN-Gilroy', sans-serif !important;
}
.dsg-why-card * {
  font-family: 'SVN-Gilroy', sans-serif !important;
}
.dsg-why-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08) !important;
  border-color: #c52720 !important;
}
.dsg-why-icon {
  width: 50px !important;
  height: 50px !important;
  margin: 0 auto 15px auto !important;
  display: block !important;
}
.dsg-why-title {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #111111 !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}
@media (max-width: 767px) {
  .dsg-why-ribbon {
    padding: 12px 15px !important;
    margin-bottom: 25px !important;
  }
  .dsg-why-ribbon-title {
    font-size: 1.1rem !important;
  }
  .dsg-why-card {
    padding: 20px 10px !important;
  }
  .dsg-why-title {
    font-size: 0.88rem !important;
  }
}

/* Redesigned Why Choose DSG section */
.dsg-why-section-v2 {
  background-color: #f8fafc !important;
  padding: 80px 0 !important;
}
.dsg-why-grid-v2 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 25px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}
@media (max-width: 991px) {
  .dsg-why-grid-v2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 767px) {
  .dsg-why-grid-v2 {
    grid-template-columns: 1fr !important;
    padding: 0 15px !important;
  }
}
.dsg-why-card-v2 {
  background: #ffffff !important;
  border-radius: 12px !important;
  padding: 25px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03) !important;
  border: 1px solid #e2e8f0 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: flex !important;
  gap: 20px !important;
  align-items: flex-start !important;
  text-align: left !important;
}
.dsg-why-card-v2:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 20px 40px rgba(197, 39, 32, 0.08) !important;
  border-color: #fca5a5 !important;
}
.dsg-why-icon-box-v2 {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: #fef2f2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: all 0.3s ease !important;
}
.dsg-why-card-v2:hover .dsg-why-icon-box-v2 {
  background: #c52720 !important;
}
.dsg-why-icon-box-v2 img {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain !important;
  transition: all 0.3s ease !important;
}
.dsg-why-card-v2:hover .dsg-why-icon-box-v2 img {
  filter: brightness(0) invert(1) !important;
}
.dsg-why-info-v2 {
  flex-grow: 1 !important;
}
.dsg-why-title-v2 {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.4 !important;
  font-family: 'SVN-Gilroy', sans-serif !important;
}
.dsg-why-desc-v2 {
  font-size: 0.9rem !important;
  color: #64748b !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  font-family: 'SVN-Gilroy', sans-serif !important;
}