/*
============================================
VTA OFFICE SOLUTIONS - REDESIGN CSS 2024
Brand Colors: Navy (#2B5797) & Orange (#E8732A)
============================================
*/

:root {
       --vta-navy: #2B5797;
       --vta-orange: #E8732A;
       --vta-light: #f4f7f6;
       --vta-white: #ffffff;
       --vta-text: #333333;
}

/* --- HEADER & NAVIGATION --- */
.header {
       background: var(--vta-white) !important;
       box-shadow: 0 2px 10px rgba(0,0,0,0.1);
       position: sticky !important;
       top: 0;
       z-index: 1000;
}

.menu-header ul li a {
       color: var(--vta-navy) !important;
       font-weight: 600 !important;
       text-transform: uppercase;
       font-size: 14px;
       padding: 10px 15px !important;
       transition: all 0.3s ease;
}

.menu-header ul li a:hover, 
.menu-header ul li.active a {
       color: var(--vta-orange) !important;
}

/* --- SEARCH BAR --- */
.search {
       border: 2px solid var(--vta-navy) !important;
       border-radius: 25px !important;
       overflow: hidden !important;
}

.search input {
       border: none !important;
       padding: 8px 20px !important;
       width: calc(100% - 100px) !important;
}

.search p {
       background: var(--vta-navy) !important;
       color: #fff !important;
       margin: 0 !important;
       padding: 8px 20px !important;
       cursor: pointer;
       font-weight: bold;
}

/* --- FULL-WIDTH LAYOUT FIX --- */
body:not([class*="danhmuc"]):not([class*="category"]) .wrap-main.w-clear {
       max-width: 1200px !important;
       width: 95% !important;
       margin: 0 auto !important;
       display: block !important;
}

body:not([class*="danhmuc"]):not([class*="category"]) .col-lg-3:has(.ul-menu) {
       display: none !important;
}

body:not([class*="danhmuc"]):not([class*="category"]) .col-lg-9 {
       flex: 0 0 100% !important;
       max-width: 100% !important;
       width: 100% !important;
}

/* --- CTA BANNER ENHANCEMENT --- */
.vta-cta-banner {
       background: linear-gradient(135deg, var(--vta-navy) 0%, #1a3a63 100%) !important;
       border-top: 3px solid var(--vta-orange) !important;
       color: #fff;
       padding: 15px;
       position: fixed;
       bottom: 0;
       left: 0;
       width: 100%;
       z-index: 9999;
       display: flex;
       justify-content: center;
       align-items: center;
       transition: transform 0.5s ease;
}

.vta-cta-btn {
       background: var(--vta-orange) !important;
       color: #fff !important;
       padding: 8px 20px;
       border-radius: 5px !important;
       font-weight: bold !important;
       margin-left: 20px;
       text-decoration: none;
}

.vta-cta-close {
       position: absolute;
       right: 15px;
       top: 50%;
       transform: translateY(-50%);
       background: none;
       border: none;
       color: #fff;
       font-size: 20px;
       cursor: pointer;
}