/* thaivk - START: Brand Color Override */
/*
 * File này override TẤT CẢ hardcoded brand colors trong style.css
 * bằng CSS Variables, cho phép thay đổi màu brand từ admin dashboard.
 *
 * Bảng màu gốc (hardcoded trong style.css):
 *   #005ba5 → var(--brand-primary)        ~ màu chính (bg, btn, border)
 *   #0066b3 → var(--brand-primary-text)   ~ màu chữ/link
 *   #02437b → var(--brand-primary-dark)   ~ màu hover/footer
 *   #1a64ee → var(--brand-primary-hover)  ~ hover text alt
 */

/* ===== 1. GLOBAL TEXT / LINK ===== */

/* L437: a { color: #0066b3 } */
a {
    color: var(--brand-primary-text);
}

a:hover,
a:focus {
    color: var(--brand-primary-dark);
}

/* ===== 2. BACKGROUNDS ===== */

/* L465: .bg-primary */
.bg-primary {
    background-color: var(--brand-primary) !important;
}

/* L468-476: .bg-soft-primary */
.bg-soft-primary {
    color: var(--brand-primary-text) !important;
}

.bg-soft-primary .border {
    border-color: var(--brand-primary) !important;
}

/* L478-485: .text-primary */
.text-primary {
    color: var(--brand-primary-text) !important;
}

a.text-primary:hover,
a.text-primary:focus {
    color: var(--brand-primary-hover, var(--brand-primary)) !important;
}

/* L672-696: .bg-blue, .bg-soft-blue, .text-blue, .bg-footer */
.bg-blue {
    background-color: var(--brand-primary) !important;
}

.bg-soft-blue {
    color: var(--brand-primary-text) !important;
}

.bg-soft-blue .border {
    border-color: var(--brand-primary) !important;
}

.text-blue {
    color: var(--brand-primary-text) !important;
}

a.text-blue:hover,
a.text-blue:focus {
    color: var(--brand-primary-hover, var(--brand-primary)) !important;
}

.bg-footer {
    background-color: var(--brand-primary-dark) !important;
}

/* ===== 3. BUTTONS - PRIMARY ===== */

/* L898-945: .btn-primary, .btn-soft-primary, .btn-outline-primary */
.btn-primary {
    background-color: var(--brand-primary) !important;
    border: 1px solid var(--brand-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.focus {
    background-color: var(--brand-primary-dark) !important;
    border-color: var(--brand-primary-dark) !important;
}

.btn-soft-primary {
    color: var(--brand-primary-text) !important;
}

.btn-soft-primary:hover,
.btn-soft-primary:focus,
.btn-soft-primary:active,
.btn-soft-primary.active,
.btn-soft-primary.focus {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

.btn-outline-primary {
    border: 1px solid var(--brand-primary);
    color: var(--brand-primary-text);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.focus,
.btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

/* ===== 4. BUTTONS - BLUE ===== */

/* L1366-1415: .btn-blue, .btn-soft-blue, .btn-outline-blue */
.btn-blue {
    background-color: var(--brand-primary) !important;
    border: 1px solid var(--brand-primary) !important;
}

.btn-blue:hover,
.btn-blue:focus,
.btn-blue:active,
.btn-blue.active,
.btn-blue.focus {
    background-color: var(--brand-primary-dark) !important;
    border-color: var(--brand-primary-dark) !important;
}

.btn-soft-blue {
    color: var(--brand-primary-text) !important;
}

.btn-soft-blue:hover,
.btn-soft-blue:focus,
.btn-soft-blue:active,
.btn-soft-blue.active,
.btn-soft-blue.focus {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

.btn-outline-blue {
    border: 1px solid var(--brand-primary);
    color: var(--brand-primary-text);
}

.btn-outline-blue:hover,
.btn-outline-blue:focus,
.btn-outline-blue:active,
.btn-outline-blue.active,
.btn-outline-blue.focus,
.btn-outline-blue:not(:disabled):not(.disabled):active {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

/* ===== 5. ALERTS ===== */

/* L1626: .alert-primary color */
.alert-primary {
    color: var(--brand-primary-text) !important;
}

/* L1757-1768: .alert-outline-primary */
.alert-outline-primary {
    color: var(--brand-primary-text);
    border-color: var(--brand-primary);
}

/* ===== 6. BORDERS ===== */

/* L1901-1911: border-primary variants */
.border-primary {
    border-color: var(--brand-primary) !important;
}

/* ===== 7. BREADCRUMB ===== */

/* L1996-2000 */
.breadcrumb .breadcrumb-item a:hover {
    color: var(--brand-primary-text);
}

.breadcrumb .breadcrumb-item.active {
    color: var(--brand-primary-text);
}

/* ===== 8. PAGINATION ===== */

/* L2037 */
.pagination .page-item .page-link.active,
.pagination .page-item .page-link:hover {
    background: var(--brand-primary);
}

/* ===== 9. KEY FEATURES / ICONS ===== */

/* L2096, L2121 */
.key-feature .icon {
    color: var(--brand-primary-text);
}

.key-feature:hover .icon {
    color: var(--brand-primary-text);
}

/* L2149 */
.key-feature .content .title:hover {
    color: var(--brand-primary-text);
}

/* ===== 10. FORM CONTROLS ===== */

/* L2202, L2214-2222 */
.form-control:focus {
    border-color: var(--brand-primary) !important;
}

.form-check-input:focus {
    border-color: var(--brand-primary);
}

.form-check-input.form-check-input:checked {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

/* ===== 11. PRELOADER ===== */

/* L2311 */
#preloader #status .spinner .double-bounce1,
#preloader #status .spinner .double-bounce2 {
    background-color: var(--brand-primary);
}

/* ===== 12. SOCIAL ICONS ===== */

/* L2354-2360 */
.social-icon li a:hover {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary) !important;
}

.social-icon li a:hover .fea-social {
    fill: var(--brand-primary);
}

/* ===== 13. BACK TO TOP ===== */

/* L2390: .back-to-top bg only (keep icon white) */
.back-to-top {
    background-color: var(--brand-primary) !important;
}

/* L2415, L2428 */
.back-to-top:hover {
    background-color: var(--brand-primary-dark) !important;
}

/* ===== 14. GRADIENTS ===== */

/* L2559 */
.bg-gradient-primary {
    background: linear-gradient(to left, var(--brand-primary-dark) 0%, #614092 100%) !important;
}

/* ===== 15. RIBBONS ===== */

/* L2800-2810: .ribbon-primary */
.ribbon.ribbon-primary span {
    background-color: var(--brand-primary) !important;
}

.ribbon.ribbon-primary span:before {
    border-left-color: var(--brand-primary-dark);
    border-top-color: var(--brand-primary-dark);
}

.ribbon.ribbon-primary span:after {
    border-right-color: var(--brand-primary-dark);
    border-top-color: var(--brand-primary-dark);
}

/* L2926-2936: .ribbon-blue */
.ribbon.ribbon-blue span {
    background-color: var(--brand-primary) !important;
}

.ribbon.ribbon-blue span:before {
    border-left-color: var(--brand-primary-dark);
    border-top-color: var(--brand-primary-dark);
}

.ribbon.ribbon-blue span:after {
    border-right-color: var(--brand-primary-dark);
    border-top-color: var(--brand-primary-dark);
}

/* ===== 16. NAVIGATION MENU (#topnav) ===== */

/* L3129 */
#topnav .has-submenu .submenu .has-submenu:hover .submenu-arrow {
    border-color: var(--brand-primary);
}

/* L3137 */
#topnav .has-submenu.active .submenu li.active>a {
    color: var(--brand-primary-text) !important;
}

/* L3141 */
#topnav .has-submenu.active.active .menu-arrow {
    border-color: var(--brand-primary);
}

/* L3217 */
#topnav .navbar-toggle.open span:hover {
    background-color: var(--brand-primary);
}

/* L3242: nav menu active/hover */
#topnav .navigation-menu>li:hover>a,
#topnav .navigation-menu>li.active>a {
    color: var(--brand-primary-text) !important;
}

/* L3261 */
#topnav .navigation-menu>li>a:hover,
#topnav .navigation-menu>li>a:active {
    color: var(--brand-primary-text);
}

/* L3319 */
#topnav.scroll .navigation-menu>li:hover>a,
#topnav.scroll .navigation-menu>li.active>a {
    color: var(--brand-primary-text);
}

/* L3324 */
#topnav.scroll .navigation-menu>li:hover>.menu-arrow,
#topnav.scroll .navigation-menu>li.active>.menu-arrow {
    border-color: var(--brand-primary);
}

/* L3350 */
#topnav.nav-sticky .navigation-menu.nav-light>li.active>a {
    color: var(--brand-primary-text) !important;
}

/* L3355 */
#topnav.nav-sticky .navigation-menu.nav-light>li:hover>.menu-arrow,
#topnav.nav-sticky .navigation-menu.nav-light>li.active>.menu-arrow {
    border-color: var(--brand-primary) !important;
}

/* L3360 */
#topnav.nav-sticky .navigation-menu.nav-light>li:hover>a,
#topnav.nav-sticky .navigation-menu.nav-light>li.active>a {
    color: var(--brand-primary-text) !important;
}

/* L3466 (min-width:992px) submenu li a:hover */
@media (min-width: 992px) {
    #topnav .navigation-menu>li .submenu li a:hover {
        color: var(--brand-primary-text) !important;
    }

    #topnav .navigation-menu>li:hover>.menu-arrow {
        border-color: var(--brand-primary);
    }

    #topnav .navigation-menu>li:hover>a,
    #topnav .navigation-menu>li.active>a {
        color: var(--brand-primary-text) !important;
    }
}

/* ===== 17. MOBILE NAV ===== */

/* L3711, L3738 (max-width:991px) */
@media (max-width: 991px) {
    #topnav .navigation-menu>li>a:hover,
    #topnav .navigation-menu>li.active>a,
    #topnav .navigation-menu>li .submenu li a:hover,
    #topnav .navigation-menu>li .submenu.megamenu>li>ul>li>a:hover {
        color: var(--brand-primary-text) !important;
    }
}

/* ===== 18. CAROUSEL / SLIDER ===== */

/* L4016, L4043 */
.home-slider .carousel-indicators .active {
    background: var(--brand-primary);
}

.bg-animation-left.crypto-home:after {
    background: var(--brand-primary);
}

/* L4063 */
.seo-home {
    background: radial-gradient(circle at 50% -50%,
            rgba(107, 107, 107, 0.08) 0,
            rgba(107, 107, 107, 0.08) 33.333%,
            rgba(72, 72, 72, 0.08) 33.333%,
            rgba(72, 72, 72, 0.08) 66.666%,
            rgba(36, 36, 36, 0.08) 66.666%,
            rgba(36, 36, 36, 0.08) 99.999%),
        radial-gradient(circle at 0% 0%,
            rgba(184, 184, 184, 0.08) 0,
            rgba(184, 184, 184, 0.08) 33.333%,
            rgba(96, 96, 96, 0.08) 33.333%,
            rgba(96, 96, 96, 0.08) 66.666%,
            rgba(7, 7, 7, 0.08) 66.666%,
            rgba(7, 7, 7, 0.08) 99.999%),
        linear-gradient(45deg, #f1af2d, var(--brand-primary));
}

/* L4103-4104: swiper button hover */
.swiper-slider-hero .swiper-container .swiper-button-prev:hover,
.swiper-slider-hero .swiper-container .swiper-button-next:hover {
    background: var(--brand-primary);
    border-color: var(--brand-primary) !important;
}

/* L4150 */
.progress-bar-striped {
    background: linear-gradient(to right, var(--brand-primary) 0%, #e84142 100%);
}

/* ===== 19. FEATURES (min-width:992px block) ===== */

/* L4203-4228: features icon */
.features.fea-primary .icon2 i,
.features.fea-primary .icon2 svg {
    color: var(--brand-primary-text) !important;
}

.features.fea-primary:hover .icon2 {
    background-color: var(--brand-primary);
}

.features.fea-primary .icon2 {
    color: var(--brand-primary-text);
}

.features .icon2 i,
.features .icon2 svg {
    color: var(--brand-primary-text) !important;
}

.features:hover .icon2 {
    background-color: var(--brand-primary) !important;
}

.features .content .title:hover {
    color: var(--brand-primary-text) !important;
}

/* L4464-4489: duplicate features (responsive) */
.features.fea-primary .icon i,
.features.fea-primary .icon svg {
    color: var(--brand-primary-text) !important;
}

.features.fea-primary:hover .icon {
    background-color: var(--brand-primary);
}

.features.fea-primary .icon {
    color: var(--brand-primary-text);
}

.features .icon i,
.features .icon svg {
    color: var(--brand-primary-text) !important;
}

.features:hover .icon {
    background-color: var(--brand-primary) !important;
}

/* ===== 20. TEXT STROKE (display font) ===== */

/* L4660-4670 */
.display-1.fw-bold {
    -webkit-text-stroke: 2px var(--brand-primary);
}

.display-2.fw-bold {
    -webkit-text-stroke: 2px var(--brand-primary);
    -webkit-text-fill-color: var(--brand-primary);
}

/* ===== 21. TEAM ===== */

/* L4683 - must match .team.team-primary for specificity */
.team.team-primary .name:hover {
    color: var(--brand-primary-text) !important;
}

.team.team-primary .designation {
    color: var(--brand-primary-text) !important;
}

/* L4691-4696 */
.team-primary:hover .icon {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary) !important;
}

.team-primary:hover .icon .fea-social {
    fill: var(--brand-primary);
}

/* ===== 22. PORTFOLIO ===== */

/* L4836-4849 */
.portfolio.portfolio-primary .content .title:hover {
    color: var(--brand-primary-text) !important;
}

.portfolio.portfolio-primary .btn-icon {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

.portfolio.portfolio-primary .btn-icon .fea-social {
    fill: var(--brand-primary);
}

/* L4933-4975: portfolio filter, portfolio classic */
.portfolio-filter li.active,
.portfolio-filter li:hover {
    background: var(--brand-primary) !important;
    border-color: var(--brand-primary);
}

.portfolio-classic .content .title:hover {
    color: var(--brand-primary-text) !important;
}

.portfolio-classic .pop-icon .btn-icon {
    background: var(--brand-primary);
}

.portfolio-classic .overlay-work {
    background-color: var(--brand-primary) !important;
}

/* ===== 23. BLOG ===== */

/* L5052-5056 */
.blog .content .title:hover {
    color: var(--brand-primary-text) !important;
}

.blog .content .post-meta .readmore:hover {
    color: var(--brand-primary-text) !important;
}

.blog:hover .content .title {
    color: var(--brand-primary-text) !important;
}

/* ===== 24. SIDEBAR ===== */

/* L5308, L5332, L5377, L5436 */
.sidebar .widget .blog-categories li a:hover,
.sidebar .widget .blog-categories li.active a {
    color: var(--brand-primary-text) !important;
}

.sidebar .widget .post-recent .post-recent-content a:hover {
    color: var(--brand-primary-text) !important;
}

.sidebar .tagcloud a:hover {
    color: var(--brand-primary-text) !important;
}

/* ===== 25. COUNTDOWN / CTA ===== */

/* L5492 */
.countdown-timer .timer-value {
    background: var(--brand-primary);
}

/* ===== 26. PRICE CARD ===== */

/* L5719 */
.pricing .price-tag .tag {
    background: var(--brand-primary);
}

/* ===== 27. FOOTER (compiled from _footer.scss) ===== */

/* L5818-5826 */
.footer .footer-border,
.footer .footer-bar {
    border-top: 1px solid var(--brand-primary) !important;
}

.footer .footer-border-bottom {
    border-bottom: 1px solid var(--brand-primary) !important;
}

.footer .border {
    border-color: var(--brand-primary) !important;
}

/* ===== 28. NAV PILLS / TABS ===== */

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--brand-primary) !important;
}

/* ===== 29. BADGES ===== */

.badge-primary,
.badge.bg-primary {
    background-color: var(--brand-primary) !important;
}

/* ===== 30. DOWN ARROW (style-homepage.css) ===== */

.down-arrow a:hover {
    border: 1px solid var(--brand-primary-dark) !important;
    background: var(--brand-primary-dark) !important;
}

/* ===== 31. ACCORDION (bootstrap #0c63e4) ===== */

/* Text color when expanded */
.accordion-button:not(.collapsed) {
    color: var(--brand-primary-text);
    background-color: var(--brand-primary-light, #f0f4f8);
}

/* Chevron arrow: use mask so background-color controls color */
.accordion-button:not(.collapsed)::after {
    background-image: none !important;
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 1.25rem;
    mask-size: 1.25rem;
    background-color: var(--brand-primary) !important;
}

/* Focus ring */
.accordion-button:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.25rem rgba(0, 91, 165, 0.15);
}

/* thaivk - END: Brand Color Override */