/* Changelog Page Styles — v1.2
   Dùng cho taxonomy-changelog_app.php (changelog của từng sản phẩm) và
   single-changelog.php. Không có trang gộp hai sản phẩm.
   Cùng ngôn ngữ thị giác với integrations.css và comparisons.css: hero tối,
   thân trang nền xám nhạt, thẻ trắng bo 16–24px.

   Mỗi loại thay đổi có một cặp màu riêng để lướt mắt là phân biệt được
   New / Improved / Fixed / Announcement mà không cần đọc chữ. */

:root {
    --log-dark-bg: #070a1d;
    --log-accent: #7bd50c;
    --log-accent-soft: #c0e52b;
    --log-text: #303030;
    --log-text-muted: #616161;
    --log-white: #ffffff;
    --log-light-bg: #f1f1f1;
    --log-border: #e3e3e3;
    --log-trustshop: #ffb700;
    --log-wasend: #25d366;

    --log-new-bg: #eaf6dd;
    --log-new-fg: #3a6b11;
    --log-improved-bg: #e6efff;
    --log-improved-fg: #1d4ed8;
    --log-fixed-bg: #ffefe0;
    --log-fixed-fg: #a8530a;
    --log-announcement-bg: #f1e9fd;
    --log-announcement-fg: #6d28d9;
}

/* =========================================
   SHARED
   ========================================= */
.t1-log-wrap {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 16px;
}

.t1-log-eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--log-accent-soft);
    margin-bottom: 10px;
}

.t1-log-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    padding: 0 28px;
    border-radius: 16px;
    font-family: inherit;
    font-weight: 600;
    font-size: 17px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border: 2px solid transparent;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

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

.t1-log-btn--primary:hover {
    background-color: var(--log-accent-soft);
    border-color: var(--log-accent-soft);
}

.t1-log-btn--ghost {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.28);
    color: var(--log-white);
}

.t1-log-btn--ghost:hover {
    border-color: var(--log-white);
}

/* =========================================
   HERO
   Cố tình thấp hơn hero các trang khác. Đây là trang tra cứu, không phải
   landing page: merchant vào để đọc thay đổi nên bản ghi đầu tiên phải nằm
   trong màn hình đầu, không bị đẩy xuống dưới một khối tiêu đề cao.
   Padding trên phải chừa chỗ cho header (position: fixed khi trong suốt).
   ========================================= */
.t1-log-hero {
    display: flex;
    justify-content: center;
    padding: 138px 16px 40px;
    background: url("../images/whatsapp-marketing/dark-grid-bg.webp") center / cover no-repeat;
    background-color: var(--log-dark-bg);
    border-radius: 0 0 16px 16px;
}

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

.t1-log-hero--single .t1-log-hero__inner {
    text-align: left;
}

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

.t1-log-hero--single .t1-log-crumbs {
    justify-content: flex-start;
}

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

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

.t1-log-hero__title {
    font-weight: 900;
    font-size: 34px;
    line-height: 115%;
    color: var(--log-white);
    margin: 0;
}

.t1-log-hero--single .t1-log-hero__title {
    font-size: 32px;
}

.t1-log-hero__sub {
    font-size: 16.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.66);
    margin: 12px auto 0;
    max-width: 620px;
}

.t1-log-hero--single .t1-log-hero__sub {
    margin-left: 0;
}

.t1-log-hero__meta {
    margin-top: 14px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
}

.t1-log-hero__meta strong {
    color: var(--log-accent-soft);
    font-weight: 700;
}

.t1-log-hero__meta time {
    color: inherit;
}

/* =========================================
   THANH LỌC
   Sản phẩm + loại thay đổi + RSS gộp vào một hàng, dính lại khi cuộn.
   Header của site là position: fixed và co lại còn ~60px sau khi cuộn qua
   50px, nên toolbar dính ngay dưới nó.
   ========================================= */
.t1-log-body {
    padding: 0 0 8px;
    background-color: var(--log-light-bg);
}

.t1-log-toolbar {
    position: sticky;
    /* Header sau khi cuộn cao ~69px; đặt thấp hơn thì mép trên toolbar bị
       header che mất. Đo lại nếu sau này đổi padding/logo của header. */
    top: 70px;
    z-index: 5;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin: 0 -16px;
    padding: 12px 16px;
    /* Nền đục và trùng màu section: dải dính rộng đúng bằng cột nội dung,
       nếu để trong suốt thì hai mép sẽ lộ vệt màu khác. */
    background-color: var(--log-light-bg);
    border-bottom: 1px solid var(--log-border);
}

.t1-log-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-right: auto;
}

.t1-log-chip {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 13px;
    border-radius: 9000px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 500;
    color: var(--log-text-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.t1-log-chip:hover {
    background-color: var(--log-white);
    border-color: var(--log-border);
    color: var(--log-text);
}

.t1-log-chip.is-active {
    background-color: var(--log-dark-bg);
    border-color: var(--log-dark-bg);
    color: var(--log-white);
}

.t1-log-rss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--log-border);
    background-color: var(--log-white);
    color: var(--log-text-muted);
    text-decoration: none;
    transition: color 0.2s, border-color 0.2s;
}

.t1-log-rss:hover {
    color: var(--log-text);
    border-color: var(--log-text);
}

.t1-log-note {
    margin: 16px 0 -8px;
    font-size: 14.5px;
    color: var(--log-text-muted);
}

/* =========================================
   DÒNG THỜI GIAN
   ========================================= */
.t1-log-list {
    position: relative;
    padding: 28px 0 8px;
}

/* Đường dọc nối các bản ghi, canh đúng tâm cột ngày. */
.t1-log-list::before {
    content: "";
    position: absolute;
    top: 40px;
    bottom: 40px;
    left: 154px;
    width: 1px;
    background-color: #d2d2d5;
}

.t1-log-entry {
    position: relative;
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 28px;
}

.t1-log-entry + .t1-log-entry {
    margin-top: 28px;
}

/* Chấm tròn trên đường dọc, ngang hàng với ngày. */
.t1-log-entry::before {
    content: "";
    position: absolute;
    left: 154px;
    top: 22px;
    width: 9px;
    height: 9px;
    margin-left: -4px;
    border-radius: 50%;
    background-color: var(--log-accent);
    box-shadow: 0 0 0 4px var(--log-light-bg);
}

.t1-log-entry__rail {
    text-align: right;
    padding-top: 16px;
}

.t1-log-entry__date {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--log-text);
}

.t1-log-entry__version {
    display: inline-block;
    margin-top: 8px;
    padding: 2px 10px;
    border-radius: 9000px;
    border: 1px solid var(--log-border);
    background-color: var(--log-white);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--log-text-muted);
}

.t1-log-entry__card {
    padding: 26px 30px 22px;
    background-color: var(--log-white);
    border: 1px solid var(--log-border);
    border-radius: 20px;
}

.t1-log-entry__tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.t1-log-entry__tags--hero {
    justify-content: flex-start;
    margin-bottom: 18px;
}

.t1-log-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 11px;
    border-radius: 9000px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
}

.t1-log-badge img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.t1-log-badge--app {
    background-color: #f4f4f5;
    color: var(--log-text);
    border: 1px solid var(--log-border);
}

.t1-log-badge--app:hover {
    border-color: var(--log-text);
}

.t1-log-badge--new {
    background-color: var(--log-new-bg);
    color: var(--log-new-fg);
}

.t1-log-badge--improved {
    background-color: var(--log-improved-bg);
    color: var(--log-improved-fg);
}

.t1-log-badge--fixed {
    background-color: var(--log-fixed-bg);
    color: var(--log-fixed-fg);
}

.t1-log-badge--announcement {
    background-color: var(--log-announcement-bg);
    color: var(--log-announcement-fg);
}

.t1-log-badge--type:hover {
    filter: brightness(0.96);
}

.t1-log-entry__title {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--log-text);
    margin: 0;
}

.t1-log-entry__title a {
    color: inherit;
    text-decoration: none;
}

.t1-log-entry__title a:hover {
    color: #1b1b1b;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.t1-log-entry__media {
    display: block;
    margin-top: 18px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--log-border);
}

.t1-log-entry__media img {
    display: block;
    width: 100%;
    height: auto;
}

.t1-log-entry__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--log-text-muted);
    text-decoration: none;
}

.t1-log-entry__link:hover {
    color: var(--log-text);
}

/* =========================================
   NỘI DUNG BÀI (chung cho thẻ và trang chi tiết)
   ========================================= */
.t1-log-entry__body,
.t1-log-content {
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--log-text-muted);
}

.t1-log-entry__body > *:first-child,
.t1-log-content > *:first-child {
    margin-top: 0;
}

.t1-log-entry__body > *:last-child,
.t1-log-content > *:last-child {
    margin-bottom: 0;
}

.t1-log-entry__body p,
.t1-log-content p {
    margin: 14px 0;
}

.t1-log-entry__body h2,
.t1-log-content h2 {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.35;
    color: var(--log-text);
    margin: 28px 0 10px;
}

.t1-log-entry__body h3,
.t1-log-content h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--log-text);
    margin: 22px 0 8px;
}

/* style.css reset toàn site về list-style: none, nên phải trả lại dấu đầu dòng
   ở đây — bản ghi changelog gần như lúc nào cũng có một danh sách gạch đầu dòng. */
.t1-log-entry__body ul,
.t1-log-entry__body ol,
.t1-log-content ul,
.t1-log-content ol {
    margin: 12px 0;
    padding-left: 22px;
}

/* Phải đặt cả trên <li>: reset của theme nhắm thẳng vào li nên kiểu đặt
   ở <ul> không thừa kế xuống được. */
.t1-log-entry__body ul,
.t1-log-entry__body ul > li,
.t1-log-content ul,
.t1-log-content ul > li {
    list-style: disc outside;
}

.t1-log-entry__body ol,
.t1-log-entry__body ol > li,
.t1-log-content ol,
.t1-log-content ol > li {
    list-style: decimal outside;
}

.t1-log-entry__body li,
.t1-log-content li {
    margin: 6px 0;
    color: var(--log-text-muted);
}

.t1-log-entry__body li::marker,
.t1-log-content li::marker {
    color: #a3a3a3;
}

.t1-log-entry__body a,
.t1-log-content a {
    color: #2f6b12;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.t1-log-entry__body img,
.t1-log-content img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
}

.t1-log-entry__body code,
.t1-log-content code {
    padding: 2px 6px;
    border-radius: 6px;
    background-color: #f4f4f5;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9em;
    color: var(--log-text);
}

/* Trang chi tiết: nội dung nằm trên thẻ trắng riêng. */
.t1-log-content {
    max-width: 760px;
    margin: 0 auto;
    padding: 40px;
    background-color: var(--log-white);
    border: 1px solid var(--log-border);
    border-radius: 24px;
}

.t1-log--single .t1-log-body {
    padding: 48px 0 0;
}

.t1-log-content__media {
    margin: 0 0 24px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--log-border);
}

.t1-log-content__media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
}

/* =========================================
   PHÂN TRANG
   ========================================= */
.t1-log-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 32px 0 8px;
}

.t1-log-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    border-radius: 9000px;
    border: 1px solid var(--log-border);
    background-color: var(--log-white);
    font-size: 15px;
    font-weight: 600;
    color: var(--log-text-muted);
    text-decoration: none;
}

.t1-log-pagination .page-numbers:hover {
    border-color: var(--log-text);
    color: var(--log-text);
}

.t1-log-pagination .page-numbers.current {
    background-color: var(--log-dark-bg);
    border-color: var(--log-dark-bg);
    color: var(--log-white);
}

.t1-log-pagination .page-numbers.dots {
    border-color: transparent;
    background-color: transparent;
}

.t1-log-empty {
    padding: 48px 0 40px;
    text-align: center;
    font-size: 16.5px;
    color: var(--log-text-muted);
}

.t1-log-empty a {
    color: var(--log-text);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* =========================================
   ĐIỀU HƯỚNG BẢN TRƯỚC / BẢN SAU
   ========================================= */
.t1-log-nav {
    padding: 40px 0 0;
    background-color: var(--log-light-bg);
}

.t1-log-nav__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.t1-log-nav__item {
    display: block;
    padding: 20px 24px;
    background-color: var(--log-white);
    border: 1px solid var(--log-border);
    border-radius: 16px;
    text-decoration: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.t1-log-nav__item:hover {
    border-color: var(--log-text);
    box-shadow: 0 12px 28px -20px rgba(7, 10, 29, 0.55);
}

.t1-log-nav__item--right {
    text-align: right;
}

.t1-log-nav__label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--log-text-muted);
    margin-bottom: 6px;
}

.t1-log-nav__title {
    display: block;
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--log-text);
}

/* =========================================
   CTA
   ========================================= */
.t1-log-cta {
    padding: 56px 0 96px;
    background-color: var(--log-light-bg);
}

.t1-log-cta__box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    padding: 40px;
    background-color: var(--log-dark-bg);
    border-radius: 24px;
}

.t1-log-cta__box h2 {
    font-size: 28px;
    font-weight: 800;
    color: var(--log-white);
    margin: 0;
}

.t1-log-cta__box p {
    font-size: 16.5px;
    color: rgba(255, 255, 255, 0.65);
    margin: 8px 0 0;
    max-width: 520px;
}

.t1-log-cta__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* Link sang changelog của sản phẩm còn lại. Cố ý đặt cuối trang và nhỏ:
   hai sản phẩm tách biệt, đây là lối đi phụ chứ không phải bộ lọc. */
.t1-log-crosslink {
    margin: 20px 0 0;
    text-align: center;
    font-size: 15px;
    color: var(--log-text-muted);
}

.t1-log-crosslink a {
    color: var(--log-text);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.t1-log-crosslink a:hover {
    color: #000;
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 860px) {
    .t1-log-list::before,
    .t1-log-entry::before {
        display: none;
    }

    .t1-log-entry {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .t1-log-entry__rail {
        display: flex;
        align-items: center;
        gap: 10px;
        text-align: left;
        padding-top: 0;
    }

    .t1-log-entry__version {
        margin-top: 0;
    }
}

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

    .t1-log-hero__title,
    .t1-log-hero--single .t1-log-hero__title {
        font-size: 26px;
    }

    .t1-log-hero__sub {
        font-size: 15.5px;
    }

    /* Header mobile khi đã cuộn: padding 16px + logo 40px = ~72px. */
    .t1-log-toolbar {
        top: 74px;
        gap: 10px;
        padding: 10px 16px;
    }

    /* Hàng 1: chuyển sản phẩm + RSS. Hàng 2: chip loại, cuộn ngang thay vì
       xuống thêm 2 hàng nữa — toolbar dính nên phải mỏng. */
    /* Chip cuộn ngang thay vì xuống 2–3 hàng — toolbar dính nên phải mỏng.
       max-width chứ không phải flex-shrink: flex quyết định xuống hàng dựa
       trên bề rộng nội dung trước khi co, nên không chặn thì nút RSS bị đẩy
       xuống hàng riêng. 44px = nút RSS + khoảng cách. */
    .t1-log-chips {
        max-width: calc(100% - 44px);
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .t1-log-chips::-webkit-scrollbar {
        display: none;
    }

    .t1-log-chip {
        flex: 0 0 auto;
    }

    .t1-log-entry__card {
        padding: 22px 20px 18px;
    }

    .t1-log-entry__title {
        font-size: 20px;
    }

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

    .t1-log-nav__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .t1-log-nav__item--right {
        text-align: left;
    }

    .t1-log-cta__box {
        padding: 28px;
    }

    .t1-log-cta__box h2 {
        font-size: 22px;
    }

    .t1-log-btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .t1-log-btn,
    .t1-log-chip,
    .t1-log-nav__item {
        transition: none;
    }
}