/* ===== Bổ sung cho bản PHP (slider, lang sheet) ===== */

/* Banner slider: fade */
.slide { opacity: 0; transition: opacity .5s ease; }
.slide.active { opacity: 1; }
.dot.active { background: #fff !important; transform: scale(1.25); }

/* Bottom-sheet ngôn ngữ */
.lang-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.4);
  opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 50;
}
.lang-overlay.show { opacity: 1; pointer-events: auto; }
.lang-sheet {
  position: fixed; left: 50%; bottom: 0; transform: translate(-50%, 100%);
  width: 100%; max-width: 420px; background: #fff;
  border-radius: 1rem 1rem 0 0; z-index: 51;
  transition: transform .28s ease; max-height: 70vh; overflow-y: auto;
  padding-bottom: env(safe-area-inset-bottom);
}
.lang-sheet.show { transform: translate(-50%, 0); }
.lang-grab { width: 36px; height: 4px; border-radius: 9999px; background: #d1d5db; margin: 10px auto 2px; }
.lang-list { padding: 0 0 12px; }
.lang-row {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; font-size: 14px; color: #374151; text-align: left;
}
.lang-row:hover { background: #f9fafb; }
.lang-row.sel { color: #059669; font-weight: 600; }

/* ===== Utility bù cho entry.css (Nuxt build thiếu) ===== */
.max-w-xs{max-width:20rem}
.max-w-2xl{max-width:42rem}
.max-w-4xl{max-width:56rem}
.space-y-3>*+*{margin-top:.75rem}
.space-y-2>*+*{margin-top:.5rem}
.space-y-1\.5>*+*{margin-top:.375rem}
.space-y-4>*+*{margin-top:1rem}
.space-y-5>*+*{margin-top:1.25rem}
.grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}
.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
.min-w-\[5rem\]{min-width:5rem}
.max-h-\[90vh\]{max-height:90vh}
.max-h-\[70vh\]{max-height:70vh}
.max-h-40{max-height:10rem}
.max-h-72{max-height:18rem}
.gap-5{gap:1.25rem}
.gap-x-5{column-gap:1.25rem}
.gap-y-2{row-gap:.5rem}
.h-1\.5{height:.375rem}
.h-\[min\(48dvh\2c 440px\)\]{height:min(48dvh,440px)}
.max-w-\[260px\]{max-width:260px}
.max-w-\[35\%\]{max-width:35%}
.max-w-\[40\%\]{max-width:40%}
.max-w-\[70\%\]{max-width:70%}
.min-h-64{min-height:16rem}

/* ===== Màu bù cho entry.css (Tailwind palette thiếu) ===== */
.bg-red-100{background-color:oklch(93.6% .032 17.717)}
.bg-slate-100{background-color:oklch(96.8% .007 247.896)}
.border-red-300{border-color:oklch(80.8% .114 19.571)}
.ring-gray-300{--tw-ring-color:oklch(87.2% .01 258.338)}
.text-amber-800{color:oklch(47.3% .137 46.201)}
.text-emerald-500{color:oklch(69.6% .17 162.48)}
.text-red-700{color:oklch(50.5% .213 27.518)}
.text-slate-600{color:oklch(44.6% .03 256.802)}
.text-orange-500{color:oklch(70.5% .213 47.604)}
.text-violet-600{color:oklch(54.1% .281 293.009)}
.text-teal-600{color:oklch(60% .118 184.704)}
.text-sky-600{color:oklch(58.8% .158 241.966)}
.bottom-24{bottom:6rem}
.bottom-6{bottom:1.5rem}
.w-96{width:24rem}
.z-\[100\]{z-index:100}
.bg-gray-500{background-color:var(--color-gray-500)}
.hover\:bg-gray-600:hover{background-color:var(--color-gray-600)}
.checkout-airmail{background:repeating-linear-gradient(-45deg,#e53935,#e53935 5px,#fff 0 7px,#1e88e5 0 12px,#fff 0 14px);border-radius:2px;height:10px}
.max-h-64{max-height:16rem}
.max-h-80{max-height:20rem}
.max-h-\[85vh\]{max-height:85vh}
.my-auto{margin-top:auto;margin-bottom:auto}

/* ============ HIỆU ỨNG CHUYỂN ĐỘNG / LOAD MƯỢT ============ */
@keyframes appFadeIn{from{opacity:0}to{opacity:1}}
@keyframes appFadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes appPop{0%{opacity:0;transform:scale(.96)}100%{opacity:1;transform:scale(1)}}
@keyframes appShimmer{0%{background-position:-468px 0}100%{background-position:468px 0}}

/* Trang vào: fade nhẹ toàn nội dung khung */
.app-fade{animation:appFadeIn .25s ease-out both}
.app-rise{animation:appFadeUp .32s cubic-bezier(.22,.61,.36,1) both}

/* Tự động fade-up theo thứ tự cho các thẻ/list trong vùng .app-stagger */
.app-stagger > *{animation:appFadeUp .4s cubic-bezier(.22,.61,.36,1) both}
.app-stagger > *:nth-child(1){animation-delay:.02s}
.app-stagger > *:nth-child(2){animation-delay:.06s}
.app-stagger > *:nth-child(3){animation-delay:.10s}
.app-stagger > *:nth-child(4){animation-delay:.14s}
.app-stagger > *:nth-child(5){animation-delay:.18s}
.app-stagger > *:nth-child(6){animation-delay:.22s}
.app-stagger > *:nth-child(7){animation-delay:.26s}
.app-stagger > *:nth-child(8){animation-delay:.30s}
.app-stagger > *:nth-child(n+9){animation-delay:.34s}

/* Mượt mọi tương tác cơ bản trong khung app */
.app-frame a,.app-frame button{transition:background-color .18s ease,color .18s ease,box-shadow .18s ease,transform .12s ease,opacity .18s ease}
.app-frame button:not(:disabled):active,.app-frame a:active{transform:scale(.97)}

/* Thẻ/card nhấc nhẹ khi hover (desktop) */
@media (hover:hover){
  .app-frame .shadow-sm{transition:box-shadow .2s ease,transform .2s ease}
  .app-frame .shadow-sm:hover{box-shadow:0 6px 20px rgba(0,0,0,.08)}
}

/* Ảnh fade khi tải xong */
.app-frame img{transition:opacity .3s ease}

/* Skeleton shimmer (dùng class .skeleton) */
.skeleton{background:#eee;background-image:linear-gradient(90deg,#eee 0,#f5f5f5 40px,#eee 80px);background-size:600px;animation:appShimmer 1.3s infinite linear;border-radius:8px}

/* Spinner nhỏ dùng chung */
@keyframes appSpin{to{transform:rotate(360deg)}}
.app-spin{animation:appSpin .7s linear infinite}

/* Bottom sheet / modal trượt lên mượt */
@keyframes appSheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.app-sheet-in{animation:appSheetUp .28s cubic-bezier(.22,.61,.36,1) both}

@media (prefers-reduced-motion:reduce){
  .app-fade,.app-rise,.app-stagger>*,.app-sheet-in{animation:none!important}
  .app-frame a,.app-frame button,.app-frame .shadow-sm,.app-frame img{transition:none!important}
}
.whitespace-normal{white-space:normal}
.max-w-\[260px\]{max-width:260px}
.text-amber-400{color:#fbbf24}