/* Nhật Phúc · giao diện chung cho các web app *.nhatphuc.com (T2 thanh, T3 dọn giao diện, T7 khối Làm tiếp).
   Mọi luật đều nằm dưới html[data-np-app] để không ảnh hưởng nơi khác. */

/* ===== T2 · Thanh Nhật Phúc (chỗ trống giữ sẵn 48px để không giật trang) ===== */
html[data-np-app] body{padding-top:48px!important}
.npb,.npf{--npb-bg:#0b0f17;--npb-panel:#111827;--npb-line:rgba(148,163,184,.18);--npb-text:#e6edf6;--npb-muted:#8fa0b5;--npb-grad:linear-gradient(120deg,#22d3ee 0%,#818cf8 55%,#e879f9 100%);font:500 14px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,"Helvetica Neue",Arial,sans-serif;letter-spacing:normal;text-transform:none;color:var(--npb-text);box-sizing:border-box;text-align:left}
.npb *,.npf *{box-sizing:border-box}
.npb{position:absolute;top:0;left:0;right:0;z-index:2147483000;height:48px;background:var(--npb-bg)}
.npb::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(34,211,238,.5),rgba(129,140,248,.5),rgba(232,121,249,.4),transparent)}
.npb-in{display:flex;align-items:center;gap:8px;height:48px;max-width:1240px;margin:0 auto;padding:0 16px}
.npb a{color:inherit;text-decoration:none}
.npb-home{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:15px;color:#fff!important;text-decoration:none!important;white-space:nowrap}
.npb-mark{width:28px;height:28px;flex-shrink:0}
.npb-sep{color:#475569;font-size:18px;margin:0 2px}
.npb-cur{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:4px 10px 4px 6px;border:1px solid var(--npb-line);border-radius:999px;background:rgba(148,163,184,.08);color:#fff;font:inherit;font-weight:700;cursor:pointer;min-width:0;transition:background .2s,border-color .2s}
.npb-cur:hover,.npb.is-open .npb-cur{background:rgba(148,163,184,.16);border-color:rgba(148,163,184,.35)}
.npb-cur:focus-visible,.npb a:focus-visible,.npf a:focus-visible{outline:2px solid #38bdf8;outline-offset:2px}
.npb-cur__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.npb-cur__ic,.npb-item__ic{display:inline-grid;place-items:center;flex-shrink:0;width:26px;height:26px;border-radius:8px;background:color-mix(in srgb,var(--c) 18%,transparent);color:var(--c)}
.npb-ic{width:16px;height:16px;display:block}
.npb-chev{width:16px;height:16px;color:var(--npb-muted);transition:transform .2s;flex-shrink:0}
.npb.is-open .npb-chev{transform:rotate(180deg)}
.npb-all{margin-left:auto;padding:7px 12px;border-radius:999px;font-weight:700;font-size:13px;color:#cbd5e1!important;white-space:nowrap}
.npb-all:hover{background:rgba(148,163,184,.12);color:#fff!important}
.npb-menu{position:absolute;top:52px;left:50%;transform:translateX(-50%);width:min(680px,calc(100vw - 16px));max-height:calc(100vh - 64px);overflow:auto;padding:8px 14px 14px;background:var(--npb-panel);border:1px solid var(--npb-line);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.npb-menu[hidden]{display:none}
.npb-menu__h{margin:12px 4px 6px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--npb-muted)}
.npb-menu__grid,.npf-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.npb-item{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px;color:var(--npb-text)!important;text-decoration:none!important;transition:background .15s}
.npb-item:hover{background:rgba(148,163,184,.1)}
.npb-item[aria-current]{background:rgba(56,189,248,.1);box-shadow:inset 0 0 0 1px rgba(56,189,248,.35)}
.npb-item .npb-item__ic{width:36px;height:36px;border-radius:10px}
.npb-item .npb-ic{width:19px;height:19px}
.npb-item__tx{display:flex;flex-direction:column;min-width:0}
.npb-item__tx b{font-size:14.5px;font-weight:700;color:#fff}
.npb-item__tx small{font-size:12.5px;line-height:1.35;color:var(--npb-muted);font-weight:500}
.npb-menu__all{display:block;margin-top:10px;padding:10px;border-radius:10px;text-align:center;font-weight:700;color:#7dd3fc!important;background:rgba(56,189,248,.08)}
@media(max-width:640px){
  .npb-in{padding:0 10px;gap:6px}
  .npb .npb-home span,.npb-all{display:none}
  .npb-cur{flex:1;justify-content:flex-start}
  .npb-chev{margin-left:auto}
  .npb-menu__grid,.npf-tools{grid-template-columns:1fr}
}

/* ===== T7 · Khối "Làm tiếp" cuối trang ===== */
.npf{display:block;margin:48px 0 0;padding:40px 0 28px;background:var(--npb-bg);border-top:1px solid var(--npb-line)}
.npf-in{max-width:1080px;margin:0 auto;padding:0 18px}
.npf-head{margin:0 0 14px}
.npf-eyebrow{display:block;margin-bottom:4px;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;background:var(--npb-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.npf-title{margin:0;font-size:20px;line-height:1.3;font-weight:800;color:#fff;letter-spacing:-.01em}
.npf-tools{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.npf-tools .npb-item{background:rgba(148,163,184,.06);border:1px solid var(--npb-line)}
.npf-posts{margin-top:32px}
.npf-posts[hidden]{display:none}
.npf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.npf-post{display:flex;flex-direction:column;gap:8px;color:var(--npb-text)!important;text-decoration:none!important}
.npf-post img,.npf-post__ph{display:block;width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;border-radius:12px;background:#0a1020}
.npf-post__t{font-size:15px;font-weight:700;line-height:1.4;color:#fff}
.npf-post:hover .npf-post__t{color:#7dd3fc}
.npf-post small{font-size:12px;color:var(--npb-muted)}
.npf-base{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:36px;padding-top:18px;border-top:1px solid var(--npb-line)}
.npf-base p{margin:0;flex:1;min-width:220px;font-size:13px;color:var(--npb-muted)}
.npf-base nav{display:flex;flex-wrap:wrap;gap:14px}
.npf-base nav a{font-size:13px;color:#cbd5e1!important;text-decoration:none}
.npf-base nav a:hover{color:#fff!important;text-decoration:underline}
/* chặn style chung của app (footer, nav, h2, p, small, img…) lấn vào khối Nhật Phúc */
html[data-np-app] .npf{display:block!important;position:static!important;width:auto!important;max-width:none!important;margin:48px 0 0!important;padding:40px 0 28px!important;float:none!important;grid-column:1/-1;text-align:left!important}
html[data-np-app] .npf h2,html[data-np-app] .npf p,html[data-np-app] .npb p{margin-left:0;margin-right:0;max-width:none;text-align:left}
html[data-np-app] .npf small,html[data-np-app] .npb small{display:block;text-align:left;margin:0;opacity:1}
html[data-np-app] .npf nav,html[data-np-app] .npb nav{position:static;background:none;border:0;box-shadow:none}
html[data-np-app] .npb-menu{position:absolute!important;background:var(--npb-panel)!important;border:1px solid var(--npb-line)!important}
html[data-np-app] .npf img{max-width:100%;border:0;box-shadow:none}
@media(max-width:760px){.npf-tools{grid-template-columns:1fr}.npf-grid{grid-template-columns:1fr}.npf-post{flex-direction:row;align-items:flex-start;gap:12px}.npf-post img,.npf-post__ph{width:42%;flex-shrink:0}}

/* ===== T3 · Dọn giao diện từng app: công cụ lên đầu, bỏ chữ quảng cáo, ẩn thương hiệu lạ ===== */
/* Tiêu đề trang gọn: chỉ còn H1 cỡ vừa */
html[data-np-app] .hero{padding-top:20px!important;padding-bottom:14px!important;margin-bottom:0!important;min-height:0!important}
html[data-np-app] .hero h1{font-size:clamp(1.45rem,1.1rem + 1.4vw,2.1rem)!important;line-height:1.2!important;margin:0 auto!important;letter-spacing:-.02em!important}
/* Di động: thanh trên đã ghi tên công cụ → khẩu hiệu chỉ giữ cho trình đọc màn hình & máy tìm kiếm */
@media(max-width:640px){
  html[data-np-app=compress] .hero,html[data-np-app=gif] .hero,html[data-np-app=webp] .hero,html[data-np-app=picbatch] .hero,html[data-np-app=extractmp3] .hero{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
}

/* Nén ảnh (compress) */
html[data-np-app=compress] .site-header .brand,html[data-np-app=compress] .site-header nav,html[data-np-app=compress] .extension-link,
html[data-np-app=compress] .hero p,html[data-np-app=compress] .hero .trust-line,html[data-np-app=compress] .hero .eyebrow,
html[data-np-app=compress] #privacy,html[data-np-app=compress] #how,html[data-np-app=compress] body>footer,html[data-np-app=compress] main~footer:not(.npf){display:none!important}
html[data-np-app=compress] .site-header{min-height:0!important;height:auto!important;padding-top:6px!important;padding-bottom:6px!important;justify-content:flex-end!important;border:0!important}
html[data-np-app=compress] .hero h1 span,html[data-np-app=compress] .hero h1 em{display:inline!important}

/* Video sang GIF (gif) & WebP động (webp) */
html[data-np-app=gif] .header .brand,html[data-np-app=webp] .header .brand,
html[data-np-app=gif] .hero .eyebrow,html[data-np-app=gif] .hero p,html[data-np-app=gif] .hero-flower,
html[data-np-app=webp] .hero .eyebrow,html[data-np-app=webp] .hero p,html[data-np-app=webp] .hero .trust,
html[data-np-app=gif] .how-section,html[data-np-app=gif] .why-section,html[data-np-app=gif] #app>footer,html[data-np-app=gif] main~footer:not(.npf),
html[data-np-app=webp] .features,html[data-np-app=webp] .seo-content>.steps,html[data-np-app=webp] .seo-content>h2:first-child,html[data-np-app=webp] .seo-content>h2:nth-of-type(2),html[data-np-app=webp] .seo-content>p,html[data-np-app=webp] main~footer:not(.npf),html[data-np-app=webp] #app>footer{display:none!important}
html[data-np-app=gif] .header,html[data-np-app=webp] .header{min-height:0!important;padding-top:8px!important;padding-bottom:8px!important}

/* Cắt ảnh mạng xã hội (picbatch) */
html[data-np-app=picbatch] .site-header .logo,html[data-np-app=picbatch] .hero-kicker,html[data-np-app=picbatch] .hero p,html[data-np-app=picbatch] .hero-promise,
html[data-np-app=picbatch] #how-it-works,html[data-np-app=picbatch] .site-footer{display:none!important}
html[data-np-app=picbatch] .hero{padding-top:14px!important;padding-bottom:10px!important}
/* D1 · dễ đọc: chữ xám nhạt → đủ tương phản (≥4.5), cam chữ/nút đậm hơn */
html[data-np-app=picbatch]{--muted:#5f6571!important}
html[data-np-app=picbatch] .mode-nav button span,html[data-np-app=picbatch] .mini-drop strong,html[data-np-app=picbatch] .preview-tab-label,html[data-np-app=picbatch] .size-tag,html[data-np-app=picbatch] .upload-caption kbd,
html[data-np-app=picbatch] .format-pills span,html[data-np-app=picbatch] #preview-hint,html[data-np-app=picbatch] .zoom-value,html[data-np-app=picbatch] .panel-heading .eyebrow,html[data-np-app=picbatch] .platform-filters button,
html[data-np-app=picbatch] .preset-card-top>span:not(.brand),html[data-np-app=picbatch] .preset-dimensions,html[data-np-app=picbatch] .preset-dimensions>span,html[data-np-app=picbatch] .custom-size,html[data-np-app=picbatch] .multi-preset-note,
html[data-np-app=picbatch] .fit-options button span,html[data-np-app=picbatch] .fit-description,html[data-np-app=picbatch] .preset-anchor summary,html[data-np-app=picbatch] .safe-toggle .check-line span,html[data-np-app=picbatch] .tiny-tag,
html[data-np-app=picbatch] .preset-bottom-note p,html[data-np-app=picbatch] .output-format span,html[data-np-app=picbatch] .output-quality span,html[data-np-app=picbatch] .output-quality output,html[data-np-app=picbatch] .under-workspace>span,
html[data-np-app=picbatch] .under-workspace .text-button,html[data-np-app=picbatch] .faq-section .eyebrow,html[data-np-app=picbatch] .faq-section>div>p,html[data-np-app=picbatch] .faqs summary,html[data-np-app=picbatch] .size-reference summary{color:#5f6571!important}
html[data-np-app=picbatch] .mode-nav button.active span,html[data-np-app=picbatch] .platform-filters button.active,html[data-np-app=picbatch] .fit-options button.active span{color:#c4471f!important}
html[data-np-app=picbatch] .choose-button{background:#c4471f!important}
html[data-np-app=picbatch] .live-badge{color:#2f7a5f!important}
html[data-np-app=picbatch] .brand.linkedin{background:#40708f!important}
html[data-np-app=picbatch] .favorite{min-width:24px;min-height:24px;display:inline-grid;place-items:center}
/* D1 · chữ trên điện thoại: bản gốc thu nhỏ từ máy tính (7–10px) → tối thiểu 12px, nhãn phụ 11px */
@media(max-width:580px){
  html[data-np-app=picbatch] .mode-nav button,html[data-np-app=picbatch] .preview-heading h2,html[data-np-app=picbatch] .empty-preview>p,html[data-np-app=picbatch] .choose-button,html[data-np-app=picbatch] .upload-caption,
  html[data-np-app=picbatch] .sample-try>div>span,html[data-np-app=picbatch] .sample-try .text-button,html[data-np-app=picbatch] .preset-search input,html[data-np-app=picbatch] .platform-filters button,html[data-np-app=picbatch] .preset-card strong,
  html[data-np-app=picbatch] .custom-size,html[data-np-app=picbatch] .fit-options button,html[data-np-app=picbatch] .fit-description,html[data-np-app=picbatch] .safe-toggle .check-line,html[data-np-app=picbatch] .preset-bottom-note p,
  html[data-np-app=picbatch] .field>span:first-child,html[data-np-app=picbatch] .check-line,html[data-np-app=picbatch] .range-field>span,html[data-np-app=picbatch] .output-format,html[data-np-app=picbatch] .output-format select,
  html[data-np-app=picbatch] .output-quality,html[data-np-app=picbatch] .download-button,html[data-np-app=picbatch] .under-workspace,html[data-np-app=picbatch] .under-workspace .text-button,html[data-np-app=picbatch] .faqs summary,
  html[data-np-app=picbatch] .faqs details p,html[data-np-app=picbatch] .faq-section>div>p,html[data-np-app=picbatch] .size-reference,html[data-np-app=picbatch] .result-summary strong,html[data-np-app=picbatch] .result-summary button,
  html[data-np-app=picbatch] .results-button,html[data-np-app=picbatch] .profile-toolbar button,html[data-np-app=picbatch] .tool-tabs button,html[data-np-app=picbatch] .preset-anchor summary,html[data-np-app=picbatch] table{font-size:12px!important}
  html[data-np-app=picbatch] .preview-tab-label,html[data-np-app=picbatch] .preview-bottom,html[data-np-app=picbatch] .panel-heading .eyebrow,html[data-np-app=picbatch] .faq-section .eyebrow,html[data-np-app=picbatch] .preset-card-top,
  html[data-np-app=picbatch] .preset-dimensions,html[data-np-app=picbatch] .preset-dimensions>span,html[data-np-app=picbatch] .multi-preset-note,html[data-np-app=picbatch] .tiny-tag,html[data-np-app=picbatch] .output-quality output,
  html[data-np-app=picbatch] .format-pills span,html[data-np-app=picbatch] .zoom-value,html[data-np-app=picbatch] .preview-info{font-size:11px!important}
  html[data-np-app=picbatch] .mode-nav button{padding:9px 4px!important;gap:5px!important}
  html[data-np-app=picbatch] .preview-bottom{height:auto!important;min-height:34px!important}
  html[data-np-app=picbatch] .output-quality output{width:auto!important;min-width:26px}
  html[data-np-app=picbatch] .under-workspace>span{max-width:none!important}
  html[data-np-app=picbatch] .output-format,html[data-np-app=picbatch] .output-quality{font-size:11px!important;white-space:nowrap}
  html[data-np-app=picbatch] .preset-dimensions{padding-right:20px}
  html[data-np-app=picbatch] .output-format select{min-width:0!important;width:76px!important;padding:0 4px!important}
  html[data-np-app=picbatch] .output-controls{gap:8px!important}
}

/* Tách MP3 (extractmp3) — đã gọn sẵn: chỉ bỏ dòng trang trí và khối 3 bước */
html[data-np-app=extractmp3] .site-header,html[data-np-app=extractmp3] .hero-eyebrow,html[data-np-app=extractmp3] .how-it-works{display:none!important}
/* D1 · React dựng #root sau khi tải → giữ chỗ để khối hướng dẫn không bị đẩy xuống (CLS 0,79) */
html[data-np-app=extractmp3] #root:empty,html[data-np-app=webp] #app:empty{min-height:100vh}
html[data-np-app=extractmp3] .quality legend span{color:#475569!important}
html[data-np-app=extractmp3] .step-number{font-size:11px!important}
html[data-np-app=extractmp3] :not(.current):not(.complete)>.step-number{color:#475569}

/* Trưa nay ăn gì? (truanayangi) */
html[data-np-app=truanayangi] .site-header .brand,html[data-np-app=truanayangi] .intro .eyebrow,html[data-np-app=truanayangi] body>footer:not(.npf) .footer-mark,html[data-np-app=truanayangi] body>footer:not(.npf) .footer-divider{display:none!important}
html[data-np-app=truanayangi] .site-header{justify-content:flex-end!important}
html[data-np-app=truanayangi] .intro{padding-top:8px!important;margin-top:0!important}

/* ===== C1–C7 · Khối hướng dẫn (np-apps-seo) — dùng màu chữ của app, tự hợp nền sáng/tối ===== */
html[data-np-app] .npg{display:block;max-width:760px;margin:40px auto 8px;padding:24px 20px;border:1px solid color-mix(in srgb,currentColor 14%,transparent);border-radius:18px;background:color-mix(in srgb,currentColor 3%,transparent);text-align:left;font-size:15.5px;line-height:1.65}
html[data-np-app] .npg h2{margin:0 0 10px;font-size:21px;line-height:1.3;font-weight:800;letter-spacing:-.01em;text-align:left}
html[data-np-app] .npg h3{margin:20px 0 8px;font-size:17px;line-height:1.35;font-weight:700;text-align:left}
html[data-np-app] .npg p{margin:0 0 10px;max-width:none;text-align:left}
html[data-np-app] .npg ol,html[data-np-app] .npg ul{margin:0 0 10px;padding-left:22px;list-style-position:outside}
html[data-np-app] .npg ol{list-style:decimal}
html[data-np-app] .npg ul{list-style:disc}
html[data-np-app] .npg li{margin:0 0 6px;padding:0;display:list-item}
html[data-np-app] .npg li::before{content:none}
html[data-np-app] .npg a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;font-weight:600}
html[data-np-app] .npg code{font-size:.9em;padding:1px 5px;border-radius:5px;background:color-mix(in srgb,currentColor 9%,transparent)}
html[data-np-app] .npg table{width:100%;border-collapse:collapse;margin:6px 0 12px;font-size:14.5px}
html[data-np-app] .npg th,html[data-np-app] .npg td{padding:7px 8px;border-bottom:1px solid color-mix(in srgb,currentColor 12%,transparent);text-align:left;vertical-align:top}
html[data-np-app] .npg .npg-chips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 12px;padding:0;list-style:none}
html[data-np-app] .npg .npg-chips li{margin:0;list-style:none}
html[data-np-app] .npg .npg-chips a{display:inline-block;padding:6px 12px;border-radius:999px;border:1px solid color-mix(in srgb,currentColor 22%,transparent);text-decoration:none;font-size:14px}
@media(max-width:640px){html[data-np-app] .npg{margin:28px 12px 8px;padding:18px 16px;font-size:15px}}
html[data-np-app] .npg details{border-top:1px solid color-mix(in srgb,currentColor 12%,transparent);padding:10px 0}
html[data-np-app] .npg summary{cursor:pointer;font-weight:700}
html[data-np-app] .npg details p{margin:8px 0 0}

/* ===== D2/D3 · khung thông báo (đổi HEIC, "Xong rồi" + bước tiếp + chia sẻ) ===== */
.npn{position:fixed!important;z-index:2147483001!important;top:56px!important;right:12px!important;left:auto!important;bottom:auto!important;width:min(360px,calc(100vw - 24px))!important;margin:0!important;box-sizing:border-box;display:flex;flex-direction:column;gap:6px;padding:14px 40px 14px 16px;border:1px solid rgba(148,163,184,.25);border-radius:14px;background:#0f1625;color:#e6edf6;font:500 14px/1.45 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;text-align:left;box-shadow:0 18px 50px -12px rgba(0,0,0,.65);animation:npn-in .25s ease-out}
.npn[hidden]{display:none!important}
.npn *{box-sizing:border-box;font-family:inherit}
.npn b{font-weight:800;font-size:15px;color:#fff}
.npn span{color:#b7c4d6;font-size:13px}
.npn-x{position:absolute;top:6px;right:6px;width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:#b7c4d6;font-size:22px;line-height:1;cursor:pointer;padding:0}
.npn-x:hover{background:rgba(255,255,255,.08);color:#fff}
.npn-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.npn-links a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 12px 6px 6px;border:1px solid rgba(148,163,184,.25);border-radius:10px;background:#141c2e;color:#fff!important;text-decoration:none!important;font-weight:700;font-size:13.5px}
.npn-links a:hover{border-color:#7dd3fc}
.npn-links i{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;background:color-mix(in srgb,var(--c) 22%,transparent);color:var(--c);font-style:normal}
.npn-links i svg{width:16px;height:16px}
.npn-share{margin-top:6px;min-height:40px;padding:8px 12px;border:0;border-radius:10px;background:linear-gradient(120deg,#22d3ee,#818cf8);color:#0a1020;font-weight:800;font-size:13.5px;line-height:1.2;font-family:inherit;cursor:pointer}
@keyframes npn-in{from{opacity:0;transform:translateY(-8px)}}
@media(prefers-reduced-motion:reduce){.npn{animation:none}}