:root{
    --vt-primary:#0548B5;
    --vt-accent:#F5842A;
    --vt-cyan:#24B4F9;

    --vt-ink:#0b1220;
    --vt-text:#334155;
    --vt-muted:#64748b;

    --vt-border:rgba(15,23,42,.10);
    --vt-radius:18px;
    --vt-shadow:0 18px 48px rgba(2,12,27,.12);
    --vt-shadow2:0 10px 26px rgba(2,12,27,.08);

    --vt-bg:#f6f9ff;
    --vt-s1:#fff;
    --vt-s2:#f3f7ff;
    --vt-s3:#0b1220;
    --vt-s4:#fff;
    --vt-s5:#f7fbff;
    --vt-header-h: 0px;
}

html,body{height:100%}
body{
    font-family:"Be Vietnam Pro",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    color:var(--vt-text);
    background:var(--vt-bg);
    overflow-x:hidden;
    letter-spacing:-.01em;
}

/* ===== Typography ===== */
.vt-title{color:var(--vt-ink);letter-spacing:-.03em}
.vt-lead{color:var(--vt-muted)}

/* ===== Card ===== */
.vt-card{
    background:#fff;
    border:1px solid var(--vt-border);
    border-radius:var(--vt-radius);
    box-shadow:var(--vt-shadow2);
}

/* ===== Buttons (VTrends) - FIX HOVER/ACTIVE ===== */
.btn{ text-decoration:none !important; }

/* PRIMARY */
.btn-vt-primary{
    --bs-btn-color:#fff;
    --bs-btn-bg:var(--vt-primary);
    --bs-btn-border-color:var(--vt-primary);

    --bs-btn-hover-color:#fff;
    --bs-btn-hover-bg:#043b95;
    --bs-btn-hover-border-color:#043b95;

    --bs-btn-focus-shadow-rgb:5,72,181;

    --bs-btn-active-color:#fff;
    --bs-btn-active-bg:#03347f;
    --bs-btn-active-border-color:#03347f;

    --bs-btn-disabled-color:rgba(255,255,255,.88);
    --bs-btn-disabled-bg:rgba(5,72,181,.55);
    --bs-btn-disabled-border-color:rgba(5,72,181,.40);

    --bs-btn-padding-y:.75rem;
    --bs-btn-padding-x:1rem;
    --bs-btn-border-radius:14px;

    box-shadow:0 14px 30px rgba(5,72,181,.22);
    font-weight:600; /* bỏ 700 cho “đỡ nặng” */
}

/* OUTLINE */
.btn-vt-outline{
    --bs-btn-color:var(--vt-primary);
    --bs-btn-bg:transparent;
    --bs-btn-border-color:rgba(5,72,181,.35);

    --bs-btn-hover-color:var(--vt-primary);   /* CHỮ KHÔNG ĐƯỢC TRẮNG vì nền hover nhạt */
    --bs-btn-hover-bg:rgba(5,72,181,.08);
    --bs-btn-hover-border-color:rgba(5,72,181,.50);

    --bs-btn-focus-shadow-rgb:5,72,181;

    --bs-btn-active-color:#fff;               /* active có thể đậm */
    --bs-btn-active-bg:var(--vt-primary);
    --bs-btn-active-border-color:var(--vt-primary);

    --bs-btn-padding-y:.75rem;
    --bs-btn-padding-x:1rem;
    --bs-btn-border-radius:14px;

    font-weight:600;
}

/* ACCENT */
.btn-vt-accent{
    --bs-btn-color:#111827;
    --bs-btn-bg:var(--vt-accent);
    --bs-btn-border-color:var(--vt-accent);

    --bs-btn-hover-color:#111827;
    --bs-btn-hover-bg:#e46f12;
    --bs-btn-hover-border-color:#e46f12;

    --bs-btn-focus-shadow-rgb:245,132,42;

    --bs-btn-active-color:#111827;
    --bs-btn-active-bg:#d9630e;
    --bs-btn-active-border-color:#d9630e;

    --bs-btn-padding-y:.75rem;
    --bs-btn-padding-x:1rem;
    --bs-btn-border-radius:14px;

    box-shadow:0 14px 30px rgba(245,132,42,.22);
    font-weight:600;
}

/* Icon luôn cùng màu chữ */
.btn-vt-primary i,
.btn-vt-outline i,
.btn-vt-accent i{ color:currentColor !important; }

/* Fix riêng cho <a class="btn ..."> để không bị “link hover” override */
a.btn-vt-primary:hover,
a.btn-vt-outline:hover,
a.btn-vt-accent:hover{
    color:var(--bs-btn-hover-color) !important;
}

/* ===== Pills / Badges ===== */
.vt-pill{
    display:inline-flex;align-items:center;gap:.5rem;
    padding:.48rem .78rem;
    border-radius:999px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.20);
    color:rgba(255,255,255,.92);
    backdrop-filter:blur(10px);
    font-size:.9rem;
    font-weight:600;
}
.vt-pill i{color:rgba(255,255,255,.92)}
.vt-badge-soft{
    display:inline-flex;align-items:center;gap:.5rem;
    padding:.38rem .66rem;
    border-radius:999px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.18);
    color:rgba(255,255,255,.92);
    white-space:nowrap;
    font-size:.86rem;
    font-weight:600;
}

/* ===== Navbar ===== */
.navbar{
    background:rgba(246,249,255,.84);
    backdrop-filter:blur(12px);
    /*border-bottom:1px solid rgba(15,23,42,.06);*/
}
.navbar .nav-link{color:rgba(11,18,32,.74);font-weight:600}
.navbar .nav-link:hover, .navbar .nav-link.active{color:var(--vt-primary)}
.brand-lockup{display:flex;align-items:center;gap:.75rem}
.brand-logo{width:150px;height:auto;display:block}
.brand-sub{font-size:.8rem;color:var(--vt-muted);font-weight:600;line-height:1.1}

/* ===== Sections ===== */
section{padding:72px 0}
.sec-1{background:var(--vt-s1)}
.sec-2{background:var(--vt-s2)}
.sec-3{
    background:
            radial-gradient(900px 520px at 18% 30%, rgba(36,180,249,.18), transparent 60%),
            radial-gradient(900px 520px at 74% 40%, rgba(245,132,42,.14), transparent 60%),
            linear-gradient(180deg,#0b1220,#0a1020);
    color:rgba(255,255,255,.86);
}
.sec-4{background:var(--vt-s4)}
.sec-5{
    background:
            linear-gradient(135deg, rgba(5,72,181,.06), rgba(36,180,249,.06)),
            var(--vt-s5);
}
.sec-3 .vt-title{color:#fff}
.sec-3 .vt-lead{color:rgba(255,255,255,.74)}

.section-head{margin-bottom:22px}
.section-head .kicker{
    display:inline-flex;align-items:center;gap:.5rem;
    color:var(--vt-primary);
    background:rgba(5,72,181,.08);
    border:1px solid rgba(5,72,181,.16);
    padding:.42rem .72rem;
    border-radius:999px;
    font-size:.88rem;
    font-weight:600;
}
.sec-3 .kicker{
    color:#cfe7ff;
    background:rgba(36,180,249,.10);
    border-color:rgba(36,180,249,.20);
}
.section-head h2{
    margin-top:12px;
    font-size:clamp(22px,2.6vw,34px);
    font-weight:700;
}

/* ====================
  HERO (full width image, content in .container)
  ==================== */
header.hero{padding-top:0}
.heroCarousel .item{
    position:relative;
    width:100%;
    min-height:540px;
    height:clamp(520px,62vh,680px);
    overflow:hidden;
    display:flex;
    align-items:center;
}
.hero-bg{
    position:absolute;inset:0;
    background-size:cover;
    background-position:center;
    transform:scale(1.02);
    filter:saturate(1.05) contrast(1.05);
}

/* (đã gộp: chỉ giữ phiên bản "tối hơn" cuối cùng) */
.hero-overlay{
    position:absolute;inset:0;
    background:
            radial-gradient(1100px 600px at 16% 26%, rgba(36,180,249,.18), transparent 60%),
            radial-gradient(900px 520px at 62% 28%, rgba(245,132,42,.14), transparent 60%),
            linear-gradient(90deg,
            rgba(7,10,18,.92) 0%,
            rgba(7,10,18,.72) 44%,
            rgba(7,10,18,.42) 74%,
            rgba(7,10,18,.22) 100%);
}

.hero-content{position:relative;z-index:2;padding:0px 0}
.hero h1{
    color:#fff;
    font-size:clamp(28px,3.4vw,48px);
    line-height:1.08;
    margin-bottom:12px;
    font-weight:800;
    text-shadow:0 8px 24px rgba(0,0,0,.35);
}
.hero p{
    color:rgba(255,255,255,.94);
    font-size:1.05rem;
    line-height:1.7;
    margin-bottom:16px;
    font-weight:500;
    max-width:680px;
    text-shadow:0 6px 18px rgba(0,0,0,.28);
}
.hero h1 span{ text-shadow:0 8px 24px rgba(0,0,0,.25) }
.hero h1 span[style*="--vt-cyan"]{color:#36c6ff!important}
.hero h1 span[style*="--vt-accent"]{color:#ff9a45!important}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:10px}

/* Carousel nav arrows (hero + others) */
.owl-nav{
    position:absolute;
    top:50%;
    width:100%;
    transform:translateY(-50%);
    margin:0!important;
    pointer-events:none;
}
.owl-nav button{
    pointer-events:auto;
    width:46px;height:46px;
    border-radius:16px!important;
    border:1px solid rgba(255,255,255,.20)!important;
    background:rgba(7,10,18,.45)!important;
    color:#fff!important;
    box-shadow:0 14px 30px rgba(0,0,0,.22);
    transition:transform .15s ease, background .15s ease;
}
.owl-nav button:hover{transform:translateY(-2px);background:rgba(7,10,18,.62)!important}
.owl-nav .owl-prev{position:absolute;left:16px}
.owl-nav .owl-next{position:absolute;right:16px}

.hero .owl-theme .owl-dots{
    position:absolute;left:0;right:0;bottom:14px;margin:0;
}
.hero .owl-theme .owl-dots .owl-dot span{background:rgba(255,255,255,.30)!important}
.hero .owl-theme .owl-dots .owl-dot.active span{background:#36c6ff!important}

.hero .mt-3{
    color:rgba(255,255,255,.82)!important;
    text-shadow:0 6px 18px rgba(0,0,0,.28);
}

/* Hero: kicker trên trang policy / legal */
.hero .kicker{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    color:rgba(255,255,255,.92);
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.2);
    padding:.4rem .75rem;
    border-radius:999px;
    font-size:.88rem;
    font-weight:600;
    margin-bottom:14px;
    text-shadow:0 2px 8px rgba(0,0,0,.2);
}

/* Trang policy: 1 slide → ẩn nav & dots */
.hero-policy .owl-nav,
.hero-policy .owl-dots{
    display:none!important;
}
.hero-policy .heroCarousel .item{
    min-height:380px;
    height:clamp(360px,45vh,480px);
}

/* Proof strip under hero */
.proof-strip{
    margin-top:18px;
    background:#fff;
    border:1px solid rgba(15,23,42,.08);
    border-radius:22px;
    box-shadow:var(--vt-shadow2);
    padding:16px 18px;
}
.proof-item{display:flex;align-items:center;gap:.75rem;padding:10px 12px;border-radius:18px}
.proof-item i{font-size:1.2rem;color:var(--vt-primary)}
.proof-item .t{color:var(--vt-ink);font-weight:600;line-height:1.1}
.proof-item .s{color:var(--vt-muted);font-size:.9rem;font-weight:500}

/* Pricing strip */
.pricing-strip{
    background:#fff;
    border:1px solid rgba(15,23,42,.08);
    border-radius:22px;
    box-shadow:var(--vt-shadow2);
    padding:18px;
}

/* ===== SOLUTIONS ===== */
.solution-card{
    height:100%;
    overflow:hidden;
    border-radius:var(--vt-radius);
    border:1px solid var(--vt-border);
    background:#fff;
    box-shadow:var(--vt-shadow2);
    transition:transform .2s ease, box-shadow .2s ease;
}
.solution-card:hover{transform:translateY(-3px);box-shadow:var(--vt-shadow)}
.solution-thumb{
    height:148px;
    background-size:cover;
    background-position:center;
    position:relative;
}
.solution-thumb::after{
    content:"";
    position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.22));
}
.solution-body{padding:16px 18px 18px}
.solution-head{display:flex;align-items:center;gap:.6rem;margin-top:-12px}
.solution-icon{
    width:40px;height:40px;
    border-radius:14px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(36,180,249,.12);
    border:1px solid rgba(36,180,249,.24);
    color:#0b4a6f;
    font-size:1.05rem;
    flex:0 0 auto;
}
.solution-title{
    font-size:1.02rem;
    margin:0;
    color:var(--vt-ink);
    font-weight:700;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.solution-desc{color:var(--vt-muted);margin:10px 0;font-weight:500}
.solution-list{margin:0;padding-left:1.1rem;color:var(--vt-muted);font-weight:500}
.solution-list li{margin:.22rem 0}

/* Feature rows */
.feature-row{display:flex;gap:.85rem}
.feature-ic{
    width:44px;height:44px;
    border-radius:16px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(5,72,181,.10);
    border:1px solid rgba(5,72,181,.18);
    color:var(--vt-primary);
    flex:0 0 auto;
    font-size:1.1rem;
}
.feature-row .t{color:var(--vt-ink);font-weight:600}
.feature-row .s{color:var(--vt-muted);font-weight:500}

/* Case/Testimonial/News */
.case-card,.t-card,.news-card{padding:18px;height:100%}
.case-card{overflow:hidden}
.case-card-thumb{
    height:160px;
    margin:-18px -18px 14px -18px;
    border-radius:var(--vt-radius) var(--vt-radius) 0 0;
    background-size:cover;
    background-position:center;
    position:relative;
}
.case-tag{
    display:inline-flex;gap:.5rem;align-items:center;
    color:#0b4a6f;
    background:rgba(36,180,249,.12);
    border:1px solid rgba(36,180,249,.22);
    padding:.35rem .62rem;
    border-radius:999px;
    font-size:.82rem;
    font-weight:600;
}
.metric{display:flex;gap:.6rem;align-items:baseline;margin-top:10px}
.metric .v{font-size:1.25rem;color:var(--vt-ink);font-weight:700}
.metric .k{color:var(--vt-muted);font-size:.9rem;font-weight:500}

/* Policy pages (Bảo mật, Điều khoản, Cookies) */
.sec-1 .policy-content{
    margin-top:0;
}
.policy-content{
    font-size:1rem;
    line-height:1.7;
    color:var(--vt-text);
}
.policy-content > p.vt-lead.text-muted{
    font-size:.925rem;
    line-height:1.6;
    color:var(--vt-muted)!important;
    margin-bottom:1.5rem!important;
}
.policy-content h2{
    font-size:1.2rem;
    font-weight:700;
    color:var(--vt-ink);
    letter-spacing:-.02em;
    margin-top:1.75rem;
    margin-bottom:.6rem;
    padding-bottom:0;
}
.policy-content h2:first-of-type{
    margin-top:0;
}
.policy-content p{
    margin-bottom:1rem;
    color:var(--vt-text);
}
.policy-content ul,
.policy-content ol{
    margin-bottom:1.25rem;
    padding-left:1.5rem;
}
.policy-content li{
    margin-bottom:.4rem;
    color:var(--vt-text);
}
.policy-content a{
    color:var(--vt-primary);
    text-decoration:underline;
    text-underline-offset:3px;
    transition:color .15s ease;
}
.policy-content a:hover{
    color:#043b95;
}
.policy-content hr{
    border:0;
    border-top:1px solid var(--vt-border);
    margin:1.5rem 0;
}
.policy-content .small.text-muted{
    font-size:.875rem;
    color:var(--vt-muted)!important;
}
.policy-content .small.text-muted a{
    color:var(--vt-primary);
}

/* Testimonials (dark section) */
.sec-3 .vt-card{
    background:rgba(255,255,255,.06);
    border-color:rgba(255,255,255,.12);
    box-shadow:none;
}
.sec-3 .t-card .quote{color:rgba(255,255,255,.92);font-weight:500;line-height:1.75}
.who{display:flex;align-items:center;gap:.75rem;margin-top:12px}
.avatar{
    width:42px;height:42px;
    border-radius:14px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(36,180,249,.16);
    border:1px solid rgba(36,180,249,.22);
    color:#cfefff;
    font-weight:600;
}
.who .name{color:#fff;font-weight:600;line-height:1.1}
.who .role{color:rgba(255,255,255,.70);font-size:.9rem;font-weight:500}

/* News */
.news-thumb{
    height:150px;
    border-radius:16px;
    background-size:cover;
    background-position:center;
    border:1px solid rgba(15,23,42,.10);
}
.news-meta{color:var(--vt-muted);font-size:.85rem;font-weight:600}
.news-title{color:var(--vt-ink);margin:8px 0 6px;line-height:1.25;font-weight:700}
.news-excerpt{color:var(--vt-muted);margin:0;font-weight:500}

/* ===== Knowledge list & detail ===== */
.sec-kt{
    background:#f5f7fb;
}
.sec-kt .kt-title{
    font-weight:800;
    color:var(--vt-ink);
}
.sec-kt .kt-subtitle{
    margin-bottom:0;
    font-weight:500;
}
.sec-kt .card{
    border-radius:18px;
    border:1px solid rgba(15,23,42,.08);
    box-shadow:var(--vt-shadow2);
    transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.sec-kt .card:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 40px rgba(15,23,42,.12);
    border-color:rgba(5,72,181,.22);
}
.sec-kt .card-img-top{
    border-radius:16px 16px 0 0;
}
.sec-kt .badge{
    border-radius:999px;
    padding:.25rem .7rem;
    font-weight:600;
    font-size:.75rem;
    background:rgba(15,23,42,.06);
    color:var(--vt-ink);
}
.sec-kt aside .card{
    border-radius:16px;
    box-shadow:none;
}
.sec-kt aside a{
    text-decoration:none;
    color:var(--vt-muted);
    font-weight:500;
}
.sec-kt aside a:hover,
.sec-kt aside a.fw-bold{
    color:var(--vt-primary);
}

.kt-detail{
    background:#f5f7fb;
}
.kt-detail .breadcrumb{
    background:transparent;
    padding:0;
    margin-bottom:8px;
}
.kt-detail .breadcrumb a{
    text-decoration:none;
    color:var(--vt-muted);
}
.kt-detail .breadcrumb a:hover{
    color:var(--vt-primary);
}
.kt-detail h1{
    font-weight:800;
    color:var(--vt-ink);
}
.kt-detail .post-body{
    font-size:1rem;
    line-height:1.8;
    color:var(--vt-ink);
}
.kt-detail .post-body p{
    margin-bottom:1rem;
}
.kt-detail figure img{
    border-radius:18px;
    box-shadow:var(--vt-shadow2);
}

/* Knowledge: filters, meta & related */
.kt-meta{
    color:var(--vt-muted);
    font-weight:500;
}
.kt-search .input-group .form-control{
    border-radius:999px 0 0 999px;
}
.kt-search .input-group .btn{
    border-radius:0 999px 999px 0;
}
.kt-sidebar{
    background:#fff;
}
.kt-filter-list a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:.35rem .6rem;
    border-radius:999px;
    text-decoration:none;
    color:var(--vt-muted);
    font-weight:500;
}
.kt-filter-list a.active,
.kt-filter-list a:hover{
    background:rgba(5,72,181,.06);
    color:var(--vt-primary);
}
.kt-card{
    border-radius:18px;
}
.kt-card .card-title a{
    font-weight:600;
}
.kt-card-meta{
    font-size:.82rem;
}
.kt-badge{
    border-radius:999px;
    padding:.2rem .7rem;
    font-weight:600;
    font-size:.78rem;
    background:rgba(5,72,181,.06);
    color:var(--vt-primary);
}
.kt-related-title{
    font-weight:700;
    color:var(--vt-ink);
}
.kt-related-card{
    border-radius:16px;
}

/* ===== Forms ===== */
.form-control,.form-select{
    border-radius:14px;
    padding:.78rem .92rem;
    border-color:rgba(15,23,42,.14);
    font-weight:500;
}
.form-control:focus,.form-select:focus{
    border-color:rgba(36,180,249,.55);
    box-shadow:0 0 0 .25rem rgba(36,180,249,.18);
}
label{color:var(--vt-ink);font-weight:600}

/* ===== Utilities ===== */
.vt-text-primary{color:var(--vt-primary)!important}

/* ===== Modal ===== */
.vt-modal{
    border-radius:22px;
    border:1px solid var(--vt-border);
}
.vt-modal__header{
    border-bottom:1px solid var(--vt-border);
}

/* ===== Footer helpers ===== */
.footer-logo{width:150px;height:auto;filter:drop-shadow(0 10px 20px rgba(0,0,0,.25))}
.footer-brand{color:#fff;font-weight:600}
.footer-tagline{color:rgba(255,255,255,.70)}
.footer-desc{color:rgba(255,255,255,.74);line-height:1.7}
.footer-head{color:#fff;font-weight:600}
.footer-hr{border-color:rgba(255,255,255,.14)}
.footer-bottom{color:rgba(255,255,255,.65)}

/* ===== Footer ===== */
footer{padding:46px 0;background:#0b1220;color:rgba(255,255,255,.78)}
footer a{color:rgba(255,255,255,.85);text-decoration:none}
footer a:hover{color:#fff;text-decoration:underline}

/* ===== Floating actions ===== */
.float-actions{
    position:fixed;
    right:16px;bottom:16px;
    display:flex;
    flex-direction:column;
    gap:10px;
    z-index:999;
}
.fab{
    width:46px;height:46px;
    border-radius:16px;
    border:1px solid rgba(15,23,42,.14);
    display:flex;align-items:center;justify-content:center;
    background:#fff;
    box-shadow:var(--vt-shadow2);
    color:var(--vt-primary);
    cursor:pointer;
    transition:transform .15s ease;
}
.fab:hover{transform:translateY(-2px)}
.fab.primary{
    background:var(--vt-primary);
    border-color:var(--vt-primary);
    color:#fff;
    box-shadow:0 14px 30px rgba(5,72,181,.25);
}

/* ===== CASE SHEET (new layout) ===== */
.case-sheet{border-radius:22px}
.case-top{
    display:flex;align-items:center;justify-content:space-between;
    gap:12px;flex-wrap:wrap;
    margin-bottom:10px;
}
.case-badge{display:flex;gap:8px;flex-wrap:wrap}
.case-pill{
    display:inline-flex;align-items:center;gap:.45rem;
    padding:.38rem .62rem;
    border-radius:999px;
    background:rgba(36,180,249,.12);
    border:1px solid rgba(36,180,249,.22);
    color:#0b4a6f;
    font-size:.85rem;
}
.case-pill.soft{
    background:rgba(5,72,181,.08);
    border-color:rgba(5,72,181,.16);
    color:var(--vt-primary);
}
.case-title h3{font-weight:700}
.case-title .vt-lead{margin-top:2px}

.case-box{
    border:1px solid rgba(15,23,42,.10);
    border-radius:18px;
    padding:14px 14px 12px;
    background:#fff;
    height:100%;
}
.case-box-h{display:flex;gap:.75rem;align-items:flex-start;margin-bottom:8px}
.case-box-h i{
    width:38px;height:38px;
    border-radius:14px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(5,72,181,.10);
    border:1px solid rgba(5,72,181,.18);
    color:var(--vt-primary);
    flex:0 0 auto;
}
.case-box-h .t{color:var(--vt-ink);font-weight:600}
.case-box-h .s{color:var(--vt-muted);font-size:.95rem}

.case-list{margin:0;padding-left:1.05rem;color:var(--vt-muted)}
.case-list li{margin:.28rem 0}

.case-box.result{
    background:
            radial-gradient(600px 260px at 20% 0%, rgba(36,180,249,.16), transparent 60%),
            radial-gradient(600px 260px at 80% 20%, rgba(245,132,42,.12), transparent 60%),
            #fff;
}
.kpi-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-top:10px;
}
.kpi{
    border:1px solid rgba(15,23,42,.10);
    border-radius:16px;
    padding:10px 12px;
    background:rgba(255,255,255,.70);
}
.kpi-val{
    font-size:1.25rem;
    font-weight:700;
    letter-spacing:-.02em;
    color:var(--vt-ink);
}
.kpi-val.pos{color:#0f766e}
.kpi-val.neg{color:#b91c1c}
.kpi-key{color:var(--vt-muted);font-size:.9rem;margin-top:2px}
.case-note{
    margin-top:10px;
    padding:10px 12px;
    border-radius:16px;
    border:1px dashed rgba(15,23,42,.16);
    color:var(--vt-muted);
    background:rgba(255,255,255,.55);
    font-size:.92rem;
}

/* ===== Mega Menu (gộp 2 bản thành 1) ===== */
.dropdown-mega .dropdown-menu{
    border:1px solid rgba(15,23,42,.10);
    border-radius:18px;
    box-shadow:var(--vt-shadow);
    overflow:hidden;
}
.mega-menu{width:100%;max-width:none}
.mega-left{
    background:
            radial-gradient(600px 240px at 20% 0%, rgba(36,180,249,.14), transparent 60%),
            radial-gradient(600px 240px at 80% 30%, rgba(245,132,42,.10), transparent 60%),
            linear-gradient(180deg, rgba(255,255,255,1), rgba(247,251,255,1));
    border-right:1px solid rgba(15,23,42,.08);
}
.mega-title{color:var(--vt-ink);font-weight:700}
.mega-desc{color:var(--vt-muted);margin-top:6px;font-weight:500;line-height:1.6}

.mega-chips{display:flex;flex-wrap:wrap;gap:10px}
.mega-chip{
    display:inline-flex;align-items:center;gap:.45rem;
    padding:.36rem .58rem;
    border-radius:999px;
    background:rgba(11,18,32,.06);
    border:1px solid rgba(11,18,32,.10);
    color:rgba(11,18,32,.78);
    font-size:.88rem;
    font-weight:600;
}
.mega-chip i{color:var(--vt-primary)}

.mega-link{
    display:flex;align-items:center;gap:12px;
    padding:12px 14px;
    border-radius:16px;
    border:1px solid rgba(15,23,42,.10);
    background:#fff;
    text-decoration:none;
    color:inherit;
    transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.mega-link:hover, .mega-link.active{
    transform:translateY(-2px);
    box-shadow:var(--vt-shadow2);
    border-color:rgba(5,72,181,.22);
}
.mega-link.active .mega-h, .mega-link:hover .mega-h{
    color: red; !important;
}
.mega-ic{
    width:44px;height:44px;
    border-radius:16px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(5,72,181,.10);
    border:1px solid rgba(5,72,181,.18);
    color:var(--vt-primary);
    flex:0 0 auto;
    font-size:1.05rem;
}
.mega-content{min-width:0}
.mega-h{color:var(--vt-ink);font-weight:700;line-height:1.1}
.mega-s{color:var(--vt-muted);font-size:.92rem;margin-top:3px;font-weight:500}
.mega-arrow{margin-left:auto;color:rgba(15,23,42,.40)}
.mega-sub{
    display:flex;flex-wrap:wrap;
    gap:8px 10px;
    padding:10px 4px 0;
}
.mega-sub a{
    font-size:.9rem;
    color:var(--vt-muted);
    text-decoration:none;
    font-weight:600;
    padding:.25rem .45rem;
    border-radius:999px;
    border:1px solid rgba(15,23,42,.10);
    background:rgba(255,255,255,.65);
}
.mega-sub a:hover{
    color:var(--vt-primary);
    border-color:rgba(5,72,181,.22);
    background:rgba(5,72,181,.06);
}
.mega-right .p-4,
.mega-left  .p-4{padding:18px!important}

/* Desktop: show mega on hover (optional) */
@media (min-width:992px){
    .dropdown-mega:hover > .dropdown-menu{display:block;margin-top:.6rem}
}

/* ===== Responsive ===== */
@media (max-width:991.98px){
    header.hero{padding-top:0}
    .heroCarousel .item{min-height:520px;height:clamp(520px,60vh,640px)}
    .hero-content{padding:36px 0}
    .brand-logo{width:136px}
    .owl-nav .owl-prev{left:10px}
    .owl-nav .owl-next{right:10px}

    .mega-menu{width:100%}
    .mega-left{border-right:none;border-bottom:1px solid rgba(15,23,42,.08)}
    .kpi-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:575.98px){
    .heroCarousel .item{min-height:520px;height:600px}
    .brand-sub{display:none}
    .solution-title{white-space:normal}
    .kpi-grid{grid-template-columns:1fr}
}

/* ===== Mega Menu: full-width under navbar ===== */
.dropdown-mega-full{position:static}
.dropdown-mega-full>.dropdown-menu{
    left:0;right:0;
    margin-top:.75rem;
    border-radius:22px;
}
.mega-menu>.container{padding-left:0;padding-right:0}
.mega-inner{background:#fff;border-radius:0 0 22px 22px;box-shadow:var(--vt-shadow);overflow:hidden}
@media (max-width:991.98px){
    .dropdown-mega-full>.dropdown-menu{margin-top:0;border-radius:0 0 22px 22px}
}

/* ===== HOTFIX: Mega menu hover không bị rớt (desktop) ===== */
@media (min-width: 992px){
    /* tránh bị cắt bởi navbar/collapse/container */
    .navbar, .navbar .container, .navbar .container-fluid,
    .navbar-collapse, .navbar-nav{ overflow: visible !important; }

    /* full-width mega */
    .dropdown-mega-full{ position: static; }

    /* mở menu khi hover vào trigger hoặc hover trực tiếp menu */
    .dropdown-mega:hover > .dropdown-menu,
    .dropdown-mega > .dropdown-menu:hover,
    .dropdown-mega:focus-within > .dropdown-menu,
    .dropdown-mega-full:hover > .dropdown-menu,
    .dropdown-mega-full > .dropdown-menu:hover,
    .dropdown-mega-full:focus-within > .dropdown-menu{
        display: block;
    }

    /* LOẠI BỎ hover-gap do margin-top */
    .dropdown-mega > .dropdown-menu{ margin-top: 0 !important; top: 100%; z-index: 2000; }
    .dropdown-mega-full > .dropdown-menu{ margin-top: 0 !important; top: 100%; z-index: 2000; }

    /* tạo “cầu nối” hover 14px giữa nút và menu (không nhìn thấy) */
    .dropdown-mega > .dropdown-menu::before,
    .dropdown-mega-full > .dropdown-menu::before{
        content: "";
        position: absolute;
        left: 0; right: 0;
        top: -14px;
        height: 14px;
    }
}



/* =========================================================
   FIX Mega menu:
   - Không full viewport (nằm trong container chính)
   - Hover ổn định (desktop) + cầu nối tránh "rớt" hover
   ========================================================= */
@media (min-width: 992px){
    /* dropdown tuyệt đối theo container navbar để không tạo khoảng trắng 2 bên */
    .navbar .container,
    .navbar .container-fluid{ position: relative; }

    /* mega full: menu rộng theo container navbar, không theo viewport */
    .dropdown-mega-full{ position: static; }
    .dropdown-mega-full > .dropdown-menu{
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        top: 100%;
        margin-top: 0 !important; /* tránh hover-gap */
        border-radius: 22px;
        z-index: 2000;
    }

    /* menu luôn hiển thị khi li được JS thêm class show */
    .dropdown-mega-full.show > .dropdown-menu{ display:block; }

    /* cầu nối hover (trong suốt) giữa nav-link và menu */
    .dropdown-mega-full > .dropdown-menu::before{
        content:"";
        position:absolute;
        left:0; right:0;
        top:-14px;
        height:14px;
    }

    /* tránh bị cắt bởi collapse/nav */
    .navbar, .navbar-nav, .navbar-collapse{ overflow: visible !important; }
}
/* =========================
   Mega Panel Portal (NEW)
   ========================= */

.mega-panel{
    position: absolute;
    left: 0; right: 0;
    top: 0;
    display: none;
    z-index: 3000;
}

.mega-panel.is-open{ display:block; }

/* container bám đúng theo navbar .container */
.mega-panel__container{
    max-width: 1320px;           /* Bootstrap container xl default-ish */
    margin: 0 auto;
    padding: 0 12px;             /* giống container */
}

/* panel sát ngay dưới nav, flat, không bo */
.mega-panel__inner{
    background: #fff;
    border-top: 1px solid rgba(15,23,42,.10);
    border-left: 1px solid rgba(15,23,42,.10);
    border-right: 1px solid rgba(15,23,42,.10);
    border-bottom: 1px solid rgba(15,23,42,.10);
    border-bottom-left-radius: var(--vt-radius);
    border-bottom-right-radius: var(--vt-radius);
    box-shadow: none;
}
/* Desktop: chỉ mở bằng hover */
@media (min-width: 992px){
    .mega-trigger{ position: relative; }
}

/* Mobile: panel full width viewport cho dễ (tuỳ bạn) */
@media (max-width: 991.98px){
    .mega-panel{ position: fixed; left:0; right:0; }
    .mega-panel__container{ max-width: 100%; padding: 0; }
    .mega-panel__inner{ border-left:0; border-right:0; }
}



/* Topbar style */
.topbar{
    background: #0b1220;
    color: rgba(255,255,255,.92);
    border-bottom: 1px solid rgba(255,255,255,.08);
    font-size: .92rem;
}
.topbar a{
    color: rgba(255,255,255,.92);
    text-decoration: none;
    font-weight: 600;
}
.topbar a:hover{
    color: #36c6ff;
}
.topbar i{
    color: rgba(255,255,255,.86);
}

/* Navbar in header stack (keep your blur look, just ensure it sits under topbar) */
.site-header .navbar{
    position:relative;          /* not fixed */
    z-index:1;
}

/* Optional: keep blur background visible under the stack */
.site-header .navbar{
    background:rgba(246,249,255,.90);
    backdrop-filter: blur(12px);
}

/* If you have anchor scroll, make sure offset accounts for header height */
html{
    scroll-padding-top: var(--vt-header-h);
}
/* ===== Sticky Navbar ===== */
.vt-navbar{
    position: sticky;
    top: 0;
    z-index: 1051; /* cao hơn content */
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

/* Khi scroll xuống sẽ thêm shadow */
.vt-navbar.is-stuck{
    box-shadow: 0 10px 25px rgba(2,6,23,.10);
    border-bottom: 1px solid rgba(15,23,42,.10);
    background: rgba(255,255,255,.96);
}

/* Tránh anchor bị che bởi sticky navbar */
html{ scroll-padding-top: 86px; }

/* =========================================================
   OwlCarousel NAV
   - HERO: giữ nguyên (full width)
   - NON-HERO: đưa prev/next ra 2 bên + căn giữa
   ========================================================= */

/* ====== ÁP DỤNG CHO CAROUSEL KHÔNG PHẢI HERO ====== */
.owl-carousel:not(.heroCarousel){
    position: relative;
    overflow: visible; /* để không cắt icon */
}

.owl-carousel:not(.heroCarousel) .owl-nav{
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    margin: 0 !important;
    pointer-events: none;
    z-index: 5;
}

.owl-carousel:not(.heroCarousel) .owl-nav button{
    pointer-events: auto;
}

/* Đẩy icon ra 2 bên */
.owl-carousel:not(.heroCarousel) .owl-nav .owl-prev,
.owl-carousel:not(.heroCarousel) .owl-nav .owl-next{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.owl-carousel:not(.heroCarousel) .owl-nav .owl-prev{
    left: -28px; /* chỉnh tuỳ layout */
}

.owl-carousel:not(.heroCarousel) .owl-nav .owl-next{
    right: -28px;
}

/* Mobile: kéo icon vào trong cho khỏi cắt */
@media (max-width: 575.98px){
    .owl-carousel:not(.heroCarousel) .owl-nav .owl-prev{
        left: 6px;
    }
    .owl-carousel:not(.heroCarousel) .owl-nav .owl-next{
        right: 6px;
    }
}

/* Hover mượt */
.owl-carousel:not(.heroCarousel) .owl-nav [class*='owl-']{
    transition: transform .15s ease, filter .15s ease;
}
.owl-carousel:not(.heroCarousel) .owl-nav [class*='owl-']:hover{
    transform: translateY(-50%) scale(1.05);
    filter: brightness(1.05);
}
/* =========================================================
   OwlCarousel NAV
   - HERO: giữ nguyên (full width)
   - NON-HERO: đưa prev/next ra 2 bên + căn giữa
   ========================================================= */

/* ====== ÁP DỤNG CHO CAROUSEL KHÔNG PHẢI HERO ====== */
.owl-carousel:not(.heroCarousel){
    position: relative;
    overflow: visible; /* để không cắt icon */
}

.owl-carousel:not(.heroCarousel) .owl-nav{
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    margin: 0 !important;
    pointer-events: none;
    z-index: 5;
}

.owl-carousel:not(.heroCarousel) .owl-nav button{
    pointer-events: auto;
}

/* Đẩy icon ra 2 bên */
.owl-carousel:not(.heroCarousel) .owl-nav .owl-prev,
.owl-carousel:not(.heroCarousel) .owl-nav .owl-next{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.owl-carousel:not(.heroCarousel) .owl-nav .owl-prev{
    left: -28px; /* chỉnh tuỳ layout */
}

.owl-carousel:not(.heroCarousel) .owl-nav .owl-next{
    right: -28px;
}

/* Mobile: kéo icon vào trong cho khỏi cắt */
@media (max-width: 575.98px){
    .owl-carousel:not(.heroCarousel) .owl-nav .owl-prev{
        left: 6px;
    }
    .owl-carousel:not(.heroCarousel) .owl-nav .owl-next{
        right: 6px;
    }
}

/* Hover mượt */
.owl-carousel:not(.heroCarousel) .owl-nav [class*='owl-']{
    transition: transform .15s ease, filter .15s ease;
}
.owl-carousel:not(.heroCarousel) .owl-nav [class*='owl-']:hover{
    transform: translateY(-50%) scale(1.05);
    filter: brightness(1.05);
}
/* =========================
   Fixed Topbar + Fixed Navbar
   ========================= */

/* Topbar fixed */
.topbar{
    position: fixed;
    top: 0;
    left: 0; right: 0;
    z-index: 2100;
    width: 100%;
}

/* Navbar fixed, nằm dưới topbar */
.vt-navbar{
    position: fixed;
    left: 0; right: 0;
    top: var(--vt-topbar-h, 0px);
    z-index: 2200;

    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

.vt-navbar.is-stuck{
    box-shadow: 0 10px 25px rgba(2,6,23,.10);
    border-bottom: 1px solid rgba(15,23,42,.10);
    background: rgba(255,255,255,.96);
}

/* Mega panel luôn ở dưới navbar */
#megaPanel{
    position: fixed;                 /* đổi từ absolute -> fixed */
    left: 0; right: 0;
    top: calc(var(--vt-topbar-h, 0px) + var(--vt-nav-h, 0px) + 6px);
    z-index: 2190;                   /* dưới navbar, trên content */
}
/* Mega panel: chỉ nhận click khi đang mở */
#megaPanel{ pointer-events:none; }
#megaPanel.is-open{ pointer-events:auto; }
/* Tránh anchor bị che bởi topbar+navbar */
html{
    scroll-padding-top: calc(var(--vt-topbar-h, 0px) + var(--vt-nav-h, 0px) + 14px);
}

/* Body padding để nội dung không bị fixed header che (desktop & mặc định).
   Riêng mobile sẽ xử lý offset bằng padding của hero để hero nằm sát header không có dải trắng. */
body{
    padding-top: calc(var(--vt-topbar-h, 44px) + var(--vt-nav-h, 56px));
}

/* ===========================
   Compact PC Header (match UI screenshot)
   =========================== */
:root{
    --vt-topbar-h: 44px;
    --vt-nav-h: 56px;
}

.topbar{ font-size: .9rem; }
.topbar-actions{ white-space: nowrap; }
.topbar-divider{
    width: 1px;
    height: 20px;
    background: rgba(255,255,255,.25);
    margin: 0 .25rem;
    display: inline-block;
}
.topbar-pill{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:.45rem .85rem;
    border-radius: 999px;
    border: 1px solid rgba(72,140,255,.65);
    background: rgba(10,26,56,.35);
    color: rgba(72,140,255,1);
    font-weight: 700;
    line-height: 1;
}
.topbar-pill:hover{ background: rgba(10,26,56,.55); }
.topbar-link{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    color: rgba(255,255,255,.92) !important;
    text-decoration:none;
    font-weight: 750;
}
.topbar-link:hover{ color: #ffffff !important; text-decoration: underline; }

.vt-navbar{
    top: var(--vt-topbar-h);
}

@media (min-width: 992px){
    /* prevent desktop nav wrapping */
    #vtNavbar .navbar-nav{ flex-wrap: nowrap; }
    #vtNavbar .nav-link{ white-space: nowrap; padding: .85rem .6rem; font-weight: 750; }
    #vtNavbar .brand-logo{ height: 44px; width: auto; }
    #vtNavbar .navbar-brand{ padding: .35rem 0; }
}

@media (max-width: 991.98px){
    /* Giữ navbar dưới topbar (dùng chiều cao thật từ JS) */
    .vt-navbar{ top: var(--vt-topbar-h, 44px); }
    #vtNavbar .brand-logo{ height: 40px; }
    /* Trên mobile: không đẩy body xuống, hero tự chừa khoảng đủ lớn
       để chữ không bị nav đè; dùng max() với safe-area cho máy có notch. */
    body{
        padding-top: 0 !important;
    }
    header.hero{
        padding-top: 112px;
    }
    /* Đảm bảo nội dung hero không bị kéo sát lên (trang chủ + mọi subpage) */
    .hero .hero-content{
        padding-top: 1rem;
    }
}
.accordion-button{font-weight: bold !important;}
.footer-contact-item{display:flex;align-items:center;gap:.6rem;color:rgba(255,255,255,.85);text-decoration:none}
.footer-contact-item i{width:18px;opacity:.9}
.footer-contact-item.muted{color:rgba(255,255,255,.68)}
.footer-links a{color:rgba(255,255,255,.82);text-decoration:none}
.footer-links a:hover{color:#fff}
.footer-policy a{color:rgba(255,255,255,.78);text-decoration:none}
.footer-policy a:hover{color:#fff}
.footer-dot{opacity:.45}
.footer-note{color:rgba(255,255,255,.72)}

/* =========================================================
   Typography Polish (smooth • compact • crisp)
   Dán block này ở CUỐI vtrends.css để override
   ========================================================= */

:root{
    --vt-font: "Inter","Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    --vt-font-head: "Inter","Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

    /* scale chữ gọn hơn một chút, nhưng rõ */
    --vt-fs-base: 16px;         /* bạn có thể thử 16.5px nếu muốn “rõ” hơn */
    --vt-lh-base: 1.65;

    /* tracking tinh chỉnh (đừng âm quá sâu) */
    --vt-track-body: -0.006em;
    --vt-track-head: -0.02em;
}

html{ font-size: var(--vt-fs-base); }

body{
    font-family: var(--vt-font);
    letter-spacing: var(--vt-track-body);

    /* làm chữ mượt + rõ */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;

    /* một số font có liga đẹp hơn */
    font-feature-settings: "liga" 1, "kern" 1;
}

/* Heading gọn, rõ, không “nặng” */
h1,h2,h3,h4,h5,h6,
.vt-title{
    font-family: var(--vt-font-head);
    letter-spacing: var(--vt-track-head);
}

/* Hiện .vt-title đang -0.03em hơi “co” → giảm lại cho dễ đọc */
.vt-title{
    letter-spacing: var(--vt-track-head) !important;
}

/* Body text rõ hơn một chút (đỡ nhạt) */
.vt-lead{
    line-height: var(--vt-lh-base);
}

/* Paragraph mặc định */
p{ line-height: var(--vt-lh-base); }

/* Small text: tăng nhẹ để không bị “mờ/nhỏ” */
.small, small{
    font-size: .92rem;
    line-height: 1.55;
}

/* Navbar / topbar: giảm weight để gọn, nhìn “UI” hơn */
.navbar .nav-link{
    font-weight: 650; /* thay vì 700+ */
    letter-spacing: -0.004em;
}

/* Card list / meta text: rõ hơn một chút */
.solution-desc,
.solution-list,
.news-meta,
.news-excerpt,
.case-list,
.case-note,
.mega-s{
    letter-spacing: -0.003em;
}

/* Form chữ rõ + gọn */
.form-control,
.form-select{
    font-family: var(--vt-font);
    letter-spacing: -0.003em;
}

/* Button chữ gọn và cân */
.btn,
.btn-vt-primary,
.btn-vt-outline,
.btn-vt-accent{
    font-family: var(--vt-font);
    letter-spacing: -0.004em;
}

/* Hero: tránh chữ bị “dày/nặng” quá */
.hero h1{
    letter-spacing: -0.02em;   /* thay vì quá âm */
}
.hero p{
    font-weight: 450;          /* bạn đang 500; giảm nhẹ để “mượt” */
    letter-spacing: -0.004em;
}

/* Kicker: gọn và rõ */
.section-head .kicker{
    letter-spacing: -0.004em;
}
/* FAQ trong cột trái */
#contact .accordion-item{
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(15,23,42,.08);
}

#contact .accordion-button{
    font-weight: 600;
    letter-spacing: -0.01em;
}

#contact .accordion-body{
    color: var(--vt-text);
    line-height: 1.6;
}

/* Cân nhịp giữa 2 card trái */
#contact .col-lg-5 > .w-100{
    justify-content: space-between;
}
.post-body {
    line-height: 1.8;
    font-size: 1rem;
}

.post-body img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 1rem 0;
}

.post-body h2,
.post-body h3,
.post-body h4 {
    margin-top: 1.5rem;
    margin-bottom: .75rem;
    font-weight: 700;
}