:root {
    --ink: #172033;
    --muted: #687386;
    --line: #e2e8f0;
    --bg: #f4f7fb;
    --nav: #ffffff;
    --gold: #4f6bed;
    --gold-dark: #3f5bd8;
    --blue: #4f6bed;
    --theme-blue: #4f6bed;
    --theme-blue-dark: #334bbd;
    --theme-cyan: #2ba7d8;
    --theme-green: #21a675;
    --theme-shadow: 0 8px 28px rgba(31, 48, 80, .07);
}

body {
    background: #fff;
    color: var(--ink);
}

.content-wrap {
    max-width: 1640px;
}

/* Header sáng */
.app-header {
    background: rgba(255,255,255,.97);
    border-bottom: 1px solid #dfe6f1;
    box-shadow: 0 4px 18px rgba(31,48,80,.06);
}

.header-brand {
    color: #334155;
}

    .header-brand span {
        color: #64748b;
        border-left-color: #dce3ed;
    }

.horizontal-nav a {
    color: #536176;
    border-left-color: #edf1f6;
}

    .horizontal-nav a i {
        color: #6b7fca;
    }

    .horizontal-nav a:hover {
        color: #334bbd;
        background: #f1f5ff;
    }

    .horizontal-nav a.active {
        color: #334bbd;
        background: linear-gradient(180deg,#f1f4ff,#e9efff);
        box-shadow: inset 0 -3px 0 #4f6bed;
    }

        .horizontal-nav a.active i {
            color: #4f6bed;
        }

.account-button {
    color: #334155;
    border-color: #dbe3ee;
    background: #f8fafc;
}

    .account-button:hover {
        background: #eef3fa;
    }

/* Typography và nút */
.page-heading h1 {
    color: #162033;
    letter-spacing: -.02em;
}

.page-eyebrow, .eyebrow {
    color: #5268cc;
}

.btn-primary, .btn-brand {
    color: #fff;
    background: linear-gradient(135deg,#5b75f0,#4059d5);
    border-color: #4f68e3;
    box-shadow: 0 6px 16px rgba(79,107,237,.2);
}

    .btn-primary:hover, .btn-brand:hover {
        background: linear-gradient(135deg,#4c65dd,#334bbd);
        border-color: #334bbd;
    }

.btn-light {
    color: #344054;
    background: #fff;
    border: 1px solid #e1e7f0;
}

    .btn-light:hover {
        color: #3049ba;
        background: #f2f5ff;
        border-color: #cbd6ff;
    }

.form-control, .form-select {
    color: #263247;
    border-color: #dbe3ee;
    background-color: #fff;
}

    .form-control:focus, .form-select:focus {
        border-color: #7590f5;
        box-shadow: 0 0 0 .2rem rgba(79,107,237,.13);
    }

/* Card */
.filter-card, .panel, .connection-card, .project-card, .project-overview-stats article, .campaign-stats article, .project-period-filter {
    border-color: #e1e7f0;
    box-shadow: var(--theme-shadow);
    background: #fff;
}

    .project-card:hover {
        box-shadow: 0 14px 34px rgba(31,48,80,.11);
    }

.project-avatar {
    background: linear-gradient(145deg,#566cda,#354ab6);
    color: #fff;
}

.project-metrics {
    background: #f8faff;
    border-color: #e5ebf4;
}

    .project-metrics > div {
        border-color: #e5ebf4;
    }

.project-identity > a, .table a {
    color: #4860cb;
}

.status.on {
    color: #17845f;
    background: #e8f8f1;
}

/* Bộ lọc */
.table-filter-bar, .campaign-report-filters, .action-report-filters {
    background: linear-gradient(135deg,#f7f9fd,#f1f5fb);
    border-color: #dfe6f0;
}

.filter-control label, .project-period-filter label {
    color: #64748b;
}

.filter-search i {
    color: #5b6fd1;
}

/* KPI */
.kpi {
    border-color: #e1e7f0;
    box-shadow: var(--theme-shadow);
}

    .kpi strong {
        color: #172033;
    }

    .kpi.accent {
        background: linear-gradient(135deg,#536ee6,#3049b8);
    }

.project-overview-stats article > span {
    background: #edf1ff;
    color: #5269d2;
}

.project-overview-stats .facebook-total > span {
    background: #1877f2;
    color: #fff;
}

.project-overview-stats .google-total > span {
    background: linear-gradient(135deg,#4285f4 0 50%,#34a853 50%);
}

/* Tóm tắt điều hành sáng */
.executive-summary {
    color: #172033 !important;
    background: linear-gradient(135deg,#ffffff,#f4f7ff) !important;
    border: 1px solid #dfe6f2 !important;
    border-left: 5px solid #536ee6 !important;
    border-bottom: 1px solid #dfe6f2 !important;
    box-shadow: var(--theme-shadow) !important;
}

.executive-summary-head > span {
    background: linear-gradient(135deg,#6079eb,#4057c8) !important;
}

.executive-summary-head small {
    color: #5f6fc4 !important;
}

.executive-summary-head h2 {
    color: #182238 !important;
}

.executive-metrics {
    border-color: #dfe6f1 !important;
}

    .executive-metrics > div {
        background: rgba(255,255,255,.72) !important;
        border-color: #e1e7f0 !important;
    }

    .executive-metrics small {
        color: #687386 !important;
    }

    .executive-metrics strong {
        color: #172033 !important;
    }

.data-quality-line {
    color: #667085 !important;
    border-top-color: #dfe6ef !important;
}

/* Bảng sáng, header xanh navy */
table.report-table thead th {
    color: #f8faff !important;
    background: linear-gradient(180deg,#2D3C59,#2D3C59) !important;
    border-bottom-color: #ffffff !important;
}

table.report-table tbody tr:nth-child(even) > td {
    background: #f8fafc !important;
}

table.report-table tbody tr:hover > td {
    background: #eef3ff !important;
}

table.report-table tbody td {
    border-bottom-color: #e5eaf2 !important;
}

.campaign-performance-table tfoot th {
    color: #263a62 !important;
    background: linear-gradient(180deg,#eaf0ff,#dfe8ff) !important;
    border-color: #96aaf0 !important;
}

.campaign-performance-table tfoot small {
    color: #687798;
}

/* DataTables */
div.dt-container .dt-paging .pagination .page-item .page-link {
    color: #4a5ea9 !important;
    border-color: #dce3ef !important;
}

    div.dt-container .dt-paging .pagination .page-item .page-link:hover {
        color: #3048b3 !important;
        background: #edf2ff !important;
        border-color: #aebdf1 !important;
    }

div.dt-container .dt-paging .pagination .page-item.active .page-link {
    color: #fff !important;
    background: linear-gradient(135deg,#6079ed,#4057c8) !important;
    border-color: #4057c8 !important;
    box-shadow: 0 3px 10px rgba(64,87,200,.22) !important;
}

/* Kết nối */
.connection-logo.fb {
    color: #1877f2;
    background: #edf4ff;
}

.connection-card {
    transition: transform .18s,box-shadow .18s;
}

    .connection-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 13px 32px rgba(31,48,80,.1);
    }

.sync-badge {
    color: #18795a;
    background: #e9f8f2;
}

/* Báo cáo Google vẫn giữ nhận diện nhưng sáng hơn */
.google-project-report {
    border: 1px solid #dfe6f2 !important;
    border-top: 4px solid #4285f4 !important;
}

    .google-project-report table.report-table thead th, .google-detail-table thead th {
        background: linear-gradient( 179deg, #356fc8, #4f86e8) !important;
        border-bottom-color: #fbbc05 !important;
    }

/* Đăng nhập đồng bộ theme mới */
.login-brand-panel {
    background: linear-gradient(145deg,#273968,#435fb0);
}

    .login-brand-panel h1 {
        color: #fff;
    }

    .login-brand-panel p {
        color: #dbe4ff;
    }

.login-form-panel {
    background: radial-gradient(circle at 90% 5%,#edf2ff,transparent 40%),#fff;
}

@media(max-width:991px) {
    .horizontal-nav {
        background: #fff;
        border-top: 1px solid #e4e9f1
    }

        .horizontal-nav a {
            color: #475569
        }

    .mobile-menu-button {
        color: #4057c8
    }
}

/* Header gradient tối làm nổi bật logo */
.app-header {
    background: linear-gradient(115deg, #001510,#00bf8f);
    border-bottom: none;
    box-shadow: 0 8px 24px rgba(15,23,42,.24);
}

.header-brand {
    color: #fff;
}

    .header-brand img {
        filter: drop-shadow(0 2px 5px rgba(0,0,0,.22));
    }

    .header-brand span {
        color: #d7dfef;
        border-left-color: rgba(255,255,255,.2);
    }

.horizontal-nav a {
    color: #ffffff;
    border-left-color: rgba(255,255,255,.07);
}

    .horizontal-nav a i {
        color: #ffffff;
    }

    .horizontal-nav a:hover {
        color: #fff;
        background: linear-gradient(180deg,rgba(196,147,81,.30),rgba(151,104,48,.16));
    }

    .horizontal-nav a.active {
        color: #fff8ea;
        background: linear-gradient(180deg,rgba(196,147,81,.30),rgba(151,104,48,.16));
        box-shadow: inset 0 -3px 0 #e0b36f, inset 1px 0 0 rgba(224, 185, 126, .14), inset -1px 0 0 rgba(224, 185, 126, .14);
    }

        .horizontal-nav a.active i {
            color: #e2b876;
            filter: drop-shadow(0 2px 5px rgba(217,169,100,.24));
        }

.account-button {
    color: #f8fafc;
    border-color: rgba(255,255,255,.22);
    background: rgba(255,255,255,.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

    .account-button:hover {
        color: #fff;
        background: rgba(255,255,255,.14);
        border-color: rgba(255,255,255,.32);
    }

/* Vi tương tác cho nút */
.btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform .18s ease,box-shadow .18s ease,border-color .18s ease,background-color .18s ease,color .18s ease;
}

    .btn::after {
        content: "";
        position: absolute;
        z-index: -1;
        top: -70%;
        left: -45%;
        width: 30%;
        height: 240%;
        opacity: 0;
        transform: rotate(22deg);
        background: linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
        transition: left .45s ease,opacity .2s ease;
    }

    .btn:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 8px 18px rgba(31,48,80,.16);
    }

        .btn:hover:not(:disabled)::after {
            left: 115%;
            opacity: 1;
        }

    .btn:active:not(:disabled) {
        transform: translateY(0) scale(.985);
        box-shadow: 0 3px 8px rgba(31,48,80,.13);
        transition-duration: .06s;
    }

    .btn:focus-visible {
        outline: 0;
        box-shadow: 0 0 0 4px rgba(79,107,237,.2),0 7px 16px rgba(31,48,80,.13);
    }

    .btn:disabled {
        cursor: not-allowed;
        filter: saturate(.65);
    }

.btn-primary, .btn-google, .btn-brand {
    box-shadow: 0 6px 16px rgba(64,87,200,.22);
}

.btn-outline-primary, .btn-google-outline {
    background: #fff;
}

    .btn-outline-primary:hover:not(:disabled), .btn-google-outline:hover:not(:disabled) {
        box-shadow: 0 8px 18px rgba(66,133,244,.18);
    }

@media(max-width:991px) {
    .horizontal-nav {
        background: linear-gradient(180deg,#17243a,#101827);
        border-top: 1px solid rgba(255,255,255,.1)
    }

        .horizontal-nav a {
            color: #d3dbea
        }

    .mobile-menu-button {
        color: #fff
    }
}

@media(prefers-reduced-motion:reduce) {
    .btn, .btn::after {
        transition: none
    }

        .btn:hover:not(:disabled) {
            transform: none
        }
}