@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&family=Quicksand:wght@400;500;600;700&display=swap');

:root {
  --pink-bg: #fff5fc;
  --pink-degree: 8;
  --pink: #ff6f95;
  --pink-strong: #ec3c6e;
  --pink-soft: #ff8fb5;
  --pink-border: rgba(255, 214, 235, .75);
  --pink-card: rgba(255, 255, 255, .88);
  --pink-shadow: rgba(255, 132, 170, .14);
  --pink-violet: #b06c95;
  --pink-ink: #5f2440;
  --pink-muted: #7b5069;
  --pink-chip: rgba(255, 132, 170, .08);
}

body {
  color: var(--pink-ink);
  font-family: "Quicksand", "Inter", "Be Vietnam Pro", system-ui, sans-serif;
  background-color: var(--pink-bg);
  background-image:
    radial-gradient(circle at 12% 20%, rgba(255, 206, 225, .28), transparent 28%),
    radial-gradient(circle at 87% 12%, rgba(255, 214, 240, .26), transparent 32%),
    radial-gradient(circle at 60% 80%, rgba(255, 168, 203, .18), transparent 30%),
    linear-gradient(180deg, #fff7fd 0%, rgba(255, 232, 245, .98) 44%, rgba(255, 224, 239, .95) 100%);
  letter-spacing: -.012em;
}

h1, h2, h3, h4, h5, h6,
.font-display {
  font-family: "Baloo 2", "Quicksand", "Inter", sans-serif;
  letter-spacing: -.032em;
  color: var(--pink-strong);
}

p, li, dd, dt,
.text-slate-800,
.text-slate-700,
.text-slate-600,
.text-slate-500,
.text-gray-800,
.text-gray-700,
.text-gray-600,
.text-gray-500,
.text-text,
.text-text-muted {
  color: var(--pink-muted);
}

a, button, .nav-item, a.custom-linkish {
  color: var(--pink);
}

a:not([class~="text-white"]):hover,
button:not([class~="text-white"]):hover,
a:not([class~="text-white"]):focus {
  color: var(--pink-strong);
}

[class*="text-amber-"],
[class*="text-yellow-"],
[class*="text-orange-"] {
  color: var(--pink-strong);
}

/* Chỉ khớp utility nền GỐC (bg-accent, bg-amber-500, from-amber-400...).
   Không khớp token biến thể như hover:bg-accent, after:bg-accent,
   group-hover:from-amber-*... Trước đây selector substring khớp cả các
   token này nên nav/button bị tô khối hồng đặc + chữ trắng. */
[class^="bg-amber-"], [class*=" bg-amber-"],
[class^="bg-yellow-"], [class*=" bg-yellow-"],
[class^="bg-orange-"], [class*=" bg-orange-"],
[class^="from-amber-"], [class*=" from-amber-"],
[class^="bg-accent"], [class*=" bg-accent"],
[class^="from-yellow-"], [class*=" from-yellow-"] {
  background-color: transparent;
  background-image: linear-gradient(120deg, #ffb6d2 0%, #ff80ab 48%, #f06292 100%);
  border-color: transparent;
  color: #fff;
}

/* Thanh điều hướng desktop: luôn trong suốt, không bị biến thành khối hồng
   chỉ vì có class biến thể after:bg-accent / hover:after:bg-accent/60. */
header nav > a,
nav.floating-bar .nav-item {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

header nav > a {
  color: var(--pink-muted) !important;
}

header nav > a:hover,
header nav > a:focus,
header nav > a.text-accent,
nav.floating-bar .nav-item:hover,
nav.floating-bar .nav-item.active {
  color: var(--pink-strong) !important;
}

[class*="border-amber-"], [class*="border-yellow-"],
[class*="border-orange-"], [class*="border-accent"] {
  border-color: var(--pink-border);
}

[class~="text-white"],
[class~="text-white/70"] {
  color: #fffaf7;
}

[class~="bg-white"],
[class~="bg-white/90"],
[class~="bg-white/95"],
[class~="bg-white/70"],
[class~="bg-secondary"],
[class~="bg-secondary/30"],
[class~="glass-panel"] {
  background-color: var(--pink-card);
  border-color: var(--pink-border);
  box-shadow: 0 24px 60px var(--pink-shadow);
}

[class*="rounded-3xl"],
[class*="rounded-2xl"],
[class*="rounded-xl"] {
  border-radius: 28px;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .22;
  background-image:
    radial-gradient(circle at 16% 24%, rgba(255, 214, 234, .35), transparent 22%),
    radial-gradient(circle at 73% 12%, rgba(255, 188, 220, .25), transparent 24%),
    radial-gradient(circle at 52% 68%, rgba(255, 150, 190, .2), transparent 24%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  z-index: 1;
  background-image: radial-gradient(circle at 10% 8%, rgba(255, 176, 210, .45), transparent 28%),
                    radial-gradient(circle at 82% 18%, rgba(255, 197, 226, .4), transparent 25%);
}

header,
footer,
nav.floating-bar {
  background-color: rgba(255, 250, 252, .9) !important;
  backdrop-filter: blur(18px);
  border-color: var(--pink-border);
}

*,
*::before,
*::after {
  transition: background-color .28s ease, color .28s ease, border-color .28s ease, box-shadow .28s ease;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Cute bubble motion */
@keyframes pinkFloat {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-10px) scale(1.02); }
  100% { transform: translateY(0) scale(1); }
}

body::after {
  animation: pinkFloat 8s ease-in-out infinite;
}

@media (max-width: 767px) {
  body { font-size: 15px; letter-spacing: -0.008em; }
  [class*="rounded-3xl"], [class*="rounded-2xl"], [class*="rounded-xl"] { border-radius: 24px; }
  [class^="bg-amber-"], [class*=" bg-amber-"],
  [class^="bg-accent"], [class*=" bg-accent"],
  [class^="from-amber-"], [class*=" from-amber-"],
  [class^="from-yellow-"], [class*=" from-yellow-"] {
    background-image: linear-gradient(120deg, #ffc2dd 0%, #ff84b2 48%, #ef5f88 100%);
  }
}

/* ===== Fixes: arbitrary gold/cream utilities ===== */
[class~="bg-[#fffdc4]"],
[class~="bg-[#fffdc4]/95"],
[class~="bg-[#fffdc4]/50"],
[class~="bg-[#fff799]"] {
  background-color: #fff5fb !important;
}

[class~="bg-[#fbba00]"] {
  background-color: transparent !important;
  background-image: linear-gradient(120deg, #ffb6d2 0%, #ff80ab 48%, #f06292 100%) !important;
  color: #fffaf7 !important;
}

[class~="bg-[#fbba00]"] * {
  color: #fffaf7 !important;
}

[class~="bg-[#fbba00]/15"] {
  background-color: rgba(255, 132, 170, .14) !important;
}

[class*="text-[#854d0e]"],
[class*="text-[#713f12]"],
[class*="text-[#f59e0b]"],
[class*="text-[#fbba00]"] {
  color: var(--pink-strong) !important;
}

[class*="border-[#fde047]"],
[class*="border-[#f7e8a3]"] {
  border-color: var(--pink-border) !important;
}

/* ===== Mobile drawer ===== */
.fixed.top-0.left-0.h-full.w-72 {
  background-color: #fff5fb !important;
}

.fixed.top-0.left-0.h-full.w-72 > div:first-child {
  background-image: linear-gradient(120deg, #ffb6d2 0%, #ff80ab 48%, #f06292 100%);
  color: #fffaf7;
}

.fixed.top-0.left-0.h-full.w-72 > div:first-child svg {
  color: #fffaf7;
}

/* ===== Shin-chan & Doraemon chase each other around the page =====
   The overlay is non-interactive. site-effects.js moves the two
   runners, using visible headings/text as places to sit and hide. */
#mascot-chase {
  position: fixed;
  inset: 0;
  z-index: 35;
  overflow: hidden;
  pointer-events: none;
}

.mascot-runner {
  --mascot-dir: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 76px;
  height: 76px;
  pointer-events: none;
  opacity: 1;
  will-change: transform, opacity;
  transition: opacity .22s ease;
  filter: drop-shadow(0 9px 13px rgba(236, 60, 110, .22));
  transform: translate3d(-200px, -200px, 0);
}

.mascot-runner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  transform: scaleX(var(--mascot-dir)) translateY(0) scaleY(1);
  transform-origin: 50% 100%;
  transition: transform .2s ease, clip-path .18s ease;
}

.mascot-runner.is-sitting img {
  transform: scaleX(var(--mascot-dir)) translateY(3px) scaleY(.9);
}

.mascot-runner.is-peeking img {
  clip-path: inset(0 0 43% 0);
}

.mascot-runner.is-ducking {
  opacity: 0;
}

/* Leo lên chữ: bám vào cạnh chữ, bò lên đỉnh rồi ngồi trên nét chữ. */
.mascot-runner.is-climbing img {
  transform-origin: 50% 100%;
  animation: mascotClimbWiggle .42s ease-in-out infinite alternate;
}

.mascot-runner.is-perched img {
  transform: scaleX(var(--mascot-dir)) translateY(0) scaleY(.96);
}

@keyframes mascotClimbWiggle {
  from {
    transform: scaleX(var(--mascot-dir)) rotate(-7deg) scale(.96);
  }
  to {
    transform: scaleX(var(--mascot-dir)) rotate(7deg) scale(1);
  }
}

/* Keep the hero wordmark above the runners while they hide behind it.
   site-effects.js temporarily raises the wordmark's stacking parent. */
#hero.mascot-lift,
#hero .mascot-lift {
  z-index: 36 !important;
}

@media (min-width: 641px) and (max-width: 1023px) {
  .mascot-runner {
    width: 66px;
    height: 66px;
  }
}

@media (max-width: 640px) {
  .mascot-runner {
    width: 54px;
    height: 54px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #mascot-chase { display: none !important; }
}

/* =========================================================
   FIX GIAO DIỆN 2026-10-20
   - Bỏ ảnh nền điện thoại fixed bị tràn qua mọi section
   - Bỏ lớp phủ hồng fixed làm mờ toàn bộ nội dung
   - Sửa màu chữ gradient bị nhạt, tăng độ tương phản
   - Gọn lại logo header và các widget nổi trên mobile
   ========================================================= */

html { color-scheme: light; }

/* 1. Ảnh nền hero cũ được gắn fixed nên hiện xuyên qua cả trang.
      Ẩn lớp nền + lớp phủ để các section dùng nền hồng của body. */
body > div.fixed.inset-0[style*="banner-hero-new.webp"],
body > div.fixed.inset-0[class*="z-[-1]"] {
  display: none !important;
}

/* 2. Hai lớp radial-gradient fixed của theme cũ nằm TRÊN nội dung
      (z-index 1) khiến chữ bị mờ nhạt. Bỏ hẳn để chữ sắc nét. */
body::before,
body::after {
  display: none !important;
  animation: none !important;
}

/* 3. Logo header: icon + chữ ký đang quá nhỏ, khó nhận diện. */
header a[href="/"] img[src*="logo-locket"] {
  width: 40px !important;
  height: 40px !important;
  padding: 2px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(255, 143, 181, .45);
  filter: drop-shadow(0 4px 10px rgba(255, 111, 149, .32));
}

header a[href="/"] img[src*="logo-chuky"] {
  display: none !important;
}

header a[href="/"]::after {
  content: "Locket Gold";
  font-family: "Baloo 2", "Quicksand", sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--pink-strong);
  white-space: nowrap;
}

/* 3b. Các điểm nhấn màu vàng cũ (text-accent / locket-gold-text) chuyển sang hồng. */
.text-accent,
.locket-gold-text {
  color: var(--pink-strong) !important;
}

.locket-gold-text {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

/* 4. Chữ gradient vàng cũ rất nhạt trên nền hồng. Dùng gradient hồng đậm. */
[class*="bg-clip-text"][class*="from-amber"],
[class*="bg-clip-text"][class*="from-yellow"],
[class*="bg-clip-text"][class*="from-orange"],
[class*="bg-clip-text"][class*="from-accent"] {
  background-image: linear-gradient(100deg, #ec3c6e 0%, #f06292 48%, #b3124d 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* 5. Phân cấp màu cho hero: tên thương hiệu hồng đậm, dòng mô tả màu mực. */
#hero h1 > span:first-child {
  color: var(--pink-strong) !important;
  text-shadow: 0 6px 22px rgba(236, 60, 110, .16);
}

#hero h1 > span.block {
  color: var(--pink-ink) !important;
}

/* 6. Tablet/mobile: ẩn bớt sticker & popup nổi đang che nội dung. */
@media (max-width: 1023px) {
  #flying-bee-wrapper,
  #fake-purchase-popup,
  #zalo-label {
    display: none !important;
  }

  #zalo-menu-container {
    bottom: 58px !important;
    right: 12px !important;
  }
}

/* 7. Dark mode: giữ tông hồng nhưng dùng nền tối để chữ luôn đọc được. */
html.dark { color-scheme: dark; }

html.dark body {
  color: #f6d9e5;
  background-color: #190e15;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255, 111, 149, .14), transparent 30%),
    radial-gradient(circle at 86% 10%, rgba(236, 60, 110, .12), transparent 34%),
    radial-gradient(circle at 55% 82%, rgba(176, 108, 149, .12), transparent 32%),
    linear-gradient(180deg, #1d1018 0%, #170c13 55%, #12090f 100%);
}

html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6 {
  color: #ffa8c6 !important;
}

html.dark p,
html.dark li,
html.dark dd,
html.dark dt,
html.dark .text-text,
html.dark .text-text-muted,
html.dark [class*="text-slate-"],
html.dark [class*="text-gray-"],
html.dark [class*="text-zinc-"] {
  color: #e5bdcf;
}

html.dark [class~="bg-white"],
html.dark [class*="bg-white/"],
html.dark [class~="bg-secondary"],
html.dark [class~="glass-panel"] {
  background-color: rgba(40, 22, 32, .92);
  border-color: rgba(255, 143, 181, .24);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .34);
}

html.dark header,
html.dark footer {
  background-color: rgba(27, 14, 21, .94) !important;
  border-color: rgba(255, 143, 181, .22) !important;
}

html.dark [class~="text-white"] {
  color: #fff7fb;
}

html.dark #hero h1 > span.block {
  color: #ffd7e5 !important;
}

/* =========================================================
   FIX GIAO DIỆN 2026-10-20 (đợt 2)
   - Nền hồng gradient đặt trên <html> để không bị rule
     "body, main, section { background: transparent }" vô hiệu.
   - Badge/khung nền vàng nhạt không còn bị đổi thành nút gradient.
   - Gạch chân vàng chuyển sang hồng.
   - Ẩn cụm Zalo nổi bị cắt ở đáy màn hình mobile.
   ========================================================= */

html {
  background-color: var(--pink-bg) !important;
  background-image:
    radial-gradient(circle at 12% 20%, rgba(255, 206, 225, .34), transparent 28%),
    radial-gradient(circle at 87% 12%, rgba(255, 214, 240, .30), transparent 32%),
    radial-gradient(circle at 60% 80%, rgba(255, 168, 203, .22), transparent 30%),
    linear-gradient(180deg, #fff7fd 0%, #ffeaf5 44%, #ffddec 100%) !important;
}

body {
  background-color: transparent !important;
  background-image: none !important;
}

html.dark {
  background-color: #12090f !important;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255, 111, 149, .16), transparent 30%),
    radial-gradient(circle at 86% 10%, rgba(236, 60, 110, .14), transparent 34%),
    radial-gradient(circle at 55% 82%, rgba(176, 108, 149, .14), transparent 32%),
    linear-gradient(180deg, #1d1018 0%, #170c13 55%, #12090f 100%) !important;
}

/* Nền vàng nhạt chỉ là badge/khung phụ, không phải nút CTA. */
[class^="bg-amber-50"], [class*=" bg-amber-50"],
[class^="bg-amber-100"], [class*=" bg-amber-100"],
[class^="bg-yellow-50"], [class*=" bg-yellow-50"],
[class^="bg-yellow-100"], [class*=" bg-yellow-100"] {
  background-color: rgba(255, 132, 170, .12) !important;
  background-image: none !important;
  color: var(--pink-strong) !important;
  border-color: var(--pink-border) !important;
}

html.dark [class^="bg-amber-50"], html.dark [class*=" bg-amber-50"],
html.dark [class^="bg-amber-100"], html.dark [class*=" bg-amber-100"],
html.dark [class^="bg-yellow-50"], html.dark [class*=" bg-yellow-50"],
html.dark [class^="bg-yellow-100"], html.dark [class*=" bg-yellow-100"] {
  background-color: rgba(255, 143, 181, .12) !important;
  color: #ffc2d8 !important;
}

[class*="decoration-amber-"],
[class*="decoration-yellow-"] {
  text-decoration-color: var(--pink) !important;
}

@media (max-width: 1023px) {
  #zalo-menu-container,
  #scrollToTopBtn,
  .polaroid.absolute {
    display: none !important;
  }
}

/* ===== Trang Đăng nhập / Đăng ký ===== */
#authSliderPill {
  background-color: transparent !important;
  background-image: linear-gradient(120deg, #ffb6d2 0%, #ff80ab 55%, #f06292 100%) !important;
  box-shadow: 0 6px 16px rgba(236, 60, 110, .24) !important;
}

#textLogin.font-extrabold,
#textRegister.font-extrabold {
  color: #fff !important;
}

[class^="bg-slate-100/80"], [class*=" bg-slate-100/80"] {
  background-color: rgba(255, 238, 246, .9) !important;
  border-color: var(--pink-border) !important;
}

.rgb-border-box {
  box-shadow: 0 8px 22px rgba(236, 60, 110, .12) !important;
}

.rgb-border-box::before {
  background: conic-gradient(from 0deg, #ffd1e2, #ff8fb5, #ffc2dd, #ec3c6e, #ffd1e2) !important;
  animation-duration: 6s !important;
}

.rgb-border-inner {
  background-color: #fff4f9 !important;
}

[class^="bg-[#fefad9]"], [class*=" bg-[#fefad9]"],
[class^="bg-[#fef4b3]"], [class*=" bg-[#fef4b3]"] {
  background-color: transparent !important;
  background-image: linear-gradient(120deg, #ff9ec3 0%, #ff6f95 45%, #e83367 100%) !important;
  color: #fff !important;
  box-shadow: 0 12px 26px rgba(236, 60, 110, .26) !important;
}

input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  background-color: rgba(255, 255, 255, .9) !important;
  border-color: rgba(255, 143, 181, .32) !important;
  color: var(--pink-ink) !important;
}

input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus,
select:focus {
  border-color: var(--pink) !important;
  box-shadow: 0 0 0 4px rgba(255, 111, 149, .16) !important;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--pink) !important;
}

input::placeholder,
textarea::placeholder {
  color: #c18fa5 !important;
}

html.dark input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
html.dark textarea,
html.dark select {
  background-color: rgba(45, 24, 35, .94) !important;
  border-color: rgba(255, 143, 181, .26) !important;
  color: #ffe4ef !important;
}

html.dark #authSliderPill {
  background-image: linear-gradient(120deg, #c02a55 0%, #ec3c6e 55%, #ff6f95 100%) !important;
}

html.dark .rgb-border-inner {
  background-color: #2a1621 !important;
}

/* ===== Tinh chỉnh trang chủ ===== */
body {
  font-family: "Quicksand", "Inter", "Be Vietnam Pro", system-ui, sans-serif !important;
}

#hero h1 > span:first-child,
#hero h1 .bounce-letter {
  filter: drop-shadow(0 4px 14px rgba(236, 60, 110, .20)) !important;
}

/* Chấm trang trí nền cũ đang màu vàng, đổi sang hồng. */
div[class*="opacity-[0.12]"][class*="pointer-events-none"] {
  background-image: radial-gradient(rgba(236, 60, 110, .55) 1.5px, transparent 1.5px) !important;
}

/* Hai quầng sáng amber/orange cũ: giữ độ trong suốt thay vì gradient đặc. */
[class^="bg-amber-300/"], [class*=" bg-amber-300/"],
[class^="bg-orange-300/"], [class*=" bg-orange-300/"] {
  background-color: transparent !important;
  background-image: radial-gradient(circle, rgba(255, 143, 181, .28) 0%, rgba(255, 143, 181, 0) 70%) !important;
}

/* Icon logo trên trang đăng nhập/đăng ký dễ nhìn hơn. */
.text-center > img[src*="logo-locket"] {
  background: #fff1f8 !important;
  border: 2px solid #ffd6e9;
  border-radius: 50%;
  padding: 4px;
  box-shadow: 0 6px 16px rgba(236, 60, 110, .18);
  width: 48px !important;
  height: 48px !important;
}

/* Nội dung cảnh báo nhỏ cần đậm hơn một chút. */
.rgb-border-inner {
  color: #a51f4b !important;
  font-size: 12.5px !important;
  line-height: 1.55 !important;
}

.rgb-border-inner strong {
  color: #8e123c !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
}

.rgb-border-inner .leading-relaxed {
  font-size: 12px !important;
}

/* ===== Tinh chỉnh bổ sung ===== */

/* Gradient nền rất nhạt của theme vàng cũ không nên biến thành khối hồng đặc. */
[class^="from-amber-500/"], [class*=" from-amber-500/"],
[class^="from-amber-400/"], [class*=" from-amber-400/"],
[class^="from-yellow-500/"], [class*=" from-yellow-500/"],
[class^="from-yellow-400/"], [class*=" from-yellow-400/"],
[class^="from-orange-500/"], [class*=" from-orange-500/"],
[class^="from-orange-400/"], [class*=" from-orange-400/"] {
  background-image: linear-gradient(135deg, rgba(255, 143, 181, .16) 0%, rgba(255, 143, 181, 0) 72%) !important;
}

/* Dropdown thông báo chỉ mở khi rê chuột hoặc focus vào chuông,
   tránh trường hợp Alpine chưa kịp ẩn làm panel che nội dung. */
header .relative > div[x-show][class*="w-[340px]"] {
  display: none !important;
}

header .relative:hover > div[x-show][class*="w-[340px]"],
header .relative:focus-within > div[x-show][class*="w-[340px]"] {
  display: block !important;
}

/* Bảng dữ liệu theo tông hồng. */
table {
  border-color: rgba(255, 143, 181, .35) !important;
}

thead {
  background-color: #fff1f8 !important;
  color: var(--pink-strong) !important;
}

tbody tr:nth-child(even) {
  background-color: rgba(255, 132, 170, .06) !important;
}

html.dark thead {
  background-color: #2a1621 !important;
  color: #ffc2d8 !important;
}

html.dark tbody tr:nth-child(even) {
  background-color: rgba(255, 143, 181, .08) !important;
}

/* Nút trong modal chúc mừng / dialog thanh toán: đồng bộ hồng thay vì vàng. */
#congratsBtn {
  background: linear-gradient(135deg, #ff8fb5 0%, #ec3c6e 58%, #d92b60 100%) !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(236, 60, 110, .28) !important;
}

#congratsBtn:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
}

#lgDialog .lg-btn-primary {
  background: linear-gradient(135deg, #ff8fb5 0%, #ec3c6e 58%, #d92b60 100%) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(236, 60, 110, .28) !important;
}

#lgDialog .lg-btn-primary:hover {
  filter: brightness(1.04);
}

/* Focus ring hồng cho các form auth (trước đây dùng vàng). */
body.pink-page.auth-page input:focus,
body.pink-page.auth-page select:focus,
body.pink-page.auth-page textarea:focus {
  border-color: #ec3c6e !important;
  box-shadow: 0 0 0 4px rgba(236, 60, 110, .13) !important;
  background-color: #fff !important;
}