/* ============================================================
   Pháp Thoại — tailwind-lite.css (v1)
   File CSS TĨNH thay thế cho <script src="https://cdn.tailwindcss.com">.
   LÝ DO: Tailwind CDN tự sinh CSS bằng JS lúc chạy, cần tải qua mạng —
   khi offline (mở app lần đầu offline, hoặc load lại trang lúc mất mạng),
   toàn bộ class rỗng, gây vỡ giao diện + panel chi tiết bài không mở được.
   File này định nghĩa SẴN đúng các class Tailwind app đang dùng thật
   (rà soát trực tiếp từ index.html), để Service Worker cache cùng
   index.html — giao diện offline = giao diện online, vĩnh viễn.
   KHÔNG cần build tool, có thể sửa tay trực tiếp nếu sau này thêm class mới.
   ============================================================ */

/* ---- Reset nhẹ tương đương Tailwind preflight (phần cần thiết) ---- */
*, *::before, *::after { box-sizing: border-box; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: inherit; }
svg { display: block; vertical-align: middle; }

/* ---- Display ---- */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.hidden { display: none; }
.block { display: block; }

/* ---- Flexbox ---- */
.flex-1 { flex: 1 1 0%; }
.flex-col { flex-direction: column; }
.flex-shrink-0 { flex-shrink: 0; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-2 { gap: .5rem; }
.gap-4 { gap: 1rem; }

/* ---- Position ---- */
.fixed { position: fixed; }
.relative { position: relative; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.top-0 { top: 0; }
.right-0 { right: 0; }
.z-10 { z-index: 10; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }

/* ---- Sizing ---- */
.h-full { height: 100%; }
.h-px { height: 1px; }
.h-4 { height: 1rem; }
.h-5 { height: 1.25rem; }
.h-6 { height: 1.5rem; }
.w-full { width: 100%; }
.w-4 { width: 1rem; }
.w-5 { width: 1.25rem; }
.w-6 { width: 1.5rem; }
.w-20 { width: 5rem; }
.min-h-screen { min-height: 100vh; }
.min-w-0 { min-width: 0; }
.max-w-2xl { max-width: 42rem; }
.max-w-5xl { max-width: 64rem; }

/* ---- Spacing: margin ---- */
.mb-2 { margin-bottom: .5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-7 { margin-bottom: 1.75rem; }
.ml-3 { margin-left: .75rem; }
.mt-1 { margin-top: .25rem; }
.mt-2 { margin-top: .5rem; }
.mt-auto { margin-top: auto; }
.my-3 { margin-top: .75rem; margin-bottom: .75rem; }

/* ---- Spacing: padding ---- */
.pt-3 { padding-top: .75rem; }
.px-1 { padding-left: .25rem; padding-right: .25rem; }
.px-2 { padding-left: .5rem; padding-right: .5rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-0\.5 { padding-top: .125rem; padding-bottom: .125rem; }
.py-1 { padding-top: .25rem; padding-bottom: .25rem; }
.py-3 { padding-top: .75rem; padding-bottom: .75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }

/* ---- Spacing: space-between children ---- */
.space-y-3 > * + * { margin-top: .75rem; }
.space-y-4 > * + * { margin-top: 1rem; }

/* ---- Border ---- */
.border { border-width: 1px; border-style: solid; border-color: #e5e7eb; }
.border-b { border-bottom-width: 1px; border-style: solid; border-color: #e5e7eb; }
.border-t { border-top-width: 1px; border-style: solid; border-color: #e5e7eb; }
.border-none { border-style: none; }
.border-red-200 { border-color: #fecaca; }
.border-stone-100 { border-color: #f5f5f4; }
.border-stone-200 { border-color: #e7e5e4; }
.border-stone-200\/80 { border-color: rgba(231,229,228,.8); }
.rounded { border-radius: .25rem; }
.rounded-md { border-radius: .375rem; }
.rounded-2xl { border-radius: 1rem; }

/* ---- Background ---- */
.bg-transparent { background-color: transparent; }
.bg-white { background-color: #fff; }
.bg-amber-50 { background-color: #fffbeb; }
.bg-amber-100 { background-color: #fef3c7; }
.bg-amber-500\/30 { background-color: rgba(245,158,11,.3); }
.bg-stone-100 { background-color: #f5f5f4; }
.bg-stone-900\/50 { background-color: rgba(28,25,23,.5); }
.bg-\[\#FFFDF8\] { background-color: #FFFDF8; }

/* ---- Typography ---- */
.text-xs { font-size: .75rem; }
.text-sm { font-size: .875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-4xl { font-size: 2.25rem; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.italic { font-style: italic; }
.uppercase { text-transform: uppercase; }
.text-center { text-align: center; }
.text-justify { text-align: justify; }
.leading-snug { line-height: 1.375; }
.leading-relaxed { line-height: 1.625; }
.tracking-tight { letter-spacing: -.025em; }
.tracking-wide { letter-spacing: .025em; }
.whitespace-nowrap { white-space: nowrap; }
.placeholder-stone-400::placeholder { color: #a8a29e; }

/* ---- Text colors ---- */
.text-red-600 { color: #dc2626; }
.text-stone-400 { color: #a8a29e; }
.text-stone-500 { color: #78716c; }
.text-stone-600 { color: #57534e; }
.text-stone-700 { color: #44403c; }
.text-stone-800 { color: #292524; }
.text-stone-900 { color: #1c1917; }
.text-amber-600\/80 { color: rgba(217,119,6,.8); }
.text-amber-700 { color: #b45309; }
.text-amber-950 { color: #451a03; }

/* ---- Shadow ---- */
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0,0,0,.05); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); }

/* ---- Overflow ---- */
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }

/* ---- Opacity / transform / transition (dùng cho panel trượt + fade) ---- */
.opacity-0 { opacity: 0; }
.translate-x-full { transform: translateX(100%); }
.transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: 150ms; }
.duration-300 { transition-duration: 300ms; }
.outline-none { outline: 2px solid transparent; outline-offset: 2px; }

/* ---- Interactive states ---- */
.hover\:text-red-800:hover { color: #991b1b; }
.hover\:text-stone-600:hover { color: #57534e; }
.hover\:text-stone-700:hover { color: #44403c; }
.focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
.focus-within\:border-amber-600:focus-within { border-color: #d97706; }
.focus-within\:ring-1:focus-within { box-shadow: 0 0 0 1px rgba(217,119,6,.2); }
.focus-within\:ring-amber-600\/20:focus-within { box-shadow: 0 0 0 1px rgba(217,119,6,.2); }

/* ---- Responsive (md: >= 768px) — Tailwind mặc định dùng min-width ---- */
@media (min-width: 768px) {
    .md\:text-xl { font-size: 1.25rem; }
    .md\:text-2xl { font-size: 1.5rem; }
    .md\:text-5xl { font-size: 3rem; }
}