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

@import "./css/libs.css";

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


}
.m-auto {
	margin-left: auto !important;
	margin-right: auto !important;
}
.border-color {
	background: linear-gradient(transparent, white) padding-box, linear-gradient(to right, darkblue, #c54329) border-box;
    border: 4px solid transparent;
	box-shadow: 0px 5px 20px rgb(76 38 215 / 26%);
}
.box-shadow-1,.box-shadow-1-hover:hover,.row-box-shadow-1 .col-inner,.row-box-shadow-1-hover .col-inner:hover {
    box-shadow: 0 1px 3px -2px rgb(0 0 0 / 42%), 0 1px 2px rgb(0 0 0 / 8%);
}

.custom-breadcrumb {
	background: linear-gradient(90deg, var(--primary-color) 0%, #8c1919 100%), var(--primary-color);
} 
button.ux-search-submit.submit-button.secondary.button.icon.mb-0 {
    background: transparent;
    border-color: transparent;
    color: #333 !important;
}

.bg-gray-opacity {
    background: #00000063;
    padding-top: 20px;
    margin-top: 30px;
}
.off-canvas-left .mfp-content, .off-canvas-right .mfp-content {
    -webkit-overflow-scrolling: touch;
    background-color: hsl(0deg 0% 100%);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5);
}
.price-wrapper {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
}
.footer-1 {
	-webkit-animation: gradientSmooth 40s ease infinite;
    animation: gradientSmooth 40s ease infinite;
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
    background: -webkit-gradient(linear,left top,right top,from(#298dda),color-stop(#1a5bad),color-stop(#3d21af),to(#a438fc));
    background: linear-gradient(90deg,#298dda,#1a5bad,#3d21af,#a438fc);
    background-size: 400% 100%
}
.absolute-footer {
    background-color: #333;
}
.wpcf7-submit {
    background-color: var(--primary-color) !important; 
}

.text-justify {
    text-align: justify;
}

.outline-text {
    font-weight: bold;
    color: transparent;
    -webkit-text-stroke: 1px #000;
    display: block;
}
.outline-text-light {
    font-weight: bold;
    color: transparent;
    -webkit-text-stroke: 1px #dbd47a;
	-webkit-text-stroke: 0.02em #fffddd;
    display: block;
}
img.white-image, .white-image img {
	filter: invert(1) brightness(100%)
}
.section-dots-half .section-bg.fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 70%;
    z-index: 0;
	background-size: auto;
    background-repeat: repeat;
	background-image: url(/wp-content/uploads/2026/01/dots-1.png);
}
.section-dots-half .section-bg.fill {
    width: 40%;
}
/* title sub */
.sub-heading-line {
    display: flex;
    align-items: center;
    gap: 16px;
	margin-bottom: 1rem;
}
.sub-heading-line:before,
.sub-heading-line.justify-center:after {
    content: "";
    display: flex;
    height: 2px;
    width: 40px;
    background: var(--primary-color);
	transition: all ease .3s;
}
.sub-heading-line:hover:before,
.sub-heading-line.justify-center:hover:after{
	width: 60px;
} 
.text-bg-underline {
    position: relative;
    z-index: 1;
    display: inline-block;
    width: auto;
}
.text-bg-underline:before {
    content: '';
    position: absolute;
    height: 16px;
    width: 100%;
    background-image: url(https://themebubble.com/demo/webify/wp-content/themes/webify/landing/assets/img/underline.svg);
    bottom: -0.3em;
	left:0;
    background-size: 100% 100%;
    opacity:0.8;
}
.dark .wpcf7-form label {
    width: 100%;
    font-weight: 400;
    font-size: 0.9em;
    color: #cdcdcd;
    letter-spacing: 1px;
}
.dark .wpcf7-form input[type="text"],
.dark .wpcf7-form input[type="email"],
.dark  .wpcf7-form textarea {
	border-color: #eee !important;
}
.bg-text-ab {
	position: absolute;
	font-size: 163%;
	font-weight: 700;
	top: 0%;
	left: 0;
	opacity: 0.12;
	transform: rotate(0deg);
	transition: all ease .3s;
}

.text-gradient-premium {
  background: linear-gradient(45deg, #1a237e, #39438e, #f36d36);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  
  display: inline-block;
}
h2,.h2,
.text-gradient-animated {
  background: linear-gradient(to right, #ad2927, #a9700e, #ef3735, #a13305);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 9s linear infinite;
}

@keyframes shine {
  to {
    background-position: 200% center;
  }
}
/* herro banner  */
.icon-box.icon-banner {
    display: flex;
    align-items: center;
}
.icon-box.icon-banner p {
    margin-top: 0;
}


.box-dropshadow {
    background: #fdf3e4;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 3px 9px #0000000f;
}


.fut-h-100 {
    height: 100vh !important;
    display: flex;
    align-items: center;
}
.fut-h-100:hover {
    background: #0000002e;
}
.full-width-project .col.col-divided:not(.col-first):last-child {
    border-left: 0px solid #000000;
    border-right: 0;
    padding-left: 30px;
    padding-right: 0;
}
.full-width-project .col-divided {
    border-color: transparent;
}
.full-width-project .col-divided {
    border-color: #ffffff24;
    height: 50vh;
	max-height: 50svh !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media screen and (min-width: 550px) {
	.full-width-project .col-divided {
	    height: 100vh;
		max-height: 100svh !important;
	}
}
.full-width-project .col-inner {
	display: flex;
    align-items: center;
    justify-content: center;
}
ol.flickity-page-dots {
    width: 100%;
    left: 0;
    bottom: -12px;
    background-color: #0000001f;
    display: flex;
}
.slider-nav-light .flickity-page-dots .dot {
    border-radius: 0;
    width: 100%;
    margin: 0;
}
.slider-nav-light .flickity-page-dots .dot.is-selected, .slider-nav-light.slider-nav-dots-simple .flickity-page-dots .dot {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
/* peoples page  */
@media screen and (min-width: 850px) {
    .col .col-inner {
        height: 100%
    }
}
/* 1. Tổng thể section sơ đồ */
.peoples-page.section.has-block {
    background-color: #fcfcfc;
}

/* 2. Tiêu đề chung (H2) - Áp dụng hiệu ứng dải màu từ câu hỏi trước của bạn */
.peoples-page .section-content h2 {
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    margin: 30px 0 15px;
    color: #333;
}

/* 3. Khung viền phân cấp (is-border) */
.peoples-page .section-content .is-border {
    border-top: 3px solid #ad2927 !important; /* Màu đỏ chủ đạo */
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    max-width: 100%;
    margin: 0 auto;
}

/* 4. Định dạng Card nhân sự (Icon Box) */
.peoples-page .section-content .icon-box.featured-box {
    background: #fff;
    padding: 24px 16px 0;
    border-radius: 0;
    border: 1px solid #e5e5e5;
    transition: all 0.4s ease;
    height: 100%;
    margin-bottom: 0px;
}

.peoples-page .section-content .icon-box.featured-box:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border-color: #ad2927;
    transform: translateY(-5px);
}

/* 5. Ảnh chân dung nhân sự */
.peoples-page .section-content .icon-box-img {
    margin-bottom: 15px;
}
.section-content .icon-box-img .icon-inner {
    overflow: hidden;
	border: 2px solid transparent;
}

.peoples-page .section-content .icon-box-img img {
    border-radius: 8px;
    /* Đảm bảo ảnh không bị méo */
    object-fit: cover;
    aspect-ratio: 5/5;
    transform: translateY(-50%) scale(1.9);
}
.peoples-page .icon-box.featured-box.ns-ngothanhphuong .icon-box-img img ,
.peoples-page .icon-box.featured-box.ns-ngothidiu .icon-box-img img {
    transform: translateY(-50%) scale(2.05);
}
.peoples-page .section-content .transform-scale-none .icon-box-img img {
    transform: translateY(0%) scale(1);
}

/* 6. Tên nhân sự (H3) */
.peoples-page .section-content .icon-box-text h3 {
    color: #ad2927;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 8px;
    text-transform: uppercase;
}

/* 7. Mô tả kinh nghiệm (Paragraph) */
.peoples-page .section-content .icon-box-text p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555;
    text-align: justify; /* Căn đều hai bên cho chuyên nghiệp */
}

/* 8. Tùy chỉnh riêng cho hàng đầu tiên (Vị trí Chủ tịch) */
/* Tìm row đầu tiên có chứa col-6 hoặc col-4 để làm nổi bật */
.peoples-page .section-content > .row:first-of-type .icon-box.featured-box {
    border: 2px solid #ad2927;
    background-color: #fffaf9;
}

/* 9. Responsive cho thiết bị di động */
@media (max-width: 849px) {
    .peoples-page .section-content .icon-box.featured-box {
        padding: 15px;
    }
}
.peoples-page .icon-box:hover .has-icon-bg .icon .icon-inner {
    background-color: #fff;
}

body:not(.home) .button.btn-chat-us {
	display: none !important;
}

/*Buttonizer*/
.buttonizer.buttonizer-group .buttonizer-label {
    z-index: -1 !important;
    left: auto !important;
    right: 32px;
    border-radius: 20px !important;
}


.button,
input[type=button].button,
input[type=reset].button,
input[type=submit],
input[type=submit].button {
    border-radius: 99px !important;
}
.blog-post-inner .button.is-outline.is-small {
    font-weight: 500;
    padding: 0px 12px;
    line-height: 0.8em;
    min-height: 1.55rem;
    font-size: 0.8rem;
    margin-top: 0.5rem;
}
/*Crest header*/
.widget .is-divider {
    display: none;
}

/* Tùy chỉnh tổng thể Widget danh mục */
.widget_product_categories.widget_product_categories {
    background: #fff;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* Tiêu đề danh mục */
.widget_product_categories .widget-title {
    font-size: 1.1em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

/* Danh sách chính */
ul.product-categories {
    margin-top: 15px;
    list-style: none;
}

/* Từng dòng danh mục */
ul.product-categories li.cat-item {
    position: relative;
    margin-bottom: 0;
    transition: all 0.3s ease;
    border-bottom: none;
}

ul.product-categories li.cat-item a {
    display: block;
    padding: 6px 0;
    font-weight: 500;
    color: #444;
    transition: all 0.3s ease;
}

/* Hiệu ứng Hover - Sử dụng color-mix để tạo màu nền nhạt */
ul.product-categories li.cat-item:hover {
    background-color: color-mix(in srgb, var(--primary-color), white 95%);
}
ul.product-categories li.cat-item:hover > a {
    padding-left: 10px;
    color: var(--primary-color);
}

/* Nút mũi tên mở rộng (Toggle) */
ul.product-categories li.cat-item button.toggle {
    height: 40px;
    width: 40px;
    opacity: 0.6;
}

ul.product-categories li.cat-item button.toggle:hover {
    color: var(--primary-color);
}

/* Danh mục con (Children) */
ul.product-categories ul.children {
    background-color: #f9f9f9;
    margin: 0;
    padding-left: 0px;
}

ul.product-categories ul.children li.cat-item {
    border-bottom: none;
}

ul.product-categories ul.children li.cat-item a {
    font-size: 0.9em;
    opacity: 0.8;
    padding: 8px 0;
}

/* Dấu gạch nhỏ bên cạnh danh mục con để phân biệt */
ul.product-categories ul.children li.cat-item a::before {
    content: "\2013”";
    margin-right: 8px;
    color: #ccc;
}

/* Xóa gạch chân dòng cuối cùng */
ul.product-categories li.cat-item:last-child {
    border-bottom: none;
}
/* Tùy chỉnh tổng thể các Widget Danh mục bài viết */
.widget_categories {
    background: #fff;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* Tiêu đề danh mục */
.widget_product_categories .widget-title,
.widget_categories .widget-title {
    font-size: 1.1em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--primary-color);
    display: inline-block;
    padding-bottom: 5px;
}

/* Danh sách chính */
.widget_categories ul {
    margin-top: 15px;
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Từng dòng danh mục */
.widget_categories ul li.cat-item {
    position: relative;
    border-bottom: 0px solid #f1f1f1;
    transition: background 0.3s ease;
    display: flex; 
    flex-wrap: wrap; /* Hỗ trợ nếu có menu con */
    align-items: center;
    justify-content: space-between;
    color: #999; /* Màu cho số lượng bài viết (10) */
    font-size: 0.95em;
}

.widget_categories ul li.cat-item a {
    display: inline-block;
    flex: 1;
    padding: 6px 12px;
    font-weight: 500;
    color: #444;
    transition: all 0.3s ease;
    text-decoration: none !important;
}

/* Hiệu ứng Hover */
.widget_categories ul li.cat-item:hover {
    background-color: color-mix(in srgb, var(--primary-color), white 92%);
}

.widget_categories ul li.cat-item:hover > a {
    padding-left: 18px;
    color: var(--primary-color);
}

/* Hiệu ứng cho số lượng bài viết khi hover */
.widget_categories ul li.cat-item:hover {
    color: var(--primary-color);
}

/* Danh mục con (Children) */
.widget_categories ul.children {
    flex: 0 0 100%; /* Đẩy menu con xuống dòng mới trong flex container */
    background-color: #fafafa;
    margin: 0 !important;
    padding-left: 15px !important;
    border-top: 1px solid #eee;
}

.widget_categories ul.children li.cat-item {
    border-bottom: none;
}

.widget_categories ul.children li.cat-item a {
    font-size: 0.9em;
    padding: 8px 12px;
}

.widget_categories ul.children li.cat-item a::before {
    content: "\00BB";
    margin-right: 8px;
    color: #bbb;
}

/* Xóa gạch chân dòng cuối cùng */
.widget_categories ul > li.cat-item:last-child {
    border-bottom: none;
}
/* 1. Tổng thể Widget Bài viết mới */
.widget_recent_entries {
    background: #fff;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    margin-bottom: 20px;
}

/* 2. Tiêu đề và đường gạch chân */
.widget_recent_entries .widget-title {
    font-size: 1.1em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 0.5rem;
    margin-bottom: 10px;
    color: #333;
    border-bottom: 2px solid var(--primary-color);
    display: inline-block;
}

/* Tùy chỉnh divider (thanh chắn nhỏ bên dưới tiêu đề) */
.widget_recent_entries .is-divider {
    background-color: var(--primary-color, #be9329); /* Dùng biến màu chính, mặc định là vàng đồng nếu chưa có */
    height: 2px;
    width: 35px;
    margin-bottom: 15px;
}

/* 3. Danh sách bài viết */
.widget_recent_entries ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.widget_recent_entries ul li {
    position: relative;
    border-bottom: 1px solid #f1f1f1; /* Tạo đường kẻ mảnh giữa các bài viết */
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}

.widget_recent_entries ul li:last-child {
    border-bottom: none; /* Xóa đường kẻ dòng cuối cùng */
}

/* 4. Link bài viết */
.widget_recent_entries ul li a {
    display: block;
    padding: 10px 12px;
    font-weight: 500;
    color: #444;
    text-decoration: none !important;
    transition: all 0.3s ease;
    line-height: 1.4;
    font-size: 0.95em;
    width: 100%;
}

/* 5. Hiệu ứng Hover */
.widget_recent_entries ul li:hover {
    background-color: color-mix(in srgb, var(--primary-color, #be9329), white 95%);
}

.widget_recent_entries ul li:hover a::before {
    opacity: 1;
    left: 8px;
}
/* pagination */
.nav-pagination li .page-number, .nav-pagination li .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #828282 !important;
    background-color: #fff;
    color: #333;
    font-weight: 600;
    border-radius: 0;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    border-radius: 99px;
}
/* Pricing table */
/* 1. Tổng thể Section */
.section-pricing {
/*     background-color: #f4f7fb !important; */
    padding-top: 60px;
    padding-bottom: 60px;
}

/* 2. Tiêu đề chính của section */
.section-pricing h2 span[data-text-color="primary"] {
    color: #333 !important; /* Chữ tiêu đề ngoài card để màu đậm dễ đọc */
    font-weight: 700;
}

/* 3. Tùy chỉnh Card (Cột bảng giá) */
.section-pricing .col-inner {
    padding: 40px 30px 60px 30px !important; /* Tăng padding bottom để chừa chỗ cho nút */
    border-radius: 15px;
    border: none !important;
    transition: all 0.3s ease;
    height: 100%;
    /* Gradient chủ đạo: Từ Đỏ sậm sang Đỏ cam sáng (Màu Crest Decor) */
    background: linear-gradient(135deg, #731211 0%, #e34c4a 100%) !important;
    box-shadow: 0 10px 30px rgba(173, 41, 39, 0.2);
}

.section-pricing .col-inner:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(173, 41, 39, 0.4);
}

/* 4. Màu chữ sáng cho nội dung bên trong Card */
.section-pricing .col-inner h2, 
.section-pricing .col-inner p, 
.section-pricing .col-inner li,
.section-pricing .col-inner span {
    color: #ffe5e5 !important;
}
.section-pricing .col-inner li {
    border-bottom: 1px solid #b9524b;
}
.section-pricing .col-inner .subhead,
.section-pricing .col-inner h2 {
    border-bottom: 1px solid rgb(255 255 255 / 12%);
    padding-bottom: 15px;
    margin-bottom: 15px;
    line-height: 1.3;
	font-size: 2rem;
}
.section-pricing .col-inner .subhead,
.section-pricing .col-inner .packagename {
    color: #dcbe65 !important;
    font-weight: 900;
	border-bottom: 1px solid rgb(255 255 255 / 12%);
    padding-bottom: 15px;
    margin-bottom: 15px;
    line-height: 1.3;
}
.section-pricing .col-inner .packagename {
	font-size: 150%;
}
/* 5. Tùy chỉnh danh sách (Bullets) */
.package-text ul {
    margin-left: 0;
    padding-left: 0;
    list-style: none;
}

.package-text li.bullet-checkmark::before {
    content: "✓";
    margin-right: 10px;
    margin-top: 4px;
    color: #ffd700; /* Màu vàng kim loại cho dấu tick nổi bật trên nền đỏ */
    font-weight: bold;
    font-size: 75%;
}

/* 6. Nút bấm (Button) - Làm nổi bật trên nền Gradient */
.section-pricing .button {
    position: absolute;
    bottom: 30px;
    left: 30px;
    right: 30px;
    margin: 0 auto;
    background-color: #800e06 !important; /* Nút màu trắng nổi bật */
    color: #ad2927 !important; /* Chữ màu đỏ chủ đạo */
    border: none;
    font-weight: bold;
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
	max-width: calc(100% - 60px) !important;
}

.section-pricing .button:hover {
    background-color: #333 !important;
    color: #ffffff !important;
}

/* Responsive cho Mobile */
@media (max-width: 849px) {
    .section-pricing .col-inner {
        margin-bottom: 20px;
    }
}

/* bg-color number block */
/* Container - nền watercolor */
.block-watercolor {
/*     background-image: url('https://png.pngtree.com/png-clipart/20190516/original/pngtree-watercolor-vector-background-design-png-image_3754715.jpg');  */
    background-size: cover;
    background-position: center;
    padding: 40px 30px;
    border-radius: 8px;
    color: #333; /* Màu chữ chính */
}

/* Kiểu dáng cho từng dòng */
.block-watercolor .row-collapse {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* Đường gạch chân mờ giữa các mục */
    padding: 15px 0;
    display: flex;
    align-items: center; /* Căn giữa theo chiều dọc */
    transition: all 0.3s ease;
}

/* Hiệu ứng khi di chuột qua mỗi dòng */
.block-watercolor .row-collapse:hover {
    background-color: rgba(255, 255, 255, 0.3);
    padding-left: 10px;
}

/* Loại bỏ gạch chân cho dòng cuối cùng */
.block-watercolor .row-collapse:last-child {
    border-bottom: none;
}

/* Style cho con số (01, 02, 03...) */
.block-watercolor .row-collapse h2 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #8b5e3c; /* Color style decor */
    margin: 0;
    line-height: 1;
    opacity: 0.8;
}

/* Style cho phần văn bản */
.block-watercolor .row-collapse p {
    font-size: 1.1rem;
    font-weight: 500;
    margin: 0;
    padding-left: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #444;
}

/* Tùy chỉnh trên Mobile */
@media screen and (max-width: 549px) {
    .block-watercolor .row-collapse h2 {
        font-size: 1.4rem;
    }
    .block-watercolor .row-collapse p {
        font-size: 0.9rem;
    }
}

.full-width-project .section-bg img {
    transition: opacity 0.4s ease, transform 0.6s ease !important;
    object-fit: cover;
}

.full-width-project .image-zoom {
    opacity: 0.7;
    transform: scale(1.05);
}
.wpcf7-form p.text-center {
    display: flex;
    justify-content: center;
    flex-direction: row;
}
.wpcf7-form  input[type=submit] {
    margin-right: 0;
}
.wpcf7-form .wpcf7-spinner{
    display: none;
}