/* ============================================================
   PREMIUM UI LAYER — Miss Oanh Trang Sức
   Bọc trong body.premium → bật/tắt an toàn qua công tắc admin.
   Triết lý: sang trọng (glass + 3D + chiều sâu), CẢM GIÁC CÔNG NGHỆ MỚI,
   nhưng CHỮ LUÔN RÕ, tương phản cao, tap target lớn cho khách lớn tuổi.
   ============================================================ */

/* ---------- Nền AURORA vàng động (rất nhẹ, sau nội dung) ---------- */
body.premium{position:relative;background:linear-gradient(180deg,#fdfaf1 0%,#f7edd6 55%,#fbf4e4 100%);}
body.premium::before{
    content:"";position:fixed;inset:-20% -10% -10% -10%;z-index:-2;pointer-events:none;
    background:
        radial-gradient(38% 40% at 18% 12%, rgba(226,182,86,.28), transparent 60%),
        radial-gradient(34% 38% at 84% 18%, rgba(214,148,120,.20), transparent 60%),
        radial-gradient(46% 46% at 70% 88%, rgba(196,160,224,.16), transparent 62%),
        radial-gradient(40% 40% at 10% 82%, rgba(230,196,110,.20), transparent 62%);
    background-size:180% 180%;
    animation:pr-aurora 22s ease-in-out infinite;
    filter:saturate(1.05);
}
/* Lớp hạt sáng mờ (grain rất nhẹ) tạo chất "công nghệ" */
body.premium::after{
    content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
    background:radial-gradient(1200px 600px at 50% -10%, rgba(255,255,255,.55), transparent 60%);
}
@keyframes pr-aurora{
    0%,100%{background-position:0% 0%,100% 0%,100% 100%,0% 100%}
    50%{background-position:40% 20%,60% 40%,40% 60%,60% 80%}
}

/* ---------- GLASSMORPHISM — thẻ trắng thành kính mờ sang trọng ---------- */
/* Áp cho các thẻ nền trắng/viền vàng phổ biến (không đổi màu chữ → vẫn đọc rõ) */
body.premium .bg-white,
body.premium .card-lux{
    background:rgba(255,253,247,.72)!important;
    -webkit-backdrop-filter:blur(10px) saturate(1.1);
    backdrop-filter:blur(10px) saturate(1.1);
    border-color:rgba(201,146,42,.28);
    box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 10px 30px -18px rgba(133,89,28,.45);
}
/* Ô có nền vàng nhạt: giữ nhưng thêm chiều sâu kính */
body.premium .bg-gold-50{
    background:rgba(250,240,215,.66)!important;
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}

/* ---------- CHIỀU SÂU & BO GÓC MỀM ---------- */
body.premium .rounded-xl{border-radius:1rem}
body.premium .rounded-2xl{border-radius:1.35rem}
body.premium .shadow-sm{box-shadow:0 6px 18px -12px rgba(133,89,28,.4)!important}

/* Card nhấc + nghiêng 3D khi hover (mượt, biên độ nhỏ để không chóng mặt) */
body.premium .card-3d{transform-style:preserve-3d;transition:transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .25s ease;will-change:transform}
body.premium .card-3d:hover{box-shadow:0 26px 50px -22px rgba(133,89,28,.5)}

/* ---------- NÚT ÁNH KIM (sheen sweep) ---------- */
body.premium .btn-gold{position:relative;overflow:hidden;isolation:isolate}
body.premium .btn-gold::after{
    content:"";position:absolute;top:0;left:-140%;width:60%;height:100%;z-index:1;
    background:linear-gradient(115deg,transparent,rgba(255,255,255,.55),transparent);
    transform:skewX(-18deg);transition:left .6s ease;pointer-events:none;
}
body.premium .btn-gold:hover::after{left:150%}

/* ---------- MOBILE: tap target lớn + chữ dễ đọc cho người lớn tuổi ---------- */
@media (max-width:640px){
    body.premium .btn-gold{min-height:48px}
    /* Các nút bo tròn dạng pill: đảm bảo đủ cao để chạm dễ */
    body.premium a.rounded-full,body.premium button.rounded-full{min-height:40px}
}

/* ---------- REVEAL ON SCROLL (mặc định HIỆN — chỉ ẩn khi JS bật) ---------- */
html.pr-js body.premium .pr-reveal{opacity:0;transform:translateY(18px)}
html.pr-js body.premium .pr-reveal.pr-in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1)}

/* Tôn trọng người muốn giảm chuyển động: tắt mọi animation/tilt */
@media (prefers-reduced-motion:reduce){
    body.premium::before{animation:none}
    html.pr-js body.premium .pr-reveal{opacity:1!important;transform:none!important}
}

/* Viền vàng sáng mảnh cho header (tinh tế) */
body.premium header{box-shadow:0 1px 0 rgba(201,146,42,.25),0 10px 30px -24px rgba(133,89,28,.5)}