/* ===== AquaZone — Custom styles bổ sung cho Tailwind ===== */
:root{
  --aq-primary:#0284c7;
  --aq-dark:#0f172a;
  --aq-ring:rgba(2,132,199,.35);
}
*{-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{font-family:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',sans-serif;}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:99px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#94a3b8;background-clip:content-box}
.dark ::-webkit-scrollbar-thumb{background:#334155;background-clip:content-box}
.no-scrollbar::-webkit-scrollbar{display:none}
.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}

/* ---------- Utilities ---------- */
.container-aq{width:100%;max-width:1280px;margin-inline:auto;padding-inline:.65rem}
@media(min-width:640px){.container-aq{padding-inline:1rem}}
.text-balance{text-wrap:balance}
.line-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.line-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.glass{background:rgba(255,255,255,.72);backdrop-filter:blur(14px) saturate(160%)}
.dark .glass{background:rgba(15,23,42,.72)}
.gradient-brand{background:linear-gradient(120deg,#0369a1 0%,#0284c7 45%,#06b6d4 100%)}
.gradient-dark{background:linear-gradient(135deg,#0c1a2e 0%,#0f2942 55%,#164e63 100%)}
.gradient-text{background:linear-gradient(90deg,#0284c7,#06b6d4);-webkit-background-clip:text;background-clip:text;color:transparent}
.shadow-card{box-shadow:0 1px 2px rgba(15,23,42,.06),0 8px 24px -12px rgba(15,23,42,.18)}
.shadow-hover{box-shadow:0 18px 40px -18px rgba(2,132,199,.45),0 4px 12px rgba(15,23,42,.08)}

/* ---------- Product card ---------- */
.product-card{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
.product-card:hover{transform:translateY(-6px)}
.product-card:hover .product-img{transform:scale(1.07) rotate(-1deg)}
.product-img{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.product-card:hover .quick-actions{opacity:1;transform:translateX(0)}
.quick-actions{opacity:0;transform:translateX(12px);transition:.3s}

/* ---------- Ribbon / badge ---------- */
.ribbon{position:absolute;top:10px;left:0;padding:.2rem .6rem .2rem .5rem;font-size:11px;font-weight:700;color:#fff;
  background:linear-gradient(90deg,#0284c7,#06b6d4);border-radius:0 999px 999px 0;box-shadow:0 4px 10px -4px rgba(2,132,199,.8)}

/* ---------- Marquee ---------- */
.marquee{display:flex;gap:3rem;animation:marquee 26s linear infinite;will-change:transform}
.marquee:hover{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Animations ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.reveal{opacity:0}
.reveal.in{animation:fadeUp .65s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 var(--aq-ring)}70%{box-shadow:0 0 0 16px rgba(2,132,199,0)}100%{box-shadow:0 0 0 0 rgba(2,132,199,0)}}
.pulse-ring{animation:pulseRing 2s infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.floaty{animation:floaty 5s ease-in-out infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}
.skeleton{position:relative;overflow:hidden;background:#e2e8f0}
.dark .skeleton{background:#1e293b}
.skeleton::after{content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:shimmer 1.4s infinite}

/* ---------- Bong bóng nước trang trí ---------- */
@keyframes bubbleUp{0%{transform:translateY(0);opacity:.6}100%{transform:translateY(-120px);opacity:0}}
.bubble{position:absolute;bottom:-20px;border-radius:50%;background:rgba(255,255,255,.25);animation:bubbleUp 6s linear infinite}

/* ---------- Slider ---------- */
.slide{opacity:0;transition:opacity .8s ease}
.slide.active{opacity:1}
.slide.active .slide-anim{animation:fadeUp .8s .1s both}

/* ---------- Range slider ---------- */
input[type=range]{-webkit-appearance:none;height:4px;border-radius:9px;background:#e2e8f0;outline:none}
.dark input[type=range]{background:#334155}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:#fff;border:4px solid var(--aq-primary);cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.2)}

/* ---------- Rating stars ---------- */
.stars{--p:0%;display:inline-block;position:relative;color:#e2e8f0;font-size:inherit}
.stars::before{content:'★★★★★'}
.stars>span{position:absolute;left:0;top:0;overflow:hidden;width:var(--p);color:#f59e0b;white-space:nowrap}
.stars>span::before{content:'★★★★★'}

/* ---------- Zoom ---------- */
.zoom-wrap{overflow:hidden}
.zoom-wrap img{transition:transform .25s ease}
.zoom-wrap.zoomed img{transform:scale(2)}

/* ---------- Toast ---------- */
#toastBox{position:fixed;z-index:120;right:1rem;bottom:1rem;display:flex;flex-direction:column;gap:.5rem}
.toast{min-width:270px;display:flex;gap:.65rem;align-items:flex-start;padding:.8rem 1rem;border-radius:.85rem;color:#fff;
  box-shadow:0 18px 40px -14px rgba(15,23,42,.5);animation:fadeUp .35s both}
.toast.out{animation:toastOut .3s forwards}
@keyframes toastOut{to{opacity:0;transform:translateX(30px)}}

/* ---------- Admin ---------- */
.admin-link{display:flex;align-items:center;gap:.75rem;padding:.62rem .85rem;border-radius:.7rem;font-size:.9rem;
  color:#94a3b8;transition:.2s;position:relative}
.admin-link:hover{background:rgba(148,163,184,.12);color:#fff}
.admin-link.active{background:linear-gradient(90deg,rgba(2,132,199,.28),rgba(2,132,199,.02));color:#fff;font-weight:600}
.admin-link.active::before{content:'';position:absolute;left:0;top:20%;height:60%;width:3px;border-radius:0 4px 4px 0;background:#38bdf8}
.stat-card::after{content:'';position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;
  background:currentColor;opacity:.08}
table.aq-table th{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
table.aq-table tbody tr{transition:background .18s}

/* ---------- Print ---------- */
@media print{.no-print{display:none!important}}