/* ============================================
   RESPONSIVE CSS - FRONTEND
   Đảm bảo hiển thị vừa vặn trên mọi kích thước màn hình
   ============================================ */

/* ========== CONTAINER & LAYOUT ========== */
@media (max-width: 1400px) {
    .uk-container-center {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (max-width: 768px) {
    .uk-container-center {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .main-content {
        padding: 15px 0;
    }
}

@media (max-width: 480px) {
    .uk-container-center {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .main-content {
        padding: 10px 0;
    }
}

/* ========== GRID SYSTEM ========== */
@media (max-width: 960px) {
    /* UK Grid responsive */
    .uk-width-large-1-2,
    .uk-width-large-1-3,
    .uk-width-large-1-4,
    .uk-width-large-2-3,
    .uk-width-large-3-4 {
        width: 100%;
    }
    
    .uk-width-medium-1-2,
    .uk-width-medium-1-3,
    .uk-width-medium-2-3 {
        width: 100%;
    }
}

/* ========== ORDER PAGES ========== */
.my-order-container {
    padding: 20px 15px;
}

@media (max-width: 768px) {
    .my-order-container {
        padding: 15px 10px;
    }
    
    .my-order-container .row {
        margin: 0;
    }
    
    .my-order-container .col-12,
    .my-order-container .col-md-4,
    .my-order-container .col-md-8,
    .my-order-container .col-lg-3,
    .my-order-container .col-lg-9 {
        padding-left: 10px;
        padding-right: 10px;
        margin-bottom: 20px;
    }
    
    /* Order table responsive */
    .booking-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    
    .booking-table thead,
    .booking-table tbody,
    .booking-table tr {
        display: block;
    }
    
    .booking-table th,
    .booking-table td {
        display: block;
        text-align: left;
        padding: 8px 10px;
        border-bottom: 1px solid #eee;
    }
    
    .booking-table th {
        font-weight: 600;
        background: #f8f9fa;
    }
    
    /* Order detail responsive */
    .order-section .ibox {
        margin-bottom: 20px;
    }
    
    .order-section .ibox-title {
        padding: 15px;
        font-size: 14px;
    }
    
    .order-section .products-container {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    
    .order-section .product-item {
        display: flex;
        flex-direction: column;
        padding: 15px;
        border: 1px solid #eee;
        border-radius: 8px;
    }
    
    .order-section .product-item img {
        width: 100%;
        max-width: 100px;
        height: auto;
        margin-bottom: 10px;
    }
}

@media (max-width: 480px) {
    .page-title {
        font-size: 24px !important;
    }
    
    .booking-table th,
    .booking-table td {
        font-size: 12px;
        padding: 6px 8px;
    }
    
    .order-btn {
        font-size: 12px;
        padding: 4px 12px;
    }
    
    .btn-action {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
}

/* ========== PAYMENT PAGE ========== */
@media (max-width: 992px) {
    .payment-container {
        padding: 0 15px;
        margin: 30px auto;
    }
    
    .payment-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }
    
    .payment-header {
        padding: 30px 15px;
    }
    
    .payment-header h1 {
        font-size: 28px;
    }
    
    .payment-header .order-code {
        font-size: 20px;
    }
}

@media (max-width: 768px) {
    .payment-container {
        padding: 0 10px;
        margin: 20px auto;
    }
    
    .payment-header {
        padding: 20px 15px;
        border-radius: 8px;
    }
    
    .payment-header h1 {
        font-size: 24px;
    }
    
    .payment-header .order-code {
        font-size: 18px;
    }
    
    .payment-header p {
        font-size: 14px;
    }
    
    .payment-card {
        padding: 20px 15px;
    }
    
    .payment-card h3 {
        font-size: 16px;
    }
    
    .info-item {
        flex-direction: column;
        gap: 5px;
        padding: 8px 0;
    }
    
    .info-label {
        flex: 1;
        font-size: 13px;
    }
    
    .info-value {
        font-size: 13px;
    }
    
    .bank-row {
        flex-direction: column;
        gap: 5px;
        padding: 10px 0;
    }
    
    .bank-label {
        flex: 1;
        font-size: 13px;
    }
    
    .bank-value {
        flex: 1;
        font-size: 13px;
        word-break: break-word;
    }
    
    .copy-btn {
        padding: 4px 8px;
        font-size: 11px;
        margin-top: 5px;
    }
    
    .summary-section {
        padding: 20px 15px;
    }
    
    .summary-row {
        font-size: 14px;
        padding: 8px 0;
    }
    
    .warning-box {
        padding: 15px;
        font-size: 13px;
    }
    
    .action-buttons {
        flex-direction: column;
        gap: 10px;
    }
    
    .btn-confirm,
    .btn-cancel {
        width: 100%;
        padding: 12px 20px;
    }
}

@media (max-width: 480px) {
    .payment-header h1 {
        font-size: 20px;
    }
    
    .payment-header .order-code {
        font-size: 16px;
    }
    
    .payment-card {
        padding: 15px 10px;
    }
    
    .countdown-timer {
        font-size: 14px;
    }
    
    #countdown-display {
        font-size: 16px;
    }
}

/* ========== CONTACT PAGE ========== */
@media (max-width: 768px) {
    .contact-container-1 {
        padding: 20px 0;
    }
    
    .contact-container-1 .uk-grid {
        flex-direction: column;
    }
    
    .contact-infor {
        margin-bottom: 30px;
        text-align: center;
    }
    
    .contact-form {
        padding: 20px;
    }
    
    .heading-form {
        font-size: 20px;
        margin-bottom: 20px;
    }
    
    .contact-form .uk-grid {
        flex-direction: column;
    }
    
    .contact-form .uk-width-large-1-2 {
        width: 100%;
        margin-bottom: 15px;
    }
    
    .contact-form textarea {
        min-height: 100px;
    }
    
    #contact-submit-btn {
        width: 100%;
        padding: 12px 20px;
    }
}

@media (max-width: 480px) {
    .contact-form {
        padding: 15px;
    }
    
    .heading-form {
        font-size: 18px;
    }
    
    .input-text {
        font-size: 14px;
        padding: 10px 12px;
    }
}

/* ========== CART PAGE ========== */
@media (max-width: 768px) {
    .container-cart {
        padding: 10px !important;
    }
    
    .cart-detailpage .cart-info {
        border-right: 0;
        border-bottom: 1px solid #d9d9d9;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }
    
    .cart-detailpage .cart-cart {
        padding: 20px 0;
    }
    
    .cart-detailpage .container-cart .heading-2 {
        font-size: 22px;
    }
    
    .cart-detailpage .product-block {
        flex-direction: column;
        gap: 15px;
    }
    
    .cart-detailpage .product-block .thumb {
        width: 100%;
        text-align: center;
    }
    
    .cart-detailpage .product-block .info {
        width: 100%;
    }
    
    .cart-detailpage .discount-block .discount-box {
        flex-direction: column;
        height: auto;
    }
    
    .cart-detailpage .discount-block .discount-box input {
        width: 100%;
        position: relative;
        margin-bottom: 10px;
        border-radius: 16px;
    }
    
    .cart-detailpage .discount-block .discount-box a {
        width: 100%;
        position: relative;
        border-radius: 16px;
    }
}

@media (max-width: 480px) {
    .cart-detailpage .container-cart .heading-2 {
        font-size: 20px;
    }
    
    .cart-detailpage .cart-foot label {
        font-size: 12px;
        padding: 12px 15px;
    }
    
    .cart-detailpage .checkout-btn {
        font-size: 12px;
        height: 45px;
    }
}

/* ========== OLIGO DETAILS ========== */
@media (max-width: 768px) {
    .oligo-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .oligo-table {
        min-width: 800px;
        font-size: 12px;
    }
    
    .oligo-table th,
    .oligo-table td {
        padding: 8px 6px;
        font-size: 12px;
    }
    
    .oligo-summary {
        padding: 15px !important;
        flex-direction: column;
        gap: 15px;
    }
    
    .oligo-summary .row {
        margin: 0;
    }
    
    .oligo-summary .col-md-4 {
        padding: 10px;
        margin-bottom: 10px;
    }
    
    #plates-container-frontend,
    #plates-container-cart {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .plate-container {
        min-width: 600px;
    }
}

@media (max-width: 480px) {
    .oligo-table {
        min-width: 700px;
        font-size: 11px;
    }
    
    .oligo-table th,
    .oligo-table td {
        padding: 6px 4px;
        font-size: 11px;
    }
    
    .plate-container {
        min-width: 500px;
    }
    
    .plate-grid {
        gap: 2px;
    }
    
    .plate-well {
        min-width: 30px;
        min-height: 30px;
        font-size: 9px;
    }
}

/* ========== PRODUCT PAGES ========== */
@media (max-width: 768px) {
    .product-catalogue {
        padding: 15px 0;
    }
    
    .product-catalogue .aside {
        margin-bottom: 30px;
    }
    
    .product-list {
        margin-top: 20px;
    }
    
    .product-item {
        margin-bottom: 20px;
    }
    
    .guest-notice-banner {
        flex-direction: column;
        text-align: center;
        padding: 20px 15px;
    }
    
    .guest-notice-banner .notice-icon {
        margin-bottom: 15px;
    }
    
    .guest-notice-banner .notice-actions {
        flex-direction: column;
        gap: 10px;
        width: 100%;
        margin-top: 15px;
    }
    
    .guest-notice-banner .notice-btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .product-catalogue .heading-2 {
        font-size: 24px;
    }
    
    .product-item .title {
        font-size: 14px;
    }
    
    .guest-notice-banner .notice-title {
        font-size: 18px;
    }
    
    .guest-notice-banner .notice-text {
        font-size: 14px;
    }
}

/* ========== DISTRIBUTION PAGE ========== */
@media (max-width: 768px) {
    .page-agency {
        padding: 20px 0;
    }
    
    .panel-agency .uk-grid {
        flex-direction: column;
    }
    
    .agency-search {
        margin-bottom: 30px;
    }
    
    .agency-map {
        min-height: 400px;
    }
    
    .agency-list {
        max-height: 300px;
        overflow-y: auto;
        margin-bottom: 20px;
    }
}

@media (max-width: 480px) {
    .panel-agency .heading {
        font-size: 24px;
    }
    
    .agency-item {
        padding: 15px;
        margin-bottom: 15px;
    }
    
    .agency-item .title {
        font-size: 16px;
    }
}

/* ========== AUTH PAGES ========== */
@media (max-width: 768px) {
    .auth-container {
        padding: 20px 15px;
    }
    
    .form-signup,
    .form-login {
        padding: 25px 20px;
    }
    
    .form-signup h3,
    .form-login h3 {
        font-size: 24px;
    }
    
    .password-toggle-icon {
        right: 15px;
    }
}

@media (max-width: 480px) {
    .form-signup,
    .form-login {
        padding: 20px 15px;
    }
    
    .form-signup h3,
    .form-login h3 {
        font-size: 20px;
    }
    
    .form-label {
        font-size: 14px;
    }
    
    .form-control {
        font-size: 14px;
        padding: 10px 12px;
    }
    
    .btn-custom {
        font-size: 14px;
        padding: 10px 20px;
    }
}

/* ========== PROFILE PAGE ========== */
@media (max-width: 768px) {
    .profile-header-card {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
    
    .profile-avatar {
        margin-bottom: 20px;
    }
    
    .info-cards-container {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .info-card {
        padding: 15px;
    }
}

@media (max-width: 480px) {
    .profile-header-card {
        padding: 15px;
    }
    
    .profile-name {
        font-size: 20px;
    }
    
    .membership-badge {
        font-size: 14px;
    }
    
    .info-card .card-label {
        font-size: 12px;
    }
    
    .info-card .card-value {
        font-size: 14px;
    }
}

/* ========== NOTIFICATION PAGE ========== */
@media (max-width: 768px) {
    .notification-list-page {
        padding: 0;
    }
    
    .notification-item-page {
        padding: 15px;
        margin-bottom: 15px;
    }
    
    .notification-icon-page {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    
    .notification-content-page {
        padding-left: 15px;
    }
    
    .notification-title-page {
        font-size: 15px;
    }
    
    .notification-message-page {
        font-size: 13px;
    }
    
    .notification-time-page {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .notification-item-page {
        padding: 12px;
    }
    
    .notification-icon-page {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }
    
    .notification-title-page {
        font-size: 14px;
    }
    
    .notification-message-page {
        font-size: 12px;
    }
}

/* ========== LAB BOOKING PAGE ========== */
@media (max-width: 768px) {
    .lab-container {
        padding: 20px 15px;
    }
    
    .lab-header {
        padding: 20px 0;
    }
    
    .lab-title {
        font-size: 28px;
    }
    
    .lab-section {
        margin-bottom: 30px;
    }
    
    .lab-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .lab-card {
        padding: 20px;
    }
    
    .lab-date-time-section {
        flex-direction: column;
        gap: 20px;
    }
    
    .lab-time-slots {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .lab-summary {
        padding: 20px;
    }
    
    .lab-form-row {
        flex-direction: column;
        gap: 15px;
    }
    
    .lab-form-group {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .lab-title {
        font-size: 24px;
    }
    
    .lab-section-title {
        font-size: 18px;
    }
    
    .lab-card {
        padding: 15px;
    }
    
    .lab-time-slots {
        grid-template-columns: 1fr;
    }
    
    .lab-form-input {
        font-size: 14px;
        padding: 10px 12px;
    }
    
    .lab-btn {
        width: 100%;
        padding: 12px 20px;
    }
}

/* ========== BREADCRUMB ========== */
@media (max-width: 768px) {
    .page-breadcrumb {
        padding: 15px 0;
    }
    
    .page-breadcrumb ul {
        flex-wrap: wrap;
        gap: 5px;
    }
    
    .page-breadcrumb li {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .page-breadcrumb li {
        font-size: 12px;
    }
}

/* ========== PAGINATION ========== */
@media (max-width: 768px) {
    .pagination-container {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .pagination {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .pagination-summary {
        font-size: 13px;
    }
    
    .page-link {
        min-width: 32px;
        height: 32px;
        font-size: 13px;
        padding: 0 8px;
    }
}

@media (max-width: 480px) {
    .page-link {
        min-width: 28px;
        height: 28px;
        font-size: 12px;
        padding: 0 6px;
    }
}

/* ========== FILTER BAR ========== */
@media (max-width: 768px) {
    .booking-filter,
    .filters-row {
        flex-direction: column;
        gap: 10px;
    }
    
    .filter-item {
        width: 100%;
    }
    
    .booking-filter .form-select,
    .booking-filter .form-control {
        width: 100%;
        height: 40px !important;
    }
}

/* ========== TABLES ========== */
@media (max-width: 768px) {
    /* Make tables horizontally scrollable on mobile */
    .table-responsive,
    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    table thead,
    table tbody,
    table tr {
        display: table;
        width: 100%;
        table-layout: fixed;
    }
    
    table th,
    table td {
        padding: 8px 6px;
        font-size: 12px;
    }
}

/* ========== MODAL ========== */
@media (max-width: 768px) {
    .modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
    }
    
    .modal-content {
        border-radius: 8px;
    }
    
    .modal-header {
        padding: 15px;
    }
    
    .modal-title {
        font-size: 18px;
    }
    
    .modal-body {
        padding: 15px;
    }
    
    .modal-footer {
        padding: 15px;
    }
}

/* ========== UTILITY CLASSES ========== */
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
    
    .show-mobile {
        display: block !important;
    }
    
    .text-center-mobile {
        text-align: center !important;
    }
    
    .full-width-mobile {
        width: 100% !important;
    }
}

@media (min-width: 769px) {
    .show-mobile {
        display: none !important;
    }
}

/* ========== SIDEBAR ========== */
@media (max-width: 768px) {
    .customer-sidebar {
        margin-bottom: 30px;
    }
    
    .sidebar-menu {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .sidebar-menu li {
        flex: 1 1 auto;
        min-width: calc(50% - 5px);
    }
    
    .sidebar-menu a {
        padding: 12px 15px;
        font-size: 14px;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .sidebar-menu li {
        min-width: 100%;
    }
}

/* ========== GENERAL IMPROVEMENTS ========== */
@media (max-width: 768px) {
    /* Improve touch targets */
    a, button, input[type="submit"], input[type="button"] {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Better spacing */
    .mb-3,
    .mb-4 {
        margin-bottom: 20px !important;
    }
    
    .mt-3,
    .mt-4 {
        margin-top: 20px !important;
    }
    
    /* Better text sizes */
    h1 { font-size: 28px; }
    h2 { font-size: 24px; }
    h3 { font-size: 20px; }
    h4 { font-size: 18px; }
    h5 { font-size: 16px; }
    h6 { font-size: 14px; }
}

@media (max-width: 480px) {
    h1 { font-size: 24px; }
    h2 { font-size: 20px; }
    h3 { font-size: 18px; }
    h4 { font-size: 16px; }
    h5 { font-size: 14px; }
    h6 { font-size: 12px; }
}

/* ========== PRINT STYLES ========== */
@media print {
    .header-wrapper,
    .footer-wrapper,
    .phusa-header-top,
    .phusa-footer,
    .btn,
    button,
    .no-print {
        display: none !important;
    }
    
    .main-content,
    .page-content {
        padding: 0;
        margin: 0;
    }
}