/* GT-W05-CATEGORY-PAGE-UNIFY-C1 (owner P0, 22 Oct 2026): ONE compact category page body for Xe / Điện tử / Làm đẹp.
   Boundary: the global header (#gtShell, the Saved chip) is W22's and is not styled here; everything BELOW it is this file.
   Hierarchy on every category page: heading (one line) -> AI search bar -> ONE secondary menu / filter bar -> results -> the rest.
   Nothing is removed: duplicate controls are hidden only where the same control stays reachable (listed per rule), moved blocks keep
   their nodes, and every policy / disclaimer sits in ONE expandable .gt-policy block (closed by default, keyboard reachable).
   The site has no dark theme (gt-butler.css D4-U3-R2 note: body / cards / panels stay #fff under both colour schemes), so every
   colour here is one value for both schemes; contrast is checked against white / the stated tint (test/contrast.mjs). */

:root{--gt-content:1320px}

/* ---------- shared: the policy / disclaimer block (one place, expandable, accessible) ---------- */
.gt-policy{border:1px solid #E5E7EB;border-radius:12px;background:#F9FAFB;margin:8px 0;font-size:13px;color:#374151;line-height:1.55}
.gt-policy>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;min-height:40px;padding:8px 12px;font-weight:700;color:#1F2937}
.gt-policy>summary::-webkit-details-marker{display:none}
.gt-policy>summary::after{content:"▾";margin-left:auto;color:#4B5563;font-size:12px}
.gt-policy[open]>summary::after{content:"▴"}
.gt-policy>summary:focus-visible{outline:3px solid #047857;outline-offset:2px;border-radius:10px}
.gt-policy .gt-policy-body{padding:0 12px 10px}
.gt-policy .gt-policy-body p{margin:6px 0}
.gt-policy .xm-banner,.gt-policy .gt-alert,.gt-policy .card{margin:8px 0}
.gt-policy .hero-note,.gt-policy .hero-sub{max-width:none;margin:6px 0;text-align:left;font-size:13px;color:#374151}

/* ---------- shared: the AI search bar (vehicles #flagship and the goods butler host use the same look) ---------- */
.gt-aibar,#flagship.ai-flagship{background:linear-gradient(165deg,#ECFDF5,#FFFFFF 70%);border:1.5px solid #A7F3D0;border-radius:14px;box-shadow:none}
.gt-aibar .gtb-head{font-size:13.5px;font-weight:700;color:#065F46;gap:8px;flex-wrap:wrap;justify-content:flex-start;padding:8px 12px 0}
.gt-aibar .gtb-head .gtb-muted{font-size:12.5px;color:#374151}
.gt-aibar .gtb{padding:4px 12px 8px}
.gt-aibar .gtb-ai-banner{margin:0 0 6px;padding:6px 10px}
.gt-aibar .gtb-ai-sub{font-size:12px}
.gt-aibar .gtb-chips{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;scrollbar-width:none}
.gt-aibar .gtb-chips::-webkit-scrollbar{display:none}
.gt-aibar .gtb-messages:empty,.gt-aibar .gtb-cards:empty{display:none}
.gt-aibar .gtb-input::placeholder,#flagship .ff-input::placeholder{color:#6B7280;opacity:1}
.gt-aibar .gtb-foot{font-size:11.5px;color:#4B5563}

/* ---------- goods pages (Điện tử / Làm đẹp): compact heading, one container, results first ---------- */
.gt-goods .pgwrap{max-width:var(--gt-content);padding:8px 16px 40px}
.gt-goods .cat-hero{padding:10px 16px;margin:6px 0 4px;border-radius:12px}
.gt-goods .cat-hero h1{font-size:20px;line-height:26px;margin:0}
.gt-goods .cat-hero p{font-size:13px;line-height:18px;margin:2px 0 0}
.gt-goods .gt-goods-h{font-size:16px;line-height:22px;margin:8px 0 2px}

.gt-goods #gtb-goods{margin:6px 0 8px}
.gt-goods #extrefMount .tabs{margin:4px 0 8px!important}
@media(min-width:1240px){.gt-goods #extrefMount .grid3{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* ONE filter renderer: with scripts on, the static no-JS fallback (#gtseoRefFallback) never paints; the client bar + grid render once
   into the reserved box (no swap). Without scripts, or when the data fails to load (gt-extref-failed), the fallback shows as before. */
html.gt-js .gt-goods #gtseoRefFallback{display:none}
html.gt-js.gt-extref-failed .gt-goods #gtseoRefFallback{display:block}
html.gt-js .gt-goods #extrefMount{min-height:420px}
/* missing approved photo: one small icon tile per card (label stays as aria-label / title), not a repeated large block */
.gt-goods .xm-photo-fallback.gt-nophoto{width:56px;height:56px;padding:0!important;display:flex;align-items:center;justify-content:center}
.gt-goods .xm-photo-fallback.gt-nophoto svg{width:28px;height:28px}
.gt-goods .gt-seller-h{font-size:16px;line-height:22px;margin:14px 0 4px}

/* ---------- vehicles (/): one header, one heading line, one AI bar, ONE secondary menu, then the listings ---------- */
/* the platform category strip duplicates the shell header's own category links (/, /property, /dien-tu, /lam-dep, /bang-gia in
   gt-shell.js) from 1121 px up, where the shell shows them: hidden there (shell mounted only). Below 1121 px the shell folds those links into
   its menu, so the strip stays - as ONE compact scrolling chip row (staff evidence, Martin, Android 390 px: the 2x2 cards + pricing banner
   filled the first phone screen). The goods pages carry the same strip (.gt-catstrip). */
@media(min-width:1121px){body.gt-shell-mounted .xmcat-wrap{display:none}}
body .xmcat-wrap.gt-catstrip{background:#fff;border-bottom:1px solid #E5E7EB;margin:0 -16px 4px;padding:4px 16px}
@media(max-width:1120px){
  body .xmcat-wrap{padding:4px 12px}
  body .xmcat-wrap .xmcat-in{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;height:36px}
  body .xmcat-wrap .xmcat-in::-webkit-scrollbar{display:none}
  body .xmcat-wrap .xmcat{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:999px;border:1px solid #E5E7EB;background:#fff;color:#101828;text-decoration:none;grid-column:auto}
  body .xmcat-wrap .xmcat small{display:none}
  body .xmcat-wrap .xmcat .ic{font-size:16px;line-height:1}
  body .xmcat-wrap .xmcat b{font-size:13px;line-height:1;white-space:nowrap}
  body .xmcat-wrap .xmcat.on{border-color:#047857;background:#ECFDF5}
  body .xmcat-wrap .xmcat.price{background:#065F46;border-color:#065F46;color:#fff}
}
@media(min-width:1121px){body .xmcat-wrap.gt-catstrip .xmcat-in{display:flex;gap:6px}body .xmcat-wrap.gt-catstrip .xmcat{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:999px;border:1px solid #E5E7EB;text-decoration:none;color:#101828}}
main.wrap{max-width:var(--gt-content)}
#gtCatPolicy{margin:10px 0}
@media(max-width:1279px){
  body .hero .hero-inner2{max-width:var(--gt-content);display:flex;flex-wrap:wrap;align-items:center;column-gap:12px;row-gap:4px;padding:8px 16px 4px;text-align:left}
  body .hero .hero-inner2>*{flex:1 1 100%}
  body .hero .hero-inner2>.hero-h1{flex:0 1 auto;font-size:22px;line-height:28px;height:28px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  body .hero .hero-inner2>#stats{flex:1 1 200px;margin:0}
  body #flagship.ai-flagship{max-width:none;margin:2px 0 0;padding:6px 10px}
  body #flagship>.ff-head{height:24px;margin:0 0 4px;flex-wrap:nowrap;white-space:nowrap;overflow:hidden}
  body #flagship .ff-k{font-size:14px;line-height:24px}
  body #flagship>.ff-inputrow{flex-wrap:nowrap;height:61px}
  body #flagship .ff-input{height:44px;min-height:44px;padding:10px 12px;font-size:16px}
  body #flagship .ff-go{flex:0 0 auto;height:44px;min-height:44px;padding:0 14px}
  body main.wrap{padding-top:6px}
  body #gtJumpGrid{display:none}
  body #stats.stats{display:block;height:18px;min-height:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  body #stats.stats::-webkit-scrollbar{display:none}
  body #stats .stat-line{line-height:18px;white-space:nowrap}
  body main.wrap .navwrap{margin:0 0 6px}
  body #tabs.tabs{height:44px;gap:4px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  body #tabs.tabs::-webkit-scrollbar{display:none}
  body #tabs.tabs button{flex:0 0 auto;padding:7px 11px;white-space:nowrap}
  body #tab-list>#vstat{margin:0 0 6px}
  body #tab-list>.rsearch{margin:0 0 6px}
  body #presets.presets{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
}
@media(max-width:480px){
  body .hero .hero-inner2>.hero-h1{font-size:19px;line-height:26px;height:26px}
  body #flagship .ff-k{font-size:13px}
}
/* the secondary menu's heading is visually hidden (the tab row is labelled for assistive tech instead); the two groups
   (vehicle type | features: Showroom, Services, Videos, Market, Models, Trending, Tools) keep the existing .tsep divider */
body main.wrap .navwrap>.nav-h{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* the hero quick buttons repeat six #tabs buttons (Xe máy, Tay ga, PKL, Ô tô, Xe sang, Bảng giá) - the tab row keeps every one */
#gtFoldMore .hero-quick{display:none}
.gt-goods #gtCatPolicy{margin:4px 0 8px}
/* vehicles: ONE filter renderer - the static no-JS list (#gtseoFallback, inside #grid) never paints when scripts run; the bundle's cards
   render into the reserved box. If the bundle has not replaced it 12 s after load (gt-grid-fallback), it shows again. */
html.gt-js #gtseoFallback{display:none}
html.gt-js.gt-grid-fallback #gtseoFallback{display:block}
html.gt-js #grid{min-height:420px}
/* owner addendum (d)/(g): the approved first-party seller listings sit first and compact; the AI bar's slot is reserved in the static page
   (no jump when it mounts) - only while the assistant can still mount (data-empty is set when it will not) */
.gt-goods #sellerPubWrap{padding:10px 14px;margin:4px 0 8px}
html.gt-js .gt-goods #gtbGoodsSlot:empty:not([data-empty]){min-height:186px}
.gt-goods #gtbGoodsSlot #gtb-goods{margin:0 0 8px}