/* ============================================================================
   Synctrack redesign 2026 — header + footer dùng chung toàn site.
   Token lấy từ bản export Figma (css/meganav.css, sinh từ Figma Variables).
   Bản export gốc cố định 1440px và không có media query nào; phần dưới đây
   dựng lại theo đúng thiết kế nhưng responsive thật.
   Prefix .sr- để không đụng CSS cũ trong ent-shared.css.
   ========================================================================== */

:root {
    /* Brand */
    --sr-purple-100: rgb(233, 227, 255);
    --sr-purple-200: rgb(212, 190, 255);
    --sr-purple-300: rgb(171, 127, 233);
    --sr-purple-400: rgb(143, 61, 228);
    --sr-purple-500: rgb(130, 72, 166);
    --sr-purple-700: rgb(86, 41, 114);
    --sr-navy-900: rgb(26, 55, 89);
    --sr-blue-500: rgb(45, 104, 173);
    --sr-sky-200: rgb(145, 216, 255);

    /* Neutral */
    --sr-neutral-0: rgb(255, 255, 255);
    --sr-neutral-50: rgb(246, 246, 246);
    --sr-neutral-100: rgb(239, 239, 239);
    --sr-neutral-300: rgb(204, 204, 204);
    --sr-neutral-500: rgb(115, 115, 115);
    --sr-neutral-700: rgb(61, 61, 61);
    --sr-neutral-900: rgb(18, 18, 18);

    /* Typography — Golos Text cho header/menu/CTA/footer, Manrope dự phòng */
    --sr-font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        'Helvetica Neue', Arial, sans-serif;
    --sr-font-menu: 'Golos Text', 'Manrope', -apple-system, BlinkMacSystemFont,
        'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* Layout: 1440px trừ padding 160px hai bên = 1120px nội dung */
    --sr-container: 1120px;
    --sr-gutter: 24px;
    --sr-header-h: 90px;

    --sr-radius: 4px;
    --sr-shadow-panel: 0 8px 40px 0 rgba(0, 0, 0, 0.1);
}

/* ============================== HEADER ==================================== */

.sr-header {
    position: relative;
    z-index: 80;
    background: var(--sr-neutral-0);
    border-bottom: 1px solid var(--sr-neutral-100);
    font-family: var(--sr-font);
    /* main.css có .header { height: 84px; padding-block: 20px } cho markup cũ.
       Element mới vẫn mang class .header (giữ sticky) nên dính cả hai: vùng nội
       dung chỉ còn 44px trong khi .sr-header__inner cao 90px -> nội dung bị đẩy
       xuống và tràn khỏi đáy. Trả về auto để .sr-header__inner tự định chiều cao. */
    height: auto;
    min-height: 0;
    padding-block: 0;
    margin: 0;
    overflow: visible;
}

.sr-header__inner {
    max-width: var(--sr-container);
    margin: 0 auto;
    padding: 0 var(--sr-gutter);
    height: var(--sr-header-h);
    display: flex;
    align-items: center;
    gap: 40px;
}

.sr-logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
    line-height: 0;
}

/* Logo lockup 240x54 -> hiển thị 178x40, cân với header 90px */
.sr-logo__full {
    display: block;
    width: 178px;
    height: 40px;
    object-fit: contain;
}

/* Bản chỉ mascot, chỉ dùng ở màn hình hẹp */
.sr-logo__icon {
    display: none;
    width: 36px;
    height: 36px;
    object-fit: contain;
}

/* Khối menu bọc cả thanh nav lẫn nút CTA — xem ghi chú trong header.php.
   Desktop: một hàng ngang, nav rồi tới nút. */
.sr-header__menu {
    display: flex;
    align-items: center;
}

/* --- thanh menu chính --- */
.sr-nav {
    display: flex;
    align-items: center;
    gap: 40px;
    margin: 0;
    padding: 0;
    list-style: none;
    /* Đẩy cụm menu + CTA sang phải, tách khỏi logo */
    margin-left: auto;
    flex: 0 1 auto;
}

.sr-nav > li {
    position: relative;
}

.sr-nav > li > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--sr-header-h);
    text-decoration: none;
    color: var(--sr-neutral-900);
    font-family: var(--sr-font-menu);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color 0.15s ease;
}

.sr-nav > li > a:hover,
.sr-nav > li:hover > a {
    color: var(--sr-purple-700);
}

/* Mũi tên cho mục có submenu */
.sr-nav .menu-item-has-children > a::after {
    content: '';
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    opacity: 0.6;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.sr-nav > li.menu-item-has-children:hover > a::after {
    opacity: 1;
    transform: rotate(-135deg) translate(-2px, -2px);
}

/* --- mega panel: full-width, đổ xuống dưới header --- */
.sr-nav > li > .sub-menu {
    display: none;
    position: absolute;
    top: var(--sr-header-h);
    left: 50%;
    transform: translateX(-50%);
    min-width: 260px;
    margin: 0;
    padding: 16px 0;
    list-style: none;
    background: var(--sr-neutral-0);
    border: 1px solid var(--sr-neutral-100);
    border-radius: 8px;
    box-shadow: var(--sr-shadow-panel);
    z-index: 60;
}

.sr-nav > li:hover > .sub-menu {
    display: block;
}

/* Cầu nối chuột giữa menu và panel — tránh panel đóng khi rê qua khe hở */
.sr-nav > li.menu-item-has-children::after {
    content: '';
    position: absolute;
    top: 100%;
    left: -24px;
    right: -24px;
    height: 16px;
}

.sr-nav .sub-menu li {
    position: relative;
}

.sr-nav .sub-menu a {
    display: block;
    padding: 10px 24px;
    text-decoration: none;
    color: var(--sr-neutral-700);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

.sr-nav .sub-menu a:hover {
    background: var(--sr-purple-100);
    color: var(--sr-purple-700);
}

/* Submenu cấp 3 bay sang phải */
.sr-nav .sub-menu .sub-menu {
    display: none;
    position: absolute;
    top: -16px;
    left: 100%;
    min-width: 260px;
    margin: 0;
    padding: 16px 0;
    list-style: none;
    background: var(--sr-neutral-0);
    border: 1px solid var(--sr-neutral-100);
    border-radius: 8px;
    box-shadow: var(--sr-shadow-panel);
}

.sr-nav .sub-menu li:hover > .sub-menu {
    display: block;
}

.sr-nav .sub-menu .menu-item-has-children > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sr-nav .sub-menu .menu-item-has-children > a::after {
    content: '';
    flex: none;
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    opacity: 0.6;
}

/* --- CTA --- */
.sr-cta {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 40px;
    padding: 15px 28px;
    border-radius: var(--sr-radius);
    background: var(--sr-purple-700);
    color: var(--sr-neutral-0);
    font-family: var(--sr-font-menu);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid var(--sr-purple-700);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.sr-cta:hover {
    background: var(--sr-purple-500);
    border-color: var(--sr-purple-500);
    color: var(--sr-neutral-0);
}

/* --- nút hamburger --- */
.sr-burger {
    display: none;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--sr-neutral-100);
    border-radius: var(--sr-radius);
    background: var(--sr-neutral-0);
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

.sr-burger span {
    position: relative;
    display: block;
    width: 18px;
    height: 2px;
    background: var(--sr-neutral-900);
    transition: background 0.15s ease;
}

.sr-burger span::before,
.sr-burger span::after {
    content: '';
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    background: var(--sr-neutral-900);
    transition: transform 0.2s ease;
}

.sr-burger span::before {
    top: -6px;
}

.sr-burger span::after {
    top: 6px;
}

.sr-header.is-open .sr-burger span {
    background: transparent;
}

.sr-header.is-open .sr-burger span::before {
    transform: translateY(6px) rotate(45deg);
}

.sr-header.is-open .sr-burger span::after {
    transform: translateY(-6px) rotate(-45deg);
}

/* ============================== FOOTER ==================================== */

.sr-footer {
    background: var(--sr-neutral-0);
    border-top: 1px solid var(--sr-neutral-100);
    font-family: var(--sr-font-menu);
    color: var(--sr-neutral-700);
}

/* Áp cho cả khối form đăng ký (nội dung ACF) và mọi phần tử con để không bị
   font mặc định của theme cũ ghi đè. */
.sr-footer,
.sr-footer h1,
.sr-footer h2,
.sr-footer h3,
.sr-footer h4,
.sr-footer p,
.sr-footer a,
.sr-footer span,
.sr-footer div,
.sr-footer li,
.sr-footer label,
.sr-footer input,
.sr-footer button {
    font-family: var(--sr-font-menu);
}

.sr-footer__inner {
    max-width: var(--sr-container);
    margin: 0 auto;
    padding: 56px var(--sr-gutter) 40px;
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) repeat(3, 1fr);
    gap: 40px 32px;
}

.sr-footer__brand .sr-logo {
    margin-bottom: 16px;
}

.sr-footer__tagline {
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--sr-neutral-500);
    max-width: 34ch;
}

.sr-footer__social {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sr-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--sr-purple-100);
    color: var(--sr-purple-700);
    text-decoration: none;
    transition: background 0.15s ease;
}

.sr-footer__social a:hover {
    background: var(--sr-purple-200);
}

.sr-footer__social img {
    width: 16px;
    height: 16px;
    display: block;
}

.sr-footer__col h3 {
    margin: 0 0 16px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: var(--sr-neutral-900);
    text-transform: none;
}

.sr-footer__col ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sr-footer__col a {
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--sr-neutral-500);
    transition: color 0.15s ease;
}

.sr-footer__col a:hover {
    color: var(--sr-purple-700);
}

.sr-footer__bar {
    border-top: 1px solid var(--sr-neutral-100);
}

.sr-footer__bar-inner {
    max-width: var(--sr-container);
    margin: 0 auto;
    padding: 24px var(--sr-gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 14px;
    font-weight: 400;
    color: var(--sr-neutral-700);
}

.sr-footer__legal {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.sr-footer__legal a {
    text-decoration: none;
    color: var(--sr-neutral-500);
    transition: color 0.15s ease;
}

.sr-footer__legal a:hover {
    color: var(--sr-purple-700);
}

/* ============================ RESPONSIVE ================================= */

@media (max-width: 1024px) {
    :root {
        --sr-header-h: 72px;
    }

    .sr-burger {
        display: inline-flex;
        margin-left: auto;
    }

    .sr-header__inner {
        gap: 16px;
        flex-wrap: wrap;
    }

    /* Menu chuyển thành panel dọc, cuộn được khi dài.
       PHẢI tự mang nền: panel là hàng wrap thứ hai của .sr-header__inner, mà
       .sr-header__inner bị ghim height cố định 72px, nên panel nằm TRÀN RA
       NGOÀI hộp .sr-header — nền trắng của header chỉ phủ đúng hộp đó. Không
       có nền riêng thì menu trong suốt, chữ menu chồng lên chữ trang. */
    .sr-header__menu {
        display: none;
        order: 3;
        width: 100%;
        max-height: calc(100vh - var(--sr-header-h));
        max-height: calc(100dvh - var(--sr-header-h));
        overflow-y: auto;
        overscroll-behavior: contain;
        border-top: 1px solid var(--sr-neutral-100);
        /* Đệm ngang để chữ không dán vào mép tấm nền trắng */
        padding: 0 16px 16px;
        background: var(--sr-neutral-0);
        box-shadow: var(--sr-shadow-panel);
    }

    .sr-header.is-open .sr-header__menu {
        /* block, không flex: mobile xổ dọc — nav rồi tới nút CTA bên dưới */
        display: block;
    }

    .sr-nav {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    /* display: flex (không phải inline-flex như desktop) để mỗi mục chiếm trọn
       bề ngang: đường kẻ dưới mới kéo hết hàng và mũi tên mới dạt về mép phải
       — justify-content: space-between vốn vô nghĩa khi thẻ chỉ rộng bằng chữ. */
    .sr-nav > li > a {
        display: flex;
        height: auto;
        padding: 14px 0;
        font-size: 16px;
        justify-content: space-between;
        border-bottom: 1px solid var(--sr-neutral-50);
    }

    /* Trên mobile submenu xổ dọc trong luồng, không phải panel nổi.
       Nền xám nhạt để tách khỏi menu cấp 1 — trước đây để transparent nên
       nhìn không ra đâu là mục con. */
    .sr-nav > li > .sub-menu,
    .sr-nav .sub-menu .sub-menu {
        position: static;
        transform: none;
        display: none;
        min-width: 0;
        width: 100%;
        border: 0;
        border-radius: 8px;
        box-shadow: none;
        margin: 4px 0 8px;
        padding: 8px 12px;
        background: var(--sr-neutral-50);
    }

    .sr-nav li.is-open > .sub-menu {
        display: block;
    }

    /* Hover không mở submenu trên mobile — chỉ mở bằng chạm (class .is-open) */
    .sr-nav > li:hover > .sub-menu,
    .sr-nav .sub-menu li:hover > .sub-menu {
        display: none;
    }

    .sr-nav li.is-open > .sub-menu {
        display: block;
    }

    .sr-nav .sub-menu a {
        padding: 10px 0;
        font-size: 15px;
    }

    .sr-nav .sub-menu a:hover {
        background: transparent;
    }

    .sr-nav > li.is-open > a::after {
        transform: rotate(-135deg) translate(-2px, -2px);
        opacity: 1;
    }

    /* Nút CTA nằm trong panel menu, chiếm trọn bề ngang ở cuối danh sách.
       Trước đây nó đứng riêng trên thanh header, chen chỗ với hamburger. */
    .sr-cta {
        display: flex;
        justify-content: center;
        width: 100%;
        margin: 16px 0 0;
        padding: 16px 24px;
    }

    .sr-footer__inner {
        grid-template-columns: 1fr 1fr;
        gap: 32px 24px;
        padding-top: 40px;
    }

    .sr-footer__brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    :root {
        --sr-gutter: 16px;
    }

    /* Màn hẹp: đổi sang mascot để chừa chỗ cho CTA và hamburger */
    .sr-logo__full {
        display: none;
    }

    .sr-logo__icon {
        display: block;
    }

    /* Giữ đệm rộng của nút trong panel; chỉ hạ cỡ chữ cho màn hẹp */
    .sr-cta {
        font-size: 12px;
    }

    .sr-footer__inner {
        grid-template-columns: 1fr;
    }

    .sr-footer__tagline {
        max-width: none;
    }

    .sr-footer__bar-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ===================== GHI DE CSS CU (ent-shared.css) ====================== */
/* Element header mới vẫn mang class .header để giữ hành vi sticky khi cuộn
   (changeUiHeaderWhenScroll thêm .visible vào .header). Nhưng vài rule cũ dành
   cho markup cũ lại phá menu mới — vô hiệu hoá đúng những rule đó. */

@media (max-width: 1024px) {
    /* ent-shared.css: .header { overflow: hidden !important } — sẽ cắt mất
       panel menu mobile. Menu mới tự cuộn trong .sr-header__menu. */
    .sr-header {
        overflow: visible !important;
        /* main.css @media(<=992px): .header { max-height: calc(100vh - 3rem);
           padding-block: 20px } — dành cho markup cũ, bỏ luôn. */
        max-height: none;
        padding-block: 0;
    }

    /* Rule .header.mobile-menu-open (giới hạn chiều cao + cuộn) dành cho markup
       cũ; menu mới không dùng class đó nữa. */
    .sr-header.mobile-menu-open {
        max-height: none;
        overflow-y: visible !important;
    }
}

/* --- Giữ nguyên màu header khi cuộn trang ---
   JS (changeUiHeaderWhenScroll) thêm class .visible vào .header. main.css có:
       .header.visible { background-color: var(--green-normal-color) }
       .header.visible .link { color: var(--white) }
   Đó là thiết kế cũ: header đổi sang nền xanh, chữ trắng. Header mới giữ
   nguyên nền trắng ở mọi trạng thái. */
.sr-header.visible {
    background: var(--sr-neutral-0) !important;
    /* main.css xoá viền dưới khi cuộn (border-bottom: none) — giữ lại, kèm bóng
       nhẹ để tách header khỏi nội dung khi nó dính lên đầu trang. */
    border-bottom: 1px solid var(--sr-neutral-100) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    top: 0;
    left: 0;
}

.sr-header.visible .sr-nav > li > a,
.sr-header.visible .sr-logo {
    color: rgb(0, 0, 0);
}

.sr-header.visible .sr-nav > li > a:hover,
.sr-header.visible .sr-nav > li:hover > a {
    color: var(--sr-purple-700);
}

.sr-header.visible .sr-cta {
    color: var(--sr-neutral-0);
}

/* --- Chặn rò rỉ từ .sub-menu của markup cũ ---
   main.css có .sub-menu { position:fixed; opacity:0; visibility:hidden;
   top:38px; padding-block:40px } cho mega panel cũ. Class .sub-menu do
   WordPress tự sinh cho submenu nên dropdown mới trúng luôn các rule đó:
   display:block có ăn nhưng opacity/visibility vẫn ẩn -> hover không thấy gì. */
.sr-nav .sub-menu {
    opacity: 1;
    visibility: visible;
    transition: none;
    width: auto;
    text-align: left;
    font-size: inherit;
}

/* --- Panel Products: logo + tên sản phẩm --- */
.sr-nav__products > .sub-menu {
    min-width: 300px;
}

.sr-nav__products .sub-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
}

.sr-nav__icon {
    flex: none;
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 4px;
}

/* Footer có đủ chiều ngang nên luôn dùng lockup đầy đủ */
.sr-footer .sr-logo__full {
    display: block;
}

.sr-footer__brand .sr-logo {
    margin-bottom: 16px;
}

/* --- Danh sách submenu ---
   Golos Text nhưng giữ chữ thường: danh sách dài (Free Tools 8 mục, tên sản
   phẩm dài), viết hoa hết sẽ khó đọc và làm panel rộng thêm nhiều. */
.sr-nav .sub-menu {
    padding: 8px 0;
}

.sr-nav .sub-menu li {
    /* ent-shared.css có .ent-sub-menu li { padding-bottom: 15px } cho menu cũ;
       ở đây khoảng cách do padding của thẻ a quyết định để nền hover liền mạch. */
    padding: 0;
    margin: 0;
}

.sr-nav .sub-menu a {
    /* display:block đã tự phủ hết chiều ngang của <li>.
       KHÔNG dùng width:100%: <ul> là shrink-to-fit nên nó co theo bề rộng chữ,
       rồi width:100% ép <a> đúng bằng bề rộng đó và padding 24px x2 ăn vào bên
       trong (box-sizing: border-box) -> tên sản phẩm dài tràn ra khỏi vùng nền. */
    display: block;
    box-sizing: border-box;
    padding: 11px 24px;
    font-family: var(--sr-font-menu);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    color: var(--sr-neutral-700);
    border-radius: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

.sr-nav .sub-menu a:hover,
.sr-nav .sub-menu a:focus-visible {
    background: var(--sr-purple-100);
    color: var(--sr-purple-700);
}

/* Mục đang mở submenu con cũng sáng lên để biết đang ở nhánh nào */
.sr-nav .sub-menu li:hover > a {
    background: var(--sr-purple-100);
    color: var(--sr-purple-700);
}

/* Panel Products: giữ flex cho logo + tên, vẫn phủ hết chiều ngang */
.sr-nav__products .sub-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 24px;
}

/* Mũi tên submenu nhỏ lại cho cân với chữ hoa 14px */
.sr-nav > li.menu-item-has-children > a::after {
    width: 5px;
    height: 5px;
    border-width: 1.5px;
    margin-left: 2px;
}

/* Panel co theo tên dài nhất; nowrap để không xuống dòng giữa tên sản phẩm.
   max-width chặn trường hợp menu item có nhãn quá dài làm panel tràn màn hình. */
.sr-nav .sub-menu {
    width: max-content;
    max-width: min(420px, calc(100vw - 32px));
}

.sr-nav .sub-menu a {
    white-space: nowrap;
}

/* Nếu vượt max-width thì cho xuống dòng thay vì tràn ra ngoài nền */
.sr-nav .sub-menu a:has(> span),
.sr-nav__products .sub-menu a {
    white-space: normal;
}

.sr-nav__products .sub-menu a > span {
    flex: 1 1 auto;
    min-width: 0;
}