/* builder-html.css — giao diện chung cho code.27biggroup.com */

:root {
  --ac-accent: #e8604a;
  --ac-accent-dark: #c0392b;
  --ac-ink: #1e2430;
  --ac-ink-soft: #5b6472;
  --ac-bg: #f6f7fb;
  --ac-card: #ffffff;
  --ac-border: #e4e7ed;
  --ac-code-bg: #1e1e2e;
  --ac-code-panel: #262638;
  --ac-radius: 12px;
  font-size: 16px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { overflow-x: hidden; }
body {
  margin: 0;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--ac-bg);
  color: var(--ac-ink);
  overflow-x: hidden;
}
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }
img { max-width: 100%; }
/* Đảm bảo [hidden] luôn thắng — nếu không, bất kỳ class nào set display:flex/grid/... với
   cùng độ ưu tiên CSS (0,1,0) khai báo SAU trong nguồn sẽ đè mất display:none mặc định của
   [hidden], khiến phần tử "đã hidden" vẫn hiện ra (đã gặp thật với .ac-dash-stats). */
[hidden] { display: none !important; }

/* ── Thanh cuộn mảnh, cùng tông thương hiệu cho MỌI vùng cuộn của builder-html (trang, modal, panel editor,
   CodeMirror...). Không ảnh hưởng trang người dùng đã xuất bản (view.php không nạp file này) và iframe xem
   trước (tài liệu riêng). Tím bán trong suốt để thấy rõ trên cả nền tối lẫn modal nền trắng.
   Chrome/Edge/Firefox dùng thuộc tính chuẩn scrollbar-width/scrollbar-color; Safari chưa hỗ trợ nên dùng
   ::-webkit-scrollbar — chỉ bật khi trình duyệt KHÔNG hiểu scrollbar-color, vì Chrome sẽ bỏ qua hẳn
   ::-webkit-scrollbar khi phần tử đã có thuộc tính chuẩn. Vùng nào cần ẩn thanh cuộn thì tự đặt
   scrollbar-width:none (class thắng selector *). */
:root {
  --ac-scroll-thumb: rgba(139, 108, 255, .45);
  --ac-scroll-thumb-hover: rgba(139, 108, 255, .75);
}
* { scrollbar-width: thin; scrollbar-color: var(--ac-scroll-thumb) transparent; }
@supports not (scrollbar-color: auto) {
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: var(--ac-scroll-thumb);
    background-clip: padding-box;
    border: 2px solid transparent;
    border-radius: 999px;
  }
  ::-webkit-scrollbar-thumb:hover { background-color: var(--ac-scroll-thumb-hover); }
}

/* ── Header ─────────────────────────────────────────────────────────── */
.ac-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; row-gap: 10px;
  padding: 14px 24px;
  background: var(--ac-card);
  border-bottom: 1px solid var(--ac-border);
}

/* Đã đăng nhập (header nhận class .is-account-menu từ home.js): gộp "Project của tôi/Tài
   khoản/Quản lý" vào 1 popup thả xuống từ nút hamburger thay vì hiện sẵn tất cả trên thanh
   header — áp dụng mọi kích thước màn hình, không chỉ mobile như trước (desktop trước đây
   hiện thẳng cả 3 mục cạnh nhau, khá rối). #acBtnManage bị ẩn vì trỏ cùng trang với "Project
   của tôi" trong popup — không cần 2 nút cho cùng 1 đích. */
#acHeader.is-account-menu { position: relative; }
#acHeader.is-account-menu #acBtnManage { display: none; }
#acHeader.is-account-menu .ac-nav-toggle { display: flex; }
#acHeader.is-account-menu .ac-nav {
  position: absolute; top: 100%; right: 24px; margin-top: 10px;
  width: 230px; max-width: calc(100vw - 32px);
  /* height:auto (giá trị ngầm định) không co đúng theo nội dung ở đây — Chromium tính auto-height
     cho flex container position:absolute+overflow:auto kiểu này ra ~0 (chỉ còn padding), che mất
     hết nội dung popup dù DOM/opacity/visibility đều đúng. fit-content buộc trình duyệt co theo
     nội dung thật, kèm max-height + overflow-y phòng khi màn hình quá thấp. */
  height: fit-content; max-height: calc(100vh - 90px); overflow-y: auto;
  background: var(--ac-card); border: 1px solid var(--ac-border); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .16);
  padding: 14px; flex-direction: column; align-items: stretch; gap: 10px;
  opacity: 0; transform: translateY(-6px); visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 1001;
}
#acHeader.is-account-menu .ac-nav.is-open {
  opacity: 1; transform: translateY(0); visibility: visible; pointer-events: auto;
}
#acHeader.is-account-menu .ac-nav-links,
#acHeader.is-account-menu .ac-nav-actions { flex-direction: column; align-items: stretch; width: 100%; gap: 8px; }
#acHeader.is-account-menu .ac-nav-links a {
  padding: 9px 10px; border-radius: 8px; border: 1px solid var(--ac-border);
}
#acHeader.is-account-menu .ac-nav-actions .ac-btn { width: 100%; justify-content: center; }
/* Backdrop trong suốt (không làm tối cả trang như drawer mobile) — chỉ để bắt click ra
   ngoài popup thì đóng lại. Đặc tả riêng, độ ưu tiên cao hơn rule .ac-nav-backdrop.is-open
   trong media query mobile bên dưới nên luôn thắng ở mọi kích thước màn hình. */
#acHeader.is-account-menu .ac-nav-backdrop.is-open { display: block; background: transparent; opacity: 1; }
.ac-brand {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 18px; text-decoration: none; color: var(--ac-ink);
}
.ac-brand .ac-logo-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ac-accent); flex-shrink: 0; }
.ac-brand-logo { height: 30px; width: auto; display: block; }
.ac-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; font-size: 14px; }
/* :not(.ac-btn) — loại trừ link được style như nút (vd #acBtnManage — nền màu + chữ trắng
   từ .ac-btn-primary) khỏi màu chữ link thường, nếu không selector .ac-nav a (specificity
   0,1,1) sẽ đè mất color:#fff của .ac-btn-primary (specificity 0,1,0). */
.ac-nav a:not(.ac-btn) { text-decoration: none; color: var(--ac-ink-soft); font-weight: 600; white-space: nowrap; }
.ac-nav a:not(.ac-btn):hover { color: var(--ac-accent); }
/* Nhóm riêng 2 link chữ thường (Project của tôi/Tài khoản) và nhóm nút hành động (Tạo tài
   khoản nhanh/Tạo tài khoản/Đăng nhập/Quản lý) — để mỗi nhóm co giãn/xếp hàng độc lập trên
   mobile thay vì trộn lẫn thành 1 hàng dài dễ vỡ layout. */
.ac-nav-links { display: flex; align-items: center; gap: 18px; }
.ac-nav-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Nút hamburger — mặc định chỉ hiện trên mobile (xem media query bên dưới); khi đã đăng
   nhập thì hiện ở MỌI kích thước màn hình để mở popup menu tài khoản (xem
   #acHeader.is-account-menu phía trên). */
.ac-nav-toggle {
  display: none; align-items: center; justify-content: center; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 8px;
  background: transparent; border: 1px solid var(--ac-border); color: var(--ac-ink);
  position: relative; z-index: 1002; /* luôn nổi trên drawer + backdrop để bấm đóng được */
}
.ac-nav-toggle-icon-close { display: none; }
.ac-nav-toggle[aria-expanded="true"] .ac-nav-toggle-icon-open { display: none; }
.ac-nav-toggle[aria-expanded="true"] .ac-nav-toggle-icon-close { display: block; }

/* Nền mờ phía sau drawer — bấm ra ngoài để đóng menu (chỉ có tác dụng trên mobile, gắn cùng
   lúc với #acNavToggle nên tự nhiên chỉ tồn tại ở trang có hamburger). */
.ac-nav-backdrop {
  display: none;
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(5, 6, 15, .55);
  opacity: 0; transition: opacity .25s ease;
}

@media (max-width: 640px) {
  .ac-header { padding: 12px 16px; flex-direction: column; align-items: flex-start; }
  .ac-brand { font-size: 16px; }
  .ac-nav { width: 100%; gap: 10px 12px; font-size: 13px; }
  .ac-nav-links { width: 100%; gap: 8px; }
  .ac-nav-links a {
    flex: 1 1 auto; text-align: center; padding: 8px 10px; border-radius: 8px;
    border: 1px solid var(--ac-border);
  }
  .ac-nav-actions { width: 100%; gap: 8px; }
  .ac-nav-actions .ac-btn { flex: 1 1 150px; justify-content: center; }

  /* Trang chủ (index.php) có thêm hamburger #acNavToggle — override lại thành popup menu
     trượt ra từ bên phải (thay vì kéo giãn header xuống) khi CHƯA đăng nhập, không đẩy nội
     dung trang xuống. Scope theo #acHeader để KHÔNG ảnh hưởng .ac-header/.ac-nav ở
     dashboard.php/account.php (2 trang đó không có hamburger/JS mở menu, phải luôn hiện sẵn
     như trước). */
  /* backdrop-filter: none — .ac-header có backdrop-filter:blur() (xem home.css) để tạo hiệu
     ứng kính mờ, nhưng backdrop-filter trên ancestor sẽ biến nó thành containing block cho
     con position:fixed thay vì viewport — khiến drawer bên dưới chỉ cao bằng đúng header
     (~60px) thay vì full màn hình. #acHeader (id, specificity cao hơn .ac-header) tắt hẳn
     backdrop-filter trên mobile để #acNav fixed tính theo viewport như bình thường. */
  #acHeader { flex-direction: row; align-items: center; justify-content: space-between; backdrop-filter: none; }
  .ac-nav-toggle { display: flex; }
  #acHeader .ac-nav {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(78vw, 300px); margin-top: 0;
    background: var(--ac-bg);
    border-left: 1px solid var(--ac-border);
    box-shadow: -16px 0 40px rgba(0, 0, 0, .35);
    padding: 76px 20px 24px;
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 20px;
    z-index: 1001;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .28s ease, visibility .28s;
    overflow-y: auto;
  }
  #acHeader .ac-nav.is-open { transform: translateX(0); visibility: visible; }
  #acHeader .ac-nav-backdrop.is-open { display: block; opacity: 1; }
}

/* Icon đơn sắc dùng chung (Lucide qua ACVisualElements.iconSvg()/ac_icon() — xem
   visual-elements.js / php/icons.php) — luôn currentColor, tự đổi màu theo chữ của nút cha
   (xám thường, tím khi active/hover), không cần khai riêng màu ở từng chỗ dùng. */
.ac-icon { width: 16px; height: 16px; flex-shrink: 0; vertical-align: -3px; }

.ac-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; border-radius: 8px; padding: 9px 18px;
  font-size: 14px; font-weight: 600; background: var(--ac-border); color: var(--ac-ink);
  text-decoration: none;
  transition: background .15s, transform .1s;
}
.ac-btn:hover { background: #d9dce3; }
.ac-btn:active { transform: scale(.97); }
.ac-btn-primary { background: var(--ac-accent); color: #fff; }
.ac-btn-primary:hover { background: var(--ac-accent-dark); }
.ac-btn-ghost { background: transparent; border: 1px solid var(--ac-border); }
.ac-btn-danger { background: #fde8e4; color: var(--ac-accent-dark); }
.ac-btn-danger:hover { background: #fbd4cc; }
.ac-btn[disabled] { opacity: .5; cursor: not-allowed; }
.ac-btn-sm { padding: 6px 12px; font-size: 13px; }

/* ── Trang chủ ──────────────────────────────────────────────────────── */
.ac-hero {
  max-width: 860px; margin: 0 auto; padding: 64px 24px 32px; text-align: center;
}
.ac-hero h1 { font-size: 34px; margin-bottom: 12px; }
.ac-hero p { color: var(--ac-ink-soft); font-size: 16px; line-height: 1.7; margin-bottom: 28px; }

.ac-section-title {
  max-width: 1100px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center;
  justify-content: space-between;
}
.ac-section-title h2 { font-size: 18px; }

/* Thẻ project của dashboard/trang chủ nay là .ac-pcard (home.css, acRenderProjectCard trong common.js) */
.ac-btn-icon { padding: 7px 10px; }
.ac-btn-icon svg { width: 15px; height: 15px; }

.ac-empty-state {
  max-width: 1100px; margin: 40px auto; padding: 48px 24px; text-align: center; color: var(--ac-ink-soft);
}
.ac-empty-state-icon {
  width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center; font-size: 24px;
  background: var(--ac-border);
}

/* ── Editor layout ──────────────────────────────────────────────────── */
.ac-editor-page { height: 100vh; display: flex; flex-direction: column; }
.ac-editor-toolbar {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  background: var(--ac-card); border-bottom: 1px solid var(--ac-border); flex-wrap: wrap;
}

/* ── Thanh danh sách trang (nhiều trang trong 1 project) ────────────────────────────────────
   Nằm ngay dưới thanh công cụ chính, dùng chung cho cả Kéo thả lẫn Viết code (đổi trang là đổi
   nội dung ô HTML/canvas). Ẩn hẳn ở chế độ Xem thử. Header/Footer dùng chung nằm tách sang phải
   để không lẫn với danh sách trang thật. */
.ac-pages-bar {
  display: flex; align-items: center; gap: 8px; padding: 6px 14px;
  background: var(--ac-card); border-bottom: 1px solid var(--ac-border); overflow: hidden;
}
.ac-pages-bar[hidden] { display: none; }
/* Vừa bật kiểu "Website": thanh này phát sáng vài giây cho người dùng thấy nó vừa hiện ra. */
.ac-pages-bar.is-glow { animation: ac-pages-glow 1.1s ease-in-out 3; }
@keyframes ac-pages-glow {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(232, 96, 74, 0); background: var(--ac-card); }
  50% { box-shadow: inset 0 0 0 2px var(--ac-accent), 0 0 18px rgba(232, 96, 74, .45); background: rgba(232, 96, 74, .08); }
}
.ac-pages-label {
  display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
  font-size: 12px; font-weight: 700; color: var(--ac-ink-soft); text-transform: uppercase; letter-spacing: .04em;
}
.ac-pages-label .ac-icon { width: 15px; height: 15px; }
/* Danh sách trang thường: phần DUY NHẤT cuộn ngang khi project có nhiều trang. */
.ac-pages-list {
  display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0;
  overflow-x: auto; overflow-y: hidden; padding-bottom: 2px;
  scrollbar-width: thin; scrollbar-color: rgba(120, 125, 140, .45) transparent;
}
.ac-pages-list::-webkit-scrollbar { height: 6px; }
.ac-pages-list::-webkit-scrollbar-track { background: transparent; }
.ac-pages-list::-webkit-scrollbar-thumb { background: rgba(120, 125, 140, .45); border-radius: 6px; }
.ac-pages-list:empty { flex: 0 0 auto; }
/* Cụm CỐ ĐỊNH bên phải: nút Tạo trang, Trang chủ, Header/Footer chung — không bao giờ trôi mất. */
.ac-pages-fixed {
  display: flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding-left: 10px; margin-left: 2px; border-left: 1px solid var(--ac-border);
}
.ac-pages-home, .ac-pages-shared { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.ac-page-chip {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  border: 1px solid var(--ac-border); background: transparent; color: var(--ac-ink);
  border-radius: 999px; padding: 5px 10px 5px 12px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap; max-width: 220px;
}
.ac-page-chip:hover { border-color: var(--ac-accent); color: var(--ac-accent); }
.ac-page-chip.is-active { background: var(--ac-accent); border-color: var(--ac-accent); color: #fff; }
.ac-page-chip.is-active:hover { color: #fff; }
.ac-page-chip-name { overflow: hidden; text-overflow: ellipsis; }
/* Chấm tròn báo trang chủ + nút bánh răng chỉ hiện ở trang đang mở (bấm để mở bảng cấu hình). */
.ac-page-chip .ac-page-home-dot { font-size: 11px; line-height: 1; opacity: .9; }
.ac-page-chip .ac-page-gear {
  display: none; align-items: center; justify-content: center; border: none; background: transparent;
  color: inherit; padding: 0; margin-left: 2px; cursor: pointer; opacity: .85;
}
.ac-page-chip.is-active .ac-page-gear { display: inline-flex; }
.ac-page-chip .ac-page-gear:hover { opacity: 1; }
.ac-page-chip .ac-page-gear .ac-icon { width: 14px; height: 14px; }
/* 2 mảnh dùng chung: đổ nền tím nhạt để tách hẳn khỏi danh sách trang thường. */
.ac-pages-shared .ac-page-chip {
  background: rgba(124, 92, 255, .14); border-color: rgba(124, 92, 255, .45); color: #7c5cff; font-weight: 700;
}
.ac-pages-shared .ac-page-chip:hover { background: rgba(124, 92, 255, .24); border-color: #7c5cff; color: #7c5cff; }
.ac-pages-shared .ac-page-chip.is-active { background: #7c5cff; border-color: #7c5cff; color: #fff; }
/* Trang chủ trong cụm cố định: viền nhấn nhẹ cho khác trang thường. */
.ac-pages-home .ac-page-chip { border-color: rgba(232, 96, 74, .5); }
.ac-pages-home .ac-page-chip:not(.is-active) { background: rgba(232, 96, 74, .08); }

.ac-pages-add {
  display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
  border: 1px dashed var(--ac-border); background: transparent; color: var(--ac-ink-soft);
  border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.ac-pages-add:hover { border-color: var(--ac-accent); color: var(--ac-accent); }
.ac-pages-add .ac-icon { width: 14px; height: 14px; }
/* Chế độ Xem thử: giấu hẳn thanh này đi (chỉ còn trang đang làm). */
#acEditorBody.is-preview-mode ~ .ac-pages-bar, body.is-preview-hide-pages .ac-pages-bar { display: none; }

/* Cụm "Tạo Landing / Tạo Website" trên thanh công cụ trên cùng. */
.ac-site-mode-toggle .ac-view-btn.active { background: var(--ac-accent); color: #fff; }
.ac-site-mode-toggle .ac-view-btn .ac-icon { width: 15px; height: 15px; }

/* Trang vừa tạo / vừa chỉnh: nháy sáng vài nhịp cho dễ thấy giữa danh sách dài. */
.ac-page-chip.is-new { animation: ac-page-chip-flash 0.75s ease-in-out 3; }
@keyframes ac-page-chip-flash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 96, 74, 0); }
  50% { box-shadow: 0 0 0 3px rgba(232, 96, 74, .55), 0 0 14px rgba(232, 96, 74, .5); }
}

/* Bảng cấu hình trang */
/* ".ac-field label" (có sẵn) ép display:block + ".ac-field input" ép width:100% — phải đặc hiệu hơn
   nó, không thì ô tích nhảy xuống dòng riêng và giãn hết bề ngang. */
.ac-field label.ac-page-check {
  display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
  margin-bottom: 8px; cursor: pointer;
}
.ac-field label.ac-page-check:last-child { margin-bottom: 0; }
.ac-field label.ac-page-check input[type="checkbox"] { width: auto; flex: 0 0 auto; margin: 0; }
.ac-page-sep {
  font-size: 12px; font-weight: 700; color: var(--ac-ink-soft); text-transform: uppercase; letter-spacing: .04em;
  border-top: 1px solid var(--ac-border); padding-top: 12px; margin: 4px 0 12px;
}
/* ── Bảng "Cấu hình trang" / "Cấu hình Header-Footer" ─────────────────────────────────────
   Chia thành từng NHÓM có khung riêng (thông tin trang · header/footer dùng chung · SEO) cho
   người dùng thấy cái nào đi với cái nào, thay vì 1 chuỗi ô nhập dài dằng dặc. */
/* Bảng này có 2 cột (và thêm khung xem thử) nên cần rộng hơn bảng thường. */
.ac-modal.ac-page-modal { max-width: 800px; }
.ac-page-modal-body { display: flex; flex-direction: column; gap: 14px; }
/* select không nằm trong luật ".ac-field input" có sẵn -> tự giãn hết cột, và phải cho phép co lại
   (min-width:0) không thì ô chọn có chữ dài sẽ đẩy tràn ra ngoài khung nhóm. */
.ac-page-modal-body select,
.ac-page-modal-body input,
.ac-page-modal-body textarea { width: 100%; max-width: 100%; min-width: 0; }
.ac-page-modal-body select {
  padding: 9px 12px; border: 1px solid var(--ac-border); border-radius: 8px; font-size: 14px;
}
.ac-page-modal-body .ac-page-row input { flex: 1 1 auto; }
/* Ô tích: không ăn theo luật width:100% ở trên, và nhãn nằm cùng hàng với ô tích (kể cả khi
   không nằm trong .ac-field — vd ô tích noindex trong khối SEO). */
.ac-page-modal-body input[type="checkbox"] { width: auto; min-width: 0; flex: 0 0 auto; margin: 0; }
.ac-page-modal-body .ac-page-check {
  display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.ac-page-group { border: 1px solid var(--ac-border); border-radius: 10px; padding: 12px 14px; }
.ac-page-group[hidden] { display: none !important; }
.ac-page-group-head {
  display: flex; align-items: center; gap: 7px; margin-bottom: 10px;
  font-size: 12px; font-weight: 700; color: var(--ac-ink-soft); text-transform: uppercase; letter-spacing: .04em;
}
.ac-page-group-head .ac-icon { width: 15px; height: 15px; flex: 0 0 auto; }
.ac-page-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.ac-page-grid > .ac-field { margin-bottom: 0; min-width: 0; }
.ac-page-grid > .ac-field[hidden] { display: none; }
.ac-page-modal-body .ac-field-hint { margin-top: 8px; }
.ac-page-modal-body .ac-field { margin-bottom: 10px; }
.ac-page-modal-body .ac-field:last-child { margin-bottom: 0; }

/* Danh sách nhiều Header/Footer: mỗi dòng sửa được TÊN ngay tại chỗ. */
.ac-part-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
/* Nền dùng var(--ac-card): trong modal biến này đã được ép về màu SÁNG (xem editor-theme.css),
   còn --ac-bg vẫn là nền tối của cả trang — lấy nhầm là ra ô đen kịt trên modal trắng. */
.ac-part-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center;
  border: 1px solid var(--ac-border); border-radius: 9px; padding: 8px 10px; background: var(--ac-card);
}
.ac-part-row.is-current { border-color: #7c5cff; box-shadow: inset 3px 0 0 #7c5cff; }
.ac-part-row-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ac-part-row input.ac-part-name-input {
  flex: 1 1 auto; min-width: 0; height: 30px; padding: 4px 8px; font-size: 13px; font-weight: 700;
  border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--ac-ink);
}
.ac-part-row input.ac-part-name-input:hover { border-color: var(--ac-border); background: #fff; }
.ac-part-row input.ac-part-name-input:focus { border-color: var(--ac-accent); background: #fff; outline: none; }
.ac-part-badge {
  flex: 0 0 auto; font-size: 10.5px; font-weight: 700; color: #7c5cff; background: rgba(124, 92, 255, .16);
  border-radius: 999px; padding: 3px 9px; text-transform: uppercase; letter-spacing: .03em;
}
.ac-part-usage { grid-column: 1; font-size: 12px; color: var(--ac-ink-soft); }
.ac-part-actions { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 6px; align-items: center; }
.ac-part-actions .ac-btn { padding: 5px 10px; font-size: 12px; white-space: nowrap; }
.ac-part-add { width: 100%; justify-content: center; }
.ac-part-manager[hidden] { display: none !important; }

/* ── SEO: ô nhập bên trái, khung xem thử link chia sẻ bên phải ───────────────────────────── */
.ac-seo-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ac-seo-group.is-preview .ac-seo-body { grid-template-columns: minmax(0, 1fr) minmax(0, 280px); }
.ac-seo-preview-btn { margin-left: auto; }
.ac-seo-preview[hidden] { display: none; }
.ac-seo-preview-label { font-size: 11.5px; color: var(--ac-ink-soft); margin-bottom: 6px; }
.ac-seo-card { border: 1px solid var(--ac-border); border-radius: 10px; overflow: hidden; background: var(--ac-card); }
.ac-seo-card-img {
  height: 132px; background: var(--ac-card) center / cover no-repeat;
  display: flex; align-items: center; justify-content: center;
  color: var(--ac-ink-soft); font-size: 12px; border-bottom: 1px solid var(--ac-border);
}
.ac-seo-card-img.has-img span { display: none; }
.ac-seo-card-text { padding: 9px 11px 11px; }
.ac-seo-card-url { font-size: 11px; color: var(--ac-ink-soft); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 3px; word-break: break-all; }
.ac-seo-card-title { font-size: 14px; font-weight: 700; line-height: 1.35; margin-bottom: 4px; }
.ac-seo-card-desc { font-size: 12.5px; color: var(--ac-ink-soft); line-height: 1.45; }
.ac-seo-preview-note { font-size: 11.5px; color: var(--ac-ink-soft); margin-top: 7px; }

.ac-page-home-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ac-page-home-row[hidden] { display: none !important; }
.ac-page-home-note { font-size: 12.5px; color: var(--ac-ink-soft); }
.ac-page-home-note.is-home { color: var(--ac-accent); font-weight: 700; }
.ac-page-row { display: flex; align-items: center; gap: 8px; }
@media (max-width: 720px) {
  .ac-page-grid, .ac-seo-group.is-preview .ac-seo-body { grid-template-columns: minmax(0, 1fr); }
}
.ac-page-row input { flex: 1 1 auto; min-width: 0; }
.ac-page-row .ac-btn { flex: 0 0 auto; }
.ac-page-del { color: #c0392b; }
.ac-page-del:hover { background: rgba(192, 57, 43, .1); }
.ac-page-del[hidden] { display: none !important; }
/* KHÔNG cho ô tiêu đề tự giãn nữa (trước là flex:1 1 160px) — nó là phần tử duy nhất "nuốt" hết
   chỗ trống của thanh, nên mỗi lần 1 cụm bên phải nó ẩn/hiện hay đổi bề rộng (cụm Desktop/Mobile,
   nhãn mốc kích thước...) là ô này phình/co theo, đẩy TẤT CẢ các nút đứng sau nó xê dịch. Giao
   việc giãn cho .ac-editor-spacer — chỗ trống dồn hết vào đúng khoảng giữa, 2 cụm nút 2 bên
   đứng yên tuyệt đối. */
.ac-editor-title-input {
  border: 1px solid transparent; background: transparent; font-size: 15px; font-weight: 700;
  padding: 6px 8px; border-radius: 6px; min-width: 120px; flex: 0 1 220px;
}
.ac-editor-title-input:hover, .ac-editor-title-input:focus { border-color: var(--ac-border); outline: none; }
.ac-editor-spacer { flex: 1; }
/* Bề rộng cố định: "Chưa lưu" dài hơn "Đã lưu" — để tự co giãn thì mỗi lần lưu xong/gõ tiếp là cả
   cụm tab + Desktop/Mobile phía sau lại xê dịch (và làm lệch phép đo "tràn hàng" của chế độ tự
   rút gọn nút, xem updateToolbarCompact trong editor.js). */
.ac-editor-status { font-size: 12.5px; color: var(--ac-ink-soft); margin-right: 4px; white-space: nowrap; min-width: 4.6em; text-align: right; }

.ac-editor-body { flex: 1; display: flex; min-height: 0; }
.ac-editor-panes { flex: 1 1 55%; display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--ac-border); }
/* Gộp chung vào 1 hàng với .ac-editor-toolbar (trước là 1 hàng riêng ngay trên .ac-pane-wrap) —
   đổi sang dạng pill giống .ac-view-toggle/.ac-view-btn để nhìn thống nhất với cụm Desktop/
   Mobile đứng cạnh nó trong cùng thanh toolbar, thay vì kiểu gạch chân cũ vốn chỉ hợp khi đứng
   riêng 1 hàng full-width của chính nó. */
.ac-tabs { display: flex; gap: 3px; background: var(--ac-border); border-radius: 8px; padding: 3px; }
.ac-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; font-size: 12.5px; font-weight: 700; color: #9a9ecb; background: transparent; border: none;
  border-radius: 6px;
}
.ac-tab.active { color: #fff; background: var(--ac-accent); }
.ac-tab-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px;
  padding: 0 5px; border-radius: 999px; background: var(--ac-accent-dark); color: #fff;
  font-size: 10.5px; font-weight: 700;
}
/* Ẩn bằng visibility chứ KHÔNG để display:none — badge chỉ hiện khi có lỗi, nếu nó biến mất khỏi
   bố cục thì đúng lúc lỗi xuất hiện, nút Console phình ra đẩy cụm Desktop/Mobile bên cạnh xê dịch.
   Cần !important vì quy tắc [hidden]{display:none} trong bộ style mặc định của trình duyệt CŨNG
   là !important — rule thường của trang không thắng được nó. */
.ac-tab-badge[hidden] { display: inline-flex !important; visibility: hidden; }
/* Hàng chọn HTML/CSS/JS — chỉ hiện ở chế độ "Viết code", nằm ngay trên vùng soạn code thay vì
   lẫn vào thanh công cụ chung. Kiểu gạch chân (khác pill của .ac-tab bên trên) để thấy rõ đây là
   cấp CON của chế độ đang chọn, không phải 1 chế độ ngang hàng nữa. */
.ac-code-subtabs { display: flex; gap: 2px; padding: 0 8px; border-bottom: 1px solid var(--ac-border); background: var(--ac-code-panel); }
.ac-code-subtabs[hidden] { display: none; }
.ac-code-subtab {
  border: none; background: transparent; color: var(--ac-ink-soft);
  font-size: 12px; font-weight: 700; padding: 8px 12px; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.ac-code-subtab:hover { color: var(--ac-ink); }
.ac-code-subtab.active { color: var(--ac-ink); border-bottom-color: var(--ac-accent); }
/* Chọn chỗ đặt CSS/JS trong tài liệu xuất ra — đẩy hẳn sang phải cùng hàng với HTML/CSS/JS. */
.ac-code-placement { margin-left: auto; display: flex; align-items: center; gap: 4px; padding: 4px 0; }
.ac-code-placement[hidden] { display: none; }
.ac-code-placement-label { font-size: 11.5px; color: var(--ac-ink-soft); margin-right: 2px; }
.ac-code-placement-btn {
  border: 1px solid var(--ac-border); background: transparent; color: var(--ac-ink-soft);
  font-size: 11.5px; font-weight: 700; padding: 4px 7px 4px 9px; border-radius: 6px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.ac-code-placement-btn:hover { color: var(--ac-ink); }
.ac-code-placement-btn.active { background: var(--ac-accent); border-color: var(--ac-accent); color: #fff; }
/* Số dòng code đang có ở khối đó — nhìn là biết ngay chỗ nào đang có code, chỗ nào còn trống. */
.ac-code-placement-count {
  min-width: 17px; padding: 0 4px; border-radius: 999px; background: rgba(255, 255, 255, .12);
  font-size: 10.5px; line-height: 16px; text-align: center; font-variant-numeric: tabular-nums;
}
.ac-code-placement-btn.active .ac-code-placement-count { background: rgba(0, 0, 0, .25); }
.ac-pane-wrap { flex: 1; min-height: 0; position: relative; background: var(--ac-code-bg); }
.ac-pane { position: absolute; inset: 0; display: none; }
.ac-pane.active { display: block; }
.ac-pane .CodeMirror { height: 100%; font-size: 13.5px; }

/* ── Console pane (editor.php) — log/lỗi bắt được từ bên trong iframe xem trước ───────── */
.ac-console-pane.active { display: flex; flex-direction: column; }
.ac-console-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px;
  border-bottom: 1px solid var(--ac-border); flex-shrink: 0;
}
.ac-console-toolbar-hint { font-size: 11.5px; color: #6a6f92; }
.ac-console-list { flex: 1; overflow-y: auto; padding: 4px 10px; }
.ac-console-empty { padding: 10px 2px; font-size: 12px; color: #6a6f92; font-style: italic; }
.ac-console-entry {
  padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.06);
  font: 12px/1.5 "Consolas", monospace; white-space: pre-wrap; word-break: break-word; color: #d8d8e6;
}
.ac-console-entry:last-child { border-bottom: none; }
.ac-console-entry-time { color: #6a6f92; margin-right: 8px; }
.ac-console-entry.level-error { color: #ff6b6b; }
.ac-console-entry.level-warn { color: #f6c343; }
.ac-console-entry.level-info { color: #64b5f6; }

.ac-preview-wrap { flex: 1 1 45%; display: flex; flex-direction: column; min-width: 0; background: #fff; }
.ac-preview-bar {
  display: flex; align-items: center; justify-content: space-between; padding: 6px 12px;
  font-size: 12px; color: var(--ac-ink-soft); border-bottom: 1px solid var(--ac-border);
}
.ac-preview-bar-left { display: flex; align-items: center; gap: 10px; }
.ac-run-btn { background: #1c8a52; color: #fff; }
.ac-run-btn:hover { background: #166b40; }

/* Xem trước: canvas luôn hiện đúng bố cục desktop/mobile bất kể kích thước khung xem trước
   hay mức zoom trình duyệt — .ac-preview-frame-wrap giữ kích thước "thật" cố định (viewport
   giả lập), rồi bị scale (transform) co lại vừa khung; .ac-preview-scaler chiếm đúng không
   gian đã scale đó để canvas căn giữa chính xác. Trước đây frame-wrap chỉ có width/height:100%
   nên khi trình duyệt zoom to, khung xem trước co lại theo px CSS thật (zoom ở Chrome làm co cả
   viewport layout) khiến trang bên trong nhận nhầm là màn hình nhỏ và tự đổi sang giao diện
   mobile dù đang chọn "Desktop". Kích thước thật + scale ở JS (editor.js updatePreviewScale)
   giữ cho trang bên trong luôn "thấy" đúng độ rộng desktop/mobile đã chọn. */
.ac-preview-canvas { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: auto; padding: 16px; }
.ac-preview-scaler { flex: none; overflow: hidden; }
.ac-preview-frame-wrap { display: flex; transform-origin: top left; }
.ac-preview-canvas.is-mobile .ac-preview-frame-wrap {
  border: 8px solid #1c1e2e; border-radius: 36px; overflow: hidden; box-sizing: border-box;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.ac-preview-iframe { width: 100%; height: 100%; border: none; background: #fff; display: block; }
/* Thanh cuộn mảnh cho khung xem trước (phần thanh cuộn của trang BÊN TRONG iframe nằm ở tài liệu
   xem trước — xem PREVIEW_SCROLLBAR_CSS trong editor.js). */
.ac-preview-canvas { scrollbar-width: thin; scrollbar-color: rgba(120, 125, 140, .45) transparent; }
.ac-preview-canvas::-webkit-scrollbar { width: 8px; height: 8px; }
.ac-preview-canvas::-webkit-scrollbar-track { background: transparent; }
.ac-preview-canvas::-webkit-scrollbar-thumb { background: rgba(120, 125, 140, .45); border-radius: 8px; }
.ac-preview-canvas::-webkit-scrollbar-thumb:hover { background: rgba(120, 125, 140, .7); }

/* ── Che do "Xem thu" (#acPreviewModeBtn): giu nguyen thanh cong cu tren cung, an het phan soan
   thao (o code, canvas keo-tha + bang khoi/thuoc tinh/dieu khien, thanh xem truoc) — chi con dung
   trang dang lam. Dung #id de chac chan thang .is-visual-mode ben visual-editor.css (nap sau). */
#acEditorBody.is-preview-mode .ac-editor-panes { display: none; }
#acEditorBody.is-preview-mode .ac-preview-wrap { display: flex; flex: 1 1 100%; border-right: none; }
#acEditorBody.is-preview-mode .ac-preview-bar { display: none; }
#acEditorBody.is-preview-mode .ac-preview-canvas { padding: 0; align-items: flex-start; background: var(--ac-code-bg); }
/* Khung điện thoại có viền dày + bo góc — chừa mép để không dính sát cạnh màn hình (bản desktop
   thì để sát cạnh cho giống cửa sổ trình duyệt thật). updatePreviewScale đọc padding thật nên
   chiều cao khung tự trừ đúng phần này. */
#acEditorBody.is-preview-mode .ac-preview-canvas.is-mobile { padding: 12px; }
#acPreviewModeBtn.active { background: var(--ac-accent); color: #fff; }
#acPreviewModeBtn.active:hover { background: var(--ac-accent-dark); }
#acPreviewReloadBtn.is-hidden { visibility: hidden; pointer-events: none; }
#acPreviewReloadBtn.is-spinning .ac-icon { animation: ac-settings-spin .6s linear; }
/* Cặp nút "Xem thử" + "Chạy lại": lúc đang xem thử, 2 nút dính liền thành 1 khối (nút trái đổi
   chữ thành "Dừng", nút phải chỉ còn icon) — vạch trắng mảnh ở giữa cho thấy đó là 2 phần của
   cùng 1 nút. Lúc chưa xem thử, nút phải vẫn chiếm chỗ nhưng trong suốt, nên không nút nào nhảy. */
.ac-preview-group { display: inline-flex; align-items: center; }
.ac-preview-ico { display: inline-flex; }
.ac-preview-ico[hidden] { display: none; }
/* Bề ngang cố định: đổi chữ "Xem thử" <-> "Dừng" cũng không làm xê dịch các nút bên cạnh. */
#acPreviewModeBtn { min-width: 108px; justify-content: center; }
:is(html[data-ac-toolbar-labels="icons"] .ac-editor-toolbar, .ac-editor-toolbar.is-compact) #acPreviewModeBtn { min-width: 0; }
#acPreviewReloadBtn { padding: 6px 9px; }
.ac-preview-group.is-preview #acPreviewModeBtn { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ac-preview-group.is-preview #acPreviewReloadBtn {
  border-top-left-radius: 0; border-bottom-left-radius: 0;
  background: var(--ac-accent); color: #fff; box-shadow: inset 1px 0 0 rgba(255, 255, 255, .32);
}
.ac-preview-group.is-preview #acPreviewReloadBtn:hover { background: var(--ac-accent-dark); }

.ac-view-toggle { display: flex; gap: 3px; background: var(--ac-border); border-radius: 8px; padding: 3px; }
.ac-view-btn {
  border: none; background: transparent; color: var(--ac-ink-soft); font-size: 12px; font-weight: 700;
  padding: 5px 10px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
}
.ac-view-btn.active { background: var(--ac-accent); color: #fff; }

@media (max-width: 860px) {
  .ac-editor-body { flex-direction: column; }
  .ac-editor-panes, .ac-preview-wrap { flex: 1 1 50%; border-right: none; border-bottom: 1px solid var(--ac-border); }
}

@media (max-width: 640px) {
  .ac-editor-toolbar { padding: 8px 10px; gap: 6px 8px; }
  .ac-editor-title-input { flex: 1 1 100%; }
  .ac-editor-spacer { flex: 0 0 0; width: 0; }
  .ac-editor-toolbar .ac-btn { padding: 6px 10px; font-size: 12px; }
  .ac-preview-bar { flex-wrap: wrap; row-gap: 6px; }
}

/* ── Modal ──────────────────────────────────────────────────────────── */
.ac-modal-overlay {
  position: fixed; inset: 0; background: rgba(20,20,30,.5); display: none;
  align-items: center; justify-content: center; z-index: 1000; padding: 20px;
}
.ac-modal-overlay.open { display: flex; }
/* Tài nguyên ở chế độ CHỌN ảnh có thể được mở CHỒNG lên modal khác (vd Tạo Prompt AI khi chọn ảnh
   thumbnail) — cần z-index cao hơn để không bị modal cha đè lên. */
#acResourceModal.is-picking { z-index: 1100; }
/* Cài đặt mở CHỒNG lên popup Xuất bản (nút cấu hình SEO / tên miền — round 85). Thấp hơn hộp chọn ảnh. */
#acSettingsModal.is-stacked { z-index: 1010; }
.ac-modal {
  background: #fff; border-radius: var(--ac-radius); max-width: 560px; width: 100%;
  max-height: 82vh; display: flex; flex-direction: column; overflow: hidden;
}
.ac-modal-header {
  display: flex; align-items: center; justify-content: space-between; padding: 16px 20px;
  border-bottom: 1px solid var(--ac-border);
}
.ac-modal-header h3 { margin: 0; font-size: 16px; }
.ac-modal-close {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 8px;
  background: none; border: none; font-size: 20px; color: var(--ac-ink-soft); line-height: 1;
  transition: background .15s, color .15s;
}
.ac-modal-close:hover { background: var(--ac-border); color: var(--ac-ink); }
.ac-modal-body { padding: 18px 20px; overflow-y: auto; }
.ac-modal-footer {
  padding: 14px 20px; border-top: 1px solid var(--ac-border); display: flex;
  justify-content: flex-end; flex-wrap: wrap; gap: 10px;
}
.ac-modal-lg { max-width: 900px; max-height: 88vh; }

@media (max-width: 640px) {
  .ac-modal-overlay { padding: 10px; }
  .ac-modal, .ac-modal-lg { max-width: 100%; max-height: 92vh; }
  .ac-modal-header { padding: 14px 16px; }
  .ac-modal-body { padding: 14px 16px; }
  .ac-modal-footer { padding: 12px 16px; justify-content: stretch; }
  .ac-modal-footer .ac-btn { flex: 1 1 auto; justify-content: center; }
  .ac-pb-result { padding: 13px 14px; }
}

/* ── Prompt builder (trong editor.php) ─────────────────────────────── */
/* Menu thẻ mục bên trái (.ac-pb-nav) + khung nội dung bên phải (.ac-pb-content) — bấm 1 thẻ
   để xem/chỉnh đúng mục đó, thay vì phải cuộn qua 1 form dài gộp hết mọi mục (xem
   switchPbTab trong prompt-builder.js). Trên mobile, nav chuyển thành hàng thẻ cuộn ngang
   phía trên nội dung (xem media query bên dưới). */
.ac-pb-body { display: flex; align-items: stretch; padding: 0; overflow: hidden; min-height: 0; }
.ac-pb-nav {
  flex: 0 0 190px; display: flex; flex-direction: column; gap: 2px; min-height: 0;
  padding: 14px 10px; overflow-y: auto; border-right: 1px solid var(--ac-border); background: var(--ac-card);
}
.ac-pb-nav-item {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 9px 10px; border: none; border-radius: 8px; background: transparent;
  font-size: 12.5px; font-weight: 600; color: var(--ac-ink-soft); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.ac-pb-nav-item:hover { background: var(--ac-border); color: var(--ac-ink); }
.ac-pb-nav-item.active { background: var(--ac-accent); color: #fff; }
.ac-pb-nav-icon { font-size: 15px; flex-shrink: 0; width: 18px; text-align: center; }
.ac-pb-nav-result { margin-top: 8px; padding-top: 12px; border-top: 1px dashed var(--ac-border); }

.ac-pb-content { flex: 1; min-width: 0; min-height: 0; padding: 18px 20px; overflow-y: auto; }
/* Mỗi mục là 1 "trang" riêng — chỉ mục đang active mới hiện, JS chỉ toggle class .active
   (xem switchPbTab), nội dung/giá trị các ô input vẫn nằm nguyên trong DOM dù đang ẩn nên
   không mất dữ liệu khi chuyển qua lại giữa các thẻ. */
.ac-pb-content > .ac-pb-section {
  display: none; margin-bottom: 0; padding: 0; border: none; box-shadow: none; background: transparent;
}
.ac-pb-content > .ac-pb-section.active { display: block; }
.ac-pb-content > .ac-pb-result { display: none; }
.ac-pb-content > .ac-pb-result.active { display: block; }

@media (max-width: 640px) {
  .ac-pb-body { flex-direction: column; }
  .ac-pb-nav {
    flex: 0 0 auto; flex-direction: row; width: 100%; gap: 6px;
    padding: 10px 12px; overflow-x: auto; overflow-y: hidden;
    border-right: none; border-bottom: 1px solid var(--ac-border);
  }
  .ac-pb-nav-item { flex: 0 0 auto; white-space: nowrap; }
  .ac-pb-nav-result { margin-top: 0; padding-top: 0; border-top: none; padding-left: 14px; border-left: 1px dashed var(--ac-border); }
  .ac-pb-content { padding: 14px 16px; }
}

.ac-pb-section-title { font-size: 13px; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.ac-pb-section-hint { font-size: 12px; color: var(--ac-ink-soft); font-weight: 400; }
.ac-pb-subsection-title {
  font-size: 12px; font-weight: 700; margin-top: 14px; padding-top: 14px;
  border-top: 1px dashed var(--ac-border);
}

.ac-pb-format-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.ac-pb-format-card {
  position: relative; display: block; border: 2px solid var(--ac-border); border-radius: 10px;
  padding: 14px 16px; cursor: pointer; background: var(--ac-card);
}
.ac-pb-format-card input { position: absolute; top: 14px; right: 14px; cursor: pointer; }
.ac-pb-format-card.selected { border-color: var(--ac-accent); background: rgba(124, 92, 255, .08); }
.ac-pb-format-title { font-weight: 700; font-size: 14px; margin-bottom: 5px; padding-right: 22px; }
.ac-pb-format-desc { font-size: 12px; color: var(--ac-ink-soft); line-height: 1.55; }

.ac-pb-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ac-pb-chip {
  border: 1px solid var(--ac-border); background: var(--ac-card); color: var(--ac-ink);
  padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.ac-pb-chip.active { background: var(--ac-accent); border-color: var(--ac-accent); color: #fff; }
.ac-pb-custom-input {
  margin-top: 8px; display: none; width: 100%; padding: 9px 12px;
  border: 1px solid var(--ac-border); border-radius: 8px; font-size: 14px; font-family: inherit;
}
.ac-pb-custom-input.show { display: block; }

.ac-pb-type-fields {
  margin-top: 10px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px;
  padding: 12px; background: var(--ac-card); border: 1px solid var(--ac-border); border-radius: 8px;
}
.ac-pb-type-fields-heading {
  grid-column: 1 / -1; font-size: 12px; font-weight: 700; color: var(--ac-ink-soft);
  text-transform: uppercase; letter-spacing: .3px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--ac-border);
}
.ac-pb-type-fields-heading:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.ac-pb-type-field { display: flex; flex-direction: column; gap: 5px; }
.ac-pb-type-field-wide { grid-column: 1 / -1; }
.ac-pb-type-field label { font-size: 12px; color: var(--ac-ink-soft); }
.ac-pb-type-field input, .ac-pb-type-field textarea {
  padding: 8px 10px; border: 1px solid var(--ac-border); border-radius: 6px; font-size: 13.5px; font-family: inherit;
  resize: vertical;
}

.ac-pb-color-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 10px;
}
.ac-pb-color-item {
  display: flex; flex-direction: column; gap: 6px; padding: 10px; background: var(--ac-card);
  border: 1px solid var(--ac-border); border-radius: 8px;
}
.ac-pb-color-item label { font-size: 12.5px; color: var(--ac-ink-soft); }
.ac-pb-color-controls { display: flex; align-items: center; gap: 8px; }
.ac-pb-color-item input[type=color] {
  width: 40px; height: 30px; padding: 2px; border: 1px solid var(--ac-border); border-radius: 6px;
  cursor: pointer; background: #fff; flex-shrink: 0;
}
.ac-pb-gradient-toggle {
  display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--ac-ink-soft); cursor: pointer;
  white-space: nowrap;
}
.ac-pb-gradient-toggle input { cursor: pointer; }
.ac-pb-color-preview {
  display: none; width: 100%; height: 22px; border-radius: 6px; border: 1px solid var(--ac-border);
}
.ac-pb-color-preview.show { display: block; }
/* Gom label + ô nhập + tuỳ chọn liên quan (vd: "Để AI tự viết lại...") vào chung 1 khối
   để rõ đây là cùng 1 nhóm, thay vì trông như 2 phần rời rạc. */
.ac-pb-boxed-field {
  border: 1px solid var(--ac-border); border-radius: 8px; padding: 12px 14px; background: var(--ac-card);
}

/* Toggle "Để AI tự viết lại..." — checkbox tuỳ biến, nút tích nằm trước chữ.
   .ac-field label.ac-pb-ai-toggle cần specificity cao hơn ".ac-field label" (vốn ép
   display:block cho MỌI label trong .ac-field) để flex-row thực sự có tác dụng. */
.ac-field label.ac-pb-ai-toggle {
  display: flex; align-items: center; gap: 9px; margin-top: 10px; margin-bottom: 0; padding-top: 10px;
  border-top: 1px dashed var(--ac-border); font-size: 13px; font-weight: 400; color: var(--ac-ink-soft);
  cursor: pointer;
}
.ac-pb-ai-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.ac-pb-ai-toggle-box {
  flex-shrink: 0; width: 19px; height: 19px; border-radius: 6px; border: 1.5px solid var(--ac-border);
  background: #fff; display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.ac-pb-ai-toggle-box svg {
  width: 12px; height: 12px; color: #fff; opacity: 0; transform: scale(.4);
  transition: opacity .15s ease, transform .15s cubic-bezier(.34, 1.56, .64, 1);
}
.ac-pb-ai-toggle:hover .ac-pb-ai-toggle-box { border-color: var(--ac-accent); }
.ac-pb-ai-toggle:hover .ac-pb-ai-toggle-text { color: var(--ac-ink); }
.ac-pb-ai-toggle input:checked ~ .ac-pb-ai-toggle-box {
  background: var(--ac-accent); border-color: var(--ac-accent); transform: scale(1.08);
}
.ac-pb-ai-toggle input:checked ~ .ac-pb-ai-toggle-box svg { opacity: 1; transform: scale(1); }
.ac-pb-ai-toggle input:focus-visible ~ .ac-pb-ai-toggle-box { box-shadow: 0 0 0 3px rgba(124, 92, 255, .25); }

.ac-pb-field-block {
  border: 1px solid var(--ac-border); border-radius: 8px; padding: 8px; margin-bottom: 8px; background: var(--ac-card);
}
.ac-pb-field-block .ac-pb-field-row { margin-bottom: 0; }
.ac-pb-field-block .ac-pb-custom-input.show { margin-top: 8px; margin-bottom: 0; }

/* Toggle "Công khai" trên từng field của form thu thập — mặc định TẮT (riêng tư, chữ xám nhạt);
   bật lên chuyển sang xanh lá để nổi bật rõ đây là dữ liệu sẽ hiện công khai trên website (vd:
   số bàn đã đặt), khác với các field còn lại (tên, SĐT...) chỉ chủ project xem được. */
.ac-pb-field-public-toggle {
  display: flex; align-items: center; gap: 7px; margin-top: 7px;
  font-size: 11.5px; line-height: 1.4; color: var(--ac-ink-soft); cursor: pointer;
}
.ac-pb-field-public-toggle input { cursor: pointer; flex-shrink: 0; }
.ac-pb-field-public-toggle.is-active { color: #1c8a52; font-weight: 600; }

/* Mỗi form là 1 khối riêng (nền trắng để tách biệt với .ac-pb-field-block bên trong dùng
   var(--ac-card)), có thể tạo nhiều form khác nhau trong cùng mục "Form thu thập thông tin". */
.ac-pb-form-block {
  border: 1px solid var(--ac-border); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; background: #fff;
}
.ac-pb-form-block-header { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.ac-pb-form-name-input {
  flex: 1; padding: 8px 10px; border: 1px solid var(--ac-border); border-radius: 6px;
  font-size: 13.5px; font-weight: 700; font-family: inherit;
}

.ac-pb-thumb-selected {
  outline: 2px solid var(--ac-accent); outline-offset: 1px;
}

.ac-pb-images-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin-top: 4px;
}
.ac-pb-image-item {
  position: relative; border: 1px solid var(--ac-border); border-radius: 10px; overflow: hidden; background: var(--ac-card);
}
.ac-pb-image-item img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.ac-pb-image-remove {
  position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border-radius: 50%; border: none;
  background: rgba(0,0,0,.6); color: #fff; font-size: 14px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.ac-pb-image-remove:hover { background: #c0392b; }
.ac-pb-image-tag {
  width: 100%; border: none; border-top: 1px solid var(--ac-border); background: transparent;
  font-size: 11.5px; padding: 6px 8px; color: var(--ac-ink); cursor: pointer;
}
.ac-pb-upload-tile {
  border: 2px dashed var(--ac-border); border-radius: 10px; aspect-ratio: 1; display: flex; align-items: center;
  justify-content: center; text-align: center; font-size: 11.5px; color: var(--ac-ink-soft); cursor: pointer; padding: 8px;
}
.ac-pb-upload-tile:hover { border-color: var(--ac-accent); color: var(--ac-accent); }

.ac-pb-group-row {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; padding: 8px 10px;
  background: var(--ac-card); border: 1px solid var(--ac-border); border-radius: 8px;
}
.ac-pb-group-row select, .ac-pb-group-row input[type=text] {
  padding: 7px 10px; border: 1px solid var(--ac-border); border-radius: 8px; font-size: 13px;
}
.ac-pb-group-row select { flex: 1 1 45%; }
.ac-pb-group-row input[type=text] { flex: 1 1 35%; }
.ac-pb-group-count { font-size: 12px; color: var(--ac-ink-soft); white-space: nowrap; }

@media (max-width: 640px) {
  .ac-pb-group-row select { flex: 1 1 100%; }
  .ac-pb-group-row input[type=text] { flex: 1 1 100%; }
}

.ac-pb-field-presets { margin-bottom: 10px; }
.ac-pb-field-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; align-items: center; }
.ac-pb-field-row input[type=text] {
  flex: 1 1 55%; padding: 8px 10px; border: 1px solid var(--ac-border); border-radius: 8px; font-size: 13.5px;
}
.ac-pb-field-row select {
  flex: 1 1 35%; padding: 8px 10px; border: 1px solid var(--ac-border); border-radius: 8px; font-size: 13.5px;
}

@media (max-width: 640px) {
  .ac-pb-field-row input[type=text] { flex: 1 1 100%; }
  .ac-pb-field-row select { flex: 1 1 calc(100% - 40px); }
}
.ac-pb-field-remove {
  border: none; background: transparent; color: var(--ac-ink-soft); font-size: 18px; line-height: 1; cursor: pointer;
  padding: 4px 6px;
}
.ac-pb-field-remove:hover { color: var(--ac-accent-dark); }
.ac-pb-empty-hint { font-size: 12.5px; color: var(--ac-ink-soft); font-style: italic; }

.ac-pb-textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--ac-border); border-radius: 8px;
  font-size: 13.5px; font-family: inherit; resize: vertical;
}

.ac-pb-result {
  position: relative; margin-bottom: 16px; padding: 16px 18px; border-radius: 12px;
  border: 1px solid var(--ac-accent); background: rgba(124, 92, 255, .05);
}
.ac-pb-result textarea {
  width: 100%; min-height: 180px; padding: 12px; border: 1px solid var(--ac-border); border-radius: 8px;
  font-size: 13px; font-family: "Consolas", monospace; line-height: 1.6; resize: vertical;
}
.ac-pb-result-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

.ac-field { margin-bottom: 14px; }
.ac-field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.ac-field input, .ac-field textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--ac-border); border-radius: 8px; font-size: 14px;
}
.ac-field-hint { font-size: 12px; color: var(--ac-ink-soft); margin-top: 5px; }

/* ── Tuỳ chọn giao diện làm việc (Cài đặt → Giao diện, xem initSettings trong editor.js) ───────
   Đọc sớm ngay trong <head> thành 2 thuộc tính trên <html> nên áp dụng từ khung hình đầu tiên. */
.ac-btn-label { white-space: nowrap; }
/* Rút gọn nút chỉ còn icon: chế độ "Chỉ icon" (thuộc tính trên <html>, có hiệu lực ngay khi tải),
   hoặc chế độ "Tự động" khi JS đo thấy thanh công cụ sắp tràn xuống hàng thứ 2 (.is-compact). Tên
   nút vẫn còn ở title/aria-label, di chuột lên là thấy. */
:is(html[data-ac-toolbar-labels="icons"] .ac-editor-toolbar, .ac-editor-toolbar.is-compact) { gap: 6px; }
:is(html[data-ac-toolbar-labels="icons"] .ac-editor-toolbar, .ac-editor-toolbar.is-compact) .ac-btn-label { display: none; }
:is(html[data-ac-toolbar-labels="icons"] .ac-editor-toolbar, .ac-editor-toolbar.is-compact) .ac-btn-sm { padding: 6px 8px; }
:is(html[data-ac-toolbar-labels="icons"] .ac-editor-toolbar, .ac-editor-toolbar.is-compact) .ac-tab { padding: 6px 9px; }
:is(html[data-ac-toolbar-labels="icons"] .ac-editor-toolbar, .ac-editor-toolbar.is-compact) .ac-view-btn { padding: 5px 8px; }
/* Co giãn cỡ giao diện — CHỈ các thanh cố định bao quanh vùng làm việc. Cố ý không áp lên các panel
   nổi trong chế độ Kéo thả: panel thuộc tính kéo-thả theo toạ độ chuột, bị zoom là kéo lệch tay. */
/* He so co giao dien dung chung: vua cho zoom ben duoi, vua cho khoang chua 2 ben canvas Keo tha
   (visual-editor.css) de bang khoi / bang thuoc tinh phong to khong de len vung lam viec. */
html { --ac-ui-scale: 1; }
html[data-ac-ui-scale="80"] { --ac-ui-scale: .8; }
html[data-ac-ui-scale="90"] { --ac-ui-scale: .9; }
html[data-ac-ui-scale="110"] { --ac-ui-scale: 1.1; }
html[data-ac-ui-scale="120"] { --ac-ui-scale: 1.2; }
html[data-ac-ui-scale="80"] :is(.ac-editor-toolbar, .ac-code-subtabs, .ac-preview-bar) { zoom: .8; }
html[data-ac-ui-scale="90"] :is(.ac-editor-toolbar, .ac-code-subtabs, .ac-preview-bar) { zoom: .9; }
html[data-ac-ui-scale="110"] :is(.ac-editor-toolbar, .ac-code-subtabs, .ac-preview-bar) { zoom: 1.1; }
html[data-ac-ui-scale="120"] :is(.ac-editor-toolbar, .ac-code-subtabs, .ac-preview-bar) { zoom: 1.2; }

/* ── Modal Cài đặt: cột tab bên trái + nội dung bên phải ──────────────────────────────── */
.ac-modal-settings { max-width: 780px; }
.ac-settings-layout { flex: 1; min-height: 0; display: flex; }
.ac-settings-tabs {
  flex: 0 0 180px; display: flex; flex-direction: column; gap: 2px; padding: 12px 10px;
  background: var(--ac-card); border-right: 1px solid var(--ac-border);
}
.ac-settings-tab {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: none; border-radius: 8px;
  background: transparent; color: var(--ac-ink-soft); font-size: 13px; font-weight: 600; text-align: left; cursor: pointer;
}
.ac-settings-tab:hover { color: var(--ac-ink); background: rgba(30, 36, 48, .05); }
.ac-settings-tab.active { color: var(--ac-ink); background: #fff; box-shadow: inset 0 0 0 1px var(--ac-border), 0 1px 2px rgba(30, 36, 48, .06); }
.ac-settings-tab.active .ac-icon { color: var(--ac-accent); }
.ac-settings-panels { flex: 1; min-width: 0; overflow-y: auto; padding: 18px 22px 22px; }
.ac-settings-panel[hidden] { display: none; }
.ac-settings-group + .ac-settings-group { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--ac-border); }
.ac-settings-group-title { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--ac-ink); }
.ac-settings-hint { margin: 0 0 12px; max-width: 60ch; font-size: 12.5px; line-height: 1.55; color: var(--ac-ink-soft); }
.ac-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 9px; background: var(--ac-card); box-shadow: inset 0 0 0 1px var(--ac-border); }
.ac-seg-btn {
  min-width: 54px; padding: 6px 10px; border: none; border-radius: 7px; background: transparent;
  color: var(--ac-ink-soft); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer;
}
.ac-seg-btn:hover { color: var(--ac-ink); }
.ac-seg-btn.active { background: #fff; color: var(--ac-ink); box-shadow: 0 1px 3px rgba(30, 36, 48, .14); }
.ac-settings-options { display: flex; flex-direction: column; gap: 8px; }
.ac-settings-option {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 11px 14px;
  border: 1px solid var(--ac-border); border-radius: 10px; background: #fff; color: var(--ac-ink); text-align: left; cursor: pointer;
}
.ac-settings-option:hover { border-color: #cfd3dc; }
.ac-settings-option.active { border-color: var(--ac-accent); box-shadow: inset 0 0 0 1px var(--ac-accent); }
.ac-settings-option-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ac-settings-option-text strong { font-size: 13px; }
.ac-settings-option-text span { font-size: 12px; line-height: 1.45; color: var(--ac-ink-soft); }
.ac-settings-option-preview { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; color: var(--ac-ink-soft); font-size: 12px; }
/* Hình thu nhỏ của 1 nút trên thanh công cụ — cho thấy ngay mỗi lựa chọn trông ra sao. */
.ac-mini-btn {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 6px;
  background: var(--ac-card); box-shadow: inset 0 0 0 1px var(--ac-border); color: var(--ac-ink); font-size: 11.5px; font-weight: 600;
}
.ac-mini-btn .ac-icon { width: 13px; height: 13px; }
.ac-settings-footer { justify-content: flex-end; align-items: center; }
/* Cài đặt đang lưu ở đâu (tài khoản / chỉ trình duyệt này) — góc trái chân hộp, đẩy 2 nút sang phải. */
.ac-settings-sync { flex: 1 1 260px; min-width: 0; margin-right: auto; font-size: 12px; line-height: 1.45; color: var(--ac-ink-soft); }
.ac-settings-sync-item { display: block; }
.ac-settings-sync-item[hidden] { display: none; }
.ac-settings-sync-item .ac-icon { width: 14px; height: 14px; margin-right: 6px; vertical-align: -3px; }
.ac-settings-sync-item[data-sync="synced"] .ac-icon { color: #1f9d55; }
.ac-settings-sync-item[data-sync="error"] { color: #b4541a; }
.ac-settings-sync-item a { color: var(--ac-accent); font-weight: 600; text-decoration: none; }
.ac-settings-sync-item a:hover { text-decoration: underline; }
.ac-settings-sync-item[data-sync="saving"] .ac-icon { animation: ac-settings-spin .9s linear infinite; }
@keyframes ac-settings-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ac-settings-sync-item[data-sync="saving"] .ac-icon { animation: none; } }
.ac-settings-tab:focus-visible, .ac-seg-btn:focus-visible, .ac-settings-option:focus-visible { outline: 2px solid var(--ac-accent); outline-offset: 2px; }
@media (max-width: 600px) {
  .ac-settings-layout { flex-direction: column; }
  .ac-settings-tabs { flex: none; flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--ac-border); }
  .ac-settings-tab { width: auto; white-space: nowrap; }
  .ac-settings-option-preview { display: none; }
}

/* ── Cài đặt: 2 nhóm "Hệ thống" / "Website-Landing này" (round 84) ─────────────────────────── */
.ac-settings-nav-label {
  padding: 4px 10px 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ac-ink-soft); opacity: .85;
}
.ac-settings-tab + .ac-settings-nav-label { margin-top: 10px; padding-top: 13px; border-top: 1px solid var(--ac-border); }
/* Chân hộp: tab Hệ thống hiện trạng thái đồng bộ tài khoản; tab của website hiện ghi chú "lưu cùng project". */
.ac-site-footer-note, #acSiteSaveBtn { display: none; }
#acSettingsModal[data-scope="site"] .ac-settings-sync,
#acSettingsModal[data-scope="site"] #acUiPrefsReset { display: none; }
#acSettingsModal[data-scope="site"] .ac-site-footer-note {
  display: flex; align-items: center; gap: 7px; flex: 1 1 260px; min-width: 0; margin-right: auto;
  font-size: 12px; line-height: 1.45; color: var(--ac-ink-soft);
}
#acSettingsModal[data-scope="site"] #acSiteSaveBtn { display: inline-flex; }
.ac-site-footer-note .ac-icon { width: 14px; height: 14px; }
@media (max-width: 600px) {
  .ac-settings-nav-label { display: none; }
}

/* SEO của website */
.ac-site-form { max-width: 560px; }
.ac-site-form .ac-field { margin-bottom: 12px; }
.ac-site-form .ac-page-row input { flex: 1 1 auto; min-width: 0; }
.ac-field .ac-site-code, .ac-site-code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 12.5px; line-height: 1.5; resize: vertical;
}
.ac-site-check { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.ac-site-check input[type="checkbox"] { width: auto; margin: 0; flex: 0 0 auto; }
.ac-site-seo-card { display: grid; grid-template-columns: 200px minmax(0, 1fr); max-width: 560px; background: #fff; }
.ac-site-seo-card .ac-seo-card-img { height: auto; min-height: 108px; border-bottom: none; border-right: 1px solid var(--ac-border); }
.ac-site-seo-card .ac-seo-card-text { align-self: center; }
.ac-site-seo-pages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-width: 560px; }
.ac-site-seo-pages li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 10px; border: 1px solid var(--ac-border); border-radius: 8px; background: #fff; font-size: 13px;
}
.ac-site-seo-page-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ac-site-seo-page-mode {
  flex: 0 0 auto; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px;
  color: var(--ac-ink-soft); box-shadow: inset 0 0 0 1px var(--ac-border);
}
.ac-site-seo-page-mode.is-default { color: var(--ac-accent); background: rgba(124, 92, 255, .1); box-shadow: none; }
@media (max-width: 600px) {
  .ac-site-seo-card { grid-template-columns: minmax(0, 1fr); }
  .ac-site-seo-card .ac-seo-card-img { height: 132px; border-right: none; border-bottom: 1px solid var(--ac-border); }
}

/* Quảng cáo */
.ac-site-ads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ac-site-ad {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: 10px 12px; border: 1px solid var(--ac-border); border-radius: 10px; background: #fff;
}
.ac-site-ad.is-on { border-color: rgba(31, 157, 85, .45); }
.ac-site-ad.is-invalid { border-color: #d9822b; }
.ac-site-ad-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ac-field .ac-site-ad-head label, .ac-site-ad-head label { margin: 0; font-size: 13px; font-weight: 700; }
.ac-site-ad-logo {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font: 800 12.5px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.ac-site-ad-logo.is-fb { background: #1877f2; }
.ac-site-ad-logo.is-ga { background: #e37400; }
.ac-site-ad-logo.is-gads { background: #188038; }
.ac-site-ad-logo.is-gtm { background: #246fdb; }
.ac-site-ad-logo.is-tt { background: #111; }
.ac-site-ad-state {
  display: none; margin-left: auto; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; color: #1f7a45; background: rgba(31, 157, 85, .12);
}
.ac-site-ad.is-on .ac-site-ad-state { display: inline-block; }
.ac-site-ad input {
  width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid var(--ac-border); border-radius: 8px;
  font: 500 13px/1.3 ui-monospace, "Cascadia Code", Consolas, monospace; letter-spacing: .02em;
}
.ac-site-ad input:focus { outline: none; border-color: var(--ac-accent); box-shadow: 0 0 0 3px rgba(124, 92, 255, .15); }
.ac-site-ad-hint { font-size: 11.5px; line-height: 1.45; color: var(--ac-ink-soft); }
.ac-site-ad-error { font-size: 12px; line-height: 1.4; color: #b4541a; }
.ac-site-ad-error:empty { display: none; }
@media (max-width: 720px) { .ac-site-ads { grid-template-columns: minmax(0, 1fr); } }

/* Cấu hình trang: chọn SEO mặc định / SEO riêng */
.ac-seo-mode-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 12px; }
.ac-seo-mode-row .ac-seg-btn { min-width: 0; padding: 6px 12px; }
.ac-seo-mode-note { font-size: 12px; line-height: 1.45; color: var(--ac-ink-soft); }
.ac-seo-default {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border: 1px dashed var(--ac-border); border-radius: 9px; background: var(--ac-card);
}
.ac-seo-default[hidden], .ac-seo-fields[hidden] { display: none !important; }
.ac-seo-default-list { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 14px; width: 100%; margin: 0; font-size: 13px; }
.ac-seo-default-list dt { color: var(--ac-ink-soft); font-weight: 600; }
.ac-seo-default-list dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* ── Tên miền riêng: dùng chung ở Cài đặt (nền sáng) và domains.php (nền tối) — chỉ dùng biến màu ── */
.ac-dm-box { display: flex; flex-direction: column; gap: 12px; }
.ac-dm-loading, .ac-dm-empty { padding: 14px; border: 1px dashed var(--ac-border); border-radius: 10px; font-size: 13px; color: var(--ac-ink-soft); text-align: center; }
.ac-dm-note, .ac-dm-gate {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--ac-border); background: var(--ac-card); font-size: 13px; line-height: 1.5;
}
.ac-dm-note > .ac-icon, .ac-dm-gate-icon .ac-icon { width: 20px; height: 20px; flex: 0 0 auto; }
.ac-dm-note > div, .ac-dm-gate > div { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ac-dm-note b, .ac-dm-gate b { color: var(--ac-ink); }
.ac-dm-note span, .ac-dm-gate span { color: var(--ac-ink-soft); }
.ac-dm-note.is-warn { border-color: rgba(217, 130, 43, .45); }
.ac-dm-note.is-warn > .ac-icon { color: #d9822b; }
.ac-dm-note.is-err > .ac-icon { color: #d64545; }
.ac-dm-gate { border-color: rgba(124, 92, 255, .4); }
.ac-dm-gate-icon {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--ac-accent); background: rgba(124, 92, 255, .12);
}
.ac-dm-add { display: flex; flex-direction: column; gap: 6px; }
.ac-dm-add-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ac-dm-add input, .ac-dm-add select, .ac-dm-item-project select {
  padding: 8px 11px; border: 1px solid var(--ac-border); border-radius: 8px; font-size: 14px;
  background: var(--ac-dm-field, #fff); color: var(--ac-dm-field-ink, #1e2430);
}
.ac-dm-add input { flex: 1 1 240px; min-width: 0; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }
.ac-dm-add select { flex: 0 1 240px; min-width: 0; }
.ac-dm-add input:focus, .ac-dm-add select:focus, .ac-dm-item-project select:focus { outline: none; border-color: var(--ac-accent); box-shadow: 0 0 0 3px rgba(124, 92, 255, .18); }
.ac-dm-add .ac-btn { flex: 0 0 auto; }
.ac-dm-add-meta { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.ac-dm-add-error { color: #d64545; font-weight: 600; }
.ac-dm-count { margin-left: auto; color: var(--ac-ink-soft); font-variant-numeric: tabular-nums; }
.ac-dm-steps {
  list-style: none; counter-reset: dm; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
}
.ac-dm-steps li {
  counter-increment: dm; position: relative; display: flex; flex-direction: column; gap: 2px;
  padding: 9px 10px 9px 38px; border-radius: 9px; background: var(--ac-card); font-size: 12px; line-height: 1.4; color: var(--ac-ink-soft);
}
.ac-dm-steps li::before {
  content: counter(dm); position: absolute; left: 10px; top: 9px; width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #fff; background: var(--ac-accent);
}
.ac-dm-steps b { font-size: 12.5px; color: var(--ac-ink); }
.ac-dm-steps code, .ac-dm-dns-table code, .ac-dm-dns-notes code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .95em;
  padding: 1px 5px; border-radius: 4px; background: rgba(124, 92, 255, .1); color: var(--ac-ink);
}
.ac-dm-list { display: flex; flex-direction: column; gap: 10px; }
.ac-dm-item {
  display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 11px;
  border: 1px solid var(--ac-border); background: var(--ac-dm-item-bg, #fff);
}
.ac-dm-item.is-active { box-shadow: inset 3px 0 0 #1f9d55; }
.ac-dm-item.is-pending { box-shadow: inset 3px 0 0 #7c8aa5; }
.ac-dm-item.is-nossl { box-shadow: inset 3px 0 0 #d9822b; }
.ac-dm-item.is-error { box-shadow: inset 3px 0 0 #d64545; }
.ac-dm-item-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ac-dm-item-icon { display: inline-flex; color: var(--ac-ink-soft); }
.ac-dm-item-icon .ac-icon { width: 18px; height: 18px; }
.ac-dm-item-name { flex: 1 1 200px; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ac-dm-item-name b { font-size: 14.5px; color: var(--ac-ink); overflow-wrap: anywhere; }
.ac-dm-pill { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.ac-dm-pill.is-ok { color: #1f7a45; background: rgba(31, 157, 85, .14); }
.ac-dm-pill.is-wait { color: #5d6a85; background: rgba(124, 138, 165, .16); }
.ac-dm-pill.is-warn { color: #9a5a12; background: rgba(217, 130, 43, .16); }
.ac-dm-pill.is-err { color: #b03030; background: rgba(214, 69, 69, .14); }
.ac-dm-item-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.ac-dm-item-actions .ac-btn { padding: 5px 10px; font-size: 12.5px; white-space: nowrap; }
.ac-dm-item-actions .ac-icon { width: 14px; height: 14px; }
.ac-dm-del:hover { color: #d64545; border-color: rgba(214, 69, 69, .5); }
.ac-dm-item-msg { font-size: 12.5px; line-height: 1.5; color: var(--ac-ink-soft); }
.ac-dm-item-msg.is-err { color: #c24141; }
.ac-dm-item-msg.is-warn { color: #a8651a; }
.ac-dm-item-project { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--ac-ink-soft); }
.ac-dm-item-project select { padding: 5px 9px; font-size: 13px; max-width: 100%; }
.ac-dm-edit-link { color: var(--ac-accent); font-weight: 600; text-decoration: none; }
.ac-dm-edit-link:hover { text-decoration: underline; }
.ac-dm-item-warn { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #a8651a; }
.ac-dm-item-warn .ac-icon { width: 14px; height: 14px; }
.ac-dm-dns, .ac-dm-log { font-size: 12.5px; color: var(--ac-ink-soft); }
.ac-dm-dns summary, .ac-dm-log summary { cursor: pointer; font-weight: 600; color: var(--ac-ink); width: fit-content; }
.ac-dm-dns summary:focus-visible, .ac-dm-log summary:focus-visible { outline: 2px solid var(--ac-accent); outline-offset: 2px; }
.ac-dm-dns-body { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; line-height: 1.5; }
.ac-dm-dns-body p { margin: 0; }
.ac-dm-dns-scroll { overflow-x: auto; }
.ac-dm-dns-table { border-collapse: collapse; min-width: 420px; width: 100%; font-size: 12.5px; }
.ac-dm-dns-table th, .ac-dm-dns-table td { padding: 6px 9px; border: 1px solid var(--ac-border); text-align: left; color: var(--ac-ink); white-space: nowrap; }
.ac-dm-dns-table th { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ac-ink-soft); background: var(--ac-card); }
.ac-dm-copy {
  display: inline-flex; vertical-align: middle; padding: 3px; border: none; border-radius: 5px; background: transparent;
  color: var(--ac-ink-soft); cursor: pointer;
}
.ac-dm-copy:hover, .ac-dm-copy.is-copied { color: var(--ac-accent); background: rgba(124, 92, 255, .12); }
.ac-dm-copy .ac-icon { width: 14px; height: 14px; }
.ac-dm-dns-notes { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.ac-dm-muted { color: var(--ac-ink-soft); font-style: italic; }
.ac-dm-log pre {
  margin: 8px 0 0; padding: 9px 11px; max-height: 200px; overflow: auto; border-radius: 8px;
  background: #151827; color: #cfd5ea; font: 12px/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap;
}
.ac-dm-manage-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--ac-accent); text-decoration: none; }
.ac-dm-manage-link:hover { text-decoration: underline; }
.ac-dm-manage-link .ac-icon { width: 14px; height: 14px; }
.ac-dm-note .ac-btn, .ac-dm-gate .ac-btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 720px) {
  .ac-dm-steps { grid-template-columns: minmax(0, 1fr); }
  .ac-dm-item-actions { margin-left: 0; }
}
@media (max-width: 520px) {
  /* Điện thoại: nút xuống hàng riêng dưới lời nhắc, không bóp chữ trong nút thành 3 dòng. */
  .ac-dm-note, .ac-dm-gate { flex-wrap: wrap; }
  .ac-dm-note > div, .ac-dm-gate > div { flex: 1 1 calc(100% - 52px); }
  .ac-dm-note .ac-btn, .ac-dm-gate .ac-btn { margin-left: auto; }
}

/* ── Modal Tài nguyên: loại (ảnh/âm thanh/video) → cột thư mục → lưới tệp (resource-library.js) ── */
.ac-modal-resources { max-width: 980px; height: min(84vh, 700px); }
.ac-res-kinds { display: flex; gap: 4px; padding: 10px 20px; border-bottom: 1px solid var(--ac-border); }
.ac-res-kind {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: none; border-radius: 8px;
  background: transparent; color: var(--ac-ink-soft); font-size: 13px; font-weight: 600; cursor: pointer;
}
.ac-res-kind:hover { color: var(--ac-ink); background: var(--ac-card); }
.ac-res-kind.active { color: var(--ac-ink); background: var(--ac-card); box-shadow: inset 0 0 0 1px var(--ac-border); }
.ac-res-kind.active > .ac-icon { color: var(--ac-accent); }
.ac-res-count {
  min-width: 18px; padding: 0 6px; border-radius: 999px; background: rgba(30, 36, 48, .07);
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums;
}
.ac-res-layout { flex: 1; min-height: 0; display: flex; }
.ac-res-sidebar { flex: 0 0 220px; display: flex; flex-direction: column; min-height: 0; background: var(--ac-card); border-right: 1px solid var(--ac-border); }
.ac-res-folders { flex: 1; min-height: 0; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.ac-res-folder { display: flex; align-items: center; border-radius: 8px; }
.ac-res-folder:hover { background: rgba(30, 36, 48, .05); }
.ac-res-folder.active { background: #fff; box-shadow: inset 0 0 0 1px var(--ac-border); }
.ac-res-folder.is-drop-target { background: #fff; box-shadow: inset 0 0 0 2px var(--ac-accent); }
.ac-res-folder-main {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 7px 8px; border: none; border-radius: 8px;
  background: transparent; color: var(--ac-ink-soft); font-size: 13px; font-weight: 600; text-align: left; cursor: pointer;
}
.ac-res-folder:hover .ac-res-folder-main, .ac-res-folder.active .ac-res-folder-main { color: var(--ac-ink); }
.ac-res-folder.active .ac-res-folder-main > .ac-icon { color: var(--ac-accent); }
.ac-res-folder-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-res-folder-actions { display: none; gap: 2px; padding-right: 4px; }
.ac-res-folder:hover .ac-res-folder-actions, .ac-res-folder:focus-within .ac-res-folder-actions { display: flex; }
.ac-res-folder-input {
  flex: 1; min-width: 0; margin: 2px; padding: 6px 8px; border: 1px solid var(--ac-accent); border-radius: 7px;
  background: #fff; color: var(--ac-ink); font-size: 13px; outline: none;
}
.ac-res-new-folder { display: flex; justify-content: center; margin: 0 10px 10px; }
.ac-res-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0;
  border: none; border-radius: 6px; background: transparent; color: var(--ac-ink-soft); cursor: pointer;
}
.ac-res-icon-btn:hover { background: rgba(30, 36, 48, .08); color: var(--ac-ink); }
.ac-res-icon-btn.is-danger:hover { background: #fde8e4; color: #c0392b; }
.ac-res-icon-btn .ac-icon { width: 14px; height: 14px; }
.ac-res-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.ac-res-toolbar { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--ac-border); }
.ac-res-title { flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; }
.ac-res-usage { font-size: 12px; color: var(--ac-ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ac-res-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px; }
/* Kéo tệp từ máy tính thả thẳng vào vùng lưới để tải lên. */
.ac-res-body.is-dragover { box-shadow: inset 0 0 0 2px var(--ac-accent); background: color-mix(in srgb, var(--ac-accent) 5%, #fff); }
.ac-res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.ac-res-grid[hidden] { display: none; }
.ac-res-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--ac-border); border-radius: 10px; background: #fff; }
.ac-res-card:hover { border-color: #cfd3dc; box-shadow: 0 4px 14px rgba(30, 36, 48, .08); }
.ac-res-card.is-dragging { opacity: .45; }
.ac-res-thumb { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ac-card); color: var(--ac-ink-soft); }
/* absolute: giữ đúng khung 4:3 cho MỌI ảnh. Để ảnh nằm trong luồng flex thì min-height:auto của flex item
   = cao theo nội dung, ảnh vuông/dọc tự kéo cao cả thẻ và lưới thẻ lệch hàng. */
.ac-res-thumb img, .ac-res-thumb video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.ac-res-kind-icon .ac-icon { width: 34px; height: 34px; opacity: .5; }
/* Tab Icon (bộ icon dựng sẵn — icon-library.js): ô xem vẽ thẳng SVG, nền ca-rô cho thấy phần trong suốt. */
.ac-res-thumb.is-icon {
  color: var(--ac-ink); padding: 16px;
  background-color: var(--ac-card);
  background-image: linear-gradient(45deg, rgba(128, 128, 128, .12) 25%, transparent 25%, transparent 75%, rgba(128, 128, 128, .12) 75%),
    linear-gradient(45deg, rgba(128, 128, 128, .12) 25%, transparent 25%, transparent 75%, rgba(128, 128, 128, .12) 75%);
  background-size: 14px 14px; background-position: 0 0, 7px 7px;
}
.ac-res-thumb.is-icon svg { position: relative; width: 100%; height: 100%; }
/* Tab Phông chữ: xem thử bằng chính phông vừa tải lên. */
.ac-res-thumb.is-font { background: var(--ac-card); color: var(--ac-ink); }
.ac-res-font-sample { display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; text-align: center; padding: 8px; }
.ac-res-font-sample span:first-child { font-size: 22px; line-height: 1.2; }
.ac-res-font-sample span:last-child { font-size: 13px; opacity: .75; }
.ac-res-pick-thumb.is-icon { display: flex; align-items: center; justify-content: center; padding: 6px; color: var(--ac-ink); }
.ac-res-pick-thumb.is-icon svg { width: 100%; height: 100%; }
.ac-res-meta { min-width: 0; padding: 8px 10px; }
.ac-res-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--ac-ink); }
.ac-res-sub { margin-top: 2px; font-size: 11.5px; color: var(--ac-ink-soft); font-variant-numeric: tabular-nums; }
.ac-res-card-actions { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; opacity: 0; transition: opacity .12s; }
.ac-res-card:hover .ac-res-card-actions, .ac-res-card:focus-within .ac-res-card-actions { opacity: 1; }
.ac-res-card-actions .ac-res-icon-btn { background: rgba(255, 255, 255, .95); box-shadow: 0 1px 3px rgba(30, 36, 48, .2); }
.ac-res-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(24, 26, 40, .72); color: #fff; cursor: pointer;
}
.ac-res-play[hidden] { display: none; }
/* Âm thanh: nút phát nép góc dưới-phải để không che biểu tượng nốt nhạc ở giữa. */
.ac-res-play.is-corner { left: auto; top: auto; right: 10px; bottom: 10px; transform: none; width: 34px; height: 34px; }
.ac-res-play .ac-icon { width: 18px; height: 18px; }
.ac-res-card.is-playing .ac-res-play { background: var(--ac-accent); }
.ac-res-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 260px; color: var(--ac-ink-soft); font-size: 13px; text-align: center; }
.ac-res-empty[hidden] { display: none; }
.ac-res-empty .ac-icon { width: 40px; height: 40px; opacity: .45; }
.ac-res-hint { margin: 0; padding: 8px 18px 12px; font-size: 11.5px; color: var(--ac-ink-soft); }
/* ── Chế độ CHỌN (chèn/đổi ảnh): bấm thẻ để chọn, thanh dưới cùng xác nhận ──────────────────── */
.ac-res-kind:disabled { opacity: .4; cursor: not-allowed; }
.ac-res-kind:disabled:hover { background: transparent; color: var(--ac-ink-soft); }
/* Nút trong suốt phủ cả thẻ; nút phát + chuyển thư mục/xoá nổi trên nó nên vẫn bấm được riêng. */
.ac-res-pick-target { position: absolute; inset: 0; z-index: 1; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: pointer; }
.ac-res-card-actions, .ac-res-card.is-pickable .ac-res-play { z-index: 2; }
.ac-res-card.is-playing .ac-res-pick-target { pointer-events: none; }
.ac-res-card.is-selected, .ac-res-card.is-selected:hover { border-color: var(--ac-accent); box-shadow: 0 0 0 2px var(--ac-accent); }
.ac-res-pick-check {
  position: absolute; top: 6px; left: 6px; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--ac-accent); color: #fff; box-shadow: 0 1px 3px rgba(30, 36, 48, .25);
  opacity: 0; transform: scale(.6); transition: opacity .12s, transform .12s;
}
.ac-res-pick-check .ac-icon { width: 14px; height: 14px; stroke-width: 3; }
.ac-res-card.is-selected .ac-res-pick-check { opacity: 1; transform: none; }
.ac-res-pick-target:focus-visible { outline: 2px solid var(--ac-accent); outline-offset: 2px; }
.ac-res-pickbar { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--ac-border); background: #fff; }
.ac-res-pickbar[hidden] { display: none; }
.ac-res-pick-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ac-ink-soft); }
.ac-res-pick-thumb { flex-shrink: 0; width: 44px; height: 33px; border-radius: 6px; object-fit: cover; background: var(--ac-card); box-shadow: inset 0 0 0 1px var(--ac-border); }
.ac-res-pick-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ac-res-pick-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--ac-ink); }
.ac-res-pick-text span { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .ac-res-pick-check { transition: none; } }
/* Menu "Chuyển vào thư mục" — fixed để thoát khỏi overflow:hidden của .ac-modal. */
.ac-res-menu {
  position: fixed; z-index: 1200; min-width: 210px; max-height: 280px; overflow-y: auto; padding: 6px;
  background: #fff; border: 1px solid var(--ac-border); border-radius: 10px; box-shadow: 0 12px 32px rgba(30, 36, 48, .18);
}
.ac-res-menu[hidden] { display: none; }
.ac-res-menu-title { padding: 6px 8px 4px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ac-ink-soft); }
.ac-res-menu-note { padding: 4px 8px 6px; font-size: 12px; color: var(--ac-ink-soft); }
.ac-res-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: none; border-radius: 7px;
  background: transparent; color: var(--ac-ink); font-size: 13px; text-align: left; cursor: pointer;
}
.ac-res-menu-item:hover { background: var(--ac-card); }
.ac-res-menu-item .ac-icon { width: 14px; height: 14px; color: var(--ac-ink-soft); }
.ac-res-menu-item.is-current .ac-icon { color: var(--ac-accent); }
/* Ô tìm thư mục — trên cùng cột thư mục. */
.ac-res-search { position: relative; margin: 10px 10px 0; }
.ac-res-search > .ac-icon { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--ac-ink-soft); pointer-events: none; }
.ac-res-search input {
  width: 100%; padding: 7px 30px; border: 1px solid var(--ac-border); border-radius: 8px;
  background: #fff; color: var(--ac-ink); font-size: 13px; outline: none;
}
.ac-res-search input:focus { border-color: var(--ac-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac-accent) 18%, transparent); }
.ac-res-search-clear {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border: none; border-radius: 6px; background: transparent; color: var(--ac-ink-soft); cursor: pointer;
}
.ac-res-search-clear[hidden] { display: none; }
.ac-res-search-clear:hover { background: rgba(30, 36, 48, .08); color: var(--ac-ink); }
.ac-res-search-clear .ac-icon { width: 13px; height: 13px; }
.ac-res-folder-empty { padding: 10px 8px; font-size: 12px; line-height: 1.5; color: var(--ac-ink-soft); overflow-wrap: anywhere; }

/* ── Hộp xác nhận dùng chung (acConfirm trong common.js) — nổi trên mọi modal khác ──────── */
.ac-confirm-overlay {
  position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(16, 18, 28, .55); animation: ac-confirm-fade .14s ease-out;
}
.ac-confirm {
  --ac-ink: #1e2430; --ac-ink-soft: #5b6472; --ac-border: #e4e7ed; --ac-card: #f6f7fb;
  display: grid; grid-template-columns: auto 1fr; column-gap: 14px; width: 100%; max-width: 440px; padding: 22px 22px 18px;
  background: #fff; color: var(--ac-ink); border-radius: 14px; box-shadow: 0 24px 60px rgba(16, 18, 28, .35);
  animation: ac-confirm-pop .16s ease-out;
}
.ac-confirm-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #fdecea; color: #c0392b; }
/* acConfirm({ tone: 'info' }) — hộp hướng dẫn (vd cần đăng nhập để lưu), không phải xác nhận xoá */
.ac-confirm.is-info .ac-confirm-icon { background: #efebff; color: #6344e6; }
.ac-confirm.is-info .ac-confirm-detail { color: var(--ac-ink-soft); font-weight: 500; }
.ac-confirm-icon .ac-icon { width: 20px; height: 20px; }
.ac-confirm-body { min-width: 0; }
.ac-confirm-title { margin: 2px 0 10px; font-size: 16px; font-weight: 700; line-height: 1.35; text-wrap: balance; }
.ac-confirm-subject {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%; margin: 0 0 10px; padding: 6px 10px; border-radius: 8px;
  background: var(--ac-card); box-shadow: inset 0 0 0 1px var(--ac-border); font-size: 13px; font-weight: 600;
}
.ac-confirm-subject[hidden] { display: none; }
.ac-confirm-subject span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-confirm-subject .ac-icon { width: 14px; height: 14px; flex-shrink: 0; color: var(--ac-ink-soft); }
.ac-confirm-msg { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ac-ink-soft); }
.ac-confirm-detail { margin: 10px 0 0; font-size: 12.5px; font-weight: 600; color: #c0392b; }
.ac-confirm-error { margin: 12px 0 0; padding: 8px 10px; border-radius: 8px; background: #fdecea; color: #a93226; font-size: 12.5px; line-height: 1.45; }
.ac-confirm-detail[hidden], .ac-confirm-error[hidden] { display: none; }
.ac-confirm-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
/* Nâng độ ưu tiên: editor-theme.css (nạp sau) có luật .ac-btn-ghost:hover dành cho nền tối. */
.ac-confirm .ac-btn-danger-solid { background: #d93a2b; color: #fff; }
.ac-confirm .ac-btn-danger-solid:hover:not([disabled]) { background: #b83224; }
.ac-confirm .ac-btn-ghost:hover:not([disabled]) { background: #f1f2f6; }
.ac-confirm .ac-btn:focus-visible { outline: 2px solid var(--ac-accent); outline-offset: 2px; }
@keyframes ac-confirm-fade { from { opacity: 0; } }
@keyframes ac-confirm-pop { from { opacity: 0; transform: translateY(6px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .ac-confirm-overlay, .ac-confirm { animation: none; } }
@media (max-width: 480px) {
  .ac-confirm { grid-template-columns: 1fr; }
  .ac-confirm-icon { margin-bottom: 12px; }
  .ac-confirm-actions .ac-btn { flex: 1; justify-content: center; }
}
.ac-res-kind:focus-visible, .ac-res-folder-main:focus-visible, .ac-res-icon-btn:focus-visible, .ac-res-play:focus-visible, .ac-res-menu-item:focus-visible {
  outline: 2px solid var(--ac-accent); outline-offset: 2px;
}
@media (hover: none) {
  .ac-res-card-actions { opacity: 1; }
  .ac-res-folder-actions { display: flex; }
}
@media (max-width: 700px) {
  .ac-res-layout { flex-direction: column; }
  .ac-res-sidebar { flex: none; max-height: 36%; border-right: none; border-bottom: 1px solid var(--ac-border); }
  .ac-res-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .ac-res-card-actions { opacity: 1; }
}
.ac-field-error { font-size: 12.5px; color: var(--ac-accent-dark); margin-top: 5px; display: none; }

/* ── Toast ──────────────────────────────────────────────────────────── */
.ac-toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: #1e2430; color: #fff; padding: 11px 20px; border-radius: 10px; font-size: 13.5px;
  z-index: 2000; box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.ac-toast-error { background: var(--ac-accent-dark); }

/* ── Public view page ───────────────────────────────────────────────── */
.ac-view-frame { position: fixed; inset: 0; width: 100%; height: 100%; border: none; }
.ac-view-badge {
  position: fixed; bottom: 12px; right: 12px; background: rgba(30,30,46,.85); color: #fff;
  font-size: 11px; padding: 6px 10px; border-radius: 999px; text-decoration: none; z-index: 10;
}

/* ── SEO thumbnail: nút chọn ảnh + xem trước (tỉ lệ 1.91:1 giống OG image) ── */
.ac-pb-thumb-picker { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ac-pb-thumb-preview {
  width: 160px; height: 84px; border: 1px solid var(--ac-border); border-radius: 8px; overflow: hidden;
  background: var(--ac-card); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ac-pb-thumb-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Modal cắt ảnh thumbnail (port từ assets/css/edit.css .thumb-crop-modal) ── */
.thumb-crop-modal {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2147483647;
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transition: opacity .25s; pointer-events: none;
}
.thumb-crop-modal.show { opacity: 1; pointer-events: auto; }
.tcm-backdrop {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(15,15,30,.6); backdrop-filter: blur(6px);
}
.tcm-sheet {
  position: relative; width: 100%; max-width: 520px; max-height: 92vh;
  background: #fff !important; color: #1a1a2e !important; border-radius: 20px 20px 0 0;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 -8px 40px rgba(0,0,0,.25);
  transform: translateY(100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
  font-family: 'Segoe UI', system-ui, sans-serif;
}
.thumb-crop-modal.show .tcm-sheet { transform: translateY(0); }
.tcm-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 12px; border-bottom: 1px solid #e8e8ee;
}
.tcm-title { font-size: 15px; font-weight: 700; }
.tcm-close {
  width: 30px; height: 30px; border: none; border-radius: 8px; background: #f7f7f9;
  cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center;
}
.tcm-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.tcm-canvas-wrap { position: relative; background: #1a1a2e; border-radius: 10px; overflow: hidden; cursor: grab; }
.tcm-canvas-wrap:active { cursor: grabbing; }
.tcm-canvas-wrap canvas { display: block; }
.tcm-crop-box {
  position: absolute; border: 2px solid #fff; border-radius: 4px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0);
}
.tcm-crop-label {
  position: absolute; bottom: -24px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-size: 10px; color: rgba(255,255,255,.7); padding: 2px 8px; background: rgba(0,0,0,.5); border-radius: 100px;
}
.tcm-preview-row { display: flex; align-items: center; gap: 10px; }
.tcm-preview-label { font-size: 12px; font-weight: 600; color: #6b6b8a; white-space: nowrap; }
.tcm-preview { flex: 1; border-radius: 8px; overflow: hidden; border: 1.5px solid #e8e8ee; background: #f7f7f9; }
.tcm-preview canvas { width: 100%; height: auto; display: block; }
.tcm-footer { display: flex; gap: 10px; padding: 12px 18px 18px; border-top: 1px solid #e8e8ee; }
.tcm-footer button {
  flex: 1; padding: 12px; border: none; border-radius: 10px; font-size: 13.5px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: all .15s;
}
.tcm-btn-cancel { background: #f7f7f9; color: #1a1a2e; border: 1.5px solid #e8e8ee !important; }
.tcm-btn-save { background: #ff5a5f; color: #fff; box-shadow: 0 3px 12px rgba(255,90,95,.35); }
.tcm-btn-save:hover { background: #e04045; }
.tcm-btn-save:disabled { opacity: .7; cursor: wait; }

/* ── Popup Xuất bản (round 85): chọn địa chỉ + xem trước link khi gửi ─────────────────────── */
.ac-modal.ac-pub-modal { max-width: 620px; max-height: 90vh; }
.ac-pub-header { align-items: flex-start; }
.ac-pub-header-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ac-pub-header-icon {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; background: linear-gradient(135deg, #7c5cff, #22d3ee); box-shadow: 0 6px 16px -6px rgba(124, 92, 255, .6);
}
.ac-pub-header-icon .ac-icon { width: 19px; height: 19px; vertical-align: 0; }
.ac-pub-header-text { min-width: 0; }
.ac-modal-header.ac-pub-header h3 { margin: 0 0 2px; font-size: 17px; }
.ac-pub-subtitle { margin: 0; font-size: 12.5px; color: var(--ac-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-modal-body.ac-pub-body { display: flex; flex-direction: column; gap: 18px; padding: 18px 20px 20px; }
.ac-pub-section { display: flex; flex-direction: column; gap: 10px; }
.ac-pub-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.ac-pub-section-title { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ac-ink-soft); }

.ac-pub-options { display: grid; gap: 10px; }
.ac-pub-option {
  display: flex; flex-direction: column; gap: 9px; padding: 12px 14px; min-width: 0;
  border: 1.5px solid var(--ac-border); border-radius: 12px; background: #fff; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.ac-pub-option:hover { border-color: #c9c2f5; }
.ac-pub-option-head:focus-visible { outline: 2px solid var(--ac-accent); outline-offset: 3px; border-radius: 6px; }
.ac-pub-option.is-selected { border-color: var(--ac-accent); background: rgba(124, 92, 255, .045); box-shadow: 0 0 0 3px rgba(124, 92, 255, .12); }
.ac-pub-option.is-disabled { cursor: default; background: var(--ac-card); }
.ac-pub-option.is-disabled:hover { border-color: var(--ac-border); }
.ac-pub-option-head { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 14px; color: var(--ac-ink); }
.ac-pub-radio {
  position: relative; flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #c4c9d4; background: #fff; transition: border-color .15s;
}
.ac-pub-option.is-selected .ac-pub-radio { border-color: var(--ac-accent); }
.ac-pub-option.is-selected .ac-pub-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--ac-accent); }
.ac-pub-option.is-disabled .ac-pub-radio { border-color: #dde1e8; background: #eef0f4; }
.ac-pub-tag {
  margin-left: auto; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  font-size: 10.5px; font-weight: 700; color: #1f7a45; background: rgba(31, 157, 85, .12);
}
.ac-pub-tag.is-pro { color: #6344e6; background: rgba(124, 92, 255, .12); }

.ac-pub-url {
  display: flex; align-items: stretch; min-width: 0; margin: 0; cursor: text;
  border: 1px solid var(--ac-border); border-radius: 9px; overflow: hidden; background: #fff;
}
.ac-pub-url:focus-within { border-color: var(--ac-accent); box-shadow: 0 0 0 3px rgba(124, 92, 255, .15); }
.ac-pub-url-base {
  flex: 0 1 auto; min-width: 0; max-width: 62%; padding: 0 3px 0 11px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 500 13px/38px ui-monospace, "Cascadia Code", Consolas, monospace; color: var(--ac-ink-soft);
  background: var(--ac-card); border-right: 1px solid var(--ac-border);
}
.ac-modal .ac-pub-url input {
  flex: 1 1 auto; min-width: 0; padding: 0 11px; border: none; outline: none; background: transparent;
  font: 600 13.5px/38px ui-monospace, "Cascadia Code", Consolas, monospace; color: var(--ac-ink);
}
.ac-pub-option-note { display: flex; flex-direction: column; gap: 2px; font-size: 12px; line-height: 1.45; }
.ac-pub-slug-hint { color: var(--ac-ink-soft); }
.ac-pub-slug-hint:empty { display: none; }
.ac-pub-slug-hint.is-ok { color: #1f7a45; }
.ac-pub-slug-hint.is-bad { color: #c0392b; }
.ac-pub-backup { color: var(--ac-ink-soft); }
.ac-pub-backup[hidden] { display: none; }

.ac-pub-domain { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 13px; line-height: 1.5; color: var(--ac-ink); }
.ac-pub-domain:empty { display: none; }
.ac-modal .ac-pub-domain select {
  width: 100%; min-width: 0; padding: 9px 11px; border: 1px solid var(--ac-border); border-radius: 9px; background: #fff;
  font: 600 13.5px/1.2 ui-monospace, "Cascadia Code", Consolas, monospace; color: var(--ac-ink);
}
.ac-pub-domain select:focus { outline: none; border-color: var(--ac-accent); box-shadow: 0 0 0 3px rgba(124, 92, 255, .15); }
.ac-pub-domain a { color: var(--ac-accent); font-weight: 600; }
.ac-pub-muted { color: var(--ac-ink-soft); }
.ac-pub-config {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
  border: 1px solid var(--ac-border); border-radius: 8px; background: #fff; color: var(--ac-ink);
  font-size: 12.5px; font-weight: 600; cursor: pointer; transition: border-color .15s, color .15s;
}
.ac-pub-config:hover { border-color: var(--ac-accent); color: var(--ac-accent); }
.ac-pub-config:focus-visible { outline: 2px solid var(--ac-accent); outline-offset: 2px; }
.ac-pub-config .ac-icon { width: 14px; height: 14px; vertical-align: 0; }

.ac-seo-card.ac-pub-share-card { display: grid; grid-template-columns: 170px minmax(0, 1fr); background: #fff; }
.ac-pub-share-card .ac-seo-card-img { height: auto; min-height: 96px; border-bottom: none; border-right: 1px solid var(--ac-border); }
.ac-pub-share-card .ac-seo-card-text { align-self: center; min-width: 0; }
.ac-pub-share-card .ac-seo-card-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: normal; }
.ac-pub-share-note { margin: 0; font-size: 12px; line-height: 1.45; color: #9a5a12; }
.ac-pub-share-note[hidden] { display: none; }

.ac-pub-result { display: flex; gap: 12px; padding: 12px 14px; border-radius: 12px; background: #ecfaf1; border: 1px solid #bfe8cf; }
.ac-pub-result[hidden] { display: none; }
.ac-pub-result-icon {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; background: #1f9d55;
}
.ac-pub-result-icon .ac-icon { width: 17px; height: 17px; vertical-align: 0; }
.ac-pub-result-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: #1d4d33; }
.ac-pub-result-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ac-pub-result-row #acPubResultLink {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 13.5px/1.3 ui-monospace, "Cascadia Code", Consolas, monospace; color: #146c3d;
}
.ac-pub-icon-btn {
  flex: 0 0 auto; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #bfe8cf; border-radius: 8px; background: #fff; color: #1d4d33; cursor: pointer;
}
.ac-pub-icon-btn:hover { border-color: #1f9d55; }
.ac-pub-icon-btn .ac-icon { width: 15px; height: 15px; vertical-align: 0; }
.ac-pub-result-alt { font-size: 12px; color: #3d6b52; overflow-wrap: anywhere; }
.ac-pub-result-alt[hidden] { display: none; }
.ac-pub-result-alt a { color: inherit; }
.ac-pub-free { display: flex; gap: 6px; font-size: 12px; line-height: 1.45; color: #8a6d00; }
.ac-pub-free[hidden] { display: none; }
.ac-pub-free .ac-icon { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 1px; }
.ac-pub-footer .ac-btn .ac-icon { width: 15px; height: 15px; vertical-align: 0; }
@media (max-width: 560px) {
  .ac-seo-card.ac-pub-share-card { grid-template-columns: minmax(0, 1fr); }
  .ac-pub-share-card .ac-seo-card-img { height: 120px; border-right: none; border-bottom: 1px solid var(--ac-border); }
  .ac-pub-tag { display: none; }
  .ac-pub-subtitle { white-space: normal; }
}

/* ── Round 86 ─────────────────────────────────────────────────────────────────────────────── */
/* Popup Xuất bản: tên miền có sẵn của tài khoản (chưa gắn / đang gắn dự án khác) + nút gắn vào dự án này. */
.ac-pub-other { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.ac-pub-other-title { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ac-ink-soft); }
.ac-pub-other-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ac-pub-other-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 8px 10px; flex-wrap: wrap;
  padding: 7px 10px; border: 1px solid var(--ac-border); border-radius: 9px; background: #fff;
}
.ac-pub-other-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ac-pub-other-name b { font: 600 13px/1.3 ui-monospace, "Cascadia Code", Consolas, monospace; color: var(--ac-ink); overflow-wrap: anywhere; }
.ac-pub-other-meta { font-size: 11.5px; color: var(--ac-ink-soft); }
.ac-pub-assign {
  flex: 0 0 auto; padding: 5px 10px; border: 1px solid var(--ac-accent); border-radius: 8px; background: rgba(124, 92, 255, .08);
  color: var(--ac-accent); font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.ac-pub-assign:hover:not([disabled]) { background: var(--ac-accent); color: #fff; }
.ac-pub-assign[disabled] { opacity: .6; cursor: default; }
.ac-pub-assign:focus-visible { outline: 2px solid var(--ac-accent); outline-offset: 2px; }

/* Khung "Đã xuất bản" sáng lên mỗi lần xuất bản xong + giờ cập nhật. */
.ac-pub-result-head { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 10px; flex-wrap: wrap; }
.ac-pub-result-time { font-size: 11.5px; font-weight: 600; color: #3d6b52; font-variant-numeric: tabular-nums; }
.ac-pub-result.is-flash { animation: ac-pub-flash .8s ease-out 2; }
@keyframes ac-pub-flash {
  0%   { background: #c9f2da; border-color: #1f9d55; box-shadow: 0 0 0 0 rgba(31, 157, 85, .55); }
  70%  { box-shadow: 0 0 0 10px rgba(31, 157, 85, 0); }
  100% { background: #ecfaf1; border-color: #bfe8cf; box-shadow: 0 0 0 0 rgba(31, 157, 85, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .ac-pub-result.is-flash { animation: none; border-color: #1f9d55; box-shadow: 0 0 0 2px rgba(31, 157, 85, .35); }
}

/* Tên miền riêng: chữ dài (proxy.27biggroup.com) được xuống dòng trong ô bước + bảng DNS, không tràn ra ngoài khung. */
.ac-dm-steps { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ac-dm-steps li { min-width: 0; }
.ac-dm-steps code, .ac-dm-dns-table code { overflow-wrap: anywhere; word-break: break-word; }
.ac-dm-dns-table { min-width: 0; table-layout: auto; }
.ac-dm-dns-table th, .ac-dm-dns-table td { white-space: normal; vertical-align: middle; }
.ac-dm-dns-table td:last-child, .ac-dm-dns-table th:last-child { white-space: nowrap; }
.ac-dm-dns-table .ac-dm-muted { white-space: nowrap; }
/* Cột giá trị (tên máy chủ / IP + nút chép) giữ trên 1 dòng — chỉ cột loại/tên được xuống dòng. */
.ac-dm-dns-table td:nth-child(3) { white-space: nowrap; }
/* Trong bảng Cài đặt (hẹp): 3 bước xếp thành 3 DÒNG rộng thay vì 3 cột chật — tên máy chủ nằm gọn 1 dòng. */
#acSiteDomainBox .ac-dm-steps { grid-template-columns: minmax(0, 1fr); gap: 6px; }
#acSiteDomainBox .ac-dm-steps li { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding-top: 8px; padding-bottom: 8px; }
#acSiteDomainBox .ac-dm-steps li::before { top: 7px; }

/* Thanh trang (Tạo Website): cụm Tạo trang / Trang chủ / Header / Footer luôn nằm sát bên PHẢI — kể cả khi chưa có trang nào
   khác (danh sách trống co lại, trước đây cụm này bị đùn sang trái). */
.ac-pages-fixed { margin-left: auto; }