/* ============ COMPREHENSIVE MOBILE COMPACT STYLES ============ */
/* Thu nhỏ toàn bộ giao diện web cho điện thoại */

/* Mobile Base - Reduce everything */
@media (max-width: 768px) {

    /* Global font size reduction */
    html {
        font-size: 14px;
    }

    body {
        font-size: 0.9rem;
        line-height: 1.4;
    }

    /* Reduce all spacings */
    .mb-4 {
        margin-bottom: 0.75rem !important;
    }

    .mb-3 {
        margin-bottom: 0.5rem !important;
    }

    .mt-4 {
        margin-top: 0.75rem !important;
    }

    .mt-3 {
        margin-top: 0.5rem !important;
    }

    .py-5 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .py-4 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .px-4 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .px-5 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .p-4 {
        padding: 0.875rem !important;
    }

    .p-3 {
        padding: 0.5rem !important;
    }

    .gap-3 {
        gap: 0.5rem !important;
    }

    .gap-2 {
        gap: 0.35rem !important;
    }

    /* Navbar compact */
    .app-header {
        padding: 0.25rem 0 !important;
    }

    .navbar {
        padding: 0.25rem 0.5rem !important;
    }

    .navbar-brand {
        padding: 0.25rem 0 !important;
    }

    /* Sidebar compact */
    .left-sidebar {
        width: 240px !important;
    }

    .sidebar-nav ul .sidebar-item .sidebar-link {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.85rem !important;
    }

    /* Body wrapper compact */
    .body-wrapper {
        padding: 0.5rem !important;
    }

    .container-fluid {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* Cards compact */
    .card {
        margin-bottom: 0.75rem !important;
        border-radius: 0.5rem !important;
    }

    .card-body {
        padding: 0.75rem !important;
    }

    .card-header {
        padding: 0.5rem 0.75rem !important;
    }

    /* Tables compact */
    .table {
        font-size: 0.8rem !important;
    }

    .table th,
    .table td {
        padding: 0.4rem 0.5rem !important;
    }

    .table thead th {
        font-size: 0.75rem !important;
    }

    /* Forms compact */
    .form-control {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.875rem !important;
    }

    .form-label {
        font-size: 0.8rem !important;
        margin-bottom: 0.25rem !important;
    }

    /* Buttons compact */
    .btn {
        padding: 0.4rem 0.75rem !important;
        font-size: 0.85rem !important;
    }

    .btn-lg {
        padding: 0.5rem 1rem !important;
        font-size: 0.9rem !important;
    }

    .btn-sm {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.75rem !important;
    }

    /* Modals compact */
    .modal-header {
        padding: 0.75rem 1rem !important;
    }

    .modal-body {
        padding: 0.75rem !important;
    }

    .modal-footer {
        padding: 0.5rem 0.75rem !important;
    }

    .modal-title {
        font-size: 1rem !important;
    }

    /* Alerts compact */
    .alert {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.85rem !important;
    }

    /* Badges compact */
    .badge {
        font-size: 0.7rem !important;
        padding: 0.25rem 0.4rem !important;
    }

    .fs-5 {
        font-size: 0.9rem !important;
    }

    .fs-4 {
        font-size: 1rem !important;
    }

    .fs-3 {
        font-size: 0.75rem !important;
    }

    /* List groups compact */
    .list-group-item {
        padding: 0.5rem 0.75rem !important;
    }

    /* Nav pills/tabs compact */
    .nav-pills .nav-link,
    .nav-tabs .nav-link {
        padding: 0.4rem 0.75rem !important;
        font-size: 0.8rem !important;
    }

    /* Hero section compact */
    .hero-section {
        padding: 1rem 0 !important;
    }

    /* Section headers compact */
    .section-header {
        margin-bottom: 0.75rem !important;
    }

    .section-title {
        font-size: 1.1rem !important;
    }

    .section-description {
        font-size: 0.8rem !important;
        margin-top: 0.25rem !important;
    }

    /* Footer compact */
    footer,
    .footer {
        padding: 1rem 0.5rem !important;
        font-size: 0.8rem !important;
    }

    /* Icon boxes compact */
    .icon-box {
        width: 40px !important;
        height: 40px !important;
        font-size: 1rem !important;
    }

    .icon-box.large {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.25rem !important;
    }

    /* Podium cards compact */
    .podium-card .card-body {
        padding: 0.75rem !important;
    }

    .podium-medal {
        width: 35px !important;
        height: 35px !important;
        font-size: 0.9rem !important;
        top: -12px !important;
        right: -12px !important;
    }
}

/* Even more compact for small phones */
@media (max-width: 480px) {
    html {
        font-size: 13px;
    }

    body {
        font-size: 0.85rem;
    }

    /* Ultra compact spacing */
    .mb-4 {
        margin-bottom: 0.5rem !important;
    }

    .mb-3 {
        margin-bottom: 0.35rem !important;
    }

    .py-5 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .py-4 {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }

    .px-4,
    .px-5 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .container-fluid {
        padding-left: 0.35rem !important;
        padding-right: 0.35rem !important;
    }

    .card-body {
        padding: 0.5rem !important;
    }

    /* Smaller tables */
    .table {
        font-size: 0.75rem !important;
    }

    .table th,
    .table td {
        padding: 0.3rem 0.4rem !important;
    }

    /* Smaller buttons */
    .btn {
        padding: 0.35rem 0.5rem !important;
        font-size: 0.8rem !important;
    }

    /* Smaller forms */
    .form-control {
        padding: 0.4rem 0.5rem !important;
        font-size: 0.8rem !important;
    }

    /* Section title even smaller */
    .section-title {
        font-size: 1rem !important;
    }

    .section-title i {
        font-size: 1.1rem !important;
    }

    /* Icon boxes even smaller */
    .icon-box {
        width: 35px !important;
        height: 35px !important;
        font-size: 0.9rem !important;
    }

    .icon-box.large {
        width: 45px !important;
        height: 45px !important;
        font-size: 1.1rem !important;
    }
}

/* Extra small phones */
@media (max-width: 375px) {
    html {
        font-size: 12px;
    }

    .container-fluid {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }

    .card-body {
        padding: 0.4rem !important;
    }

    /* Very compact tables */
    .table {
        font-size: 0.7rem !important;
    }

    .table th,
    .table td {
        padding: 0.25rem 0.3rem !important;
    }

    .btn {
        padding: 0.3rem 0.4rem !important;
        font-size: 0.75rem !important;
    }

    .section-title {
        font-size: 0.95rem !important;
    }

    h1 {
        font-size: 1.3rem !important;
    }

    h2 {
        font-size: 1.15rem !important;
    }

    h3 {
        font-size: 1rem !important;
    }

    h4 {
        font-size: 0.9rem !important;
    }

    h5 {
        font-size: 0.85rem !important;
    }

    h6 {
        font-size: 0.8rem !important;
    }
}

/* ============ SPECIFIC PAGE COMPACT STYLES ============ */

/* Home page giftcode section compact */
@media (max-width: 768px) {

    #giftcode-section .table th,
    #giftcode-section .table td {
        padding: 0.35rem 0.4rem !important;
        font-size: 0.75rem !important;
    }

    #giftcode-section .badge {
        font-size: 0.65rem !important;
        padding: 0.2rem 0.35rem !important;
    }

    #giftcode-section code {
        font-size: 0.85rem !important;
        padding: 0.15rem 0.4rem !important;
    }
}

/* Download page compact */
@media (max-width: 768px) {
    .download-card .card-body {
        padding: 0.75rem !important;
    }

    .platform-icon {
        width: 35px !important;
        height: 35px !important;
        font-size: 1rem !important;
    }
}

/* Profile page compact */
@media (max-width: 768px) {
    .profile-header {
        padding: 1rem !important;
    }

    .stat-card {
        padding: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .stat-value {
        font-size: 1.25rem !important;
    }


    /* Header compact */
    .app-header {
        padding: 0.25rem 0 !important;
        min-height: auto !important;
    }

    .app-header .navbar {
        padding: 0.35rem 0.5rem !important;
        min-height: auto !important;
    }

    .app-header .container-sm {
        padding: 0 0.5rem !important;
    }

    /* Logo smaller on mobile */
    .navbar-brand img {
        max-height: 40px !important;
        width: auto !important;
    }

    /* Menu toggle button */
    .navbar-toggler {
        padding: 0.25rem 0.5rem !important;
        font-size: 1.25rem !important;
    }

    /* Nav links compact */
    .navbar-nav .nav-link {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.85rem !important;
    }

    /* User info in header */
    .user-meta-info h6 {
        font-size: 0.8rem !important;
        line-height: 1.2 !important;
    }

    .user-meta-info .fs-3 {
        font-size: 0.75rem !important;
    }
}

/* ============ OFFCANVAS SIDEBAR MOBILE OPTIMIZATION ============ */
@media (max-width: 768px) {

    /* Offcanvas menu */
    .offcanvas {
        width: 280px !important;
    }

    .offcanvas-start {
        width: 280px !important;
    }

    /* Sidebar brand logo */
    .brand-logo img {
        max-width: 140px !important;
        height: auto !important;
    }

    /* Sidebar nav items */
    .sidebar-nav .sidebar-item .sidebar-link {
        padding: 0.6rem 0.75rem !important;
        font-size: 0.85rem !important;
    }

    .sidebar-nav .sidebar-item .sidebar-link i {
        font-size: 1.1rem !important;
    }

    /* Nav small cap */
    .nav-small-cap {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.7rem !important;
    }

    /* Sidebar content padding */
    .simplebar-content {
        padding: 0 0.75rem !important;
    }

    /* User status boxes in sidebar */
    .unlimited-access {
        padding: 0.75rem !important;
        margin: 0.5rem 0 !important;
    }

    .unlimited-access h6 {
        font-size: 0.8rem !important;
        margin-bottom: 0.5rem !important;
    }

    .unlimited-access .btn {
        font-size: 0.75rem !important;
        padding: 0.35rem 0.7rem !important;
    }
}

/* ============ USER DROPDOWN MENU OPTIMIZATION ============ */
@media (max-width: 768px) {
    .dropdown-menu {
        font-size: 0.85rem !important;
    }

    .dropdown-menu .py-8 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .dropdown-menu .px-7 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .dropdown-menu h6 {
        font-size: 0.8rem !important;
    }

    /* Profile dropdown */
    .profile-dropdown {
        min-width: 250px !important;
    }

    .profile-dropdown .message-body a {
        padding: 0.5rem 0.75rem !important;
    }

    .profile-dropdown .p-6 {
        padding: 0.35rem !important;
    }

    .profile-dropdown img[width="18"] {
        width: 16px !important;
        height: 16px !important;
    }

    /* Upgrade plan box */
    .upgrade-plan {
        padding: 0.75rem !important;
    }

    .upgrade-plan h5 {
        font-size: 0.8rem !important;
    }
}

/* ============ HOME PAGE SPECIFIC OPTIMIZATION ============ */
@media (max-width: 768px) {

    /* Posts grid compact */
    .note-has-grid .single-note-item {
        margin-bottom: 0.75rem !important;
    }

    .note-has-grid .card-header {
        padding: 0.5rem !important;
    }

    .note-has-grid .card-body {
        padding: 0.5rem !important;
    }

    /* Post title */
    .note-has-grid h5 {
        font-size: 0.9rem !important;
        line-height: 1.3 !important;
    }

    /* Post footer */
    .note-has-grid .card-footer {
        padding: 0.4rem 0.5rem !important;
    }

    /* Giftcode section compact */
    .giftcode-card {
        margin-bottom: 0.5rem !important;
    }

    .giftcode-card .card-body {
        padding: 0.6rem !important;
    }

    .giftcode-code {
        font-size: 0.9rem !important;
        padding: 0.6rem !important;
        letter-spacing: 0.5px !important;
    }
}

/* ============ RANKING PAGES OPTIMIZATION ============ */
@media (max-width: 768px) {

    /* Podium section compact */
    .podium-card {
        margin-bottom: 0.75rem !important;
    }

    .podium-card .card-body {
        padding: 0.75rem !important;
    }

    .podium-card img.rounded-circle {
        width: 50px !important;
        height: 50px !important;
    }

    .podium-medal {
        width: 35px !important;
        height: 35px !important;
        font-size: 0.9rem !important;
        top: -10px !important;
        right: -10px !important;
    }

    /* Ranking table compact */
    .table-ranking {
        font-size: 0.75rem !important;
    }

    .table-ranking th,
    .table-ranking td {
        padding: 0.35rem 0.4rem !important;
        vertical-align: middle !important;
    }

    .table-ranking img.rounded-circle {
        width: 28px !important;
        height: 28px !important;
    }

    /* Ranking badges */
    .ranking-badge {
        font-size: 0.7rem !important;
        padding: 0.2rem 0.4rem !important;
    }

    .ranking-stat-badge {
        font-size: 0.65rem !important;
        padding: 0.15rem 0.35rem !important;
    }
}

@media (max-width: 480px) {
    .podium-card img.rounded-circle {
        width: 40px !important;
        height: 40px !important;
    }

    .podium-medal {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.75rem !important;
        top: -8px !important;
        right: -8px !important;
    }

    .table-ranking img.rounded-circle {
        width: 24px !important;
        height: 24px !important;
    }
}

/* ============ LOGIN/REGISTER PAGES OPTIMIZATION ============ */
@media (max-width: 768px) {
    .auth-card {
        padding: 1rem !important;
        margin: 0.5rem !important;
    }

    .auth-card .card-body {
        padding: 1rem !important;
    }

    .auth-card h3 {
        font-size: 1.25rem !important;
    }

    .auth-card .form-control {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.9rem !important;
    }
}

/* ============ DOWNLOAD PAGE OPTIMIZATION ============ */
@media (max-width: 768px) {
    .download-card {
        margin-bottom: 0.75rem !important;
    }

    .download-card .card-body {
        padding: 0.75rem !important;
    }

    .download-card h5 {
        font-size: 0.95rem !important;
    }

    .download-card p {
        font-size: 0.8rem !important;
    }

    .platform-icon {
        width: 35px !important;
        height: 35px !important;
        font-size: 1rem !important;
    }

    .file-info-badge {
        font-size: 0.7rem !important;
        padding: 0.3rem 0.5rem !important;
    }
}

/* ============ ANIMATIONS REDUCED FOR PERFORMANCE ============ */
@media (max-width: 768px) {

    /* Reduce animations on mobile for better performance */
    .animate-fade-in-up,
    .animate-fade-in,
    .animate-slide-in-right,
    .animate-slide-in-left,
    .animate-scale-in {
        animation-duration: 0.3s !important;
    }

    /* Disable hover transforms on touch devices */
    .card-hover:hover,
    .card-hover-subtle:hover,
    .enhanced-card:hover {
        transform: none !important;
    }
}

/* ============ TOUCH-FRIENDLY IMPROVEMENTS ============ */
@media (max-width: 768px) {

    /* Ensure all clickable elements are at least 44x44px */
    .btn,
    .nav-link,
    .sidebar-link,
    a.d-flex {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Increase spacing between clickable items */
    .sidebar-item {
        margin-bottom: 0.15rem !important;
    }

    .nav-item {
        margin-bottom: 0.1rem !important;
    }
}

/* ============ SCROLLBAR THIN FOR MOBILE ============ */
@media (max-width: 768px) {

    /* Thin scrollbar */
    ::-webkit-scrollbar {
        width: 4px !important;
        height: 4px !important;
    }

    ::-webkit-scrollbar-track {
        background: transparent !important;
    }

    ::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2) !important;
        border-radius: 4px !important;
    }
}