/* =======================================================
   RESPONSIVE GLOBAL STYLES (MERGED)
   ======================================================= */

/* --- TABLET NGANG & DESKTOP NHỎ (Dưới 1200px) --- */
@media (max-width: 1199px) {
    /* Khối News */
    .tkp-home-news__grid { grid-template-columns: 1.5fr 1fr; }
    
    /* Trang chủ */
    .tkp-home-cats__grid { grid-template-columns: repeat(4, 1fr); }
    .tkp-home-search { flex-direction: column; align-items: stretch; }
    .tkp-home-search__controls { flex-direction: column; }
    
    /* Trang Sản phẩm */
    .tkp-product-grid { grid-template-columns: repeat(2, 1fr); }
    
    /* Trang 404 */
    .tkp-404-title { font-size: 40px; }
    .tkp-404-link-item { font-size: 16px; padding: 24px 16px; gap: 8px; }
}


/* --- TABLET DỌC (Dưới 1024px) --- */
@media (max-width: 1024px) {
    /* Trang Giới thiệu */
    .tkp-about-block__grid { gap: 40px; }
    .tkp-about-values { gap: 24px; }
    .tkp-about-capacity__grid img { height: 200px; }
    
    /* Trang Chi tiết sản phẩm */
    .tkp-product-detail__grid { gap: 40px; }
    .tkp-commitments { grid-template-columns: 1fr; }
    .tkp-tab-info-grid { grid-template-columns: 1fr; }
    
    /* Trang Tin tức */
    .tkp-news-featured__inner { grid-template-columns: 1fr; gap: 24px; }
    .tkp-news-grid { grid-template-columns: repeat(2, 1fr); }
    
    /* Trang Liên hệ */
    .tkp-contact-grid { gap: 40px; }
    .tkp-team-grid { grid-template-columns: 1fr; }
    .tkp-faq-grid { grid-template-columns: 1fr; }
}


/* --- TABLET DỌC NHỎ (Dưới 992px) --- */
@media (max-width: 991px) {
    /* Khối News */
    .tkp-home-news__grid { grid-template-columns: 1fr; }
    .tkp-home-news__small-list { border-left: none; padding-left: 0; border-top: 1px solid var(--tkp-color-border); padding-top: 32px; }
    
    /* Trang Sản phẩm (Sidebar to Drawer) */
    .tkp-shop-search__form { flex-wrap: wrap; }
    .tkp-shop-search__input { width: 100%; flex: auto; }
    .tkp-shop-layout__inner { grid-template-columns: 1fr; }
    .tkp-shop-filter-toggle { display: inline-flex; margin-bottom: 24px; }
    .tkp-shop-toolbar__title { display: none; }
    
    .tkp-sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        width: 300px;
        height: 100vh;
        background: var(--tkp-color-white);
        z-index: 1000;
        padding: 24px;
        box-shadow: 4px 0 24px rgba(0,0,0,0.1);
        overflow-y: auto;
        transition: left var(--tkp-transition);
    }
    .tkp-sidebar.is-open { left: 0; }
    .tkp-sidebar__header-mobile { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; border-bottom: 1px solid var(--tkp-color-border); padding-bottom: 16px; }
    .tkp-sidebar__header-mobile h3 { font-family: var(--tkp-font-heading); font-size: 20px; }
    .tkp-sidebar__close { background: none; border: none; font-size: 24px; cursor: pointer; }
    .tkp-sidebar > .tkp-section-title { display: none; }
    
    /* Trang Tìm kiếm */
    .tkp-search-product-grid { grid-template-columns: 1fr; }
    
    /* Trang 404 */
    .tkp-404-hero__inner { flex-direction: column; text-align: center; }
    .tkp-404-hero__content { flex: 1; max-width: 100%; margin-bottom: 40px; }
    .tkp-404-label::before { display: none; }
    .tkp-404-label { padding-left: 0; }
    .tkp-404-actions { justify-content: center; }
    .tkp-404-hero__truck { flex: 1; justify-content: center; }
    .tkp-404-hero__truck img { max-width: 90%; transform: translateX(0); }
    .tkp-404-links { flex-wrap: wrap; }
    .tkp-404-link-item { flex: 0 0 50%; border-bottom: 1px solid var(--tkp-color-border); }
    .tkp-404-link-item:nth-child(even) { border-right: none; }
}


/* --- MOBILE (Dưới 768px) --- */
@media (max-width: 767px) {
    /* Trang Chủ */
    .tkp-home-hero__title { font-size: 36px; }
    .tkp-home-hero__actions { flex-direction: column; }
    .tkp-home-cats__grid { grid-template-columns: repeat(2, 1fr); }
    .tkp-home-featured__grid,
    .tkp-home-about__inner,
    .tkp-home-process__grid,
    .tkp-home-news__grid { grid-template-columns: 1fr; }
    .tkp-article-card--large {display: flow; }
    .tkp-home-process__grid {
        grid-template-columns: repeat(2, 1fr) !important; /* Ép chia 2 cột đều nhau */
        gap: 32px 16px !important; /* Khoảng cách hàng 32px, cột 16px */
    }

    /* Thu nhỏ kích thước số để vừa vặn không gian 2 cột */
    .tkp-process-step__number {
        font-size: 40px !important; 
        gap: 12px !important; /* Rút ngắn khoảng cách giữa số và đường kẻ ngang */
        margin-bottom: 12px !important;
    }

    /* Căn chỉnh lại tiêu đề bên dưới */
    .tkp-process-step__title {
        font-size: 15px !important;
        line-height: 1.4 !important;
    }
    /* Component Bài viết dọc/ngang */
    .tkp-article-card--large,
    .tkp-article-card--horizontal { flex-direction: unset; }
    .tkp-article-card--horizontal .tkp-article-card__img { flex: auto; }
    .tkp-article-card--horizontal .tkp-article-card__img img { width: 100%; height: auto; aspect-ratio: 16/9; }
    /* Trang Giới thiệu */
    .tkp-about-block__grid,
    .tkp-about-mission__top,
    .tkp-about-values,
    .tkp-about-capacity__grid { grid-template-columns: 1fr; flex-direction: column; }
    .tkp-about-block__img { order: -1; margin-bottom: 24px; }
    .tkp-about-mission__img { order: -1; margin-bottom: 24px; }
    .tkp-about-title { font-size: 28px; }
    .tkp-about-mission__top { margin-bottom: 40px; }
    .tkp-about-partners__logos { justify-content: center; gap: 24px; }
    .tkp-about-partners__logos img { height: 36px; }
    
    /* Trang Sản phẩm */
    .tkp-product-grid { grid-template-columns: 1fr; }
    .tkp-shop-toolbar { flex-direction: column; align-items: flex-start; gap: 16px; }
    .tkp-shop-toolbar__right { width: 100%; justify-content: space-between; }
    .tkp-product-grid.is-list-view .tkp-product-card { flex-direction: column; align-items: stretch; }
    .tkp-product-grid.is-list-view .tkp-product-card__img { flex: auto; }
    
    /* Trang Chi tiết sản phẩm */
    .tkp-product-detail__grid { grid-template-columns: 1fr; }
    .tkp-product-meta { flex-direction: column; gap: 8px; }
    .tkp-product-actions { grid-template-columns: 1fr; }
    .tkp-info-table th, .tkp-info-table td { display: block; width: 100%; border-bottom: none; }
    .tkp-info-table tr { display: block; border-bottom: 1px solid var(--tkp-color-border); }
    .tkp-tabs__nav { margin-right: -16px; padding-right: 16px; }
    .tkp-related-products .tkp-product-grid { grid-template-columns: 1fr !important; }
    
    /* Trang Tin tức */
    .tkp-news-grid { grid-template-columns: 1fr; }
    .tkp-news-featured__title { font-size: 24px; }
    
    /* Trang Chi tiết Bài viết */
    .tkp-article-h1 { font-size: 32px; }
    .tkp-list-item { grid-template-columns: 1fr; gap: 12px; }
    .tkp-article-gallery { grid-template-columns: 1fr; }
    .tkp-expert-quote { flex-direction: column; padding: 24px; gap: 16px; }
    .tkp-article-footer { flex-direction: column; align-items: flex-start; }
    .tkp-article-author { flex-direction: column; align-items: center; text-align: center; }
    
    /* Trang Liên hệ */
    .tkp-contact-grid { grid-template-columns: 1fr; gap: 40px; }
    .tkp-form-row { grid-template-columns: 1fr; }
    .tkp-contact-hero__img img { height: 240px; }
    .tkp-contact-form-wrap { padding: 24px 16px; }
    .tkp-contact-map img { min-height: 240px; }
    
    /* Trang Tìm kiếm */
    .tkp-header-search-form { display: none; }
    .tkp-search-cta__actions { flex-direction: column; }
    .tkp-search-section__header { flex-direction: column; align-items: flex-start; }
    .tkp-product-card--horizontal-2col { flex-direction: column; align-items: flex-start; }
    .tkp-product-card--horizontal-2col .tkp-product-card__img { width: 100%; aspect-ratio: 16/9; }
    
    /* Trang 404 */
    .tkp-404-title { font-size: 32px; }
    .tkp-404-actions { flex-direction: column; }
    .tkp-404-link-item { flex: 0 0 100%; border-right: none; }
    .tkp-header__search-dropdown {
        padding: 15px 10px; /* Thu gọn khoảng cách viền trên mobile */
    }
    .tkp-header-search-form {
        flex-wrap: wrap !important; /* Bắt buộc cho phép rớt dòng */
        gap: 10px;
    }
    .tkp-header-search-form .tkp-search-input {
        min-width: 0 !important; /* Xóa bỏ chốt chặn 300px */
        flex: 1 1 calc(100% - 50px) !important; /* Ô nhập chiếm full, chừa lại 50px cho nút X */
        order: 1; /* Nằm đầu tiên */
        padding: 12px 15px; /* Giảm nhẹ padding */
    }
    .tkp-header-search-form .tkp-search-close {
        order: 2; /* Nằm cạnh ô nhập */
        padding: 5px;
        margin-left: auto;
        width: 30px;
    }
    .tkp-header-search-form .tkp-search-submit {
        order: 3; /* Rớt xuống dòng dưới cùng */
        width: 100% !important; /* Bung rộng bằng màn hình */
        justify-content: center; /* Ra giữa */
        margin-top: 5px;
    }
}

/* --- FIX LỖI TRÀN VIỀN (OVERFLOW) TRANG GIỚI THIỆU TRÊN MOBILE --- */
@media (max-width: 768px) {
    /* 1. Khóa chết trục ngang của toàn trang, cấm scroll ngang */
    html, body {
        overflow-x: hidden;
        width: 100%;
    }

    /* 2. Ép tất cả các Container luôn bám sát lề, không bị đẩy ra ngoài */
    .tkp-container {
        width: 100% !important;
        max-width: 100%;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box;
    }

    /* 3. Bắt buộc chữ phải tự động rớt dòng, không được chạy dài */
    .tkp-section p, 
    .tkp-section h1, 
    .tkp-section h2, 
    .tkp-section h3,
    .tkp-section span {
        white-space: normal !important;
        word-wrap: break-word;
        word-break: break-word;
    }

    /* 4. Ép các thẻ đang chia cột (Flex/Grid) phải chuyển thành hàng dọc (Stack) */
    .tkp-mission-wrap,
    .tkp-mission-grid,
    .tkp-about-grid { /* Bro kiểm tra nếu class HTML của bro tên khác thì thay vào đây nhé */
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 20px !important;
        box-sizing: border-box;
    }

    /* Đảm bảo các box/icon bên trong không bị phình to */
    .tkp-mission-item,
    .tkp-feature-card,
    .tkp-about-item {
        width: 100% !important;
        margin: 0 !important;
        padding-right: 10px; /* Chừa một chút lề phải cho thoáng */
        box-sizing: border-box;
    }
}

/* --- TỐI ƯU BREADCRUMB (ĐIỀU HƯỚNG) TRÊN MOBILE --- */
@media (max-width: 768px) {
    .tkp-breadcrumb {
        display: flex !important;
        flex-wrap: nowrap !important; /* Cấm rớt dòng */
        overflow-x: auto; /* Cho phép cuộn ngang */
        white-space: nowrap;
        -webkit-overflow-scrolling: touch; /* Cuộn mượt trên iOS */
        align-items: center;
        gap: 6px; 
        padding-bottom: 5px; /* Chừa không gian tránh bị lẹm chữ */
        margin-bottom: 15px !important;
    }
    
    /* Ẩn thanh cuộn ngang đi cho thẩm mỹ */
    .tkp-breadcrumb::-webkit-scrollbar {
        display: none;
    }
    
    .tkp-breadcrumb a, 
    .tkp-breadcrumb span {
        white-space: nowrap !important;
        font-size: 13px !important; /* Hạ size chữ xuống một xíu cho thanh thoát */
        display: inline-block;
    }

    /* Xử lý đoạn tiêu đề bài viết dài ngoằng ở cuối cùng */
    .tkp-breadcrumb span:last-child {
        max-width: 200px; /* Giới hạn độ dài */
        overflow: hidden;
        text-overflow: ellipsis; /* Thêm dấu ... nếu chữ dài hơn 200px */
    }
}