/* 2Lúa v2.4.11 — use the existing five-tab mobile navigation on tablet.
   Breakpoints: <1200px bottom tabbar; >=1200px desktop dock.
   Loaded last to override older 820px dock/layout media queries without
   changing the mobile (<=819px) design or the desktop design. */
@media (min-width: 820px) and (max-width: 1199px) {
  /* One global navigation only: no desktop dock or legacy tablet rail. */
  .tl-side-dock,
  .tl-app .tl-side-dock,
  .tl-tablet-rail,
  .tl-app .tl-tablet-rail,
  .tl-workspace-page .tl-workspace-rail {
    display: none !important;
  }
  .tl-app-shell { display: block; grid-template-columns: minmax(0,1fr); }
  .tl-desktop-nav,
  .tl-reference-home .tl-desktop-nav { display: none !important; }

  /* Bottom tabbar: the very same PHP links and JS sheet used on mobile. */
  .tl-bottom-nav--shared {
    display: grid !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    grid-template-columns: repeat(5, minmax(0, 130px));
    justify-content: center;
    align-items: stretch;
    z-index: 120 !important;
    padding: 7px max(12px, env(safe-area-inset-right))
      calc(7px + env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));
    background: color-mix(in srgb, var(--tl-card, #fff) 96%, transparent);
    color: var(--tl-text, #183e2f);
    border-top: 1px solid var(--tl-border, #dce7df);
    box-shadow: 0 -10px 28px rgba(22,55,32,.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    isolation: isolate;
  }
  .tl-bottom-nav--shared > a,
  .tl-bottom-nav--shared > button {
    min-width: 0;
    min-height: 54px;
    border: 0;
    padding: 0 6px;
    background: transparent;
    text-decoration: none;
    color: var(--tl-muted, #667c70);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font: inherit;
    cursor: pointer;
    touch-action: manipulation;
  }
  .tl-bottom-nav--shared .is-active,
  .tl-bottom-nav--shared [aria-current="page"] {
    color: var(--tl-accent, #087a4a);
    font-weight: 750;
  }
  .tl-bottom-nav--shared a > span,
  .tl-bottom-nav--shared button > span { font-size: 21px; line-height: 1.15; }
  .tl-bottom-nav--shared a > small,
  .tl-bottom-nav--shared button > small { font-size: 11px; font-weight: 650; line-height: 1.25; }
  .tl-bottom-nav--shared .tl-bottom-ai > span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-top: -16px;
    border: 4px solid var(--tl-card, #fff);
    border-radius: 50%;
    background: var(--tl-accent, #087a4a);
    color: #fff;
  }
  .tl-bottom-nav--shared > a:focus-visible,
  .tl-bottom-nav--shared > button:focus-visible {
    outline: 3px solid var(--tl-accent, #087a4a);
    outline-offset: -3px;
    border-radius: 12px;
  }
  body { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  .tl-site-footer { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }

  /* Give content the space previously reserved for the left desktop dock. */
  .tl-app .tl-v2-main,
  .tl-app .tl-workspace-layout,
  .tl-app .tl-policy-wrap,
  .tl-app.tl-policy-page--legal > .tl-policy-wrap,
  .tl-app .tl-contact-wrap,
  .tl-app .tl-news-page,
  .tl-app .tl-article-shell,
  .tl-app .tl-account-wrap,
  .tl-app .tl-profile-wrap,
  .tl-app .tl-social-layout,
  .tl-app .tl-farmer-console__inner,
  .tl-site-footer .tl-footer-grid,
  .tl-site-footer .tl-footer-bottom,
  body.home .tl-site-footer .tl-footer-grid,
  body.home .tl-site-footer .tl-footer-bottom {
    box-sizing: border-box;
    width: min(calc(100% - 40px), 1200px) !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .tl-app .tl-workspace-layout { display: block; }
  .tl-app .tl-workspace-main { min-width: 0; width: 100%; }
  .tl-policy-page--legal .tl-legal-layout { min-width: 0; }

  /* The mobile 'Thêm' overlay acts as a bottom sheet on tablets too. */
  .tl-quick-menu { align-items: end !important; z-index: 180 !important; }
  .tl-quick-menu__panel {
    width: min(100%, 660px);
    max-height: min(86dvh, 800px);
    border-radius: 26px 26px 0 0;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }
  body.admin-bar .tl-bottom-nav--shared { z-index: 120 !important; }
}

/* 768–819px tablets already have the bottom bar from the mobile styles.
   Remove the phone-sized 620/660px page cap in portrait tablet mode. */
@media (min-width: 768px) and (max-width: 819px) {
  .tl-app .tl-v2-main,
  .tl-app .tl-workspace-layout,
  .tl-app .tl-policy-wrap,
  .tl-app.tl-policy-page--legal > .tl-policy-wrap,
  .tl-app .tl-contact-wrap,
  .tl-app .tl-news-page,
  .tl-app .tl-article-shell,
  .tl-app .tl-account-wrap,
  .tl-app .tl-profile-wrap,
  .tl-app .tl-social-layout,
  .tl-app .tl-farmer-console__inner,
  .tl-site-footer .tl-footer-grid,
  .tl-site-footer .tl-footer-bottom {
    box-sizing: border-box;
    width: calc(100% - 32px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .tl-app .tl-container:not(.tl-topbar__inner),
  .tl-site-footer .tl-container {
    box-sizing: border-box;
    max-width: none !important;
  }
}