/* home.css — Giao diện tối phong cách "AI product": nền tối, gradient, kính mờ.
   Nạp ở index.php, account.php, dashboard.php để 3 trang này đồng bộ giao diện
   (editor.php dùng editor-theme.css riêng — mỗi nhóm trang là 1 document CSS độc lập). */

:root {
  --ac-bg: #0a0b16;
  --ac-card: rgba(255, 255, 255, .05);
  --ac-border: rgba(255, 255, 255, .1);
  --ac-ink: #f3f4fb;
  --ac-ink-soft: #a3a8c9;
  --ac-accent: #7c5cff;
  --ac-accent-dark: #6344e6;
  --home-cyan: #22d3ee;
  --home-pink: #ff6bcb;
}

body {
  background: var(--ac-bg);
  position: relative;
  overflow-x: hidden;
}

/* Nền gradient mesh cố định, không cuộn theo nội dung */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(600px 400px at 12% -5%, rgba(124, 92, 255, .35), transparent 60%),
    radial-gradient(500px 380px at 90% 10%, rgba(34, 211, 238, .22), transparent 60%),
    radial-gradient(700px 500px at 50% 100%, rgba(255, 107, 203, .12), transparent 60%),
    var(--ac-bg);
}

.ac-header {
  background: rgba(10, 11, 22, .7);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--ac-border);
}

.ac-brand-logo {
  height: 30px;
  width: auto;
  display: block;
}

.ac-brand-divider {
  color: var(--ac-border);
  font-weight: 400;
}

/* :not(.ac-btn) — loại trừ các link được style như nút (vd #acBtnManage, nền gradient +
   chữ trắng từ .ac-btn-primary) khỏi màu chữ xám mờ dành cho link chữ thường, nếu không
   selector .ac-nav a (specificity cao hơn .ac-btn-primary) sẽ đè mất màu trắng của nút. */
.ac-nav a:not(.ac-btn) {
  color: var(--ac-ink-soft);
}

.ac-nav a:not(.ac-btn):hover {
  color: #fff;
}

.ac-btn-ghost {
  border-color: var(--ac-border);
  color: var(--ac-ink);
}

.ac-btn-ghost:hover {
  background: rgba(255, 255, 255, .06);
}

.ac-btn-primary {
  background: linear-gradient(135deg, var(--ac-accent), var(--home-cyan));
}

.ac-btn-primary:hover {
  filter: brightness(1.08);
}

/* Modal luôn nền trắng (kế thừa từ builder-html.css) trong khi trang chủ đã đổi các biến
   --ac-ink/--ac-ink-soft/--ac-border sang tông sáng cho nền tối bên ngoài — nếu không ép lại
   ở đây, chữ trong modal (tiêu đề, label, input) sẽ bị "chìm" màu trắng-trên-trắng, khó đọc.
   Toàn bộ .ac-field trên trang này đều nằm trong modal nên ép nguyên khối là đủ. */
.ac-modal {
  --ac-ink: #1e2430;
  --ac-ink-soft: #5b6472;
  --ac-border: #e4e7ed;
  /* "color" được kế thừa theo GIÁ TRỊ ĐÃ TÍNH, không tự tính lại theo biến ở tầng con —
     nên phải khai báo color ở chính .ac-modal thì tiêu đề/label bên trong (vốn không tự
     đặt color riêng) mới nhận đúng màu tối thay vì màu sáng kế thừa từ body. */
  color: var(--ac-ink);
}
.ac-modal input,
.ac-modal textarea {
  background: #fff;
  color: #1e2430;
}
.ac-modal input::placeholder,
.ac-modal textarea::placeholder {
  color: #9aa0b8;
}
/* .ac-field-error mặc định dùng var(--ac-accent-dark) — trên trang này biến đó là tím
   thương hiệu (#6344e6), khiến thông báo lỗi lẫn với nút primary cũng màu tím bên dưới. */
.ac-modal .ac-field-error {
  color: #d9394f;
}

.ac-project-thumb {
  background: linear-gradient(135deg, rgba(124, 92, 255, .18), rgba(34, 211, 238, .14));
}

.ac-project-title {
  color: var(--ac-ink);
}

.ac-project-meta {
  color: var(--ac-ink-soft);
}

/* ── Trang chủ (index.php) — trình tạo website kéo thả ─────────────────
   Tiền tố .ac-lp-* (landing page) chỉ dùng ở index.php. Riêng .ac-eyebrow dùng chung với
   dashboard.php/account.php. */
.ac-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ac-ink-soft);
  background: var(--ac-card);
  border: 1px solid var(--ac-border);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.ac-eyebrow .ac-icon { width: 14px; height: 14px; vertical-align: 0; color: var(--ac-accent); }

.ac-gradient-text {
  background: linear-gradient(100deg, var(--ac-accent) 10%, var(--home-cyan) 55%, var(--home-pink) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ac-btn-lg {
  padding: 13px 24px;
  font-size: 15px;
  border-radius: 10px;
  gap: 8px;
}
.ac-btn-lg .ac-icon { width: 18px; height: 18px; vertical-align: 0; }

/* ── Nút 3D (header trang chủ #acHeader) ───────────────────────────────
   Mặt nút + gờ dày phía dưới vẽ bằng box-shadow đặc (--b3-depth): rê chuột thì nhấc lên, bấm thì lún
   xuống đúng bằng độ dày gờ — giống phím bấm thật. .is-primary = nút chính (gradient thương hiệu).
   Thứ tự :hover → .is-primary → .is-primary:hover → :active là có chủ đích (cùng/cao hơn specificity). */
.ac-btn-3d {
  --b3-depth: 4px;
  --b3-edge: #07081a;
  position: relative;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  font-weight: 700;
  color: #eef0ff;
  white-space: nowrap;
  background: linear-gradient(180deg, #2d2f55 0%, #1c1d3a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 var(--b3-depth) 0 var(--b3-edge),
    0 calc(var(--b3-depth) + 6px) 16px -4px rgba(0, 0, 0, .6);
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease, filter .15s ease;
}
.ac-btn-3d .ac-icon { width: 15px; height: 15px; vertical-align: 0; }
.ac-btn-3d:hover {
  background: linear-gradient(180deg, #373a66 0%, #232447 100%);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .2),
    0 calc(var(--b3-depth) + 2px) 0 var(--b3-edge),
    0 calc(var(--b3-depth) + 12px) 22px -4px rgba(0, 0, 0, .65);
}
.ac-btn-3d.is-primary {
  --b3-edge: #34279a;
  border-color: rgba(255, 255, 255, .22);
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(135deg, #8b6cff 0%, #37c4e6 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .4),
    0 var(--b3-depth) 0 var(--b3-edge),
    0 calc(var(--b3-depth) + 8px) 22px -6px rgba(124, 92, 255, .7);
}
.ac-btn-3d.is-primary:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(135deg, #8b6cff 0%, #37c4e6 100%);
  filter: brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    0 calc(var(--b3-depth) + 2px) 0 var(--b3-edge),
    0 calc(var(--b3-depth) + 14px) 28px -6px rgba(124, 92, 255, .8);
}
.ac-btn-3d:active {
  transform: translateY(var(--b3-depth));
  transition-duration: .05s;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 var(--b3-edge), 0 2px 6px -2px rgba(0, 0, 0, .5);
}
.ac-btn-3d.is-primary:active {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 var(--b3-edge), 0 2px 8px -2px rgba(124, 92, 255, .5);
}
.ac-btn-3d:focus-visible { outline: 2px solid #a78bfa; outline-offset: 3px; }

/* ── Header trang chủ (#acHeader) nổi đè lên hero ────────────────────────
   Ở đầu trang: trong suốt, không viền — liền một mảng với nền 3D của hero. Cuộn xuống (home.js bật
   .is-scrolled): hiện nền + viền + bóng. position:fixed khai báo kèm cả .is-account-menu vì builder-html.css
   đặt position:relative cho selector đó. Trên điện thoại KHÔNG dùng backdrop-filter/transform cho header —
   2 thuộc tính đó biến header thành khung chứa của menu trượt position:fixed (xem builder-html.css). */
#acHeader,
#acHeader.is-account-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}
#acHeader {
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease, padding .3s ease;
}
#acHeader.is-scrolled {
  /* Điện thoại không có blur → nền ĐẶC hẳn: dù chỉ trong suốt vài %, khối sáng cuộn phía sau (trang mẫu nền
     kem trong khung minh hoạ editor) vẫn lộ qua thành vệt. Desktop ghi đè bằng nền kính mờ ở media bên dưới. */
  background: #0c0d1a;
  border-bottom-color: rgba(255, 255, 255, .08);
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .75);
}
@media (min-width: 641px) {
  #acHeader.is-scrolled {
    padding-top: 10px;
    padding-bottom: 10px;
    background: rgba(10, 11, 22, .62);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
  }
}

#acHeader .ac-nav-toggle {
  color: #eef0ff;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  background: linear-gradient(180deg, #2d2f55 0%, #1c1d3a 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 3px 0 #07081a, 0 8px 14px -4px rgba(0, 0, 0, .6);
  transition: transform .12s ease, box-shadow .12s ease;
}
#acHeader .ac-nav-toggle:active {
  transform: translateY(3px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 #07081a;
}

/* Đã đăng nhập: trên desktop hiện thẳng các nút trên thanh header thay vì gom vào popup hamburger
   (builder-html.css #acHeader.is-account-menu vẫn giữ popup cho màn hình ≤640px). Cùng selector, nạp sau
   nên đè được; overflow:visible để gờ/bóng 3D của nút không bị cắt. */
@media (min-width: 641px) {
  #acHeader.is-account-menu .ac-nav-toggle { display: none; }
  #acHeader.is-account-menu .ac-nav {
    position: static;
    margin-top: 0;
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
    overflow: visible;
    padding: 0;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    transition: none;
  }
  #acHeader.is-account-menu .ac-nav-links,
  #acHeader.is-account-menu .ac-nav-actions { flex-direction: row; align-items: center; width: auto; gap: 10px; }
  #acHeader.is-account-menu .ac-nav-links a { padding: 8px 14px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .12); }
  #acHeader.is-account-menu .ac-nav-links a.is-primary { border-color: rgba(255, 255, 255, .22); }
  #acHeader.is-account-menu .ac-nav-actions .ac-btn { width: auto; }
  #acHeader.is-account-menu .ac-nav-backdrop.is-open { display: none; }
}
/* Điện thoại, đã đăng nhập: popup menu phải có nền đặc — --ac-card của trang chủ gần như trong suốt, khối 3D
   ở hero phía sau sẽ lộ qua popup. Giới hạn trong ≤640px để không đè background:none của desktop ở trên. */
@media (max-width: 640px) {
  #acHeader.is-account-menu .ac-nav {
    background: #15162e;
    border-color: rgba(255, 255, 255, .12);
    box-shadow: 0 24px 50px rgba(0, 0, 0, .6);
  }
}

/* Hero — chữ ở giữa, phía sau là cảnh 3D các khối kéo thả (#acHero3d, điều khiển bởi
   static/js/home-hero.js). Chạy được cả khi chưa có JS: khối vẫn nằm đúng ô ban đầu, chỉ đứng lơ lửng. */
.ac-lp-hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(684px, calc(86vh + 64px), 924px);
  display: flex;
  align-items: center;
  justify-content: center;
  /* 136px = 72px + 64px chiều cao header nổi đè lên hero (#acHeader position:fixed) */
  padding: 136px 24px 96px;
  margin-bottom: 24px;
  text-align: center;
}
.ac-lp-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 760px;
  /* Chỉ chính các dòng chữ/nút mới chặn chuột — khoảng trống hai bên vẫn để chuột kéo được khối 3D */
  pointer-events: none;
}
.ac-lp-hero-inner > * { pointer-events: auto; }
/* Quầng tối mờ sau chữ — khối 3D trôi ngang qua phía sau vẫn không làm chữ khó đọc */
.ac-lp-hero-inner::before {
  content: "";
  position: absolute;
  inset: -80px -150px;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(10, 11, 22, .92), rgba(10, 11, 22, .7) 55%, rgba(10, 11, 22, 0));
}
.ac-lp-hero h1 {
  font-size: clamp(46px, 8.4vw, 104px);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -.045em;
  margin: 0 0 20px;
  color: var(--ac-ink);
}
.ac-lp-sub {
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.6;
  color: var(--ac-ink-soft);
  max-width: 520px;
  margin: 0 0 30px;
  text-wrap: balance;
}
.ac-lp-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.ac-lp-trust {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 13px;
  color: var(--ac-ink-soft);
}
.ac-lp-trust li { display: inline-flex; align-items: center; gap: 7px; }
/* Dấu tích trong huy hiệu tròn gradient thương hiệu (tím → cyan) + gờ tối phía dưới, cùng họ nút 3D */
.ac-lp-trust .ac-icon {
  width: 18px;
  height: 18px;
  padding: 3.5px;
  vertical-align: 0;
  border-radius: 50%;
  color: #fff;
  stroke-width: 3.2;
  background: linear-gradient(135deg, #8b6cff 0%, #37c4e6 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 0 #34279a, 0 4px 10px -2px rgba(124, 92, 255, .55);
}

/* ── Cảnh 3D ────────────────────────────────────────────────────────────
   Khung phối cảnh (perspective 1000px — khớp PERSPECTIVE trong home-hero.js). --k co cỡ khối theo màn hình.
   Vị trí khối/con trỏ = --fx/--fy (tỉ lệ 0..1 theo kích thước hero). */
.ac-lp-3d {
  --k: 1;
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  perspective: 1000px;
  perspective-origin: 50% 42%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 90px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 90px), transparent);
  animation: acLpFadeIn 1.2s ease both;
}
.ac-lp-3d::before {
  content: "";
  position: absolute;
  left: 5%;
  right: 5%;
  top: 40%;
  height: 60%;
  /* Tâm + bán kính nằm gọn trong khung → mờ hết trước khi chạm mép, không lộ cạnh ngang */
  background: radial-gradient(ellipse 46% 40% at 50% 50%, rgba(124, 92, 255, .26), rgba(34, 211, 238, .07) 55%, transparent 100%);
}
.ac-lp-world {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform 1s cubic-bezier(.2, .7, .2, 1);
}

/* Sàn lưới nằm ngang ở đáy hero, chạy dần về phía người xem */
.ac-lp-floor {
  position: absolute;
  left: -60%;
  width: 220%;
  top: 100%;
  height: 2000px;
  transform-origin: 50% 0;
  transform: rotateX(-90deg);
  background-image:
    linear-gradient(rgba(124, 92, 255, .4) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(34, 211, 238, .26) 1.5px, transparent 1.5px);
  background-size: 64px 64px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 45% 70% at 50% 0%, #000 20%, transparent 100%);
  mask-image: radial-gradient(ellipse 45% 70% at 50% 0%, #000 20%, transparent 100%);
  animation: acLpFloor 3.2s linear infinite;
}

/* Khối kéo thả dạng hộp 3D: .ac-lp-b3 (vị trí + nhấp nhô) > -lift (nhấc lên khi cầm) > -rot (co cỡ +
   nghiêng, --rx/--ry do JS suy ra từ vị trí) > 6 mặt. Kích thước --w/--h/--d khai báo inline ở index.php. */
.ac-lp-b3 {
  position: absolute;
  left: calc(var(--fx) * 100%);
  top: calc(var(--fy) * 100%);
  transform-style: preserve-3d;
  transform: translateZ(var(--pz));
  animation: acLpBob var(--bob, 7s) ease-in-out var(--delay, 0s) infinite;
  pointer-events: auto;
  cursor: grab;
}
.ac-lp-b3-lift {
  position: absolute;
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
/* 80px — khớp LIFT trong home-hero.js */
.ac-lp-b3.is-grabbed .ac-lp-b3-lift { transform: translateZ(80px); }
.ac-lp-b3-rot {
  position: absolute;
  left: calc(var(--w) / -2);
  top: calc(var(--h) / -2);
  width: var(--w);
  height: var(--h);
  transform-style: preserve-3d;
  transform: scale3d(var(--k), var(--k), var(--k)) rotateX(var(--rx)) rotateY(var(--ry));
  animation: acLpWobble calc(var(--bob, 7s) * 1.6) ease-in-out var(--delay, 0s) infinite;
}
.ac-lp-b3-face { position: absolute; }
.ac-lp-b3-face.is-front,
.ac-lp-b3-face.is-back { inset: 0; border-radius: 12px; }
.ac-lp-b3-face.is-front { transform: translateZ(calc(var(--d) / 2)); }
.ac-lp-b3-face.is-back { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); background: #141537; }
.ac-lp-b3-face.is-right,
.ac-lp-b3-face.is-left { top: 10px; bottom: 10px; left: calc(50% - var(--d) / 2); width: var(--d); }
.ac-lp-b3-face.is-right { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); background: linear-gradient(#5241cf, #1b7c9c); }
.ac-lp-b3-face.is-left { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); background: linear-gradient(#3f31a8, #16637f); }
.ac-lp-b3-face.is-top,
.ac-lp-b3-face.is-bottom { left: 10px; right: 10px; top: calc(50% - var(--d) / 2); height: var(--d); }
.ac-lp-b3-face.is-top { transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); background: linear-gradient(90deg, #7c66ff, #3fcbe8); }
.ac-lp-b3-face.is-bottom { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); background: #1a1d48; }

/* Mặt trước — nội dung giống khối thật trong bảng khối của editor */
.ac-lp-b3-face.is-front {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 9px;
  padding: 14px 16px;
  text-align: left;
  color: #e8e9f7;
  background: linear-gradient(150deg, #2d2b62 0%, #17183a 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .24);
  transition: box-shadow .3s ease;
}
.ac-lp-b3.is-grabbed .ac-lp-b3-face.is-front {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 0 0 2px var(--ac-accent), 0 22px 60px -10px rgba(124, 92, 255, .8);
}
.ac-lp-b3-chip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  color: #c4b5fd;
  background: rgba(124, 92, 255, .2);
}
.ac-lp-b3-chip .ac-icon { width: 12px; height: 12px; vertical-align: 0; }
.ac-lp-b3-title { font-size: 26px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: #fff; white-space: nowrap; }
.ac-lp-b3-line { display: block; height: 7px; border-radius: 999px; background: rgba(255, 255, 255, .16); }
.ac-lp-b3-face.is-front.is-btn { padding: 9px; }
.ac-lp-b3-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--ac-accent), var(--home-cyan));
}
.ac-lp-b3-btn .ac-icon { width: 16px; height: 16px; vertical-align: 0; }
.ac-lp-b3-img {
  position: relative;
  flex: 1;
  overflow: hidden;
  border-radius: 8px;
  background:
    radial-gradient(circle at 74% 30%, #ffd66e 0 10%, transparent 11%),
    linear-gradient(165deg, #ffa3bd 0%, #8a63ff 75%);
}
.ac-lp-b3-img::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 62%;
  background: #2a1f66;
  clip-path: polygon(0 100%, 0 58%, 26% 16%, 50% 62%, 68% 36%, 100% 78%, 100% 100%);
}
.ac-lp-b3-cols { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ac-lp-b3-cols i,
.ac-lp-b3-sec i { border-radius: 6px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.ac-lp-b3-sec { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 12px 1fr; gap: 6px; }
.ac-lp-b3-sec i:first-child { grid-column: 1 / -1; background: rgba(34, 211, 238, .35); }

/* Khối lập phương nhỏ trang trí ở xa phía sau (không kéo được) */
.ac-lp-cube {
  position: absolute;
  left: calc(var(--fx) * 100%);
  top: calc(var(--fy) * 100%);
  transform-style: preserve-3d;
  transform: translateZ(var(--pz));
}
.ac-lp-cube-spin {
  position: absolute;
  left: calc(var(--s) / -2);
  top: calc(var(--s) / -2);
  width: var(--s);
  height: var(--s);
  transform-style: preserve-3d;
  animation: acLpSpin var(--spin, 24s) linear infinite;
}
.ac-lp-cube-spin i {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(124, 92, 255, .55), rgba(34, 211, 238, .3));
  box-shadow: inset 0 0 0 1px rgba(196, 181, 253, .5);
}
.ac-lp-cube-spin i:nth-child(1) { transform: translateZ(calc(var(--s) / 2)); }
.ac-lp-cube-spin i:nth-child(2) { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.ac-lp-cube-spin i:nth-child(3) { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.ac-lp-cube-spin i:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.ac-lp-cube-spin i:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.ac-lp-cube-spin i:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }

/* Con trỏ tự động + nhãn "Kéo thả" (kiểu con trỏ cộng tác) */
.ac-lp-cursor {
  position: absolute;
  left: calc(var(--cfx, .5) * 100%);
  top: calc(var(--cfy, 1) * 100%);
  transform: translate3d(var(--cox, 0px), var(--coy, 0px), var(--cz, 0px));
  opacity: 0;
  transition: opacity .35s ease;
}
.ac-lp-cursor.is-visible { opacity: 1; }
.ac-lp-cursor .ac-lp-cursor-icon {
  display: block;
  width: 30px;
  height: 30px;
  color: #0b0c1d;
  fill: #fff;
  stroke-width: 1.5;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .55));
  transform-origin: 5px 5px;
  transition: transform .2s ease;
}
.ac-lp-cursor.is-down .ac-lp-cursor-icon { transform: scale(.84); }
.ac-lp-cursor-tag {
  position: absolute;
  left: 24px;
  top: 26px;
  padding: 3px 10px;
  border-radius: 4px 999px 999px 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  color: #fff;
  background: linear-gradient(135deg, #ff6bcb, #7c5cff);
  box-shadow: 0 6px 16px rgba(124, 92, 255, .45);
}

/* Khung gợi ý ô sẽ thả (hiện trong lúc kéo) */
.ac-lp-drop3d {
  position: absolute;
  left: calc(var(--dfx, .5) * 100%);
  top: calc(var(--dfy, .5) * 100%);
  width: var(--dw, 0px);
  height: var(--dh, 0px);
  transform: translate3d(-50%, -50%, var(--dz, 0px));
  border: 2px dashed rgba(167, 139, 250, .9);
  border-radius: 12px;
  background: rgba(124, 92, 255, .1);
  opacity: 0;
  transition: opacity .3s ease;
}
.ac-lp-drop3d.is-visible { opacity: 1; }

html.ac-lp-grabbing,
html.ac-lp-grabbing * { cursor: grabbing !important; user-select: none; }

/* Hero ra khỏi màn hình → dừng mọi chuyển động CSS cho nhẹ máy */
.ac-lp-3d.is-paused,
.ac-lp-3d.is-paused * { animation-play-state: paused !important; }

@keyframes acLpFadeIn { from { opacity: 0; } }
@keyframes acLpFloor {
  from { transform: rotateX(-90deg) translateY(0); }
  to { transform: rotateX(-90deg) translateY(-64px); }
}
@keyframes acLpBob {
  0%, 100% { transform: translateZ(var(--pz)) translateY(0); }
  50% { transform: translateZ(var(--pz)) translateY(-12px); }
}
@keyframes acLpWobble {
  0%, 100% { transform: scale3d(var(--k), var(--k), var(--k)) rotateX(var(--rx)) rotateY(var(--ry)); }
  50% { transform: scale3d(var(--k), var(--k), var(--k)) rotateX(calc(var(--rx) - 5deg)) rotateY(calc(var(--ry) + 6deg)); }
}
@keyframes acLpSpin {
  from { transform: scale3d(var(--k), var(--k), var(--k)) rotateX(0deg) rotateY(0deg); }
  to { transform: scale3d(var(--k), var(--k), var(--k)) rotateX(360deg) rotateY(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ac-lp-3d,
  .ac-lp-3d * { animation: none !important; }
  .ac-lp-world { transition: none; }
  .ac-lp-cursor,
  .ac-lp-drop3d { display: none; }
}
@media (max-width: 1280px) {
  .ac-lp-3d { --k: .86; }
}
/* Dưới 1000px (khớp wideMq trong home-hero.js): chữ chiếm gần hết bề ngang → khối chuyển lên dải trên/dưới */
@media (max-width: 999px) {
  .ac-lp-hero { min-height: 0; padding: 234px 24px 170px; }
  .ac-lp-3d {
    --k: .66;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 50px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 50px), transparent);
  }
  .ac-lp-cube { display: none; }
}
@media (max-width: 640px) {
  .ac-lp-hero { padding: 204px 16px 150px; }
  /* Dải mờ đáy ngắn lại — hàng khối phía dưới nằm sát đáy hero, không để bị mờ mất */
  .ac-lp-3d {
    --k: .44;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent);
  }
  .ac-lp-hero-inner::before { inset: -40px -24px; }
  .ac-lp-trust { gap: 6px 14px; font-size: 12.5px; }
}

/* ── Project gần đây (index.php, chỉ hiện khi đã có tài khoản) + thẻ project dùng chung .ac-pcard/.ac-pnew ──
   Thẻ dựng bằng acRenderProjectCard/acRenderNewProjectCard (common.js), dùng cả ở index.php lẫn dashboard.php. */
.ac-lp-recent { max-width: 1100px; margin: 0 auto 80px; padding: 0 24px; }
.ac-lp-recent-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 22px;
}
.ac-lp-recent-title { display: flex; align-items: center; gap: 14px; }
.ac-lp-recent-icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c4b5fd;
  background: linear-gradient(180deg, #2d2f55 0%, #1c1d3a 100%);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 4px 0 #07081a, 0 12px 20px -8px rgba(0, 0, 0, .6);
}
.ac-lp-recent-icon .ac-icon { width: 21px; height: 21px; vertical-align: 0; }
.ac-lp-recent-title h2 {
  margin: 0 0 3px;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ac-ink);
}
.ac-lp-recent-title p { margin: 0; font-size: 13px; color: var(--ac-ink-soft); }

.ac-lp-pgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  padding-bottom: 10px;
}

/* Thẻ project: khối 3D có gờ dày phía dưới (cùng kiểu nút 3D ở header), rê chuột thì nổi lên */
.ac-pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, #1e1f3c 0%, #15162c 100%);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 6px 0 #07081a, 0 20px 40px -14px rgba(0, 0, 0, .7);
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s ease, border-color .28s ease;
}
.ac-pcard:hover {
  transform: translateY(-5px);
  border-color: hsl(var(--hue) 85% 72% / .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 11px 0 #07081a, 0 32px 50px -16px hsl(var(--hue) 80% 50% / .45);
}
/* Link phủ kín cả thẻ; nút "Xem trang" có z-index cao hơn nên vẫn bấm riêng được */
.ac-pcard-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.ac-pcard-link:focus-visible { outline: 2px solid #a78bfa; outline-offset: 3px; }

.ac-pcard-thumb {
  position: relative;
  height: 168px;
  overflow: hidden;
  border-radius: 15px 15px 0 0;
  background:
    radial-gradient(circle at 25% 0%, hsl(var(--hue) 85% 62% / .5), transparent 60%),
    radial-gradient(circle at 90% 100%, hsl(calc(var(--hue) + 50) 85% 60% / .3), transparent 55%),
    linear-gradient(160deg, hsl(var(--hue) 45% 20%) 0%, #121329 100%);
}
.ac-pcard-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1.3px);
  background-size: 14px 14px;
}
/* Cửa sổ trình duyệt thu nhỏ, lấp ló từ đáy khung — hover thì ngả ra sau kiểu 3D */
.ac-pcard-win {
  position: absolute;
  left: 11%;
  right: 11%;
  top: 22%;
  bottom: -10%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 9px 9px 0 0;
  background: #fff;
  box-shadow: 0 14px 30px -8px rgba(0, 0, 0, .65);
  transform-origin: 50% 100%;
  transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}
.ac-pcard:hover .ac-pcard-win { transform: perspective(700px) rotateX(12deg) translateY(-8px) scale(1.05); }
.ac-pcard-bar {
  flex-shrink: 0;
  height: 17px;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 7px;
  background: #ececf4;
}
.ac-pcard-bar i { width: 5px; height: 5px; border-radius: 50%; background: #c9cad8; }
.ac-pcard-bar span {
  flex: 1;
  min-width: 0;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 8.5px;
  line-height: 1.3;
  color: #8a8ca3;
  background: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ac-pcard-page { position: relative; flex: 1; background: hsl(var(--hue) 60% 97%); }
.ac-pcard-page i { position: absolute; border-radius: 3px; background: hsl(var(--hue) 15% 82%); }
.ac-pcard-page i:nth-child(1) { left: 6%; top: 7%; width: 88%; height: 6%; background: hsl(var(--hue) 30% 90%); }
/* is-v0: chữ trái + ảnh phải */
.is-v0 i:nth-child(2) { left: 6%; top: 24%; width: 40%; height: 10%; background: hsl(var(--hue) 35% 26%); }
.is-v0 i:nth-child(3) { left: 6%; top: 40%; width: 36%; height: 5%; }
.is-v0 i:nth-child(4) { left: 6%; top: 49%; width: 27%; height: 5%; }
.is-v0 i:nth-child(5) { left: 6%; top: 61%; width: 20%; height: 10%; border-radius: 99px; background: hsl(var(--hue) 80% 60%); }
.is-v0 i:nth-child(6) { left: 53%; top: 22%; width: 41%; height: 58%; border-radius: 6px; background: linear-gradient(150deg, hsl(var(--hue) 85% 75%), hsl(calc(var(--hue) + 45) 80% 62%)); }
/* is-v1: căn giữa + dải ảnh dưới */
.is-v1 i:nth-child(2) { left: 22%; top: 22%; width: 56%; height: 11%; background: hsl(var(--hue) 35% 26%); }
.is-v1 i:nth-child(3) { left: 27%; top: 39%; width: 46%; height: 5%; }
.is-v1 i:nth-child(4) { left: 33%; top: 48%; width: 34%; height: 5%; }
.is-v1 i:nth-child(5) { left: 40%; top: 59%; width: 20%; height: 10%; border-radius: 99px; background: hsl(var(--hue) 80% 60%); }
.is-v1 i:nth-child(6) { left: 6%; top: 78%; width: 88%; height: 30%; border-radius: 6px; background: linear-gradient(90deg, hsl(var(--hue) 85% 75%), hsl(calc(var(--hue) + 45) 80% 65%)); }
/* is-v2: tiêu đề + 3 thẻ */
.is-v2 i:nth-child(2) { left: 6%; top: 21%; width: 48%; height: 9%; background: hsl(var(--hue) 35% 26%); }
.is-v2 i:nth-child(3) { left: 6%; top: 36%; width: 27%; height: 50%; border-radius: 5px; background: linear-gradient(160deg, hsl(var(--hue) 85% 76%), hsl(var(--hue) 70% 64%)); }
.is-v2 i:nth-child(4) { left: 36.5%; top: 36%; width: 27%; height: 50%; border-radius: 5px; background: hsl(var(--hue) 40% 90%); }
.is-v2 i:nth-child(5) { left: 67%; top: 36%; width: 27%; height: 50%; border-radius: 5px; background: hsl(calc(var(--hue) + 45) 60% 88%); }
.is-v2 i:nth-child(6) { left: 58%; top: 23%; width: 18%; height: 5%; }

.ac-pcard-status {
  position: absolute;
  top: 11px;
  left: 11px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #c9cce3;
  background: rgba(10, 11, 22, .7);
  border: 1px solid rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.ac-pcard-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #9aa0b8; }
.ac-pcard-status.is-live { color: #bbf7d0; }
.ac-pcard-status.is-live::before { background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .2); }

.ac-pcard-body { padding: 14px 16px 10px; min-width: 0; }
.ac-pcard-title {
  margin: 0 0 7px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ac-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ac-pcard-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--ac-ink-soft); }
.ac-pcard-meta span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ac-pcard-meta .ac-icon { width: 13px; height: 13px; vertical-align: 0; opacity: .8; }

.ac-pcard-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.ac-pcard-open { display: inline-flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; font-size: 13px; font-weight: 700; color: #c4b5fd; }
.ac-pcard-open .ac-icon { width: 14px; height: 14px; vertical-align: 0; transition: transform .2s ease; }
.ac-pcard:hover .ac-pcard-open { color: #ddd6fe; }
.ac-pcard:hover .ac-pcard-open .ac-icon:last-child { transform: translateX(3px); }
/* Nút thao tác (xem trang / khách hàng / xoá) — nút 3D thu nhỏ, nổi trên link phủ thẻ */
.ac-pcard-act {
  position: relative;
  z-index: 2;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  color: #eef0ff;
  background: linear-gradient(180deg, #2d2f55 0%, #1c1d3a 100%);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 3px 0 #07081a;
  transition: transform .12s ease, box-shadow .12s ease;
}
.ac-pcard-act .ac-icon { width: 15px; height: 15px; vertical-align: 0; }
.ac-pcard-act:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 5px 0 #07081a; color: #fff; }
.ac-pcard-act:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 #07081a; }
.ac-pcard-act:focus-visible { outline: 2px solid #a78bfa; outline-offset: 3px; }
.ac-pcard-actions { position: relative; z-index: 2; display: flex; gap: 6px; }
button.ac-pcard-act { padding: 0; font: inherit; cursor: pointer; }
.ac-pcard-act.is-danger { color: #fca5a5; }
.ac-pcard-act.is-danger:hover {
  color: #fff;
  border-color: rgba(248, 113, 113, .45);
  background: linear-gradient(180deg, #8f2424 0%, #621717 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 5px 0 #2d0a0a;
}
.ac-pcard.is-removing { opacity: 0; transform: scale(.95); transition: opacity .25s ease, transform .25s ease; pointer-events: none; }

/* Ô "Tạo project mới" */
.ac-pnew {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 220px;
  padding: 24px;
  border-radius: 16px;
  text-align: center;
  text-decoration: none;
  color: var(--ac-ink-soft);
  border: 2px dashed rgba(167, 139, 250, .35);
  background: radial-gradient(circle at 50% 38%, rgba(124, 92, 255, .16), transparent 65%);
  transition: border-color .2s ease, transform .28s cubic-bezier(.2, .8, .2, 1), color .2s ease;
}
.ac-pnew:hover { border-color: rgba(167, 139, 250, .85); transform: translateY(-5px); color: var(--ac-ink); }
.ac-pnew:focus-visible { outline: 2px solid #a78bfa; outline-offset: 3px; }
.ac-pnew-icon {
  width: 54px;
  height: 54px;
  margin-bottom: 10px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, #8b6cff 0%, #37c4e6 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 4px 0 #34279a, 0 16px 26px -8px rgba(124, 92, 255, .7);
}
.ac-pnew-icon .ac-icon { width: 24px; height: 24px; vertical-align: 0; transition: transform .3s ease; }
.ac-pnew:hover .ac-pnew-icon .ac-icon { transform: rotate(90deg); }
.ac-pnew b { font-size: 15px; color: var(--ac-ink); }
.ac-pnew span:last-child { font-size: 12.5px; }

@media (max-width: 1000px) {
  .ac-lp-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Điện thoại: 1 hàng vuốt ngang (cuộn trong chính hàng, trang không bị cuộn ngang) */
@media (max-width: 640px) {
  .ac-lp-recent { padding: 0 16px; margin-bottom: 56px; }
  .ac-lp-pgrid {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 80%;
    gap: 14px;
    margin: 0 -16px;
    padding: 6px 16px 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 16px;
    scrollbar-width: none;
  }
  .ac-lp-pgrid::-webkit-scrollbar { display: none; }
  .ac-lp-pgrid > * { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) {
  .ac-pcard, .ac-pcard-win, .ac-pnew, .ac-pnew-icon .ac-icon { transition: none; }
}

/* ── Minh hoạ trình kéo thả ─────────────────────────────────────────────
   Cả khung dựng theo 1 hệ toạ độ cố định rộng 45em, font-size = 100cqw/45 nên co giãn đúng tỉ lệ
   ở mọi bề rộng màn hình. Toạ độ của khối đang kéo (.ac-lp-drag) và nút vừa thả (.ac-lp-p-btn)
   được tính tay theo hệ toạ độ đó — đổi kích thước palette/stage/page thì phải tính lại:
     item "Nút bấm" (thứ 4) trong body: left .75+.6 = 1.35em, top .75+.6+1.5+.3+3×2.45 = 10.5em
     nút trong body: left 11+1.25+1.75 = 14em, top .75+1.25+12.9 = 14.9em (rộng 7.2em, cao 2.1em)
     → dịch tâm khối kéo (rộng 8.3em) trùng tâm nút: translate(12.1em, 4.4em). */
.ac-lp-showcase {
  max-width: 1040px;
  margin: 0 auto 96px;
  padding: 0 24px;
  container-type: inline-size;
}
.ac-lp-mock {
  position: relative;
  font-size: 16px;
  font-size: calc(100cqw / 45);
  line-height: 1.3;
  text-align: left;
  color: #c9cce3;
  background: #0e1022;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: .8em;
  overflow: hidden;
  box-shadow: 0 40px 100px -30px rgba(124, 92, 255, .5), 0 20px 50px rgba(0, 0, 0, .45);
  user-select: none;
}
.ac-lp-mock .ac-icon { width: 1em; height: 1em; vertical-align: 0; }

.ac-lp-mock-bar {
  height: 2.6em;
  display: flex;
  align-items: center;
  gap: .55em;
  padding: 0 .8em;
  background: rgba(255, 255, 255, .035);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.ac-lp-mock-dots { display: flex; gap: .3em; margin-right: .25em; }
.ac-lp-mock-dots i { width: .48em; height: .48em; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.ac-lp-mock-seg {
  display: flex;
  gap: .15em;
  padding: .18em;
  border-radius: .5em;
  background: rgba(255, 255, 255, .06);
}
.ac-lp-mock-seg > span {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .42em .75em;
  border-radius: .5em;
  font-size: .58em;
  font-weight: 600;
  white-space: nowrap;
  color: #a3a8c9;
}
.ac-lp-mock-seg .ac-icon { width: 1.3em; height: 1.3em; }
.ac-lp-mock-seg > span.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--ac-accent), var(--home-cyan));
}
.ac-lp-mock-name {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  font-size: .56em;
  color: #6a6f92;
  white-space: nowrap;
  overflow: hidden;
}
.ac-lp-mock-name .ac-icon { width: 1.3em; height: 1.3em; color: #4ade80; }
.ac-lp-mock-publish {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .5em .95em;
  border-radius: .55em;
  font-size: .58em;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--ac-accent), var(--home-cyan));
}
.ac-lp-mock-publish .ac-icon { width: 1.3em; height: 1.3em; }

.ac-lp-mock-body { position: relative; height: 21em; }

/* Palette — cùng tên + icon với bảng khối thật trong editor (visual-elements.js) */
.ac-lp-mock-palette {
  position: absolute;
  left: .75em;
  top: .75em;
  bottom: .75em;
  width: 9.5em;
  padding: .6em;
  background: #262638;
  border-radius: .6em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.ac-lp-mock-ptitle { height: 1.5em; margin-bottom: .3em; display: flex; align-items: center; padding-left: .15em; }
.ac-lp-mock-ptitle span {
  font-size: .5em;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6a6f92;
}
.ac-lp-mock-item {
  height: 2.1em;
  margin-bottom: .35em;
  padding: 0 .6em;
  display: flex;
  align-items: center;
  gap: .5em;
  border-radius: .45em;
  background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.ac-lp-mock-item .ac-icon { width: .85em; height: .85em; color: #a3a8c9; }
.ac-lp-mock-item span { font-size: .6em; font-weight: 600; white-space: nowrap; }
.ac-lp-mock-item.is-picked { animation: acLpPick 7s ease-in-out infinite; }

/* Vùng canvas: nền xám + lưới chấm, giống .ac-visual-stage-wrap trong editor */
.ac-lp-mock-stage {
  position: absolute;
  left: 11em;
  right: .75em;
  top: .75em;
  bottom: .75em;
  border-radius: .6em;
  overflow: hidden;
  background-color: #2a2d3f;
  background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.3px);
  background-size: 1em 1em;
}

/* Trang mẫu đang được dựng (tiệm hoa) — mọi phần tử đặt tuyệt đối theo em của .ac-lp-p */
.ac-lp-p {
  position: absolute;
  inset: 1.25em;
  border-radius: .45em;
  background: #fff8f3;
  color: #3b2a2a;
  box-shadow: 0 .8em 2em rgba(0, 0, 0, .35);
}
.ac-lp-p > * { position: absolute; }
.ac-lp-p-nav {
  left: 1.75em;
  right: 1.75em;
  top: 1em;
  height: 1.4em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ac-lp-p-logo { display: inline-flex; align-items: center; gap: .4em; }
.ac-lp-p-logo i { width: .75em; height: .75em; border-radius: 50%; background: #e2556f; }
.ac-lp-p-logo b { font-size: .62em; font-weight: 800; }
.ac-lp-p-links { display: inline-flex; gap: 1.1em; }
.ac-lp-p-links span { font-size: .5em; color: #8a7470; }
.ac-lp-p-chip {
  padding: .35em .75em;
  border-radius: 999px;
  font-size: .48em;
  font-weight: 700;
  color: #c2410c;
  background: #ffe4d6;
  /* font-size .48em → left/top ở trên tính theo em của CHÍNH nó, quy đổi lại về em của trang */
  left: calc(1.75em / .48);
  top: calc(3.4em / .48);
}
.ac-lp-p-h { left: 1.75em; top: 4.8em; }
.ac-lp-p-h span {
  display: block;
  font-size: 1.7em;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -.02em;
  white-space: nowrap;
  color: #2b1d1d;
}
.ac-lp-p-text { left: 1.75em; top: 9.1em; }
.ac-lp-p-text span { display: block; font-size: .62em; line-height: 1.55; color: #7a6461; white-space: nowrap; }
.ac-lp-p-meta { left: 1.75em; top: 15.35em; }
.ac-lp-p-meta span { font-size: .48em; color: #a08b87; white-space: nowrap; }
.ac-lp-p-img {
  left: 17.25em;
  top: 3.6em;
  width: 11.75em;
  height: 11.7em;
  border-radius: .7em;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .55) 0 7%, transparent 7.5%),
    radial-gradient(circle at 40% 37%, rgba(255, 255, 255, .28) 0 12%, transparent 12.5%),
    radial-gradient(circle at 60% 37%, rgba(255, 255, 255, .28) 0 12%, transparent 12.5%),
    radial-gradient(circle at 40% 53%, rgba(255, 255, 255, .28) 0 12%, transparent 12.5%),
    radial-gradient(circle at 60% 53%, rgba(255, 255, 255, .28) 0 12%, transparent 12.5%),
    linear-gradient(165deg, #ffcfd9 0%, #ffa3b5 48%, #f07a90 100%);
}
.ac-lp-p-img-badge {
  position: absolute;
  right: .6em;
  bottom: .6em;
  width: 1.6em;
  height: 1.6em;
  border-radius: .45em;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e2556f;
  background: rgba(255, 255, 255, .9);
}
.ac-lp-mock .ac-lp-p-img-badge .ac-icon { width: .85em; height: .85em; }

/* Nút bấm vừa được thả vào trang */
.ac-lp-p-btn {
  left: 1.75em;
  top: 12.9em;
  width: 7.2em;
  height: 2.1em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  border-radius: .5em;
  color: #fff;
  background: #e2556f;
  box-shadow: 0 .4em 1em rgba(226, 85, 111, .35);
  animation: acLpBtn 7s ease-out infinite;
}
.ac-lp-p-btn span { font-size: .62em; font-weight: 700; white-space: nowrap; }
.ac-lp-mock .ac-lp-p-btn .ac-icon { width: .7em; height: .7em; }

/* Ô gợi ý chỗ thả + đường căn lề (lực hút) hiện ra lúc đang kéo */
.ac-lp-drop {
  left: 1.75em;
  top: 12.9em;
  width: 7.2em;
  height: 2.1em;
  border-radius: .5em;
  border: 2px dashed var(--ac-accent);
  background: rgba(124, 92, 255, .1);
  opacity: 0;
  animation: acLpDrop 7s infinite;
}
.ac-lp-guide {
  left: 1.75em;
  top: 3em;
  height: 13em;
  border-left: 1px dashed #ff4fa3;
  opacity: 0;
  animation: acLpGuide 7s infinite;
}

/* Khung chọn quanh khối vừa thả — tay cầm 4 góc, nhãn tên khối, cụm công cụ */
.ac-lp-sel {
  left: calc(1.75em - 4px);
  top: calc(12.9em - 4px);
  width: calc(7.2em + 8px);
  height: calc(2.1em + 8px);
  border: 1.5px solid var(--ac-accent);
  border-radius: .6em;
  animation: acLpSel 7s infinite;
}
.ac-lp-sel > i {
  position: absolute;
  width: 7px;
  height: 7px;
  background: #fff;
  border: 1.5px solid var(--ac-accent);
  border-radius: 2px;
}
.ac-lp-sel > i:nth-child(1) { left: -4px; top: -4px; }
.ac-lp-sel > i:nth-child(2) { right: -4px; top: -4px; }
.ac-lp-sel > i:nth-child(3) { left: -4px; bottom: -4px; }
.ac-lp-sel > i:nth-child(4) { right: -4px; bottom: -4px; }
.ac-lp-sel-tag {
  position: absolute;
  left: -1.5px;
  bottom: calc(100% + .35em);
  display: inline-flex;
  align-items: center;
  gap: .3em;
  padding: .2em .5em;
  border-radius: .35em;
  color: #fff;
  background: var(--ac-accent);
}
.ac-lp-sel-tag span { font-size: .46em; font-weight: 700; white-space: nowrap; }
.ac-lp-mock .ac-lp-sel-tag .ac-icon { width: .55em; height: .55em; }
.ac-lp-sel-tools {
  position: absolute;
  left: calc(100% + .5em);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: .15em;
  padding: .2em;
  border-radius: .45em;
  color: #c9cce3;
  background: #1b1c30;
  box-shadow: 0 .3em .8em rgba(0, 0, 0, .3);
}
.ac-lp-sel-tools span { width: 1.3em; height: 1.3em; display: flex; align-items: center; justify-content: center; }
.ac-lp-mock .ac-lp-sel-tools .ac-icon { width: .7em; height: .7em; }

/* Khối đang được kéo từ palette sang trang, kèm con trỏ chuột */
.ac-lp-drag {
  position: absolute;
  left: 1.35em;
  top: 10.5em;
  width: 8.3em;
  height: 2.1em;
  z-index: 3;
  pointer-events: none;
  animation: acLpDrag 7s infinite;
}
.ac-lp-drag-chip {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: .5em;
  padding: 0 .6em;
  border-radius: .45em;
  color: #fff;
  background: #3a3470;
  box-shadow: inset 0 0 0 1px var(--ac-accent), 0 .7em 1.6em rgba(0, 0, 0, .5);
  opacity: 0;
  animation: acLpChip 7s infinite;
}
.ac-lp-drag-chip span { font-size: .6em; font-weight: 600; white-space: nowrap; }
.ac-lp-mock .ac-lp-drag-chip .ac-icon { width: .85em; height: .85em; }
.ac-lp-mock .ac-lp-drag-cursor {
  position: absolute;
  left: 5.4em;
  top: .95em;
  width: 1.35em;
  height: 1.35em;
  color: #14152b;
  fill: #fff;
  stroke-width: 1.6;
  filter: drop-shadow(0 .15em .3em rgba(0, 0, 0, .45));
  opacity: 0;
  animation: acLpCursor 7s infinite;
}

@keyframes acLpPick {
  0%, 8%, 50%, 100% { background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
  11%, 45% { background: rgba(124, 92, 255, .2); box-shadow: inset 0 0 0 1px rgba(124, 92, 255, .7); }
}
@keyframes acLpDrag {
  0%, 14% { transform: translate(0, 0); animation-timing-function: cubic-bezier(.55, 0, .25, 1); }
  44%, 62% { transform: translate(12.1em, 4.4em); }
  63%, 100% { transform: translate(0, 0); }
}
@keyframes acLpChip {
  0%, 12% { opacity: 0; transform: none; }
  17%, 42% { opacity: .96; transform: scale(1.04) rotate(-3deg); }
  47%, 100% { opacity: 0; transform: scale(.9); }
}
@keyframes acLpCursor {
  0% { opacity: 0; }
  5%, 56% { opacity: 1; }
  60%, 100% { opacity: 0; }
}
@keyframes acLpDrop {
  0%, 28% { opacity: 0; }
  34%, 45% { opacity: 1; }
  49%, 100% { opacity: 0; }
}
@keyframes acLpGuide {
  0%, 34% { opacity: 0; }
  38%, 47% { opacity: 1; }
  52%, 100% { opacity: 0; }
}
@keyframes acLpBtn {
  0%, 45% { opacity: 0; transform: scale(.8); }
  49% { opacity: 1; transform: scale(1.06); }
  53%, 90% { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: none; }
}
@keyframes acLpSel {
  0%, 50% { opacity: 0; }
  54%, 88% { opacity: 1; }
  92%, 100% { opacity: 0; }
}

/* Giảm chuyển động: dừng hẳn ở trạng thái "đã thả xong" thay vì lặp lại */
@media (prefers-reduced-motion: reduce) {
  .ac-lp-mock *, .ac-lp-step { animation: none !important; transition: none !important; }
  .ac-lp-drag, .ac-lp-drop, .ac-lp-guide { display: none; }
}

/* ── 3 bước + tính năng ─────────────────────────────────────────────── */
.ac-lp-section { max-width: 1040px; margin: 0 auto 88px; padding: 0 24px; }
.ac-lp-heading { text-align: center; margin-bottom: 32px; }
.ac-lp-heading h2 {
  margin: 0 0 10px;
  font-size: clamp(24px, 3.4vw, 32px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ac-ink);
}
.ac-lp-heading p { margin: 0; font-size: 15px; color: var(--ac-ink-soft); }
.ac-lp-steps {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.ac-lp-step {
  padding: 24px;
  border-radius: 16px;
  background: var(--ac-card);
  border: 1px solid var(--ac-border);
  transition: border-color .2s ease, transform .2s ease;
}
.ac-lp-step:hover { border-color: rgba(124, 92, 255, .45); transform: translateY(-2px); }
.ac-lp-step-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.ac-lp-step-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c4b5fd;
  background: rgba(124, 92, 255, .14);
  border: 1px solid rgba(124, 92, 255, .3);
}
.ac-lp-step-icon .ac-icon { width: 20px; height: 20px; vertical-align: 0; }
.ac-lp-step-num {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, .22);
}
.ac-lp-step h3 { margin: 0 0 8px; font-size: 16.5px; color: var(--ac-ink); }
.ac-lp-step p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--ac-ink-soft); }

/* ── Vì sao chọn chúng tôi (index.php #vi-sao-chon) — lưới bento 3 cột: 1 thẻ lớn 2×2 có minh hoạ
   Kéo thả ⇄ Viết code + 5 thẻ tính năng. Thẻ cùng họ khối 3D (gờ dày phía dưới) với thẻ project. ─────── */
.ac-why { scroll-margin-top: 90px; }
.ac-why .ac-eyebrow { margin-bottom: 14px; }
.ac-why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 34px;
}
.ac-why-card {
  --c1: #8b6cff;
  --c2: #37c4e6;
  --edge: #34279a;
  --glow: rgba(124, 92, 255, .24);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  border-radius: 18px;
  text-align: left;
  background: linear-gradient(180deg, #1e1f3c 0%, #15162c 100%);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 6px 0 #07081a, 0 20px 40px -16px rgba(0, 0, 0, .7);
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), border-color .28s ease, box-shadow .28s ease;
}
.ac-why-card::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow), transparent 70%);
  pointer-events: none;
}
.ac-why-card:hover {
  transform: translateY(-4px);
  border-color: rgba(167, 139, 250, .35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 10px 0 #07081a, 0 30px 50px -18px var(--glow);
}
.ac-why-card.is-violet { --c1: #9b7bff; --c2: #6344e6; --edge: #2e1f86; --glow: rgba(124, 92, 255, .3); }
.ac-why-card.is-cyan { --c1: #37c4e6; --c2: #3b6cf0; --edge: #173e7c; --glow: rgba(34, 211, 238, .24); }
.ac-why-card.is-pink { --c1: #ff6bcb; --c2: #8b6cff; --edge: #5b2a8f; --glow: rgba(255, 107, 203, .22); }
.ac-why-icon {
  position: relative;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 0 var(--edge), 0 12px 22px -8px var(--glow);
}
.ac-why-icon .ac-icon { width: 22px; height: 22px; vertical-align: 0; }
.ac-why-card h3 { margin: 0; font-size: 16.5px; font-weight: 700; line-height: 1.35; color: var(--ac-ink); }
.ac-why-card p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--ac-ink-soft); }

/* Thẻ lớn: 2 cột × 2 hàng, có minh hoạ 2 chế độ của cùng 1 project */
.ac-why-card.is-feature { grid-column: span 2; grid-row: span 2; padding: 26px; }
.ac-why-card.is-feature h3 { font-size: 21px; letter-spacing: -.01em; }
.ac-why-card.is-feature p { max-width: 460px; font-size: 14.5px; }
.ac-why-demo {
  margin-top: auto;
  padding-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.ac-why-demo-pane {
  min-width: 0;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(8, 9, 20, .6);
  border: 1px solid rgba(255, 255, 255, .08);
}
.ac-why-demo-tab {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: #c9cce3;
  background: rgba(255, 255, 255, .06);
}
.ac-why-demo-tab.is-active { color: #fff; background: linear-gradient(135deg, #8b6cff, #37c4e6); }
.ac-why-demo-tab .ac-icon,
.ac-why-demo-block .ac-icon { width: 13px; height: 13px; vertical-align: 0; }
.ac-why-demo-block {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #dfe1f5;
  background: linear-gradient(180deg, #2d2f55 0%, #1f203f 100%);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 3px 0 #07081a;
}
.ac-why-demo-block .ac-icon { color: #c4b5fd; }
.ac-why-demo-block:nth-of-type(2) { margin-right: 18px; }
.ac-why-demo-block:nth-of-type(3) { margin-left: 18px; }
.ac-why-demo-code {
  margin: 0;
  overflow: hidden;
  font: 11.5px/1.75 "Consolas", "SFMono-Regular", Menlo, monospace;
  white-space: pre;
  color: #c7cbe8;
}
.ac-why-demo-code .t { color: #7c9cff; }
.ac-why-demo-code .a { color: #22d3ee; }
.ac-why-demo-code .s { color: #ffb86b; }
.ac-why-demo-code .x { color: #a5d6a7; }

.ac-why-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ac-why-cta small { font-size: 12.5px; color: var(--ac-ink-soft); }

@media (max-width: 1000px) {
  .ac-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ac-why-card.is-feature { grid-row: auto; }
  /* 5 thẻ nhỏ trong lưới 2 cột → thẻ cuối trải hết hàng cho khỏi hụt 1 ô */
  .ac-why-grid > .ac-why-card:last-child { grid-column: span 2; }
}
@media (max-width: 640px) {
  .ac-why-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ac-why-card.is-feature,
  .ac-why-grid > .ac-why-card:last-child { grid-column: auto; }
  .ac-why-demo { grid-template-columns: minmax(0, 1fr); }
  .ac-why-demo-pane { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ac-why-card { transition: none; }
}

@media (max-width: 760px) {
  .ac-lp-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ac-lp-showcase { padding: 0 16px; margin-bottom: 64px; }
  .ac-lp-section { padding: 0 16px; margin-bottom: 64px; }
}

/* Tab chuyển đổi trong modal Đăng nhập — modal nền trắng nên style riêng,
   không dùng .ac-tab/.ac-tabs (dành cho thanh tab tối trong editor). */
.ac-login-tabs {
  display: flex; gap: 4px; margin-bottom: 18px; background: #f2f3f7; border-radius: 10px; padding: 4px;
}
.ac-login-tab {
  flex: 1; border: none; background: transparent; padding: 8px 10px; border-radius: 7px;
  font-size: 13.5px; font-weight: 700; color: #5b6472; cursor: pointer;
}
.ac-login-tab.active { background: #fff; color: #1e2430; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.ac-login-pane[hidden] { display: none; }

/* Header nâng cấp cho modal đăng ký: icon thương hiệu + tiêu đề + mô tả ngắn,
   thay cho tiêu đề trơn — modal vẫn nền trắng nên header cũng ở tông sáng. */
.ac-auth-header { align-items: flex-start; }
.ac-auth-header-main { display: flex; align-items: flex-start; gap: 12px; }
.ac-auth-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(135deg, #7c5cff, #22d3ee);
}
/* Icon Lucide (ac_icon) thay cho emoji trước đây — cỡ chỉnh theo khung chứa, màu theo currentColor */
.ac-auth-icon .ac-icon { width: 19px; height: 19px; vertical-align: 0; }
.ac-auth-verify-badge { color: #7c5cff; }
.ac-auth-verify-badge .ac-icon { width: 22px; height: 22px; vertical-align: 0; }
.ac-nav-toggle .ac-icon { width: 20px; height: 20px; vertical-align: 0; }
.ac-auth-header-main h3 { margin: 0 0 3px; }
.ac-auth-subtitle { margin: 0; font-size: 12.5px; color: #8a90a8; font-weight: 500; }

/* Chỉ báo bước 1/2 của luồng đăng ký bằng email (nhập thông tin → xác thực mã) */
.ac-auth-steps { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.ac-auth-step-item { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: #b1b6c9; white-space: nowrap; }
.ac-auth-step-num {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; background: #eef0f5; color: #9aa0b4;
}
.ac-auth-step-item.is-active { color: #1e2430; }
.ac-auth-step-item.is-active .ac-auth-step-num { background: #7c5cff; color: #fff; }
.ac-auth-step-item.is-done .ac-auth-step-num { background: #22c55e; color: #fff; }
.ac-auth-step-sep { flex: 1; height: 1px; background: #e4e7ed; }

/* Bước xác thực mã: icon phong bì + thông điệp căn giữa, ô nhập mã nổi bật */
.ac-auth-verify-badge {
  width: 46px; height: 46px; border-radius: 50%; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center; font-size: 21px;
  background: rgba(124, 92, 255, .1);
}
.ac-auth-verify-msg { text-align: center; font-size: 13.5px; color: #5b6472; line-height: 1.6; margin: 0 0 16px; }
.ac-auth-code-input { letter-spacing: 8px; font-size: 22px; text-align: center; }

/* Modal "Nâng cấp gói" (account.php) — danh sách gói + panel QR chờ thanh toán */
.ac-plans-list { display: flex; flex-direction: column; gap: 10px; }
.ac-plan-card {
  border: 1.5px solid var(--ac-border); border-radius: 10px; padding: 14px 16px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.ac-plan-card-name { font-weight: 700; font-size: 14px; flex: 1 1 100%; }
.ac-plan-card-price { font-weight: 800; font-size: 16px; color: var(--ac-accent); }
.ac-plan-card-meta { font-size: 12px; color: var(--ac-ink-soft); flex: 1; }

/* Bộ chọn số lượng (mua nhiều chu kỳ 1 lần — giá/thời hạn nhân theo số lượng) */
.ac-plan-card-qty { display: flex; align-items: center; gap: 6px; }
.ac-plan-card-qty-btn {
  width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--ac-border);
  background: transparent; color: var(--ac-ink); font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; cursor: pointer; line-height: 1;
}
.ac-plan-card-qty-btn:hover { border-color: var(--ac-accent); color: var(--ac-accent); }
.ac-plan-card-qty-val { min-width: 20px; text-align: center; font-size: 13.5px; font-weight: 700; }

.ac-plans-pay-order { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 13.5px; }
.ac-plans-qr { display: flex; justify-content: center; margin-bottom: 14px; }
/* height:auto — ảnh QR VietQR (template compact2) không phải hình vuông (có tên NH + thông
   tin TK bên dưới mã QR nên cao hơn rộng); trước đây ép cứng width=height=220 qua HTML attr
   làm ảnh bị bóp méo/dẹp. Chỉ khống chế width, để height tự co theo đúng tỉ lệ gốc. */
.ac-plans-qr img { display: block; width: 220px; max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--ac-border); }
.ac-plans-pay-amount { text-align: center; font-size: 15px; margin-bottom: 10px; }
.ac-plans-pay-status { text-align: center; font-size: 13.5px; font-weight: 600; margin: 14px 0; }

/* Đếm ngược 5 phút — mirror .upg-timer/.upg-timer-bar ở php/dashboard.php */
.ac-plans-timer-bar-wrap { height: 4px; background: var(--ac-border); border-radius: 999px; overflow: hidden; margin-bottom: 8px; }
.ac-plans-timer-bar { height: 100%; width: 100%; background: #1c8a52; transition: width 1s linear, background .3s; }
.ac-plans-timer { text-align: center; font-size: 13px; font-weight: 700; color: var(--ac-ink-soft); margin-bottom: 14px; }
.ac-plans-timer.warning { color: #e67e22; }
.ac-plans-timer.danger { color: #c0392b; }

.ac-plans-expired-icon { font-size: 40px; text-align: center; margin-bottom: 10px; }
.ac-plans-expired-text { text-align: center; font-size: 13.5px; color: var(--ac-ink-soft); margin: 0 0 18px; line-height: 1.6; }
.ac-plans-expired-wrap-btn { display: flex; justify-content: center; }

/* Trạng thái "đang xử lý" trên nút — spinner quay + không cho bấm lại trong lúc chờ mạng */
.ac-btn.is-loading { cursor: wait; opacity: .85; }
.ac-btn-spinner {
  display: inline-block; width: 13px; height: 13px; margin-right: 8px;
  border-radius: 50%; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff;
  vertical-align: -2px; animation: acSpin .7s linear infinite;
}
@keyframes acSpin { to { transform: rotate(360deg); } }

/* Hiệu ứng chuyển bước 1 → 2 trong modal đăng ký: mờ dần + trượt nhẹ thay vì ẩn/hiện tức thời */
.ac-auth-fade-step { transition: opacity .2s ease, transform .2s ease; }
.ac-auth-fade-out { opacity: 0; transform: translateY(-8px); }
.ac-auth-fade-in-start { opacity: 0; transform: translateY(8px); }

.ac-oauth-divider {
  display: flex; align-items: center; gap: 10px; margin: 18px 0 14px;
  font-size: 12px; color: #9aa0b4; text-transform: uppercase; letter-spacing: .5px;
}
.ac-oauth-divider::before, .ac-oauth-divider::after {
  content: ''; flex: 1; height: 1px; background: #e4e7ed;
}
.ac-oauth-buttons { display: flex; flex-direction: column; gap: 10px; }
.ac-btn-oauth {
  justify-content: center; gap: 10px; width: 100%; border: 1px solid #e4e7ed; font-weight: 600;
}
.ac-btn-google { background: #fff; color: #1e2430; }
.ac-btn-google:hover { background: #f7f8fa; }
.ac-btn-facebook { background: #1877f2; color: #fff; border-color: #1877f2; }
.ac-btn-facebook:hover { background: #166fe0; }

/* ── Footer dùng chung — index.php/dashboard.php/account.php (php/partials/footer.php) ────────────────
   Cột thương hiệu + 3 cột liên kết, dải bản quyền + nút "Lên đầu trang" (nút 3D .ac-btn-3d). */
.ac-site-footer {
  position: relative;
  margin-top: 48px;
  padding: 0 24px;
  background: linear-gradient(180deg, rgba(10, 11, 22, 0) 0%, rgba(8, 9, 20, .85) 40%, #07081a 100%);
}
/* Vạch sáng gradient thương hiệu ở mép trên footer */
.ac-site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139, 108, 255, .65) 30%, rgba(55, 196, 230, .65) 70%, transparent);
}
.ac-foot-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px 0 38px;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));
  gap: 32px 40px;
}
.ac-foot-logo { display: inline-block; }
.ac-foot-logo img { display: block; height: 32px; width: auto; }
.ac-foot-brand p { max-width: 330px; margin: 16px 0 18px; font-size: 13.5px; line-height: 1.7; color: var(--ac-ink-soft); }
.ac-foot-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.ac-foot-badges span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #c9cce3;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
}
.ac-foot-badges .ac-icon { width: 13px; height: 13px; vertical-align: 0; color: #a78bfa; }
.ac-foot-col h4 {
  margin: 6px 0 16px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8d92b8;
}
.ac-foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ac-foot-col a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--ac-ink-soft);
  text-decoration: none;
  transition: color .15s ease, transform .15s ease;
}
.ac-foot-col a .ac-icon { width: 13px; height: 13px; vertical-align: 0; opacity: .6; }
.ac-foot-col a:hover { color: #fff; transform: translateX(3px); }
.ac-foot-col a:focus-visible,
.ac-foot-logo:focus-visible { outline: 2px solid #a78bfa; outline-offset: 3px; border-radius: 4px; }
.ac-foot-bottom {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  font-size: 12.5px;
  color: #6a6f92;
}
@media (max-width: 860px) {
  .ac-foot-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ac-foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .ac-site-footer { padding: 0 16px; }
  .ac-foot-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; padding-top: 44px; }
  .ac-foot-bottom { flex-direction: column-reverse; align-items: flex-start; }
}

/* ── Nút 3D biến thể: sáng (đăng nhập / liên kết Google) và nguy hiểm (đăng xuất) — xem .ac-btn-3d ở trên ── */
.ac-btn-3d.is-light {
  --b3-edge: #8f95ad;
  color: #1e2430;
  border-color: rgba(255, 255, 255, .7);
  background: linear-gradient(180deg, #ffffff 0%, #eceef6 100%);
  box-shadow: inset 0 1px 0 #fff, 0 var(--b3-depth) 0 var(--b3-edge), 0 calc(var(--b3-depth) + 8px) 18px -6px rgba(0, 0, 0, .5);
}
.ac-btn-3d.is-light:hover {
  color: #1e2430;
  background: linear-gradient(180deg, #ffffff 0%, #f5f6fb 100%);
  box-shadow: inset 0 1px 0 #fff, 0 calc(var(--b3-depth) + 2px) 0 var(--b3-edge), 0 calc(var(--b3-depth) + 12px) 22px -6px rgba(0, 0, 0, .55);
}
.ac-btn-3d.is-light:active { box-shadow: inset 0 1px 0 #fff, 0 0 0 var(--b3-edge), 0 2px 6px -2px rgba(0, 0, 0, .4); }
.ac-btn-3d.is-danger {
  --b3-edge: #2e0a10;
  color: #fecaca;
  border-color: rgba(248, 113, 113, .35);
  background: linear-gradient(180deg, #4a1d27 0%, #2f1219 100%);
}
.ac-btn-3d.is-danger:hover { color: #fff; background: linear-gradient(180deg, #5f2331 0%, #3b161f 100%); }
.ac-g-logo { flex-shrink: 0; }

/* Hộp đăng nhập / đăng ký (trang chủ): dòng chuyển qua lại giữa 2 hộp */
.ac-auth-switch { margin: 18px 0 0; text-align: center; font-size: 13px; color: #5b6472; }
.ac-auth-switch button { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: #6344e6; cursor: pointer; }
.ac-auth-switch button:hover { text-decoration: underline; }

/* Dashboard: khối hướng dẫn đăng nhập / liên kết, số project x/y, ô tạo mới khi đã hết lượt */
.ac-db-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 8px;
  padding: 48px 24px;
  border-radius: 18px;
  text-align: center;
  background: linear-gradient(180deg, #1e1f3c 0%, #15162c 100%);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 6px 0 #07081a, 0 20px 40px -16px rgba(0, 0, 0, .7);
}
.ac-db-gate-icon,
.ac-acct-signin-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 17px;
  color: #fff;
  background: linear-gradient(135deg, #8b6cff 0%, #37c4e6 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 5px 0 #34279a, 0 18px 30px -10px rgba(124, 92, 255, .7);
}
.ac-db-gate-icon .ac-icon,
.ac-acct-signin-icon .ac-icon { width: 26px; height: 26px; vertical-align: 0; }
.ac-db-gate h2 { margin: 18px 0 8px; font-size: 22px; font-weight: 800; letter-spacing: -.01em; color: var(--ac-ink); }
.ac-db-gate p { max-width: 500px; margin: 0 0 24px; font-size: 14.5px; line-height: 1.6; color: var(--ac-ink-soft); text-wrap: balance; }
.ac-db-gate-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.ac-db-stat-value small { margin-left: 3px; font-size: 16px; font-weight: 700; color: var(--ac-ink-soft); }
.ac-pnew.is-full { border-color: rgba(251, 191, 36, .45); background: radial-gradient(circle at 50% 38%, rgba(251, 191, 36, .12), transparent 65%); }
.ac-pnew.is-full:hover { border-color: rgba(251, 191, 36, .85); }
.ac-pnew.is-full .ac-pnew-icon {
  background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 0 #7c2d12, 0 16px 26px -8px rgba(245, 158, 11, .5);
}
.ac-pnew.is-full:hover .ac-pnew-icon .ac-icon { transform: none; }
.ac-plans-expired-icon .ac-icon { width: 40px; height: 40px; color: #e67e22; }

/* ── Trang tài khoản (account.php) — đồng bộ dashboard: khối 3D có gờ, nút 3D. Class riêng .ac-acct-*. ── */
.ac-acct { max-width: 1040px; margin: 0 auto; padding: 0 24px 72px; }
.ac-acct-hero { position: relative; isolation: isolate; padding: 56px 0 28px; }
.ac-acct-hero::before {
  content: "";
  position: absolute;
  inset: 0 -40px;
  z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 50% 80% at 20% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 50% 80% at 20% 40%, #000 20%, transparent 75%);
}
.ac-acct-hero .ac-eyebrow { margin-bottom: 14px; }
.ac-acct-hero h1 {
  margin: 0 0 8px;
  font-size: clamp(34px, 4.6vw, 54px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -.035em;
  color: var(--ac-ink);
}
.ac-acct-hero p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ac-ink-soft); }

.ac-acct-body { display: flex; flex-direction: column; gap: 22px; }
.ac-acct-card,
.ac-acct-meter {
  position: relative;
  border-radius: 18px;
  background: linear-gradient(180deg, #1e1f3c 0%, #15162c 100%);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 6px 0 #07081a, 0 20px 40px -16px rgba(0, 0, 0, .7);
}
.ac-acct-card { padding: 22px; }
.ac-acct-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
.ac-acct-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.ac-acct-head-icon,
.ac-acct-meter-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c4b5fd;
  background: linear-gradient(180deg, #2d2f55 0%, #1c1d3a 100%);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 3px 0 #07081a;
}
.ac-acct-head-icon { width: 40px; height: 40px; border-radius: 12px; }
.ac-acct-head-icon .ac-icon { width: 19px; height: 19px; vertical-align: 0; }
.ac-acct-head h3 { margin: 1px 0 4px; font-size: 16px; font-weight: 700; color: var(--ac-ink); }
.ac-acct-head p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ac-ink-soft); }
.ac-acct-muted { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ac-ink-soft); }
.ac-acct-muted a { font-weight: 700; color: #c4b5fd; }
.ac-acct-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Banner bắt buộc: khách thiệp cưới chưa liên kết Google / tài khoản cũ chưa có cách đăng nhập hợp lệ */
.ac-acct-banner {
  display: flex;
  gap: 16px;
  padding: 20px 22px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(251, 191, 36, .14), rgba(124, 92, 255, .14));
  border: 1px solid rgba(251, 191, 36, .4);
  box-shadow: 0 6px 0 #07081a, 0 20px 40px -16px rgba(0, 0, 0, .7);
}
.ac-acct-banner-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  color: #fbbf24;
  background: rgba(251, 191, 36, .15);
  border: 1px solid rgba(251, 191, 36, .4);
}
.ac-acct-banner-icon .ac-icon { width: 22px; height: 22px; vertical-align: 0; }
.ac-acct-banner h2 { margin: 2px 0 6px; font-size: 18px; font-weight: 800; color: #fff; }
.ac-acct-banner p { max-width: 680px; margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: #e5e7f5; }

/* Hồ sơ */
.ac-acct-profile { display: flex; align-items: center; gap: 18px; }
.ac-acct-avatar {
  width: 68px;
  height: 68px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 20px;
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #8b6cff 0%, #37c4e6 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 5px 0 #34279a;
}
.ac-acct-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ac-acct-profile-main { min-width: 0; }
.ac-acct-profile h2 {
  margin: 0 0 3px;
  font-size: 21px;
  font-weight: 800;
  color: var(--ac-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ac-acct-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ac-acct-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #c9cce3;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
}
.ac-acct-chip .ac-icon { width: 13px; height: 13px; vertical-align: 0; }
.ac-acct-chip.is-plan { color: #fde68a; background: rgba(251, 191, 36, .12); border-color: rgba(251, 191, 36, .3); }

/* 3 ô giới hạn */
.ac-acct-meters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ac-acct-meter { padding: 18px 20px; }
.ac-acct-meter-head { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: var(--ac-ink-soft); }
.ac-acct-meter-icon { width: 34px; height: 34px; border-radius: 10px; }
.ac-acct-meter-icon .ac-icon { width: 17px; height: 17px; vertical-align: 0; }
.ac-acct-meter-value { display: flex; align-items: baseline; gap: 6px; margin: 14px 0 10px; }
.ac-acct-meter-value b { font-size: 30px; line-height: 1; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ac-ink); }
.ac-acct-meter-value small { font-size: 14px; font-weight: 700; color: var(--ac-ink-soft); }
.ac-acct-meter-bar { height: 8px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4); }
.ac-acct-meter-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8b6cff, #37c4e6); }
.ac-acct-meter.is-full .ac-acct-meter-bar i { background: linear-gradient(90deg, #f59e0b, #ef4444); }
.ac-acct-meter p { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ac-ink-soft); }
.ac-acct-meter.is-full p { color: #fcd34d; }

/* Hàng thông tin (gói, cách đăng nhập) */
.ac-acct-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.ac-acct-rows:last-child { margin-bottom: 0; }
.ac-acct-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(8, 9, 20, .45);
  border: 1px solid rgba(255, 255, 255, .07);
}
.ac-acct-row-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: #a78bfa;
  background: rgba(124, 92, 255, .12);
}
.ac-acct-row-icon .ac-icon { width: 17px; height: 17px; vertical-align: 0; }
.ac-acct-row.is-active .ac-acct-row-icon { color: #fff; background: linear-gradient(135deg, #8b6cff, #37c4e6); box-shadow: 0 3px 0 #34279a; }
.ac-acct-row.is-google-row .ac-acct-row-icon { background: #fff; box-shadow: 0 3px 0 #8f95ad; }
.ac-acct-row-main { flex: 1; min-width: 0; }
.ac-acct-row-main small { display: block; margin-bottom: 2px; font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #8d92b8; }
.ac-acct-row-main b,
.ac-acct-row-main span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-acct-row-main b { font-size: 14px; color: var(--ac-ink); }
.ac-acct-row-main span { margin-top: 2px; font-size: 12.5px; color: var(--ac-ink-soft); }
.ac-acct-tag {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  color: #c9cce3;
  background: rgba(255, 255, 255, .06);
}
.ac-acct-tag .ac-icon { width: 12px; height: 12px; vertical-align: 0; }
.ac-acct-tag.is-ok { color: #bbf7d0; background: rgba(74, 222, 128, .12); }

/* Form thêm email + mật khẩu */
.ac-acct-email-form { margin-top: 16px; padding: 16px; border-radius: 12px; background: rgba(8, 9, 20, .45); border: 1px solid rgba(255, 255, 255, .07); }
.ac-acct-email-form .ac-acct-muted { margin-bottom: 14px; }
.ac-acct-card .ac-field label { color: var(--ac-ink); }
.ac-acct-card .ac-field input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
  color: var(--ac-ink);
}
.ac-acct-card .ac-field input:focus { outline: none; border-color: rgba(167, 139, 250, .7); box-shadow: 0 0 0 3px rgba(124, 92, 255, .2); }
.ac-acct-card .ac-field input::placeholder { color: #6a6f92; }
.ac-acct-card .ac-field-error { margin: -4px 0 12px; color: #fca5a5; }
.ac-acct-card .ac-field input.ac-acct-code-input { letter-spacing: 8px; font-size: 20px; text-align: center; }

/* Chưa đăng nhập */
.ac-acct-signin { display: flex; flex-direction: column; align-items: center; padding: 44px 24px; text-align: center; }
.ac-acct-signin h2 { margin: 18px 0 8px; font-size: 22px; font-weight: 800; color: var(--ac-ink); }
.ac-acct-signin p { max-width: 440px; margin: 0 0 22px; font-size: 14.5px; line-height: 1.6; color: var(--ac-ink-soft); }
.ac-acct-signin .ac-acct-actions { justify-content: center; margin-bottom: 18px; }
.ac-acct-signin .ac-acct-muted { margin: 0; }

.ac-acct-logout { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.ac-acct-logout .ac-acct-head { margin-bottom: 0; }

/* Khung chờ trong lúc tải */
.ac-acct-skel {
  height: 116px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .06);
  background: linear-gradient(100deg, rgba(255, 255, 255, .04) 30%, rgba(255, 255, 255, .09) 50%, rgba(255, 255, 255, .04) 70%);
  background-size: 300% 100%;
  animation: acDbShimmer 1.4s ease-in-out infinite;
}
.ac-acct-skel-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

@media (max-width: 860px) {
  .ac-acct-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ac-acct { padding: 0 16px 56px; }
  .ac-acct-hero { padding: 34px 0 22px; }
  .ac-acct-meters,
  .ac-acct-skel-row { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ac-acct-banner { flex-direction: column; }
  .ac-acct-profile { align-items: flex-start; }
  .ac-acct-avatar { width: 56px; height: 56px; border-radius: 16px; font-size: 22px; }
  .ac-acct-actions .ac-btn { flex: 1 1 auto; justify-content: center; }
  .ac-acct-row { flex-wrap: wrap; }
  /* Dòng phụ ("Còn hạn đến…", "Bắt buộc với tài khoản thiệp cưới…") là thông tin cần đọc đủ → cho xuống dòng */
  .ac-acct-row-main span { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .ac-acct-skel { animation: none; }
}

/* ── Trang dashboard (dashboard.php) — đồng bộ trang chủ: nút 3D (.ac-btn-3d), thẻ project dùng chung
   (.ac-pcard), khối có gờ dày phía dưới. Class riêng .ac-db-*. ─────────────────────────────────────────── */
.ac-db { max-width: 1160px; margin: 0 auto; padding: 0 24px 72px; }

.ac-db-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px 24px;
  padding: 56px 0 30px;
}
/* Lưới chấm mờ phía sau tiêu đề — cùng họ với nền canvas của trang chủ */
.ac-db-hero::before {
  content: "";
  position: absolute;
  inset: 0 -40px;
  z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 50% 80% at 20% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 50% 80% at 20% 40%, #000 20%, transparent 75%);
}
.ac-db-hero .ac-eyebrow { margin-bottom: 14px; }
.ac-db-hero h1 {
  margin: 0 0 8px;
  font-size: clamp(34px, 4.6vw, 54px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -.035em;
  color: var(--ac-ink);
}
.ac-db-hero p { margin: 0; max-width: 520px; font-size: 15.5px; line-height: 1.6; color: var(--ac-ink-soft); }

.ac-db-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 32px; }
.ac-db-stat {
  --stat-c: #a78bfa;
  --stat-glow: rgba(124, 92, 255, .25);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 16px;
  background: linear-gradient(180deg, #1e1f3c 0%, #15162c 100%);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 6px 0 #07081a, 0 18px 36px -14px rgba(0, 0, 0, .7);
}
.ac-db-stat::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--stat-glow), transparent 70%);
  pointer-events: none;
}
.ac-db-stat.is-live { --stat-c: #4ade80; --stat-glow: rgba(74, 222, 128, .2); }
.ac-db-stat.is-views { --stat-c: #22d3ee; --stat-glow: rgba(34, 211, 238, .2); }
.ac-db-stat-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: var(--stat-c);
  background: linear-gradient(180deg, #2d2f55 0%, #1c1d3a 100%);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 4px 0 #07081a;
}
.ac-db-stat-icon .ac-icon { width: 22px; height: 22px; vertical-align: 0; }
.ac-db-stat-value {
  font-size: 28px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ac-ink);
}
.ac-db-stat-label { margin-top: 2px; font-size: 13px; color: var(--ac-ink-soft); }

.ac-db-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-bottom: 24px;
}
.ac-db-filter {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
}
.ac-db-filter button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 0;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--ac-ink-soft);
  background: transparent;
  transition: color .15s ease, background .15s ease, box-shadow .15s ease;
}
.ac-db-filter button:hover { color: var(--ac-ink); }
.ac-db-filter button span {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, .08);
}
.ac-db-filter button.is-active {
  color: #fff;
  background: linear-gradient(180deg, #383b68 0%, #26284b 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 3px 0 #07081a;
}
.ac-db-filter button.is-active span { background: rgba(124, 92, 255, .55); }
.ac-db-filter button:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }
.ac-db-search { position: relative; display: flex; align-items: center; flex: 0 1 320px; }
.ac-db-search .ac-icon { position: absolute; left: 13px; width: 16px; height: 16px; vertical-align: 0; color: #6a6f92; pointer-events: none; }
.ac-db-search input {
  width: 100%;
  height: 42px;
  padding: 0 14px 0 38px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04);
  color: var(--ac-ink);
  font-size: 14px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .25);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.ac-db-search input::placeholder { color: #6a6f92; }
.ac-db-search input:focus {
  outline: none;
  border-color: rgba(167, 139, 250, .7);
  background: rgba(255, 255, 255, .06);
  box-shadow: 0 0 0 3px rgba(124, 92, 255, .2);
}

.ac-db-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 24px;
  padding-bottom: 10px;
}
.ac-db-grid .ac-pnew { min-height: 300px; }
.ac-db.is-empty .ac-db-hero-cta { display: none; }
/* Thẻ khung chờ trong lúc tải */
.ac-db-skel {
  height: 300px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .06);
  background: linear-gradient(100deg, rgba(255, 255, 255, .04) 30%, rgba(255, 255, 255, .09) 50%, rgba(255, 255, 255, .04) 70%);
  background-size: 300% 100%;
  animation: acDbShimmer 1.4s ease-in-out infinite;
}
@keyframes acDbShimmer {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

.ac-db-noresult {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 56px 16px;
  text-align: center;
  font-size: 13.5px;
  color: var(--ac-ink-soft);
}
.ac-db-noresult b { font-size: 16px; color: var(--ac-ink); }
.ac-db-noresult-icon,
.ac-db-empty-art i:nth-child(3) .ac-icon { vertical-align: 0; }
.ac-db-noresult-icon {
  width: 52px;
  height: 52px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: #a78bfa;
  background: linear-gradient(180deg, #2d2f55 0%, #1c1d3a 100%);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 4px 0 #07081a;
}
.ac-db-noresult-icon .ac-icon { width: 22px; height: 22px; vertical-align: 0; }

/* Trạng thái chưa có project: 3 tấm khối xếp chồng kiểu isometric, tấm trên cùng lơ lửng */
.ac-db-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 36px 16px 24px; }
.ac-db-empty-art { position: relative; width: 160px; height: 140px; margin-bottom: 24px; perspective: 600px; }
.ac-db-empty-art i {
  position: absolute;
  left: 50%;
  width: 112px;
  height: 66px;
  margin-left: -56px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .14);
  transform: rotateX(55deg) rotateZ(-35deg);
}
.ac-db-empty-art i:nth-child(1) { top: 76px; background: linear-gradient(135deg, #1b1d3d, #14152e); box-shadow: 0 8px 0 #07081a; }
.ac-db-empty-art i:nth-child(2) { top: 48px; background: linear-gradient(135deg, #2f3163, #1d1e3f); box-shadow: 0 8px 0 #0c0d22; }
.ac-db-empty-art i:nth-child(3) {
  top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, #8b6cff, #37c4e6);
  box-shadow: 0 8px 0 #34279a, 0 24px 40px -10px rgba(124, 92, 255, .7);
  animation: acDbFloat 3.2s ease-in-out infinite;
}
.ac-db-empty-art i:nth-child(3) .ac-icon { width: 26px; height: 26px; transform: rotateZ(35deg); }
@keyframes acDbFloat {
  0%, 100% { transform: rotateX(55deg) rotateZ(-35deg) translateZ(0); }
  50% { transform: rotateX(55deg) rotateZ(-35deg) translateZ(16px); }
}
.ac-db-empty h2 { margin: 0 0 8px; font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--ac-ink); }
.ac-db-empty p { max-width: 420px; margin: 0 0 26px; font-size: 14.5px; line-height: 1.6; color: var(--ac-ink-soft); text-wrap: balance; }

@media (max-width: 640px) {
  .ac-db-header .ac-nav .ac-btn { flex: 1 1 0; justify-content: center; }
  .ac-db { padding: 0 16px 56px; }
  .ac-db-hero { padding: 34px 0 22px; }
  /* Header đã có nút "Project mới" ngay phía trên — trên điện thoại không lặp lại nút lớn ở đây */
  .ac-db-hero-cta { display: none; }
  .ac-db-stats { gap: 10px; margin-bottom: 24px; }
  .ac-db-stat { flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; text-align: center; }
  .ac-db-stat-icon { width: 36px; height: 36px; border-radius: 11px; }
  .ac-db-stat-icon .ac-icon { width: 17px; height: 17px; }
  .ac-db-stat-value { font-size: 21px; }
  .ac-db-stat-label { font-size: 11.5px; }
  .ac-db-toolbar { flex-direction: column-reverse; align-items: stretch; }
  .ac-db-search { flex: 1 1 auto; }
  .ac-db-filter button { flex: 1; justify-content: center; padding: 7px 6px; }
  .ac-db-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ac-db-grid .ac-pnew { min-height: 170px; }
}
@media (prefers-reduced-motion: reduce) {
  .ac-db-skel, .ac-db-empty-art i { animation: none; }
}


/* ── domains.php: trình quản lý tên miền (static/js/domain-ui.js) trên nền tối ──────────────
   Khung quản lý chỉ dùng biến màu; ở đây đổi nền ô nhập / thẻ tên miền sang tông tối. */
.ac-dmp { --ac-dm-field: rgba(255, 255, 255, .06); --ac-dm-field-ink: var(--ac-ink); --ac-dm-item-bg: rgba(255, 255, 255, .035); }
.ac-dmp-panel {
  padding: 20px; border-radius: 18px;
  background: linear-gradient(180deg, #1a1b36 0%, #131428 100%);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 18px 36px -18px rgba(0, 0, 0, .7);
}
.ac-dmp-panel[hidden] { display: none; }
.ac-dmp .ac-dm-add select option,
.ac-dmp .ac-dm-item-project select option { background: #15162c; color: #f3f4fb; }
.ac-dmp .ac-dm-add input::placeholder { color: #7d82a8; }
.ac-dmp .ac-dm-pill.is-ok { color: #4ade80; background: rgba(74, 222, 128, .12); }
.ac-dmp .ac-dm-pill.is-wait { color: #b8bfdc; background: rgba(184, 191, 220, .12); }
.ac-dmp .ac-dm-pill.is-warn { color: #fbbf24; background: rgba(251, 191, 36, .12); }
.ac-dmp .ac-dm-pill.is-err { color: #f87171; background: rgba(248, 113, 113, .12); }
.ac-dmp .ac-dm-item-msg.is-err, .ac-dmp .ac-dm-add-error { color: #f87171; }
.ac-dmp .ac-dm-item-msg.is-warn, .ac-dmp .ac-dm-item-warn { color: #fbbf24; }
.ac-dmp .ac-dm-steps code, .ac-dmp .ac-dm-dns-table code, .ac-dmp .ac-dm-dns-notes code { background: rgba(124, 92, 255, .22); }
.ac-dmp .ac-dm-log pre { background: #0b0c19; }
@media (max-width: 720px) { .ac-dmp-panel { padding: 14px; } }

/* ── dashboard.php: hộp "Tạo dự án mới" (đặt tên trước — round 85) ───────────────────────── */
.ac-newproj-modal { max-width: 460px; }
.ac-newproj-modal form { display: flex; flex-direction: column; min-height: 0; }
.ac-newproj-modal .ac-field { margin-bottom: 0; }
.ac-newproj-modal .ac-field input { font-size: 15px; padding: 11px 13px; }
.ac-newproj-modal .ac-field input:focus { outline: none; border-color: var(--ac-accent); box-shadow: 0 0 0 3px rgba(124, 92, 255, .18); }