body { font-family: 'Inter', sans-serif; background-color: #f8f5ee; color: #333; }
button { border-radius: 50rem; }
h1, h2, h3, h4, .font-serif { font-family: '"Playfair Display"', serif; }
#orderModal { transition: opacity 0.3s ease; }
.modal-content { transition: transform 0.3s ease; }
body.modal-open { overflow: hidden; }
.dashed-line { border-top: 1px dashed #d8ccb8; margin: 1rem 0; }

/* Loading Spinner */
.loader { border: 4px solid #f3f3f3; border-top: 4px solid #cda568; border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite; margin: auto;}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Styles cho Tab Admin */
.admin-tab { cursor: pointer; padding: 0.5rem 1rem; border-bottom: 2px solid transparent; font-weight: 600; color: #6b7280; transition: all 0.2s; }
.admin-tab.active { border-color: #cda568; color: #1c1612; }
.admin-tab:hover { color: #1c1612; }

/* Chuyển trang mượt */
.page-view { animation: fadeIn 0.4s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Tùy chỉnh thanh cuộn (Custom Scrollbar) cho Modal */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d8ccb8; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #cda568; }

/* Toast Animations */
.toast-enter { animation: slideInRight 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
.toast-leave { animation: fadeOutRight 0.4s ease-in forwards; }
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(100%); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeOutRight {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(100%); }
}

/* --------------------------------------------------- */
/* NÂNG CẤP GIAO DIỆN POPUP THÔNG BÁO (TOAST)          */
/* (Bao gồm popup "Đang xác thực quyền truy cập...")   */
/* --------------------------------------------------- */
#toastContainer {
    z-index: 99999 !important;
}

#toastContainer > div {
    background: linear-gradient(145deg, #2a221b, #15100d) !important; /* Nền đen nâu sang trọng thay vì đen kịt */
    border: 1px solid #4a3b2f !important;
    border-left: 5px solid #cda568 !important; /* Dải màu Vàng Gold nhấn mạnh */
    border-radius: 8px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.05) !important;
    color: #f8f5ee !important;
    padding: 16px 20px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 280px !important;
    backdrop-filter: blur(10px) !important;
}

/* Ép màu chữ bên trong Toast sáng lên để dễ đọc */
#toastContainer > div * {
    color: #f8f5ee !important;
}

/* Màu viền theo trạng thái (Lỗi, Thành công) */
#toastContainer > div.bg-red-500,
#toastContainer > div.bg-red-600,
#toastContainer > div.border-red-500 {
    border-left-color: #ef4444 !important;
}

#toastContainer > div.bg-green-500,
#toastContainer > div.bg-green-600,
#toastContainer > div.border-green-500 {
    border-left-color: #10b981 !important;
}

/* --------------------------------------------------- */
/* MỞ RỘNG GIAO DIỆN QUẢN TRỊ (ẨN HEADER & FOOTER)     */
/* --------------------------------------------------- */
body:has(#adminSection:not(.hidden)) nav,
body:has(#adminSection:not(.hidden)) footer {
    display: none !important;
}

body:has(#adminSection:not(.hidden)) {
    background-color: #e5e7eb !important; /* Đổi nền thành màu xám nhạt để phần bảng Quản trị nổi bật lên */
}

/* Rich Text Editor display helpers (moved from JS injection) */
.rich-text-content b, .rich-text-content strong, .rich-text-display b, .rich-text-display strong { font-weight: 900 !important; }
.rich-text-content i, .rich-text-content em, .rich-text-display i, .rich-text-display em { font-style: italic !important; }
.rich-text-content u, .rich-text-display u { text-decoration: underline !important; }
.rich-text-content ul, .rich-text-display ul { list-style-type: disc !important; margin-left: 1.5rem !important; margin-bottom: 0.5rem !important; }
.rich-text-content ol, .rich-text-display ol { list-style-type: decimal !important; margin-left: 1.5rem !important; margin-bottom: 0.5rem !important; }
.rich-text-content a, .rich-text-display a { color: #d5a044 !important; text-decoration: underline !important; cursor: pointer !important; font-weight: bold !important; }

/* Coin / hand-drawn mark styles (centralized control for logos and decorative coins) */
.coin-mark { --bg: #1c1612; --accent: #cda568; width: 56px; height: 56px; border-radius: 9999px; background-color: var(--bg); border: 3px solid var(--accent); display:flex; align-items:center; justify-content:center; position:relative; box-shadow:0 6px 12px rgba(0,0,0,0.08); }
.coin-mark::before { content: ''; position:absolute; inset:4px; border-radius:9999px; border:1px solid rgba(255,255,255,0.06); }
.coin-mark .coin-inner-square { width:18px; height:18px; border:2px solid var(--accent); background:transparent; z-index:10; }
.coin-mark .coin-char { position:absolute; color:var(--accent); font-size:10px; font-weight:800; z-index:10; }
.coin-mark .coin-char.top { top:2px; left:50%; transform:translateX(-50%); }
.coin-mark .coin-char.bottom { bottom:2px; left:50%; transform:translateX(-50%); }
.coin-mark .coin-char.left { left:4px; top:50%; transform:translateY(-50%); }
.coin-mark .coin-char.right { right:4px; top:50%; transform:translateY(-50%); }

/* Larger hero coin for header */
.hero-coin { width:80px; height:80px; border-radius:9999px; background-color:var(--bg, #15100d); border:4px solid var(--accent, #cda568); display:flex; align-items:center; justify-content:center; position:relative; box-shadow:0 8px 18px rgba(0,0,0,0.12); }
.hero-coin .hero-center { font-family: 'Playfair Display', serif; color:var(--accent, #cda568); font-size:28px; font-weight:800; }