/*
 * LamNetAnh — Apple Product Clarity
 * One visual owner for the public shell, content templates and editorial UI.
 */

:root {
    --paper: #f5f5f7;
    --paper-deep: #e8e8ed;
    --surface: #ffffff;
    --surface-strong: #ffffff;
    --ink: #1d1d1f;
    --ink-soft: #424245;
    --muted: #6e6e73;
    --line: #d2d2d7;
    --line-strong: #a1a1a6;
    --control-line: #86868b;
    --signal: #0066cc;
    --signal-hover: #004f9e;
    --signal-soft: #e8f2ff;
    --proof: #248a3d;
    --warning: #b54708;
    --danger: #d70015;
    --dark: #000000;
    --dark-surface: #161617;
    --dark-line: #3a3a3c;
    --dark-text: #f5f5f7;
    --dark-muted: #a1a1a6;
    --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
    --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
    --font-accent: var(--font-body);
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 28px;
    --shadow-float: 0 18px 50px rgb(0 0 0 / 9%);
    --focus: #0066cc;
    /* Nhịp chữ trong vùng nội dung, một nguồn cho mọi template. Trên heading rộng, dưới heading hẹp hơn khoảng giữa
     * hai đoạn, để heading đi liền với khối của nó. Kiểm bằng tests/content-rhythm-check.mjs. */
    --flow: 1.25em;
    --flow-media: 1.75rem;
    --flow-h2: clamp(2.75rem, 5vw, 3.5rem);
    --flow-h3: 2rem;
    --flow-h4: 1.5rem;
    --flow-after-h2: 1rem;
    --flow-after-h3: 0.75rem;
    --flow-caption: 0.625rem;
    --tap-min: 44px;  /* vùng bấm tối thiểu cho link, nút đứng riêng (14/10/2026) */
}

html {
    scroll-padding-top: 76px;
}

body {
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body.admin-bar .site-header { inset-block-start: 32px; }

img,
svg,
canvas { max-inline-size: 100%; }

img { block-size: auto; }

a {
    color: inherit;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
}

button,
input,
select,
textarea { font: inherit; }

button,
a { touch-action: manipulation; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

::selection {
    background: #b9dcff;
    color: var(--ink);
}

/* Khung trang: token ở layers.css (--container-wide / --container / --container-narrow, lề --gutter). */
.container {
    inline-size: min(calc(100% - 2 * var(--gutter)), var(--container-wide));
    margin-inline: auto;
}

.container--narrow { max-inline-size: var(--container-narrow); }
.container--tool { max-inline-size: var(--container-wide); }
.container--post-wrapper { max-inline-size: var(--container); }
.container--inner-reset { inline-size: 100%; }

.screen-reader-text,
.visually-hidden {
    position: absolute !important;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

.screen-reader-text:focus,
.skip-link:focus {
    clip: auto;
    clip-path: none;
    inline-size: auto;
    block-size: auto;
    inset-block-start: 10px;
    inset-inline-start: 10px;
    z-index: 100000;
    padding: 11px 16px;
    border-radius: 10px;
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 6px 24px rgb(0 0 0 / 18%);
    font-weight: 600;
}

/* Global navigation */
.site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 1000;
    border-block-end: 1px solid rgb(0 0 0 / 8%);
    background: rgb(255 255 255 / 82%);
    backdrop-filter: saturate(180%) blur(20px);
    transition: transform 220ms ease, background-color 220ms ease;
}

.site-header--scrolled { background: rgb(255 255 255 / 94%); }
.site-header--hidden { transform: translateY(-110%); }
body.home .site-header,
body.page-template-template-tool-cluster .site-header {
    position: relative;
    inset-block-start: auto;
    transform: none;
}
.site-header__container { inline-size: min(calc(100% - 32px), 1240px); }

.site-nav-wrapper {
    min-block-size: 54px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 30px;
}

.site-logo {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--tap-min);
    gap: 9px;
    color: var(--ink);
    text-decoration: none;
}

.site-logo__mark {
    inline-size: 28px;
    block-size: 28px;
    display: grid;
    place-items: center;
    color: var(--ink);
}

.site-logo__mark svg { inline-size: 22px; block-size: 22px; }
.site-logo__name {
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -0.025em;
    line-height: 1;
}

.site-logo__descriptor {
    margin-inline-start: 3px;
    padding-inline-start: 12px;
    border-inline-start: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.72rem;
}

.site-logo__badge { display: none; }
.site-logo__img { display: block; max-block-size: 32px; inline-size: auto; }
.main-navigation { justify-self: center; }
.nav-menu { display: flex; align-items: center; gap: 25px; list-style: none; }
.nav-menu a {
    display: block;
    padding-block: 17px;
    color: var(--ink);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    transition: color 140ms ease;
}
.nav-menu a:hover,
.nav-menu .current-menu-item > a,
.nav-menu .current_page_item > a { color: var(--signal); }
.nav-actions { display: flex; align-items: center; gap: 8px; }

.btn {
    min-block-size: var(--tap-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 9px 17px;
    cursor: pointer;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { cursor: not-allowed; opacity: 0.42; transform: none; }
.btn--primary { border-color: var(--signal); background: var(--signal); color: #fff; }
.btn--primary:hover { border-color: var(--signal-hover); background: var(--signal-hover); color: #fff; }
.btn--primary:focus-visible { outline-color: #ffcc00; }
.btn--secondary { border-color: var(--control-line); background: rgb(255 255 255 / 78%); color: var(--ink); }
.btn--secondary:hover { border-color: var(--line-strong); background: var(--surface); color: var(--ink); }
.btn--sm { min-block-size: 36px; padding: 7px 13px; font-size: var(--text-sm); }
.btn--lg { min-block-size: 48px; padding: 12px 21px; }
.nav-cta { min-block-size: 32px; padding: 7px 14px; font-size: var(--text-sm); }

.mobile-menu-toggle {
    display: none;
    inline-size: 40px;
    block-size: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
}
.hamburger-line { inline-size: 17px; block-size: 1px; background: currentColor; display: block; margin: 5px auto; }
.site-main { min-block-size: 60vh; }

/* Shared hierarchy */
.studio-section { padding-block: clamp(70px, 8vw, 120px); }
.studio-section--rule { border-block-start: 1px solid var(--line); }
.studio-section--white { background: var(--surface); }
.studio-section--dark { background: var(--dark); color: var(--dark-text); }

.studio-kicker,
.section-eyebrow,
.section-tag-pill,
.product-section-eyebrow {
    display: block;
    color: var(--signal);
    font-size: var(--text-xs);
    font-weight: 650;
    letter-spacing: -0.01em;
}

.studio-heading,
.section-title,
.archive-title,
.page-title,
.attachment-title {
    max-inline-size: 900px;
    margin-block: 12px 0;
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 650;
    letter-spacing: -0.055em;
    line-height: 1.02;
    text-wrap: balance;
}

.studio-intro,
.section-subtitle,
.archive-description {
    max-inline-size: 700px;
    margin-block-start: 18px;
    color: var(--muted);
    font-size: var(--text-lg);
    line-height: 1.55;
    text-wrap: pretty;
}

.product-section-heading {
    max-inline-size: 820px;
    margin-inline: auto;
    margin-block-end: clamp(38px, 6vw, 70px);
    text-align: center;
}
.product-section-heading h2 {
    margin-block-start: 10px;
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 650;
    letter-spacing: -0.06em;
    line-height: 1.25;
    text-wrap: balance;
}
.product-section-heading > p:last-child {
    max-inline-size: 670px;
    margin: 20px auto 0;
    color: var(--muted);
    font-size: var(--text-lg);
    line-height: 1.5;
}
.product-section-heading--wide { max-inline-size: 900px; }

.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: var(--text-xs);
    list-style: none;
}
.breadcrumb-item { display: inline-flex; align-items: center; gap: 6px; min-inline-size: 0; }
.breadcrumb-item a { color: var(--muted); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--signal); }
.breadcrumb-separator { display: inline-flex; opacity: 0.65; }
.breadcrumb-current-text { white-space: normal; overflow-wrap: anywhere; }

/* Homepage product proof */
.photo-proof {
    padding-block: clamp(84px, 10vw, 150px);
    background: var(--surface);
}
.photo-proof__layout {
    max-inline-size: 1080px;
    margin-inline: auto;
}
.photo-proof__figure { margin: 0; }
.photo-proof__image {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--paper);
    box-shadow: 0 24px 70px rgb(0 0 0 / 12%);
}
.photo-proof__half { position: absolute; inset-block: 0; background-position: center; background-size: cover; }
.photo-proof__half--before { inset-inline: 0 50%; filter: blur(2px) saturate(0.86); }
.photo-proof__half--after { inset-inline: 50% 0; }
.photo-proof__half span {
    position: absolute;
    inset-block-start: 18px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgb(0 0 0 / 64%);
    color: #fff;
    font-size: var(--text-2xs);
    font-weight: 600;
    backdrop-filter: blur(12px);
}
.photo-proof__half--before span { inset-inline-start: 18px; }
.photo-proof__half--after span { inset-inline-end: 18px; }
.photo-proof__rule { position: absolute; inset-block: 0; inset-inline-start: 50%; inline-size: 2px; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / 12%); }
.photo-proof__figure figcaption { margin-block-start: 12px; color: var(--muted); font-size: var(--text-sm); text-align: center; }
.photo-proof__notes {
    max-inline-size: 980px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 42px;
    margin: 48px auto 0;
}
.photo-proof__notes h3 { font-size: var(--text-lg); font-weight: 650; letter-spacing: -0.02em; }
.photo-proof__notes p { margin-block-start: 7px; color: var(--muted); font-size: var(--text-sm); }
.photo-proof__link { margin-block-start: 36px; text-align: center; }
.photo-proof__link a { color: var(--signal); text-decoration: none; }
.photo-proof__link a:hover { color: var(--link-hover); }

/* Homepage method */
.product-method {
    padding-block: clamp(84px, 10vw, 150px);
    background: var(--paper);
}
.product-method__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-block-start: 1px solid var(--line);
}
.product-method__item {
    padding: 34px 34px 10px;
    border-inline-end: 1px solid var(--line);
}
.product-method__item:first-child { padding-inline-start: 0; }
.product-method__item:last-child { padding-inline-end: 0; border-inline-end: 0; }
.product-method__label { color: var(--muted); font-size: var(--text-2xs); font-weight: 600; }
.product-method__item h3 { margin-block-start: 18px; font-size: var(--text-xl); line-height: 1.15; letter-spacing: -0.035em; }
.product-method__item > p:not(.product-method__label) { margin-block-start: 13px; color: var(--muted); font-size: var(--text-base); }
.product-method__item a { display: inline-block; margin-block-start: 22px; color: var(--signal); text-decoration: none; }
.product-method__item a:hover { color: var(--link-hover); }

/* Homepage journal */
.product-journal { padding-block: clamp(84px, 10vw, 150px); background: var(--surface); }
.product-journal__header { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-block-end: 38px; }
.product-journal__header h2 { margin-block-start: 7px; font-size: var(--text-4xl); line-height: 1.25; letter-spacing: -0.055em; }
.product-journal__all,
.product-story__link { color: var(--signal); text-decoration: none; white-space: nowrap; }
.product-journal__all:hover,
.product-story__link:hover { color: var(--link-hover); }
.product-journal__grid { display: grid; grid-template-columns: 1.45fr 1fr 1fr; gap: 18px; }
.product-story { min-inline-size: 0; overflow: hidden; border-radius: var(--radius-md); background: var(--paper); }
.product-story__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-deep); }
.product-story__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 420ms ease; }
.product-story:hover .product-story__media img { transform: scale(1.025); }
.product-story__body { padding: 24px; }
.product-story__meta { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: var(--text-xs); }
.product-story h3 { margin-block-start: 14px; font-size: var(--text-lg); line-height: 1.22; letter-spacing: -0.03em; }
.product-story--lead h3 { font-size: var(--text-xl); }
.product-story h3 a { text-decoration: none; }
.product-story h3 a:hover { color: var(--signal); }
.product-story__body > p:not(.product-story__meta) { margin-block-start: 11px; color: var(--muted); font-size: var(--text-sm); }
.product-story__link { display: inline-block; margin-block-start: 18px; font-size: var(--text-sm); }

/* FAQ */
.faq-section { padding-block: clamp(84px, 10vw, 140px); background: var(--paper); }
.faq-header { max-inline-size: 760px; margin-block-end: 36px; }
.faq-title { margin-block-start: 10px; font-size: var(--text-4xl); line-height: 1.25; letter-spacing: -0.055em; }
.faq-header > p:not(.home-eyebrow) { margin-block-start: 16px; color: var(--muted); }
.faq-list { border-block-start: 1px solid var(--line); }
.faq-item { border: 0; border-block-end: 1px solid var(--line); background: transparent; }
.faq-question { display: flex; justify-content: space-between; gap: 30px; padding-block: 24px; cursor: pointer; font-weight: 600; list-style: none; }
.faq-question::-webkit-details-marker { display: none; }
.faq-q-text { min-inline-size: 0; overflow-wrap: anywhere; }
.faq-chevron { flex: 0 0 24px; inline-size: 24px; block-size: 24px; display: grid; place-items: center; color: var(--signal); font-size: 0; }
.faq-chevron::before { content: "+"; font-size: 1.35rem; font-weight: 400; }
.faq-item[open] .faq-chevron::before { content: "−"; }
.faq-answer { max-inline-size: 700px; padding-block: 0 24px; color: var(--muted); }

/* Archives and cards */
.archive-main-section,
.page-standard-wrapper,
.attachment-page-wrapper,
.page-fallback-section,
.error-404-section { padding-block: clamp(64px, 8vw, 110px); }
.archive-main-section { background: var(--paper); }
.archive-main-section { padding-block-start: clamp(28px, 4vw, 48px); }
.archive-hero-header { max-inline-size: 850px; margin-block: 0 52px; }
.archive-breadcrumb-wrap { margin-block-end: 30px; }
.category-filter-nav { display: flex; flex-wrap: wrap; gap: 9px; margin-block-end: 40px; }
/* Điện thoại: 6 nút lọc xếp 5–6 hàng (~230px) trước bài đầu tiên → một hàng cuộn ngang, nút thứ hai lộ một phần để biết còn nữa (15/10/2026). */
@media (max-width: 600px) {
    .category-filter-nav { flex-wrap: nowrap; margin-block-end: 28px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); overflow-x: auto; overscroll-behavior-x: contain; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
    .category-filter-nav::-webkit-scrollbar { display: none; }
    .category-filter-nav .filter-pill { flex: none; white-space: nowrap; }
}
.filter-pill {
    min-block-size: var(--tap-min);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--control-line);
    border-radius: 999px;
    padding: 7px 14px;
    background: var(--surface);
    color: var(--ink);
    font-size: var(--text-xs);
    font-weight: 550;
    text-decoration: none;
}
.filter-pill:hover { border-color: var(--line-strong); }
.filter-pill--active { border-color: var(--ink); background: var(--ink); color: #fff; }
.filter-pill__count { opacity: 0.65; }

.knowledge-grid,
.archive-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.knowledge-card,
.article-bento-card,
.related-post-bento-card {
    min-inline-size: 0;
    overflow: hidden;
    border: 1px solid rgb(0 0 0 / 5%);
    border-radius: var(--radius-md);
    background: var(--surface);
    transition: transform 180ms ease, box-shadow 180ms ease;
}
.knowledge-card:hover,
.article-bento-card:hover,
.related-post-bento-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgb(0 0 0 / 7%); }
.knowledge-card__media,
.article-bento-thumb { aspect-ratio: 16 / 10; display: block; overflow: hidden; background: var(--paper-deep); }
.knowledge-card__media img,
.article-bento-thumb__img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 360ms ease; }
.article-bento-card:hover .article-bento-thumb__img { transform: scale(1.02); }
.knowledge-card__body,
.article-bento-body { padding: 22px; }
.knowledge-card__meta,
.article-bento-meta { color: var(--muted); font-size: var(--text-xs); }
.article-bento-meta__when { white-space: nowrap; } /* ngày · phút đọc luôn đi liền, chỉ xuống dòng trước ngày */
.article-bento-title { margin-block-start: 10px; font-size: var(--text-lg); line-height: 1.25; letter-spacing: -0.025em; }
.article-bento-title a { display: block; padding-block: .15em; text-decoration: none; }
.article-bento-title a:hover { color: var(--signal); }
.article-bento-excerpt { margin-block-start: 10px; color: var(--muted); font-size: var(--text-sm); }
.article-bento-card__inner { block-size: 100%; display: flex; flex-direction: column; }
.article-bento-footer { margin-block-start: auto; padding: 0 22px 22px; }
.article-bento-cta { color: var(--signal); font-size: var(--text-sm); text-decoration: none; }
.article-bento-cta:hover { color: var(--link-hover); }
.archive-pagination { margin-block-start: 46px; }
.archive-pagination .nav-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.archive-pagination .page-numbers { min-inline-size: 44px; block-size: 44px; padding-inline: 10px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border: 1px solid var(--control-line, #89818f); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: var(--text-sm); font-weight: 500; line-height: 1; text-decoration: none; font-variant-numeric: tabular-nums; transition: background-color .16s, border-color .16s, color .16s; }
.archive-pagination a.page-numbers:visited { color: var(--ink); }
.archive-pagination a.page-numbers:hover { background: var(--signal-soft); border-color: var(--signal); color: var(--ink); text-decoration: none; }
.archive-pagination a.page-numbers:active { background: #47404f; border-color: var(--signal); color: #fff; }
.archive-pagination a.page-numbers:focus-visible { outline: 3px solid var(--focus, #c2c9ff); outline-offset: 3px; }
.archive-pagination .page-numbers.current { background: var(--signal); border-color: var(--signal); color: #18131f; font-weight: 600; }
.archive-pagination .page-numbers.prev,.archive-pagination .page-numbers.next { inline-size: 44px; padding: 0; }
.archive-pagination .page-numbers svg { display: block; flex: none; }
.archive-pagination .page-numbers.dots { min-inline-size: 24px; padding-inline: 0; border-color: transparent; background: transparent; color: var(--muted); }
@media (max-width: 400px) {
    .archive-pagination .nav-links { gap: 6px; }
    .archive-pagination .page-numbers.dots { min-inline-size: 12px; }
}

/* Search and standard pages */
.search-form { display: flex; max-inline-size: 650px; gap: 9px; margin-block-start: 28px; }
.search-form .search-submit { min-block-size: var(--tap-min, 44px); } /* nút tìm kiếm đủ vùng bấm 44px cả khi xuống dòng trên điện thoại */
.archive-title { overflow-wrap: anywhere; } /* tiêu đề lớp Danh sách: chuỗi tìm kiếm dài không dấu cách vẫn xuống dòng */
.search-field {
    min-inline-size: 0;
    flex: 1;
    block-size: 48px;
    min-block-size: 48px;
    border: 1px solid var(--control-line);
    border-radius: 12px;
    background: var(--surface);
    color: var(--ink);
    padding-inline: 15px;
}
.search-field:focus { border-color: var(--focus); }

.page-article,
.attachment-article { background: var(--surface); }
.page-header,
.attachment-header { padding-block-end: 32px; margin-block-end: 38px; border-block-end: 1px solid var(--line); }
.post-hero-summary { max-inline-size: 700px; margin-block-start: 16px; color: var(--muted); font-size: var(--text-lg); }
.post-hero-summary:empty { display: none; }
.page-featured-image,
.article-inline-image { overflow: hidden; border-radius: var(--radius-md); }

.typography { color: var(--ink-soft); overflow-wrap: anywhere; font-size: var(--text-md); line-height: 1.72; }
.typography h2,
.typography h3,
.typography h4 { color: var(--ink); line-height: 1.16; letter-spacing: -0.035em; scroll-margin-top: 90px; text-wrap: balance; }
.typography h2 { font-size: var(--text-2xl); }
.typography h3 { font-size: var(--text-xl); }
/* Nhịp chữ dùng chung cho mọi vùng nội dung: trang công cụ, bài, trang thường, giới thiệu (.typography), pháp lý, hỗ trợ.
 * Nội dung bọc mỗi mục trong <section> và có thể có <div> trơn của WordPress, nên luật đi xuyên qua các khung bọc
 * không class đó; luật chỉ nhắm con trực tiếp (.typography > * + *) để p, bảng, H3 trong mục dính sát nhau.
 * Thứ tự có chủ ý: khối thường → hình, bảng → heading → sau heading → khối đầu của khung (cùng độ ưu tiên, luật sau thắng). */
:is(.typography, .legal-page-content) > * + *,
:is(.typography, .legal-page-content) :where(section, article, div:not([class])) > * + * { margin-block-start: var(--flow); }
:is(.typography, .legal-page-content) > :is(figure, table, .table-responsive),
:is(.typography, .legal-page-content) :where(section, article, div:not([class])) > :is(figure, table, .table-responsive),
:is(.typography, .legal-page-content) :is(figure, table, .table-responsive) + * { margin-block-start: var(--flow-media); }
:is(.typography, .legal-page-content) * + :is(section, h2) { margin-block-start: var(--flow-h2); }
:is(.typography, .legal-page-content) * + h3 { margin-block-start: var(--flow-h3); }
:is(.typography, .legal-page-content) * + h4 { margin-block-start: var(--flow-h4); }
:is(.typography, .legal-page-content) h2 + * { margin-block-start: var(--flow-after-h2); }
:is(.typography, .legal-page-content) :is(h3, h4) + * { margin-block-start: var(--flow-after-h3); }
:is(.typography, .legal-page-content) :is(h2, h3) + :is(h3, h4) { margin-block-start: var(--flow-h4); }
:is(.typography, .legal-page-content) > :first-child,
:is(.typography, .legal-page-content) :where(section, article, div:not([class])) > :first-child { margin-block-start: 0; }
.typography a { color: var(--signal); text-decoration: underline; }
.typography a:hover { color: var(--link-hover); }
.typography ul,
.typography ol { padding-inline-start: 1.3em; }
.typography li + li { margin-block-start: 0.48em; }
.typography blockquote { margin-inline: 0; border-inline-start: 3px solid var(--ink); padding-inline-start: 22px; color: var(--ink); font-size: var(--text-md); }
.typography img { border-radius: var(--radius-sm); }
/* Chú thích ảnh giống nhau ở mọi vùng nội dung: nhỏ, nhạt, cách ảnh một nhịp ngắn (không để trông như một đoạn văn dính vào ảnh). */
:is(.typography, .legal-page-content) figure img { display: block; }
:is(.typography, .legal-page-content) figcaption { margin-block-start: var(--flow-caption); color: var(--muted); font-size: var(--text-sm); line-height: 1.5; text-align: center; }
.typography table { inline-size: 100%; border-collapse: collapse; font-size: var(--text-base); }
.typography th,
.typography td { border-block-end: 1px solid var(--line); padding: 12px; text-align: start; }
.typography th { background: var(--paper); color: var(--ink); }
.typography pre { overflow: auto; padding: 20px; border-radius: var(--radius-sm); background: var(--dark-surface); color: var(--dark-text); }

/* Posts */
.single-post-layout { position: relative; }
.post-reading-progress { position: fixed; inset: 0 0 auto; z-index: 1200; block-size: 3px; background: transparent; }
#post-reading-progress-bar { block-size: 100%; inline-size: 0; background: var(--signal); }
.post-hero { padding-block: clamp(28px, 4vw, 48px) 28px; }
.post-hero-title { max-inline-size: 930px; margin-block-start: 12px; font-size: var(--text-4xl); line-height: 1.25; letter-spacing: -0.065em; text-wrap: balance; overflow-wrap: anywhere; }
.post-breadcrumb-wrapper { color: var(--muted); }
.post-hero-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 20px; margin-block-start: 16px; color: var(--muted); font-size: var(--text-xs); }
.post-hero-meta a { display: inline-flex; align-items: center; min-block-size: var(--tap-min); }
.post-copy-control { min-inline-size: 0; max-inline-size: 100%; min-block-size: 44px; }
.post-copy-btn { min-block-size: 44px; border: 0; padding: 8px 0; background: transparent; color: var(--signal); cursor: pointer; font-size: inherit; text-align: start; }
.post-copy-btn:hover { color: var(--link-hover); }
#post-copy-status { display: block; max-inline-size: 48ch; color: var(--ink-soft); }
#post-copy-status:empty { display: none; }
.post-copy-fallback { margin-block-start: 8px; }
.post-copy-fallback label { display: block; margin-block-end: 6px; }
.post-copy-fallback input { inline-size: 100%; min-inline-size: 0; min-block-size: 48px; border: 1px solid var(--control-line); border-radius: 8px; padding: 10px 12px; background: var(--surface); color: var(--ink); }
.post-featured-image { max-inline-size: 820px; margin: 24px auto 0; overflow: hidden; border-radius: var(--radius-lg); }
.post-featured-img { display: block; inline-size: 100%; max-block-size: 460px; object-fit: contain; }
.post-featured-image figcaption { padding: 10px 4px; color: var(--muted); font-size: var(--text-sm); }
.post-layout-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 48px; padding-block-end: 100px; }
.post-layout-grid--without-toc { grid-template-columns: minmax(0, 1fr); max-inline-size: 780px; margin-inline: auto; }
/* Phần sau bài (gợi ý công cụ, tác giả, bài liên quan): mục lục đã hết nên khối này trải hết khung bài, mép trái và phải thẳng với ảnh bìa (14/10/2026). */
.post-layout-grid.post-layout-grid--after { grid-template-columns: minmax(0, 1fr); }
.post-layout-grid--after > .post-main-column { max-inline-size: none; }
.post-main-column,
.post-sidebar-column { min-inline-size: 0; }
.post-main-column { inline-size: 100%; max-inline-size: 780px; margin-inline: auto; }
.post-sticky-sidebar { position: sticky; inset-block-start: 86px; max-block-size: calc(100dvh - 110px); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 4px; scroll-padding-block: 8px; }
.sidebar-toc-card,
.sidebar-tool-widget,
.sidebar-trust-box { padding: 18px; border-radius: var(--radius-sm); background: var(--paper); }
.sidebar-toc-card + *,
.sidebar-tool-widget + * { margin-block-start: 14px; }
.sidebar-toc-list { list-style: decimal outside; padding-inline-start: 1.5em; margin-block-start: 12px; }
.sidebar-toc-list li::marker,
.mobile-toc-list li::marker { color: var(--muted); font-size: var(--text-sm); }
.sidebar-toc-link { display: flex; align-items: flex-start; gap: 8px; min-block-size: 44px; padding-block: 10px; color: var(--muted); font-size: var(--text-sm); text-decoration: none; }
.sidebar-toc-link .toc-number,
.sidebar-toc-link .toc-num { flex-shrink: 0; }
.sidebar-toc-link .toc-text,
.mobile-toc-list .toc-text,
.mobile-toc-list .line-clamp-1 { display: block; min-inline-size: 0; overflow: visible; -webkit-line-clamp: unset; overflow-wrap: anywhere; }
.sidebar-toc-link:hover,
.sidebar-toc-link--active { color: var(--signal); }
/* Mục đang đọc: đậm + sáng thay cho gạch chân (liên kết giao diện không gạch chân, 15/10/2026). */
.sidebar-toc-link--active .toc-text,
.mobile-toc-list a[aria-current="location"] { color: var(--ink); font-weight: 600; }
.sidebar-tool-widget__glow { display: none; }
.mobile-toc-drawer { display: none; border-radius: var(--radius-sm); padding: 16px; background: var(--paper); }
.mobile-toc-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-block-size: 48px; cursor: pointer; }
.mobile-toc-toggle-icon { display: inline-block; transition: transform .15s ease; }
.mobile-toc-drawer[open] .mobile-toc-toggle-icon { transform: rotate(180deg); }
.mobile-toc-list { list-style: decimal outside; padding-inline-start: 1.5em; margin-block-start: 8px; padding-block-start: 8px; border-block-start: 1px solid var(--line); font-size: var(--text-sm); line-height: 1.5; }
.mobile-toc-list a { display: flex; align-items: flex-start; gap: 8px; min-block-size: 44px; padding-block: 10px; overflow-wrap: anywhere; }
.post-article-body { font-size: var(--text-md); }
.post-article-body > :first-child { margin-block-start: 0; }
.post-cta-bridge,
.post-author-bio,
.post-related-section { margin-block-start: 58px; padding-block-start: 32px; border-block-start: 1px solid var(--line); }
.post-cta-island { display: flex; overflow: hidden; border-radius: var(--radius-md); background: var(--dark); color: #fff; }
.post-cta-island__glow { display: none; }
.post-cta-island__inner { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; padding: clamp(22px, 3vw, 32px); }
.post-cta-island__badge { color: #7cc4ff; font-size: var(--text-2xs); font-weight: 600; }
.post-cta-island__title { margin-block-start: 12px; font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: var(--text-2xl); line-height: 1.2; letter-spacing: -0.04em; }
.post-cta-island__desc { margin-block-start: 10px; color: var(--dark-muted); font-size: var(--text-sm); line-height: 1.6; }
.post-cta-island__action { margin-block-start: auto; padding-block-start: 20px; }
.island-cta-btn { display: inline-flex; align-items: center; gap: 10px; min-block-size: var(--tap-min); border-radius: 999px; padding: 10px 17px; background: var(--signal); color: #fff; text-decoration: none; }
.island-cta-btn:hover { background: #147ce5; }
.island-cta-btn__circle { display: grid; place-items: center; }
.post-author-bio-card { display: grid; grid-template-columns: auto 1fr; gap: 18px; margin-block-start: 54px; padding-block-start: 30px; border-block-start: 1px solid var(--line); }
.post-author-bio-card__avatar { inline-size: 48px; block-size: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font-size: var(--text-2xs); font-weight: 700; }
.post-author-name { font-size: var(--text-lg); line-height: 1.35; }
.post-author-bio-card__content { min-inline-size: 0; overflow-wrap: anywhere; }
.post-author-bio-card__content p { margin-block-start: 8px; }
.post-author-bio-card__verified { display: inline-flex; align-items: center; gap: 5px; color: var(--proof); font-size: var(--text-2xs); }
.post-related-section { margin-block-start: 54px; }
.post-related-section > .flex { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.post-related-section > .flex > a { flex-shrink: 0; white-space: nowrap; min-block-size: 44px; }
.post-related-section > .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-block-start: 22px; }
.related-post-bento-card { padding: 16px; }
.related-post-bento-card > div { flex-shrink: 0; }
.related-post-bento-card a { text-decoration: none; }
.related-post-bento-card > div > a.aspect-video { display: block; aspect-ratio: 16 / 9; margin-block-end: 12px; }
.related-post-bento-card > div > a.aspect-video img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.related-post-title { font-size: var(--text-lg); line-height: 1.4; overflow-wrap: anywhere; }
.related-post-title a { display: block; padding-block: .15em; }

/* Comments */
.comments-area { margin-block-start: 60px; padding-block-start: 34px; border-block-start: 1px solid var(--line); }
.comment-list { list-style: none; }
.comment-list .comment { margin-block-start: 22px; }
.comment-body { padding: 20px; border-radius: var(--radius-sm); background: var(--paper); }
.comment-meta { font-size: var(--text-xs); }
.comment-content { margin-block-start: 12px; }
.comment-content a { color: var(--signal); text-decoration: underline; }
.comment-respond { margin-block-start: 42px; }
.comment-form > p { margin-block-start: 16px; }
.comment-form label { display: block; margin-block-end: 7px; font-weight: 600; }
.comment-form input:not([type="checkbox"]),
.comment-form textarea { inline-size: 100%; border: 1px solid var(--control-line); border-radius: 12px; padding: 12px; background: var(--surface); }
.comment-form .submit { border: 0; border-radius: 999px; padding: 11px 18px; background: var(--signal); color: #fff; cursor: pointer; }

/* Error and attachment */
.error-404-card { max-inline-size: 700px; margin-inline: auto; text-align: center; }
.error-code { display: block; color: var(--signal); font-size: clamp(5rem, 16vw, 10rem); font-weight: 700; letter-spacing: -0.08em; line-height: 0.9; }
.error-404-card h1 { margin-block-start: 22px; } /* cỡ, font: quy tắc H1 trang chung ở layers.css */
.error-404-card > p { max-inline-size: 570px; margin: 16px auto 0; color: var(--muted); }
.error-actions { margin-block-start: 26px; }
.quick-clusters { margin-block-start: 44px; }
.cluster-pill-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-block-start: 14px; }
.cluster-pill-tags a { border-radius: 999px; padding: 8px 13px; background: var(--paper); text-decoration: none; }
.attachment-media img { inline-size: 100%; border-radius: var(--radius-md); }
.card--empty { max-inline-size: 680px; margin-inline: auto; border-radius: var(--radius-md); background: var(--surface); }
.card--empty .search-form { margin-inline: auto; }

.badge-tech { display: flex; align-items: center; gap: 7px; }
.eyebrow-dot { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--proof); }

/* Dialog and alert */
.hardware-modal { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 20px; }
.modal-backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / 45%); backdrop-filter: blur(8px); }
.modal-dialog { position: relative; inline-size: min(560px, 100%); max-block-size: calc(100vh - 40px); overflow: auto; border-radius: var(--radius-md); background: var(--surface); box-shadow: 0 24px 80px rgb(0 0 0 / 25%); }
.modal-header { display: flex; justify-content: space-between; gap: 20px; padding: 22px; border-block-end: 1px solid var(--line); }
.modal-title { font-size: var(--text-lg); }
.modal-close-btn { inline-size: 32px; block-size: 32px; border: 0; border-radius: 50%; background: var(--paper); cursor: pointer; font-size: 1.2rem; }
.modal-body { padding: 22px; }
.modal-desc { color: var(--muted); }
.hardware-spec-list { list-style: none; }
.spec-row { display: flex; justify-content: space-between; gap: 18px; padding-block: 12px; border-block-end: 1px solid var(--line); }
.spec-name { color: var(--muted); }
.hardware-recommendation { padding: 16px; border-radius: var(--radius-sm); background: var(--paper); }
.recommendation-badge { font-weight: 650; }

.webview-alert-banner { background: #fff8e8; color: #4f3200; }
.webview-alert-inner { inline-size: min(calc(100% - 2 * var(--gutter)), var(--container-wide)); min-block-size: 48px; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-inline: auto; padding-block: 10px; }
.webview-alert-text { display: flex; align-items: center; gap: 9px; font-size: var(--text-sm); }
.webview-alert-btn { border: 0; padding: 0; background: transparent; color: #6f4500; cursor: pointer; font-size: var(--text-sm); font-weight: 650; }
.webview-alert-btn:hover { color: #432a00; }

/* Legacy utility classes used by PHP components */
.flex { display: flex; }
.grid { display: grid; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.flex-wrap { flex-wrap: wrap; }
.flex-col { flex-direction: column; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-2\.5 { gap: 0.625rem; }
.gap-6 { gap: 1.5rem; }
.mt-1 { margin-block-start: 0.25rem; }
.mt-2 { margin-block-start: 0.5rem; }
.mt-3 { margin-block-start: 0.75rem; }
.mt-4 { margin-block-start: 1rem; }
.mt-6 { margin-block-start: 1.5rem; }
.mt-8 { margin-block-start: 2rem; }
.mt-16 { margin-block-start: 4rem; }
.mb-1 { margin-block-end: 0.25rem; }
.mb-3 { margin-block-end: 0.75rem; }
.mb-6 { margin-block-end: 1.5rem; }
.mb-8 { margin-block-end: 2rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-8 { padding: 2rem; }
.py-16 { padding-block: 4rem; }
.pt-3 { padding-block-start: 0.75rem; }
.pt-10 { padding-block-start: 2.5rem; }
.pb-4 { padding-block-end: 1rem; }
.pb-6 { padding-block-end: 1.5rem; }
.border-t { border-block-start: 1px solid var(--line); }
.border-b { border-block-end: 1px solid var(--line); }
.border { border: 1px solid var(--line); }
.rounded-md,
.rounded-xl { border-radius: var(--radius-sm); }
.rounded-2xl { border-radius: var(--radius-md); }
.rounded-full { border-radius: 999px; }
.bg-surface { background: var(--surface); }
.bg-elevated { background: var(--paper); }
.text-primary { color: var(--ink); }
.text-center { text-align: center; }
.text-secondary,
.text-muted { color: var(--muted); }
.text-accent,
.text-accent-cyan { color: var(--signal); }
.text-xs { font-size: var(--text-2xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.uppercase { text-transform: uppercase; }
.tracking-wider { letter-spacing: 0.06em; }
.leading-relaxed { line-height: 1.65; }
.leading-snug { line-height: 1.25; }
.w-full { inline-size: 100%; }
.h-full { block-size: 100%; }
.h-auto { block-size: auto; }
.relative { position: relative; }
.z-10 { z-index: 10; }
.overflow-hidden { overflow: hidden; }
.object-cover { object-fit: cover; }
.aspect-video { aspect-ratio: 16 / 9; }
.cursor-pointer { cursor: pointer; }
.space-y-2 > * + * { margin-block-start: 0.5rem; }
.line-clamp-1 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.line-clamp-2 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

@media (max-width: 1024px) {
    .nav-menu { gap: 18px; }
    .site-logo__descriptor { display: none; }
    .knowledge-grid,
    .archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .product-journal__grid { grid-template-columns: 1.2fr 1fr; }
    .product-story:last-child { grid-column: 1 / -1; }
    .post-layout-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .post-sidebar-column { display: none; }
    .single-post-layout .mobile-toc-drawer { display: block !important; }
}

@media (max-width: 820px) {
    body.admin-bar .site-header { inset-block-start: 46px; }
    .site-nav-wrapper { grid-template-columns: 1fr auto; }
    .main-navigation {
        position: absolute;
        inset: 100% 0 auto;
        display: none;
        border-block-end: 1px solid var(--line);
        background: rgb(255 255 255 / 98%);
        box-shadow: 0 16px 34px rgb(0 0 0 / 8%);
    }
    .main-navigation.is-open { display: block; }
    .nav-menu { display: grid; gap: 0; padding: 10px 20px 18px; }
    .nav-menu a { padding-block: 11px; font-size: var(--text-sm); }
    .mobile-menu-toggle { display: block; }
    .nav-cta { display: none; }
    .product-method__grid { grid-template-columns: 1fr; }
    .product-method__item,
    .product-method__item:first-child,
    .product-method__item:last-child { padding: 28px 0; border-inline-end: 0; border-block-end: 1px solid var(--line); }
    .product-method__item:last-child { border-block-end: 0; }
    .photo-proof__notes { gap: 24px; }
}

@media (max-width: 640px) {
    .product-section-heading h2,
    .product-journal__header h2 { font-size: var(--text-4xl); }
    .photo-proof__image { aspect-ratio: 4 / 3; border-radius: 20px; }
    .photo-proof__notes { grid-template-columns: 1fr; }
    .product-journal__header { align-items: start; flex-direction: column; }
    .product-journal__grid { grid-template-columns: 1fr; }
    .product-story:last-child { grid-column: auto; }
    .knowledge-grid,
    .archive-grid { grid-template-columns: 1fr; }
    .search-form { flex-direction: column; }
    .search-field { flex: 0 0 auto; }
    .search-form .btn { inline-size: 100%; }
    .post-hero-title { font-size: var(--text-4xl); }
    .post-related-section > .grid { grid-template-columns: 1fr; }
    .post-related-section > .flex { align-items: flex-start; flex-direction: column; gap: 8px; }
    .webview-alert-inner { align-items: start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media print {
    .site-header,
    .site-footer,
    .post-reading-progress,
    .post-sidebar-column,
    .post-cta-island { display: none !important; }
    body { background: #fff; color: #000; }
    .container { inline-size: 100%; max-inline-size: none; }
}