/* ============================================================
   TAILOC-EFFECT.CSS — Luxury Design System v2
   © 2026 Thờ Cúng Tài Lộc · thocungtailoc.com
   ============================================================ */

/* ── LUXURY FONT ── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;900&display=swap');

/* ── CSS VARIABLES ── */
:root {
  --gold-1: #92400E;
  --gold-2: #CA8A04;
  --gold-3: #F59E0B;
  --gold-4: #FDE68A;
  --gold-5: #FFFBEB;
  --red-deep: #3D0000;
  --red-mid:  #7C1D1D;
  --shimmer: 6s;
  --ease-luxury: cubic-bezier(.22,1,.36,1);
}

/* ══════════════════════════════════════════
   A. TYPOGRAPHY — SANG TRỌNG
══════════════════════════════════════════ */

/* Heading dùng Playfair Display */
h1, h2 {
  font-family: 'Playfair Display', 'Be Vietnam Pro', serif !important;
  letter-spacing: .02em;
}

/* Gold foil — chỉ dòng ĐẦU của h1 */
.hero-bg h1 > span:first-child,
.hero-bg h1 > .text-white:first-child {
  background: linear-gradient(
    105deg,
    #92400E 0%, #CA8A04 18%, #FDE68A 36%,
    #FFFBEB 50%, #FDE68A 64%, #CA8A04 82%, #92400E 100%
  );
  background-size: 240% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: foilSweep 8s linear infinite;
  display: block;
  padding: .04em .08em .1em;
}

/* Dòng THỨ HAI — VÀNG ÓNG ÁNH italic */
.hero-bg h1 > span:last-child,
.hero-bg h1 > .text-yellow-300 {
  -webkit-text-fill-color: #FFD700 !important;
  background: none !important;
  background-clip: initial !important;
  -webkit-background-clip: initial !important;
  color: #FFD700 !important;
  font-style: italic;
  font-weight: 700 !important;
  font-family: 'Playfair Display', serif !important;
  letter-spacing: .06em;
  text-shadow:
    0 0 20px rgba(255,200,0,.8),
    0 0 6px rgba(255,160,0,.6),
    0 1px 3px rgba(80,30,0,.9);
  display: block;
  animation: goldGlow 2.5s ease-in-out infinite !important;
  filter: none;
  opacity: 1;
  padding: .02em .06em .08em;
}

@keyframes goldGlow {
  0%,100% { text-shadow: 0 0 14px rgba(255,200,0,.6), 0 0 4px rgba(255,160,0,.4), 0 1px 3px rgba(80,30,0,.9); filter: brightness(.9); }
  50%      { text-shadow: 0 0 28px rgba(255,215,0,.95), 0 0 10px rgba(255,180,0,.7), 0 1px 3px rgba(80,30,0,.9); filter: brightness(1.2); }
}

@keyframes foilSweep {
  0%   { background-position: 0% center; }
  100% { background-position: 240% center; }
}

/* Section h2 — subtle gold underline */
section h2 {
  position: relative;
  display: block;
  text-align: center;
}
section h2::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 55%; height: 2px;
  background: linear-gradient(90deg, transparent, #CA8A04 30%, #FDE68A 50%, #CA8A04 70%, transparent);
  border-radius: 2px;
  opacity: .7;
}

/* ══════════════════════════════════════════
   B. BODY — NỀN SANG TRỌNG
══════════════════════════════════════════ */
body {
  background-color: #FFFBF0;
  background-image:
    radial-gradient(ellipse 140% 60% at 50% -5%,  rgba(202,138,4,.05) 0%, transparent 55%),
    radial-gradient(ellipse 80%  80% at 0%   100%, rgba(124,29,29,.04) 0%, transparent 50%),
    radial-gradient(ellipse 60%  60% at 100% 100%, rgba(202,138,4,.03) 0%, transparent 50%),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23CA8A04' fill-opacity='0.018'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Section separator — gold line (đồng bộ tất cả pages) */
section + section {
  border-top: 1px solid rgba(202,138,4,.22);
}

/* ══════════════════════════════════════════
   C0. CUSTOM COLOR UTILITIES — đồng bộ Blog pages (local tailwind.css không có primary)
══════════════════════════════════════════ */
.text-primary        { color: #8B0000 !important; }
.hover\:text-primary:hover { color: #8B0000 !important; }
.bg-primary          { background-color: #8B0000 !important; }
.hover\:bg-primary:hover   { background-color: #8B0000 !important; }
.border-primary      { border-color: #8B0000 !important; }
.text-gold           { color: #CA8A04 !important; }
.bg-gold             { background-color: #CA8A04 !important; }
.text-cream          { color: #FFFBF0 !important; }
.bg-cream            { background-color: #FFFBF0 !important; }
.bg-red-50           { background-color: #fff1f2 !important; }
/* font-black fallback cho blog pages */
.font-black          { font-weight: 900 !important; }

/* ══════════════════════════════════════════
   C. NAV — GLASS LUXURY
══════════════════════════════════════════ */
nav {
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid rgba(202,138,4,.12);
  box-shadow: 0 1px 20px rgba(0,0,0,.06), 0 1px 4px rgba(202,138,4,.08) !important;
  transition: box-shadow .3s ease;
}

/* ══════════════════════════════════════════
   D. GOLD BUTTON — LUXURY SHIMMER
══════════════════════════════════════════ */
.gold-gradient {
  background: linear-gradient(90deg,
    #78350F 0%, #92400E 8%,
    #CA8A04 25%, #F59E0B 42%,
    #FDE68A 50%,
    #F59E0B 58%, #CA8A04 75%,
    #92400E 92%, #78350F 100%);
  background-size: 280% auto;
  animation: goldSweep 7s linear infinite;
  box-shadow:
    0 4px 16px rgba(202,138,4,.5),
    0 1px 4px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.2);
  border: none !important;
  transition: transform .2s var(--ease-luxury), box-shadow .2s ease;
  position: relative;
  overflow: hidden;
}
.gold-gradient::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  animation: btnShine 8s ease-in-out infinite;
  pointer-events: none;
}
.gold-gradient:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 8px 28px rgba(202,138,4,.65), 0 2px 8px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.2);
}
@keyframes goldSweep {
  0%   { background-position: 0% center; }
  100% { background-position: 280% center; }
}
@keyframes btnShine {
  0%,80% { left: -100%; }
  90%    { left: 120%; }
  100%   { left: 120%; }
}

/* ══════════════════════════════════════════
   E. HERO — LUXURY OVERLAY
══════════════════════════════════════════ */
.hero-bg {
  position: relative;
  overflow: hidden;
}
/* Ánh vàng từ trên xuống */
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% -10%, rgba(251,191,36,.10) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 15% 50%,  rgba(202,138,4,.06) 0%, transparent 50%),
    radial-gradient(ellipse 40% 40% at 85% 60%,  rgba(202,138,4,.06) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}
/* Sparkle ✦ nổi */
.hero-bg::before {
  content: '✦   ✦   ✦   ✦   ✦   ✦';
  position: absolute;
  top: 12%; left: 0; right: 0;
  text-align: center;
  font-size: .6rem;
  color: rgba(253,230,138,.2);
  letter-spacing: 2.5rem;
  pointer-events: none;
  z-index: 0;
  animation: heroSparkle 16s ease-in-out infinite alternate;
}
@keyframes heroSparkle {
  0%   { opacity: .1; transform: translateY(0) scaleX(1); }
  50%  { opacity: .25; }
  100% { opacity: .12; transform: translateY(-18px) scaleX(1.05); }
}

/* Hero price box — glass luxury */
.hero-bg .bg-white\/10 {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(253,230,138,.35) !important;
  box-shadow:
    0 8px 32px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(253,230,138,.2),
    0 0 40px rgba(202,138,4,.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ══════════════════════════════════════════
   F. PRICE — GOLD GLOW
══════════════════════════════════════════ */
.text-yellow-300,
[style*="color:#FDE68A"],
[style*="color: #FDE68A"] {
  text-shadow:
    0 0 20px rgba(253,230,138,.6),
    0 0 8px  rgba(202,138,4,.4),
    0 0 2px  rgba(202,138,4,.2);
}
[style*="text-decoration:line-through"] {
  opacity: .5;
}

/* ══════════════════════════════════════════
   G. PRODUCT CARDS — GRADIENT BORDER + LIFT
══════════════════════════════════════════ */
[style*="border-radius:16px"][style*="border:1px solid #F0E6DC"],
[style*="border-radius:16px"][style*="border: 1px solid #F0E6DC"] {
  position: relative;
  transition: transform .28s var(--ease-luxury), box-shadow .28s ease;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
}
[style*="border-radius:16px"][style*="border:1px solid #F0E6DC"]::before,
[style*="border-radius:16px"][style*="border: 1px solid #F0E6DC"]::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 17px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(202,138,4,.0), rgba(202,138,4,.0));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: background .3s ease;
  pointer-events: none;
}
[style*="border-radius:16px"][style*="border:1px solid #F0E6DC"]:hover,
[style*="border-radius:16px"][style*="border: 1px solid #F0E6DC"]:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(202,138,4,.16), 0 4px 12px rgba(0,0,0,.08) !important;
}
[style*="border-radius:16px"][style*="border:1px solid #F0E6DC"]:hover::before,
[style*="border-radius:16px"][style*="border: 1px solid #F0E6DC"]:hover::before {
  background: linear-gradient(135deg, #CA8A04, #FDE68A, #CA8A04);
}

/* ══════════════════════════════════════════
   H. ORDER CARD — LUXURY RED BAR
══════════════════════════════════════════ */
[style*="background:linear-gradient(135deg,#7C1D1D,#991B1B)"],
[style*="background: linear-gradient(135deg,#7C1D1D,#991B1B)"] {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #4A0808 0%, #7C1D1D 35%, #991B1B 65%, #7C1D1D 100%) !important;
}
[style*="background:linear-gradient(135deg,#7C1D1D,#991B1B)"]::after,
[style*="background: linear-gradient(135deg,#7C1D1D,#991B1B)"]::after {
  content: '';
  position: absolute;
  top: 0; left: -80%; width: 55%; height: 100%;
  background: linear-gradient(90deg,
    transparent 0%, rgba(253,230,138,.15) 40%,
    rgba(255,255,255,.08) 50%,
    rgba(253,230,138,.15) 60%, transparent 100%);
  animation: luxShine 9s ease-in-out infinite 1s;
  pointer-events: none;
}
@keyframes luxShine {
  0%,20% { left: -80%; }
  70%    { left: 120%; }
  100%   { left: 120%; }
}

/* ══════════════════════════════════════════
   I. GIFT BOX — DARK LUXURY
══════════════════════════════════════════ */
[style*="background:linear-gradient(135deg,#3D0000"] {
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.3), inset 0 1px 0 rgba(202,138,4,.2) !important;
}
[style*="background:linear-gradient(135deg,#3D0000"]::after {
  content: '';
  position: absolute;
  top: -60%; left: -60%;
  width: 220%; height: 220%;
  background: conic-gradient(
    from 180deg at 50% 50%,
    transparent 0deg,
    rgba(202,138,4,.05) 45deg,
    transparent 90deg,
    rgba(253,230,138,.04) 135deg,
    transparent 180deg,
    rgba(202,138,4,.05) 225deg,
    transparent 270deg,
    rgba(253,230,138,.04) 315deg,
    transparent 360deg
  );
  animation: giftRotate 35s linear infinite;
  pointer-events: none;
}
@keyframes giftRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ══════════════════════════════════════════
   J. SALE BADGES — PULSE + SHIMMER
══════════════════════════════════════════ */
[style*="background:#DC2626"][style*="border-radius:6px"] {
  animation: redPulse 4.5s ease-in-out infinite;
}
@keyframes redPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,.5); }
  55%       { box-shadow: 0 0 0 7px rgba(220,38,38,.0); }
}

span[style*="background:linear-gradient(135deg,#DC2626,#EF4444)"] {
  background: linear-gradient(135deg, #B91C1C 0%, #DC2626 40%, #EF4444 50%, #DC2626 60%, #B91C1C 100%) !important;
  background-size: 220% auto !important;
  animation: saleShimmer 5s linear infinite !important;
  box-shadow: 0 3px 14px rgba(220,38,38,.45) !important;
}
@keyframes saleShimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 220% center; }
}

/* ══════════════════════════════════════════
   K. ZALO BUTTON — LUXURY GLOW
══════════════════════════════════════════ */
#btn-zalo-order:not([disabled]) {
  background: linear-gradient(135deg, #0050CC, #0068FF, #0080FF) !important;
  box-shadow: 0 5px 20px rgba(0,104,255,.4), inset 0 1px 0 rgba(255,255,255,.2);
  animation: zaloBreath 4s ease-in-out infinite;
  transition: transform .2s var(--ease-luxury);
}
#btn-zalo-order:not([disabled]):hover {
  transform: translateY(-2px) scale(1.02);
}
@keyframes zaloBreath {
  0%,100% { box-shadow: 0 5px 20px rgba(0,104,255,.4), inset 0 1px 0 rgba(255,255,255,.2); }
  50%      { box-shadow: 0 8px 32px rgba(0,104,255,.65), inset 0 1px 0 rgba(255,255,255,.2); }
}

/* ══════════════════════════════════════════
   L. IMAGES — PREMIUM ZOOM + OVERLAY
══════════════════════════════════════════ */
.rounded-2xl, .rounded-xl {
  overflow: hidden;
}
.rounded-2xl img, .rounded-xl img {
  transition: transform .5s var(--ease-luxury), filter .5s ease;
}
.rounded-2xl:hover img, .rounded-xl:hover img {
  transform: scale(1.04);
  filter: brightness(1.04) saturate(1.08);
}

/* ══════════════════════════════════════════
   M. CARDS — HOVER LIFT (Blog, Promo)
══════════════════════════════════════════ */
a.block.rounded-2xl, a.block.rounded-xl {
  transition: transform .28s var(--ease-luxury), box-shadow .28s ease;
}
a.block.rounded-2xl:hover, a.block.rounded-xl:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 42px rgba(202,138,4,.14), 0 5px 14px rgba(0,0,0,.08) !important;
}

/* Order wrapper card */
[style*="border-radius:20px"][style*="border:1px solid #EDE0D4"],
[style*="border-radius:20px"][style*="border: 1px solid #EDE0D4"] {
  box-shadow: 0 8px 40px rgba(0,0,0,.1), 0 2px 8px rgba(202,138,4,.08) !important;
  transition: box-shadow .3s ease;
}

/* ══════════════════════════════════════════
   N. INPUTS — LUXURY FOCUS
══════════════════════════════════════════ */
input, textarea, select {
  transition: border-color .2s ease, box-shadow .2s ease !important;
}
input:focus, textarea:focus, select:focus {
  border-color: #CA8A04 !important;
  box-shadow: 0 0 0 3px rgba(202,138,4,.18), 0 2px 8px rgba(202,138,4,.1) !important;
  outline: none !important;
}

/* ══════════════════════════════════════════
   O. TAGS / PILLS — GOLD HOVER
══════════════════════════════════════════ */
[style*="border-radius:99px"][style*="background:#FFF8F0"],
[style*="border-radius:99px"][style*="background: #FFF8F0"] {
  transition: all .2s var(--ease-luxury);
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
[style*="border-radius:99px"][style*="background:#FFF8F0"]:hover,
[style*="border-radius:99px"][style*="background: #FFF8F0"]:hover {
  background: linear-gradient(135deg, #FEF9C3, #FEF3C7) !important;
  border-color: #CA8A04 !important;
  color: #78350F !important;
  transform: scale(1.08) translateY(-1px);
  box-shadow: 0 3px 10px rgba(202,138,4,.2);
}

/* ══════════════════════════════════════════
   P. FADE-UP — LUXURY ENTRANCE
══════════════════════════════════════════ */
.fade-up {
  animation: luxFadeUp .85s var(--ease-luxury) both;
}
@keyframes luxFadeUp {
  0%   { opacity: 0; transform: translateY(32px) scale(.97); filter: blur(2px); }
  60%  { filter: blur(0px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0px); }
}

/* ══════════════════════════════════════════
   Q. BOTTOM STICKY BAR
══════════════════════════════════════════ */
.fixed.bottom-0 {
  box-shadow: 0 -3px 20px rgba(0,0,0,.14), 0 -1px 6px rgba(202,138,4,.12) !important;
  border-top: 1px solid rgba(202,138,4,.1) !important;
}

/* ══════════════════════════════════════════
   R. OUTLINE HERO BUTTON
══════════════════════════════════════════ */
a[class*="bg-white/10"][class*="border-white/30"] {
  transition: all .22s var(--ease-luxury) !important;
  backdrop-filter: blur(4px);
}
a[class*="bg-white/10"][class*="border-white/30"]:hover {
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(253,230,138,.6) !important;
  box-shadow: 0 0 22px rgba(253,230,138,.25), inset 0 1px 0 rgba(255,255,255,.12);
  transform: translateY(-2px);
}

/* ══════════════════════════════════════════
   S. SCROLL SMOOTHNESS
══════════════════════════════════════════ */
html {
  scroll-behavior: smooth;
}
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ══════════════════════════════════════════
   T. DECORATIVE GOLD DIVIDER
══════════════════════════════════════════ */
[style*="height:1px"][style*="background:#E7D5C0"],
[style*="height: 1px"][style*="background: #E7D5C0"] {
  background: linear-gradient(90deg,
    transparent, rgba(202,138,4,.3) 30%,
    rgba(202,138,4,.5) 50%,
    rgba(202,138,4,.3) 70%, transparent) !important;
}

/* ══════════════════════════════════════════
   U. SELECTION COLOR
══════════════════════════════════════════ */
::selection {
  background: rgba(202,138,4,.25);
  color: #78350F;
}

/* ══════════════════════════════════════════
   V. BLOG & ARTICLE LUXURY
══════════════════════════════════════════ */

/* — book-page luxury frame — */
.book-page {
  box-shadow:
    0 0 0 1px rgba(202,138,4,.2),
    0 0 0 5px rgba(202,138,4,.05),
    0 16px 56px rgba(0,0,0,.12) !important;
  position: relative;
}
.book-page::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg,
    rgba(253,230,138,.55) 0%,
    rgba(202,138,4,.3) 30%,
    rgba(146,64,14,.2) 60%,
    rgba(253,230,138,.45) 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/* — prose h2 gold rule — */
.prose-vi h2 {
  border-bottom: 1px solid rgba(202,138,4,.35) !important;
}

/* — Featured image gold frame — */
[class*="-mt-4"] .rounded-2xl,
[class*="-mt-4"] img.rounded-2xl {
  box-shadow:
    0 0 0 2px rgba(202,138,4,.28),
    0 12px 40px rgba(0,0,0,.14) !important;
}

/* — Blog article cards (related + list) — */
.article-card,
a[class*="bg-white"][class*="rounded-xl"][class*="hover:-translate-y-1"],
a[class*="bg-white"][class*="rounded-2xl"][class*="hover:-translate-y-1"] {
  border-color: rgba(202,138,4,.2) !important;
  transition: all .3s var(--ease-luxury) !important;
  position: relative;
  overflow: hidden;
}
.article-card::before,
a[class*="bg-white"][class*="rounded-xl"][class*="hover:-translate-y-1"]::before,
a[class*="bg-white"][class*="rounded-2xl"][class*="hover:-translate-y-1"]::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    rgba(202,138,4,.7) 30%,
    rgba(253,230,138,1) 50%,
    rgba(202,138,4,.7) 70%,
    transparent);
  opacity: 0;
  transition: opacity .3s ease;
  z-index: 5;
}
.article-card:hover::before,
a[class*="bg-white"][class*="rounded-xl"][class*="hover:-translate-y-1"]:hover::before,
a[class*="bg-white"][class*="rounded-2xl"][class*="hover:-translate-y-1"]:hover::before {
  opacity: 1;
}
.article-card:hover,
a[class*="bg-white"][class*="rounded-xl"][class*="hover:-translate-y-1"]:hover,
a[class*="bg-white"][class*="rounded-2xl"][class*="hover:-translate-y-1"]:hover {
  border-color: rgba(202,138,4,.5) !important;
  box-shadow:
    0 14px 38px rgba(202,138,4,.13),
    0 4px 10px rgba(0,0,0,.07);
  transform: translateY(-6px) !important;
}

/* — Filter buttons (Blog.html) — */
.filter-btn {
  transition: all .2s var(--ease-luxury) !important;
  font-family: 'Be Vietnam Pro', sans-serif;
}
.filter-btn.active {
  background: linear-gradient(135deg, #8B0000, #B91C1C) !important;
  box-shadow: 0 4px 14px rgba(139,0,0,.35) !important;
  border-color: transparent !important;
}
.filter-btn:not(.active):hover {
  border-color: rgba(202,138,4,.6) !important;
  color: #92400E !important;
  box-shadow: 0 2px 10px rgba(202,138,4,.2);
}

/* ══════════════════════════════════════════
   W. HOMEPAGE LUXURY FRAMES
══════════════════════════════════════════ */

/* — Delivery box (SalePage hero) — */
.lux-delivery-box {
  background: linear-gradient(160deg,
    rgba(255,255,255,.07) 0%,
    rgba(202,138,4,.13) 100%);
  border: 1px solid rgba(202,138,4,.32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(202,138,4,.1), inset 0 1px 0 rgba(255,255,255,.08);
  position: relative;
  overflow: hidden;
}
.lux-delivery-box::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(253,230,138,.5) 50%, transparent);
}

/* — Feature cards (Why Tài Lộc section) — */
[class*="rounded-2xl"][class*="bg-white"][class*="hover:shadow-xl"] {
  transition: all .3s var(--ease-luxury) !important;
  border-color: rgba(202,138,4,.18) !important;
}
[class*="rounded-2xl"][class*="bg-white"][class*="hover:shadow-xl"]:hover {
  transform: translateY(-5px);
  box-shadow:
    0 18px 45px rgba(202,138,4,.14),
    0 4px 12px rgba(0,0,0,.07) !important;
  border-color: rgba(202,138,4,.4) !important;
}
[class*="rounded-2xl"][class*="bg-white"][class*="hover:shadow-xl"] h3 {
  color: #7C1D1D;
}

/* — Testimonial cards — */
.bg-white.rounded-2xl[class*="border-yellow-100"],
[class*="bg-white"][class*="rounded-2xl"][class*="border-yellow-100"] {
  border-color: rgba(202,138,4,.22) !important;
  transition: all .3s var(--ease-luxury);
  position: relative;
  overflow: hidden;
}
.bg-white.rounded-2xl[class*="border-yellow-100"]::before,
[class*="bg-white"][class*="rounded-2xl"][class*="border-yellow-100"]::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent, #CA8A04 30%, #FDE68A 50%, #CA8A04 70%, transparent);
  opacity: 0;
  transition: opacity .3s ease;
}
.bg-white.rounded-2xl[class*="border-yellow-100"]:hover::before,
[class*="bg-white"][class*="rounded-2xl"][class*="border-yellow-100"]:hover::before {
  opacity: 1;
}
.bg-white.rounded-2xl[class*="border-yellow-100"]:hover,
[class*="bg-white"][class*="rounded-2xl"][class*="border-yellow-100"]:hover {
  border-color: rgba(202,138,4,.45) !important;
  box-shadow: 0 12px 35px rgba(202,138,4,.12), 0 3px 8px rgba(0,0,0,.06);
  transform: translateY(-4px);
}

/* — Gallery teaser image frames — */
#gallery-teaser [style*="border-radius:10px"],
#gallery-teaser [style*="border-radius: 10px"] {
  box-shadow: 0 0 0 1px rgba(202,138,4,.22), 0 4px 12px rgba(0,0,0,.08);
  transition: box-shadow .3s ease, transform .3s var(--ease-luxury);
}
#gallery-teaser [style*="border-radius:10px"]:hover,
#gallery-teaser [style*="border-radius: 10px"]:hover {
  box-shadow: 0 0 0 2px rgba(202,138,4,.55), 0 8px 24px rgba(202,138,4,.14);
  transform: scale(1.03) translateY(-2px);
}

/* — Pain agitation cards — */
[style*="background:rgba(255,255,255,0.05)"][style*="border:1px solid rgba(255,255,255,0.09)"] {
  transition: all .3s ease;
  position: relative;
}
[style*="background:rgba(255,255,255,0.05)"][style*="border:1px solid rgba(255,255,255,0.09)"]:hover {
  background: rgba(202,138,4,.08) !important;
  border-color: rgba(202,138,4,.3) !important;
  box-shadow: 0 8px 24px rgba(202,138,4,.1);
}

/* — Quick-access hero buttons — */
.lux-hero-btn {
  background: linear-gradient(160deg,
    rgba(255,255,255,.08) 0%,
    rgba(202,138,4,.14) 100%);
  border: 1px solid rgba(202,138,4,.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
  transition: all .3s var(--ease-luxury);
}
.lux-hero-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 55%; height: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(253,230,138,.18),
    transparent);
  animation: btnShine 5s linear infinite;
  pointer-events: none;
}
.lux-hero-btn:hover {
  background: linear-gradient(160deg,
    rgba(202,138,4,.22) 0%,
    rgba(253,230,138,.18) 100%);
  border-color: rgba(253,230,138,.7);
  transform: translateY(-3px) scale(1.03);
  box-shadow:
    0 10px 28px rgba(202,138,4,.22),
    0 0 0 1px rgba(253,230,138,.3),
    inset 0 1px 0 rgba(255,255,255,.12);
}

/* — Stats bar items — */
.lux-stat {
  background: linear-gradient(160deg,
    rgba(255,255,255,.07) 0%,
    rgba(202,138,4,.12) 100%);
  border: 1px solid rgba(202,138,4,.28);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.lux-stat::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(253,230,138,.5) 50%, transparent);
}
.lux-stat:hover {
  border-color: rgba(253,230,138,.55);
  box-shadow: 0 6px 20px rgba(202,138,4,.18);
}
.lux-stat-sub {
  color: rgba(253,230,138,.75);
}

/* — Section tag label — */
.lux-section-tag {
  background: linear-gradient(90deg,
    #92400E 0%, #CA8A04 25%, #FDE68A 45%,
    #FFFBEB 50%, #FDE68A 55%, #CA8A04 75%, #92400E 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: foilSweep 7s linear infinite;
  letter-spacing: .18em;
  display: block;
}

/* — Slideshow luxury frame — */
.lux-slideshow-frame {
  position: relative;
  box-shadow:
    0 0 0 3px rgba(202,138,4,.25),
    0 0 0 5px rgba(61,0,0,.35),
    0 24px 60px rgba(0,0,0,.18);
}
.lux-slideshow-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg,
    rgba(253,230,138,.7) 0%,
    rgba(202,138,4,.4) 25%,
    rgba(146,64,14,.3) 50%,
    rgba(202,138,4,.4) 75%,
    rgba(253,230,138,.7) 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 20;
  animation: foilSweep 9s linear infinite;
  background-size: 300% auto;
}

/* — Blog cards luxury — */
#blog-grid > * {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(202,138,4,.18) !important;
  transition: all .3s var(--ease-luxury);
}
#blog-grid > *::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    rgba(202,138,4,.6) 30%,
    rgba(253,230,138,.9) 50%,
    rgba(202,138,4,.6) 70%,
    transparent);
  opacity: 0;
  transition: opacity .3s ease;
  z-index: 5;
}
#blog-grid > *:hover::after {
  opacity: 1;
}
#blog-grid > *:hover {
  border-color: rgba(202,138,4,.45) !important;
  box-shadow:
    0 16px 45px rgba(202,138,4,.13),
    0 4px 12px rgba(0,0,0,.08);
}

/* — Map luxury frame — */
.lux-map-frame {
  position: relative;
  box-shadow:
    0 0 0 3px rgba(202,138,4,.3),
    0 0 0 6px rgba(146,64,14,.15),
    0 24px 60px rgba(0,0,0,.14);
}
.lux-map-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 3px;
  background: linear-gradient(135deg,
    #FDE68A 0%,
    #CA8A04 20%,
    #92400E 40%,
    #CA8A04 60%,
    #FDE68A 80%,
    #CA8A04 100%);
  background-size: 300% auto;
  animation: foilSweep 10s linear infinite;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 10;
}


/* ═══ Nâng cấp giao diện 06/2026 — dùng chung mọi trang ═══ */
.display-font { font-family: 'Playfair Display', 'Be Vietnam Pro', serif; }
.section-head { display:flex; align-items:center; justify-content:center; gap:.75rem; margin-bottom:.5rem; }
.section-head .rule   { height:1px; width:min(70px,16vw); background:linear-gradient(90deg,transparent,#CA8A04); }
.section-head .rule.r { background:linear-gradient(90deg,#CA8A04,transparent); }
.section-seal { width:30px; height:30px; border-radius:7px; background:linear-gradient(150deg,#8B0000,#B91C1C); border:1px solid #CA8A04; box-shadow:0 2px 8px rgba(139,0,0,.35); display:flex; align-items:center; justify-content:center; color:#FDE68A; font-size:13px; transform:rotate(45deg); flex-shrink:0; }
.section-seal > span { transform:rotate(-45deg); display:block; }
a:focus-visible, button:focus-visible { outline:2px solid #CA8A04; outline-offset:2px; }
@media (prefers-reduced-motion: reduce) {
  .hero-foil, .hero-bg h1 > span:first-child, .hero-bg h1 > .text-yellow-300 { animation: none !important; }
}