/*
Theme Name: Grandsafe Core - Phuc Long Security
Theme URI: https://baovephuclong.com
Author: Thuanmt
Description: Theme an ninh chuyên nghiệp thiết kế theo chuẩn mockup template.png & hồ sơ năng lực thực tế Công ty Cổ phần Dịch vụ Bảo vệ Chuyên nghiệp Phúc Long (tai_lieu.pdf).
Version: 2.1.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: grandsafe-core
*/

/* ==========================================================================
   1. RESET & DESIGN TOKENS (Strictly following agent_BA.md radius rules)
   ========================================================================== */
:root {
    --primary: #cc1726;
    --primary-hover: #b0101d;
    --primary-light: #fef2f2;
    --primary-border: #fecaca;
    --dark-navy: #0b1325;
    --dark-surface: #10192e;
    --dark-card: #152243;
    --text-heading: #0f172a;
    --text-body: #475569;
    --text-muted: #64748b;
    --bg-light: #f8fafc;
    --bg-white: #ffffff;
    --border-color: #e2e8f0;
    --border-light: #f1f5f9;

    /* Radius Tokens: Section 5 of agent_BA.md */
    --radius-none: 0px;      /* Header, S1, section, footer, banner CTA: 0px */
    --radius-card: 2px;      /* Card dịch vụ, card tin, thẻ lĩnh vực: 0-3px */
    --radius-btn: 3px;       /* Nút CTA, ô nhập: 2-4px */
    --radius-modal: 3px;     /* Modal: tối đa 4px */
    --radius-circle: 50%;    /* Nút play, chấm slide, icon tròn */

    /* Shadows: subtle and light */
    --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-light: 0 3px 8px rgba(0, 0, 0, 0.06);

    --transition: all 0.25s ease;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* 2026-10-04: Khách hàng yêu cầu thanh cuộn trang mỏng lại và có màu đỏ nhẹ; cấu hình scrollbar-width: thin cùng bộ webkit-scrollbar kích thước 6px, nền track trong suốt và thumb bo tròn màu đỏ nhẹ (hover đậm dần). */
html {
    scroll-behavior: smooth;
    font-size: 16px;
    scrollbar-width: thin;
    scrollbar-color: rgba(204, 23, 38, 0.45) transparent;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(204, 23, 38, 0.38);
    border-radius: 999px;
    transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(204, 23, 38, 0.7);
}

::-webkit-scrollbar-thumb:active {
    background: var(--primary, #cc1726);
}

::-webkit-scrollbar-corner {
    background: transparent;
}

body {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--text-body);
    background-color: var(--bg-white);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    outline: none;
}

ul {
    list-style: none;
}

/* 2026-10-01: Khách hàng yêu cầu mở rộng container lên max-width 1360px và giảm thụt lề 2 bên (tránh tạo khoảng trống quá lớn trên màn hình rộng); đồng thời Section 1 căn đều theo container từ header xuống; tại viewport 853px vẫn giữ lề 54px theo chuẩn kiểm thử BA. */
.site-container {
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ==========================================================================
   2. BUTTONS & TYPOGRAPHY
   ========================================================================== */
.btn-quote {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background-color: var(--primary);
    color: #ffffff !important;
    font-weight: 700;

    font-size: 14px;

    padding: 10px 16px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.btn-quote:hover {
    background-color: var(--primary-hover);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: transparent;
    color: var(--text-heading);
    font-weight: 700;
    font-size: 0.88rem;
    padding: 9px 16px;
    border: none;
    cursor: pointer;
    transition: var(--transition);
}

.btn-secondary:hover {
    color: var(--primary);
}

.btn-circle-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-circle);
    background-color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-subtle);
    color: var(--primary);
    font-size: 0.8rem;
    transition: var(--transition);
}

.btn-secondary:hover .btn-circle-icon {
    background-color: var(--primary);
    color: #ffffff;
}

.link-arrow-red {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary);
    font-weight: 700;
    font-size: 0.88rem;
    transition: var(--transition);
    white-space: nowrap;
}

.link-arrow-red:hover {
    color: var(--primary-hover);
    gap: 9px;
}

.section-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary);
    margin-bottom: 6px;
}

.badge-line {
    display: inline-block;
    width: 14px;
    height: 2px;
    background-color: var(--primary);
}

.section-title {
    font-size: 30px;
    font-weight: 800;
    color: var(--text-heading);

    line-height: 1.25;
}

.section-desc {
    color: var(--text-muted);

    font-size: 15px;

    line-height: 1.6;
}

.section {
    padding: 16px 0;
    border-radius: var(--radius-none);
}

.section-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 10px;
    gap: 12px;
}

.section-header-centered {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 16px;
}

.section-header-centered .section-subtitle {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-top: 4px;
}

/* ==========================================================================
   3. SITE HEADER (Radius 0, Logo ratio preserved)
   ========================================================================== */
/* 2026-10-01: Khách hàng yêu cầu bổ sung Header Top liên hệ (hotline, email, địa chỉ, 24/7) và menu điều hướng 1 hàng thẳng tắp tại 853px; trước đó thiếu top bar và menu dễ bị rớt dòng khi co giãn, nên cấu hình top-bar navy tối gọn gàng 30px và chuẩn hóa padding/gap cho thanh điều hướng bảo toàn tỷ lệ header bám sát template.png. */
.header-top-bar {
    background-color: var(--dark-navy);
    color: #cbd5e1;
    font-size: 0.72rem;
    line-height: 1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.top-bar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 30px;
    padding-top: 4px;
    padding-bottom: 4px;
}

.top-bar-track {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 20px;
}

.top-bar-motion-toggle {
    display: none;
}

.top-bar-left,
.top-bar-right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: nowrap;
}

.top-bar-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #cbd5e1;
    font-size: 0.72rem;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition);
}

.top-bar-item i {
    color: var(--primary);
    font-size: 0.7rem;
}

.top-bar-hours i {
    color: #22c55e;
}

.top-bar-item a {
    color: #cbd5e1;
    text-decoration: none;
    transition: var(--transition);
}

.top-bar-item a:hover,
a.top-bar-item:hover {
    color: #ffffff;
}

.site-header {
    position: relative;
    width: 100%;
    z-index: 1000;
    background-color: transparent;
    border-radius: var(--radius-none);
}

.site-header.is-sticky {
    position: sticky;
    top: 0;
}

.main-header {
    background-color: transparent;
    position: relative;
    overflow: visible;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;

    height: 64px;
    gap: 16px;
}

.site-brand {
    display: flex;
    align-items: center;

    gap: 9px;
    flex-shrink: 0;
    white-space: nowrap;
}

.site-logo-img {
    width: 44px;

    height: 44px;
    object-fit: contain;
    display: block;
}

.brand-text {
    display: flex;
    flex-direction: column;
    white-space: nowrap;
}

.brand-title {
    font-size: 20px;

    font-weight: 800;
    color: var(--primary);
    line-height: 1;
    letter-spacing: -0.01em;
}

.brand-subtitle {
    font-size: 10px;
    font-weight: 800;
    color: var(--dark-navy);

    letter-spacing: .1em;
}

/* Nav Menu */
.main-navigation .nav-menu {
    display: flex;
    align-items: center;

    gap: 20px;
}

.nav-menu .menu-item {
    position: relative;
    white-space: nowrap;
}

.nav-menu .menu-item a {
    font-size: 14px;

    font-weight: 600;
    color: var(--text-heading);

    padding: 10px 0;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}

.nav-arrow {
    font-size: 0.55rem;
}

.nav-menu .menu-item:hover > a,
.nav-menu .menu-item.active > a {
    color: var(--primary);
}

.nav-menu .menu-item.active > a {
    border-bottom: 2px solid var(--primary);
}

.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background-color: #ffffff;
    border-radius: var(--radius-modal);
    box-shadow: var(--shadow-light);
    border: 1px solid var(--border-color);
    padding: 6px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: var(--transition);
    z-index: 100;
}

/* Keep the service submenu visually aligned with the navigation label. */
.has-dropdown > .sub-menu { left: 8px; }
.main-navigation .nav-menu .sub-menu li a { padding: 10px 26px; }

/* Standalone content pages */
.content-page-hero { background-color: var(--dark-navy); background-image: linear-gradient(90deg, rgba(7, 16, 32, .94) 0%, rgba(7, 16, 32, .82) 54%, rgba(7, 16, 32, .76) 100%), url("assets/images/optimized/hero-lobby-uniform-v4.webp"); background-size: cover; background-position: center 52%; background-repeat: no-repeat; color: #fff; padding: 64px 0 58px; }
.content-page-hero .section-badge { color: #fca5a5; }
.content-page-hero h1 { color: #fff; font-size: clamp(32px, 4.5vw, 56px); line-height: 1.1; margin: 14px 0; max-width: 760px; }
.content-page-hero p { color: #cbd5e1; font-size: 17px; line-height: 1.7; max-width: 680px; }
.content-page-body { padding-top: 58px; padding-bottom: 76px; }
.content-page-intro { max-width: 760px; margin-bottom: 28px; }
.content-page-intro > span { color: var(--primary); font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.content-page-intro h2 { color: var(--text-heading); font-size: clamp(28px, 3vw, 42px); line-height: 1.15; margin: 10px 0 12px; }
.content-page-intro p { color: var(--text-body); font-size: 16px; line-height: 1.7; }
.content-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.content-card { border: 1px solid var(--border-color); background: #fff; }
.content-card-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-light); }
.content-card-media img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); }
.content-card:hover .content-card-media img { transform: scale(1.03); }
.content-card-copy { padding: 20px; }
.content-card-copy h2 { color: var(--text-heading); font-size: 20px; line-height: 1.3; margin-bottom: 8px; }
.content-card-copy p { color: var(--text-muted); font-size: 14px; line-height: 1.6; min-height: 68px; margin-bottom: 12px; }
.client-name-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 30px 0 46px; }
.client-name-grid span { min-height: 76px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-color); color: var(--text-heading); font-size: 18px; font-weight: 800; background: var(--bg-light); text-align: center; padding: 12px; }
.client-process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.client-process-grid article { border-top: 3px solid var(--primary); background: var(--bg-light); padding: 22px 20px; }
.client-process-grid b { color: var(--primary); font-size: 13px; letter-spacing: .12em; }
.client-process-grid h2 { color: var(--text-heading); font-size: 22px; margin: 15px 0 8px; }
.client-process-grid p { color: var(--text-muted); font-size: 14px; line-height: 1.6; }
.content-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 42px; padding: 28px 30px; background: var(--dark-navy); color: #fff; }
.content-cta h2 { color: #fff; font-size: 24px; line-height: 1.25; max-width: 620px; }
.recruitment-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 30px 0 64px; }
.recruitment-card { min-height: 210px; border: 1px solid var(--border-color); border-top: 3px solid var(--primary); background: #fff; padding: 24px 22px; }
.recruitment-card > span { color: var(--primary); font-size: 13px; font-weight: 900; letter-spacing: .12em; }
.recruitment-card h2 { color: var(--text-heading); font-size: 22px; line-height: 1.25; margin: 18px 0 10px; }
.recruitment-card p { color: var(--text-muted); font-size: 14px; line-height: 1.65; }
.recruitment-process { margin-top: 20px; }
.recruitment-articles { margin-top: 64px; }
.recruitment-article-card .content-card-copy { display: flex; flex-direction: column; }
.recruitment-article-card .content-card-copy h2 { min-height: 52px; }
.recruitment-article-card .content-card-copy p { min-height: 72px; }
.recruitment-article-card .service-link { align-self: flex-end; }
.recruitment-article-date { color: var(--primary); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.recruitment-cta { margin-top: 48px; }
.recruitment-cta p { color: #cbd5e1; margin-top: 8px; }
.contact-page-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 48px; }
.contact-page-form form { display: grid; gap: 16px; }
.contact-page-form label { display: grid; gap: 7px; color: var(--text-heading); font-size: 14px; font-weight: 700; }
.contact-page-form input, .contact-page-form textarea { width: 100%; border: 1px solid var(--border-color); border-radius: var(--radius-btn); padding: 12px 14px; color: var(--text-heading); background: #fff; resize: vertical; }
.contact-page-form input:focus, .contact-page-form textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); }
.contact-page-form .btn-quote { justify-self: start; border: 0; cursor: pointer; border-radius: 999px; padding-left: 24px; padding-right: 24px; }
.contact-page-info { background: var(--bg-light); border: 1px solid var(--border-color); padding: 28px; align-self: start; }
.contact-page-info h2 { color: var(--text-heading); font-size: 24px; margin-bottom: 20px; }
.contact-page-info ul { display: grid; gap: 16px; }
.contact-page-info li { display: flex; align-items: flex-start; gap: 12px; color: var(--text-body); font-size: 14px; line-height: 1.5; }
.contact-page-info li i { color: var(--primary); margin-top: 3px; width: 16px; text-align: center; }
.contact-page-info a { color: var(--text-heading); font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.contact-page-info .contact-company-name { margin-bottom: 20px; color: var(--text-heading); font-weight: 700; line-height: 1.6; }
.contact-page-info li > i { flex-shrink: 0; }
.single-contact-card li a { min-width: 0; overflow-wrap: anywhere; }
.contact-map-link { display: inline-flex; gap: 8px; align-items: center; margin-top: 24px; color: var(--primary) !important; }
@media (max-width: 800px) { .content-card-grid, .client-process-grid, .recruitment-grid { grid-template-columns: repeat(2, 1fr); } .contact-page-grid { grid-template-columns: 1fr; gap: 32px; } .content-cta { display: grid; } }
@media (max-width: 520px) { .content-card-grid, .client-process-grid, .client-name-grid, .recruitment-grid { grid-template-columns: 1fr; } .content-page-hero { padding: 48px 0; } .content-page-body { padding-top: 44px; } }

/* Refined desktop navigation: compact pill links with a clear active state. */
@media (min-width: 800px) {
    .main-navigation .nav-menu { gap: 4px; padding: 4px; }
    .main-navigation .nav-menu > .menu-item > a {
        padding: 9px 12px;
        border: 0;
        border-radius: 999px;
        color: #475569;
        font-size: 13.5px;
        font-weight: 700;
        letter-spacing: .01em;
        transition: background-color .2s ease, color .2s ease, transform .2s ease;
    }
    .main-navigation .nav-menu > .menu-item:hover > a,
    .main-navigation .nav-menu > .menu-item.active > a {
        background: rgba(185, 28, 28, .09);
        color: var(--primary);
        transform: translateY(-1px);
    }
    .main-navigation .nav-menu > .has-dropdown { border-radius: 999px; }
    .main-navigation .nav-menu > .has-dropdown > a { border-radius: 999px 0 0 999px; padding-right: 10px; }
    .main-navigation .nav-menu > .has-dropdown > .dropdown-toggle {
        width: 26px;
        height: 36px;
        margin-left: -10px;
        border-radius: 0 999px 999px 0;
        color: #64748b;
        transition: background-color .2s ease, color .2s ease;
    }
    .main-navigation .nav-menu > .has-dropdown:hover > .dropdown-toggle,
    .main-navigation .nav-menu > .has-dropdown.is-open > .dropdown-toggle {
        background: rgba(185, 28, 28, .09);
        color: var(--primary);
    }
    .main-navigation .nav-menu .sub-menu { margin-top: 0; border-radius: 14px; padding: 8px; }
    .main-navigation .nav-menu .sub-menu li a { border-radius: 9px; }
    .main-navigation .nav-menu .sub-menu li a:hover { background: var(--primary-light); color: var(--primary); }
}

.menu-item:hover .sub-menu,
.menu-item:focus-within .sub-menu,
.menu-item.is-open .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sub-menu li a {
    padding: 8px 16px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-body);
    display: block;
}

.sub-menu li a:hover {
    background-color: var(--primary-light);
    color: var(--primary);
}

.header-actions {
    display: flex;
    align-items: center;

    gap: 8px;
    flex-shrink: 0;
}

.search-toggle-btn {
    background: transparent;
    border: none;
    font-size: 1rem;
    color: var(--text-heading);
    cursor: pointer;

    padding: 0;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.search-toggle-btn:hover {
    color: var(--primary);
}

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.mobile-menu-toggle span {
    width: 100%;
    height: 2px;
    background-color: var(--dark-navy);
}

/* 2026-10-01: BA yêu cầu Drawer mobile không được gây tràn ngang scrollWidth trên thiết bị 390px và không lọt tab focus khi đóng (BA-08); trước đó đặt right: -280px khiến phần tử ngoài viewport vẫn tính vào scrollWidth=635px, nên chuyển sang display: none khi đóng và display: flex khi active để triệt tiêu hoàn toàn tràn ngang. */
.mobile-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 260px;
    height: 100vh;
    background-color: #ffffff;
    box-shadow: var(--shadow-light);
    z-index: 2000;
    padding: 20px;
    display: none;
    flex-direction: column;
    overflow-y: auto;
}

.mobile-drawer.active {
    display: flex;
}

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 12px;
    margin-bottom: 16px;
}

.drawer-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--primary);
}

.drawer-logo img {
    height: 32px;
    width: 32px;
    object-fit: contain;
}

/* 2026-10-03: Khách hàng phản hồi dấu X của nút đóng menu mobile bị lệch tâm chưa căn giữa; trước đó dùng ký tự × thuần chịu ảnh hưởng bởi baseline font chữ khiến icon bị lệch trục, nên chuyển sang icon SVG vector đối xứng tuyệt đối (viewBox 24x24 tâm 12,12) kết hợp flexbox căn giữa (display: inline-flex, align-items: center, justify-content: center, line-height: 0) đảm bảo dấu X luôn ở chính giữa tuyệt đối trên mọi thiết bị. */
.drawer-close-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.05);
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 8px;
    line-height: 0;
    cursor: pointer;
    color: var(--text-heading);
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    flex-shrink: 0;
}

.drawer-close-btn svg {
    width: 22px;
    height: 22px;
    display: block;
    pointer-events: none;
    flex-shrink: 0;
    margin: auto;
}

.drawer-close-btn:hover,
.drawer-close-btn:focus-visible,
.drawer-close-btn:active {
    background-color: var(--primary, #C8102E) !important;
    border-color: var(--primary, #C8102E) !important;
    color: #ffffff !important;
    transform: scale(1.05);
}

.mobile-menu-list li {
    margin-bottom: 12px;
}

.mobile-menu-list a {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-heading);
}

.mobile-menu-list a:hover {
    color: var(--primary);
}

.drawer-footer {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.mobile-quote-btn {
    width: 100%;
    margin-bottom: 12px;
}

.drawer-hotline {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.drawer-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1999;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}

.drawer-backdrop.active {
    opacity: 1;
    visibility: visible;
}

/* ==========================================================================
   4. S1: SLIDESHOW SECTION (Full width, radius 0, ratio 3.65:1, pure slides)
   ========================================================================== */
.slider-section {
    position: relative;
    width: 100%;
    background-color: transparent;
    border-radius: var(--radius-none);
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.slider-wrapper {
    position: relative;
    width: 100%;

    aspect-ratio: 3.65 / 1;

    min-height: 0;

    max-height: none;
    overflow: hidden;
    border-radius: var(--radius-none);
    touch-action: pan-y;
    cursor: grab;
}

.slider-wrapper.is-dragging {
    cursor: grabbing;
}

.slider-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-in-out;
}

.slider-slide.is-active {
    opacity: 1;
    visibility: visible;
}

.slide-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    object-position: center top;
}

.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    background-color: rgba(11, 19, 37, 0.4);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-circle);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.88rem;
    opacity: 0.25;
    transition: var(--transition);
    z-index: 10;
}

.slider-wrapper:hover .slider-btn,
.slider-btn:focus-visible {
    opacity: 0.9;
}

.slider-btn:hover {
    background-color: var(--primary);
    opacity: 1;
    border-color: var(--primary);
}

.slider-prev {
    left: 12px;
}

.slider-next {
    right: 12px;
}

.slider-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.slider-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-circle);
    background-color: rgba(255, 255, 255, 0.5);
    border: none;
    cursor: pointer;
    transition: var(--transition);
}

.slider-dot.is-active,
.slider-dot:hover {
    background-color: var(--primary);
    transform: scale(1.15);
}

.slider-playback-btn {
    position: absolute;
    bottom: 10px;
    right: 16px;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-circle);
    background-color: rgba(11, 19, 37, 0.6);
    color: #ffffff;
    border: none;
    cursor: pointer;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: var(--transition);
}

.slider-playback-btn:hover {
    background-color: var(--primary);
}

/* ==========================================================================
   5. S2: STATS BAR (Single light strip, no bulky cards)
   ========================================================================== */
/* 2026-10-01: Khách hàng và BA yêu cầu: 1) Icon thống kê (#stats) to bản phẳng màu dark navy cân đối với số liệu, padding tinh gọn (~60px chiều cao). 2) Icon dịch vụ (.service-icon-badge) hiển thị trọn vẹn tại mép ảnh/nội dung không bị che khuất; card dịch vụ rút gọn mô tả để chiều cao toàn khối ~240px bám template.png. Quy tắc bảo toàn: giữ 4 item stats và 5 service card trên 1 hàng ở desktop 853px. */
.stats-section {
    background-color: #ffffff;
    border-bottom: 1px solid var(--border-color);
    padding: 8px 0;
    border-radius: var(--radius-none);
}

.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    align-items: center;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 6px;
    border-right: 1px solid var(--border-light);
}

.stat-item:last-child {
    border-right: none;
}

.stat-icon-wrap {
    width: 36px;
    height: 36px;
    color: var(--dark-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    flex-shrink: 0;
    background: transparent;
    border-radius: 0;
}

.stat-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.stat-number {
    font-size: 26px;
    font-weight: 900;
    color: var(--text-heading);
    line-height: 1.1;
}

.stat-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-heading);
    margin-top: 2px;
    white-space: nowrap;
}

/* ==========================================================================
   6. S3: SERVICES SECTION (5 cards on 1 row at 853px, radius 2px)
   ========================================================================== */
.services-section {
    background-color: var(--bg-light);
}

.section-right-wrap {
    max-width: 440px;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.services-grid-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.service-card {
    background-color: #ffffff;
    border-radius: var(--radius-card);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    transition: var(--transition);
    position: relative;
}

.service-card:hover {
    border-color: var(--primary);
}

.service-img-wrap {
    position: relative;

    height: auto;
    overflow: visible;
    aspect-ratio: 16 / 10;
}

.service-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    display: block;
}

.service-icon-badge {
    position: absolute;
    bottom: -13px;
    left: 10px;
    width: 28px;
    height: 28px;
    background-color: #ffffff;
    color: var(--primary);
    border-radius: var(--radius-card);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    font-size: 0.8rem;
    border: 1px solid var(--border-color);
    z-index: 5;
}

.service-body {
    padding: 20px 12px 14px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.service-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--text-heading);

    margin-bottom: 8px;

    line-height: 1.35;
}

.service-text {
    font-size: 14px;
    color: var(--text-muted);

    line-height: 1.55;
    margin-bottom: 8px;
    flex-grow: 1;
}

.service-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--primary);

    font-size: 14px;
    font-weight: 700;
    padding: 8px 0 0;
}

.service-link:hover {
    gap: 7px;
    color: var(--primary-hover);
}

/* ==========================================================================
   7. S4: ABOUT US SECTION (3 columns, radius 0-2px, circle play button)
   ========================================================================== */
/* ==========================================================================
   7. S4: ABOUT US SECTION (3 columns, radius 0-2px, circle play button)
   ========================================================================== */
.about-section {
    background-color: #ffffff;
    padding: 36px 0;
}

/* Standalone About page */
.about-page-hero { background-color: var(--dark-navy); background-image: linear-gradient(rgba(7, 16, 32, .84), rgba(7, 16, 32, .88)), url("assets/images/optimized/about-building-v2.webp"); background-size: cover; background-position: center 52%; background-repeat: no-repeat; background-attachment: scroll; color: #fff; padding: 72px 0 68px; }
.about-page-hero-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.about-page-hero-copy { max-width: 720px; }
.about-page-hero .section-badge { color: #fca5a5; }
.about-page-hero h1 { color: #fff; font-size: clamp(34px, 5vw, 60px); line-height: 1.08; letter-spacing: -0.03em; margin: 14px 0 18px; }
.about-page-hero p { color: #cbd5e1; font-size: 18px; max-width: 620px; line-height: 1.7; }
.about-page-hero-mark { width: 150px; height: 150px; border: 1px solid rgba(255,255,255,.25); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; flex: 0 0 auto; }
.about-page-hero-mark span { color: var(--primary); font-size: 54px; font-weight: 900; line-height: 1; }
.about-page-hero-mark small { margin-top: 8px; letter-spacing: .18em; font-weight: 800; }

/* 2026-10-03: Khách hàng yêu cầu thêm hiệu ứng xuất hiện cho các phần trên trang Giới thiệu (/gioi-thieu/); trước đó phần hero hiển thị tĩnh ngay khi tải trang, nên bổ sung keyframe chuyển động phân lớp (heroBadgeIn từ trên xuống, heroTitleIn từ trái sang, heroTextIn từ dưới lên, heroMarkIn từ phải sang) đồng bộ với thời điểm mở màn hình preloader, kết hợp hỗ trợ prefers-reduced-motion. */
@keyframes heroBadgeIn {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroTitleIn {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes heroTextIn {
    0% {
        opacity: 0;
        transform: translateY(24px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroMarkIn {
    0% {
        opacity: 0;
        transform: translateX(50px) scale(0.96);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

body.page-loaded .about-page-hero .section-badge,
body.page-loaded .content-page-hero .section-badge {
    animation: heroBadgeIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both;
    will-change: transform, opacity;
}

body.page-loaded .about-page-hero h1,
body.page-loaded .content-page-hero h1 {
    animation: heroTitleIn 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both;
    will-change: transform, opacity;
}

body.page-loaded .about-page-hero p,
body.page-loaded .content-page-hero p {
    animation: heroTextIn 0.70s cubic-bezier(0.16, 1, 0.3, 1) 0.30s both;
    will-change: transform, opacity;
}

body.page-loaded .about-page-hero-mark {
    animation: heroMarkIn 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.24s both;
    will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
    body.page-loaded .about-page-hero .section-badge,
    body.page-loaded .content-page-hero .section-badge,
    body.page-loaded .about-page-hero h1,
    body.page-loaded .content-page-hero h1,
    body.page-loaded .about-page-hero p,
    body.page-loaded .content-page-hero p,
    body.page-loaded .about-page-hero-mark {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}
.about-page-founder { padding: 78px 0; background: var(--bg-white); }
.about-page-founder-grid { display: grid; grid-template-columns: minmax(300px, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.about-page-founder-image { position: relative; border: 1px solid var(--border-color); background: var(--bg-light); }
.about-page-founder-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.about-page-founder-caption { height: 5px; overflow: hidden; background: linear-gradient(90deg, #991b1b, #ef4444, #fbbf24, #ef4444, #991b1b); background-size: 240% 100%; animation: pl-founder-color 6s ease-in-out infinite alternate; }
@keyframes pl-founder-color { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .about-page-founder-caption { animation: none; background-position: 50% 50%; } }
.about-page-founder-copy h2 { color: var(--text-heading); font-size: clamp(30px, 4vw, 48px); line-height: 1.12; margin: 14px 0 18px; }
.about-page-founder-copy p { color: var(--text-body); font-size: 16px; line-height: 1.75; margin-bottom: 14px; }
.about-page-founder-copy .about-page-lead { font-size: 18px; color: var(--text-heading); }
.about-page-founder-signature { display: flex; align-items: center; gap: 10px; color: var(--primary); font-weight: 800; margin-top: 24px; }
.about-page-signature-line { width: 42px; height: 2px; background: var(--primary); }
.about-page-direction { padding: 76px 0 82px; background: #fff; }
.about-page-direction-heading { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: end; margin-bottom: 28px; }
.about-page-direction-heading .section-title { margin-top: 12px; max-width: 560px; }
.about-page-direction-heading > p { color: var(--text-muted); font-size: 16px; line-height: 1.75; max-width: 560px; margin: 0 0 2px; }
.about-page-direction-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.about-page-direction-card { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 22px; min-height: 244px; padding: 28px; border: 1px solid var(--border-color); }
.about-page-direction-card-vision { background: var(--dark-navy); border-color: var(--dark-navy); }
.about-page-direction-card-mission { background: var(--bg-light); }
.about-page-direction-index { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(220, 38, 38, .35); color: var(--primary); font-size: 13px; font-weight: 900; letter-spacing: .08em; }
.about-page-direction-card-vision .about-page-direction-index { border-color: rgba(255,255,255,.28); color: #fca5a5; }
.about-page-direction-label { display: block; color: var(--primary); font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.about-page-direction-card-vision .about-page-direction-label { color: #fca5a5; }
.about-page-direction-card h3 { margin: 12px 0 12px; color: var(--text-heading); font-size: clamp(22px, 2.3vw, 30px); line-height: 1.2; }
.about-page-direction-card-vision h3 { color: #fff; }
.about-page-direction-card p { color: var(--text-muted); font-size: 14px; line-height: 1.7; margin: 0; }
.about-page-direction-card-vision p { color: #cbd5e1; }
.about-page-direction-note { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 16px; padding: 15px 20px; border-left: 3px solid var(--primary); background: #fff5f5; color: var(--text-muted); }
.about-page-direction-note span { font-size: 11px; font-weight: 900; letter-spacing: .14em; }
.about-page-direction-note strong { color: var(--text-heading); font-size: 16px; }
.about-page-values { padding: 70px 0 82px; background: var(--bg-light); }

.about-page-section-heading { margin-bottom: 28px; }
.about-page-values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.about-page-values-grid article { background: #fff; border: 1px solid var(--border-color); padding: 24px 20px; min-height: 190px; }
.about-page-value-number { color: var(--primary); font-size: 13px; font-weight: 900; letter-spacing: .1em; }
.about-page-values-grid h3 { color: var(--text-heading); font-size: 20px; margin: 18px 0 8px; }
.about-page-values-grid p { color: var(--text-muted); font-size: 14px; line-height: 1.6; }
@media (max-width: 800px) {
    .about-page-hero-inner { align-items: flex-start; }
    .about-page-hero-mark { width: 104px; height: 104px; }
    .about-page-hero-mark span { font-size: 38px; }
    .about-page-founder-grid { grid-template-columns: 1fr; }
    .about-page-direction-heading { grid-template-columns: 1fr; gap: 12px; }
    .about-page-direction-grid { grid-template-columns: 1fr; }
    .about-page-values-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .about-page-hero { padding: 52px 0; }
    .about-page-hero-inner { display: block; }
    .about-page-hero-mark { margin-top: 28px; }
    .about-page-founder { padding: 52px 0; }
    .about-page-direction { padding: 54px 0 60px; }
    .about-page-direction-card { grid-template-columns: 1fr; gap: 18px; padding: 22px; }
    .about-page-direction-note { align-items: flex-start; flex-direction: column; gap: 8px; }
    .about-page-values-grid { grid-template-columns: 1fr; }
}

.about-grid {
    display: grid;
    grid-template-columns: 1.25fr 1.1fr .85fr;
    gap: 16px;
    align-items: start;
}

.about-title {
    font-size: 28px;

    font-weight: 800;
    color: var(--text-heading);
    line-height: 1.22;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}

.about-paragraph {
    font-size: 15px;
    color: var(--text-body);

    line-height: 1.65;
    margin-bottom: 8px;
}

.about-action-btns {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-video-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    background-color: #fff;
    border: 1px solid var(--primary-border);
    color: var(--text-heading);
    font-size: 14px;
    font-weight: 700;
    padding: 10px 16px;
    border-radius: 999px;
    cursor: pointer;
    transition: var(--transition);
}

.btn-video-outline i { color: var(--primary); font-size: 15px; }

.btn-video-outline:hover {
    border-color: var(--primary);
    background-color: var(--primary-light);
    color: var(--primary);
}

/* Video Column */
.video-preview-box {
    position: relative;
    border-radius: var(--radius-card);
    overflow: hidden;
    border: 1px solid var(--border-color);

    aspect-ratio: 4 / 3;

    max-height: none;

    max-width: none;

    margin: 0;

    width: 100%;
}

.video-preview-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.play-video-pulse-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 38px;
    height: 38px;
    background-color: #ffffff;
    border-radius: var(--radius-circle);
    border: none;
    color: var(--primary);
    font-size: 0.85rem;
    cursor: pointer;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.play-video-pulse-btn:hover {
    background-color: var(--primary);
    color: #ffffff;
}

.video-caption-tag {
    position: absolute;
    bottom: 6px;
    left: 6px;
    background-color: rgba(11, 19, 37, 0.85);
    color: #ffffff;
    padding: 2px 6px;
    border-radius: var(--radius-card);
    font-size: 0.65rem;
    font-weight: 700;
}

/* Pillars Column */
.about-pillars-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: space-between;
}

.pillar-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 2px 4px;
    border-radius: var(--radius-card);
}

.pillar-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-circle);
    background-color: var(--primary-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    flex-shrink: 0;
}

.pillar-icon > i {
    font-size: 42px;
    line-height: 1;
}

.pillar-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-heading);
    margin-bottom: 1px;
    line-height: 1.4;
}

.pillar-desc {
    font-size: 14px;
    color: var(--text-muted);

    line-height: 1.55;
}

/* ==========================================================================
   8. S5: INDUSTRIES WE SERVE (6 cards on 1 row at 853px, radius 2px)
   ========================================================================== */
.industries-section {
    background-color: var(--bg-light);
}

.industries-grid-6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.industry-card {
    display: flex;
    flex-direction: column;
    height: 102px;
    border-radius: var(--radius-card);
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: #ffffff;
    cursor: pointer;
    transition: var(--transition);
}

.industry-card:hover {
    border-color: var(--primary);
}

.industry-img-box {
    height: 74px;
    width: 100%;
    overflow: hidden;
}

.industry-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
}

.industry-bar {
    height: 28px;
    background-color: var(--dark-navy);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    font-size: 0.68rem;
    font-weight: 700;
    transition: var(--transition);
}

.industry-card:hover .industry-bar {
    background-color: var(--primary);
}

.industry-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.industry-arrow {
    color: var(--primary);
    font-size: 0.75rem;
    transition: var(--transition);
}

.industry-card:hover .industry-arrow {
    color: #ffffff;
    transform: translateX(3px);
}

/* ==========================================================================
   2026-10-04: Khách hàng yêu cầu dải Khách hàng tiêu biểu to lên và chạy ngang; trước đó dùng layout tĩnh 7 cột nhỏ (cao 42px), nên nâng cấp thành infinite marquee chạy ngang mượt mà, kích thước logo lớn hơn (thẻ cao 82px), tự động lặp vô tận và dừng khi hover.
   ========================================================================== */
.clients-section {
    background-color: #ffffff;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: 44px 0;
    width: 100%;
    overflow: hidden;
}

/* 2026-10-04: Khách hàng yêu cầu đưa phần tiêu đề "Khách Hàng Tiêu Biểu" lên hàng trên; trước đó tiêu đề nằm ở cột bên trái trong bố cục lưới 2 cột khiến tiêu đề bị chật và dải logo chỉ chạy ở nửa bên phải, nên chuyển .clients-strip-row sang flex column với hàng trên là heading wrap (tiêu đề bên trái, nút xem tất cả bên phải) và dải logo khách hàng chạy ngang toàn chiều rộng 100% ở hàng dưới. */
.clients-strip-row {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.clients-heading-wrap {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    flex-wrap: wrap;
}

.clients-heading-wrap .clients-title-side {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.clients-heading-wrap .section-badge {
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.clients-heading-wrap .badge-line {
    display: inline-block;
    width: 20px;
    height: 2px;
    background: var(--primary);
}

.clients-title {
    font-size: clamp(22px, 2.3vw, 28px);
    font-weight: 800;
    color: var(--text-heading);
    line-height: 1.25;
    letter-spacing: -0.02em;
    margin: 0;
}

.clients-heading-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--primary);
    margin-top: 0;
    margin-bottom: 4px;
    transition: var(--transition);
}

.clients-heading-link:hover {
    color: var(--primary-hover);
    transform: translateX(3px);
}

.clients-strip {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
    padding: 6px 0;
}

.clients-marquee-track {
    display: flex;
    width: max-content;
    align-items: center;
    animation: clientsMarqueeScroll 40s linear infinite;
    will-change: transform;
}

.clients-strip:hover .clients-marquee-track,
.clients-strip:focus-within .clients-marquee-track {
    animation-play-state: paused;
}

.clients-marquee-group {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-right: 20px;
    flex-shrink: 0;
}

.client-logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 175px;
    max-width: 215px;
    height: 82px;
    padding: 12px 22px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-subtle);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    text-decoration: none;
    box-sizing: border-box;
    flex-shrink: 0;
}

.client-logo-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.09);
    border-color: var(--primary-border);
}

.client-logo-item .client-logo {
    max-width: 145px;
    max-height: 54px;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;
    display: block;
    filter: grayscale(12%);
    transition: filter 0.25s ease;
}

.client-logo-item:hover .client-logo {
    filter: grayscale(0%);
}

.client-logo-item .client-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-heading);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 155px;
}

@keyframes clientsMarqueeScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* ==========================================================================
   10. S7: NEWS & CTA ROW (3 cards left, 1 banner right, radius 2px)
   ========================================================================== */
.news-section {
    background-color: var(--bg-light);
}

.news-cta-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 14px;
    align-items: stretch;
}

.news-cards-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.news-card {
    background-color: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
    transition: transform .2s ease, box-shadow .2s ease;
}
.news-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(15, 23, 42, .12); }

.news-thumb {
    height: auto;
    overflow: hidden;
    aspect-ratio: 16 / 10;
}

.news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.news-content {
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.news-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; color: var(--text-muted); font-size: 11px; font-weight: 700; letter-spacing: .02em; margin-bottom: 12px; }
.news-meta span { display: inline-flex; align-items: center; gap: 6px; }
.news-meta i { color: var(--primary); font-size: 12px; }

.news-date {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 3px;
}

.news-heading {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 10px;
}

.news-heading a {
    color: var(--text-heading);
}

.news-heading a:hover {
    color: var(--primary);
}

.news-excerpt { color: var(--text-muted); font-size: 14px; line-height: 1.65; margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.news-card-footer { display: flex; justify-content: flex-end; margin-top: auto; padding-top: 18px; }
.news-card .service-link { display: inline-flex; align-items: center; align-self: flex-end; flex: 0 0 auto; width: fit-content; max-width: max-content; gap: 8px; padding: 9px 14px; border-radius: 999px; background: var(--primary-light); color: var(--primary); font-size: 13px; font-weight: 800; }
.news-card .service-link:hover { gap: 10px; background: var(--primary); color: #fff; }

/* 2026-10-03: Khách hàng yêu cầu nút "Đọc thêm" trên các card tin tức trang chủ chuyển sang căn phải; trước đó nút căn trái mặc định theo flex-start của .news-content, nên bổ sung align-self: flex-end, margin-left: auto và margin-top: auto để nút luôn nằm ở góc phải dưới cùng của card. */
.news-readmore {
    display: inline-flex;
    align-items: center;
    align-self: flex-end;
    margin-left: auto;
    margin-top: auto;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
    transition: var(--transition, all 0.2s ease);
}

.news-readmore:hover {
    color: var(--primary-hover, #A00B22);
    gap: 8px;
}

.news-readmore i {
    transition: transform 0.2s ease;
}

.news-readmore:hover i {
    transform: translateX(3px);
}

/* Right Dark CTA Banner */
.cta-banner-col {
    display: flex;
}

/* 2026-10-01: Khách hàng yêu cầu: Các khu vực nền tối (.cta-banner-box, .site-footer) phải có ảnh nền chìm và dải gradient sang trọng chiều sâu, tăng tính chuyên nghiệp thay vì màu nền phẳng đơn điệu. */
.cta-banner-box {
    position: relative;
    background: linear-gradient(135deg, rgba(11, 19, 37, 0.90) 0%, rgba(20, 32, 54, 0.95) 100%),
                url('assets/images/optimized/cta-city-v2.webp') center/cover no-repeat;
    border-radius: var(--radius-none);

    padding: 24px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.cta-banner-title {
    font-size: 24px;
    font-weight: 900;

    line-height: 1.35;
    color: #ffffff;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}

.cta-banner-desc {
    font-size: 14px;
    color: #cbd5e1;

    line-height: 1.6;
    margin-bottom: 12px;
}

.cta-banner-btn {
    width: 100%;
    padding: 8px;
    font-size: 0.78rem;
}

/* ==========================================================================
   11. SITE FOOTER (Dark, Radius 0, Logo with supportive light badge)
   ========================================================================== */
.site-footer {
    background: #060E18;
    color: #94A3B8;
    position: relative;
    z-index: 10;
    border-radius: var(--radius-none);
}

/* =========================================================================
   FOOTER (REDESIGNED FOR LUXURY DESKTOP & FULL RESPONSIVENESS)
   ========================================================================= */
/* 2026-10-03: Khách hàng phản hồi các cột footer trên desktop (1536px) bị xấu; trước đó .brand-col chiếm full chiều ngang căn giữa và font-size các cột quá bé (10-11px) gây rời rạc và khó đọc, nên thiết kế lại grid 5 cột ngang trên desktop (2.2fr 1fr 1.25fr 1.65fr 1.5fr), font-size chuẩn 13.5-14px, gạch chân đỏ tinh tế dưới tiêu đề, hotline card nổi bật và ô đăng ký bản tin hiện đại. */

/* 2026-10-03: Khách hàng yêu cầu thêm ảnh nền cho footer với dải gradient nhẹ từ trái qua phải để dễ nhìn; trước đó .footer-top dùng gradient dọc (180deg) màu phẳng không có ảnh nền gây đơn điệu, nên bổ sung ảnh nền cta-city-v2.webp kết hợp linear-gradient(to right) có độ mờ dịu nhẹ (rgba 0.95 -> 0.88 -> 0.93) bảo đảm tương phản sắc nét cho chữ và icon. */
.footer-top {
    position: relative;
    padding: 56px 0 44px;
    background: linear-gradient(to right, rgba(6, 14, 25, 0.95) 0%, rgba(10, 22, 38, 0.88) 50%, rgba(16, 30, 50, 0.93) 100%),
                url('assets/images/optimized/cta-city-v2.webp') center/cover no-repeat;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2.2fr 1fr 1.25fr 1.65fr 1.5fr;
    gap: 36px;
    align-items: flex-start;
}

.footer-grid > .footer-col {
    min-width: 0;
}

/* Cột 1: Brand */
.footer-grid > .brand-col {
    grid-column: auto;
    text-align: left;
    padding-bottom: 0;
    border-bottom: none;
}

.footer-brand {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    margin-bottom: 16px;
    text-decoration: none;
}

.footer-logo-img {
    width: 52px;
    height: 66px;
    flex-shrink: 0;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}

.footer-brand-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.footer-brand-text .f-title {
    font-size: 20px;
    font-weight: 900;
    color: #ffffff;
    line-height: 1.15;
    letter-spacing: 0.04em;
    font-family: var(--font-heading, inherit);
}

.footer-brand-text .f-sub {
    font-size: 11px;
    font-weight: 800;
    color: var(--primary, #C8102E);
    letter-spacing: 0.16em;
}

/* 2026-10-03: Khách hàng yêu cầu bỏ hotline ở cột brand footer (đã có ở cột thông tin liên hệ) và thêm dòng chữ đỏ '- Lá chắn thép của bạn -'; trước đó khối hotline gây lặp thông tin và chiếm diện tích cột 1, nên thêm style .footer-tagline-red màu đỏ thương hiệu (#C8102E) nổi bật, chuyển cột thương hiệu thành khối giới thiệu súc tích, chuyên nghiệp. */
.footer-tagline-red {
    display: inline-block;
    color: var(--primary, #C8102E);
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: 0.02em;
    margin: 0 0 10px 0;
}

.footer-desc {
    font-size: 13.5px;
    color: #94A3B8;
    line-height: 1.6;
    margin-bottom: 0;
    max-width: 320px;
}

.footer-hotline-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(200, 16, 46, 0.08);
    border: 1px solid rgba(200, 16, 46, 0.28);
    border-radius: 10px;
    padding: 10px 16px;
    transition: all 0.25s ease;
}

.footer-hotline-badge:hover {
    background: rgba(200, 16, 46, 0.14);
    border-color: rgba(200, 16, 46, 0.45);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(200, 16, 46, 0.2);
}

.footer-hotline-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #FDA4AF;
    display: flex;
    align-items: center;
    gap: 6px;
}

.footer-hotline-label i {
    color: var(--primary, #C8102E);
    font-size: 14px;
}

.footer-hotline-numbers {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.footer-hotline-numbers a {
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: color 0.2s ease;
}

.footer-hotline-numbers a:hover {
    color: var(--gold, #E5A93C);
}

/* Headings */
.footer-heading {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #ffffff;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
    font-family: var(--font-heading, inherit);
}

.footer-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 2px;
    background: var(--primary, #C8102E);
    border-radius: 2px;
}

/* Cột 2 & 3: Links */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-links li {
    margin-bottom: 0;
}

.footer-links a {
    color: #94A3B8;
    font-size: 13.5px;
    line-height: 1.4;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: all 0.2s ease;
}

.footer-links a::before {
    content: '›';
    margin-right: 7px;
    color: var(--primary, #C8102E);
    font-weight: 800;
    font-size: 14px;
    opacity: 0.7;
    transition: all 0.2s ease;
}

.footer-links a:hover {
    color: #ffffff;
    transform: translateX(5px);
}

.footer-links a:hover::before {
    opacity: 1;
    color: var(--gold, #E5A93C);
}

/* Cột 4: Contact Info */
.footer-contact-info {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-contact-info li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.55;
    color: #CBD5E1;
    margin-bottom: 0;
}

.contact-icon {
    color: var(--primary, #C8102E);
    font-size: 13px;
    margin-top: 3px;
    flex-shrink: 0;
    width: 18px;
    text-align: center;
}

.footer-contact-info a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-contact-info a:hover {
    color: var(--gold, #E5A93C);
}

/* Cột 5: Newsletter */
.newsletter-desc {
    font-size: 13px;
    line-height: 1.55;
    color: #94A3B8;
    margin-bottom: 14px;
}

.newsletter-form .form-input-group {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    padding: 4px 4px 4px 12px;
    transition: all 0.25s ease;
}

.newsletter-form .form-input-group:focus-within {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--primary, #C8102E);
    box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.25);
}

.newsletter-form input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #ffffff;
    font-size: 13px;
    padding: 6px 0;
    min-width: 0;
}

.newsletter-form input::placeholder {
    color: #64748B;
}

.newsletter-form button {
    position: static;
    width: 36px;
    height: 36px;
    background-color: var(--primary, #C8102E);
    border: none;
    border-radius: 6px;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.newsletter-form button:hover {
    background-color: #A00D24;
    transform: scale(1.04);
}

/* Footer Bottom */
.footer-bottom {
    padding: 16px 0;
    font-size: 12px;
    background: #040910;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.copyright-text {
    color: #64748B;
    font-size: 12px;
}

.bottom-links {
    display: flex;
    align-items: center;
    gap: 16px;
}

.bottom-links a {
    color: #64748B;
    text-decoration: none;
    font-size: 12px;
    transition: color 0.2s ease;
}

.bottom-links a:hover {
    color: #CBD5E1;
}

@media (min-width: 800px) and (max-width: 1050px) {
    .footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 28px 24px;
    }
    .footer-grid > .brand-col {
        grid-column: 1 / -1;
        display: block;
        padding-bottom: 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .brand-col .footer-desc {
        margin-bottom: 0;
        max-width: 650px;
    }
}

.bottom-links a:hover {
    color: #ffffff;
}

.sep {
    color: rgba(255, 255, 255, 0.2);
}

/* =========================================================================
   FLOATING QUICK CONTACT BUTTONS (HOTLINE & ZALO)
   ========================================================================= */
/* 2026-10-03: Khách hàng yêu cầu thêm 2 nút Gọi và Zalo nổi bên phải màn hình để liên hệ nhanh; trước đó thiếu kênh tương tác nhanh nổi trên viewport, nên bổ sung .floating-contact-group cố định góc phải với hiệu ứng lan tỏa (pulse wave), nhãn trượt (hover tooltip) mượt mà và tối ưu cảm ứng trên mobile không che khuất nội dung. */
.floating-contact-group {
    position: fixed;
    right: 20px;
    bottom: 76px;
    z-index: 998;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-end;
}

.floating-contact-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.22));
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.25s ease;
}

.floating-contact-btn:hover {
    transform: translateY(-2px) scale(1.04);
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.32));
}

.floating-icon {
    position: relative;
    z-index: 2;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    flex-shrink: 0;
}

.floating-contact-btn.btn-zalo .floating-icon {
    background: linear-gradient(135deg, #0088FF 0%, #0068FF 100%);
}

.floating-contact-btn.btn-call .floating-icon {
    background: linear-gradient(135deg, #E5253A 0%, #C8102E 100%);
}

/* Ring / Pulse Wave Effect */
.floating-pulse {
    position: absolute;
    right: 0;
    top: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

.floating-contact-btn.btn-zalo .floating-pulse {
    border: 2px solid rgba(0, 104, 255, 0.6);
    animation: floating-wave-zalo 2s infinite ease-out;
}

.floating-contact-btn.btn-call .floating-pulse {
    border: 2px solid rgba(200, 16, 46, 0.65);
    animation: floating-wave-call 2s infinite ease-out;
    animation-delay: 0.5s;
}

@keyframes floating-wave-zalo {
    0% {
        transform: scale(0.95);
        opacity: 0.9;
    }
    100% {
        transform: scale(1.65);
        opacity: 0;
    }
}

@keyframes floating-wave-call {
    0% {
        transform: scale(0.95);
        opacity: 0.9;
    }
    100% {
        transform: scale(1.65);
        opacity: 0;
    }
}

/* Call Icon Subtle Ringing Animation */
.floating-contact-btn.btn-call:hover .floating-icon i,
.floating-contact-btn.btn-call .floating-icon i {
    animation: phone-shake 2.4s infinite ease-in-out;
}

@keyframes phone-shake {
    0%, 75%, 100% {
        transform: rotate(0deg);
    }
    80% {
        transform: rotate(-14deg);
    }
    85% {
        transform: rotate(14deg);
    }
    90% {
        transform: rotate(-10deg);
    }
    95% {
        transform: rotate(10deg);
    }
}

/* Sliding Label on Desktop */
.floating-label {
    position: absolute;
    right: 56px;
    white-space: nowrap;
    background: #0B192C;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
    pointer-events: none;
}

.floating-contact-btn.btn-call .floating-label {
    background: #C8102E;
    border-color: rgba(255, 255, 255, 0.25);
}

.floating-contact-btn.btn-zalo .floating-label {
    background: #0068FF;
    border-color: rgba(255, 255, 255, 0.25);
}

.floating-contact-btn:hover .floating-label {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* Accessibility & Mobile Responsive */
@media (max-width: 768px) {
    .floating-contact-group {
        right: 14px;
        bottom: 68px;
        gap: 10px;
    }
    .floating-icon {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }
    .floating-pulse {
        width: 44px;
        height: 44px;
    }
    .floating-label {
        display: none; /* Hide hover label on touch devices */
    }
}

@media (prefers-reduced-motion: reduce) {
    .floating-pulse {
        animation: none !important;
        display: none;
    }
    .floating-contact-btn.btn-call .floating-icon i {
        animation: none !important;
    }
}

/* Back to Top */
.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 38px;
    height: 38px;
    background-color: var(--primary);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-card);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    z-index: 999;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background-color: var(--primary-hover);
}

/* ==========================================================================
   12. MODALS (Radius 3px)
   ========================================================================== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(11, 19, 37, 0.7);
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}

.modal-overlay.active {
    display: flex;
    opacity: 1;
    visibility: visible;
}

/* Keep quote modal usable when JavaScript is delayed or unavailable. */
.modal-overlay:target {
    display: flex;
    opacity: 1;
    visibility: visible;
}

.modal-dialog {
    background-color: #ffffff;
    border-radius: var(--radius-modal);
    width: 100%;
    max-width: 580px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 30px;
    position: relative;
}

.modal-header {
    position: relative;
    margin-bottom: 20px;
}

.modal-title {
    font-size: 1.35rem;
    font-weight: 900;
    color: var(--text-heading);
}

.modal-subtitle {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* 2026-10-03: Khách hàng yêu cầu tất cả các nút close khi hover vào sẽ có nền đỏ và căn giữa tuyệt đối; trước đó .modal-close ở dạng text xám không nền hover, nên chuẩn hóa kích thước 38x38px, bo góc 8px, căn giữa bằng icon vector SVG và đổi sang nền đỏ var(--primary) chữ trắng khi hover/focus/active. */
.modal-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.05);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    line-height: 0;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.modal-close svg {
    width: 18px;
    height: 18px;
    display: block;
    pointer-events: none;
    flex-shrink: 0;
    margin: auto;
}

.modal-close:hover,
.modal-close:focus-visible,
.modal-close:active {
    background-color: var(--primary, #C8102E) !important;
    border-color: var(--primary, #C8102E) !important;
    color: #ffffff !important;
    transform: scale(1.05);
}

.modal-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.modal-form .form-field {
    margin-bottom: 12px;
}

.modal-form label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 4px;
}

.modal-form input,
.modal-form select,
.modal-form textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-btn);
    font-size: 0.85rem;
    color: var(--text-heading);
    background: #ffffff;
}

.modal-form input:focus,
.modal-form select:focus,
.modal-form textarea:focus {
    border-color: var(--primary);
}

.modal-submit-btn {
    width: 100%;
    padding: 12px;
    font-size: 0.95rem;
}

.modal-guarantee {
    margin-top: 10px;
    font-size: 0.72rem;
    color: var(--text-muted);
    text-align: center;
}

.video-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 760px;
    background-color: #000000;
    border-radius: var(--radius-modal);
    overflow: hidden;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.video-modal-dialog .modal-close {
    position: absolute;
    top: 8px;
    right: 12px;
    color: #ffffff;
    z-index: 10;
}


/* Slide content, keyboard states, and shared content pages. */
.slide-overlay-gradient {position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.93) 24%,rgba(255,255,255,.42) 37%,rgba(255,255,255,0) 49%);pointer-events:none}
.slide-content-container {position:absolute;inset:0;display:flex;align-items:center;height:100%;pointer-events:none}
.slide-content {width:40%;max-width:520px;pointer-events:auto;padding:12px 0 28px}
.slide-badge {display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--primary);margin-bottom:10px}
.slide-title {font-size:clamp(24px,2.8vw,42px);line-height:1.24;font-weight:800;letter-spacing:-.035em;color:var(--text-heading);margin-bottom:12px}
.slider-slide-event .slide-title {line-height:1.24}
.slide-title span {display:block}
.title-line-1 {color:var(--text-heading)}
.title-line-2 {color:var(--primary)}
.slide-desc {font-size:15px;line-height:1.55;margin-bottom:16px;color:#334155}
.slide-actions {display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* 2026-10-03: Khách hàng yêu cầu thêm hiệu ứng xuất hiện cho các dãy chữ trong slide, mỗi dòng 1 hiệu ứng khác nhau: dòng đen bên trái qua, dòng đỏ bên phải vào; trước đó chữ trên slide hiển thị tĩnh cùng lúc, nên bổ sung keyframe chuyển động riêng biệt (titleBlackLeftIn từ trái sang cho title-line-1, titleRedRightIn từ phải sang cho title-line-2, slideBadgeIn từ trên xuống, slideDescUpIn và slideActionsUpIn từ dưới lên) kích hoạt theo nhịp stagger mỗi khi slide nhận class is-active và tuân thủ prefers-reduced-motion. */
@keyframes slideBadgeIn {
    0% {
        opacity: 0;
        transform: translateY(-22px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes titleBlackLeftIn {
    0% {
        opacity: 0;
        transform: translateX(-70px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes titleRedRightIn {
    0% {
        opacity: 0;
        transform: translateX(70px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideDescUpIn {
    0% {
        opacity: 0;
        transform: translateY(26px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideActionsUpIn {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.96);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.slider-slide.is-active .slide-badge {
    animation: slideBadgeIn 0.60s cubic-bezier(0.16, 1, 0.3, 1) 0.08s both;
    will-change: transform, opacity;
}

.slider-slide.is-active .title-line-1 {
    animation: titleBlackLeftIn 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both;
    will-change: transform, opacity;
}

.slider-slide.is-active .title-line-2 {
    animation: titleRedRightIn 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.32s both;
    will-change: transform, opacity;
}

.slider-slide.is-active .slide-desc {
    animation: slideDescUpIn 0.70s cubic-bezier(0.16, 1, 0.3, 1) 0.44s both;
    will-change: transform, opacity;
}

.slider-slide.is-active .slide-actions {
    animation: slideActionsUpIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.56s both;
    will-change: transform, opacity;
}

.slider-slide:not(.is-active) .slide-badge,
.slider-slide:not(.is-active) .title-line-1,
.slider-slide:not(.is-active) .title-line-2,
.slider-slide:not(.is-active) .slide-desc,
.slider-slide:not(.is-active) .slide-actions {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .slider-slide.is-active .slide-badge,
    .slider-slide.is-active .title-line-1,
    .slider-slide.is-active .title-line-2,
    .slider-slide.is-active .slide-desc,
    .slider-slide.is-active .slide-actions {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}
.btn-slide-outline {display:inline-flex;align-items:center;gap:8px;padding:10px 14px;background:#fff;border:1px solid #d9dfe5;border-radius:999px;font-size:14px;font-weight:600;color:var(--text-heading)}
.btn-slide-outline:hover {border-color:var(--primary);color:var(--primary)}
.slider-prev {top:auto;bottom:10px;left:12px;transform:none}
.slider-next {top:auto;bottom:10px;right:54px;transform:none}
.slider-btn {opacity:.7}
.client-logo {display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply}
.clients-strip > * {min-width:0}
.has-dropdown {display:flex;align-items:center;gap:3px}
.dropdown-toggle {width:22px;height:36px;background:transparent;border:0;color:inherit;cursor:pointer;font-size:10px}
.menu-item.dropdown-closed .sub-menu {visibility:hidden;opacity:0;pointer-events:none}
.sub-menu li a {font-size:14px;padding:10px 16px;border-bottom:0}
.mobile-menu-toggle {flex-shrink:0;width:40px;height:40px;justify-content:center}
.header-inner > * {min-width:0}
.service-card,.news-card,.about-grid > * {min-width:0}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {outline:2px solid var(--primary);outline-offset:3px}
.content-article {max-width:900px;margin:0 auto;padding:42px 24px 56px}
.content-article h1 {font-size:clamp(28px,3vw,40px);line-height:1.25;color:var(--text-heading);margin:12px 0 20px}
.content-article h2 {font-size:24px;color:var(--text-heading);margin:28px 0 12px}
.content-article p,.content-article li {font-size:16px;line-height:1.8;margin-bottom:14px}
.content-article ul {list-style:disc;padding-left:24px}
.content-article a:not(.btn-quote) {color:var(--primary);text-decoration:underline}
.detail-image {width:100%;aspect-ratio:16/8;object-fit:cover;margin:20px 0 28px}
.detail-actions {display:flex;gap:16px;flex-wrap:wrap;margin-top:28px}
.news-list {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:32px 0}

/* 2026-10-03: Khách hàng yêu cầu thêm phân trang và nút "Tải thêm" cho danh sách tin tức; trước đó trang tin tức chưa có vùng điều khiển phân trang và nút tải thêm, nên bổ sung CSS cho .news-pagination-area, nút .btn-loadmore-news với gradient thương hiệu/loading spinner, thanh tiến trình hiển thị bài viết và phân trang số .news-pagination-nav chuẩn chỉ. */
.news-pagination-area {
    margin-top: 12px;
    margin-bottom: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}

.news-loadmore-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 380px;
}

.btn-loadmore-news {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 32px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--primary, #C8102E) 0%, #A00B22 100%);
    color: #ffffff !important;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    border: none;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(200, 16, 46, 0.22);
    transition: all 0.25s ease;
    user-select: none;
    min-width: 210px;
    text-decoration: none;
}

.btn-loadmore-news:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(200, 16, 46, 0.32);
    background: linear-gradient(135deg, #d61838 0%, #B80E28 100%);
}

.btn-loadmore-news:active {
    transform: translateY(0);
}

.btn-loadmore-news .btn-loadmore-spinner {
    display: none;
}

.btn-loadmore-news.is-loading {
    opacity: 0.85;
    pointer-events: none;
    cursor: wait;
}

.btn-loadmore-news.is-loading .btn-loadmore-text {
    display: none;
}

.btn-loadmore-news.is-loading .btn-loadmore-spinner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.news-pagination-counter {
    width: 100%;
    text-align: center;
}

.news-counter-text {
    font-size: 13px;
    color: var(--text-muted, #64748B);
    font-weight: 600;
}

.news-counter-text strong {
    color: var(--dark-navy, #0B192C);
}

.news-progress-bar {
    width: 100%;
    height: 5px;
    background: #E2E8F0;
    border-radius: 999px;
    overflow: hidden;
    margin-top: 8px;
}

.news-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary, #C8102E), var(--gold, #E5A93C));
    border-radius: 999px;
    transition: width 0.4s ease;
}

.news-all-loaded {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #15803d;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    padding: 9px 22px;
    border-radius: 999px;
    margin: 0;
}

.news-pagination-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.news-pagination-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted, #64748B);
    margin-right: 4px;
}

.news-pagination-nav ul.page-numbers {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 6px;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.news-pagination-nav .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid var(--border-color, #E2E8F0);
    background: #ffffff;
    color: var(--text-heading, #0B192C);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
}

.news-pagination-nav a.page-numbers:hover {
    border-color: var(--primary, #C8102E);
    color: var(--primary, #C8102E);
    background: var(--primary-light, #FFF1F2);
    transform: translateY(-1px);
}

.news-pagination-nav span.page-numbers.current {
    background: var(--primary, #C8102E);
    border-color: var(--primary, #C8102E);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(200, 16, 46, 0.25);
}

.news-pagination-nav .page-numbers.prev,
.news-pagination-nav .page-numbers.next {
    gap: 6px;
    padding: 0 16px;
}

/* Shared detail layout for news articles and service pages. */
.single-page-hero h1 { max-width: 900px; }
.single-page-hero p { max-width: 700px; }
.single-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; padding-top: 58px; padding-bottom: 78px; align-items: start; }
.single-content { min-width: 0; }
.single-back-link { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); font-size: 14px; font-weight: 800; margin-bottom: 20px; }
.single-back-link:hover { color: var(--primary-hover); }
.single-content .detail-image { display: block; width: 100%; max-height: 430px; margin: 0 0 30px; object-fit: cover; }
.single-content .article-body { max-width: 820px; }
.single-content .article-body h2 { color: var(--text-heading); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25; margin: 30px 0 12px; }
.single-content .article-body p, .single-content .article-body li { color: var(--text-body); font-size: 16px; line-height: 1.8; }
.single-content .article-body a { color: var(--primary); text-decoration: underline; }
.single-sidebar { display: grid; gap: 18px; position: sticky; top: 24px; }
.single-services-card, .single-contact-card { border: 1px solid var(--border-color); background: var(--bg-light); padding: 24px; }
.single-contact-card { background: var(--dark-navy); color: #fff; border-color: var(--dark-navy); }
.single-sidebar-label { display: block; color: var(--primary); font-size: 11px; font-weight: 900; letter-spacing: .13em; }
.single-contact-card .single-sidebar-label { color: #fca5a5; }
.single-services-card h2, .single-contact-card h2 { color: var(--text-heading); font-size: 23px; line-height: 1.25; margin: 10px 0 16px; }
.single-contact-card h2 { color: #fff; }
.single-contact-card p { color: #cbd5e1; font-size: 14px; line-height: 1.65; margin-bottom: 18px; }
.single-contact-card .btn-quote { width: 100%; margin-bottom: 20px; }
.single-services-card ul, .single-contact-card ul { display: grid; gap: 2px; }
.single-services-card li a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-color); color: var(--text-body); font-size: 13px; font-weight: 700; line-height: 1.4; }
.single-services-card li:last-child a { border-bottom: 0; }
.single-services-card li a:hover { color: var(--primary); }
.single-services-card li i { color: var(--primary); font-size: 11px; }
.single-contact-card li { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; color: #cbd5e1; font-size: 13px; line-height: 1.5; }
.single-contact-card li i { width: 15px; color: #fca5a5; margin-top: 3px; text-align: center; }
.single-contact-card li a { color: #fff; font-weight: 700; }
.single-map-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; color: #fca5a5 !important; font-size: 13px; font-weight: 800; }
.single-bottom-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 42px; padding: 24px 26px; background: var(--bg-light); border: 1px solid var(--border-color); }
.single-bottom-cta h2 { color: var(--text-heading); font-size: 21px; line-height: 1.3; margin-top: 8px; max-width: 520px; }
@media (max-width: 900px) { .single-layout { grid-template-columns: 1fr; gap: 32px; } .single-sidebar { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .single-layout { padding-top: 42px; padding-bottom: 56px; } .single-sidebar { grid-template-columns: 1fr; } .single-bottom-cta { display: grid; } .single-content .article-body p, .single-content .article-body li { font-size: 15px; } }

/* =========================================================================
   404 ERROR PAGE STYLES
   ========================================================================= */
/* 2026-10-03: Khách hàng yêu cầu thiết kế trang 404 có logo thương hiệu ở giữa và nút quay lại trang chủ; trước đó thiếu stylesheet cho lỗi 404, nên bổ sung CSS layout căn giữa .error-404-section, hiệu ứng đổ bóng cho logo khiên .error-404-logo, kiểu dáng nút bấm quay lại trang chủ và cụm liên kết nhanh responsive. */
.error-404-page {
    background: radial-gradient(circle at 50% 15%, rgba(200, 16, 46, 0.04) 0%, rgba(248, 250, 252, 0.5) 45%, #ffffff 80%);
    min-height: calc(100vh - 360px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.error-404-section {
    padding: 70px 20px 90px;
    width: 100%;
}

.error-404-inner {
    max-width: 780px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}

.error-404-logo-wrap {
    position: relative;
    width: 140px;
    height: 165px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.error-404-logo-glow {
    position: absolute;
    inset: -16px;
    background: radial-gradient(circle, rgba(200, 16, 46, 0.14) 0%, rgba(229, 169, 60, 0.08) 50%, transparent 70%);
    border-radius: 50%;
    z-index: 1;
    filter: blur(10px);
}

.error-404-logo {
    position: relative;
    z-index: 2;
    width: 110px;
    height: 140px;
    object-fit: contain;
    filter: drop-shadow(0 12px 24px rgba(11, 25, 44, 0.16)) drop-shadow(0 4px 10px rgba(200, 16, 46, 0.22));
    transition: transform 0.3s ease, filter 0.3s ease;
}

.error-404-logo-wrap:hover .error-404-logo {
    transform: translateY(-4px) scale(1.03);
    filter: drop-shadow(0 16px 28px rgba(11, 25, 44, 0.20)) drop-shadow(0 6px 14px rgba(200, 16, 46, 0.30));
}

.error-404-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 660px;
}

.error-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 18px;
    background: #FFF1F2;
    color: var(--primary, #C8102E);
    border: 1px solid rgba(200, 16, 46, 0.18);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.error-404-title {
    font-size: clamp(26px, 3.2vw, 36px);
    font-weight: 800;
    line-height: 1.3;
    color: var(--dark-navy, #0B192C);
    font-family: var(--font-heading, inherit);
    margin: 4px 0 0;
}

.error-404-desc {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-muted, #64748B);
    margin: 0;
    max-width: 580px;
}

.error-404-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.btn-404-home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 30px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--primary, #C8102E) 0%, #A00B22 100%);
    color: #ffffff !important;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(200, 16, 46, 0.28);
    transition: all 0.25s ease;
}

.btn-404-home:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(200, 16, 46, 0.38);
    background: linear-gradient(135deg, #d61838 0%, #B80E28 100%);
}

.btn-404-contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 26px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid var(--border-color, #E2E8F0);
    color: var(--dark-navy, #0B192C) !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(11, 25, 44, 0.05);
    transition: all 0.25s ease;
}

.btn-404-contact:hover {
    border-color: var(--primary, #C8102E);
    color: var(--primary, #C8102E) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(11, 25, 44, 0.08);
}

.error-404-quicklinks {
    margin-top: 26px;
    padding-top: 24px;
    border-top: 1px dashed var(--border-color, #E2E8F0);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.quicklinks-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted, #64748B);
}

.quicklinks-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.quicklinks-list a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--dark-navy, #0B192C);
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 6px;
    background: rgba(11, 25, 44, 0.03);
    transition: all 0.2s ease;
}

.quicklinks-list a i {
    font-size: 10px;
    color: var(--primary, #C8102E);
    transition: transform 0.2s ease;
}

.quicklinks-list a:hover {
    background: #FFF1F2;
    color: var(--primary, #C8102E);
}

.quicklinks-list a:hover i {
    transform: translateX(3px);
}

@media (max-width: 600px) {
    .error-404-section { padding: 48px 16px 64px; }
    .error-404-logo-wrap { width: 110px; height: 135px; margin-bottom: 16px; }
    .error-404-logo { width: 90px; height: 115px; }
    .error-404-actions { flex-direction: column; width: 100%; }
    .btn-404-home, .btn-404-contact { width: 100%; }
    .quicklinks-list { gap: 8px; }
    .quicklinks-list a { font-size: 12px; padding: 5px 10px; }
}

/* Responsive layout: keep the 853px reference grid without tiny typography. */
@media (min-width:800px) and (max-width:1050px) {
 .header-inner {height:56px;gap:8px}
 .site-logo-img {width:36px;height:36px}
 .brand-title {font-size:17px}
 .main-navigation .nav-menu {gap:8px}
 .nav-menu .menu-item a {font-size:13px}
 .header-actions {gap:4px}
 .header-actions .btn-quote {padding:8px 10px;font-size:12px}
 .search-toggle-btn {width:28px;height:36px;font-size:15px}
 .dropdown-toggle {width:14px;font-size:8px}
 .section-title {font-size:25px}
 .service-title {font-size:14px}
 .service-text,.service-link {font-size:13px}
 .service-body {padding:20px 8px 12px}
 .slide-badge {font-size:10px;margin-bottom:8px}
 .slide-content {width:43%;padding:10px 0 26px}
 .slide-title {font-size:24px;margin-bottom:8px}
 .slide-desc {font-size:13px;line-height:1.4;margin-bottom:10px}
 .slide-actions {gap:6px;flex-wrap:nowrap}
 .slide-actions a {font-size:11px;padding:8px 10px;gap:5px}
 .about-title {font-size:22px}
 .about-paragraph,.pillar-desc {font-size:13px}
 .pillar-title {font-size:14px}
 .clients-strip-row {gap:20px}
 .clients-title {font-size:20px}
 .client-logo-item {min-width:160px;height:76px;padding:10px 16px}
 .client-logo-item .client-logo {max-height:50px;max-width:130px}
 .news-heading {font-size:14px}
 .cta-banner-title {font-size:20px}
 .cta-banner-box {padding:16px}
 .stat-label {font-size:12px}
 .stat-item {gap:8px;padding:2px}
}
@media (min-width:800px) and (max-width:900px) {
 .site-container {padding-left:54px;padding-right:54px}
 .header-inner {padding-left:24px;padding-right:24px}
 .top-bar-inner {padding-left:24px;padding-right:24px}
 .top-bar-item {font-size:10px}
 .top-bar-right {gap:12px}
 .slide-content-container {padding-left:54px;padding-right:54px}
}
@media (max-width:799px) {
 .site-container {padding-left:20px;padding-right:20px}
 .main-navigation {display:none}
 .mobile-menu-toggle {display:flex}
 .header-inner {height:58px;gap:12px}
 .header-actions {gap:4px;flex-shrink:0}
 .header-actions > .btn-quote {display:none}
 .site-logo-img {width:36px;height:36px}
 .brand-title {font-size:18px}
 .brand-subtitle {font-size:10px}
 .site-brand {gap:8px}
 .header-top-bar {position:relative}
 .top-bar-inner {display:block;width:100%;max-width:none;min-height:36px;margin:0;padding:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-behavior:auto;scrollbar-width:none;touch-action:pan-x pan-y pinch-zoom;cursor:grab}
 .top-bar-inner::-webkit-scrollbar {display:none}
 .header-top-bar.has-contact-overflow .top-bar-inner {width:calc(100% - 36px)}
 .top-bar-track {width:max-content;min-width:100%;min-height:36px;padding:0 20px;gap:24px}
 .top-bar-left,.top-bar-right {flex:none;justify-content:flex-start;flex-wrap:nowrap;gap:24px}
 .top-bar-right {order:0}
 .top-bar-left {order:1}
 .top-bar-item {flex:none;min-height:36px;font-size:12px;line-height:1.5}
 .top-bar-item i {font-size:11px}
 .top-bar-inner.is-dragging {cursor:grabbing;user-select:none}
 .header-top-bar.has-contact-overflow .top-bar-motion-toggle {position:absolute;inset:0 0 auto auto;display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-left:1px solid rgba(255,255,255,.12);border-radius:0;background:var(--dark-navy);color:#cbd5e1;cursor:pointer}
 .top-bar-motion-toggle:hover {color:#fff}
 .top-bar-inner:focus-visible {outline:1px solid #cbd5e1;outline-offset:-2px}
 .service-icon-badge {width:48px;height:48px;bottom:-24px;left:16px;font-size:24px}
 .service-icon-badge > i {font-size:24px;line-height:1}
 .service-card .service-body {padding:34px 16px 18px}
 .services-grid-5,.industries-grid-6 {grid-template-columns:repeat(3,minmax(0,1fr))}
 .about-grid,.news-cta-row {grid-template-columns:1fr;gap:24px}
 .stats-row {grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
 .stat-item:nth-child(2n) {border-right:0}
 .stat-label {font-size:13px}
 .footer-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px}
 .footer-grid > .footer-col {min-width:0}
 .footer-grid > .brand-col,.footer-grid > .contact-col,.footer-grid > .newsletter-col {grid-column:1 / -1}
 .clients-strip-row {gap:20px}
 .clients-title {font-size:24px}
 .client-logo-item {min-width:150px;height:72px;padding:8px 16px}
 .client-logo-item .client-logo {max-height:46px;max-width:120px}
 .slider-wrapper {aspect-ratio:auto;height:520px}
 .slide-image {height:48%;object-position:center 15%}
 .slide-overlay-gradient {display:none}
 .slide-content-container {inset:auto 0 0;height:56%;background:#fff;align-items:center}
 .slide-content {width:100%;max-width:none;padding:12px 0 44px}
 .slide-title {font-size:28px}
 .slide-desc {font-size:15px;max-width:550px}
 .slide-actions a {font-size:13px;padding:10px 12px}
 .slider-prev,.slider-next {top:21%;bottom:auto;transform:translateY(-50%)}
 .slider-next {right:12px}
 .slider-dots .slider-dot {width:12px;height:12px}
 .video-preview-box {aspect-ratio:4/3;width:100%;max-width:none;max-height:none}
}
@media (max-width:640px) {
 .section-header-flex {flex-direction:column;align-items:flex-start;gap:12px}
 .section-right-wrap {text-align:left;align-items:flex-start}
 .services-grid-5,.industries-grid-6 {grid-template-columns:repeat(2,minmax(0,1fr))}
 .news-cards-col,.news-list {grid-template-columns:1fr}
 .modal-form .form-row {grid-template-columns:1fr}
 .modal-dialog {padding:24px 20px}
 .modal-form input,.modal-form select,.modal-form textarea,.newsletter-form input {font-size:16px}
 .section-title,.about-title {font-size:26px}
 .section-desc,.service-text,.about-paragraph,.pillar-desc,.footer-desc {font-size:15px}
 .service-title {font-size:18px}
 .about-action-btns {gap:10px}
 .slide-title {font-size:25px}
 .slide-desc {font-size:15px;line-height:1.5;margin-bottom:14px}
 .slide-badge {font-size:11px}
 .slide-actions {gap:8px;flex-wrap:nowrap}
 .slide-actions a {font-size:12px;padding:10px 11px;gap:6px}
 .stat-number {font-size:24px}
 .stat-item {gap:10px;padding:6px 0}
 .stat-icon i {font-size:26px}
 .clients-section {padding:36px 0}
 .clients-heading-wrap {flex-direction:column;align-items:flex-start;gap:8px}
 .client-logo-item {min-width:135px;height:66px;padding:6px 14px}
 .client-logo-item .client-logo {max-height:42px;max-width:110px}
}
@media (max-width:480px) {
 .services-grid-5,.industries-grid-6 {grid-template-columns:1fr}
 .slide-actions a {min-height:40px}
 .content-article {padding:28px 20px 40px}
 .search-form > div {flex-wrap:wrap;justify-content:flex-end}
 .search-field {min-width:0;width:100%}
 .search-form > div .btn-quote {margin-left:auto}
 .mobile-drawer {width:min(320px,calc(100% - 24px))}
}
@media (prefers-reduced-motion:reduce) {
 html {scroll-behavior:auto}
 *,*::before,*::after {transition:none!important;animation:none!important}
}

.menu-item.dropdown-open .sub-menu {visibility:visible;opacity:1;pointer-events:auto}

.news-thumb {display:block}

.footer-hotline-badge {display:flex;flex-direction:column;align-items:center;gap:7px;width:fit-content;max-width:100%;margin-inline:auto;padding:10px 12px;font-size:13px}
.footer-hotline-label {display:flex;align-items:center;gap:8px}
.footer-hotline-numbers {display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px}
.footer-hotline-numbers a {white-space:nowrap;flex-shrink:0;line-height:1.6;text-decoration:none;font-variant-numeric:tabular-nums}

.mobile-menu-toggle {align-items:center;gap:5px}
.mobile-menu-toggle span {width:22px;flex-shrink:0}
@media(max-width:799px) {
 .slider-dot {background:#a5acb7}
 .slider-dot.is-active {background:var(--primary)}
}
@media(min-width:800px) and (max-width:1050px) {
 .cta-banner-title {font-size:18px}
 .cta-banner-desc {font-size:13px;line-height:1.5}
}

/* v3 banners: preserve heads in the shallow desktop frame. */
.slide-image {object-position:center 10%}
@media (max-width:799px) {
 .slider-slide:nth-child(1) .slide-image {object-position:78% 10%}
 .slider-slide:nth-child(2) .slide-image {object-position:80% 10%}
 .slider-slide:nth-child(3) .slide-image {object-position:65% 10%}
}

#services .section-right-wrap {width:min(440px,100%);min-width:0}
/* 2026-10-04: Khách hàng yêu cầu thêm border bên trái cho dòng mô tả dịch vụ chạy ngang để dễ hình dung khung chữ chạy; trước đó dòng chữ chạy trôi nổi giữa không gian không có đường gióng phân định, nên bổ sung border-left 3px màu đỏ thương hiệu cùng khoảng đệm lề trái để tạo điểm tựa thị giác rõ ràng. */
.service-desc-ticker {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-align: left;
    border-left: 3px solid var(--primary);
    padding: 2px 0 2px 10px;
}
.service-desc-track {display:inline-block;white-space:nowrap}
.service-desc-ticker.has-overflow .service-desc-track {animation:service-description-pan var(--ticker-duration,10s) ease-in-out infinite alternate}
.service-desc-ticker:hover .service-desc-track,.service-desc-ticker:focus .service-desc-track {animation-play-state:paused}
@keyframes service-description-pan {
 0%,15% {transform:translateX(0)}
 85%,100% {transform:translateX(var(--ticker-offset,0px))}
}
@media (prefers-reduced-motion:reduce) {
 .service-desc-ticker {overflow-x:auto}
 .service-desc-track {animation:none!important;transform:none!important}
}

/* Industries: six desktop columns, horizontal Swiper on phones/tablets. */
.industries-swiper {width:100%;min-width:0}
.industries-slider-controls {display:none}
@media(min-width:800px) {
 .industries-swiper .swiper-wrapper {display:grid;height:auto;transform:none}
 .industries-swiper .swiper-slide {width:auto}
}
@media(max-width:799px) {
 .industries-swiper {overflow:hidden;touch-action:pan-y}
 .industries-swiper .industries-grid-6 {display:flex;gap:0}
 .industries-swiper .industry-card {height:auto;flex-shrink:0}
 .industries-swiper .industry-img-box {height:auto;aspect-ratio:16/10}
 .industries-swiper .industry-bar {height:44px;font-size:14px;padding:0 12px}
 .industries-slider-controls {display:flex;align-items:center;gap:8px;margin-top:12px}
 .industries-slide-hint {font-size:13px;color:var(--text-muted);margin-right:auto}
 .industries-slide-count {font-size:13px;font-variant-numeric:tabular-nums;color:var(--text-heading);margin-right:6px}
 .industries-slider-controls button {display:flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--border-color);border-radius:3px;background:#fff;color:var(--primary);cursor:pointer}
 .industries-slider-controls button:disabled {opacity:.4;cursor:default}
 .industries-swiper:not(.swiper-initialized) .industries-grid-6 {gap:12px;overflow-x:auto;scroll-snap-type:x mandatory}
 .industries-swiper:not(.swiper-initialized) .industry-card {width:80%;scroll-snap-align:start}
}

/* Dialog actions and footer remain readable at narrow widths. */
.modal-header {padding-right:44px}
.modal-close {width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;top:-4px;right:-4px;border-radius:8px}
.video-notice-dialog > .modal-close {top:8px;right:8px}
.video-notice-dialog > div:last-child {flex-wrap:wrap}
.video-notice-dialog > div:last-child a {flex-shrink:0;min-height:42px;display:inline-flex;align-items:center;justify-content:center}
.footer-heading {font-size:14px}
.footer-links a,.footer-contact-info li,.newsletter-desc {font-size:12px;line-height:1.6}
.footer-contact-info a {min-width:0;overflow-wrap:anywhere}
@media(max-width:799px) {
 .footer-heading {font-size:16px}
 .footer-links a {font-size:14px;padding:3px 0}
 .footer-contact-info li,.newsletter-desc {font-size:13px}
}

/* 2026-10-04: Khách hàng yêu cầu giữ lại nền đỏ và kẻ ô ly như cũ, tinh chỉnh phần chữ và thẻ cho tinh tế dễ nhìn; trước đó khối thống kê nền đỏ cũ dùng thẻ kính mờ thô và chữ hồng nhạt chìm màu, nên khôi phục nền đỏ kẻ ô ly đặc trưng (#b91c1c kết hợp lưới 28px 28px) đồng thời nâng cấp typography số trắng sắc nét, hậu tố vàng kim sang trọng, chữ chú thích sáng rõ tương phản cao cùng icon an ninh trợ lực thị giác. */
#stats,
#stats.stats-section {
    background: #b91c1c;
    border: 0;
    padding: 0;
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

.stats-panel {
    background-color: #b91c1c;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 28px 28px;
    padding: 30px 0;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
}

.stats-cards {
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

/* 2026-10-04: Khách hàng yêu cầu thiết kế lại stats-card chia 2 phần với icon chiếm full chiều cao bên trái để tăng tính thẩm mỹ và hiện đại; trước đó icon là khối box nhỏ nằm ngang cạnh chữ trông thô và rời rạc, nên sửa sang cấu trúc card 2 phần bằng flex stretch (icon box full height mép trái với viền ngăn cách tinh tế, info căn giữa bên phải), giữ nguyên nền đỏ kẻ ô ly và bố cục 2 cột trên mobile. */
.stats-card {
    position: relative;
    display: flex;
    align-items: stretch;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 2px;
    overflow: hidden;
    padding: 0;
    text-align: left;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.stats-card:hover {
    transform: translateY(-3px);
    background: rgba(0, 0, 0, 0.26);
    border-color: rgba(255, 255, 255, 0.45);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

/* 2026-10-04: Khách hàng yêu cầu tăng kích thước icon to và mở rộng phần icon box hơn một chút để khối icon nổi bật hơn; trước đó width 72px / font 24px nhìn hơi nhỏ so với tổng thể card, nên tăng width lên 82px (desktop) và font-size lên 28px cùng tỉ lệ tương ứng trên tablet/mobile, đồng thời bảo toàn cấu trúc chia 2 phần và grid 2 cột trên mobile. */
.stats-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 82px;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.18);
    border-right: 1px solid rgba(255, 255, 255, 0.16);
    color: #ffffff;
    font-size: 28px;
    transition: background 0.25s ease, color 0.25s ease;
}

.stats-card:hover .stats-icon-box {
    background: rgba(255, 255, 255, 0.16);
    color: #fef08a;
}

.stats-icon-box i {
    transition: transform 0.25s ease;
}

.stats-card:hover .stats-icon-box i {
    transform: scale(1.12);
}

.stats-info {
    flex: 1;
    min-width: 0;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stats-value {
    display: block;
    font-size: clamp(24px, 2.2vw, 30px);
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.025em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.stats-unit {
    color: #fef08a;
    font-weight: 800;
    font-size: 0.85em;
    margin-left: 2px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.stats-caption {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    white-space: nowrap;
}

.stats-value-static {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (min-width: 800px) and (max-width: 1100px) {
    .stats-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
    .stats-icon-box {
        width: 76px;
        font-size: 26px;
    }
    .stats-info {
        padding: 14px 15px;
    }
    .stats-caption {
        white-space: normal;
    }
}

/* 2026-10-04: Khách hàng yêu cầu trên mobile bố trí grid 2 thẻ/hàng cho khối thống kê; trước đó tại breakpoint max-width: 480px khối stats bị chuyển sang 1 cột làm dài trang, nên duy trì grid 2 cột cân xứng (repeat(2, minmax(0, 1fr))) trên toàn bộ thiết bị di động, tối ưu padding và kích thước icon tự co giãn phù hợp. */
@media (max-width: 799px) {
    .stats-panel {
        padding: 20px 0;
    }
    .stats-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .stats-card {
        border-radius: 2px;
    }
    .stats-icon-box {
        width: 54px;
        font-size: 21px;
    }
    .stats-info {
        padding: 10px 8px 10px 10px;
    }
    .stats-value {
        font-size: 20px;
    }
    .stats-unit {
        font-size: 0.8em;
    }
    .stats-caption {
        font-size: 11.5px;
        line-height: 1.3;
        white-space: normal;
        word-break: break-word;
    }
}

@media (max-width: 480px) {
    .stats-panel {
        padding: 16px 0;
    }
    .stats-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .stats-card {
        border-radius: 2px;
    }
    .stats-icon-box {
        width: 46px;
        font-size: 18px;
    }
    .stats-info {
        padding: 8px 6px 8px 8px;
    }
    .stats-value {
        font-size: 18px;
    }
    .stats-caption {
        font-size: 11px;
        line-height: 1.25;
    }
}

.contact-map-section { padding-bottom: 76px; }
.contact-map-heading { margin-bottom: 24px; }
.contact-map-heading > span { color: var(--primary); font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.contact-map-heading h2 { color: var(--text-heading); font-size: clamp(28px, 3vw, 42px); line-height: 1.3; margin: 10px 0 12px; }
.contact-map-heading p { color: var(--text-body); line-height: 1.7; }
.contact-map-frame { border: 1px solid var(--border-color); background: var(--bg-light); }
.contact-map-frame iframe { display: block; width: 100%; height: 420px; border: 0; }

/* 2026-10-03: Khách hàng yêu cầu đường viền đáy header bo nhọn theo dáng khiên và ôm sát logo hơn, loại bỏ line đỏ và giữ phẳng toàn bộ đáy menu sang bên phải; trước đó viền đáy bo tròn chữ U quá rộng không tôn dáng khiên logo, nên cập nhật đường Bézier bám sát góc vát nhọn của khiên (lPad = 5px, bo nhọn tại đỉnh đáy) và nối thẳng sang mép phải. */
.site-header {
    background-color: transparent;
    border-bottom: none;
}
.site-header,
.main-header { overflow: visible; }
.header-top-bar { position: relative; z-index: 5; background-color: var(--dark-navy); }

.main-header {
    position: relative;
    background-color: transparent;
    padding-bottom: 0;
}

.header-contour-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
    filter: drop-shadow(0 6px 16px rgba(15, 23, 42, 0.09));
    transition: filter .25s ease;
}

.site-header.is-sticky .header-contour-svg {
    filter: drop-shadow(0 10px 22px rgba(15, 23, 42, 0.16));
}

.header-inner {
    height: 64px;
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 2026-10-03: Khách hàng yêu cầu logo to rõ hơn và viền đáy ôm sát nhọn theo khiên; trước đó logo bị nhỏ và chìm vào header, nên tăng kích thước .site-logo-img (desktop: 96x122px, tablet: 78x99px, mobile: 70x89px) và định vị align-self: flex-start với margin-top chuẩn để logo không lấn top-bar đồng thời tôn dáng khiên. */
/* 2026-10-03: Khách hàng yêu cầu thêm hiệu ứng xuất hiện từ trên xuống cho logo; trước đó logo hiển thị tĩnh ngay khi tải trang, nên thêm animation logoDropIn trượt từ trên xuống với gia tốc giảm dần (ease-out cubic-bezier(0.16, 1, 0.3, 1)) đồng bộ nhịp mở trang, giữ nguyên vị trí layout tĩnh khi đo đạc contour và tuân thủ prefers-reduced-motion. */
@keyframes logoDropIn {
    0% {
        opacity: 0;
        transform: translateY(-44px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.site-brand {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 6px;
    text-decoration: none;
}

.site-brand.is-entering {
    animation: logoDropIn 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    will-change: transform, opacity;
}

.main-navigation {
    margin: 0 auto;
}

.site-logo-img {
    width: 96px;
    height: 122px;
    flex: 0 0 96px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 6px 12px rgba(15, 23, 42, .18));
    transition: transform 0.25s ease, filter 0.25s ease;
}

.site-brand:hover .site-logo-img {
    transform: translateY(2px) scale(1.02);
    filter: drop-shadow(0 8px 18px rgba(200, 16, 46, 0.28));
}

@media (prefers-reduced-motion: reduce) {
    .site-brand.is-entering {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

.brand-text {
    display: none;
}

@media (min-width: 800px) and (max-width: 1050px) {
    .header-inner { height: 60px; padding-left: 16px; padding-right: 16px; }
    .site-brand { align-self: flex-start; margin-top: 5px; }
    .site-logo-img { width: 78px; height: 99px; flex-basis: 78px; }
    .main-navigation .nav-menu { gap: 2px; padding: 2px; }
    .main-navigation .nav-menu > .menu-item > a { padding: 6px 7px; font-size: 12px; }
    .main-navigation .nav-menu > .has-dropdown > a { padding-right: 6px; }
    .header-actions { gap: 8px; }
    .header-actions .btn-quote { padding: 7px 12px; font-size: 12px; }
}

@media (max-width: 799px) {
    .header-inner { height: 58px; }
    .main-header { padding-bottom: 0; }
    .site-brand { align-self: flex-start; margin-top: 4px; gap: 8px; }
    .main-navigation { margin-left: 0; }
    .site-logo-img { width: 70px; height: 89px; flex-basis: 70px; }
}

@media (max-width: 520px) { .contact-map-frame iframe { height: 320px; } .contact-map-section { padding-bottom: 48px; } }

/* Final responsive corrections: keep the mobile header inside the content box and
   keep the slideshow text gradient limited to the copy area. */
@media (max-width: 799px) {
    .main-header .site-container.header-inner {
        width: 100%;
        max-width: none;
        padding-left: 16px;
        padding-right: 16px;
        gap: 8px;
    }
    .site-brand {
        min-width: 0;
        width: auto;
        max-width: 64px;
        margin-right: auto;
    }
    .site-logo-img {
        width: 56px;
        height: 72px;
        flex-basis: 56px;
    }
    .header-actions {
        gap: 2px;
        width: auto;
        min-width: 0;
    }
    .search-toggle-btn,
    .mobile-menu-toggle {
        width: 40px;
        height: 40px;
    }
    .slider-wrapper {
        height: 500px;
    }
}

@media (min-width: 800px) {
    .slide-overlay-gradient {
        background: linear-gradient(90deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.70) 20%, rgba(255,255,255,.20) 34%, rgba(255,255,255,0) 45%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .slide-overlay-gradient { background: linear-gradient(90deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.62) 22%, rgba(255,255,255,0) 46%); }
}

/* Contact page: bring the form directly under the hero instead of leaving a
   large empty band between the two sections. */
.content-page-body.contact-page-grid {
    padding-top: 24px;
    padding-bottom: 48px;
}

/* Keep off-canvas decorative/header layers from expanding the contact page's
   scrollable width. The content columns themselves remain fully responsive. */
.content-page {
    overflow-x: clip;
}

/* =========================================================================
   PAGE PRELOADER, SCROLL REVEAL ANIMATIONS & LAZY LOADING
   ========================================================================= */
/* 2026-10-03: Khách hàng yêu cầu hiệu ứng tải trang (preloader), animation xuất hiện cuộn trang (scroll reveal) và lazy loading; trước đó giao diện tĩnh thiếu chuyển động mềm mại, nên bổ sung CSS preloader, animation trượt fade-in theo nhịp cuộn, và hiệu ứng fade ảnh khi lazy load đồng thời tuân thủ prefers-reduced-motion. */

/* 1. Page Preloader */
.page-preloader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: auto;
}

.page-preloader.is-loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.preloader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    max-width: 320px;
    padding: 24px;
}

/* 2026-10-03: Khách hàng yêu cầu vòng xoay spinner của preloader overlay phải tròn tuyệt đối và đồng tâm hoàn hảo quanh logo khiên; trước đó .preloader-shield-wrap bị đặt kích thước chữ nhật 100x120px và inset: -8px khiến vòng xoay biến dạng thành hình elip 116x136px méo và đảo lệch tâm khi quay 360 độ, nên chuẩn hóa khung chứa và vòng spinner thành hình vuông tỉ lệ 1:1 (136x136px, aspect-ratio: 1/1, border-radius: 50%) đồng trục tuyệt đối với logo. */
.preloader-shield-wrap {
    position: relative;
    width: 136px;
    height: 136px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preloader-logo {
    width: 72px;
    height: 92px;
    object-fit: contain;
    position: relative;
    z-index: 2;
    animation: preloader-pulse 1.8s ease-in-out infinite;
    filter: drop-shadow(0 8px 16px rgba(200, 16, 46, 0.25));
}

.preloader-spinner-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-sizing: border-box;
    border: 3px solid rgba(200, 16, 46, 0.12);
    border-top-color: var(--primary, #C8102E);
    border-right-color: var(--gold, #E5A93C);
    animation: preloader-spin 1.2s cubic-bezier(0.5, 0.1, 0.5, 0.9) infinite;
    transform-origin: center center;
    z-index: 1;
    pointer-events: none;
}

@keyframes preloader-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes preloader-pulse {
    0%, 100% { transform: scale(1); opacity: 0.95; }
    50% { transform: scale(1.04); opacity: 1; filter: drop-shadow(0 12px 24px rgba(200, 16, 46, 0.35)); }
}

.preloader-brand {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.preloader-title {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--dark-navy, #0B192C);
    font-family: var(--font-heading, inherit);
}

.preloader-slogan {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-muted, #64748B);
}

.preloader-progress-bar {
    width: 140px;
    height: 3px;
    background: #E2E8F0;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    margin-top: 6px;
}

.preloader-progress-track {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 45%;
    background: linear-gradient(90deg, var(--primary, #C8102E), var(--gold, #E5A93C));
    border-radius: 4px;
    animation: preloader-bar-slide 1.4s ease-in-out infinite;
}

@keyframes preloader-bar-slide {
    0% { left: -45%; width: 45%; }
    50% { left: 30%; width: 60%; }
    100% { left: 100%; width: 45%; }
}

/* 2. Scroll Reveal Animations */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.reveal-on-scroll.reveal-fade-left {
    transform: translateX(-28px);
}

.reveal-on-scroll.reveal-fade-right {
    transform: translateX(28px);
}

.reveal-on-scroll.is-revealed {
    opacity: 1;
    transform: translate(0, 0);
}

/* Stagger Delays for Grid Children */
.reveal-stagger > *:nth-child(1),
.reveal-delay-1 { transition-delay: 0.06s; }
.reveal-stagger > *:nth-child(2),
.reveal-delay-2 { transition-delay: 0.13s; }
.reveal-stagger > *:nth-child(3),
.reveal-delay-3 { transition-delay: 0.20s; }
.reveal-stagger > *:nth-child(4),
.reveal-delay-4 { transition-delay: 0.27s; }
.reveal-stagger > *:nth-child(5),
.reveal-delay-5 { transition-delay: 0.34s; }
.reveal-stagger > *:nth-child(6),
.reveal-delay-6 { transition-delay: 0.41s; }

/* 3. Lazy Loading Images Smooth Transition */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.45s ease-in-out;
}

img[loading="lazy"].is-loaded {
    opacity: 1;
}

/* 4. Accessibility & Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .page-preloader { display: none !important; }
    .preloader-logo, .preloader-spinner-ring, .preloader-progress-track { animation: none !important; }
    .reveal-on-scroll {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    img[loading="lazy"] {
        opacity: 1 !important;
        transition: none !important;
    }
    .clients-marquee-track {
        animation: none !important;
    }
}

/* ==========================================================================
   2026-10-04: Khách hàng yêu cầu logo khách hàng giữ nguyên tỷ lệ không bị cắt, các card thương hiệu không bị tràn ra ngoài màn hình trên viewport lớn (2304px), và toàn bộ trang co giãn chuẩn responsive trên mobile; trước đó the_post_thumbnail('thumbnail') sinh ảnh vuông 150x150 bị cắt mất 2 bên logo, lưới CSS Grid dùng 1fr thay vì minmax(0, 1fr) kết hợp white-space: nowrap khiến card tràn lề ở 2304px, và thiếu media query mobile hoàn chỉnh; sửa đổi dùng minmax(0, 1fr), min-width: 0, object-fit: contain giữ nguyên tỷ lệ ảnh và tối ưu hiển thị đa thiết bị.
   ========================================================================== */
.clients-page {
    background-color: var(--bg-light);
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.clients-hero {
    position: relative;
    padding: 72px 0 68px;
    background-color: var(--dark-navy);
    background-image: linear-gradient(rgba(7, 16, 32, 0.86), rgba(7, 16, 32, 0.90)), url("assets/images/optimized/about-building-v2.webp");
    background-size: cover;
    background-position: center;
    color: #ffffff;
    width: 100%;
    box-sizing: border-box;
}
.clients-hero .about-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    margin-bottom: 14px;
    color: #94a3b8;
    flex-wrap: wrap;
}
.clients-hero .about-breadcrumb a {
    color: #cbd5e1;
    text-decoration: none;
    transition: var(--transition);
}
.clients-hero .about-breadcrumb a:hover {
    color: #ffffff;
}
.clients-hero .about-breadcrumb .sep {
    color: #64748b;
}
.clients-hero .about-breadcrumb .current {
    color: #ffffff;
    font-weight: 600;
}
.clients-hero .section-badge {
    color: #fca5a5;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.clients-hero .section-badge .badge-line {
    display: inline-block;
    width: 20px;
    height: 2px;
    background: var(--primary);
}
.clients-hero .about-hero-title {
    color: #ffffff;
    font-size: clamp(26px, 3.6vw, 42px);
    line-height: 1.22;
    font-weight: 800;
    letter-spacing: -0.025em;
    margin-bottom: 16px;
    max-width: 900px;
    word-break: break-word;
}
.clients-hero .about-hero-lead {
    color: #cbd5e1;
    font-size: 15.5px;
    line-height: 1.65;
    max-width: 820px;
    margin: 0;
}

/* Strategic Partner Brands */
.clients-brands-section {
    padding: 64px 0 40px;
    width: 100%;
    box-sizing: border-box;
}
.clients-brands-section .section-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 36px;
}
.clients-brands-section .section-header .section-badge {
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.clients-brands-section .section-header .badge-line {
    display: inline-block;
    width: 20px;
    height: 2px;
    background: var(--primary);
}
.clients-brands-section .section-title {
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 800;
    color: var(--text-heading);
    letter-spacing: -0.02em;
    margin-bottom: 12px;
    word-break: break-word;
}
.clients-brands-section .section-desc {
    color: var(--text-body);
    font-size: 15px;
    line-height: 1.6;
}

.brands-logo-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.brand-logo-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    box-shadow: var(--shadow-subtle);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    cursor: default;
    min-height: 104px;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
.brand-logo-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    border-color: var(--primary-border);
}
.brand-logo-wrap {
    width: 100%;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 4px;
    box-sizing: border-box;
}
.brand-logo-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;
    filter: grayscale(20%);
    transition: filter 0.25s ease;
    display: block;
}
.brand-logo-card:hover .brand-logo-img {
    filter: grayscale(0%);
}
.brand-logo-text {
    flex-direction: column;
    gap: 4px;
    color: var(--text-heading);
}
.brand-logo-text .brand-initials {
    font-size: 20px;
    color: var(--primary);
}
.brand-logo-text .brand-name-abbr {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
}
.brand-title-hover {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-heading);
    margin-top: 8px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Directory Section & Filters */
.clients-directory-section {
    padding: 48px 0 56px;
    width: 100%;
    box-sizing: border-box;
}
.directory-header-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
}
.directory-header-row .section-badge {
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.directory-header-row .badge-line {
    display: inline-block;
    width: 20px;
    height: 2px;
    background: var(--primary);
}
.directory-header-row .section-title {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 800;
    color: var(--text-heading);
    letter-spacing: -0.02em;
    word-break: break-word;
}
.admin-hint-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--radius-btn);
    white-space: nowrap;
}

.clients-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 32px;
    padding: 8px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.filter-tab-btn {
    border: none;
    background: transparent;
    color: var(--text-body);
    font-size: 14px;
    font-weight: 600;
    padding: 9px 18px;
    border-radius: var(--radius-btn);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    font-family: inherit;
}
.filter-tab-btn:hover {
    background: #f1f5f9;
    color: var(--text-heading);
}
.filter-tab-btn.active {
    background: var(--primary);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(204, 23, 38, 0.25);
}

/* Client Cards Grid */
.clients-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.client-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    padding: 22px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-subtle);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}
.client-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.07);
    border-color: #cbd5e1;
}
.client-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-light);
    width: 100%;
    box-sizing: border-box;
}
.client-logo-box {
    width: 84px;
    height: 56px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    padding: 4px 8px;
    box-sizing: border-box;
}
.client-card-logo {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;
    display: block;
}
.client-logo-placeholder {
    font-size: 24px;
    color: #94a3b8;
}
.client-badge-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
    min-width: 0;
    flex: 1;
}
.client-cat-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    border-radius: 2px;
    background: var(--primary-light);
    color: var(--primary);
    border: 1px solid var(--primary-border);
    word-break: break-word;
    text-align: right;
}
.client-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.client-card-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 12px;
    line-height: 1.35;
    word-break: break-word;
}
.client-meta-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--text-body);
    margin-bottom: 8px;
    line-height: 1.45;
}
.client-meta-item i {
    color: var(--primary);
    margin-top: 3px;
    font-size: 13px;
    flex-shrink: 0;
}
.client-service-item {
    color: #0f172a;
    font-weight: 500;
}
.client-card-desc {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.55;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border-color);
}
.no-clients-found {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    background: #ffffff;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-card);
    color: var(--text-muted);
    font-size: 15px;
}

/* Comprehensive Sector Directory (Hồ sơ năng lực tai_lieu.pdf) */
.clients-pdf-table-section {
    padding: 56px 0 60px;
    border-top: 1px solid var(--border-color);
    width: 100%;
    box-sizing: border-box;
}
.pdf-table-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
}
.pdf-table-header .section-badge {
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.pdf-table-header .badge-line {
    display: inline-block;
    width: 20px;
    height: 2px;
    background: var(--primary);
}
.pdf-table-header .section-title {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 800;
    color: var(--text-heading);
    letter-spacing: -0.02em;
    margin-bottom: 8px;
    word-break: break-word;
}
.pdf-table-header .section-desc {
    color: var(--text-body);
    font-size: 14px;
    margin: 0;
}
.pdf-search-box {
    position: relative;
    width: 340px;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.pdf-search-box i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
    font-size: 14px;
}
.pdf-search-box input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-btn);
    font-size: 14px;
    background: #ffffff;
    color: var(--text-heading);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
    font-family: inherit;
}
.pdf-search-box input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(204, 23, 38, 0.12);
}

.pdf-sectors-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
}
.sector-block {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    padding: 22px;
    box-shadow: var(--shadow-subtle);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}
.sector-block:hover {
    box-shadow: var(--shadow-light);
}
.sector-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border-light);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.sector-head i {
    font-size: 18px;
    color: var(--primary);
    width: 36px;
    height: 36px;
    background: var(--primary-light);
    border-radius: var(--radius-card);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sector-head h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-heading);
    flex: 1;
    min-width: 0;
    margin: 0;
    line-height: 1.35;
    word-break: break-word;
}
.sector-count {
    font-size: 11px;
    font-weight: 700;
    background: #f1f5f9;
    color: #475569;
    padding: 3px 8px;
    border-radius: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}
.sector-items-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sector-items-list li {
    font-size: 13px;
    color: var(--text-body);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.5;
    padding-bottom: 8px;
    border-bottom: 1px dashed #f1f5f9;
    word-break: break-word;
    overflow-wrap: break-word;
}
.sector-items-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.sector-items-list li i {
    color: #10b981;
    font-size: 13px;
    margin-top: 4px;
    flex-shrink: 0;
}

/* Process Section */
.clients-process-section {
    padding: 60px 0;
    border-top: 1px solid var(--border-color);
    width: 100%;
    box-sizing: border-box;
}
.clients-process-section .section-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 40px;
}
.clients-process-section .section-badge {
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.clients-process-section .badge-line {
    display: inline-block;
    width: 20px;
    height: 2px;
    background: var(--primary);
}
.clients-process-section .section-title {
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 800;
    color: var(--text-heading);
    letter-spacing: -0.02em;
    margin-bottom: 12px;
    word-break: break-word;
}
.clients-process-section .section-desc {
    color: var(--text-body);
    font-size: 15px;
    line-height: 1.6;
}

.process-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    width: 100%;
    box-sizing: border-box;
}
.process-step-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    padding: 26px 18px;
    position: relative;
    box-shadow: var(--shadow-subtle);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}
.process-step-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}
.process-step-card .step-number {
    position: absolute;
    top: 16px;
    right: 18px;
    font-size: 30px;
    font-weight: 900;
    color: #e2e8f0;
    line-height: 1;
    font-family: inherit;
}
.process-step-card .step-icon {
    width: 44px;
    height: 44px;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: var(--radius-card);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 14px;
}
.process-step-card .step-title {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--text-heading);
    margin-bottom: 8px;
    line-height: 1.35;
}
.process-step-card .step-desc {
    font-size: 13px;
    color: var(--text-body);
    line-height: 1.55;
    margin: 0;
}

/* Consultation CTA */
.clients-cta-section {
    padding: 0 0 68px;
    width: 100%;
    box-sizing: border-box;
}
.clients-cta-box {
    background: linear-gradient(135deg, var(--dark-navy) 0%, #152243 100%);
    border-radius: var(--radius-none);
    padding: 44px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    color: #ffffff;
    box-shadow: 0 12px 30px rgba(11, 19, 37, 0.15);
    width: 100%;
    box-sizing: border-box;
}
.clients-cta-box .cta-text-side {
    max-width: 640px;
}
.clients-cta-box .cta-box-title {
    color: #ffffff;
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 800;
    margin-bottom: 12px;
    line-height: 1.25;
}
.clients-cta-box .cta-box-desc {
    color: #cbd5e1;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}
.clients-cta-box .cta-btn-side {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* Responsive Breakpoints */
@media (max-width: 1200px) {
    .brands-logo-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
    }
    .clients-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
    .process-steps-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

@media (max-width: 900px) {
    .clients-hero {
        padding: 56px 0 48px;
    }
    .clients-brands-section {
        padding: 48px 0 32px;
    }
    .brands-logo-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }
    .pdf-sectors-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
    .clients-cta-box {
        flex-direction: column;
        align-items: stretch;
        padding: 32px 24px;
        gap: 24px;
        text-align: center;
    }
    .clients-cta-box .cta-text-side {
        max-width: 100%;
    }
    .clients-cta-box .cta-btn-side {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .clients-cta-box .cta-btn-side .btn-quote,
    .clients-cta-box .cta-btn-side .btn-slide-outline {
        width: 100%;
        text-align: center;
        justify-content: center;
        box-sizing: border-box;
    }
}

@media (max-width: 768px) {
    .directory-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .clients-filter-bar {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding: 6px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 6px;
    }
    .clients-filter-bar::-webkit-scrollbar {
        display: none;
    }
    .filter-tab-btn {
        flex-shrink: 0;
        white-space: nowrap;
        padding: 7px 13px;
        font-size: 13px;
    }
    .pdf-table-header {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }
    .pdf-search-box {
        width: 100%;
        max-width: 100%;
    }
    .clients-cards-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
    .process-steps-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }
}

@media (max-width: 540px) {
    .clients-hero {
        padding: 42px 0 36px;
    }
    .clients-hero .about-hero-title {
        font-size: 23px;
        margin-bottom: 12px;
    }
    .clients-hero .about-hero-lead {
        font-size: 14px;
        line-height: 1.55;
    }
    .brands-logo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .brand-logo-card {
        padding: 10px 6px;
        min-height: 90px;
    }
    .brand-logo-wrap {
        height: 48px;
    }
    .brand-title-hover {
        font-size: 10.5px;
        margin-top: 4px;
    }
    .client-card {
        padding: 16px 14px;
    }
    .client-card-header {
        align-items: flex-start;
        gap: 10px;
    }
    .client-logo-box {
        width: 72px;
        height: 50px;
        padding: 3px 6px;
    }
    .client-badge-group {
        justify-content: flex-start;
    }
    .client-cat-badge {
        font-size: 10px;
        padding: 2px 6px;
    }
    .client-card-title {
        font-size: 15.5px;
    }
    .sector-block {
        padding: 16px 14px;
    }
    .sector-head h3 {
        font-size: 14px;
    }
    .sector-count {
        font-size: 10px;
        padding: 2px 6px;
    }
    .sector-items-list li {
        font-size: 12.5px;
    }
    .process-step-card {
        padding: 20px 16px;
    }
    .process-step-card .step-number {
        font-size: 26px;
        top: 14px;
        right: 14px;
    }
    .clients-cta-box {
        padding: 24px 16px;
    }
    .clients-cta-box .cta-box-title {
        font-size: 20px;
    }
    .clients-cta-box .cta-box-desc {
        font-size: 13.5px;
    }
}