@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* 1. FONT CHUNG */
* {
    font-family: 'Inter', sans-serif;
}

html {
    font-size: clamp(13px, 1.2vw, 18px);
}

/* 2. BIẾN MÀU & GRADIENT */
:root {
    --primary-orange: #F85D1F;
    --primary-red: #E53E3E;
    --primary-gray: #4B5563;
    --primary-yellow: #FFD700;
    --primary-green: #38A169;
    --text-base: #333333;
    --text-muted: #666666;
    --text-inverse: #FFFFFF;
    --gradient-sunset: linear-gradient(135deg, #FF6B35 0%, #E53E3E 50%, #FFD700 100%);
    --gradient-fire: linear-gradient(135deg, #FF4500 0%, #FF6B35 50%, #FFD700 100%);
    --gradient-warm: linear-gradient(135deg, #FFA500 0%, #FF6B35 50%, #E53E3E 100%);
}

/* 3. Mặc định text color cho toàn trang */
body {
    color: var(--text-base);
    background-color: var(--text-inverse);
    font-size: 1rem;
}
/* Các mức độ text */
.text-muted {
    color: var(--text-muted);
}

.text-light {
    color: rgba(51, 51, 51, 0.6);
}

/* 5. Text utility classes */
.text-primary {
    color: var(--primary-orange) !important;
}

.text-secondary {
    color: var(--primary-red) !important;
}

.text-warning {
    color: var(--primary-yellow) !important;
}

.text-orange {
    color: var(--primary-orange) !important;
}

.text-green {
    color: var(--primary-green) !important;
}

.text-gray {
    color: var(--primary-gray) !important;
}

/* 6. Gradient text */
.text-gradient {
    background: var(--gradient-sunset);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* 4. HERO BACKGROUND VỚI OVERLAY SVG */
.hero-bg {
    background: linear-gradient(135deg, #FF6B35 0%, #E53E3E 30%, #FFD700 70%, #FF6B35 100%);
    position: relative;
    overflow: hidden;
}

    .hero-bg::before {
        content: '';
        position: absolute;
        inset: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="a" cx="50%" cy="50%" r="50%"><stop offset="0%" style="stop-color:rgba(255,255,255,0.1)"/><stop offset="100%" style="stop-color:rgba(255,255,255,0)"/></radialGradient></defs><circle cx="200" cy="200" r="100" fill="url(%23a)"/><circle cx="800" cy="300" r="150" fill="url(%23a)"/><circle cx="400" cy="700" r="120" fill="url(%23a)"/></svg>') center/cover;
        opacity: 0.3;
    }

/* 5. LOADING SPINNER (ví dụ component nhỏ) */
.loading-spinner {
    border: 4px solid rgba(255, 107, 53, 0.3);
    border-top: 4px solid var(--primary-orange);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
}

.masonry-grid {
    column-count: 3;
    column-gap: 1rem;
}

.industry-card {
    transition: all 0.3s ease;
    cursor: pointer;
}

    .industry-card:hover .industry-overlay {
        opacity: 1;
    }

.industry-overlay {
    transition: opacity 0.3s ease;
}

.carousel-container {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .carousel-container::-webkit-scrollbar {
        display: none;
    }

/* Custom animations */
.mega-menu-enter {
    animation: slideDown 0.3s ease-out;
}

.mega-menu-exit {
    animation: slideUp 0.3s ease-out;
}

#btn-back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: none;
    z-index: 1000;
    background-color: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 10px 12px;
    cursor: pointer;
    font-size: 18px;
    transition: opacity 0.3s;
}

    #btn-back-to-top:hover {
        background-color: rgba(0,0,0,0.8);
    }


@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

@media (max-width: 768px) {
    .masonry-grid {
        column-count: 1;
    }
}


@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ===== GLOBAL ORANGE SCROLLBAR STYLES ===== */

/* Standard scrollbar for all elements */
::-webkit-scrollbar {
    width: 12px;
    height: 12px; /* For horizontal scrollbars */
}

::-webkit-scrollbar-track {
    background: #fef3e2; /* Orange-tinted light background */
    border-radius: 6px;
    box-shadow: inset 0 0 3px rgba(249, 115, 22, 0.1);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #f97316, #ef4444); /* Orange to red gradient */
    border-radius: 6px;
    border: 2px solid #fef3e2;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #ea580c, #dc2626); /* Darker on hover */
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

::-webkit-scrollbar-thumb:active {
    background: linear-gradient(to bottom, #c2410c, #b91c1c); /* Even darker when clicked */
}

/* Corner where horizontal and vertical scrollbars meet */
::-webkit-scrollbar-corner {
    background: #fef3e2;
}

/* ===== FIREFOX SCROLLBAR SUPPORT ===== */
* {
    scrollbar-width: thin;
    scrollbar-color: #f97316 #fef3e2; /* thumb color, track color */
}

/* ===== SPECIFIC VARIATIONS FOR DIFFERENT ELEMENTS ===== */

/* Thin scrollbar for smaller containers */
.thin-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.thin-scrollbar::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #f97316, #ea580c);
    border-radius: 4px;
    border: 1px solid #fef3e2;
}

/* Extra thick scrollbar for main content areas */
.thick-scrollbar::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}

.thick-scrollbar::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #f97316, #ef4444, #f59e0b);
    border-radius: 8px;
    border: 3px solid #fef3e2;
}

/* Transparent track variation */
.transparent-track::-webkit-scrollbar-track {
    background: transparent;
}

/* Rounded scrollbar for modern look */
.rounded-scrollbar::-webkit-scrollbar {
    width: 10px;
}

.rounded-scrollbar::-webkit-scrollbar-track {
    background: #fed7aa; /* Light orange */
    border-radius: 20px;
}

.rounded-scrollbar::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, #f97316, #ea580c, #dc2626);
    border-radius: 20px;
    border: 2px solid #fed7aa;
}

/* ===== DARK MODE VARIATIONS ===== */
@media (prefers-color-scheme: dark) {
    ::-webkit-scrollbar-track {
        background: #1f2937; /* Dark gray */
    }
    
    ::-webkit-scrollbar-thumb {
        background: linear-gradient(to bottom, #f97316, #ea580c);
        border: 2px solid #1f2937;
    }
    
    ::-webkit-scrollbar-corner {
        background: #1f2937;
    }
    
    * {
        scrollbar-color: #f97316 #1f2937;
    }
}

/* ===== RESPONSIVE SCROLLBAR ===== */
@media (max-width: 768px) {
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    
    ::-webkit-scrollbar-thumb {
        border: 1px solid #fef3e2;
        border-radius: 4px;
    }
}

@media (max-width: 480px) {
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
}

/* ===== HOVER EFFECTS FOR SCROLLABLE CONTAINERS ===== */
.scrollable-container {
    transition: all 0.3s ease;
}

.scrollable-container:hover::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #ea580c, #dc2626, #b91c1c);
    transform: scale(1.1);
}

/* ===== SCROLLBAR WITH ANIMATION ===== */
@keyframes scrollbar-glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(249, 115, 22, 0.5);
    }
    50% {
        box-shadow: 0 0 15px rgba(249, 115, 22, 0.8);
    }
}

.glow-scrollbar::-webkit-scrollbar-thumb:hover {
    animation: scrollbar-glow 2s ease-in-out infinite;
}

/* ===== UTILITY CLASSES ===== */
.hide-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;  /* Chrome, Safari, Opera */
}

.show-scrollbar-on-hover {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.show-scrollbar-on-hover::-webkit-scrollbar {
    width: 0px;
    transition: width 0.3s ease;
}

.show-scrollbar-on-hover:hover::-webkit-scrollbar {
    width: 12px;
}

.show-scrollbar-on-hover:hover {
    scrollbar-width: thin;
}