/**
 * File Name: mobile-responsive.css
 * Theme: Astra Child - XTEINK
 * Description: Bộ quy tắc CSS tối ưu hóa hiển thị, trải nghiệm chạm và hiệu năng cho thiết bị di động (<= 768px).
 */

/* ==========================================================================
   1. GLOBAL RESET & ANTI-OVERFLOW (Chống tràn ngang & tối ưu viewport)
   ========================================================================== */

html,
body {
    max-width: 100%;
    overflow-x: hidden !important;
    position: relative;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

/* Tự động co giãn media elements */
img,
video,
canvas,
svg {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* Xử lý nhúng iframe/embed (Youtube, maps) tránh vỡ layout */
iframe,
embed,
object {
    max-width: 100%;
}

/* Bảng dữ liệu: tự động tạo thanh cuộn ngang độc lập khi bảng vượt khung */
.entry-content table,
.wp-block-table {
    display: block;
    width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
}

/* ==========================================================================
   2. TABLET & MOBILE SHARED OPTIMIZATION (Màn hình <= 768px)
   ========================================================================== */
@media screen and (max-width: 768px) {

    /* --- Container & Lề nội dung --- */
    .ast-container,
    .site-content .ast-container,
    .entry-content {
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box;
    }

    /* Giảm lề các block nội dung và trình soạn thảo Gutenberg */
    .entry-content > * {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* --- Typography (Tỷ lệ font chữ hiển thị thông thoáng) --- */
    body {
        font-size: 15px;
        line-height: 1.6;
    }

    h1, .entry-title {
        font-size: 1.75rem !important;
        line-height: 1.25 !important;
        margin-bottom: 0.75rem;
    }

    h2 {
        font-size: 1.45rem !important;
        line-height: 1.3 !important;
        margin-top: 1.5rem;
        margin-bottom: 0.65rem;
    }

    h3 {
        font-size: 1.25rem !important;
        line-height: 1.35 !important;
        margin-top: 1.25rem;
        margin-bottom: 0.5rem;
    }

    h4, h5, h6 {
        font-size: 1.1rem !important;
        line-height: 1.4 !important;
    }

    p {
        margin-bottom: 1.2rem;
    }

    /* --- Header & Thanh điều hướng (Astra Header) --- */
    .main-header-bar {
        padding: 8px 16px !important;
        min-height: 56px;
    }

    .site-branding .site-title {
        font-size: 1.3rem;
    }

    .site-header .custom-logo-link img {
        max-height: 40px;
        width: auto;
    }

    /* Nút Hamburger menu đạt chuẩn Touch Target (>= 44px x 44px) */
    .main-header-menu-toggle.ast-mobile-menu-trigger-minimal,
    .ast-mobile-menu-trigger-fill,
    .ast-mobile-menu-trigger-outline {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: 10px !important;
        border-radius: 6px;
        cursor: pointer;
    }

    /* Menu dropdown trên Mobile */
    .ast-mobile-header-content,
    .main-navigation-mobile {
        background-color: #ffffff;
    }

    .ast-mobile-header-content .main-header-menu .menu-item > a {
        display: block;
        min-height: 44px;
        line-height: 24px;
        padding: 10px 16px !important;
        font-size: 15px;
    }

    /* Nút mở rộng menu con (Submenu toggle arrow) */
    .ast-mobile-header-content .ast-menu-toggle {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* --- Form & Ngăn ngừa lỗi iOS Auto-Zoom --- */
    input[type="text"],
    input[type="email"],
    input[type="url"],
    input[type="password"],
    input[type="search"],
    input[type="number"],
    input[type="tel"],
    select,
    textarea {
        font-size: 16px !important; /* Bắt buộc 16px để Safari iOS không tự động zoom */
        line-height: 1.4;
        padding: 10px 12px;
        border-radius: 4px;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
    }

    /* --- Nút bấm CTA (Buttons) --- */
    .button,
    .wp-block-button__link,
    input[type="button"],
    input[type="reset"],
    input[type="submit"] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 12px 20px;
        font-size: 15px;
        font-weight: 600;
        touch-action: manipulation;
    }

    /* --- Grid sản phẩm (WooCommerce) & Bài viết (Blog) --- */
    .woocommerce ul.products,
    .ast-grid-layout {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px;
    }

    .woocommerce ul.products li.product,
    .ast-article-post {
        width: 100% !important;
        margin: 0 !important;
    }

    /* Nút thêm vào giỏ hàng hoặc CTA trong card sản phẩm */
    .woocommerce ul.products li.product .button {
        width: 100%;
        text-align: center;
        padding: 8px 10px;
        font-size: 13px;
    }

    /* --- Rendering Performance (Tăng tốc cuộn mượt và tối ưu Paint) --- */
    .site-footer,
    .ast-article-post,
    .comments-area {
        content-visibility: auto;
        contain-intrinsic-size: 0 400px;
    }
}

/* ==========================================================================
   3. SMALL MOBILE OPTIMIZATION (Màn hình điện thoại nhỏ <= 480px)
   ========================================================================== */
@media screen and (max-width: 480px) {

    /* Rút gọn lề biên màn hình để tận dụng tối đa diện tích xem */
    .ast-container,
    .site-content .ast-container,
    .entry-content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Typography cho màn hình nhỏ */
    h1, .entry-title {
        font-size: 1.5rem !important;
    }

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

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

    /* Các nút hành động chính (CTA) tự động bung toàn bộ chiều ngang */
    .wp-block-button,
    .wp-block-button__link,
    form.cart .button,
    .woocommerce #respond input#submit,
    .woocommerce a.button,
    .woocommerce button.button,
    .woocommerce input.button {
        width: 100% !important;
        text-align: center;
        justify-content: center;
    }

    /* Form tìm kiếm & các khối nhóm nút */
    .search-form {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .search-form .search-submit {
        width: 100%;
    }
}

/* ==========================================================================
   4. EXTRA-SMALL SCREENS (Màn hình siêu nhỏ < 380px)
   ========================================================================== */
@media screen and (max-width: 380px) {

    /* Đưa danh sách sản phẩm hoặc bài viết về 1 cột nếu màn hình quá hẹp */
    .woocommerce ul.products,
    .ast-grid-layout {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   5. XỬ LÝ FIX LỖI GIAO DIỆN MOBILE TRÊN MÀN HÌNH PC & TOPBAR XTEINK
   Áp dụng cho cả thiết bị mobile thực tế và khi bật chế độ Mobile trên PC
   ========================================================================== */

@media screen and (max-width: 768px), screen and (min-width: 769px) {

    /* Kích hoạt toàn bộ khi có class .xteink-mode-mobile */
    body.xteink-mode-mobile {
        font-size: 15px;
        line-height: 1.6;
    }

    /* --- FIX 1: Thanh Topbar Thời Tiết & Tìm Kiếm --- */
    body.xteink-mode-mobile .xteink-topbar,
    body.xteink-mode-mobile .ast-above-header,
    body.xteink-mode-mobile .header-widget-area {
        display: flex !important;
        flex-direction: column !important;
        padding: 8px 12px !important;
        gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Nhóm thời tiết / ngày tháng */
    body.xteink-mode-mobile .xteink-weather-date,
    body.xteink-mode-mobile .topbar-left {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        font-size: 12px !important;
    }

    /* Ô tìm kiếm Topbar tự động giãn full chiều ngang */
    body.xteink-mode-mobile .xteink-topbar-search,
    body.xteink-mode-mobile .topbar-right,
    body.xteink-mode-mobile .search-form {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    body.xteink-mode-mobile .search-form input[type="search"],
    body.xteink-mode-mobile input.search-field {
        width: 100% !important;
        box-sizing: border-box !important;
        height: 38px !important;
        font-size: 14px !important;
    }

    /* --- FIX 2: Xử lý chữ menu ngang bị xếp dọc --- */
    /* Ẩn thanh Primary Menu dạng Desktop khi đang ở chế độ Mobile */
    body.xteink-mode-mobile .main-navigation:not(.ast-header-break-point) .main-header-menu,
    body.xteink-mode-mobile .ast-desktop-header-content {
        display: none !important;
    }

    /* Ép hiển thị thanh Header Mobile và nút Hamburger */
    body.xteink-mode-mobile .main-header-bar {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 16px !important;
    }

    body.xteink-mode-mobile .main-header-menu-toggle {
        display: inline-flex !important;
    }

    /* Khối Logo & Branding */
    body.xteink-mode-mobile .site-branding {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
        max-width: calc(100% - 60px) !important;
    }

    body.xteink-mode-mobile .site-branding .site-title {
        font-size: 1.35rem !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Giữ nguyên chữ ngang không bao giờ bị bẻ từng ký tự */
    body.xteink-mode-mobile * {
        word-break: normal !important;
    }
}

/* ==========================================================================
   FIX LỖI CẮT Ô TÌM KIẾM TRÊN THANH TOPBAR CHO THIẾT BỊ DI ĐỘNG (<= 768px)
   ========================================================================== */
@media screen and (max-width: 768px) {

    /* 1. Cho phép Topbar xuống dòng linh hoạt và giảm khoảng đệm lề */
    .vnexpress-topbar {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 8px 12px !important;
        gap: 8px !important;
        height: auto !important;
    }

    /* 2. Cụm trên: Thời tiết, Địa điểm và Đăng nhập */
    .vnexpress-topbar .topbar-left-content {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        font-size: 12px !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    /* Rút gọn ngày tháng nếu màn hình quá nhỏ để tiết kiệm diện tích */
    .vnexpress-topbar .vne-date {
        font-size: 11.5px !important;
    }

    /* 3. Cụm dưới: Chứa form tìm kiếm */
    .vnexpress-topbar .topbar-right-content {
        display: flex !important;
        width: 100% !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
    }

    /* Ẩn dấu gạch đứng phân cách giữa search và auth trên mobile */
    .vnexpress-topbar .topbar-right-content > .vne-divider {
        display: none !important;
    }

    /* 4. Form tìm kiếm mở rộng 100% không bị co ép */
    .vnexpress-topbar .topbar-search-form {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
    }

    /* Ô input tìm kiếm bung hết chiều ngang, bo góc đẹp và bấm nhạy */
    .vnexpress-topbar .topbar-search-input,
    .vnexpress-topbar .topbar-search-input:focus {
        width: 100% !important;
        max-width: 100% !important;
        height: 34px !important;
        font-size: 13px !important;
        padding: 6px 36px 6px 12px !important;
        box-sizing: border-box !important;
    }

    /* Nút icon kính lúp căn giữa theo chiều dọc */
    .vnexpress-topbar .topbar-search-btn {
        right: 8px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 26px !important;
        height: 26px !important;
    }

    /* Đưa nút Đăng nhập lên hàng 1 hoặc giữ góc phải */
    .vnexpress-topbar .topbar-auth-box {
        flex-shrink: 0 !important;
    }
}

/* Tinh chỉnh bổ sung cho điện thoại nhỏ (<= 480px) */
@media screen and (max-width: 480px) {
    /* Ẩn bớt dấu gạch phân cách phụ ở hàng thời tiết */
    .vnexpress-topbar .topbar-left-content .vne-divider:last-of-type {
        margin: 0 2px !important;
    }

    .vnexpress-topbar .vne-location-box {
        font-size: 12px !important;
    }
}