/*
 * page.css — KHUNG TRANG của chính tool: nền, cột giữa, nav, đổi ngôn ngữ, màn hình chờ.
 *
 * File thứ ba trong bộ, và là file DUY NHẤT mà WordPress KHÔNG nạp:
 *
 *   ui.css      → form      (nhúng được, scope .aiseo-ui)     — tool + WP
 *   report.css  → báo cáo   (nhúng được, scope .aiseo-report)  — tool + WP
 *   page.css    → khung trang tool                             — CHỈ tool
 *
 * Host nhúng đã có nền, cột và font của riêng nó, nên nạp file này vào WordPress sẽ đè
 * lên trang chủ nhà. Đừng thêm vào plugin.
 *
 * index.php và embed-preview.php cùng nạp file này để hai trang giống nhau tuyệt đối —
 * embed-preview chỉ khác ở chỗ không vẽ nav/hero. Trước đây khung này nằm inline trong
 * index.php; muốn so layout ở embed-preview thì phải chép lại, tức là lại hai bản.
 *
 * Các luật ở đây cố ý dùng selector trần (.card, .btn, body). Chúng CÓ chạm tới fragment,
 * nhưng luôn thua vì ui.css/report.css scope sâu hơn (.aiseo-ui .btn = 0,2,0 > .btn =
 * 0,1,0). Muốn kiểm tra fragment có tự đứng vững không thì mở ?theme=1.
 */

:root{--brand:#2196f3;--brand2:#0ea5e9;--ink:#0b1220;--muted:#334155;--line:#e2e8f0;--bg:#f8fafc;--card:#fff;--green:#16a34a;--amber:#d97706;--red:#dc2626}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;background:radial-gradient(circle at top left,#dbeafe,transparent 35%),linear-gradient(135deg,#f8fafc,#fff);color:var(--ink)}
.wrap{max-width:1180px;margin:0 auto;padding:34px 18px}
.hero{max-width:100%;margin:48px auto 26px;text-align:center}
h1{font-size:clamp(34px,6vw,62px);line-height:1;margin:0 0 14px;letter-spacing:-.05em;color:var(--ink)}
.lead{color:var(--muted);font-size:18px;margin:0 auto;max-width:100%}
.muted{color:var(--muted)}.err{color:var(--red)}

/* Nav + chuyển ngôn ngữ */
.nav{display:flex;justify-content:space-between;align-items:center;gap:12px}
.nav-logo{height:42px;width:auto;object-fit:contain}
.nav-right{display:flex;align-items:center;gap:12px}
.lang-toggle{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:#fff;box-shadow:0 2px 8px rgba(15,23,42,.05)}
.lang-toggle .lang{padding:9px 18px;font-weight:800;font-size:14px;color:var(--muted);text-decoration:none;transition:background .2s,color .2s}
.lang-toggle .lang.active{background:var(--brand);color:#fff}
.lang-toggle .lang:not(.active):hover{background:#f1f5f9}
.icon-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;display:inline-flex;align-items:center;justify-content:center;color:var(--muted);text-decoration:none;box-shadow:0 2px 8px rgba(15,23,42,.05);transition:background .2s,color .2s}
.icon-btn:hover{background:#f1f5f9;color:var(--ink)}

/* Nút + thẻ của trang tool (fragment tự có style scoped, luôn thắng các luật này) */
.btn,.linkbtn{border:0;border-radius:8px;padding:14px 20px;font-weight:850;font-size:15px;background:var(--brand);color:#fff;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px;box-shadow:0 12px 28px rgba(33,150,243,.22)}
.linkbtn.sec{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:none}
.card{background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:8px;padding:22px;margin:18px 0;box-shadow:0 12px 40px rgba(15,23,42,.06)}

/* Màn hình "đang chạy nền" khi mở lại bằng ?job=ID */
.est-hero{max-width:720px;margin:0 auto;text-align:center}
.est-ring{position:relative;width:115px;height:115px;margin:22px auto 12px;display:flex;align-items:center;justify-content:center}
.est-ring .up4d-circle-loader{position:absolute;inset:0}
.est-ring-pct{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:24px;font-weight:900;color:var(--brand);letter-spacing:-.03em;line-height:1}
.up4d-loader.up4d-circle-loader{display:inline-block;width:80px;height:80px;animation:up4d-circle-loader-spin .7s linear infinite;border-width:11px;border-style:solid;border-color:#f3f3f3;border-top-color:#35b5e9;border-right-color:#38b34d;border-bottom-color:#db2327;border-left-color:#f78c27;border-radius:50%}
.up4d-loader.up4d-circle-loader.up4d-loader-lg{width:115px;height:115px;border-width:14px}
@keyframes up4d-circle-loader-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.est-jobid{font-family:ui-monospace,Consolas,monospace;background:#f1f5f9;border-radius:8px;padding:3px 10px;font-size:13px}

@media(max-width:850px){.nav{justify-content:space-between}.nav-logo{height:34px}.hero{margin-top:24px}}