/*
Theme Name: Xây Dựng Sắt Thép
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
/* All */
:root{
	--secondary-color: #0f172b !important;
	--boder-radius-30: 30px;
}
.gradient-text {
	background: linear-gradient(135deg, #51a2ff, #00d492);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.btn-blur{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  cursor: pointer;
}
.txt-badge{
	width: fit-content;
    padding: 3px 10px;
    background: rgb(255 255 255 / 18%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 99px;
}
.txt-badge p{
	margin-bottom: unset;
    color: #fff;
    font-weight: 600;
}
.border-20 img{
	border-radius: 20px;
}
.sub-title-center{
	width: fit-content;
    display: flex;
    align-items: center;
	margin-bottom: 10px;
}
.sub-title-center:before, .sub-title-center:after{
	content: '';
    display: block;
    width: 32px;
    height: 1px;
    background-color: var(--primary-color);
}
.sub-title-center:before{
	margin-right: 15px;
}
.sub-title-center:after{
	margin-left: 15px;
}
.sub-title-left{
	display: flex;
    align-items: center;
	margin-bottom: 10px;
}
.sub-title-left:before{
	content: '';
	display: block;
    width: 48px;
    height: 1px;
    background-color: var(--primary-color);
	margin-right: 15px;
}
.sub-title-left p, .sub-title-center p{
	margin-bottom: 0 !important;
}
input[type=email], input[type=number], input[type=search], input[type=tel], input[type=text], input[type=url], textarea{
	box-shadow: unset !important;
}
/* Header */
.header-top .transition-colors{
	margin-right: 10px;
	color: #fff;
}
.header-top svg{
	margin-right: 5px;
}
.header-main .header-nav{
	justify-content: center !important;
}
.header-main .nav>li>a{
	color: var(--secondary-color);
}
.header-main .nav>li:hover>a,.header-main .nav>li.active>a{
	color: var(--primary-color);
}
.header-main .nav-spacing-xlarge>li{
	margin: 0 18px !important;
}
/* Home */
.wm-h-sc-ab .img-inner:before{
	content: '';
	background-color: #dbeafe;
	    position: absolute;
    top: 10px;
}
.wm-h-sc-value .value{
	width: 64px;
    height: 64px;
	background-color: #eff6ff;
    border-radius: 1rem;
    margin-bottom: 15px;
	transition: 0.3s;
}
.wm-h-sc-value .col-box:hover .value{
	background-color: var(--primary-color);
}
.wm-h-sc-value .col-box .value svg{
	stroke: var(--primary-color);
	transition: 0.3s;
}
.wm-h-sc-value .col-box:hover .value svg{
	stroke: #fff;
}
.wm-h-sc-value .col-box .col-inner{
	box-shadow: 0 20px 25px -5px rgba(226, 232, 240, 0.4), 0 8px 10px -6px rgba(226, 232, 240, 0.4);
	transition: 0.3s;
}
.wm-h-sc-value .col-box:hover .col-inner{
	transform: translateY(-8px);
	box-shadow: 0 25px 30px -5px rgba(226, 232, 240, 0.5), 0 10px 15px -6px rgba(226, 232, 240, 0.5);
}
.wm-h-sc-foa .foa-blog .col-inner{
	background-color: #fcf9fa;
	border-radius: 20px;
	transition: 0.3s;
}
.wm-h-sc-foa .foa-blog .col-inner:hover{
	transform: translateY(-8px);
	box-shadow: 0 20px 25px -5px rgba(226, 232, 240, 0.5), 0 8px 10px -6px rgba(226, 232, 240, 0.5);
}
.wm-h-sc-foa .foa-blog .box-image{
	border-radius: 20px 20px 0 0;
}
.wm-h-sc-foa .foa-blog .box-blog-post .box-text{
	padding: 10px 25px;
}
.wm-h-sc-foa .foa-blog .box-blog-post .box-text .button{
	text-transform: math-auto;
}
.wm-h-sc-foa .foa-blog .is-divider{
	display: none;
}
.wm-h-sc-foa .foa-blog .post-title{
	font-size: 18px;
    color: var(--secondary-color);
	margin-bottom: 12px;
	transition: 0.3s;
}
.wm-h-sc-foa .foa-blog .col-inner:hover .post-title{
	color: var(--primary-color);
}
.wm-h-sc-news .is-divider{
	display: none;
}
.wm-h-sc-news .post-meta{
	font-weight: 600;
    color: #62748e;
	margin: 5px 0;
}
.wm-h-sc-news .single .box-image{
	border-radius: 20px;
}
.wm-h-sc-news .single .post-title{
	font-size: 22px;
    color: var(--secondary-color);
	transition: 0.3s;
}
.wm-h-sc-news .single .from_the_blog_excerpt {
	font-size: 16px;
}
.wm-h-sc-news .single .box-image:before{
	content: 'Tin nổi bật';
    position: absolute;
    background-color: #fff;
    padding: 5px 13px;
    border-radius: 99px;
    font-size: 14px;
    font-weight: 600;
    color: var(--secondary-color);
	box-shadow: 0 20px 25px -5px rgb(0 0 0 / 20%), 0 8px 10px -6px rgb(0 0 0 / 20%);
    top: 25px;
    left: 25px;
    z-index: 10;
}
.wm-h-sc-news .list .box-image{
	border-radius: 15px;
}
.wm-h-sc-news .list .col-inner{
	background-color: #fff;
	border: 1px solid #f9f3f4;
    border-radius: 15px;
    padding: 20px;
	transition: 0.3s;
}
.wm-h-sc-news .list .col{
	padding: 0 15px 15px;
}
.wm-h-sc-news .list .post-title{
	color: var(--secondary-color);
	transition: 0.3s;
}
.wm-h-sc-news .single .col-inner:hover .post-title, .wm-h-sc-news .list .col-inner:hover .post-title{
	color: var(--primary-color);
}
.wm-h-sc-news .list .col-inner:hover{
	transform: translateY(-8px);
	box-shadow: 0 20px 25px -5px rgba(226, 232, 240, 0.5), 0 8px 10px -6px rgba(226, 232, 240, 0.5);
}
.wm-h-sc-review .icon-box-img img{
	width: 80px;
    height: 80px;
    border-radius: 99px;
    object-fit: cover;
}
.wm-h-sc-review svg{
	stroke: #fdc700;
	fill: #fdc700;
}
.wm-h-sc-review .r-svg{
	rotate: 180deg;
    position: absolute;
    top: 0;
    right: 25px;
}
.wm-h-sc-review .r-svg svg{
	stroke: #dbeafe;
	fill: transparent;
}
.wm-h-sc-review .text-v{
	position: relative;
	z-index: 10;
}
.wm-h-sc-review  .r-box .col-inner{
	border: 1px solid #f9f3f4;
	transition: 0.3s;
}
.wm-h-sc-review  .r-box .col-inner:hover{
	transform: translateY(-8px);
	box-shadow: 0 20px 25px -5px rgba(226, 232, 240, 0.5), 0 8px 10px -6px rgba(226, 232, 240, 0.5);
}

/* About us */
.wm-ab-sc-ht .box-count p{
	margin-bottom: 0 !important;
}
.wm-ab-sc-value .value{
	width: 64px;
    height: 64px;
	background-color: var(--primary-color);
    border-radius: 1rem;
    margin-bottom: 15px;
	transition: 0.3s;
}
.wm-ab-sc-value .col-inner{
	background-color: color-mix(in oklab, #fff 10%, transparent) !important;
	border: 1px solid;
    border-color: color-mix(in oklab, #fff 10%, transparent);
}
.wm-ab-sc-value .value svg{
	stroke: #fff;
}
.wm-ab-sc-value .right .icon-box-img svg{
	stroke: #51a2ff;
	fill: transparent;
}
.wm-ab-sc-value .right p{
	margin-bottom: 0 !important;
}
.wm-ab-sc-why .icon-box-img svg{
	stroke: var(--primary-color);
	fill: transparent;
	padding-top: 0 !important;
}
.wm-ab-sc-why .icon-box-img svg path{
	fill: transparent;
}
.wm-ab-sc-why .icon{
	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    padding: 10px;
    width: 62px;
    height: 62px;
    border-radius: 15px;
}
.wm-ab-sc-why  .icon-box-left .icon-box-img+.icon-box-text{
	padding-left: 2em !important;
}

/* Service */
.loi-ich-wrap {
    margin: 0 auto;
}
.loi-ich-item {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 100px;
    background: #fff;
    border-radius: 16px;
}
.loi-ich-item.loi-ich-reverse {
    flex-direction: row-reverse;
}
.loi-ich-content {
    flex: 1;
    min-width: 0;
}
.loi-ich-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: #eff6ff;
    border-radius: 12px;
    margin-bottom: 20px;
}
.loi-ich-icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}
.loi-ich-icon svg{
	stroke: var(--primary-color);
}
.loi-ich-content h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 16px;
    line-height: 1.3;
}
.loi-ich-excerpt {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.7;
    margin-bottom: 24px;
}
.loi-ich-benefits {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
}
.loi-ich-benefits li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
	font-weight: 500;
    color: #333;
    margin-bottom: 10px;
	margin-left: 0 !important;
}
.loi-ich-benefits li svg{
	stroke: var(--primary-color);
}
.loi-ich-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
    transition: border-color 0.2s, gap 0.2s;
}
.loi-ich-image img {
	position: relative;
    width: 600px;
    height: 400px;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
	border-radius: 15px;
	z-index: 2;
}
.loi-ich-image{
	position: relative;
}
.loi-ich-image:before{
    content: '';
    position: absolute;
    width: 630px;
    height: 430px;
    background-color: #f9f3f4;
    border-radius: 15px;
    top: -15px;
    left: -15px;
    transform: rotate(2deg);
	z-index: 1;
}
.wm-sv-sc-process .number{
	width: 96px;
    height: 96px;
    margin-bottom: 0;
    background-color: #1d293d;
    border-radius: 99px;
	border: 3px solid #0f172b;
	display: flex;
    align-items: center;
    justify-content: center;
	transition: 0.3s;
}
.wm-sv-sc-process .number:hover{
	background-color: var(--primary-color);
	border: 3px solid #5389ff;
}
.wm-sv-sc-process .number p{
	margin-bottom: 0 !important;
}
.wm-sv-sc-process .line{
	width: 45%;
    height: 2px;
    background-color: #314158;
    justify-self: center;
    position: absolute;
    top: 180px;
}
/* Blog */
.blog-archive .col-inner{
	box-shadow: 0 20px 25px -5px rgba(226, 232, 240, 0.4), 0 8px 10px -6px rgba(226, 232, 240, 0.4);
    border-radius: 15px;
}
.blog-archive .col-inner .box-text{
	padding: 10px 25px;
	height: 130px;
}
.blog-archive .col-inner .box-image{
	border-radius: 15px 15px 0 0;
}
.blog-archive .col-inner .post-title{
	font-size: 18px;
    color: var(--secondary-color);
}
.post-sidebar .widget_search{
	box-shadow: 0 20px 25px -5px rgba(226, 232, 240, 0.4), 0 8px 10px -6px rgba(226, 232, 240, 0.4);
    border-radius: 15px;
    padding: 10px 20px;
}
.post-sidebar {
	padding: 0 10px 10px !important;
}
.post-sidebar .widget-area{
	position: sticky;
    top: 130px;
}
.blog-single{
	background-color: #fcf9fa;
}
.blog-single .article-inner{
	background-color: #fff;
	padding: 30px;
	border-radius: 15px;
	box-shadow: 0 20px 25px -5px rgba(226, 232, 240, 0.4), 0 8px 10px -6px rgba(226, 232, 240, 0.4);
}
.blog-single .entry-title{
	color: var(--secondary-color);
}
.blog-single .entry-category a{
	font-size: 14px;
    padding: 3px 20px;
    background-color: #407af9;
    color: #fff;
    border-radius: 99px;
}
.blog-single .entry-image img{
	border-radius: 15px;
}
/* Share link */

.share-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #333;
}

.share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.share-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  text-decoration: none;
  color: #333;
  font-size: 14px;
  transition: all 0.3s ease;
  background: #fff;
}

.share-button:hover {
  background: #f5f5f5;
  border-color: #bbb;
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.share-button i {
  font-size: 16px;
}

.facebook-share:hover {
  background: #1877f2;
  color: #fff;
  border-color: #1877f2;
}

.twitter-share:hover {
  background: #1da1f2;
  color: #fff;
  border-color: #1da1f2;
}

.email-share:hover {
  background: #ea4335;
  color: #fff;
  border-color: #ea4335;
}

.copy-link:hover {
  background: #34a853;
  color: #fff;
  border-color: #34a853;
}

/* Contact */
.wm-ct-sc-add .icon-box-img svg {
	fill: transparent;
	stroke: var(--primary-color);
}
.wm-ct-sc-add .icon-box-img svg path{
	fill: transparent;
}
.contact-form .col-c p{
	    display: flex;
    gap: 15px;
}
.contact-form .col-c .wpcf7-form-control-wrap{
	width: 50%;
}
.contact-form input[type=text],.contact-form input[type="tel"],.contact-form input[type="email"],.contact-form  select,.contact-form textarea{
	background-color: #fcf9fa;
	border-radius: 15px;
	border: 2px solid #0000000a;
}
.contact-form input[type=text]:focus,.contact-form input[type="tel"]:focus,.contact-form input[type="email"]:focus,.contact-form  select:focus,.contact-form textarea:focus{
	border: 2px solid var(--primary-color);
}
.contact-form .wpcf7-submit {
	border-radius: 99px;
    padding: 3px 20px;
}
/* Footer */
.wm-footer a{
	color: #fff;
}
.wm-footer .middle .icon-box p{
	margin-bottom: 0 !important;
}
.wm-footer .right .ux-menu-link__link, .ux-menu-link__icon{
    border-bottom: unset !important;
	transition: 0.3s;
}
.wm-footer .right .ux-menu-link__link:hover span, .wm-footer .right .ux-menu-link__link:hover .ux-menu-link__icon {
	color: var(--primary-color);
}
.ux-menu-link--active .ux-menu-link__link{
	color: var(--primary-color);
}
.absolute-footer.dark{
	display: none;
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
    .loi-ich-item,
    .loi-ich-item.loi-ich-reverse {
        flex-direction: column;
    }
	.loi-ich-item{
		display: block !important;
	}
    .loi-ich-image {
        flex: none;
        max-width: 100%;
        width: 100%;
        height: 220px;
        order: -1;
    }
    .loi-ich-content h2 {
        font-size: 1.4rem;
    }
	.share-buttons {
        flex-direction: column;
    }
	.share-button {
        width: fit-content;
        min-width: 165px;
        justify-content: left;
    }
	.wm-sv-sc-process .number{
		margin: 0 !important;
	}
	.off-canvas-left .mfp-conten{
		background-color: #0f172a !important;
	}
	.off-canvas .nav-vertical>li>a{
		color: #fff !important;
	}
}