/* Tùy chỉnh CSS bổ sung */

body {
    font-family: 'Be Vietnam Pro', 'Google Sans', Arial, Helvetica, sans-serif;
}


/* Đảm bảo navigation bar có z-index thấp hơn modal */

header {
    z-index: 10 !important;
}

nav {
    z-index: 10 !important;
}


/* Đảm bảo tất cả modal có z-index cao hơn navigation */

.modal,
[class*="modal"],
#order-modal,
#order-details-modal,
#mediaModal,
#editMediaModal {
    z-index: 1000 !important;
}

#order-modal,
#order-details-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

#order-modal.hidden,
#order-details-modal.hidden {
    display: none;
}

#order-modal-content,
#order-details-content {
    background: white;
    padding: 24px;
    border-radius: 8px;
    max-width: 800px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
}

.close-modal {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 1.5rem;
    color: #000;
}

#cart-count {
    font-size: 0.75rem;
    line-height: 1.25rem;
    font-weight: bold;
    cursor: pointer;
}

#cart-notification,
#success-notification {
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#cart-notification {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 50%;
    z-index: 2000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#success-notification {
    width: 40px;
    height: 40px;
}

.spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.admin-tabs a.tab-active {
    background-color: #1F3C88;
    color: white;
}

.bg-yellow-50 {
    background-color: #fefcbf;
}


/* Pending */

.bg-blue-50 {
    background-color: #dbeafe;
}


/* Confirmed */

.bg-orange-50 {
    background-color: #ffedd5;
}


/* Shipped */

.bg-green-50 {
    background-color: #d1fae5;
}


/* Delivered */

.bg-red-50 {
    background-color: #fee2e2;
}

.bg-yellow-100 {
    background-color: #fef08a;
}


/* Pending - Vàng đậm */

.bg-blue-100 {
    background-color: #bfdbfe;
}


/* Confirmed - Xanh dương đậm */

.bg-orange-100 {
    background-color: #fed7aa;
}


/* Shipped - Cam đậm */

.bg-green-100 {
    background-color: #bbf7d0;
}


/* Delivered - Xanh lá đậm */

.bg-red-100 {
    background-color: #f87171;
}


/* Cancelled - Đỏ đậm */


/* Cancelled */

.consultation_section {
    position: relative;
    /* hoặc để mặc định không cần position */
    width: 100vw;
    /* Chiếm toàn bộ chiều rộng viewport */
    margin-left: calc(-50vw + 50%);
    /* Căn giữa section */
    margin-right: calc(-50vw + 50%);
    /* Giữ các thuộc tính khác */
    background-size: cover;
    background-position: center;
    padding: 4rem;
    /* py-16 */
    overflow: visible;
    z-index: 10;
}

main.bg-white {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh;
}

.technology_section {
    order: 1 !important;
}

.expert_section {
    order: 2 !important;
}

.product_section {
    order: 3 !important;
}

.partners_section {
    order: 4 !important;
}

.consultation_section {
    order: 5 !important;
}

.coverage_section {
    order: 6 !important;
}

.news_section {
    order: 7 !important;
}


/* CSS bảo toàn định dạng lùi đầu dòng từ TinyMCE */


/* Cỡ chữ mặc định cho desktop */

.prose.prose-lg.max-w-none.mt-4.text-justify.post-content {
    font-size: 1rem !important;
    /* 16px - Tăng từ 14px */
    line-height: 1.75 !important;
}


/* Cỡ chữ cho mô tả sản phẩm trên desktop */

.mt-10.space-y-6.text-sm {
    font-size: 1rem !important;
    /* 16px - Tăng từ 14px */
    line-height: 1.75 !important;
}

.post-content p {
    margin: 0.5em 0;
}

.post-content ul,
.post-content ol {
    margin: 0.5em 0;
    padding-left: 2em;
    list-style-position: outside;
}

.post-content li {
    margin: 0.25em 0;
    display: list-item;
}


/* Bảo toàn định dạng lùi đầu dòng */

.post-content .indent-1 {
    margin-left: 2em;
}

.post-content .indent-2 {
    margin-left: 4em;
}

.post-content .indent-3 {
    margin-left: 6em;
}


/* Ghi đè CSS Tailwind prose để hiển thị bullet points */

.prose .post-content ul {
    list-style-type: disc !important;
    padding-left: 2em !important;
}

.prose .post-content ol {
    list-style-type: decimal !important;
    padding-left: 2em !important;
}

.prose .post-content li {
    margin: 0.25em 0 !important;
    display: list-item !important;
    list-style-position: outside !important;
}


/* Đảm bảo các thẻ ul, ol có list-style */

.post-content ul {
    list-style-type: disc !important;
}

.post-content ol {
    list-style-type: decimal !important;
}


/* Xử lý nested lists (danh sách lồng nhau) */

.post-content ul ul {
    list-style-type: circle !important;
    margin-left: 1em !important;
}

.post-content ul ul ul {
    list-style-type: square !important;
    margin-left: 1em !important;
}

.post-content ol ol {
    list-style-type: lower-alpha !important;
    margin-left: 1em !important;
}

.post-content ol ol ol {
    list-style-type: lower-roman !important;
    margin-left: 1em !important;
}


/* ===== CSS RESPONSIVE CHO MOBILE ===== */


/* Sửa vấn đề bài viết cách rìa màn hình quá xa trên mobile */

@media (max-width: 768px) {
    /* Giảm padding của bài viết trên mobile xuống còn khoảng cách vừa phải */
    #post-content {
        padding: 8px !important;
        margin: 0 !important;
    }
    /* Giảm padding của container chính xuống còn khoảng cách vừa phải */
    .lg\:col-span-2 {
        padding-right: 6px !important;
    }
    /* Giảm padding của trang chi tiết sản phẩm trên mobile */
    .lg\:col-span-2.mx-auto.max-w-7xl.px-4.py-10 {
        padding-left: 8px !important;
        padding-right: 8px !important;
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    /* Tối ưu breadcrumbs cho mobile */
    .text-sm.text-gray-500.mb-4 ol {
        flex-wrap: wrap;
        gap: 8px;
    }
    .text-sm.text-gray-500.mb-4 svg {
        width: 12px;
        height: 12px;
    }
    /* Tối ưu tiêu đề bài viết cho mobile */
    .text-3xl.font-bold.text-\[#0050A0\].uppercase.mb-4 {
        font-size: 1.5rem !important;
        line-height: 2rem !important;
        margin-bottom: 1rem !important;
    }
    /* Căn chỉnh meta info cho mobile - 2 cột thay vì 1 cột dọc */
    .border-y.border-dotted.border-gray-300.py-3 .grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5rem !important;
    }
    /* Tối ưu nội dung bài viết cho mobile */
    .prose.prose-lg.max-w-none.mt-4.text-justify.post-content {
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
    }
    /* Tối ưu tiêu đề sản phẩm cho mobile */
    .mb-6.text-2xl.font-bold.text-\[#1F3C88\].uppercase {
        font-size: 1.25rem !important;
        margin-bottom: 1rem !important;
    }
    /* Tối ưu grid sản phẩm cho mobile */
    .grid.grid-cols-1.gap-8.md\:grid-cols-2 {
        gap: 1rem !important;
    }
    /* Tối ưu ảnh sản phẩm cho mobile */
    .mb-4.w-\[400px\].h-\[280px\] {
        width: 100% !important;
        height: auto !important;
        max-height: 250px !important;
    }
    /* Tối ưu thumbnail slider cho mobile */
    #thumbnail-slider {
        gap: 0.5rem !important;
    }
    .w-\[100px\].h-\[100px\] {
        width: 80px !important;
        height: 80px !important;
    }
    /* Đồng bộ khoảng cách với rìa màn hình cho tất cả các trang khác */
    /* Trang tìm kiếm - container chính */
    .lg\:col-span-2[style*="padding-right: 15px"] {
        padding-right: 6px !important;
    }
    /* Trang danh sách bài viết - container chính */
    .container.mx-auto.px-4.py-8 {
        padding-left: 8px !important;
        padding-right: 8px !important;
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    /* Trang chủ - container chính */
    .container.mx-auto.max-w-7xl.px-4.pt-0.pb-8 {
        padding-left: 8px !important;
        padding-right: 8px !important;
        padding-top: 0 !important;
        padding-bottom: 1rem !important;
    }
    /* Trang chủ - section container */
    .max-w-7xl.mx-auto.pt-4 {
        padding-top: 0.5rem !important;
    }
    /* Trang chủ - grid container */
    .grid.grid-cols-1.lg\:grid-cols-3.gap-0.lg\:gap-6 {
        gap: 0 !important;
    }
    /* Product suggestion - container */
    .lg\:col-span-2[style*="padding-right: 15px"] {
        padding-right: 1px !important;
    }
    /* Sidebar - container */
    .lg\:col-span-1 {
        padding-left: 1px !important;
    }
}


/* Sửa vấn đề phần chia sẻ bài viết bị vỡ trên mobile */

@media (max-width: 768px) {
    /* Tối ưu container chia sẻ */
    .social-sharing-section {
        padding: 1rem !important;
        margin-top: 1.5rem !important;
    }
    /* Tối ưu tiêu đề chia sẻ */
    .social-sharing-section h3 {
        font-size: 1rem !important;
        margin-bottom: 1rem !important;
    }
    /* Tối ưu preview chia sẻ */
    .social-share-preview {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }
    .social-share-preview h4 {
        font-size: 0.875rem !important;
        margin-bottom: 0.75rem !important;
    }
    /* Tối ưu layout preview content */
    .preview-content {
        flex-direction: column !important;
        gap: 0.75rem !important;
        align-items: center !important;
    }
    /* Tối ưu ảnh preview */
    .preview-image {
        width: 100% !important;
        max-width: 200px !important;
        height: auto !important;
        aspect-ratio: 16/9 !important;
    }
    /* Tối ưu text preview */
    .preview-text {
        text-align: center !important;
        width: 100% !important;
    }
    .preview-title {
        font-size: 0.875rem !important;
        margin-bottom: 0.25rem !important;
    }
    .preview-description {
        font-size: 0.75rem !important;
        margin-bottom: 0.25rem !important;
    }
    .preview-url {
        font-size: 0.75rem !important;
        word-break: break-all !important;
    }
    /* Tối ưu nút chia sẻ */
    .social-share-buttons {
        flex-direction: column !important;
        gap: 0.5rem !important;
        margin: 1rem 0 !important;
    }
    .social-share-btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem !important;
    }
    /* Ẩn icon trên mobile để tiết kiệm không gian */
    .social-share-btn i {
        margin-right: 0.5rem !important;
    }
}


/* Tối ưu cho màn hình rất nhỏ */

@media (max-width: 480px) {
    #post-content {
        padding: 4px !important;
    }
    .lg\:col-span-2 {
        padding-right: 4px !important;
    }
    /* Giảm padding của trang chi tiết sản phẩm trên mobile nhỏ */
    .lg\:col-span-2.mx-auto.max-w-7xl.px-4.py-10 {
        padding-left: 4px !important;
        padding-right: 4px !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
    /* Đồng bộ khoảng cách với rìa màn hình cho tất cả các trang khác trên mobile nhỏ */
    /* Trang tìm kiếm - container chính */
    .lg\:col-span-2[style*="padding-right: 15px"] {
        padding-right: 4px !important;
    }
    /* Trang danh sách bài viết - container chính */
    .container.mx-auto.px-4.py-8 {
        padding-left: 4px !important;
        padding-right: 4px !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
    /* Trang chủ - container chính */
    .container.mx-auto.max-w-7xl.px-4.pt-0.pb-8 {
        padding-left: 4px !important;
        padding-right: 4px !important;
        padding-top: 0 !important;
        padding-bottom: 0.5rem !important;
    }
    /* Trang chủ - section container */
    .max-w-7xl.mx-auto.pt-4 {
        padding-top: 0.25rem !important;
    }
    /* Product suggestion - container */
    .lg\:col-span-2[style*="padding-right: 15px"] {
        padding-right: 4px !important;
    }
    /* Sidebar - container */
    .lg\:col-span-1 {
        padding-left: 4px !important;
    }
    .social-sharing-section {
        padding: 0.75rem !important;
    }
    .social-share-preview {
        padding: 0.75rem !important;
    }
    .preview-image {
        max-width: 150px !important;
    }
}