/* 
  Member Interface Styles (Header/Footer)
*/

/* Sticky Footer & Shifting Fix Implementation */
html {
    height: 100%;
    overflow-x: clip;
    overflow-y: scroll; /* FORCED SCROLLBAR: Prevents 15px horizontal jump between pages */
}

body {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: clip;
    width: 100%;
    position: relative;
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

/* Flex grow ensures footer stays at bottom without forced min-height gap */
main, .page-content {
    flex: 1 0 auto !important; 
}

/* Global System Container - STRICT 1200px */
.container {
    max-width: 1200px !important; 
    margin: 0 auto;
    padding: 0 15px;
}

/* Main Header */
.main-header {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    height: var(--header-height);
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 3000;
    transition: background 0.3s;
}

/* Hard-fix for Fixed Header on Mobile */
@media (max-width: 900px) {
    .main-header {
        position: fixed !important;
        top: 0 !important;
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        background: #ffffff !important; /* Solid white for mobile to ensure visibility over overlay */
        z-index: 4000 !important; /* Keep it above everything (Overlay is 1500, Mobile Nav is 2000) */
    }
    .page-content {
        margin-top: var(--header-height) !important;
    }
}

.main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.logo-text {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary-blue);
    letter-spacing: -0.5px;
}

.logo-text .accent {
    color: var(--primary-red);
}

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 25px;
    height: 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 2002;
}

.mobile-menu-toggle span {
    width: 100%;
    height: 2px;
    background-color: var(--primary-blue);
    border-radius: 2px;
    transition: all 0.3s;
}

/* Sidebar Styling */
.mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1500;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

.mobile-nav {
    position: fixed;
    top: var(--header-height);
    right: 0;
    width: 280px;
    height: calc(100vh - var(--header-height));
    background: white;
    z-index: 2000;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    padding: 20px 0 30px; /* Reduced padding to remove the 'disconnected' gap */
    display: flex;
    flex-direction: column;
}

/* Hide Sidebar & Overlay on Desktop strictly */
@media (min-width: 901px) {
    .mobile-nav, .mobile-nav-overlay {
        display: none !important;
    }
}

.mobile-nav ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mobile-nav li a {
    display: block;
    padding: 15px 25px;
    font-weight: 500;
    border-bottom: 1px solid #eee;
    transition: all 0.3s;
    border-left: 4px solid transparent;
}

.mobile-nav li a:hover {
    color: var(--primary-blue);
    background-color: #f8f9fa;
}

.mobile-nav li a.active {
    color: var(--primary-red);
    background-color: rgba(220, 53, 69, 0.05);
    border-left-color: var(--primary-red);
}

.mobile-auth-li {
    margin-top: auto; /* Push to bottom */
    padding: 20px 25px;
    border-top: 2px solid #f0f0f0;
}

.btn-sidebar-auth, .btn-sidebar-logout {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px;
    border-radius: 5px;
    margin-bottom: 10px;
    font-weight: 600;
}

.btn-sidebar-auth {
    background-color: var(--primary-blue);
    color: white !important;
}

.btn-sidebar-logout {
    background-color: #f8f9fa;
    color: var(--primary-red) !important;
    border: 1px solid #ddd;
}

/* Active States */
body.nav-active {
    overflow: hidden;
}

body.nav-active .mobile-nav-overlay {
    opacity: 1;
    visibility: visible;
}

body.nav-active .mobile-nav {
    transform: translateX(0);
}

body.nav-active .mobile-menu-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.nav-active .mobile-menu-toggle span:nth-child(2) { opacity: 0; }
body.nav-active .mobile-menu-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.desktop-nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
}

.desktop-nav a {
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    color: var(--text-dark);
    position: relative;
    padding: 5px 0;
}

.desktop-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-blue);
    transition: width 0.3s ease;
}

.desktop-nav a:hover {
    color: var(--primary-blue);
    transform: translateY(-2px);
}

.desktop-nav a:hover::after {
    width: 100%;
}

.desktop-nav a.active {
    color: var(--primary-red);
}

.desktop-nav a.active::after {
    width: 100%;
    background-color: var(--primary-red);
}

.auth-buttons .btn-login, .auth-buttons .btn-profile {
    background-color: var(--primary-blue);
    color: white;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
}

/* User Logged Info Styles */
.user-logged-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 5px 10px;
    background: rgba(0, 86, 179, 0.05);
    border-radius: 30px;
    border: 1px solid rgba(0, 86, 179, 0.1);
}

.user-greeting {
    font-size: 0.85rem;
    color: var(--text-dark);
}

.user-greeting strong {
    color: var(--primary-blue);
}

.btn-profile-icon {
    font-size: 1.4rem;
    color: var(--primary-blue);
    display: flex;
    align-items: center;
    transition: transform 0.2s ease;
}

.btn-profile-icon:hover {
    transform: scale(1.1);
}

.btn-logout-header {
    font-size: 1.1rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    transition: color 0.2s ease, transform 0.2s ease;
    padding-left: 8px;
    border-left: 1px solid #e2e8f0;
}

.btn-logout-header:hover {
    color: var(--primary-red);
    transform: translateX(2px);
}

/* Page Content Main area */
.page-content {
    flex: 1 0 auto !important;
    min-height: calc(100vh - var(--header-height) - 150px);
    padding: 0; /* Removed global padding to fix Hero gap */
}

/* Main Footer - Standardized Tri-Anchor Layout */
.main-footer {
    background-color: #ffffff;
    color: #1e293b;
    padding: 25px 0 0 0; 
    border-top: 1px solid #000000;
    width: 100%;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; 
    width: 92%; /* Slightly reduced for better breathing room */
    margin: 0 auto 5px auto;
    padding: 0 40px; /* Safe padding for edges */
}

/* Column General Styling - Aligned by Anchors */
.footer-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* LEFT ANCHOR */
}

.footer-links {
    display: flex;
    flex-direction: column;
    align-items: center; /* CENTER ANCHOR */
}

.footer-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* RIGHT ANCHOR */
}

.footer-info h3, .footer-links h4, .footer-contact h4 {
    font-size: 0.9rem;
    font-weight: 800;
    margin-bottom: 12px;
    color: #0f172a;
    position: relative;
    width: fit-content;
}

.footer-info h3 { color: var(--primary-blue); text-transform: uppercase; }

/* Dynamic Red Underlines based on Anchor */
.footer-info h3::after, .footer-links h4::after, .footer-contact h4::after {
    content: '';
    position: absolute;
    bottom: -6px;
    width: 50px; /* Longer, more professional accent line */
    height: 2px;
    background-color: var(--primary-red);
}

.footer-info h3::after { left: 0; } /* Left Anchor */
.footer-links h4::after { left: 50%; transform: translateX(-50%); } /* Center Anchor */
.footer-contact h4::after { right: 0; } /* Right Anchor */

.footer-info p {
    line-height: 1.4;
    color: #475569;
    font-size: 0.82rem;
    margin: 0;
    text-align: left;
    max-width: 320px;
}

/* Horizontal Bulleted Links (Perfectly Centered) */
.footer-links ul {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: center;
}

.footer-links ul li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.footer-links ul li::before {
    content: '\2022';
    color: #334155;
    font-size: 1rem;
}

.footer-links ul li a {
    color: #475569;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.82rem;
    transition: color 0.3s;
}

/* Contact List - Right Anchored but Icons STATED Straight */
.social-links-list {
    list-style: none !important;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start; /* CRITICAL: Fixed straight icons vertical line */
}

.social-links-list li a {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    color: #475569;
    font-weight: 600;
    text-decoration: none;
}

.social-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Social Icon Data SVGs */
.icon-facebook { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%231877F2"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>'); }
.icon-youtube { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FF0000"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>'); }
.icon-instagram { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23E4405F"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4s1.791-4 4-4 4 1.79 4 4-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>'); }
.icon-tiktok { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000000"><path d="M12.525.02c1.31 0 2.591.214 3.794.608V7.58c-1.03-.66-2.255-1.03-3.537-1.03-.941 0-1.834.202-2.639.565v5.541c0 2.485 2.015 4.5 4.5 4.5s4.5-2.015 4.5-4.5v-11.455c1.45.965 2.768 2.186 3.857 3.636v4.619c-2.031-1.301-4.457-2.054-7.057-2.054-1.487 0-2.894.249-4.206.705v6.549c0 4.97-4.03 9-9 9s-9-4.03-9-9 4.03-9 9-9c.341 0 .675.019 1.002.055v6.232c-.314-.15-.658-.232-1.002-.232-1.242 0-2.25 1.008-2.25 2.25s1.008 2.25 2.25 2.25 2.25-1.008 2.25-2.25v-18.423c2.483.565 4.73 1.77 6.557 3.447v-4.832c-1.32-.442-2.731-.685-4.206-.685-1.391 0-2.709.215-3.951.611v-5.267c1.371-.34 2.808-.521 4.296-.521z"/></svg>'); }
.icon-generic { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%230056b3"><path d="M10.586 13.414a1 1 0 0 1 0 1.414 5 5 0 0 1-7.072 0 1 1 0 0 1 1.414-1.414 3 3 0 0 0 4.244 0 1 1 0 0 1 1.414 0zm9.9-9.9a5 5 0 0 0-7.07 0 1 1 0 0 0 1.413 1.414 3 3 0 0 1 4.244 0 1 1 0 0 1 1.413-1.414zM13.414 10.586a1 1 0 0 1 0 1.414l-4 4a1 1 0 1 1-1.414-1.414l4-4a1 1 0 0 1 1.414 0zm7.072 7.072a1 1 0 0 1 0 1.414 5 5 0 0 1-7.072 0 1 1 0 0 1 1.414-1.414 3 3 0 0 0 4.244 0 1 1 0 0 1 1.414 0z"/></svg>'); }
.icon-contact { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23dc3545"><path d="M20 4H4c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm0 2v.511l-8 6.223-8-6.223V6h16zM4 18V9.044l8 6.223 8-6.223V18H4z"/></svg>'); }

.footer-bottom {
    border-top: 1px solid #f8fafc;
    padding: 10px 0;
    text-align: center;
    font-size: 0.72rem;
    color: #94a3b8;
    background: #fbfcfd;
}

@media (max-width: 768px) {
    .main-footer { padding: 30px 15px 0 15px; }
    .footer-grid { grid-template-columns: 1fr; text-align: center; width: 90%; padding: 0 15px; }
    .footer-info, .footer-links, .footer-contact { align-items: center; }
    .footer-info h3::after, .footer-links h4::after, .footer-contact h4::after { left: 50%; transform: translateX(-50%); }
    .footer-links ul { flex-direction: column; gap: 10px; align-items: center; }
    .social-links-list { align-items: center; }
}

/* Mobile responsive fixes */
@media (max-width: 768px) {
    .main-header .container { display: flex; justify-content: flex-start; }
    .mobile-menu-toggle { display: flex; order: 3; margin-left: auto; }
    .logo { position: absolute; left: 50%; transform: translateX(-50%); order: 2; }
    .desktop-nav, .auth-buttons { display: none; }
}

/* Detail Modal Sub-Total Styles */
.item-events-table.no-fee-col {
    width: 100%;
}
.item-events-table.no-fee-col th, 
.item-events-table.no-fee-col td {
    border-bottom: 1px solid #f1f5f9;
}

.item-sub-total-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 2px dashed #e2e8f0;
}

.item-sub-total-row span:first-child {
    font-size: 0.95rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
}

.sub-total-val {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--primary-blue);
}
/* --- SHARED STATE: EMPTY (GRADIENT FLUID ORBS) --- */
.empty-state {
    position: relative;
    padding: 100px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #0f172a; /* Deep Navy Background */
    margin: 0; 
    min-height: 400px;
}

.fluid-orbs-canvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
    opacity: 0.8;
}

.empty-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(15,23,42,0.1) 0%, rgba(15,23,42,0.9) 100%);
    z-index: 2;
}

.empty-content-box {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 800px;
    padding: 20px;
}

.empty-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: #ffffff !important;
    margin: 0 auto 15px;
    line-height: 1.25;
    text-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.empty-desc {
    color: #cbd5e1 !important;
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 900px) {
    .empty-state { padding: 60px 15px; min-height: 300px; }
    .empty-title { font-size: 1.8rem; }
    .empty-desc { font-size: 1rem; }
}

/* --- SHARED STATE: TOURNAMENT EXIST (EVENT HERO) --- */
.event-hero {
    position: relative;
    padding: 30px 20px;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: white;
    text-align: center;
    box-shadow: 0 20px 40px -15px rgba(0,0,0,0.2);
    overflow: hidden;
    margin: 0;
    width: 100%;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-bg-image {
    position: absolute;
    top: -5%; left: -5%; width: 110%; height: 110%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    animation: kenBurns 20s infinite alternate ease-in-out;
    z-index: 0;
    opacity: 0.6;
}

.hero-overlay-dark {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.2) 100%);
    z-index: 1;
}

@keyframes kenBurns {
    0% { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.08) translate(-1%, -1%); }
}

.hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
}

.hero-title {
    font-size: 2.8rem;
    font-weight: 900;
    color: #ffffff;
    margin: 0 0 10px 0;
    text-shadow: 0 4px 15px rgba(0,0,0,0.3);
    text-transform: uppercase;
}

.hero-subtitle {
    font-size: 1.2rem;
    font-weight: 600;
    color: #cbd5e1;
    margin: 0;
    opacity: 0.9;
}

@media (max-width: 900px) {
    .event-hero { padding: 25px 15px; min-height: 150px; }
    .hero-title { font-size: 1.8rem; line-height: 1.2; }
    .hero-subtitle { font-size: 1rem; }
}
/* --- GLOBAL MOBILE RESPONSIVE GUARD --- */
@media (max-width: 630px) {
    /* Ép buộc 16px để chống iOS Auto-Zoom */
    input, select, textarea {
        font-size: 16px !important;
    }

    input[type="date"], 
    input[type="time"], 
    input[type="datetime-local"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        display: block !important;
    }
    
    /* Chống trượt trang sang trái do bất kỳ yếu tố nào tràn */
    html, body {
        overflow-x: clip !important; /* Changed from hidden to clip to prevent breaking sticky/fixed positioning context */
        position: relative;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}