/* Khung công cụ dùng chung (15/10/2026): trang chủ và 9 trang công cụ (body.has-tool, inc/template-content.php). Tách nguyên từ
 * layers-home.css (trước là body.home): khung bo góc của phần đầu, thanh nút, khung kéo-thả, khung xem (thanh trượt / song song),
 * thanh thao tác, dòng quyền riêng tư, các bậc màn thấp. Cỡ H1 vẫn riêng từng loại trang (layers-home.css, layers.css). */
body.has-tool .tool-section { position: relative; isolation: isolate; inline-size: min(calc(100% - 2 * var(--gutter)), var(--container-wide)); margin: 0 auto; padding: 32px 30px 22px; border: 1px solid #343239; border-radius: 24px; background: #0f0e12; }
body.has-tool .tool-section::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; opacity: .12; background: url("../images/layers-grain.svg"); pointer-events: none; }
.layers-ambient { position: absolute; z-index: -2; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.layers-ambient i { position: absolute; width: 760px; height: 540px; border-radius: 50%; background: radial-gradient(ellipse,#64667538,transparent 68%); left: -260px; top: -290px; }
.layers-ambient i+i { left: auto; top: auto; right: -240px; bottom: -240px; background: radial-gradient(ellipse,#8e766a35,transparent 67%); }
body.has-tool .container--tool { inline-size: 100%; max-inline-size: 1320px; }
body.has-tool .tool-layout { grid-template-columns: minmax(0,1fr); gap: 26px; }
body.has-tool .tool-layout>* { min-inline-size: 0; }
body.has-tool .tool-header { max-inline-size: 1020px; text-align: center; }
body.has-tool .tool-edition { display: inline-block; font-size: var(--text-xs); color: #cfccd6; background: #1d1c22; border: 1px solid #42404a; border-radius: 100px; padding: 3px 12px; margin-bottom: 12px; font-weight: 400; }
body.has-tool .tool-title { 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; }
body.has-tool .tool-subtitle { max-inline-size: var(--container-narrow); font-size: var(--text-md); line-height: 1.8; margin-top: 14px; }
body.has-tool .tool-principles { margin-top: 14px; font-size: var(--text-xs); gap: 8px 24px; justify-content: center; }
body.has-tool .tool-chassis__bar { min-block-size: 42px; padding-inline: 20px; }
body.has-tool .tool-dropzone { min-block-size: 0; padding: 20px; }
body.has-tool .tool-card[data-state="empty"] .tool-dropzone { display: grid; min-block-size: max(420px, calc(100vh - 290px)); min-block-size: max(420px, calc(100svh - 290px)); }
body.has-tool .dropzone-inner { min-block-size: 0; padding: 44px 24px 40px; border: 1.5px dashed #4a4252; border-radius: 16px; background: transparent; }
body.has-tool .dropzone-inner:hover { border-color: #89818f; }
body.has-tool .dropzone-icon { inline-size: 44px; block-size: 44px; margin-bottom: 12px; background: none; color: #ded9e9; }
body.has-tool .dropzone-icon svg { inline-size: 38px; block-size: 38px; }
.home-upload-hint { font-size: var(--text-xs); color: #b6b0c2; margin-top: 10px; }
body.has-tool .dropzone-meta { font-size: var(--text-xs); line-height: 1.8; max-inline-size: 370px; margin-top: 16px; }
body.has-tool .dropzone-buttons { margin-top: 20px; gap: 10px; }
body.has-tool .dropzone-buttons .btn { font-size: var(--text-sm); min-block-size: 44px; padding: 10px 20px; }
body.has-tool .privacy-guarantee { margin-top: 18px; max-inline-size: none; }
body.has-tool .privacy-guarantee__inner { padding: 0 6px; background: transparent; }
body.has-tool .privacy-guarantee__content { font-size: var(--text-xs); line-height: 1.7; }
body.has-tool .tool-workspace-active { padding: 0; }
.home-editor-layout { display: grid; grid-template-columns: minmax(0,1fr); }
body.has-tool .home-editor-layout .slider-viewport { min-inline-size: 0; min-block-size: 0; block-size: max(420px, calc(100vh - 290px)); block-size: max(420px, calc(100svh - 290px)); margin: 0; border-radius: 0; background: #0c0b10; }
body.has-tool .home-editor-layout .slider-layer { grid-template: minmax(0,1fr)/minmax(0,1fr); }
body.has-tool .home-editor-layout .slider-canvas { inline-size: auto; block-size: auto; max-inline-size: 100%; max-block-size: 100%; object-fit: contain; }
body.has-tool .mode-side-by-side .slider-container { display: grid; grid-template: minmax(0,1fr)/repeat(2,minmax(0,1fr)); gap: 12px; padding: 12px; }
body.has-tool .mode-side-by-side .slider-layer { position: relative; inset: auto; min-inline-size: 0; background: #15121a; }
body.has-tool .mode-side-by-side .slider-layer--before { order: 0; clip-path: none !important; }
body.has-tool .mode-side-by-side .slider-layer--after { order: 1; }
body.has-tool .mode-side-by-side .slider-divider { display: none; }
body.has-tool .home-editor-layout .tool-controls-bar { display: flex; flex-wrap: wrap; align-items: center; min-inline-size: 0; gap: 8px 16px; padding: 12px 20px; border-bottom: 1px solid #322c3a; }
body.has-tool .home-editor-layout .pro-controls-meta { display: flex; flex-wrap: wrap; gap: 10px; }
body.has-tool .home-editor-layout .engine-mode-toggle,body.has-tool .home-editor-layout .pro-scale-toggle { display: flex; }
body.has-tool .home-editor-layout .engine-mode-btn,body.has-tool .home-editor-layout .pro-scale-btn { flex: none; min-block-size: 44px; font-size: var(--text-xs); padding-inline: 12px; }
body.has-tool .home-editor-layout .engine-mode-btn { gap: 4px; }
body.has-tool .home-editor-layout .image-stats { margin-inline-start: auto; font-size: var(--text-2xs); }
body.has-tool .home-editor-layout .restoration-status { order: 2; flex-basis: 100%; text-align: end; }
body.has-tool .restoration-control label,body.has-tool .restoration-face { font-size: var(--text-xs); }
body.has-tool .restoration-help,body.has-tool .restoration-status { font-size: var(--text-2xs); }
body.has-tool .tool-action-bar { margin: 0; border-radius: 0; padding: 16px 20px; border-top: 1px solid #352d3f; }
@media(max-width:850px) {
    body.has-tool .tool-section { padding: 26px 20px 20px; }
    .home-editor-layout { grid-template-columns: 1fr; }
    body.has-tool .home-editor-layout .slider-viewport { block-size: max(400px, calc(100svh - 320px)); }
    body.has-tool .tool-card[data-state="empty"] .tool-dropzone { min-block-size: 0; }
    body.has-tool .home-editor-layout .restoration-status { text-align: start; }
    body.has-tool .home-editor-layout .image-stats { margin-inline-start: 0; flex-basis: 100%; }
    .layers-ambient i { animation: none; }
}
@media(max-width:600px) {
    body.has-tool .tool-section { padding: 24px 12px 18px; border-radius: 18px; }
    body.has-tool .tool-subtitle { font-size: var(--text-base); line-height: 1.7; margin-top: 12px; }
    body.has-tool .tool-edition { font-size: var(--text-xs); }
    body.has-tool .tool-principles { display: flex; font-size: var(--text-xs); gap: 4px 12px; margin-top: 12px; }
    body.has-tool .tool-layout { gap: 14px; }
    body.has-tool .tool-chassis__bar { min-block-size: 40px; padding-inline: 12px; font-size: var(--text-xs); }
    body.has-tool .tool-dropzone { padding: 8px; }
    body.has-tool .dropzone-inner { padding: 18px 14px 22px; }
    body.has-tool .dropzone-icon { display: none; }
    .home-upload-hint { font-size: var(--text-xs); }
    body.has-tool .dropzone-meta { font-size: var(--text-xs); margin-top: 12px; }
    body.has-tool .dropzone-buttons { margin-top: 12px; flex-wrap: nowrap; }
    body.has-tool .dropzone-buttons .btn { inline-size: auto; font-size: var(--text-sm); padding-inline: 12px; }
    body.has-tool .privacy-guarantee__inner { grid-template-columns: auto 1fr; gap: 10px; }
    body.has-tool .home-editor-layout .slider-viewport { inline-size: 100%; block-size: auto; aspect-ratio: var(--result-ratio, 3 / 4); min-block-size: 240px; max-block-size: calc(100svh - 330px); }
    body.has-tool .home-editor-layout .tool-controls-bar { padding: 12px; }
    body.has-tool .home-editor-layout .pro-controls-meta,body.has-tool .home-editor-layout .engine-mode-toggle,body.has-tool .home-editor-layout .pro-scale-toggle { inline-size: 100%; }
    body.has-tool .home-editor-layout .pro-scale-btn { flex: 1; }
    body.has-tool .home-editor-layout .engine-mode-btn { flex: 1 1 auto; padding-inline: 6px; }
    body.has-tool .tool-action-bar { padding: 12px; }
}
@media (min-width: 601px) and (max-height: 900px) {
    body.has-tool .tool-section { padding-block-start: 18px; }
    body.has-tool .tool-subtitle { margin-top: 10px; font-size: var(--text-base); line-height: 1.6; }
    body.has-tool .tool-principles { margin-top: 10px; }
    body.has-tool .dropzone-inner { justify-content: flex-start; padding-block: 28px 20px; }
    body.has-tool .dropzone-icon { display: none; }
}
@media (max-width: 600px) and (max-height: 820px) {
    body.has-tool .tool-section { padding-top: 12px; }
    body.has-tool .tool-edition { margin-bottom: 8px; }
    body.has-tool .tool-subtitle { margin-top: 8px; font-size: var(--text-sm); line-height: 1.55; }
    body.has-tool .tool-principles { margin-top: 8px; }
    body.has-tool .home-editor-layout .tool-controls-bar { padding-block: 8px; }
    body.has-tool .tool-card[data-state="empty"] .tool-dropzone { padding: 6px; }
    body.has-tool .dropzone-inner { padding-block: 12px 16px; }
    body.has-tool .dropzone-prompt { font-size: var(--text-xl); }
    body.has-tool .dropzone-buttons { margin-top: 10px; }
}
/* Thấp vừa: bỏ 3 dòng cam kết và thanh "Không gian xử lý · Sẵn sàng" (chữ cố định, chỉ trang trí); chữ hướng dẫn tải ảnh giữ đủ. */
@media (max-width: 600px) and (max-height: 680px) {
    body.has-tool .tool-principles,body.has-tool .tool-chassis__bar { display: none; }
}
@media (min-width: 601px) and (max-height: 640px) {
    body.has-tool .tool-principles,body.has-tool .tool-chassis__bar { display: none; }
}
@media (max-height: 500px) {
    body.has-tool .tool-section { padding-top: 10px; padding-bottom: 12px; }
    body.has-tool .tool-edition,body.has-tool .tool-principles { display: none; }
    body.has-tool .tool-subtitle { max-inline-size: 44em; margin-top: 6px; font-size: var(--text-sm); line-height: 1.5; }
    body.has-tool .tool-layout { gap: 10px; }
    body.has-tool .home-editor-layout .tool-controls-bar { padding-block: 6px; }
    body.has-tool .tool-card[data-state="empty"] .tool-dropzone { padding: 8px; }
    body.has-tool .dropzone-inner { padding-block: 12px; }
    body.has-tool .dropzone-prompt { font-size: var(--text-lg); }
    /* Tiêu đề khung tải và dòng nhắc kéo thả chung một hàng khi đủ chỗ (điện thoại xoay ngang), các phần khác mỗi phần một hàng. */
    body.has-tool .dropzone-inner { flex-flow: row wrap; align-items: baseline; justify-content: center; gap: 4px 8px; }
    body.has-tool .dropzone-inner > :not(.dropzone-prompt, .home-upload-hint) { flex-basis: 100%; }
    body.has-tool .home-upload-hint { margin-top: 0; }
    body.has-tool .dropzone-buttons { margin-top: 6px; }
}
@media (max-height: 400px) {
    body.has-tool .tool-subtitle { font-size: var(--text-xs); }
}
@media (max-width: 400px) {
    body.has-tool .home-editor-layout .pro-scale-btn { padding-inline: 6px; }
}
/* Thông báo trong trang thay cho hộp alert() của trình duyệt (app.js notify, 15/10/2026): ở vùng tải ảnh khi chưa có ảnh, ở dòng
 * trạng thái của thanh công cụ khi đang có ảnh. Khung viền + nền nhạt theo loại, biểu tượng vẽ bằng mask nên theo màu chữ. */
body.has-tool :is(.dropzone-status, .restoration-status)[data-tone] { display: flex; gap: 10px; align-items: flex-start; max-inline-size: 560px; margin-inline: auto; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-strong); color: var(--ink); font-size: var(--text-sm); font-weight: 500; line-height: 1.5; text-align: start; }
body.has-tool :is(.dropzone-status, .restoration-status)[data-tone]::before { content: ""; flex: none; inline-size: 18px; block-size: 18px; margin-block-start: 2px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E") center / contain no-repeat; }
body.has-tool :is(.dropzone-status, .restoration-status)[data-tone="error"] { border-color: color-mix(in srgb, var(--danger) 55%, transparent); background: color-mix(in srgb, var(--danger) 9%, var(--paper)); }
body.has-tool :is(.dropzone-status, .restoration-status)[data-tone="error"]::before { color: var(--danger); background: var(--danger); }
body.has-tool :is(.dropzone-status, .restoration-status)[data-tone="info"]::before { background: var(--signal); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.5v.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.5v.01'/%3E%3C/svg%3E"); }
body.has-tool .home-editor-layout .restoration-status[data-tone] { margin-inline: 0; max-inline-size: none; }
/* Chọn AI: cả nhóm cỡ khoá (app.js syncRestorationControls) — mọi nút mờ như nhau, kể cả ×8 (layers.css giữ ×8 sáng khi khoá vì lý do khác). */
body.has-tool .pro-scale-toggle[aria-disabled="true"] .scale-btn:disabled { opacity: .68; }