/* Help Center — v1.0
   Dùng cho archive-help_article.php (hub), taxonomy-help_app.php (tab sản phẩm
   và trang module) và single-help_article.php.

   Cùng ngôn ngữ thị giác với changelog.css: hero tối, thân trang nền xám nhạt,
   thẻ trắng bo 16–24px. Khác một chỗ có chủ ý — hero ở đây thấp hơn, vì trang
   tài liệu là chỗ người ta tới để tìm câu trả lời chứ không phải để đọc khẩu
   hiệu, nên đẩy ô tìm kiếm và danh sách bài lên cao nhất có thể. */

:root {
    --help-dark-bg: #070a1d;
    --help-accent: #7bd50c;
    --help-text: #303030;
    --help-text-muted: #616161;
    --help-white: #ffffff;
    --help-light-bg: #f1f1f1;
    --help-border: #e3e3e3;
}

.t1-help {
    background: var(--help-light-bg);
}

/* =========================================
   HERO + BREADCRUMB
   ========================================= */
.t1-help-hero {
    display: flex;
    justify-content: center;
    padding: 138px 16px 44px;
    background: url("../images/whatsapp-marketing/dark-grid-bg.webp") center / cover no-repeat;
    background-color: var(--help-dark-bg);
    border-radius: 0 0 16px 16px;
}

.t1-help-hero--compact,
.t1-help-hero--article {
    padding-bottom: 36px;
}

.t1-help-hero__inner {
    width: 100%;
    max-width: 720px;
    text-align: center;
}

.t1-help-hero--article .t1-help-hero__inner {
    max-width: 1180px;
    text-align: left;
}

.t1-help-crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 14px;
}

.t1-help-hero--article .t1-help-crumbs {
    justify-content: flex-start;
}

.t1-help-crumbs a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
}

.t1-help-crumbs a:hover {
    color: var(--help-accent);
}

.t1-help-hero__title {
    margin: 0 0 10px;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--help-white);
}

.t1-help-hero__sub {
    margin: 0 auto;
    max-width: 600px;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
}

.t1-help-hero--article .t1-help-hero__sub {
    margin-left: 0;
}

.t1-help-hero__meta {
    margin: 8px 0 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
}

/* =========================================
   Ô TÌM KIẾM
   Dropdown định vị tuyệt đối so với khối bọc, nên khối bọc phải là
   position: relative và phải nằm trên mọi thứ phía dưới.
   ========================================= */
.t1-help-search {
    position: relative;
    z-index: 5;
    max-width: 560px;
    margin: 24px auto 0;
    text-align: left;
}

.t1-help-hero--article .t1-help-search {
    margin-left: 0;
}

.t1-help-search__form {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 18px;
    background: var(--help-white);
    border-radius: 14px;
    border: 1px solid transparent;
}

.t1-help-search__form:focus-within {
    border-color: var(--help-accent);
}

.t1-help-search__icon {
    flex: 0 0 auto;
    color: var(--help-text-muted);
}

.t1-help-search__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    color: var(--help-text);
}

.t1-help-search__results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    max-height: 60vh;
    overflow-y: auto;
    padding: 8px;
    background: var(--help-white);
    border: 1px solid var(--help-border);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(7, 10, 29, 0.18);
}

.t1-help-search__result {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
}

.t1-help-search__result:hover {
    background: var(--help-light-bg);
}

.t1-help-search__result-title {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--help-text);
}

.t1-help-search__result-path {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    color: var(--help-text-muted);
}

.t1-help-search__empty {
    margin: 0;
    padding: 12px;
    font-size: 14px;
    color: var(--help-text-muted);
}

/* =========================================
   TAB SẢN PHẨM
   ========================================= */
.t1-help-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    max-width: 1180px;
    margin: 28px auto 0;
    padding: 6px;
    background: var(--help-white);
    border: 1px solid var(--help-border);
    border-radius: 16px;
    width: fit-content;
}

.t1-help-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--help-text-muted);
    text-decoration: none;
}

.t1-help-tabs__tab:hover {
    background: var(--help-light-bg);
    color: var(--help-text);
}

.t1-help-tabs__tab.is-active {
    background: var(--help-dark-bg);
    color: var(--help-white);
}

.t1-help-tabs__tab img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* =========================================
   HUB — THẺ SẢN PHẨM
   ========================================= */
.t1-help-apps__inner,
.t1-help-recent__inner,
.t1-help-groups__inner,
.t1-help-group__inner {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 16px 0;
}

.t1-help-apps__inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.t1-help-app-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
    background: var(--help-white);
    border: 1px solid var(--help-border);
    border-radius: 20px;
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.t1-help-app-card:hover {
    border-color: var(--help-accent);
    transform: translateY(-2px);
}

.t1-help-app-card__logo {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.t1-help-app-card__text {
    flex: 1 1 auto;
    min-width: 0;
}

.t1-help-app-card__name {
    display: block;
    font-size: 19px;
    font-weight: 700;
    color: var(--help-text);
}

.t1-help-app-card__product {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    color: var(--help-text-muted);
}

.t1-help-app-card__blurb {
    margin: 10px 0 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--help-text-muted);
}

.t1-help-app-card__meta {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--help-text-muted);
    white-space: nowrap;
}

/* =========================================
   DANH SÁCH MODULE
   ========================================= */
.t1-help-groups__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.t1-help-group-card {
    display: block;
    padding: 22px 24px;
    background: var(--help-white);
    border: 1px solid var(--help-border);
    border-radius: 18px;
    text-decoration: none;
    transition: border-color 0.15s ease;
}

.t1-help-group-card:hover {
    border-color: var(--help-accent);
}

.t1-help-group-card__name {
    display: block;
    font-size: 17px;
    font-weight: 700;
    color: var(--help-text);
}

.t1-help-group-card__blurb {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--help-text-muted);
}

.t1-help-group-card__count {
    display: inline-block;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--help-text-muted);
}

/* Nhóm chưa có tài liệu — tách hẳn ra, không xếp lẫn với nhóm đã có bài. */
.t1-help-pending {
    margin-top: 32px;
    padding: 24px;
    background: transparent;
    border: 1px dashed var(--help-border);
    border-radius: 18px;
}

.t1-help-pending__title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
    color: var(--help-text);
}

.t1-help-pending__text {
    margin: 0 0 14px;
    font-size: 14px;
    color: var(--help-text-muted);
}

.t1-help-pending__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.t1-help-pending__list li {
    font-size: 14px;
    color: var(--help-text-muted);
}

.t1-help-pending__list strong {
    display: block;
    color: var(--help-text);
    font-weight: 600;
}

/* =========================================
   DANH SÁCH BÀI
   ========================================= */
.t1-help-section {
    margin-bottom: 32px;
}

.t1-help-section__title,
.t1-help-recent__title {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 700;
    color: var(--help-text);
}

.t1-help-list {
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--help-white);
    border: 1px solid var(--help-border);
    border-radius: 18px;
    overflow: hidden;
}

.t1-help-item + .t1-help-item {
    border-top: 1px solid var(--help-border);
}

.t1-help-item__link {
    display: block;
    padding: 16px 22px;
    text-decoration: none;
}

.t1-help-item__link:hover {
    background: var(--help-light-bg);
}

.t1-help-item__title {
    display: block;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--help-text);
}

.t1-help-item__excerpt {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--help-text-muted);
}

.t1-help-item__group {
    display: inline-block;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--help-text-muted);
}

.t1-help-empty {
    padding: 28px;
    background: var(--help-white);
    border: 1px solid var(--help-border);
    border-radius: 18px;
    font-size: 15px;
    color: var(--help-text-muted);
}

/* =========================================
   TRANG BÀI VIẾT
   ========================================= */
.t1-help-body__inner {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 260px;
    gap: 40px;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 40px 16px 0;
    align-items: start;
}

.t1-help-toc,
.t1-help-siblings {
    position: sticky;
    top: 96px;
}

.t1-help-toc__title,
.t1-help-siblings__title {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--help-text-muted);
}

.t1-help-siblings__title a {
    color: inherit;
    text-decoration: none;
}

.t1-help-toc__links {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-left: 2px solid var(--help-border);
}

.t1-help-toc__link {
    padding: 6px 0 6px 14px;
    margin-left: -2px;
    border-left: 2px solid transparent;
    font-size: 14px;
    line-height: 1.45;
    color: var(--help-text-muted);
    text-decoration: none;
}

.t1-help-toc__link--h3 {
    padding-left: 26px;
    font-size: 13.5px;
}

.t1-help-toc__link:hover,
.t1-help-toc__link.is-active {
    color: var(--help-text);
    border-left-color: var(--help-accent);
}

.t1-help-content {
    padding: 32px 36px;
    background: var(--help-white);
    border: 1px solid var(--help-border);
    border-radius: 20px;
    font-size: 16px;
    line-height: 1.75;
    color: var(--help-text);
}

.t1-help-content h2 {
    margin: 32px 0 12px;
    font-size: 22px;
    font-weight: 700;
    scroll-margin-top: 96px;
}

.t1-help-content h3 {
    margin: 26px 0 10px;
    font-size: 18px;
    font-weight: 700;
    scroll-margin-top: 96px;
}

.t1-help-content > *:first-child {
    margin-top: 0;
}

.t1-help-content p {
    margin: 0 0 16px;
}

.t1-help-content ul,
.t1-help-content ol {
    margin: 0 0 16px;
    padding-left: 22px;
}

.t1-help-content li {
    margin-bottom: 6px;
}

.t1-help-content a {
    color: #1d4ed8;
    text-decoration: underline;
}

/* Ảnh chụp màn hình là phần lớn nội dung tài liệu — cho khung nhẹ để tách
   khỏi nền trắng của bài, nếu không ảnh giao diện sáng sẽ trôi vào nền. */
.t1-help-content figure {
    margin: 20px 0;
}

.t1-help-content img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--help-border);
    border-radius: 12px;
}

.t1-help-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 16px;
    font-size: 15px;
}

.t1-help-content th,
.t1-help-content td {
    padding: 10px 12px;
    border: 1px solid var(--help-border);
    text-align: left;
}

.t1-help-content code {
    padding: 2px 6px;
    background: var(--help-light-bg);
    border-radius: 6px;
    font-size: 14px;
}

.t1-help-siblings__list {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.t1-help-siblings__list li + li {
    margin-top: 8px;
}

.t1-help-siblings__list a {
    font-size: 14px;
    line-height: 1.5;
    color: var(--help-text-muted);
    text-decoration: none;
}

.t1-help-siblings__list a:hover {
    color: var(--help-text);
}

.t1-help-siblings__support {
    padding-top: 16px;
    border-top: 1px solid var(--help-border);
    font-size: 14px;
    color: var(--help-text-muted);
}

.t1-help-siblings__support p {
    margin: 0 0 4px;
}

.t1-help-siblings__support a {
    color: #1d4ed8;
    text-decoration: none;
}

/* =========================================
   KHỐI HỖ TRỢ CUỐI TRANG
   ========================================= */
.t1-help-support {
    display: flex;
    justify-content: center;
    padding: 56px 16px 64px;
}

.t1-help-support__inner {
    width: 100%;
    max-width: 1000px;
    padding: 36px;
    background: var(--help-white);
    border: 1px solid var(--help-border);
    border-radius: 20px;
    text-align: center;
}

.t1-help-support__title {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 700;
    color: var(--help-text);
}

.t1-help-support__text {
    margin: 0 0 20px;
    font-size: 15px;
    color: var(--help-text-muted);
}

.t1-help-support__actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.t1-help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 26px;
    border: 1px solid var(--help-border);
    border-radius: 14px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--help-text);
    text-decoration: none;
}

.t1-help-btn:hover {
    border-color: var(--help-text-muted);
}

.t1-help-btn--primary {
    background: var(--help-dark-bg);
    border-color: var(--help-dark-bg);
    color: var(--help-white);
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 1024px) {
    .t1-help-body__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    /* Mục lục và danh sách bài cùng module dính trên đỉnh chỉ có nghĩa khi
       chúng nằm cạnh nội dung. Xuống một cột thì bỏ sticky, nếu không chúng
       chiếm mất màn hình. */
    .t1-help-toc,
    .t1-help-siblings {
        position: static;
    }

    .t1-help-toc {
        order: -1;
        padding: 20px;
        background: var(--help-white);
        border: 1px solid var(--help-border);
        border-radius: 16px;
    }
}

@media (max-width: 768px) {
    .t1-help-hero {
        padding: 116px 16px 32px;
    }

    .t1-help-hero__title {
        font-size: 27px;
    }

    .t1-help-apps__inner,
    .t1-help-groups__grid,
    .t1-help-pending__list {
        grid-template-columns: minmax(0, 1fr);
    }

    .t1-help-app-card {
        flex-wrap: wrap;
    }

    .t1-help-tabs {
        width: auto;
        margin: 24px 16px 0;
    }

    .t1-help-content {
        padding: 24px 20px;
    }

    .t1-help-support__inner {
        padding: 28px 20px;
    }
}