:root {
    --bq-red: #C42B2B;
    --bq-green: #1BA785;
    --bq-green-dark: #157a62;
    --bq-navy: #1B3A4B;
    --bq-ivory: #f9f8f6;
    --bq-gray-bg: #f3f5f7;
    --bq-gold: #D4A843;
    --bq-text: #333;
    --bq-light-text: #666;
    --section-padding: 80px 0;
    --font-main: 'Be Vietnam Pro', sans-serif;
}

* { box-sizing: border-box; }

body {
    font-family: var(--font-main);
    color: var(--bq-text);
    background-color: #fff;
    line-height: 1.6;
    font-size: 16px;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 { font-weight: 700; color: var(--bq-navy); line-height: 1.3; text-wrap: balance; }
p { margin-bottom: 1rem; text-wrap: pretty; }
a { text-decoration: none; }
img { max-width: 100%; height: auto; }

/* ===== HEADER / NAVBAR ===== */
header { background: #fff; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.03); }
.admin-bar header {
    top: 32px;
}
@media screen and (max-width: 782px) {
    .admin-bar header {
        top: 46px;
    }
}
.navbar { padding: 6px 0; }
.navbar-brand { font-weight: 700; display: flex; align-items: center; gap: 12px; text-decoration: none !important; flex-shrink: 0; margin-right: 25px; }
.navbar-brand img { height: 42px; }
.navbar-brand .brand-text { display: flex; flex-direction: column; justify-content: center; gap: 7px; }
.navbar-brand strong { font-size: 1.3rem; color: var(--bq-navy); line-height: 1; white-space: nowrap; letter-spacing: 0.5px; }
.navbar-brand .slogan { font-size: 0.5rem; color: var(--bq-light-text); font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; white-space: nowrap; line-height: 1; }

.navbar-nav { gap: 2px; align-items: center; }
.nav-link { 
    color: var(--bq-text) !important; 
    font-weight: 600; 
    font-size: 0.85rem; 
    display: flex; 
    align-items: center; 
    gap: 6px; 
    padding: 10px 12px !important; 
    transition: all 0.3s; 
    white-space: nowrap; 
    position: relative;
    border-radius: 8px;
}
.nav-link i { font-size: 0.95rem; color: var(--bq-navy); transition: color 0.3s; }
.nav-link:hover { 
    color: var(--bq-navy) !important; 
    background: rgba(0, 0, 0, 0.03);
}
.nav-link.active { 
    color: var(--bq-navy) !important; 
    font-weight: 700;
}
.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    width: 80%;
    height: 3px;
    background: var(--bq-red);
    border-radius: 2px 2px 0 0;
}

/* Breathing pulse for diagnostic button */
@keyframes buttonGlowPulse {
    0% { box-shadow: 0 4px 15px rgba(196, 43, 43, 0.35), 0 0 0 0px rgba(196, 43, 43, 0.4); }
    70% { box-shadow: 0 4px 18px rgba(196, 43, 43, 0.45), 0 0 0 7px rgba(196, 43, 43, 0); }
    100% { box-shadow: 0 4px 15px rgba(196, 43, 43, 0.35), 0 0 0 0px rgba(196, 43, 43, 0); }
}

/* Heartbeat icon animation */
@keyframes iconHeartbeat {
    0% { transform: scale(1); }
    14% { transform: scale(1.25); }
    28% { transform: scale(1); }
    42% { transform: scale(1.25); }
    70% { transform: scale(1); }
}

.btn-diagnose { 
    background: linear-gradient(135deg, #C42B2B 0%, #FF3D3D 100%); 
    color: #fff !important; 
    border-radius: 30px; 
    padding: 9px 20px; 
    font-weight: 700; 
    font-size: 0.88rem; 
    border: 1px solid rgba(255, 255, 255, 0.15); 
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); 
    display: inline-flex; 
    align-items: center; 
    gap: 8px; 
    box-shadow: 0 4px 15px rgba(196, 43, 43, 0.3); 
    white-space: nowrap; 
    text-decoration: none; 
    animation: buttonGlowPulse 2.5s infinite;
}
.btn-diagnose i {
    animation: iconHeartbeat 2.5s infinite;
    display: inline-block;
}
.btn-diagnose:hover { 
    background: linear-gradient(135deg, #a82222 0%, #E53935 100%); 
    transform: translateY(-2px) scale(1.03); 
    box-shadow: 0 6px 20px rgba(196, 43, 43, 0.45); 
    color: #fff !important; 
    border-color: rgba(255, 255, 255, 0.3);
}
.btn-diagnose:active {
    transform: translateY(0) scale(0.98);
}

/* Colorized navigation steps & outstanding active styles */
.nav-link[href$="/"] i, .nav-link[href$="/index.php"] i { color: #4A90E2 !important; }
.nav-link[href$="/"]:hover, .nav-link[href$="/"].active { 
    color: #4A90E2 !important; 
}
.nav-link[href$="/"].active {
    background: rgba(74, 144, 226, 0.08) !important;
    box-shadow: inset 0 0 0 1px rgba(74, 144, 226, 0.2);
}
.nav-link[href$="/"].active::after { background: #4A90E2 !important; }

.nav-link[href*="/van-de/"] i { color: #C42B2B !important; }
.nav-link[href*="/van-de/"]:hover, .nav-link[href*="/van-de/"].active { 
    color: #C42B2B !important; 
}
.nav-link[href*="/van-de/"].active {
    background: rgba(196, 43, 43, 0.08) !important;
    box-shadow: inset 0 0 0 1px rgba(196, 43, 43, 0.2);
}
.nav-link[href*="/van-de/"].active::after { background: #C42B2B !important; }

.nav-link[href*="/chan-doan/"] i { color: #D4A843 !important; }
.nav-link[href*="/chan-doan/"]:hover, .nav-link[href*="/chan-doan/"].active { 
    color: #D4A843 !important; 
}
.nav-link[href*="/chan-doan/"].active {
    background: rgba(212, 168, 67, 0.08) !important;
    box-shadow: inset 0 0 0 1px rgba(212, 168, 67, 0.2);
}
.nav-link[href*="/chan-doan/"].active::after { background: #D4A843 !important; }

.nav-link[href*="/giai-phap/"] i { color: #1BA785 !important; }
.nav-link[href*="/giai-phap/"]:hover, .nav-link[href*="/giai-phap/"].active { 
    color: #1BA785 !important; 
}
.nav-link[href*="/giai-phap/"].active {
    background: rgba(27, 167, 133, 0.08) !important;
    box-shadow: inset 0 0 0 1px rgba(27, 167, 133, 0.2);
}
.nav-link[href*="/giai-phap/"].active::after { background: #1BA785 !important; }

.nav-link[href*="/case-study/"] i { color: #2B7C85 !important; }
.nav-link[href*="/case-study/"]:hover, .nav-link[href*="/case-study/"].active { 
    color: #2B7C85 !important; 
}
.nav-link[href*="/case-study/"].active {
    background: rgba(43, 124, 133, 0.08) !important;
    box-shadow: inset 0 0 0 1px rgba(43, 124, 133, 0.2);
}
.nav-link[href*="/case-study/"].active::after { background: #2B7C85 !important; }

.nav-link[href*="/contact/"] i { color: #8E44AD !important; }
.nav-link[href*="/contact/"]:hover, .nav-link[href*="/contact/"].active { 
    color: #8E44AD !important; 
}
.nav-link[href*="/contact/"].active {
    background: rgba(142, 68, 173, 0.08) !important;
    box-shadow: inset 0 0 0 1px rgba(142, 68, 173, 0.2);
}
.nav-link[href*="/contact/"].active::after { background: #8E44AD !important; }

.nav-arrow { color: var(--bq-navy); font-size: 0.8rem; padding: 0 2px; display: inline-flex; align-items: center; justify-content: center; opacity: 0.95; font-weight: 700; }

/* ===== BUTTONS ===== */
.btn-red { background: var(--bq-red); color: #fff; border: 2px solid var(--bq-red); border-radius: 30px; padding: 14px 32px; font-weight: 600; font-size: 1rem; transition: all 0.3s; display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 4px 15px rgba(196, 43, 43, 0.2); text-decoration: none; white-space: nowrap;}
.btn-red:hover { background: #a82222; color: #fff; border-color: #a82222; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(196, 43, 43, 0.3); }
.btn-outline-dark { background: transparent; color: var(--bq-navy); border: 2px solid var(--bq-navy); border-radius: 30px; padding: 14px 32px; font-weight: 600; font-size: 1rem; transition: all 0.3s; display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; white-space: nowrap;}
.btn-outline-dark:hover { background: var(--bq-navy); color: #fff; transform: translateY(-2px); }
.btn-outline-white { background: transparent; color: #fff; border: 2px solid #fff; border-radius: 30px; padding: 14px 32px; font-weight: 600; font-size: 1rem; transition: all 0.3s; display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; white-space: nowrap;}
.btn-outline-white:hover { background: #fff; color: var(--bq-navy); transform: translateY(-2px); }
.link-arrow { color: var(--bq-red); font-weight: 600; font-size: 0.95rem; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: gap 0.3s; }
.link-arrow:hover { gap: 12px; color: #a82222; }

/* ===== SECTIONS GENERAL ===== */
section { padding: 30px 0; }
.section-title { font-size: 2.2rem; margin-bottom: 10px; }
.section-subtitle { color: var(--bq-light-text); font-size: 1.1rem; margin-bottom: 30px; max-width: 700px; margin-left: auto; margin-right: auto; }
.bg-light-gray { background: var(--bq-gray-bg); }
.red-underline { display: inline-block; width: 60px; height: 4px; background: var(--bq-red); margin: 15px auto 0; border-radius: 2px; }
.section-label { display: inline-block; background: rgba(27, 167, 133, 0.1); color: var(--bq-green); padding: 6px 16px; border-radius: 20px; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }

/* ===== HERO (Trang 4 - Home) ===== */
.hero-section { position: relative; padding: 40px 0 45px; overflow: hidden; background: linear-gradient(to bottom, #dce9e5 0%, #ffffff 100%); min-height: 560px; display: flex; align-items: center; }
.hero-bg { position: absolute; top: 0; right: 0; width: 65%; height: 100%; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; opacity: 1; mask-image: linear-gradient(to left, black 40%, transparent 95%); -webkit-mask-image: linear-gradient(to left, black 40%, transparent 95%); }
.hero-content { position: relative; z-index: 2; padding-right: 15px; }
.hero-section h1 { font-size: 2.15rem; margin-bottom: 16px; line-height: 1.15; font-weight: 700; }
.hero-line1 { color: var(--bq-red); font-weight: 700; display: block; font-size: 1em; margin-bottom: 6px; }
.hero-line2 { color: var(--bq-navy); font-weight: 700; font-style: italic; display: block; font-size: 0.9em; }
.hero-section p.lead { font-size: 0.95rem; color: var(--bq-text); margin-bottom: 20px; max-width: 650px; line-height: 1.65; font-weight: 400; }
.hero-quote { background: rgba(21, 122, 98, 0.9); backdrop-filter: blur(8px); border-radius: 14px; padding: 25px 22px; position: relative; box-shadow: 0 8px 30px rgba(0,0,0,0.12); color: #fff; max-width: 280px; margin-left: auto; margin-top: auto; }
.hero-quote .quote-mark { font-size: 2.5rem; color: var(--bq-gold); opacity: 0.5; line-height: 1; position: absolute; top: 12px; left: 15px; font-family: Georgia, serif;}
.hero-quote p { font-style: italic; font-size: 0.95rem; color: #fff; font-weight: 500; margin-bottom: 10px; position: relative; z-index: 1; line-height: 1.5; text-wrap: balance; }
.hero-quote p strong { color: #fff; font-weight: 700;}
.hero-quote .quote-author { font-size: 0.85rem; color: rgba(255,255,255,0.75); border-top: 1px solid rgba(255,255,255,0.2); padding-top: 10px; margin-top: 10px;}
.hero-quote .quote-author strong { color: #fff; font-size: 0.95rem; }
.trust-avatars { display: flex; align-items: center; margin-right: 15px;}
.trust-avatars img { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #fff; margin-left: -15px; object-fit: cover; }
.trust-avatars img:first-child { margin-left: 0; }
.trust-count { font-weight: 600; color: var(--bq-green); font-size: 0.95rem; background: rgba(27, 167, 133, 0.1); padding: 5px 12px; border-radius: 20px;}

/* ===== VALUES BAR ===== */
.values-bar { background: #fff; padding: 30px 0; position: relative; z-index: 3; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border-radius: 20px; margin-top: -40px; }
.value-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; color: var(--bq-navy); }
.value-item .icon-box { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; }
.value-item .icon-box.green { background: rgba(27, 167, 133, 0.1); color: var(--bq-green); }
.value-item .icon-box.red { background: rgba(196, 43, 43, 0.1); color: var(--bq-red); }
.value-item .icon-box.navy { background: rgba(27, 58, 75, 0.1); color: var(--bq-navy); }
.value-item .icon-box.gold { background: rgba(212, 168, 67, 0.1); color: var(--bq-gold); }
.value-item .icon-box.blue { background: rgba(33, 150, 243, 0.1); color: #2196F3; }
.value-item h6 { color: var(--bq-navy); font-size: 0.88rem; font-weight: 700; text-transform: uppercase; margin-bottom: 6px; letter-spacing: 0.5px; line-height: 1.3; text-align: center; }
.value-item p { color: var(--bq-light-text); font-size: 0.78rem; margin: 0; line-height: 1.45; text-align: center; }

/* ===== CARDS (WHO IS IT FOR, PROBLEMS, TOOLS) ===== */
.audience-card { background: #fff; border: 1px solid #eaeaea; border-radius: 16px; padding: 35px 30px; height: 100%; transition: all 0.3s ease; display: flex; flex-direction: column; }
.audience-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.06); border-color: transparent; }

.audience-icon { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin-bottom: 25px; }
.audience-icon.red { background: rgba(196, 43, 43, 0.1); color: var(--bq-red); }
.audience-icon.green { background: rgba(27, 167, 133, 0.1); color: var(--bq-green); }
.audience-icon.gold { background: rgba(212, 168, 67, 0.1); color: var(--bq-gold); }
.audience-icon.navy { background: rgba(27, 58, 75, 0.1); color: var(--bq-navy); }
.audience-card h4 { font-size: 1.2rem; margin-bottom: 20px; line-height: 1.4; font-weight: 700;}
.audience-card ul { list-style: none; padding: 0; margin: 0 0 25px; flex-grow: 1; }
.audience-card ul li { font-size: 0.95rem; color: var(--bq-light-text); margin-bottom: 12px; padding-left: 28px; position: relative; line-height: 1.5; }
.audience-card ul li::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 0; top: 2px; color: var(--bq-red); font-size: 1rem; }

/* Custom checkmark & link colors for audience cards */
.audience-card.card-sme ul li::before { color: var(--bq-green); }
.audience-card.card-sme .link-arrow { color: var(--bq-green-dark); }
.audience-card.card-startup ul li::before { color: var(--bq-red); }
.audience-card.card-startup .link-arrow { color: var(--bq-red); }
.audience-card.card-manager ul li::before { color: var(--bq-gold); }
.audience-card.card-manager .link-arrow { color: var(--bq-gold); }
.audience-card.card-personal ul li::before { color: var(--bq-navy); }
.audience-card.card-personal .link-arrow { color: var(--bq-navy); }


/* PROBLEM CARDS */
.problem-card { display: flex; flex-direction: row; align-items: flex-start; gap: 16px; border-left: 4px solid var(--bq-navy); padding: 24px 20px; border-radius: 16px; box-shadow: 0 5px 15px rgba(0,0,0,0.03); background: #fff; height: 100%; transition: all 0.3s ease; }
.problem-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.06); }
.problem-card.card-strategy { border-left-color: var(--bq-red); }
.problem-card.card-operations { border-left-color: var(--bq-gold); }
.problem-card.card-people { border-left-color: var(--bq-green); }
.problem-card.card-revenue { border-left-color: var(--bq-navy); }

.problem-card.active-tick, .problem-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.06);
}
.problem-card.card-strategy.active-tick, .problem-card.card-strategy:hover { background: rgba(196, 43, 43, 0.03); }
.problem-card.card-operations.active-tick, .problem-card.card-operations:hover { background: rgba(212, 168, 67, 0.03); }
.problem-card.card-people.active-tick, .problem-card.card-people:hover { background: rgba(27, 167, 133, 0.03); }
.problem-card.card-revenue.active-tick, .problem-card.card-revenue:hover { background: rgba(27, 58, 75, 0.03); }

.problem-card .icon-circle { width: 44px; height: 44px; border-radius: 50%; background: var(--bq-navy); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.15rem; flex-shrink: 0; margin-bottom: 0; }
.problem-card-content { display: flex; flex-direction: column; flex-grow: 1; }
.problem-card h4 { font-size: 1.05rem; font-weight: 700; margin-bottom: 6px; color: var(--bq-navy); line-height: 1.35; }
.problem-card p { font-size: 0.85rem; color: var(--bq-light-text); margin-bottom: 10px; line-height: 1.45; }
.problem-card .link-arrow { font-size: 0.85rem; color: var(--bq-navy); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; margin-top: auto; }
.problem-card .link-arrow:hover { color: var(--bq-green); }

/* TOOLS SECTION */
.tool-card { transition: all 0.3s ease; }
.tool-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.06); }

/* ===== COMPASS DIAGRAM ===== */
.compass-card {
    background: #fff;
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 15px 45px rgba(27, 58, 75, 0.08);
    display: inline-block;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
}
.compass-wrap { 
    position: relative; 
    width: 440px; 
    height: 440px; 
    margin: 0 auto; 
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}
.compass-wrap-small {
    width: 380px !important;
    height: 380px !important;
}
.compass-ring,
.compass-axis-x,
.compass-axis-y,
.compass-needle,
.compass-center {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.compass-ring {
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}
.compass-ring.ring-1 { width: 250px; height: 250px; border: 1.5px solid rgba(27, 58, 75, 0.12); }
.compass-ring.ring-2 { width: 220px; height: 220px; border: 1px dashed rgba(27, 58, 75, 0.08); }
.compass-ring.ring-3 { width: 190px; height: 190px; background: #F7EFE3; border: 1px solid rgba(212, 168, 67, 0.2); }
.compass-ring.ring-4 { width: 140px; height: 140px; background: #E8F3F1; border: 1px solid rgba(27, 167, 133, 0.2); }
.compass-ring.ring-5 { width: 104px; height: 104px; background: #ffffff; border: 1.5px solid rgba(27, 58, 75, 0.08); }

.compass-axis-y {
    position: absolute;
    width: 1px;
    height: 250px;
    background: rgba(27, 58, 75, 0.06);
    z-index: 1;
    pointer-events: none;
}
.compass-axis-x {
    position: absolute;
    width: 250px;
    height: 1px;
    background: rgba(27, 58, 75, 0.06);
    z-index: 1;
    pointer-events: none;
}
.compass-needle {
    position: absolute;
    width: 200px;
    height: 200px;
    z-index: 2;
    pointer-events: none;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center center;
    transform: rotate(0deg);
}
.needle-point {
    position: absolute;
    transform-origin: center center;
}
.needle-point.north {
    top: 8px;
    left: calc(50% - 7px);
    width: 14px;
    height: 92px;
    background: var(--bq-red);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    filter: drop-shadow(0 2px 4px rgba(196, 43, 43, 0.2));
}
.needle-point.south {
    bottom: 8px;
    left: calc(50% - 7px);
    width: 14px;
    height: 92px;
    background: #024f52;
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
    filter: drop-shadow(0 -2px 4px rgba(2, 79, 82, 0.2));
}
.needle-point.east {
    right: 8px;
    top: calc(50% - 7px);
    width: 92px;
    height: 14px;
    background: var(--bq-gold);
    clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
    filter: drop-shadow(0 2px 4px rgba(212, 163, 89, 0.2));
}
.needle-point.west {
    left: 8px;
    top: calc(50% - 7px);
    width: 92px;
    height: 14px;
    background: var(--bq-navy);
    clip-path: polygon(100% 0%, 100% 100%, 0% 50%);
    filter: drop-shadow(0 -2px 4px rgba(27, 58, 75, 0.2));
}
.compass-center { 
    position: absolute; 
    width: 86px; 
    height: 86px; 
    border-radius: 50%; 
    background: #ffffff; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    z-index: 3; 
    box-shadow: 0 4px 12px rgba(2, 79, 82, 0.12); 
    border: 2px solid #024f52; 
}

.compass-point { 
    position: absolute; 
    width: 28px;
    height: 28px;
    z-index: 4; 
    transition: all 0.3s ease; 
    cursor: pointer;
}
.compass-point.north { 
    top: 26px; 
    left: 50%; 
    transform: translateX(-50%); 
}
.compass-point.south { 
    bottom: 26px; 
    left: 50%; 
    transform: translateX(-50%); 
}
.compass-point.east { 
    right: 26px; 
    top: 50%; 
    transform: translateY(-50%); 
}
.compass-point.west { 
    left: 26px; 
    top: 50%; 
    transform: translateY(-50%); 
}

.compass-point .dot { 
    width: 28px; 
    height: 28px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: #fff; 
    font-size: 0.8rem; 
    font-weight: 800; 
    box-shadow: 0 3px 8px rgba(0,0,0,0.1); 
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}
.compass-point:hover .dot, .compass-point.active-tick .dot { transform: scale(1.15); box-shadow: 0 5px 12px rgba(0,0,0,0.15); }

.compass-point.north .dot { background: var(--bq-red); }
.compass-point.south .dot { background: #024f52; }
.compass-point.east .dot { background: var(--bq-gold); }
.compass-point.west .dot { background: var(--bq-navy); }

.compass-point .compass-label {
    line-height: 1.3;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--bq-navy);
    transition: color 0.3s ease, transform 0.3s ease;
}
.compass-point:hover .compass-label, .compass-point.active-tick .compass-label {
    transform: scale(1.05);
}
.compass-point.north:hover .compass-label, .compass-point.north.active-tick .compass-label { color: var(--bq-red); }
.compass-point.east:hover .compass-label, .compass-point.east.active-tick .compass-label { color: var(--bq-gold); }
.compass-point.south:hover .compass-label, .compass-point.south.active-tick .compass-label { color: var(--bq-green-dark); }
.compass-point.west:hover .compass-label, .compass-point.west.active-tick .compass-label { color: var(--bq-navy); }

.compass-point.north .compass-label {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    white-space: nowrap;
}
.compass-point.south .compass-label {
    position: absolute;
    top: 36px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    white-space: nowrap;
}
.compass-point.east .compass-label {
    position: absolute;
    left: 36px;
    top: 50%;
    transform: translateY(-50%);
    text-align: left;
    white-space: nowrap;
}
.compass-point.west .compass-label {
    position: absolute;
    right: 36px;
    top: 50%;
    transform: translateY(-50%);
    text-align: right;
    white-space: nowrap;
}

/* Pulsing effects for the active compass point */
@keyframes activePulseRed {
    0% { box-shadow: 0 0 0 0 rgba(196, 43, 43, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(196, 43, 43, 0); }
    100% { box-shadow: 0 0 0 0 rgba(196, 43, 43, 0); }
}
@keyframes activePulseGold {
    0% { box-shadow: 0 0 0 0 rgba(212, 168, 67, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(212, 168, 67, 0); }
    100% { box-shadow: 0 0 0 0 rgba(212, 168, 67, 0); }
}
@keyframes activePulseGreen {
    0% { box-shadow: 0 0 0 0 rgba(2, 79, 82, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(2, 79, 82, 0); }
    100% { box-shadow: 0 0 0 0 rgba(2, 79, 82, 0); }
}
@keyframes activePulseNavy {
    0% { box-shadow: 0 0 0 0 rgba(27, 58, 75, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(27, 58, 75, 0); }
    100% { box-shadow: 0 0 0 0 rgba(27, 58, 75, 0); }
}

.compass-point.active-tick.north .dot { animation: activePulseRed 2s infinite; }
.compass-point.active-tick.east .dot { animation: activePulseGold 2s infinite; }
.compass-point.active-tick.south .dot { animation: activePulseGreen 2s infinite; }
.compass-point.active-tick.west .dot { animation: activePulseNavy 2s infinite; }


/* ===== DIAGNOSIS BANNER ===== */
.diagnosis-banner { background: var(--bq-green-dark); color: #fff; border-radius: 24px; padding: 45px 50px; position: relative; overflow: hidden; box-shadow: 0 15px 35px rgba(21, 122, 98, 0.15); margin-top: -60px; }
.diagnosis-banner::after { content:''; position:absolute; bottom:-50px; right:-50px; width:200px; height:200px; background:rgba(255,255,255,0.05); border-radius:50%; }
.btn-diagnose-white { background: #fff; color: var(--bq-green-dark) !important; border-radius: 30px; padding: 12px 28px; font-weight: 700; font-size: 0.95rem; border: none; transition: all 0.3s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); text-decoration: none; width: fit-content; }
.btn-diagnose-white:hover { background: var(--bq-gold); color: #fff !important; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(212, 168, 67, 0.3); }
.diagnosis-banner h3 { color: #fff; font-size: 1.8rem; margin-bottom: 15px; }
.diagnosis-banner p { color: rgba(255,255,255,0.9); font-size: 1rem; line-height: 1.6; margin-bottom: 30px; }
.diagnosis-step { display: flex; align-items: center; gap: 15px; }
.diagnosis-step .step-icon { width: 55px; height: 55px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.diagnosis-step .step-icon.navy { background: var(--bq-navy); color: #fff; }
.diagnosis-step .step-icon.red { background: var(--bq-red); color: #fff; }
.diagnosis-step .step-icon.gold { background: var(--bq-gold); color: #fff; }
.diagnosis-step .step-icon.step-outline-white { border: 2px solid #fff; background: transparent !important; color: #fff !important; }
.diagnosis-step .step-icon.step-solid-red { background: var(--bq-red) !important; color: #fff !important; }
.diagnosis-step .step-icon.step-solid-gold { background: var(--bq-gold) !important; color: #fff !important; }
.step-arrow { color: rgba(255,255,255,0.4); font-size: 1.5rem; padding: 0 10px; }

/* ===== SOLUTIONS (Trang 3) ===== */
.solution-card { background: #fff; border: 1px solid #eaeaea; border-radius: 20px; padding: 40px; height: 100%; display: flex; flex-direction: column; transition: transform 0.3s, box-shadow 0.3s; }
.solution-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.08); border-color: transparent; }
.solution-card .sol-icon { width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; flex-shrink: 0; }
.solution-card .sol-icon.green { background: var(--bq-green-dark); color: #fff; }
.solution-card .sol-icon.red { background: var(--bq-red); color: #fff; }
.solution-card .sol-icon.navy { background: var(--bq-navy); color: #fff; }
.solution-card h4 { font-size: 1.25rem; text-transform: uppercase; font-weight: 800; margin-bottom: 5px; }
.solution-card .subtitle { font-weight: 600; color: var(--bq-navy); font-size: 1.05rem; margin-bottom: 15px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.tag { display: inline-block; padding: 6px 14px; border-radius: 25px; font-size: 0.8rem; font-weight: 600; border: 1px solid transparent; background: #fff; }
.tag.green { color: var(--bq-green-dark); background: rgba(21, 122, 98, 0.1); }
.tag.red { color: var(--bq-red); background: rgba(196, 43, 43, 0.1); }
.tag.navy { color: var(--bq-navy); background: rgba(27, 58, 75, 0.1); }
.solution-card ul { margin-bottom: 30px; padding: 0; }
.solution-card ul li { margin-bottom: 12px; font-size: 0.95rem; display: flex; align-items: flex-start; gap: 10px; color: var(--bq-navy); font-weight: 500;}
.solution-card ul li i { margin-top: 4px; font-size: 1rem; flex-shrink: 0; }
.stat-bar { border-radius: 16px; padding: 20px; display: flex; align-items: center; gap: 15px; margin-top: auto; justify-content: space-between; flex-wrap: wrap; }
.stat-bar.green { background: var(--bq-green-dark); color: #fff; }
.stat-bar.red { background: var(--bq-red); color: #fff; }
.stat-bar.navy { background: var(--bq-navy); color: #fff; }
.stat-bar > div { flex: 1; text-align: left; border-right: 1px solid rgba(255,255,255,0.2); padding-right: 10px; display: flex; align-items: center; gap: 10px;}
.stat-bar > div i { font-size: 1.8rem; opacity: 0.8;}
.stat-bar > div:last-of-type { border-right: none; padding-right: 0; }
.stat-bar .stat-num { font-size: 1.4rem; font-weight: 800; line-height: 1.2; display: block; margin: 0; }
.stat-bar .stat-label { font-size: 0.75rem; opacity: 0.9; line-height: 1.2; display: block; }
.stat-bar .btn-white { background: #fff; color: var(--bq-navy); padding: 10px 20px; border-radius: 30px; font-size: 0.9rem; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; margin-top: 15px; width: 100%; justify-content: center; transition: all 0.3s;}
.stat-bar .btn-white:hover { background: #f8f9fa; transform: translateY(-2px);}

/* ===== PROCESS STEPS ===== */
.process-step { text-align: center; padding: 20px; position: relative;}
.process-step .step-num { width: 60px; height: 60px; border-radius: 50%; background: var(--bq-green); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.3rem; margin: 0 auto 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); border: 4px solid #fff; position: relative; z-index: 2;}
.process-step h5 { font-size: 1.15rem; margin-bottom: 10px; color: var(--bq-navy); font-weight: 700;}
.process-step p { font-size: 0.95rem; color: var(--bq-light-text); }
.process-arrow { position: absolute; top: 45px; right: -20px; font-size: 1.5rem; color: #ccc; z-index: 1;}

/* ===== HIGHLIGHTS ROW ===== */
.highlights-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}
.highlight-item {
    display: flex;
    align-items: center;
    gap: 15px;
    max-width: 250px;
}
.highlight-item .icon-circle-hl {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #eaeaea;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.highlight-item.hl-1 .icon-circle-hl { background: rgba(27, 58, 75, 0.1); color: var(--bq-navy); }
.highlight-item.hl-2 .icon-circle-hl { background: rgba(196, 43, 43, 0.1); color: var(--bq-red); }
.highlight-item.hl-3 .icon-circle-hl { background: rgba(212, 168, 67, 0.1); color: var(--bq-gold); }
.highlight-item.hl-4 .icon-circle-hl { background: rgba(27, 167, 133, 0.1); color: var(--bq-green-dark); }
.highlight-item h6 {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
    color: var(--bq-navy);
}
.highlight-item p {
    font-size: 0.8rem;
    color: var(--bq-light-text);
    margin: 0;
    line-height: 1.3;
}

.filter-tabs-container {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 25px;
    background: #fff;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid rgba(27, 58, 75, 0.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01);
}
.filter-tab-btn {
    border: 1px solid transparent;
    background: transparent;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bq-light-text);
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}
.filter-tab-btn:hover {
    background: rgba(27, 58, 75, 0.04);
    color: var(--bq-navy);
}
.filter-tab-btn.active {
    background: #0A2F27;
    color: #fff;
    border-color: #0A2F27;
    box-shadow: 0 4px 12px rgba(10, 47, 39, 0.15);
}

/* ===== PREMIUM CASE STUDY CARD (MOCKUP STYLE) ===== */
.case-card-mockup {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s, box-shadow 0.3s;
}
.case-card-mockup:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.06);
}
.case-card-mockup .card-img-wrap {
    height: 200px;
    overflow: hidden;
    position: relative;
}
.case-card-mockup .card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.case-card-mockup .card-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    z-index: 2;
}
.case-card-mockup .card-badge.green { background: var(--bq-green-dark); }
.case-card-mockup .card-badge.red { background: var(--bq-red); }
.case-card-mockup .card-badge.blue { background: #007bff; }

.case-card-mockup .card-content-wrap {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.case-card-mockup .card-logo-title-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}
.case-card-mockup .card-logo-box {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #fff;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.case-card-mockup .card-logo-box.green { background: var(--bq-green-dark); }
.case-card-mockup .card-logo-box.red { background: var(--bq-red); }
.case-card-mockup .card-logo-box.blue { background: #007bff; }

.case-card-mockup .card-title-text {
    line-height: 1.3;
}
.case-card-mockup .card-title-text h5 {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--bq-navy);
    margin: 0 0 3px 0;
}
.case-card-mockup .card-title-text span {
    font-size: 0.8rem;
    color: var(--bq-light-text);
}

.case-card-mockup .problem-solution-section {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 25px;
}
.case-card-mockup .ps-item h6 {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--bq-navy);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.case-card-mockup .ps-item p {
    font-size: 0.88rem;
    color: var(--bq-light-text);
    margin: 0;
    line-height: 1.45;
}

.case-card-mockup .metrics-box {
    border-radius: 12px;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    margin-top: auto;
    margin-bottom: 20px;
}
.case-card-mockup .metrics-box.green { background: rgba(21, 122, 98, 0.05); }
.case-card-mockup .metrics-box.red { background: rgba(196, 43, 43, 0.05); }
.case-card-mockup .metrics-box.blue { background: rgba(0, 123, 255, 0.05); }

.case-card-mockup .metric-small-item {
    text-align: center;
    flex: 1;
}
.case-card-mockup .metric-small-item:not(:last-child) {
    border-right: 1px solid rgba(0,0,0,0.06);
}
.case-card-mockup .metric-small-item h4 {
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0 0 3px 0;
}
.case-card-mockup .metric-small-item.green h4 { color: var(--bq-green-dark); }
.case-card-mockup .metric-small-item.red h4 { color: var(--bq-red); }
.case-card-mockup .metric-small-item.blue h4 { color: #007bff; }

.case-card-mockup .metric-small-item p {
    font-size: 0.72rem;
    color: var(--bq-light-text);
    margin: 0;
    line-height: 1.2;
}

.case-card-mockup .card-btn-action {
    display: block;
    width: 100%;
    padding: 10px;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bq-light-text);
    transition: all 0.3s;
    margin-top: 15px;
}
.case-card-mockup .card-btn-action:hover {
    background: #f8f9fa;
    color: var(--bq-navy);
    border-color: var(--bq-navy);
}

/* ===== SIDEBAR STYLES ===== */
.sidebar-wrapper {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.sidebar-card-base {
    border-radius: 16px;
    padding: 30px;
}
.sidebar-testimonial-card {
    background: #0d4c3f; /* Dark forest green */
    color: #fff;
    position: relative;
    overflow: hidden;
}
.sidebar-testimonial-card .quote-mark-icon {
    font-size: 4rem;
    color: var(--bq-gold);
    opacity: 0.3;
    line-height: 1;
    margin-bottom: -15px;
    font-family: Georgia, serif;
}
.sidebar-testimonial-card p {
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.6;
    margin-bottom: 25px;
    position: relative;
    z-index: 1;
    color: #fff;
}
.sidebar-testimonial-card .author-row {
    display: flex;
    align-items: center;
    gap: 15px;
}
.sidebar-testimonial-card .author-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}
.sidebar-testimonial-card .author-info h6 {
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0;
}
.sidebar-testimonial-card .author-info .stars {
    color: var(--bq-gold);
    font-size: 0.75rem;
    margin-top: 2px;
}
.sidebar-testimonial-card .carousel-indicators {
    position: static;
    margin: 25px 0 0 0;
    justify-content: flex-start;
    gap: 6px;
}
.sidebar-testimonial-card .carousel-indicators [data-bs-target] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.3);
    border: none;
    opacity: 1;
    margin: 0;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.3s;
}
.sidebar-testimonial-card .carousel-indicators .active {
    background-color: var(--bq-red);
}

.sidebar-results-card {
    background: #fff;
    border: 1px solid #eaeaea;
}
.sidebar-results-card h5 {
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: 20px;
    color: var(--bq-navy);
}
.sidebar-results-card .result-stats-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.sidebar-results-card .stat-list-item {
    display: flex;
    align-items: center;
    gap: 15px;
}
.sidebar-results-card .stat-list-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.sidebar-results-card .stat-list-item:nth-child(1) .stat-list-icon { background: rgba(27, 167, 133, 0.1); color: var(--bq-green-dark); }
.sidebar-results-card .stat-list-item:nth-child(2) .stat-list-icon { background: rgba(196, 43, 43, 0.1); color: var(--bq-red); }
.sidebar-results-card .stat-list-item:nth-child(3) .stat-list-icon { background: rgba(212, 168, 67, 0.1); color: var(--bq-gold); }
.sidebar-results-card .stat-list-item:nth-child(4) .stat-list-icon { background: rgba(27, 58, 75, 0.1); color: var(--bq-navy); }

.sidebar-results-card .stat-list-text h6 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--bq-navy);
    margin: 0;
}
.sidebar-results-card .stat-list-text p {
    font-size: 0.8rem;
    color: var(--bq-light-text);
    margin: 0;
}

.sidebar-cta-card {
    background: #ebf7f5;
    text-align: center;
}
.sidebar-cta-card .cta-icon {
    font-size: 2.2rem;
    color: var(--bq-green-dark);
    margin-bottom: 15px;
}
.sidebar-cta-card p {
    font-size: 1rem;
    font-weight: 700;
    color: var(--bq-navy);
    margin-bottom: 20px;
    line-height: 1.4;
}
.sidebar-cta-card .btn-sidebar-cta {
    display: inline-block;
    background: var(--bq-red);
    color: #fff;
    padding: 10px 24px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s;
    text-decoration: none;
}
.sidebar-cta-card .btn-sidebar-cta:hover {
    background: #a82222;
    transform: translateY(-2px);
    color: #fff;
}

/* ===== BOTTOM COMPASS BANNER ===== */
.bottom-banner-teal {
    background: #0A221C;
    border-radius: 16px;
    padding: 50px;
    color: #fff;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 30px;
}
.bottom-banner-teal::after {
    content: '';
    position: absolute;
    bottom: -60px;
    right: -60px;
    width: 220px;
    height: 220px;
    background: rgba(255,255,255,0.02);
    border-radius: 50%;
}
.bottom-banner-teal .banner-compass-wrap {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}
.bottom-banner-teal .banner-compass-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 15px rgba(0,0,0,0.3));
}
.bottom-banner-teal .banner-content {
    flex-grow: 1;
}
.bottom-banner-teal h2 {
    color: #fff;
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 10px;
}
.bottom-banner-teal p {
    color: rgba(255,255,255,0.85);
    font-size: 1rem;
    margin-bottom: 0;
}
.bottom-banner-teal .banner-ctas {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
    flex-shrink: 0;
}
@media (max-width: 991.98px) {
    .bottom-banner-teal {
        flex-direction: column;
        align-items: flex-start;
        padding: 35px 25px;
        gap: 20px;
    }
    .bottom-banner-teal .banner-compass-wrap {
        display: none;
    }
    .bottom-banner-teal .banner-ctas {
        width: 100%;
        margin-top: 10px;
    }
}


/* ===== CHẨN ĐOÁN PAGE (Trang 2) ===== */
.diagnosis-header { background: #fff; padding: 60px 0 40px; }
.diagnosis-header .step-badge { display: inline-block; background: rgba(27, 167, 133, 0.1); color: var(--bq-green-dark); padding: 6px 16px; border-radius: 20px; font-size: 0.85rem; font-weight: 700; margin-bottom: 20px; letter-spacing: 1px; }
.diagnosis-header h1 { color: var(--bq-navy); font-size: 2.8rem; margin-bottom: 15px; }
.diagnosis-header h4 { color: var(--bq-navy); margin-bottom: 20px; font-weight: 600; }
.diagnosis-header p { font-size: 1.1rem; color: var(--bq-light-text); max-width: 600px; margin-bottom: 30px; }
.benefit-item { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; color: var(--bq-navy); font-weight: 500;}
.benefit-item i { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; }
.benefit-item .icon-shield { background: rgba(27, 167, 133, 0.1); color: var(--bq-green-dark); }
.benefit-item .icon-clock { background: rgba(27, 58, 75, 0.1); color: var(--bq-navy); }
.benefit-item .icon-bulb { background: rgba(212, 168, 67, 0.1); color: var(--bq-gold); }

.question-card { background: #fff; border: 1px solid #eaeaea; border-radius: 16px; padding: 25px 25px 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.02); margin-bottom: 20px; }
.question-progress { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; }
.question-progress .progress-text { font-weight: 700; color: var(--bq-navy); font-size: 1.1rem; white-space: nowrap; }
.question-progress .progress-bar-wrap { flex-grow: 1; height: 8px; background: #eee; border-radius: 4px; overflow: hidden; }
.question-progress .progress-bar-inner { height: 100%; background: var(--bq-green-dark); width: 10%; border-radius: 4px; }
.question-title { font-size: 1.4rem; margin-bottom: 30px; color: var(--bq-green-dark); font-weight: 700;}

.answer-option { border: 2px solid #eaeaea; border-radius: 12px; padding: 25px 20px; text-align: center; cursor: pointer; transition: all 0.3s; height: 100%; display: flex; flex-direction: column; align-items: center; background: #fafafa;}
.answer-option:hover { border-color: rgba(27, 167, 133, 0.5); background: #fff; transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.05);}
.answer-option.selected { border-color: var(--bq-green-dark); background: rgba(27, 167, 133, 0.05); }
.answer-option .opt-icon { font-size: 2.2rem; margin-bottom: 15px; color: var(--bq-red); }
.answer-option h5 { font-size: 1.05rem; margin-bottom: 10px; font-weight: 700; color: var(--bq-navy);}
.answer-option p { font-size: 0.85rem; color: var(--bq-light-text); margin-bottom: 20px; flex-grow: 1; }
.answer-option .radio-circle { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #ccc; display: inline-flex; align-items: center; justify-content: center; margin-top: auto; background: #fff;}
.answer-option.selected .radio-circle { border-color: var(--bq-green-dark); }
.answer-option.selected .radio-circle::after { content: ''; width: 10px; height: 10px; background: var(--bq-green-dark); border-radius: 50%; }

/* Custom colors for answer options */
.ans-1 .opt-icon { color: var(--bq-red); }
.ans-2 .opt-icon { color: var(--bq-gold); }
.ans-3 .opt-icon { color: var(--bq-green-dark); }
.ans-4 .opt-icon { color: #2196F3; }
.ans-5 .opt-icon { color: var(--bq-navy); }

.info-note { background: #f8f9fa; border-radius: 8px; padding: 15px 20px; display: flex; align-items: center; gap: 15px; color: var(--bq-light-text); font-size: 0.85rem; border: 1px solid #eaeaea;}
.info-note i { font-size: 1.2rem; color: var(--bq-navy); }

.diagnosis-sidebar { background:#f8f9fa; border:1px solid #eaeaea; border-radius:16px; padding:25px; }
.diagnosis-sidebar h5 { font-size: 1.1rem; color: var(--bq-green-dark); margin-bottom: 20px; font-weight: 700;}
.ds-item { background:#fff; border:1px solid #eaeaea; border-radius:12px; padding:15px; margin-bottom:12px; display: flex; align-items: center; gap: 15px;}
.ds-item.active { border-left: 4px solid var(--bq-green-dark); box-shadow: 0 5px 15px rgba(0,0,0,0.03);}
.ds-item i { font-size: 1.8rem; }
.ds-item.active i { color: var(--bq-green-dark); }
.ds-item:not(.active) i { color: var(--bq-gold); opacity: 0.6;}
.ds-item:last-of-type:not(.active) i { color: var(--bq-navy); }
.ds-item h6 { font-size: 0.95rem; margin-bottom: 2px; color: var(--bq-navy);}
.ds-item p { font-size: 0.8rem; color: var(--bq-light-text); margin: 0; line-height: 1.3;}

/* ===== CONTACT & CTA ===== */
.cta-banner { background: var(--bq-navy); border-radius: 20px; padding: 60px; position: relative; overflow: hidden; }
.cta-banner::before { content: ''; position: absolute; right: -50px; bottom: -50px; width: 250px; height: 250px; background: rgba(255,255,255,0.03); border-radius: 50%; }
.cta-banner h2 { color: #fff; font-size: 2.2rem; margin-bottom: 15px; font-weight: 700;}
.cta-banner p { color: rgba(255,255,255,0.8); font-size: 1.1rem; }

.contact-info-card { display: flex; align-items: center; gap: 20px; padding: 25px; background: #fff; border-radius: 16px; margin-bottom: 20px; box-shadow: 0 5px 20px rgba(0,0,0,0.03); }
.contact-info-card .ci-icon { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.5rem; }
.contact-info-card .ci-icon.navy { background: rgba(27, 58, 75, 0.1); color: var(--bq-navy); }
.contact-info-card .ci-icon.red { background: rgba(196, 43, 43, 0.1); color: var(--bq-red); }
.contact-info-card .ci-icon.gold { background: rgba(212, 168, 67, 0.1); color: var(--bq-gold); }
.contact-info-card .ci-icon.green { background: rgba(27, 167, 133, 0.1); color: var(--bq-green-dark); }
.contact-info-card h6 { font-size: 1rem; margin-bottom: 5px; color: var(--bq-navy); font-weight: 600;}
.contact-info-card p { font-size: 1.1rem; color: var(--bq-navy); margin: 0; font-weight: 700;}
.contact-info-card small { font-size: 0.8rem; color: var(--bq-light-text); display: block; margin-top: 2px;}

.contact-form { background: var(--bq-green-dark); border-radius: 20px; padding: 40px; color: #fff; box-shadow: 0 15px 40px rgba(21, 122, 98, 0.2); }
.contact-form h3 { font-size: 1.8rem; margin-bottom: 10px; color: #fff; font-weight: 700;}
.contact-form p { color: rgba(255,255,255,0.9); margin-bottom: 30px; font-size: 1rem; }
.contact-form .form-control, .contact-form .form-select { border-radius: 8px; padding: 15px 20px; border: none; font-size: 1rem; background: #fff; color: var(--bq-navy);}
.contact-form .form-control:focus, .contact-form .form-select:focus { box-shadow: 0 0 0 4px rgba(255,255,255,0.2); }
.contact-form .input-group-text { background: #fff; border: none; color: var(--bq-light-text); border-radius: 8px 0 0 8px; padding-left: 20px;}
.contact-form .form-control.with-icon, .contact-form .form-select.with-icon { border-radius: 0 8px 8px 0; padding-left: 10px;}
.btn-submit { background: var(--bq-red); color: #fff; width: 100%; border: none; padding: 16px; border-radius: 8px; font-weight: 600; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; gap: 10px; transition: all 0.3s; }
.btn-submit:hover { background: #a82222; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(196,43,43,0.3); }

/* ===== FOOTER ===== */
footer { background: #1a2a35; color: #fff; padding: 35px 0 0; }
.footer-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 40px; padding-bottom: 30px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.footer-logo img { height: 40px; filter: brightness(0) invert(1);}
.footer-logo strong { font-size: 1.4rem; color: #fff; line-height: 1; display: block; margin-bottom: 5px; letter-spacing: 0.5px; }
.footer-logo .slogan { font-size: 0.6rem; color: rgba(255,255,255,0.6); font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; display: block; }
.footer-desc { color: rgba(255,255,255,0.65); font-size: 0.9rem; line-height: 1.7; max-width: 100%; margin: 0; }

.footer-badges { display: flex; gap: 30px; flex-wrap: wrap;}
.footer-badge { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,0.9); font-size: 0.9rem; font-weight: 500;}
.footer-badge i { font-size: 1.5rem; }
.footer-badge .icon-shield { color: var(--bq-green); }
.footer-badge .icon-hand { color: var(--bq-gold); }
.footer-badge .icon-chart { color: var(--bq-red); }

.footer-social-inline { display: flex; gap: 8px; align-items: center; margin-top: 10px;}
.footer-social-inline a { display: flex; width: 32px; height: 32px; border-radius: 50%; background: var(--bq-red); color: #fff; align-items: center; justify-content: center; transition: all 0.3s; font-size: 0.9rem; text-decoration: none;}
.footer-social-inline a:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(196,43,43,0.3); }
.footer-social-inline a.zalo-icon { font-size: 0.58rem; font-weight: 800; letter-spacing: -0.2px; background: var(--bq-red); text-transform: uppercase; }

.footer-bottom { background: #132029; padding: 10px 0; margin-top: 20px;}
.footer-bottom-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}
.footer-bottom-links a { color: rgba(255,255,255,0.6); text-decoration: none; font-size: 0.9rem; margin-left: 20px; transition: color 0.3s; }
.footer-bottom-links a:hover { color: #fff; }
.footer-bottom-msg { font-family: 'Dancing Script', cursive; font-size: 1.4rem; color: var(--bq-gold); margin: 0;}

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
    .navbar-brand strong { font-size: 1.1rem; }
    .navbar-brand .slogan { font-size: 0.45rem; }
    .nav-link { font-size: 0.8rem; padding: 8px 6px !important; }
    .nav-link i { font-size: 0.85rem; }
    .btn-diagnose { font-size: 0.8rem; padding: 7px 14px; }
    .nav-arrow { font-size: 0.6rem; }
}
@media (max-width: 991px) {
    .hero-section h1 { font-size: 2.8rem; }
    .hero-bg { width: 100%; opacity: 0.1; }
    .hero-content { padding-right: 0; }
    section { padding: 35px 0; }
    .navbar-collapse { background: #fff; padding: 20px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); position: absolute; top: 100%; left: 0; right: 0; margin: 0 15px; z-index: 1000; }
    .footer-top { flex-direction: column; align-items: flex-start; gap: 30px; }
    .footer-social-wrap { text-align: left; }
    .footer-social { justify-content: flex-start; }
}
@media (max-width: 767px) {
    .hero-section h1 { font-size: 2.2rem; }
    .section-title { font-size: 1.8rem; }
    .values-bar .row > div { margin-bottom: 20px; }
     .compass-card { padding: 20px 10px; max-width: 100%; border-radius: 20px; box-shadow: 0 10px 30px rgba(27, 58, 75, 0.05); }
     .compass-wrap.compass-wrap-small { transform: scale(0.78); transform-origin: center center; width: 380px; height: 380px; margin: -35px auto; display: flex; }
     .problem-card { padding: 16px 12px; gap: 12px; }
     .problem-card .icon-circle { width: 36px; height: 36px; font-size: 1rem; }
     .problem-card h4 { font-size: 0.95rem; }
     .problem-card p { font-size: 0.8rem; }
     .diagnosis-banner { padding: 30px 20px; margin-top: -30px; }
     @media (max-width: 360px) {
         .compass-wrap.compass-wrap-small { transform: scale(0.68); margin: -55px auto; }
      }
     .stat-bar { flex-direction: column; gap: 20px; text-align: center; }
     .stat-bar > div { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.2); padding-right: 0; padding-bottom: 15px; width: 100%; justify-content: center; }
     .stat-bar > div:last-of-type { border-bottom: none; padding-bottom: 0; }
     .btn-diagnose { width: 100%; justify-content: center; margin-top: 10px; }
     .footer-bottom-inner { flex-direction: column; gap: 15px; text-align: center; }
     .footer-bottom-links { margin-top: 10px; }
     .footer-bottom-links a { margin: 0 10px; }
 }
 
 /* ===== SOLUTIONS PAGE RECONSTRUCTION ===== */
 .solution-header {
     background: #fff;
     padding: 40px 0 30px;
     border-bottom: 1px solid #f0f0f0;
 }
 .solution-group-section {
     padding: 25px 0;
 }
 .solution-group-section.mentoring-bg {
     background: var(--bq-ivory);
 }
 .solution-group-section.training-bg {
     background: #fff;
 }
 .solution-group-section.toolkits-bg {
     background: var(--bq-gray-bg);
 }
 .solution-intro-quote {
     background: #fff;
     border-left: 5px solid var(--bq-green);
     padding: 25px 30px;
     border-radius: 4px 16px 16px 4px;
     box-shadow: 0 5px 15px rgba(0,0,0,0.02);
     font-size: 1.15rem;
     font-weight: 500;
     color: var(--bq-navy);
     line-height: 1.6;
     margin-bottom: 40px;
 }
 .solution-intro-quote strong {
     color: var(--bq-green-dark);
 }
 .product-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
     gap: 30px;
 }
 .solution-detail-card {
     background: #fff;
     border: 1px solid #eaeaea;
     border-radius: 16px;
     padding: 35px 30px;
     height: 100%;
     display: flex;
     flex-direction: column;
     transition: all 0.3s ease;
     box-shadow: 0 5px 15px rgba(0,0,0,0.01);
 }
 .solution-detail-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 35px rgba(0,0,0,0.06);
     border-color: transparent;
 }
 .solution-detail-card .card-header-inline {
      display: flex;
      align-items: center;
      gap: 15px;
      margin-bottom: 15px;
      width: 100%;
  }
  .solution-detail-card .card-header-inline h4,
  .solution-detail-card .card-header-inline h5 {
      margin-bottom: 0 !important;
      line-height: 1.3;
      font-weight: 800;
      color: var(--bq-navy);
  }
  .solution-detail-card .card-header-inline h4 {
      font-size: 1.2rem;
  }
  .solution-detail-card .card-header-inline h5 {
      font-size: 1.05rem;
  }
  .solution-detail-card .card-icon {
      width: 50px;
      height: 50px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.35rem;
      margin-bottom: 0 !important;
      flex-shrink: 0;
  }
  .solution-detail-card .card-icon.green {
      background: rgba(27, 167, 133, 0.1);
      color: var(--bq-green-dark);
  }
  .solution-detail-card .card-icon.red {
      background: rgba(196, 43, 43, 0.1);
      color: var(--bq-red);
  }
  .solution-detail-card .card-icon.navy {
      background: rgba(27, 58, 75, 0.1);
      color: var(--bq-navy);
  }
 .solution-detail-card .tag-badge {
     display: inline-block;
     padding: 4px 12px;
     border-radius: 20px;
     font-size: 0.75rem;
     font-weight: 700;
     text-transform: uppercase;
     margin-bottom: 20px;
 }
 .solution-detail-card .tag-badge.green {
     background: rgba(27, 167, 133, 0.1);
     color: var(--bq-green-dark);
 }
 .solution-detail-card .tag-badge.red {
     background: rgba(196, 43, 43, 0.1);
     color: var(--bq-red);
 }
 .solution-detail-card .tag-badge.navy {
     background: rgba(27, 58, 75, 0.1);
     color: var(--bq-navy);
 }
 .solution-detail-card .meta-item {
     margin-bottom: 15px;
     font-size: 0.9rem;
     line-height: 1.5;
 }
 .solution-detail-card .meta-item strong {
     display: block;
     color: var(--bq-navy);
     font-size: 0.85rem;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     margin-bottom: 4px;
 }
 .solution-detail-card .meta-item p {
     color: var(--bq-light-text);
     margin: 0;
 }
 .solution-detail-card .meta-item.highlight-box {
     background: rgba(27, 167, 133, 0.03);
     border-left: 3px solid var(--bq-green);
     padding: 10px 15px;
     border-radius: 0 8px 8px 0;
 }
 .solution-detail-card .meta-item.highlight-box.red {
     background: rgba(196, 43, 43, 0.03);
     border-left-color: var(--bq-red);
 }
 .solution-detail-card .meta-item.highlight-box.navy {
     background: rgba(27, 58, 75, 0.03);
     border-left-color: var(--bq-navy);
 }
 .solution-detail-card .btn-card-cta {
     margin-top: auto;
     padding: 12px;
     border-radius: 8px;
     font-weight: 700;
     font-size: 0.9rem;
     text-align: center;
     transition: all 0.3s;
     display: block;
     text-decoration: none;
 }
 .solution-detail-card .btn-card-cta.green {
     background: var(--bq-green-dark);
     color: #fff;
 }
 .solution-detail-card .btn-card-cta.green:hover {
     background: var(--bq-navy);
     color: #fff;
 }
 .solution-detail-card .btn-card-cta.red {
     background: var(--bq-red);
     color: #fff;
 }
 .solution-detail-card .btn-card-cta.red:hover {
     background: var(--bq-navy);
     color: #fff;
 }
 .solution-detail-card .btn-card-cta.navy {
     background: var(--bq-navy);
     color: #fff;
 }
 .solution-detail-card .btn-card-cta.navy:hover {
     background: var(--bq-green-dark);
     color: #fff;
 }
 .training-pain-points {
      background: #fff;
      border: 1px solid #eaeaea;
      border-radius: 16px;
      padding: 35px 30px;
      margin-bottom: 30px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.01);
      display: flex;
      flex-direction: column;
      height: 100%;
  }
  .training-pain-points h5 {
      color: var(--bq-red);
      font-weight: 700;
      margin-bottom: 20px;
  }
  .training-pain-points ul {
      list-style: none;
      padding: 0;
      margin: 0 0 25px 0;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
  }
  .training-pain-points ul li {
      padding-left: 28px;
      position: relative;
      margin-bottom: 15px;
      font-size: 0.95rem;
      color: var(--bq-light-text);
      line-height: 1.55;
  }
 .training-pain-points ul li::before {
     content: "\f06a";
     font-family: "Font Awesome 6 Free";
     font-weight: 900;
     position: absolute;
     left: 0;
     top: 2px;
     color: var(--bq-red);
 }

/* ===== CONTACT PAGE RECONSTRUCTION (MOCKUP STYLE) ===== */
.contact-tag-label {
    display: inline-block;
    background: #0d4c3f;
    color: #fff;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}
.contact-values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
    gap: 20px;
    margin: 35px 0;
}
.contact-value-box {
    text-align: center;
}
.contact-value-box .val-icon-wrap {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin: 0 auto 12px;
}
.contact-value-box:nth-child(1) .val-icon-wrap { background: rgba(27, 58, 75, 0.1); color: var(--bq-navy); }
.contact-value-box:nth-child(2) .val-icon-wrap { background: rgba(196, 43, 43, 0.1); color: var(--bq-red); }
.contact-value-box:nth-child(3) .val-icon-wrap { background: rgba(212, 168, 67, 0.1); color: var(--bq-gold); }
.contact-value-box:nth-child(4) .val-icon-wrap { background: rgba(27, 167, 133, 0.1); color: var(--bq-green-dark); }

.contact-value-box h6 {
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 5px;
    color: var(--bq-navy);
}
.contact-value-box p {
    font-size: 0.78rem;
    color: var(--bq-light-text);
    margin: 0;
    line-height: 1.3;
}

.contact-details-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
@media (max-width: 991.98px) {
    .contact-details-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 576px) {
    .contact-details-grid {
        grid-template-columns: 1fr;
    }
}
.contact-detail-card-mockup {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.01);
}
.contact-detail-card-mockup .c-icon-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}
.contact-detail-card-mockup:nth-child(1) .c-icon-circle { background: rgba(27, 58, 75, 0.1); color: var(--bq-navy); }
.contact-detail-card-mockup:nth-child(2) .c-icon-circle { background: rgba(196, 43, 43, 0.1); color: var(--bq-red); }
.contact-detail-card-mockup:nth-child(3) .c-icon-circle { background: rgba(212, 168, 67, 0.1); color: var(--bq-gold); }
.contact-detail-card-mockup:nth-child(4) .c-icon-circle { background: rgba(27, 167, 133, 0.1); color: var(--bq-green-dark); }

.contact-detail-card-mockup h6 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--bq-light-text);
    margin: 0 0 4px 0;
}
.contact-detail-card-mockup p {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--bq-navy);
    margin: 0 0 4px 0;
    line-height: 1.4;
}
.contact-detail-card-mockup span {
    font-size: 0.78rem;
    color: var(--bq-light-text);
    display: block;
}

/* Form container */
.contact-form-mockup {
    background: #0d4c3f; /* Deep forest green */
    border-radius: 20px;
    padding: 40px;
    color: #fff;
    box-shadow: 0 15px 40px rgba(13, 76, 63, 0.25);
}
.contact-form-mockup h3 {
    font-size: 1.8rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
}
.contact-form-mockup p {
    color: rgba(255,255,255,0.85);
    font-size: 0.95rem;
    margin-bottom: 30px;
}
.contact-form-mockup .form-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    margin-bottom: 8px;
}
.contact-form-mockup .input-group {
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    display: flex;
    align-items: center;
    transition: all 0.3s;
}
.contact-form-mockup .input-group:focus-within {
    border-color: var(--bq-gold);
    box-shadow: 0 0 0 3px rgba(212, 168, 67, 0.25);
}
.contact-form-mockup .input-group-text {
    background: transparent !important;
    border: none !important;
    color: #64748b;
    padding-left: 15px;
    padding-right: 0;
}
.contact-form-mockup .form-control {
    border: none !important;
    background: transparent !important;
    padding: 12px 15px 12px 10px;
    color: var(--bq-navy);
    font-weight: 500;
}
.contact-form-mockup .form-control:focus {
    box-shadow: none !important;
}
.contact-form-mockup .form-select, .contact-form-mockup textarea.form-control {
    background-color: #fff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 12px 15px !important;
    font-size: 0.95rem;
    color: var(--bq-navy);
    font-weight: 500;
}
.contact-form-mockup .form-select:focus, .contact-form-mockup textarea.form-control:focus {
    border-color: var(--bq-gold) !important;
    box-shadow: 0 0 0 3px rgba(212, 168, 67, 0.25) !important;
}
.contact-form-mockup .form-control::placeholder {
    color: #94a3b8;
}
.contact-form-mockup .form-check-input {
    border-color: rgba(255,255,255,0.3);
    background-color: rgba(255,255,255,0.1);
    cursor: pointer;
}
.contact-form-mockup .form-check-input:checked {
    background-color: var(--bq-red);
    border-color: var(--bq-red);
}
.contact-form-mockup .btn-submit-form {
    width: 100%;
    padding: 14px;
    background: var(--bq-red);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s;
    margin-top: 20px;
}
.contact-form-mockup .btn-submit-form:hover {
    background: #a82222;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(196,43,43,0.3);
}

/* Bottom quote banner for contact page */
.contact-bottom-quote-banner {
    background: #061915;
    border-radius: 16px;
    padding: 45px;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.contact-bottom-quote-banner::after {
    content: '';
    position: absolute;
    bottom: -60px;
    right: -60px;
    width: 250px;
    height: 250px;
    background: rgba(255,255,255,0.015);
    border-radius: 50%;
}
.contact-bottom-quote-banner .quote-block-inner {
    position: relative;
    z-index: 2;
}
.contact-bottom-quote-banner p {
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 20px;
    color: #fff;
}
.contact-bottom-quote-banner p strong {
    color: var(--bq-gold);
    font-style: italic;
}
.contact-bottom-quote-banner span {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.85);
}

/* ===== VALUES BAR SECTION ===== */
.values-bar-section { padding: 40px 0 30px; position: relative; z-index: 5; margin-top: 0; margin-bottom: 10px; background: var(--bq-gray-bg); border-top: 1px solid #eef2f3; border-bottom: 1px solid #eef2f3; }
.values-bar-section .values-bar { background: transparent; padding: 0; border-radius: 0; box-shadow: none; border: none; }
.values-bar-section .value-item { margin-top: 10px; }

/* ===== AUDIENCE SECTION ===== */
.audience-section { padding: 15px 0 25px; }
.audience-section .mb-5 { margin-bottom: 35px !important; }

/* Custom overrides to make audience cards more compact */
.audience-card {
    padding: 28px 24px;
    box-shadow: 0 10px 30px rgba(27, 58, 75, 0.04);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.audience-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(27, 58, 75, 0.08);
}
.audience-card .audience-icon {
    margin-bottom: 15px;
}
.audience-card h4 {
    font-size: 1.15rem;
    margin-bottom: 12px;
}
.audience-card ul {
    margin-bottom: 18px;
}
.audience-card ul li {
    font-size: 0.9rem;
    margin-bottom: 8px;
    padding-left: 24px;
}
.audience-card ul li::before {
    font-size: 0.9rem;
    top: 2px;
}

/* ===== BOTTOM ROW SECTION (Testimonial + Resources + Newsletter) ===== */
.bottom-row-section { padding: 0 0 25px; }

.testimonial-box {
    background: #0d4c3f;
    border-radius: 16px;
    padding: 30px;
    color: #fff;
    height: 100%;
    position: relative;
}
.testimonial-box h5 { color: #fff; font-size: 1.15rem; font-weight: 700; margin-bottom: 20px; }
.testimonial-box .quote-mark-small { font-size: 3rem; color: var(--bq-gold); opacity: 0.4; line-height: 1; font-family: Georgia, serif; margin-bottom: -10px; }
.testimonial-box p { color: rgba(255,255,255,0.9); font-size: 0.95rem; line-height: 1.6; margin-bottom: 25px; font-weight: 500; }
.testimonial-box .author-row-small { display: flex; align-items: center; gap: 12px; }
.testimonial-box .author-row-small img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.testimonial-box .author-row-small strong { color: #fff; font-size: 0.9rem; display: block; }
.testimonial-box .stars-small { color: var(--bq-gold); font-size: 0.7rem; margin-top: 3px; }

.resources-box {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 16px;
    padding: 30px;
    height: 100%;
}
.resources-box h5 { font-size: 1.15rem; font-weight: 700; color: var(--bq-navy); margin-bottom: 25px; }
.resource-items { display: flex; flex-direction: column; gap: 20px; }
.resource-item { display: flex; align-items: flex-start; gap: 15px; }
.resource-item .res-icon { width: 42px; height: 42px; border-radius: 10px; background: rgba(212, 168, 67, 0.1); color: var(--bq-gold); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.resource-item:nth-child(2) .res-icon { background: rgba(27, 167, 133, 0.1); color: var(--bq-green-dark); }
.resource-item:nth-child(3) .res-icon { background: rgba(196, 43, 43, 0.1); color: var(--bq-red); }
.resource-item strong { font-size: 0.95rem; color: var(--bq-navy); display: block; margin-bottom: 2px; }
.resource-item p { font-size: 0.82rem; color: var(--bq-light-text); margin: 0; line-height: 1.4; }

.newsletter-box {
    background: var(--bq-gray-bg);
    border: 1px solid #eaeaea;
    border-radius: 16px;
    padding: 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.newsletter-box h5 { font-size: 1.15rem; font-weight: 700; color: var(--bq-navy); margin-bottom: 12px; }
.newsletter-box p { font-size: 0.9rem; color: var(--bq-light-text); margin-bottom: 20px; line-height: 1.5; flex-grow: 1; }
.newsletter-box .form-control { border-radius: 8px; padding: 12px 16px; border: 1px solid #ddd; font-size: 0.9rem; margin-bottom: 12px; }
.newsletter-box .form-control:focus { border-color: var(--bq-red); box-shadow: 0 0 0 3px rgba(196,43,43,0.1); }
.btn-newsletter {
    background: transparent;
    color: var(--bq-red);
    border: 2px solid var(--bq-red);
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 700;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
    cursor: pointer;
    width: 100%;
    justify-content: center;
}
.btn-newsletter:hover { background: var(--bq-red); color: #fff; transform: translateY(-2px); }

/* ===== STATS BAR SECTION ===== */
.stats-bar-section { padding: 20px 0; background: #fff; border-top: 1px solid #eee; }
.stats-bar-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}
.stat-item-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--bq-navy);
    font-weight: 500;
}
.stat-item-bar i { font-size: 1.1rem; color: var(--bq-green-dark); }
.stat-item-bar strong { font-weight: 800; color: var(--bq-red); }

/* ===== FOOTER 3 COLUMNS ===== */
.footer-top-3col {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 50px;
    padding-bottom: 30px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-col { display: flex; flex-direction: column; }
.footer-col-brand .footer-logo { margin-bottom: 15px; }
.footer-col-brand .footer-desc { margin-bottom: 18px; }
.footer-col h6 { color: rgba(255,255,255,0.95); font-size: 0.95rem; font-weight: 700; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 1px; position: relative; padding-bottom: 10px; }
.footer-col h6::after { content: ''; position: absolute; bottom: 0; left: 0; width: 30px; height: 2px; background: var(--bq-red); border-radius: 1px; }
.footer-col-links ul { list-style: none; padding: 0; margin: 0; }
.footer-col-links ul li { margin-bottom: 12px; }
.footer-col-links ul li a { color: rgba(255,255,255,0.65); text-decoration: none; font-size: 0.9rem; transition: all 0.3s; display: inline-flex; align-items: center; gap: 6px; }
.footer-col-links ul li a:hover { color: #fff; padding-left: 5px; }
.footer-col-links ul li a::before { content: '\203A'; font-size: 1rem; color: rgba(255,255,255,0.35); margin-right: 2px; }
.footer-badge-list { display: flex; flex-direction: column; gap: 15px; }
.footer-badge-list .footer-badge { display: flex; align-items: center; gap: 12px; font-size: 0.88rem; color: rgba(255,255,255,0.8); padding: 10px 14px; background: rgba(255,255,255,0.05); border-radius: 10px; transition: background 0.3s; }
.footer-badge-list .footer-badge:hover { background: rgba(255,255,255,0.08); }
.footer-badge-list .footer-badge i { font-size: 1.3rem; width: 24px; text-align: center; }

/* ===== FOOTER SOCIAL LINKS ===== */
.footer-social-inline {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 15px;
}
.footer-social-inline a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    transition: all 0.3s ease;
    text-decoration: none;
}
.footer-social-inline a:hover {
    background: var(--bq-red);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(196, 43, 43, 0.3);
}
.footer-social-inline a.zalo-icon {
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.2px;
    background: rgba(255, 255, 255, 0.08) !important;
}
.footer-social-inline a.zalo-icon:hover {
    background: #0068ff !important; /* Zalo blue */
    color: #fff;
    box-shadow: 0 4px 10px rgba(0, 104, 255, 0.3);
}

@media (max-width: 991.98px) {
    .footer-top-3col { grid-template-columns: 1fr 1fr; gap: 35px; }
    .footer-col-brand { grid-column: span 2; }
}
@media (max-width: 576px) {
    .footer-top-3col { grid-template-columns: 1fr; gap: 30px; }
    .footer-col-brand { grid-column: span 1; }
    .stats-bar-row { flex-direction: column; gap: 15px; align-items: flex-start; }
}

/* ===== PROBLEM CARDS COLOR THEMES (Trang 2) ===== */
.problem-card.card-strategy { border-left: 4px solid var(--bq-green); }
.problem-card.card-strategy .icon-circle { background: var(--bq-green); color: #fff; }
.problem-card.card-strategy .link-arrow { color: var(--bq-green); }

.problem-card.card-operations { border-left: 4px solid var(--bq-navy); }
.problem-card.card-operations .icon-circle { background: var(--bq-navy); color: #fff; }
.problem-card.card-operations .link-arrow { color: var(--bq-navy); }

.problem-card.card-people { border-left: 4px solid var(--bq-gold); }
.problem-card.card-people .icon-circle { background: var(--bq-gold); color: #fff; }
.problem-card.card-people .link-arrow { color: var(--bq-gold); }

.problem-card.card-revenue { border-left: 4px solid #2196F3; }
.problem-card.card-revenue .icon-circle { background: #2196F3; color: #fff; }
.problem-card.card-revenue .link-arrow { color: #2196F3; }

/* ===== AUDIENCE CARDS BACKGROUND THEMES (Trang 4) ===== */
.audience-card.card-sme { background: #ebf7f5; border: 1px solid rgba(27, 167, 133, 0.15); }
.audience-card.card-sme h4 { color: var(--bq-navy); }
.audience-card.card-sme ul li { color: var(--bq-light-text); }
.audience-card.card-sme ul li::before { color: var(--bq-green); }
.audience-card.card-sme .link-arrow { color: var(--bq-green-dark); }
.audience-card.card-sme .link-arrow:hover { color: #115246; }
.audience-card.card-sme:hover { border-color: rgba(27, 167, 133, 0.3); }

.audience-card.card-startup { background: #fdfcfb; border: 1px solid rgba(196, 43, 43, 0.12); }
.audience-card.card-startup .link-arrow:hover { color: #a82222; }
.audience-card.card-startup:hover { border-color: rgba(196, 43, 43, 0.25); }

.audience-card.card-manager { background: #faf6f0; border: 1px solid rgba(212, 168, 67, 0.18); }
.audience-card.card-manager .link-arrow:hover { color: #b88d2f; }
.audience-card.card-manager:hover { border-color: rgba(212, 168, 67, 0.35); }

.audience-card.card-personal { background: #f0f4f8; border: 1px solid rgba(27, 58, 75, 0.12); }
.audience-card.card-personal .link-arrow:hover { color: #112836; }
.audience-card.card-personal:hover { border-color: rgba(27, 58, 75, 0.25); }

.quote-banner-section {
    background-color: #F6EFE6; /* Màu vàng kem dịu mắt đồng bộ tone thương hiệu */
    padding: 18px 0; /* padding-bottom 18px và padding-top 18px */
    margin-top: 0; /* Cho dính sát vào section phía trên */
    position: relative;
    z-index: 2;
    overflow: hidden;
}

/* Ảnh núi chìm góc phải bắt đầu từ khoảng 50% container ra tới ngoài viền */
.quote-mountain-decor {
    position: absolute;
    top: 0;
    right: -15px; /* Sát mép phải container */
    bottom: -30px; /* Kéo sâu xuống dưới để che khuất hoàn toàn viền xám ở đáy ảnh núi */
    width: 48%; /* Bắt đầu từ 50% dòng đi ra */
    background: url('../images/mountain-footer-new.png') right bottom / cover no-repeat; /* Dùng cover để núi to full khung */
    opacity: 0.85; /* Độ mờ vừa phải để lộ rõ đường đi và màu sắc hài hòa */
    pointer-events: none;
    z-index: 0;
}

/* Cấu trúc hiển thị quote tối giản, tinh tế */
.quote-minimal {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    position: relative;
    z-index: 1;
    max-width: 60%; /* Giới hạn chiều rộng chữ để không đè lên hình núi bên phải */
}

.quote-minimal-icon {
    flex-shrink: 0;
    margin-top: -5px;
}

.quote-minimal-icon i {
    font-size: 2.2rem;
    color: var(--bq-gold);
    line-height: 1;
}

.quote-minimal-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.quote-minimal-text .quote-main {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--bq-navy);
    line-height: 1.5;
    margin: 0;
}

.quote-minimal-text .quote-main em {
    font-style: italic;
    color: var(--bq-navy);
    font-weight: 600;
}

.quote-minimal-text .quote-sub {
    font-size: 0.95rem;
    color: var(--bq-light-text);
    margin: 0;
    font-weight: 500;
}

/* Responsive cho thiết bị di động */
@media (max-width: 991.98px) {
    .quote-banner-section {
        padding: 30px 0;
    }
    .quote-mountain-decor {
        width: 100%;
        right: 0;
        opacity: 0.15; /* Làm mờ hẳn để làm nền dưới chữ trên mobile */
        background-size: cover;
    }
    .quote-minimal {
        max-width: 100%; /* Trên mobile chữ chiếm toàn bộ chiều rộng */
    }
}

/* ===== 5 OPTIONS CÂU HỎI CHẨN ĐOÁN (Trang chẩn đoán mới) ===== */
.ans-5-col-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
}
.ans-5-col {
    flex: 1;
    min-width: 0;
}
.ans-5-col .answer-option {
    padding: 25px 15px;
    height: 100%;
}
.ans-5-col .answer-option .opt-icon-wrap {
    font-size: 2rem;
    margin-bottom: 12px;
    line-height: 1;
}
.ans-5-col .answer-option .opt-text-wrap {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    margin-bottom: 15px;
}
.ans-5-col .answer-option h5 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.3;
}
.ans-5-col .answer-option p {
    font-size: 0.78rem;
    color: var(--bq-light-text);
    line-height: 1.4;
    margin: 0;
}

/* Tablet / Intermediate Screens: Ensure options fit on 1 row with smaller font & padding */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .ans-5-col-row {
        gap: 8px;
    }
    .ans-5-col .answer-option {
        padding: 15px 6px !important;
    }
    .ans-5-col .answer-option .opt-icon-wrap {
        font-size: 1.6rem !important;
        margin-bottom: 8px !important;
    }
    .ans-5-col .answer-option h5 {
        font-size: 0.8rem !important;
        white-space: nowrap;
        margin-bottom: 6px !important;
    }
    .ans-5-col .answer-option p {
        font-size: 0.68rem !important;
        line-height: 1.3 !important;
    }
    .ans-5-col .answer-option .opt-text-wrap {
        margin-bottom: 10px !important;
    }
    .ans-5-col .answer-option .radio-circle {
        width: 16px !important;
        height: 16px !important;
    }
}

/* Mobile Screens: Transform into a highly compact vertical list of horizontal rows */
@media (max-width: 767.98px) {
    .ans-5-col-row {
        flex-direction: column;
        gap: 8px;
    }
    .ans-5-col {
        width: 100%;
    }
    .ans-5-col .answer-option {
        flex-direction: row !important;
        text-align: left !important;
        padding: 10px 14px !important;
        align-items: center !important;
        gap: 12px !important;
        justify-content: flex-start !important;
        height: auto !important;
        background: #fafafa !important;
    }
    .ans-5-col .answer-option .opt-icon-wrap {
        font-size: 1.3rem !important;
        margin-bottom: 0 !important;
        width: 24px !important;
        text-align: center !important;
        flex-shrink: 0 !important;
    }
    .ans-5-col .answer-option .opt-text-wrap {
        margin-bottom: 0 !important;
        gap: 2px !important;
        flex-grow: 1 !important;
    }
    .ans-5-col .answer-option h5 {
        font-size: 0.85rem !important;
        font-weight: 700 !important;
        margin: 0 !important;
        white-space: nowrap !important;
        line-height: 1.2 !important;
    }
    .ans-5-col .answer-option p {
        font-size: 0.72rem !important;
        margin: 0 !important;
        line-height: 1.3 !important;
        display: block !important;
        color: var(--bq-light-text) !important;
    }
    .ans-5-col .answer-option .radio-circle {
        margin-top: 0 !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
        width: 18px !important;
        height: 18px !important;
    }
}

/* Màu sắc của 5 option chẩn đoán */
.answer-option.ans-opt-red { border-color: rgba(196, 43, 43, 0.15); background-color: rgba(196, 43, 43, 0.015); }
.answer-option.ans-opt-red .opt-icon, .answer-option.ans-opt-red h5 { color: var(--bq-red); }
.answer-option.ans-opt-red.selected { border-color: var(--bq-red); background-color: rgba(196, 43, 43, 0.04); box-shadow: 0 5px 15px rgba(196, 43, 43, 0.05); }
.answer-option.ans-opt-red.selected .radio-circle::after { background: var(--bq-red); }

.answer-option.ans-opt-orange { border-color: rgba(212, 168, 67, 0.25); background-color: rgba(212, 168, 67, 0.02); }
.answer-option.ans-opt-orange .opt-icon, .answer-option.ans-opt-orange h5 { color: #d08218; }
.answer-option.ans-opt-orange.selected { border-color: #d08218; background-color: rgba(212, 168, 67, 0.06); box-shadow: 0 5px 15px rgba(212, 168, 67, 0.08); }
.answer-option.ans-opt-orange.selected .radio-circle::after { background: #d08218; }

.answer-option.ans-opt-green { border-color: rgba(27, 167, 133, 0.18); background-color: rgba(27, 167, 133, 0.015); }
.answer-option.ans-opt-green .opt-icon, .answer-option.ans-opt-green h5 { color: var(--bq-green-dark); }
.answer-option.ans-opt-green.selected { border-color: var(--bq-green-dark); background-color: rgba(27, 167, 133, 0.04); box-shadow: 0 5px 15px rgba(27, 167, 133, 0.05); }
.answer-option.ans-opt-green.selected .radio-circle::after { background: var(--bq-green-dark); }

.answer-option.ans-opt-blue { border-color: rgba(33, 150, 243, 0.18); background-color: rgba(33, 150, 243, 0.015); }
.answer-option.ans-opt-blue .opt-icon, .answer-option.ans-opt-blue h5 { color: #2196F3; }
.answer-option.ans-opt-blue.selected { border-color: #2196F3; background-color: rgba(33, 150, 243, 0.04); box-shadow: 0 5px 15px rgba(33, 150, 243, 0.05); }
.answer-option.ans-opt-blue.selected .radio-circle::after { background: #2196F3; }

.answer-option.ans-opt-emerald { border-color: rgba(27, 167, 133, 0.2); background-color: rgba(27, 167, 133, 0.02); }
.answer-option.ans-opt-emerald .opt-icon, .answer-option.ans-opt-emerald h5 { color: #15735c; }
.answer-option.ans-opt-emerald.selected { border-color: #15735c; background-color: rgba(27, 167, 133, 0.06); box-shadow: 0 5px 15px rgba(27, 167, 133, 0.08); }
.answer-option.ans-opt-emerald.selected .radio-circle::after { background: #15735c; }

/* Thang điểm radio button chẩn đoán */
.answer-option .radio-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #ccc;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    background: #fff;
    transition: all 0.3s;
}
.answer-option.selected .radio-circle {
    border-color: inherit;
}
.answer-option.selected .radio-circle::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* ===== SIDEBAR CHẨN ĐOÁN 3 PHẦN DYNAMIC màu sắc giống demo ===== */
.ds-item {
    border: 1px solid #eaeaea !important;
    opacity: 0.9 !important;
    transition: all 0.3s ease;
}
.ds-item#ds-item-1 { background-color: rgba(27, 167, 133, 0.015); }
.ds-item#ds-item-2 { background-color: rgba(212, 168, 67, 0.02); }
.ds-item#ds-item-3 { background-color: rgba(27, 58, 75, 0.015); }

.ds-item#ds-item-1.active {
    background-color: #f0f7f5 !important;
    border-color: var(--bq-green-dark) !important;
    box-shadow: 0 5px 15px rgba(27, 167, 133, 0.08) !important;
    opacity: 1 !important;
}
.ds-item#ds-item-2.active {
    background-color: #faf6f0 !important;
    border-color: var(--bq-gold) !important;
    box-shadow: 0 5px 15px rgba(212, 168, 67, 0.08) !important;
    opacity: 1 !important;
}
.ds-item#ds-item-3.active {
    background-color: #f3f6fa !important;
    border-color: var(--bq-navy) !important;
    box-shadow: 0 5px 15px rgba(27, 58, 75, 0.08) !important;
    opacity: 1 !important;
}

/* ===== DẢI BANNER CAM KẾT & GIÁ TRỊ CHÂN TRANG (Ảnh demo 2) ===== */
.diagnose-features-banner-section {
    padding: 0 0 20px 0;
    position: relative;
    z-index: 2;
}
.features-banner-wrapper {
    display: flex;
    background-color: #F6EFE6; /* Nền vàng kem */
    border-radius: 16px;
    overflow: hidden;
    position: relative;
}
.banner-quote-col {
    width: 28%;
    background-color: #0A2F27; /* Xanh lục đậm */
    color: #fff;
    padding: 20px 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 2;
}
.banner-quote-col .quote-icon {
    font-size: 1.6rem;
    color: var(--bq-gold);
    opacity: 0.85;
    margin-bottom: 6px;
    line-height: 1;
}
.banner-quote-col .quote-text {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.45;
    color: #fff;
    margin-bottom: 6px;
    font-style: italic;
}
.banner-quote-col .quote-author {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.7);
    font-weight: 500;
}
.banner-items-col {
    width: 72%;
    padding: 20px 30px 20px 25px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    align-items: center;
    position: relative;
    z-index: 1;
}
.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    position: relative;
    z-index: 2;
}
.feature-item .feature-icon {
    font-size: 1.25rem;
    line-height: 1;
    margin-top: 2px;
    flex-shrink: 0;
}
.feature-item .feature-icon.icon-green { color: var(--bq-green-dark); }
.feature-item .feature-icon.icon-gold { color: var(--bq-gold); }
.feature-item .feature-icon.icon-navy { color: var(--bq-navy); }
.feature-item .feature-icon.icon-red { color: var(--bq-red); }

.feature-item .feature-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.feature-item .feature-text strong {
    font-size: 0.9rem;
    color: var(--bq-navy);
    font-weight: 700;
}
.feature-item .feature-text span {
    font-size: 0.75rem;
    color: var(--bq-light-text);
    line-height: 1.35;
}

/* Núi chìm góc phải ngoài cùng */
.banner-mountain-img {
    position: absolute;
    right: 0;
    bottom: -10px;
    width: 220px;
    height: 100%;
    background: url('../images/mountain-footer-new.png') right bottom / contain no-repeat;
    opacity: 0.65;
    pointer-events: none;
    z-index: 1;
}

@media (max-width: 991.98px) {
    .features-banner-wrapper {
        flex-direction: column;
    }
    .banner-quote-col {
        width: 100%;
        padding: 30px;
    }
    .banner-items-col {
        width: 100%;
        grid-template-columns: repeat(2, 1fr);
        padding: 30px;
    }
}
@media (max-width: 575.98px) {
    .banner-items-col {
        grid-template-columns: 1fr;
    }
}

/* ===== CD HERO BANNER (Chẩn đoán) ===== */
.cd-hero {
    background: radial-gradient(circle at 20% 45%, rgba(196, 43, 43, 0.15) 0%, transparent 60%), 
                radial-gradient(circle at 80% 50%, rgba(27, 167, 133, 0.12) 0%, transparent 60%),
                linear-gradient(135deg, #0B1325 0%, #162238 50%, #0B1325 100%);
    padding: 64px 0; /* Cân đối khoảng trống trên và dưới */
    position: relative;
    overflow: hidden;
}
.cd-hero::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(196,43,43,.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.cd-hero::after {
    content: '';
    position: absolute;
    bottom: -60px; left: -60px;
    width: 250px; height: 250px;
    background: radial-gradient(circle, rgba(27,167,133,.06) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* Grid layout */
.cd-hero-grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 48px;
    align-items: center;
}

/* === Left column === */
.cd-hero-content { position: relative; z-index: 2; }

.cd-hero-badge {
    display: inline-block;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    color: rgba(255,255,255,.85);
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

.cd-hero-title {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1.18;
    color: #fff;
    margin-bottom: 18px;
    text-wrap: balance;
}
.cd-hero-accent {
    color: #FF5353; /* Đỏ sáng rực rỡ, tăng tương phản đọc trên nền tối */
    -webkit-text-fill-color: initial;
    text-shadow: none; /* Bỏ bóng mờ để chữ sắc nét không bị nhòe */
}

.cd-hero-desc {
    font-size: 1rem;
    color: rgba(255,255,255,.9); /* Tăng độ sáng để chữ rõ ràng hơn */
    line-height: 1.65;
    margin-bottom: 24px;
    max-width: 520px;
    text-wrap: pretty;
}

/* Pills */
.cd-hero-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
}
.cd-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px;
    color: rgba(255,255,255,.9); /* Tăng độ sáng văn bản trong pill */
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    transition: all .25s;
}
.cd-hero-pill:hover {
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.2);
}
.cd-hero-pill i {
    font-size: 0.75rem;
    color: var(--bq-gold);
}

/* CTA */
.cd-hero-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.cd-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 30px;
    background: var(--bq-red);
    color: #fff;
    border-radius: 14px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(196,43,43,.35);
    transition: all .3s;
    white-space: nowrap;
}
.cd-hero-cta:hover {
    background: #a82424;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(196,43,43,.4);
    color: #fff;
}
.cd-hero-cta i { font-size: 0.85rem; }
.cd-hero-note {
    font-size: 0.82rem;
    color: rgba(255,255,255,.75); /* Tăng độ sáng để câu ghi chú rõ ràng hơn, không bị chìm */
    font-style: italic;
}

/* === Right column: Orbit === */
.cd-hero-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}
.cd-orbit-wrap {
    width: 340px;
    height: 340px;
    position: relative;
}

.cd-orbit-label {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255,255,255,.55);
    line-height: 1.35;
    white-space: nowrap;
}

/* Center circle */
.cd-orbit-center {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 86px; height: 86px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bq-red) 0%, #d43535 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 30px rgba(196,43,43,.45), 0 0 0 8px rgba(196,43,43,.18), 0 8px 28px rgba(0,0,0,.25);
    z-index: 5;
}
.cd-orbit-center span {
    color: #fff;
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: 1px;
    text-shadow: 0 1px 3px rgba(0,0,0,.3);
}

/* Ring — main + 2 concentric via pseudo-elements */
.cd-orbit-ring {
    position: absolute;
    top: 50%; left: 50%;
    width: 240px; height: 240px;
    transform: translate(-50%, -50%);
    border: 2px dashed rgba(255,255,255,.25);
    border-radius: 50%;
}
.cd-orbit-ring::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 160px; height: 160px;
    transform: translate(-50%, -50%);
    border: 1.5px dashed rgba(255,255,255,.12);
    border-radius: 50%;
}
.cd-orbit-ring::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 310px; height: 310px;
    transform: translate(-50%, -50%);
    border: 1px dashed rgba(255,255,255,.08);
    border-radius: 50%;
}

/* Orbiting items container */
.cd-orbit-items {
    position: absolute;
    top: 50%; left: 50%;
    width: 240px; height: 240px;
    transform: translate(-50%, -50%);
    animation: cd-spin 30s linear infinite;
}

/* Each item */
.cd-orbit-item {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    animation: cd-counter-spin 30s linear infinite;
}
.cd-orbit-item span {
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    text-shadow: 0 1px 6px rgba(0,0,0,.5);
    letter-spacing: 0.3px;
}

.cd-orbit-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    background: rgba(255,255,255,.95) !important;
    box-shadow: 0 4px 18px rgba(0,0,0,.2), 0 0 0 2px rgba(255,255,255,.15);
    transition: transform .3s;
}
.cd-orbit-item:hover .cd-orbit-icon {
    transform: scale(1.15);
    box-shadow: 0 6px 24px rgba(0,0,0,.3), 0 0 0 3px rgba(255,255,255,.2);
}

/* Positions: top(0°), right(90°), bottom(180°), left(270°) — on 240px circle */
.cd-orbit-item--cl { top: 0;    left: 50%;  transform: translate(-50%, -50%); }
.cd-orbit-item--dt { top: 50%;  left: 100%; transform: translate(-50%, -50%); }
.cd-orbit-item--vh { top: 100%; left: 50%;  transform: translate(-50%, -50%); }
.cd-orbit-item--cn { top: 50%;  left: 0;    transform: translate(-50%, -50%); }

/* Animations */
@keyframes cd-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes cd-counter-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(-360deg); }
}

/* === Bottom badges === */
.cd-hero-badges {
    display: flex;
    gap: 0;
    margin-top: 40px;
    border-top: 1px solid rgba(255,255,255,.08);
    position: relative;
    z-index: 2;
}
.cd-hero-badge-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    transition: background .25s;
}
.cd-hero-badge-item:not(:last-child) {
    border-right: 1px solid rgba(255,255,255,.08);
}
.cd-hero-badge-item:hover {
    background: rgba(255,255,255,.03);
}
.cd-hero-badge-item > i {
    font-size: 1.15rem;
    color: var(--bq-gold);
    flex-shrink: 0;
}
.cd-hero-badge-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cd-hero-badge-text strong {
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}
.cd-hero-badge-text span {
    font-size: 0.72rem;
    color: rgba(255,255,255,.75);
    line-height: 1.2;
}

/* === Responsive === */
@media (max-width: 991.98px) {
    .cd-hero-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .cd-hero-visual {
        order: 1; /* Hiển thị biểu đồ xoay dưới cụm text trên mobile */
    }
    .cd-orbit-wrap {
        width: 280px;
        height: 280px;
        margin: 0 auto;
    }
    .cd-orbit-ring, .cd-orbit-items {
        width: 200px; height: 200px;
    }
    .cd-orbit-center {
        width: 66px; height: 66px;
    }
    .cd-orbit-icon {
        width: 42px; height: 42px;
        font-size: 1rem;
    }
    .cd-hero-title {
        font-size: 2rem;
        text-align: center;
    }
    .cd-hero-content {
        text-align: center;
    }
    .cd-hero-desc {
        margin-left: auto;
        margin-right: auto;
    }
    .cd-hero-pills {
        justify-content: center;
    }
    .cd-hero-actions {
        justify-content: center;
    }
    .cd-hero-badge {
        margin-left: auto;
        margin-right: auto;
    }
}
@media (max-width: 767.98px) {
    .cd-hero {
        padding: 48px 0; /* Cân đối khoảng trống trên dưới trên mobile */
    }
    .cd-hero-title {
        font-size: 1.9rem; /* Tăng kích thước chữ tiêu đề trên mobile cho hiện đại */
        line-height: 1.25;
    }
    .cd-hero-desc {
        font-size: 0.95rem; /* Cỡ chữ body dễ đọc hơn trên điện thoại */
    }
    .cd-hero-badges {
        flex-direction: column;
        gap: 0;
    }
    .cd-hero-badge-item {
        padding: 12px 16px; /* Giảm padding đứng trên mobile tránh tốn diện tích dọc */
    }
    .cd-hero-badge-item:not(:last-child) {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .cd-orbit-wrap {
        width: 250px; height: 250px;
    }
    .cd-orbit-ring, .cd-orbit-items {
        width: 180px; height: 180px;
    }
    .cd-orbit-center {
        width: 58px; height: 58px;
    }
    .cd-orbit-center span {
        font-size: 0.95rem;
    }
    .cd-orbit-icon {
        width: 38px; height: 38px;
        border-radius: 10px;
        font-size: 0.9rem;
    }
    .cd-orbit-item span {
        font-size: 0.65rem;
    }
    .cd-hero-pill {
        font-size: 0.75rem;
        padding: 6px 12px;
    }
}

/* ===== SOLUTION HERO SECTION ===== */
.solution-hero-section {
    position: relative;
    padding: 45px 0 40px;
    background: linear-gradient(135deg, #eef6f4 0%, #fffbf5 100%);
    border-bottom: 1px solid rgba(27, 58, 75, 0.05);
    overflow: hidden;
    z-index: 1;
}
.solution-hero-section .solution-badge {
    display: inline-block;
    background: rgba(21, 122, 98, 0.08);
    border: 1px solid rgba(21, 122, 98, 0.15);
    color: var(--bq-green-dark);
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 18px;
}
.solution-hero-section .solution-hero-title {
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1.15;
    color: var(--bq-navy);
    margin-bottom: 18px;
    background: linear-gradient(135deg, var(--bq-navy) 30%, var(--bq-green-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.solution-hero-section .solution-hero-desc {
    font-size: 1.05rem;
    color: var(--bq-light-text);
    line-height: 1.6;
    max-width: 540px;
    margin-bottom: 30px;
}
.solution-hero-section .solution-quick-links {
    margin-top: 25px;
    border-top: 1px dashed rgba(27, 58, 75, 0.1);
    padding-top: 20px;
}
.solution-hero-section .quick-link-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--bq-navy);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.solution-hero-section .quick-link-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #fff;
    border: 1px solid rgba(27, 58, 75, 0.08);
    border-radius: 30px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--bq-navy);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease;
    text-decoration: none !important;
}
.solution-hero-section .quick-link-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.05);
}
.solution-hero-section .quick-link-pill .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}
.solution-hero-section .quick-link-pill.pill-green:hover {
    border-color: var(--bq-green);
    color: var(--bq-green-dark);
}
.solution-hero-section .quick-link-pill.pill-green .dot { background: var(--bq-green); }

.solution-hero-section .quick-link-pill.pill-gold:hover {
    border-color: var(--bq-gold);
    color: #b0811e;
}
.solution-hero-section .quick-link-pill.pill-gold .dot { background: var(--bq-gold); }

.solution-hero-section .quick-link-pill.pill-red:hover {
    border-color: var(--bq-red);
    color: var(--bq-red);
}
.solution-hero-section .quick-link-pill.pill-red .dot { background: var(--bq-red); }

/* Right Column Visual representation: 4-Box Grid Diagram */
.solution-grid-container {
    position: relative;
    width: 400px;
    height: 400px;
    margin: 30px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}
.solution-grid-axis-x {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    background: linear-gradient(to right, #029472 50%, #032b69 50%);
    z-index: 1;
    pointer-events: none;
    transform: translateY(-50%);
}
.solution-grid-axis-y {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: linear-gradient(to bottom, #032b69 50%, #029472 50%);
    z-index: 1;
    pointer-events: none;
    transform: translateX(-50%);
}
.solution-grid-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    border-radius: 50%;
    border: 1.5px solid;
    border-color: #032b69 #032b69 #029472 #029472;
    z-index: 1;
    pointer-events: none;
}
.solution-grid-ring-outer {
    width: 310px;
    height: 310px;
}
.solution-grid-ring-middle {
    width: 240px;
    height: 240px;
}
.solution-grid-ring-inner {
    width: 170px;
    height: 170px;
}
.solution-grid-center-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 5px solid;
    border-color: #032b69 #032b69 #029472 #029472;
    z-index: 2;
    pointer-events: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.solution-grid-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(27, 58, 75, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    box-shadow: 0 4px 15px rgba(27, 58, 75, 0.1);
}
.solution-center-logo-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.solution-center-logo-wrap img {
    width: 50px;
    height: auto;
    object-fit: contain;
}
.solution-grid-box {
    position: absolute;
    width: 155px;
    height: 155px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    padding: 18px;
    text-align: center;
    cursor: pointer;
    z-index: 2;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.solution-grid-box span {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.35;
    text-transform: none;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
    position: relative;
    z-index: 2;
}

/* 3D Keycap box face styles */
.solution-grid-box::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 11px;
    border-radius: 15px;
    z-index: 1;
    transition: all 0.3s ease;
}

/* Box-TL (Top-Left: Book) - Gold/Brown Style */
.solution-grid-box.box-tl {
    background: #967117;
    border: 1px solid rgba(150, 113, 23, 0.4);
    box-shadow: 0 10px 24px rgba(150, 113, 23, 0.25), inset 0 -5px 0 rgba(0, 0, 0, 0.25);
}
.solution-grid-box.box-tl::before {
    background: linear-gradient(135deg, #D4A843 0%, #a37a1a 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.15);
}

/* Box-TR (Top-Right: Tools & Framework) - Navy Style */
.solution-grid-box.box-tr {
    background: #021a42;
    border: 1px solid rgba(2, 26, 66, 0.4);
    box-shadow: 0 10px 24px rgba(2, 26, 66, 0.25), inset 0 -5px 0 rgba(0, 0, 0, 0.25);
}
.solution-grid-box.box-tr::before {
    background: linear-gradient(135deg, #1e3799 0%, #032b69 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.15);
}

/* Box-BL (Bottom-Left: Coaching & Mentoring) - Teal Style */
.solution-grid-box.box-bl {
    background: #016b52;
    border: 1px solid rgba(1, 107, 82, 0.4);
    box-shadow: 0 10px 24px rgba(1, 107, 82, 0.25), inset 0 -5px 0 rgba(0, 0, 0, 0.25);
}
.solution-grid-box.box-bl::before {
    background: linear-gradient(135deg, #02b894 0%, #017a5e 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.15);
}

/* Box-BR (Bottom-Right: Training) - Red Style */
.solution-grid-box.box-br {
    background: #9e1b1b;
    border: 1px solid rgba(158, 27, 27, 0.4);
    box-shadow: 0 10px 24px rgba(158, 27, 27, 0.25), inset 0 -5px 0 rgba(0, 0, 0, 0.25);
}
.solution-grid-box.box-br::before {
    background: linear-gradient(135deg, #C42B2B 0%, #9e1b1b 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.15);
}

/* Float Animations Keyframes (4 unique motion signatures for a highly dynamic visual effect) */
@keyframes floatTL {
    0% { transform: translate(0, 0) scale(1) rotate(0deg); }
    50% { transform: translate(-8px, -6px) scale(1.03) rotate(1.2deg); }
    100% { transform: translate(0, 0) scale(1) rotate(0deg); }
}
@keyframes floatTR {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(6px, -4px) rotate(1.5deg); }
    50% { transform: translate(-8px, 5px) rotate(-1.2deg); }
    75% { transform: translate(4px, 6px) rotate(0.8deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes floatBL {
    0% { transform: translate(0, 0) rotate(0deg) skewX(0deg); }
    33% { transform: translate(-5px, 8px) rotate(-1.5deg) skewX(1.5deg); }
    66% { transform: translate(6px, -5px) rotate(1.2deg) skewX(-1.5deg); }
    100% { transform: translate(0, 0) rotate(0deg) skewX(0deg); }
}
@keyframes floatBR {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(8px, 2px) rotate(-1deg); }
    50% { transform: translate(0px, 8px) rotate(1.6deg); }
    75% { transform: translate(-8px, -2px) rotate(-0.8deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

/* Default Box Positions and Auto-float Assign */
.solution-grid-box.box-tl {
    top: 10px;
    left: 10px;
    animation: floatTL 3.5s ease-in-out infinite;
}
.solution-grid-box.box-tr {
    top: 10px;
    right: 10px;
    animation: floatTR 4.2s ease-in-out infinite;
}
.solution-grid-box.box-bl {
    bottom: 10px;
    left: 10px;
    animation: floatBL 3.0s ease-in-out infinite;
}
.solution-grid-box.box-br {
    bottom: 10px;
    right: 10px;
    animation: floatBR 3.8s ease-in-out infinite;
}

/* Hover organic motions and styling overrides */
.solution-grid-box.box-tl:hover {
    animation: none;
    transform: translate(-8px, -8px) scale(1.08);
    box-shadow: 0 18px 35px rgba(212, 168, 67, 0.45), inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}
.solution-grid-box.box-tl:hover::before {
    background: linear-gradient(135deg, #ebd068 0%, #D4A843 100%);
    border-color: rgba(255, 255, 255, 0.45);
}

.solution-grid-box.box-tr:hover {
    animation: none;
    transform: translate(8px, -8px) scale(1.08);
    box-shadow: 0 18px 35px rgba(3, 43, 105, 0.45), inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}
.solution-grid-box.box-tr:hover::before {
    background: linear-gradient(135deg, #4a69bd 0%, #0c2461 100%);
    border-color: rgba(255, 255, 255, 0.45);
}

.solution-grid-box.box-bl:hover {
    animation: none;
    transform: translate(-8px, 8px) scale(1.08);
    box-shadow: 0 18px 35px rgba(2, 148, 114, 0.45), inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}
.solution-grid-box.box-bl:hover::before {
    background: linear-gradient(135deg, #00d2d3 0%, #029472 100%);
    border-color: rgba(255, 255, 255, 0.45);
}

.solution-grid-box.box-br:hover {
    animation: none;
    transform: translate(8px, 8px) scale(1.08);
    box-shadow: 0 18px 35px rgba(196, 43, 43, 0.45), inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}
.solution-grid-box.box-br:hover::before {
    background: linear-gradient(135deg, #ff4d4d 0%, #C42B2B 100%);
    border-color: rgba(255, 255, 255, 0.45);
}

/* Background Blobs */
.solution-bg-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 0;
    opacity: 0.35;
    pointer-events: none;
}
.solution-bg-blob.blob-1 {
    width: 250px;
    height: 250px;
    background: rgba(27, 167, 133, 0.15);
    top: -50px;
    left: -50px;
}
.solution-bg-blob.blob-2 {
    width: 300px;
    height: 300px;
    background: rgba(212, 168, 67, 0.1);
    bottom: -100px;
    right: 100px;
}

/* Floating Animations */
@keyframes floatAnimation1 {
    0% { transform: translateY(0px) rotate(0deg); }
    100% { transform: translateY(-8px) rotate(0.5deg); }
}
@keyframes floatAnimation2 {
    0% { transform: translateY(0px) rotate(0deg); }
    100% { transform: translateY(-10px) rotate(-0.5deg); }
}
@keyframes floatAnimation3 {
    0% { transform: translateY(0px) rotate(0deg); }
    100% { transform: translateY(-8px) rotate(0.3deg); }
}

@media (max-width: 991.98px) {
    .solution-hero-section {
        padding: 60px 0 55px;
        text-align: center;
    }
    .solution-hero-section .solution-hero-title {
        font-size: 2.6rem;
    }
    .solution-hero-section .solution-hero-desc {
        margin-left: auto;
        margin-right: auto;
    }
    .solution-hero-section .solution-quick-links {
        max-width: 500px;
        margin: 25px auto 0;
    }
    .solution-hero-section .solution-quick-links .d-flex {
        justify-content: center;
    }
}

/* ===== CASE STUDY HERO & HIGHLIGHTS ROW ===== */
.case-study-hero {
    position: relative;
    padding-bottom: 10px;
}
.highlights-row {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    border-bottom: 1px dashed rgba(27, 58, 75, 0.08);
    padding-bottom: 25px;
}
.highlights-row .highlight-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 150px;
}
.highlights-row .highlight-item .icon-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #fff;
    flex-shrink: 0;
}
.highlights-row .highlight-item.hl-green .icon-circle { background: var(--bq-green-dark); }
.highlights-row .highlight-item.hl-red .icon-circle { background: var(--bq-red); }
.highlights-row .highlight-item.hl-gold .icon-circle { background: var(--bq-gold); }
.highlights-row .highlight-item.hl-navy .icon-circle { background: var(--bq-navy); }

.highlights-row .highlight-item .hl-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.highlights-row .highlight-item .hl-text strong {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--bq-navy);
}
.highlights-row .highlight-item .hl-text span {
    font-size: 0.68rem;
    color: var(--bq-light-text);
    font-weight: 500;
}

/* Sidebar CTA horizontal override */
.sidebar-cta-card.d-flex {
    background: #ebf7f5;
    border: 1px solid rgba(27, 167, 133, 0.08);
    border-radius: 16px;
    padding: 20px;
    align-items: center;
    gap: 15px;
    text-align: left;
}
.sidebar-cta-card.d-flex .cta-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(27, 167, 133, 0.1);
    color: var(--bq-green-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 0 !important;
    flex-shrink: 0;
}
.sidebar-cta-card.d-flex p {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: var(--bq-navy) !important;
    margin-bottom: 8px !important;
    line-height: 1.35 !important;
    text-align: left !important;
}
.sidebar-cta-card.d-flex .btn-sidebar-cta {
    background: var(--bq-red);
    color: #fff;
    border-radius: 30px;
    padding: 8px 18px;
    font-weight: 600;
    font-size: 0.75rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 4px 10px rgba(196, 43, 43, 0.15);
    margin-top: 0;
}
.sidebar-cta-card.d-flex .btn-sidebar-cta:hover {
    background: #a82222;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(196, 43, 43, 0.25);
}

@media (max-width: 1199.98px) {
    .case-study-hero {
        padding-right: 0;
    }
}

@media (max-width: 991.98px) {
    .case-study-hero {
        padding-right: 0;
    }
}

/* Custom styles for case-study.html stacked layout */
.btn-white-solid {
    background: #fff;
    color: #0A221C;
    border: 2px solid #fff;
    border-radius: 30px;
    padding: 12px 28px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.btn-white-solid:hover {
    background: transparent;
    color: #fff;
    border-color: #fff;
    transform: translateY(-2px);
}
.cta-banner-card {
    transition: transform 0.3s, box-shadow 0.3s;
}
.cta-banner-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(27, 167, 133, 0.12);
}
.case-hero-section {
    transition: box-shadow 0.3s;
}
.case-hero-section:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,0.04) !important;
}

/* ===== CASE STUDY PAGE SPECIFIC SPACING OVERRIDES ===== */
.case-hero-section {
    margin-bottom: 12px !important;
}
.case-grid-section {
    padding: 10px 0 20px !important;
}
.case-grid-section .filter-tabs-container {
    margin-bottom: 15px !important;
}
.testimonials-results-section {
    padding: 12px 0 20px !important;
}
.cta-combined-section {
    padding: 12px 0 0 !important;
}

/* =========================================================
   CONTACT PAGE STYLES (contact.html)
   ========================================================= */

/* --- Hero Section --- */
.ct-hero-section {
    padding: 40px 0 30px;
    background: #f9f8f6;
}

.ct-hero-left {
    position: relative;
    padding-bottom: 10px;
}

.ct-hero-mountain-bg {
    position: absolute;
    top: 0;
    right: -30px;
    width: 55%;
    height: 70%;
    background: url('../images/contact-hero-bg.png') center center / cover no-repeat;
    opacity: 0.22;
    mask-image: linear-gradient(to left, black 20%, transparent 90%);
    -webkit-mask-image: linear-gradient(to left, black 20%, transparent 90%);
    pointer-events: none;
    z-index: 0;
    border-radius: 12px;
}

.ct-hero-content {
    position: relative;
    z-index: 1;
}

.ct-tag-label {
    display: inline-block;
    background: var(--bq-green);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 5px 16px;
    border-radius: 5px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.ct-hero-heading {
    font-size: 2.7rem;
    line-height: 1.2;
    color: var(--bq-navy);
    font-weight: 800;
    margin-bottom: 16px;
}
.ct-hero-heading em {
    font-style: italic;
    color: var(--bq-red);
    font-weight: 800;
}

.ct-hero-desc {
    font-size: 1rem;
    color: var(--bq-light-text);
    line-height: 1.7;
    max-width: 480px;
    margin-bottom: 0;
}

/* --- Values Row (4 box cards) --- */
.ct-values-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 28px;
    position: relative;
    z-index: 1;
}

.ct-value-item {
    background: #fff;
    border: 1px solid #e8ecef;
    border-radius: 12px;
    padding: 18px 14px;
    text-align: left;
    transition: box-shadow 0.3s, transform 0.3s;
}
.ct-value-item:hover {
    box-shadow: 0 4px 18px rgba(0,0,0,0.06);
    transform: translateY(-2px);
}

.ct-value-item h6 {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--bq-navy);
    margin-bottom: 4px;
    margin-top: 10px;
}
.ct-value-item p {
    font-size: 0.76rem;
    color: var(--bq-light-text);
    margin-bottom: 0;
    line-height: 1.45;
}

.ct-val-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}
.ct-val-icon--navy {
    background: #e8edf2;
    color: var(--bq-navy);
}
.ct-val-icon--red {
    background: #fce8e8;
    color: var(--bq-red);
}
.ct-val-icon--green {
    background: #e2f5ef;
    color: var(--bq-green);
}
.ct-val-icon--blue {
    background: #e8edf8;
    color: #3b6cb5;
}

/* --- Form Card --- */
.ct-form-card {
    background: #fff;
    border-radius: 16px;
    padding: 30px 26px;
    box-shadow: 0 6px 30px rgba(0,0,0,0.07);
    border: 1px solid #eee;
}
.ct-form-card h3 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--bq-navy);
    margin-bottom: 4px;
}
.ct-form-sub {
    font-size: 0.85rem;
    color: var(--bq-light-text);
    margin-bottom: 18px;
}

.ct-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1.5px solid #dce3e8;
    border-radius: 10px;
    padding: 0 14px;
    background: #fff;
    transition: border-color 0.3s;
}
.ct-input-wrap:focus-within {
    border-color: var(--bq-green);
    box-shadow: 0 0 0 3px rgba(27,167,133,0.08);
}
.ct-input-wrap i {
    color: var(--bq-green);
    font-size: 0.9rem;
    flex-shrink: 0;
    width: 18px;
    text-align: center;
}
.ct-input-wrap input,
.ct-input-wrap select,
.ct-input-wrap textarea {
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-main);
    font-size: 0.88rem;
    color: var(--bq-text);
    padding: 11px 0;
    width: 100%;
}
.ct-input-wrap input::placeholder,
.ct-input-wrap textarea::placeholder {
    color: #aab5bf;
}
.ct-input-wrap select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    color: #aab5bf;
}
.ct-input-wrap select:valid {
    color: var(--bq-text);
}
.ct-select-wrap {
    position: relative;
}
.ct-select-wrap::after {
    content: '\f107';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #aab5bf;
    font-size: 0.85rem;
    pointer-events: none;
}

.ct-textarea-wrap {
    align-items: flex-start;
}
.ct-textarea-wrap i {
    margin-top: 13px;
}
.ct-textarea-wrap textarea {
    resize: none;
    min-height: 70px;
}

.ct-checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.ct-checkbox-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--bq-green);
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}
.ct-checkbox-row label {
    font-size: 0.8rem;
    color: var(--bq-light-text);
    cursor: pointer;
    line-height: 1.4;
    margin: 0;
}

.ct-btn-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 20px;
    background: var(--bq-red);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: var(--font-main);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}
.ct-btn-submit:hover {
    background: #a82222;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(196,43,43,0.25);
}

/* --- Contact Info Bar --- */
.ct-info-bar-section {
    padding: 24px 0 0;
    background: #f9f8f6;
}

.ct-info-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.04);
    border: 1px solid #e8ecef;
    overflow: hidden;
}

.ct-info-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 22px 20px;
    border-right: 1px solid #f0f0f0;
}
.ct-info-item:last-child {
    border-right: none;
}

.ct-info-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    color: #fff;
}
.ct-info-icon--red {
    background: var(--bq-red);
}
.ct-info-icon--green {
    background: var(--bq-green);
}
.ct-info-icon--gold {
    background: var(--bq-gold);
}
.ct-info-icon--teal {
    background: var(--bq-green-dark);
}

.ct-info-item h6 {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--bq-red);
    margin-bottom: 2px;
}
.ct-info-item p {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--bq-navy);
    margin-bottom: 1px;
}
.ct-info-item span {
    font-size: 0.75rem;
    color: var(--bq-light-text);
    line-height: 1.4;
}

/* --- Bottom CTA Banner --- */
.ct-cta-banner-section {
    padding: 28px 0 0;
    background: #f9f8f6;
}

.ct-cta-banner {
    position: relative;
    background: linear-gradient(135deg, #0d3b2e 0%, #1a5c47 50%, #0e4636 100%);
    border-radius: 0;
    padding: 38px 0;
    overflow: hidden;
}

.ct-cta-mountain-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('../images/contact-hero-bg.png') center center / cover no-repeat;
    opacity: 0.15;
    mask-image: linear-gradient(to right, transparent 5%, black 40%, black 70%, transparent 95%);
    -webkit-mask-image: linear-gradient(to right, transparent 5%, black 40%, black 70%, transparent 95%);
    pointer-events: none;
    z-index: 1;
}

.ct-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.ct-cta-left {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
}

.ct-cta-compass-icon {
    width: 80px;
    height: 80px;
    border-radius: 16px;
    background: rgba(255,255,255,0.12);
    border: 2px solid rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ct-cta-compass-icon i {
    font-size: 2.2rem;
    color: var(--bq-gold);
    animation: ct-compass-spin 8s linear infinite;
}
@keyframes ct-compass-spin {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(15deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-15deg); }
    100% { transform: rotate(0deg); }
}

.ct-cta-text {
    flex: 1;
}

.ct-cta-quote {
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.55;
    color: #fff;
    margin-bottom: 6px;
    font-style: italic;
}
.ct-cta-quote strong {
    font-weight: 700;
    color: #fff;
}
.ct-quote-mark {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--bq-gold);
    font-style: normal;
    line-height: 0;
    vertical-align: -4px;
}

.ct-cta-subtext {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.7);
    line-height: 1.55;
    display: block;
}

.ct-cta-right {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-end;
    flex-shrink: 0;
}

.ct-btn-cta-red {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--bq-red);
    color: #fff;
    padding: 14px 32px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s;
    white-space: nowrap;
    text-decoration: none;
}
.ct-btn-cta-red:hover {
    background: #a82222;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(196,43,43,0.3);
}

.ct-btn-cta-outline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    color: var(--bq-navy);
    padding: 12px 28px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.95rem;
    border: 2px solid #fff;
    transition: all 0.3s;
    white-space: nowrap;
    text-decoration: none;
}
.ct-btn-cta-outline:hover {
    background: transparent;
    color: #fff;
    border-color: #fff;
    transform: translateY(-2px);
}

/* --- Contact Page Responsive --- */
@media (max-width: 991.98px) {
    .ct-hero-heading {
        font-size: 2rem;
    }
    .ct-values-row {
        grid-template-columns: repeat(2, 1fr);
    }
    .ct-hero-mountain-bg {
        display: none;
    }
    .ct-info-bar {
        grid-template-columns: repeat(2, 1fr);
    }
    .ct-info-item:nth-child(2) {
        border-right: none;
    }
    .ct-info-item:nth-child(1),
    .ct-info-item:nth-child(2) {
        border-bottom: 1px solid #f0f0f0;
    }
    .ct-cta-inner {
        flex-direction: column;
        text-align: center;
    }
    .ct-cta-left {
        flex-direction: column;
    }
    .ct-cta-right {
        align-items: center;
    }
}

@media (max-width: 575.98px) {
    .ct-hero-section {
        padding: 25px 0 20px;
    }
    .ct-hero-heading {
        font-size: 1.6rem;
    }
    .ct-values-row {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .ct-value-item {
        padding: 14px 10px;
    }
    .ct-form-card {
        padding: 22px 18px;
    }
    .ct-info-bar {
        grid-template-columns: 1fr;
    }
    .ct-info-item {
        border-right: none;
        border-bottom: 1px solid #f0f0f0;
    }
    .ct-info-item:last-child {
        border-bottom: none;
    }
    .ct-cta-banner {
        padding: 30px 15px;
    }
    .ct-cta-quote {
        font-size: 1rem;
    }
    .ct-btn-cta-red,
    .ct-btn-cta-outline {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================
   MOBILE INTERFACE OPTIMIZATIONS
   ========================================================= */

/* Mobile Navigation Adjustments */
@media (max-width: 991.98px) {
    .nav-arrow {
        display: none !important; /* Hide arrows in mobile menu */
    }
    .navbar-collapse {
        margin: 10px 15px 0 !important;
        padding: 15px 20px !important;
    }
    .navbar-nav {
        width: 100%;
        align-items: stretch !important; /* Make items full width in collapsed drawer */
        gap: 8px !important;
    }
    .navbar-nav .nav-item {
        width: 100%;
    }
    .navbar-nav .nav-link {
        padding: 12px 16px !important;
        border-radius: 8px;
        background: #f8f9fa;
        font-size: 0.9rem !important;
        justify-content: flex-start;
    }
    .navbar-nav .nav-link.active {
        background: rgba(27, 58, 75, 0.05);
        color: var(--bq-navy) !important;
    }
    .navbar-nav .nav-link.active::after {
        display: none !important; /* Hide line active on mobile */
    }
    .navbar-collapse .btn-diagnose {
        margin-left: 0 !important;
        margin-top: 15px;
        width: 100%;
        justify-content: center;
        padding: 12px 20px !important;
    }
}

/* Homepage Hero Section Mobile Overrides */
@media (max-width: 767.98px) {
    .hero-section {
        min-height: auto !important;
        padding: 35px 0 40px !important;
    }
    .hero-bg {
        width: 100% !important;
        opacity: 0.12 !important; /* Keep background very subtle behind text on mobile */
    }
    .hero-content {
        text-align: left;
    }
    .hero-section h1 {
        font-size: 1.95rem !important;
        line-height: 1.25 !important;
    }
    .hero-section p.lead {
        font-size: 0.9rem !important;
        line-height: 1.55 !important;
        margin-bottom: 25px !important;
    }
    .hero-content .d-flex.flex-wrap {
        flex-direction: column;
        width: 100%;
        gap: 12px !important;
    }
    .hero-content .btn-red, 
    .hero-content .btn-outline-dark {
        width: 100%;
        justify-content: center;
        padding: 12px 24px !important;
        font-size: 0.95rem !important;
    }
    .privacy-promise {
        font-size: 0.8rem !important;
    }
}

/* Home & Section Quote Banner responsiveness */
@media (max-width: 767.98px) {
    .quote-minimal {
        max-width: 100% !important;
    }
    .quote-mountain-decor {
        width: 80% !important;
        opacity: 0.12 !important; /* Lower opacity of the overlay graphics to keep text readable */
    }
    .quote-minimal-icon i {
        font-size: 1.8rem !important;
    }
    .quote-minimal-text .quote-main {
        font-size: 1rem !important;
    }
    .quote-minimal-text .quote-sub {
        font-size: 0.8rem !important;
    }
}

/* Diagnostic / Survey Page Mobile Overrides */
@media (max-width: 767.98px) {
    .diagnosis-banner {
        padding: 30px 20px !important;
    }
}
@media (max-width: 575.98px) {
    /* Stack steps vertically with left-aligned icons */
    .diagnosis-banner .d-flex.flex-wrap {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
    }
    .diagnosis-step {
        flex-direction: row !important;
        align-items: center !important;
        gap: 15px !important;
    }
    .diagnosis-step .step-icon {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.15rem !important;
    }
    .diagnosis-step div[style*="max-width:90px"] {
        max-width: none !important;
        font-size: 0.85rem !important;
        line-height: 1.35 !important;
    }
    .step-arrow {
        display: none !important; /* Hide arrows on mobile */
    }
}

/* Case Study Archive & grid adjustments */
@media (max-width: 767.98px) {
    .case-hero-section {
        padding: 20px 15px !important;
    }
    .case-hero-bg {
        width: 100% !important;
        opacity: 0.12 !important;
    }
    .case-hero-section h1 {
        font-size: 1.8rem !important;
    }
    .highlights-row {
        gap: 12px !important;
    }
    .highlights-row .highlight-item {
        min-width: 120px !important;
    }
    /* Horizontal Swiping Filter Tabs on Mobile */
    .filter-tabs-container {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 6px 8px !important;
        gap: 8px !important;
    }
    .filter-tab-btn {
        flex: 0 0 auto !important;
        padding: 6px 12px !important;
        font-size: 0.8rem !important;
    }
}

/* Case study card adjustments for mobile */
@media (max-width: 575.98px) {
    .case-card-mockup .card-content-wrap {
        padding: 18px !important;
    }
    .case-card-mockup .metrics-box {
        padding: 10px 8px !important;
        margin-bottom: 15px !important;
    }
    .case-card-mockup .metric-small-item h4 {
        font-size: 1rem !important;
    }
    .case-card-mockup .metric-small-item p {
        font-size: 0.65rem !important;
    }
    .case-card-mockup .problem-solution-section {
        gap: 12px !important;
        margin-bottom: 18px !important;
    }
    .sidebar-results-card {
        padding: 22px 18px !important;
    }
    .sidebar-results-card .stat-list-icon {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.15rem !important;
    }
    .sidebar-results-card h6 {
        font-size: 0.95rem !important;
    }
    .sidebar-results-card span {
        font-size: 0.72rem !important;
    }
}

/* Case study single detail page mobile overrides */
@media (max-width: 991.98px) {
    .card-details-header {
        padding: 22px 20px !important;
    }
    .card-details-header h1 {
        font-size: 1.7rem !important;
    }
    .case-detail-content-card {
        padding: 25px 20px !important;
    }
}
@media (max-width: 575.98px) {
    .stat-detail-item {
        padding: 10px 8px !important;
    }
    .stat-detail-item h3 {
        font-size: 1.45rem !important;
    }
    .stat-detail-item p {
        font-size: 0.72rem !important;
    }
}
@media (max-width: 991.98px) {
    .solution-hero-section {
        padding: 40px 0 25px !important;
        text-align: center;
    }
    .solution-hero-section .solution-hero-title {
        font-size: 2.1rem !important;
        line-height: 1.25 !important;
    }
    .solution-hero-section .solution-hero-desc {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        margin-bottom: 15px !important;
    }
    .solution-hero-section .solution-quick-links {
        margin-top: 10px !important;
        margin-bottom: 25px !important;
        border-top: none !important;
        padding-top: 0 !important;
    }
    .solution-hero-section .solution-quick-links::before {
        content: '';
        display: block;
        width: 80px;
        height: 1px;
        border-top: 1px dashed rgba(27, 58, 75, 0.2);
        margin: 0 auto 15px;
    }
    .hero-visual-col {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        overflow: visible !important;
        margin-top: 5px;
    }
    .solution-grid-wrapper {
        width: 320px;
        height: 320px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 10px !important;
        overflow: visible !important;
    }
    .solution-grid-container {
        display: block !important;
        flex-shrink: 0 !important;
        width: 400px !important;
        min-width: 400px !important;
        max-width: 400px !important;
        height: 400px !important;
        transform: scale(0.8);
        transform-origin: center center;
        margin: 0 !important;
        overflow: visible !important;
    }
}

@media (max-width: 575.98px) {
    .solution-hero-section {
        padding: 35px 0 20px !important;
    }
    .solution-hero-section .solution-hero-title {
        font-size: 1.85rem !important;
    }
    .solution-quick-links .quick-link-label {
        font-size: 0.8rem !important;
    }
    .solution-quick-links .quick-link-pill {
        padding: 6px 12px !important;
        font-size: 0.75rem !important;
    }
    .solution-grid-wrapper {
        width: 288px;
        height: 288px;
        margin: 0 auto !important;
    }
    .solution-grid-container {
        transform: scale(0.72) !important;
    }
    
    .solution-group-section {
        padding: 40px 0 !important;
    }
    .solution-group-section h2 {
        font-size: 1.7rem !important;
    }
    .solution-group-section .row.mb-5 {
        margin-bottom: 20px !important;
    }
    .solution-intro-quote {
        padding: 16px 20px !important;
        font-size: 0.95rem !important;
        margin-bottom: 20px !important;
        border-radius: 4px 12px 12px 4px !important;
    }
    .product-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .solution-detail-card {
        padding: 24px 20px !important;
        border-radius: 20px !important;
    }
    .solution-detail-card .meta-item {
        font-size: 0.85rem !important;
    }
    .solution-detail-card .btn-card-cta {
        padding: 13px !important;
        font-size: 0.88rem !important;
    }
    
    .training-pain-points {
        padding: 24px 20px !important;
        border-radius: 20px !important;
    }
    .training-pain-points h5 {
        font-size: 1rem !important;
    }
    .training-pain-points ul li {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
    }
    
    .solution-book-banner {
        padding: 25px 20px !important;
        text-align: center;
        margin-top: 15px !important;
    }
    .solution-book-banner .col-md-3 {
        margin-bottom: 15px;
    }
    .solution-book-banner i.fa-book-bookmark {
        font-size: 5rem !important;
    }
    .solution-book-banner h4 {
        font-size: 1.25rem !important;
    }
    .solution-book-banner p {
        font-size: 0.85rem !important;
        line-height: 1.55 !important;
    }
    .solution-book-banner .btn-red {
        width: 100%;
        justify-content: center;
    }
    
    .solution-bottom-cta-section {
        padding: 15px 0 10px !important;
    }
    .cta-banner {
        padding: 30px 20px !important;
        text-align: center;
        border-radius: 16px !important;
    }
    .cta-banner h2 {
        font-size: 1.45rem !important;
        margin-bottom: 12px !important;
    }
    .cta-banner p {
        font-size: 0.88rem !important;
        line-height: 1.5 !important;
        margin-bottom: 20px !important;
    }
    .cta-banner .btn-red {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 360px) {
    .solution-hero-section .solution-hero-title {
        font-size: 1.65rem !important;
    }
    .solution-grid-wrapper {
        width: 256px;
        height: 256px;
        margin: -5px auto !important;
    }
    .solution-grid-container {
        transform: scale(0.64) !important;
    }
}

/* ===== CUSTOM HOMEPAGE & MOBILE RESPONSIVE STYLING (2026 UPDATE) ===== */

/* Typography & Base Variables */
:root {
    --bq-gold: #D4A843;
    --bq-navy: #1B3A4B;
    --bq-red: #C42B2B;
}

/* Home Infographic Styles */
.home-infographic-page .home-hero-section {
    padding: 60px 0;
    overflow: hidden;
}

.compass-areas-visual {
    transition: all 0.3s ease;
    border-radius: 20px !important;
}
.compass-areas-visual:hover {
    box-shadow: 0 10px 30px rgba(27, 58, 75, 0.08) !important;
    transform: translateY(-2px);
}
.compass-areas-visual span.badge {
    background-color: #f8f9fa !important;
    color: var(--bq-navy) !important;
    border-color: rgba(27, 58, 75, 0.1) !important;
    font-size: 0.85rem !important;
    transition: all 0.2s ease;
}
.compass-areas-visual span.badge:hover {
    background-color: var(--bq-navy) !important;
    color: #fff !important;
}

@keyframes needleRotation {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(15deg); }
    100% { transform: rotate(0deg); }
}
.compass-needle-decor i {
    animation: needleRotation 4s ease-in-out infinite;
    display: inline-block;
}

.stats-banner-row {
    font-size: 1.05rem;
    letter-spacing: 0.5px;
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.symptom-card, .selector-box-card {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-radius: 16px !important;
}
.symptom-card:hover, .selector-box-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(27, 58, 75, 0.15) !important;
}

.step-horizontal-item {
    transition: all 0.3s ease;
}
.step-horizontal-item:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(27, 58, 75, 0.15) !important;
}

.quote-card-executive {
    background-color: #ffffff;
    border: 1px solid #eaeaea;
    transition: all 0.3s ease;
}
.quote-card-executive:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02) !important;
}

/* Touch & Inputs Optimization */
input[type="text"],
input[type="tel"],
input[type="email"],
select,
textarea {
    height: 52px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
    border: 1px solid #ddd !important;
    padding: 10px 16px !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
    border-color: var(--bq-navy) !important;
    box-shadow: 0 0 0 3px rgba(27, 58, 75, 0.1) !important;
    outline: none !important;
}

textarea {
    min-height: 140px !important;
    height: auto !important;
}

/* Touch friendly buttons */
.btn-red, .btn-outline-dark, .btn-outline-white, .btn-diagnose, .btn-diagnose-white, .btn-card-cta {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

/* Mobile Responsive Adjustments (min-width: 320px) */
@media (max-width: 767px) {
    .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    .home-hero-section h1 {
        font-size: 2rem !important;
        line-height: 1.3 !important;
    }
    .home-hero-section h1 span.italic-text {
        font-size: 2.2rem !important;
        display: inline-block;
    }
    
    .stats-banner-row p {
        font-size: 0.9rem !important;
        padding: 5px 0;
    }
    
    .display-5 {
        font-size: 2rem !important;
    }
    
    .quote-card-executive {
        padding: 30px 20px !important;
    }
    
    .quote-card-executive blockquote p {
        font-size: 1.1rem !important;
    }
    
    /* Grid stack */
    .row {
        margin-left: -10px;
        margin-right: -10px;
    }
    .col-lg-4, .col-md-6, .col-lg-3, .col-sm-12 {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    /* Spacing scales */
    section {
        padding: 48px 0 !important;
    }
    
    /* Touch optimization */
    .btn-red, .btn-outline-dark, .btn-outline-white {
        padding: 12px 24px !important;
        font-size: 0.95rem !important;
        border-radius: 12px !important;
    }
}

/* Home Interactive Compass Dial Stylings */
.home-compass-wrap {
    background-color: transparent;
}
.home-compass-point {
    position: absolute;
    width: 28px;
    height: 28px;
    z-index: 4;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.home-compass-point .dot-inner {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bq-navy);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1.15);
}
.home-compass-point:hover .dot-inner,
.home-compass-point.active-tick .dot-inner {
    transform: scale(1.25);
    background: var(--bq-red);
    box-shadow: 0 4px 10px rgba(196, 43, 43, 0.35);
}
.home-tag-btn {
    font-size: 0.78rem;
    padding: 6px 12px;
    background: #f8f9fa;
    border: 1px solid rgba(27, 58, 75, 0.1);
    border-radius: 20px;
    cursor: pointer;
    font-weight: 600;
    color: var(--bq-navy);
    transition: all 0.2s ease;
    user-select: none;
}
.home-tag-btn:hover,
.home-tag-btn.active-tick {
    background: var(--bq-navy);
    color: #fff;
    border-color: var(--bq-navy);
}

/* ================================================================
   HOMEPAGE V2 — Premium Redesign matching Demo Mockup
   ================================================================ */

/* --- HP Hero Section --- */
.hp-hero {
    padding: 70px 0 55px;
    background: linear-gradient(170deg, #d6e6df 0%, #e8f0ec 40%, #f5f8f6 70%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}
.hp-hero::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -120px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(27,167,133,0.06) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.hp-hero::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -80px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(212,168,67,0.05) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.hp-hero .container {
    position: relative;
    z-index: 2;
}
.hp-hero__subtitle {
    font-size: 0.92rem;
    color: var(--bq-green-dark);
    font-weight: 600;
    margin-bottom: 18px;
    line-height: 1.5;
}
.hp-hero__title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--bq-navy);
    line-height: 1.3;
    margin-bottom: 22px;
}
.hp-hero__title strong {
    color: var(--bq-navy);
    font-weight: 800;
    font-style: italic;
    display: block;
}
.hp-hero__desc {
    font-size: 0.95rem;
    color: #556;
    line-height: 1.75;
    margin-bottom: 30px;
    max-width: 540px;
}
.hp-hero__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}
.hp-hero__note {
    font-size: 0.85rem;
    color: var(--bq-light-text);
    font-weight: 500;
    margin: 0;
    font-style: italic;
}
.hp-hero__note i {
    color: var(--bq-red);
}

/* --- HP Buttons --- */
.hp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 26px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    white-space: nowrap;
    border: 2px solid transparent;
    min-height: 48px;
    letter-spacing: 0.2px;
}
.hp-btn--dark {
    background: var(--bq-navy);
    color: #fff;
    border-color: var(--bq-navy);
    box-shadow: 0 4px 14px rgba(27,58,75,0.2);
}
.hp-btn--dark:hover {
    background: #0f2530;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(27,58,75,0.3);
}
.hp-btn--outline {
    background: #fff;
    color: var(--bq-navy);
    border-color: var(--bq-navy);
}
.hp-btn--outline:hover {
    background: var(--bq-navy);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(27,58,75,0.15);
}
.hp-btn--red {
    background: var(--bq-red);
    color: #fff;
    border-color: var(--bq-red);
    box-shadow: 0 4px 14px rgba(196,43,43,0.25);
}
.hp-btn--red:hover {
    background: #a82222;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(196,43,43,0.35);
}
.hp-btn--outline-white {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,0.7);
}
.hp-btn--outline-white:hover {
    background: #fff;
    color: var(--bq-navy);
    transform: translateY(-3px);
    border-color: #fff;
}

/* --- HP Compass Card --- */
.hp-compass-card {
    background: #fff;
    border: 1px solid rgba(27,58,75,0.08);
    border-radius: 20px;
    padding: 28px 28px 24px;
    box-shadow: 0 12px 48px rgba(27,58,75,0.07);
}
.hp-compass-card__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--bq-navy);
    margin-bottom: 2px;
    font-style: italic;
    line-height: 1.4;
}
.hp-compass-card__sub {
    font-size: 0.78rem;
    color: var(--bq-light-text);
    margin-bottom: 16px;
}

/* --- Compass Wheel --- */
.hp-compass-wheel {
    position: relative;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding-bottom: 100%;
}
.hp-compass-lines {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
    pointer-events: none;
}
.hp-compass-center {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 86px; height: 86px;
    border-radius: 50%;
    background: linear-gradient(145deg, #fff, #f0f4f2);
    border: 3px solid var(--bq-navy);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    z-index: 5;
    box-shadow: 0 6px 24px rgba(27,58,75,0.15), inset 0 2px 6px rgba(255,255,255,0.8);
}
.hp-compass-center__label {
    font-size: 1.05rem; font-weight: 800;
    color: var(--bq-navy); line-height: 1.1;
}
.hp-compass-center__sublabel {
    font-size: 0.7rem; font-weight: 600;
    color: var(--bq-red); line-height: 1; margin-top: 1px;
}

/* --- Compass Dots --- */
.hp-dot {
    position: absolute; z-index: 4;
    display: flex; align-items: center; gap: 6px;
    cursor: default; transition: all 0.25s ease;
}
.hp-dot__circle {
    display: block; width: 16px; height: 16px;
    border-radius: 50%; flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    border: 2px solid #fff;
}
.hp-dot:hover .hp-dot__circle {
    transform: scale(1.4);
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.hp-dot__label {
    font-size: 0.75rem; font-weight: 600;
    color: var(--bq-navy); white-space: nowrap;
    padding: 5px 12px; background: #fff;
    border: 1px solid rgba(27,58,75,0.1);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    line-height: 1.2; transition: all 0.25s ease;
}
.hp-dot:hover .hp-dot__label {
    background: var(--bq-navy); color: #fff;
    border-color: var(--bq-navy);
    box-shadow: 0 4px 16px rgba(27,58,75,0.2);
    transform: translateY(-2px);
}

/* --- HP Stats Banner --- */
.hp-stats {
    background: linear-gradient(135deg, #0A221C 0%, #0d3028 100%);
    padding: 30px 0; text-align: center;
    position: relative; border-top: 3px solid var(--bq-gold);
}
.hp-stats .container { position: relative; z-index: 2; }
.hp-stats__text {
    color: #fff; font-size: 1.1rem;
    font-weight: 600; margin-bottom: 6px; line-height: 1.5;
}
.hp-stats__text strong { color: var(--bq-gold); font-weight: 700; }
.hp-stats__sub {
    color: rgba(255,255,255,0.55); font-size: 0.88rem;
    margin-bottom: 0; font-style: italic;
}

/* --- HP Sections General --- */
.hp-section { padding: 64px 0; }
.hp-section__header { margin-bottom: 36px; }
.hp-section__label {
    display: inline-block; font-size: 0.78rem;
    font-weight: 700; color: var(--bq-green-dark);
    text-transform: uppercase; letter-spacing: 1.5px;
    margin-bottom: 12px; padding: 5px 14px;
    background: rgba(27,167,133,0.08); border-radius: 6px;
    border: 1px solid rgba(27,167,133,0.12);
}
.hp-section__title {
    font-size: 1.85rem; font-weight: 800;
    color: var(--bq-navy); line-height: 1.3; margin-bottom: 0;
}

/* --- Section 01: Symptoms --- */
.hp-symptoms {
    background: #fff; border-top: 1px solid #eef1f0;
}
.hp-symptom-card {
    display: flex; align-items: flex-start; gap: 16px;
    padding: 26px 24px; border: 1px solid rgba(27,58,75,0.08);
    border-radius: 16px; background: #fff;
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    height: 100%; position: relative; overflow: hidden;
}
.hp-symptom-card::before {
    content: ''; position: absolute; top: 0; left: 0;
    width: 4px; height: 0;
    background: var(--bq-navy); border-radius: 0 4px 4px 0;
    transition: height 0.3s ease;
}
.hp-symptom-card:hover::before { height: 100%; }
.hp-symptom-card:hover {
    box-shadow: 0 12px 36px rgba(27,58,75,0.06);
    border-color: rgba(27,58,75,0.12);
    transform: translateY(-4px);
}
.hp-symptom-card__dot {
    width: 14px; height: 14px; border-radius: 50%;
    flex-shrink: 0; margin-top: 5px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.hp-symptom-card__body h4 {
    font-size: 1.02rem; font-weight: 700;
    color: var(--bq-navy); margin-bottom: 8px; line-height: 1.35;
}
.hp-symptom-card__body p {
    font-size: 0.88rem; color: var(--bq-light-text);
    margin-bottom: 0; line-height: 1.6; font-style: italic;
}

/* --- Section 02: About / 3-Step Flow --- */
.hp-about {
    background: linear-gradient(180deg, #f7faf9 0%, #fff 100%);
    border-top: 1px solid #eef1f0;
}
.hp-about__desc {
    font-size: 0.95rem; color: #556;
    line-height: 1.75; margin-bottom: 40px; max-width: 780px;
}
.hp-steps-flow {
    display: flex; align-items: stretch; gap: 0; width: 100%;
}
.hp-step-box {
    flex: 1; border: 1.5px solid rgba(27,58,75,0.1);
    border-radius: 16px; padding: 28px 24px;
    background: #fff;
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.hp-step-box:hover {
    box-shadow: 0 10px 30px rgba(27,58,75,0.06);
    border-color: var(--bq-green); transform: translateY(-4px);
}
.hp-step-box__title {
    font-size: 1.25rem; font-weight: 800;
    color: var(--bq-navy); margin-bottom: 10px;
    display: flex; align-items: center; gap: 8px;
}
.hp-step-box__title::before {
    content: ''; display: inline-block;
    width: 8px; height: 8px; background: var(--bq-green);
    border-radius: 50%; flex-shrink: 0;
}
.hp-step-box__desc {
    font-size: 0.85rem; color: var(--bq-light-text);
    margin-bottom: 0; line-height: 1.6;
}
.hp-step-arrow {
    display: flex; align-items: center; padding: 0 18px;
    color: var(--bq-green); font-size: 1.15rem;
    opacity: 0.5; flex-shrink: 0;
}

/* --- Section 03 & 04 Dual --- */
.hp-dual {
    background: #fff; border-top: 1px solid #eef1f0;
}
.hp-audience-list {
    margin-top: 28px; display: flex;
    flex-direction: column; gap: 32px;
}
.hp-audience-item {
    padding-left: 18px; border-left: 3px solid var(--bq-green);
}
.hp-audience-item:nth-child(2) { border-left-color: var(--bq-red); }
.hp-audience-item:nth-child(3) { border-left-color: var(--bq-gold); }
.hp-audience-item h4 {
    font-size: 1.08rem; font-weight: 700;
    color: var(--bq-navy); margin-bottom: 6px;
}
.hp-audience-item p {
    font-size: 0.88rem; color: var(--bq-light-text);
    margin-bottom: 0; line-height: 1.6;
}
.hp-ecosystem-card {
    background: linear-gradient(155deg, #f5f9f8 0%, #eef4f2 100%);
    border: 1.5px solid rgba(27,167,133,0.12);
    border-radius: 22px; padding: 38px 34px;
    height: 100%; position: relative; overflow: hidden;
}
.hp-ecosystem-card::before {
    content: ''; position: absolute; top: -40px; right: -40px;
    width: 180px; height: 180px;
    background: radial-gradient(circle, rgba(27,167,133,0.06) 0%, transparent 70%);
    border-radius: 50%; pointer-events: none;
}
.hp-eco-list {
    display: flex; flex-direction: column; gap: 16px;
    margin-top: 28px; position: relative; z-index: 2;
}
.hp-eco-item {
    display: flex; align-items: flex-start; gap: 16px;
    padding: 20px 22px; background: #fff;
    border: 1px solid rgba(27,58,75,0.06); border-radius: 14px;
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}
.hp-eco-item:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,0.06);
    border-color: rgba(27,167,133,0.2); transform: translateX(6px);
}
.hp-eco-item__icon {
    width: 38px; height: 38px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 0.85rem; font-weight: 700;
}
.hp-eco-item__body h5 {
    font-size: 1rem; font-weight: 700;
    color: var(--bq-navy); margin-bottom: 4px;
    text-decoration: underline;
    text-decoration-color: rgba(27,167,133,0.3);
    text-underline-offset: 3px;
}
.hp-eco-item__body p {
    font-size: 0.85rem; color: var(--bq-light-text);
    margin-bottom: 0; line-height: 1.55;
}

/* --- Section 05: Belief --- */
.hp-belief {
    background: linear-gradient(180deg, #f7faf9 0%, #fff 100%);
    border-top: 1px solid #eef1f0;
}
.hp-belief__desc {
    font-size: 0.95rem; color: #556;
    line-height: 1.75; margin-bottom: 36px; max-width: 800px;
}
.hp-belief-pills {
    display: flex; align-items: center; gap: 0; flex-wrap: wrap;
}
.hp-belief-pill { flex: 1; min-width: 180px; }
.hp-belief-pill span {
    display: block; text-align: center;
    padding: 18px 22px;
    border: 1.5px solid rgba(27,58,75,0.1);
    border-radius: 14px; font-size: 0.95rem;
    font-weight: 700; color: var(--bq-navy);
    background: #fff;
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}
.hp-belief-pill span:hover {
    background: var(--bq-navy); color: #fff;
    border-color: var(--bq-navy);
    box-shadow: 0 8px 28px rgba(27,58,75,0.15);
    transform: translateY(-4px);
}
.hp-belief-pill-arrow {
    display: flex; align-items: center; padding: 0 16px;
    color: var(--bq-green); opacity: 0.45;
    font-size: 0.9rem; flex-shrink: 0;
}

/* --- Bottom CTA Bar --- */
.hp-bottom-cta {
    background: linear-gradient(135deg, #0A221C 0%, #0d3028 100%);
    padding: 56px 0 50px; text-align: center;
    position: relative; border-top: 3px solid var(--bq-red);
}
.hp-bottom-cta .container { position: relative; z-index: 2; }
.hp-bottom-cta__title {
    font-size: 1.65rem; font-weight: 800;
    color: #fff; margin-bottom: 14px;
    line-height: 1.35; font-style: italic;
}
.hp-bottom-cta__desc {
    font-size: 0.92rem; color: rgba(255,255,255,0.55);
    margin-bottom: 32px; max-width: 680px;
    margin-left: auto; margin-right: auto; line-height: 1.65;
}
.hp-bottom-cta__buttons {
    display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
}

/* ===== HOMEPAGE V2 RESPONSIVE ===== */
@media (max-width: 991px) {
    .hp-hero { padding: 48px 0 36px; }
    .hp-hero__title { font-size: 2rem; }
    .hp-compass-wheel { max-width: 360px; }
    .hp-compass-center { width: 76px; height: 76px; }
    .hp-ecosystem-card { padding: 28px 24px; }
    .hp-section__title { font-size: 1.6rem; }
}

@media (max-width: 767px) {
    .hp-hero { padding: 36px 0 28px; }
    .hp-hero__title { font-size: 1.65rem; line-height: 1.3; }
    .hp-hero__title strong { display: inline; }
    .hp-hero__desc { font-size: 0.9rem; }
    .hp-hero__buttons { flex-direction: column; gap: 10px; }
    .hp-hero__buttons .hp-btn { width: 100%; justify-content: center; }
    .hp-compass-card { margin-top: 28px; padding: 22px 20px 18px; }
    .hp-compass-wheel { max-width: 320px; }
    .hp-compass-center { width: 66px; height: 66px; }
    .hp-compass-center__label { font-size: 0.9rem; }
    .hp-dot__label { font-size: 0.68rem; padding: 3px 8px; }
    .hp-dot__circle { width: 12px; height: 12px; }
    .hp-stats { padding: 24px 0; }
    .hp-stats__text { font-size: 0.92rem; }
    .hp-section { padding: 44px 0; }
    .hp-section__title { font-size: 1.45rem; }
    .hp-steps-flow { flex-direction: column; gap: 12px; }
    .hp-step-arrow { justify-content: center; padding: 6px 0; transform: rotate(90deg); }
    .hp-belief-pills { flex-direction: column; gap: 10px; }
    .hp-belief-pill { width: 100%; }
    .hp-belief-pill-arrow { justify-content: center; padding: 4px 0; transform: rotate(90deg); }
    .hp-bottom-cta { padding: 40px 0 36px; }
    .hp-bottom-cta__title { font-size: 1.35rem; }
    .hp-bottom-cta__buttons { flex-direction: column; align-items: center; }
    .hp-bottom-cta__buttons .hp-btn { width: 100%; }
    .hp-audience-list { margin-top: 20px; gap: 24px; }
    .hp-ecosystem-card { margin-top: 24px; }
    .hp-eco-item:hover { transform: none; }
    .hp-symptom-card { padding: 22px 20px; }
    .hp-step-box { padding: 22px 20px; }
}

@media (max-width: 375px) {
    .hp-hero__title { font-size: 1.45rem; }
    .hp-compass-wheel { max-width: 280px; }
    .hp-compass-center { width: 58px; height: 58px; }
    .hp-compass-center__label { font-size: 0.8rem; }
    .hp-dot__label { font-size: 0.62rem; padding: 2px 6px; }
    .hp-dot__circle { width: 10px; height: 10px; }
}

/* ==========================================================================
   MODERN CASE STUDY CARD & INTERACTIVE FILTERS (CSS ADDITIONS)
   ========================================================================== */

/* Filter Box Cards */
.filter-box-card {
    transition: all 0.3s ease;
    border: 1px solid rgba(27, 58, 75, 0.08) !important;
}
.filter-box-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04) !important;
}
.filter-badge-btn {
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

/* Color schemes for filter buttons */
.filter-badge-btn.green-outline {
    border: 1px solid #1BA785 !important;
    color: #1BA785 !important;
    background: transparent !important;
}
.filter-badge-btn.green-outline:hover,
.filter-badge-btn.green-outline.active {
    background: #1BA785 !important;
    color: #fff !important;
}

.filter-badge-btn.red-outline {
    border: 1px solid #C42B2B !important;
    color: #C42B2B !important;
    background: transparent !important;
}
.filter-badge-btn.red-outline:hover,
.filter-badge-btn.red-outline.active {
    background: #C42B2B !important;
    color: #fff !important;
}

.filter-badge-btn.navy-outline {
    border: 1px solid #1B3A4B !important;
    color: #1B3A4B !important;
    background: transparent !important;
}
.filter-badge-btn.navy-outline:hover,
.filter-badge-btn.navy-outline.active {
    background: #1B3A4B !important;
    color: #fff !important;
}

.filter-badge-btn.brown-outline {
    border: 1px solid #855734 !important;
    color: #855734 !important;
    background: transparent !important;
}
.filter-badge-btn.brown-outline:hover,
.filter-badge-btn.brown-outline.active {
    background: #855734 !important;
    color: #fff !important;
}

/* Modern Card Layout Styling */
.flex-card-modern {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 20px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.flex-card-modern:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(27, 58, 75, 0.08);
}

/* Card Header Banner */
.card-header-banner {
    padding: 20px 24px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.card-header-banner.green { background: #0A6C58; }
.card-header-banner.red { background: #C42B2B; }
.card-header-banner.navy { background: #1B3A4B; }
.card-header-banner.brown { background: #855734; }

.card-banner-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #fff !important;
    margin: 0;
    line-height: 1.25;
}
.card-banner-sub {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}

/* Card Body Content */
.card-body-content-wrap {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Card Highlight Section */
.card-highlight-section {
    margin-bottom: 20px;
}
.highlight-title {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
}
.highlight-title.green { color: #0A6C58; background: rgba(10, 108, 88, 0.1); }
.highlight-title.red { color: #C42B2B; background: rgba(196, 43, 43, 0.1); }
.highlight-title.navy { color: #1B3A4B; background: rgba(27, 58, 75, 0.1); }
.highlight-title.brown { color: #855734; background: rgba(133, 87, 52, 0.1); }

.highlight-text {
    font-size: 0.95rem;
    color: var(--bq-text);
    font-weight: 600;
    line-height: 1.5;
    margin: 0;
}

/* Problem-Solution section */
.problem-solution-section {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 24px;
}
.ps-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ps-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--bq-navy);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ps-title.red-accent {
    color: var(--bq-red);
}
.ps-text {
    font-size: 0.88rem;
    color: var(--bq-light-text);
    margin: 0;
    line-height: 1.5;
}

/* Metrics pills row */
.metrics-row-container {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: auto;
    margin-bottom: 20px;
}
.metric-pill {
    flex: 1;
    min-width: 90px;
    background: #f8f9fa;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.metric-pill:hover {
    background: #f1f3f5;
    border-color: #e9ecef;
}
.metric-val {
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: 2px;
}
.metric-val.green { color: #0A6C58; }
.metric-val.red { color: #C42B2B; }
.metric-val.navy { color: #1B3A4B; }
.metric-val.brown { color: #855734; }

.metric-lbl {
    font-size: 0.7rem;
    color: var(--bq-light-text);
    font-weight: 500;
    line-height: 1.2;
}

/* Card footer link */
.card-footer-action {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
}
.view-detail-link {
    font-size: 0.85rem;
    font-weight: 700;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
}
.view-detail-link.green { color: #0A6C58; }
.view-detail-link.red { color: #C42B2B; }
.view-detail-link.navy { color: #1B3A4B; }
.view-detail-link.brown { color: #855734; }

.view-detail-link:hover {
    transform: translateX(4px);
}

/* Mobile & Tablet Responsive overrides */
@media (max-width: 767px) {
    .filter-box-card {
        padding: 12px !important;
    }
    .filter-box-title {
        font-size: 0.88rem !important;
        margin-bottom: 8px !important;
    }
    .filter-badge-btn {
        padding: 5px 10px !important;
        font-size: 0.78rem !important;
    }
    .card-banner-title {
        font-size: 1.15rem !important;
    }
    .card-body-content-wrap {
        padding: 16px !important;
    }
    .highlight-text {
        font-size: 0.88rem !important;
    }
    .metrics-row-container {
        gap: 8px !important;
    }
    .metric-pill {
        padding: 8px !important;
        min-width: 80px !important;
    }
    .metric-val {
        font-size: 1rem !important;
    }
    .metric-lbl {
        font-size: 0.65rem !important;
    }
}

/* Custom premium styles for Case study cards & filters (2026 update) */
.case-card-mockup.flex-card-modern {
    background: #fff;
    border: 1px solid #eef2f5;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.case-card-mockup.flex-card-modern:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(13, 92, 74, 0.08);
    border-color: rgba(27, 167, 133, 0.15);
}

.case-card-mockup .card-header-banner {
    padding: 24px 28px;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.case-card-mockup .card-header-banner::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 120px;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.05));
    pointer-events: none;
}

/* Color thematic headers */
.case-card-mockup .card-header-banner.green {
    background: linear-gradient(135deg, #0d5c4a 0%, #1BA785 100%);
}
.case-card-mockup .card-header-banner.red {
    background: linear-gradient(135deg, #a72828 0%, #e04444 100%);
}
.case-card-mockup .card-header-banner.navy {
    background: linear-gradient(135deg, #102a3a 0%, #204c66 100%);
}
.case-card-mockup .card-header-banner.brown {
    background: linear-gradient(135deg, #6c4627 0%, #9e6d46 100%);
}

.case-card-mockup .card-banner-title {
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0 0 6px 0;
    line-height: 1.25;
    letter-spacing: -0.3px;
    color: #fff !important;
}

.case-card-mockup .card-banner-sub {
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    display: inline-block;
    color: #fff !important;
}

.case-card-mockup .card-body-content-wrap {
    padding: 28px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Highlight section */
.case-card-mockup .card-highlight-section {
    background: #f8fafc;
    border-left: 4px solid;
    padding: 16px 20px;
    border-radius: 0 12px 12px 0;
    margin-bottom: 24px;
    transition: all 0.3s ease;
}

.case-card-mockup .card-highlight-section:has(.highlight-title.green) { border-left-color: #1BA785; }
.case-card-mockup .card-highlight-section:has(.highlight-title.red) { border-left-color: #C42B2B; }
.case-card-mockup .card-highlight-section:has(.highlight-title.navy) { border-left-color: #1B3A4B; }
.case-card-mockup .card-highlight-section:has(.highlight-title.brown) { border-left-color: #855734; }

.case-card-mockup .highlight-title {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    display: inline-block;
    margin-bottom: 6px;
}
.case-card-mockup .highlight-title.green { color: #0d5c4a; }
.case-card-mockup .highlight-title.red { color: #a72828; }
.case-card-mockup .highlight-title.navy { color: #102a3a; }
.case-card-mockup .highlight-title.brown { color: #6c4627; }

.case-card-mockup .highlight-text {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--bq-navy);
    line-height: 1.5;
    margin: 0;
}

/* Problem & Solution block */
.case-card-mockup .problem-solution-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.case-card-mockup .ps-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #64748b;
    display: block;
    margin-bottom: 6px;
}

.case-card-mockup .ps-title.red-accent {
    color: var(--bq-red);
}

.case-card-mockup .ps-text {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #475569;
    margin: 0;
}

/* Metrics Row Container styling */
.case-card-mockup .metrics-row-container {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.case-card-mockup .metric-pill {
    flex: 1;
    min-width: 100px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.01);
    transition: all 0.3s ease;
}

.case-card-mockup .metric-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.03);
    border-color: #cbd5e1;
    background: #fff;
}

.case-card-mockup .metric-val {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 4px;
    line-height: 1;
}

.case-card-mockup .metric-val.green { color: #0A6C58; }
.case-card-mockup .metric-val.red { color: #C42B2B; }
.case-card-mockup .metric-val.navy { color: #1B3A4B; }
.case-card-mockup .metric-val.brown { color: #855734; }

.case-card-mockup .metric-lbl {
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 600;
    line-height: 1.2;
}

/* Footer detail link */
.case-card-mockup .card-footer-action {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
}

.case-card-mockup .view-detail-link {
    font-size: 0.9rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.case-card-mockup .view-detail-link.green { color: #0A6C58; }
.case-card-mockup .view-detail-link.red { color: #C42B2B; }
.case-card-mockup .view-detail-link.navy { color: #1B3A4B; }
.case-card-mockup .view-detail-link.brown { color: #855734; }

.case-card-mockup .view-detail-link:hover {
    transform: translateX(4px);
}

/* Bottom Teal Banner bright gradient */
.bottom-banner-teal {
    background: linear-gradient(135deg, #0d5c4a 0%, #1BA785 100%) !important;
    box-shadow: 0 15px 35px rgba(27, 167, 133, 0.15);
}

/* Load more button transition and beauty */
#load-more-cases-btn {
    border: 2px solid var(--bq-navy);
    background: transparent;
    color: var(--bq-navy);
    font-weight: 700;
    border-radius: 12px;
    padding: 12px 30px;
    font-size: 0.95rem;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
}

#load-more-cases-btn:hover {
    background: var(--bq-navy);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(27, 58, 75, 0.15);
}

#load-more-cases-btn:active {
    transform: translateY(0);
}

/* Filter Badge Buttons styling (2026 update) */
.filter-badge-btn {
    padding: 6px 16px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    border-radius: 20px !important;
    background: transparent !important;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    cursor: pointer;
    outline: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.filter-badge-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Green Outline (Nganh) */
.filter-badge-btn.green-outline {
    border: 1px solid #1BA785 !important;
    color: #1BA785 !important;
}
.filter-badge-btn.green-outline:hover,
.filter-badge-btn.green-outline.active {
    background: #1BA785 !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(27, 167, 133, 0.25) !important;
}

/* Red Outline (Nghen) */
.filter-badge-btn.red-outline {
    border: 1px solid #C42B2B !important;
    color: #C42B2B !important;
}
.filter-badge-btn.red-outline:hover,
.filter-badge-btn.red-outline.active {
    background: #C42B2B !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(196, 43, 43, 0.25) !important;
}

/* Navy Outline (Ketqua) */
.filter-badge-btn.navy-outline {
    border: 1px solid #1B3A4B !important;
    color: #1B3A4B !important;
}
.filter-badge-btn.navy-outline:hover,
.filter-badge-btn.navy-outline.active {
    background: #1B3A4B !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(27, 58, 75, 0.25) !important;
}

/* Brown Outline (Giaiphap) */
.filter-badge-btn.brown-outline {
    border: 1px solid #855734 !important;
    color: #855734 !important;
}
.filter-badge-btn.brown-outline:hover,
.filter-badge-btn.brown-outline.active {
    background: #855734 !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(133, 87, 52, 0.25) !important;
}

/* ===== PREMIUM DARK CASE STUDY HERO BANNER ===== */
.case-hero-section {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 10% 20%, rgba(27, 167, 133, 0.12) 0%, transparent 50%),
                radial-gradient(circle at 90% 80%, rgba(196, 43, 43, 0.12) 0%, transparent 50%),
                linear-gradient(135deg, #07131F 0%, #0F243A 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 24px !important;
    padding: 50px 45px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25) !important;
    transition: all 0.4s ease;
}
.case-hero-section:hover {
    box-shadow: 0 30px 60px rgba(13, 92, 74, 0.12) !important;
    border-color: rgba(27, 167, 133, 0.18) !important;
}

.case-hero-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    z-index: 0;
    opacity: 0.15;
    pointer-events: none;
}
.case-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
    mask-image: linear-gradient(to left, black 30%, transparent 100%);
    -webkit-mask-image: linear-gradient(to left, black 30%, transparent 100%);
}

.case-hero-badge {
    display: inline-block;
    background: rgba(27, 167, 133, 0.12);
    border: 1px solid rgba(27, 167, 133, 0.25);
    color: #2bd1aa;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.case-hero-title {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.25;
    color: #ffffff !important;
    margin-top: 10px;
    margin-bottom: 16px;
    letter-spacing: -0.5px;
}
.case-hero-title .text-accent {
    color: #e04444;
}

.case-hero-desc {
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8) !important;
    max-width: 600px;
    margin-bottom: 30px;
}

.case-hero-actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.btn-teal-solid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #1BA785;
    color: #ffffff !important;
    border: 2px solid #1BA785;
    padding: 12px 28px;
    font-size: 0.92rem;
    font-weight: 700;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 4px 15px rgba(27, 167, 133, 0.25);
    cursor: pointer;
}
.btn-teal-solid:hover {
    background: #15856a;
    border-color: #15856a;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(27, 167, 133, 0.35);
    color: #ffffff !important;
}
.btn-teal-solid:active {
    transform: translateY(0);
}

.btn-white-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.2);
    padding: 12px 28px;
    font-size: 0.92rem;
    font-weight: 700;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    cursor: pointer;
}
.btn-white-outline:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
    color: #ffffff !important;
}
.btn-white-outline:active {
    transform: translateY(0);
}

/* Hero Banner Breadcrumbs styling */
.case-hero-breadcrumbs {
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 20px;
    letter-spacing: 0.3px;
}
.case-hero-breadcrumbs a {
    color: rgba(255, 255, 255, 0.65) !important;
    text-decoration: none;
    transition: color 0.25s ease;
}
.case-hero-breadcrumbs a:hover {
    color: #ffffff !important;
}

/* Growth Evidence Card on Right - Glassmorphic Dark Theme */
.growth-evidence-card {
    background: rgba(15, 36, 58, 0.45) !important;
    backdrop-filter: blur(10px);
    border-radius: 24px;
    padding: 26px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.evidence-card-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #ffffff !important;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding-bottom: 14px;
}

.evidence-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.evidence-item {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 14px;
    padding: 16px;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex;
    flex-direction: column;
}
.evidence-item:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(27, 167, 133, 0.3) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
}
.evidence-item.span-2 {
    grid-column: span 2;
}

.evidence-val {
    font-size: 1.32rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 5px;
    letter-spacing: -0.3px;
}
.evidence-lbl {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6) !important;
    line-height: 1.35;
}

/* Color thematic styles for stats values - bright neon contrast */
.evidence-item.item-green .evidence-val { color: #2bd1aa !important; }
.evidence-item.item-red .evidence-val { color: #ff6b6b !important; }
.evidence-item.item-navy .evidence-val { color: #38bdf8 !important; }
.evidence-item.item-brown .evidence-val { color: #fdba74 !important; }
.evidence-item.item-gold .evidence-val { color: #fde047 !important; }

/* Responsive styles for Case Study Hero */
@media (max-width: 991px) {
    .case-hero-section {
        padding: 40px 30px !important;
        border-radius: 20px !important;
    }
    .case-hero-title {
        font-size: 2.2rem;
    }
}

@media (max-width: 767px) {
    .case-hero-section {
        padding: 30px 20px !important;
        text-align: center;
    }
    .case-hero-badge {
        font-size: 0.72rem;
    }
    .case-hero-title {
        font-size: 1.75rem;
    }
    .case-hero-desc {
        font-size: 0.9rem;
        margin-left: auto;
        margin-right: auto;
    }
    .case-hero-actions {
        justify-content: center;
        gap: 10px;
    }
    .btn-teal-solid, .btn-white-outline {
        width: 100%;
        padding: 10px 20px;
        font-size: 0.88rem;
    }
    .growth-evidence-card {
        padding: 18px;
    }
    .evidence-card-title {
        font-size: 1rem;
        margin-bottom: 15px;
    }
    .evidence-grid {
        grid-template-columns: 1fr;
    }
    .evidence-item.span-2 {
        grid-column: span 1;
    }
    .evidence-val {
        font-size: 1.05rem;
    }
}

/* ===== 2026 UNIFIED SELECT FILTERS ===== */
.filter-panel-card {
    border-color: rgba(27, 58, 75, 0.08) !important;
}
.filter-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--bq-navy);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
}
.filter-select-custom {
    height: 52px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    border: 1px solid #cbd5e1 !important;
    color: var(--bq-navy) !important;
    background-color: #f8fafc !important;
    padding-left: 14px !important;
    padding-right: 36px !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231B3A4B' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px 12px !important;
    appearance: none !important;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    cursor: pointer;
}
.filter-select-custom:focus {
    border-color: var(--bq-navy) !important;
    box-shadow: 0 0 0 3px rgba(27, 58, 75, 0.1) !important;
    background-color: #fff !important;
    outline: none !important;
}
.filter-select-custom.green-theme:focus { border-color: #1BA785 !important; box-shadow: 0 0 0 3px rgba(27, 167, 133, 0.1) !important; }
.filter-select-custom.red-theme:focus { border-color: #C42B2B !important; box-shadow: 0 0 0 3px rgba(196, 43, 43, 0.1) !important; }
.filter-select-custom.navy-theme:focus { border-color: #1B3A4B !important; box-shadow: 0 0 0 3px rgba(27, 58, 75, 0.1) !important; }
.filter-select-custom.brown-theme:focus { border-color: #855734 !important; box-shadow: 0 0 0 3px rgba(133, 87, 52, 0.1) !important; }

/* ===== CASE STUDY CARD PREMIER STYLE ===== */
.flex-card-modern {
    background: #ffffff;
    border: 1px solid rgba(27, 58, 75, 0.08);
    border-radius: 20px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.02);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.flex-card-modern:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 36px rgba(27, 58, 75, 0.07);
    border-color: rgba(27, 167, 133, 0.15);
}

.card-header-banner {
    padding: 20px 24px;
    color: #ffffff !important;
    position: relative;
    overflow: hidden;
}
.card-header-banner::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 120px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.08));
    pointer-events: none;
}
.card-header-banner.green { background: linear-gradient(135deg, #0d5c4a 0%, #15856a 100%); }
.card-header-banner.red { background: linear-gradient(135deg, #A82222 0%, #C42B2B 100%); }
.card-header-banner.navy { background: linear-gradient(135deg, #0F243A 0%, #1B3A4B 100%); }
.card-header-banner.brown { background: linear-gradient(135deg, #6c4627 0%, #855734 100%); }

.card-banner-title {
    font-size: 1.28rem;
    font-weight: 800;
    color: #ffffff !important;
    margin: 0 0 4px 0;
    line-height: 1.25;
}
.card-banner-sub {
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.82) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-body-content-wrap {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 20px;
}

.card-highlight-section {
    background: #f8fafc;
    border-radius: 14px;
    padding: 16px 20px;
    border-left: 4px solid #cbd5e1;
    transition: all 0.3s ease;
}
.card-highlight-section:hover {
    background: #f1f5f9;
}
.card-highlight-section .highlight-title {
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
}
.card-highlight-section .highlight-title.green { color: #15856a; }
.card-highlight-section .highlight-title.red { color: #C42B2B; }
.card-highlight-section .highlight-title.navy { color: #1B3A4B; }
.card-highlight-section .highlight-title.brown { color: #855734; }

.card-highlight-section:has(.green) { border-left-color: #15856a; }
.card-highlight-section:has(.red) { border-left-color: #C42B2B; }
.card-highlight-section:has(.navy) { border-left-color: #1B3A4B; }
.card-highlight-section:has(.brown) { border-left-color: #855734; }

.highlight-text {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--bq-navy);
    line-height: 1.5;
    margin: 0;
}

.problem-solution-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 20px;
}

.ps-item .ps-title {
    display: block;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    margin-bottom: 6px;
}
.ps-item .ps-title.red-accent {
    color: var(--bq-red);
}
.ps-text {
    font-size: 0.85rem;
    color: #475569;
    line-height: 1.5;
    margin: 0;
}

.metrics-row-container {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-top: auto;
}
.metric-pill {
    flex: 1;
    text-align: center;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    padding: 12px 6px;
    transition: all 0.3s ease;
}
.metric-pill:hover {
    background: #fff;
    border-color: #cbd5e1;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}
.metric-val {
    display: block;
    font-size: 1.18rem;
    font-weight: 800;
    margin-bottom: 2px;
    line-height: 1.25;
}
.metric-val.green { color: #15856a; }
.metric-val.red { color: #C42B2B; }
.metric-val.navy { color: #1B3A4B; }
.metric-val.brown { color: #855734; }

.metric-lbl {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    color: #64748b;
    line-height: 1.2;
}

.card-footer-action {
    border-top: 1px solid #f1f5f9;
    padding-top: 16px;
    margin-top: 8px;
}
.view-detail-link {
    display: inline-flex;
    align-items: center;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none !important;
    transition: all 0.25s ease;
}
.view-detail-link.green { color: #15856a; }
.view-detail-link.red { color: #C42B2B; }
.view-detail-link.navy { color: #1B3A4B; }
.view-detail-link.brown { color: #855734; }

.view-detail-link:hover {
    transform: translateX(4px);
}
.view-detail-link.green:hover { color: #0d5c4a; }
.view-detail-link.red:hover { color: #A82222; }
.view-detail-link.navy:hover { color: #0F243A; }
.view-detail-link.brown:hover { color: #6c4627; }

/* ===== SOFT BOTTOM CTA BANNER ===== */
.bottom-banner-light {
    background: #f0fbf9 !important;
    border: 1px solid rgba(27, 167, 133, 0.15) !important;
    border-radius: 20px !important;
    padding: 35px 40px !important;
    box-shadow: 0 10px 30px rgba(27, 167, 133, 0.04) !important;
    color: var(--bq-navy) !important;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    transition: all 0.3s ease;
}
.bottom-banner-light:hover {
    border-color: rgba(27, 167, 133, 0.25) !important;
    box-shadow: 0 15px 35px rgba(27, 167, 133, 0.08) !important;
}

.bottom-banner-light h2 {
    color: var(--bq-navy) !important;
    font-size: 1.45rem !important;
    font-weight: 800;
    margin-bottom: 6px;
    line-height: 1.3;
}
.bottom-banner-light p {
    color: #475569 !important;
    font-size: 0.92rem !important;
    margin-bottom: 0;
}
.bottom-banner-light .banner-compass-wrap i {
    color: #1BA785 !important;
    animation: ct-compass-spin 8s linear infinite;
}

.bottom-banner-light .btn-red {
    background: #C42B2B !important;
    color: #ffffff !important;
    padding: 12px 28px !important;
    border-radius: 30px !important;
    font-size: 0.9rem !important;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(196, 43, 43, 0.15);
}
.bottom-banner-light .btn-red:hover {
    background: #a82222 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(196, 43, 43, 0.25);
    color: #ffffff !important;
}

.bottom-banner-light .btn-teal-dark-solid {
    background: #0A2F27 !important;
    color: #ffffff !important;
    padding: 12px 28px !important;
    border-radius: 30px !important;
    font-size: 0.9rem !important;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 2px solid #0A2F27 !important;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(10, 47, 39, 0.15);
}
.bottom-banner-light .btn-teal-dark-solid:hover {
    background: #1BA785 !important;
    border-color: #1BA785 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(27, 167, 133, 0.25);
    color: #ffffff !important;
}

/* ===== PC CASE STUDY SPACINGS & PADDINGS OVERRIDE ===== */
.case-hero-section {
    margin-bottom: 20px !important;
}
.case-filter-section {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    margin-bottom: 15px !important;
}
.case-grid-section {
    padding-top: 10px !important;
    padding-bottom: 25px !important;
    margin-bottom: 15px !important;
}
.cta-combined-section {
    padding-top: 10px !important;
    padding-bottom: 15px !important;
}

/* ===== MOBILE RESPONSIVE OVERRIDES (2026 CASE STUDY) ===== */
@media (max-width: 767px) {
    /* Mobile-specific paddings and spacings overrides */
    .case-hero-section {
        padding: 30px 20px !important;
        margin-bottom: 15px !important;
    }
    .case-filter-section {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        margin-bottom: 10px !important;
    }
    .case-grid-section {
        padding-top: 5px !important;
        padding-bottom: 15px !important;
        margin-bottom: 10px !important;
    }
    .cta-combined-section {
        padding-top: 5px !important;
        padding-bottom: 10px !important;
    }

    /* Mobile Case Study Card optimization */
    .card-header-banner {
        padding: 16px 20px !important;
    }
    .card-banner-title {
        font-size: 1.15rem !important;
    }
    .card-body-content-wrap {
        padding: 18px !important;
        gap: 15px !important;
    }
    .card-highlight-section {
        padding: 12px 16px !important;
    }
    .metric-pill {
        padding: 8px 4px !important;
    }
    .metric-val {
        font-size: 1.05rem !important;
    }

    .bottom-banner-light {
        padding: 30px 20px !important;
        text-align: center;
        flex-direction: column;
        align-items: center;
    }
    .bottom-banner-light .banner-ctas {
        width: 100%;
        flex-direction: column;
        gap: 12px;
    }
    .bottom-banner-light .btn-red,
    .bottom-banner-light .btn-teal-dark-solid {
        width: 100%;
        justify-content: center;
    }
    
    .problem-solution-section {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .filter-panel-card {
        padding: 20px 15px !important;
    }
    
    .filter-select-custom {
        height: 48px !important;
        font-size: 14px !important;
    }
    
    #btn-reset-filters {
        height: 48px !important;
    }
}

/* Custom Pulse Glow Animation for diagnostic buttons */
.btn-pulse-glow {
    animation: btnGlowPulseAnimation 2s infinite !important;
}
@keyframes btnGlowPulseAnimation {
    0% { box-shadow: 0 4px 12px rgba(196, 43, 43, 0.35), 0 0 0 0px rgba(196, 43, 43, 0.4); }
    70% { box-shadow: 0 4px 16px rgba(196, 43, 43, 0.5), 0 0 0 8px rgba(196, 43, 43, 0); }
    100% { box-shadow: 0 4px 12px rgba(196, 43, 43, 0.35), 0 0 0 0px rgba(196, 43, 43, 0); }
}

/* Offcanvas Body layout improvements */
.offcanvas-body {
    line-height: 1.75 !important;
}
.offcanvas-body p, 
.offcanvas-body span, 
.offcanvas-body div {
    text-align: justify;
}

/* Glowing/Blinking beacon icon effects */
.blinking-icon-red {
    animation: blinkRedLight 1.5s infinite alternate;
}
@keyframes blinkRedLight {
    0% { transform: scale(1); filter: drop-shadow(0 0 1px rgba(196, 43, 43, 0.4)); opacity: 0.8; }
    100% { transform: scale(1.15); filter: drop-shadow(0 0 8px rgba(196, 43, 43, 0.9)); opacity: 1; }
}

.blinking-icon-gold {
    animation: blinkGoldLight 1.5s infinite alternate;
}
@keyframes blinkGoldLight {
    0% { transform: scale(1); filter: drop-shadow(0 0 1px rgba(212, 168, 67, 0.4)); opacity: 0.8; }
    100% { transform: scale(1.15); filter: drop-shadow(0 0 8px rgba(212, 168, 67, 0.9)); opacity: 1; }
}

.blinking-icon-green {
    animation: blinkGreenLight 1.5s infinite alternate;
}
@keyframes blinkGreenLight {
    0% { transform: scale(1); filter: drop-shadow(0 0 1px rgba(27, 167, 133, 0.4)); opacity: 0.8; }
    100% { transform: scale(1.15); filter: drop-shadow(0 0 8px rgba(27, 167, 133, 0.9)); opacity: 1; }
}

.blinking-icon-navy {
    animation: blinkNavyLight 1.5s infinite alternate;
}
@keyframes blinkNavyLight {
    0% { transform: scale(1); filter: drop-shadow(0 0 1px rgba(27, 58, 75, 0.4)); opacity: 0.8; }
    100% { transform: scale(1.15); filter: drop-shadow(0 0 8px rgba(27, 58, 75, 0.9)); opacity: 1; }
}