/* RYOO STORE Web - Pastel Theme */
:root {
    --pink-50: #fffcf2;
    --pink-100: #fae3d9;
    --pink-200: #ffcad4;
    --pink-300: #ffb6b9;
    --pink-400: #ff9a9e;
    --pink-500: #ff8b94;
    --brown-700: #5a4b4c;
    --brown-600: #7a5c61;
    --brown-500: #8e7d80;
    --brown-400: #d08c9f;
    --blue-300: #a0c4ff;
    --green-200: #b8e0d2;
    --green-500: #4a7c59;
    --shadow-pink: 0 8px 30px rgba(255, 182, 185, 0.25);
}

* { box-sizing: border-box; }

body {
    font-family: 'Nunito', system-ui, sans-serif;
    background: linear-gradient(120deg, var(--pink-50) 0%, var(--pink-100) 100%);
    min-height: 100vh;
    color: var(--brown-700);
    margin: 0;
}

a { text-decoration: none; color: var(--pink-500); }
a:hover { color: var(--pink-400); }

h1, h2, h3, h4, h5 { color: var(--brown-600); font-weight: 800; }

/* ==== Navbar ==== */
.navbar-ryoo {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 4px 20px rgba(255, 182, 185, 0.2);
    border-bottom: 2px solid var(--pink-200);
    padding: 12px 24px;
    position: sticky;
    top: 0;
    z-index: 100;
}
.navbar-ryoo .brand {
    color: var(--pink-500) !important;
    font-weight: 800;
    font-size: 1.3rem;
    letter-spacing: 0.5px;
}
.navbar-ryoo .nav-link {
    color: var(--brown-600) !important;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 10px;
    transition: all 0.2s;
    margin: 0 2px;
}
.navbar-ryoo .nav-link:hover { background: var(--pink-100); color: var(--pink-500) !important; }
.navbar-ryoo .nav-link.active { background: var(--pink-200); color: var(--pink-500) !important; }

/* ==== Card ==== */
.card-ryoo {
    border: none;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-pink);
    border: 2px solid rgba(255, 255, 255, 0.9);
    padding: 24px;
    margin-bottom: 20px;
}
.card-ryoo h5 { font-weight: 800; letter-spacing: 0.3px; margin-bottom: 16px; }

/* ==== Form ==== */
.form-control, .form-select {
    border-radius: 12px;
    border: 2px solid var(--pink-100);
    background-color: var(--pink-50);
    color: var(--brown-700);
    font-weight: 600;
    padding: 10px 14px;
}
.form-control:focus, .form-select:focus {
    border-color: var(--pink-300);
    box-shadow: 0 0 0 4px rgba(255, 182, 185, 0.2);
    background: #fff;
    outline: none;
}
.form-label { color: var(--brown-400); font-weight: 700; font-size: 0.9rem; }

/* ==== Button ==== */
.btn {
    border-radius: 14px;
    font-weight: 800;
    border: none;
    transition: all 0.3s ease;
    padding: 10px 18px;
}
.btn-primary-ryoo {
    background: linear-gradient(45deg, var(--pink-300), var(--pink-200));
    color: #fff;
}
.btn-primary-ryoo:hover {
    background: linear-gradient(45deg, var(--pink-400), var(--pink-300));
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 182, 185, 0.5);
    color: #fff;
}
.btn-success-ryoo { background: var(--green-200); color: var(--green-500); }
.btn-success-ryoo:hover { background: #95d5b2; transform: translateY(-2px); color: var(--green-500); }
.btn-outline-danger-ryoo {
    border: 2px solid var(--pink-200);
    color: var(--pink-500);
    background: transparent;
}
.btn-outline-danger-ryoo:hover { background: var(--pink-200); color: #fff; }
.btn-sm-ryoo {
    padding: 5px 12px;
    font-size: 0.85rem;
    border: 2px solid var(--pink-200);
    color: var(--brown-600);
    background: #fff;
    border-radius: 12px;
    font-weight: 700;
}
.btn-sm-ryoo:hover { background: var(--pink-200); color: #fff; }

/* ==== Table ==== */
.table-ryoo {
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid rgba(255, 202, 212, 0.5);
    background: rgba(255, 255, 255, 0.5);
    width: 100%;
    border-collapse: collapse;
}
.table-ryoo thead th {
    background-color: #fad1d7 !important;
    color: var(--brown-600);
    font-weight: 800;
    padding: 12px;
    text-align: left;
    border-bottom: none;
    position: sticky;
    top: 0;
}
.table-ryoo tbody tr:hover { background-color: rgba(255, 182, 185, 0.15); }
.table-ryoo td { padding: 10px 12px; vertical-align: middle; border-top: 1px solid rgba(255, 202, 212, 0.3); }
.table-responsive-ryoo { max-height: 600px; overflow-y: auto; border-radius: 16px; }

/* ==== Badge ==== */
.badge-ryoo { border-radius: 10px; padding: 5px 12px; font-weight: 800; letter-spacing: 0.5px; font-size: 0.8rem; display: inline-block; }
.badge-pending { background: #fdffb6; color: #7f5539; }
.badge-paid { background: var(--blue-300); color: #fff; }
.badge-completed { background: #caffbf; color: #40916c; }
.badge-active { background: #a0c4ff; color: #fff; }
.badge-expired { background: var(--pink-300); color: #fff; }
.badge-cancelled { background: #e4c1f9; color: #5a189a; }
.badge-info { background: #fffcf2; border: 1px solid var(--pink-100); color: var(--brown-400); }

/* ==== Stat card ==== */
.stat-card {
    border-radius: 16px;
    padding: 18px;
    text-align: center;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 12px rgba(255, 182, 185, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.9);
}
.stat-card .label { font-size: 0.85rem; color: var(--brown-500); margin-bottom: 6px; }
.stat-card .value { font-size: 1.7rem; color: var(--brown-600); }
.stat-card .value.pink { color: var(--pink-500); }
.stat-card .value.green { color: #2e7d32; }
.stat-card .value.blue { color: #0284c7; }

/* ==== Alert ==== */
.alert-ryoo {
    border-radius: 12px;
    font-weight: 600;
    padding: 12px 16px;
    border: 2px solid;
    margin-bottom: 16px;
}
.alert-error { background-color: #ffdae0; border-color: var(--pink-300); color: #d9534f; }
.alert-success-ryoo { background-color: #d4edda; border-color: #b8e0d2; color: #155724; }
.alert-info-ryoo { background-color: #e0f2fe; border-color: #bae6fd; color: #0284c7; }

/* ==== Legit status (dùng chung cho public track + admin) ==== */
.legit-pending { background-color: #fffcf2; border-color: #fae3d9; color: #7a5c61; }
.legit-warn    { background-color: #fff8c5; border-color: #f59e0b; color: #7f5539; }
.legit-done    { background-color: #caffbf; border-color: #4a7c59; color: #2e7d32; }
.legit-no      { background-color: #ffd6d6; border-color: #ff8b94; color: #b91c1c; }
.legit-na      { background-color: #f3f4f6; border-color: #d1d5db; color: #6b7280; }

/* ==== Code ==== */
code, .mono {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    color: var(--pink-500);
    background: var(--pink-50);
    padding: 2px 6px;
    border-radius: 5px;
    font-size: 0.9em;
}

/* ==== Scrollbar ==== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--pink-200); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--pink-300); }

/* ==== Container ==== */
.container-ryoo { max-width: 1280px; margin: 0 auto; padding: 24px; }

/* ==== Pulse (cho status pending) ==== */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.pulse { animation: pulse 1.5s infinite; }