/* Smooth scroll
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap'); */
:root {
  /* scroll-behavior: smooth;
  scroll-margin-top: 100px; */
} 

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
  font-size:1rem;
}
.header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000; 
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#topbar .ge-content {
	min-height: unset;
}
#topbar p {
	margin: 0;
	
}
#topbar {
	background: var(--heading-color);
}
.grecaptcha-badge {
      visibility: hidden !important;
  }
/*
.sticky-hidden {
    transform: translateY(-100%);
}

.sticky-visible {
    transform: translateY(0);
}
*/
a {
  color: var(--heading-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

.h1, .h2, .h3, h1, h2, h3 {
	color: var(--heading-color);
	font-family: var(--heading-font);
}
.h4, .h5, .h6, h4, h5, h6 {
	color: var(--default-color);
	font-family: var(--heading-font);
}
button#submitBtn.SendButton { 
	background-color: var(--bs-secondary);  
  border: none;  
  box-shadow: 0 8px 18px rgba(255, 106, 0, .32);
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;  
  -ms-transition: all 0.3s linear; 
  -o-transition: all 0.3s linear; 
  transition: all 0.3s linear;  
  width: 100%;
}
button#submitBtn.SendButton:hover {
	transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(255, 106, 0, .42);
}
/* PHP Email Form Messages
------------------------------*/
.php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}
.mergetags_allslider_3:not(.owl-carousel),
#breadcrumb .subMenu:not(.owl-carousel) {
	opacity:0;
}
#tin-tuc ~ section h1 {
	display: none;
}

.php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .loading {
  display: none;
  background: var(--surface-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--surface-color);
  animation: php-email-form-loading 1s linear infinite;
}

@keyframes php-email-form-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Global Header

  

  @media (max-width: 575px) {
    .header .brandbox .logo-main img { max-height: 38px; }
    .header .brandbox h1 a { font-size: 16px; }
    .header .brandbox p:last-child { display: none; } 
  }
--------------------------------------------------------------*/
.header .brandbox .row,
.header .brandbox [class*="col-"] { margin: 0; padding: 0; }

.header .brandbox .ge-content {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "logo name"
      "logo slogan";
    align-items: center;
    column-gap: 10px;
}
.header .brandbox .ge-content > p:first-child { grid-area: logo;   margin: 0; }
.header .brandbox .ge-content > h1            { grid-area: name;   margin: 0; }
.header .brandbox .ge-content > p:last-child  { grid-area: slogan; margin: 6px 0 0 0; }

.header .brandbox .ge-content h1 .logo-main { display: none; } 

.header .brandbox .logo-main img { max-height: 46px; display: block; }
.header .brandbox h1 {
	font-size: 20px; font-weight: 700; text-transform: uppercase;
    color: var(--heading-color); text-decoration: none; line-height: 1.1;
}
   .header .brandbox p:last-child {
    font-size: 12px; color: var(--default-color); opacity: .75; text-decoration: none;
}
.header {
  --background-color: rgba(255, 255, 255, 0);
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 20px 0;
  transition: all 0.5s;
  z-index: 997;
}

.header .header-container {
  background: rgba(255,255,255);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border-radius: 30px;
  padding: 4px 10px;
  /* box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); */
}

.scrolled .header .header-container {
  background: color-mix(in srgb, var(--surface-color), transparent 5%);
}

.header .logo {
  line-height: 1;
  padding-left: 5px;
}

.header .logo img {
  max-height: 36px;
  margin-right: 8px;
}

.header .logo h1 {
  font-size: 24px;
  margin: 0;
  font-weight: 500;
  color: var(--heading-color);
}

.header .btn-getstarted,
.header .btn-getstarted:focus {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-size: 14px;
  padding: 8px 20px;
  margin: 0 0 0 30px;
  border-radius: 50px;
  transition: 0.3s;
}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
}

@media (max-width: 1200px) {
  .header {
    padding-top: 10px;
  }

  /*.header .header-container {
    margin-left: 10px;
    margin-right: 10px;
  }*/

  .header .logo {
    order: 1;
  }

  .header .btn-getstarted {
    order: 2;
    margin: 0 10px 0 0;
    padding: 6px 15px;
  }

  .header .navmenu {
    order: 3;
  }
}

.right-menu a{
	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear;
}
/* .navmenu:is(:target) ~ div a[href="#menu"],
.navmenu:not(:target) ~ div a[href="#close"]{
	display:none;
}
.navmenu:is(:target) ~ div a[href="#close"],
.navmenu:not(:target) ~ div a[href="#menu"]{
	display:inline-block;
} */

#search{
	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear;
	position:absolute;
	right:50px;
}/* 
#search:not(:target){
	display:none;
	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear;
}
#search:is(:target){
	display:block;
	width:300px;
	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear;
}
#search:is(:target) ~ a[href="#search"]{
	display:none;
}
#search:is(:target) ~ a[href="#close"]{
	display:inline-block;
} */
/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@media (min-width: 1200px) {
	#menu .megamenu .row > .mb-3 .col-12 {
		overflow: hidden;
	}
	#menu .megamenu .row > .mb-3 .col-12 > a {
		margin-left: -53px !important;
	-webkit-transition: all 0.3s linear !important;
	-moz-transition: all 0.3s linear !important;
	-ms-transition: all 0.3s linear !important;
	-o-transition: all 0.3s linear !important;
	transition: all 0.3s linear !important; 
	}
	#menu .megamenu .row > .mb-3 .col-12 > a:hover {
		margin-left: unset !important;
	}
	#menu .megamenu a h4 {
		font-size: 22px;
	}
  .navmenu {
    padding: 0;
	margin-right:2rem;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
	/* opacity:1; */
	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear; 
  }
	.navmenu:hover ul,
	.navmenu:target ul{
		/* opacity:1; */
	}
  .navmenu li {
    position: relative;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    padding: 12px 18px;
    font-size: 16px;
    font-family: var(--nav-font);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu li:last-child a {
    padding-right: 0;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu .dropdown ul li {
    min-width: 260px;
  }

  .navmenu .dropdown ul a {
    padding: 8px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: -100%!important;
    left: 90%;
	/*left: -90%*/
    visibility: hidden;
	
  }
  .navmenu .dropdown .dropdown ul.megamenu{
	
	 width:540px;
  }
  .navmenu .dropdown .dropdown ul li a{
	padding:8px 14px!important;
	text-overflow: '...';
	overflow: hidden;
	white-space: nowrap;
	font-weight:normal;
	width: 100%;
    display: block;
  }
  

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: 100%;
	/*left: -100%;*/
    visibility: visible;
  }
}
/* Navmenu - Mobile */
@media (max-width: 1199px) {
	body:has( #menu:target, #search:target){
  overflow: hidden;
}
#search:is(:target){
	top:55px;
}
#menu:is(:target):before,
#search:is(:target):before
{
  content: '';
  background: #fff;
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5);
  top: 75px;
  bottom: 0;
  right: 0;
  left: 0;
  position: fixed;
  height: calc(100vh - 150px);
  width: 100%;
  z-index: 0;
  -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#search:is(:target):before{
	height: 70px;
}
#search:is(:target){
  padding: 10px;
  
  width: 100%;
  height: 100vh;
  right: 0;
}
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }
  .navmenu{
	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear;
  }

	.navmenu:target ul{
		opacity:1;
		display:block;
		-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear;
	}
.navmenu:target {
	padding: 0;
    z-index: 9997;
	width: 100%;
  position: fixed;
  height: calc(100vh - 150px);
  
  left: 0;
  bottom: 0;
  top: 75px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  padding:0;
  -webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear;
  }

  .navmenu ul  {
    display: none;
    list-style: none;
    position: absolute;
    inset: 5px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-mobile-background-color);
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }
  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
	text-transform:uppercase;
  }
  .navmenu > ul > li:not(:first-child) > a{
	  border-top: 1px solid #cccccc50;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
   
  }

  .navmenu a i:hover/*,
  .navmenu a:focus i:hover*/ {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  /*.navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }*/

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 0 10px 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }
  .navmenu .dropdown ul >li > a{
	text-transform:none!important;
	font-weight:normal!important;
	padding-top: 2px;
    padding-bottom: 2px;
  }
  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
  #banner>.container>.row.mt-5{
	margin-top:1rem!important;
  }
  #banner-image{
	margin-bottom:2rem!important;
  }
  .mergetags_menu_16 ul{
	padding-left:1rem!important;
  }
  .mergetags_list_menu > div{
	flex-direction:column!important;
	padding:1rem 0.5rem!important
  }
  .mergetags_list_menu > div h3,
  .mergetags_list_menu > div .content-listing{
	width:100%!important;
	flex-direction:column!important;
  }
  .mergetags_list_menu > div .content_detais{
	width: 100%!important;
  align-self: flex-start !important;
  }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
body .livechat-button {
	bottom: 184px !important; 
	z-index: 99 !important;
}
.footer {
	color:#fff;
	background-color: var(--bg-footer-color);
	font-size: 14px;
	position: relative;
	padding-top:10px!important;
	padding-bottom:50px!important;
}
.footer .footer-top {
  padding-top: 50px;
}

.footer .footer-about .logo {
  line-height: 1;
  margin-bottom: 25px;
}

.footer .footer-about .logo img {
  max-height: 40px;
  margin-right: 6px;
}

.footer .footer-about .logo span {
  color: var(--heading-color);
  font-family: var(--heading-font);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 1px;
}

.footer .footer-about p {
  font-size: 14px;
  font-family: var(--heading-font);
}

.footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-right: 10px;
  transition: 0.3s;
}

.footer .social-links a:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.footer h4 {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-bottom: 12px;
}

.footer .footer-links {
  margin-bottom: 30px;
}

.footer .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer .footer-links ul i {
  padding-right: 2px;
  font-size: 12px;
  line-height: 0;
}

.footer .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.footer .footer-links ul li:first-child {
  padding-top: 0;
}

.footer .footer-links ul a {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  display: inline-block;
  line-height: 1;
}

.footer .footer-links ul a:hover {
  color: var(--accent-color);
}

.footer .footer-contact p {
  margin-bottom: 5px;
}

.footer .copyright {
  padding: 25px 0;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .copyright p {
  margin-bottom: 0;
}

.footer .credits {
  margin-top: 8px;
  font-size: 13px;
}
div#footer > div[class*="col"]{
	padding-right:3rem;
}
.footer #contactus ul{
  display: block;
  width: 100%;
  padding-left: 1rem;
}
.footer #contactus ul li a{
	margin-left: 2rem;
  font-weight: bold;
  float: right;
  text-decoration: underline;
}
.footer #headquarte p:first-child:before{
	content: "\f3e8";
	display: inline-block;
  font-family: bootstrap-icons !important;
  font-style: normal;
  font-weight: 400 !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -.125em;
}
.footer #headquarte a[href*="contact"]{
	text-transform:uppercase;
	color:var(--icon-color-5);
	font-weight:bold;
	margin-top:80px;
	display:block;
	border-top:0px solid #ffffff20;
	padding: 0.5rem 0;
	font-size: 1.2rem;
}
.footer #headquarte a[href*="contact"]:after{
  content: "\f285";
  color:#ffffff50;
  font-size: 1.5rem;
  position: relative;
  margin-left: 95%;
  margin-top:-25px;
  display: flex;
  font-family: bootstrap-icons !important;
  font-style: normal;
  font-weight: 400 !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.footer #project-global-in ul{
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer #project-global-in ul a{
  display: inline-block;
}
.footer #project-global-in li:nth-child(1) a::first-letter{
color: var(--icon-color-1);
}
.footer #project-global-in li:nth-child(2) a::first-letter{
color: var(--icon-color-2);
}
.footer #project-global-in li:nth-child(3) a::first-letter{
color: var(--icon-color-3);
}
.footer #project-global-in li:nth-child(4) a::first-letter{
color: var(--icon-color-4);
}

.footer #project-global-in li:nth-child(5) a::first-letter{
color: var(--icon-color-5);
}
.footer #project-global-in li:nth-child(6) a::first-letter{
color: var(--icon-color-6);
}
.footer #project-global-in ul{
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer #project-global-in ul a{
  display: inline-block;
}
.footer #project-global-in li:nth-child(1) a::first-letter{
color: var(--icon-color-1);
}
.footer #project-global-in li:nth-child(2) a::first-letter{
color: var(--icon-color-2);
}
.footer #project-global-in li:nth-child(3) a::first-letter{
color: var(--icon-color-3);
}
.footer #project-global-in li:nth-child(4) a::first-letter{
color: var(--icon-color-4);
}

.footer #project-global-in li:nth-child(5) a::first-letter{
color: var(--icon-color-5);
}
.footer #project-global-in li:nth-child(6) a::first-letter{
color: var(--icon-color-6);
}
.footer #project-global-in li:nth-child(6) a:after{
  content: "\f138";
  margin-left:20px;
  display: inline-block;
  font-family: bootstrap-icons !important;
  font-style: normal;
  font-weight: 400 !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

}
.footer #copyright{
	margin-top:20px;
	padding:10px;
	border-top:1px solid #ffffff10;
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 18px;
  bottom: -15px;
  z-index: 99999;
  background-color: var(--main);
  width: 44px;
  height: 44px;
  border-radius: 50px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
  bottom: 130px;
}
/*--------------------------------------------------------------
# Floating Buttons
--------------------------------------------------------------*/
.floating-buttons{
    position: fixed;
    right: 18px;
    bottom: 196px;
    z-index: 99999;
}

/* Đưa flex xuống đúng thẻ đang chứa 2 <p> (ge-content) thay vì .floating-buttons */
.floating-buttons .ge-content{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Bỏ margin mặc định của <p> để không cộng dồn khoảng cách */
.floating-buttons .ge-content p{
    margin: 0;
}

/* Ép ảnh bỏ float:left inline, tránh làm sập chiều cao thẻ cha */
.floating-buttons img{
    float: none !important;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: block;
}

.floating-buttons a{
    position: relative;
    display: block;
    width: 44px;
    border-radius: 50%;
    -webkit-animation: fb-rung 5.5s ease-in-out infinite;
    animation: fb-rung 5.5s ease-in-out infinite;
}
/* Nút 1 (Zalo) - rung trước, không delay */
.floating-buttons .ge-content p:nth-child(1) a{
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}

/* Nút 2 (Messenger) - rung sau */
.floating-buttons .ge-content p:nth-child(2) a{
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}
.floating-buttons a::before,
.floating-buttons a::after{
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 50%;
    background: #B3C2DE;
    z-index: -1;
    -webkit-animation: fb-toasang 1.8s ease-out infinite;
    animation: fb-toasang 1.8s ease-out infinite;
}
.floating-buttons a::after{
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s;
}
@-webkit-keyframes fb-rung{
    0%, 78%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    81% { -webkit-transform: rotate(-8deg); transform: rotate(-8deg); }
    84% { -webkit-transform: rotate(8deg); transform: rotate(8deg); }
    87% { -webkit-transform: rotate(-6deg); transform: rotate(-6deg); }
    90% { -webkit-transform: rotate(6deg); transform: rotate(6deg); }
    93% { -webkit-transform: rotate(-3deg); transform: rotate(-3deg); }
    96% { -webkit-transform: rotate(3deg); transform: rotate(3deg); }
}
@keyframes fb-rung{
    0%, 78%, 100% { transform: rotate(0deg); }
    81% { transform: rotate(-8deg); }
    84% { transform: rotate(8deg); }
    87% { transform: rotate(-6deg); }
    90% { transform: rotate(6deg); }
    93% { transform: rotate(-3deg); }
    96% { transform: rotate(3deg); }
}
@-webkit-keyframes fb-toasang{
    0%   { -webkit-transform: scale(1);   opacity: 0.9; }
    100% { -webkit-transform: scale(1.6); opacity: 0; }
}
@keyframes fb-toasang{
    0%   { transform: scale(1);   opacity: 0.9; }
    100% { transform: scale(1.6); opacity: 0; }
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 170px 0 80px 0;
  text-align: center;
  position: relative;
}

.page-title h1 {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 10px;
}

.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  justify-content: center;
  padding: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
}

.page-title .breadcrumbs ol li+li {
  padding-left: 10px;
}

.page-title .breadcrumbs ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  padding: 1rem 0;
  scroll-margin-top: 70px;
}
@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 66px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding-bottom: 60px;
  position: relative;
}

.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.section-title h2:after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 3px;
  background: var(--accent-color);
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.section-title p {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  position: relative;
  padding-top: 160px;
  background: linear-gradient(125deg, color-mix(in srgb, #fff, transparent 40%) 40%,color-mix(in srgb, var(--main-90), transparent 95%) 60%, color-mix(in srgb, var(--accent-color), transparent 98%) 25%, transparent 50%);
  padding-bottom:0;

}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--accent-color), transparent 92%), transparent 40%);
  pointer-events: none;
}

.hero .hero-content {
  position: relative;
  z-index: 1;

}
.hero-content-item{
	position: relative;
	margin:150px 100px 100px 0!important;
}
.hero-content-item .bannerTitle{
	height:60px;
}
.hero-content-item .bannerTitle span{
	color:var(--main);
}
.hero-content-item .bannerTitle span{
	background: linear-gradient(-45deg, var(--main) 20%, var(--accent-color) 40%, var(--main) 80%);
	background-size: 200% auto;
	color: var(--main);
	background-clip: text;
	text-fill-color: transparent;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: shine 10s linear infinite;	  
}
@keyframes shine {
	to {
	background-position: 200% center;
	}
}
.hero-content-item .bannerDesc{
	height:60px;
}
.hero-content-item .hero-buttons{
	height:40px;
}
.hero .hero-content h1 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.hero .hero-content h1 .accent-text {
  color: var(--accent-color);
}

@media (max-width: 992px) {
  .hero .hero-content {
    text-align: center;
    margin-bottom: 3rem;
  }

  .hero .hero-content h1 {
    font-size: 1.5rem;
  }

  .hero .hero-content .hero-buttons {
    justify-content: center;
  }
}

@media (max-width: 575px) {
  .hero .hero-content h1 {
    font-size: 1.5rem;
  }
}

.hero .company-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  background-color: color-mix(in srgb, var(--accent-color), transparent 92%);
  border-radius: 50px;
  color: var(--accent-color);
  font-weight: 500;
}

.hero .company-badge i {
  font-size: 1.25rem;
}

.hero .btn-primary {
  background-color: var(--main);
  border-color: var(--main);
  color: var(--contrast-color);
  padding: 0.1rem 0.6rem 0.1rem 1rem;
  border-radius: 50px;
  font-weight: 500;
  transition: all 0.3s ease;
  width:160px;
}
.hero .btn-primary i{
	font-weight: 700;
	font-size:2rem;
}
.hero .btn-primary:hover {
  background-color: color-mix(in srgb, var(--accent-color), black 20%);
  border-color: color-mix(in srgb, var(--accent-color), black 20%);
  color: var(--contrast-color);
}

.hero .btn-link {
  color: var(--heading-color);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.hero .btn-link:hover {
  color: var(--accent-color);
}

.hero .btn-link i {
  font-size: 1.5rem;
  vertical-align: middle;
}

.hero .hero-image {
  position: relative;
  text-align: center;
  z-index: 1;
}
.hero-image-item:before{
	display:block;
	content:'';
	position:absolute;
	background:transparent;
	border: 10px solid var(--main);
	width: 90%;
	height:90%;
	z-index:-1;
	top:10%;
	left:5%;
}

.hero .hero-image img {
  max-width: 100%;
  height: auto;
  mix-blend-mode: overlay;
}

.hero .customers-badge {
  position: absolute;
  bottom: 10px;
  right: 30px;
  background-color: var(--surface-color);
  padding: 1rem;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  max-width: 300px;
  animation: float-badge 3s ease-in-out infinite;
  will-change: transform;
}

.hero .customers-badge .customer-avatars {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

.hero .customers-badge .avatar {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 2px solid var(--surface-color);
  margin-left: -8px;
}

.hero .customers-badge .avatar:first-child {
  margin-left: 0;
}

.hero .customers-badge .avatar.more {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
}

.hero .customers-badge p {
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

@media (max-width: 992px) {
  .hero .customers-badge {
    position: static;
    margin: 1rem auto;
    max-width: 250px;
  }
}

.hero .stats-row {
  position: relative;
  z-index: 1;
  margin-top: 5rem;
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.05);
  padding-bottom: 2rem;
    -webkit-border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius-bottomright: 0;
-moz-border-radius-bottomleft: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}

.hero .stat-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 2rem;
}

.hero .stat-item .stat-icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in srgb, var(--accent-color), transparent 92%);
  border-radius: 50px;
  transition: 0.3s;
}

.hero .stat-item .stat-icon i {
  font-size: 1.5rem;
  color: var(--accent-color);
}

.hero .stat-item:hover .stat-icon {
  background-color: var(--accent-color);
}

.hero .stat-item:hover .stat-icon i {
  color: var(--contrast-color);
}

.hero .stat-item .stat-content {
  flex-grow: 1;
}

.hero .stat-item .stat-content h4 {
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
  font-weight: 600;
}

.hero .stat-item .stat-content p {
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin: 0;
}
.timeline__item.timeline__item--left .timeline__content p img {
	border-radius: 5px;
}
@media (max-width: 575px) {
  .hero .stat-item {
    padding: 1.5rem;
  }
  .timeline__content {
	  height: unset !important;
  }
}

@keyframes float-badge {
  0% {
    transform: translateY(0);
  }

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

  100% {
    transform: translateY(0);
  }
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .about-meta {
  color: var(--accent-color);
  font-weight: 600;
  margin-bottom: 1rem;
  display: inline-block;
}

.about .about-title {
  font-size: 1.75rem;
  margin-bottom: 1rem;
  line-height: 1.2;
  font-weight: 700;
}

@media (max-width: 992px) {
  .about .about-title {
    font-size: 2rem;
  }
}

.about .about-description {
  margin-bottom: 2rem;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.about .feature-list-wrapper {
  margin-bottom: 2rem;
}

.about .feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.about .feature-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  font-size: 1rem;
}

.about .feature-list li i {
  color: var(--accent-color);
  font-size: 1.25rem;
}

.about .profile .profile-image {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

.about .profile .profile-name {
  font-size: 1.125rem;
  margin: 0;
}

.about .profile .profile-position {
  color: var(--accent-color);
  margin: 0;
  font-size: 0.875rem;
}

.about .contact-info {
  padding: 1rem 1.5rem;
  background-color: var(--surface-color);
  border-radius: 0.5rem;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.06);
}

.about .contact-info i {
  color: var(--accent-color);
  font-size: 1.5rem;
}

.about .contact-info .contact-label {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 0.875rem;
  margin: 0;
}

.about .contact-info .contact-number {
  font-weight: 600;
  margin: 0;
}

.about .image-wrapper {
  position: relative;
}

@media (max-width: 992px) {
  .about .image-wrapper {
    padding-left: 0;
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
}

@media (max-width: 992px) {
  .about .image-wrapper .images {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
}

@media (max-width: 992px) {
  .about .image-wrapper .main-image {
    margin-left: 0;
  }
}

.about .image-wrapper .small-image {
  position: absolute;
  top: 20%;
  left: -10%;
  width: 45%;
  border: 8px solid var(--surface-color);
}

@media (max-width: 992px) {
  .about .image-wrapper .small-image {
    position: static;
    width: 100%;
    margin: 0 auto;
    border: 0;
  }
}

.about .image-wrapper .experience-badge {
  position: absolute;
  bottom: 5%;
  right: 5%;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  padding: 1.5rem;
  border-radius: 0.5rem;
  text-align: center;
  min-width: 200px;
  animation: experience-float 3s ease-in-out infinite;
}

@media (max-width: 992px) {
  .about .image-wrapper .experience-badge {
    position: static;
    width: fit-content;
    margin: 0 auto;
  }
}

.about .image-wrapper .experience-badge h3 {
  color: var(--contrast-color);
  font-size: 2.5rem;
  margin: 0;
  line-height: 0.5;
}

.about .image-wrapper .experience-badge h3 span {
  font-size: 1rem;
  display: inline-block;
  margin-left: 0.25rem;
}

.about .image-wrapper .experience-badge p {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
}

@keyframes experience-float {
  0% {
    transform: translateY(0);
  }

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

  100% {
    transform: translateY(0);
  }
}

/*--------------------------------------------------------------
# Features Section
--------------------------------------------------------------*/
.features .nav-tabs {
  border: 0;
  background-color: color-mix(in srgb, var(--default-color), transparent 96%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  padding: 6px;
  width: auto;
}

.features .nav-item {
  margin: 0;
  padding: 0 5px 0 0;
}

.features .nav-item:last-child {
  padding-right: 0;
}

.features .nav-link {
  background-color: none;
  color: var(--heading-color);
  padding: 10px 30px;
  transition: 0.3s;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  height: 100%;
  border: 0;
  margin: 0;
}

@media (max-width: 468px) {
  .features .nav-link {
    padding: 8px 20px;
  }
}

.features .nav-link i {
  padding-right: 15px;
  font-size: 48px;
}

.features .nav-link h4 {
  font-size: 14px;
  font-weight: 500;
  margin: 0;
}

.features .nav-link:hover {
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.features .nav-link:hover h4 {
  color: var(--accent-color);
}

.features .nav-link.active {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}

.features .nav-link.active h4 {
  color: var(--contrast-color);
}

.features .tab-content {
  margin-top: 30px;
}

.features .tab-pane h3 {
  color: var(--heading-color);
  font-weight: 700;
  font-size: 32px;
  position: relative;
  margin-bottom: 20px;
  padding-bottom: 20px;
}

.features .tab-pane h3:after {
  content: "";
  position: absolute;
  display: block;
  width: 60px;
  height: 3px;
  background: var(--accent-color);
  left: 0;
  bottom: 0;
}

.features .tab-pane ul {
  list-style: none;
  padding: 0;
}

.features .tab-pane ul li {
  padding-top: 10px;
}

.features .tab-pane ul i {
  font-size: 20px;
  padding-right: 4px;
  color: var(--accent-color);
}

.features .tab-pane p:last-child {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Features Cards Section
--------------------------------------------------------------*/
.features-cards {
  --default-color: #555;
  --heading-color: #333;
}

.features-cards .feature-box {
  height: 100%;
  padding: 40px 30px;
  border-radius: 10px;
}

.features-cards .feature-box i {
  font-size: 44px;
  display: inline-block;
  line-height: 0;
  color: var(--accent-color);
  margin-bottom: 20px;
}

.features-cards .feature-box h4 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 10px 0;
}

.features-cards .feature-box p {
  font-size: 15px;
  margin-bottom: 0;
}

.features-cards .feature-box.orange {
  background-color: #fff3e2;
}

.features-cards .feature-box.orange i {
  color: #edb86e;
}

.features-cards .feature-box.blue {
  background-color: #deedfd;
}

.features-cards .feature-box.blue i {
  color: #20a5f8;
}

.features-cards .feature-box.green {
  background-color: #d5f1e4;
}

.features-cards .feature-box.green i {
  color: #48c88a;
}

.features-cards .feature-box.red {
  background-color: #fdeded;
}

.features-cards .feature-box.red i {
  color: #f28484;
}

/*--------------------------------------------------------------
# Features 2 Section
--------------------------------------------------------------*/
.features-2 .feature-item .feature-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--accent-color), transparent 92%);
}

.features-2 .feature-item .feature-icon i {
  font-size: 24px;
  color: var(--accent-color);
}

.features-2 .feature-item .feature-content h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
}

.features-2 .feature-item .feature-content p {
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  font-size: 15px;
  margin-bottom: 0;
}

.features-2 .phone-mockup {
  position: relative;
  padding: 30px 0;
}

.features-2 .phone-mockup img {
  max-width: 300px;
  height: auto;
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.1));
}

@media (max-width: 991.98px) {
  .features-2 .feature-item {
    text-align: center !important;
    margin-bottom: 2rem;
  }

  .features-2 .feature-item .d-flex {
    flex-direction: column;
    text-align: center;
    justify-content: center !important;
  }

  .features-2 .phone-mockup {
    margin: 3rem 0;
  }
}
/*--------------------------------------------------------------
# Call To Action Section
--------------------------------------------------------------*/
#trang-chu-dung-cu-vat-tu ~ #call-to-action .container {
	background: transparent;
	padding:2rem;
	color: var(--default-color);
}
#call-to-action .mergetags_button_view {
	width: 100%;
	margin: 0;
}
#call-to-action .mergetags_button_view i {
	margin-left: 10px;
}
.call-to-action .container {
  background: var(--accent-color);
  color: var(--contrast-color);
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  padding: 4rem 2rem;
}

.call-to-action .content h2,
.call-to-action .content p {
  color: var(--contrast-color);
  position: relative;
  z-index: 2;
}

.call-to-action .btn-cta {
  background-color: color-mix(in srgb, var(--contrast-color) 15%, transparent);
  color: var(--contrast-color);
  padding: 12px 40px;
  border-radius: 50px;
  transition: all 0.3s ease;
  border: 2px solid var(--contrast-color);
  position: relative;
  z-index: 2;
}

.call-to-action .btn-cta:hover {
  background-color: var(--contrast-color);
  color: var(--accent-color);
}

.call-to-action .shape {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

.call-to-action .shape svg {
  width: 100%;
  height: 100%;
}

.call-to-action .shape svg path {
  fill: color-mix(in srgb, var(--contrast-color) 50%, transparent);
}

.call-to-action .shape-1 {
  width: 300px;
  height: 300px;
  top: -100px;
  right: -50px;
  opacity: 0.1;
  transform: rotate(45deg);
  animation: shapes-float 3s ease-in-out infinite;
}

.call-to-action .shape-2 {
  width: 200px;
  height: 200px;
  bottom: -50px;
  left: -50px;
  opacity: 0.15;
  transform: rotate(-15deg);
  animation: shapes-float 4s ease-in-out infinite;
}

.call-to-action .shape-3 {
  width: 150px;
  height: 150px;
  top: 20%;
  right: 15%;
  opacity: 0.08;
  transform: rotate(15deg);
}

.call-to-action .dots {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  color: var(--contrast-color);
}

.call-to-action .dots svg {
  width: 100%;
  height: 100%;
}

.call-to-action .dots-1 {
  width: 200px;
  height: 200px;
  top: -30px;
  left: 10%;
  opacity: 0.1;
  transform: rotate(15deg);
  animation: shapes-float 4s ease-in-out infinite;
}

.call-to-action .dots-2 {
  width: 150px;
  height: 150px;
  bottom: 20px;
  right: 15%;
  opacity: 0.15;
  transform: rotate(-10deg);
}

@keyframes shapes-float {

  0%,
  100% {
    transform: scale(0.8) rotate(45deg) translateY(0);
  }

  50% {
    transform: scale(0.8) rotate(45deg) translateY(-20px);
  }
}

@media (max-width: 992px) {
  .call-to-action .container {
    padding: 3rem 1.5rem;
  }

  .call-to-action .shape-1 {
    width: 200px;
    height: 200px;
  }

  .call-to-action .shape-2 {
    width: 150px;
    height: 150px;
  }

  .call-to-action .shape-3 {
    width: 100px;
    height: 100px;
  }

  .call-to-action .dots-1 {
    width: 150px;
    height: 150px;
  }

  .call-to-action .dots-2 {
    width: 120px;
    height: 120px;
  }

  .call-to-action .dots-3 {
    width: 80px;
    height: 80px;
  }
}

@media (max-width: 575px) {
  .call-to-action .container {
    border-radius: 0;
  }
}

/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/
.clients .swiper-slide img {
  opacity: 0.5;
  transition: 0.3s;
  filter: grayscale(100);
}

.clients .swiper-slide img:hover {
  filter: none;
  opacity: 1;
}

.clients .swiper-wrapper {
  height: auto;
}

.clients .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.clients .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  opacity: 1;
  background-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.clients .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials .testimonial-item {
  background-color: var(--surface-color);
  box-shadow: 0px 2px 30px rgba(0, 0, 0, 0.08);
  padding: 30px;
  position: relative;
  height: 100%;
}

.testimonials .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 50px;
  border: 6px solid var(--background-color);
  float: left;
  margin: 0 10px 0 0;
}

.testimonials .testimonial-item h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0 5px 0;
}

.testimonials .testimonial-item h4 {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin: 0;
}

.testimonials .testimonial-item .stars {
  margin: 10px 0;
}

.testimonials .testimonial-item .stars i {
  color: #ffc107;
  margin: 0 1px;
}

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
  color: color-mix(in srgb, var(--accent-color), transparent 50%);
  font-size: 26px;
  line-height: 0;
}

.testimonials .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.testimonials .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
  transform: scale(-1, -1);
}

.testimonials .testimonial-item p {
  font-style: italic;
  margin: 15px 0 0 0;
  padding: 0;
}

/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.stats .stats-item {
  padding: 30px;
  width: 100%;
}

.stats .stats-item span {
  color: var(--heading-color);
  font-size: 48px;
  display: block;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.stats .stats-item span:after {
  content: "";
  position: absolute;
  display: block;
  width: 25px;
  height: 3px;
  background: var(--accent-color);
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.stats .stats-item p {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  padding: 0;
  margin: 0;
  font-family: var(--heading-font);
  font-weight: 500;
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-card {
  height: 100%;
  padding: 30px;
  background: var(--surface-color);
  border-radius: 10px;
  transition: all 0.3s ease;
}

.services .service-card:hover {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
}

.services .service-card:hover .icon {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.services .service-card:hover .read-more {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
}

.services .service-card .icon {
  width: 60px;
  height: 60px;
  margin-right: 30px;
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--accent-color);
  font-size: 28px;
  transition: all 0.3s ease;
  line-height: 1;
}

.services .service-card h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 15px;
}

.services .service-card p {
  margin-bottom: 25px;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  font-size: 15px;
  line-height: 1.6;
}

.services .service-card .read-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-color);
  font-weight: 500;
  transition: all 0.3s ease;
}

.services .service-card .read-more i {
  font-size: 14px;
  transition: transform 0.3s ease;
}

.services .service-card .read-more:hover i {
  transform: translateX(5px);
}

/*--------------------------------------------------------------
# Pricing Section
--------------------------------------------------------------*/
.pricing .pricing-card {
  height: 100%;
  padding: 2rem;
  background: var(--surface-color);
  border-radius: 1rem;
  transition: all 0.3s ease;
  position: relative;
}

.pricing .pricing-card:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.pricing .pricing-card.popular {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.pricing .pricing-card.popular h3,
.pricing .pricing-card.popular h4 {
  color: var(--contrast-color);
}

.pricing .pricing-card.popular .price .currency,
.pricing .pricing-card.popular .price .amount,
.pricing .pricing-card.popular .price .period {
  color: var(--contrast-color);
}

.pricing .pricing-card.popular .features-list li {
  color: var(--contrast-color);
}

.pricing .pricing-card.popular .features-list li i {
  color: var(--contrast-color);
}

.pricing .pricing-card.popular .btn-light {
  background: var(--contrast-color);
  color: var(--accent-color);
}

.pricing .pricing-card.popular .btn-light:hover {
  background: color-mix(in srgb, var(--contrast-color), transparent 10%);
}

.pricing .pricing-card .popular-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--contrast-color);
  color: var(--accent-color);
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.08);
}

.pricing .pricing-card h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.pricing .pricing-card .price {
  margin-bottom: 1.5rem;
}

.pricing .pricing-card .price .currency {
  font-size: 1.5rem;
  font-weight: 600;
  vertical-align: top;
  line-height: 1;
}

.pricing .pricing-card .price .amount {
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1;
}

.pricing .pricing-card .price .period {
  font-size: 1rem;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.pricing .pricing-card .description {
  margin-bottom: 2rem;
  font-size: 0.975rem;
}

.pricing .pricing-card h4 {
  font-size: 1.125rem;
  margin-bottom: 1rem;
}

.pricing .pricing-card .features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem 0;
}

.pricing .pricing-card .features-list li {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.pricing .pricing-card .features-list li i {
  color: var(--accent-color);
  margin-right: 0.75rem;
  font-size: 1.25rem;
}

.pricing .pricing-card .btn {
  width: 100%;
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 500;
  border-radius: 50px;
}

.pricing .pricing-card .btn.btn-primary {
  background: var(--accent-color);
  border: none;
  color: var(--contrast-color);
}

.pricing .pricing-card .btn.btn-primary:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
}

/*--------------------------------------------------------------
# Faq Section
--------------------------------------------------------------*/
.faq .faq-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--heading-color);
}

.faq .faq-description {
  font-size: 1rem;
  color: var(--default-color);
  margin-bottom: 2rem;
}

.faq .faq-arrow {
  color: var(--accent-color);
}

.faq .faq-container .faq-item {
  background-color: var(--surface-color);
  position: relative;
  padding: 20px;
  margin-bottom: 15px;
  border-radius: 10px;
  overflow: hidden;
}

.faq .faq-container .faq-item:last-child {
  margin-bottom: 0;
}

.faq .faq-container .faq-item h3 {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  margin: 0 30px 0 0;
  transition: 0.3s;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.faq .faq-container .faq-item h3 .num {
  color: var(--accent-color);
  padding-right: 5px;
}

.faq .faq-container .faq-item h3:hover {
  color: var(--accent-color);
}

.faq .faq-container .faq-item .faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: 0.3s ease-in-out;
  visibility: hidden;
  opacity: 0;
}

.faq .faq-container .faq-item .faq-content p {
  margin-bottom: 0;
  overflow: hidden;
}

.faq .faq-container .faq-item .faq-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 16px;
  line-height: 0;
  transition: 0.3s;
  cursor: pointer;
}

.faq .faq-container .faq-item .faq-toggle:hover {
  color: var(--accent-color);
}

.faq .faq-container .faq-active h3 {
  color: var(--accent-color);
}

.faq .faq-container .faq-active .faq-content {
  grid-template-rows: 1fr;
  visibility: visible;
  opacity: 1;
  padding-top: 10px;
}

.faq .faq-container .faq-active .faq-toggle {
  transform: rotate(90deg);
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Call To Action 2 Section
--------------------------------------------------------------*/
.call-to-action-2 {
  padding: 80px 0;
}

.call-to-action-2 .container {
  position: relative;
  z-index: 3;
}

.call-to-action-2 h3 {
  font-size: 28px;
  font-weight: 700;
  color: var(--default-color);
}

.call-to-action-2 p {
  color: var(--default-color);
}

.call-to-action-2 .cta-btn {
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 40px;
  border-radius: 50px;
  transition: 0.5s;
  margin: 10px;
  border: 2px solid color-mix(in srgb, var(--contrast-color), transparent 30%);
  color: var(--contrast-color);
}

.call-to-action-2 .cta-btn:hover {
  border-color: var(--contrast-color);
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-box {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  padding: 3rem;
  border-radius: 1rem;
  height: 100%;
}

.contact .info-box h3 {
  color: var(--contrast-color);
  font-size: 2rem;
  margin-bottom: 1rem;
}

@media (max-width: 767.98px) {
  .contact .info-box h3 {
    font-size: 1.75rem;
  }
}

.contact .info-box p {
  opacity: 0.8;
  margin-bottom: 2rem;
}

.contact .info-box a {
  color: var(--contrast-color);
}

@media (max-width: 992px) {
  .contact .info-box {
    padding: 1.5rem;
  }
}

.contact .info-item {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.contact .info-item:last-child {
  margin-bottom: 0;
}

.contact .info-item .icon-box {
  width: 3.5rem;
  height: 3.5rem;
  background-color: color-mix(in srgb, var(--contrast-color), transparent 85%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: 0.3s;
}

.contact .info-item .icon-box i {
  font-size: 1.5rem;
  color: var(--contrast-color);
}

.contact .info-item:hover .icon-box {
  background-color: color-mix(in srgb, var(--contrast-color), transparent 70%);
}

.contact .info-item .content h4 {
  color: var(--contrast-color);
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.contact .info-item .content p {
  margin-bottom: 0.25rem;
  font-size: 0.95rem;
}

.contact .info-item .content p:last-child {
  margin-bottom: 0;
}

.contact .contact-form {
  background-color: var(--surface-color);
  padding: 3rem;
  border-radius: 1rem;
  height: 100%;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.05);
}

@media (max-width: 992px) {
  .contact .contact-form {
    padding: 1.5rem;
  }
}

.contact .contact-form h3 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .contact .contact-form h3 {
    font-size: 1.75rem;
  }
}

.contact .contact-form p {
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  margin-bottom: 2rem;
}

.contact .contact-form .form-control,
.contact .contact-form .form-select {
  padding: 0.875rem 1.25rem;
  border-color: color-mix(in srgb, var(--default-color), transparent 90%);
  border-radius: 0.5rem;
  background-color: color-mix(in srgb, var(--surface-color) 90%, white 5%);
  color: var(--default-color);
}

.contact .contact-form .form-control:focus,
.contact .contact-form .form-select:focus {
  box-shadow: none;
  border-color: var(--accent-color);
}

.contact .contact-form .form-control::placeholder,
.contact .contact-form .form-select::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.contact .contact-form .btn {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  padding: 1rem 2rem;
  border-radius: 2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: 0.3s;
}

.contact .contact-form .btn i {
  font-size: 1.25rem;
}

.contact .contact-form .btn:hover {
  background-color: color-mix(in srgb, var(--accent-color), var(--contrast-color) 20%);
}

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .service-box {
  background-color: var(--surface-color);
  padding: 20px;
  box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1);
}

.service-details .service-box+.service-box {
  margin-top: 30px;
}

.service-details .service-box h4 {
  font-size: 20px;
  font-weight: 700;
  border-bottom: 2px solid color-mix(in srgb, var(--default-color), transparent 92%);
  padding-bottom: 15px;
  margin-bottom: 15px;
}

.service-details .services-list {
  background-color: var(--surface-color);
}

.service-details .services-list a {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  background-color: color-mix(in srgb, var(--default-color), transparent 96%);
  display: flex;
  align-items: center;
  padding: 12px 15px;
  margin-top: 15px;
  transition: 0.3s;
}

.service-details .services-list a:first-child {
  margin-top: 0;
}

.service-details .services-list a i {
  font-size: 16px;
  margin-right: 8px;
  color: var(--accent-color);
}

.service-details .services-list a.active {
  color: var(--contrast-color);
  background-color: var(--accent-color);
}

.service-details .services-list a.active i {
  color: var(--contrast-color);
}

.service-details .services-list a:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  color: var(--accent-color);
}

.service-details .download-catalog a {
  color: var(--default-color);
  display: flex;
  align-items: center;
  padding: 10px 0;
  transition: 0.3s;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.service-details .download-catalog a:first-child {
  border-top: 0;
  padding-top: 0;
}

.service-details .download-catalog a:last-child {
  padding-bottom: 0;
}

.service-details .download-catalog a i {
  font-size: 24px;
  margin-right: 8px;
  color: var(--accent-color);
}

.service-details .download-catalog a:hover {
  color: var(--accent-color);
}

.service-details .help-box {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  margin-top: 30px;
  padding: 30px 15px;
}

.service-details .help-box .help-icon {
  font-size: 48px;
}

.service-details .help-box h4,
.service-details .help-box a {
  color: var(--contrast-color);
}

.service-details .services-img {
  margin-bottom: 20px;
}

.service-details h3 {
  font-size: 26px;
  font-weight: 700;
}

.service-details p {
  font-size: 15px;
}

.service-details ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.service-details ul li {
  padding: 5px 0;
  display: flex;
  align-items: center;
}

.service-details ul i {
  font-size: 20px;
  margin-right: 8px;
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
  /* Add your styles here */
}
.fadeIn  {
  -webkit-animation : fadeIn 1s linear;
  animation : fadeIn 1s linear;
}  

.fadeOut {
  -webkit-animation : fadeOut 0.5s linear;
  animation : fadeOut 0.5s linear;
} 

@-webkit-keyframes fadeIn{
  0% {
    opacity : 0   ;
  }  
  100% {
    opacity : 1   ;
  }  
}
@keyframes fadeIn{
  0% {
    opacity : 0   ;
  }  
  100% {
    opacity : 1   ;
  }  
} 
@-webkit-keyframes fadeOut{
  0% {
    opacity : 100   ;
  }  
  100% {
    opacity : 0   ;
  }  
}
@keyframes fadeOut{
  0% {
    opacity : 100   ;
  }  
  100% {
    opacity : 0   ;
  }  
}
@media (max-width: 767px) {
	.ordersm-1{
		order:-4
	}
	.ordersm-2{
		order:-3
	}
	.ordersm-3{
		order:-2
	}
	.ordersm-4{
		order:-1
	}
	
	.ge-content > :first-child:has(.counter-wrap){
		position:relative!important;
		-webkit-box-pack: center !important;
		  -ms-flex-pack: center !important;
		  justify-content: center !important;
		  display: -webkit-box !important;
		  display: -ms-flexbox !important;
		  display: flex !important;
	}
	.ge-content > :first-child:has(.counter-wrap) ~ *{
		-webkit-box-pack: center !important;
		  -ms-flex-pack: center !important;
		  justify-content: center !important;
		  display: -webkit-box !important;
		  display: -ms-flexbox !important;
		  display: flex !important;
		  position:relative;
		  margin-left:0!important;
	}
	.ge-content > :first-child:has(.counter-wrap) ~ p{
		padding-right: 0 !important;
		text-align: center !important;
	}
	.ge-content > :first-child:has(.counter-wrap) ~ :last-child{
	  margin-bottom: 1.5rem!important;
	}
	.cxo_search_toggle > .container > .row > div .ge-content{
		margin: 40px 20px 20px!important;
		padding: 20px 20px 40px 20px!important;
	}
	.image img.img-thumbnail,
	.contents .card-img img{
		height:auto!important;
	}
	div#footer > div[class*="col"]{
		padding-right: 2rem!important;
		padding-left: 2rem!important;
	}
	.footer #headquarte a[href*="contact"]{
		margin-top:20px!important;
	}
	.footer #project-global-in{
		margin-top:40px!important;
	}
}
/*-------------------------------------hoaviet.css--------------------------------*/
/*dinh dang file nay*/
p {
	margin-bottom: 0.75rem;
}
.btn {
	color: var(--default-color);
}

.btn:hover,
.btn:focus,
.btn:active,
.btn:first-child:active {
  color: var(--nav-hover-color);
}

.btn.btn-outline-primary {
	border-color: var(--bs-gray-400);
	-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.btn.btn-outline-primary:hover,
.btn.btn-outline-primary.show,
.blog-list > div:hover .btn.btn-outline-primary {
	background: var(--main) !important;
	color: var(--contrast-color) !important;
	border-color: var(--main);
}
.btn.btn-danger {
	color:var(--contrast-color);
}
.btn.btn-outline-secondary {
	background-color: #fff;
	transition: all 0.5s;
}
.btn.btn-outline-danger:hover {
	color: var(--contrast-color);
}
.btn.btn-outline-secondary:hover {
	background-color: var(--bs-secondary);
	color: var(--contrast-color);
}
.bg-danger {
	background-color: var(--main) !important;
}

.owl-theme .owl-dots .owl-dot:hover span {
	background: var(--main-50);
}
.owl-theme .owl-dots .owl-dot.active span {
	background: var(--heading-color);
}
.owl-theme .owl-dots .owl-dot span {
	background: var(--main-20);
}

a, a *{
	transition: all 0.5s;
}
.blog-list div:hover > a img{
	opacity:0.8;
}
a:hover img{
	transform: scale(1.05) !important;
}
.content_details > .row > .justify-content-center:has( .image-align-Right) {
	justify-content: end !important;
}
.content_details > .row > .justify-content-center:has( .image-align-Left) {
	justify-content: start !important;
}
a > img{
  /* Force GPU acceleration */
  transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  
  /* Smooth rendering */
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  -webkit-transform-style: preserve-3d;
  
  /* Transition */
  transition: transform 0.3s ease-out;
  will-change: transform;
}

a:hover > img{
  transform: translate3d(0, 0, 0) scale3d(1.02, 1.02, 1)!important;
  -webkit-transform: translate3d(0, 0, 0) scale3d(1.02, 1.02, 1)!important;
}
a.mergetags_button_view i {
	margin-left: 8px;
}
a.mergetags_button_view ~ a {
	margin-left: 12px;
}
a.mergetags_button_view.btn-secondary {
  background-color: var(--bs-secondary);
  color: #fff;
  font-weight: 600;
  outline: none;
  border: none;
  box-shadow: 0 8px 18px rgba(255, 106, 0, .32);
}
a.mergetags_button_view.btn-secondary:hover {
	transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(255, 106, 0, .42);
}
a.mergetags_button_view.btn-opacity {
	background: rgba(255, 255, 255, .12);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
	color: #fff;
  border: none;
}
a.mergetags_button_view.btn-opacity:hover {
	transform: translateY(-2px);
}
a.mergetags_button_view{
	position: relative;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	width: auto;
	text-decoration:none;
	padding: 12px 16px;
	margin-top: -6px;
	margin-bottom: 6px;
	color: var(--main);
	font-weight: 600;
}
a.mergetags_button_view span{
  position: relative;  
}

.border-light {
	border-color: var(--main-10) !important;
}

#applyThemeBtn {
	position: fixed;
  top: 650px;
  right: 15px;
  z-index: 900;
  padding: 8px 12px;
  background: var(--bg-gradient);
  border-radius: var(--bs-border-radius) !important;
  color: #fff;
  font-weight: 700;
  border: none;
}
#applyThemeBtn ~ a.scrolltop:has(.active) {
  bottom: 100px;
}
#applyThemeBtn * {
	color: var(--contrast-color);
}
.btnchange.dropdown-menu  {
	padding: 0 !important;
}
.btnchange .btnchange_purple a,
.btnchange .btnchange_red a {
	color: #fff;
}
.btnchange .btnchange_purple a:hover,
.btnchange .btnchange_red a:hover {
	background-color: unset;
	filter: brightness(1.4);
	transition: filter 0.3s ease;
}
.btnchange .btnchange_red a{
	background: linear-gradient(140deg,rgb(255, 78, 78) 0%, rgb(255, 126, 133) 5%, rgb(242, 91, 91) 20%, rgb(187, 11, 19) 50%, rgb(196, 0, 6) 80%, rgb(177, 16, 21) 90%, rgb(157, 12, 16) 100%) !important;
}
.btnchange .btnchange_purple a{
	background: linear-gradient(310deg, rgb(97, 29, 83) 0%, rgb(155, 53, 95) 50%, rgb(217, 139, 223) 100%) !important;
}
#home-page-banner, button.YeucauBaogia, .products_main .accordion .accordion-header > button[aria-expanded="true"], .home-page-products .tpsection__title {
	background: var(--bg-gradient);
}
button.YeucauBaogia:hover {
	filter: brightness(1.3);
}
.right-menu .btn * {
	color: var(--main);
}
.right-menu .btn:hover * {
	color: var(--icon-color-2);
}
.blog-list > div:hover .h5 {
	color: var(--heading-color);
}

/*----------dots---------------*/
#banner .owl-dots {
   	text-align: left;
    position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}
#banner .owl-dot {
  min-height: 44px; /* Kích thước tối thiểu */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  background: transparent;
}
#banner .owl-dots span{
	display:block;
  	width:25px;
  	height:4px;
  	background-color:var(--bs-primary-bg-subtle);
  	margin: 5px 7px;
	border-radius: 30px;
}
#banner .owl-dots .owl-dot.active span {
	width: 40px;
}
#banner .owl-dots .owl-dot.active span, 
#banner .owl-dots .owl-dot:hover span {
   	background: var(--bs-info);
}

#banner .owl-dots button:focus {
	outline: none;
}

.home-page-banner {
	padding: 60px 0;
}
/*--------------Header------------*/
.header #menu .show .dropdown > ul.active {
	display:block;
}
.header #menu .show .dropdown .dropdown > ul {
	display:none !important;
}
.header #menu .show .dropdown .dropdown > ul.active {
	display:block !important;
}
.header #menu .show .dropdown .dropdown > ul.active.d-flex {
	display:flex !important;
}
.header .right-menu > a {
	color:var(--default-color);
}
.header .right-menu > a:hover {
	color:var(--nav-hover-color)
}
#header #search .dropdown .form-control {
	box-shadow: 0 0 0 2px var(--main-30);
	padding-right: 40px;
}
.form-control:focus {
	box-shadow: 0 0 0 .25rem var(--main-30) !important;
	border-color: transparent;
}
.products_main #filter_brand:focus,
.products_main #filter_sort:focus {
	box-shadow: 0 0 0 .25rem var(--color-purple-main-30);
	border-color: var(--color-purple-main-30);
}
.header .right-menu .bi-x:before {
	color: var(--heading-color);
}
.header #search .input-group .form-control:focus {
	box-shadow:none;
}
.header #search .input-group .form-control {
	background-color: #f3f4f7;
	border-radius: 8px !important;
}
.header-container .mobile-nav-toggle {
	color: var(--main);
}
.header-container .mobile-nav-toggle:hover {
	color: var(--icon-color-2);
}
.header #search {
	position:unset;
}
.header .header-container .right-menu {
	margin-left:auto;
}

#header #v-pills-tab button:hover{
	border:0;
}
#header #v-pills-tab button{
	background-color: #fff;
    font-weight: 600;
    border-color: #fff; 
}
#header #search > form > div {
	position: relative
}
#header #search #nuttimkiem {
	position: absolute;
  right: 0;
  border-radius: 10px !important;
}
#header #v-pills-tab button.active {
    background: linear-gradient(140deg,rgb(255, 78, 78) 0%, rgb(255, 126, 133) 5%, rgb(242, 91, 91) 20%, rgb(187, 11, 19) 50%, rgb(196, 0, 6) 80%, rgb(177, 16, 21) 90%, rgb(157, 12, 16) 100%);
    color: #fff;
    font-weight: 700;
	border:0!important;
}
#menu .dropdown ul.shadow:not(.megamenu) a,
#menu .dropdown ul.shadow:not(.megamenu) a:focus {
	font-weight: 500;
	font-size: 15px;
}
.megamenu #v-pills-tabContent .tab-pane{
	min-height:400px;
	overflow-y:auto;
}
.megamenu #v-pills-tabContent .tab-pane a{
	padding:2px 10px;
}
/*------------breadcrumb-------*/
.breadcrumb .breadcrumb > li:not(:last-child) > a:hover {
	color: var(--heading-color) !important;
}
.breadcrumb .breadcrumb > li:not(:last-child) > a {
	color: var(--default-color) !important;
}
.breadcrumb .breadcrumb > li:last-child > a {
	pointer-events: none
}
.breadcrumb .breadcrumb {
	line-height:26px;
}
.breadcrumb .subMenu .owl-stage .owl-item [data-active*="active"]{
	background: var(--bg-gradient);
	color:#fff;
	padding: 6px 18px; 
}
.breadcrumb .subMenu .owl-stage .owl-item .btn-secondary:hover {
	background-color:var(--main-20) !important;
}
.breadcrumb .subMenu .owl-stage .owl-item .btn-secondary {
	background-color:rgb(243, 243, 243)!important;
	padding: 6px 18px;
}
/*-----------trang chủ-----------*/
/*-----------banner-------------*/ 
#home-banner-top .owl-stage-outer .item .item_title.item_title_top h4 {
	position: absolute;
  z-index: 1;
  bottom: 16px;
  left: 20px;
  right: 20px;
  font-size: 22px;
  font-weight: 600;
}
#home-banner-top .owl-stage-outer .item .item_title.item_title_top button {
	position: absolute;
  z-index: 1;
  margin-right: 20px;
  left: 20px;
  background: white;
  color: var(--main);
  text-align: left;
  top: 20px;
  font-weight: 600;
  font-size: 14px;
}
#home-banner-top .mergetags_slider .owl-stage-outer .item {
	border: 4px solid rgba(255, 255, 255, .12);
	border-radius: 16px;
	overflow: hidden;
}
#home-banner-top .owl-stage-outer .item .image {
	position: relative;
}
#home-banner-top .owl-stage-outer .item .image:after {
	content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(7, 40, 94, .55));
}
#home-page-banner #banner .banner-thongtin .col-lg-6 .ge-content {
	display: flex;
	align-items: center;
	gap: 6px;
}
#home-page-banner #banner .banner-thongtin .col-lg-6 .ge-content p:has(img) {
	webkit-box-sizing: content-box;
    box-sizing: content-box;
	display: inline-block;
	padding: 13px;
	border: 2px solid transparent;
	border-radius: 50%;
	vertical-align: middle;
	background:
    radial-gradient(120% 120% at 30% 20%, #2a4f96 0%, #1b3a7a 45%, #12285c 100%) padding-box,
    linear-gradient(180deg, #7ea6ff 0%, #3d6bd6 40%, rgba(61,107,214,.3) 100%) border-box;
	-webkit-box-shadow:
      0 0 18px rgba(70,120,255,.45),
      inset 0 -6px 12px rgba(0,0,0,.4);
          box-shadow:
      0 0 18px rgba(70,120,255,.45),
      inset 0 -6px 12px rgba(0,0,0,.4);
}
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.6);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(22, 163, 74, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(22, 163, 74, 0);
    }
}
/*-----------Danh mục sản phẩm-------------*/ 
#home-page-6-danh-muc-chinh .sau-danh-muc-chinh ul.mergetags-parent-san-pham {
	display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 40px;
}
#home-page-6-danh-muc-chinh .sau-danh-muc-chinh ul.mergetags-parent-san-pham li {
	flex: 0 0 calc((100% - 80px) / 3);
  margin: 0;
  overflow: hidden;
  position: relative;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
  transform: translateZ(0);
}
#home-page-6-danh-muc-chinh .sau-danh-muc-chinh ul.mergetags-parent-san-pham li::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 60%, rgba(0,0,0,0) 100%);
	z-index: 1;
	pointer-events: none;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
#home-page-6-danh-muc-chinh .sau-danh-muc-chinh ul.mergetags-parent-san-pham li:hover::after {
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%);
}
#home-page-6-danh-muc-chinh .sau-danh-muc-chinh ul.mergetags-parent-san-pham li a {
	display: block;
}
#home-page-6-danh-muc-chinh .sau-danh-muc-chinh ul.mergetags-parent-san-pham li a span {
	position: absolute;
	bottom: -28px;
	left: 16px;
	z-index: 2;
	color: #fff;
	font-weight: 600;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	font-size: 22px;
}
#home-page-6-danh-muc-chinh .sau-danh-muc-chinh ul.mergetags-parent-san-pham li:hover a span {
	bottom: 16px;
}
#home-page-6-danh-muc-chinh .sau-danh-muc-chinh ul.mergetags-parent-san-pham li a img {
	width: 100%;
	display: block;
	vertical-align: top; /* thêm dòng này */
}
/*----------Tin dùng------------*/
#home-page-tin-dung .ge-content span.bi {
	background: #FFF1E5;
	padding: 10px 12px;
	border-radius: 50%;
}
#home-page-tin-dung .home-page-tin-dung-cot .ge-content {
	position: relative;
	overflow: hidden;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
#home-page-tin-dung .home-page-tin-dung-cot .ge-content:hover {
	transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(15,23,42,.08);
    border-color: transparent;
    background: white;
}
#home-page-tin-dung .home-page-tin-dung-cot .ge-content::before {
	content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--bs-secondary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s;
}
#home-page-tin-dung .home-page-tin-dung-cot .ge-content:hover::before {
    transform: scaleX(1);
}
/*----------Giới thiệu------------*/
#home-page-gioi-thieu .column {
  margin-bottom: 12px;
  position: relative;
}
#gioithieu-trangchu-icon span.bi {
    padding: 10px 13px;
    background-color: var(--main-10);
    margin-right: 12px;
	display: inline-block;
    border-radius: 12px;
}
#gioithieu-trangchu-icon > .align-items-center > div:last-child {
	padding-left: 36px;
}
#home-page-gioi-thieu .ge-content p> img {
	border-radius: var(--bs-border-radius-xl);
}
/*----------Số liệu------------*/
#home-page-so-lieu {
	background-size: cover;
  background-position: center;
}
#home-page-so-lieu.isBg {
    position: relative;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
#home-page-so-lieu.isBg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(7,40,94,.92),
        rgba(11,61,145,.88)
    );
    z-index: 0;
    pointer-events: none;
}
#home-page-so-lieu.isBg > .container {
    position: relative;
    z-index: 1;
}
/*----------Đối tác trang chủ------------*/
#slide-homepage-partner .mergetags_slider {
  padding: 36px 24px;
  background-color: var(--main-bg-accent);
  border-radius: 12px;
  border: 1.5px solid #E2E8F0;
}
#slide-homepage-partner .mergetags_slider .item {
	padding: 10px;
  background: #fff;
  border: 1.5px solid #E2E8F0;
  border-radius: 8px;
}
#slide-homepage-partner .mergetags_slider .item .image {
	height: 54px;
}
#slide-homepage-partner .mergetags_slider .item .image img {
	object-fit: contain;
	height: 100%;
}
#slide-homepage-partner .owl-stage {
	will-change: transform;
}
#slide-homepage-partner .owl-item img {
	pointer-events: none;
}
#slide-homepage-partner .item a {
	pointer-events: none;
}
/*----------GTA trang chủ------------*/
#home-page-form > div > .row {
	background: radial-gradient(700px 400px at 90% 0%, rgba(255,106,0,.3), transparent 60%), linear-gradient(135deg, #07285E, #0B3D91);
  padding: 52px 40px;
  border-radius: 20px;
}
#home-page-form #trangchu_form_page .form-label {
	font-weight: 600; 
	color: var(--main);
} 
 
/*----------Thương hiệu------------*/
/*----------Trang giới thiệu------------*/
#gioi-thieu-gia-tri-cot-loi .cot-1 span.bi {
  padding: 10px 13px;
  background-color: var(--main-10);
  margin-right: 12px;
  border-radius: 12px;
}
#gioi-thieu-gia-tri-cot-loi .cot-2 p:has( > .bi) {
	background: #f4f5f6;
} 
#gioi-thieu-gia-tri-cot-loi .cot-2 {
	margin-left: 0;
	margin-right: 0;
}
#gioi-thieu-lien-he .ge-content.ge-content-type-tinymce {
	background: var(--bg-gradient);
}
/*----------end------------*/

#home-page-products-equipment .home-page-products > .align-self-center {
	align-self: unset !important;
}

.home-page .ge-content .tpsection__title {
	line-height:1.5;
}
.owl-loaded.owl-carousel.owl-drag .owl-nav > button {
	position: absolute;
  top: 50%;
  transform: translateY(-21px);
  font-size: 18px;
  line-height:40px;
  background-color: #fff;
  height:40px;
  width:40px;
  border-radius: 50%;
  box-shadow: 0 1px 1px #ccc;
  color: var(--main);
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
.owl-loaded.owl-carousel.owl-drag .owl-nav > button:hover {
	color: #2b0404;
}

.owl-loaded.owl-carousel.owl-drag .owl-nav {
	opacity: 0;
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;
}
.owl-loaded.owl-carousel.owl-drag:hover .owl-nav {
	opacity: 1 !important;
	visibility: visible !important;
}
.owl-loaded.owl-carousel.owl-drag .owl-nav .owl-prev {
	left:0;
}
.owl-loaded.owl-carousel.owl-drag .owl-nav .owl-next {
	right: 0;
}
.owl-theme .owl-nav .disabled {
	opacity: 1 !important;
}
/*----------chi tiết sản phẩm---------------*/
#soluongSanpham {
	min-width: 20%;
}
.tpsection__title a span:last-child {
	position:relative;
}
.products_main .tab-content ul li:not(:last-child) {
	margin-bottom: 10px;
}
/*-----------Menu sản phẩm----------------*/
.megamenu *{
	color:var(--nav-dropdown-color)!important;
}
.megamenu :is(h1,h2,h3,h4,h5){
	font-weight:400;
}
.megamenu div > a{
	all:unset!important;
	display: flex !important;
	align-self: center !important;
	align-items: center !important;
	width:100%!important;
	position:relative!important;
	padding-top:0px!important;
	padding-bottom:1px!important;
	cursor:pointer!important;
	font-weight:bold;
	
}
.megamenu div > a > img {
	width: 40px !important;
	height: 40px !important;
	border-radius: 50%;
	margin-right: 12px;
	box-shadow: 0 1px 1px #ccc;
	background-color: #fff;
	padding: 1px;
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
	filter: grayscale(100%);
	
}

.megamenu div > a span{
	display: inline-block;
	max-width: calc(95% - 40px);
	word-wrap: break-word;
	white-space: -moz-pre-wrap;
	white-space: pre-wrap; 
}
.megamenu div > a:hover > img {
	-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
	filter: grayscale(0%);
}
/*-----------sản phẩm----------------*/
.removeFilter {
	cursor: pointer;
}
.removeFilter:hover {
	color: var(--nav-hover-color) !important;
}
.page-link:focus {
	box-shadow: none;
}
.megamenu a:hover * {
	color: var(--nav-hover-color) !important;
}
.product_detail > div:hover,
.product_detail > div:focus {
	border: 1px solid var(--accent-color) !important;
}
.product_detail a p {
	color: var(--heading-color);
	font-size: 1rem;
}
.product_detail a p label {
	cursor: pointer;
}
.product_detail a p:hover {
	color: var(--accent-color);
}
.home-page-products .mergetags > .mergetags li {
	display: flex;
    width: 100%;
	margin-bottom: 8px;
}
.home-page-products .mergetags > .mergetags {
	display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding-left: 0;
}
.home-page-products .mergetags > .mergetags li a {
	display: flex;
    flex-direction: row-reverse;
    align-items: center;
	width: 100%;
    color: var(--default-color);
	padding: 0px;
    font-weight: 600;
	justify-content: flex-end;
	transition: all 0.3s;
}
.home-page-products .mergetags > .mergetags li a:hover {
	color: var(--nav-hover-color);
	margin-left:5px;
}
.home-page-products .mergetags .mergetags > li > a > span {
	text-decoration: none;
  position: relative;
  color: inherit;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-page-products .mergetags > .mergetags li a img {
	min-width: 44px;
	max-height: 44px;
    margin-right: 10px;
    border-radius: 50%;
    background-color: #fff;
    padding: 1px;
    box-shadow: 0 1px 1px #ccc;
	overflow:hidden;
	object-fit: cover;
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
	filter: grayscale(100%);
}
.home-page-products .mergetags > .mergetags li a:hover img{
	-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
	filter: grayscale(0%);
}
.home-page-products .tpsection__title {
    background-color: var(--heading-color);
    text-align: center;
	margin-bottom: 0;
}
#v-pills-tabContent .tab-pane > div > a:hover span:after {
	transform: scaleX(1);
}
#v-pills-tabContent .tab-pane > div > a > span {
	position: relative;
}
#v-pills-tabContent .tab-pane > div > a > span:after {
	content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 1px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

#hotnews div a.view i,
#hotnews div a.view span {
	color: var(--heading-color);
}
.home-page-products .tpsection__title a {
	color: #fff;
    padding: 10px 10px;
	display: block;
	text-shadow: 0px 0px 2px #616161;
}

.product_detail a img {
	height: 200px;
	width:100%;
	object-fit: contain;
	transform: scale(0.9);
	border-radius: var(--bs-border-radius) !important;
}
.product_detail a h3.h6 {
	display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
	height: 39px;
	color: var(--default-color);
	font-weight: 600;
	margin-top: 16px !important;
}
.product_detail:hover a h3.h6 {
	color: var(--nav-hover-color) !important;
}
#nav-tabContent > div:has(> div:last-child:empty:not([title="Nhấp vào để sửa"])) {
    display: none;
}
.home-page-products .mer_products .product_detail .product-info-addon img{
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
	filter: grayscale(100%);
}
.home-page-products .mer_products .product_detail:hover .product-info-addon img{
	-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
	filter: grayscale(0%);
}
/*----------------------------------------------*/
#nav-tabContent .input-group * {
	cursor: pointer;
}
.products_main nav #nav-tab .nav-link.active {
	font-weight: 500; 
	color: var(--surface-color)
}
#product .ge-content a.view {
  text-decoration: none;
  padding: 8px 0;
  position: relative;
}

#product .ge-content a.view:hover {
  color: #9d0b0f;
}

#product .ge-content a.view:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 96%;
  height: 2px;
  background-color: var(--main);
  transform: scaleX(1);
  transform-origin: bottom left;
  transition: transform 0.3s ease;
  opacity: 0.5;
}

#product .ge-content a.view:hover:after {
  transform: scaleX(0);
  transform-origin: bottom right;
  opacity: 1;
}

#none > div .mergetags li:nth-last-child(-n+2) {
    display: none;
}
.products_main .lienquan .item img {
	height: 200px;
  object-fit: contain;
}
.tpsection__title a:hover span:last-child:after {
	width: 100%;
	color:#000;
}
.tpsection__title a span:last-child:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -7px;
  width: 0;
  height: 2px; 
  background-color: #9d0b0f;
  transition: width 0.3s ease;
}
.products_main .accordion .accordion-header > button[aria-expanded="true"]:after {
	transform: rotate(180deg);
	filter: brightness(0) invert(1);
}
.products_main .accordion .accordion-header > button[aria-expanded="true"] {
	margin-bottom: 6px;
}
.products_main .accordion .accordion-button {
	font-size:18px;
	padding: 10px !important;
	transition: all 0.5s;
}
.products_main .accordion .accordion-button:hover {
	background-color: var(--main-20);
}
.products_main .accordion .categorylist.active > a span {
	color: var(--heading-color);
}
.products_main .accordion .categorylist.has-active > a span {
	color: var(--heading-color);
}
.products_main .accordion-item .dropdown li.active a {
	color: var(--heading-color) !important;
}
.product_top {
	padding-bottom:0px;
}
.products_main #nav-tabContent .tab-pane :is(h1, h2, h3, h4, h5, h6) {
    color: #263238;
}

#product > div > .ge-content .view.btn {
	color:var(--main);
}
.home-page-products #product .ge-content > h3 {
	border-bottom: 1px solid var(--bg-hover);
    padding-bottom: 18px;
}
.home-page-products {
	margin-top: 20px;
}
.home-page-products #product .ge-content,
.home-page-news #news .ge-content,
.home-page-news #news-2 .ge-content {
	position:relative;
}
.home-page-products #product .ge-content strong .viewall {
	color: var(--heading-color);
}
.home-page-products #product .ge-content strong .viewall:hover {
	color: var(--accent-color);
}
.cungdanhmuc .doingu_slider > .owl-dots {
	display: none;
}
#product .mergetags .mergetags {
	display:flex;
	flex-wrap:wrap;
	list-style:none;
	padding-left:0px;
}
#product .mergetags .mergetags > li {
	display:flex;
	width: 100%;
}
#product .mergetags .mergetags a {
	display: flex;
    flex-direction: row-reverse;
	align-items: center;
	text-align:left;
	color:var(--default-color);
	font-weight: 700;
}

#product .mergetags .mergetags a:hover {
	color:var(--heading-color);
}
#product .mergetags .mergetags a img {
	max-width:50px;
	margin-right:10px;
	margin-bottom:5px;
	border-radius:50%;
	background-color: var(--main-10);
    padding: 5px;
    box-shadow: 0 1px 1px #ccc;
}
.products_filters .ps-1 * {
	cursor: pointer;
}
.products_filters select option {
	text-align: left;
}
.products_filters .ps-1 select {
	text-align: center;
}
.mergetags_lienquan .item > div {
	border: 1px solid #fff;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.mergetags_lienquan .item > div:hover {
	border: 1px solid var(--accent-color) !important;
}

.cungdanhmuc_slider .mer_products:not(.owl-carousel),
.mergetags_lienquan:not(.owl-carousel) {
	display: none;
}
.mergetags_lienquan .owl-stage > div {
	padding:0 10px;
}

.subMenu:not(.owl-carousel) {
	display: none;
}
#cactuychonFilterList:not(:has(.filter-group)) ~ a {
  display: none;
}
#cactuychonFilterList p {
	margin-bottom: 0;
}
/*---------Giới thiệu---------*/

/*----------------Sản phẩm----------------*/

.tin_moidang .back {
	color: var(--heading-color);
}
.tin_moidang .back {
  text-decoration: none;
  padding: 8px 0;
  position: relative;
}

.tin_moidang .back:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 96%;
  height: 2px;
  background-color: var(--heading-color);
  transform: scaleX(1);
  transform-origin: bottom left;
  transition: transform 0.3s ease;
  opacity: 0.5;
}

.tin_moidang .back:hover:after {
  transform: scaleX(0);
  transform-origin: bottom right;
  opacity: 1;
}
.products_main .cungdanhmuc .owl-stage .owl-item {
	padding:0 10px;
} 

.product_top .owl-hqv-theme .owl-next, .product_top .owl-hqv-theme .owl-prev {
	top:3px;
}
.accordion .accordion-body .categorylist > ul {
	display:none;
    list-style: none;
    border-left: 2px solid #ccc;
    margin-left: 22px;
	padding-left: 0;
    margin-top: 0;
}
.accordion .accordion-body .categorylist.active > ul,
.accordion .accordion-body .categorylist ul:has(.active) {
	display:block;
}
/*----------Đặt hàng-----------*/
.DatHang #dathangBmau > .row > div:has(.table.danhsachSanpham > tbody:empty) ~ div {
	display: none;
}
.DatHang #dathangBmau > .row > div:first-child:has(.table.danhsachSanpham > tbody:empty) {
	width: 100%;
}
.DatHang #dathangBmau .form label {
	margin-bottom: 5px;
}
/*----------Pagination-----------*/
.pagination .page-item.disabled .disabled {
	color: #fff !important;
    background-color:var(--main-50);
    border-color: var(--main-50) !important;
}
.pagination .page-item .page-link:hover {
    background-color: var(--main-30) !important;
    border-color: var(--main-30) !important;
}

/*-----------Tin tức---------*/ 
.blog-list .blog-content .description h2.h5 {
	display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  height: 72px;
}
.blog-list .blog-content {
	border-radius: 6px;
    overflow: hidden;
    border: 1px solid #E2E8F0;
}
.blog-list .description > a {
    padding: 22px 20px 10px;
    display: block;
}
.blog-list .image a {
	display: block;
	overflow: hidden;
}
.blog-list a > p {
	color: var(--default-color);
}
.blog-list .img-fluid {
	width: 100%;
}
.tin_moidang .back {
	font-size:1.2rem;
}
[data-id="413"] .section:last-child {
	margin-bottom:60px;
}
[data-id="413"] section .ge-content :is(h1, h2, h3, h4, h5, h6) {
	color: var(--default-color)
}
[data-id="413"] section .ge-content {
	padding: 40px 28px;
}
[data-id="413"] .main section:not(:last-of-type) {
	border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
	padding-bottom:30px;
}
[data-id="413"] main section {
	background-image: none !important;
}
.content_details .table_of_contents {
	border-top: 1px solid #d9d9d9;
	padding-top: 20px !important;
}
.content_details .table_of_contents:has(.autoContents:empty) {
  display: none;
}
.content_details .table_of_contents .autoContents li {
	margin-bottom: 6px;
}
.content_details .table_of_contents h3 {
	font-size: 24px;
}
.content_details .table_of_contents .autoContents li > a:hover span {
	color:var(--heading-color);
}
.content_details .detailsofblog .ge-content li {
	margin-bottom:6px;
}
.contents .tin_moidang > .d-flex h2.h5 {
	font-size: 1.6rem;
	color: var(--heading-color);
}
.content_details .contentWrap .metadata > div:first-child {
	display: flex;
    align-items: center;
}

.contents .blog-list .card:hover {
	box-shadow: 2px 2px 8px #c7c7c7;
}
.home-page-products .dropdown > button:hover {
	filter: brightness(1.3);
}
.home-page-products .dropdown > button {
	background: var(--bg-gradient);
  border: none;
  color: #fff !important;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  -webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.blog-list h5:first-letter{
	text-transform:uppercase;
}
.blog-list.mt-4 a .btn * {
	transition: unset;
}
#tintucnoibat_tieude h5{
	display:flex;
	-webkit-box-pack: justify !important;
  -ms-flex-pack: justify !important;
  justify-content: space-between !important;
  align-items:center;
}
#tintucnoibat_tieude h5 strong span {
	color:var(--bs-link-color);
}

.product_detail a:has(img){
	display:block;
	overflow:hidden;
}
#tai-xuong-brochure {
	padding: 3rem 0;
}

#mucluclist ~ ul {
	left: 50% !important;
	transform: translateX(-50%) translateY(40px) !important;
}
.blog-list .card-body {
	margin-top:-16px;
}
.blog-list .card-body > a:first-child {
	display:none;
}
.blog-list .card-header {
	display:flex;
	flex-direction: column;
	background:none;
}
.blog-list .card-header > div {
	display:block !important;
	padding: 4px 0 !important;
}
.tin_moidang .card .card-img {
    width: 100%;
	overflow:hidden;
}
.tin_moidang .card .card-img img {
	height: 100%;
    width: 100%;
	object-fit: cover;
	object-position: top;
}
.content_details .detailsofblog .ge-content img,
.content_details .detailsofblog .ge-content iframe {
	max-width:100%;
}
.content_details .table_of_contents * {
	color:#000;
}
.content_details .detailsofblog .ge-content :is(h1, h2, h3, h4, h5, h6) {
  color: var(--default-color);
}
.tin_moidang .random_item .card-header > h4 {
	height:48px;
	color:#263238;
	display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.contents .blog-list .card-header h2 {
	color: var(--heading-color);
	font-size:18px;
	display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; 
	height:48px;
	padding-top: 4px;
}
/*.contents .blog-list .card-body .btn-outline-primary {
	font-weight: bold;
    background: linear-gradient(140deg,rgb(255, 78, 78) 0%, rgb(255, 126, 133) 5%, rgb(242, 91, 91) 20%, rgb(187, 11, 19) 50%, rgb(196, 0, 6) 80%, rgb(177, 16, 21) 90%, rgb(157, 12, 16) 100%) !important;
    color: #fff;
    border-radius: var(--bs-border-radius) !important;
    border: none;
    padding: 6px 20px;
}*/
.tin_moidang .masonry-grid-column > div:hover h4.h5 {
	  color: var(--heading-color);
}
.contents .blog-list .card-body > a > i {
	color:#000;
	font-size:20px;
}
.content_details #title {
	color:#212529;
}
.content_details .image_details {
	cursor:pointer;
	max-width: 100%;
	width:100% !important;
}
.tin_moidang .card .card-header {
	padding:10px 0 0 0;
	background-color: transparent !important;
}
#mucluclist ~ ul ul {
	padding-left: 12px;
	  list-style: disc;
	  line-height: 24px;
}
#mucluclist ~ ul > ul > ul {
	list-style: circle;
}
#mucluclist ~ ul > ul a {
	color: var(--default-color);
}
#mucluclist ~ ul > ul a strong {
	font-weight: normal;
}
#mucluclist ~ ul > ul li:hover a {
	color: var(--main)
}
.content_details .dropdown:has( ul:empty) {
	display: none;
}
/*--------Thương hiệu phân phối-----------*/
#thuong-hieu-phan-phoi .mobile-dropdown-menu {
	display: none;
}
#thuong-hieu-phan-phoi .mergetags_menu {
	display: block !important;
}
#thuong-hieu-phan-phoi .mergetags-parent-thuong-hieu {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	padding-left: 0;
}
#thuong-hieu-phan-phoi .mergetags-parent-thuong-hieu-item {
	width: 20%;
	padding: 0 10px;
	text-align: center;
	position: relative;
	margin-bottom: 20px;
}
#thuong-hieu-phan-phoi .mergetags-parent-thuong-hieu-item:hover span {
	
}
.mergetags-parent-thuong-hieu-item a {
	display: block;
}
.mergetags-parent-thuong-hieu-item a span {
	position: absolute;
	z-index: 20;
	top: 50%;
	transform: translateY(-50%);
	display: none;
}

.mergetags-parent-thuong-hieu-item img {
	width: 100%;
	box-shadow: 0 .125rem .25rem rgba(0, 0, 0, 0.075);
	border-radius: 0.25rem;
}
/*--------Footer-----------*/
.footer .footer-top > .row p,
.footer .footer-top > .row ul > li {
	font-size:1.05rem;
}
.footer .footer-top #footer-des-menu img {
	max-width:100%;
}
#footer .ge-content ul {
	padding-left: 16px;
}
#footer .ge-content ul li {
	margin-bottom: 10px;
}
#footer .ge-content ul li * {
	color: var(--main-20);
	font-size: 15px;
}
/*------------Video-------------*/
section.bg-dark .row > div h3 ~ .row {
	justify-content: center;
}
.videolisting .card-img {
	overflow: hidden;
}
/*------------Liên hệ-------------*/
#lien-he-form {
	position: relative;
}
#lien-he-form > .ge-content {
  margin: 0;
  box-shadow: 0 25px 50px -12px #CBD5E9;
  padding: 38px 36px;
  background-color: #fff;
  border-radius: 18px;
  position:relative;
}
#lien-he-form span.bi {
  padding: 10px 13px;
  background-color: var(--main-10);
  margin-right: 12px;
  border-radius: 12px;
  position: absolute;
  left: 24px;
  top: 40px;
}
#lien-he-form #contactForm .form-label {
  color: #595959;
  font-size: 14px;
  font-weight: 600;
}
#lien-he-gioi-thieu > div > .row {
	padding: 42px 32px;
	border-radius: 28px;
	background:
    radial-gradient(circle at -5% 10%, rgb(21 84 183 / .10), transparent 40%),
    radial-gradient(circle at 110% 90%, rgb(21 84 183 / .12), transparent 42%),
    linear-gradient(135deg, #ffffff 0%, #f9fbff 60%, #edf5ff 100%);
	box-shadow: 0 12px 30px rgba(15, 42, 83, 0.08);
}
#lien-he-icon span.bi {
	padding: 10px 13px;
  background-color: var(--main-10);
  margin-right: 12px;
  border-radius: 12px;
  display: inline-block;
}

#lien-he-cam-ket-chat-luong .item .ge-content img {
	padding: 12px;
  background-color: #e8edf4;
  border-radius: 50%;
}
#lien-he-cam-ket-chat-luong .item .ge-content {
	position: relative;
	
}
#lien-he-cam-ket-chat-luong .item .ge-content::after {
	content: "";
  position: absolute;
  width: 90px;
  height: 3px;
  background: #ff7a00;
  left: 50%;
  transform: translateX(-50%);
  bottom: -1px;
  border-radius: 50px;
}
/*----------------footer-------------------*/
.footer #footer-des h4 {
	border-bottom: 1px solid #484848;
	margin-bottom: 16px;
	position: relative;
}
#footer .gg-map a {
	background-color: transparent;
    padding: 0;
    color: #000;
    font-weight: 700;
    border-color: transparent;
}
.footer #footer-des h4:after {
	content: "";
  position: absolute;
  height: 3px;
  width: 58px;
  background: var(--heading-color-button);
  bottom: -2px;
  left: 0;
}
#footer_logo .logo {
	background-color: #fff;
	padding: 10px 0;
	border-radius: var(--bs-border-radius) !important;
}
#footer_logo .logo img {
	height: 46px;
	width: 100%;
}
#footer .gg-map img {
	height: 70px;
  width: 70px;
}
#footer #footer-des .ge-content ul {
	list-style:none;
	padding-left:0;
}
#footer #footer-des .ge-content ul:not(.social_media) * {
	margin-bottom:10px;
	font-weight: 600;
    color: #cecece;
}
#footer-des-menu .mobile-dropdown-menu {
	display: none;
}
#footer-des-menu .mergetags {
	display: block !important;
}
#footer #footer-des .ge-content ul *:hover {
	color: #fff !important;
}
#footer .footer-top > .row > div {
	margin-bottom:20px;
}
/*---------------------Mobile--------------------*/
.mobile-menu-body > ul > li:has([style="display: block;"]) > a {
	padding-left: 15px;
}
.mobile-menu-body > ul li > a {
	color: var(--nav-color);
}
.mobile-menu-body > ul li:hover > a {
	color: var(--nav-hover-color);
}
.mobile-menu-body > ul li a.active {
	background: var(--main-accent) ;
	color: var(--nav-hover-color);
}
.mobile-menu-body .dropdown-menu > .container .row > div {
	width: 100%;
}
.mobile-menu-body .dropdown-menu a h4 {
	font-size: 1.05rem !important;
	margin: 0.5rem 0;
}
.mobile-menu-body > ul .dropdown.active i {
	transform: rotate(-180deg);
}
.mobile-menu-body .dropdown-menu > div > div > div > * {
	padding-left: 15px !important;
	transition: all 0.3s ease !important;
	box-sizing: border-box !important;
}
.mobile-menu-body .dropdown-menu > div > div > div > a:hover {
	padding-left: 30px !important;
	box-sizing: border-box !important;
}
.mobile-menu-body .dropdown-menu .row .row a {
	font-size: 14px !important;
	transition: all 0.3s ease !important;
}
.mobile-menu-body .dropdown-menu .row .row a:hover {
	padding-left: 15px;
	box-sizing: border-box !important;
}
.accordion-body .categorylist i {
	padding: 18px;
}
.accordion-body .categorylist ul a {
	padding: 0.4rem 1rem !important;
}
.accordion-button[data-bs-toggle="collapse"] {
	background-color: var(--surface-color);
	color: var(--default-color);
}
.accordion-button[data-bs-toggle="collapse"]:after {
	color: var(--default-color);
	transform: unset;
	filter: brightness(0);
}
/*-------------------media-----------------*/
@media screen and (min-width:576px){
	.about-us #cot-loi > div > div {
		height:373.5px;
	}
	.about-us #phuong-cham > div:not(:first-child) > div {
		height:426px;
	}
}
@media screen and (min-width:768px){
	.home-page-products .mergetags > .mergetags {
		padding:0 4px;
	}
	.blog-list a > p {
	  display: -webkit-box !important;
	  -webkit-line-clamp: 2;
	  -webkit-box-orient: vertical;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  padding-bottom: 2px;
	}
	.header .header-container #search ~ a {
		display:none;
	}
	.about-us #cot-loi > div > div {
		height:298px;
	}
	.about-us #phuong-cham > div:not(:first-child) > div {
		height:410px;
	}
	#product .ge-content > div:first-of-type {
		position:absolute;
		right:0;
		top:-6px;
	}
}
@media screen and (min-width:992px) {
}
@media screen and (min-width:1200px){
	.owl-loaded.owl-carousel.owl-drag .owl-nav .owl-prev {
		left:-40px;
	}
	.owl-loaded.owl-carousel.owl-drag .owl-nav .owl-next {
		right: -40px;
	}
}
@media screen and (max-width:1199px){
	#thuong-hieu-phan-phoi .mergetags-parent-thuong-hieu-item {
		width: 25%;
	}
	#header .header-container .w-75 {
		width: 200px !important;
	}
	
	#header .header-container > div:first-child > a {
		margin-right: unset !important;
	}
	#menu > .show .dropdown:has(ul.active) > a i {
		background-color: var(--accent-color);
        color: var(--contrast-color);
		transform: rotate(-180deg);
	}
	#banner .mergetags_slider .owl-stage .item > a > p {
		top:26%;
	}
	.header .header-container > div:last-child {
		width:unset !important;
	}
	.header .header-container .w-50 {
		order:3;
		width:unset !important;
	}
}
@media screen and (max-width:991px){
	.row#cot-loi {
		justify-content: center !important;
	}
	#tin-banner a img {
		height: 150px !important;
	}
	#home-page-6-danh-muc-chinh .sau-danh-muc-chinh ul.mergetags-parent-san-pham li {
        flex: 0 0 calc((100% - 40px) / 2);
    }
	#home-page-form > .container > .row > div:first-child {
		margin-bottom: 20px;
	}
}
@media screen and (max-width:767px){
	#home-page-gioi-thieu .me-5 {
		margin-right: 0 !important;
	}
	#home-page-banner #home-banner-top {
		margin-top: 30px;
	}
	#trang-chu-dung-cu-vat-tu .mergetags > div:last-child {
		display: none;
	}
	#thuong-hieu-phan-phoi .mergetags-parent-thuong-hieu-item {
		width: 33.33333%;
	}
	.products_filters .col-md-7.d-flex {
		justify-content: start !important;
	}
	.home-page-news #news .card-img {
		padding: 15px;
		height: unset !important;
	}
	.blog-list.owl-sm > div > div:last-child p {
		display: -webkit-box;
	  -webkit-line-clamp: 4;
	  -webkit-box-orient: vertical;
	  overflow: hidden;
	  text-overflow: ellipsis;
	}
	.blog-list.owl-sm > div > div:last-child .h5 {
		display: -webkit-box;
	  -webkit-line-clamp: 2;
	  -webkit-box-orient: vertical;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  padding-top: 10px;
	}
	#banner .owl-stage .owl-item,
	#banner .owl-carousel .item	{
		align-items: unset;
	}
	#search .dropdown {
		position: unset;
	}
	#search .dropdown ul {
		width: 320px !important;
		right: 20px;
	}
	#search #nuttimkiem {
		background-color: unset !important;
	}
	#banner .owl-dots {
		left: 50%;
		transform: translateX(-50%);
	}
	.content_details:has(.table_of_contents > .autoContents:empty) .contentWrap {
		margin-top:20px;
	}
	#banner .mergetags_slider .owl-stage .item h4 {
		margin-top:20px;
	}
	#search:is(:target):before {
		top:54px;
	}
	#search:is(:target) ~ a[href="#close"] {
		display: inline-block;
	}
	#search:is(:target) ~ a[href="#search"] {
		display: none;
	}
	
	.navmenu:is(:target) ~ div a[href="#menu"], #search:not(:target) ~ a[href="#close"] {
		display: none;
	}
	#home-page-brands {
		margin-top:-40px;
	}
	#banner .owl-dots {
		bottom:10px;
		display: inline-flex;
	}
	#banner .owl-carousel .item a > div {
		align-self:unset !important;
		width:100%;
	}
	#banner .owl-carousel .item a {
		flex-direction: column-reverse;
		padding: 40px 0 !important;
	}
	.card .card-img {
		max-height:220px;
		height:unset;
	}
	.catalog .ge-content p img:first-child {
		margin-bottom:1rem;
	}
	#banner .owl-carousel .item a {
		justify-content:start;
		flex-direction:column-reverse;
		padding: 40px 6px 50px;
	}
	#banner .mergetags_slider .owl-stage .item > a > h4,
	#banner .mergetags_slider .owl-stage .item > a > p {
		position:unset;
		margin:10px 0 0 0;
	}
	.home-page #banner .owl-stage .owl-item img {
		width: 100%;
		margin-bottom:24px;
		height:auto;
	}
	#banner .mergetags_slider .owl-stage .item > a > h4 {
		font-size:26px;
	}
	.products_main .d-flex.flex-column > div .product_short_info {
		margin-top:30px;
	}
	.page > div > div > div {
		flex-direction: column;
		align-items: center;
	}
}
@media screen and (max-width:575px){
	#home-page-6-danh-muc-chinh .sau-danh-muc-chinh ul.mergetags-parent-san-pham li {
		flex: 0 0 100%;
	}
	#home-page-form > div > .row {
		padding: 40px 0;
	}
	.products_main .cungdanhmuc .owl-stage .owl-item {
	  padding: 0 .5rem;
	}
	.products_main .cungdanhmuc.cungdanhmuc_slider {
		padding: 0 3px;
	}
	#thuong-hieu-phan-phoi .mergetags-parent-thuong-hieu-item {
		width: 50%;
	}
	#timkiem_input {
        width: 50px !important;
        height: 50px;
        background-position: center !important;
        padding: 0;
        text-indent: -9999px;
        cursor: pointer;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%230B3D91' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E") !important;
		border: none !important;
		background-color: #fff !important;
		margin-right: -10px;
    }
            
    #timkiem_input:focus {
        width: unset !important;
        text-indent: 0;
		background-position: right 15px center !important;
		padding: 12px;
		margin-right: unset;
    }
            
    #timkiem_input:focus::placeholder {
        color: #6c757d;
    }
	
	#tin-banner .blog-list > div:last-child{
		margin-bottom:20px;
	}
	.product_detail a h3.h6 {
		margin-top: .5rem !important;
	}
	.product_detail > div > div:last-child .btn {
		font-size: 0.9rem !important;
		padding: 6px;
	}
	.product_detail a img {
		height: 150px;
	}
	#home-page-brands {
		padding: 20px !important;
	}
	#news > div > div.end-new {
		text-align: center !important;
	}
	#search .dropdown ul {
		right: -80px;
	}
	#search .dropdown {
		display: none;
	}
	#search .dropdown.show {
		display: block;
		position: absolute;
		right: 105px;
		width: 200px;
	}
	
	#banner .owl-carousel .owl-stage-outer .item a {
	  padding: 40px 0 !important;
	}
	.products_main .ajaxContent > .order-3 > .d-flex.rounded > .p-2 {
		text-align: center;
		margin-top: 20px;
	}
	.products_main .ajaxContent > .order-3 > .d-flex.rounded {
		flex-direction: column-reverse;
		justify-content: center !important;
	}
	#banner .owl-carousel .item a * {
		width:unset !important;
		height:unset;
	}
	#banner .mergetags_slider .owl-stage .item > a h4 {
		font-size:30px;
	}
	#banner .mergetags_slider .owl-stage .item > a p {
		font-size:20px;
	}
	.header-container #search .input-group .dropdown-menu {
		width:380px !important;
		margin-left: calc(100% - 380px);
	}
	.owl-hqv-theme .owl-prev {
		left: 0 !important;
	}
	.owl-hqv-theme .owl-next {
		right: 0 !important;
	}
	.product_top .subMenu > .owl-stage-outer {
		margin: 0 15px;
	}
	.navmenu .dropdown ul >li > a {
		overflow-wrap: break-word;
		white-space: normal;
	}
	.header #menu .show .dropdown .dropdown > ul.active.d-flex {
		display:block !important;
		height: 318px;
	}
	#news-2 > div:last-child > .ge-content {
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		padding: 10px;
		background: #fff;
		border: 1px solid #cccccc50;
	}
	#product .mergetags .mergetags > li {
		flex: 0 0 auto;
		width:50%;
	}
	#home-page-news {
		padding-bottom: 30px;
		padding-top: 30px;
	}
	#news-2 > div:last-child {
		background-color: #fff;
	}
	#news-2 > div:last-child > .ge-content {
		border:unset;
	}
}
@media screen and (max-width:450px){
	.header-container #search .input-group .dropdown-menu {
		width:300px !important;
		margin-left: calc(100% - 242px);
	}
	.product_detail > div > a p {
		color: var(--heading-color);
		font-size: 0.9rem;
		display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
	}
}
@media (max-width: 767px) and (min-width: 576px) {
	.tin_moidang .masonry-grid-origin {
		display: flex !important;
		flex-wrap: wrap;
	}
	.tin_moidang .masonry-grid-origin > div {
		width: 50%;
	}
}
@media (max-width: 991px) and (min-width: 767px) {
	#news #random_item > div {
		width:50%;
	}
}
@media (max-width: 991px) and (min-width: 576px) {
	#product .mergetags .mergetags > li {
		flex: 0 0 auto;
		width:33.33333%;
	}
}
.ajaxLoading{
	position: fixed;
	top: 50%;
	z-index: 99999;
	right: 50%;
}

.product-info-addon{
	display:block;
	width:100%;
	margin-top:2px;
	margin-bottom:2px;
	border:0;
	box-shadow: 0 1px 1px #cccccc50;
	padding:2px;
	line-height:1;
	font-size:13px;
}
.product-info-addon:has(img){
	padding:0;
	border:0;
	background:transparent;
	height:auto;
}
.product-info-addon img{
	height:auto!important;
	width:100%;
}
#tin-banner{
	z-index:2;
}
#tin-banner .blog-list > div:not(:last-child){
	margin-bottom:20px;
}
#tin-banner a{
	max-width: 100%;
	position:relative;
	display:block;
	width:100%;
	-webkit-transition: all 0.5s ease
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#tin-banner a img{
	max-width: 100%;
	border-radius: var(--bs-border-radius);
	box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
	border: 1px solid transparent;
	object-fit: cover;
	position:relative;
}
/*#tin-banner a h5{
	position: absolute;
  text-align: center;
  width: auto;
  left: 5px;
  right: 5px;
  bottom: 0px;
  line-height: 1.1;
  background: #cccccc70;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
 border-radius: 10px;
 padding:2px;
 color: #fff !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

#tin-banner a:hover h5{
  right: 0px;
  bottom: 0px;
  left: 0px;
  background: #fff;
  color:var(--color-purple-main);
}*/
#tin-banner a h5{
	position: absolute;
	text-align: center;
	width: auto;
	opacity: 0;
	top: 50%;
	transform: translateY(-50%);
  left: 0px;
  right: 0px;
	line-height: 1.1;
	background: #cccccc70;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	border-radius: 10px;
	padding:2px;
	color: #fff !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}
#tin-banner a:hover h5{
  background: #fff;
  opacity: 1;
}
/*---------ngăn-----------*/
#tin-banner a h5 span{
	font-size: 1.05rem;
  font-weight: normal;
  text-align: center;
  color: #fff;
  padding:5px;
  line-height: 1.1;
  text-shadow: 0px 0px 2px #616161;
}

#tin-banner a:hover h5 span{
  color:var(--heading-color);
  text-shadow: 0px 0px 2px #fff;
}
.h5 {
	color: var(--default-color);
}
.h5 * {
	color: var(--default-color) !important;
}
.blog-list > div:hover a .text-black,
.blog-list > div:hover > div:last-child .h5 * {
	color: var(--heading-color) !important;
}
.blog-list.owl-sm > div:not(:last-child) {
    margin-bottom: 30px !important;
}
#large-news .random_item a .text-black,
#tin-tuc-3 .random_item a .text-black {
	display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 24px;
}
.text-black {
	color: var(--default-color) !important;
}

/*-------------------------------------hqv.css-----------------------------------*/
/*
html,body{
	overflow-x:hidden;
}
*/
.ajax-load:before{
  content: '';
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  backdrop-filter: blur;
  background: #ffffff80;
  z-index: 99!important;
}
html:has(body.ajax-load),
body.ajax-load{
  overflow: hidden!important;
}
.megamenu{
	left:0!important;
}
.btn-danger{
	background:var(--bg-gradient)!important;
	border:0!important;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.btn-danger:hover{
	filter: brightness(1.3);
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--main-80);
  --bs-btn-border-color: var(--main-80);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--main-50);
  --bs-btn-hover-border-color: var(--main-50);
  --bs-btn-focus-shadow-rgb: 49,132,253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--main-90);
  --bs-btn-active-border-color: var(--main-90);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--main-80);
  --bs-btn-disabled-border-color: var(--main-80);
  color:#ffffff!important;
}
.btn-secondary {
  --bs-btn-color: var(--default-color);
  --bs-btn-bg: var(--main-20);
  --bs-btn-border-color: var(--main-20);
  --bs-btn-hover-color: var(--default-color);
  --bs-btn-hover-bg: var(--main-30);
  --bs-btn-hover-border-color: var(--main-30);
  --bs-btn-focus-shadow-rgb: 130,138,145;
  --bs-btn-active-color: var(--default-color);
  --bs-btn-active-bg: var(--main-30);
  --bs-btn-active-border-color: #51585e;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--default-color);
  --bs-btn-disabled-bg: var(--main-20);
  --bs-btn-disabled-border-color: var(--main-20);
}
.owl-hqv-theme .owl-next,
.owl-hqv-theme .owl-prev{
	position: absolute;
	top: 0;
	margin:0!important;
	line-height:30px;
	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear;
	background:#fff;
}
.owl-hqv-theme .owl-next span,
.owl-hqv-theme .owl-prev span{
	font-size:2.5rem;
	line-height:30px;
}
.owl-hqv-theme .owl-prev{
	left: -10px;
}
.owl-hqv-theme .owl-next{
	right: -10px;
}
#search .input-group > .dropdown{
	width:calc(100% - 60px);
}
.dropdown-menu.autofill-dropdown-menu.show{
	width: 500px!important;
  position: absolute;
  margin-left: calc(100% - 500px);
  max-height:80vh;
  overflow-y:auto;
  box-shadow: 0 2px 5px #ccc;
  border:2px solid #fff;
}

section #banner .mergetags_slider:not(.owl-carousel){
	height:550px;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}
#banner .mergetags_slider:not(.owl-carousel){
	opacity:0.05;
}
#banner .mergetags_slider *{
	opacity:1;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}
.mergetags_slider:not(.owl-carousel){
	height:100px;
}
section,.container,.row{
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.subMenu:not(.owl-carousel){
	height:80px;
}
[data-badge]:before{
	content: attr(data-badge);
  display:inline-block;
  background: #ffffff50;
  position: absolute;
  margin-left:15px;
  margin-top:-5px;
  font-weight: bold;
  padding: 0 5px;
  color:var(--main);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  box-shadow: 1px 2px 2px #ccc;
}
#home-page-banner,
button.YeucauBaogia,
.products_main .accordion .accordion-header > button[aria-expanded="true"],
.home-page-products .tpsection__title
{
	/*background: #611D53!important;
	background: linear-gradient(310deg,rgba(97, 29, 83, 1) 0%, rgba(155, 53, 95, 1) 50%, rgba(217, 139, 223, 1) 100%)!important;*/
	color:#fff;
	border: 0px solid #fff;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}
.home-page-products .tpsection__title{
	border-radius: var(--bs-border-radius) !important;
}
#home-page-banner{
	border-radius: 0!important;
	border:0!important;
}
.home-page-products .tpsection__title:hover{
	border:0px solid rgba(217, 139, 223, 1);
}
#banner .mergetags_slider .owl-stage .item > a h4,
#banner .mergetags_slider .owl-stage .item > a p{
	color:var(--contrast-color) !important;
}

#home-page-products-tool > div{
	z-index: 2;
	position: relative;
}

button.YeucauBaogia{
	border:0!important;
	color:#fff!important;
}
#breadcrumb{
	padding-bottom:0!important;
	margin-bottom: 0!important;
}
.product_top{
	background:#fff;
	padding-top:10px!important;
}
/*.products_main{
	background:transparent;
}*/
.danhmucSanphamLeftPanel{
	padding:10px 15px;
	background: #C196CD;
	background: linear-gradient(140deg,rgb(253, 236, 236) 0%, rgb(255, 229, 231) 5%, rgb(251, 236, 236) 20%, rgb(255, 255, 255) 50%, rgb(255, 255, 255) 80%, rgb(255, 255, 255) 90%, rgb(255, 255, 255) 100%);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.accordion-item:not(:first-child):has(.accordion-header > button[aria-expanded="true"]){
	margin-top:10px;
}
.accordion-item{
	background:transparent!important;
	border:0!important;
	font-size:1rem!important;
}
.bg-light{
	background:var(--main-10);
}
.tab-content > div{
	padding:1.2rem!important;
}
.home-page-products .tpsection__title a{
	font-size: clamp(60%, calc(1 * 72%), 100%);
	font-weight:normal;
}
.footer .footer-top > .row *{
	color: #FEFCFE;
}

.product_detail > div{
	border: 1px solid #fff;
  -webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
/* .mer_products > div > div:not(:hover) .YeucauBaogia{
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	color: var(--default-color)!important;
	border: 1px solid var(--main-50)!important;
	background: #fff!important;
} */
#hotnews{
	z-index:3!important;
	border-bottom: 1px solid #cccccc80;
}
#hotnews .hotnews_item > a{
	display:flex;
	-webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
}
#hotnews .hotnews_item .card-img{
	width:40px!important;
	margin-right:1rem;
}
#hotnews .hotnews_item > a h5{
	font-weight:normal;
	font-size: 16px;
}
#hotnews .hotnews_item img{
	height:40px!important;
	width:40px!important;
	object-fit: cover;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}
@keyframes spin{
	from{transform:rotate(0deg)}
	to{transform:rotate(360deg)}	
}
#tin-noi-bat{
	position: relative;
	z-index:2!important;
}
/*----------trang chủ tin tức----------*/
#home-page-news .random_item div > a h5 {
	display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
	height: 44px;
	margin-top:0.8rem!important;
	font-weight: 600;
	font-size: 18px;
}
#home-page-news .random_item div > a p {
	display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
	color: #64748b;
}
#random_item .rg_item > a:hover i {
	color: var(--color-purple-main);
}
#random_item .card-footer .btn {
	border-color: var(--heading-color);
	color: var(--heading-color);
}
#random_item .card-footer .btn:hover {
	background-color: var(--heading-color);
	color: #fff;
}
#home-page-news .blog-list > div{
	padding:10px;
	margin-bottom:10px;
}
#home-page-news .random_item.blog-list > div > a {
	display: block;
	border-radius: 6px;
	overflow: hidden;
	border: 1px solid #E2E8F0;
}
#home-page-news .random_item.blog-list > div > a:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(15,23,42,.08);
}
#home-page-news .random_item.blog-list > div > a img {
	transform: unset !important;
}
#home-page-news .random_item.blog-list > div > a .card-des {
	padding: 20px 18px 6px;
}
#home-page-news .random_item.blog-list > div > a .card-img {
	overflow: hidden;
}
#home-page-news .random_item.blog-list > div > a .card-des .post-meta {
	font-size: 15px;
  font-weight: 600;
}
#tin-banner{
	display:none;
}
.youtube-video-modern {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.youtube-video-modern iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.vertical-slick-prev{
	position:relative;
	margin-top:-40px;
}
.products_main .nav-pills .nav-link:not(:hover,.active){
	border:1px solid #682054;
	padding:8px 10px;
	font-weight: 500;
	color:var(--default-color)!important;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.products_main .nav-pills .nav-link.active,
.products_main .nav-pills .show > .nav-link,
.products_main .nav-pills .nav-link:hover
{
	padding:8px 12px;
	background: var(--main-80)!important;
	border:0;
	color:#fff!important;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.product_short_info .mota{
	
}
.product_thongtinlienhe > div{
	padding:15px;	
	margin-left:15px;	
}
.product_thongtinlienhe > div ul{
	margin-bottom:1rem;
	margin-left:5px;	
	padding-left:1rem;
	border-left: 2px solid rgb(var(--linear-gradient-button-3));
}
.product_thongtinlienhe > div li{
	list-style:none;
}
.product_thongtinlienhe > div li > span.bi:before{
	color:rgb(var(--linear-gradient-button-2))!important;
}
.product_taisaomua .item-keyname .row > div{
	text-align:center;
}
.product_taisaomua .item-keyname .row > div + div{
	margin-top:10px;
	padding-top:10px;
	border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}
.product_taisaomua .item-keyname .row > div h5{
	font-size:15px!important;
	font-weight:bold;
}
.brand_info .brand_logo img{
	max-height:40px;
	max-width: 100%;
}
.auto-line-clamp {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            word-wrap: break-word;
        }
.auto-line-clamp[data-line="1"] { -webkit-line-clamp: 1; }
.auto-line-clamp[data-line="2"] { -webkit-line-clamp: 2; }
.auto-line-clamp[data-line="3"] { -webkit-line-clamp: 3; }
.auto-line-clamp[data-line="4"] { -webkit-line-clamp: 4; }
.auto-line-clamp[data-line="5"] { -webkit-line-clamp: 5; }
.auto-line-clamp[data-line="6"] { -webkit-line-clamp: 6; }
.auto-line-clamp[data-line="7"] { -webkit-line-clamp: 7; }
.auto-line-clamp[data-line="8"] { -webkit-line-clamp: 8; }
.auto-line-clamp[data-line="9"] { -webkit-line-clamp: 9; }
.auto-line-clamp[data-line="10"] { -webkit-line-clamp: 10; }

.BrandsList a.brand{
	color:var(--main-color)!important;
}
.BrandsList a.brand:hover{
	color:var(--a-hover-color)!important;
}
.form-check-input:checked{
	background-color: var(--main-80);
	border-color: var(--main-80);
}
/* CSS cho image wrapper */
        .img-wrapper {
            position: relative;
            width: 100%;
            overflow: hidden;
            background-color: #f8f9fa;
        }
        
        .img-wrapper img {
            width: 100%;
            height: auto;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
        }
        
        /* Các class để set height theo phần trăm */
        .img-wrapper-25 {
            padding-bottom: 25%;
        }
        
        .img-wrapper-50 {
            padding-bottom: 50%;
        }
        
        .img-wrapper-75 {
            padding-bottom: 75%;
        }
        
        .img-wrapper-100 {
            padding-bottom: 100%;
        }
        
        /* Custom height với CSS variable */
        .img-wrapper-custom {
            padding-bottom: var(--height-percent, 50%);
        }
        
        /* Căn giữa ảnh trong wrapper */
        .img-wrapper.img-center img {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        
        /* Cover mode - ảnh sẽ phủ đầy wrapper */
        .img-wrapper.img-cover img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        /* Contain mode - ảnh sẽ hiển thị đầy đủ trong wrapper */
        .img-wrapper.img-contain img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
@media (max-width: 575.98px) {	
	.mer_products .product_detail:nth-child(odd) {
	}
	.mer_products .product_detail:nth-child(even){
	}
}
/* Ẩn checkbox điều khiển */
        #sidebar-toggle {
            display: none;
        }
        
        /* Styles cho mobile và tablet (dưới 992px) */
        @media (max-width: 991px) {
            /* Ẩn categories mặc định trên mobile/tablet */
            #categories {
                position: fixed;
                top: 0;
                right: -100%;
                width: 80%;
                max-width: 400px;
                height: 100vh;
                background-color: white;
                overflow-y: auto;
                transition: right 0.3s ease-in-out;
                z-index: 1050;
                padding: 20px;
                box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
            }
            
            /* Overlay */
            #sidebar-toggle ~ .categorieList::before {
                content: "";
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.8);
                opacity: 0;
                visibility: hidden;
                transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
                z-index: 1040;
            }
            
            /* Khi checkbox được check - hiện sidebar */
            #sidebar-toggle:checked ~ .categorieList #categories {
                left: 0;
            }
            
            /* Khi checkbox được check - hiện overlay */
            #sidebar-toggle:checked ~ .categorieList::before {
                opacity: 1;
                visibility: visible;
            }
            
            /* Label làm nút đóng overlay */
            .overlay-close {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 1045;
                display: none;
                cursor: default;
            }
            
            #sidebar-toggle:checked ~ .categorieList .overlay-close {
                display: block;
            }
            
            /* Nút đóng trong sidebar */
            .sidebar-close {
                position: fixed;
                top: 10px;
                right: 10px;
                font-size: 24px;
                cursor: pointer;
                z-index: 1055;
                display: none;
                width: 40px;
                height: 40px;
                text-align: center;
                line-height: 40px;
                border-radius: 50%;
                background-color: #f8f9fa;
            }
            
            #sidebar-toggle:checked ~ .categorieList .sidebar-close {
                display: block;
            }
            
            /* Điều chỉnh nút mở sidebar */
            .sidebar-trigger {
                cursor: pointer;
                display: block;
				background: var(--bg-gradient) !important;
				color: #fff !important;
            }
            
            /* Ngăn scroll body khi sidebar mở */
            body:has(#sidebar-toggle:checked) {
                overflow: hidden;
            }
        }
        
        /* Styles cho desktop (từ 992px trở lên) */
        @media (min-width: 992px) {
            /* Hiển thị categories bình thường trên desktop */
            #categories {
                display: block !important;
            }
            
            /* Ẩn các elements chỉ dùng cho mobile */
            .overlay-close,
            .sidebar-close {
                display: none !important;
            }
        }
        
      
        
        /* Cải thiện style cho accordion trong sidebar */
        @media (max-width: 991px) {
            #categories .accordion-button {                
                padding: 10px 15px;
            }
            
            #categories .category_item {
                
              
                display: flex;
                align-items: center;
            }
            
            #categories .category_item img {
                margin-right: 10px;
            }
        }
#timkiem_input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 20px;
    padding-right: 0;
	border-color: var(--main) !important;
}
/* Style cho mobile */
@media (max-width: 767px) {
    /* Khi input được focus */
    #timkiem_input:focus {
        position: fixed;
        top: 20px;
        left: 20px;
        right: 20px;
        width: calc(100% - 40px);
        z-index: 9999;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
        transform: scale(1.05);
        transition: all 0.3s ease;
    }
    
    /* Container cha khi input focus */
    #timkiem_input:focus ~ .ajax-search-dropdown {
        position: fixed !important;
        top: 80px !important;
        left: 10px !important;
        right: 10px !important;
        width: calc(100% - 20px) !important;
        max-height: calc(100vh - 100px) !important;
        z-index: 9998;
    }
    /* Nút close (X) khi focus */
    #timkiem_input:focus::after {
        content: "✕";
        position: fixed;
        top: 25px;
        right: 20px;
        font-size: 24px;
        color: #666;
        z-index: 10000;
        cursor: pointer;
    }
}

/* Animation cho smooth transition */
@media (max-width: 767px) {
    #timkiem_input {
        transition: all 0.3s ease;
    }
    
    /* Khi blur, trở về vị trí ban đầu */
    #timkiem_input:not(:focus) {
        position: relative;
        transform: scale(1);
    }
}

/* Optional: Thêm backdrop blur cho iOS Safari */
@supports (-webkit-backdrop-filter: blur(10px)) {
    @media (max-width: 767px) {
        #search form:focus-within::before {
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
            background: rgba(0, 0, 0, 0.3);
        }
    }
}
html:has(.mobile-menu-open),
html:has(#sidebar-toggle:checked){
	overflow:hidden;
}
a.imgbg {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            text-decoration: none;
            overflow: hidden;
  border-radius: var(--bs-border-radius) !important;
        }
        
        /* Tạo background blur sử dụng pseudo-element */
    a.imgbg::before {
        content: '';
        position: absolute;
        top: -30px;
        left: -30px;
        right: -30px;
        bottom: -30px;
        background-image: var(--bg-image);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        filter: blur(15px);
        opacity: 0.5;
        z-index: 0;
        transform: scale(1.2);
        border-radius: var(--bs-border-radius) !important;
		display: none;
    }
/*---------------------------------------tin tuc(4.css)------------------------------*/
#large-news .random_item a p {
	display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.content-4 .card-img img {
	object-fit: cover;
  height: 100%;
  object-position: center;
}
.blog-news img {
	border-radius: var(--bs-border-radius) !important;
}

#tin-tuc .blog-news .ge-content > div > div > div:hover a h5.text-black span {
	color: var(--heading-color);
}
#quick > div .random_item {
	border-left: 1px solid var(--heading-color);
  border-bottom: 1px solid var(--heading-color);
  border-bottom-left-radius: 32px;
}
#quick .random_item > div {
  position: relative;
}
#quick .random_item > div:before {
	content: "";
  position: absolute;
  top: 0px;
  left: -4px;
  width: 7px;
  height: 7px;
  background-color: var(--heading-color);
  border-radius: 50%;
}
#quick .random_item > div{
	margin-bottom: 12px;
	padding-left: 20px;
}
#quick .random_item a {
	display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}

#quick .random_item a .text-black {
	font-size: 1.05rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 22px;
}
#quick .random_item a .card-img {
	margin-left: 8px;
  width: 100px !important;
  height: 76px;
}
#quick .random_item a .card-img img {
	height: 100%;
  object-fit: cover;
	width: 100px !important;
}
#quick .danhmuc {
	display: flex;
	justify-content: space-between;
	align-items: end;
}
#quick > div> div:last-child > div.random_item{
	margin-left: 5px;
}
#quick .danhmuc .title {
	font-size: 20px;
	font-weight: 600;
	
}
#quick .danhmuc .title {
	color: var(--heading-color);
}
#quick .danhmuc .title:hover {
	color: var(--heading-color);
}
#quick .danhmuc .button-all .mergetags_button_view {
	font-size: 1.15rem;
}

#tin-tuc-3 .card-img img {
	height: 100%;
  object-fit: cover;
}
#nav-news .random_item > div > a {
	background: linear-gradient(310deg,rgb(251, 221, 221) 0%, rgb(245, 207, 209) 5%, rgb(245, 227, 227) 20%, rgb(255, 249, 249) 50%, rgb(255, 255, 255) 80%, rgb(255, 255, 255) 90%, rgb(255, 255, 255) 100%);
	display: block;
	padding-bottom: 1rem;
	border-radius: 5px;
}
#nav-news .random_item h5 {
	margin: 0 !important;
  padding: .5rem 1rem;
}
#nav-news .random_item p {
	padding: 0 1rem;
	display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 22px;
  margin-bottom: 0;
}
#nav-news .random_item .card-img img {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	object-fit: cover;
	
}
.blog-list.owl-sm .col-4 {
	height: 240px;
}
.blog-list.owl-sm .col-4 img {
	width: 100%;
	max-height: 100%;
  border-radius: var(--bs-border-radius) !important;
}
.blog-list.owl-sm a.d-flex {
	justify-content: end !important;
	gap: 12px;
}

@media screen and (min-width:576px){
	#tin-tuc-3 .card-img {
		height: 100px;
	}
	#large-news .random_item .card-img {
		height: 300px;
	}
}

@media screen and (min-width:992px) {
	#tin-tuc-3 .card-img {
		height: 190px;
	}
}
.ajax-loader ~ #contentBody [data-com="content"] {
	display: none;
}
@media (max-width: 400px) {
	.gt_float_switcher .gt-selected .gt-current-lang {
		padding: 10px 6px !important;
	}
	.header .logo img {
		max-height: 30px !important;
		margin-right: 2px !important;
	}
}
@media (max-width: 374.98px) {
  .navbar-toggler {
    font-size: 28px !important;
  }
}