/*
Theme Name: Total
Theme URI: https://hashthemes.com/wordpress-theme/total/
Author: HashThemes
Author URI: https://hashthemes.com
Description: ​The Total WordPress Theme is a versatile, feature-rich, and fully responsive theme designed to help you create stunning websites effortlessly. With over 40,000 active installations, Total offers a clean and elegant design complemented by vibrant color options and parallax sections. Its homepage layout includes a slider, featured sections with icons, an about us section with progress bars, a masonry-style portfolio, team and testimonial sections, counters, a customizable blog section, client logo carousel, and a compelling call-to-action area. Built on the WordPress Customizer, Total allows real-time configuration with live previews, making customization intuitive and straightforward. The theme is SEO-friendly, cross-browser compatible, translation-ready, and seamlessly integrates with WooCommerce, enabling you to set up an online store with ease. It also supports major page builders like Elementor, WPBakery, SiteOrigin, and Beaver Builder, providing flexibility in designing your site. With a one-click demo import feature, you can quickly replicate the demo layout and customize it to fit your needs. Whether you're building a business website, portfolio, blog, or online store, Total provides all the essential tools and features to create a professional and engaging online presence. DEMO: https://hashthemes.com/wordpress-theme/total/
Version: 2.2.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: total
Tags: two-columns, right-sidebar, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, theme-options, threaded-comments, translation-ready, portfolio, education, blog
Tested up to: 6.9
Requires PHP: 7.2
*/

/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
:root {
    --total-h-size: 42px;
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
    display: block;
    margin: 0;
}

audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

[hidden],
template {
    display: none;
}

a {
    background-color: transparent;
}

a:active,
a:hover {}

abbr[title] {
    border-bottom: 1px dotted;
}

b,
strong {
    font-weight: bold;
}

dfn {
    font-style: italic;
}

mark {
    background: #ff0;
    color: #000;
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

img {
    border: 0;
}

svg:not(:root) {
    overflow: hidden;
}

figure {}

hr {
    box-sizing: content-box;
    height: 0;
}

pre {
    overflow: auto;
}

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}

button {
    overflow: visible;
}

button,
select {
    text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}

button[disabled],
html input[disabled] {
    cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

input {
    line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
    margin-right: 10px;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

input[type="search"] {
    -webkit-appearance: textfield;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

legend {
    border: 0;
    padding: 0;
}

textarea {
    overflow: auto;
}

optgroup {
    font-weight: bold;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

td,
th {
    padding: 0;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
textarea {
    color: var(--total-body-color, #000);
    font-size: var(--total-body-size, 15px);
    letter-spacing: var(--total-body-letter-spacing, 0);
    line-height: var(--total-body-line-height, 1.4);
    font-family: var(--total-body-family, Poppins);
    font-weight: var(--total-body-weight, 400);
    font-style: var(--total-body-style, normal);
    text-decoration: var(--total-body-text-decoration, none);
    text-transform: var(--total-body-text-transform, none);
}

h1,
h2,
h3,
h4,
h5,
h6,
.ht-site-title,
.ht-slide-cap-title,
.ht-counter-count {
    font-family: var(--total-h-family, Oswald);
    letter-spacing: var(--total-h-letter-spacing, 0);
    line-height: var(--total-h-line-height, 1.3);
    font-weight: var(--total-h-weight, 400);
    font-style: var(--total-h-style, normal);
    text-decoration: var(--total-h-text-decoration, none);
    text-transform: var(--total-h-text-transform, none);
}

h1 {
    font-size: var(--total-h-size);
    margin: 0 0 15px 0;
}

h2 {
    font-size: calc(var(--total-h-size) * 7/8);
    margin: 0 0 15px 0;
}

h3 {
    font-size: calc(var(--total-h-size) * 6/8);
    margin: 0 0 15px 0;
}

h4 {
    font-size: calc(var(--total-h-size) * 5/8);
    margin: 0 0 10px 0;
}

h5 {
    font-size: calc(var(--total-h-size) * 4/8);
    margin: 0 0 10px 0;
}

h6 {
    font-size: calc(var(--total-h-size) * 3/8);
    margin: 0 0 10px 0;
}

p {
    margin: 0 0 15px;
}

dfn,
cite,
em,
i {
    font-style: italic;
}

blockquote {
    margin: 0 15px;
}

address {
    margin: 0 0 15px;
}

pre {
    background: #eee;
    font-family: "Courier 10 Pitch", Courier, monospace;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 15px;
    max-width: 100%;
    overflow: auto;
    padding: 15px;
}

code,
kbd,
tt,
var {
    font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
    font-size: 15px;
}

abbr,
acronym {
    border-bottom: 1px dotted #666;
    cursor: help;
}

mark,
ins {
    background: #fff9c0;
    text-decoration: none;
}

big {
    font-size: 125%;
}

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
    box-sizing: inherit;
}

body {
    background: #fff;
    /* Fallback for when there is no custom background color defined. */
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
}

blockquote,
q {
    quotes: "" "";
}

hr {
    background-color: #ccc;
    border: 0;
    height: 1px;
    margin-bottom: 15px;
}

ul,
ol {
    margin: 0 0 15px 20px;
    padding: 0;
}

ul {
    list-style: disc;
}

ol {
    list-style: decimal;
}

li > ul,
li > ol {
    margin-bottom: 0;
    margin-left: 15px;
}

dt {
    font-weight: bold;
}

dd {
    margin: 0 15px 15px;
}

img {
    height: auto;
    /* Make sure images are scaled correctly. */
    max-width: 100%;
    /* Adhere to container width. */
    vertical-align: middle;
}

table {
    margin: 0 0 15px;
    width: 100%;
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
body div.wpforms-container-full .wpforms-form input[type=submit],
body div.wpforms-container-full .wpforms-form button[type=submit],
body div.wpforms-container-full .wpforms-form .wpforms-page-button {
    background: var(--total-template-color);
    padding: 8px 20px;
    color: #FFF;
    border: 0;
    transition: all 0.3s ease;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
body div.wpforms-container-full .wpforms-form input[type=submit]:hover,
body div.wpforms-container-full .wpforms-form input[type=submit]:focus,
body div.wpforms-container-full .wpforms-form input[type=submit]:active,
body div.wpforms-container-full .wpforms-form button[type=submit]:hover,
body div.wpforms-container-full .wpforms-form button[type=submit]:focus,
body div.wpforms-container-full .wpforms-form button[type=submit]:active,
body div.wpforms-container-full .wpforms-form .wpforms-page-button:hover,
body div.wpforms-container-full .wpforms-form .wpforms-page-button:active,
body div.wpforms-container-full .wpforms-form .wpforms-page-button:focus {
    background: #333;
    border: 0;
}

body div.wpforms-container-full .wpforms-form .wpforms-field-label {
    font-weight: normal;
}

button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
    color: #404040;
    border: 1px solid #EEE;
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    vertical-align: top;
}

select {
    border: 1px solid #EEE;
    padding: 8px 40px 8px 8px;
    line-height: 100%;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Capa_1' x='0px' y='0px' width='10px' height='10' fill='%23666666' viewBox='0 0 284.929 284.929' style='enable-background:new 0 0 284.929 284.929;' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M282.082,76.511l-14.274-14.273c-1.902-1.906-4.093-2.856-6.57-2.856c-2.471,0-4.661,0.95-6.563,2.856L142.466,174.441 L30.262,62.241c-1.903-1.906-4.093-2.856-6.567-2.856c-2.475,0-4.665,0.95-6.567,2.856L2.856,76.515C0.95,78.417,0,80.607,0,83.082 c0,2.473,0.953,4.663,2.856,6.565l133.043,133.046c1.902,1.903,4.093,2.854,6.567,2.854s4.661-0.951,6.562-2.854L282.082,89.647 c1.902-1.903,2.847-4.093,2.847-6.565C284.929,80.607,283.984,78.417,282.082,76.511z'/%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E") no-repeat right 10px top 55%;
    position: relative;
    cursor: pointer;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"] {
    padding: 8px;
}

textarea {
    padding: 8px;
    width: 100%;
}

/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
a {
    color: var(--total-content-link-color, #000);
    text-decoration: none;
    transition: all 0.3s ease;
}

a:visited {}

a:hover {
    color: var(--total-content-link-hov-color, var(--total-content-link-color));
}

a:focus {}

a:hover,
a:active {}


/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
    /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: bold;
    height: auto;
    right: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
    /* Above WP toolbar. */
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
    outline: 0;
}

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
    display: inline;
    float: left;
    margin-right: 15px;
}

.alignright {
    display: inline;
    float: right;
    margin-left: 15px;
}

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.ht-clearfix:before,
.ht-clearfix:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after {
    content: "";
    display: table;
}

.ht-clearfix:after,
.entry-content:after,
.comment-content:after {
    clear: both;
}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget {
    margin: 0 0 15px;
}

/* Make sure select elements fit in widgets. */
.widget select {
    max-width: 100%;
}

/* Search widget. */
.widget_search .search-submit {
    display: none;
}

.widget-area select {
    width: 100%;
}


/* Contact Info Widget */
.ht-contact-info ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ht-contact-info ul li {
    padding: 5px 0 5px 30px !important;
    margin: 0;
    border: none;
}

.ht-contact-info ul li i {
    margin-left: -30px;
    float: left;
    margin-top: 6px;
}

.ht-contact-info p {
    margin: 0;
    line-height: 1.3;
    font-size: 14px;
}

/* Personal Info Widget */
.ht-personal-info .ht-pi-image {
    margin-bottom: 20px;
    text-align: center;
}

.ht-personal-info .ht-pi-image img {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    object-fit: cover;
    object-position: center;
}

.ht-personal-info .ht-pi-name {
    margin-bottom: 15px;
    font-size: 1.4em;
    text-align: center;
}

.ht-personal-info .ht-pi-intro {
    text-align: center;
}

/* Latest Post */
.ht-latest-posts {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ht-latest-posts li {
    padding: 0 !important;
    line-height: 1.5;
    margin: 0 0 20px !important;
}

.ht-latest-posts li:last-child {
    margin: 0 !important;
}

.ht-latest-posts .ht-lp-title {
    margin-bottom: 0;
}

.ht-lp-image {
    float: left;
    width: 30%
}

.ht-lp-image + .ht-lp-content {
    width: 70%;
    float: right;
    padding-left: 20px
}

.ht-lp-title a {
    color: inherit
}

.ht-lp-excerpt {
    margin-top: 5px;
    font-size:13px;
}

/* Search */
:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) .wp-block-search__input {
    border: none !important;
}
/* --- BIẾN MÀU THƯƠNG HIỆU --- */
:root {
    --primary-color: #f90104;
    --secondary-color: #222222;
    --background-white: #ffffff;
    --light-gray: #f8f8f8;
    --text-color: #333333;
    --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* --- ĐỊNH DẠNG CHUNG --- */
.hp-section {
    background-color: var(--background-white);
}
.hp-news,.hp-partners,.hp-team,.hp-services{padding:30px 0;}
.bg-light {
    background-color: var(--light-gray);
}
.text-center {
    text-align: center;
}
.sec-heading {
    font-size: 30px;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 35px;
    text-transform: uppercase;
}
.sec-heading.text-center::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: var(--primary-color);
    margin: 12px auto 0;
}

/* --- SECTION 1: GIÁ TRỊ CỐT LÕI (CẬP NHẬT THEO THIẾT KẾ MỚI) --- */
.hp-core-values {
    padding: 30px 0; /* Thu nhỏ padding lại cho thanh thoát giống ảnh */
    background-color: var(--background-white);
    border-bottom: 1px solid #f0f0f0; /* Đường viền mỏng làm chân đế (tùy chọn) */
}

.core-values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
}

.core-value-item {
    display: grid;
    grid-template-columns: auto 1fr; /* Chia 2 cột: Icon tự động theo kích thước | Text chiếm phần còn lại */
    grid-template-rows: auto auto; /* Chia 2 hàng dọc: Tiêu đề | Mô tả */
    column-gap: 15px; /* Khoảng cách giữa icon và chữ */
    padding: 0 25px; /* Khoảng cách với đường kẻ dọc */
    position: relative;
    text-align: left;
}

/* Căn lề sát lưới cho phần tử đầu tiên và cuối cùng */
.core-value-item:first-child {
    padding-left: 0;
}
.core-value-item:last-child {
    padding-right: 0;
}

/* Đường kẻ dọc phân cách (Divider) nằm giữa các khối */
.core-value-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 75%; /* Chiều cao đường kẻ */
    width: 1px;
    background-color: #e0e0e0; /* Màu xám nhạt */
}

/* Đẩy icon chiếm cả 2 hàng chữ */
.cv-icon {
    grid-column: 1;
    grid-row: 1 / 3; 
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0; 
}

/* --- CHUYỂN ICON SECTION 1 SANG MÀU ĐỎ --- */
.cv-icon img {
    height: 45px;
    width: auto;
    object-fit: contain;
    
    /* BỔ SUNG DÒNG NÀY: Thuật toán chuyển đen thành đỏ #f90104 */
    filter: invert(11%) sepia(87%) saturate(6747%) hue-rotate(358deg) brightness(101%) contrast(113%);
}

/* Căn chỉnh Text */
.cv-title {
    grid-column: 2;
    grid-row: 1;
    font-size: 15px;
    font-weight: 800;
    color: var(--primary-color);
    text-transform: uppercase;
    margin-bottom: 3px;
    align-self: end; /* Đẩy tiêu đề sát xuống mô tả */
}

.cv-desc {
    grid-column: 2;
    grid-row: 2;
    font-size: 13px;
    color: #666666;
    line-height: 1.4;
    margin: 0;
    align-self: start;
}

/* --- RESPONSIVE CHO TABLET & MOBILE --- */
@media (max-width: 1024px) {
    .core-values-grid {
        grid-template-columns: repeat(2, 1fr); /* Rơi xuống 2 cột */
        row-gap: 30px;
    }
    .core-value-item {
        padding: 0 20px;
    }
    /* Ẩn đường kẻ ở item thứ 2 vì nó là phần tử cuối của hàng 1 */
    .core-value-item:nth-child(2)::after {
        display: none; 
    }
    /* Set lại khoảng cách 2 mép màn hình */
    .core-value-item:nth-child(2n+1) {
        padding-left: 0;
    }
    .core-value-item:nth-child(2n) {
        padding-right: 0;
    }
}

@media (max-width: 767px) {
    .core-values-grid {
        grid-template-columns: 1fr; /* Rơi xuống 1 cột */
        row-gap: 20px;
    }
    .core-value-item {
        padding: 10px 0 !important; /* Xóa toàn bộ đệm */
        border-bottom:1px solid #eee;
    }
    .core-value-item::after {
        display: none; /* Xóa toàn bộ đường kẻ dọc */
    }
}

/* --- SECTION 2: DỊCH VỤ NỔI BẬT --- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}
.service-card {
    background-color: var(--background-white);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: var(--transition-smooth);
}
.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}
.s-media {
    position: relative;
}
.s-bg-img {
    width: 100%;
    object-fit: cover;
    display: block;
}
.s-icon-badge {
    position: absolute;
    bottom: -20px;
    left: 20px;
    background-color: var(--primary-color);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 8px rgba(249, 1, 4, 0.3);
}
.owl-carousel .owl-item .s-icon-badge img {
    width: 22px;
    height: 22px;
    filter: brightness(0) invert(1);
}
.s-content {
    padding: 35px 20px 25px;
}
.s-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 10px;
}
.s-excerpt {
    font-size: 14px;
    color: var(--text-color);
    line-height: 1.5;
    margin-bottom: 20px;
    height: 66px;
    overflow: hidden;
}
.s-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
    text-transform: uppercase;
}
/* --- SECTION 3: QUY TRÌNH LÀM VIỆC (CẬP NHẬT THEO THIẾT KẾ) --- */
.hp-workflow {
    padding: 30px 0;
    background-color: #eee; /* Đổi sang nền trắng theo ảnh */
}

.workflow-timeline {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    padding-top: 20px;
}

.workflow-step {
    flex: 1;
    text-align: center;
    position: relative;
    padding: 0 10px;
}

/* Container chứa vòng tròn và số thứ tự */
.wf-visual {
    position: relative;
    display: inline-block;
    margin-bottom: 25px;
}

/* Vòng tròn nền nhạt chứa Icon */
.wf-icon-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #fff4f4; /* Nền đỏ cực nhạt */
    border: 1px solid #ffe6e6; /* Viền đỏ nhạt */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
	border: 1px solid #ff0000;
}

.wf-icon-circle img {
    width: 45px; /* Kích thước icon */
    height: auto;
    object-fit: contain;
     filter: invert(11%) sepia(87%) saturate(6747%) hue-rotate(358deg) brightness(101%) contrast(113%);
}

/* Số thứ tự (Badge 1, 2, 3...) */
.wf-number-badge {
    position: absolute;
    top: -14px; /* Kéo lên đúng bằng một nửa chiều cao của badge (28px / 2) */
    left: 50%; /* Đẩy ra giữa container */
    transform: translateX(-50%); /* Căn tâm chính xác trục ngang */
    background-color: #ffffff;
    color: var(--primary-color);
    font-weight: 800;
    font-size: 14px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 2;
}
/* --- ĐƯỜNG NỐI NÉT ĐỨT --- */
.workflow-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50px; /* Căn giữa theo chiều cao 100px của vòng tròn */
    left: calc(50% + 60px); /* Bắt đầu cách tâm vòng tròn ra ngoài */
    width: calc(100% - 120px); /* Chiều dài nét đứt nối tới sát vòng tiếp theo */
    border-top: 2px dotted var(--primary-color);
    z-index: 1;
}

/* --- MŨI TÊN (Nằm ở cuối nét đứt) --- */
.workflow-step:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 46px; /* Căn giữa mũi tên với đường nét đứt (50px - 4px) */
    left: calc(150% - 60px); /* Định vị chính xác ở điểm cuối của nét đứt */
    border-width: 5px 0 5px 6px; /* Tạo hình tam giác */
    border-style: solid;
    border-color: transparent transparent transparent var(--primary-color);
    z-index: 2;
}

/* --- TYPOGRAPHY (CHỮ) --- */
.wf-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--secondary-color);
    text-transform: uppercase;
    margin-bottom: 10px;
    line-height: 1.4;
}

.wf-desc {
    font-size: 13px;
    color: #666666;
    line-height: 1.5;
    margin: 0 auto;
    max-width: 90%;
}

/* ====================================================
   RESPONSIVE: QUY TRÌNH LÀM VIỆC (TABLET & MOBILE)
==================================================== */

@media (max-width: 1024px) {
    .workflow-timeline {
        display: flex ;
        flex-wrap: wrap ;
        padding-top: 15px ; /* Đẩy toàn bộ khung xuống để cứu số 1 không bị cắt */
        gap: 0 ; /* Tắt gap, dùng margin để trình duyệt không tính sai chiều rộng */
    }
    
    .workflow-step {
        flex: 0 0 50% ; /* Ép buộc chia đúng 2 cột trên Tablet */
        max-width: 50% ;
        padding: 0 15px ;
        margin-bottom: 30px ; /* Tạo khoảng trống rộng rãi giữa hàng trên và hàng dưới */
        box-sizing: border-box ;
    }

    /* Ẩn triệt để đường nối nét đứt và mũi tên */
    .workflow-step::after,
    .workflow-step::before {
        display: none;
    }

    /* Đảm bảo vòng tròn và số luôn nằm chính giữa */
    .wf-visual {
        display: flex ;
        justify-content: center ;
        margin-bottom: 20px ;
    }
    
    .wf-number-badge {
        left: 50% ;
        transform: translateX(-50%);
    }
}


@media (max-width: 767px) {
    /* Mobile: Chuyển sang giao diện Vertical Timeline (Trục dọc) chuyên nghiệp */
    .workflow-timeline {
        display: flex;
        flex-direction: column;
        gap: 15px; /* Khoảng cách giữa các bước */

    }
    
    .workflow-step {
        display: grid;
        grid-template-columns: 70px 1fr; /* Cột trái icon 70px, cột phải chứa chữ */
        column-gap: 20px;
        text-align: left; /* Đổi thành căn trái */
        padding: 0;
        position: relative;
    }

    .wf-visual {
        grid-column: 1;
        grid-row: 1 / 3;
        margin-bottom: 0;
        display: flex;
        justify-content: center;
    }

    /* Thu nhỏ vòng tròn icon để vừa vặn trên điện thoại */
    .wf-icon-circle {
        width: 70px;
        height: 70px;
    }
    
    .wf-icon-circle img {
        width: 32px;
    }

    /* Thu nhỏ huy hiệu số thứ tự */
    .wf-number-badge {
        width: 22px;
        height: 22px;
        font-size: 12px;
        top: -6px;
    }

    /* Căn chỉnh Text ôm sát icon */
    .wf-title {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
        margin-bottom: 5px;
        font-size: 15px;
    }

    .wf-desc {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        font-size: 13px;
        max-width: 100%;
    }

    /* TẠO ĐƯỜNG NỐI DỌC TRÊN MOBILE */
    .workflow-step:not(:last-child)::after {
        display: block; /* Bật lại ::after đã bị ẩn ở Tablet */
        content: '';
        position: absolute;
        top: 75px; /* Bắt đầu từ dưới đáy vòng tròn */
        bottom: -20px; /* Kéo dài xuyên qua khoảng trống tới bước tiếp theo */
        left: 34px; /* Căn chính giữa cột icon (70/2 - 1px border) */
        width: 0;
        height: auto;
        border-top: none; /* Xóa đường ngang */
        border-left: 2px dashed var(--primary-color); /* Thêm đường dọc */
        opacity: 0.4;
    }
       .workflow-step {
        flex: 0 0 100% !important; /* Rớt xuống 1 cột trên Mobile */
        max-width: 100% !important;
        margin-bottom: 15px !important;
    }
    
    
    .wf-icon-circle img {
        width: 35px !important;
    }
    
    /* Thu nhỏ số thứ tự tương ứng */
    .wf-number-badge {
        top: -12px !important;
        width: 24px !important;
        height: 24px !important;
        font-size: 13px !important;
    }
}

/* --- SECTION 4: THÀNH TỰU --- */
.hp-statistics {
    background-color: var(--primary-color);
    color: var(--background-white);
    padding: 45px 0;
}
.statistics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.stat-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    border-right: 1px solid rgba(255, 255, 255, 0.25);
}
.stat-box:last-child {
    border-right: none;
}
.st-icon-wrap img {
    width: 44px;
    height: 44px;
    filter: brightness(0) invert(1);
}
.st-number {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
}
.st-label {
    font-size: 13px;
    text-transform: uppercase;
    opacity: 0.95;
    font-weight: 500;
}

/* --- SECTION 5: ĐỘI NGŨ CHUYÊN GIA --- */
.team-member-card {
    background-color: var(--background-white);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
    text-align: center;
    margin: 10px 0;
}
.tm-photo img {
    width: 100%;
    height: auto;
    display: block;
}
.tm-meta {
    padding: 20px 15px;
}
.tm-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 4px;
}
.tm-position {
    font-size: 13px;
    color: var(--secondary-color);
    font-style: italic;
    margin-bottom: 12px;
    border-bottom: 1px dashed #e5e5e5;
    padding-bottom: 8px;
}
.tm-bio {
    font-size: 13px;
    color: var(--text-color);
    line-height: 1.4;
}
/* Gộp class .hp-services vào để nhận chung style mũi tên đỏ nằm ngoài container */
.hp-services .owl-nav button,
.hp-team .owl-nav button, 
.hp-partners .owl-nav button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none !important;
    color: var(--primary-color) !important;
    font-size: 36px !important;
}

.hp-services .owl-nav button.owl-prev,
.hp-team .owl-nav button.owl-prev, 
.hp-partners .owl-nav button.owl-prev { left: -40px; }

.hp-services .owl-nav button.owl-next,
.hp-team .owl-nav button.owl-next, 
.hp-partners .owl-nav button.owl-next { right: -40px; }

/* Thêm padding nhỏ để khi hover Card nảy lên không bị cắt mất bóng đổ (shadow) */
.hp-services .owl-stage-outer {
    padding-bottom: 15px; 
    padding-top: 10px;
}
/* Custom Navigation Mũi tên đỏ của Owl */
/* --- LƯỚI ĐỘI NGŨ CHUYÊN GIA TRANG CHỦ (CĂN GIỮA, KHÔNG CAROUSEL) --- */
.hp-team-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Tự động căn giữa các chuyên gia */
    gap: 30px;
    padding-top: 15px;
}

.hp-team-grid .team-member-card {
    /* Mặc định trên Desktop kích thước card bằng 1/4 (chia 4 cột) */
    flex: 0 0 calc((100% - 90px) / 3);
    max-width: calc((100% - 90px) / 3);
    margin: 0; /* Xóa margin cũ của card */
}

/* Ép ảnh trang chủ cũng theo tỷ lệ 2:3 chuẩn ảnh thẻ (Tùy chọn) */
.hp-team-grid .tm-photo {
    width: 100%;
    overflow: hidden;
}
.hp-team-grid .tm-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* --- RESPONSIVE CHO LƯỚI TRANG CHỦ --- */
@media (max-width: 1024px) {
    .hp-team-grid .team-member-card {
        flex: 0 0 calc((100% - 60px) / 3); /* Tablet: 3 cột */
        max-width: calc((100% - 60px) / 3);
    }
}

@media (max-width: 768px) {
    .hp-team-grid .team-member-card {
        flex: 0 0 calc((100% - 30px) / 2); /* Mobile ngang: 2 cột */
        max-width: calc((100% - 30px) / 2);
    }
}

@media (max-width: 480px) {
    .hp-team-grid .team-member-card {
        flex: 0 0 100%; /* Mobile dọc: 1 cột */
        max-width: 100%;
    }
}

/* --- SECTION 6: ĐỐI TÁC TIÊU BIỂU --- */
.partner-logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90px;
    padding: 10px;
    border: 1px solid #eaeaea;
    border-radius: 4px;
}
.partner-logo-item img {
    max-height: 55px;
    width: auto !important;
    opacity: 1;
}


/* --- SECTION 7: TIN TỨC --- */
.news-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}
.news-top-bar .sec-heading {
    margin-bottom: 0;
}
.view-all-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
}
.news-grid-layout {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}
.news-post-card {
    background-color: var(--background-white);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
}
.np-thumbnail img {
    width: 100%;
    object-fit: cover;
    display: block;
}
.np-body {
    padding: 18px;
}
.np-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 8px;
    height: 42px;
    overflow: hidden;
}
.np-title a {
    color: var(--secondary-color);
    text-decoration: none;
}
.np-title a:hover {
    color: var(--primary-color);
}
.np-date {
    font-size: 12px;
    color: #888888;
    margin-bottom: 12px;
}
.category-dich-vu .np-date{display:none;}
.np-excerpt {
    font-size: 13px;
    color: var(--text-color);
    line-height: 1.4;
    margin-bottom: 15px;
    height: 54px;
    overflow: hidden;
}
.np-more-btn {
    font-size: 12px;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
    text-transform: uppercase;
}

/* --- HỖ TRỢ ĐÁP ỨNG GIAO DIỆN (RESPONSIVE) --- */
@media (max-width: 1024px) {
    .services-grid, .news-grid-layout {
        grid-template-columns: repeat(2, 1fr); /* Tablet: 2 cột */
    }
    .core-values-grid, .statistics-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .workflow-step:not(:last-child)::after {
        display: none; /* Tắt đường nối ngang ở mobile/tablet */
    }
    .stat-box {
        border-right: none;
        padding: 10px 0;
    }
    .hp-team .owl-nav, .hp-partners .owl-nav {
        display: none; /* Ẩn nút điều hướng ngoài container ở tablet */
    }
}

@media (max-width: 767px) {
    .stat-box{padding:5px 0;justify-content: left;}
    .services-grid, .news-grid-layout, .core-values-grid, .statistics-grid {
        grid-template-columns: 1fr; /* Mobile: 1 cột */
    }
    .sec-heading {
        font-size: 20px;
        margin-bottom:15px;
    }
}
/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
.sticky {
    display: block;
}

.hentry {
    margin: 0 0 30px;
}

.total-hentry {
    margin: 0 0 50px;
}

.byline,
.updated:not(.published) {
    display: none;
}

.page-content,
.entry-content {
    margin-bottom: 50px;
}

.page-template-page-builder-template .page-content {
    margin-bottom: 0;
}

.page-links {
    clear: both;
    margin: 0 0 15px;
}

#primary {
    width: calc(96% - var(--total-sidebar-width));
    float: left;
}

#secondary {
    width: var(--total-sidebar-width);
    float: right;
}

.ht_no_sidebar #primary {
    width: auto;
    float: none;
}

.ht_no_sidebar_condensed #primary {
    width: 76%;
    float: none;
    margin: 0 auto;
}

.ht_left_sidebar #primary {
    float: right;
}

.ht_left_sidebar #secondary {
    float: left;
}

.content-area h1,
.content-area h2,
.content-area h3,
.content-area h4,
.content-area h5,
.content-area h6,
.widget-area h1,
.widget-area h2,
.widget-area h3,
.widget-area h4,
.widget-area h5,
.widget-area h6 {
    color: var(--total-content-header-color);
}

.content-area,
.widget-area {
    color: var(--total-content-text-color);
}

.ht-post-info {
    float: left;
    width: 80px;
    text-align: right;
}

.single-entry-meta {
    display: none;
    justify-content: space-between;
    margin-bottom: 30px;
    font-size: 0.9em;
}

.single-entry-meta .entry-date:before {
    content: "\f073";
    font-family: FontAwesome;
    margin-right: 5px;
}

.single-entry-meta .entry-date span {
    display: inline-block;
    margin-right: 5px;
}

.single-entry-meta a {
    color: inherit;
}

.single-entry-meta a i {
    margin-right: 5px;
}

.single-featured-img {
    text-align: center;
    margin-bottom: 20px;
}

.ht-post-info .entry-date {
    display: block;
    font-size: 0.9em;
    margin-bottom: 20px;
}

.ht-post-info .entry-date span {
    display: block;
    text-transform: uppercase;
}

.ht-post-info .entry-date span.ht-day {
    font-size: 60px;
    line-height: 1.3;
    color: var(--total-template-color);
}

.ht-post-info > a {
    display: block;
    text-decoration: none;
    line-height: 1.4;
    padding: 20px 0 0;
    text-transform: uppercase;
    border-top: 1px solid #EEE;
    font-size: 12px;
    color: inherit;
    font-weight: 300;
}

.ht-post-wrapper {
    padding-left: 110px;
}

.entry-figure {
    background: #f9f9f9;
    text-align: center;
    margin-bottom: 15px;
}

.entry-header .entry-title {
    margin-bottom: 10px;
}

.entry-figure + .entry-header {
    background: #FFF;
    position: relative;
    margin-top: -65px;
    width: 90%;
    padding: 15px 0 1px;
}

.entry-header .entry-title a {
    text-decoration: none;
    color: var(--total-content-text-color);
}

.entry-categories {
    font-size: 14px;
    font-style: italic;
    margin-bottom: 15px;
}

.entry-categories i {
    margin-right: 8px;
}

.entry-categories a {
    color: inherit;
    text-decoration: none;
}

.entry-readmore {
    margin-top: 20px;
}

.entry-readmore a {
    background: var(--total-template-color);
    padding: 8px 20px;
    color: #FFF;
    border: 0;
    transition: all 0.3s ease;
    display: inline-block;
    text-decoration: none;
}

.entry-readmore a:hover {
    background: #333;
    color: #FFF;
}

/*--------------------------------------------------------------
## Asides
--------------------------------------------------------------*/
.widget-area .widget-title {
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.widget-area .widget-title:after {
    content: "";
    position: absolute;
    left: 0;
    top: 100%;
    width: 30px;
    background: var(--total-template-color);
    height: 2px;
}

.widget-area ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget-area ul ul {
    padding-left: 10px;
}

.widget-area ul ul li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.widget-area li {
    padding: 0;
    margin: 0 0 15px;
}

.widget-area li:last-child {
    margin-bottom: 0;
}

.widget-area a {
    text-decoration: none;
    color: var(--total-content-text-color);
}

.widget-area .widget {
    margin-bottom: 35px;
}

.widget-area .widget .search-field {
    width: 100%;
}

/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
.comment-content a {
    word-wrap: break-word;
}

.bypostauthor {
    display: block;
}

.author-email-url {
    margin-left: -2%;
}

.comment-form-author,
.comment-form-email,
.comment-form-url {
    float: left;
    margin-left: 2%;
    width: 31.33333%;
}

.author-email-url input {
    width: 100%;
}

.comment-form .form-submit {
    margin-bottom: 0
}

#comments {
    margin-bottom: 50px;
}

.comment-reply-title,
.comments-title {
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 30px;
}

.comment-reply-title:after,
.comments-title:after {
    content: "";
    position: absolute;
    left: 0;
    top: 100%;
    width: 30px;
    background: var(--total-template-color);
    height: 2px;
}

.logged-in-as,
.comment-notes {
    font-size: 0.9em;
}

#comments ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#comments li.comment {
    margin: 0 0 40px;
}

#comments li.comment .children {
    display: block;
    margin: 20px 0 0 30px;
    padding: 0px;
    list-style: none;
}

article.comment-body {
    background: #fff;
    margin: 0px;
    position: relative;
}

.comment-list a {
    color: #404040;
}

.comment-list a:hover {
    color: var(--total-template-color) !important;
}

.comment-list .comment-respond {
    margin-top: 20px;
    background: #FFF;
    padding: 20px;
}

.comment-list .vcard img {
    border-radius: 50%;
    margin-right: 10px;
}

.comment-list .vcard .fn {
    font-weight: normal;
    font-size: 16px;
}

.comment-list .edit-link {
    position: absolute;
    right: 0;
    top: 0;
}

.comment-list .edit-link a {
    font-size: 14px;
    display: inline-block;
    padding: 10px;
}

.comment-list .comment-meta {
    margin-bottom: 15px;
}

.comment-list .comment-metadata {
    border-top: 1px solid #EEE;
    padding-top: 10px;
    font-size: 14px;
}

.comment-list .comment-metadata a {
    float: left;
}

.comment-list .comment-metadata .reply {
    float: right;
}

#cancel-comment-reply-link {
    float: right;
}

.nav-previous a,
.nav-next a {
    background: var(--total-template-color);
    color: #FFF;
    display: inline-block;
    padding: 0 10px;
    font-size: 12px;
    line-height: 22px;
    position: relative;
}

.nav-next a {
    margin-right: 13px;
}

.nav-next a:after {
    content: "";
    position: absolute;
    border-left: 11px solid var(--total-template-color);
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    top: 0;
    right: -11px;
}

.nav-previous a {
    margin-left: 11px;
}

.nav-previous a:after {
    content: "";
    position: absolute;
    border-right: 11px solid var(--total-template-color);
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    top: 0;
    left: -11px;
}

.no-comments {
    color: var(--total-template-color);
}

.pagination,
.woocommerce nav.woocommerce-pagination {
    text-align: center;
    margin-bottom: 50px;
}

.home.blog .pagination {
    margin-bottom: 40px;
}

.pagination .page-numbers {
    display: inline-block;
    margin: 0 2px;
    background: var(--total-template-color);
    color: #FFF;
    padding: 10px 15px;
    line-height: 1;
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover {
    background: #333;
    color: #FFF;
}

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
    border: none;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
    max-width: 100%;
}

/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.wp-caption {
    margin-bottom: 15px;
    max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
    display: block;
    margin: 0 auto;
}

.wp-caption-text {
    text-align: center;
}

.wp-caption .wp-caption-text {
    margin: 0.8075em 0;
}

/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.gallery {
    margin-bottom: 15px;
}

.gallery-item {
    display: inline-block;
    text-align: center;
    vertical-align: top;
    width: 100%;
}

.gallery-columns-2 .gallery-item {
    max-width: 50%;
}

.gallery-columns-3 .gallery-item {
    max-width: 33.33%;
}

.gallery-columns-4 .gallery-item {
    max-width: 25%;
}

.gallery-columns-5 .gallery-item {
    max-width: 20%;
}

.gallery-columns-6 .gallery-item {
    max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
    max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
    max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
    max-width: 11.11%;
}

.gallery-caption {
    display: block;
}

/*--------------------------------------------------------------
## General
--------------------------------------------------------------*/
.ht-container {
    width: 1170px;
    margin: 0 auto;
}

.ht-wide .ht-container {
    width: var(--total-container-width);
}

.ht-boxed #ht-page {
    width: var(--total-container-width);
    margin: 0 auto;
    position: relative;
    background: #FFF;
}

.ht-boxed .ht-container {
    width: calc(var(--total-container-width) - var(--total-container-padding) - var(--total-container-padding));
}

.ht-fluid .ht-container {
    width: var(--total-fluid-container-width);
}

body.ht-titlebar-disabled .ht-site-content > .ht-container {
    margin-top: 40px;
}

/*--------------------------------------------------------------
## Header
--------------------------------------------------------------*/
.ht-header {
    background: var(--total-mh-bg-color, #FFF);
    z-index: 99;
    box-shadow: 0 3px 10px rgb(0 0 0 / 14%);
}

.ht-header .ht-container {
    transition: padding 0.3s ease;
    padding-left: var(--total-mh-spacing-left-desktop, 0);
    padding-top: var(--total-mh-spacing-top-desktop, 15px);
    padding-right: var(--total-mh-spacing-right-desktop, 0);
    padding-bottom: var(--total-mh-spacing-bottom-desktop, 15px);
}

.ht-sticky-header .ht-header.headroom--not-top {
    position: fixed;
    left: 0;
    right: 0;
}

.ht-sticky-header .ht-header.headroom--not-top .ht-container {
    padding-top: 10px;
    padding-bottom: 10px;
}

.ht-header .ht-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#ht-content {
    clear: both;
}

#ht-site-branding img {
    height: auto;
    width: var(--total-logo-width, 160px);
}

.ht-main-header {
    background: #f9f9f9;
    padding: 35px 0;
    margin-bottom: 25px;
	text-align:center;
	
}

.ht-main-title {
    margin: 0 0 5px;
    text-transform: uppercase;
    font-size: calc(var(--total-h-size) * 7/8);
}

.ht-main-title:last-child {
    margin-bottom: 0;
}

.ht-site-title {
    font-weight: 400;
    margin: 0 0 8px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: calc(var(--total-h-size));
    line-height: 1;
}

.ht-site-title a {
    text-decoration: none;
    color: var(--total-title-color);
}

.ht-site-description {
    margin: 0;
    font-size: 15px;
    font-style: italic;
    line-height: 1;
}

.ht-site-description a {
    color: var(--total-tagline-color);
}

.breadcrumb-trail,
.woocommerce .woocommerce-breadcrumb {
    font-size: 13px;
    margin: 0;
    color: inherit;
}

.breadcrumb-trail ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.breadcrumb-trail ul li {
    display: inline-block;
}

.breadcrumb-trail ul li:after {
    content: "/";
    margin: 0 6px;
}

.breadcrumb-trail ul li:last-child:after {
    display: none;
}

.woocommerce .woocommerce-breadcrumb a,
.breadcrumb-trail a {
    color: #000;
}

.woocommerce .woocommerce-breadcrumb a:hover,
#total-breadcrumbs a:hover {
    color: var(--total-content-link-hov-color, var(--total-template-color));
}

.taxonomy-description,
.term-description {
    margin-bottom: 15px;
}

.taxonomy-description p:last-child,
.term-description p:last-child {
    margin-bottom: 0;
}

/*--------------------------------------------------------------
## General
--------------------------------------------------------------*/
.ht-section {
    padding: 60px 0;
    background: #FFF;
}

.ht-section-title-tagline {
    margin-bottom: 60px;
    text-align: center;
}

.ht-section-title {
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: calc(var(--total-h-size) * 7/8);
    width: 60%;
    margin: 0 auto 15px;
}

.ht-section-title:last-child {
    margin-bottom: 0;
}

.ht-section-tagline {
    font-size: 1.2em;
    width: 70%;
    margin: 0 auto;
}

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
.ht-menu ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
    font-family: var(--total-menu-family, Oswald);
    font-size: var(--total-menu-size, 14px);
    letter-spacing: var(--total-menu-letter-spacing, 0);
    font-weight: var(--total-menu-weight, 400);
    font-style: var(--total-menu-style, normal);
    text-transform: var(--total-menu-text-transform, uppercase);
}

.ht-menu li {
    float: left;
    position: relative;
    margin-left: 10px;
}

.ht-menu a {
    position: relative;
    display: block;
    text-decoration: none;
    color: #000;
    line-height: 36px;
    padding: 0 15px;
    transition: none;
}

.ht-menu ul ul {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    background: var(--total-submenu-bg-color, #FFF);
    min-width: 300px;
    z-index: 999;
    padding: 8px;
    margin-top: 3px;
    border-top: 2px solid var(--total-template-color);
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.05)
}

.ht-sticky .ht-menu ul ul {
    margin-top: 17px;
}

.ht-menu > ul > li:last-child > ul {
    left: auto;
    right: 0;
}

.ht-menu ul ul ul {
    left: 100%;
    top: 0;
    margin: 0 0 0 8px;
    border-top: 0;
}

.ht-sticky .ht-menu ul ul ul {
    margin-top: 0
}

.ht-menu ul ul a {
    color: #444;
    line-height: 1.5;
    padding: 10px 15px;
    font-size: 0.8em;
}

.ht-menu ul ul li {
    float: none;
    margin: 0 0 5px;
    border-bottom: 1px solid #eee;
}

.ht-menu ul ul li:last-child {
    margin-bottom: 0;
}

.ht-menu ul li:hover > ul {
    display: block;
}

.ht-menu > ul > li.menu-item > a {
    line-height: var(--total-menu-line-height, 2.6);
    color: var(--total-menu-link-color, #333);
}

.ht-menu > ul > li.menu-item:hover > a,
.ht-menu > ul > li.menu-item.current_page_item > a,
.ht-menu > ul > li.menu-item.current-menu-item > a,
.ht-menu > ul > li.menu-item.current_page_ancestor > a,
.ht-menu > ul > li.menu-item.current > a {
    color: var(--total-menu-link-hov-color, #FFF);
}

.ht-menu ul ul li.menu-item > a {
    color: var(--total-submenu-link-color, #333);
}

.ht-menu ul ul li.menu-item:hover > a {
    color: var(--total-submenu-link-hover-color, var(--total-menu-link-hov-color, #FFF));
}

/* styling for both css and generated arrows */
.menu-item-has-children .ht-dropdown {
    padding: 0;
    background: none;
    color: inherit;
    transition: none;
    height: auto;
    min-height: 0;
    line-height: inherit;
    font-size: inherit;
    margin: 0 0 0 5px;
    border: 0;
    vertical-align: middle;
}

.menu-item-has-children .ht-dropdown:after {
    content: '\f107';
    font-family: FontAwesome;
    font-size: 0.8em;
}

/* styling for right-facing arrows */
.menu-item-has-children ul .ht-dropdown {
    position: absolute;
    top: 50%;
    right: 5px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.menu-item-has-children ul .ht-dropdown:after {
    content: '\f105';
}

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
    margin: 0 0 15px;
    overflow: hidden;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
    float: left;
    width: 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
    float: right;
    text-align: right;
    width: 50%;
}

/*--------------------------------------------------------------
## Home Slider
--------------------------------------------------------------*/
#ht-home-slider-section {
    clear: both;
}

.ht-slide {
    position: relative;
}

.ht-slide img {
    width: 100%;
}

.ht-slide-overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.2);
}

.ht-slide-caption {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1170px;
    transform: translate(-50%, -50%);
}

.ht-wide .ht-slide-caption {
    width: var(--total-container-width);
}

.ht-boxed .ht-slide-caption {
    width: calc(var(--total-container-width) - var(--total-container-padding) - var(--total-container-padding))
}

.ht-fluid .ht-slide-caption {
    width: var(--total-fluid-container-width);
}

.ht-slide-cap-title {
    text-align: center;
    font-size: calc(var(--total-h-size));
    color: #FFF;
    margin-bottom: 25px;
    padding: 0 10%;
    line-height: 1.2;
    letter-spacing: 2px;
    text-transform: uppercase;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2)
}

.ht-slide-cap-title span {
    display: inline-block;
    padding: 8px 15px;
    background: var(--total-template-color);
}

.ht-slide-cap-desc {
    text-align: center;
    font-size: 25px;
    line-height: 1.4;
    color: #FFF;
    padding: 0 20%;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2)
}

#ht-home-slider-section .owl-carousel .owl-nav .owl-prev,
#ht-home-slider-section .owl-carousel .owl-nav .owl-next {
    position: absolute;
    top: 50%;
    text-indent: -9999px;
    height: 70px;
    width: 50px;
    margin-top: -35px;
    opacity: 0.6;
}

#ht-home-slider-section .owl-carousel .owl-nav > div:hover {
    opacity: 1;
}

#ht-home-slider-section .owl-carousel .owl-nav .owl-prev {
    background: url(images/prev.png) no-repeat center rgba(0, 0, 0, 0.3);
    left: 0;
}

#ht-home-slider-section .owl-carousel .owl-nav .owl-next {
    background: url(images/next.png) no-repeat center rgba(0, 0, 0, 0.3);
    right: 0;
}

#ht-home-slider-section .owl-item.active .ht-slide-cap-title,
#ht-home-slider-section .owl-item.active .ht-slide-cap-desc {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

#ht-home-slider-section .owl-item.active .ht-slide-cap-title,
#ht-home-slider-section .owl-item.active .ht-slide-cap-desc {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}



/*--------------------------------------------------------------
## Logo Section
--------------------------------------------------------------*/
.ht-logo-slider img {
    padding: 0 26px;
}


/*--------------------------------------------------------------
## Footer
--------------------------------------------------------------*/
#ht-colophon {
    position: relative;
    background-image: var(--total-footer-bg-url);
    background-size: var(--total-footer-bg-size);
    background-position: var(--total-footer-bg-position);
    background-repeat: var(--total-footer-bg-repeat);
    background-attachment: var(--total-footer-bg-attachment);
    background-color: var(--total-footer-bg-color);
}

#ht-colophon:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 0.9;
    background: var(--total-footer-bg-overlay);
}

.page-template-home-template #ht-colophon,
.home.blog #ht-colophon {
    margin-top: 0
}

.ht-site-footer a {
    color: #BBB;
    text-decoration: none;
}

.ht-main-footer .widget-title {
    text-transform: uppercase;
    color: var(--total-top-footer-title-color, #BBB);
    margin-bottom: 15px;
    font-size:20px;
}

#ht-main-footer {
    position: relative;
    padding: 50px 0;
}

.ht-main-footer {
    display: flex;
    margin: 0 -20px;
}

.ht-footer {
    width: 25%;
    padding: 0 20px;
    color: var(--total-top-footer-text-color, #EEEEEE);
}

.ht-footer a {
    color: var(--total-footer-anchor-color, var(--total-top-footer-text-color, #EEEEEE));
}

.ht-footer a:hover {
    color: var(--total-footer-anchor-color-hover, var(--total-footer-anchor-color, var(--total-top-footer-text-color, #EEEEEE)));
}

.col-1-1 .ht-footer1 {
    width: 100%;
}

.col-2-1-1 .ht-footer {
    width: 50%;
}

.col-3-1-1-1 .ht-footer {
    width: 33.33%;
}

.col-4-1-1-1-1 .ht-footer {
    width: 25%;
}

.ht-footer .widget {
    margin-bottom: 30px;
}

.ht-footer .widget_block {
    margin-bottom: 0;
}

.ht-footer .widget:last-child {
    margin-bottom: 0;
}

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

.ht-footer ul li {
    margin: 0;
}
.ht-footer ul.menu li{padding:5px 0}
.ht-footer ul.menu li:before{
    content: "\276F";
    font-size: 12px;
    color: #fff;
    margin-right: 10px;
    display: inline-block;
    transition: transform 0.3s ease;
}
.ht-footer ul ul {
    margin-top: 10px;
    margin-left: 10px
}

#ht-bottom-footer {
    font-size: 0.9em;
    position: relative;
    background: var(--total-bottom-footer-bg-color, rgba(0, 0, 0, 0.3));
    padding: 10px 0;
    color: var(--total-bottom-footer-text-color, #AAA);
    line-height: 1.2;
    text-align: center;
}

.ht-site-info a {
    color: var(--total-bottom-footer-anchor-color, #AAA);
    border-bottom: 1px dotted var(--total-bottom-footer-anchor-color, #AAA);
}

.ht-site-info a:hover {
    color: var(--total-bottom-footer-anchor-color-hover, var(--total-bottom-footer-anchor-color, #AAA));
    border-bottom-color: var(--total-bottom-footer-anchor-color-hover, var(--total-bottom-footer-anchor-color, #AAA));
}

#ht-back-top {
    position: fixed;
    right: 10px;
    bottom: 10px;
    background: #111;
    height: 60px;
    width: 40px;
    color: #FFF;
    z-index: 99;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}

#ht-back-top:hover {
    background: var(--total-template-color);
}

#ht-back-top.ht-hide {
    bottom: -100px;
}

/*--------------------------------------------------------------
## 404 Page
--------------------------------------------------------------*/
.error404 .error-404 {
    display: block;
    text-align: center;
    font-size: 200px;
    color: #f9f9f9;
    line-height: 1.2;
}

.error404 .oops-text {
    text-align: center;
}

.toggle-bar {
    display: none;
}


/*--------------------------------------------------------------
## Odometer CSS
--------------------------------------------------------------*/
.odometer.odometer-auto-theme,
.odometer.odometer-theme-default {
    display: block;
    vertical-align: middle;
    *vertical-align: auto;
    *zoom: 1;
    *display: inline;
    position: relative;
}

.odometer.odometer-auto-theme .odometer-digit,
.odometer.odometer-theme-default .odometer-digit {
    display: inline-block;
    vertical-align: middle;
    *vertical-align: auto;
    *zoom: 1;
    *display: inline;
    position: relative;
}

.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer,
.odometer.odometer-theme-default .odometer-digit .odometer-digit-spacer {
    display: inline-block;
    vertical-align: middle;
    *vertical-align: auto;
    *zoom: 1;
    *display: inline;
    visibility: hidden;
}

.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner,
.odometer.odometer-theme-default .odometer-digit .odometer-digit-inner {
    text-align: left;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon,
.odometer.odometer-theme-default .odometer-digit .odometer-ribbon {
    display: block;
}

.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner,
.odometer.odometer-theme-default .odometer-digit .odometer-ribbon-inner {
    display: block;
    -webkit-backface-visibility: hidden;
}

.odometer.odometer-auto-theme .odometer-digit .odometer-value,
.odometer.odometer-theme-default .odometer-digit .odometer-value {
    display: block;
    -webkit-transform: translateZ(0);
}

.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value,
.odometer.odometer-theme-default .odometer-digit .odometer-value.odometer-last-value {
    position: absolute;
}

.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner,
.odometer.odometer-theme-default.odometer-animating-up .odometer-ribbon-inner {
    -webkit-transition: -webkit-transform 2s;
    -moz-transition: -moz-transform 2s;
    -ms-transition: -ms-transform 2s;
    -o-transition: -o-transform 2s;
    transition: transform 2s;
}

.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner,
.odometer.odometer-theme-default.odometer-animating-up.odometer-animating .odometer-ribbon-inner {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
}

.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner,
.odometer.odometer-theme-default.odometer-animating-down .odometer-ribbon-inner {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
}

.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner,
.odometer.odometer-theme-default.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
    -webkit-transition: -webkit-transform 2s;
    -moz-transition: -moz-transform 2s;
    -ms-transition: -ms-transform 2s;
    -o-transition: -o-transform 2s;
    transition: transform 2s;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}

.odometer.odometer-auto-theme .odometer-value,
.odometer.odometer-theme-default .odometer-value {
    text-align: center;
}



#customer_details {
    margin-bottom: 40px;
}

@media screen and (max-width: 1200px) {.ht-menu > ul > li.menu-item > a{
    font-size:14px;
    padding:0 10px;
}}
@media screen and (max-width: 1000px) {
    .toggle-bar {
        display: block;
        position: relative;
        height: 40px;
        width: 40px;
        background: var(--total-template-color);
        cursor: pointer;
    }

    .toggle-bar span {
        position: absolute;
        top: 50%;
        margin-top: -1px;
        height: 2px;
        left: 8px;
        right: 8px;
        background: #FFF;
        box-shadow: 0 10px 0 0 #FFF, 0 -10px 0 0 #FFF;
    }

    .ht-sticky-header .ht-header.headroom--not-top {
        position: relative;
    }

    .ht-sticky-header .ht-header.headroom--not-top .ht-container {
        padding: 8px 0;
    }

    .ht-sticky-header #ht-content {
        padding-top: 0 !important;
    }

    #ht-site-navigation .ht-menu {
        display: none;
        position: absolute;
        background: var(--total-submenu-bg-color, #FFF);
        left: 0;
        right: 0;
        top: 100%;
        z-index: 999;
        width: 100%;
        padding: 0;
        float: none;
        border-top: 1px solid #eee;
    }

    .ht-menu > ul > li.menu-item > a {
        color: var(--total-submenu-link-color, #333);
    }

    .ht-menu > ul > li.menu-item:hover > a,
    .ht-menu > ul > li.menu-item.current_page_item > a,
    .ht-menu > ul > li.menu-item.current-menu-item > a,
    .ht-menu > ul > li.menu-item.current_page_ancestor > a,
    .ht-menu > ul > li.menu-item.current > a,
    .ht-menu ul ul li.menu-item:hover > a {
        color: var(--total-submenu-link-hover-color, var(--total-submenu-link-color, #333));
    }

    .ht-menu {
        float: none;
    }

    .ht-menu li {
        float: none;
        margin-left: 0;
        text-align: left;
    }

    .ht-menu ul ul li {
        margin: 0;
    }

    .ht-site-header .ht-menu > ul > li > a,
    .ht-menu ul ul a {
        line-height: 1.3;
        padding: 10px 15px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .ht-menu ul ul {
        position: static;
        padding: 0;
        margin-top: 0;
        box-shadow: none;
    }

    .ht-menu ul ul ul {
        margin: 0;
    }

    .menu-item-has-children .ht-dropdown,
    .menu-item-has-children ul .ht-dropdown {
        position: absolute;
        height: 26px;
        width: 26px;
        border: 1px solid rgba(0, 0, 0, 0.3);
        top: 50%;
        right: 10px;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .menu-item-has-children .ht-dropdown:after,
    .menu-item-has-children ul .ht-dropdown:after {
        content: '\f107';
        font-family: FontAwesome;
        line-height: 26px;
        display: block;
    }

    .menu-item-has-children .ht-opened.ht-dropdown:after,
    .menu-item-has-children ul .ht-opened.ht-dropdown:after {
        content: '\f106';
    }

    .ht-menu > ul li.menu-item > a .ht-dropdown {
        border-color: var(--total-submenu-link-color, #333);
    }

    .ht-menu > ul li.menu-item:hover > a .ht-dropdown {
        border-color: var(--total-submenu-link-hover-color, var(--total-submenu-link-color, #333));
    }

    .ht-menu ul li:hover > ul {
        display: none;
    }

    .ht-menu ul ul {
        background: none;
        border: none;
    }

    #ht-team-section {
        padding-bottom: 30px;
    }

    .ht-team-member {
        width: 48%;
        margin-bottom: 30px;
    }

    .ht-team-member:nth-child(2n+1) {
        clear: both;
    }
}

@media screen and (max-width: 1024px) {
    [data-pllx-bg-ratio] {
        background-size: cover;
        background-position: center !important;
    }

    body.ht-ios [data-pllx-bg-ratio]{
        background-attachment: scroll !important;
    }
}

@media screen and (max-width: 767px) {
    #ht-site-branding img {
        width: var(--total-logo-width-tablet, var(--total-logo-width, 220px));
    }

    .ht-section-title,
    .ht-section-tagline {
        width: auto;
    }

    #ht-home-slider-section img {
        height: 500px;
        object-fit: cover;
        object-position: center;
    }

    #ht-about-us-section .ht-container {
        display: block;
    }

    .ht-about-sec {
        width: auto;
        float: none;
        padding: 0;
        margin-bottom: 30px;
    }

    .ht-about-image {
        width: auto;
        float: none;
        padding: 0;
        text-align: center;
    }

    .ht-featured-post-wrap {
        margin-left: 0;
    }

    .ht-featured-post {
        float: none;
        margin: 0 auto 80px;
        width: 75%;
    }

    .ht-featured-post:last-child {
        margin-bottom: 0;
    }

    .ht-portfolio-cat-name-list {
        text-align: center;
    }

    .ht-service-left-bg {
        display: none;
    }

    .ht-service-posts {
        float: none;
        width: auto;
        padding: 0;
    }

    .ht-counter {
        width: 45%;
        margin-bottom: 60px;
    }

    #ht-counter-section {
        padding-bottom: 0;
    }

    .ht-blog-wrap {
        margin: 0;
    }

    .ht-blog-post {
        width: 75%;
        margin: 0 auto 30px;
        float: none;
    }

    .ht-blog-post img {
        width: 100%;
    }

    .ht-main-footer {
        display: block;
    }

    .ht-footer {
        width: auto !important;
        margin: 0 0 30px;
        float: none;
    }

    .ht-footer:last-child {
        margin-bottom: 0;
    }

    .ht-slide-cap-title {
        font-size: 24px;
        font-size: 5vw;
        margin-bottom: 10px;
    }

    .ht-slide-cap-desc {
        font-size: 14px;
        font-size: 3vw;
    }

    #primary {
        width: auto !important;
        float: none !important;
        margin-bottom: 30px;
    }

    #secondary {
        width: auto !important;
        float: none !important;
        margin-bottom: 30px;
    }
}

@media screen and (max-width: 580px) {
    #ht-site-branding {
        margin-right: 20px;
    }

    #ht-home-slider-section .owl-carousel .owl-nav .owl-prev,
    #ht-home-slider-section .owl-carousel .owl-nav .owl-next {
        display: none;
    }

    #ht-home-slider-section img {
        height: 400px;
        object-fit: cover;
        object-position: center;
    }

    .ht-slide-cap-desc {
        font-size: 14px;
        font-size: 4vw;
    }

    .ht-team-member-wrap {
        margin-left: 0;
    }

    .ht-team-member {
        width: 75%;
        float: none;
        margin: 0 auto 30px;
    }

    .ht-team-counter-wrap {
        margin-left: 0;
    }

    .ht-counter {
        width: 75%;
        float: none;
        margin: 0 auto 60px;
    }

    .ht-portfolio {
        width: 50%;
        padding: 4px;
    }

    .ht-portfolio-caption {
        background: none !important;
        opacity: 1;
    }

    .ht-portfolio-caption h5,
    .ht-portfolio-caption a.ht-portfolio-link,
    .ht-portfolio-caption a.ht-portfolio-image {
        -ms-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    .ht-portfolio-caption h5 {
        background: rgba(0, 0, 0, 0.2);
        padding: 10px;
        left: 0;
        right: 0;
        top: 0;
        text-align: center;
    }

    .ht-portfolio-caption a {
        right: 0;
        bottom: 0;
        margin: 0 5px;
    }

    .ht-portfolio-caption a.ht-portfolio-image {
        right: 46px;
    }
}

@media screen and (max-width: 480px) {
    #ht-site-branding img {
        width: 100px;
    }

    .ht-blog-post,
    .ht-featured-post {
        width: auto;
    }

    .ht-team-member-wrap {
        margin-left: 0;
    }

    .ht-team-member,
    .ht-counter {
        width: auto;
        float: none;
    }

    .ht-testimonial-excerpt {
        width: auto;
    }

    .ht-testimonial-excerpt .fa-quote-left {
        left: 0;
    }

    .ht-cta-buttons a {
        display: block;
        margin: 0 0 15px;
    }

    .ht-post-info {
        float: none;
        width: auto;
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .ht-post-info .entry-date span.ht-day {
        font-size: 1em;
    }

    .ht-post-info .entry-date span {
        display: inline;
        margin-left: 6px;
    }

    .ht-post-info .entry-date {
        margin-bottom: 0;
    }

    .ht-post-info a {
        padding-top: 0;
        border: 0;
    }

    .ht-post-wrapper {
        padding-left: 0;
    }
}

@media screen and (min-width: 1001px) {
    .ht-menu {
        display: block !important;
    }

    .menu-item-has-children .ht-dropdown {
        pointer-events: none;
    }
}

/*--------------------------------------------------------------
## Gutenberg CSS
--------------------------------------------------------------*/

@media screen and (min-width: 768px) {

    .alignfull,
    .alignwide {
        width: auto;
        max-width: 1000%;
    }

    body.ht_no_sidebar:not(.ht-boxed) .alignfull,
    body.ht_no_sidebar_condensed:not(.ht-boxed) .alignfull {
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }

    body.ht_no_sidebar:not(.ht-boxed) .alignwide,
    body.ht_no_sidebar_condensed:not(.ht-boxed) .alignwide {
        margin-left: calc(25% - 25vw);
        margin-right: calc(25% - 25vw);
    }

    body.ht_right_sidebar:not(.ht-boxed) .alignfull {
        margin-left: calc(50% / .70 - 50vw);
    }

    body.ht_right_sidebar:not(.ht-boxed) .alignwide {
        margin-left: calc(25% / .70 - 25vw);
    }

    body.ht_right_sidebar:not(.ht-boxed) .align-wrap {
        width: auto;
        margin-left: calc(50% / .7 - 50vw);
    }

    body.ht_left_sidebar :not(.ht-boxed).alignfull {
        margin-right: calc(50% / .70 - 50vw);
    }

    body.ht_left_sidebar:not(.ht-boxed) .alignwide {
        margin-right: calc(25% / .70 - 25vw);
    }

    body.ht_left_sidebar:not(.ht-boxed) .align-wrap {
        width: auto;
        margin-right: calc(50% / .7 - 50vw);
    }
}

body.ht-boxed .alignwide {
    margin-left: 0;
    margin-right: 0;
}

.wp-block-latest-posts.is-grid {
    margin-left: 0;
}

.wp-block-quote {
    margin: 30px 0;
}

.wp-block-quote.is-large,
.wp-block-quote.is-style-large {
    margin: 30px 0;
}

.wp-block-categories,
.wp-block-archives {
    list-style: none;
}

.wp-block-pullquote {
    margin-bottom: 30px;
    padding: 40px 0;
}

.wp-block-pullquote blockquote {
    background: none;
    padding: 0;
    border: none;
    margin-bottom: 0;
}

.wp-block-pullquote cite {
    color: inherit;
}

.wp-block-gallery {
    margin-left: 0;
}
#metaslider-id-54 .flexslider ul.flex-direction-nav li a{width:40px;height:40px;}
.wp-block-gallery .blocks-gallery-image figcaption,
.wp-block-gallery .blocks-gallery-item figcaption,
.wp-block-image figcaption {
    font-size: 0.9em;
}
/* --- SECTION FOOTER CTA --- */
:root {
    --cta-blue: #0e52a0; /* Màu xanh dương trong thiết kế */
    --cta-bg-light: #f4f7fb; /* Màu nền xám nhạt */
}

.hp-footer-cta {
    background-color: var(--cta-bg-light);
    /* Giả lập hình vòm cong mờ ở background */
    background-image: radial-gradient(circle at 80% 120%, #ffffff 0%, rgba(255,255,255,0) 40%), 
                      radial-gradient(circle at 10% 0%, #ffffff 0%, rgba(255,255,255,0) 30%);
    padding: 0; /* Xóa padding dọc để ảnh nhân viên chạm đáy */
    overflow: hidden; /* Tránh ảnh bị tràn ra ngoài */
}

.cta-flex-layout {
    display: flex;
    align-items: flex-end; /* Ép ảnh nhân viên dính sát mép dưới */
    justify-content: space-between;
}

/* Cột Ảnh */
.cta-image-col {
    flex: 0 0 40%;
    max-width: 40%;
    position: relative;
    margin-bottom: -5px; /* Để ảnh tràn nhẹ che đi viền nếu có */
}

.cta-image-col img {
    width: auto;
    max-height: 300px;
    display: block;
}

/* Cột Nội dung & Form */
.cta-content-col {
    flex: 0 0 60%;
    max-width: 60%;
    padding: 35px 0 35px 30px;
}

.cta-heading {
    font-size: 26px;
    font-weight: 800;
    color: var(--cta-blue);
    text-transform: uppercase;
    margin-bottom: 5px;
}

.cta-subheading {
    font-size: 15px;
    color: #444444;
    margin-bottom: 25px;
}

/* --- ĐỊNH DẠNG CONTACT FORM 7 GRID --- */
.footer-cf7-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 cột bằng nhau */
    gap: 15px;
}

/* Bắt phần tử input thứ 4 chiếm 2 cột */
.cf7-span-2 {
    grid-column: span 2;
}

/* Ẩn các thẻ p thừa do CF7 sinh ra */
.cta-form-wrapper p {
    margin-bottom: 0;
}

/* Style cho Input */
.footer-cf7-grid input[type="text"],
.footer-cf7-grid input[type="email"],
.footer-cf7-grid input[type="tel"] {
    width: 100%;
    height: 46px;
    border: 1px solid #e0e5ed;
    border-radius: 4px;
    padding: 0 15px;
    font-size: 14px;
    background-color: #ffffff;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.02);
    color: #333;
    outline: none;
    transition: all 0.3s ease;
}

.footer-cf7-grid input::placeholder {
    color: #999999;
}

.footer-cf7-grid input:focus {
    border-color: var(--cta-blue);
    box-shadow: 0 0 0 2px rgba(14, 82, 160, 0.1);
}

/* Style cho Nút Submit */
.cf7-btn-submit {
    width: 100%;
    height: 46px;
    background-color: #f90104;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cf7-btn-submit:hover {
    background-color: #0b407d; /* Xanh đậm hơn khi hover */
}

/* Ẩn cục xoay loading mặc định của CF7 cho đẹp */
.wpcf7-spinner {
    display: none !important;
}

/* --- RESPONSIVE CHO TABLET VÀ MOBILE --- */
@media (max-width: 1024px) {
    .cta-flex-layout {
        align-items: center;
    }
    .cta-image-col {
        flex: 0 0 40%;
        max-width: 40%;
    }
    .cta-content-col {
        flex: 0 0 60%;
        max-width: 60%;
        padding: 50px 0 50px 20px;
    }
    .footer-cf7-grid {
        grid-template-columns: repeat(2, 1fr); /* Đưa form về 2 cột */
    }
    .cf7-col:nth-child(3) {
        grid-column: span 2; /* Ép trường Email rớt xuống hàng 2 và kéo dài 2 cột */
    }
    .cf7-btn-submit {
        height: 46px;
    }
}

@media (max-width: 767px) {
    .cta-flex-layout {
        flex-direction: column;
        text-align: center;
        align-items: normal;
    }
    .cta-image-col {
        flex: 0 0 100%;
        max-width: 100%;
        margin: 0 auto;
        order: 2; /* Đẩy ảnh xuống dưới form trên mobile */
    }
    .cta-content-col {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 15px 0;
        order: 1; /* Đẩy nội dung lên trên ảnh */
    }
    .footer-cf7-grid {
        grid-template-columns: 1fr; /* Đưa form về 1 cột dọc hoàn toàn */
    }
    .cf7-span-2, 
    .cf7-col:nth-child(3) {
        grid-column: span 1; 
    }
}
/* --- PHÂN TRANG DANH MỤC TIN TỨC --- */
.news-pagination {
    margin-top: 50px;
    margin-bottom: 30px;
    text-align: center;
    width: 100%;
}

.news-pagination .nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.news-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 15px;
    background-color: var(--background-white);
    color: var(--secondary-color);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    transition: var(--transition-smooth);
}

.news-pagination .page-numbers:hover {
    background-color: var(--light-gray);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.news-pagination .page-numbers.current {
    background-color: var(--primary-color);
    color: #ffffff;
    border-color: var(--primary-color);
}

.news-pagination .dots {
    border: none;
    background: transparent;
}
/* --- TRANG LIÊN HỆ (CONTACT PAGE) --- */
.contact-page-layout {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr; /* Cột trái form to hơn một chút */
    gap: 60px;
    margin-bottom: 50px;
}

/* --- CỘT TRÁI (FORM) --- */
.contact-main-title {
    font-size: 24px;
    font-weight: 700;
    color: #333333;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.contact-sub-title {
    font-size: 15px;
    color: #666666;
    margin-bottom: 30px;
    line-height: 1.5;
}

/* Form Layout */
.cf7-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}
.cf7-row-2.align-bottom {
    align-items: end;
}

/* Form Inputs with Icons */
.cf7-input-icon {
    position: relative;
    margin-bottom: 20px;
}
.cf7-row-2 .cf7-input-icon {
    margin-bottom: 0;
}
.cf7-input-icon i {
    position: absolute;
    top: 13px;
    left: 15px;
    color: #555555;
    font-size: 14px;
    z-index: 2;
}
.cf7-input-icon.textarea-icon i {
    top: 15px; /* Điều chỉnh nhẹ cho textarea */
}

.page-contact-form input[type="text"],
.page-contact-form input[type="email"],
.page-contact-form input[type="tel"],
.page-contact-form select,
.page-contact-form textarea {
    width: 100%;
    border: 1px solid #e5e5e5;
    border-radius: 2px;
    font-size: 14px;
    color: #333;
    background-color: #fff;
    outline: none;
    box-sizing: border-box;
}

.page-contact-form input[type="text"],
.page-contact-form input[type="email"],
.page-contact-form input[type="tel"],
.page-contact-form select {
    height: 44px;
    padding: 0 15px 0 40px; /* Chừa chỗ cho icon */
}
.page-contact-form select {
    padding-left: 15px; /* Select ko có icon nên padding chuẩn */
}

.page-contact-form textarea {
    height: 120px;
    padding: 12px 15px 12px 40px;
    resize: vertical;
}

/* Checkbox Dịch vụ (Chia 3 cột) */
.cf7-services-group {
    margin-bottom: 20px;
}
.cf7-services-group label,
.cf7-select-wrap label {
    display: block;
    font-size: 15px;
    color: #555;
    margin-bottom: 10px;
    font-weight: 600;
}
.wpcf7-checkbox {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 15px;
}
.wpcf7-list-item {
    margin: 0 !important;
}
.wpcf7-list-item-label {
    font-size: 13px;
    color: #666;
    cursor: pointer;
}

/* Nút Submit */
.cf7-submit-wrap {
    margin-top: 10px;
}
.page-contact-form input[type="submit"] {
    background-color: #3a3a3a;
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
    padding: 12px 30px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.3s;
}
.page-contact-form input[type="submit"]:hover {
    background-color: #111111;
}

/* --- CỘT PHẢI (THÔNG TIN LIÊN HỆ) --- */
.contact-info-title {
    font-size: 16px;
    font-weight: 700;
    color: #245b9b; /* Màu xanh biển theo thiết kế */
    text-transform: uppercase;
    margin-bottom: 25px;
    padding-top: 10px; /* Cân bằng chiều cao với title cột trái */
}

.contact-info-list {
    font-size: 15px;
    color: #555555;
    line-height: 1.6;
}

.ci-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
}

.ci-icon {
    font-size: 16px;
    color: #333333;
    margin-right: 10px;
    margin-top: 4px;
    width: 15px;
    text-align: center;
}

.ci-text {
    flex: 1;
}

/* --- BẢN ĐỒ (GOOGLE MAP) --- */
.contact-map-wrapper {
    width: 100%;
    margin-top: 20px;
}
.contact-map-wrapper iframe {
    width: 100% !important;
    height: 400px !important;
    border: none !important;
    display: block;
}

/* --- RESPONSIVE TABLET & MOBILE --- */
@media (max-width: 1024px) {
    .contact-page-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .wpcf7-checkbox {
        grid-template-columns: repeat(2, 1fr); /* Checkbox 2 cột trên tablet */
    }
}

@media (max-width: 767px) {
    .cf7-services-group{margin-top:20px;}
    .cf7-services-group .wpcf7-list-item label{margin-bottom:0;}
    .wpcf7-checkbox{gap: 0 15px}
    .cf7-row-2 {
        grid-template-columns: 1fr; /* Form rớt xuống 1 cột */
        gap: 10px;
        margin-bottom:0;
    }
    .wpcf7-checkbox {
        grid-template-columns: 1fr; /* Checkbox 1 cột trên mobile */
    }
    .contact-map-wrapper iframe {
        height: 300px !important;
    }
}
/* --- GIAO DIỆN DANH MỤC ĐỘI NGŨ CHUYÊN GIA --- */

/* Phần Header giới thiệu chung */
.chuyen-gia-s{padding:60px 0;}
.category-pro-header {
    margin-bottom: 50px;
    margin-left: auto;
    margin-right: auto;
}

.category-pro-desc {
    font-size: 15px;
    color: #444;
    line-height: 1.6;
    margin-top: 15px;
    text-align: justify; /* Căn đều 2 bên cho đoạn văn dài giống ảnh */
}

/* Lưới hiển thị Chuyên gia (Chia 4 cột) */
/* --- Lưới hiển thị Chuyên gia (Chuyển sang Flexbox để tự động căn giữa) --- */
.team-pro-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Lệnh "thần thánh" giúp căn giữa mọi phần tử */
    gap: 30px;
}

/* Kích thước mặc định trên Desktop (4 cột) */
.team-pro-card {
    /* Tính toán: (100% - 3 khoảng cách 30px) chia 4 */
    flex: 0 0 calc((100% - 90px) / 3);
    max-width: calc((100% - 90px) / 3);
    
    background-color: var(--background-white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    transition: var(--transition-smooth);
    border: 1px solid #f0f0f0;
}
.related-experts-section .team-pro-card{max-width: calc(100% - 90px);}
.team-pro-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}


/* Ép ảnh hiển thị đúng tỷ lệ 2:3 (Tỷ lệ ảnh thẻ) */
.tp-photo {
    width: 100%;
    aspect-ratio: 2 / 3; /* Cắt ảnh tự động tỷ lệ 2:3 */
    overflow: hidden;
    background-color: #f5f5f5; /* Nền mờ lúc tải ảnh */
}

.tp-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Đảm bảo ảnh phủ kín khung, không bị méo */
    object-position: top center; /* Ưu tiên lấy từ đỉnh đầu xuống */
    display: block;
    transition: transform 0.5s ease;
}

.team-pro-card:hover .tp-photo img {
    transform: scale(1.05); /* Zoom nhẹ ảnh khi hover */
}

/* Phần thông tin chữ */
.tp-info {
    padding: 20px 20px;
}

.tp-name {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 12px;
}

.tp-name a {
    color: var(--secondary-color);
    text-decoration: none;
    transition: color 0.3s;
}

.tp-name a:hover {
    color: var(--primary-color);
}

.tp-bio {
    font-size: 14px;
    color: var(--text-color);
    line-height: 1.5;
}

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
    .team-pro-grid {
        grid-template-columns: repeat(3, 1fr); /* Tablet: 3 cột */
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .team-pro-grid {
        grid-template-columns: repeat(2, 1fr); /* Mobile ngang: 2 cột */
    }
}

@media (max-width: 480px) {
    .team-pro-grid {
        grid-template-columns: 1fr; /* Mobile dọc: 1 cột */
    }
    .tp-photo {
        max-height: 400px; /* Giới hạn chiều cao trên mobile tránh ảnh quá dài */
    }
}
/* --- RESPONSIVE LẠI CHO FLEXBOX --- */
@media (max-width: 1024px) {
    .team-pro-card {
        flex: 0 0 calc((100% - 60px) / 3); /* Tablet: 3 cột */
        max-width: calc((100% - 60px) / 3);
    }
}

@media (max-width: 768px) {
    .team-pro-card {
        flex: 0 0 calc((100% - 30px) / 2); /* Mobile ngang: 2 cột */
        max-width: calc((100% - 30px) / 2);
    }
}

@media (max-width: 480px) {
    .team-pro-card {
        flex: 0 0 100%; /* Mobile dọc: 1 cột */
        max-width: 100%;
    }
    .tp-photo {
        max-height: 400px;
    }
}

/* --- GIAO DIỆN CHI TIẾT CHUYÊN GIA --- */

/* Bố cục chia 2 cột Trái (Ảnh) - Phải (Nội dung) */
.expert-detail-wrapper {
    display: flex;
    gap: 50px;
    background-color: var(--background-white);
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    margin-bottom: 60px;
    align-items: flex-start;
}

/* Cột Ảnh bên trái */
.expert-photo-col {
    flex: 0 0 320px; /* Khóa độ rộng cột ảnh cố định 320px */
    max-width: 320px;
}

.expert-avatar-wrap {
    width: 100%;
    aspect-ratio: 2 / 3; /* Ép tỷ lệ ảnh thẻ 2:3 */
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.expert-avatar-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/* Cột Nội dung bên phải */
.expert-info-col {
    flex: 1;
}

.expert-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--secondary-color);
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--light-gray);
    text-transform: uppercase;
}

.expert-content {
    font-size: 15px;
    color: #444;
    line-height: 1.8;
}

.expert-content p {
    margin-bottom: 15px;
    text-align: justify;
}

/* --- PHẦN XEM THÊM CHUYÊN GIA KHÁC --- */
.related-experts-section {
    padding-top: 20px;
}

.related-experts-section .sec-heading {
    margin-bottom: 40px;
}

/* Lưới 3 cột */
.related-experts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Ép hiển thị 3 cột/hàng */
    gap: 30px;
}

/* Tái sử dụng lại CSS card của trang danh mục nên không cần code lại card chi tiết */

/* --- RESPONSIVE CHO MÀN HÌNH NHỎ --- */
@media (max-width: 992px) {
    .expert-detail-wrapper {
        gap: 30px;
        padding: 30px;
    }
    .expert-photo-col {
        flex: 0 0 250px;
        max-width: 250px;
    }
    .related-experts-grid {
        grid-template-columns: repeat(2, 1fr); /* Rớt xuống 2 cột ở tablet */
    }
}

@media (max-width: 768px) {
    .expert-detail-wrapper {
        flex-direction: column; /* Đẩy ảnh lên trên, chữ xuống dưới ở Mobile */
        padding: 20px;
    }
    .expert-photo-col {
        flex: 0 0 100%;
        max-width: 300px; /* Giới hạn ảnh không quá to trên mobile */
        margin: 0 auto;
    }
    .expert-title {
        font-size: 24px;
        text-align: center;
        margin-top: 20px;
    }
}

@media (max-width: 480px) {
    .related-experts-grid {
        grid-template-columns: 1fr; /* Rớt xuống 1 cột ở mobile nhỏ */
    }
}
/* --- LƯỚI 3 CỘT CHO TIN TỨC LIÊN QUAN TRONG SINGLE POST --- */
.related-news-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

/* Kế thừa lại CSS của Card bài viết nếu cần ép lại chiều cao (Card đã code ở bước trước) */
.related-news-grid-3 .news-post-card {
    background-color: #ffffff;
}

/* Responsive */
@media (max-width: 992px) {
    .related-news-grid-3 {
        grid-template-columns: repeat(2, 1fr); /* Rớt xuống 2 cột trên Tablet */
    }
}

@media (max-width: 767px) {
    .related-news-grid-3 {
        grid-template-columns: 1fr; /* Rớt xuống 1 cột trên Mobile */
    }
    .related-news-section {
        padding: 30px 15px !important;
    }
}

#services-carousel .owl-stage {
    display: flex;
}

#services-carousel .owl-item {
    display: flex;
    flex: 1 0 auto;
}

/* 2. Cấu trúc lại Service Card để nó tự giãn theo chiều cao của owl-item */
.service-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%; 
}

.s-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Lệnh quan trọng giúp khung nội dung tự giãn */
}


.s-excerpt {
    flex-grow: 1; 
    margin-bottom: 25px;
}

.s-link {
    margin-top: auto; 
    display: inline-block;
}
/* --- TRANG GIỚI THIỆU CHUNG --- */
:root {
    --about-blue: #f90104; /* Màu xanh đen đặc trưng trong thiết kế */
    --about-bg-light: #f4f7fa; /* Nền xanh xám nhạt */
}

.about-section {
    padding: 60px 0;
}
.bg-light-blue {
    background-color: var(--about-bg-light);
}

.about-heading {
    font-size: 26px;
    font-weight: 800;
    color: var(--about-blue);
    text-transform: uppercase;
    margin-bottom: 5px;
}
.about-heading.text-center {
    text-align: center;
}
.about-wysiwyg {
    font-size: 15px;
    color: #444;
    line-height: 1.6;
}
.about-wysiwyg p {
    margin-bottom: 15px;
}
.about-wysiwyg strong {
    color: var(--about-blue); /* Các chữ in đậm chuyển màu xanh */
}

/* --- SECTION 1: THƯ NGỎ --- */
.letter-layout {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 50px;
    align-items: center;
}
.letter-img-col img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* --- SECTION 2: LỊCH SỬ HÌNH THÀNH --- */
.history-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}
.history-img-wrap {
    margin-top: 5px;
}
.history-img-wrap img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}
.company-info-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding-top: 50px;
}
.ci-row {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}
.ci-icon-box {
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    background-color: var(--about-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ci-icon-box img {
    width: 24px;
    filter: brightness(0) invert(1); /* Chuyển icon thành màu trắng */
}
.ci-text-box h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--about-blue);
    margin: 0 0 5px;
}
.ci-text-box p {
    margin: 0;
    font-size: 14px;
    color: #555;
    line-height: 1.5;
}

/* --- SECTION 3: TẦM NHÌN - SỨ MỆNH - GIÁ TRỊ CỐT LÕI --- */
.vvm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 60px; /* Nhường chỗ cho icon nhô lên */
}

.vvm-card {
    background: #ffffff;
    border-radius: 8px;
    padding: 50px 30px 30px;
    position: relative;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    border: 1px solid #eaeaea;
}

.vvm-card.card-full {
    grid-column: 1 / -1; /* Ép chiếm 100% chiều rộng */
    margin: 30px auto 0;
}

.vvm-icon {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 80px;
    background-color: var(--about-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 6px solid var(--background-white); /* Tạo viền trắng đè lên card */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.vvm-icon img {
    width: 35px;
    filter: brightness(0) invert(1);
}

.vvm-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--about-blue);
    text-align: center;
    margin-bottom: 20px;
    text-transform: uppercase;
}

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
    .letter-layout, .history-layout {
        gap: 30px;
    }
    .col-4-1-1-1-1 .ht-footer{width:50%;}
}

@media (max-width: 768px) {
    .company-info-list{padding-top:15px;gap: 5px;}
    .ci-row{padding-bottom:10px;border-bottom: 1px solid #ddd;}
    .cta-heading{font-size:20px;}
    .cta-subheading{font-size:13px;}
    .cv-icon img{height: 55px;}
    .letter-layout {
        grid-template-columns: 1fr;
    }
    .letter-img-col {
        order: 1;
        max-height: 300px;
        overflow: hidden;
    }
    .letter-img-col img{ max-height: 300px;}
    .letter-content-col {
        order: 2;
    }
    .history-layout {
        grid-template-columns: 1fr;
    }
    .vvm-grid {
        grid-template-columns: 1fr;
    }
    .vvm-card.card-full {
        margin-top: 10px;
    }
    .s-content{padding: 25px 10px 10px;}
    .cv-title,.s-title {font-size:13px;font-weight:600;}
    .s-link,.s-excerpt{font-size:12px;}
}
/* ====================================================
   FIX LỖI GIAO DIỆN MOBILE (TRÀN NGANG & LỆCH KHỐI)
==================================================== */

/* 1. KHÓA TRỤC NGANG TOÀN TRANG (Sửa triệt để lỗi có thể trượt qua lại) */
html, body {
    overflow-x: hidden;
}

#main-content {
    overflow-x: hidden;
}

@media (max-width: 767px) {
    .contact-sub-title{margin-bottom:0;}
    h1,h2{font-size:20px;}
    h3{font-size:18px;}
    h4{font-size:16px;}
    h5{font-size:14px;}
    .vvm-grid{margin-top:50px;}
    .about-section{padding:15px 0;}
    .ht-main-header{padding: 15px 0;    margin-bottom: 10px;}
        .s-icon-badge {
        
        width: 30px;
        height: 30px;
    }
    .owl-carousel .owl-item .s-icon-badge img {
        width: 14px;
        height: 14px;
    }

    .s-excerpt{height:auto;}
    
  
    .owl-dots {
        margin-top: 15px !important;
    }


    .hp-section {
        padding: 30px 0; /* Giảm từ 60px xuống 40px trên mobile */
    }
        .hp-footer-cta{padding-bottom:0;}
    .sec-heading, .about-heading {
        font-size: 20px; /* Thu nhỏ tiêu đề cho cân đối */

    }


    .core-values-grid,
    .services-grid,
    .workflow-timeline,
    .related-news-grid-3,
    .vvm-grid,
    .history-layout,
    .letter-layout {
        gap: 20px; /* Thu nhỏ khe hở giữa các khối */
    }

    .core-value-item {
        padding: 0 !important;
    }

    /* Quy trình làm việc: Căn giữa nội dung */
    .wf-desc {
        max-width: 100%;
    }

    /* Trang Giới thiệu: Thu gọn padding thẻ Tầm nhìn - Sứ mệnh */
    .vvm-card {
        padding: 40px 20px 20px;
        margin-bottom: 15px;
    }
    .vvm-icon {
        width: 60px;
        height: 60px;
        top: -30px;
    }
    .vvm-icon img {
        width: 25px;
    }

    /* Trang Liên hệ: Sửa lỗi tràn Bản đồ và Form */
    .contact-page-layout {
        gap: 30px;
    }
    .contact-info-list .ci-text {
        font-size: 14px; /* Giảm font chữ để tránh rớt dòng xấu */
    }
    .hp-services .owl-nav button.owl-prev, .hp-team .owl-nav button.owl-prev, .hp-partners .owl-nav button.owl-prev{    left: -12px;}
    .hp-services .owl-nav button.owl-next, .hp-team .owl-nav button.owl-next, .hp-partners .owl-nav button.owl-next{    right: -12px;}
}

/* ====================================================
   FIX RIÊNG CHO MÀN HÌNH TABLET (iPad)
==================================================== */
@media (max-width: 1024px) and (min-width: 768px) {
    .hp-team .owl-nav button.owl-prev, 
    .hp-partners .owl-nav button.owl-prev,
    .hp-services .owl-nav button.owl-prev { left: -10px; } /* Kéo mũi tên vào trong sát mép */
    
    .hp-team .owl-nav button.owl-next, 
    .hp-partners .owl-nav button.owl-next,
    .hp-services .owl-nav button.owl-next { right: -10px; }
    
    html, body {
        overflow-x: hidden;
    }
}