/*
 * ui.css — styling for the ANALYSIS FORM.
 *
 * Companion to report.css: same rules, different half of the screen. Loaded by index.php
 * on the tool domain AND by the WordPress plugin, so an embedded form is visually
 * identical to the one on the tool.
 *
 * Everything is scoped under .aiseo-ui — no bare `body`, `*`, `input`, `table` selectors.
 * Dropping unscoped rules into a host theme overwrites the whole page; see report.css.
 *
 * DESIGN SOURCE: Figma "up4d Group — Website 2026", nodes 4220:31027 (order form),
 * 4220:31416 (order + billing) and 4168:42737 (privacy pop-up). Values below are the
 * design's own tokens; icons come from assets/icons/ (exported from the same file — do
 * not replace them with hand-drawn SVG).
 */

/* Lato là font của design. Nạp ở đây chứ không ở page.css, vì bên WordPress chỉ có
   ui.css/report.css được nạp — để ở page.css thì form nhúng sẽ rơi về font khác và hai
   bên lệch nhau. Nếu chặn được mạng ngoài thì tự động lùi về Inter/hệ thống. */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;500;700;900&display=swap');

.aiseo-ui {
  --brand: #2196f3;
  --ink: #606060;          /* Text/Primary */
  --muted: #606060;
  --holder: #bebebe;       /* Text/Text Holder */
  --line: #dfdfdf;         /* Border/Gray */
  --green: #42a245;        /* Secondary Green */
  --red: #ef4444;          /* Status/Error */
  --panel: rgba(255, 255, 255, .85);

  --aiseo-font: Lato, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* BỀ RỘNG KHUNG — đổi ở ĐÂY, đúng một chỗ.
   *
   * Bốn khối phải luôn bằng nhau: dải tab, panel, khối kết quả, thanh tiến độ. Trước đây
   * mỗi khối ghi 800px riêng, nên sửa một chỗ là lệch cột ngay — đã dính đúng lỗi đó khi
   * .aiseo-result để width:100% còn tab thì 800px: khối kết quả kéo dài hết bề ngang khung
   * chủ nhà, thò ra hai bên so với form.
   *
   * Muốn theo đúng Figma (4100:3602 vẽ mọi khối rộng 800px) thì đổi lại 800px. */
  --aiseo-w: 1140px;

  color: var(--ink);
  font-family: var(--aiseo-font);
  font-size: 16px;
  line-height: 1.5;
}
.aiseo-ui label, .aiseo-ui p, .aiseo-ui span, .aiseo-ui div,
.aiseo-ui button, .aiseo-ui strong, .aiseo-ui b, .aiseo-ui a { font-family: var(--aiseo-font); }
.aiseo-ui *,
.aiseo-ui *::before,
.aiseo-ui *::after { box-sizing: border-box; }

/* [hidden] PHẢI luôn thắng.
 *
 * Trình duyệt ẩn [hidden] bằng `display:none` trong stylesheet mặc định, mà bất kỳ quy
 * tắc nào của ta đặt `display:flex/grid` đều đè lên nó — khối vẫn hiện dù đang hidden.
 * Đã dính lỗi này ba lần (.pkg-banner, .billing, .aiseo-modal đều từng phải vá riêng),
 * lần thứ tư là màn hình cảm ơn hiện ra trước khi khách bấm gửi.
 *
 * Đây là chỗ DUY NHẤT xử lý việc đó — thêm khối mới có display:flex thì không phải nhớ
 * vá gì nữa. !important là bắt buộc: selector một class bất kỳ đã có độ ưu tiên cao hơn
 * `[hidden]`, nên không có cách nào thắng bằng specificity mà không dựng selector quái dị.
 */
.aiseo-ui [hidden] { display: none !important; }

/* ── Shell ───────────────────────────────────────────────────────────────── */
/* CỐ Ý KHÔNG có nền/bo góc/đệm. Design (Figma 4220:31027) vẽ khối này trên nền xám
   #f3f5f7 bo 20px, nhưng phần nền đó do trang chủ nhà lo — bên WordPress là section của
   Elementor. Fragment mà tự vẽ nền thì sẽ chồng hai lớp nền lồng nhau.
   Chỉ còn nhiệm vụ xếp dọc và canh giữa. */
.aiseo-ui .aiseo-shell {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}

/* ── Top tabs: Order / Analyze / Report history ──────────────────────────── */
.aiseo-ui .aiseo-ftabs { display: flex; gap: 8px; width: var(--aiseo-w); max-width: 100%; }
.aiseo-ui .aiseo-ftab {
  flex: 1 0 0; min-width: 0; height: 48px; padding: 15px;
  border: 1px solid var(--line); background: #fff; border-radius: 8px;
  font: inherit; font-weight: 700; font-size: 16px; line-height: 1;
  color: var(--ink); cursor: pointer; text-align: center;
}
.aiseo-ui .aiseo-ftab.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.aiseo-ui .aiseo-fpanel { display: none; width: var(--aiseo-w); max-width: 100%; }
.aiseo-ui .aiseo-fpanel.active { display: block; }

/* ── Form card ───────────────────────────────────────────────────────────── */
.aiseo-ui .aiseo-form {
  background: var(--panel); border: 0; border-radius: 16px;
  padding: 32px 24px; display: flex; flex-direction: column; gap: 16px;
  box-shadow: none;
}

/* ── Fields ──────────────────────────────────────────────────────────────── */
.aiseo-ui .fld { display: flex; flex-direction: column; gap: 6px; }
.aiseo-ui .fld > label {
  font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--ink);
  text-transform: uppercase; letter-spacing: 0;
  display: flex; align-items: center; gap: 6px; min-height: 26px;
}
/* Dấu sao đỏ cho trường bắt buộc — design dùng ký tự thật, không phải ::after */
.aiseo-ui .req { color: var(--red); font-weight: 700; }

/* !important ONLY on the form controls, and only for the handful of properties that
   decide whether the field is usable. Scoping alone cannot win against a host theme that
   writes `input { border: … !important }` — and several page-builder themes do. Nothing
   else in this file uses !important; do not spread it. */
.aiseo-ui input[type="text"],
.aiseo-ui input[type="email"],
.aiseo-ui input[type="search"],
.aiseo-ui input:not([type]),
.aiseo-ui select,
.aiseo-ui textarea {
  width: 100% !important;
  font-family: inherit;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: 4px !important;
  padding: 10px 19px !important;
  background: #fff !important;
  box-shadow: none !important;
  height: 44px;
  -webkit-appearance: none; appearance: none;
}
.aiseo-ui input::placeholder,
.aiseo-ui textarea::placeholder { color: var(--holder); opacity: 1; }
/* Mũi tên của select là icon export từ Figma, không phải mũi tên mặc định của trình duyệt
   (mỗi hệ điều hành vẽ một kiểu → nhúng vào host sẽ khác design). */
.aiseo-ui select {
  background-image: url('icons/chevron-down.svg') !important;
  background-repeat: no-repeat !important;
  background-position: right 19px center !important;
  background-size: 16px 9px !important;
  padding-right: 48px !important;
  cursor: pointer;
}
.aiseo-ui textarea {
  height: auto; min-height: 120px; resize: vertical;
  padding: 15px 17px !important;
  font-family: ui-monospace, Menlo, Consolas, monospace !important;
  font-size: 13.5px !important;
}
.aiseo-ui input:focus,
.aiseo-ui select:focus,
.aiseo-ui textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
/* Gói bị voucher khoá: vẫn đọc được rõ (không làm mờ chữ), chỉ báo là không đổi được. */
.aiseo-ui select:disabled {
  background-color: #f1f5f9 !important; color: var(--ink) !important;
  opacity: 1; cursor: not-allowed;
}

.aiseo-ui .row3 {
  display: grid; grid-template-columns: 230px minmax(0, 1fr) 178px;
  gap: 16px; align-items: start;
}
.aiseo-ui .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* Ba cot BANG NHAU — hang Name / Email / Country. Khac .row3 (230px/1fr/178px) dung cho
   hang code/goi/ngon ngu: o do ba o co do dai noi dung rat khac nhau, con o day thi khong. */
.aiseo-ui .row3eq { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.aiseo-ui .muted { color: var(--ink); }
.aiseo-ui .err   { color: var(--red); }
.aiseo-ui .hr { height: 1px; background: var(--line); border: 0; margin: 0; width: 100%; }

/* ── Voucher feedback + package lock ─────────────────────────────────────── */
.aiseo-ui .code-msg { font-size: 14px; line-height: 1.4; min-height: 18px; }
.aiseo-ui .code-msg.ok  { color: var(--green); font-weight: 700; }
.aiseo-ui .code-msg.bad { color: var(--red);   font-weight: 700; }
.aiseo-ui .code-saved { font-size: 14px; margin-top: 6px; }
.aiseo-ui .code-saved a { color: var(--brand); text-decoration: underline; }
/* Dòng xanh lá xác nhận voucher — canh trái cho thẳng mép ô code ngay phía trên. */
.aiseo-ui .voucher-ok { color: var(--green); font-size: 14px; line-height: 1.4; text-align: left; margin: 0; }
.aiseo-ui .pkg-lock {
  background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af;
  border-radius: 4px; padding: 12px 15px; font-size: 14px; font-weight: 700;
}
/* Hậu tố cạnh nhãn URL ("Max 1 Page(s)") — design để chữ thường, không đậm. */
.aiseo-ui .pkg-hint { text-transform: none; letter-spacing: normal; font-weight: 400; font-size: 14px; }

/* Dải nhắc gói ở tab Analyze (Figma 4220:31652) — thay cho 3 ô code/gói/ngôn ngữ. */
.aiseo-ui .pkg-banner {
  width: 100%; min-height: 48px; display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-radius: 8px;
  background: #e9f3ff; border: 1px solid #3b82f6;
  color: var(--brand); font-size: 14px; font-weight: 700; line-height: 1.5;
}
/* Trạng thái "chưa có code" không có trong design — phải tự thêm, nếu không khách vào
   thẳng tab Analyze sẽ thấy một dải trống và không biết phải làm gì. Màu vàng để phân
   biệt rõ với dải xanh báo đã khoá gói. */
.aiseo-ui .pkg-banner.empty {
  background: #fffbeb; border-color: #fcd34d; color: #92400e; font-weight: 400;
}
.aiseo-ui .pkg-banner.empty .link-b { color: inherit; }

/* ── Payment method cards ────────────────────────────────────────────────── */
/* Ba phuong thuc xep DOC, moi cai mot hang. Nam ngang thi nhan dai cua dong
   "Request an invoice for foreign or Swiss countries" bi bop con vai chu moi dong. */
/* Figma 4619:18509 — ba dong doc, cach nhau 16px. */
.aiseo-ui .pay-grid { display: flex; flex-direction: column; gap: 16px; align-items: stretch; }
.aiseo-ui .pay {
  flex: 0 0 auto; min-width: 0; display: flex; align-items: center; gap: 8px;
  min-height: 56px; padding: 10px 20px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 4px; background: #fff;
  font-size: 14px; line-height: 1.5; color: var(--ink);
}
/* Theme cua host quyet dinh lai bo cuc cua dong nay neu khong ghim.
   Da gap that tren production: theme dat `label { justify-content: space-between;
   text-align: right }` cho moi <label> trong form -> nut tron dat mep trai, logo bi day
   ra GIUA, nhan bay sang mep PHAI. Tai hien duoc y het bang dung hai dong CSS do.
   Chi ghim dung bon thuoc tinh quyet dinh bo cuc, khong rai !important cho thu khac. */
.aiseo-ui .pay {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
}
/* Nhan an het cho con lai va luon canh trai — khong thi no van bi day sang phai. */
.aiseo-ui .pay > span:last-child { flex: 1 1 auto; text-align: left !important; }
.aiseo-ui .pay input { position: absolute; opacity: 0; width: 0; height: 0; }
/* Logo phuong thuc thanh toan — file that export tu Figma, khong ve lai bang SVG.
   object-fit:cover vi anh PayPal rong 738x414: design cat lay dung phan dau P o giua. */
.aiseo-ui .pay-logo {
  flex: 0 0 auto; width: 32px; height: 32px;
  object-fit: cover; object-position: center;
  border-radius: 2px;
}
/* Nút tròn dùng đúng hai file icon đã export: rỗng và đã chọn. */
.aiseo-ui .pay .dot {
  flex: 0 0 auto; width: 24px; height: 24px;
  background: url('icons/radio-off.svg') center/24px 24px no-repeat;
}
.aiseo-ui .pay input:checked ~ .dot {
  background-image: url('icons/radio-on.svg');
  background-size: 19.5px 19.5px;
}
.aiseo-ui .pay input:focus-visible ~ .dot { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ── Check boxes (consent) ───────────────────────────────────────────────── */
.aiseo-ui .cbx { display: flex; align-items: flex-start; gap: 8px; font-size: 16px; line-height: normal; }
.aiseo-ui .cbx input { position: absolute; opacity: 0; width: 0; height: 0; }
.aiseo-ui .cbx .box {
  flex: 0 0 auto; width: 24px; height: 24px; position: relative; cursor: pointer;
}
.aiseo-ui .cbx .box::before {
  content: ""; position: absolute; inset: 3px;
  border: 1px solid var(--line); border-radius: 2.667px; background: #fff;
}
.aiseo-ui .cbx input:checked ~ .box::before { background: var(--brand); border-color: var(--brand); }
.aiseo-ui .cbx input:checked ~ .box::after {
  content: ""; position: absolute; inset: 9px 7px 8px 7px;
  background: url('icons/check.svg') center/12px 9px no-repeat;
}
.aiseo-ui .cbx input:focus-visible ~ .box { outline: 2px solid var(--brand); outline-offset: 2px; }
.aiseo-ui .cbx a, .aiseo-ui .link-b {
  color: inherit; font-weight: 700; text-decoration: underline; cursor: pointer;
  background: none; border: 0; padding: 0; font: inherit;
}
.aiseo-ui .link-blue { color: var(--brand); font-weight: 700; text-decoration: underline; }

/* ── Billing information (chỉ hiện khi chọn "Request an invoice") ────────── */
.aiseo-ui .billing {
  border: 1px solid var(--line); border-radius: 4px; background: #fff;
  padding: 21px 25px; display: flex; flex-direction: column; gap: 20px;
}
.aiseo-ui .billing-head {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: 0; padding: 0 24px; font: inherit;
  font-weight: 700; font-size: 16px; color: var(--ink); cursor: pointer;
}
.aiseo-ui .billing-head .chev {
  margin-left: auto; width: 24px; height: 24px; flex: 0 0 auto;
  background: url('icons/chevron-up.svg') center/16px 9px no-repeat;
}
.aiseo-ui .billing-head[aria-expanded="false"] .chev { background-image: url('icons/chevron-down.svg'); }
.aiseo-ui .billing-body {
  border: 1px solid var(--line); border-radius: 8px; padding: 24px;
  display: flex; flex-direction: column; gap: 16px;
}
/* Nhãn trong khối hoá đơn KHÔNG in hoa và không đậm — design cố ý khác nhãn bên ngoài. */
.aiseo-ui .billing-body .fld > label {
  text-transform: none; font-weight: 400; min-height: 0;
}
.aiseo-ui .billing-body input,
.aiseo-ui .billing-body select { border-radius: 8px !important; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.aiseo-ui .btn {
  border: 0; border-radius: 8px; padding: 14px 20px; font: inherit;
  font-weight: 700; font-size: 16px; line-height: 1; cursor: pointer;
  background: var(--brand); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none;
}
.aiseo-ui .btn:hover { filter: brightness(1.05); color: #fff; }
.aiseo-ui .btn[disabled] { opacity: .5; cursor: not-allowed; filter: none; }
.aiseo-ui .btn.sec { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.aiseo-ui .btn.sec:hover { background: #f1f5f9; color: var(--ink); }
.aiseo-ui .btn-lg { height: 56px; padding: 8px 36px 8px 44px; font-size: 16px; }
/* "Start analysis" màu xanh lá — Figma 4220:31652 và 4220:33649 đều vẽ vậy. Cố ý khác
   nút xanh dương ở step 1: một bên là đặt hàng, một bên là chạy phân tích. Phần "hai tab
   giống nhau" nằm ở dải nhắc gói, không phải ở nút. */
.aiseo-ui .btn-green { background: var(--green); }
.aiseo-ui .btn-green:hover { background: var(--green); filter: brightness(1.06); }
/* Nút đọc sitemap: rộng cố định 274px, cao 48px, chữ 14px (Figma 4220:31673). */
.aiseo-ui .btn-sitemap {
  width: 274px; max-width: 100%; height: 48px; padding: 14px 20px; font-size: 14px;
}
/* Icon trong nút là file export, tô trắng sẵn nên không cần đổi màu. */
.aiseo-ui .btn .ico { width: 20px; height: 20px; flex: 0 0 auto; }
.aiseo-ui .btn .ico-arrow  { background: url('icons/arrow-right.svg') center/20px 20px no-repeat; }
.aiseo-ui .btn .ico-search { background: url('icons/search.svg') center/20px 20px no-repeat; }
.aiseo-ui .form-actions { display: flex; justify-content: center; padding-top: 10px; }
.aiseo-ui .submit-hint { text-align: center; font-size: 14px; margin: 0; }
.aiseo-ui .submit-hint.ready { color: var(--green); font-weight: 700; }
.aiseo-ui .center { text-align: center; }

/* ── Sitemap picker ──────────────────────────────────────────────────────── */
.aiseo-ui .sm-actions {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  justify-content: center; margin-top: 4px;
}
.aiseo-ui .url-help { text-align: center; font-size: 14px; line-height: 1.4; }
/* ── Ô chọn có tìm kiếm (form.js dựng, thay cho select2) ─────────────────────
   Nút bấm phải trông GIỐNG HỆT một <select> bình thường: cùng chiều cao, cùng viền, cùng
   mũi tên. Lệch một chút là hàng Country trông như bị vỡ so với ô ZIP/City bên cạnh. */
.aiseo-ui .aiseo-combo { position: relative; }
/* Select thật bị ẩn bằng CSS, KHÔNG bằng [hidden]: luật kiểm tra ô bắt buộc bỏ qua mọi thứ
   nằm trong [hidden], nên ẩn kiểu kia là ô Country âm thầm hết bắt buộc. */
.aiseo-ui .aiseo-combo > select { display: none !important; }
.aiseo-ui .combo-btn {
  width: 100%; display: flex; align-items: center; gap: 8px;
  font-family: inherit; font-size: 14px; line-height: 1.5; text-align: left;
  color: var(--ink); background: #fff; cursor: pointer;
  border: 1px solid var(--line); border-radius: 4px;
  padding: 10px 19px; height: 44px;
}
.aiseo-ui .billing-body .combo-btn { border-radius: 8px; }
.aiseo-ui .combo-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
/* Bị ghim cứng (TWINT ⇒ Thuỵ Sĩ): vẫn ĐỌC ĐƯỢC, chỉ mất vẻ bấm được.
   Không làm mờ chữ như placeholder — giá trị này có thật và đang tính thuế, đọc không ra
   thì khách không biết mình đang bị tính 8.1% theo nước nào. */
.aiseo-ui .aiseo-combo.locked .combo-btn {
  background: var(--soft, #f3f7fa); cursor: not-allowed; color: var(--ink);
}
.aiseo-ui .aiseo-combo.locked .combo-caret { opacity: .35; }
.aiseo-ui .combo-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Chưa chọn gì thì chữ mờ như placeholder của input — cùng một tín hiệu thị giác. */
.aiseo-ui .combo-label.is-empty { color: var(--holder); }
.aiseo-ui .combo-caret {
  flex: 0 0 auto; width: 16px; height: 9px;
  background: url('icons/chevron-down.svg') center/16px 9px no-repeat;
}
.aiseo-ui .combo-pop {
  position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
  padding: 8px; display: flex; flex-direction: column; gap: 8px;
}
.aiseo-ui .combo-search { height: 38px !important; padding: 8px 12px !important; }
.aiseo-ui .combo-list {
  list-style: none; margin: 0; padding: 0;
  /* 264 nước — không giới hạn chiều cao thì danh sách dài hơn cả màn hình. */
  max-height: 260px; overflow-y: auto;
}
.aiseo-ui .combo-item {
  padding: 9px 12px; border-radius: 6px; cursor: pointer;
  font-size: 14px; line-height: 1.4; color: var(--ink);
}
.aiseo-ui .combo-item:hover,
.aiseo-ui .combo-item.act { background: #eef4fb; }
.aiseo-ui .combo-item.sel { background: var(--brand); color: #fff; font-weight: 700; }
.aiseo-ui .combo-empty { margin: 0; padding: 10px 12px; font-size: 14px; color: var(--holder); }

/* ── Bang tien o tab Order ───────────────────────────────────────────────────
   Khach PHAI thay so tien truoc khi bam. Truoc day form khong hien gia o dau ca. */
.aiseo-ui .order-total {
  border: 1px solid var(--line); border-radius: 8px; background: #f8fafc;
  padding: 14px 18px; display: flex; flex-direction: column; gap: 8px;
}
.aiseo-ui .ot-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--ink); }
.aiseo-ui .ot-row .ot-lbl { color: var(--muted, #475569); }
/* Tong la con so khach thuc su tra - phai noi bat hon hai dong tren. */
.aiseo-ui .ot-sum { border-top: 1px solid var(--line); padding-top: 8px; font-size: 16px; font-weight: 700; }
.aiseo-ui .ot-sum .ot-lbl { color: var(--ink); }

.aiseo-ui .fld-help { margin: 0; font-size: 14px; line-height: 1.4; color: var(--ink); }
.aiseo-ui .sitemap-picker {
  margin-top: 10px; border: 1px solid var(--line); border-radius: 4px;
  background: #fff; padding: 12px 14px;
}
.aiseo-ui .sitemap-picker .sm-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin-bottom: 8px; flex-wrap: wrap;
}
.aiseo-ui .sitemap-picker .sm-list {
  max-height: 280px; overflow: auto; display: flex; flex-direction: column; gap: 2px;
}
.aiseo-ui .sitemap-picker label.sm-row {
  display: flex; gap: 9px; align-items: flex-start; padding: 6px 8px;
  border-radius: 8px; font-size: 13px; cursor: pointer; word-break: break-all;
  text-transform: none; letter-spacing: normal; font-weight: 400; color: var(--ink);
}
.aiseo-ui .sitemap-picker label.sm-row:hover { background: #f1f5f9; }
.aiseo-ui .sitemap-picker input[type="checkbox"] {
  width: 16px; height: 16px; margin-top: 1px; flex-shrink: 0; accent-color: var(--brand);
}
.aiseo-ui .sitemap-picker .sm-search {
  width: 100%; border: 1px solid var(--line); border-radius: 4px;
  padding: 9px 12px; font: inherit; font-size: 13px; margin-bottom: 8px; height: auto;
}
.aiseo-ui .sitemap-picker .sm-warn {
  background: #fef3c7; border: 1px solid #fcd34d; color: #92400e;
  border-radius: 8px; padding: 9px 12px; font-size: 13px; font-weight: 600; margin-bottom: 8px;
}
.aiseo-ui .sitemap-picker .sm-warn.sm-full {
  background: #fee2e2; border-color: #fca5a5; color: #b91c1c;
}
.aiseo-ui .sitemap-picker .sm-guide {
  background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af;
  border-radius: 8px; padding: 10px 13px; font-size: 13.5px; line-height: 1.55;
  margin-bottom: 10px;
}
.aiseo-ui .sitemap-picker .sm-guide b,
.aiseo-ui .sitemap-picker .sm-guide strong { color: var(--brand); }
.aiseo-ui .sitemap-picker .sm-guide ol {
  margin: 6px 0 0; padding-left: 22px; list-style: decimal;
}
.aiseo-ui .sitemap-picker .sm-guide li { margin: 2px 0; }
.aiseo-ui .sitemap-picker .sm-count { font-size: 13px; color: var(--ink); }
.aiseo-ui .sitemap-picker label.sm-row:has(input:disabled) { opacity: .45; cursor: not-allowed; }

/* ── Màn hình cảm ơn (Figma 4373:13945) ──────────────────────────────────────
   Cùng "hộp" với form Analyze (nền panel, bo 16px, padding 32/24) vì nó THAY CHỖ form —
   nếu dựng nền khác thì lúc chuyển màn hình cả khối nhảy kích thước. */
.aiseo-ui .aiseo-thanks {
  background: var(--panel); border-radius: 16px; padding: 32px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 40px;
  width: 100%; text-align: center;
}
.aiseo-ui .aiseo-thanks .thanks-title {
  margin: 0; font-size: 30px; font-weight: 700; line-height: 1.2; color: var(--ink);
}
.aiseo-ui .aiseo-thanks .thanks-copy {
  margin: -24px 0 0; font-size: 16px; font-weight: 500; line-height: 24px; color: var(--ink);
}
/* Khung cố định 271×240 đúng như Figma; ảnh lấp đầy khung, không để auto (SVG sẽ nở ra
   theo kích thước nội tại và phá layout). */
.aiseo-ui .aiseo-thanks .thanks-art {
  width: 271px; height: 240px; max-width: 100%; flex: 0 0 auto; display: block;
}
.aiseo-ui .aiseo-thanks .thanks-actions {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
}
.aiseo-ui .aiseo-thanks .thanks-actions .btn-lg {
  width: auto; height: 48px; padding: 8px 20px;
}

/* ── Khối phương thức thanh toán bị khoá bởi voucher ─────────────────────────
   Mờ đi + không bấm được, nhưng CHỮ vẫn đủ đậm để đọc: khách phải hiểu là "không cần
   trả tiền", không phải "chỗ này hỏng". */
.aiseo-ui .pay-fld.locked .pay-grid { opacity: .55; pointer-events: none; }
.aiseo-ui .pay-fld.locked .pay { background: #f1f5f9; }
.aiseo-ui .pay-locked-msg {
  margin: 0; color: var(--green); font-size: 14px; font-weight: 700; line-height: 1.4; text-align: left;
}

/* ── Màn hình đang phân tích (luồng voucher) ─────────────────────────────────
   Cùng hộp với form Analyze để lúc chuyển màn hình khối không nhảy kích thước. */
.aiseo-ui .aiseo-loading {
  background: var(--panel); border-radius: 16px; padding: 32px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  width: 100%; text-align: center;
}
.aiseo-ui .aiseo-loading .load-title {
  margin: 0; font-size: 30px; font-weight: 700; line-height: 1.2; color: var(--ink);
}
.aiseo-ui .aiseo-loading .load-meta,
.aiseo-ui .aiseo-loading .load-copy {
  margin: 0; font-size: 16px; font-weight: 500; line-height: 24px; color: var(--ink);
}
.aiseo-ui .aiseo-loading .load-meta { margin-top: -12px; }
/* Vòng chờ 4 màu + số ở giữa — chép nguyên hình dạng của .est-ring/.up4d-circle-loader
   trong page.css (màn hình chờ cũ của index.php). PHẢI định nghĩa lại ở đây chứ không
   dùng chung: WordPress chỉ nạp ui.css/report.css, page.css là phần khung riêng của trang
   tool nên bên nhúng sẽ không có gì để kế thừa.

   Vòng quay ĐỀU, không vẽ theo phần trăm: phần trăm chỉ nhích khi xong trọn một trang nên
   một cung tiến độ sẽ đứng im hàng phút, nhìn y như hỏng. Tiến độ do con số ở giữa lo. */
.aiseo-ui .load-ring {
  position: relative; width: 115px; height: 115px;
  display: flex; align-items: center; justify-content: center;
}
.aiseo-ui .load-ring .load-ring-spin {
  position: absolute; inset: 0;
  border: 14px solid #f3f3f3;
  border-top-color: #35b5e9;
  border-right-color: #38b34d;
  border-bottom-color: #db2327;
  border-left-color: #f78c27;
  border-radius: 50%;
  animation: aiseo-ring-spin .7s linear infinite;
}
.aiseo-ui .load-ring .load-ring-pct {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: 24px; font-weight: 900; line-height: 1;
  letter-spacing: -.03em; color: var(--brand);
}
@keyframes aiseo-ring-spin {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .aiseo-ui .load-ring .load-ring-spin { animation-duration: 3s; }
}

/* ── Trạng thái "đang chờ" dùng chung ────────────────────────────────────────
   Cùng vòng 4 màu với màn hình phân tích, chỉ nhỏ lại — CHỈ đổi kích thước,
   màu và animation vẫn thừa hưởng .load-ring ở trên để không có hai bản màu
   lệch nhau. Dùng cho: chờ nạp lịch sử, và chờ tool trả form bên WordPress. */
.aiseo-ui .load-ring.sm { width: 56px; height: 56px; }
.aiseo-ui .load-ring.sm .load-ring-spin { border-width: 7px; }

.aiseo-ui .aiseo-busy {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 32px 0; width: 100%; text-align: center;
}
.aiseo-ui .aiseo-busy p {
  margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink);
}

/* Lớp phủ chờ — GIỮA MÀN HÌNH, không nằm trong dòng chảy layout.
 *
 * Cách cũ là xoá sạch khối kết quả rồi đặt vòng quay nhỏ vào chỗ đó: chiều cao từ vài
 * nghìn pixel sụp còn trăm pixel, cả trang giật lên rồi lại giật xuống khi báo cáo về.
 * position:fixed nên nó không chiếm chỗ của ai, nội dung cũ nằm yên bên dưới.
 *
 * Đặt BÊN TRONG .aiseo-ui (không phải body) để giữ đúng luật "mọi thứ có scope". Nếu chủ
 * nhà có tổ tiên dùng transform thì fixed sẽ neo theo tổ tiên đó — vẫn phủ trọn widget,
 * chấp nhận được. */
.aiseo-ui .aiseo-overlay {
  position: fixed; inset: 0; z-index: 99998;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .72);
}
.aiseo-ui .aiseo-overlay .aiseo-busy { padding: 0; width: auto; }

/* Dòng "đang xem kết quả của ai" — thay chỗ ô tra cứu sau khi đã có kết quả. */
/* Figma 4100:3848 — thẻ TRẮNG, không phải dải xanh: nó nằm cùng cột với các thẻ trắng
   khác của step 3, dải xanh làm nó trông như một thông báo lạc chỗ. */
.aiseo-ui .aiseo-lookup-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: #fff; border-radius: 8px;
  padding: 20px 24px; margin: 0 0 20px; font-size: 14px; line-height: 1.5; color: var(--ink);
}
.aiseo-ui .aiseo-lookup-bar strong { font-weight: 700; }
.aiseo-ui .lookup-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aiseo-ui .aiseo-lookup-bar .btn-outline {
  height: 36px; padding: 8px 16px;
  border: 1px solid var(--ink); border-radius: 4px; background: transparent;
  font: inherit; font-size: 14px; font-weight: 700; line-height: 1;
  color: var(--ink); cursor: pointer; white-space: nowrap;
}
.aiseo-ui .aiseo-lookup-bar .btn-outline:hover { background: #f3f5f7; }

/* ── Progress ────────────────────────────────────────────────────────────── */
.aiseo-ui .aiseo-progress { margin-top: 18px; width: var(--aiseo-w); max-width: 100%; }
.aiseo-ui .aiseo-bar {
  height: 14px; border-radius: 999px; background: #e2e8f0; overflow: hidden; margin-top: 8px;
}
.aiseo-ui .aiseo-bar > span {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), #0ea5e9); transition: width .5s;
}
/* Khối kết quả nằm ngoài panel và cần full width theo layout host/page. */
.aiseo-ui .aiseo-result { width: var(--aiseo-w); max-width: 100%; }

/* ── Privacy pop-up (Figma 4168:42737) ───────────────────────────────────── */
.aiseo-ui .aiseo-modal {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(0, 0, 0, .8);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.aiseo-ui .aiseo-modal-card {
  background: #fff; border-radius: 16px; padding: 40px;
  width: 800px; max-width: 100%; max-height: calc(100vh - 48px);
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  position: relative; overflow: auto;
}
.aiseo-ui .aiseo-modal-logo { height: 56px; width: auto; object-fit: contain; }
.aiseo-ui .aiseo-modal-title {
  font-size: 30px; font-weight: 700; line-height: 1.2; text-align: center;
  color: var(--ink); margin: 0; width: 100%;
}
.aiseo-ui .aiseo-modal-body {
  font-size: 16px; font-weight: 500; line-height: 24px; color: var(--ink); width: 100%;
}
.aiseo-ui .aiseo-modal-body p { margin: 0 0 24px; }
.aiseo-ui .aiseo-modal-body p:last-child { margin-bottom: 0; }
/* Link trong thân pop-up lấy màu xanh chủ đạo. Thân bài là HTML admin tự soạn nên không
   gắn class được — phải bắt bằng thẻ. Kèm :visited vì mặc định của browser đổi link đã bấm
   sang tím, và đây là link khách bấm nhiều nhất trong pop-up. */
.aiseo-ui .aiseo-modal-body a,
.aiseo-ui .aiseo-modal-body a:visited { color: var(--brand); text-decoration: underline; }
.aiseo-ui .aiseo-modal-body a:hover { text-decoration: none; }
.aiseo-ui .aiseo-modal-body a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.aiseo-ui .aiseo-modal-close {
  position: absolute; top: 20px; right: 20px; width: 32px; height: 32px;
  border: 0; background: url('icons/close.svg') center/12.67px 12.67px no-repeat;
  cursor: pointer; padding: 0;
}
.aiseo-ui .aiseo-modal-close:hover { opacity: .7; }

/* ── Pop-up xác nhận "còn suất chưa dùng" (Figma 4698:74649) ─────────────────
   Dùng lại .aiseo-modal / .aiseo-modal-card của pop-up Privacy: cùng nền tối, cùng thẻ
   trắng 800px bo 16px, cùng padding 40px, cùng title 30px. Figma vẽ hai pop-up giống
   hệt nhau ở mọi thứ đó — nên ở đây KHÔNG override width/title nữa. Khác đúng ba chỗ:
   khoảng cách trong thẻ 40px (Figma đo được, chứ không phải 24px như pop-up Privacy),
   chữ căn giữa, và hai nút nằm ngang giữa thẻ. */
.aiseo-ui .aiseo-confirm .aiseo-modal-card { gap: 40px; }
/* Tiêu đề + câu hỏi là MỘT khối cách nhau 20px; 40px ở trên là khoảng cách tới hàng nút. */
.aiseo-ui .aiseo-confirm-head {
  display: flex; flex-direction: column; gap: 20px; width: 100%;
}
.aiseo-ui .aiseo-confirm-text {
  margin: 0; width: 100%; text-align: center;
  font-size: 16px; font-weight: 500; line-height: 24px; color: var(--ink);
}
.aiseo-ui .aiseo-confirm-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
/* Figma: cao 48px, đệm ngang 40px, KHÔNG đặt bề rộng tối thiểu — nút rộng theo nhãn. */
.aiseo-ui .aiseo-confirm-actions .btn { height: 48px; padding: 8px 40px; }
/* Nút phụ ở pop-up này viền đậm hơn .btn.sec mặc định: 1.5px màu chữ, không phải 1px xám.
   Lưu ý: màn hình 1x sẽ snap 1.5px xuống 1px — đó là trình duyệt làm tròn, không sửa được
   bằng CSS; màn 2x render đúng 1.5px. Thứ đổi rõ ở mọi màn là MÀU viền (#606060 vs #dfdfdf). */
.aiseo-ui .aiseo-confirm-actions .btn.sec { border: 1.5px solid var(--ink); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 850px) {
  .aiseo-ui .aiseo-ftabs { flex-direction: column; }
  .aiseo-ui .row3, .aiseo-ui .row2, .aiseo-ui .row3eq { grid-template-columns: 1fr; }
  .aiseo-ui .aiseo-form { padding: 20px 16px; }
  .aiseo-ui .aiseo-modal-card { padding: 28px 20px; }
  .aiseo-ui .aiseo-confirm-actions .btn { width: 100%; padding: 8px 20px; }
}