/* Approved Layers visual language. Layout and content templates remain in studio.css. */
:root {
    color-scheme: dark;
    --paper: #17151c; --paper-deep: #232029; --surface: #101014; --surface-strong: #1b181f;
    --ink: #f3f2f6; --ink-soft: #d7d2e1; --muted: #b0aeb9;
    --line: #35313d; --line-strong: #ada4b8; --control-line: #89818f;
    --signal: #d4cbea; --signal-hover: #efe9fb; --signal-soft: #30283d;
    /* Liên kết (15/10/2026): màu khi rê chuột; nét gạch mảnh của liên kết trong nội dung = 40% màu chữ của chính liên kết. */
    --link-hover: #fff; --link-line: color-mix(in srgb, currentColor 40%, transparent);
    --proof: #a5cfb5; --warning: #efbd88; --danger: #ffabb9; --focus: #c2c9ff;
    --premium: #f2c14e; --premium-deep: #8a5a00;
    --font-body: "Be Vietnam Pro", sans-serif; --font-display: "Darker Grotesque", "Be Vietnam Pro", sans-serif;
    --layers-ease: cubic-bezier(.22,1,.36,1);
    /* Khung trang: MỘT nơi khai cho cả site (14/10/2026). Rộng: đầu/chân trang, trang chủ, khung công cụ, trang danh sách.
     * Tài liệu: bài viết, trang tin cậy/hỗ trợ/thuật ngữ. Hẹp: cột đọc một cột (hướng dẫn dưới công cụ, 404). Lề hai bên: --gutter. */
    --gutter: 24px; --container-wide: 1320px; --container: 1120px; --container-narrow: 760px;
    /* Nhịp khối (15/10/2026): đệm trên/dưới mỗi khối trang chủ (giữa hai khối = 2 × 56 = 112px; 80px ≤600px, chủ site duyệt giảm từ
     * 152/97px) và khoảng từ nội dung cuối tới chân trang ở mọi lớp (--page-end), bằng đệm trên của chân trang. */
    --section-space: 56px; --page-end: var(--section-space);
    /* Thang chữ: MỘT nơi khai cỡ chữ cho cả site (14/10/2026). Tỉ lệ ~1,2; nhỏ nhất 12px; từ 17px trở lên co giãn mượt
     * giữa 390 và 1440px (rem + vw, nên vẫn theo cỡ chữ người dùng đặt trong trình duyệt). CSS chỉ dùng var(--text-*). */
    --text-2xs: .75rem;    /* 12  nhãn chữ in hoa, huy hiệu, nút điều khiển rất nhỏ của công cụ */
    --text-xs: .8125rem;   /* 13  ngày, phút đọc, breadcrumb, nhãn công cụ, chữ phụ chân trang */
    --text-sm: .875rem;    /* 14  menu, nút, mục lục, liên kết chân trang, chú thích ảnh */
    --text-base: 1rem;     /* 16  chữ giao diện, mô tả, bảng, ô nhập */
    --text-md: clamp(1.0625rem, 1.039rem + .095vw, 1.125rem);   /* 17→18  thân bài, tài liệu, phụ đề dưới H1 hero */
    --text-lg: clamp(1.125rem, 1.078rem + .19vw, 1.25rem);      /* 18→20  tóm tắt dưới H1, tiêu đề thẻ, H4 */
    --text-xl: clamp(1.25rem, 1.157rem + .381vw, 1.5rem);       /* 20→24  H3 */
    --text-2xl: clamp(1.5rem, 1.361rem + .571vw, 1.875rem);     /* 24→30  H2 trong nội dung */
    --text-3xl: clamp(1.75rem, 1.471rem + 1.143vw, 2.5rem);     /* 28→40  tiêu đề trình bày phụ (ô thả ảnh, khối gợi ý) */
    --text-4xl: clamp(2.25rem, 1.879rem + 1.524vw, 3.25rem);    /* 36→52  H1 trang, H2 lớn ở trang chủ (font trình bày) */
    --text-5xl: clamp(2.75rem, 2.193rem + 2.286vw, 4.25rem);    /* 44→68  H1 hero trang chủ và trang công cụ */
}
@media(max-width:600px) { :root { --gutter: 16px; --section-space: 40px; } }
html { scroll-padding-top: 112px; }
body { background: #080809; line-height: 1.75; }
/* hidden="until-found" (phần hướng dẫn thu gọn ở trang công cụ) phải còn hộp để Ctrl+F / liên kết #mục tự mở ra. */
[hidden]:not([hidden="until-found"]) { display: none !important; }
button { color: inherit; }
::selection { background: #c8c7ef; color: #080809; }
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible { outline: 3px solid var(--focus); outline-offset: 5px; }
body .site-header,body.home .site-header,body.page-template-template-tool-cluster .site-header { position: sticky; inset-block-start: 0; border: 0; background: #080809d9; backdrop-filter: blur(18px); transform: none; }
body.admin-bar .site-header { inset-block-start: 32px; }
.site-header__container { inline-size: min(calc(100% - 2 * var(--gutter)), var(--container-wide)); }
/* Ba cột 1fr | auto | 1fr: thanh menu nằm đúng giữa trang dù logo và nút hai bên rộng khác nhau. */
.site-nav-wrapper { min-block-size: 82px; gap: 22px; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.site-logo { justify-self: start; }
.nav-actions { justify-self: end; }
.main-navigation__extras { display: none; }
.site-logo__name { font-size: 22px; font-weight: 600; letter-spacing: -.06em; }
.site-logo__mark { inline-size: 30px; block-size: 30px; }
.site-logo__mark svg { inline-size: 28px; block-size: 28px; }
.main-navigation { border: 1px solid #302d35; padding: 5px; border-radius: 100px; background: #17151bec; backdrop-filter: blur(18px) saturate(1.3); }
.nav-menu { gap: 2px; }
.nav-menu a { padding: 8px 13px; border-radius: 100px; color: #bab6c6; font-size: var(--text-sm); font-weight: 400; transition: color .2s, background-color .2s; }
/* Màn cảm ứng rộng (iPad ngang, laptop cảm ứng) vẫn dùng thanh menu ngang: mục menu và nút đầu trang cao --tap-min. */
@media (pointer: coarse) and (min-width: 1101px) { .nav-menu a, .nav-cta { display: inline-flex; align-items: center; min-block-size: var(--tap-min); } }
.nav-menu a:hover { color: #fff; background: #34313b; }
.nav-menu .current-menu-item>a,.nav-menu .current_page_item>a { background: #2c2932; color: #fff; }
.nav-actions { gap: 10px; }
.btn { font-weight: 500; transition: transform .25s var(--layers-ease),background-color .2s,border-color .2s,color .2s; }
.btn--primary,.island-cta-btn,.comment-form .submit { border-color: #eeeaf5; background: #eeeaf5; color: #18131f; }
.btn--primary:hover,.island-cta-btn:hover,.comment-form .submit:hover { background: #fff; border-color: #fff; color: #100b16; transform: translateY(-2px); }
.btn--primary:active { background: #d9d2e8; color: #171021; transform: none; }
.btn--primary:focus-visible { outline-color: #75658f; }
.btn--secondary { background: #211d29; border-color: #89818f; color: #eeeaf6; }
.btn--secondary:hover { background: #37313f; border-color: #bcb4ca; color: #fff; }
.btn--secondary:active { background: #4a4255; }
.nav-cta { min-block-size: 38px; font-size: var(--text-sm); padding: 8px 16px; }
.mobile-menu-toggle { border: 1px solid #89818f; background: #17161c; color: #eeeaf6; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0; }
.mobile-menu-toggle .hamburger-line { margin: 0; }
.mobile-menu-toggle:hover { background: #34313b; }
.filter-pill--active,.archive-pagination .current,.post-author-bio-card__avatar { background: #eeeaf5; color: #18131f; }
.site-footer { background: #0d0b10; }
/* H1 trang của mọi lớp (danh sách, bài viết, tài liệu, 404): MỘT kiểu chữ — font trình bày, đậm 700, cỡ --text-4xl (14/10/2026).
   File riêng của từng lớp chỉ đặt khoảng cách/màu, không đặt lại cỡ, độ đậm, giãn chữ. */
.studio-heading,.section-title,.archive-title,.page-title,.attachment-title,.post-hero-title,.legal-header h1,.error-404-card h1 { padding-block: .12em; font-family: var(--font-display); font-weight: 700; font-size: var(--text-4xl); letter-spacing: -.015em; line-height: 1.12; }
.post-hero { padding-block-start: clamp(28px, 4vw, 48px); }
/* Tiêu đề trong nội dung (bài viết, hướng dẫn công cụ, trang tài liệu): cùng độ đậm và giãn chữ (14/10/2026). */
.typography h2 { font-weight: 650; letter-spacing: -.015em; line-height: 1.3; }
.typography h3 { font-weight: 600; letter-spacing: -.01em; line-height: 1.35; }
.modal-dialog { border: 1px solid var(--line-strong); }
.hardware-modal { align-items: center; justify-content: center; }
.modal-close-btn { color: var(--ink); }
.modal-close-btn:hover { background: #34313b; }
.modal-dialog { overscroll-behavior: contain; }

/* Tool pages share the palette without touching the engine's states or events. */
.tool-section { background: #0f0e12; padding-block: 40px; }
/* H1 trang công cụ cùng cỡ H1 các trang khác (--text-4xl): tiêu đề trang công cụ dài 40–60 ký tự, ở --text-5xl chiếm 3 dòng trên
 * điện thoại và đẩy nút Chọn ảnh khỏi màn đầu. Trang chủ giữ --text-5xl (H1 ngắn trong khung hero, layers-home.css). */
.tool-title { padding-block: .12em; font-size: var(--text-4xl); font-weight: 500; letter-spacing: -.025em; line-height: 1.08; }
.tool-subtitle { font-size: var(--text-md); line-height: 1.8; }
@media (max-width: 560px) {
    .tool-section { padding-block: 24px 32px; }
    .tool-subtitle { margin-block-start: 16px; font-size: var(--text-base); line-height: 1.6; }
}
/* Màn thấp (15/10/2026), đo theo chiều cao vùng xem thật (đã trừ thanh trình duyệt): nút Chọn ảnh nằm trong màn đầu ở laptop
 * 1280×720, 1366×657, 1440×789, 1536×730, iPad ngang 1024×690 và điện thoại 360×640 → 412×780 (tests/low-screen-check.mjs).
 * Đầu trang gọn lại; nội dung khung kéo-thả dồn lên đỉnh khung. Chiều cao khung kéo-thả và khung kết quả giữ nguyên, bằng
 * nhau (chọn ảnh xong khung không nhảy, khung so sánh không bị thu nhỏ). Trang chủ: cùng quy tắc ở layers-home.css. */
@media (min-width: 601px) and (max-height: 900px) {
    .tool-section { padding-block-start: 16px; }
    .tool-edition { margin-block-end: 8px; }
    .tool-title { font-size: var(--text-3xl); }
    .tool-subtitle { margin-block-start: 10px; font-size: var(--text-base); line-height: 1.6; }
    .tool-principles { margin-block-start: 12px; }
    .tool-layout { gap: 16px; }
    .tool-workspace-active { padding-block: 10px; }
    .dropzone-inner { justify-content: flex-start; padding-block: 32px 20px; }
    .tool-dropzone .dropzone-icon { display: none; }
}
@media (max-width: 600px) and (max-height: 820px) {
    .tool-section { padding-block-start: 14px; }
    .tool-edition { margin-block-end: 8px; }
    .tool-title { font-size: var(--text-3xl); }
    .tool-subtitle { margin-block-start: 8px; font-size: var(--text-sm); line-height: 1.55; }
    .tool-principles { margin-block-start: 10px; gap: 2px 14px; }
    .tool-layout { gap: 14px; }
    .dropzone-inner { justify-content: flex-start; padding-block: 16px 14px; }
    .dropzone-prompt { font-size: var(--text-xl); }
    .dropzone-buttons { margin-block-start: 12px; }
}
/* Điện thoại rất thấp (≤680px, ví dụ 360×640): bỏ 3 dòng cam kết dưới mô tả, ý của chúng đã có trong câu mô tả và khối Tính năng. */
@media (max-width: 600px) and (max-height: 680px) {
    .tool-principles { display: none; }
}
/* Màn rộng nhưng thấp (netbook 1024×600, 800×600): cũng bỏ 3 dòng cam kết. */
@media (min-width: 601px) and (max-height: 640px) {
    .tool-principles { display: none; }
}
/* Rất thấp (≤500px: điện thoại xoay ngang 640×360 → 915×412): đầu trang 56px cho mọi trang; trang công cụ bỏ nhãn trên H1, 3 dòng
 * cam kết và thanh "Không gian xử lý · Sẵn sàng" (chữ cố định, chỉ trang trí). H1, câu mô tả và chữ hướng dẫn tải ảnh giữ đủ. */
@media (max-height: 500px) {
    .tool-section { padding-block-start: 10px; }
    .tool-edition, .tool-principles, .tool-chassis__bar { display: none; }
    .tool-title { font-size: var(--text-2xl); }
    .tool-subtitle { max-inline-size: 44em; margin-block-start: 6px; font-size: var(--text-sm); line-height: 1.5; }
    .tool-layout { gap: 10px; }
    .dropzone-inner { padding-block: 12px; }
    .dropzone-prompt { font-size: var(--text-lg); }
    .dropzone-buttons { margin-block-start: 10px; }
}
@media (max-height: 400px) {
    .tool-subtitle { font-size: var(--text-xs); }
}
.tool-layout { gap: 28px; }
.tool-chassis { border-color: #46434d; border-radius: 16px; overflow: clip; background: #111014; box-shadow: 0 20px 75px #0005; }
.tool-chassis__bar { background: #1a181f; font-size: var(--text-xs); }
.tool-dropzone { background: #101015; }
.dropzone-inner,.dropzone-inner:hover { background: #101015; border-color: #89818f; }
.tool-dropzone.drag-over .dropzone-inner,.tool-dropzone.is-dragover .dropzone-inner { background: #252332; border-color: #c2c9ff; }
.tool-controls-bar,.tool-action-bar { background: #18151d; }
.pro-segmented-tabs,.engine-mode-toggle,.pro-scale-toggle,.zoom-controls,.view-mode-selector { background: #110e17; border: 1px solid #89818f; }
.pro-tab,.engine-mode-btn,.pro-scale-btn,.zoom-btn,.view-mode-btn { color: #cfc4dc; }
.pro-tab:hover,.engine-mode-btn:hover,.pro-scale-btn:hover,.zoom-btn:hover,.view-mode-btn:hover { color: #fff; background: #39303f; }
.pro-tab--active,.engine-mode-btn--active,.pro-scale-btn--active,.view-mode-btn--active { background: #eae2f3; color: #1c1327; box-shadow: none; }
.restoration-controls { background: transparent; }
.restoration-control select { background: #24202c; color: #f2edf7; border-color: #89818f; }
.restoration-control select:hover { border-color: #c5b6d5; }
.restoration-face input,.restoration-strength { accent-color: #d6c5eb; }
.slider-handle { background: #eeeaf5; color: #17131e; }
.slider-divider:focus-visible .slider-handle { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 8px #111; }
.download-menu { inset-block-start: auto; inset-block-end: calc(100% + 8px); background: #211b29; border-color: #89818f; }
.download-menu-item:hover { background: #39303f; }
.processing-card .btn { background: #211d29; color: #fff; }
button:disabled,button:disabled:hover,button:disabled:active { opacity: .68; background: #28232f; color: #c0b8cb; border-color: #83768f; box-shadow: none; transform: none; cursor: not-allowed; }
body .tool-section button:disabled,body .tool-section button:disabled:hover,body .tool-section button:disabled:active { opacity: .68; background: #28232f; color: #c0b8cb; border-color: #83768f; box-shadow: none; transform: none; }
.scale-btn[data-scale="8"]:disabled,.scale-btn[data-scale="8"]:disabled:hover,.scale-btn[data-scale="8"]:disabled:active { opacity: 1; }

@media(max-width:1200px) {
    .site-nav-wrapper { gap: 12px; }
    .nav-menu a { padding-inline: 10px; font-size: var(--text-sm); }
}
/* ≤1100px (15/10/2026): đầu trang chỉ còn logo + nút menu (cùng một kiểu ở mọi bề rộng thu gọn). Menu mở thành tấm phủ kín
 * phần màn hình dưới đầu trang, cùng nền đầu trang, không lộ trang phía sau: danh sách mục bằng font trình bày, nút công cụ,
 * 3 trang thông tin. Định vị tuyệt đối theo đầu trang (đầu trang có backdrop-filter nên fixed sẽ bám đầu trang chứ không
 * bám màn hình); chiều cao = phần màn hình còn lại (--mobile-menu-top do site.js tính). Trang phía sau bị khoá cuộn. */
@media(max-width:1100px) {
    .site-nav-wrapper { grid-template-columns: minmax(0, 1fr) auto; min-block-size: 76px; }
    .nav-cta { display: none; }
    .main-navigation {
        display: none; position: absolute; inset-block-start: 100%; inset-inline: 0; z-index: 2;
        /* justify-self: stretch — nếu không, justify-self: center ở studio.css làm tấm co lại bằng nội dung. */
        inline-size: auto; max-inline-size: none; justify-self: stretch; align-self: start; block-size: calc(100dvh - var(--mobile-menu-top, 76px)); max-block-size: none; margin: 0;
        padding: 8px max(var(--gutter), env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
        overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: 16px;
        border: 0; border-block-start: 1px solid #24212a; border-radius: 0; background: #080809; backdrop-filter: none; box-shadow: none;
    }
    .main-navigation.is-open { display: flex; flex-direction: column; animation: lamnetanh-menu-in 220ms cubic-bezier(.23, 1, .32, 1); }
    /* Danh sách trải đúng khung đầu trang: mép trái thẳng logo, mũi tên thẳng nút đóng (lề --gutter như mọi khung). */
    .main-navigation > .nav-menu, .main-navigation > .main-navigation__extras { inline-size: min(100%, var(--container-wide)); margin-inline: auto; }
    .main-navigation .nav-menu { display: block; margin-block: 0; padding: 0; list-style: none; }
    .main-navigation .nav-menu li { min-inline-size: 0; margin: 0; border-block-end: 1px solid #1d1b22; }
    .main-navigation .nav-menu a {
        display: flex; align-items: center; justify-content: space-between; gap: 16px; min-block-size: 60px; padding: 10px 4px;
        border: 0; border-radius: 0; background: none; color: #cdc8d8;
        font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 600; line-height: 1.15; letter-spacing: -.01em;
        text-align: start; white-space: normal; overflow-wrap: anywhere;
    }
    .main-navigation .nav-menu a::after {
        content: ""; flex: none; inline-size: 9px; block-size: 9px; margin-inline-end: 6px;
        border-block-start: 2px solid currentColor; border-inline-end: 2px solid currentColor; transform: rotate(45deg); opacity: .45;
        transition: transform 160ms ease-out, opacity 160ms ease-out;
    }
    .main-navigation .nav-menu a:hover { background: none; color: #fff; }
    .main-navigation .nav-menu a:hover::after { opacity: 1; transform: translateX(3px) rotate(45deg); }
    .main-navigation .nav-menu a:active { color: #fff; background: #131217; }
    .main-navigation .nav-menu a[aria-current="page"],
    .main-navigation .nav-menu .current-menu-item > a,
    .main-navigation .nav-menu .current_page_item > a { border: 0; background: none; color: #fff; }
    .main-navigation .nav-menu a[aria-current="page"]::after,
    .main-navigation .nav-menu .current-menu-item > a::after,
    .main-navigation .nav-menu .current_page_item > a::after { inline-size: 8px; block-size: 8px; border: 0; border-radius: 50%; background: #c2c9ff; transform: none; opacity: 1; }
    .main-navigation .nav-menu a:focus-visible { outline: 3px solid #c2c9ff; outline-offset: -3px; border-radius: 6px; }
    .main-navigation__extras { display: grid; gap: 14px; margin-block-start: auto; padding-block-start: 28px; }
    .main-navigation__cta.btn { display: flex; justify-content: center; inline-size: 100%; min-block-size: 52px; font-size: var(--text-base); font-weight: 600; }
    .main-navigation__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 22px; margin: 0; padding: 0; list-style: none; }
    .main-navigation__meta a { display: inline-flex; align-items: center; min-block-size: 44px; color: #b4aec0; font-size: var(--text-sm); text-decoration: none; }
    .main-navigation__meta a:hover { color: var(--link-hover); }
    .main-navigation__meta a[aria-current="page"] { color: var(--link-hover); font-weight: 600; }
    .main-navigation__meta a:focus-visible { outline: 3px solid #c2c9ff; outline-offset: 2px; border-radius: 4px; }
    .mobile-menu-toggle { display: inline-flex; flex: 0 0 44px; inline-size: 44px; min-block-size: 44px; block-size: 44px; }
    .mobile-menu-toggle:active { background: #47404f; border-color: #bcb4ca; }
    .mobile-menu-toggle:focus-visible { outline: 3px solid #c2c9ff; outline-offset: 3px; }
    .mobile-menu-toggle .hamburger-line { inline-size: 20px; block-size: 2px; transition: transform 160ms ease; }
    .mobile-menu-toggle[aria-expanded="true"] .hamburger-line:first-child { transform: translateY(3.5px) rotate(45deg); }
    .mobile-menu-toggle[aria-expanded="true"] .hamburger-line:last-child { transform: translateY(-3.5px) rotate(-45deg); }
    body .site-header.site-header--menu-open { background: #080809; backdrop-filter: none; transform: none; }
    html.has-mobile-menu-open { overflow: hidden; }
}
@media (min-width: 700px) and (max-width: 1100px) {
    /* Máy tính bảng: nút công cụ vừa chữ bên trái, 3 trang thông tin bên phải, cùng một hàng. */
    .main-navigation__extras { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
    .main-navigation__cta.btn { inline-size: auto; padding-inline: 36px; }
    .main-navigation__meta { justify-content: flex-end; }
}
/* Mũi tên của liên kết (15/10/2026): vẽ bằng CSS nên không lẫn vào chữ của trang (tiêu đề, đoạn trích). → đi tới trang khác
 * trong site, ↑ quay về khung công cụ. Phần tử luôn kèm aria-hidden="true". */
.link-arrow { display: inline-block; }
.link-arrow::before { content: "→"; }
.link-arrow--up::before { content: "↑"; }
@keyframes lamnetanh-menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .main-navigation.is-open { animation: none; } .main-navigation .nav-menu a::after { transition: none; } }
@media(max-width:782px) { body.admin-bar .site-header { inset-block-start: 46px; } }
@media(max-width:600px) {
    .site-nav-wrapper { min-block-size: 70px; gap: 8px; }
    .site-logo__name { font-size: 20px; }
    .site-logo__mark { inline-size: 25px; }
    .nav-actions { gap: 6px; }
    .nav-cta { font-size: var(--text-sm); padding-inline: 11px; min-block-size: 36px; }
    body.admin-bar .site-header { inset-block-start: 0; }
}
@media(max-width:360px) { .site-logo__name { font-size: 17px; } .site-logo { gap: 5px; } .nav-cta { padding-inline: 8px; } }
@media(forced-colors:active) { .mobile-menu-toggle .hamburger-line { border-block-start: 2px solid currentColor; background: none; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media print { :root { color-scheme: light; --ink:#111; --muted:#444; --paper:#fff; --surface:#fff; --line:#bbb; --signal:#111; } body { background:#fff; color:#111; } }

/* Bảng trong nội dung: màn hình hẹp thì cuộn ngang, không ngắt số như "10×15" giữa chừng. 2026-10-02. */
@media (max-width: 640px) {
    .typography table { display: block; max-inline-size: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .typography table:focus-visible, .table-responsive:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
    .typography :is(th, td) { min-inline-size: 7em; overflow-wrap: normal; word-break: normal; }
}

/* Hướng dẫn dưới khung công cụ (15/10/2026): đệm trên 70–120px của .studio-section để lại khoảng trống quá rộng; đệm 0 thì
 * breadcrumb dính mép khối. Breadcrumb cách đỉnh khối như ở trang tài liệu (legal.css: 40px, 24px ≤600px) → dòng "Ảnh được
 * xử lý…" tới breadcrumb 80px (56px điện thoại); cuối khối = --page-end như mọi lớp. */
.cluster-editorial-content { padding-block: 40px var(--page-end); }
@media (max-width: 600px) { .cluster-editorial-content { padding-block-start: 24px; } }
/* Hướng dẫn thu gọn (site.js initGuideCollapse, 15/10/2026): phần ẩn không chừa khoảng trống; khối cuối trước nút mờ dần;
 * nút giữa cột chữ. In ra giấy thì hiện đủ. */
.cluster-editorial-content [hidden] { margin-block: 0 !important; padding-block: 0 !important; border-block-width: 0 !important; }
/* Bảng không nhận content-visibility (không có size containment): khi ẩn tạm cho thành khối để không chiếm chỗ. */
.cluster-editorial-content table[hidden] { display: block; }
.cluster-editorial-content .guide-fade { -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent); mask-image: linear-gradient(to bottom, #000 30%, transparent); }
.cluster-editorial-content .guide-more { display: flex; justify-content: center; }
.guide-more__btn { gap: 10px; }
.link-arrow--down::before { content: "↓"; }
@media print { .cluster-editorial-content [hidden] { display: revert !important; content-visibility: visible !important; } .guide-more { display: none !important; } .guide-fade { -webkit-mask-image: none; mask-image: none; } }
/* Shared tool headings use the available line width. Approved 2026-09-28. */
.page-template-template-tool-cluster .tool-title,
.page-template-template-tool-cluster .cluster-editorial-content :is(h1, h2, h3, h4, h5, h6) {
    text-wrap: wrap;
}

/* Vùng bấm tối thiểu 44 px cho link đứng riêng (không nằm trong đoạn văn), 14/10/2026. Link đơn trên một dòng bù margin âm
 * để bố cục không đổi; mục lục là danh sách dọc nên tăng chiều cao thật (không chồng vùng bấm lên nhau). */
.breadcrumb-item a,
.footer-contact-item a,
.legal-page-content address a,
.article-bento-cta,
.related-post-bento-card a.text-accent { display: inline-flex; align-items: center; gap: .35em; min-block-size: var(--tap-min); margin-block: -11px; }
.core-article-toc li > a { display: flex; align-items: center; min-block-size: var(--tap-min); }

/* Chân trang (15/10/2026): MỘT khối cho cả site. 4 cột cân chiều cao — thương hiệu | Công cụ (9 trang chia 2 cột con = 5 dòng)
 * | Thư viện (5) | Về LamNetAnh (5). Khung --container-wide như đầu trang; logo dùng chung template-parts/layout/brand-logo.php.
 * Mỗi liên kết cao tối thiểu --tap-min (44px). */
.site-footer { border-block-start: 1px solid var(--line); background: var(--paper); color: var(--ink); }
.site-footer__container { inline-size: min(calc(100% - 2 * var(--gutter)), var(--container-wide)); padding-block: 56px 28px; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.9fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px 48px; align-items: start; }
.footer-brand { display: inline-flex; align-items: center; gap: 9px; min-block-size: var(--tap-min, 44px); color: var(--ink); text-decoration: none; }
.footer-brand:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 6px; }
.footer-brand__desc { max-inline-size: 38ch; margin: 10px 0 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.7; }
.footer-facts { display: grid; gap: 10px; margin: 18px 0 0; font-style: normal; }
.footer-fact { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; align-items: start; margin: 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.6; }
.footer-fact svg { inline-size: 16px; block-size: 16px; margin-block-start: 3px; color: var(--ink); opacity: .75; }
.footer-fact a { display: inline-block; padding-block: 3px; color: var(--ink); }
.footer-fact a:hover { color: var(--link-hover); }
.footer-fact--trust { margin-block-start: 10px; }
.footer-heading { margin: 0; color: var(--ink); font-size: var(--text-sm); font-weight: 600; line-height: var(--tap-min, 44px); }
.footer-links { display: grid; margin: 0; padding: 0; list-style: none; }
.footer-links--split { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.footer-links a { display: inline-flex; align-items: center; min-block-size: var(--tap-min, 44px); color: var(--muted); font-size: var(--text-sm); line-height: 1.45; text-decoration: none; }
.footer-links a:hover { color: var(--link-hover); }
.footer-links a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-block-start: 40px; padding-block-start: 20px; border-block-start: 1px solid var(--line); color: var(--muted); font-size: var(--text-xs); }
@media (max-width: 1100px) {
    .footer-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1fr); }
    /* Thương hiệu chiếm một hàng: logo + giới thiệu bên trái, liên hệ bên phải. */
    .footer-col--brand { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 48px; align-items: start; }
    .footer-col--brand > .footer-brand, .footer-col--brand > .footer-brand__desc { grid-column: 1; }
    .footer-col--brand > .footer-brand__info { grid-column: 2; grid-row: 1 / span 2; }
    .footer-col--brand > .footer-brand__info > .footer-facts { margin-block-start: 10px; }
}
@media (max-width: 900px) {
    /* Công cụ chiếm cả hàng (2 cột con), Thư viện và Về LamNetAnh đứng cạnh nhau. */
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
    .footer-col--tools { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .site-footer__container { padding-block: 44px 24px; }
    .footer-col--brand { display: block; }
    .footer-col--brand > .footer-brand__info > .footer-facts { margin-block-start: 18px; }
    .footer-bottom { flex-direction: column; }
}
/* Rất thấp (≤500px, điện thoại xoay ngang): đầu trang 56px ở mọi trang. Đặt cuối tệp để đè min-block-size 76/82px của đầu trang. */
@media (max-height: 500px) {
    .site-nav-wrapper { min-block-size: 56px; }
}
/* Cuối trang = --page-end ở mọi lớp (56/40px; trước: tài liệu 88/56, bài viết 100/100, danh sách và 404 110/64, công cụ 115/70). */
.archive-main-section, .error-404-section, .page-standard-wrapper, .attachment-page-wrapper, .page-fallback-section,
.post-layout-grid.post-layout-grid--after { padding-block-end: var(--page-end); }

/* Khối nội dung dùng chung (15/10/2026): đầu khối (nhãn, H2, giới thiệu) và thẻ danh mục công cụ, cho trang chủ và cuối mỗi trang
 * công cụ (template-parts/tool/catalog.php). Tách nguyên từ layers-home.css (phần .film-proof, .faq-* ở lại đó), giữ thứ tự. */
.home-section-heading h2 { padding-block: .12em; color: #efedf6; background: linear-gradient(120deg,#faf9fc 16%,#b2aebf 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.home-container { width: min(calc(100% - 2 * var(--gutter)), var(--container-wide)); margin-inline: auto; }
.home-section { padding-block: var(--section-space); }
.home-section h2 { font-family: var(--font-display); font-weight: 500; letter-spacing: -.025em; line-height: 1.07; text-wrap: balance; }
.home-section h3 { font-weight: 500; letter-spacing: -.025em; line-height: 1.45; }
.home-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 64px; margin-bottom: 32px; }
.home-section-heading>div { max-width: 740px; }
.home-eyebrow { display: block; color: #b0acba; font: 400 12px/1.7 var(--font-body); margin-bottom: 14px; letter-spacing: 0; }
.home-section-heading h2 { font-size: var(--text-4xl); }
.home-section-intro { color: var(--muted); font-size: var(--text-base); line-height: 1.85; max-width: 420px; flex: 0 1 420px; }
.home-solutions-grid { margin: 0; padding: 0; list-style: none; }
.home-solutions-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; }
.home-solution { min-width: 0; }
.home-solution>img { display: block; width: 100%; height: auto; aspect-ratio: 1.24; object-fit: cover; border-radius: 14px; transition: transform .65s var(--layers-ease),filter .5s ease; }
.home-solution:hover>img,.home-solution:focus-within>img { transform: translateY(-7px); filter: saturate(1.12); }
.home-solution h3 { margin: 20px 0 10px; font-size: var(--text-lg); }
.home-solution h3 a { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; text-decoration: none; }
.home-solution h3 a,.home-solution h3 a:visited { color: var(--ink); }
.home-solution h3 a:hover,.home-solution h3 a:focus-visible { color: var(--link-hover); }
.home-solution h3 span { flex: none; }
.home-solution>p { font-size: var(--text-base); line-height: 1.85; color: var(--muted); }
@media(max-width:1100px) {
    .home-solutions-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px 24px; }
    .home-solution>img { aspect-ratio: 1.6; }
    .home-section-heading { gap: 35px; }
}
@media(max-width:850px) {
    .home-section-heading { display: block; }
    .home-section-intro { margin-top: 20px; max-width: 610px; }
    .home-section-heading h2 { font-size: var(--text-4xl); max-width: 650px; }
}
@media(max-width:600px) {
    .home-section-heading { margin-bottom: 25px; }
    .home-section-heading h2 { font-size: var(--text-4xl); line-height: 1.1; }
    .home-section-intro { font-size: var(--text-base); margin-top: 16px; }
    .home-solutions-grid { gap: 25px 16px; }
    .home-solution>img { aspect-ratio: 1.05; border-radius: 10px; }
    .home-solution h3 { font-size: var(--text-lg); margin-top: 15px; }
    .home-solution>p { font-size: var(--text-base); }
}
@media(max-width:360px) { .home-solutions-grid { grid-template-columns: 1fr; } .home-solution>img { aspect-ratio: 1.5; } .home-solution h3 { font-size: var(--text-lg); } }
/* Cả thẻ bấm được qua link tiêu đề (vùng bấm = cả thẻ). */
.home-solution { position: relative; }
.home-solution h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
/* Liên kết (15/10/2026, chủ site chọn phương án A "Sáng chữ"), MỘT nơi cho cả theme.
 * - Liên kết giao diện (menu, chân trang, mục lục, thẻ, "Đọc tiếp", "Xem tất cả", "Đọc thêm"...): không gạch chân; rê chuột thì chữ
 *   sáng lên (màu :hover khai ở từng nhóm, dùng --link-hover), mũi tên nhích 3px.
 * - Liên kết trong nội dung (thân bài, trang tài liệu, bình luận, câu có liên kết): giữ nét gạch mảnh, mờ, cách chữ 0,25em để không chỉ
 *   dựa vào màu (WCAG 1.4.1); rê chuột thì nét gạch rõ hẳn và chữ sáng lên.
 * Thêm vùng nội dung mới: thêm vào hai danh sách :is() bên dưới. */
a { text-decoration: none; transition: color .15s ease, text-decoration-color .15s ease; }
:is(.typography, .legal-page-content, .comment-content, .home-section-intro, .faq-header, .support-form-note) a:not(.btn, .island-cta-btn) { text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; text-decoration-color: var(--link-line); }
:is(.typography, .legal-page-content, .comment-content, .home-section-intro, .faq-header, .support-form-note) a:not(.btn, .island-cta-btn):hover { color: var(--link-hover); text-decoration-color: currentColor; }
/* Trong vùng nội dung nhưng là điều hướng, dòng "Đọc thêm" đứng riêng hoặc ảnh: liên kết giao diện. */
:is(.typography, .legal-page-content) :is(nav, .support-read-more) a,
:is(.typography, .legal-page-content) a:has(> img:only-child) { text-decoration-line: none; }
.cluster-pill-tags a:hover { background: var(--signal-soft); color: var(--link-hover); }
@media (prefers-reduced-motion: no-preference) {
    .link-arrow { transition: transform .15s ease; }
    a:hover .link-arrow:not(.link-arrow--up) { transform: translateX(3px); }
    a:hover .link-arrow--up { transform: translateY(-3px); }
}