/* LamNetAnh Apple Product workspace */

.tool-section {
    padding-block: clamp(72px, 8vw, 116px) 72px;
    background: var(--surface);
    color: var(--ink);
}

.tool-section::before { content: none; }
.tool-section .container--tool { max-inline-size: var(--container-wide); }
.tool-layout { display: grid; gap: clamp(44px, 6vw, 68px); }

.tool-header {
    max-inline-size: 920px;
    margin-inline: auto;
    text-align: center;
}

.tool-edition {
    margin: 0 0 16px;
    color: var(--signal);
    font-size: var(--text-xs);
    font-weight: 600;
}

.tool-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-5xl);
    font-weight: 650;
    letter-spacing: -0.075em;
    line-height: 1.25;
    text-wrap: balance;
}

.tool-subtitle {
    max-inline-size: 720px;
    margin: 24px auto 0;
    color: var(--muted);
    font-size: var(--text-md);
    line-height: 1.5;
    text-wrap: pretty;
}

.tool-principles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px 24px;
    margin: 27px 0 0;
    color: var(--muted);
    font-size: var(--text-xs);
    list-style: none;
}

.tool-principles li {
    position: relative;
    padding-inline-start: 16px;
}
.tool-principles li::before {
    content: "";
    position: absolute;
    inset-block-start: 0.48em;
    inset-inline-start: 0;
    inline-size: 7px;
    block-size: 7px;
    border-radius: 50%;
    background: var(--proof);
}

.tool-chassis {
    max-inline-size: none; /* khung công cụ lấp đầy khung rộng, như ở trang chủ (14/10/2026) */
    inline-size: 100%;
    margin-inline: auto;
    overflow: hidden;
    border: 1px solid rgb(0 0 0 / 8%);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: 0 28px 80px rgb(0 0 0 / 11%);
}

.tool-chassis__bar {
    min-block-size: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-inline: 20px;
    border-block-end: 1px solid var(--line);
    background: rgb(250 250 252 / 92%);
    color: var(--muted);
    font-size: var(--text-xs);
}
.tool-chassis__title { color: var(--ink); font-weight: 600; }
.tool-chassis__state { display: inline-flex; align-items: center; gap: 7px; }
.tool-chassis__state::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--proof); }
.tool-card { padding: 0; }

.tool-dropzone {
    min-block-size: 540px;
    padding: 18px;
    background: var(--paper);
}

.dropzone-sheet-head { display: none; }
.dropzone-inner {
    min-block-size: 504px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(40px, 6vw, 72px) clamp(22px, 5vw, 62px) 26px;
    border: 1.5px dashed #b8b8bd;
    border-radius: 20px;
    background: var(--surface);
    text-align: center;
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.tool-dropzone.is-dragover .dropzone-inner,
.dropzone-inner:hover { border-color: var(--signal); background: #fbfdff; }
.tool-dropzone.is-dragover .dropzone-inner { box-shadow: inset 0 0 0 3px var(--signal-soft); }

.dropzone-icon {
    inline-size: 64px;
    block-size: 64px;
    display: grid;
    place-items: center;
    margin-block-end: 22px;
    border-radius: 18px;
    background: var(--paper);
    color: var(--signal);
}
.dropzone-icon svg { inline-size: 30px; block-size: 30px; }

.dropzone-prompt {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 500; /* cùng kiểu ở trang chủ và trang công cụ (14/10/2026) */
    letter-spacing: -0.025em;
    line-height: 1.1;
}

.dropzone-meta { max-inline-size: 60ch; margin: 16px 0 0; color: var(--muted); font-size: var(--text-xs); }
/* Đang mở ảnh HEIC (app.js showIntakeStatus). */
.dropzone-status { margin: 12px 0 0; color: var(--ink); font-size: var(--text-xs); font-weight: 600; }
.kbd-shortcut {
    border: 1px solid var(--control-line);
    border-radius: 6px;
    padding: 2px 7px;
    background: var(--paper);
    color: var(--ink);
    font-size: var(--text-2xs);
    box-shadow: 0 1px 0 rgb(0 0 0 / 6%);
}
.dropzone-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-block-start: 25px; }
/* Máy tính bỏ qua capture: nút chỉ mở lại cửa sổ chọn tệp như "Chọn ảnh", nên chỉ hiện trên màn cảm ứng (mở thẳng camera sau). */
@media (hover: hover) and (pointer: fine) { #btn-camera-capture { display: none; } }
.tool-section .btn { box-shadow: none; }


.privacy-guarantee {
    max-inline-size: 1000px;
    margin: 26px auto 0;
    color: var(--muted);
}
.privacy-guarantee__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 13px;
    align-items: center;
    padding: 14px 18px;
    border-radius: 14px;
    background: var(--paper);
}
.privacy-guarantee__icon { color: var(--proof); }
.privacy-guarantee__content { font-size: var(--text-xs); line-height: 1.5; }

/* Active workspace */
.tool-workspace-active { display: flex; flex-direction: column; padding: 16px; background: var(--paper); }
/* Khung công cụ luôn hiện; vùng giữa đổi theo trạng thái (app.js setStage). */
.tool-card[data-state="empty"] .slider-viewport,
.tool-card[data-state="empty"] .image-stats,
.tool-card[data-state="ready"] .tool-dropzone { display: none; }
.tool-controls-bar { display: grid; gap: 12px; }
.pro-segmented-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding: 4px;
    border-radius: 12px;
    background: #e9e9ed;
    scrollbar-width: thin;
}
.pro-tab {
    min-block-size: 40px;
    flex: 1 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    border-radius: 9px;
    padding: 8px 12px;
    background: transparent;
    color: #515154;
    cursor: pointer;
    font-size: var(--text-xs);
    font-weight: 550;
}
.pro-tab:hover { background: rgb(255 255 255 / 58%); color: var(--ink); }
.pro-tab--active,
.preset-pill--active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 4px rgb(0 0 0 / 12%); }
.pro-tab--active:hover,
.preset-pill--active:hover { background: var(--surface); color: var(--ink); }
.pro-tab:disabled { cursor: not-allowed; opacity: 0.42; }
.pro-tab__icon { display: inline-flex; }
.pro-tab__icon svg { inline-size: 14px; block-size: 14px; }

.pro-controls-meta { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.engine-mode-toggle,
.pro-scale-toggle { display: inline-flex; gap: 3px; padding: 3px; border-radius: 10px; background: #e9e9ed; }
.engine-mode-btn,
.pro-scale-btn {
    min-block-size: 44px;
    min-inline-size: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    border-radius: 7px;
    padding: 7px 11px;
    background: transparent;
    color: #515154;
    cursor: pointer;
    font-size: var(--text-xs);
    font-weight: 600;
}
.engine-mode-btn:hover,
.pro-scale-btn:hover { color: var(--ink); }
.engine-mode-btn--active,
.pro-scale-btn--active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgb(0 0 0 / 12%); }
.engine-mode-btn:disabled,
.pro-scale-btn:disabled { cursor: not-allowed; opacity: 0.42; }
/* Nút bị khóa (vd. ×8 khi xử lý tại thiết bị) không có nền, để không trông như đang được chọn. */
.tool-section .engine-mode-btn:disabled:not(.engine-mode-btn--active),
.tool-section .pro-scale-btn:disabled:not(.pro-scale-btn--active),
.tool-section .zoom-btn:disabled,
.tool-section .view-mode-btn:disabled:not(.view-mode-btn--active) { background: transparent; box-shadow: none; }

.hardware-indicator {
    min-block-size: 40px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--control-line);
    border-radius: 10px;
    padding: 8px 12px;
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    font-size: var(--text-xs);
}
.hardware-indicator:hover { border-color: var(--line-strong); color: var(--ink); }
.hardware-dot { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--proof); }
.hardware-dot--slow { background: var(--warning); }

.restoration-controls {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(220px, 1fr) auto;
    gap: 14px;
    align-items: end;
    padding: 16px;
    border-radius: 14px;
    background: var(--surface);
}
.restoration-control { display: grid; gap: 7px; }
.restoration-control label,
.restoration-face { color: var(--ink); font-size: var(--text-xs); font-weight: 600; }
.restoration-control select {
    inline-size: 100%;
    block-size: 42px;
    border: 1px solid var(--control-line);
    border-radius: 10px;
    padding-inline: 11px;
    background: var(--surface);
    color: var(--ink);
}
.restoration-strength { min-block-size: 32px; inline-size: 100%; accent-color: var(--signal); }
.restoration-face { min-block-size: 42px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.restoration-face input { inline-size: 24px; block-size: 24px; accent-color: var(--signal); }
.restoration-help { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: var(--text-2xs); line-height: 1.5; }
.restoration-status { min-block-size: 1.5em; margin: 0; color: var(--muted); font-size: var(--text-2xs); }
.restoration-status:empty { display: none; }
/* Mạng di động: khách tự chọn tải model mặt (app.js, #btn-face-download). Điện thoại: rộng hết hàng cho dễ bấm. */
.restoration-face-download { justify-self: start; min-block-size: 44px; }
@media (max-width: 640px) { .restoration-face-download { justify-self: stretch; } }

.slider-viewport {
    position: relative;
    min-block-size: 540px;
    margin-block-start: 4px;
    overflow: hidden;
    border-radius: 18px;
    background: #101010;
}
.slider-container { position: relative; inline-size: 100%; block-size: 100%; min-block-size: inherit; overflow: hidden; touch-action: none; }
.slider-layer { position: absolute; inset: 0; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; overflow: hidden; }
.slider-layer--after { z-index: 1; }
.slider-layer--before { z-index: 2; clip-path: inset(0 50% 0 0); }
/* "Vừa khung" = cả ảnh trong khung (như trang chủ, layers-home.css); phóng to bằng transform của slider-compare.js. Trước đây
   max-*: none làm ảnh luôn hiện đúng cỡ điểm ảnh trên trang công cụ nên "Vừa khung" không thu vừa được. */
.slider-canvas { inline-size: auto; block-size: auto; max-inline-size: 100%; max-block-size: 100%; object-fit: contain; transform-origin: center; }
.slider-badge {
    position: absolute;
    inset-block-start: 16px;
    z-index: 4;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgb(0 0 0 / 62%);
    color: #fff;
    font-size: var(--text-2xs);
    font-weight: 600;
    backdrop-filter: blur(12px);
}
.slider-badge--before { inset-inline-start: 16px; }
.slider-badge--after { inset-inline-end: 16px; }
.badge-dot { display: inline-block; inline-size: 6px; block-size: 6px; margin-inline-end: 5px; border-radius: 50%; background: #30d158; }
.slider-divider { position: absolute; inset-block: 0; inset-inline-start: 50%; z-index: 8; inline-size: 2px; background: #fff; cursor: ew-resize; }
.slider-handle {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: 48px;
    block-size: 48px;
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%);
    border: 1px solid rgb(255 255 255 / 76%);
    border-radius: 50%;
    background: rgb(255 255 255 / 88%);
    color: var(--ink);
    box-shadow: 0 4px 16px rgb(0 0 0 / 22%);
    backdrop-filter: blur(14px);
}
.handle-grip-lines { display: flex; gap: 6px; }
.handle-grip-lines span { inline-size: 1px; block-size: 13px; background: currentColor; }

.processing-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: none;
    place-items: center;
    padding: 22px;
    background: rgb(0 0 0 / 72%);
    color: #fff;
    backdrop-filter: blur(18px);
}
.processing-overlay.is-active { display: grid; }

/* Hỏi lại khi chưa có lượt Premium (template-parts/tool/premium-choice.php, app.js showPremiumChoice): phủ lên ảnh gốc như
   lớp "Đang xử lý"; khung trang chủ cao cố định nên hộp CUỘN trong khung thay vì bị cắt. Lúc chờ chỉ hiện ảnh gốc — ẩn kết
   quả và nhãn "Đã xử lý" của ảnh trước. */
.premium-choice { position: absolute; inset: 0; z-index: 21; display: grid; place-items: center; overflow-y: auto; padding: 16px; background: rgb(0 0 0 / 58%); }
.premium-choice__card { inline-size: min(480px, 100%); margin: auto; padding: 18px 20px; border: 1px solid var(--control-line); border-radius: 16px; background: var(--paper); color: var(--ink); }
.premium-choice__title { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: var(--text-lg); font-weight: 600; line-height: 1.35; font-variant-numeric: tabular-nums; text-wrap: balance; }
.premium-choice__title svg { flex: none; color: var(--premium); }
.premium-choice__desc,
.premium-choice__hint { margin: 0 0 14px; font-size: var(--text-sm); line-height: 1.55; color: var(--ink-soft); }
.premium-choice__hint { color: var(--warning); }
.premium-choice__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.premium-choice__actions .btn { display: inline-flex; align-items: center; gap: 6px; min-block-size: 44px; }
.premium-choice__task svg { flex: none; color: var(--premium-deep); }
.tool-card[data-premium="pending"] .slider-layer--after,
.tool-card[data-premium="pending"] .slider-divider,
.tool-card[data-premium="pending"] .slider-badge--after { visibility: hidden; }
.tool-card[data-premium="pending"] .slider-layer--before { clip-path: none; }
@media (max-width: 640px) {
    /* Điện thoại: khung ảnh thấp (theo tỉ lệ ảnh) — khung GIÃN theo hộp hỏi lại (xếp chồng trong lưới, vẫn trong dòng chảy)
       thay vì bắt khách cuộn trong khung mới thấy nút. Id để thắng quy tắc khung của trang chủ (layers-home.css). */
    #tool-card[data-premium="pending"] #slider-viewport { display: grid; block-size: auto; aspect-ratio: auto; max-block-size: none; }
    #tool-card[data-premium="pending"] #slider-viewport > * { grid-area: 1 / 1; }
    #tool-card[data-premium="pending"] .premium-choice { position: relative; inset: auto; overflow: visible; }
}
.processing-card { inline-size: min(420px, 100%); text-align: center; }
.processing-spinner { position: relative; inline-size: 54px; block-size: 54px; margin: 0 auto 20px; }
.spinner-ring { position: absolute; inset: 0; border: 3px solid rgb(255 255 255 / 22%); border-block-start-color: #fff; border-radius: 50%; animation: workbench-spin 800ms linear infinite; }
.spinner-core { display: none; }
@keyframes workbench-spin { to { transform: rotate(360deg); } }
.processing-title { margin: 0; color: #fff; font-size: var(--text-xl); font-weight: 650; letter-spacing: -0.035em; }
.processing-desc { margin: 8px 0 0; color: #d1d1d6; font-size: var(--text-xs); }
.processing-desc:empty { display: none; }
.progress-bar-track { block-size: 5px; margin-block-start: 22px; overflow: hidden; border-radius: 999px; background: rgb(255 255 255 / 24%); }
.progress-bar-fill { block-size: 100%; border-radius: inherit; background: #0a84ff; transition: width 120ms linear; }
.processing-meta { display: flex; justify-content: space-between; margin-block-start: 8px; color: #d1d1d6; font-size: var(--text-2xs); }
.processing-card .btn { margin-block-start: 19px; border-color: rgb(255 255 255 / 55%); background: rgb(255 255 255 / 10%); color: #fff; }

.tool-action-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto minmax(max-content, 1fr);
    align-items: center;
    gap: 12px;
    margin-block-start: 12px;
    padding: 12px;
    border-radius: 14px;
    background: var(--surface);
}
.image-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; color: var(--muted); font-size: var(--text-2xs); }
.stats-dim { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }
.stats-scale-badge { padding: 2px 6px; border-radius: 999px; background: var(--signal-soft); color: var(--signal); font-weight: 700; }
/* Premium (Ala Download): vương miện vàng trên ×4, ×8, AI — mỗi ảnh Premium cần một nhiệm vụ.
   Vàng 11,4:1 trên nền nút tối; nút được chọn có nền sáng (trừ khi rê chuột, layers.css :hover) → vàng đậm 4,7:1. */
.premium-lock { display: inline-flex; align-items: center; margin-inline-start: 4px; color: var(--premium); vertical-align: -1px; }
.engine-mode-btn--active:not(:hover) .premium-lock,
.pro-scale-btn--active:not(:hover) .premium-lock { color: var(--premium-deep); }
.zoom-controls,
.view-mode-selector { display: inline-flex; gap: 3px; padding: 3px; border-radius: 10px; background: #e9e9ed; }
.zoom-controls { grid-column: 2; }
.zoom-btn,
.view-mode-btn {
    min-block-size: 34px;
    border: 0;
    border-radius: 7px;
    padding: 6px 10px;
    background: transparent;
    color: #515154;
    cursor: pointer;
    font-size: var(--text-2xs);
    font-weight: 600;
}
/* justify-content: điện thoại kéo nút giãn hết hàng (.view-mode-selector > * { flex: 1 }) → biểu tượng + chữ phải nằm giữa (chủ site 19/10/2026). */
.view-mode-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.zoom-btn:hover,
.view-mode-btn:hover { color: var(--ink); }
.zoom-btn:disabled,
.view-mode-btn:disabled { cursor: not-allowed; opacity: 0.42; }
.zoom-level { min-inline-size: 74px; display: grid; place-items: center; color: var(--ink); font-size: var(--text-2xs); font-weight: 600; }
.view-mode-selector { grid-column: 3; }
.view-mode-btn--active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgb(0 0 0 / 12%); }
/* Nhóm nút bo tròn hẳn như "Đổi ảnh khác" / "Tải ảnh về" (chủ site duyệt 30/09/2026). */
.engine-mode-toggle, .pro-scale-toggle, .zoom-controls, .view-mode-selector,
.engine-mode-btn, .pro-scale-btn, .zoom-btn, .view-mode-btn { border-radius: 999px; }
/* Nhãn nút một dòng ("Giữ cỡ" bị bẻ đôi ở 360px trên trang chủ, 15/10/2026). */
.engine-mode-btn, .pro-scale-btn { white-space: nowrap; }
.action-buttons { display: flex; grid-column: 4; gap: 8px; justify-self: end; }
/* Màn cảm ứng và màn ≤1100px: nút nhỏ của thanh thao tác (Đổi ảnh, Gửi, Tải, Dừng), nút phóng và nút chế độ xem cao --tap-min. */
@media (max-width: 1100px), (pointer: coarse) {
    .btn--sm, .zoom-btn, .view-mode-btn { min-block-size: var(--tap-min); }
}
.download-dropdown-wrapper { position: relative; }
.download-menu {
    position: absolute;
    inset-block-start: calc(100% + 8px);
    inset-inline-end: 0;
    z-index: 50;
    min-inline-size: 250px;
    display: none;
    overflow: hidden;
    border: 1px solid rgb(0 0 0 / 8%);
    border-radius: 12px;
    background: rgb(255 255 255 / 96%);
    box-shadow: 0 18px 45px rgb(0 0 0 / 16%);
    backdrop-filter: blur(18px);
}
.download-menu.is-open { display: block; }
.download-menu-item {
    display: grid;
    gap: 2px;
    inline-size: 100%;
    border: 0;
    border-block-end: 1px solid var(--line);
    padding: 13px;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    text-align: start;
}
.download-menu-item:last-child { border-block-end: 0; }
.download-menu-item:hover { background: var(--paper); }
.download-menu-item span { color: var(--muted); font-size: var(--text-2xs); }

@media (max-width: 980px) {
    .tool-action-bar { grid-template-columns: 1fr 1fr; }
    .zoom-controls { grid-column: 1; justify-self: start; }
    .view-mode-selector { grid-column: 2; justify-self: end; }
    .action-buttons { grid-column: 1 / -1; justify-self: stretch; }
    .action-buttons > * { flex: 1; }
    .action-buttons .btn { inline-size: 100%; }
}

@media (max-width: 760px) {
    .tool-section { padding-block-start: 58px; }
    .restoration-controls { grid-template-columns: 1fr 1fr; }
    .restoration-face { align-self: center; }
    .slider-viewport { min-block-size: 450px; }
    /* Khung kéo-thả cao bằng khung kết quả ở cùng mốc: chọn ảnh xong khung không nhảy. */
    .tool-dropzone { min-block-size: 450px; }
    .dropzone-inner { min-block-size: 414px; }
}

@media (max-width: 560px) {
    .tool-section { padding-block: 48px 42px; }
    .tool-header { text-align: start; }
    .tool-subtitle { margin-inline: 0; }
    .tool-principles { justify-content: start; gap: 6px 18px; margin-block-start: 18px; }
    .tool-chassis { border-radius: 20px; }
    .tool-chassis__bar { padding-inline: 15px; }
    .tool-dropzone { min-block-size: 360px; padding: 10px; }
    .dropzone-inner { min-block-size: 340px; padding: 24px 15px 16px; border-radius: 14px; }
    .tool-dropzone .dropzone-icon { display: none; }
    .dropzone-buttons { inline-size: 100%; }
    .dropzone-buttons .btn { inline-size: 100%; }
    .privacy-guarantee__inner { grid-template-columns: auto 1fr; align-items: start; }
    .tool-workspace-active { padding: 8px; }
    .pro-controls-meta { display: grid; grid-template-columns: 1fr; }
    .engine-mode-toggle,
    .pro-scale-toggle { inline-size: 100%; }
    .engine-mode-btn,
    .pro-scale-btn { flex: 1; }
    .engine-mode-btn { flex: 1 1 auto; gap: 4px; padding-inline: 6px; }
    .hardware-indicator { justify-content: center; }
    .restoration-controls { grid-template-columns: 1fr; }
    .restoration-help { grid-column: auto; }
    .slider-viewport { min-block-size: 360px; border-radius: 13px; }
    .tool-action-bar { grid-template-columns: 1fr; }
    .zoom-controls,
    .view-mode-selector,
    .action-buttons { grid-column: auto; }
    .zoom-controls,
    .view-mode-selector,
    .action-buttons { inline-size: 100%; justify-self: stretch; }
    .zoom-controls > *,
    .view-mode-selector > * { flex: 1; }
    .zoom-btn--1to1,
    .zoom-btn--reset { font-size: var(--text-2xs); }
    .action-buttons { flex-direction: column; }
    .download-dropdown-wrapper { inline-size: 100%; }
    /* Điện thoại: thu phóng 2 hàng (− mức +, rồi Xem chi tiết · Vừa khung · Khuôn mặt) thay vì 6 nút chữ gãy dòng; vùng bấm 44 px. */
    .zoom-controls { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-radius: 22px; }
    .zoom-controls > * { grid-column: span 2; }
    .zoom-controls .zoom-btn--1to1, .zoom-controls .zoom-btn--reset { grid-column: span 3; }
    .zoom-btn, .view-mode-btn, .action-buttons .btn { min-block-size: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .spinner-ring { animation: none; }
    .progress-bar-fill { transition: none; }
}