/* ========================================================================
   GLOBALS.CSS - CSS Variables & Component Styles
   ======================================================================== */

/* ========================================================================
   @LAYER BASE - CSS Variables & Base Styles
   ======================================================================== */
@layer base {
    /* CSS Variables */
    :root {
        /* Background Colors */
        --background: theme('colors.white');
        --foreground: theme('colors.gray.900');
        --card: theme('colors.white');
        --card-foreground: theme('colors.gray.900');
        --popover: theme('colors.white');
        --popover-foreground: theme('colors.gray.900');
        
        /* Primary Colors */
        --primary: theme('colors.emerald.600');
        --primary-foreground: theme('colors.white');

        /* Title Colors */
        --title: theme('colors.emerald.700');
        --title-foreground: theme('colors.white');
        
        /* Secondary Colors */
        --secondary: theme('colors.gray.100');
        --secondary-foreground: theme('colors.gray.900');
        
        /* Muted Colors */
        --muted: theme('colors.gray.100');
        --muted-foreground: theme('colors.gray.500');
        
        /* Accent Colors */
        --accent: theme('colors.gray.100');
        --accent-foreground: theme('colors.gray.900');
        
        /* Status Colors */
        --destructive: theme('colors.red.500');
        --destructive-foreground: theme('colors.white');
        
        /* Border & Input Colors */
        --border: theme('colors.gray.200');
        --input: theme('colors.gray.200');
        --ring: theme('colors.emerald.600');
        
        /* Border Radius */
        --radius: theme('spacing.2');
    }

    /* Base Element Styles */
    * {
        @apply border-gray-200;
    }

    body {
        @apply bg-white text-gray-900 font-sans;
        font-family: 'Roboto', sans-serif;
    }
}

/* ========================================================================
   @LAYER COMPONENTS - Reusable Component Styles
   ======================================================================== */
@layer components {
    /* Fix Container Response Theo Y Muon */
    /* Container */
    .container {
        @apply mx-auto px-4;
    }

    @media (min-width: 640px) {
        .container {
            max-width: 640px;
        }
    }

    @media (min-width: 768px) {
        .container {
            max-width: 768px;
            @apply px-6;
        }
    }

    @media (min-width: 900px) {
        .container {
            max-width: 1240px;
            @apply px-8;
        }
    }

    @media (min-width: 1280px) {
        .container {
            max-width: 1280px;
        }
    }

    @media (min-width: 1536px) {
        .container {
            max-width: 1536px;
        }
    }

    /* ========================================================================
       BUTTON GROUP: Các thuộc tính cho Button
       ======================================================================== */
    .btn {
        @apply inline-flex items-center justify-center text-sm px-4 py-2 h-10 rounded-md transition-all duration-200 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap overflow-hidden text-ellipsis;
    }

    .btn:focus {
        @apply outline-2 outline-offset-2 outline-transparent;
    }

    .btn:disabled {
        @apply cursor-not-allowed opacity-50;
    }

    .btn-overflow {
        @apply overflow-visible;
    }

    .btn-primary {
        @apply bg-gradient-to-r from-emerald-500 to-green-600 text-white shadow-sm hover:from-emerald-600 hover:to-green-700 hover:shadow-md focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2;
    }

    .btn-outline {
        @apply border border-gray-300 text-gray-700 hover:border-gray-400 hover:bg-gray-50 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2;
    }

    .btn-ghost {
        @apply border border-gray-300 text-gray-600 hover:bg-transparent hover:text-emerald-600 transition-colors duration-150;
    }

    .btn-sm {
        @apply h-8 px-3 py-1.5 text-sm;
    }

    .btn-md {
        @apply h-10 px-4 py-2 text-sm;
    }

    .btn-lg {
        @apply h-12 px-6 py-3 text-base;
    }

    /* Button additional sizes */
    .btn-xs {
        @apply px-2 py-1 h-6 text-xs rounded-sm;
    }

    .btn-xl {
        @apply px-8 py-4 h-14 text-lg;
    }

    /* Button variants */
    .btn-secondary {
        @apply bg-white border border-emerald-600 text-emerald-600 hover:bg-emerald-50 focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2;
    }

    .btn-warning {
        @apply bg-gradient-to-r from-orange-400 to-orange-600 hover:from-orange-500 hover:to-orange-700 text-white shadow-sm hover:shadow-md focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 transition-all;
    }

    .btn-danger {
        @apply bg-gradient-to-r from-red-500 to-red-700 hover:from-red-600 hover:to-red-800 text-white shadow-sm hover:shadow-md focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition-all;
    }

    .btn-success {
        @apply bg-gradient-to-r from-green-500 to-green-700 hover:from-green-600 hover:to-green-800 text-white shadow-sm hover:shadow-md focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-all;
    }

    /* ========================================================================
       INPUT GROUP: Các thuộc tính cho Input
       ======================================================================== */
    .input {
        @apply flex h-10 w-full rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-sm transition-colors duration-150 placeholder:text-gray-500 focus:border-emerald-500 focus:outline-none focus:ring-1 focus:ring-emerald-500 disabled:cursor-not-allowed disabled:opacity-50;
    }

    .input:focus::placeholder {
        @apply text-emerald-500;
    }

    .input-lg {
        @apply h-12 px-4 py-3 text-sm;
    }

    .input-sm {
        @apply h-8 px-2 py-1 text-sm;
    }

    .input-icon {
        @apply relative;
    }

    .input-icon input {
        @apply pl-10;
    }

    .input-icon .icon {
        @apply absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 pointer-events-none;
    }

    .input-icon input:focus + .icon {
        @apply text-emerald-500;
    }

    /* ========================================================================
       CARD GROUP: Các thuộc tính cho Card
       ======================================================================== */
    .card {
        @apply rounded-lg border border-gray-200 bg-white shadow-sm transition-shadow duration-300 hover:shadow-md;
    }

    .card:hover {
        @apply shadow-lg;
    }

    .card-title {
        @apply text-2xl font-semibold leading-tight tracking-tight;
    }

    .card-description {
        @apply text-sm text-gray-600;
    }

    .card-content {
        @apply p-6;
    }

    .card-header {
        @apply flex flex-col space-y-1.5 p-6 pb-4;
    }

    .card-content-no-header {
        @apply p-6;
    }

    .card-footer {
        @apply flex items-center p-6 pt-4;
    }

    /* ========================================================================
       BADGE GROUP: Các thuộc tính cho Badge
       ======================================================================== */
    .badge {
        @apply inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-semibold;
    }

    .badge-primary {
        @apply border border-emerald-200 bg-emerald-100 text-emerald-800;
    }

    .badge-title {
        @apply bg-emerald-100 backdrop-blur-sm text-emerald-700 text-xs sm:text-sm mb-4;
    }

    .badge-secondary { @apply bg-gray-50 text-gray-700 border border-gray-200; }
    .badge-success { @apply bg-green-50 text-green-700 border border-green-200; }
    .badge-warning { @apply bg-yellow-50 text-yellow-700 border border-yellow-200; }
    .badge-danger  { @apply bg-red-50 text-red-700 border border-red-200; }
    .badge-info    { @apply bg-emerald-50 text-emerald-700 border border-emerald-200; }
    .badge-hot     { @apply bg-gradient-to-r from-red-500 to-pink-500 text-white border-0 shadow-sm; }
    .badge-new     { @apply bg-gradient-to-r from-emerald-500 to-green-500 text-white border-0 shadow-sm; }
    .badge-trending{ @apply bg-gradient-to-r from-purple-500 to-indigo-500 text-white border-0 shadow-sm; }

    /* ========================================================================
       SECTION GROUP: Các thuộc tính cho Section
       ======================================================================== */
    .section {
        @apply py-12;
    }

    @media (min-width: 1024px) {
        .section {
            @apply py-16;
        }
    }

    .section-lg {
        @apply py-16;
    }

    .section-sm {
        @apply py-8 lg:py-12;
    }

    @media (min-width: 1024px) {
    .section-lg {
            @apply py-24;
        }
    }

    .section-title {
        @apply mb-2 text-2xl font-bold text-gray-900;
    }

    @media (min-width: 640px) {
        .section-title {
            @apply text-4xl;
        }
    }

    .section-subtitle {
        @apply mb-8 text-gray-600;
    }

    @media (min-width: 1024px) {
        .section-subtitle {
            @apply mb-12;
        }
    }

    /* ========================================================================
       TAB GROUP: Các thuộc tính cho Tab
       ======================================================================== */
    .tabs {
        @apply w-full;
    }

    .tabs .tabs-menus {
        @apply flex items-center justify-around gap-2 rounded-md bg-gray-100 p-1;
    }

    .tabs .tabs-menus > * {
        @apply flex-1;
    }

    .tabs .tab-menu {
        @apply btn border-none outline-none transition-all duration-150 disabled:pointer-events-none;
    }

    .tabs .tab-menu.active, .tabs .tab-menu:hover {
        @apply bg-[#2B8CEE] text-white shadow-sm;
    }

    .tabs .tab-content {
        @apply mt-2 p-4 px-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-500 hidden;
    }
    .tabs .tab-content.active {
        @apply block;
    }

    @media (max-width: 640px) {
        .tabs .tabs-menus {
            @apply overflow-x-auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .tabs .tabs-menus::-webkit-scrollbar {
            @apply hidden;
        }

        .tabs .tab-menu {
            @apply flex-shrink-0 whitespace-nowrap;
        }
    }

    /* ========================================================================
       JMODAL GROUP: jModal library styles (Optimized for performance & INP)
       ======================================================================== */
    
    /* Base jModal container */
    .jmodal {
        @apply fixed inset-0 z-50 bg-black/50 backdrop-blur-sm;
        height: 100vh;
        height: 100dvh;
    }

    /* Center content modal (auth, dialogs, etc) */
    .jmodal-content {
        @apply fixed left-1/2 top-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 border border-gray-200 bg-white shadow-2xl;
    }
    
    
    /* jModal slide animations (GPU-accelerated for better INP) */
    
    /* Slide from right (for cart, mobile menu) */
    .jmodal-slide-right {
        @apply fixed right-0 top-0 w-80 bg-white shadow-xl;
        height: 100vh;
        height: 100dvh;
        transform: translateX(100%) translateZ(0);
        transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform;
    }
    
    .jmodal-slide-right.jmodal-active {
        transform: translateX(0) translateZ(0);
    }
    
    /* Slide from left */
    .jmodal-slide-left {
        @apply fixed left-0 top-0 w-80 bg-white shadow-xl;
        height: 100vh;
        height: 100dvh;
        transform: translateX(-100%) translateZ(0);
        transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform;
    }
    
    .jmodal-slide-left.jmodal-active {
        transform: translateX(0) translateZ(0);
    }
    /* Slide from top (full width or centered) */
    .jmodal-slide-top {
        @apply fixed top-0 bg-white shadow-xl;
        max-height: 90vh;
        left: 50%;
        transform: translate(-50%, -100%) translateZ(0);
        transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform;
    }
    
    .jmodal-slide-top.jmodal-active {
        transform: translate(-50%, 0) translateZ(0);
    }
 
    /* Slide from bottom (sheet style - full width or centered) */
    .jmodal-slide-bottom {
        @apply fixed bottom-0 bg-white shadow-xl rounded-t-2xl;
        max-height: 90vh;
        left: 50%;
        transform: translate(-50%, 100%) translateZ(0);
        transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform;
    }
    
    .jmodal-slide-bottom.jmodal-active {
        transform: translate(-50%, 0) translateZ(0);
    }
    
    /* Prevent header CLS when modal opens (body gets padding-right) */
    body:has(.jmodal:not(.hidden)) header.sticky,
    body:has(.jmodal:not(.hidden)) header.fixed {
        /* Compensate for body padding by adjusting header width */
        width: 100%;
        /* Box-sizing ensures padding doesn't affect layout */
        box-sizing: border-box;
    }

    /* ========================================================================
       LOADING GROUP: Các thuộc tính cho Loading
       ======================================================================== */
    .loading {
        @apply animate-spin rounded-full border-2 border-gray-300 border-t-blue-600;
    }

    .loading-sm {
        @apply h-4 w-4;
    }

    /* ========================================================================
       TEXT UTILITIES GROUP: Các thuộc tính cho Text
       ======================================================================== */
    .text-gradient {
        @apply bg-gradient-to-r from-emerald-600 to-green-600 bg-clip-text text-transparent;
    }

    .text-responsive-xs {
        @apply text-xs;
    }

    @media (min-width: 640px) {
        .text-responsive-xs {
            @apply text-sm;
        }
    }

    .text-responsive-sm {
        @apply text-sm;
    }

    @media (min-width: 640px) {
        .text-responsive-sm {
            @apply text-base;
        }
    }

    .text-responsive-md {
        @apply text-base;
    }

    @media (min-width: 768px) {
        .text-responsive-md {
            @apply text-lg;
        }
    }

    .text-responsive-lg {
        @apply text-lg;
    }

    @media (min-width: 640px) {
        .text-responsive-lg {
            @apply text-xl;
        }
    }

    @media (min-width: 1024px) {
    .text-responsive-lg {
            @apply text-2xl;
        }
    }

    .text-responsive-xl {
        @apply text-2xl;
    }

    @media (min-width: 640px) {
    .text-responsive-xl {
            @apply text-5xl;
        }
    }

    /* Text color utilities (ported from initial CSS) */
    .text-primary   { @apply text-emerald-700 hover:text-green-400; }
    .text-secondary { @apply text-gray-600 hover:text-emerald-600; }
    .text-muted     { @apply text-gray-500 hover:text-gray-700; }
    .text-success   { @apply text-green-500 hover:text-green-700; }
    .text-warning   { @apply text-yellow-500 hover:text-yellow-700; }
    .text-danger    { @apply text-red-500 hover:text-red-700; }
    .text-info      { @apply text-emerald-500 hover:text-emerald-700; }
    .text-hot       { @apply text-red-500 hover:text-red-700; }

    /* ========================================================================
       HOVER EFFECTS GROUP: Các thuộc tính cho Hover Effects
       ======================================================================== */
    .hover-glow {
        @apply transition-shadow duration-200;
    }

    .hover-glow:hover {
        @apply shadow-lg;
    }

    /* ========================================================================
       FORM ELEMENTS GROUP: Các thuộc tính cho Form Elements
       ======================================================================== */
    .checkbox {
        @apply h-4 w-4 rounded border-gray-300 text-emerald-600 focus:ring-emerald-500;
    }

    .checkbox-sm { @apply w-3 h-3 text-emerald-600 border-gray-300 rounded focus:ring-emerald-500; }
    .checkbox-lg { @apply w-5 h-5 text-emerald-600 border-gray-300 rounded focus:ring-emerald-500; }

    /* ========================================================================
       LINK GROUP: Các thuộc tính cho Link
       ======================================================================== */
    .link {
        @apply text-emerald-600 transition-colors duration-150 hover:text-green-400;
    }

    .link-primary {
        @apply font-medium text-emerald-600 transition-colors duration-150 hover:text-green-400;
    }

    .link-secondary { @apply text-gray-600 hover:text-emerald-600 transition-colors; }
    .link-muted     { @apply text-gray-500 hover:text-gray-700 transition-colors; }
    .link-underline { @apply text-emerald-600 hover:text-green-400 underline underline-offset-2 transition-colors; }
    .link-no-underline { @apply text-emerald-600 hover:text-green-400 no-underline transition-colors; }

    /* ========================================================================
       ICON BACKGROUND GROUP: Các thuộc tính cho Icon Background
       ======================================================================== */
    .bg-icon {
        @apply mr-3 flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-r from-emerald-500 to-green-600 text-white;
    }

    .bg-icon i {
        @apply h-5 w-5 text-white;
    }

    /* ========================================================================
       TOGGLE GROUP: Các thuộc tính cho Toggle
       ======================================================================== */
    .toggle {
        @apply relative inline-flex cursor-pointer items-center;
    }

    .toggle input {
        @apply absolute h-px w-px -m-px overflow-hidden whitespace-nowrap border-0 p-0;
        clip: rect(0, 0, 0, 0);
    }

    /* ========================================================================
       TEXT TRUNCATION GROUP: Các thuộc tính cho Text Truncation
       ======================================================================== */
    .truncate {
        @apply overflow-hidden text-ellipsis whitespace-nowrap;
    }
    .one-line {
        @apply line-clamp-1;
    }
    .two-lines {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: break-word;
        line-height: 1.5;
    }
    .three-lines {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: break-word;
        line-height: 1.5;
    }
    .four-lines {
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: break-word;
        line-height: 1.5;
    }

    /* ========================================================================
       IMAGE FALLBACK GROUP: Các thuộc tính cho Image Fallback
       ======================================================================== */
    img {
        @apply transition-opacity duration-300;
    }

    img.loading {
        @apply opacity-50;
    }

    /* ========================================================================
       LAYOUT UTILITIES GROUP: Các thuộc tính cho Layout Utilities
       ======================================================================== */
    .flex-center {
        @apply flex items-center justify-center;
    }

    .flex-between {
        @apply flex items-center justify-between;
    }

    .flex-around {
        @apply flex items-center justify-around;
    }

    .flex-start {
        @apply flex items-center justify-start;
    }

    .flex-end {
        @apply flex items-center justify-end;
    }

    .flex-col-center {
        @apply flex flex-col items-center justify-center;
    }

    .flex-col-start {
        @apply flex flex-col items-start justify-start;
    }

    /* Grid auto layout utilities */
    .grid-cols-auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
    .grid-cols-auto-sm { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
    .grid-cols-auto-lg { grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); }

    /* ========================================================================
       SIZE UTILITIES GROUP: Các thuộc tính cho Size Utilities
       ======================================================================== */
    .size-4 {
        @apply h-4 w-4;
    }

    .size-5 {
        @apply h-5 w-5;
    }

    .size-6 {
        @apply h-6 w-6;
    }

    .size-8 {
        @apply h-8 w-8;
    }

    .size-10 {
        @apply h-10 w-10;
    }

    .size-12 {
        @apply h-12 w-12;
    }

    /* Fit utilities */
    .w-fit { width: fit-content; }
    .h-fit { height: fit-content; }

    /* Gradient helpers */
    .bg-gradient-primary { @apply bg-gradient-to-r from-emerald-500 to-green-600; }
    .bg-gradient-secondary { @apply bg-gradient-to-r from-gray-100 to-gray-200; }

    /* Shadow helpers */
    .shadow-soft { box-shadow: 0 2px 15px -3px rgba(0,0,0,0.07), 0 10px 20px -2px rgba(0,0,0,0.04); }
    .shadow-medium { box-shadow: 0 4px 25px -5px rgba(0,0,0,0.10), 0 10px 10px -5px rgba(0,0,0,0.04); }
    .shadow-strong { box-shadow: 0 10px 40px -10px rgba(0,0,0,0.15), 0 20px 25px -5px rgba(0,0,0,0.10); }

    /* ========================================================================
       CUSTOM SCROLLBAR GROUP: Các thuộc tính cho Custom Scrollbar
       ======================================================================== */
    .custom-scrollbar::-webkit-scrollbar {
        @apply w-1;
    }

    .custom-scrollbar::-webkit-scrollbar-track {
        @apply bg-slate-100;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb {
        @apply rounded-sm bg-slate-300;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
        @apply bg-slate-400;
    }

    /* Hide scrollbar */
    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }

    /* ========================================================================
       ITEM GROUP: Các thuộc tính cho Item Components
       ======================================================================== */
    .item-title{
        @apply text-title font-bold text-responsive-sm one-line mb-2;
    }

    .item-thumbnail {
        @apply mr-3 h-14 w-14 overflow-hidden rounded-lg;
    }

    .item-category {
        @apply text-xs font-bold text-title sm:text-sm;
    }

    .item-price {
        @apply text-base font-bold text-emerald-600 md:text-lg;
    }

    .item-icon {
        @apply h-4 w-4 text-primary;
    }

    .item-rating {
        @apply item-icon text-yellow-500;
    }

    .item-link {
        @apply text-xs font-medium text-emerald-600 transition-colors duration-150 hover:text-green-400 sm:text-sm;
    }

    /* ========================================================================
       PAGINATION GROUP
       ======================================================================== */
    .pagination {
        @apply flex items-center justify-center space-x-2;
    }

    .pagination-item {
        @apply flex h-10 w-10 items-center justify-center rounded-lg border border-gray-300 bg-white text-sm font-medium text-gray-500 transition-all duration-200 hover:bg-gray-50 hover:text-gray-700;
    }

    .pagination-item.active {
        @apply border-emerald-600 bg-gradient-to-r from-emerald-500 to-green-600 text-white hover:from-emerald-600 hover:to-green-700;
    }

    .pagination-item.disabled {
        @apply cursor-not-allowed opacity-50 hover:bg-white hover:text-gray-500;
    }

    /* ========================================================================
       ALERT GROUP
       ======================================================================== */
    .alert {
        @apply relative flex w-full items-start rounded-lg border p-4;
    }
    .alert-info { @apply border-blue-200 bg-gradient-to-r from-blue-50 to-blue-100 text-blue-900 shadow-sm; }
    .alert-success { @apply border-green-200 bg-gradient-to-r from-green-50 to-green-100 text-green-900 shadow-sm; }
    .alert-warning { @apply border-orange-200 bg-gradient-to-r from-orange-50 to-orange-100 text-orange-900 shadow-sm; }
    .alert-error { @apply border-red-200 bg-gradient-to-r from-red-50 to-red-100 text-red-900 shadow-sm; }
    .alert-light { @apply border-gray-200 bg-gradient-to-r from-gray-50 to-gray-100 text-gray-900 shadow-sm; }

    /* ========================================================================
       LOADING SIZES
       ======================================================================== */
    .loading-md { @apply h-6 w-6; }
    .loading-lg { @apply h-8 w-8; }

    /* ========================================================================
       SKELETON GROUP
       ======================================================================== */
    .skeleton { @apply animate-pulse rounded bg-gray-200; }
    .skeleton-text { @apply h-4 rounded bg-gray-200; }
    .skeleton-avatar { @apply h-10 w-10 rounded-full bg-gray-200; }

    /* ========================================================================
       RATING GROUP
       ======================================================================== */
    .rating { @apply flex items-center space-x-1; }
    .rating-star { @apply h-5 w-5 cursor-pointer transition-colors; }
    .rating-star.filled { @apply text-yellow-400; }
    .rating-star.empty { @apply text-gray-300 hover:text-yellow-400; }

    /* ========================================================================
       PROGRESS GROUP
       ======================================================================== */
    .progress { @apply w-full rounded-full bg-gray-200; }
    .progress-bar { @apply h-2 rounded-full transition-all duration-300; }
    .progress-sm .progress-bar { @apply h-1; }
    .progress-lg .progress-bar { @apply h-3; }
    .progress-primary .progress-bar { @apply bg-blue-600; }
    .progress-success .progress-bar { @apply bg-green-600; }
    .progress-warning .progress-bar { @apply bg-orange-500; }
    .progress-danger .progress-bar { @apply bg-red-600; }

    /* ========================================================================
       STATUS GROUP
       ======================================================================== */
    .status { @apply inline-flex items-center rounded-md px-2 py-1 text-xs font-medium; }
    .status-online  { @apply bg-green-100 text-green-800; }
    .status-offline { @apply bg-gray-100 text-gray-800; }
    .status-away    { @apply bg-yellow-100 text-yellow-800; }
    .status-busy    { @apply bg-red-100 text-red-800; }

    /* ========================================================================
       TOOLTIP GROUP
       ======================================================================== */
    .tooltip { @apply relative inline-block cursor-help; }
    .tooltip-content { @apply invisible absolute z-10 rounded-lg bg-gray-900 px-3 py-2 text-sm text-white shadow-lg opacity-0 transition-opacity duration-300; }
    .tooltip:hover .tooltip-content { @apply visible opacity-100; }
    .tooltip-top .tooltip-content { @apply bottom-full left-1/2 mb-2 -translate-x-1/2; }
    .tooltip-bottom .tooltip-content { @apply top-full left-1/2 mt-2 -translate-x-1/2; }
    .tooltip-left .tooltip-content { @apply right-full top-1/2 mr-2 -translate-y-1/2; }
    .tooltip-right .tooltip-content { @apply left-full top-1/2 ml-2 -translate-y-1/2; }

    /* ========================================================================
       BREADCRUMB GROUP
       ======================================================================== */
    .breadcrumb { @apply flex flex-wrap items-center gap-1; }
    .breadcrumb-item { @apply flex items-center whitespace-nowrap; }
    .breadcrumb-link { @apply flex items-center text-sm text-gray-500 transition-colors hover:text-gray-700; }
    .breadcrumb-current { @apply flex items-center text-sm font-medium text-gray-900; }
    .breadcrumb-separator { @apply mx-1 flex-shrink-0 text-gray-400; }
    .breadcrumb-pills { @apply gap-2; }
    .breadcrumb-pills .breadcrumb-item { @apply rounded-full bg-gray-100 px-3 py-1.5 text-sm transition-colors hover:bg-gray-200; }
    .breadcrumb-pills .breadcrumb-current { @apply rounded-full bg-blue-100 px-3 py-1.5 text-blue-700; }
    .breadcrumb-pills .breadcrumb-separator { @apply hidden; }
    .breadcrumb-background { @apply rounded-lg border bg-gray-50 p-4; }
    .breadcrumb-arrows .breadcrumb-separator::before { content: '→'; @apply text-sm text-gray-400; }
    .breadcrumb-dots .breadcrumb-separator::before { content: '•'; @apply text-sm text-gray-400; }
    .breadcrumb-minimal .breadcrumb-link { @apply text-blue-600 underline hover:text-blue-700; }
    .breadcrumb-card { @apply rounded-lg bg-white p-4 shadow-sm; }

    /* ========================================================================
       TEXT TRUNCATION EXTRAS & BREAK UTILITIES
       ======================================================================== */
    .table-truncate { @apply block truncate; }
    .flex-truncate-parent { @apply min-w-0; }
    .flex-truncate { @apply w-0 flex-1 truncate; }
    .break-word { word-break: break-word; overflow-wrap: break-word; }
    .break-all { word-break: break-all; }
    .no-break { word-break: normal; overflow-wrap: normal; }

    /* ========================================================================
       IMAGE FALLBACK
       ======================================================================== */
    img.error {
        @apply opacity-100;
        background-image: url('../images/notfound.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    /* ========================================================================
       TOGGLE TRACK (chi tiết)
       ======================================================================== */
    .toggle input + .toggle-track { @apply relative h-6 w-11 rounded-full bg-gray-200 transition-all; }
    .toggle input:focus + .toggle-track { @apply outline-none ring-4 ring-blue-300; }
    .toggle input:checked + .toggle-track { @apply bg-blue-600; }
    .toggle-track { position: relative; }
    .toggle-track::after {
        content: '';
        position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: white; border: 1px solid #d1d5db; border-radius: 50%; transition: all 0.2s;
    }
    .toggle input:checked + .toggle-track::after { transform: translateX(100%); border-color: white; }
    .toggle-sm input + .toggle-track { @apply h-5 w-9; }
    .toggle-sm .toggle-track::after { width: 16px; height: 16px; }
    .toggle-sm input:checked + .toggle-track::after { transform: translateX(16px); }
    .toggle-lg input + .toggle-track { @apply h-7 w-14; }
    .toggle-lg .toggle-track::after { width: 24px; height: 24px; }
    .toggle-lg input:checked + .toggle-track::after { transform: translateX(28px); }
}