/* ============================================================
   STC Tablet / iPad Layout V1.9
   Chỉ kích hoạt khi JS nhận diện tablet cảm ứng (class .stc-tablet-layout).
   Mục tiêu: iPad Mini / iPad Pro / Surface Pro có bố cục tablet như mẫu:
   - Header vẫn có search + action icons + hamburger.
   - Drawer và bottom nav vẫn giữ để thao tác cảm ứng thuận tiện.
   - Home services 2x2 cân đối, không bị khoảng trống lớn phía trên.
   - Marketplace title + toolbar cùng hàng, grid 2 cột.
   Không tác động phone (<600) và desktop không cảm ứng.
   ============================================================ */

@media (min-width: 600px) and (max-width: 1399.98px) {
    /* ===== HEADER TABLET ===== */
    html.stc-tablet-layout .stc-header .stc-header-shell {
        width: 100%;
        max-width: none !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    html.stc-tablet-layout .stc-header .stc-navbar {
        min-height: 64px !important;
        gap: 10px !important;
        flex-wrap: nowrap !important;
    }

    html.stc-tablet-layout .stc-header .stc-header-logo {
        height: 34px !important;
        max-width: 160px !important;
    }

    /* Khác phone: iPad giữ thanh tìm kiếm ngay trên header như ảnh tham khảo. */
    html.stc-tablet-layout .stc-header .stc-header-actions > .stc-live-search.d-xxl-block {
        display: block !important;
        width: 190px !important;
        flex: 0 0 190px !important;
        margin-right: 2px !important;
    }

    html.stc-tablet-layout .stc-header .stc-header-search {
        height: 38px !important;
        border-radius: 12px !important;
        background: #f5f6f8 !important;
    }

    html.stc-tablet-layout .stc-header .stc-header-search input {
        font-size: 12.5px !important;
    }

    html.stc-tablet-layout .stc-header .stc-header-actions {
        gap: 3px !important;
        margin-left: auto !important;
        min-width: 0 !important;
        flex-wrap: nowrap !important;
    }

    html.stc-tablet-layout .stc-header .stc-icon-btn,
    html.stc-tablet-layout .stc-header .stc-menu-toggle {
        width: 36px !important;
        height: 36px !important;
        flex: 0 0 36px !important;
    }

    html.stc-tablet-layout .stc-header .stc-user-btn {
        width: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        padding: 2px !important;
        justify-content: center !important;
    }

    html.stc-tablet-layout .stc-header .stc-user-avatar {
        width: 34px !important;
        height: 34px !important;
        flex-basis: 34px !important;
    }

    html.stc-tablet-layout .stc-header .stc-user-meta,
    html.stc-tablet-layout .stc-header .stc-user-chevron {
        display: none !important;
    }

    /* Search đã có trên thanh trên; drawer không cần lặp lại search. */
    html.stc-tablet-layout .stc-header .stc-mobile-search-wrap {
        display: none !important;
    }

    /* Tablet drawer hơi rộng hơn phone. */
    html.stc-tablet-layout .stc-header .navbar-expand-xxl .stc-mobile-drawer,
    html.stc-tablet-layout .stc-header .navbar-expand-xxl .navbar-collapse {
        width: min(390px, 62vw) !important;
        max-width: 390px !important;
    }

    /* ===== HOME SERVICES TABLET ===== */
    html.stc-tablet-layout .stc-services-v22 {
        margin-top: 26px !important;
        padding-bottom: 18px !important;
    }

    html.stc-tablet-layout .stc-services-v22 .container {
        width: calc(100% - 32px) !important;
        max-width: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    html.stc-tablet-layout .stc-services-v22-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
        margin-top: 0 !important;
    }

    html.stc-tablet-layout .stc-service-v22-card {
        min-height: 184px !important;
        padding: 22px 46px 20px 22px !important;
        border-radius: 24px !important;
    }

    html.stc-tablet-layout .stc-service-v22-icon,
    html.stc-tablet-layout .stc-service-v22-icon img {
        width: 54px !important;
        height: 54px !important;
    }

    html.stc-tablet-layout .stc-service-v22-icon {
        flex-basis: 54px !important;
        margin-bottom: 13px !important;
    }

    html.stc-tablet-layout .stc-service-v22-body strong {
        font-size: 16px !important;
        line-height: 1.25 !important;
    }

    html.stc-tablet-layout .stc-service-v22-body > span {
        margin-top: 7px !important;
        font-size: 12.5px !important;
        line-height: 1.5 !important;
    }

    /* ===== MARKETPLACE TABLET ===== */
    html.stc-tablet-layout .stc-services-v22 + #market13Featured.market13-section,
    html.stc-tablet-layout #market13Featured.market13-section {
        padding-top: 34px !important;
        padding-bottom: 58px !important;
    }

    html.stc-tablet-layout #market13Featured .market13-container {
        width: calc(100% - 32px) !important;
        max-width: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Điểm chính khác ảnh lỗi: title và toolbar ở CÙNG một hàng trên iPad. */
    html.stc-tablet-layout #market13Featured .market13-topbar {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-end !important;
        justify-content: space-between !important;
        gap: 18px !important;
        margin-bottom: 24px !important;
    }

    html.stc-tablet-layout #market13Featured .market13-heading {
        flex: 1 1 260px !important;
        min-width: 210px !important;
        max-width: 290px !important;
    }

    html.stc-tablet-layout #market13Featured .market13-heading h2 {
        max-width: 250px !important;
        font-size: 29px !important;
        line-height: 1.08 !important;
        letter-spacing: -.035em !important;
    }

    html.stc-tablet-layout #market13Featured .market13-heading p {
        max-width: 250px !important;
        margin-top: 8px !important;
        font-size: 13px !important;
        line-height: 1.45 !important;
    }

    html.stc-tablet-layout #market13Featured .market13-controls {
        width: auto !important;
        flex: 0 1 auto !important;
        justify-content: flex-end !important;
        gap: 12px !important;
        overflow: visible !important;
    }

    html.stc-tablet-layout #market13Featured .market13-view-switch,
    html.stc-tablet-layout #market13Featured .market13-sort-group {
        min-height: 40px !important;
        flex: 0 0 auto !important;
    }

    html.stc-tablet-layout #market13Featured .market13-sort-group {
        max-width: none !important;
        overflow: visible !important;
    }

    html.stc-tablet-layout #market13Featured .market13-sort-btn {
        height: 32px !important;
        padding: 0 10px !important;
        gap: 6px !important;
        font-size: 11px !important;
    }

    html.stc-tablet-layout #market13Featured .market13-category-wrap {
        margin-bottom: 26px !important;
    }

    html.stc-tablet-layout #market13Featured .market13-category-scroll {
        gap: 8px !important;
    }

    html.stc-tablet-layout #market13Featured .market13-category-btn {
        height: 34px !important;
        padding: 0 14px !important;
        font-size: 11px !important;
    }

    html.stc-tablet-layout #market13Featured .market13-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px !important;
    }

    /* Tablet card vừa phải, không phình như mobile-stretched layout. */
    html.stc-tablet-layout #market13Featured .market13-card {
        border-radius: 18px !important;
    }

    /* Bottom nav giống mẫu tablet: 64px, không quá dày. */
    html.stc-tablet-layout .mobile-bottom-nav {
        height: calc(64px + env(safe-area-inset-bottom)) !important;
        min-height: 64px !important;
        padding-top: 3px !important;
    }

    html.stc-tablet-layout body {
        padding-bottom: calc(68px + env(safe-area-inset-bottom)) !important;
    }
}

/* iPad Mini portrait hẹp hơn: search thu nhẹ nhưng vẫn giữ trên header. */
@media (min-width: 600px) and (max-width: 900px) {
    html.stc-tablet-layout .stc-header .stc-header-actions > .stc-live-search.d-xxl-block {
        width: 168px !important;
        flex-basis: 168px !important;
    }

    html.stc-tablet-layout .stc-header .stc-header-logo {
        max-width: 145px !important;
        height: 32px !important;
    }

    html.stc-tablet-layout #market13Featured .market13-heading {
        max-width: 230px !important;
        min-width: 190px !important;
    }

    html.stc-tablet-layout #market13Featured .market13-heading h2 {
        max-width: 220px !important;
        font-size: 27px !important;
    }

    html.stc-tablet-layout #market13Featured .market13-sort-btn {
        padding-left: 8px !important;
        padding-right: 8px !important;
        font-size: 10.5px !important;
    }
}


/* ============================================================
   V1.9 FINAL TABLET REFINEMENTS
   iPad mini có CSS viewport khoảng 744px, vì vậy không thể dùng mốc 768px.
   Các rule này chỉ chạy khi JS đã xác nhận thiết bị cảm ứng/tablet.
   ============================================================ */
@media (min-width: 600px) and (max-width: 1399.98px) {
    /* Header tablet: giống desktop thu gọn + hamburger, không phải mobile phóng lớn. */
    html.stc-tablet-layout .stc-header .stc-header-shell {
        max-width: 980px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    html.stc-tablet-layout .stc-header .stc-navbar {
        min-height: 64px !important;
    }

    html.stc-tablet-layout .stc-header .stc-header-actions > .stc-live-search.d-xxl-block {
        display: block !important;
    }

    html.stc-tablet-layout .stc-header .stc-menu-toggle {
        display: inline-flex !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    /* Dịch vụ: 2x2, kích thước gần ảnh tham khảo và kéo lên sát header hơn. */
    html.stc-tablet-layout .stc-services-v22 {
        margin-top: 28px !important;
        padding-top: 0 !important;
        padding-bottom: 22px !important;
    }

    html.stc-tablet-layout .stc-services-v22 .container,
    html.stc-tablet-layout #market13Featured .market13-container {
        width: calc(100% - 32px) !important;
        max-width: 960px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    html.stc-tablet-layout .stc-services-v22-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }

    html.stc-tablet-layout .stc-service-v22-card {
        min-height: 170px !important;
        padding: 20px 44px 19px 22px !important;
        border-radius: 22px !important;
    }

    html.stc-tablet-layout .stc-service-v22-icon,
    html.stc-tablet-layout .stc-service-v22-icon img {
        width: 50px !important;
        height: 50px !important;
    }

    html.stc-tablet-layout .stc-service-v22-icon {
        flex-basis: 50px !important;
        margin-bottom: 11px !important;
    }

    html.stc-tablet-layout .stc-service-v22-body strong {
        font-size: 15px !important;
    }

    html.stc-tablet-layout .stc-service-v22-body > span {
        margin-top: 6px !important;
        font-size: 12px !important;
        line-height: 1.45 !important;
    }

    /* Marketplace tablet: heading + toolbar cùng hàng như ảnh tham khảo. */
    html.stc-tablet-layout .stc-services-v22 + #market13Featured.market13-section,
    html.stc-tablet-layout #market13Featured.market13-section {
        padding-top: 30px !important;
        padding-bottom: 58px !important;
    }

    html.stc-tablet-layout #market13Featured .market13-topbar {
        display: grid !important;
        grid-template-columns: minmax(190px, 1fr) auto !important;
        align-items: end !important;
        column-gap: 18px !important;
        row-gap: 12px !important;
        margin-bottom: 24px !important;
    }

    html.stc-tablet-layout #market13Featured .market13-heading {
        min-width: 0 !important;
        max-width: 280px !important;
    }

    html.stc-tablet-layout #market13Featured .market13-heading h2 {
        max-width: 250px !important;
        margin: 0 !important;
        font-size: 28px !important;
        line-height: 1.08 !important;
    }

    html.stc-tablet-layout #market13Featured .market13-heading p {
        max-width: 255px !important;
        margin-top: 7px !important;
        font-size: 12.5px !important;
        line-height: 1.45 !important;
    }

    html.stc-tablet-layout #market13Featured .market13-controls {
        width: auto !important;
        min-width: 0 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 10px !important;
        overflow: visible !important;
    }

    html.stc-tablet-layout #market13Featured .market13-view-switch {
        flex: 0 0 auto !important;
    }

    html.stc-tablet-layout #market13Featured .market13-sort-group {
        flex: 0 1 auto !important;
        max-width: calc(100vw - 315px) !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
    }

    html.stc-tablet-layout #market13Featured .market13-sort-group::-webkit-scrollbar {
        display: none !important;
    }

    html.stc-tablet-layout #market13Featured .market13-sort-btn {
        flex: 0 0 auto !important;
        height: 32px !important;
        padding: 0 9px !important;
        font-size: 10.5px !important;
        white-space: nowrap !important;
    }

    html.stc-tablet-layout #market13Featured .market13-category-wrap {
        margin-top: 0 !important;
        margin-bottom: 24px !important;
    }

    html.stc-tablet-layout #market13Featured .market13-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px !important;
    }

    /* Bottom nav tablet gọn giống mẫu. */
    html.stc-tablet-layout .mobile-bottom-nav {
        height: calc(64px + env(safe-area-inset-bottom)) !important;
        min-height: 64px !important;
    }
}

/* iPad mini portrait (~744px): vẫn là tablet, nhưng thu search/toolbar vừa đủ. */
@media (min-width: 600px) and (max-width: 767.98px) {
    html.stc-tablet-layout .stc-header .stc-header-actions > .stc-live-search.d-xxl-block {
        width: 172px !important;
        flex: 0 0 172px !important;
    }

    html.stc-tablet-layout .stc-header .stc-header-logo {
        height: 31px !important;
        max-width: 142px !important;
    }

    html.stc-tablet-layout .stc-header .stc-icon-btn,
    html.stc-tablet-layout .stc-header .stc-menu-toggle {
        width: 34px !important;
        height: 34px !important;
        flex-basis: 34px !important;
    }

    html.stc-tablet-layout .stc-header .stc-user-btn {
        width: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }

    html.stc-tablet-layout .stc-header .stc-user-avatar {
        width: 32px !important;
        height: 32px !important;
        flex-basis: 32px !important;
    }

    html.stc-tablet-layout .stc-service-v22-card {
        min-height: 158px !important;
        padding: 18px 40px 17px 20px !important;
    }

    html.stc-tablet-layout #market13Featured .market13-topbar {
        grid-template-columns: 205px minmax(0, 1fr) !important;
        column-gap: 12px !important;
    }

    html.stc-tablet-layout #market13Featured .market13-heading h2 {
        font-size: 27px !important;
    }

    html.stc-tablet-layout #market13Featured .market13-sort-group {
        max-width: none !important;
    }
}