:root {
/* Color Palette */
--color-primary: #11457F;
--color-secondary-1: #d5e8ff;
--color-secondary-2: #0098ff;
--color-black: #000000;
--color-dark: #444;
--color-dark-1: #222222;
--color-dark-2: #444444;
--color-dark-3: #666666;
--color-grey-1: #888888;
--color-grey-2: #cccccc;
--color-light-1: #f6f6f6;
--color-white: #ffffff;
--color-warning: #f19a1f;
--color-error: #ba0000;
--color-success: #76ca66;
--color-processing: #a0c3ff;
--color-yellow: #F57806;
--color-yellow-2: #FAE78A;

/* Button Colors */
--button-primary: #ee8c00;
--button-hover: #bd6f00;

}
/*Header*/
@import url('https://fonts.cdnfonts.com/css/gilroy-bold');
@font-face {
    font-family: 'SVN-Gilroy'; /* Tên bạn đặt cho font */
    src: url('/assets/fonts/SVN-Gilroy Regular.otf') format('opentype'); /* Đường dẫn đến file .otf */
    font-weight: normal;
    font-style: normal;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
body {
    font-family: 'SVN-Gilroy', sans-serif;
	font-size: 16px;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

a { color: #000; }
a:hover { 
    color: var(--color-primary);
    transition: all .5s;
}

.color-main {
    color: var(--color-primary);
}
.header-row {
	justify-content: space-between;
    align-items: center;
}
.main__header {
    box-shadow: 0px 0px 6px 0px #0000001F;
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #fff;
    z-index: 1000;
}
.main__header .navigation .navigation-desktop {
	display: flex;
	align-items: center 
}
.main__header .navigation ul li {
	display: inline-block;
    padding: 0 10px;
    margin-right: 15px;
}
.header-row .logo {
    min-width: 300px;   
}
.header-row .logo img {
	max-width: 160px;
}
.body-main {
    margin-top: 80px;
}
.main__footer .footer-info img {
	max-width: 210px;
}
.language ul.dropdown-menu li {
	display: block;
	padding: 5px;
	text-align: center;
}
.language ul.dropdown-menu {
	padding: 0;
	min-width: 7rem;
}
.header-menu .menu-item {
    padding: 0 40px;
}
/* .header-menu .dropdown-menu {
    top: 7px !important;
} */
.header-menu .menu-item > a {
    font-family: 'SVN-Gilroy', sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 19px;
	text-align: left;
    text-transform: uppercase;
}
.header-menu .menu-item a.active {
	color: #D39F3F;
}
.color-smc {
	color: #D39F3F;
}
.color-title, .color-title h2, .color-title a {
	color: var(--color-primary);
}
h2, h1 {
    font-family: 'SVN-Gilroy', sans-serif;
    font-size: 42px;
    font-weight: 700;
    line-height: 54.6px;
}
.d-block { display: block; }
.j-between { justify-content: space-between; }

.navigation .language {
	margin-right: 15px;
}
.main__header .search input {
	border-radius: 20px;
}
.input-group:not(.has-validation)>.form-control:not(:last-child) {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}
.main__header .search .input-group-prepend {
	align-items: center;
    position: relative;
    right: 27px;
}
.uppercase {
	text-transform: uppercase;
}
.product-item img {
	width: 100%;
	aspect-ratio: 1 / 1;
    object-fit: cover;
}
.square-img {
	aspect-ratio: 1 / 1;
    object-fit: contain;
}
.rectangle-img {
	aspect-ratio: 16 / 9;
    object-fit: cover;
}
section {
	padding: 50px 0;
    position: relative;
    overflow: hidden;
}
.slide-header {
	padding: 0;
}
/*footer*/
.footer-info div {
	margin-bottom: 15px;
}
.main__footer .copyright {
	margin-bottom: 0;
    background: var(--color-primary);
}
.main__footer .box-link li {
	margin-bottom: 11px;
}
.main__footer .box-link i {
    font-size: 22px;
    min-width: 26px;
}
.main__footer .form-subscrible {
	display: flex;
}
.form-subscrible .email {
	width: 165px;
	margin-right: 10px;
}
.form-subscrible button {
	color: #fff;
    background: #D39F3F;
}
.form-subscrible button:hover {
	color: #fff;
}
.flex {
	display: flex;
}
i.fa-star {
	color: #F19A1F;
}
.product-price span {
	margin-right: 5px;
}
.product-price b {
    font-size: 24px;
    font-weight: 700;
    line-height: 28.8px;
    text-align: left;

}
.discount-price {
	background-image: url('/assets/images/client/product-sale-off.png');
	background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    padding: 11px;
    color: #fff;
    font-size: 12px;
}
.product-item {
	background: #fff;
	margin: 10px 0;
}
.product-item:hover {
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.product-item .product-content {
	padding: 10px;
}
.product-image {
	border-radius: 16px;
}
.product-image img {
	border-radius: 16px;
}
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }
.mb-25 { margin-bottom: 25px; }
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; }
.mb-50 { margin-bottom: 50px; }
.mb-60 { margin-bottom: 60px; }

.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mt-25 { margin-top: 25px; }
.mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px; }
.mt-50 { margin-top: 50px; }
.mt-60 { margin-top: 60px; }

.mr-10 { margin-right: 10px; }
.mr-15 { margin-right: 15px; }
.mr-20 { margin-right: 20px; }
.mr-25 { margin-right: 25px; }
.mr-30 { margin-right: 30px; }
.mr-40 { margin-right: 40px; }
.mr-50 { margin-right: 50px; }
.mr-60 { margin-right: 60px; }
	
.pd-10 { padding: 10px; }
.pd-15 { padding: 15px; }
.pd-20 { padding: 20px; }
.pd-25 { padding: 25px; }
.pd-30 { padding: 30px; }
.pd-40 { padding: 40px; }
.pd-50 { padding: 50px; }
.pd-60 { padding: 60px; }

.pd-10-0 { padding: 10px 0; }
.pd-15-0 { padding: 15px 0; }
.pd-20-0 { padding: 20px 0; }
.pd-25-0 { padding: 25px 0; }
.pd-30-0 { padding: 30px 0; }
.pd-40-0 { padding: 40px 0; }
.pd-50-0 { padding: 50px 0; }
.pd-60-0 { padding: 60px 0; }

.pd-0-10 { padding: 0 10px; }
.pd-0-15 { padding: 0 15px; }
.pd-0-20 { padding: 0 20px; }
.pd-0-25 { padding: 0 25px; }
.pd-0-30 { padding: 0 30px; }
.pd-0-40 { padding: 0 40px; }
.pd-0-50 { padding: 0 50px; }
.pd-0-60 { padding: 0 60px; }

.fs-16 { font-size: 16px; }
.fs-18 { font-size: 18px; }
.fs-20 { font-size: 20px; }
.fs-24 { font-size: 24px; }
.fs-32 { font-size: 32px; }
.fs-42 { font-size: 42px; }
.br-50 { border-radius: 50px; }
.w-50 { width: 50%; }
.mw-100 { max-width: 100%; }
.form-control {
    height: calc(2.25rem + 11px);
}
.small-title {
	font-size: 24px;
	font-weight: bold;
	font-family: 'SVN-Gilroy', sans-serif;
}
.relative {
	position: relative;
}
.news-image img {
	width: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
}
.news-item, .product-item {
    border: 1px solid #f4f1f1cc;
	border-radius: 10px;
    margin: 10px 0;
    transition: all 0.5s ease;
}
.news-item:hover, .product-item:hover {
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}
.news-item .news-title {
	font-size: 20px;
    font-weight: 700;
    line-height: 24px;
}
.news-item .view-more {
	display: inline-block;
    border: 1px solid var(--color-primary);
    /*padding: 8px 20px;*/
    border-radius: 30px;
    font-weight: bold;
    transition: all 1s ease;
}
.news-item .view-more a {
    display: inline-block;
    width: 150px;
    height: 40px;
    text-align: center;
    line-height: 35px;
}
.news-item .news-content {
	padding: 10px 20px;
	margin-bottom: 10px;
}
.news-item .news-description {
	min-height: 40px;
}
.news-item .view-more:hover {
	background: var(--color-primary);
}
.news-item .view-more:hover a {
	color: #fff;
}
.view-more a, .view-more a:hover {
	color: var(--color-primary);
}
.owl-carousel.owl-theme .owl-nav {
	position: absolute;
    top: calc((100% - 40px) / 2);
    font-size: 30px;
    color: #333 !important;
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.owl-carousel.owl-theme .owl-nav i {
	color: #999;
}

/*breadcrumb*/
.breadcrumb {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 20px 0;
    background-color: transparent;
    border-radius: 0.375rem;
}
.breadcrumb-item a {
    text-decoration: none;
    color: #999;
}
.breadcrumb-item a:hover {
    text-decoration: underline;
}
.breadcrumb-item.active {
    color: #6c757d; /* Màu cho phần hiện tại */
}
.breadcrumb-item+.breadcrumb-item::before {
	content: '\f054'; /* Mã Unicode cho icon Font Awesome */
  	font-family: 'Font Awesome 5 Free'; /* Font Family */
  	font-weight: 600; /* Cần thiết cho Font Awesome 5 */
}
.breadcrumb-item:last-child::after {
    content: ''; /* Không hiển thị dấu phân cách cho phần cuối */
}
.bold {
	font-weight: bold;
}
.p-relative {
	position: relative;
}
.navigation-mobile {
	display: none;
}
.carousel-control-next, .carousel-control-prev {
	filter: contrast(0.5);
	width: auto;
}
.carousel-control-prev {
    left: -15px;
}
.carousel-control-next {
    right: -15px;
}
.slide-header .carousel-control-prev {
    left: 0px;
}
.slide-header .carousel-control-next {
    right: 0px;
}
/*carousel-item news-item*/
.carousel-item.news-item {
	padding: 10px;
}
#carousel-blog-full {
	background: #f8fbff;
}
.product-description, .news-description, .product-title a, .news-title a {
	display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 2;
    min-height: 48px;
}
.product-title, .news-title {
	min-height: 48px;
    color: var(--color-primary);
}
.blog__main h1, .blog__main h3, .blog__main h4 {
	font-family: 'SVN-Gilroy', sans-serif;
}
.sidebar-news-item img {
	border-radius: 0;
}
.sidebar-right h3 span {
	border-bottom: 4px solid;
}
.sidebar-news-item {
	margin-bottom: 20px;
    border-bottom: 1px solid #f1f1f1;
}
.sidebar-right h3, .news-relate-link h3 {
	font-size: 20px;
    font-weight: 600;
}
.share-icon i {
	font-size: 25px;
    margin-left: 10px;
    color: #181f4a;
}
.news-relate-link ul li {
	margin-left: 35px;
}
.news-relate-link ul {
	list-style-type: disc;
}
.copyright {
	border-top: 1px solid #1c2d94;
	padding: 10px;

}
ul.pagination {
	justify-content: center;
}
.main__header .search button {
    font-size: 18px;
    color: #999;
    z-index: 9;
    border: none;
    background: transparent;
}
.page-item.active .page-link {
	background-color: #181F4A;
    border-color: #181F4A;
}
.c-pointer {
	cursor: pointer;
}
.red {
	color: #BA0000;
}

.text-white a {
    color: white;
}
.unit-price {
    text-decoration: line-through;
}
.b-l { border-left: 1px solid #f1f1f1; }
.b-r { border-right: 1px solid #f1f1f1; }
.menu-mobile {
    left: auto;
    right: 0;
}
.language img {
    margin-top: -3px;
}
.j-right {
    justify-content: right;
}
.flex h3, .flex h4, .flex h5 {
    margin: 0;
}
/*Zextra-service*/
.zextra-service {
    background: #f6f6f6;
    padding: 20px 0 0;
    margin: 0;
}
.div-form .btn-send {
    background: var(--color-primary);
}
.product-dropdown {
    padding: 10px;
    border-bottom: 1px solid #f6f6f6;
}
.main__header .dropdown-menu {
    margin: 0;
}
@media screen and (min-width: 769px) {
    .navigation .language .dropdown:hover ul.dropdown-menu {
        display: block;
    }
    .header-menu .menu-item:hover .dropdown-menu {
        display: block;
        right: 0;
        left: 2rem;
    }
}
@media screen and (max-width: 1200px) {
    .header-menu .menu-item {
        padding: 0 10px;
    }
}
@media screen and (max-width: 900px) {
    .why-content {
        text-align: center !important;
    }
    .product-consulting .form-main {
        margin: auto;
    }
    h2 {
        font-size: 30px;
    }
    .small-title {
        font-size: 18px;
    }
    .form-subscrible .email {
        width: 105px;
    }
}
@media screen and (max-width: 768px) {
    #myFilterModal .modal-footer {
        position: sticky;
        bottom: 0;
        width: 100%;
        background: #fff;
    }
    #myFilterModal .modal-header {
        position: sticky;
        top: 0;
        z-index: 1;
        width: 100%;
    }
    .zextra-service img {
        max-height: 60px;
    }
    .header-row .logo {
        min-width: auto;
    }
    .navigation-desktop, .header-menu {
    	display: none !important;
    }
    .navigation-mobile {
    	display: block !important;
    }
    .navigation-mobile .dropdown-toggle::after {
    	display: none;
    }
    .navigation-mobile i {
    	font-size: 22px;
        margin-right: 25px;
        opacity: 0.7;
    }
    .navigation-mobile .dropdown {
    	position: static;
    }
    .dropdown-menu-link {
    	transform: translate3d(0px, 61px, 0px) !important;
	    width: 100%;
	    margin: 0;
    	border-radius: 0;
    	top: 18px !important;
    	border: none;
    	border-top: 1px solid #F6F6F6;
    }
    .header-row .logo img {
    	margin-left: 5px;
    }
    .navigation-mobile .flex {
    	align-items: center;
    }
    .dropdown-menu .product-child {
    	padding: 0 40px;
    }
    .navigation-mobile .dropdown-item {
    	padding: 10px;
	    border-bottom: 1px solid #f6f6f6;
	}
    .navigation-mobile .search-mobile {
        position: absolute;
        width: 100%;
        min-width: 301px;
        right: 0;
        top: 35px;
    }
	.dropdown-item.active {
		background: #D39F3F;
    	color: #fff;
	}
	.dropdown-item-child a {
		color: var(--color-primary);
	}
	.col-md-6 {
    	width: 50%;
    }
    .col-xs-12, .col-xsm-12 {
    	width: 100%;
    }
}
@media screen and (max-width: 600px) {
    body, html {
        font-size: 12px;
    }
    .news-item .news-title {
        font-size: 16px;
    }
    .news-item .view-more a {
        width: 100px;
        height: auto;
    }
    .product-description, .news-description, .product-title a, .news-title a {
        margin-bottom: 10px;
        min-height: auto;
    }
    .navigation .language, .main__header .navigation ul li {
        margin-right: 0px;
    }
    .product-item .product-content {
        padding: 3px;
    }
    .feature-product .carousel-item, .a-breakthrough .breakthrough-content {
        padding: 0 !important;
    }
    h1 {
        font-size: 24px;
        line-height: 30.6px;
    }
 	h2 {
        font-size: 20px;
        font-weight: 700;
        line-height: 26px;
    }
    .small-title {
        font-size: 16px;
        font-weight: 500;
        line-height: 20.8px;
    }
    .main__footer .footer-link .row .col-md-4:nth-child(1), .main__footer .footer-link .row .col-md-4:nth-child(2) {
        width: 48%;
    }
    .main__footer .footer-link, .main__footer .footer-subscrible {
        margin-top: 20px;
    }
    .footer-subscrible h5 {
        margin-bottom: 10px;
    }
    .social-link li {
        width: 48%;
        display: inline-block;
    }
    .box-link h5 {
    	margin-top: 20px;
    	margin-bottom: 10px;
    }
    .product-price span {
	    margin-right: 0px;
	}
	.discount-price {
		padding: 6px;
	}
	.news-statistics {
		display: block;
	}
	.news-statistics > div {
		display: inline-block;
	}
	.blog__main .col-lg-4 {
		display: none;
	}
	.form-subscrible .email {
        width: 165px;
    }
    .modal-body .product-item .product-content {
        padding: 0 10px;
    }
    .carousel-control-prev {
        left: 0px;
    }
    .carousel-control-next {
        right: 0px;
    }
}
@media screen and (max-width: 450px) {
	
}
@media screen and (max-width: 390px) {}
