/* Trường Thịnh Telecom v3.6.1 — fluid desktop content/grid system.
   Header/Footer geometry stays locked by tt-shell-lock.css.
   Only #tt-main content and item grids become wider/fluid on large desktops. */

@media (min-width:768px){
  body.tt-desktop{
    --tt-content-max:var(--tt-container);
    --tt-fluid-gap:clamp(12px,.85vw,22px);
  }

  /* All grid children are allowed to shrink. Prevents min-content overflow from long titles/prices/buttons. */
  body.tt-desktop #tt-main .tt-sc-collection,
  body.tt-desktop #tt-main .tt-sc-product,
  body.tt-desktop #tt-main .tt-sc-post,
  body.tt-desktop #tt-main .tt-sc-product__content,
  body.tt-desktop #tt-main .tt-sc-post__content,
  body.tt-desktop #tt-main .tt-product-card,
  body.tt-desktop #tt-main .tt-post-card,
  body.tt-desktop #tt-main .tt-shop-results-core,
  body.tt-desktop #tt-main .tt-news-main{min-width:0!important;max-width:100%}

  body.tt-desktop #tt-main .tt-sc-product h3,
  body.tt-desktop #tt-main .tt-sc-post h3,
  body.tt-desktop #tt-main .tt-product-card h3,
  body.tt-desktop #tt-main .tt-post-card h3{overflow-wrap:anywhere;word-break:normal}

  /* Compact products: density follows actual container width rather than a fixed screen breakpoint. */
  body.tt-desktop #tt-main .tt-sc-collection.tt-sc-layout-grid.tt-sc-collection--products.tt-sc-items-compact{
    --tt-fluid-item-min:240px;
    grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--tt-fluid-item-min)),1fr))!important;
    gap:var(--tt-fluid-gap)!important;
  }

  /* Compact articles need more reading width than product cards. */
  body.tt-desktop #tt-main .tt-sc-collection.tt-sc-layout-grid.tt-sc-collection--posts.tt-sc-items-compact{
    --tt-fluid-item-min:300px;
    grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--tt-fluid-item-min)),1fr))!important;
    gap:var(--tt-fluid-gap)!important;
  }

  /* Horizontal cards automatically become 1/2/3/4 columns depending on actual available width. */
  body.tt-desktop #tt-main .tt-sc-collection.tt-sc-layout-grid.tt-sc-items-horizontal{
    --tt-fluid-item-min:520px;
    grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--tt-fluid-item-min)),1fr))!important;
    gap:var(--tt-fluid-gap)!important;
  }

  body.tt-desktop #tt-main .tt-sc-collection.tt-sc-items-featured{grid-template-columns:1fr!important}

  /* Native Shop cards also auto-fit instead of hard 3/4-column jumps. */
  body.tt-desktop.tt-route-shop #tt-main .tt-product-archive-core .tt-product-grid{
    grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))!important;
    gap:var(--tt-fluid-gap)!important;
  }

  /* Native News archive grid follows the actual width left after its sidebar. */
  body.tt-desktop.tt-route-news #tt-main .tt-news-grid{
    grid-template-columns:repeat(auto-fill,minmax(min(100%,285px),1fr))!important;
    gap:var(--tt-fluid-gap)!important;
  }

  /* Home Builder fallbacks/CPT blocks are fluid too. */
  body.tt-desktop #tt-main .tt-builder-category-grid,
  body.tt-desktop #tt-main .tt-category-grid{
    grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr))!important;
    gap:var(--tt-fluid-gap)!important;
  }
  body.tt-desktop #tt-main .tt-builder-content-grid{
    grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))!important;
    gap:var(--tt-fluid-gap)!important;
  }

  /* Keep actions inside every card even when a grid track becomes narrow. */
  body.tt-desktop #tt-main .tt-sc-actions,
  body.tt-desktop #tt-main .tt-card-actions{max-width:100%;min-width:0}
  body.tt-desktop #tt-main .tt-sc-price,
  body.tt-desktop #tt-main .tt-price{overflow-wrap:anywhere}
}

/* 1600/1680/1920/2K/4K: widen CONTENT only. Header/Footer remain at the locked shell width. */
@media (min-width:1600px){
  body.tt-desktop{--tt-content-max:clamp(1440px,88vw,2600px)}

  body.tt-desktop #tt-main>.tt-container:not(.tt-home-core),
  body.tt-desktop.tt-route-shop #tt-main .tt-product-archive-core.tt-container,
  body.tt-desktop.tt-route-news #tt-main .tt-news-page.tt-container{
    width:min(calc(100% - clamp(48px,4vw,128px)),var(--tt-content-max))!important;
    max-width:var(--tt-content-max)!important;
  }

  /* Home Builder sections may use the wider content width while the hero/header can stay visually stable. */
  body.tt-desktop #tt-main .tt-home-block{
    width:min(calc(100vw - clamp(48px,4vw,128px)),var(--tt-content-max));
    max-width:var(--tt-content-max);
    margin-left:50%;
    transform:translateX(-50%);
  }
}

/* Product compact density tuning by real monitor families. */
@media (min-width:1920px){
  body.tt-desktop #tt-main .tt-sc-collection--products.tt-sc-items-compact{--tt-fluid-item-min:250px}
  body.tt-desktop #tt-main .tt-sc-collection--posts.tt-sc-items-compact{--tt-fluid-item-min:310px}
  body.tt-desktop.tt-route-shop #tt-main .tt-product-archive-core .tt-product-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))!important}
}
@media (min-width:2560px){
  body.tt-desktop #tt-main .tt-sc-collection--products.tt-sc-items-compact{--tt-fluid-item-min:260px}
  body.tt-desktop #tt-main .tt-sc-collection--posts.tt-sc-items-compact{--tt-fluid-item-min:320px}
  body.tt-desktop #tt-main .tt-sc-collection.tt-sc-items-horizontal{--tt-fluid-item-min:560px}
}
@media (min-width:3200px){
  body.tt-desktop #tt-main .tt-sc-collection--products.tt-sc-items-compact{--tt-fluid-item-min:270px}
  body.tt-desktop #tt-main .tt-sc-collection--posts.tt-sc-items-compact{--tt-fluid-item-min:330px}
  body.tt-desktop #tt-main .tt-sc-collection.tt-sc-items-horizontal{--tt-fluid-item-min:600px}
}

/* 1280 x 1024 safety: compact cards should never be forced into 5/6 cramped tracks. */
@media (min-width:768px) and (max-width:1365px){
  body.tt-desktop #tt-main .tt-sc-collection--products.tt-sc-items-compact{--tt-fluid-item-min:245px}
  body.tt-desktop #tt-main .tt-sc-collection--posts.tt-sc-items-compact{--tt-fluid-item-min:300px}
  body.tt-desktop #tt-main .tt-sc-collection.tt-sc-items-horizontal{--tt-fluid-item-min:480px}
}


/* v3.8.6: Home hero remains on the locked header shell. Builder blocks below may still widen. */
@media (min-width:1600px){
  body.tt-desktop.home #tt-main .tt-home-core.tt-container{
    width:min(calc(100% - var(--tt-pad)*2),var(--tt-container))!important;
    max-width:var(--tt-container)!important;
  }
}