.ah-modal .ah-modal-backdrop{-webkit-backdrop-filter:blur(6px);background:#040406bd}.ah-modal .ah-modal-card{background:var(--t-surface-2);border:1px solid var(--t-line);text-align:left;max-width:470px;color:var(--t-text);border-radius:4px;padding:38px 36px 32px;box-shadow:0 40px 90px #0009}.ah-modal .ah-modal-logo{color:var(--t-on-accent);margin-bottom:26px;display:block}.ah-modal .ah-modal-logo .mil-logo-mark-wrap{height:30px}.ah-modal .ah-modal-close{border:1px solid var(--t-line);width:34px;height:34px;color:var(--t-text-2);background:0 0;border-radius:50%;transition:border-color .25s,color .25s}.ah-modal .ah-modal-close:hover{border-color:var(--t-muted);color:var(--t-on-accent);background:0 0}.ah-modal .ah-modal-badge{letter-spacing:1.6px;text-transform:uppercase;color:var(--t-muted);background:0 0;align-items:center;gap:9px;margin:0 0 14px;padding:0;font-size:11px;display:inline-flex}.ah-modal .ah-modal-badge i{background:var(--t-accent);width:5px;height:5px;box-shadow:none}.ah-modal .ah-modal-h{letter-spacing:-.4px;color:var(--t-on-accent);margin:0 0 8px;font-size:27px;font-weight:400;line-height:1.26}.ah-modal .ah-modal-h span{color:var(--t-faint);font-weight:400}.ah-modal .ah-modal-sub{color:var(--t-muted);margin:0 0 26px;font-size:13.5px;line-height:1.6}.ah-modal .ah-modal-form{gap:0;margin:0}.ah-modal .ah-modal-field{text-align:left;margin:0 0 20px}.ah-modal .ah-modal-flabel{letter-spacing:1.4px;text-transform:uppercase;color:var(--t-faint);margin:0 0 10px;font-size:11px;display:block}.ah-modal .ah-modal-reasons{flex-wrap:wrap;gap:6px;display:flex}.ah-modal .ah-modal-reasons.is-grid{grid-template-columns:1fr 1fr;gap:6px;display:grid}.ah-modal .ah-modal-reason{border:1px solid var(--t-line);color:var(--t-text-2);background:0 0;border-radius:2px;padding:10px 14px;font-size:13.5px;font-weight:400;transition:border-color .25s,color .25s,background-color .25s}.ah-modal .ah-modal-reason:hover{border-color:var(--t-faint);color:var(--t-on-accent)}.ah-modal .ah-modal-reason.is-on{border-color:var(--t-accent);color:var(--t-on-accent);background:#ff980021}.ah-modal .ah-modal-row{gap:6px;margin:0 0 20px;display:flex}.ah-modal .ah-modal-input{border:1px solid var(--t-line);color:var(--t-on-accent);background:0 0;border-radius:2px;padding:12px 14px;font-size:14px;transition:border-color .25s}.ah-modal .ah-modal-input:focus{border-color:var(--t-accent);outline:none}.ah-modal .ah-modal-input-sm{margin-top:6px;padding:10px 14px;font-size:13.5px}.ah-modal .ah-modal-more{-webkit-appearance:none;appearance:none;letter-spacing:1.4px;text-transform:uppercase;color:var(--t-muted);border:0;border-bottom:1px solid var(--t-line-strong);cursor:pointer;background:0 0;margin:0;padding:0 0 3px;font-family:inherit;font-size:11px;font-weight:400;transition:color .25s,border-color .25s}.ah-modal .ah-modal-more:hover{color:var(--t-on-accent);border-color:var(--t-muted)}.ah-modal .ah-modal-more[aria-expanded=true]{margin-bottom:12px}.ah-modal .ah-modal-slots{margin-top:6px}.ah-modal .ah-modal-bk-note{color:var(--t-muted);margin:10px 0 0;font-size:12px}.ah-modal .ah-modal-cta{border:1px solid var(--t-line-strong);letter-spacing:.3px;width:100%;color:var(--t-on-accent);background:0 0;border-radius:2px;justify-content:center;align-items:center;gap:10px;margin:4px 0 0;padding:15px 22px;font-size:14px;font-weight:400;transition:border-color .3s,background-color .3s;display:flex}.ah-modal .ah-modal-cta:hover{background:#ff98001f;border-color:#ff9800e6;transform:none}.ah-modal .ah-modal-cta:disabled{opacity:.55}.ah-modal .ah-modal-spinner{border-color:var(--t-faint);border-top-color:var(--t-on-accent)}.ah-modal .ah-modal-or{letter-spacing:1.4px;text-transform:uppercase;color:var(--t-faint);align-items:center;gap:14px;margin:22px 0 14px;font-size:11px;display:flex}.ah-modal .ah-modal-or:before,.ah-modal .ah-modal-or:after{content:"";background:var(--t-line);flex:1;height:1px}.ah-modal .ah-modal-or span{background:0 0;padding:0}.ah-modal .ah-modal-zalo{border:1px solid var(--t-line);color:var(--t-text-2);background:0 0;border-radius:2px;justify-content:center;align-items:center;gap:10px;padding:12px 18px;font-size:13.5px;font-weight:400;transition:border-color .25s,color .25s;display:flex}.ah-modal .ah-modal-zalo:hover{border-color:var(--t-faint);color:var(--t-on-accent)}.ah-modal .ah-modal-zalo svg{border-radius:4px;width:22px;height:22px}.ah-modal .ah-modal-err{color:#ff7a7a;margin:14px 0 0;font-size:13px}.ah-modal .ah-modal-done{text-align:left}.ah-modal .ah-modal-ic{width:44px;height:44px;color:var(--t-accent-text);background:0 0;border:1px solid #ff98008c;border-radius:50%;margin-bottom:20px}.ah-modal .ah-modal-ic svg{width:20px;height:20px}@media (width<=520px){.ah-modal .ah-modal-card{border-radius:3px;padding:28px 20px 24px}.ah-modal .ah-modal-h{font-size:23px}.ah-modal .ah-modal-logo{margin-bottom:20px}}.ah-modal .ah-modal-logo{line-height:0;display:block}.ah-modal .ah-modal-logo .mil-logo-mark-wrap{width:auto;height:32px;display:inline-block}.ah-modal .ah-modal-logo .mil-logo-mark{width:auto;height:32px}.ah-modal .ah-modal-logo .mil-logo-ink{width:100%;height:100%}.ah-modal .ah-modal-row{gap:8px}@media (width<=640px){.ah-modal .ah-modal-card{max-width:470px;padding:28px 20px 24px}.ah-modal .ah-modal-reasons.is-grid{grid-template-columns:1fr 1fr}}.ah-modal .ah-modal-or{color:var(--t-muted)!important}.ah-modal .ah-modal-flabel,.ah-modal .ah-modal-h span,.ah-modal .ah-modal-sub,.ah-modal .ah-modal-more{color:var(--t-text-2)!important}.ah-modal .ah-modal-input::placeholder{color:var(--t-muted)!important}.ah-modal .ah-modal-reason{min-height:44px}.ah-modal .ah-modal-close{width:44px;height:44px}.ah-modal .ah-modal-more{align-items:center;min-height:44px;display:inline-flex}.ah-modal .ah-modal-h,.ah-modal .ah-modal-cta,.ah-modal .ah-modal-reason.is-on,.ah-modal .ah-modal-input,.ah-modal .ah-modal-zalo:hover,.ah-modal .ah-modal-reason:hover,.ah-modal .ah-modal-close:hover{color:var(--t-text)!important}.ah-modal .ah-modal-ic{color:var(--t-accent-text)!important}.ah-modal .ah-modal-card{max-width:720px;padding:34px 34px 28px}.ah-modal .ah-modal-cols{grid-template-columns:1fr 1fr;align-items:start;gap:12px 28px;display:grid}.ah-modal .ah-col-l{grid-area:1/1/span 3;margin-bottom:0}.ah-modal .ah-col-r{grid-column:2;margin-bottom:14px}.ah-modal .ah-modal-reasons.is-grid{grid-template-columns:1fr 1fr}.ah-modal .ah-modal-row{flex-direction:column;gap:10px}.ah-modal .ah-col-r .ah-modal-reasons{grid-template-columns:1fr 1fr;gap:7px;display:grid}.ah-modal .ah-modal-cta{margin-top:16px}.ah-modal .ah-modal-or{margin:16px 0 12px}@media (width<=720px){.ah-modal .ah-modal-card{max-width:470px;padding:26px 20px 22px}.ah-modal .ah-modal-cols{grid-template-columns:1fr;gap:0}.ah-modal .ah-col-l,.ah-modal .ah-col-r{grid-area:auto/1;margin-bottom:18px}.ah-modal .ah-modal-row{flex-direction:row}}.ah-modal .ah-modal-card{width:100%}.ah-nudge{--nudge-line:#00000073;box-sizing:border-box;border:1px solid var(--nudge-line);background:var(--t-surface-2);width:356px;max-width:calc(100vw - 32px);color:var(--t-text);opacity:0;transition-behavior:allow-discrete;border-radius:4px;gap:11px;margin:0;padding:20px 56px 20px 22px;transition-property:opacity,translate,display,overlay;transition-duration:.34s;transition-timing-function:cubic-bezier(.16,1,.3,1);position:fixed;inset:auto 20px 20px auto;overflow:visible;translate:0 14px;box-shadow:0 18px 44px #0000002e}:root[data-theme=dark] .ah-nudge{--nudge-line:#fff6;box-shadow:0 18px 44px #0000009e}.ah-nudge:where(:popover-open){opacity:1;display:grid;translate:0}@starting-style{.ah-nudge:where(:popover-open){opacity:0;translate:0 14px}}.ah-nudge .ah-nudge-eyebrow{letter-spacing:1.6px;text-transform:uppercase;color:var(--t-text-2);align-items:center;gap:8px;margin:0;font-size:11px;font-weight:400;display:inline-flex}.ah-nudge .ah-nudge-eyebrow i{background:var(--t-accent);flex:none;width:5px;height:5px}.ah-nudge .ah-nudge-t{letter-spacing:-.1px;color:var(--t-text);margin:0;font-size:15px;font-weight:400;line-height:1.5}.ah-nudge .ah-nudge-go{-webkit-appearance:none;appearance:none;letter-spacing:.3px;background:var(--t-accent);min-height:44px;color:var(--t-on-accent);border:1px solid var(--t-accent);cursor:pointer;border-radius:2px;justify-self:start;align-items:center;margin:3px 0 0;padding:0 20px;font-family:inherit;font-size:13.5px;font-weight:400;transition:filter .25s;display:inline-flex}.ah-nudge .ah-nudge-go:hover{filter:brightness(1.14)}.ah-nudge .ah-nudge-x{-webkit-appearance:none;appearance:none;width:44px;height:44px;color:var(--t-text-2);cursor:pointer;background:0 0;border:0;border-radius:50%;place-items:center;margin:0;padding:0;transition:color .25s,background-color .25s;display:grid;position:absolute;top:7px;right:7px}.ah-nudge .ah-nudge-x:hover{color:var(--t-text);background:var(--t-hover)}.ah-nudge .ah-nudge-x svg{fill:none;stroke:currentColor;stroke-width:1.9px;stroke-linecap:round;width:15px;height:15px}.ah-nudge .ah-nudge-go:focus-visible,.ah-nudge .ah-nudge-x:focus-visible{outline:2px solid var(--t-accent);outline-offset:2px}@media (width<=560px){.ah-nudge{width:auto;max-width:none;padding:17px 52px 17px 18px;inset:auto 12px 12px}.ah-nudge .ah-nudge-t{font-size:14.5px}}@media (prefers-reduced-motion:reduce){.ah-nudge{transition-duration:.1s;translate:none}.ah-nudge:where(:popover-open){translate:none}@starting-style{.ah-nudge:where(:popover-open){translate:none}}}.ah-modal .ah-modal-cta{border-color:#00000073}:root[data-theme=dark] .ah-modal .ah-modal-cta{border-color:#ffffff6b}
/* ════════════════════════════════════════════════════════════════
   SOFT-TECH SKIN CHO POPUP TƯ VẤN — 2026-08-23
   Áp cho .ah-nudge (thẻ mời góc dưới) và .ah-modal-* (form đầy đủ,
   dùng chung ở HomeStickyBar.tsx và UocLuongTool.tsx).

   VÌ SAO ĐẶT Ở CUỐI FILE NÀY:
   .ah-modal-* có HAI nguồn định nghĩa cạnh tranh nhau:
     1. src/app/home-apple.css (bundle theo Next, nạp sớm) - kiểu
        Apple xanh dương, bo tròn, có animation nhập cuộc.
     2. file này, mil-popup.css (nạp bằng <link> SAU bundle Next,
        xem layout.tsx) - kiểu cam phẳng cũ.
   Cascade theo THỨ TỰ NGUỒN khi độ đặc hiệu bằng nhau, nên file này
   luôn thắng cho MÀU/VIỀN/BÓNG dù home-apple.css vẫn còn kiểm soát
   animation/position/layout (hai bên không đụng chung thuộc tính).
   Khối dưới đây nối vào NGAY CUỐI file này nên là tiếng nói cuối
   cùng - thắng cả bản cam phẳng cũ lẫn bản xanh Apple.

   CHỈ đổi da (nền, viền, bo góc, đổ bóng, màu chữ) - KHÔNG đụng
   layout/animation/position để không phá form đang chạy tốt. */

:root {
  --pop-surface: #ffffff;
  --pop-surface-low: #f4f4fa;
  --pop-surface-mid: #ededf4;
  --pop-ink: #1a1c20;
  --pop-ink-2: #454654;
  --pop-ink-3: #75768a;
  --pop-line-soft: #e4e4ec;
  --pop-accent: #ff9800;
  --pop-accent-hi: #ffb44a;
  --pop-accent-lo: #f28c00;
  --pop-accent-text: #96540a;
  --pop-accent-wash: #fff4e6;
  --pop-sh-1: 0 1px 2px rgba(26,28,45,.035), 0 4px 12px -3px rgba(26,28,45,.055);
  --pop-sh-2: 0 2px 5px rgba(26,28,45,.04), 0 14px 30px -12px rgba(26,28,45,.10);
}

/* ── Thẻ mời nhẹ góc dưới ── */
.ah-nudge {
  border: none;
  background: linear-gradient(180deg, var(--pop-surface) 0%, var(--pop-surface-low) 100%);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 #fff, var(--pop-sh-2);
}
.ah-nudge .ah-nudge-eyebrow { color: var(--pop-accent-text); }
.ah-nudge .ah-nudge-eyebrow i { background: var(--pop-accent); box-shadow: 0 0 0 3px rgba(255,152,0,.16); }
.ah-nudge .ah-nudge-t { color: var(--pop-ink); }
.ah-nudge .ah-nudge-go {
  border: 0; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .8px; font-weight: 600;
  background: linear-gradient(180deg, var(--pop-accent-hi) 0%, var(--pop-accent) 45%, var(--pop-accent-lo) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.62), inset 0 -1px 2px rgba(0,0,0,.16),
              0 1px 2px rgba(26,28,45,.18), 0 9px 20px -8px rgba(255,152,0,.42);
  color: #2b1800 !important;
  transition: filter .2s ease, transform .18s ease, box-shadow .18s ease;
}
.ah-nudge .ah-nudge-go:hover { filter: brightness(1.06); transform: translateY(-1px); }
.ah-nudge .ah-nudge-go:active { transform: translateY(1px); filter: brightness(.97); }
.ah-nudge .ah-nudge-x { color: var(--pop-ink-3); }
.ah-nudge .ah-nudge-x:hover { color: var(--pop-ink); background: var(--pop-surface-mid); }

/* ── Nền mờ phía sau modal ── */
.ah-modal .ah-modal-backdrop {
  background: rgba(26,28,45,.5);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
}

/* ── Thẻ modal ── */
.ah-modal .ah-modal-card {
  border: none;
  background: linear-gradient(180deg, var(--pop-surface) 0%, var(--pop-surface-low) 100%);
  border-radius: 26px;
  box-shadow: inset 0 1px 0 #fff, 0 30px 70px -24px rgba(26,28,45,.32), 0 10px 28px -12px rgba(26,28,45,.16);
}
.ah-modal .ah-modal-close {
  border: 0;
  background: linear-gradient(180deg, #fff, var(--pop-surface-mid));
  box-shadow: var(--pop-sh-1), inset 0 1px 0 #fff;
  color: var(--pop-ink-3);
  transition: box-shadow .2s ease, color .2s ease;
}
.ah-modal .ah-modal-close:hover { box-shadow: var(--pop-sh-2), inset 0 1px 0 #fff; color: var(--pop-ink) !important; }

/* ── Huy hiệu tick khi xong (giữ tông xanh lá - ngữ nghĩa "thành công") ── */
.ah-modal .ah-modal-ic {
  border: 0;
  background: linear-gradient(180deg, #fff, var(--pop-surface-mid));
  box-shadow: var(--pop-sh-1), inset 0 1px 0 #fff;
  color: var(--pop-accent-text) !important;
}
.ah-modal .ah-modal-ic.ok {
  background: linear-gradient(180deg, #eafaf0, #d7f3e2);
  box-shadow: inset 0 1px 0 #fff, 0 10px 22px -10px rgba(29,157,87,.35);
  color: #1d9d57 !important;
}

/* ── Nhãn/eyebrow, tiêu đề, mô tả ── */
.ah-modal .ah-modal-badge { background: var(--pop-accent-wash); color: var(--pop-accent-text); border-radius: 999px; padding: 5px 12px; }
.ah-modal .ah-modal-badge i { background: var(--pop-accent); box-shadow: none; }
.ah-modal .ah-modal-h { color: var(--pop-ink) !important; font-weight: 700; }
.ah-modal .ah-modal-h span { color: var(--pop-accent-text) !important; }
.ah-modal .ah-modal-sub { color: var(--pop-ink-2) !important; }
.ah-modal .ah-modal-flabel { color: var(--pop-ink-3) !important; }

/* ── Chip lựa chọn (dịch vụ / ngân sách / ngày / giờ) ── */
.ah-modal .ah-modal-reason {
  border: 0; border-radius: 14px;
  background: linear-gradient(180deg, #fff, var(--pop-surface-low));
  box-shadow: var(--pop-sh-1), inset 0 1px 0 #fff;
  color: var(--pop-ink-2);
  transition: box-shadow .2s ease, color .2s ease, background .2s ease;
}
.ah-modal .ah-modal-reason:hover { box-shadow: var(--pop-sh-2), inset 0 1px 0 #fff; color: var(--pop-ink) !important; }
.ah-modal .ah-modal-reason.is-on {
  background: linear-gradient(180deg, var(--pop-accent-hi), var(--pop-accent-lo));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 2px rgba(0,0,0,.12), 0 3px 10px -4px rgba(255,152,0,.45);
  color: #2b1800 !important;
}

/* ── Nhu cầu đã chọn sẵn (mở từ chip pain-point) ── */
.ah-modal-preset {
  background: var(--pop-accent-wash); border: 0; border-radius: 14px;
  box-shadow: inset 0 1px 0 #fff;
}
.ah-modal-preset-tag { color: var(--pop-ink); }
.ah-modal-preset-tag svg { stroke: var(--pop-accent-text); }
.ah-modal-preset-change { color: var(--pop-accent-text); }
.ah-modal-preset-change:hover { background: rgba(255,152,0,.12); }

/* ── Ô nhập: chìm nhẹ kiểu neomorphism thay vì viền phẳng ── */
.ah-modal .ah-modal-input {
  border: 0; border-radius: 12px;
  background: var(--pop-surface-low);
  box-shadow: inset 1px 1px 3px rgba(26,28,45,.07), inset -1px -1px 2px #fff;
  color: var(--pop-ink) !important;
  transition: box-shadow .2s ease;
}
.ah-modal .ah-modal-input:focus {
  box-shadow: inset 1px 1px 3px rgba(26,28,45,.07), inset -1px -1px 2px #fff, 0 0 0 3px rgba(255,152,0,.2);
}
.ah-modal .ah-modal-input::placeholder { color: var(--pop-ink-3) !important; }

/* ── Nút "Hẹn giờ gọi lại" (link nhỏ) ── */
.ah-modal .ah-modal-more { color: var(--pop-ink-3); border-bottom-color: var(--pop-line-soft); }
.ah-modal .ah-modal-more:hover { color: var(--pop-ink); border-bottom-color: var(--pop-ink-3); }

/* ── Nút chính, biến thể B vát sáng cong mặt (đồng bộ .qt-btn) ── */
.ah-modal .ah-modal-cta {
  border: 0; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .6px; font-weight: 600;
  background: linear-gradient(180deg, var(--pop-accent-hi) 0%, var(--pop-accent) 45%, var(--pop-accent-lo) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.62), inset 0 -1px 2px rgba(0,0,0,.16),
              0 1px 2px rgba(26,28,45,.18), 0 9px 20px -8px rgba(255,152,0,.42);
  color: #2b1800 !important;
  transition: filter .2s ease, transform .18s ease, box-shadow .18s ease;
}
.ah-modal .ah-modal-cta:hover {
  filter: brightness(1.06); transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.68), inset 0 -1px 2px rgba(0,0,0,.16),
              0 2px 4px rgba(26,28,45,.2), 0 13px 26px -8px rgba(255,152,0,.5);
}
.ah-modal .ah-modal-cta:active { transform: translateY(1px); filter: brightness(.97); }
.ah-modal .ah-modal-cta:disabled { opacity: .6; filter: none; transform: none; }
.ah-modal .ah-modal-spinner { border-color: rgba(43,24,0,.3); border-top-color: #2b1800; }

/* ── Divider "hoặc" ── */
.ah-modal .ah-modal-or { color: var(--pop-ink-3) !important; }
.ah-modal .ah-modal-or:before,
.ah-modal .ah-modal-or:after { background: var(--pop-line-soft); }

/* ── Nút phụ (Zalo / Gọi) - ghost mềm ── */
.ah-modal .ah-modal-zalo,
.ah-modal-call {
  border: 0; border-radius: 999px;
  background: linear-gradient(180deg, #fff 0%, var(--pop-surface-low) 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 2px rgba(26,28,45,.06), var(--pop-sh-1);
  color: var(--pop-ink);
  transition: transform .18s ease, box-shadow .18s ease, color .2s ease;
}
.ah-modal .ah-modal-zalo:hover,
.ah-modal-call:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 #fff, var(--pop-sh-2);
  color: var(--pop-ink) !important;
}

/* ── Thông báo lỗi ── */
.ah-modal .ah-modal-err { color: #b3261e; background: #fdecea; border: 0; border-radius: 12px; padding: 8px 12px; }

/* ── Nhãn nhỏ "Ước tính: X" (UocLuongTool) ── */
.ah-modal-step {
  background: var(--pop-accent-wash); color: var(--pop-accent-text) !important;
  border-radius: 999px; border: 0;
}

/* ── Hẹn gọi lại: ghi chú xác nhận ── */
.ah-modal .ah-modal-bk-note { color: var(--pop-accent-text); }