/*
 Theme Name:   Flatsome Child - GATEMINT
 Theme URI:    https://gatemint.vn
 Description:  Child theme cho Flatsome - Website GATEMINT kiểm soát thông minh
 Author:       GATEMINT Dev Team
 Author URI:   https://gatemint.vn
 Template:     flatsome
 Version:      1.4.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  flatsome-child-gatemint
*/

/* ==========================================================================
   GATEMINT Custom Styles
   Lưu ý: Ưu tiên sử dụng Flatsome > Advanced > Custom CSS
   Chỉ đặt CSS ở đây khi thực sự cần override global styles
   ========================================================================== */

/* ==========================================================================
   DESIGN SYSTEM 2026 — GATEMINT brand tokens
   Nguồn chuẩn duy nhất cho màu/typography/spacing. Mọi trang tham chiếu ở đây.
   ========================================================================== */
:root {
    /* Brand */
    --primary-color: #00A79D;      /* Teal/Xanh GATEMINT */
    --primary-dark: #00958C;       /* Teal đậm (hover, form) */
    --primary-darker: #007A73;     /* Teal sâu (gradient end) */
    --secondary-color: #F58220;    /* Orange/Cam */
    --secondary-dark: #D96E12;     /* Cam đậm (hover) */
    --accent-color: #00A79D;       /* Accent (legacy, = primary) */
    --deep-teal: #00958C;          /* Darker Teal for Form (legacy) */

    /* Ink & text (thay navy/slate cũ) */
    --heading-color: #0F2D2A;      /* Tiêu đề — thay #0a1628 */
    --body-text: #455856;          /* Chữ body — thay #6b7b8d */
    --text-muted: #7C8F8C;         /* Muted — thay #a4b3c6 */

    /* Surfaces & lines */
    --surface: #F4F7F6;            /* Nền section sáng — thay #f8fafc */
    --surface-2: #E7EFED;          /* Card/surface — thay #e8ecf1 */
    --dark-section: #04312D;       /* Nền section tối — thay #0a1628 (bg) */
    --border-color: #DCE6E4;       /* Viền — thay #e8ecf1/#a4b3c6/#e0e5ec */
    --white: #ffffff;

    /* 2026 shape tokens */
    --radius: 14px;
    --radius-sm: 10px;
    --shadow-sm: 0 2px 8px rgba(4,49,45,.06);
    --shadow-md: 0 10px 30px rgba(4,49,45,.10);
    --shadow-lg: 0 24px 60px rgba(4,49,45,.14);
    --gradient-brand: linear-gradient(135deg, #00A79D 0%, #00C2B5 100%);
    --gradient-brand-deep: linear-gradient(135deg, #00A79D 0%, #007A73 100%);
}

/* 1. Header Navigation & Active Line */
.header-nav > li.current-menu-item > a {
    color: var(--accent-color) !important;
    position: relative;
}
.header-nav > li.current-menu-item > a::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 15px;
    right: 15px;
    height: 3px;
    background-color: var(--accent-color);
    border-radius: 2px;
}
.header-nav > li > a:hover {
    color: var(--accent-color) !important;
}

/* ===== HEADER LAYOUT: Logo LEFT | Nav CENTER | Button RIGHT ===== */
.header-main .flex-col.logo {
    flex: 0 0 auto !important;
}
/* Desktop nav column — CHỈ hiện trên desktop (>=1025px). Bọc media query
   để trên mobile/tablet trả về mặc định Flatsome (ẩn nav, chỉ hamburger). */
@media screen and (min-width: 1025px) {
    .header-main .flex-col.flex-left.hide-for-medium {
        flex: 1 1 0% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    /* Mobile hamburger column — ẩn trên desktop */
    .header-main .flex-col.show-for-medium {
        display: none !important;
    }
}
.header-main .flex-col.flex-right {
    flex: 0 0 auto !important;
}
/* .header-nav-main IS the <ul> — center items trực tiếp tại đây */
.header-nav-main {
    float: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
}
.header-nav-main > li > a {
    padding-left: 14px !important;
    padding-right: 14px !important;
    font-size: 13px !important;
    white-space: nowrap;
}

/* ===== GLOBAL MAX-WIDTH OVERRIDE ===== */
/* Mở rộng container và row để khớp homepage.html (max ~1400px) */
.row { max-width: 1320px !important; }
.row.row-large { max-width: 1400px !important; }
.row.row-small { max-width: 1280px !important; }
.row.row-collapse { max-width: 1320px !important; }

/* Header container — full width, padding đủ */
.header-main .header-inner {
    max-width: 1400px !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ===== Header Button override ===== */
/* Header Button override */
.header .header-button-1 {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    color: var(--white) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    border-radius: 4px !important;
    padding: 8px 20px !important;
    transition: all 0.3s ease !important;
}
.header .header-button-1:hover {
    background-color: #e0630b !important;
    border-color: #e0630b !important;
    opacity: 1 !important;
}

.hero-text-box {
    border-radius: 12px;
    background: #ffffffcc;
    padding: 20px;
    backdrop-filter: blur(8px);
}

/* 2. Hero Section Floating Elements */
.hero-floating-badge {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 10;
}
.floating-icon-item {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    cursor: pointer;
}
.floating-icon-item img, .floating-icon-item i {
    width: 24px;
    height: 24px;
    font-size: 20px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
}
.floating-icon-item:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
}
.floating-icon-item:hover img, .floating-icon-item:hover i {
    color: var(--white) !important;
}

/* 3. Stats Band — full width strip below hero */
.stats-band-section .section-inner {
    padding: 0 !important;
}
.stats-band {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    background: var(--white);
    box-shadow: 0 4px 20px rgba(10, 22, 40, 0.07);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: 30px 0;
    width: 100%;
}
.stats-band-item {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1;
    justify-content: center;
    padding: 10px 20px;
}
.stats-band-divider {
    width: 1px;
    background: var(--border-color);
    align-self: stretch;
    margin: 8px 0;
}
.stats-band-icon {
    width: 54px;
    height: 54px;
    border-radius: 10px;
    background: #F3F4F6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.stats-band-icon svg, .stats-band-icon i {
    width: 28px;
    height: 28px;
    font-size: 24px;
    color: #9CA3AF;
    display: flex;
    align-items: center;
    justify-content: center;
}
.stats-band-icon svg {
    stroke: #9CA3AF;
}
.stats-band-info {
    display: flex;
    flex-direction: column;
}
.stats-number {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1.1;
    margin-bottom: 2px;
}
.stats-label {
    font-size: 0.88rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* 4. Solution Card Grid */
.solution-card {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 35px 25px;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.solution-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(10, 22, 40, 0.08);
    border-color: var(--accent-color);
}
.solution-icon-wrap {
    width: 65px;
    height: 65px;
    border-radius: 14px;
    background: rgba(0, 151, 167, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    transition: all 0.3s ease;
}
.solution-card:hover .solution-icon-wrap {
    background: var(--accent-color);
}
.solution-card:hover .solution-icon-wrap svg, .solution-card:hover .solution-icon-wrap i {
    color: var(--white) !important;
}
.solution-icon-wrap svg, .solution-icon-wrap i {
    width: 32px;
    height: 32px;
    font-size: 32px;
    color: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
}

.solution-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 12px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 2.6em; /* 1.3 line-height * 2 lines */
}
.solution-desc {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 4.8em; /* 1.6 line-height * 3 lines */
}

.solution-link {
    color: var(--secondary-color);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    transition: gap 0.2s ease;
}
.solution-card:hover .solution-link {
    gap: 10px;
}

/* 5. Featured Products */
.product-card {
    background: #F9FAFB;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(10, 22, 40, 0.07);
    border-color: var(--secondary-color);
}
.product-img-wrapper {
    height: 190px;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-bottom: 1px solid var(--border-color);
    overflow: hidden;
}
.product-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.product-card:hover .product-img-wrapper img {
    transform: scale(1.08);
}
.product-info {
    padding: 22px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.product-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 8px;
}
.product-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 15px;
    flex-grow: 1;
}
.product-link {
    color: var(--accent-color);
    font-weight: 700;
    font-size: 0.82rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: gap 0.2s ease;
}
.product-card:hover .product-link {
    gap: 8px;
}

/* 5-column fix: Flatsome không có CSS cho class large-2.4 — thêm thủ công */
/* Class selector cần escape dấu chấm: large-2\.4 */
.col.large-2\.4 {
    width: 20% !important;
    flex: 0 0 20% !important;
    max-width: 20% !important;
}
@media (max-width: 1024px) {
    .col.large-2\.4 {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}
@media (max-width: 549px) {
    .col.large-2\.4 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* 6. Applications Section */
.app-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    height: 256px;
    cursor: pointer;
}
.app-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
}
.app-card:hover .app-bg {
    transform: scale(1.1);
}
.app-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 16px;
    z-index: 2;
}
.app-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    opacity: 0;
    transform: translateY(15px);
    transition: all 0.4s ease;
    backdrop-filter: blur(4px);
}
.app-card:hover .app-icon {
    opacity: 1;
    transform: translateY(0);
}
.app-icon svg {
    width: 22px;
    height: 22px;
    color: var(--white);
}
.app-name {
    color: var(--white);
    font-weight: 700;
    font-size: 0.95rem;
    margin: 0;
    text-align: center;
    letter-spacing: 0.5px;
}

/* 7. Featured Projects Section */
.project-card {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
}
.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(10, 22, 40, 0.06);
}
.project-img-wrapper {
    height: 170px;
    overflow: hidden;
}
.project-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.project-card:hover .project-img-wrapper img {
    transform: scale(1.06);
}
.project-info {
    padding: 16px 20px;
    background: rgba(10, 22, 40, 0.85);
    backdrop-filter: blur(4px);
}
.project-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.project-category {
    color: rgba(255,255,255,0.6);
    font-size: 0.78rem;
    font-weight: 500;
}

.cta-info-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 30px;
}
.cta-info-item {
    display: flex;
    align-items: center;
    gap: 16px;
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.95rem;
}
.cta-info-icon-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cta-info-icon-circle i {
    color: var(--white) !important;
    font-size: 16px !important;
    width: auto !important;
    height: auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.contact-form-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 35px;
    backdrop-filter: blur(8px);
}
.contact-form-card h3 {
    color: var(--white);
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 25px;
    text-align: center;
}
.contact-form-card input, .contact-form-card textarea {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: var(--white) !important;
    border-radius: 6px !important;
    padding: 10px 15px !important;
    font-size: 0.9rem !important;
    margin-bottom: 15px !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.contact-form-card input::placeholder, .contact-form-card textarea::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}
.contact-form-card input:focus, .contact-form-card textarea:focus {
    border-color: var(--secondary-color) !important;
    background: rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 0 0 2px rgba(255, 122, 26, 0.2) !important;
}
.contact-form-card .submit-btn {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    color: var(--white) !important;
    font-weight: 700;
    width: 100%;
    padding: 12px !important;
    font-size: 0.95rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.contact-form-card .submit-btn:hover {
    background-color: #e0630b !important;
}

/* 9. Absolute Footer styling */
.absolute-footer .copyright-footer {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.absolute-footer .gatemint-footer-left {
    display: flex;
    align-items: center;
    gap: 15px;
}
.absolute-footer .gatemint-footer-left img {
    height: 32px;
    width: auto;
}
.absolute-footer .gatemint-footer-left span {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.88rem;
}
.absolute-footer .social-icons {
    display: flex;
    gap: 12px;
    align-items: center;
}
.absolute-footer .social-icons a {
    color: var(--white) !important;
    background: rgba(255, 255, 255, 0.12) !important;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.3s ease;
    border: none !important;
}
.absolute-footer .social-icons a:hover {
    color: var(--white) !important;
    background: var(--accent-color) !important;
    transform: translateY(-3px);
}

/* Heading custom decoration line */
.section-title-wrap {
    text-align: center;
    margin-bottom: 50px;
}
.section-subtitle-tag {
    color: var(--accent-color);
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 8px;
    display: block;
}
.section-main-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 15px;
    display: inline-block;
    position: relative;
    padding-bottom: 12px;
}
.section-main-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: var(--secondary-color);
    border-radius: 2px;
}

/* Back to top button styling */
.back-to-top {
    background-color: var(--secondary-color) !important;
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 10. Clients Logo Marquee Slider */
.clients-section .section-inner {
    overflow: hidden;
}
.clients-marquee-wrapper {
    overflow: hidden;
    width: 100%;
    padding: 10px 0 20px;
    mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.clients-marquee-track {
    display: flex;
    align-items: center;
    gap: 0;
    animation: marquee-scroll 28s linear infinite;
    width: max-content;
}
.clients-marquee-wrapper:hover .clients-marquee-track {
    animation-play-state: paused;
}
@keyframes marquee-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.client-logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 40px;
    border-right: 1px solid #e8ecf1;
    min-width: 160px;
    height: 60px;
    transition: opacity 0.3s;
    opacity: 0.7;
}
.client-logo-item:hover {
    opacity: 1;
}
.client-logo-item:last-child {
    border-right: none;
}
.client-logo-text {
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: 1px;
    color: #333;
    white-space: nowrap;
    font-family: 'Be Vietnam Pro', sans-serif;
}
.client-logo-text.vincom   { color: #005baa; letter-spacing: 2px; }
.client-logo-text.vingroup { color: #005baa; }
.client-logo-text.samsung  { color: #1428a0; letter-spacing: 3px; }
.client-logo-text.bidv     { color: #004a8d; letter-spacing: 1px; }
.client-logo-text.viettel  { color: #c00; font-size: 1.2rem; }
.client-logo-text.vinhomes { color: #005baa; }
.client-logo-text.bvdk     { color: #006b6b; font-size: 0.85rem; font-weight: 700; letter-spacing: 0; }

/* Custom Responsive Styles */
@media (max-width: 549px) {
    /* Giảm padding section trên thiết bị di động */
    .section {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
    
    /* Tối ưu kích thước tiêu đề trên màn hình nhỏ */
    h1 {
        font-size: 1.85rem !important;
        line-height: 1.25 !important;
    }
    h2 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }
    
    /* Đảm bảo hình ảnh và cột không bị vỡ hoặc lệch */
    .col {
        padding: 0 10px !important;
    }
    
    /* Adjustments for overlapping elements on mobile */
    .stats-container {
        margin-top: 20px;
        padding: 15px;
    }
    .stats-item {
        gap: 12px;
    }
    .stats-number {
        font-size: 1.6rem;
    }
    .hero-floating-badge {
        display: none !important;
    }
    .absolute-footer .copyright-footer {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    /* Stats band mobile: 2 columns */
    .stats-band {
        flex-wrap: wrap;
        padding: 20px 0;
    }
    .stats-band-item {
        flex: 0 0 50%;
        padding: 12px 15px;
    }
    .stats-band-divider {
        display: none;
    }
    /* Client marquee mobile */
    .client-logo-item {
        padding: 0 25px;
        min-width: 120px;
    }
    /* Header bottom on mobile: hide */
    .header-bottom {
        display: none !important;
    }
}

/* 11. Custom Outline and Brand Button Styles */
.btn-secondary-outline {
    border: 2px solid var(--secondary-color) !important;
    color: var(--secondary-color) !important;
    background-color: transparent !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
}
.btn-secondary-outline:hover {
    background-color: var(--secondary-color) !important;
    color: var(--white) !important;
}

.btn-primary-outline {
    border: 2px solid var(--primary-color) !important;
    color: var(--primary-color) !important;
    background-color: transparent !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
}
.btn-primary-outline:hover {
    background-color: var(--primary-color) !important;
    color: var(--white) !important;
}

.btn-hero-primary {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    color: var(--white) !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
}
.btn-hero-primary:hover {
    background-color: #e0630b !important;
    border-color: #e0630b !important;
}

.btn-hero-secondary {
    border: 2px solid var(--primary-color) !important;
    color: var(--primary-color) !important;
    background-color: transparent !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
}
.btn-hero-secondary:hover {
    background-color: var(--primary-color) !important;
    color: var(--white) !important;
}

/* Client Section Title Override */
.clients-title {
    text-align: center;
    font-weight: 800;
    color: #6b7b8d;
    font-size: 0.88rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 30px;
}

/* Section title dark variant (Sản phẩm, Ứng dụng sections) */
.section-title-dark {
    color: #333333 !important;
}

/* ===== APP CARDS — match homepage.html design exactly ===== */
/* Overlay: gradient bottom→top, flex-col justify-end, nội dung bottom-left */
.app-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    padding: 16px !important;
    z-index: 2 !important;
}
/* Icon: luôn visible, orange, text-3xl, không có circle/badge */
.app-icon-badge {
    position: static !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
    margin-bottom: 8px !important;
    z-index: auto !important;
    transition: none !important;
}
.app-icon-badge i {
    font-size: 1.875rem !important; /* text-3xl */
    color: #F58220 !important;
    display: block;
}
.app-card:hover .app-icon-badge {
    opacity: 1 !important;
    transform: none !important;
}
/* Title */
.app-footer-info {
    text-align: left;
    width: 100%;
    z-index: 3;
}
.app-footer-info .app-name {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.3;
}
/* Orange underline: 32px → full width on hover */
.app-line {
    height: 2px;
    width: 32px;
    background: #F58220;
    border-radius: 2px;
    transition: width 0.35s ease;
}
.app-card:hover .app-line {
    width: 100%;
}

/* Hero text box — semi-transparent on mobile */
@media (max-width: 767px) {
    .hero-text-box {
        background: rgba(255, 255, 255, 0.82);
        padding: 24px 20px;
        border-radius: 8px;
        backdrop-filter: blur(4px);
    }
}

/* ==========================================================================
   HOMEPAGE VARIANTS — Design System 2026 (REBRAND)
   TẤT CẢ dùng brand teal #00A79D + cam #F58220 + logo đúng; chỉ KHÁC NHAU ở
   PHONG CÁCH / HIỆU ỨNG / LAYOUT. Kích hoạt bằng body.hp-NN (filter body_class).
   hp-01 = Light Clean baseline (không cần CSS riêng).
   Palette: teal #00A79D · teal-light #00C2B5 · teal-deep #04312D · teal-dark #00958C
            · teal-darker #007A73 · cam #F58220 · cam-dark #D96E12 · cam-soft #FFCF9E
   ========================================================================== */

/* ===== HP02 — Dark Teal (hero đêm phủ teal, nền deep-teal sang trọng) ===== */
body.hp-02 { --primary-color:#00A79D; --secondary-color:#F58220; --accent-color:#00C2B5; }
body.hp-02 #header .header-main,
body.hp-02 #header .header-main .header-bg-color,
body.hp-02 #header.stuck .header-main { background-color:#04312D !important; }
body.hp-02 #header .header-nav-main > li > a { color:#fff !important; }
body.hp-02 #header .header-nav-main > li.current-menu-item > a,
body.hp-02 #header .header-nav-main > li > a:hover { color:#00E0CF !important; }
body.hp-02 .header-nav > li.current-menu-item > a::after { background-color:#00C2B5 !important; }
body.hp-02 .hero-section .section-bg { background-image:url('/wp-content/uploads/2026/07/banner-night.png') !important; background-size:cover !important; background-position:50% 50% !important; }
body.hp-02 .hero-section .section-bg > img.bg { display:none !important; }
body.hp-02 .hero-section .section-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(4,49,45,.90) 0%, rgba(0,89,84,.60) 55%, rgba(0,167,157,.20) 100%); z-index:1; }
body.hp-02 .hero-text-box { background:transparent !important; backdrop-filter:none !important; padding:0 !important; }
body.hp-02 .hero-text-box h1 { color:#fff !important; }
body.hp-02 .hero-text-box h1 span { color:#FFCF9E !important; }
body.hp-02 .hero-text-box > p:first-child { color:#00E0CF !important; }
body.hp-02 .hero-text-box p[style*="#333333"] { color:rgba(255,255,255,.82) !important; }
body.hp-02 .btn-hero-primary { background-color:#F58220 !important; border-color:#F58220 !important; color:#fff !important; }
body.hp-02 .btn-hero-primary:hover { background-color:#D96E12 !important; border-color:#D96E12 !important; }
body.hp-02 .btn-hero-secondary { border:2px solid rgba(255,255,255,.7) !important; color:#fff !important; }
body.hp-02 .btn-hero-secondary:hover { background:#fff !important; color:#04312D !important; }
body.hp-02 .stats-band { background:#06453F !important; border-color:rgba(255,255,255,.08) !important; box-shadow:0 10px 30px rgba(0,0,0,.30) !important; }
body.hp-02 .stats-number { color:#fff !important; }
body.hp-02 .stats-label { color:rgba(255,255,255,.65) !important; }
body.hp-02 .stats-band-icon { background:rgba(0,194,181,.18) !important; }
body.hp-02 .stats-band-icon i { color:#00E0CF !important; }
body.hp-02 .stats-band-divider { background:rgba(255,255,255,.12) !important; }
body.hp-02 .section-subtitle-tag { color:#F58220 !important; }
body.hp-02 .section-main-title { color:#04312D !important; }
body.hp-02 .section-main-title::after { background-color:#00A79D !important; }
body.hp-02 .app-icon-badge i { color:#00A79D !important; }
body.hp-02 .app-line { background:#00A79D !important; }
body.hp-02 .projects-section { background-color:#04312D !important; }
body.hp-02 .projects-section .section-subtitle-tag { color:#FFCF9E !important; }
body.hp-02 .projects-section .section-main-title { color:#fff !important; }
body.hp-02 .projects-section .section-main-title::after { background-color:#F58220 !important; }
body.hp-02 .projects-section .project-card { background:#06453F !important; border-color:rgba(255,255,255,.08) !important; }
body.hp-02 .cta-form-section { background-color:#04312D !important; }
body.hp-02 .contact-form-card .submit-btn { background-color:#F58220 !important; border-color:#F58220 !important; }

/* ===== HP03 — Teal Gradient Immersive (gradient teal liền mạch, CTA cam) ===== */
body.hp-03 { --primary-color:#00A79D; --secondary-color:#F58220; --accent-color:#00A79D; }
body.hp-03 .hero-section .section-bg { background-image:linear-gradient(120deg,#00A79D 0%,#00958C 55%,#007A73 100%) !important; background-size:cover !important; }
body.hp-03 .hero-section .section-bg > img.bg { display:none !important; }
body.hp-03 .hero-text-box { background:transparent !important; backdrop-filter:none !important; padding:0 !important; }
body.hp-03 .hero-text-box h1 { color:#fff !important; }
body.hp-03 .hero-text-box h1 span { color:#FFDFC4 !important; }
body.hp-03 .hero-text-box > p:first-child { color:rgba(255,255,255,.9) !important; }
body.hp-03 .hero-text-box p[style*="#333333"] { color:rgba(255,255,255,.92) !important; }
body.hp-03 .btn-hero-primary { background-color:#F58220 !important; border-color:#F58220 !important; color:#fff !important; }
body.hp-03 .btn-hero-primary:hover { background-color:#D96E12 !important; border-color:#D96E12 !important; }
body.hp-03 .btn-hero-secondary { border:2px solid rgba(255,255,255,.85) !important; color:#fff !important; }
body.hp-03 .btn-hero-secondary:hover { background:#fff !important; color:#00A79D !important; }
body.hp-03 .floating-icon-item:hover { background:#F58220 !important; border-color:#F58220 !important; }
body.hp-03 .section-subtitle-tag { color:#F58220 !important; }
body.hp-03 .projects-section { background:linear-gradient(135deg,#00A79D 0%,#00958C 100%) !important; }
body.hp-03 .projects-section .section-subtitle-tag { color:#FFDFC4 !important; }
body.hp-03 .projects-section .section-main-title { color:#fff !important; }
body.hp-03 .projects-section .section-main-title::after { background-color:#F58220 !important; }
body.hp-03 .projects-section .project-card { background:#fff !important; border-color:rgba(255,255,255,.4) !important; }

/* ===== HP04 — Glassmorphism (card kính mờ, backdrop-blur trên gradient teal) ===== */
body.hp-04 { --primary-color:#00A79D; --secondary-color:#F58220; --accent-color:#00A79D; }
body.hp-04 .hero-section .section-bg { background-image:linear-gradient(130deg,#00A79D 0%,#00C2B5 50%,#5ED9CE 100%) !important; background-size:cover !important; }
body.hp-04 .hero-section .section-bg > img.bg { display:none !important; }
body.hp-04 .hero-text-box { background:rgba(255,255,255,.18) !important; backdrop-filter:blur(14px) !important; border:1px solid rgba(255,255,255,.35) !important; border-radius:20px !important; padding:28px !important; box-shadow:0 20px 50px rgba(4,49,45,.18) !important; }
body.hp-04 .hero-text-box h1 { color:#04312D !important; }
body.hp-04 .hero-text-box h1 span { color:#F58220 !important; }
body.hp-04 .hero-text-box > p:first-child { color:#F58220 !important; }
body.hp-04 .hero-text-box p[style*="#333333"] { color:#0F2D2A !important; }
body.hp-04 .btn-hero-primary { background:#F58220 !important; border-color:#F58220 !important; color:#fff !important; }
body.hp-04 .btn-hero-primary:hover { background:#D96E12 !important; border-color:#D96E12 !important; }
body.hp-04 .btn-hero-secondary { border:2px solid #04312D !important; color:#04312D !important; }
body.hp-04 .section-subtitle-tag { color:#F58220 !important; }
body.hp-04 .stats-band { background:rgba(255,255,255,.55) !important; backdrop-filter:blur(12px) !important; border:1px solid rgba(255,255,255,.6) !important; box-shadow:0 18px 44px rgba(4,49,45,.12) !important; }
body.hp-04 .projects-section { background:linear-gradient(135deg,#00A79D,#00C2B5) !important; }
body.hp-04 .projects-section .section-subtitle-tag { color:#FFE3CC !important; }
body.hp-04 .projects-section .section-main-title { color:#fff !important; }
body.hp-04 .projects-section .section-main-title::after { background:#F58220 !important; }
body.hp-04 .projects-section .project-card { background:rgba(255,255,255,.16) !important; backdrop-filter:blur(10px) !important; border:1px solid rgba(255,255,255,.32) !important; }
body.hp-04 .cta-form-section { background:linear-gradient(135deg,#00958C,#04312D) !important; }
body.hp-04 .contact-form-card .submit-btn { background:#F58220 !important; border-color:#F58220 !important; }

/* ===== HP05 — Bento Grid (ô bo góc lớn, shadow nổi, nền sáng) ===== */
body.hp-05 { --primary-color:#00A79D; --secondary-color:#F58220; --accent-color:#00A79D; }
body.hp-05 .hero-section .section-bg { background-image:linear-gradient(120deg,#E7EFED,#F4F7F6) !important; background-size:cover !important; }
body.hp-05 .hero-section .section-bg > img.bg { display:none !important; }
body.hp-05 .hero-text-box { background:#fff !important; backdrop-filter:none !important; border-radius:28px !important; box-shadow:0 24px 60px rgba(4,49,45,.14) !important; padding:34px !important; }
body.hp-05 .hero-text-box h1 { color:#04312D !important; }
body.hp-05 .hero-text-box h1 span { color:#F58220 !important; }
body.hp-05 .hero-text-box > p:first-child { color:#F58220 !important; }
body.hp-05 .btn-hero-primary { background:#00A79D !important; border-color:#00A79D !important; }
body.hp-05 .btn-hero-primary:hover { background:#00958C !important; border-color:#00958C !important; }
body.hp-05 .section-subtitle-tag { color:#F58220 !important; }
body.hp-05 .stats-band { border-radius:28px !important; box-shadow:0 20px 50px rgba(4,49,45,.12) !important; background:#fff !important; }
body.hp-05 .project-card { border-radius:24px !important; box-shadow:0 14px 36px rgba(4,49,45,.12) !important; }
body.hp-05 .projects-section { background:#F4F7F6 !important; }
body.hp-05 .projects-section .section-main-title::after { background:#F58220 !important; }
body.hp-05 .cta-form-section { background:#00A79D !important; }
body.hp-05 .contact-form-card { border-radius:28px !important; }
body.hp-05 .contact-form-card .submit-btn { background:#F58220 !important; border-color:#F58220 !important; }

/* ===== HP06 — Editorial / Big-Type (chữ lớn, viền mảnh, nhiều khoảng trắng) ===== */
body.hp-06 { --primary-color:#00A79D; --secondary-color:#F58220; --accent-color:#00A79D; }
body.hp-06 .hero-section .section-bg { background-image:linear-gradient(90deg,#FFFFFF,#F4F7F6) !important; background-size:cover !important; }
body.hp-06 .hero-section .section-bg > img.bg { display:none !important; }
body.hp-06 .hero-text-box { background:transparent !important; backdrop-filter:none !important; padding:0 !important; }
body.hp-06 .hero-text-box h1 { color:#04312D !important; font-size:4rem !important; line-height:1.03 !important; letter-spacing:-.02em !important; font-weight:800 !important; }
body.hp-06 .hero-text-box h1 span { color:#00A79D !important; }
body.hp-06 .hero-text-box > p:first-child { color:#F58220 !important; letter-spacing:.22em !important; text-transform:uppercase !important; font-weight:700 !important; }
body.hp-06 .btn-hero-primary { background:#04312D !important; border-color:#04312D !important; }
body.hp-06 .btn-hero-secondary { border:1px solid #04312D !important; color:#04312D !important; }
body.hp-06 .section-subtitle-tag { color:#F58220 !important; letter-spacing:.22em !important; }
body.hp-06 .section-main-title { color:#04312D !important; font-size:2.9rem !important; font-weight:800 !important; letter-spacing:-.015em !important; }
body.hp-06 .section-main-title::after { background:#00A79D !important; }
body.hp-06 .stats-band { background:#fff !important; border-top:3px solid #00A79D !important; border-radius:0 !important; box-shadow:none !important; }
body.hp-06 .project-card { border-radius:0 !important; border:1px solid var(--border-color) !important; box-shadow:none !important; }
body.hp-06 .projects-section { background:#fff !important; }
body.hp-06 .cta-form-section { background:#04312D !important; }
body.hp-06 .contact-form-card .submit-btn { background:#F58220 !important; border-color:#F58220 !important; }

/* ===== HP07 — Soft / Neumorph (bóng mềm đôi, nền #F4F7F6) ===== */
body.hp-07 { --primary-color:#00A79D; --secondary-color:#F58220; --accent-color:#00A79D; }
body.hp-07 .hero-section .section-bg { background-image:linear-gradient(135deg,#EEF4F2,#F4F7F6) !important; background-size:cover !important; }
body.hp-07 .hero-section .section-bg > img.bg { display:none !important; }
body.hp-07 .hero-text-box { background:#F0F5F3 !important; backdrop-filter:none !important; border-radius:24px !important; padding:32px !important; box-shadow:12px 12px 28px rgba(4,49,45,.12), -12px -12px 28px rgba(255,255,255,.9) !important; }
body.hp-07 .hero-text-box h1 { color:#04312D !important; }
body.hp-07 .hero-text-box h1 span { color:#00A79D !important; }
body.hp-07 .hero-text-box > p:first-child { color:#F58220 !important; }
body.hp-07 .btn-hero-primary { background:#00A79D !important; border-color:#00A79D !important; box-shadow:6px 6px 16px rgba(0,124,115,.3) !important; }
body.hp-07 .section-subtitle-tag { color:#F58220 !important; }
body.hp-07 .stats-band { background:#F0F5F3 !important; border:none !important; border-radius:24px !important; box-shadow:12px 12px 28px rgba(4,49,45,.1), -12px -12px 28px rgba(255,255,255,.9) !important; }
body.hp-07 .project-card { border-radius:22px !important; border:none !important; background:#F0F5F3 !important; box-shadow:10px 10px 24px rgba(4,49,45,.1), -10px -10px 24px rgba(255,255,255,.85) !important; }
body.hp-07 .projects-section { background:#F4F7F6 !important; }
body.hp-07 .projects-section .section-main-title::after { background:#F58220 !important; }
body.hp-07 .cta-form-section { background:#00958C !important; }
body.hp-07 .contact-form-card .submit-btn { background:#F58220 !important; border-color:#F58220 !important; }

/* ===== HP08 — Gradient Mesh (blob mờ teal/cam trên nền sáng, airy) ===== */
body.hp-08 { --primary-color:#00A79D; --secondary-color:#F58220; --accent-color:#00A79D; }
body.hp-08 .hero-section .section-bg { background-image:radial-gradient(circle at 18% 22%, rgba(0,167,157,.26), transparent 42%), radial-gradient(circle at 82% 28%, rgba(245,130,32,.20), transparent 44%), radial-gradient(circle at 60% 85%, rgba(0,194,181,.18), transparent 46%), linear-gradient(120deg,#FFFFFF,#F4F7F6) !important; background-size:cover !important; }
body.hp-08 .hero-section .section-bg > img.bg { display:none !important; }
body.hp-08 .hero-text-box { background:rgba(255,255,255,.55) !important; backdrop-filter:blur(8px) !important; border-radius:18px !important; padding:26px !important; }
body.hp-08 .hero-text-box h1 { color:#04312D !important; }
body.hp-08 .hero-text-box h1 span { color:#F58220 !important; }
body.hp-08 .hero-text-box > p:first-child { color:#00A79D !important; }
body.hp-08 .btn-hero-primary { background:#F58220 !important; border-color:#F58220 !important; }
body.hp-08 .section-subtitle-tag { color:#F58220 !important; }
body.hp-08 .stats-band { background:rgba(255,255,255,.7) !important; backdrop-filter:blur(6px) !important; box-shadow:0 16px 40px rgba(4,49,45,.1) !important; }
body.hp-08 .projects-section { background:radial-gradient(circle at 15% 20%, rgba(0,167,157,.14), transparent 45%), radial-gradient(circle at 85% 80%, rgba(245,130,32,.12), transparent 45%), #F4F7F6 !important; }
body.hp-08 .projects-section .section-main-title::after { background:#F58220 !important; }
body.hp-08 .cta-form-section { background:linear-gradient(120deg,#00A79D,#00C2B5) !important; }
body.hp-08 .contact-form-card .submit-btn { background:#F58220 !important; border-color:#F58220 !important; }

/* ===== HP09 — Outline / Line-art (viền teal, fill trong suốt, icon nét) ===== */
body.hp-09 { --primary-color:#00A79D; --secondary-color:#F58220; --accent-color:#00A79D; }
body.hp-09 .hero-section .section-bg { background-image:linear-gradient(#FFFFFF,#FFFFFF) !important; background-size:cover !important; }
body.hp-09 .hero-section .section-bg > img.bg { display:none !important; }
body.hp-09 .hero-text-box { background:transparent !important; backdrop-filter:none !important; border:2px solid #00A79D !important; border-radius:16px !important; padding:28px !important; }
body.hp-09 .hero-text-box h1 { color:#04312D !important; }
body.hp-09 .hero-text-box h1 span { color:#00A79D !important; }
body.hp-09 .hero-text-box > p:first-child { color:#F58220 !important; }
body.hp-09 .btn-hero-primary { background:transparent !important; border:2px solid #00A79D !important; color:#00A79D !important; }
body.hp-09 .btn-hero-primary:hover { background:#00A79D !important; color:#fff !important; }
body.hp-09 .btn-hero-secondary { border:2px solid #F58220 !important; color:#F58220 !important; }
body.hp-09 .btn-hero-secondary:hover { background:#F58220 !important; color:#fff !important; }
body.hp-09 .section-subtitle-tag { color:#F58220 !important; }
body.hp-09 .stats-band { background:#fff !important; border:2px solid #00A79D !important; box-shadow:none !important; }
body.hp-09 .stats-band-icon { background:transparent !important; border:2px solid #00A79D !important; }
body.hp-09 .project-card { background:#fff !important; border:2px solid #00A79D !important; box-shadow:none !important; }
body.hp-09 .projects-section { background:#fff !important; }
body.hp-09 .projects-section .section-main-title::after { background:#F58220 !important; }
body.hp-09 .cta-form-section { background:#00A79D !important; }
body.hp-09 .contact-form-card .submit-btn { background:#F58220 !important; border-color:#F58220 !important; }

/* ===== HP10 — Dark Neon Teal (nền gần đen + glow teal/cam futuristic) ===== */
body.hp-10 { --primary-color:#00E0CF; --secondary-color:#F58220; --accent-color:#00E0CF; }
body.hp-10 #header .header-main,
body.hp-10 #header .header-main .header-bg-color,
body.hp-10 #header.stuck .header-main { background-color:#021D1A !important; }
body.hp-10 #header .header-nav-main > li > a { color:#CFF7F2 !important; }
body.hp-10 #header .header-nav-main > li.current-menu-item > a,
body.hp-10 #header .header-nav-main > li > a:hover { color:#00E0CF !important; }
body.hp-10 .header-nav > li.current-menu-item > a::after { background-color:#00E0CF !important; box-shadow:0 0 8px #00E0CF !important; }
body.hp-10 .hero-section .section-bg { background-image:linear-gradient(130deg,#021D1A 0%,#04312D 60%,#063A34 100%) !important; background-size:cover !important; }
body.hp-10 .hero-section .section-bg > img.bg { display:none !important; }
body.hp-10 .hero-text-box { background:transparent !important; backdrop-filter:none !important; padding:0 !important; }
body.hp-10 .hero-text-box h1 { color:#fff !important; text-shadow:0 0 18px rgba(0,224,207,.55) !important; }
body.hp-10 .hero-text-box h1 span { color:#00E0CF !important; text-shadow:0 0 22px rgba(0,224,207,.8) !important; }
body.hp-10 .hero-text-box > p:first-child { color:#00E0CF !important; }
body.hp-10 .hero-text-box p[style*="#333333"] { color:rgba(207,247,242,.82) !important; }
body.hp-10 .btn-hero-primary { background:#F58220 !important; border-color:#F58220 !important; box-shadow:0 0 20px rgba(245,130,32,.55) !important; }
body.hp-10 .btn-hero-secondary { border:2px solid #00E0CF !important; color:#00E0CF !important; box-shadow:0 0 14px rgba(0,224,207,.4) !important; }
body.hp-10 .stats-band { background:#04312D !important; border:1px solid rgba(0,224,207,.25) !important; box-shadow:0 0 30px rgba(0,224,207,.18) !important; }
body.hp-10 .stats-number { color:#00E0CF !important; text-shadow:0 0 14px rgba(0,224,207,.5) !important; }
body.hp-10 .stats-label { color:rgba(207,247,242,.7) !important; }
body.hp-10 .stats-band-icon { background:rgba(0,224,207,.14) !important; }
body.hp-10 .stats-band-icon i { color:#00E0CF !important; }
body.hp-10 .section-subtitle-tag { color:#F58220 !important; }
body.hp-10 .section-main-title { color:#04312D !important; }
body.hp-10 .section-main-title::after { background:#00A79D !important; }
body.hp-10 .app-icon-badge i { color:#00A79D !important; }
body.hp-10 .app-line { background:#00A79D !important; }
body.hp-10 .projects-section { background:#021D1A !important; }
body.hp-10 .projects-section .section-subtitle-tag { color:#F58220 !important; }
body.hp-10 .projects-section .section-main-title { color:#fff !important; }
body.hp-10 .projects-section .section-main-title::after { background:#00E0CF !important; box-shadow:0 0 10px #00E0CF !important; }
body.hp-10 .projects-section .project-card { background:#04312D !important; border:1px solid rgba(0,224,207,.2) !important; }
body.hp-10 .cta-form-section { background:#021D1A !important; }
body.hp-10 .contact-form-card .submit-btn { background:#F58220 !important; border-color:#F58220 !important; box-shadow:0 0 18px rgba(245,130,32,.5) !important; }

/* ===== HP11 — Warm Orange-led (cam chủ đạo, teal phụ, ấm) ===== */
body.hp-11 { --primary-color:#F58220; --secondary-color:#00A79D; --accent-color:#F58220; }
body.hp-11 .header-nav > li.current-menu-item > a::after { background-color:#F58220 !important; }
body.hp-11 .header .header-button-1 { background-color:#F58220 !important; border-color:#F58220 !important; }
body.hp-11 .hero-section .section-bg { background-image:linear-gradient(125deg,#F58220 0%,#FB9D4B 55%,#FFB877 100%) !important; background-size:cover !important; }
body.hp-11 .hero-section .section-bg > img.bg { display:none !important; }
body.hp-11 .hero-text-box { background:transparent !important; backdrop-filter:none !important; padding:0 !important; }
body.hp-11 .hero-text-box h1 { color:#fff !important; }
body.hp-11 .hero-text-box h1 span { color:#04312D !important; }
body.hp-11 .hero-text-box > p:first-child { color:#FFF2E6 !important; }
body.hp-11 .hero-text-box p[style*="#333333"] { color:rgba(255,255,255,.92) !important; }
body.hp-11 .btn-hero-primary { background:#00A79D !important; border-color:#00A79D !important; color:#fff !important; }
body.hp-11 .btn-hero-primary:hover { background:#00958C !important; border-color:#00958C !important; }
body.hp-11 .btn-hero-secondary { border:2px solid #fff !important; color:#fff !important; }
body.hp-11 .btn-hero-secondary:hover { background:#fff !important; color:#F58220 !important; }
body.hp-11 .section-subtitle-tag { color:#F58220 !important; }
body.hp-11 .section-main-title::after { background:#00A79D !important; }
body.hp-11 .stats-band-icon { background:rgba(245,130,32,.14) !important; }
body.hp-11 .stats-band-icon i { color:#F58220 !important; }
body.hp-11 .app-icon-badge i { color:#F58220 !important; }
body.hp-11 .app-line { background:#F58220 !important; }
body.hp-11 .projects-section { background:linear-gradient(135deg,#F58220,#D96E12) !important; }
body.hp-11 .projects-section .section-subtitle-tag { color:#04312D !important; }
body.hp-11 .projects-section .section-main-title { color:#fff !important; }
body.hp-11 .projects-section .section-main-title::after { background:#00A79D !important; }
body.hp-11 .projects-section .project-card { background:#fff !important; }
body.hp-11 .cta-form-section { background:#00A79D !important; }
body.hp-11 .contact-form-card .submit-btn { background:#F58220 !important; border-color:#F58220 !important; }

/* ===== HP12 — Minimal Mono-teal (đơn sắc teal, tối giản, trắng nhiều) ===== */
body.hp-12 { --primary-color:#00A79D; --secondary-color:#00A79D; --accent-color:#00A79D; }
body.hp-12 .hero-section .section-bg { background-image:linear-gradient(#FFFFFF,#FFFFFF) !important; background-size:cover !important; }
body.hp-12 .hero-section .section-bg > img.bg { display:none !important; }
body.hp-12 .hero-text-box { background:transparent !important; backdrop-filter:none !important; padding:0 !important; }
body.hp-12 .hero-text-box h1 { color:#04312D !important; font-weight:800 !important; }
body.hp-12 .hero-text-box h1 span { color:#00A79D !important; }
body.hp-12 .hero-text-box > p:first-child { color:#00A79D !important; letter-spacing:.2em !important; text-transform:uppercase !important; }
body.hp-12 .btn-hero-primary { background:#00A79D !important; border-color:#00A79D !important; }
body.hp-12 .btn-hero-primary:hover { background:#00958C !important; border-color:#00958C !important; }
body.hp-12 .btn-hero-secondary { border:1.5px solid #00A79D !important; color:#00A79D !important; }
body.hp-12 .btn-hero-secondary:hover { background:#00A79D !important; color:#fff !important; }
body.hp-12 .section-subtitle-tag { color:#00A79D !important; letter-spacing:.2em !important; }
body.hp-12 .section-main-title { color:#04312D !important; }
body.hp-12 .section-main-title::after { background:#00A79D !important; }
body.hp-12 .stats-band { background:#F4F7F6 !important; border:1px solid var(--border-color) !important; box-shadow:none !important; }
body.hp-12 .stats-number { color:#00A79D !important; }
body.hp-12 .stats-band-icon { background:rgba(0,167,157,.12) !important; }
body.hp-12 .stats-band-icon i { color:#00A79D !important; }
body.hp-12 .app-icon-badge i { color:#00A79D !important; }
body.hp-12 .app-line { background:#00A79D !important; }
body.hp-12 .project-card { border:1px solid var(--border-color) !important; box-shadow:none !important; }
body.hp-12 .projects-section { background:#F4F7F6 !important; }
body.hp-12 .projects-section .section-main-title { color:#04312D !important; }
body.hp-12 .projects-section .section-subtitle-tag { color:#00A79D !important; }
body.hp-12 .projects-section .section-main-title::after { background:#00A79D !important; }
body.hp-12 .projects-section .project-card { background:#fff !important; border-color:var(--border-color) !important; }
body.hp-12 .cta-form-section { background:#00A79D !important; }
body.hp-12 .contact-form-card .submit-btn { background:#F58220 !important; border-color:#F58220 !important; }

/* ==========================================================================
   HOMEPAGE UPGRADE (2026-10-15): hero ảnh cho bản phẳng · HP12 grayscale ·
   chuẩn hóa spacing section · HP10 đồng bộ tông tối. (đặt sau block hp-NN
   để override đúng) ========================================================= */

/* 1) Thêm ẢNH hero (banner) dưới lớp overlay màu cho các bản hero phẳng */
body.hp-03 .hero-section .section-bg {
    background-image: linear-gradient(120deg, rgba(0,167,157,.90) 0%, rgba(0,149,140,.84) 55%, rgba(0,122,115,.80) 100%), url('/wp-content/uploads/2026/07/banner.png') !important;
    background-size: cover !important; background-position: 50% 50% !important;
}
body.hp-04 .hero-section .section-bg {
    background-image: linear-gradient(130deg, rgba(0,167,157,.88) 0%, rgba(0,194,181,.74) 55%, rgba(94,217,206,.60) 100%), url('/wp-content/uploads/2026/07/banner.png') !important;
    background-size: cover !important; background-position: 50% 50% !important;
}
body.hp-06 .hero-section .section-bg {
    background-image: linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.82) 44%, rgba(244,247,246,.40) 100%), url('/wp-content/uploads/2026/07/banner.png') !important;
    background-size: cover !important; background-position: 80% 50% !important;
}
body.hp-10 .hero-section .section-bg {
    background-image: linear-gradient(130deg, rgba(2,29,26,.93) 0%, rgba(4,49,45,.86) 55%, rgba(6,58,52,.78) 100%), url('/wp-content/uploads/2026/07/banner-night.png') !important;
    background-size: cover !important; background-position: 50% 50% !important;
}
body.hp-11 .hero-section .section-bg {
    background-image: linear-gradient(125deg, rgba(245,130,32,.90) 0%, rgba(251,157,75,.78) 55%, rgba(255,184,119,.66) 100%), url('/wp-content/uploads/2026/07/banner.png') !important;
    background-size: cover !important; background-position: 50% 50% !important;
}

/* 2) HP12 Mono — ảnh nội dung về đen trắng, hover hiện màu */
body.hp-12 #content img { filter: grayscale(100%); transition: filter .45s ease; }
body.hp-12 #content img:hover { filter: grayscale(0%); }

/* 3) Chuẩn hóa spacing: section nội dung thoáng hơn (trừ hero & stats) — mọi bản */
body[class*="hp-"] #content .section:not(.hero-section):not(.stats-band-section) {
    padding-top: 64px !important; padding-bottom: 64px !important;
}

/* 4) HP10 — section giữa về tông tối, tiêu đề sáng (card sáng nổi trên nền tối) */
body.hp-10 #content .section:not(.hero-section):not(.stats-band-section) {
    background-color: #04241F !important;
}
body.hp-10 #content .section-main-title { color:#fff !important; }
body.hp-10 #content .section .section-main-title::after { background:#00E0CF !important; }
body.hp-10 .clients-section .section-subtitle-tag,
body.hp-10 .clients-section .client-logo,
body.hp-10 .clients-section .client-logo-text { color:rgba(207,247,242,.85) !important; }

/* ==========================================================================
   WOOCOMMERCE — Design System 2026 polish (teal #00A79D / cam #F58220)
   Flatsome đã set color_primary/secondary = brand, đây chỉ là tinh chỉnh 2026.
   ========================================================================== */
/* Lưới sản phẩm: bo góc ảnh + nâng nhẹ khi hover */
.woocommerce ul.products li.product .box-image,
.woocommerce ul.products li.product img { border-radius: var(--radius-sm); }
.woocommerce ul.products li.product .box { transition: transform .25s ease, box-shadow .25s ease; }
.woocommerce ul.products li.product .box:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
/* Giá teal đậm, đậm nét */
.woocommerce .price,
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--primary-dark); font-weight: 700; }
/* Badge giảm giá = cam, bo tròn */
.woocommerce span.onsale { background: var(--secondary-color); color:#fff; border-radius: 999px; min-height:2.2em; min-width:2.2em; line-height:2.2em; }
/* Nút & input bo góc 2026 */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce .button { border-radius: var(--radius-sm); font-weight:600; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce .select2-container--default .select2-selection--single { border-radius: var(--radius-sm) !important; border-color: var(--border-color) !important; }
/* Tiêu đề sản phẩm & section dùng ink brand */
.single-product .product_title,
.woocommerce .cart_totals h2, .woocommerce-checkout h3 { color: var(--heading-color); }
/* Sidebar shop: tiêu đề widget + slider giá teal */
.shop-sidebar .widget-title, .widget_product_categories .widget-title { color: var(--heading-color); }
.woocommerce .price_slider .ui-slider-range,
.woocommerce .price_slider .ui-slider-handle { background-color: var(--primary-color) !important; }
/* Thẻ tổng đơn / order review nền surface mềm */
.woocommerce-checkout #order_review, .woocommerce .cart_totals { background: var(--surface); border-radius: var(--radius); padding: 6px 22px 22px; }
/* Bước thanh toán (cart steps) — active teal */
.cart-steps .cart-step.active, .checkout-steps li.active { color: var(--primary-color); }

/* ==========================================================================
   SINGLE PRODUCT — Nâng cấp trang chi tiết (GATEMINT, model lai báo giá)
   ========================================================================== */
/* Giá: cỡ lớn, teal đậm */
.single-product div.product p.price,
.single-product div.product span.price { font-size: 1.9rem; line-height: 1.2; }
.single-product div.product p.price del { font-size: 1.1rem; color: var(--text-muted); font-weight: 400; }

/* Nhãn "Giá tham khảo" */
.gm-price-note {
    display: inline-flex; align-items: center; gap: 7px;
    margin: -4px 0 16px; padding: 6px 12px;
    background: var(--surface-2); color: var(--primary-darker);
    border-radius: 999px; font-size: .82rem; font-weight: 600;
}
.gm-price-note i { color: var(--secondary-color); }

/* Điểm nổi bật */
.gm-highlights { list-style: none; margin: 0 0 22px; padding: 16px 18px;
    background: var(--surface); border: 1px solid var(--border-color);
    border-radius: var(--radius); }
.gm-highlights li { display: flex; align-items: flex-start; gap: 10px;
    margin: 0 0 10px; color: var(--heading-color); font-size: .95rem; line-height: 1.5; }
.gm-highlights li:last-child { margin-bottom: 0; }
.gm-highlights li i { color: var(--primary-color); font-size: 1rem; margin-top: 3px; flex: 0 0 auto; }

/* CTA chính "Yêu cầu báo giá" (cam, nổi bật) */
.gm-quote-cta { display: inline-block; margin: 0 12px 10px 0; vertical-align: top; }
.single-product .gm-quote-cta .gm-quote-btn {
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--secondary-color); color: #fff !important;
    border-radius: var(--radius-sm); font-weight: 700; letter-spacing: .3px;
    padding: 0 28px; height: 50px; line-height: 50px; margin: 0;
    box-shadow: 0 8px 20px rgba(245,130,32,.28); transition: all .25s ease;
}
.single-product .gm-quote-cta .gm-quote-btn:hover {
    background: var(--secondary-dark); transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(245,130,32,.36);
}
/* Nút thêm giỏ -> vai trò phụ (outline teal) */
.single-product form.cart { display: inline-block; vertical-align: top; }
.single-product form.cart .button {
    background: #fff !important; color: var(--primary-dark) !important;
    border: 2px solid var(--primary-color) !important; height: 50px; line-height: 46px;
    box-shadow: none !important; font-weight: 600;
}
.single-product form.cart .button:hover {
    background: var(--primary-color) !important; color: #fff !important;
}

/* Hàng tin cậy */
.gm-trust-row { list-style: none; display: flex; flex-wrap: wrap; gap: 14px 26px;
    margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--border-color); clear: both; }
.gm-trust-row li { display: flex; align-items: center; gap: 9px;
    color: var(--body-text); font-size: .88rem; font-weight: 600; }
.gm-trust-row li i { color: var(--primary-color); font-size: 1.05rem; }

/* Bảng thông số kỹ thuật */
.gm-specs-table { width: 100%; border-collapse: collapse; margin: 6px 0 10px; }
.gm-specs-table tr { border-bottom: 1px solid var(--border-color); }
.gm-specs-table tr:nth-child(odd) { background: var(--surface); }
.gm-specs-table th {
    text-align: left; width: 38%; padding: 13px 18px; font-weight: 600;
    color: var(--heading-color); vertical-align: top; border-right: 1px solid var(--border-color);
}
.gm-specs-table td { padding: 13px 18px; color: var(--body-text); vertical-align: top; }
@media (max-width: 549px) { .gm-specs-table th { width: 46%; } }

/* Tabs tiêu đề teal khi active */
.single-product .woocommerce-tabs ul.tabs li.active { border-bottom-color: var(--primary-color); }
.single-product .woocommerce-tabs ul.tabs li.active a { color: var(--primary-color); }

/* "Sản phẩm tương tự" — tiêu đề + card */
.single-product .related > h2,
.single-product .up-sells > h2 { color: var(--heading-color); font-weight: 700; }
.related.products ul.products li.product .box,
.up-sells.products ul.products li.product .box { transition: transform .25s ease, box-shadow .25s ease; }
.related.products ul.products li.product .box:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }

/* ==========================================================================
   SHOP ARCHIVE — Lưới sản phẩm chuyên nghiệp
   ========================================================================== */
.woocommerce ul.products li.product .box {
    border: 1px solid var(--border-color); border-radius: var(--radius);
    overflow: hidden; background: #fff;
}
.woocommerce ul.products li.product .box-image { background: #fff; }
.woocommerce ul.products li.product .box-text { padding: 14px 16px 18px; }
.woocommerce ul.products li.product .product-cat {
    color: var(--text-muted); font-size: .72rem; text-transform: uppercase;
    letter-spacing: .6px; font-weight: 600;
}
.woocommerce ul.products li.product h2.woocommerce-loop-product__title,
.woocommerce ul.products li.product .product-title {
    font-size: .98rem; line-height: 1.4; min-height: 2.8em; color: var(--heading-color);
}
.woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce ul.products li.product .button.product_type_simple {
    border: 2px solid var(--primary-color); background: #fff; color: var(--primary-dark);
}
.woocommerce ul.products li.product:hover .button.add_to_cart_button {
    background: var(--primary-color); color: #fff;
}