/*
Theme Name: MatBaoWS
Description: This is a child theme for Flatsome Theme
Author: MatBaoWS Team
Template: flatsome
Version: 3.0
*/
/*************** ADD CUSTOM CSS HERE.   ***************/

/* Gilroy Web Fonts Declarations */
@font-face {
  font-family: 'SVN-Gilroy';
  src: url('assets/fonts/gilroy/SVN-Gilroy-Thin.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SVN-Gilroy';
  src: url('assets/fonts/gilroy/SVN-Gilroy-Thin-Italic.otf') format('opentype');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'SVN-Gilroy';
  src: url('assets/fonts/gilroy/SVN-Gilroy-Xlight.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SVN-Gilroy';
  src: url('assets/fonts/gilroy/SVN-Gilroy-Xlight-Italic.otf') format('opentype');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'SVN-Gilroy';
  src: url('assets/fonts/gilroy/SVN-Gilroy-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SVN-Gilroy';
  src: url('assets/fonts/gilroy/SVN-Gilroy-Light-Italic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'SVN-Gilroy';
  src: url('assets/fonts/gilroy/SVN-Gilroy-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SVN-Gilroy';
  src: url('assets/fonts/gilroy/SVN-Gilroy-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'SVN-Gilroy';
  src: url('assets/fonts/gilroy/SVN-Gilroy-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SVN-Gilroy';
  src: url('assets/fonts/gilroy/SVN-Gilroy-Medium-Italic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'SVN-Gilroy';
  src: url('assets/fonts/gilroy/SVN-Gilroy-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SVN-Gilroy';
  src: url('assets/fonts/gilroy/SVN-Gilroy-SemiBold-Italic.otf') format('opentype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'SVN-Gilroy';
  src: url('assets/fonts/gilroy/SVN-Gilroy-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SVN-Gilroy';
  src: url('assets/fonts/gilroy/SVN-Gilroy-Bold-Italic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'SVN-Gilroy';
  src: url('assets/fonts/gilroy/SVN-Gilroy-XBold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SVN-Gilroy';
  src: url('assets/fonts/gilroy/SVN-Gilroy-XBold-Italic.otf') format('opentype');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'SVN-Gilroy';
  src: url('assets/fonts/gilroy/SVN-Gilroy-Heavy.otf') format('opentype');
  font-weight: 850;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SVN-Gilroy';
  src: url('assets/fonts/gilroy/SVN-Gilroy-Heavy-Italic.otf') format('opentype');
  font-weight: 850;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'SVN-Gilroy';
  src: url('assets/fonts/gilroy/SVN-Gilroy-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SVN-Gilroy';
  src: url('assets/fonts/gilroy/SVN-Gilroy-Black-Italic.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* Apply Gilroy globally */
html, body, input, select, textarea, button, a, p, span, div, li, h1, h2, h3, h4, h5, h6, .page-title, .entry-title {
  font-family: 'SVN-Gilroy', sans-serif !important;
}

/* Unified Typography Hierarchy */
h1 {
  font-size: 2.4rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  color: #111111;
}
h2 {
  font-size: 2.2rem !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  color: #111111 !important;
  margin-bottom: 20px !important;
  text-transform: none !important;
}
h3 {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: #111111 !important;
}

/* Headings in dark sections must be white */
.dark h1, .dark h2, .dark h3, 
.dark h1 span, .dark h2 span, .dark h3 span,
.banner-layers h1, .banner-layers h2, .banner-layers h3 {
  color: #ffffff !important;
}

/* Banner/Hero titles should be slightly smaller to fit on one line on desktop */
.mbws-bg-mask h1, .banner h1, .ux-banner h1 {
  font-size: 1.8rem !important;
}

/* Optimize spacing between sub-labels and headings */
p:has(+ h2), p:has(+ h1), p:has(+ h3) {
  margin-bottom: 6px !important;
}
p:has(+ h2) span, p:has(+ h1) span, p:has(+ h3) span {
  font-size: 16px !important;
}
h1, h2, h3 {
  margin-top: 0 !important;
}

/* --- OPTIMIZED RESPONSIVE HEADER LAYOUT --- */
/* Prevent menu text wrapping within items and items wrapping to new lines */
.header-nav,
.header-nav-main,
ul.nav,
#menu-main-menu {
  flex-wrap: nowrap !important;
}

.header-nav > li > a,
.header-nav-main > li > a,
.header-nav .nav-top-link,
.nav-top-link {
  white-space: nowrap !important;
}

/* Hide Hamburger Menu Icon on Desktop (>= 1025px) to prevent duplication and free up space */
@media (min-width: 1025px) {
  .header-main .menu-icon,
  .header-main li.menu-icon,
  .header-main .icon-menu,
  .header-main .menu-icon a,
  .header-main a.menu-icon,
  .header-main .nav-icon,
  .header-main li.nav-icon {
    display: none !important;
  }
}

@media (max-width: 1400px) {
  /* 1. Reduce menu padding and font-size to fit alongside the Hotline button */
  .header-nav > li > a,
  .header-nav-main > li > a,
  .header-nav .nav-top-link,
  .nav-top-link {
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 0.88em !important;
  }
  
  .header-main .logo img {
    max-height: 50px !important;
  }
}

@media (max-width: 1250px) {
  /* 2. Hide the Hotline button only when screen space is too tight */
  .header-main .header-block,
  .header-main a[href*="lien-he"] {
    display: none !important;
  }
  
  /* 3. Further reduce menu padding and font-size */
  .header-nav > li > a,
  .header-nav-main > li > a,
  .header-nav .nav-top-link,
  .nav-top-link {
    padding-left: 7px !important;
    padding-right: 7px !important;
    font-size: 0.85em !important;
  }
}

@media (max-width: 1100px) {
  .header-nav > li > a,
  .header-nav-main > li > a,
  .header-nav .nav-top-link,
  .nav-top-link {
    padding-left: 5px !important;
    padding-right: 5px !important;
    font-size: 0.8em !important;
    letter-spacing: -0.3px;
  }
}

/* Custom Orange Back-To-Top Button */
#top-link {
  background-color: #f15a24 !important;
}
#top-link:hover {
  background-color: #d54e1b !important;
}

/* Custom Red Background Mask and Overlay for DSG branding */
/* Removed image overrides to allow database banner images to show */
body.home section.mbws-bg-mask .section-bg-overlay {
  background-image: url("assets/images/mask-red.svg") !important;
  opacity: 1 !important;
  transform: scale(-1, -1) !important;
  background-size: cover !important;
  background-position: center top !important;
}

section.mbws-bg-mask-2 .section-bg {
  background-image: url("assets/images/mask-red-2.svg?v=4.0") !important;
}

/* Custom Footer background color change to tech charcoal dark gray */
section.mbws-bg-mask-2 {
  background-color: #0f0f12 !important;
}

/* Smooth gradient transition from Red CTA to dark Footer */
section.dsg-cta-section {
  background: linear-gradient(180deg, #c52720 0%, #0f0f12 100%) !important;
}

/* Fix contact page SVG icons fill color overrides */
.page-id-1735 .icon-inner path,
.page-id-1735 .icon-inner circle,
.page-id-1735 .icon-inner polyline,
.dsg-stroke-icon .icon-inner path,
.dsg-stroke-icon .icon-inner circle,
.dsg-stroke-icon .icon-inner polyline,
.dsg-stroke-icon .icon-inner line,
.dsg-stroke-icon .icon-inner rect {
  fill: none !important;
}

/* Adjust partner logos for visual balance */
.partner-logos img[src*="Kodak-Alaris.png"] {
  height: 68px !important;
  transform: translateY(2px);
}
.partner-logos img[src*="avission.png"] {
  height: 58px !important;
}

/* Single post header gradient styling matching DSG brand identity */
.single-post .page-title-bg .title-bg {
  display: none !important;
}
.single-post .page-title-bg .title-overlay {
  background-image: linear-gradient(135deg, #7c1a15 0%, #c52720 100%) !important;
  opacity: 1 !important;
}
.single-post .page-title-inner,
.single-post .page-title-inner .entry-title,
.single-post .page-title-inner .entry-category,
.single-post .page-title-inner .entry-category a,
.single-post .page-title-inner .entry-meta {
  color: #ffffff !important;
}
.single-post .page-title-inner .entry-category a:hover {
  color: #ffb100 !important;
}
.single-post .page-title-inner .entry-divider {
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Synchronize blog archive header banner height, background image and overlay color */
.blog .page-title,
.archive .page-title,
.blog .featured-title,
.archive .featured-title {
  height: 380px !important;
  min-height: 380px !important;
}
.blog .featured-title .page-title-inner,
.archive .featured-title .page-title-inner {
  height: 380px !important;
  min-height: 380px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Enforce correct background image and clean dark overlay for ALL subpage headers */
body:not(.home) .page-title-bg .title-bg,
body:not(.home) .featured-title .title-bg,
body:not(.home) .blog-featured-title .title-bg {
  background-image: url('https://dsgcomvn700.mbws.vn/wp-content/uploads/hero-banner/dsg-subpage-hero-banner.png') !important;
  background-size: cover !important;
  background-position: 50% 50% !important;
}
body:not(.home) .page-title-bg .title-overlay,
body:not(.home) .featured-title .title-overlay,
body:not(.home) .blog-featured-title .title-overlay {
  background-color: rgba(0, 0, 0, 0.4) !important;
  background-image: none !important; /* Xóa bỏ gradient xanh tím mặc định */
  opacity: 1 !important;
}

/* Force identical height and vertical centering for all static subpage hero banners, EXCEPT on homepage */
body:not(.home) .mbws-bg-mask {
  height: 380px !important;
  min-height: 380px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
body:not(.home) .mbws-bg-mask .section-content {
  min-height: 380px !important;
  height: 380px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body:not(.home) .mbws-bg-mask .section-content > .row {
  width: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Clean logo grid style for Brand page to prevent stretched logo images */
.page-id-5808 .box-image {
  background-color: #f7f7f7 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 30px !important;
  height: 200px !important;
  border-radius: 8px !important;
}
.page-id-5808 .box-image img {
  width: auto !important;
  height: auto !important;
  max-width: 80% !important;
  max-height: 80px !important;
  object-fit: contain !important;
  position: static !important;
  transform: none !important;
}

/* Custom background gradient matching consult section */
.dsg-consult-gradient .section-bg {
  background: linear-gradient(135deg, #ffe8db 0%, #ffd6d6 100%) !important;
}

/* DSG custom orange mask layout for services section */
section.dsg-bg-mask-orange .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%22url%28%23dsg-orange-grad%29%22%2F%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22dsg-orange-grad%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%22100%25%22%20y2%3D%22100%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ffe8db%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23ffd6d6%22%2F%3E%3C/linearGradient%3E%3CclipPath%20id%3D%22prefix__clip0_75_23245%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M0%200h1920v954H0z%22%2F%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") !important;
  opacity: 1 !important;
  transform: scale(-1, 1) !important;
  background-size: cover !important;
  background-position: center top !important;
}

/* DSG Premium Card v3 reasons layout style */
.dsg-why-card-v3 {
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 30px 25px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02) !important;
  border: 1px solid #e2e8f0 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-align: left !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
.dsg-why-card-v3:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 40px rgba(197, 39, 32, 0.06) !important;
  border-color: #fca5a5 !important;
}
.dsg-why-icon-box-v3 {
  width: 56px !important;
  height: 56px !important;
  border-radius: 14px !important;
  background: #fef2f2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 20px !important;
  transition: all 0.3s ease !important;
}
.dsg-why-card-v3:hover .dsg-why-icon-box-v3 {
  background: #c52720 !important;
}
.dsg-why-icon-box-v3 img {
  width: 26px !important;
  height: 26px !important;
  object-fit: contain !important;
  transition: all 0.3s ease !important;
}
.dsg-why-card-v3:hover .dsg-why-icon-box-v3 img {
  filter: brightness(0) invert(1) !important;
}
.dsg-why-title-v3 {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 0 10px 0 !important;
  line-height: 1.4 !important;
  font-family: 'SVN-Gilroy', sans-serif !important;
}
.dsg-why-desc-v3 {
  font-size: 0.92rem !important;
  color: #64748b !important;
  line-height: 1.65 !important;
  margin: 0 !important;
  font-family: 'SVN-Gilroy', sans-serif !important;
}

/* Responsive adjustments for Kodak Alaris reasons quote section on Mobile */
@media (max-width: 549px) {
  .dsg-quote-text {
    text-align: center !important;
  }
  .dsg-quote-author {
    text-align: center !important;
  }
  .dsg-quote-author-title {
    text-align: center !important;
  }
}

/* Responsive adjustments for Brand listing page heading on Mobile */
.dsg-brand-main-title {
  font-size: 37px !important;
  font-weight: 800 !important;
  color: #111 !important;
  line-height: 1.35 !important;
  font-family: 'SVN-Gilroy', sans-serif !important;
  margin: 0 0 20px 0 !important;
}
@media (max-width: 549px) {
  .dsg-brand-main-title {
    font-size: 1.6rem !important;
    line-height: 1.4 !important;
  }
}

/* Responsive Kodak Alaris featured products grid alignment */
.dsg-product-featured-card .box-image {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
}
.dsg-product-featured-card .box-image img {
  max-height: 90% !important;
  max-width: 90% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 auto !important;
}
.dsg-product-featured-card h3 {
  font-family: 'SVN-Gilroy', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.2rem !important;
  color: #111 !important;
  margin-bottom: 12px !important;
  height: 50px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
.dsg-product-featured-card p {
  font-family: 'SVN-Gilroy', sans-serif !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  margin-bottom: 15px !important;
  text-align: center !important;
  color: #555 !important;
}

/* Fix font family for solution cards globally to match SVN-Gilroy project brand */
.dsg-solution-card {
  font-family: 'SVN-Gilroy', sans-serif !important;
}

/* Responsive news button alignment to left on mobile */
@media (max-width: 549px) {
  .dsg-news-more-col .col-inner {
    text-align: left !important;
  }
}

/* Fix button hover text color to crisp white */
.button.is-outline:hover,
.button.is-outline:hover *,
.button.is-secondary:hover,
.button.is-secondary:hover *,
a.button.is-outline:hover,
a.button.is-outline:hover *,
a.button.is-secondary:hover,
a.button.is-secondary:hover * {
  color: #ffffff !important;
}