/*
Theme Name: msb-website
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
/* =================================================
   MSB – Flatsome Tabs (Custom)
   Scope: .custom-tab-style (wrapper)
   Figma: title 26px, tabs 16px, pill + hover/active style
================================================= */

/* 1) Title của block tabs (heading) */
.custom-tab-style .section-title,
.custom-tab-style .section-title-main,
.custom-tab-style .ux-tabs-title,
.custom-tab-style>h1,
.custom-tab-style>h2,
.custom-tab-style>h3,
.custom-tab-style>h4 {
  font-size: 26px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  color: #0b1f44 !important; /* xanh đậm */
  margin-bottom: 14px !important;
  text-transform: unset !important;
}

/* 2) Container tabs */
.custom-tab-style .nav,
.custom-tab-style .tabbed-content .nav,
.custom-tab-style .ux-nav {
  gap: 10px;
}

/* 3) Reset style mặc định của Flatsome */
.custom-tab-style .nav > li,
.custom-tab-style .ux-nav > li {
  margin: 0 !important;
}

/* 4) Nút tab (pill) */
.custom-tab-style .nav > li > a,
.custom-tab-style .ux-nav > li > a {
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 500 !important;
  color: #091E42!important;              /* xanh đậm */
  background: #ffffff !important;
  border: 1px solid #DEE5EF !important; /* xanh nhạt */
  border-radius: 32px !important;
  padding: 8px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

/* 5) Hover: cam + nền cam nhạt */
.custom-tab-style .nav > li > a:hover,
.custom-tab-style .ux-nav > li > a:hover {
  color: #ff6a00 !important;
  background-color: rgba(255, 106, 0, 0.12) !important;
  border-color: rgba(255, 106, 0, 0.35) !important;
}

/* 6) Active: cam + nền cam nhạt (giống hover) */
.custom-tab-style .nav > li.active > a,
.custom-tab-style .nav > li.is-active > a,
.custom-tab-style .ux-nav > li.active > a,
.custom-tab-style .ux-nav > li.is-active > a {
  color: #F4600C !important;
  background-color: #FEEFE7 !important;
  border-color: #F8A06D !important;
  box-shadow: none !important;
}

/* 7) Nếu Flatsome có underline/after mặc định thì tắt */
.custom-tab-style .nav > li > a:after,
.custom-tab-style .ux-nav > li > a:after {
  display: none !important;
}

/* 8) Responsive: giữ đúng layout, cho phép xuống dòng nếu nhiều tab */
@media (max-width: 991px) {
  .custom-tab-style {padding-left: 3%;padding-right: 3%;}
  .custom-tab-style .nav,
  .custom-tab-style .ux-nav {
    flex-wrap: wrap;
    gap: 10px;
  }

  .custom-tab-style .nav > li > a,
  .custom-tab-style .ux-nav > li > a {
    padding: 9px 14px !important;
  }
}

@media screen and (max-width: 480px){
	.msb-breadcrumb-section {
		padding: 16px 16px 0px 16px !important;
	}

	.msb-highlight {
		padding: 56px 16px 0px 16px !important;
	}

	.msb-highlight-card {
		min-height: unset;
		aspect-ratio: 1/1;
	}

	.msb-tabs {
		padding: 56px 16px !important;
	}

	.msb-faq {
		padding: 18px 16px !important;
	}
	
	.msb-modal__dialog {
		width: 100vw;
		position: absolute;
		bottom: 0;
		margin-bottom: 0px;
		border-bottom-left-radius: 0px;
		border-bottom-right-radius: 0px;
	}

	.msb-modal__close {
		right: 0;
	}

	.msb-modal__header {
		padding-right: 44px;
		border-bottom: 1px solid #DEE5EF;
		margin-bottom: 16px;
	}

	.msb-modal__title {
		line-height: 1.4rem;
	}
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}