/* =============================================================
   QuantumCode.vn - style.css
   Chỉ tự viết CSS cho phần Bootstrap 4 không lo được:
   màu thương hiệu, hiệu ứng, menu đa cấp, off-canvas, floating CTA...
   Cấu trúc BEM (Block__Element--Modifier).
   ============================================================= */

:root {
    --qc-green: #68ad33;          /* tone màu chính */
    --qc-green-neon: #7cc63f;     /* sáng hơn khi hover */
    --qc-green-dark: #52922a;
    --qc-dark: #0B1120;
    --qc-dark-2: #111827;
    --qc-slate: #1E293B;
    --qc-gray: #64748B;
    --qc-light: #F5F7FA;
    --qc-border: #E2E8F0;
}

/* ------------------------- Base ------------------------- */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--qc-slate);
    background: #ffffff;
    line-height: 1.6;
}

a { color: inherit; text-decoration: none; transition: color .2s ease; }
a:hover { text-decoration: none; color: var(--qc-green-dark); }
img { max-width: 100%; height: auto; }

/* Cuộn mượt khi click anchor + chừa khoảng cho header sticky */
html { scroll-behavior: smooth; }
:target { scroll-margin-top: 90px; }

/* Brand accent button (Bootstrap không có sẵn màu này) */
.btn-accent {
    background: var(--qc-green);
    border-color: var(--qc-green);
    color: #ffffff;
    font-weight: 600;
    border-radius: 10px;
    transition: box-shadow .25s ease, transform .15s ease, background .2s ease;
}
.btn-accent:hover,
.btn-accent:focus {
    background: var(--qc-green-neon);
    border-color: var(--qc-green-neon);
    color: #ffffff;
    box-shadow: 0 0 18px rgba(104, 173, 51, .5);
    transform: translateY(-1px);
}
.btn { border-radius: 10px; }
.btn-outline-light { border-radius: 10px; font-weight: 600; }

/* Nút viền xanh thương hiệu (đồng bộ tone, thay cho success mặc định Bootstrap) */
.btn-outline-success {
    color: var(--qc-green-dark);
    border-color: var(--qc-green);
    font-weight: 600;
}
.btn-outline-success:hover,
.btn-outline-success:focus {
    background: var(--qc-green);
    border-color: var(--qc-green);
    color: #fff;
    box-shadow: 0 0 14px rgba(104,173,51,.35);
}

/* Container rộng hơn cho thoáng (Bootstrap mặc định xl = 1140px) */
@media (min-width: 1200px) {
    .container { max-width: 1300px; }
    .header .container { max-width: 1400px; }   /* header rộng hơn nội dung */
}

/* Common section heading: đường border dưới + đoạn gạch xanh dưới tiêu đề */
.section-head {
    position: relative;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--qc-border);
}
.section-head__title {
    position: relative;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--qc-slate);
    margin: 0;
    padding-bottom: 14px;
    margin-bottom: -15px;            /* kéo tiêu đề xuống sát đường border */
    text-transform: uppercase;
    letter-spacing: .3px;
}
.section-head__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 64px;
    height: 3px;
    background: var(--qc-green);
    border-radius: 3px;
}
.section-head__more {
    font-size: .9rem;
    font-weight: 600;
    color: var(--qc-gray);
    white-space: nowrap;
}
.section-head__more:hover { color: var(--qc-green-dark); }

/* =============================================================
   LOGO
   ============================================================= */
.logo { display: flex; align-items: center; }
.logo__icon {
    font-size: 2rem;
    color: var(--qc-green);
    margin-right: 10px;
}
.logo__text { display: flex; flex-direction: column; line-height: 1.15; }
.logo__name { font-weight: 800; font-size: 1.15rem; color: var(--qc-slate); letter-spacing: .5px; }
.logo__dot { color: var(--qc-green); }
.logo__slogan { font-size: .68rem; color: var(--qc-gray); font-weight: 500; }
.logo--footer .logo__name { color: #fff; }
.logo--footer .logo__icon { font-size: 1.6rem; }

/* =============================================================
   HEADER
   ============================================================= */
.header {
    background: #fff;
    border-bottom: 1px solid var(--qc-border);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .04);
}
.header__inner { min-height: 74px; }
.header__actions > * { margin-left: 16px; }
.header__hotline { flex-direction: column; line-height: 1.1; }
.header__hotline-label { font-size: .7rem; color: var(--qc-gray); font-weight: 500; }
.header__hotline-number { font-size: 1rem; font-weight: 800; color: var(--qc-slate); }
.header__zalo { border-radius: 24px; padding: .5rem 1.1rem; white-space: nowrap; }

/* --------- Main menu (multi-level, desktop hover = CSS) --------- */
.main-menu { list-style: none; display: flex; margin: 0; padding: 0; }
.main-menu__item { position: relative; }
.main-menu__link {
    display: block;
    padding: 12px 16px;
    font-weight: 600;
    font-size: .92rem;
    color: var(--qc-slate);
    white-space: nowrap;
}
.main-menu__link:hover,
.main-menu__link--active { color: var(--qc-green-dark); }
.main-menu__caret { font-size: .65rem; margin-left: 4px; opacity: .8; }

/* Submenu */
.main-menu__submenu {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 230px;
    background: #fff;
    border: 1px solid var(--qc-border);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    z-index: 1010;
}
.main-menu__submenu .main-menu__link { padding: 9px 18px; font-size: .88rem; }
.main-menu__submenu .main-menu__link:hover { background: var(--qc-light); }

/* Level 2 flyout to the right */
.main-menu__submenu--level-2 {
    top: 0;
    left: 100%;
    margin-left: 2px;
}

/* Desktop hover reveal (CSS thuần, không JS) */
.main-menu:not(.main-menu--mobile) .main-menu__item--has-children:hover > .main-menu__submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.main-menu:not(.main-menu--mobile) .main-menu__submenu .main-menu__item--has-children:hover > .main-menu__submenu--level-2 {
    transform: translateY(0);
}

/* =============================================================
   SEARCH (toggle bằng jQuery)
   ============================================================= */
.search { position: relative; }
.search__toggle {
    background: none;
    border: none;
    font-size: 1.1rem;
    color: var(--qc-slate);
    cursor: pointer;
    padding: 6px;
}
.search__toggle:hover { color: var(--qc-green-dark); }
.search__form {
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    display: none;               /* ẩn mặc định */
    align-items: center;
    background: #fff;
    border: 1px solid var(--qc-border);
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .12);
    z-index: 1010;
}
.search--active .search__form { display: flex; }  /* JS thêm class -> hiện */
.search__input {
    border: none;
    outline: none;
    padding: 6px 10px;
    width: 220px;
    font-size: .9rem;
}
.search__submit,
.search__close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 10px;
    color: var(--qc-gray);
}
.search__submit { color: var(--qc-green-dark); }
.search__submit:hover, .search__close:hover { color: var(--qc-slate); }

/* =============================================================
   HAMBURGER
   ============================================================= */
.hamburger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 4px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 30px;
    width: 32px;
}
.hamburger__bar {
    display: block;
    height: 3px;
    width: 100%;
    background: var(--qc-slate);
    border-radius: 3px;
}

/* =============================================================
   MOBILE OFF-CANVAS NAV (open/close bằng jQuery)
   ============================================================= */
.nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(11, 17, 32, .55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s;
    z-index: 1090;
}
.nav-overlay--show { opacity: 1; visibility: visible; }

.nav-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    max-width: 85%;
    height: 100%;
    background: #fff;
    box-shadow: 6px 0 30px rgba(15, 23, 42, .18);
    transform: translateX(-100%);           /* ẩn ngoài màn hình trái */
    transition: transform .3s ease;
    z-index: 1100;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.nav-sidebar--open { transform: translateX(0); }   /* JS thêm class -> trượt vào */

.nav-sidebar__head {
    padding: 18px 20px;
    border-bottom: 1px solid var(--qc-border);
}
.nav-sidebar__title { font-weight: 800; letter-spacing: 1px; color: var(--qc-slate); }
.nav-sidebar__close {
    background: none; border: none; font-size: 1.3rem; color: var(--qc-slate); cursor: pointer;
}

/* Mobile menu (accordion) */
.main-menu--mobile { flex-direction: column; padding: 8px 0; }
.main-menu--mobile .main-menu__item { border-bottom: 1px solid var(--qc-light); }
.main-menu--mobile .main-menu__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.main-menu--mobile .main-menu__link { flex: 1; padding: 13px 20px; white-space: normal; word-break: break-word; }
.main-menu--mobile .main-menu__toggle {
    background: none;
    border: none;
    color: var(--qc-gray);
    padding: 13px 20px;
    cursor: pointer;
    transition: transform .25s ease;
}
.main-menu--mobile .main-menu__toggle--active { transform: rotate(180deg); color: var(--qc-green-dark); }

/* Mobile submenu: ẩn/hiện bằng accordion (JS) */
.main-menu--mobile .main-menu__submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
    min-width: 0;
    background: var(--qc-light);
    padding: 0;
    display: none;                 /* mặc định ẩn */
}
.main-menu--mobile .main-menu__submenu--open { display: block; }  /* JS -> hiện */
.main-menu--mobile .main-menu__submenu .main-menu__link { padding-left: 34px; }
.main-menu--mobile .main-menu__submenu--level-2 { background: #eef2f7; }
.main-menu--mobile .main-menu__submenu--level-2 .main-menu__link { padding-left: 48px; }

.nav-sidebar__foot { margin-top: auto; padding: 18px 20px; border-top: 1px solid var(--qc-border); }
.nav-sidebar__hotline { display: block; font-weight: 800; color: var(--qc-slate); font-size: 1.05rem; }

/* =============================================================
   LANGUAGE SWITCHER (fixed phải-giữa, hover xổ = CSS)
   ============================================================= */
.lang-switcher {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1080;
    background: #fff;
    border: 1px solid var(--qc-border);
    border-right: none;
    border-radius: 10px 0 0 10px;
    box-shadow: -4px 0 16px rgba(15, 23, 42, .12);
    overflow: hidden;
}
.lang-switcher__current {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    cursor: pointer;
    font-weight: 700;
    font-size: .82rem;
}
.lang-switcher__flag { font-size: 1.05rem; }
.lang-switcher__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
}
.lang-switcher:hover .lang-switcher__list { max-height: 200px; }   /* CSS hover */
.lang-switcher__item a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    font-size: .82rem;
    font-weight: 600;
    border-top: 1px solid var(--qc-light);
}
.lang-switcher__item a:hover { background: var(--qc-light); color: var(--qc-green-dark); }

/* =============================================================
   HERO
   ============================================================= */
.hero { position: relative; background: var(--qc-dark); }

/* Mỗi slide là 1 ảnh nền full-width, chữ đè lên ~40% chiều rộng */
.hero__slide {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 560px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* Ảnh nền mẫu (thay sau) + lớp phủ tối trái -> trong suốt phải để chữ dễ đọc */
.hero__slide--1 {
    background-image:
        linear-gradient(90deg, rgba(8,15,28,.94) 0%, rgba(8,15,28,.75) 40%, rgba(8,15,28,.25) 70%, rgba(8,15,28,.15) 100%),
        url('https://picsum.photos/seed/quantum-hero1/1920/760');
}
.hero__slide--2 {
    background-image:
        linear-gradient(90deg, rgba(8,15,28,.94) 0%, rgba(8,15,28,.75) 40%, rgba(8,15,28,.25) 70%, rgba(8,15,28,.15) 100%),
        url('https://picsum.photos/seed/datacenter-hero2/1920/760');
}

.hero__content {
    position: relative;
    z-index: 2;
    max-width: 56%;            /* nới rộng để tiêu đề lớn hiển thị full hơn */
    color: #fff;
    padding: 30px 0;
}
.hero__title {
    font-size: 2.85rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 20px;
    text-shadow: 0 2px 12px rgba(0,0,0,.4);
    white-space: nowrap;       /* mỗi dòng tiêu đề hiển thị trọn, không bị ngắt */
}
.hero__title--accent { color: var(--qc-green-neon); }
.hero__desc { font-size: 1.05rem; color: #e2e8f0; margin-bottom: 26px; text-shadow: 0 1px 8px rgba(0,0,0,.4); max-width: 540px; }

/* 2 nút CTA cân đối, gọn gàng hơn */
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; }
.hero__cta .btn {
    min-width: 200px;
    padding: .72rem 1.5rem;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Chấm điều hướng Owl nằm trong slider */
.hero__slider .owl-dots { position: absolute; left: 0; right: 0; bottom: 22px; margin: 0; }
.hero__slider .owl-dots .owl-dot span { width: 10px; height: 10px; background: rgba(255,255,255,.5); }
.hero__slider .owl-dots .owl-dot.active span { background: var(--qc-green); }

/* Ad banner (thẻ quảng cáo) */
.ad-banner {
    display: block;
    border-radius: 14px;
    padding: 24px;
    color: #fff;
    background: linear-gradient(150deg, #10231a, #0d1526);
    border: 1px solid rgba(104,173,51,.25);
    transition: box-shadow .25s ease, transform .2s ease;
}
.ad-banner:hover { box-shadow: 0 0 26px rgba(104,173,51,.28); transform: translateY(-2px); color: #fff; }
.ad-banner__label {
    display: inline-block;
    font-size: .65rem;
    letter-spacing: 1px;
    color: var(--qc-green);
    border: 1px solid rgba(104,173,51,.5);
    border-radius: 4px;
    padding: 2px 8px;
    margin-bottom: 12px;
}
.ad-banner__title { font-size: 1.25rem; font-weight: 800; margin-bottom: 10px; }
.ad-banner__desc { color: #cbd5e1; font-size: .9rem; margin-bottom: 16px; }
.ad-banner__points { list-style: none; padding: 0; margin: 0 0 16px; }
.ad-banner__points li { position: relative; padding-left: 22px; margin-bottom: 6px; color: #d1d9e6; font-size: .9rem; }
.ad-banner__points li::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--qc-green);
    position: absolute;
    left: 0;
}
/* Ảnh nền mẫu (thay sau) - phủ gradient xanh than để chữ nổi bật */
.ad-banner--sidebar {
    min-height: 360px;
    background-image:
        linear-gradient(155deg, rgba(12,34,20,.94) 0%, rgba(11,20,36,.78) 50%, rgba(11,20,36,.5) 100%),
        url('https://picsum.photos/seed/nodeserver/500/600');
    background-size: cover;
    background-position: center;
}
.ad-banner--sidebar .ad-banner__title { margin-bottom: 16px; }

/* =============================================================
   HOT NEWS CARDS
   ============================================================= */
.news-card {
    background: #fff;
    border: 1px solid var(--qc-border);
    border-radius: 12px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow .25s ease, transform .2s ease;
}
.news-card:hover { box-shadow: 0 14px 30px rgba(15,23,42,.1); transform: translateY(-3px); }
.news-card__thumb { position: relative; overflow: hidden; }
.news-card__img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; display: block; transition: transform .4s ease; }
.news-card:hover .news-card__img { transform: scale(1.05); }
.news-card__tag {
    position: absolute;
    left: 10px;
    bottom: 10px;
    background: var(--qc-green);
    color: #ffffff;                 /* chữ trắng để không chìm vào nền xanh */
    font-size: .68rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 4px;
    text-transform: uppercase;
}
.news-card__body { padding: 16px; display: flex; flex-direction: column; flex: 1; }
.news-card__date { font-size: .78rem; color: var(--qc-gray); margin-bottom: 6px; }
/* Tiêu đề: tối đa 2 dòng, dư thì ... */
.news-card__title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-card__title a:hover { color: var(--qc-green-dark); }
/* Mô tả: tối đa 2 dòng, dư thì ... */
.news-card__desc {
    font-size: .87rem;
    color: var(--qc-gray);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =============================================================
   SOLUTION (Hạ tầng Node)
   ============================================================= */
.solution { margin-top: 20px; }
.solution__box {
    background: var(--qc-light);
    border: 1px solid var(--qc-border);
    border-radius: 16px;
    padding: 30px;
}
.solution__heading {
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 24px;
    text-transform: uppercase;
}
.solution__img { border-radius: 12px; width: 100%; object-fit: cover; }
.solution__list { list-style: none; padding: 0; margin: 0 0 6px; }
.solution__item { display: flex; align-items: flex-start; margin-bottom: 18px; }
.solution__icon {
    color: var(--qc-green-dark);
    font-size: 1.15rem;
    background: rgba(104,173,51,.15);
    width: 40px; height: 40px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    margin-right: 14px;
    flex-shrink: 0;
}
.solution__item-title { font-size: 1rem; font-weight: 700; margin: 0 0 2px; }
.solution__item-desc { font-size: .87rem; color: var(--qc-gray); margin: 0; }

/* =============================================================
   MARKET (Thị trường PQC)
   ============================================================= */
.market { margin-top: 46px; }

/* Feature: ảnh trái - nội dung phải */
.market-feature { display: flex; gap: 18px; align-items: stretch; }
.market-feature__thumb {
    flex: 0 0 44%;
    max-width: 44%;
    border-radius: 12px;
    overflow: hidden;
    display: block;
}
.market-feature__img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; transition: transform .4s ease; }
.market-feature__thumb:hover .market-feature__img { transform: scale(1.04); }
.market-feature__body { flex: 1; display: flex; flex-direction: column; }
.market-feature__tag {
    display: inline-block;
    align-self: flex-start;
    background: rgba(104,173,51,.15);
    color: var(--qc-green-dark);
    font-size: .7rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 4px;
    margin-bottom: 6px;
}
.market-feature__date { font-size: .78rem; color: var(--qc-gray); }
.market-feature__title { font-size: 1.15rem; font-weight: 800; line-height: 1.35; margin: 6px 0 8px; }
.market-feature__title a:hover { color: var(--qc-green-dark); }
.market-feature__desc { font-size: .9rem; color: var(--qc-gray); margin: 0; }

.market-list { list-style: none; padding: 0; margin: 0; }
.market-list__item { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--qc-border); }
.market-list__item:first-child { padding-top: 0; }
.market-list__thumb { flex-shrink: 0; width: 96px; height: 72px; border-radius: 8px; overflow: hidden; }
.market-list__thumb img { width: 100%; height: 100%; object-fit: cover; }
.market-list__date { font-size: .76rem; color: var(--qc-gray); }
.market-list__title { font-size: .95rem; font-weight: 700; line-height: 1.35; margin: 4px 0 0; }
.market-list__title a:hover { color: var(--qc-green-dark); }

/* =============================================================
   SIDEBAR
   ============================================================= */
.sidebar-form,
.featured-posts {
    background: #fff;
    border: 1px solid var(--qc-border);
    border-radius: 12px;
    padding: 22px;
}
.sidebar-form__title,
.featured-posts__title {
    font-size: 1.05rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--qc-green);
    display: inline-block;
}
.lead-form .form-control { border-radius: 8px; font-size: .9rem; }
.lead-form .form-control:focus {
    border-color: var(--qc-green);
    box-shadow: 0 0 0 .2rem rgba(104,173,51,.25);
}

.featured-posts__list { list-style: none; padding: 0; margin: 0; }
.featured-posts__item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--qc-light); }
.featured-posts__item:last-child { border-bottom: none; padding-bottom: 0; }
.featured-posts__thumb { flex-shrink: 0; width: 76px; height: 60px; border-radius: 8px; overflow: hidden; }
.featured-posts__thumb img { width: 100%; height: 100%; object-fit: cover; }
.featured-posts__name { font-size: .9rem; font-weight: 700; line-height: 1.35; margin: 0 0 4px; }
.featured-posts__name a:hover { color: var(--qc-green-dark); }
.featured-posts__date { font-size: .74rem; color: var(--qc-gray); }

/* =============================================================
   CONTACT BAND
   ============================================================= */
.contact { padding: 10px 0 50px; }
/* Nền sáng như thiết kế (bỏ nền xanh/tối) */
.contact__box {
    background: var(--qc-light);
    border: 1px solid var(--qc-border);
    border-radius: 14px;
    padding: 34px 40px;
}
.contact__title { color: var(--qc-green-dark); font-size: 1.5rem; font-weight: 800; line-height: 1.25; margin-bottom: 10px; }
.contact__desc { color: var(--qc-gray); font-size: .9rem; margin: 0; }
.contact__form .form-control { height: 48px; background: #fff; }
.contact__submit { height: 48px; padding: 0 26px; font-weight: 700; white-space: nowrap; }

/* =============================================================
   PARTNERS
   ============================================================= */
.partners { padding: 40px 0; background: var(--qc-light); }
.partners__title { font-size: 1.3rem; font-weight: 800; margin-bottom: 26px; text-transform: uppercase; }
.partners__item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    padding: 0 10px;
}
.partners__item img {
    max-height: 60px;
    /* Bỏ nền trắng của logo (hòa vào nền sáng), giảm opacity; hover -> màu thật */
    mix-blend-mode: multiply;
    filter: grayscale(100%);
    opacity: .55;
    transition: filter .25s ease, opacity .25s ease;
}
.partners__item img:hover { filter: grayscale(0); opacity: 1; }

/* =============================================================
   FOOTER
   ============================================================= */
.footer { background: var(--qc-dark-2); color: #cbd5e1; padding: 50px 0 0; }
.footer__logo { margin-bottom: 16px; }
.footer__about { font-size: .88rem; color: #94a3b8; }
.footer__heading {
    font-size: .95rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 16px;
    letter-spacing: .5px;
}
.footer__links, .footer__contact { list-style: none; padding: 0; margin: 0; }
.footer__links li { margin-bottom: 10px; }
.footer__links a { font-size: .88rem; color: #94a3b8; }
.footer__links a:hover { color: var(--qc-green); }
.footer__contact li { font-size: .88rem; color: #94a3b8; margin-bottom: 12px; display: flex; align-items: flex-start; }
.footer__contact li i { color: var(--qc-green); margin-right: 10px; margin-top: 4px; width: 16px; }
.footer__map { border-radius: 10px; overflow: hidden; }
.footer__social { display: flex; gap: 10px; margin-top: 6px; }
.footer__social a {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: rgba(255,255,255,.08);
    display: flex; align-items: center; justify-content: center;
    color: #cbd5e1;
    transition: background .2s ease, color .2s ease;
}
.footer__social a:hover { background: var(--qc-green); color: #0B1120; }
.footer__bottom {
    margin-top: 30px;
    padding: 18px 0;
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: .83rem;
    color: #94a3b8;
}

/* =============================================================
   PAGE HEAD (Tiêu đề chuyên mục + mô tả) - trang danh sách
   ============================================================= */
.page-head {
    background: var(--qc-light);
    border-bottom: 1px solid var(--qc-border);
    padding: 26px 0 30px;
}
/* Breadcrumb nhỏ phía trên tiêu đề */
.breadcrumb-nav { font-size: .82rem; color: var(--qc-gray); margin-bottom: 12px; }
.breadcrumb-nav a { color: var(--qc-gray); font-weight: 500; }
.breadcrumb-nav a:hover { color: var(--qc-green-dark); }
.breadcrumb-nav__sep { margin: 0 8px; opacity: .6; }
.breadcrumb-nav__current { color: var(--qc-slate); font-weight: 600; }

.page-head__title {
    position: relative;
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--qc-slate);
    text-transform: uppercase;
    letter-spacing: .3px;
    margin: 0 0 16px;
    padding-bottom: 14px;
}
/* Gạch xanh dưới tiêu đề - đồng bộ section-head trang chủ */
.page-head__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 64px;
    height: 3px;
    background: var(--qc-green);
    border-radius: 3px;
}
.page-head__desc {
    font-size: .95rem;
    color: var(--qc-gray);
    max-width: 760px;
    margin: 0;
}

/* =============================================================
   POST LIST (Danh sách bài viết: ảnh trái - nội dung phải)
   ============================================================= */
.post-list { display: flex; flex-direction: column; gap: 22px; }

.post-item {
    display: flex;
    gap: 20px;
    background: #fff;
    border: 1px solid var(--qc-border);
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow .25s ease, transform .2s ease;
}
.post-item:hover { box-shadow: 0 14px 30px rgba(15,23,42,.1); transform: translateY(-3px); }

.post-item__thumb {
    position: relative;
    flex: 0 0 300px;
    max-width: 300px;
    overflow: hidden;
    display: block;
}
.post-item__img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.post-item__thumb:hover .post-item__img { transform: scale(1.05); }
.post-item__tag {
    position: absolute;
    left: 12px;
    top: 12px;
    background: var(--qc-green);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 4px;
    text-transform: uppercase;
}

.post-item__body { flex: 1; display: flex; flex-direction: column; padding: 20px 22px 20px 0; }
.post-item__meta { display: flex; align-items: center; gap: 14px; font-size: .78rem; color: var(--qc-gray); margin-bottom: 8px; }
.post-item__meta i { color: var(--qc-green-dark); margin-right: 5px; }
/* Tiêu đề: tối đa 2 dòng */
.post-item__title {
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.35;
    margin: 0 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.post-item__title a:hover { color: var(--qc-green-dark); }
/* Mô tả: tối đa 3 dòng */
.post-item__desc {
    font-size: .9rem;
    color: var(--qc-gray);
    margin: 0 0 14px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.post-item__more {
    margin-top: auto;
    align-self: flex-start;
    font-size: .85rem;
    font-weight: 700;
    color: var(--qc-green-dark);
}
.post-item__more:hover { color: var(--qc-green-neon); }
.post-item__more i { margin-left: 5px; font-size: .8rem; }

/* =============================================================
   PAGINATION (phân trang danh sách)
   ============================================================= */
.pagination-wrap { margin-top: 34px; }
.pagination-wrap .page-link {
    color: var(--qc-slate);
    border-color: var(--qc-border);
    border-radius: 8px;
    margin: 0 4px;
    font-weight: 600;
    min-width: 42px;
    text-align: center;
}
.pagination-wrap .page-link:hover { background: var(--qc-light); color: var(--qc-green-dark); }
.pagination-wrap .page-item.active .page-link {
    background: var(--qc-green);
    border-color: var(--qc-green);
    color: #fff;
    box-shadow: 0 4px 12px rgba(104,173,51,.35);
}
.pagination-wrap .page-item.disabled .page-link { color: var(--qc-gray); opacity: .5; }

/* =============================================================
   ARTICLE DETAIL (Trang chi tiết bài viết)
   ============================================================= */
.article { margin-bottom: 10px; }

/* --- Header: tiêu đề + ngày đăng --- */
.article__head { margin-bottom: 24px; }
.article__cat {
    display: inline-block;
    background: rgba(104,173,51,.15);
    color: var(--qc-green-dark);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 4px 12px;
    border-radius: 4px;
    margin-bottom: 14px;
}
.article__title {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--qc-slate);
    margin: 0 0 16px;
}
.article__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    font-size: .85rem;
    color: var(--qc-gray);
    padding-bottom: 20px;
    border-bottom: 1px solid var(--qc-border);
}
.article__meta i { color: var(--qc-green-dark); margin-right: 6px; }

/* --- Ảnh cover --- */
.article__cover { margin: 26px 0; }
.article__cover img { width: 100%; border-radius: 14px; display: block; }
.article__cover-caption {
    font-size: .8rem;
    color: var(--qc-gray);
    text-align: center;
    font-style: italic;
    margin-top: 10px;
}

/* --- Nội dung (rich text) --- */
.article__content { font-size: 1.03rem; line-height: 1.85; color: #334155; }
.article__content > p { margin-bottom: 20px; }
.article__content h2 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--qc-slate);
    margin: 34px 0 16px;
    padding-left: 14px;
    border-left: 4px solid var(--qc-green);
}
.article__content h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--qc-slate);
    margin: 28px 0 12px;
}
.article__content a { color: var(--qc-green-dark); font-weight: 600; text-decoration: underline; }
.article__content a:hover { color: var(--qc-green-neon); }
.article__content img { width: 100%; border-radius: 12px; margin: 10px 0 24px; display: block; }
.article__content strong { color: var(--qc-slate); font-weight: 700; }

/* --- Form đăng ký tư vấn chèn trong bài (dùng lại look của contact box) --- */
.inline-form {
    background: var(--qc-light);
    border: 1px solid var(--qc-border);
    border-radius: 14px;
    padding: 28px 30px;
    margin: 32px 0;
}
.inline-form__title {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--qc-green-dark);
    text-transform: uppercase;
    margin-bottom: 6px;
}
.inline-form__desc { font-size: .9rem; color: var(--qc-gray); margin-bottom: 18px; }
.inline-form .form-control { height: 48px; background: #fff; }
.inline-form .contact__submit { height: 48px; padding: 0 26px; font-weight: 700; white-space: nowrap; }

/* --- Tags + chia sẻ cuối bài --- */
.article__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid var(--qc-border);
}
.article__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.article__tags-label { font-weight: 700; color: var(--qc-slate); font-size: .88rem; margin-right: 2px; }
.tag-pill {
    display: inline-block;
    background: var(--qc-light);
    border: 1px solid var(--qc-border);
    color: var(--qc-gray);
    font-size: .8rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
}
.tag-pill:hover { background: var(--qc-green); border-color: var(--qc-green); color: #fff; }
.article__share { display: flex; align-items: center; gap: 8px; }
.article__share-label { font-weight: 700; color: var(--qc-slate); font-size: .88rem; }
.article__share a {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: var(--qc-light);
    display: flex; align-items: center; justify-content: center;
    color: var(--qc-slate);
    transition: background .2s ease, color .2s ease;
}
.article__share a:hover { background: var(--qc-green); color: #fff; }

/* --- Bài viết liên quan --- */
.related { margin-top: 46px; }

/* =============================================================
   SECTION HEADING (tiêu đề khối căn giữa - dùng cho landing page)
   ============================================================= */
.sec-heading { text-align: center; margin-bottom: 40px; }
.sec-heading.sec-heading-left{
    text-align:left;
}
.sec-heading__title {
    position: relative;
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--qc-slate);
    text-transform: uppercase;
    letter-spacing: .3px;
    margin: 0 0 20px;
    padding-bottom: 16px;
}
.sec-heading__title::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 64px;
    height: 3px;
    background: var(--qc-green);
    border-radius: 3px;
}
.sec-heading-left .sec-heading__title:after{
    left:0;
  transform: none;
}
.sec-heading__desc { font-size: .98rem; color: var(--qc-gray); max-width: 760px; margin: 0 auto; }

/* =============================================================
   INTRO (Giới thiệu giải pháp) + số liệu nổi bật
   ============================================================= */
.intro { padding: 64px 0; }
.intro__lead { font-size: 1.05rem; color: #334155; line-height: 1.85; }
.intro__lead p { margin-bottom: 16px; }
.intro__img { border-radius: 14px; width: 100%; object-fit: cover; }
.intro__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 28px;
}
.intro__stat {
    flex: 1;
    min-width: 130px;
    background: var(--qc-light);
    border: 1px solid var(--qc-border);
    border-radius: 12px;
    padding: 18px;
    text-align: center;
}
.intro__stat-num { font-size: 1.8rem; font-weight: 800; color: var(--qc-green-dark); line-height: 1; }
.intro__stat-label { font-size: .82rem; color: var(--qc-gray); margin-top: 6px; }

/* =============================================================
   NODE PLANS (Các gói Node - 3 cột: thông số, ưu điểm, CTA)
   ============================================================= */
.node-plans { padding: 64px 0; background: var(--qc-light); }

.plan-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--qc-border);
    border-radius: 16px;
    padding: 30px 26px;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow .25s ease, transform .2s ease;
}
.plan-card:hover { box-shadow: 0 16px 36px rgba(15,23,42,.12); transform: translateY(-4px); }
.plan-card__name { font-size: 1.3rem; font-weight: 800; color: var(--qc-slate); margin-bottom: 4px; }
.plan-card__tagline { font-size: .86rem; color: var(--qc-gray); margin-bottom: 20px; }

/* Nhãn nhóm (Thông số / Ưu điểm) */
.plan-card__label { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--qc-gray); margin: 0 0 12px; }
.plan-card__label:not(:first-of-type) { margin-top: 4px; }

/* List (dùng chung cho cả Thông số và Ưu điểm) */
.plan-card__perks { list-style: none; padding: 0; margin: 0 0 22px; }
.plan-card__perks li { position: relative; padding-left: 26px; margin-bottom: 10px; font-size: .9rem; color: #334155; }
.plan-card__perks li::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--qc-green);
    position: absolute;
    left: 0;
    top: 2px;
    font-size: .82rem;
}
.plan-card__cta { margin-top: auto; }

/* =============================================================
   FAQ (accordion - dùng Bootstrap collapse)
   ============================================================= */
.faq { padding: 64px 0; }
.faq__list { max-width: 820px; margin: 0 auto; }
.faq__item {
    background: #fff;
    border: 1px solid var(--qc-border);
    border-radius: 12px;
    margin-bottom: 14px;
    overflow: hidden;
}
.faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 18px 22px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--qc-slate);
    cursor: pointer;
}
.faq__question:hover { color: var(--qc-green-dark); }
.faq__question .faq__icon { color: var(--qc-green-dark); transition: transform .25s ease; flex-shrink: 0; }
.faq__question[aria-expanded="true"] { color: var(--qc-green-dark); }
.faq__question[aria-expanded="true"] .faq__icon { transform: rotate(180deg); }
.faq__answer-inner { padding: 0 22px 20px; font-size: .92rem; color: var(--qc-gray); line-height: 1.75; }

/* =============================================================
   CONTACT PAGE (Trang liên hệ: Thông tin cơ bản + Bản đồ + Form)
   ============================================================= */
.contact-page { padding: 40px 0 50px; }

/* 1) Thông tin cơ bản - hàng thẻ */
.info-card {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--qc-border);
    border-radius: 12px;
    padding: 20px;
    transition: box-shadow .25s ease, transform .2s ease;
}
.info-card:hover { box-shadow: 0 12px 26px rgba(15,23,42,.08); transform: translateY(-3px); }
.info-card__icon {
    flex-shrink: 0;
    width: 46px; height: 46px;
    border-radius: 10px;
    background: rgba(104,173,51,.15);
    color: var(--qc-green-dark);
    font-size: 1.1rem;
    display: flex; align-items: center; justify-content: center;
}
.info-card__label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--qc-gray); margin-bottom: 3px; }
.info-card__value { font-size: 1rem; font-weight: 700; color: var(--qc-slate); line-height: 1.35; word-break: break-word; }
.info-card__value a:hover { color: var(--qc-green-dark); }

/* 2) Bản đồ */
.contact-map {
    height: 100%;
    min-height: 430px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--qc-border);
}
.contact-map iframe { width: 100%; height: 100%; min-height: 430px; border: 0; display: block; }

/* 2) Form liên hệ cơ bản - style riêng: thẻ trắng, field xếp dọc */
.contact-form-card {
    height: 100%;
    background: #fff;
    border: 1px solid var(--qc-border);
    border-radius: 14px;
    padding: 30px 30px 32px;
}
.contact-form-card__title { font-size: 1.3rem; font-weight: 800; color: var(--qc-slate); margin-bottom: 4px; }
.contact-form-card__sub { font-size: .9rem; color: var(--qc-gray); margin-bottom: 22px; }
.contact-form-card .form-control {
    height: 48px;
    border-radius: 10px;
    font-size: .92rem;
    margin-bottom: 14px;
    background: #fff;
}
.contact-form-card textarea.form-control { height: auto; min-height: 112px; resize: vertical; }
.contact-form-card .form-control:focus {
    border-color: var(--qc-green);
    box-shadow: 0 0 0 .2rem rgba(104,173,51,.2);
}
.contact-form-card .btn { height: 50px; font-weight: 700; border-radius: 10px; margin-top: 4px; }

/* =============================================================
   FLOATING CTA (fixed góc phải dưới)
   ============================================================= */
.float-cta {
    position: fixed;
    right: 16px;
    bottom: 20px;
    z-index: 1085;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.float-cta__btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 30px;
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.15;
    box-shadow: 0 6px 18px rgba(15,23,42,.25);
    transition: transform .2s ease, box-shadow .2s ease;
}
.float-cta__btn:hover { transform: translateX(-3px); color: #fff; box-shadow: 0 8px 22px rgba(15,23,42,.35); }
.float-cta__btn i { font-size: 1.05rem; }
.float-cta__btn--zalo { background: #0068ff; }
.float-cta__btn--hotline { background: #16a34a; }
.float-cta__btn--register { background: var(--qc-green); color: #0B1120; }
.float-cta__btn--register:hover { color: #0B1120; }

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 991.98px) {
    .hero__slide { min-height: 460px; }
    .hero__content { max-width: 72%; }
    .hero__title { font-size: 2.1rem; white-space: normal; }   /* cho phép xuống dòng, tránh tràn ngang */
    .contact__box { padding: 28px; }
}

@media (max-width: 767.98px) {
    .header__inner { min-height: 62px; }
    .hero__slide { min-height: 400px; }
    .hero__content { max-width: 100%; }
    .hero__title { font-size: 1.7rem; }
    .hero__desc { font-size: .95rem; }
    .section-head__title { font-size: 1.15rem; }
    .solution__box { padding: 20px; }
    .contact__title { font-size: 1.35rem; }
    /* Feature: xếp dọc lại trên mobile */
    .market-feature { flex-direction: column; }
    .market-feature__thumb { flex: 0 0 auto; max-width: 100%; }
    .market-feature__img { aspect-ratio: 16 / 9; }
    .float-cta__text { display: none; }         /* mobile: chỉ hiện icon tròn */
    .float-cta__btn { width: 48px; height: 48px; justify-content: center; padding: 0; border-radius: 50%; }
    .float-cta__btn i { font-size: 1.2rem; }
    .lang-switcher__current { padding: 8px 9px; }

    /* Post list: xếp dọc (ảnh trên - nội dung dưới) đúng phác thảo mobile */
    .page-head__title { font-size: 1.45rem; }
    .post-item { flex-direction: column; }
    .post-item__thumb { flex: 0 0 auto; max-width: 100%; }
    .post-item__img { aspect-ratio: 16 / 9; }
    .post-item__body { padding: 18px 18px 20px; }
    .post-item__title { font-size: 1.05rem; }

    /* Article detail: thu gọn cho mobile */
    .article__title { font-size: 1.5rem; }
    .article__content { font-size: .98rem; }
    .article__content h2 { font-size: 1.25rem; }
    .inline-form { padding: 22px; }

    /* Trang Hạ tầng Node: thu gọn cho mobile */
    .sec-heading__title { font-size: 1.45rem; }
    .intro, .node-plans, .faq { padding: 44px 0; }
}

/* Tablet trung gian: thu nhỏ ảnh thumbnail cho cân đối */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .post-item__thumb { flex: 0 0 240px; max-width: 240px; }
}